top of page

Introduction

What is HTML?

HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language.

 

  • HTML is not a programming language, it is a markup language.

 

  • A markup language is a set of markup tags.

 

  • HTML uses markup tags to describe web pages.

 

 

HTML Tags

HTML markup tags are usually called HTML tags.

  • HTML tags are keywords 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

 

  • Start and end tags are also called opening tags and closing tags

 

 

HTML Documents = Web Pages

  • HTML documents describe web pages

 

  • HTML documents contain HTML tags and plain text

 

  • HTML documents are also called web pages

 



The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

    <html>

   

    <head>

    <title>Web Page title</title>

    </head>

   

    <body>

   

    This displays the contents of a Web Page.

   

    </body>

    </html>

   

Example Explained

  • The text between <html> and </html> describes the web page

 

  • The content between <head> and </head> is executed first

 

  • The <title></title> appears in <head></head> tag. <title></title> describes the Title of 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

 

Create Your Own Test Web

Follow the steps

  • Open notepad. (Click Start button, click on Run command, write "Notepad" & click OK.)

 

Write the content, as shown,

    <html>

    

    <head>

    <title>My First Web Page!</title>

    </head>

    

    <body>

    

    This is body of my First Web Page.

    

    </body>

    </html>

 

  • To save the file, click on "File" menu, click on "Save", choose "C Drive" & select "All files" from "Save as Type" & write the File name: mywebpage.htm or mywebpage.html, & click on "Save" button.

 

  • To open the HTML document (mywebpage.htm), click "Start" button, click "Run" command & write C:\mywebpage.htm & press OK.

 

  • Internet Explorer will show the Web page.

Types of Tags

Following are the types of tags,

 

  1. Structure tags: Define the structure of documents.

  2. Text appearance tags: Define the appearance of text.

  3. Paragraph tags: Define headings, paragraphs, and line breaks.

  4. Font tags: Specify font sizes and colors.

  5. List tags: Define ordered or unordered lists and definition lists.

  6. Table tags: Define tables.

  7. Link tags: Specify navigation links to other documents.

  8. Image tags: Specify where to get images and how to display them.

1.Structure Tags

An HTML document begins with the <html> tag, which declares that the document is written with HTML. Every document has two parts, a head and a body, defined, respectively, by a <head> tag and a <body> tag. The head part contains the document title (using the <title> tag) and other parameters the browser may use when rendering the document; the body part contains the actual contents of the document.

An HTML document may have the following structure:

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<!-- document body-->

</body>

</html>

  • NOTEYour documents may be displayed properly even if you don't use <html>, <head>, <title>, and <body> tags. However, use of these tags is strongly recommended because they communicate certain information to the browser about the properties of a document; the information they provide helps in using the document effectively.

2.Text Appearance Tags

HTML provides tags to advise about the appearance of text. At present, some text tags have the same effect. For example, <em>, <cite>, and <i> will all display the text in italic. However, a future version of HTML may make these tags distinct. Text tag names are fairly descriptive. Text tags can be classified into two categories: content-based tags and physical tags.

Content-Based Tags

Content-based tags inform the browser to display the text based on semantic meaning, such as citation, program code, and emphasis. Here is a summary of the content-based tags:

  • <cite>: Indicates that the enclosed text is a bibliographic citation, displayed in italic.

 

  • <code>: Indicates that the enclosed text is a programming code, displayed in monospace font.

 

  • <em>: Indicates that the enclosed text should be displayed with emphasis, displayed in italic.

 

  • <strong>: Indicates that the enclosed text should be strongly emphasized, displayed in bold.

 

  • <var>: Indicates that the enclosed text is a computer variable, displayed in italic.

 

  • <address>: Indicates that the enclosed text is an address, displayed in italic.

 

  • <marquee>: Indicates that the enclosed text is an marquee, creates a scrolling text.



TABLE 1: Using Content-Based Tags

Tags                                                 Example                                                                  Display

<cite> . . . </cite>                          <cite>bibliographic</cite>                                   bibliographic

<code> . . . </code>                      <code>source code</code>                                 source code

<em> . . . </em>                            <em>emphasis</em>                                            emphasis

<strong> . . . </strong>               <strong>strongly emphasized</strong>          strongly emphasized           

<var> . . . </var>                           <var>programming variable</var>                   programming variable

<address> . . .</address>           <address>Computer Dept</address>              Computer Dept

<marquee> . . .</marquee>      <marquee>Marquee</marquee>

 

 

An HTML document may have the following Content-Based Tags:

<html>

<head>

<title>Demonstrating Content-Based Tags</title>

</head>

<body>
 

<cite>bibliographic</cite>
 

<code>source code</code>
 

<em>emphasis</em>
 

<strong>strongly emphasized</strong>
 

<var>programming variable</var>
 

<address>Computer Dept</address>
 

</body>

</html>

 

 

 

Physical Tags

Physical tags explicitly ask the browser to display text in bold, italic, or other ways.

Following are six commonly used physical tags:

  • <i>(italic)

 

  • <b> (bold)

 

  • <u> (underline)

 

  • <tt> (monospace)

 

  • <strike> (strike-through text)

 

  • <blink> (blink)

 

TABLE 2: Using Physical Tags

      Tags                                                  Example                                      Display                

<i> . . . </i>                                               <i>italic</i>                                             italic              

<b> . . . </b>                                           <b>bold</b>                                               bold             

<u> . . . </u>                                        <u>underline</u>                                     underline     

<tt> . . . </tt>                                     <tt>monospace</tt                                   monospace   

<strike> . . . </strike>                       <strike>strike</strike>                                strike        

<blink> . . .</blink>                          <blink>blink</blink>                                    blink          

 

An HTML document may have the following Physical Tags:

 

<html>E

<head>

<title>Demonstrating Physical Tags</title>

</head>

<body>
 

<i>italic</i>
 

<b>bold</b>
 

<u>underline</u>
 

<tt>monospace</tt>
 

<strike>strike</strike>
 

<blink>blink</blink>
 

</body>

</html>

 

 

 

3.Paragraph Tags

There are many tags in HTML for dealing with paragraph styles. There are six heading tags (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) for different sizes of headings, a line-break tag (<br>), a paragraph start tag (<p>), a preformat tag (<pre>), and a block-quote tag (<blockquote>). The six heading tags indicate the highest (<h1>) and lowest (<h6>) precedence a heading may have in the document. Heading tags may be used with an align attribute to place the heading toward left, center, or right. The default alignment is left. For example, <h3 align=right>Heading</h3> tells the browser to right-align the heading. The line-break tag <br> tells the browser to start displaying from the next line. This tag has no end tag. The paragraph-start tag <p> signals the start of a paragraph. This tag has an optional end tag </p>. The <pre> tag and its required end tag (</pre>) define the enclosed segment to be displayed in monospaced font by the browser. The <blockquote> tag is used to contain text quoted from another source. The quote will be indented from both left and right.

An HTML document may have the following structure:

<html>

<head>

<title>Demonstrating Paragraph Tags</title>

</head>

<body>

<h1 align=right>h1: Heading 1</h1>

<h3 align=center>h3: Heading 3</h3>

<h6 align=left>h6: Heading 6</h6>

<p>

<pre>preformat tag</pre>

<blockquote>

block quote tag

<br>

and line break

</blockquote>

</body>

</html>

4.Font Tags

Font, Size, and Color Tags

With HTML you can specify font size and colors using font tags. There are two font tags: <basefont> and <font>. The <basefont> tag is typically placed in the head of an HTML document, where it sets the base font size for the entire document. However, it may appear anywhere in the document, and it may appear many times, each time with a new size attribute. Many browsers use a relative model for sizing fonts, ranging from 1 to 7; the default base font size is 3. Each successive size is 20 percent larger than its predecessor in the range. The <font> tag allows you to specify the size and color of the enclosed text, using size and color attributes. The size attribute is the same as the one for <basefont> tag. The color attribute sets the color for the enclosed text between <font> and </font>. The value of the attribute is a six-digit hex number preceded by a pound sign (#). The first two digits are the red component, the next two digits are the green component, and the last two digits are the blue component. The digits are from 00 to FF. Alternatively, you may set the color by using standard names like red, yellow, blue, or orange.

The following HTML source code illustrates the use of the <basefont> and <font> tags.

 

<html>

<head>

<title>Demonstrating Fonts, Size and Color</title>

</head>

<basefont size=6>

<body bgcolor=white>

basefont<br>

<font size=7 color=blue>blue7</font><br>

<font size=3 color=#FF0000>red3</font><br>

</body>

</html>

5.List Tags

HTML allows you to define three kinds of lists: ordered lists, unordered lists, and definition lists. You can also build nested lists.

Ordered Lists

Ordered lists label the items they contain. An ordered list is used when the sequence of the listed items is important. For example, chapters are listed in order. An ordered list starts with the tag <ol> and ends with </ol>, and items are placed in between. Each item begins with an <li> tag. The browser automatically numbers list items, starting from numeric 1. Instead of using the default numeric numbers for labeling, you may associate the tag <ol> with a type attribute. The value of the type determines the style of the label.

  • Type value A for uppercase letter labels A, B, C, . . .

 

  • Type value a for lowercase letter labels a, b, c, . . .

 

  • Type value I for capital roman numerals I, II, III, . . .

 

  • Type value i for lowercase roman numerals i, ii, iii, . . .

 

  • Type value 1 for arabic numerals 1, 2, 3, . . .

 

Unordered Lists

When the sequence of the listed items is not important, use an unordered list. For example, a list of Web browsers can be given in any order. An unordered list starts with the tag <ul> and ends with </ul>. Inside, you use <li> tags for items. By default, the browser uses bullets to mark each item. You may use disc, circle, or square as type values to indicate the use of markers other than bullets.

Definition Lists

A definition list is used to define terms. The list is enclosed between <dl> and </dl> tags. Inside the tags are the terms and their definitions. The term and definition have the leading tags <dt> and <dd>, respectively. Browsers typically render the term name at the left margin and the definition below it and indented.

This example illustrates the use of tags for ordered lists, unordered lists and definition lists.

 

<html>

<head>

<title>Demonstrating List Tags</title>

</head>

<body bgcolor=white>

 

<center><b>List Tags</b></center>

An ordered List

<ol type=A>

<li>Chapter 1: Introduction to Java

<li>Chapter 2: Java Building Elements

<li>Chapter 3: Control Structures

</ol>

An unordered List

<ul type=square>

<li>Apples

<li>Oranges

<li>Peaches

</ul>

Definition List

<dl>

<dt>What is Java?

<dd>An Internet programming language.

</dl>

</body>

</html>

6.Table Tags

Tables are useful features supported by many browsers. Tables are collections of numbers and words arranged in rows and columns of cells. In HTML, table elements, including data items, row and column headers, and captions, are enclosed between <table> and </table> tags. Several table tags may be used to specify the layout of a table. Each row in the table is wrapped by <tr> and </tr>. Inside the row, data or words in a cell are enclosed by <td> and </td>. You may use <caption>...</caption> to display a caption for the table, and <th>...</th> to display column headers.

Table tags may be used with attributes to obtain special effects.Here are some useful attributes:

 

  • border: Can appear in the <table> tag to specify that all cells are surrounded with a border.

 

  • align: Can appear in the <caption>, <tr>, <th>, or <td> tag. If it appears in <caption>, it specifies whether the caption appears above or below the table, using the values top or bottom. The default is align=top. If it appears in <tr>, <th>, or <td>, align specifies whether the text is aligned to the left, the right, or centered inside the table cell(s).

 

  • valign: Can appear in <tr>, <th>, or <td>. The values of the attribute are top, middle, and bottom to specify whether the text is aligned to the top, the bottom, or centered inside the table cell(s).

 

  • colspan: Can appear in any table cell to specify how many columns of the table the cell should span. The default value is 1.

 

  • rowspan: Can appear in any column to specify how many rows of the table the cell should span. The default value is 1.

 

This example creates an HTML table.

 

<html>

<head>

<title>Demonstrating Table Tags</title>

</head>

<body bgcolor=white>

 

<center>Table Tags</center>

<br>

<table border=2>

<caption>This is a Table</caption>

<tr>

<th>Table heading</th>

<td>Table data</td>

</tr>

<tr>

<th valign=bottom>Second row

<td>Embedded Table

<table border=3>

<tr>

<th>Table heading</th>

<td align=right>Table data</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

7.Link Tags

The true power of HTML lies in its capability to join collections of documents together into a full electronic library of information, and to link documents with other documents over the Internet. This is called hypertext linking, which is the key feature that makes the Web appealing and popular. By adding hypertext links, called anchors, to your HTML document, you create a highly intuitive information flow and guide users directly to the information they want. You can link documents on different computers or on the same computer, and can jump within the same document using anchor tags.

Linking Documents on Different Computers

Every document on the Web has a unique address, known as its Uniform Resource Locator (URL). To navigate from a source document to a target document, you need to reference the target’s URL inside the anchor tags <a> and </a> using attribute href. The following example displays a list of other vendors:
<ul>
<li><a href=”http://www.thebrainhub.com”> TheBrainHub </a>
<li><a href=http://sarsoeducation.net/”> SarsoEducation </a>
</ul>

In this example, clicking on TheBrainHub will display the homepage. The URL of TheBrainHub's home page Internet address is http://www.thebrainhub.com. The general format of a URL is: method://servername:port/pathname/fullfilename method is the name of the operation that is performed to interpret this URL. The most common methods are http, ftp, and file.

  • http: Accesses a page over the network using the HTTP protocol. For example, http://www.microsoft.com links to Microsoft’s homepage. http:// can be omitted.

 

  • ftp: Downloads a file using anonymous FTP service from a server; for example, ftp://hostname/directory/fullfilename.

 

  • File: Reads a file from the local disk. For example, file://home/liang/liang.html displays the file liang.html from the directory /home/liang on the local machine.

 

servername is a computer’s unique Internet name or Internet Protocol (IP) numerical address on the network. For example, www.sun.com is the hostname of Sun Microsystem’s Web server. If a server name is not specified, it is assumed that the file is on the same server. port is the TCP port number that the Web server is running on. Most Web servers use port number 80 by default. pathname is optional and indicates the directory under which the file is located. fullfilename is optional and indicates the target filename. Web servers generally use index.html on UNIX and default.htm on Windows for a default filename. For example, <a href=”http://www.thebrainhub.com”>TheBrainHub</a> is equivalent to <a href=”http://www.thebrainhub.com/index.html”>TheBrainHub</a>

Linking Documents on the Same Computer

To link documents on the same computer, use the file method rather than the http method in the target URL.

There are two types of links:

 

  • Absolute Links

 

  • Relative Links

 

When linking to a document on a different machine, you must use an absolute link to identify the target document. An absolute link uses a URL to indicate the complete path to the target file.When you are linking to a document on the same computer, it is better to use a relative link. A relative URL omits method and server name and directories.An obvious advantage of using a relative URL is that you can move the entire set of documents to another directory or even another server and never have to change a single link.

Jumping Within the Same Document

HTML offers navigation within the same document. This is helpful for direct browsing of interesting segments of the document.

Example of Navigation Within the Same Document:

 

<html>

<head>

<title>Demonstrating Link Tags</title>

</head>

<body>

<ol>

<li><a href=”#introduction”>Section 1: Introduction</a>

<li><a href=”#methodology”>Section 2: Methodology</a>

<li><a href=”#summary”>Section 3: Summary</a>

</ol>

 

 

8.Image Tags

Embedding Graphics

One of the most compelling features of the Web is its ability to embed graphics in a document. Graphics can be used for icons, pictures, illustrations, drawings, and so on. They bring a live dimension to your documents. You may use an image as a visual map of hyperlinks. This section introduces the use of horizontal bar tags and image tags.

Horizontal Bar Tags

The horizontal bar tag (<hr>) is used to display a rule. It is useful in separating sections of your document with horizontal rules. The attributes size, width, and align can be associated to achieve the desired effect. The rule can be thickened using the size attribute with values in pixels. The width attribute specifies the length of the bar with values in either absolute number of pixels or extension across a certain percentage of the page. The align attribute specifies whether the bar is left, centered, or right aligned.

This example illustrates the use of the size, width, and align attributes in horizontal bar tags.

<html>

<head>

<title>Demonstrating Horizontal Rules</title>

</head>

<body bgcolor=white>

<center>Horizontal Rules</center>

<hr size=3 width=80% align=left>

<hr size=2 width=20% align=right noshade>

<hr>

</body>

</html>



 

Image Tags

The image tag, <img>, lets you reference and insert images into the current text. The syntax for the tag is: <img src=URL alt=text align = [top | middle | bottom | texttop ]> Most browsers support GIF and JPEG image format. Format is an encoding scheme to store images. The attribute src specifies the source of the image. The attribute alt specifies an alternative text message to be displayed in case the client’s browser cannot display the image. The attribute alt is optional; if it is omitted, no message is displayed. The attribute align tells the browser where to place the image.

This example creates a document with image tags.

 

<html>

<head>

<title>Demonstrating Image Tags</title>

</head>

<body bgcolor=white>

<center>Image Tags</center>

<img src=”winnie_the_pooh_10.jpg” align=middle>

</body>

</html>

 

LEARN HTML

bottom of page