Basic Elements: HTML Tags

 

<html> The <html> tag is in fact the only tag you need to create the simplest webpage. The <html> tag tells the browser that this is an HTML document, so the browser understands how to show the page. The first line in each file will be <html> and the last line in each file will be </html>.

 

<head>

 

The “head” of an HTML document contains information which is not displayed on the screen when viewed in a browser, but is nevertheless important in making the document more readable. You need both the opening <head> and closing </head> tag. An example of a tag that would appear in the head of an HTML document is the <title> </title> tag. Any text within this tag is not seen directly in the browser window, but is displayed in the title bar of the browser.
<title>

 

The <title> tag is required in all HTML documents and it defines the title of the document.

The <title> element:

  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results
<body> <body> </body>

 

The “body” contains the part of the document that will be viewed in the webpage. You need both the opening <body> and closing </body> tag. You can set options for the <body> tag that will be applied to the entire web page. Some of these options are:

 

 

  • · background=”url” – Sets the background image to the image found at URL. The image should be in .gif, .jpg, or .jpeg format

 

  •  bg color = “#hexvalue” or bg color=”color_name” – Sets the background color.

 

  •  link=”#hexvalue” or link=”color_name” – Sets the colour for unvisited links

 

  •  vlink=”#hexvalue” or vlink=”color_name” – Sets the colour for visited links

 

  •  text=”#hexvalue” – Sets the colour for text in the body of the document

 

 

<p> <p> your text </p>

<p align=”left”> your text </p>

<p align=”right”>your text</p>

<p align= “center”>your text</p>

 

The paragraph tag tells your web browser where to make paragraph breaks by enclosing each paragraph with a <p> tag before the text, and a </p> tag after the text. The <p> tag has several options, the most common

of which is ALIGN. ALIGN can be set to “LEFT”, “RIGHT”, or “CENTER”, to affect the horizontal alignment of the paragraph

<br> The <br> tag stands for “break”, or “line break”. The <br> tag will cause the text immediately after the tag to appear on a new line.

 

&nbsp; The &nbsp; creates a non breaking space. It is used to add extra spaces without adding an extra line, or to add a blank character between letters while keeping the text together.
<h1> to <h6> <h1> </h1>

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6>

Headings are useful when you want to organize text into named sections. In all there are six headings of form <h#>, where n is any number between 1 and 6; since the browser must know the beginning and ending words for the heading, closing tags of the form </h#> are needed to close the six different heading tags. Applying heading tags to text causes that text to have a predetermined size and format. H1 is the largest, and H6 is the smallest.

<ul> <ul>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

<li>List item 4</li>

</ul>

 

Unordered Lists In an unordered list bullets are placed before each list item. The basic form for an unordered list uses he <ul> tag, a collection of <li> </li> tags for each of the list items, and finally a </ul> to tell the browser that the list is complete.

 

Nested Lists

One of the more useful features of lists is the ability to create nested lists. A nested list is a list within a list. These lists may be any combination of unordered and ordered lists. The sample to the left will result in the following:

Vegetables

o Carrots

o Beans

Fruits

o Apples

o Oranges

o Bananas

Meat

o Ground beef

o Steak

o Ham

 

<ul>

<li>Vegetables</li>

<ul>

<li>Carrots</li>

<li>Beans</li>

</ul>

<li>Fruits</li>

<ul>

<li>Apples</li>

<li>Oranges</li>

<li>Bananas</li>

</ul>

<li>Meat</li>

<ul>

<li>Ground Beef</li>

<li>Steak</li>

<li>Ham</li>

</ul>

<ul>

 

<li>

 

The <li> tag defines a list item.

The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

<dl> Definition Lists

Definition lists consist of two parts: a term and a description. To mark up a definition list, you need three HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>.

 

<dl>

<dt>Cascading Style Sheets</dt>

<dd>Style sheets are used to provide

presentational suggestions for documents

marked up in HTML. </dd>

</dl>

Cascading Style Sheets

Style sheets are used to provide

presentational suggestions for documents

marked up in HTML.

 

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc

 

<pre> The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

<marquee> The HTML <marquee> tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your web site page depending on the settings.

NOTE: The HTML <marquee> is an MSIE extension, but is now supported by NS 7 also. So please check if your browser supports this tag or not.

<marquee>This is basic example of marquee</marquee>

<hr> The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is used to separate content (or define a change) in an HTML page.

<center> </center> The <center> </center> tag works for paragraphs, tables, headings, and images. Everything between the tags will be centered horizontally on the page.
<blockquote> </blockquote>

 

When you want to include a quotation in the text of your web page use the <blockquote> </blockquote> tag. The text enclosed in the tags will appear on the webpage with an indentation on both the left and right sides, as well as a blank line before and after the text.
<ol> Ordered Lists

The ordered list numbers each item consecutively. The basic form for an ordered list is the <ol> tag, (which stands for ordered list), a collection of list items identified by <li> </li> tags, and then the </ol> tag.

 

 

<ol>

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

<li>List item 4</li>

</ol>

 

<color> <color = “red”>

<color = “blue”>

<color = “#A91227″>

<color = “#0000FF”>

 

Colour in HTML can be set using two different methods. You can assign something a certain colour using…

it’s hexadecimal equivalent, or

it’s name (ie. “red”, “blue”, “grey”, etc.)

 

There are several advantages to using the first system; the hexadecimal system will work in

virtually all browsers. Also, you have many more shade and colour options by using the hexadecimal system. There are many webpages that provide charts that give the hexadecimal value for a particular colour; click here to view one of these charts. To use the chart, simply identify the colour you wish to use, and write down (or remember) the 6-digit hex value for the colour, listed with the colour. That’s the value you’ll be using to set the colour attribute for the font or background. HTML also understands some basic colours by name, red, yellow, orange, blue, brown, black, white.

 

<font> <font> </font>

<font face = ” “>

<font size = ” “>

<font color=”#hexnum”>

 

The font tag does nothing on its own, but when combined with other keywords as options in the tag, it’s quite powerful. You can string several options together in one <font> command.

The face option lets you choose the particular typestyle for the text, just as you would in a word processor. This allows you to set one paragraph to use the “arial” font, and another to use the “Times Roman” font. One important note about this feature is that the font must be installed on the computer of the person viewing the page, or else the browser will not recognize the font selection.

The size tag allows you to set the size of the font, The size attribute can be assigned a value between “1″ being the smallest and “7″ being the largest.

The color tag lets you change the colour of the text. The color attribute can be assigned to most common names for colours, such as “yellow”, “red”, “pink”, “black”, etc., (see the color chart for more) but to get a larger number of colours, you can use the format <font color=”#hexnum”>, where HEXNUM is the 6-digit hex value found in a color chart.

<strong>

<bold>

 

 

<strong> </strong>

The <strong> </strong> tag, will cause words to appear in bold.

 

<bold> </bold>

Although this is the preferred method for creating text in boldface, a <bold> </bold> tag exists which will create the same effect.

 

<em>

<i>

<em> </em>

The <em> </em> tag will make text appear in

italics.

 

<i> </i>

An <i> </i> tag also exists which will produce the same effect.

 

<tt> <tt> </tt>

The <tt> </tt> tag changes the font of that text to a typewriter font, usually Courier.

 

comments <!– my comment –>

 

Text in the comment tag will be ignored by the browser, and not displayed as part of the resulting webpage. If you comment your documents freely, using them to describe the more complex sections of your document, it’ll make understanding and editing your document much easier when you update the page at a later date.

<a > <a href = “www.vidarbhastudents.com”> Go To   Web Page </a>

<a name = “anchor_name”></a>

<a href = “#anchor_name”>go to … </a>

<a href =”url#anchor_name”> go to … </a>

<a href =”url#anchor”>text </a>

<a href=”info@vidarbhastudents.com”> Words that will be the link </A>

 

The most common link is where the text is anchored to another web page. This would be <a href = “url”> text to act as link </a>

 

You can also link to sections within a document.

 

This is possible through what are called named anchors. A named anchor is a hidden reference marker for a particular place in your HTML file. When you include a named anchor somewhere in an HTML document, and then create a link to that anchor, the browser will jump to that line when the link is clicked.

 

In order to create a link to a particular section of a page, you must perform two steps:

1. Assign an anchor name to the position

2. Create a link to that position

 

The first of these tasks can be performed through use of the NAME attribute of the <a> tag, as follows:

<a name=”anchor_name”></a>

 

The anchor name can be anything you choose, as long as it’s made up of numbers, letters, or the underscore character, and you refer to the same anchor name when you actually create the link.

 

The second task, the one of actually creating the link, is very similar to the way we created links to other webpages, except that we must specify the anchor name to which we wish to link. This can be done in the following way:

 

<a href=”#anchor_name”>go to … </a>

 

Anchor links can also be used to link to a specific anchor on another webpage. (In this case the target and source page of the link are the same). To create a link of this kind, first create a named anchor in the target webpage, as described above, and then create the link in the source webpage as follows:

 

<a href=”url#anchor_name”>go to … </a>

 

Links can also be created to send email to a specific email address, as follows:

 

<a href=” info@vidarbhastudents.com“>

 

words that will be the link </a>

<img> <img src = “filename” height=”number”

width=”number” alt=”description”

border=”number”>

 

The <img> tag, where IMG stands for image has no </img> counterpart, but does have several useful options.The SRC option is the only necessary option for the <img> tag, since the browser must know where it can find the image file. The SRC option can be set to equal a valid filename, if the image file is located in the same directory as the source document of an image file. The most common options are:

 

SRC=”FILENAME” - Specifies the SOURCE of the image; if the image file is in the same directory as the source document, all that is needed is the filename itself. Note: Don’t link to another page for an image – copy the image to your filespace and link to it from there (with permission of course!)

 

 

HEIGHT=”NUMBER” - Specifies that the height of the image should be NUMBER pixels.

 

WIDTH=”NUMBER” – Specifies that the width of the image should be NUMBER pixels. If no dimensions are specified for the image, the browser will insert the image exactly as is, at the same size as you would view it in a picture editor on your computer. The picture will load slightly faster if you specify the height and width so that the browser does not have to determine it. You may also find it quicker and easier to specify a specific width and height for the image in the HTML , rather than editting and resizing the image on your computer.

 

ALT=”DESCRIPTION” - Specifies a description of the image. The ALT option for the IMG tag is useful for those whose browsers cannot support in-line images, or have their images turned off in their browsers; instead of seeing the image, they’ll see the description of the image that you gave them in the ALT tag.

While the majority of people “surfing the web” these days enjoy browsers that have full graphics capabilities, it’s a good idea to include an ALT clause in your IMG tag for those who don’t. Also keep in mind that people who must use voice software or hardware in order to read a webpage will appreciate having the description.

 

BORDER=”NUMBER” - Specifies the width of the image’s border, in pixels.

 

An image tag could look like:

<img src = “filename” height = “number” width = “number” alt = “description” border = “number”>

 

 

 

<table> Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for table data, which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

 

Table Tags Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table

 

Table Border

<table border=”1″>

To display a table with borders, you will use the border attribute.

 

<table border=”1″>

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

 

 

 

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border=”1″>

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

 

 

 

 

 

 

Cell Padding and Spacing

The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table example without these properties. These properties may be used separately or together.

<table border=”1″ cellpadding=”10″>

<tr>

<td>some text</td>

<td>some text</td>

</tr><tr>

<td>some text</td>

<td>some text</td>

</tr>

</table>

 

<table border=”1″ cellspacing=”5″>

<tr>

<td>some text</td>

<td>some text</td>

</tr><tr>

<td>some text</td>

<td>some text</td>

</tr>

</table>

 

 

 

Table Width

The width attribute can be used to define the width of your table. It can be defined as a fixed width or a relative width. A fixed table width is one where the width of the table is specified in pixels.

 

For example, this code, <table width=”550″>, will produce a table that is 550 pixels wide. A relative table width is specified as a percentage of the width of the visitor’s viewing window. Hence this code, <table width=”80%”>, will produce a table that occupies 80 percent of the screen.

 

 

   
Example <html>

<head>

<title>My First Webpage</title>

</head>

<body>

This is my first homepage. <b>This text is bold</b>

</body>

</html>

 

 

Save the file as mypage.html. Start your Internet browser. Select Open (or Open Page) in the File menu of your browser. A dialog box will appear. Select Browse (or Choose File) and locate the html file you just created – mypage.html - select it and click Open. Now you should see an address in the

dialog box, for example C:\MyDocuments\mypage.html. Click OK, and the browser will display the page.

 

 

Example Explained

What you just made is a skeleton html document. This is the minimum required information for a web document and all web documents should contain these basic components. The first tag in your html document is <html>. This tag tells your browser that this is the start of an html document. The last tag in your document is </html>. This tag tells your browser that this is the end of the html document.

The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.

The text between the <title> tags is the title of your document. The <title> tag is used to uniquely identify each document and is also displayed in the title bar of the browser window.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the <b> and </b> tags will be displayed in a bold font.

 

 

 

Registration


A password will be e-mailed to you.

Feedback Form

Name (required)

Email (required)

Feedback