Learn HTML Step by Step

Hypertext Markup Language:

HTML stands for Hyper Text Markup Language. HTML was invented by Tim Berners-Lee.  An HTML file is a text file containing small markup tags. The markup tags tell the Web browser how to display the page An HTML file must have an .htm or .HTML file extension. An HTML file can be created using a simple text editor like notepad or wordpad.

HTML Basic Lessons

Html Advance Lessons

Let me know if there is mistake or any improvement required in any section of this tutorial.

Differences Between XHTML And HTML

What makes XHTML different from HTML

  • Tag and attribute names must be in lower-case
  • Elements must be nested properly, no overlapping
  • Non-empty elements must be closed
  • Empty elements must be terminated
  • All attribute values must be quoted
  • Attribute value pairs cannot be shortened
  • <script> and <style> elements

Tag and attribute names must be in lower-case

XHTML element and attribute names must be written in lowercase,as XML is case-sensitive, No longer you can get away with what people did to improve readability of the code — typing the attributes and elements names in uppercase and the values in lowercase. Attribute values can be any case you want. For example, the “#ffcc33” value below can also be written as “#FFCC33.”


HTML

XHTML
<TD BGCOLOR=”#ffcc33″>

<td bgcolor=”#ffcc33″>

Elements must be nest properly, no overlapping

Browsers wont care overlaped elements in most case. For example, if there is bold tag at the end of a paragraph, it doesnot matters whether to close the </b> first or the </p>. But with XML and XHTML, we have to unclose the last opened tag first and then first opened

HTML
XHTML
<p>Be <b>bold!</p></b> <p>Be <b>bold!</b></p>

Overlapping is widely tolerated in HTML,though it is illegal. An XHTML document must be well-formed XML. It should follow the basic XML syntax. If it fails doing so, There will be no obligation to continue processing of the document bythe XML parser.XML parser will not try to recover and “guess” what you meant if the syntax is wrong as HTML parser did.

Non-empty elements must be closed

either Explicitly or Implicitly all elements must be closed. Since the <p> is designed to mark the beginning and end of a paragraph it is a “non-empty” tag .Thus it must be closed at the end of paragraph

HTML XHTML
First paragraph<p> Second paragraph<p> <p>First paragraph</p> <p>Second paragraph</p>

Affected Elements: <basefont>, <body>, <colgroup>, <dd>, <dt>, <head>, <html>, <li>, <p>, <tbody>/<thead>/<tfoot>, <th>/<td>, <tr>

Empty elements must be terminated

There are tags which contains no content within them, when we feel there is no important role to play by them, then should delete those empty tags. <p> tag contains a paragraph, and a <b> tag contains text to be bolded, a <br> tag is “empty” as it never contains any content.Other tags like this are <hr> and <img src=”valid.gif”>

HTML XHTML

<hr>

<hr />
<br> <br />
<input … > <input … />
<param … > <param … />
<img src=”valid.gif”> <img src=”valid.gif” />

Affected Elements: <area> <base> <br> <col> <frame><hr><img> <input><isindex><link><meta> <option><param>

All Attribute values must be quoted

No more <img … border=0>is allowed type.Attribute values including numeric values must be quoted

HTML XHTML
<img … border=0> <img … border=”0″ />

Attribute value pairs cannot be minimized

Usually we try to minimize the attribute if it has single value.But XML does not allow attribute minimization.Single valued or stand-alone attributes in XHTML must be expanded (eg. <td nowrap>text </td> becomes <td nowrap=”nowrap”>text</td>). umeric

HTML XHTML
<dl compact> <dl compact=”compact”>
<ul compact> <ul compact=”compact”>
<option … selected> <option … selected=”selected”> >
<td nowrap> text </td> <td nowrap=”nowrap”> text </td>
<input … checked> <input … checked=”checked” />
<input … checked> <input … checked=”checked” />

<script> and <style> elements

The script and style elements in XHTML, are declared as having #PCDATA content. As a result, < and & will be treated as the start of markup, and entities such as < and & will be recognized as entity references by the XML processor to < and & respectively.We can avoid the expansion of these entities by Wrapping the content of the script or style element within a CDATA marked section. The string which ends the CDATA section.”]]>” is The only delimiter that is recognized in a CDATA.

XHTML

<scripttext/javascript”> <![CDATA[ document.write(“<b>Hello World!</b>”); ]]> </script>

Affected Elements: <basefont>, <body>, <colgroup>, <dd>, <dt>, <head>, <html>, <li>, <p>, <tbody>/<thead>/<tfoot>, <th>/<td>, <tr>

HTML Doctypes

HTML doctypes

A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly.

Example
An HTML document with a doctype of HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>

<title>Title of the document</title>
</head>
<body>
The content of the document……
</body>

</html>

HTML Different Doctypes

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

The doctype declaration should be the very first thing in an HTML document, before the <html> tag.

Tip: Always add a doctype to your pages. This helps the browsers to render the page correctly!

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font and center). Framesets are not allowed:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
http://www.w3.org/TR/html4/strict.dtd“>

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd“>

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
http://www.w3.org/TR/html4/frameset.dtd“>

Tips and Notes:

Use W3C’s Validator to check that you have written a valid HTML / XHTML document!

HTML DOCTYPE Element

Tag Description
<!DOCTYPE> Defines the document type. This declaration goes before the <html> start tag

Validation tools

You can use several tools to validate your documents. Tools you have at your disposal include the following:

✦ The online W3C HTML validation tool, found at http://validator.w3.org/.

✦ Validation utilities built in to Web development tools such as Adobe’sDreamweaver.

HTML Div

Html – Div element

The Tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element, anything else should be reserved for CSS.
• id
• width
• height
• title
• style

For the purpose of this example, we have included the style attribute in order to color our div tag in order to bring a stronger visualization for our viewers.
HTML Code:

<div style=”background: green;”>
<h5>SEARCH LINKS</h5>
<a href=”http://www.google.com” target=”_blank”>Google</a>
</div>

OUTPUT:

SEARCH LINKS

Google

Above is a great visual about how a div plays the role of a container for other HTML elements, applying a background color/image is the only real way to visualize your div tags.

Html – Div Layouts

When HTML first began, web creators only had two choices. A table layout, orframes. The div element provides a 3rd alternative, since a div can contain any/every other type of html element within its beginning and ending tag.
HTML Code:

<div id=”menu”><a>HOME</a> |
<a>CONTACT</a> |
<a>ABOUT</a></div>
<div id=”content”>
<h5>Content Articles</h5>
This paragraph would be your content paragraph with all of your readable material.
</div>

OUTPUT:

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Advanced web developers find div elements to be far easier to work with than tables, adding more content or more links to our previous example might demonstrates why a div is simpler to work with. Let’s add a “LINKS” page to our menu, and another article of content below the existing content.

HTML Div Layout II

HTML Code:

<div align=”right” >
<a href=””>HOME</a> |
<a href=””>CONTACT</a> |
<a href=””>ABOUT</a> |
<a href=””>LINKS</a>
</div>

<div align=”left” >
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
<h5 >Content Article Number Two</h5>
<p>Here’s another content article right here.</p>
</div>

OUTPUT:

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Content Article Number Two

Here’s another content article right here.

HTML Fonts

HTML Fonts

Html Font and basefont

The <font> tag is used to add style, size, and color to the text on your site. Use the sizecolor, and face attributes to customize your fonts. Use a <basefont> tag to set all of your text to the same size, face, and color.

The font and basefont tags are deprecated and should not be used. Instead, use css styles to manipulate your font.

font size

Set the size of your font with size. The range of accepted values is from 1(smallest) to 7(largest).The default size of a font is 3.

HTML Code:

<p>
<font size=”5″>Here is a size 5 font</font>
</p>

OUTPUT:

Here is a size 5 font.

Font Color

Set the color of your font with color.

HTML Code:

<font color=”#990000″>This text is hexcolor #990000</font>
<br />
<font color=”red”>This text is red</font>

OUTPUT:

This text is hexcolor #990000
This text is red

font face

Choose a different font face using any font you have installed. Be aware that if the user viewing the page doesn’t have the font installed, they will not be able to see it. Instead they will default to Times New Roman. An option is to choose a few that are similar in appearance.

HTML Code:

<p>
<font face=”Bookman Old Style, Book Antiqua, Garamond”>This paragraph has had its font…</font>
</p>

Font Face:

This paragraph has had its font formatted by the font tag!

Basefont – set a solid base

With the basefont tag you will be able to set the default font for your web page. We highly recommend specifying a basefont if you plan on using any font with HTML. Below is the correct way to set your basefont.

HTML Code:

<html>
<body>
<basefont size=”2″ color=”green”>
<p>This paragraph has had its font…</p>
<p>This paragraph has had its font…</p>
<p>This paragraph has had its font…</p>
</basefont>
</body>
</html>

OUTPUT:

This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!

However, the use of basefont is deprecated, which means it may not be supported sometime in the future. The perfectly correct way to change your sites basefont is to set it with CSS.

Attribute review

Attribute “Value” Description
size= “Num. Value 1-7” Size of your text, 7 is biggest
color= “rgb,name,or hexidecimal” Change font color
face= “name of font” Change the font type

Beautiful first letter style

You can easily customize your fonts to achieve any of your desired looks.

HTML Code:

<p>
<font size=”7″ face=”Georgia, Arial” color=”maroon”>C</font>ustomize
your font to achieve a desired look.</p>

OUTPUT:

Customize your font to achieve a desired look.

Tips

  • Don’t use font tags if at all possible! Use CSS Styles instead!
  • Fonts add character and orginality to sights, so long as they’re not overused or unreadable.
  • Use consistant fonts throughout your site.
  • Nobody enjoys sights that are hard to read, keep your fonts legible!

Use formatting tags rather than the font tag for bold or italic texts.

HTML Images

HTML Images – The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for “source”. The value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:

<img src=”url” alt=”some_text“/>

The URL points to the location where the image is stored. An image named “baby.png”, located in the “images” directory on “www.paktutorial.com” has the URL:http://www.paktutorial.com/images/baby.png.

The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.


HTML Images – The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The value of the alt attribute is an author-defined text:

<img src=”baby.png” alt=”Small Baby” />

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).


HTML Images – Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

<img src=”pulpit.jpg” alt=”Pulpit rock” width=”304″ height=”228″ />

Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).


Basic Notes – Useful Tips

Note: If an HTML file contains ten images – eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.

Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.

IMG
IMG stands for “image.”

It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag.

SRC
SRC stands for “source.” This again is an attribute, a command inside a command. The value of the src attribute is the URL of the image you want to display on your page. It’s telling the browser where to go to find the image. Again, it’s best for you to place the images you want to use in the same directory as the page. This way you can call for the image by name alone. If you start to place your images all over the place, you’ll have to start adding directories and sub-directories to the SRC attribute. And at this point, that is way too confusing. Just place the image in the same place as the HTML document that will call for it and then call for the image by name alone. You can get fancy later. Right now, let’s just get it to work.
image.gif
image.gif is the name of the image. Notice it’s following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).
ALT
ALT stands for “alternate text”. This tells the browser that if it can’t find the image, then just display this text. It also tells anyone who can’t view your image what the image is about.

Image Formats
There are four basic formats you will find on the World Wide Web
.gif
gif This is pronounced “jif” or “gif” (hard “G”) depending on whom you speak to. I have always said “jif”, like the peanut butter. This is an acronym for Graphics Interchange Format. The format was invented by Compuserve and it’s very popular. The reason is that it’s a simple format. It’s a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television’s picture is created much the same way. Browsers can handle this format quite easily.
.png
.png .png Pronounced as ‘ping’, this stands for Portable Network Graphic. This is ultimately the replacement for .gif, with partial transparency options, but browser support is sometimes disappointing, so try experimenting but don’t expect miraclesin older browsers! Even some of the newer ones don’t like partial transparency.
.jpeg or .jpg
.jpeg or .jpg (pronounced “j-peg”) There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format. The format is unique in that it uses compression after it’s been created.

.bmp

.bmp (pronounced “bimp”) This is a “bitmap.” You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example.
Even though Internet Explorer will allow you to place an image as a BMP, I wouldn’t. No other browsers will be able to display it. Go with .gif or JPEG.

Html Iframes

HTML Iframe Tags

An iframe is used to display a web page within a web page. Defines an inline sub window (frame).

Tag Description
<iframe> Defines an inline sub window (frame)

<iframe src=”http://www.paktutorial.com“></iframe>

Syntax for adding an iframe:

<iframe src=”URL“></iframe>

The URL points to the location of the separate page.


Iframe – Set Height and Width

The height and width attributes are used to specify the height and width of the iframe.

The attribute values are specified in pixels by default, but they can also be in percent (like “80%”).

Example

<iframe src=”demo_iframe.htm” width=”200″ height=”200″></iframe>

Iframe – Remove the Border

The frameborder attribute specifies whether or not to display a border around the iframe.

Set the attribute value to “0” to remove the border:

Example

<iframe src=”demo_iframe.htm” frameborder=”0″></iframe>

Use iframe as a Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of a link must refer to the name attribute of the iframe:

Example

<iframe src=”demo_iframe.htm” ></iframe>
<p><a href=”http://www.paktutorial.com” target=”iframe_a”>Paktutorial.com</a></p>



HTML Tags

HTML Tags

Informally, HTML elements are sometimes referred to as “tags”, though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element.

  • HTML tags are used to mark-up HTML elements
  • HTML tags are surrounded by the two characters < and >
  • The surrounding characters are called angle brackets
  • HTML tags normally come in pairs like <i> and </i>
  • The first tag in a pair is the start tag(<i>), the second tag is the end tag(</i>)
  • The element content is the text between the start and end tags
  • HTML tags are not case sensitive, <b> means the same as <B>

Why do We Use Lowercase Tags?

Start using lowercase tags, if you want to prepare yourself for the next generations of HTML. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML – the next generation HTML – demands lowercase tags.

HTML Basic Tags

  • The basic tags include <HTML>, <title>, <meta>, and <body>.

<HTML>

This tag is used to indicate that this is an HTML document.

This tag is used to indicate the header section of the HTML document, which typically includes the <title> and <meta> tags, and is not displayed in the main window of the browser.

<title>

This tag indicates the title of this HTML page. The title is what is displayed on the upper left corner of the browser when you view a web page. For example, right now you can see there “Basic Tags: HTML, head, title, meta, body”. That is the title of this page.

The title tag is important when it comes to search engine ranking. Many of the search engines pay special attention to the text in the <title> tag. This is because (logically) that words in the <title> tag indicate what the page content is.

<meta>

The <meta> tag information is not directly displayed when the page is rendered on the browser. Rather, this is used for the author of the HTML page to record information related to this page. Two common attributes are name and content. The <meta> tag used to hold great importance in search engine optimization, with authors carefully drafting what’s inside the tag to gain better search engine ranking, but recently its importance has been decreasing steadily.

<body>

The <body> tag includes the HTML body of the document. Everything inside the <body> tag (other than those within the <script> tag) is displayed on the browser inside the main browser window.
The <body> tag may contain several attributes. The most commonly used ones are listed below:
  • bgcolor: This is the background color of the entire HTML document, and may be specified either by the color name directly or by the six-digit hex code.
  • alink: The color of the links.
  • vlink: The color of the visited links.
  • topmargin: The margin from the top of the browser window.
  • leftmargin: The margin from the left of the browser window.

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.

Line Breaks

The <br> tag is used when you want to end a line, but don’t want to start a new paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
<!– This is a comment –>
Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

<font>

The <font> tag is used to change the format of the text on the web page.
The most important attributes are as follows:
face: The type of font. Common ones include “Time New Roman”, “Verdana”, and “Helvetica.”
size: This indicates the size of the text. This can be absolute (0 .. 6), or relative (“+1”, … or “-1”,…)
color: This attribute indicates the color of the text. Either the color name or the six-character color code may be used to specify color.
<font size=2 face=”Helvetica” color=red>This illustrates the attributes of the font tag.</font>

HTML Text Formatting Tags

HTML defines a lot of elements for formatting output, like bold or underline text.

<b>

The <b> tag will bold the text inside the tag.

<i>

The <i> tag will italicize the text inside the tag.

<u>

The <u> tag will underline the text inside the tag.

<center>

The <center> tag causes all the text within the tag to be centered.

<p>

The <p> tag indicates a new paragraph. It is the same as <br><br>. This tag is most often used by itself, without a corresponding closing tag.

<big>

Defines big text

<em>

Defines emphasized text

<small>

Defines small text

<strong>

Defines strong text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

<ins>

Defines inserted text

<del>

Defines deleted text

“Computer Output” Tags

<code>

Defines computer code text

<kbd>

Defines keyboard text

<samp>

Defines sample computer code

<tt>

Defines teletype text

<var>

Defines a variable

<pre>

Defines preformatted text
Why do We Use Lowercase Tags?
Start using lowercase tags, if you want to prepare yourself for the next generations of HTML. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML – the next generation HTML – demands lowercase tags.

HTML Elements

An HTML element indicates structure in an HTML document and a way of arranging content hierarchically. An HTML element is an SGML element that meets the requirements of one or more of the HTML DTDs (Document Type Definitions ). These elements have properties: both attributes and content, as specified (both allowable and required) according to the appropriate HTML DTD . Elements may represent paragraphs, headings, hypertext links, lists, embedded media, and a variety of other structures.
  • HTML documents are text files made up of HTML elements.
  • HTML elements are defined using HTML tags.
HTML Tags
Informally, HTML elements are sometimes referred to as “tags”, though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element.
  • HTML tags are used to mark-up HTML elements
  • HTML tags are surrounded by the two characters < and >
  • The surrounding characters are called angle brackets
  • HTML tags normally come in pairs like <i> and </i>
  • The first tag in a pair is the start tag(<i>), the second tag is the end tag(</i>)
  • The element content is the text between the start and end tags
  • HTML tags are not case sensitive, <b> means the same as <B>

The Basic Html tags are explained below:

<HTML>
This tag is used to indicate that this is an HTML document. Most HTML documents should start and end with this tag.
<head>
This tag is used to indicate the header section of the HTML document, which typically includes the <title> and <meta> tags, and is not displayed in the main window of the browser.
<title>
This tag indicates the title of this HTML page. The title is what is displayed on the upper left corner of the browser when you view a web page. For example, right now you can see there “Basic Tags: HTML, head, title, meta, body”. That is the title of this page.

The title tag is important when it comes to search engine ranking. Many of the search engines pay special attention to the text in the <title> tag. This is because (logically) those words in the <title> tag indicate what the page content is.

<meta>
The <meta> tag information is not directly displayed when the page is rendered on the browser. Rather, this is used for the author of the HTML page to record information related to this page. Two common attributes are name and content. The <meta> tag used to hold great importance in search engine optimization, with authors carefully drafting what’s inside the tag to gain better search engine ranking, but recently its importance has been decreasing steadily.