HTML (HyperText Markup Language)

HTML is a mark-up language used to describe the structure of web page.
HTML is not a programming Language BECAUSE it can't control the behavior of software & one can't generate his/her ideas using HTML.

NOTE
A markup language consists of mark-up tags which tells the browser how to structure/display a particular document. WHILE HyperText refers to the process of linking one or more web pages with each other.


BASIC HTML STRUCTURE
[html]



Basic HTML Document Structure

Hello Docukits!!



[/html]


Creating a Web Page
Web Pages can be created and modified by various HTML Editors like:

  1. Notepad
  2. Notepad++
  3. Edit+
  4. Sublime
  5. Dreamweaver

Steps for Creating a basic HTML Page
1. Open Editor(Notepad++)
2. Write the following HTML Code
[html]



Basic HTML Document Structure

Hello Docukits!!



[/html]

3. Save the file with extension .html or .htm

4. Open the file in any web browser


Browser Rendering

How does Browser understands HTML

The main objective of web browser is present in the web resources required to you and display it in the browser window. Almost all the browsers follow these basic steps to provide you with the requested web resources.

Step 1:

The rendering engine gets the content of the requested document from the networking layer.
Different browsers use different rendering engines:
1. Internet Explorer uses Trident
2. Firefox uses Gecko
3. Safari uses Webkit
4. Chrome & Opera(from version 15) use Blink, a fork of Webkit.

Step 2:

It parses HTML to construct DOM(Document Object Model) Tree.
The DOM construction is incremental, meaning that the DOM construction is started as soon as the browser receives the HTML rather than waiting for the whole page to load.

Step 3:

It parses CSS(if available) to construct CSSDOM (CSS Object Model) Tree.
The CSS construction is not incremental,thus the page rendering is blocked unless whole of the CSS file is loaded.

Step 4:

The DOM contains all the content of the page.
The CSSDOM contains all the style of the page.
The DOM Tree and CSSDOM Tree are combined to form a Renderer Tree.It only captures the visible content.

Step 5:

Next comes the Layout step, where the positions and dimensions of the content in calculated according to the viewport(browser's) size.
The layout depends on the size of the browser so everytime when you change the orientation or change the size of the browser has to return the layout step.

Step 6:

The layout is then handed to the Paint which renders the pixel on the page.


HTML ELEMENTS

The building blocks of HTML Pages are HTML Elements which contain three main parts:

  • Opening Tag
  • Content
  • Closing Tag

These tags are enclosed within angle braces.

Opening Tag: This consists of the name of the element , wrapped in opening and closing angle brackets. It states where the element begins or start to take effect .

Content: This is the actual content.

Closing Tag:This is the same as the Opening Tag, except that it includes a forward slash before the element name .This states where the element ends.

Syntax       
[html]
Content
[/html]


HTML Attributes

Provide additional information about an element.They are always placed in start tag and they usually come in name-value pairs like name="value".

An attribute should have:

  1. A space between it and element name(or the previous attribute, if the element already has one or more attributes)
  2. The attribute name, followed by an equal sign.
  3. An attribute value, with openinng and closing quote marks wrapped around it.

Syntax       
[html]
Content
[/html]
NOTE
An attribute value can be inside single or double quotes
[html]
Link Example
Link Example
[/html]
Both are correct.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:
[html]
A Link to my example
[/html]
or vice versa
[html]
A Link to my example
[/html]


HTML Comments
Comment is a piece of code which is ignored by web browser.
In HTML comments are placed between <!-- -->
[html]

[/html]

Advantages of writting comments

  1. It is used to describe how your code works, so that when you look into it after a long period of time and don't remember what it was for, comments can help you out in that situation.
  2. Whenever your code is being referred by someone else, he can quickly get the purpose of that block of code and the way it works.
NOTE
You can't nest a comment i.e. putting comment inside a comment.
[html]
-->
[/html]
This code is incorrect.