Home

HTML

This element tells your browser that the file contains HTML-coded information. The file extension .html also indicates this is a HTML document and must be used. (If you are restricted to 8.3 filenames (e.g., LeeHome.htm, use only .htm for your extension.) 

The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser's window (see below). 

The title element contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window itself. The title is also what is displayed on someone's hot list or bookmark list, so choose something descriptive, unique, and relatively short. A title is also used to identify your page for search engines (such as HotBot or Info seek). 

For example, you might include a shortened title of a book along with the chapter contents: NCSA Mosaic Guide (Windows): Installation. This tells the software name, the platform, and the chapter contents, which is more useful than simply calling the document Installation. Generally you should keep your titles to 64 characters or fewer. 

The second--and largest--part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window). The tags explained below are used within the body of your HTML document. 

For Example:--

HTML Tutor Lesson 1

Whenever you make a change to your document, just save it, then hit the Reload / Refresh button on your browser.

HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are typically displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1>. 

The syntax of the heading element is: 
<Hy>Text of heading </Hy> 
where y is a number between 1 and 6 specifying the level of the heading. 

Do not skip levels of headings in your document. For example, don't start with a level-one heading (<H1>) and then next use a level-three (<H3>) heading. 

We can make things bold.

For Example:--

HTML Tutor Lesson 1

What we are telling the browser is: at the <b> start making things bold, and at the </b> stop making things bold.

The same principle applies to italics...

For Example:--

HTML Tutor Lesson 1

..and underlining.

For Example:--

HTML Tutor Lesson 1

For Example:--

We can change the fontsize too.

HTML Tutor Lesson 1

Fonts come in 7 sizes:

Two things we want to discuss now. First, a <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it.

Second point is about defaults. As you probably know, the default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3. If you say nothing it will be 3. If you make faces at your computer it will still be 3.

Every browser has a default font setting- font name, size and color. Unless you have messed with it the default is Times New Roman 12pt(which translates into 3 for our purposes) and it's black. 

Now with Internet Explorer 4.0 we can specify font names other than the defaults. Like ARIAL and TIMES NEW ROMAN.

For Example:--

HTML Tutor Lesson 1

Note:-- The font will only display if your viewer has that font installed on their computer. Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Comic Sans MS are pretty widely distributed with Windows. So is Times New Roman. You can hedge your bets a little by specifying more than one font. Just do one of these... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS"> Hidee Ho </font>. The browser looks for ARIAL. If it finds it, it uses it. If not, it goes on to HELVETICA. If it can't find that, it looks for LUCIDA SANS. And if it can't find that it uses the default font.

You can change the font color if you like.

For Example:--

HTML Tutor Lesson 1

We can, of course use more than one ATTRIBUTE in a <tag>...

For Example:--

HTML Tutor Lesson 1

Other Example:--

HTML Tutor Lesson 1

I feel the need to point out once again that multiple tags should be nested.
<tag3><tag2> <tag1> Hooha! </tag1> </tag2> </tag3>

One more thing That browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are...

Text is black
Links are blue
Active link is red
Visited link is purple

You can change these if you need to. The whole world has gotten used to links being blue. Why confuse us? You can change these defaults for the entire document in the <BODY> tag.

For Example:--

HTML Tutor Lesson 1 This is a test paragraph of HTML Tutor. We hope this will help you to understand the topic better. Links are now red Visited links are now dark red And active links are green.

Unlike documents in most word processors, carriage returns in HTML files aren't significant. In fact, any amount of white space -- including spaces, linefeeds, and carriage returns -- are automatically compressed into a single space when your HTML document is displayed in a browser. So you don't have to worry about how long your lines of text are. Word wrapping can occur at any point in your source file without affecting how the page will be displayed. 

In the bare-bones example shown in the Minimal HTML Document section, the first paragraph is coded as 

<P>Welcome to the world of HTML. 
This is the first paragraph.
While short it is
still a paragraph!</P>

In the source file there is a line break between the sentences. A Web browser ignores this line break and starts a new paragraph only when it encounters another <P> tag. 

Important: You must indicate paragraphs with <P> elements. A browser ignores any indentations or blank lines in the source text. Without <P> elements, the document becomes one large paragraph. (One exception is text tagged as "preformatted," which is explained below.) For example, the following would produce identical output as the first bare-bones HTML example: 

<H1>Level-one heading</H1>
<P>Welcome to the world of HTML. This is the 
first paragraph. While short it is still a
paragraph! </P> <P>And this is the second paragraph.</P>

To preserve readability in HTML files, put headings on separate lines, use a blank line or two where it helps identify the start of a new section, and separate paragraphs with blank lines (in addition to the <P> tags). These extra spaces will help you when you edit your files (but your browser will ignore the extra spaces because it has its own set of rules on spacing that do not depend on the spaces you put in your source file). 

NOTE:-  The </P> closing tag may be omitted. This is because browsers understand that when they encounter a <P> tag, it means that the previous paragraph has ended. However, since HTML now allows certain attributes to be assigned to the <P> tag, it's generally a good idea to include it. 

Using the <P> and </P> as a paragraph container means that you can center a paragraph by including the ALIGN=alignment attribute in your source file. 

<P ALIGN=CENTER>
This is a centered paragraph.
[See the formatted version below.]
</P>


                                                      This is a centered paragraph. 

It is also possible to align a paragraph to the right instead, by including the ALIGN=RIGHT attribute. ALIGN=LEFT is the default alignment; if no ALIGN attribute is included, the paragraph will be left-aligned. 

HTML supports unnumbered, numbered, and definition lists. You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow. 

1) Unnumbered Lists:--

To make an unnumbered, bulleted list, 

start with an opening list <UL> (for unnumbered list) tag 
enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed 
end the entire list with a closing list </UL> tag 
Below is a sample three-item list: 

<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>

The output is: 

• apples
• bananas
• grapefruit

The <LI> items can contain multiple paragraphs. Indicate the paragraphs with the <P> paragraph tags. 

2) Numbered Lists:-- 

A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag. The following HTML code: 

<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>

produces this formatted output: 

1. oranges
2. peaches
3. grapes

The browser doesn't recognize formatting. Unless you tell it otherwise, it just displays the characters in a steady flow. If you want to start a new line you have to use a line break.

The <BR> tag forces a line break with no extra (white) space between lines. Using <P> elements for short lines of text such as postal addresses results in unwanted additional white space. For example, with :-- 

<BODY BGCOLOR="#FFFFFF">
HTML <BR>
is<BR>
Real<BR>
easy!
</BODY>

HTML is real easy!

<BODY BGCOLOR="#FFFFFF">
HTML <P>
is<P>
Real<P>
easy!
</BODY>

HTML is real easy!

These are examples of some tags. No closing tag required. Another thing about these line break tags, you can't use them more than once. In other words, specifying <P><P><P> won't give you 3 empty lines, it will just give you 1.

But if you want to add several empty lines!

Look at this first...

<BODY BGCOLOR="#FFFFFF">
HTML       is       real       easy!
</BODY>

HTML is real easy!

The browser won't recognize more than 1 space.. There is a little code that means "space" to the browser -> &nbsp;

Try this:

<BODY BGCOLOR="#FFFFFF">
HTML &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
is &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Real &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
easy!
</BODY>

HTML      is       real       easy!

The & means we are beginning a special character the ; means ending a special character and the letters in between are sort of an abbreviation for what it's for. There are six of these special characters. ( these should always be lower case)

• &nbsp; ( non-breaking space)
• &quot; (" quotation mark)
• &gt; (> greater - than symbol)
• &amp; (& ampersand)
• &shy; (Soft Hyphen)
• &lt; (< less - than symbol)

 

The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule is useful to separate major sections of your document. 

You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). Experiment with the settings until you are satisfied with the presentation. For example: 

<HR SIZE=4 WIDTH="50%">

displays as: 

--------------------------------------------------------------------------------

Use the<PRE> tag (which stands for "preformatted") to generate text in a fixed-width font. This tag also makes spaces, new lines, and tabs significant -- multiple spaces are displayed as multiple spaces, and lines break in the same locations as in the source HTML file. This is useful for program listings, among other things. For example, the following lines: 

<PRE>
Hello Friends

          You are learning HTML Tutorial. You're welcome to our site

          Thanks !

Neeraj Garg  
</PRE>

display as: 

Hello Friends

          You are learning HTML Tutorial. You're welcome to our site

          Thanks !

Neeraj Garg   

The <PRE> tag can be used with an optional WIDTH attribute that specifies the maximum

number of characters for a line. WIDTH also signals your browser to choose an appropriate

font and indentation for the text. Hyperlinks can be used within <PRE> sections.

You should avoid using other HTML tags within <PRE> sections, however. Note that

because <, >, and & have special meanings in HTML, you must use their escape

sequences (&lt;, &gt;, and &amp;, respectively) to enter these characters. See the

section Escape Sequences in Chapter 2 for more information.