What is an html File?

HTML is a format that tells a computer how to display a web page. The documents themselves are plain text files with special “tags” or codes that a web browser uses to interpret and display information on your computer screen.

HTML stands for Hyper Text Markup Language

What is HTML?

HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on
Browsers do not display the HTML tags, but use them to render the content of the page

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension comes from the past when some of the commonly used software only allowed three letter extensions. It is perfectly safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are treated as different files by the browser.

How to View HTML Source

A good way to learn HTML is to look at how other people have coded their html pages. To find out, simply click on the View option in your browsers toolbar and select Source or Page Source. This will open a window that shows you the actual HTML of the page. Go ahead and view the source html for this page.

HTML Tags

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here…</tagname>

HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name

Tip: The start tag is also called the opening tag, and the end tag the closing tag.

A Simple HTML Document

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Example Explained

The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:<!DOCTYPE html>

HTML Versions

Since the early days of the web, there have been many versions of HTML:

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Example

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag:

Example

The link’s destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example

HTML Buttons

HTML buttons are defined with the <button> tag:

Example

<button>Click me</button>

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

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

Example

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br>a paragraph<br>with line breaks.</p>

The HTML <pre> Element

The HTML <pre> element defines preformatted text.

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

Example

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</pre>

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:<tagname style=”property:value;“>

The property is a CSS property. The value is a CSS value.

HTML Background Color

The background-color property defines the background color for an HTML element.

This example sets the background color for a page to powderblue:

Example

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Text Color

The color property defines the text color for an HTML element:

Example

<h1 style=”color:blue;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

HTML Fonts

The font-family property defines the font to be used for an HTML element:

Example

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

HTML Text Size

The font-size property defines the text size for an HTML element:

Example

<h1 style=”font-size:300%;”>This is a heading</h1>
<p style=”font-size:160%;”>This is a paragraph.</p>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example

<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:center;”>Centered paragraph.</p>

HTML Formatting Elements

In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

<b> – Bold text
<strong> – Important text
<i> – Italic text
<em> – Emphasized text
<mark> – Marked text
<small> – Small text
<del> – Deleted text
<ins> – Inserted text
<sub> – Subscript text
<sup> – Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example

The HTML <strong> element defines strong text, with added semantic “strong” importance.

Example

<strong>This text is strong</strong>

HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

Example

<i>This text is italic</i>

The HTML <em> element defines emphasized text, with added semantic importance.

Example

<em>This text is emphasized</em>

Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is “important”.

HTML <small> Element

The HTML <small> element defines smaller text:

Example

<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>
T

HTML <del> Element

The HTML <del> element defines ~~deleted~~ (removed) text.

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines inserted (added) text.

Example

<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element

The HTML <sub> element defines _subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element

The HTML <sup> element defines ^{superscripted} text.

Example

<p>This is <sup>superscripted</sup> text.</p>

HTML Colors

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Color Names

In HTML, a color can be specified by using a color name:Tomato,Orange,Dodger,Blue,MediumSeaGreen,Gray,SlateBlue,Violet, LightGray

HTML supports 140 standard color names.

Background Color

You can set the background color for HTML elements:Hello World

Example

<h1 style=”background-color:DodgerBlue;”>Hello World</h1>
<p style=”background-color:Tomato;”>Lorem ipsum…</p>

Text Color

You can set the color of text:

Example

<h1 style=”color:Tomato;”>Hello World</h1>
<p style=”color:DodgerBlue;”>Lorem ipsum…</p>
<p style=”color:MediumSeaGreen;”>Ut wisi enim…</p>

Border Color

You can set the color of borders:

Example

<h1 style=”border:2px solid Tomato;”>Hello World</h1>
<h1 style=”border:2px solid DodgerBlue;”>Hello World</h1>
<h1 style=”border:2px solid Violet;”>Hello World</h1>

Example

<h1 style=”background-color:rgba(255, 99, 71, 0.5);”>…</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>…</h1>»

RGB Value

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED255

GREEN99

BLUE71

Example

rgb(255, 0, 0)rgb(0, 0, 255)rgb(60, 179, 113)rgb(238, 130, 238)rgb(255, 165, 0)rgb(106, 90, 205)

HTML <marquee> Tag

The <marquee> is a non-standard HTML tag which was used to create a scrolling text or an image. It was used to make the text/image scroll horizontally across or vertically down the web page.

Syntax

The <marquee> element comes in pairs. It means that the tag has opening (<marquee>) and closing (</marquee>) elements.

Example

 <!>
<!DOCTYPE html> 
<html>  
 <head>  
   <title>Title of the document</title>  
 </head>  
 <body>  
   <style>    
   marquee { width: 100%;    padding: 10px 0;  background-color: lightblue;       }   
  </style>   
  <marquee direction="scroll">A scrolling text created with HTML Marquee element and styled with CSS properties.</marquee>  
 </body> </html> </!>

Attribute	Value	Description
behavior	scroll slide alternate	Defines the scrolling type.
bgcolor	rgb(x,x,x) #xxxxxx colorname	Is used to give a background color.
direction	up down left right	Sets the direction for the scrolling content.
height	pixels %	Defines the marquee’s height.
hspace	pixels	Defines horizontal space around the marquee.
loop	number	Defines how many times the content will scroll. If we don’t define this, the content will scroll forever.
scrollamount	number	Defines the scrolling amount at each interval in pixels. Default value is 6.
scrolldelay	seconds	Defines how long delay will be between each jump. The default value is 85 and smaller amounts than 60 will be ignored.

vspace	pixels	Defines vertical space around the marquee.
width	pixels %	Defines the marquee’s width

HTML Tables

HTML Table Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example

<table style=”width:100%”>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
  <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

HTML Table – Adding a Border

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Bordered Table</h2>
<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Remember to define borders for both the table and the table cells.

HTML Table – Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

HTML Table – Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>Try to change the padding to 5px.</p>

</body>
</html>

HTML Table – Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

HTML Table – Adding Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

</body>
</html>

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table – Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

Example

<table style=”width:100%”>
  <tr>
    <th>Name</th>
    <th colspan=”2″>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

HTML Table – Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

HTML Table – Adding a Caption

To add a caption to a table, use the <caption> tag:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
</style>
</head>
<body>

<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t01 {
  width: 100%;    
  background-color: #f1f1c1;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Now you can define a special style for this table:

And add more styles:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Chapter Summary

Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table

HTML Lists

HTML List Example

An Unordered List:

Item
Item
Item
Item

An Ordered List:

First item
Second item
Third item
Fourth item

Unordered HTML List

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

The list items will be marked with bullets (small black circles) by default:

Example

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

Unordered HTML List – Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

Value	Description
disc	Sets the list item marker to a bullet (default)
circle	Sets the list item marker to a circle
square	Sets the list item marker to a square
none	The list items will not be marked

Example – Disc

<ul style=”list-style-type:disc;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example – Circle

<ul style=”list-style-type:circle;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example – Square

<ul style=”list-style-type:square;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example – None

<ul style=”list-style-type:none;”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered HTML List

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

The list items will be marked with numbers by default:

Example

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

Ordered HTML List – The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type	Description
type=”1″	The list items will be numbered with numbers (default)
type=”A”	The list items will be numbered with uppercase letters
type=”a”	The list items will be numbered with lowercase letters
type=”I”	The list items will be numbered with uppercase roman numbers
type=”i”	The list items will be numbered with lowercase roman numbers

Numbers:

<ol type=”1″>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Uppercase Letters:

<ol type=”A”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Lowercase Letters:

<ol type=”a”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Uppercase Roman Numbers:

<ol type=”I”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Lowercase Roman Numbers:

<ol type=”i”>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Nested HTML Lists

List can be nested (lists inside lists):

Example

<ul>
  <li>Coffee</li>
  <li>Tea
  <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Note: List items can contain new list, and other HTML elements, like images and links, etc.

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

Example

<ol start=”50″>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href=”#home”>Home</a></li>
  <li><a href=”#news”>News</a></li>
  <li><a href=”#contact”>Contact</a></li>
  <li><a href=”#about”>About</a></li>
</ul>

</body>
</html>

Chapter Summary

Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item marker
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to describe the term in a description list
Lists can be nested inside lists
List items can contain other HTML elements
Use the CSS property float:left or display:inline to display a list horizontally

HTML List Tags

Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list

HTML Quotation and Citation Elements

Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a section that is quoted from another source
<cite>	Defines the title of a work
<q>	Defines a short inline quotatio

HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.

Browsers usually insert quotation marks around the <q> element.

Example

<p>WWF’s goal is to: <q>Build a future where people live in harmony with nature.</q></p>

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

Example

<p>Here is a quote from WWF’s website:</p>
<blockquote cite=”http://www.worldwildlife.org/who/index.html”>
For 50 years, WWF has been protecting the future of nature.
The world’s leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

HTML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym.

Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Example

<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>

HTML <address> for Contact Information

The HTML <address> element defines contact information (author/owner) of a document or an article.

The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.

Example

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

HTML <cite> for Work Title

The HTML <cite> element defines the title of a work.

Browsers usually display <cite> elements in italic.

Example

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines bi-directional override.

The <bdo> element is used to override the current text direction:

Example

<bdo dir=”rtl”>This text will be written from right to left</bdo>

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:<!– Write your comments here –>

Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.

Note: Comments are not displayed by the browser, but they can help document your HTML source code.

With comments you can place notifications and reminders in your HTML:

Example

<!– This is a comment –>

<p>This is a paragraph.</p>

<!– Remember to add more information here –>

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:

Example

<!– Do not display this at the moment
<img border=”0″ src=”pic_trulli.jpg” alt=”Trulli”>

HTML Block and Inline Elements

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).The <div> element is a block-level element.

Example

<div>Hello</div>
<div>World</div>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Example

<span>Hello</span>
<span>World</span>

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example

<!DOCTYPE html>
<html>
<body>

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div> 

</body>
</html>

The <span> Element

The <span> element is often used as a container for some text.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My <span style="color:red">Important</span> Heading</h1>

</body>
</html>

HTML Grouping Tags

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

Using The class Attribute

The HTML class attribute is used to define equal styles for elements with the same class name.

So, all HTML elements with the same class attribute will have the same format and style.

Here we have three <div> elements that point to the same class name:

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
} 
</style>
</head>
<body>

<div class="cities">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="cities">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="cities">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Using The class Attribute on Inline Elements

The HTML class attribute can also be used on inline elements:

Note: The class name is case sensitive!

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "city":</p>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Multiple Classes

HTML elements can have more than one class name, each class name must be separated by a space.

<!DOCTYPE html>
<html>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 

.main {
  text-align: center;
}
</style>
<body>

<h2>Multiple Classes</h2>
<p>All three headers have the class name "city". In addition, London also have the class name "main", which center-aligns the text.</p>

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

</body>
</html>

Different Tags Can Share Same Class

Different tags, like <h2> and <p>, can have the same class name and thereby share the same style:

<!DOCTYPE html>
<html>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
<body>

<h2>Same Class, Different Tag</h2>
<p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:</p>

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>

</body>
</html>

HTML The id Attribute

Using The id Attribute

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value.

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element:

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
} 
</style>
</head>
<body>

<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Tip: The id attribute can be used on any HTML element.

Note: The id value is case-sensitive.

Note: The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.).

Difference Between Class and ID

An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements:

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
</head>
<body>

<h2>Difference Between Class and ID</h2>
<p>An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.</p>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

HTML Iframes

An iframe is used to display a web page within a web page.

Iframe Syntax

An HTML iframe is defined with the <iframe> tag:<iframe src=”URL“></iframe>

The src attribute specifies the URL (web address) of the inline frame page.

Iframe – Set Height and Width

Use the height and width attributes to specify the size of the iframe.

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

Example

Or you can use CSS to set the height and width of the iframe:

Example

Iframe – Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example

With CSS, you can also change the size, style and color of the iframe’s border:

Example

HTML File Paths

Path	Description
<img src=”picture.jpg”>	picture.jpg is located in the same folder as the current page
<img src=”images/picture.jpg”>	picture.jpg is located in the images folder in the current folder
<img src=”/images/picture.jpg”>	picture.jpg is located in the images folder at the root of the current web
<img src=”../picture.jpg”>	picture.jpg is located in the folder one level up from the current folder

HTML File Paths

A file path describes the location of a file in a web site’s folder structure.

File paths are used when linking to external files like:

Web pages
Images
Style sheets
JavaScripts

Absolute File Paths

An absolute file path is the full URL to an internet file:

Example

The <img> tag and the src and alt attributes are explained in the chapter about HTML Images.

Relative File Paths

A relative file path points to a file relative to the current page.

In this example, the file path points to a file in the images folder located at the root of the current web:

Example

In this example, the file path points to a file in the images folder located in the current folder:

Example

In this example, the file path points to a file in the images folder located in the folder one level above the current folder:

Example

HTML Layout Elements

Websites often display content in multiple columns (like a magazine or newspaper).

HTML5 offers new semantic elements that define the different parts of a web page:

Vertical Navigation Bar

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<h1>Vertical Navigation Bar</h1>

<ul>
  <li><a href="http://nictbharat.com/">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Top Navigation Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div style="padding-left:16px">
  <h2>Top Navigation Example</h2>
  <p>Some content..</p>
</div>

</body>
</html>

HTML Layout – Using Tables

The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout using Tables</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2007 HTCE.in
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

HTML Layouts – Using DIV, SPAN

The <div> element is a block level element used for grouping HTML elements. While the <div> tag is a block-level element, the HTML <span> element is used for grouping elements at an inline level.

Although we can achieve pretty nice layouts with HTML tables, but tables weren’t really designed as a layout tool. Tables are more suited to presenting tabular data.

Note − This example makes use of Cascading Style Sheet (CSS), so before understanding this example you need to have a better understanding on how CSS works.

Example

Here we will try to achieve same result using <div> tag along with CSS, whatever you have achieved using <table> tag in previous example.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layouts using DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Technical and Managerial Tutorials</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2007 HTCE.in
            </center>
         </div>
			
      </div>
   </body>

</html>

What is HTML Form :
HTML Form is a document which stores information of a user on a web server using interactive controls. An HTML form contains different kind of information such as username, password, contact number, email id etc.
The elements used in an HTML form are check box, input box, radio buttons, submit buttons etc. Using these elements the information of an user is submitted on a web server.

The form tag is used to create an HTML form.

Example of an HTML Form :

<!DOCTYPE html> 
<html> 
<body> 
  <form> 
  Username:<br> 
  <input type="text" name="username"> 
  <br> 
  Email id:<br> 
  <input type="text" name="email_id"> 
  <br><br> 
  <input type="submit" value="Submit"> 
</form>  
  
</body> 
</html>

Input Element in HTML Forms :

Input Elements are the most common elements which are used in HTML Forms. Various user input fields can be created such as textfield, check box, password field, radio button, submit button etc. The most common input elements are listed below:

Text Field in HTML Forms :
The text field is a one line input field allowing the user to input text. Text Field input controls are created using the “input” element with a type attribute having value as “text”.

<!DOCTYPE html> 
<html> 
<h3>Example Of Text Field</h3> 
<body> 
    <form> 
        <label for="EMAIL ID">Email Id:</label><br> 
        <input type="text" name="Email id" id="Email id"> 
    </form> 
</body> 
</html>

Password Field in HTML Forms :
Password fields are a type of text field in which the text entered is masked using asterisk or dots for prevention of user identity from another person who is looking onto the screen. Password Field input controls are created using the “input” element with a type attribute having value as “password”.

<!DOCTYPE html> 
<html> 
<h3>Example of Password Field</h3>     
<body> 
    <form> 
        <label for="user-password">Password: 
        </label><br> 
        <input type="password" name="user-pwd" 
                            id="user-password"> 
    </form> 
</body> 
</html>

Radio Buttons in HTML Form :
Radio Buttons are used to let the user select exactly one option from a list of predefined options. Radio Button input controls are created using the “input” element with a type attribute having value as “radio”.

<!DOCTYPE html> 
<html> 
<h3>Example of Radio Buttons</h3> 
<body> 
    <form> 
        SELECT GENDER 
        <br> 
        <input type="radio" name="gender" id="male"> 
        <label for="male">Male</label><br> 
        <input type="radio" name="gender" id="female"> 
        <label for="female">Female</label> 
    </form> 
</body> 
</html>

Checkboxes in HTML Form :
Checkboxes are used to let the user select one or more options from a pre-defined set of options. Checkbox input controls are created using the “input” element with a type attribute having value as “checkbox”.

<!DOCTYPE html> 
<html> 
<h3>Example of HTML Checkboxes</h3> 
<body> 
    <form> 
        <b>SELECT SUBJECTS</b> 
        <br> 
        <input type="checkbox" name="subject" id="maths"> 
        <label for="maths">Maths</label> 
        <input type="checkbox" name="subject" id="science"> 
        <label for="sceince">Science</label> 
        <input type="checkbox" name="subject" id="english"> 
        <label for="english">English</label> 
    </form> 
</body> 
</html>

File select boxes in HTML Forms :

File select boxes are used to allow the user to select a local file and send it as an attachment to the web server.It is similar to a text box with a button which allows the user to browse for a file.Instead of browsing for the file, the path and the name of the file can also be written. File select boxes are created using the “input” element with a type attribute having value as “file”.

<!DOCTYPE html> 
<html> 
<h3>Example of a File Select Box</3>  
    <body> 
    <form> 
        <label for="fileselect">Upload:</label> 
        <input type="file" name="upload" id="fileselect"> 
    </form> 
</body> 
</html>

Text area in an HTML Form :

Text Area is a multiple line text input control which allows user to provide a description or text in multiple lines. A Text Area input control is created using the “textarea” element.

<!DOCTYPE html> 
<html> 
<h3>Example of a Text Area Box</h3>  
<body> 
    <form> 
        <label for="Description">Description:</label> 
        <textarea rows="5" cols="50" name="Description"
                            id="Description"></textarea> 
    </form> 
</body> 
</html>

Select Boxes in HTML Forms :

Select boxes are used to allow users to select one or more than one option from a pull-down list of options. Select boxes are created using two elements which are “select” and “option”.List items are defined within the select element.

<!DOCTYPE html> 
<html> 
<h3>Example of a Select Box</h3>  
<body> 
    <form> 
        <label for="country">Country:</label> 
        <select name="country" id="country"> 
            <option value="India">India</option> 
            <option value="Sri Lanka">Sri Lanka</option> 
            <option value="Australia">Australia</option> 
        </select> 
    </form> 
</body> 
</html>

Reset And Submit Buttons :

The Submit Button allows the user to send the form data to the web server. The Reset Button is used to reset the form data and use the default values.

<!DOCTYPE html> 
<html> 
<h3>Example of a Submit And Reset Button</h3>  
<body> 
    <form action="test.php" method="post" id="users"> 
        <label for="username">Username:</label> 
        <input type="text" name="username" id="Username"> 
        <input type="submit" value="Submit"> 
        <input type="reset" value="Reset"> 
    </form> 
</body> 
</html>

Attributes Used in HTML Forms

The Action Attribute :
The action to be performed after the submission of the form is decided by the action attribute. Generally, the form data is sent to a webpage on the web server after the user clicks on the submit button.Example :

<!DOCTYPE html> 
<html> 
<h3>Example of a Submit And Reset Button</h3>  
<body> 
    <form action="test.php" method="post" id="users"> 
        <label for="username">Username:</label> 
        <input type="text" name="username" id="Username"> 
        <input type="submit" value="Submit"> 
        <input type="reset" value="Reset"> 
    </form> 
</body> 
</html>

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<ul id="nav">
  <li><a href=”#”>Home</a></li>
  <li><a href=”#”>News</a>
  <ul>
	<li><a href=”#”>haryana</a></li>
	<li><a href=”#”>delhi</a>
		<ul>
		<li><a href="#">Delhi NCR</a></li>
		<li><a href="#"> NCR</a></li>
				</ul>
	</li>
  </ul></li>
   <li><a href=”#”>Contact</a>
   <ul>
   <li><a href="#"> karnal</a>
   <ul>
   <li><a href="#"> kaithal</a></li>
   </ul>
   </li>
   </ul>
   </li>
  <li><a href=”#”>About</a></li>
</ul >

</body>
</html>

css code for navigation 


#nav {
list-style:none inside;
margin:10;
padding:15;
text-align:center;
}
#nav li {
display:block;
position:relative;
float:left;
background: #24af15; 
}
#nav li a {
display:block;
padding:0;
text-decoration:none;
width:130px; 
line-height:35px; 
color:white; 
}
#nav li li a {font-size:80%;} 
#nav li:hover {background:red;} 
#nav ul {
position:absolute;
padding:0;
left:0;
display:none; 
}
#nav li:hover ul ul {display:none;} 
#nav li:hover ul {display:block;} 
#nav li li:hover ul {
display:block;
margin-left:130px; 
margin-top:-35px;