Basic HTML

Loi Ngoc Nguyen, Duy-Ky Nguyen, PhD

We adopt XHTML requirements

XHTML elements must be properly nested
XHTML elements must always be closed, using <p />, <br />, <hr /> instead of pair
XHTML elements must be in lowercase
XHTML documents must have one root element
!DOCTYPE declaration

Basic HTML Tags

Example 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title></title></head>
<body>

Hello!

This is my very first
HTML file.

</body>
</html>

and the output

Hello! This is my very first HTML file.

The display is in only one single line, rather than in multi-line with al lot of blank spaces as seen above.
This is because there's no markup tags required by HTML

Note

We will omit the header (<!DOCTYPE ... boby>) and the footer (</body></html>) for clarity

Example 2

Now we use the markup of line break <br /> to get multi-line display

Hello!<br />
This is my very first HTML file.

and the output

Hello!
This is my very first HTML file

Example 3

The markup of paragraph <p /> create more blank gap than the <br />

Hello!<p />
This is my very first HTML file.

and the output

Hello!

This is my very first HTML file

Example 4

The markup blank space   (ended with semicolon) is used to get multiple blank space

Hello!<br />
This is                    my very first HTML file.

and the output

Hello!
This is my very first HTML file.

Example 5

The markup horizontal ruler <hr /> is used to create a horizontal line

The hr tag defines a horizontal rule:

<hr />

This is 1st paragraph

<hr />

This is 2nd paragraph

<hr />

and the output

The hr tag defines a horizontal rule:

This is 1st paragraph

This is 2nd paragraph

Example 6

The comment 
is hidden

Comment line is hidden.

and the output

Comment line is hidden.

Example 6

Some HTML headers

<h1>Header 1</h1><p />
<h2>Header 2</h2><p />
<h3>Header 3</h3><p />
<h4>Header 4</h4><p />
<h5>Header 5</h5><p />

and the output

Header 1

Header 2

Header 3

Header 4

Header 5

HTML Tag Attributes

Example 1
Center the header

<h1 align="center">Header 1</h1><p/>
The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.<p/>

and the output

Header 1

The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page

Example 2
Color the background

<body bgcolor="cyan">
<h1 align="center">Header 1</h1><p/>
The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.<p/>
</body>

and the output

Header 1

The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page

Note

The attribute value beige is quoted.

HTML Text Formatting

Example 01

<b>This text is bold</b><p/>

<i>This text is italic</i><p/>

This text contains <sub>subscript</sub><p/>

This text contains <sup>superscript</sup>

and the output

This text is bold

This text is italic

This text contains _subscript

This text contains ^superscript

Example 2
Preformatted text preserves both spaces and line breaks, WYSWYG, ideal for display code

<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
print i
next i
</pre>

and the output

This is
preformatted text.
It preserves      both spaces
and line breaks.

The pre tag is good for displaying computer code:

for i = 1 to 10
     print i
next i

HTML Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).

To display a less than sign in an HTML document we must write: < or <

The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.

Note that the entities are case sensitive and ended with semicolon ";"

The Most Common Character Entities:

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
"	quotation mark	"	"
'	apostrophe	' (does not work in IE)	'

Some Other Commonly Used Character Entities:

Result	Description	Entity Name	Entity Number
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
§	section	§	§
©	copyright	©	©
®	registered trademark	®	®
×	multiplication	×	×
÷	division	÷	÷

HTML Links

HTML uses the <a href='...'> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

Example 1=link to local file <a href='../dir/file.htm'>

<a href="apage.htm">
This text</a> is a link to a page on
this Web site.
<p/>

<a href="http://www.microsoft.com/">
This text</a> is a link to a page on
the World Wide Web.
<p/>

and the output

This text is a link to a page on this Web site.

This text is a link to a page on the World Wide Web

Example 2= link to part in same fileusing the pair<a href='#here>and <a id='here'/> placed at wehere to jum in the file
Using "#here" at the end of the link to jump to somewhere with <a href="#here"> within the page

<a href="http://www.w3schools.com/apage.htm#here">
Go here for explanation</a>

and within that file, there's something like

<a href="#here">
Go here for explanation</a>

Example 2
Tp jump to somewhere within the same file, just drop out the address

<a href="apage.htm#here">
Go here for explanation</a>

HTML Lists

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

Example 1

<ul>
       <li>Coffee</li>
 <li>Milk</li>
</ul>

and the output

Coffee
Milk

Example 2

Different type of unordered list

<h4>Disc bullets list:</h4>
<ul type="disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Circle bullets list:</h4>
<ul type="circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Square bullets list:</h4>
<ul type="square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

and the output

Disc bullets list:

Apples
Bananas
Lemons
Oranges

Circle bullets list:

Apples
Bananas
Lemons
Oranges

Square bullets list:

Apples
Bananas
Lemons
Oranges

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Example 3

<ol>
  <li>Coffee</li>
 <li>Milk</li>
</ol>

and the output

Coffee
Milk

Example 4

Different type of order list

<h4>Numbered list:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Letters list:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase letters list:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Roman numbers list:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

and the output

Numbered list:

Apples
Bananas
Lemons
Oranges

Letters list:

Apples
Bananas
Lemons
Oranges

Lowercase letters list:

Apples
Bananas
Lemons
Oranges

Roman numbers list:

Apples
Bananas
Lemons
Oranges

Lowercase Roman numbers list:

Apples
Bananas
Lemons
Oranges

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms.

A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.

Example 5

<dl>
   <dt>Coffee</dt>
      <dd>Black hot drink</dd>
   <dt>Milk</dt>
      <dd>White cold drink</dd>
</dl>

and the output

Coffee: Black hot drink
Milk: White cold drink

Example 6

Nested list

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea
      <ul>
      <li>China</li>
      <li>Africa</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

and the output

A nested List:

Coffee
Tea
- Black tea
- Green tea
  - China
  - Africa
Milk

HTML Tables

Nested tables are used intensively in HTML file to layout presentation. It's more powerful and more flexible than using HTML frame. Using HTML frame has limitation in some browser and unable going down to small area like table cell.

Example 1

<table border="1">
<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>

and the output

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Example 2
Using border attribute to do layout without border, drop out attribute or set to "0"

<!--table-->
<table border="0">
<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>

and the output

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Example 3
Headings in a table with extra row

<table border="1">
<tr>
 <th>Heading 1</th>
   <th>Heading 2</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>

and the output

Heading 1	Heading 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Example 4
Empty cells in a table

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

and the output

row 1, cell 1	row 1, cell 2
row 2, cell 1

Note : The $nbsp; is used in case some browser display no border for an empty cell

Example 5
Table with caption

<h4>
This table has a caption,
and a thick border:
</h4>

<table border="6">
<caption>My Caption</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

and the output

This table has a caption, and a thick border:

My Caption
100	200	300
400	500	600

Example 6
Table cells that span more than one row/column using rowspan /colspan

<<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

and the output

Cell that spans two columns:

Name	Telephone
Bill Gates	555 77 854	555 77 855

Cell that spans two rows:

First Name:	Bill Gates
Telephone:	555 77 854
Telephone:	555 77 855

Example 7
Layout presentation using nested tables

<table border="1">
<tr>
  <td>
   <p>This is a paragraph</p>
   <p>This is another paragraph</p>
  </td>
  <td>This cell contains a table:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>This cell contains a list
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

and the output

This is a paragraph

This is another paragraph

This cell contains a table:

A	B
C	D

This cell contains a list

apples
bananas
pineapples

HELLO

Example 8
Cell padding, to fill blank space around a cell

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

and the output

Without cellpadding:

First	Row
Second	Row

With cellpadding:

First	Row
Second	Row

Example 9
Cell spacing, to fill spcae around a cell

h4>Without cellspacing:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellspacing:</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

and the output

Without cellspacing:

First	Row
Second	Row

With cellspacing:

First	Row
Second	Row

Example 10
Add background color or image to table

<h4>A background color:</h4>
<table border="1" 
bgcolor="red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>A background image:</h4>
<table border="1" 
background="src/bgdesert.jpg">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

and the output

A background color:

First	Row
Second	Row

A background image:

First	Row
Second	Row

Example 11
Add background color or image to cell

<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="src/bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>

and the output

Cell backgrounds:

First	Row
Second	Row

Example 12
Align content in table

<table width="400" border="1">
 <tr>
  <th align="left">Money spent on....</th>
  <th align="right">January</th>
  <th align="right">February</th>
 </tr>
 <tr>
  <td align="left">Clothes</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">Make-Up</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">Food</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th align="left">Sum</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

and the output

Money spent on....	January	February
Clothes	$241.10	$50.20
Make-Up	$30.00	$44.45
Food	$730.40	$650.00
Sum	$1001.50	$744.65

HTML Forms

Example 1
Text and password type

<form>
   Username: <input type="text" name="user"><br>
   Password: <input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.
</p>

and the output

Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.

Example 2
Radio button

<form>
<input type="radio" name="sex" value="male"> Male<br>
<input type="radio" name="sex" value="female"> Female
</form>

and the output

Male
Female

Example 3
Check box

<form>
  I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br/>
  I have a car: <input type="checkbox" name="vehicle" value="Car"><br/>
  I have an airplane: <input type="checkbox" name="vehicle" value="Airplane">
</form>

and the output

I have a bike:
I have a car:
I have an airplane:

Example 4
Form action - Server Side Script run on Server, eg CGI, PHP, ...

<form name="input" action="html_form_action.cgi" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

and the output

Username:

If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "html_form_action.asp". That page will show you the received input

Example 5
Form action - Client Side Script run on Client, eg JavaScript

<script type="text/javascript">
      function doSubmit() {
        alert("Got It!");
      }
</script>

<form name="input" action="javascript:doSubmit()>
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

and the output

Username:

<form action="">
<select name="cars">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="fiat" selected="selected">Fiat</option>
   <option value="audi">Audi</option>
</select>
</form>

and the output

Example 7
Username and Passwd

<form>
   Username: <input type="text" name="user"><br>
   Password: <input type="password" name="password">
   <input type="submit" value="Submit">
</form>

and the output

Username:
Password:

HTML Images

Example 1
Insert image

An image: <img src="constr4.gif" width="144" height="50"><p/>

A moving image:<img src="hackanm.gif" width="48" height="48"><p/>

Note that the syntax of inserting a moving image is no different from that of a non-moving image.<p/>

and the output

An image:

A moving image:

Note that the syntax of inserting a moving image is no different from that of a non-moving image.

Example 2
Insert image from different location

An image from another folder: <img src="/images/netscape.gif" width="33" height="32"><p/>

An image from W3Schools: <img src="http://www.w3schools.com/images/ie.gif"><p/>

and the output

An image from another folder:

An image from W3Schools:

Example 3
Background image

<body background="background.jpg">

<h3>Look: A background image!</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p>

</body>

and the output

THC Publishing

Contact

Basic HTML

Basic HTML Tags

Example 1

Note

Example 2

Example 3

Example 4

Example 5

Example 6

Example 6

Header 1

Header 2

Header 3

Header 4

Header 5

HTML Tag Attributes

Header 1

Header 1

Note

HTML Text Formatting

HTML Character Entities

The Most Common Character Entities:

Some Other Commonly Used Character Entities:

HTML Links

HTML Lists

Unordered Lists

Example 1

Example 2

Disc bullets list:

Circle bullets list:

Square bullets list:

Ordered Lists

Example 4

Numbered list:

Letters list:

Lowercase letters list:

Roman numbers list:

Lowercase Roman numbers list:

Definition Lists

Example 6

A nested List:

HTML Tables

This table has a caption, and a thick border:

Cell that spans two columns:

Cell that spans two rows:

Without cellpadding:

With cellpadding:

Without cellspacing:

With cellspacing:

A background color:

A background image:

Cell backgrounds:

HTML Forms

HTML Images