Recent Posts
recent

HTML Introduction

What is HTML?
HTML is a language for describing web pages.
  • HTML stands for Hyper Text Markup Language.
  • HTML is a markup language.
  • HTML is used to create Static Web Applications.
  • HTML is also called as Presentation Language or Formatting Language or Markup Language.
  • A markup language is a set of markup tags.
  • The tags describe document content.
  • HTML documents contain HTML tags and plain text.
  • HTML documents are also called web pages.

Web Application

Web Application is a distributed application which is runs on web browser and web server.

Web application is two types:

  1. Static Web Application.
  2. Dynamic Web Application.

Static Web Application:

Static Web Application is a Web Application which resides in server and executes in browser.

  • Static Web Applications can be developed by using HTML, CSS, JAVA SCRIPTS, VB SCRIPTS, ...... etc.

Dynamic Web Application:

Dynamic Web Application is a Web Application which resides in server and executes in server only.
  • Dynamic Web Applications can be developed by using SERVLETS, JSP, ASP, PHP,...... etc.

HTML Versions

Since the early days of the web, there have been many versions of HTML:


Version                             Year

HTML                                1991
HTML+                              1993
HTML 2.0                          1995
HTML 3.2                          1997
HTML 4.01                        1999
XHTML 1.0                        2000
HTML5                               2012
XHTML5                            2013

HTML Elements

"HTML tags" and "HTML elements" are often used to describe the same thing.

But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags.

HTML Element: 

<p>This is a paragraph.</p>

HTML Elements are two types:

  1. HTML Tags.
  2. Attributes.

HTML Tags:

HTML markup tags are usually called HTML tags.
A HTML Tag is used to describe the content.

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags
  • <tagname>content</tagname>

HTML Tags are two types:

  1. Empty Tags.
  2. Body Tags.

Empty Tags: 

Empty Tags contains only Open Tags.

Without Attributes: 

Example:  <tagname>

With Attributes: 

Example:  <tagname attribute value>

Body Tags:

Body tags contains both Open Tags and Close Tags.

Without Attributes: 

Example:  <tagname> ----------- </tagname>

With Attributes: 

Example:  <tagname attribute value> ------------ <tagname>

HTML Page Structure:

Below is a visualization of an HTML page structure:

          <html>
          <body>

                   <h1>This a heading</h1>

                          <p>This is a paragraph.</p>
                          <p>This is another paragraph.</p>

          </body>
          </html>


Example:

          <!DOCTYPE html>
          <html>
          <body>

                 <h1>My First Heading</h1>

                 <p>My first paragraph.</p>

           </body>
           </html>

Example Explained:

  • The DOCTYPE declaration defines the document type
  • The text between <html> and </html> describes the web page
  • The text between <body> and </body> is the visible page content
  • The text between <h1> and </h1> is displayed as a heading
  • The text between <p> and </p> is displayed as a paragraph
Note: The <!DOCTYPE html> declaration is the doctype for HTML5

Writing HTML Using Notepad or TextEdit:

HTML can be edited by using a professional HTML editor like:

  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML.

Follow the 4 steps below to create your first web page with Notepad:

Step 1: Start Notepad

To start Notepad go to:
Start --->All Programs --->Accessories --->Notepad.

Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad.

Step 3: Save Your HTML

Select Save as.. in Notepad's file menu.

When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
Example: Filename.html or Filename.htm


Step 4: Run the HTML in Your Browser

Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.

Web Browsers

The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages.
Unknown

Unknown

No comments:

Post a Comment

Powered by Blogger.