Scribd
Upload
245 views

Ex: Movies: Syntax of HTML

An HTML file is a text file containing small markup tags. The markup tags tell the Web browser how to display the page. The most important tags in html are tags that define headings, paragraphs and line breaks.

Uploaded by

satyanarayana
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC or read online on Scribd
245 views

Ex: Movies: Syntax of HTML

An HTML file is a text file containing small markup tags. The markup tags tell the Web browser how to display the page. The most important tags in html are tags that define headings, paragraphs and line breaks.

Uploaded by

satyanarayana
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC or read online on Scribd
You are on page 1/ 78

HTML

Linear media: There has a defined Beginning and a linear progression to the end
Ex: Movies
Hyper media : This is opposite to linear media.
Ex: Audio cd
Hyper text: If the hyper media followed by the text then it is called Hyper text.
Hyper text: Hyper text is a method of representing the text in a high-lighted form.
Which when clicked displays more information, you r immediately transported to a new
location within the page or a new page altogether.
SGML: Standard Generalized Markup Language is the first Markup language developed,
Based on this HTML was developed
HTML use: It is mainly used to create Web pages.which displays the content in more
attractive manner and mainly focus on how data looks.
HTML : It was developed by Tim Berners Lee around 1990’s

• HTML stands for Hyper Text Markup Language


• HTML is error free.
• An HTML file is a text file containing small markup tags.
• The markup tags tell the Web browser how to display the page.
• An HTML file must have an htm or html file extension .
• An HTML file can be created using a simple text editor .
• HTML tags are used to mark-up HTML elements
• HTML tags are surrounded by the two characters < and >
• The surrounding characters are called angle brackets
• 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
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, <b> means the same as <B>

Syntax of html

<html>

<head>
<title>Title of page</title>
</head>

<body>

</body>

</html>
Explanation:

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 is displayed in your browser's
caption.

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.

Basic HTML Tags


The most important tags in HTML are tags that define headings, paragraphs and line breaks.

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the
smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading

Examples

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>


<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

Paragraphs

Paragraphs are defined with the <p> tag.

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

HTML automatically adds an extra blank line before and after a paragraph

Example:

<html>

<body>

<p>This paragraph contains a lot of lines in the source code, but the browser ignores it.</p>

<p>This paragraph contains a lot of spaces in the source code, but the browser ignores it.</p>

<p>The number of lines in a paragraph depends on the size of your browser window. If you resize the
browser window, the number of lines in this paragraph will change.</p>

</body>

</html>

Line Breaks

The <br> tag is used when you want to break a line, but don't want to start a new paragraph. The <br> tag
forces a line break wherever you place it.

<p> this is Iton Technologies <br> location:Tanuku</p>


Example:
<html>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
</body>
</html>
Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the
browser. You can use comments to explain your code, which can help you when you edit the source code at
a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Example:

<html>

<body>

<!--This comment will not be displayed-->

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

</body>

</html>

To draw a horizontal line we use the <hr> Tag

Examples:

<html>

<body>

<p>The hr tag defines a horizontal rule:</p>

<hr>

<p>This is a paragraph</p>

<hr>

<p>This is a paragraph</p>

<hr>

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

</html>

Preformatted tag

The < pre> tag is used to print text as it is in editor

Example

<html>

<head>

</head>

<body>

<pre>

hai

how

<pre>

</body>

</html>

Note:

Html ignores the white spaces whenever the browser encounters


blank spaces,tab spaces ,simply it will be replaced with the single
blank space.
<p> saaaaaaa aaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaa</p>

o/p: saaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaa

HTML Tag Attributes

HTML tags can have attributes. Attributes provide additional information to an HTML element.

Attributes defines the character of HTML tag

Attributes always come in name/value pairs like this: name="value".

Attributes are always specified in the start tag of an HTML element

Attributes Example 1:

<h1> defines the start of a heading.

<h1 align="center"> has additional information about the alignment.

Attributes Example 2:

<body> defines the body of an HTML document.

<body bgcolor="yellow"> has additional information about the background color.

Attributes Example 3:

<table> defines an HTML table. (You will learn more about HTML tables later)

<table border="1"> has additional information about the border around the table.

Text Formatting Tags

Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sup> Defines superscripted text

Example:

<html>

<head>

</head>

<body>

<b>This text is bold</b>

<br>

<strong>This text is strong</strong>

<br>

<big>This text is big</big>

<br>

<em>This text is emphasized</em>

<br>

<i>This text is italic</i>

<br>

<small>This text is small</small>

<br>

This text contains

<sub>subscript</sub>

<br>

This text contains

<sup>superscript</sup>
</body>

</html>

Computer Output Tags

Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable

Example:

<html>

<body>

<code>Computer code</code>

<br>

<kbd>Keyboard input</kbd>

<br>

<tt>Teletype text</tt>

<br>

<samp>Sample text</samp>

<br>

<var>Computer variable</var>

<br>

<pre>

tags are often used to display


computer/programming code.

</pre>

</body></html>

Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation

Example:

<html>

<body>

<address>

Donald Duck<br>

BOX 555<br>

Disneyland<br>

USA

</address>

<abbr title="United Nations">UN</abbr>

<br>

<acronym title="World Wide Web">WWW</acronym>

<blockquote>

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a
long quotation.

</blockquote>

Here comes a short quotation:


<q>This is a short quotation</q>

<p>

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left
(rtl):

</p>

<bdo dir="rtl">Here is some Hebrew text</bdo>

<p>a dozen is

<del>twenty</del>

<ins>twelve</ins>

pieces</p>

<p>Most browsers will overstrike deleted text and underline inserted text.</p>

</body>

</html>

Non-breaking Space

The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of
them. To add spaces to your text, use the &nbsp; character entity.

The Most Common Character Entities:


Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &apos; (does not work in IE) &#39;

Some Other Commonly Used Character Entities:


Result Description Entity Name Entity Number
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
× multiplication &times; &#215;
÷ division &divide; &#247;

HTML Links
HTML uses a hyperlink to link to another document on the Web.

The Anchor Tag and the Href Attribute

HTML uses the <a> (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.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to
link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

Examples:

<html>

<body>

<p>

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

</p>

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

</body>

</html>

The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

<a href="file.html" target="_blank">Visit W3Schools!</a>


We can use image as link

Example:

<html>

<body>

<p>You can also use an image as a link:

<a href="lastpage.htm">

<img border="0" src="buttonnext.gif" width="65" height="38">

</a>

</p>

</body>

</html>

HTML Frames

Frames

With frames, you can display more than one HTML document in the same browser window. Each HTML
document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

• The web developer must keep track of more HTML documents


• It is difficult to print the entire page

Frame Tags
Tag Description
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)

<iframe> Defines an inline sub window (frame)

The Frameset Tag


• The <frameset> tag defines how to divide the window into frames
• Each frameset defines a set of rows or columns
• The values of the rows/columns indicate the amount of screen area each row/column will occupy

The Frame Tag

• The <frame> tag defines what HTML document to put into each frame

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>

Example :Vertical

<html>

<head>

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</head>

</html>

Example:Horizontal

<html>

<frameset rows="25%,50%,25%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">
<frame src="frame_c.htm">

</frameset>

</html>

Example: both vertical and horizontal

<html>

<frameset rows="50%,50%">

<frame src="frame_a.htm">

<frameset cols="25%,75%">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</frameset></html>

IFrame tag: It is a tags that Loads the the page

Example:

<html>

<body>

<iframe src="default.html"></iframe>

<p>Some older browsers don't support iframes.</p><p>If they don't, the iframe will not
be visible.</p>

</body>

</html>

HTML Tables

Tables

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.

Example:
<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>

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders.
Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to 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>

o/p

Another
Heading
Heading

row 1, cell row 1, cell 2


1

row 2, cell
row 2, cell 2
1

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

<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></td>
</tr>
</table>

o/p

row 1, cell row 1, cell


1 2

row 2, cell
1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays
the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders
visible:

<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>

o/p

row 1, cell row 1, cell


1 2

row 2, cell
1

Table with no border

Example

<html>

<body>

<h4>This table has no borders:</h4>

<table>

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>
</table>

<h4>And this table has no borders:</h4>

<table border="0">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr>

</table>

</body>

</html>

Headings in a table

<html>

<body>

<h4>Table headers:</h4>
<table border="1">

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<table border="1">

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<th>Telephone:</th>
<td>555 77 855</td>

</tr>

</table>

</body>

</html>

Empty cells
<html>

<body>

<table border="1">

<tr>

<td>Some text</td>

<td>Some text</td>

</tr>

<tr>

<td></td>

<td>Some text</td>

</tr>

</table>

<p>

As you can see, one of the cells has no border. That is because it is empty. Try to insert a
space in the cell. Still it has no border.

</p>
<p>

The trick is to insert a no-breaking space in the cell.

</p>

<p>No-breaking space is a character entity. If you don't know what a character entity is,
read the chapter about it.

</p>

<p>The no-breaking space entity starts with an ampersand ("&"),

then the letters "nbsp", and ends with a semicolon (";")

</p>

<p>

</p>

</body>

</html>

Table with a caption

<html>

<body>

<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>

</body>

</html>

Table cells that span more than one row/column


<html>

<body>

<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>
</body>

</html>

Tags inside a table.

<html>

<body>

<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>

</body>

</html>

Cell padding

<html>

<body>

<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="20">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>
Cell spacing

<html>

<body>

<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>

</body>

</html>

Add a background color or a background image to a table


<html>

<body>

<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="bgdesert.jpg">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

Add a background color or a background image to a table cell

<html>

<body>

<h4>Cell backgrounds:</h4>

<table border="1">
<tr>

<td bgcolor="red">First</td>

<td>Row</td>

</tr>

<tr>

<td

background="bgdesert.jpg">

Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

Align the content in a table cell

<html>

<body>

<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>

</body>

</html>
The frame attribute
<html>

<body>

<p>

If you see no frames around the tables in these examples, your browser is too old, or does
not support it.

</p>

<h4>With frame="border":</h4>

<table frame="border">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="box":</h4>

<table frame="box">

<tr>

<td>First</td>

<td>Row</td>
</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="void":</h4>

<table frame="void">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="above":</h4>

<table frame="above">

<tr>

<td>First</td>

<td>Row</td>

</tr>
<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="below":</h4>

<table frame="below">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="hsides":</h4>

<table frame="hsides">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>
<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="vsides":</h4>

<table frame="vsides">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

<h4>With frame="lhs":</h4>

<table frame="lhs">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>
<td>Row</td>

</tr>

</table>

<h4>With frame="rhs":</h4>

<table frame="rhs">

<tr>

<td>First</td>

<td>Row</td>

</tr>

<tr>

<td>Second</td>

<td>Row</td>

</tr>

</table>

</body>

</html>

The frame and border attributes

<html>

<body>

<p>
If you see no frames around the tables in these examples, your browser
does not support the frame attribute.

</p>

<table frame="hsides" border="3">

<tr>

<td>First row</td>

</tr>

</table>

<br />

<table frame="vsides" border="3">

<tr>

<td>First row</td>

</tr>

</table>

</body>

</html>

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

<col> Defines the attribute values for one or more columns in a table

<thead> Defines a table head

<tbody> Defines a table body

HTML Lists

HTML supports ordered, unordered and definition 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.

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

Here is how it looks in a browser:

• Coffee
• Milk

Inside a list item you can put paragraphs, line breaks, images, links, other
lists, etc.

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.

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

Here is how it looks in a browser:

1. Coffee
2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other
lists, etc.

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.

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

Here is how it looks in a browser:

Coffee

Black hot drink

Milk

White cold drink


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

More Examples

Different types of ordered lists.

<html>

<body>

<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>
</body>

</html>

Different types of unordered Lists


<html>

<body>

<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>

</body>

</html>

Nested list

<html>

<body>

<h4>A nested List:</h4>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>
<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

</body>

</html>

Nested list 2
<html>

<body>

<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>

</body>

</html>

Definition list

<html>

<body>

<h4>A Definition List:</h4>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

</body>

</html>
List Tags
Tag Description

<ol> Defines an ordered list

<ul> Defines an unordered list

<li> Defines a list item

<dl> Defines a definition list

<dt> Defines a definition term

<dd> Defines a definition description

HTML Forms and Input

Forms

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like
text fields, textarea fields, drop-down menus, radio buttons, checkboxes,
etc.) in a form.

A form is defined with the <form> tag.


<form>
<input>
<input>
</form>

Input

The most used form tag is the <input> tag. The type of input is specified
with the type attribute. The most commonly used input types are explained
below.

Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in
a form.

<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>

How it looks in a browser:

First name:
Last name:

Note that the form itself is not visible. Also note that in most browsers, the
width of the text field is 20 characters by default.

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited
number of choices.

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

How it looks in a browser:

Male
Female

Note that only one option can be chosen.

Checkboxes

Checkboxes are used when you want the user to select one or more options
of a limited number of choices.

<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>

How it looks in a browser:

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

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent
to another file. The form's action attribute defines the name of the file to
send the content to. The file defined in the action attribute usually does
something with the received input.
<form name="input" action="html_form_action.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

How it looks in a browser:

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.

More Examples

Simple drop down box


<html>

<body>

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

</body>
</html>

Textarea
<html>

<body>

<p> This example cannot be edited because our editor uses a textarea for
input, and your browser does not allow a textarea inside a textarea. </p>

<textarea rows="10" cols="30">

The cat was playing in the garden.

</textarea>

</body>

</html>

Fieldset around data


<html>

<body>

<fieldset>

<legend>

Health information:

</legend>

<form action="">

Height <input type="text" size="3">

Weight <input type="text" size="3">

</form>

</fieldset>
<p>

If there is no border around the input form, your browser is too old.

</p>

</body>

</html>

Form Examples

Form with input fields and a submit button


<html>

<body>

<form name="input" action="html_form_action.asp" method="get">

Type your first name:

<input type="text" name="FirstName" value="Mickey" size="20">

<br>Type your last name:

<input type="text" name="LastName" value="Mouse" size="20">

<br>

<input type="submit" value="Submit">

</form>
<p>

If you click the "Submit" button, you will send your input to a new page
called html_form_action.asp.

</p>

</body>

</html>

Form with checkboxes


<html>

<body>

<form name="input" action="html_form_action.asp" method="get">

I have a bike:

<input type="checkbox" name="vehicle" value="Bike" checked="checked"


/>

<br />

I have a car:

<input type="checkbox" name="vehicle" value="Car" />

<br />

I have an airplane:

<input type="checkbox" name="vehicle" value="Airplane" />

<br /><br />

<input type="submit" value="Submit" />

</form>
<p>

If you click the "Submit" button, you send your input to a new page called
html_form_action.asp.

</p>

</body>

</html>

Form with radio buttons


This form contains two radio buttons, and a submit button.

Send e-mail from a form


<html>

<body>

<form action="MAILTO:[email protected]" method="post"


enctype="text/plain">

<h3>This form sends an e-mail to W3Schools.</h3>

Name:<br>

<input type="text" name="name"

value="yourname" size="20">

<br>

Mail:<br>

<input type="text" name="mail"

value="yourmail" size="20">

<br>
Comment:<br>

<input type="text" name="comment"

value="yourcomment" size="40">

<br><br>

<input type="submit" value="Send">

<input type="reset" value="Reset">

</form>

</body>

</html>

Form Tags
Tag Description

<form> Defines a form for user input

<input> Defines an input field

<textarea> Defines a text-area (a multi-line text input control)

<label> Defines a label to a control

<fieldset> Defines a fieldset

<legend> Defines a caption for a fieldset

<select> Defines a selectable list (a drop-down box)

<optgroup> Defines an option group

<option> Defines an option in the drop-down box

<button> Defines a push button


HTML Images

With HTML you can display images in a document.

Examples

Insert images
<html>

<body>

<p>

An image:

<img src="constr4.gif"

width="144" height="50">

</p>

<p>

A moving image:

<img src="hackanm.gif" width="48" height="48">

</p>

</body>

</html>

The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag.


The <img> tag is empty, which means that it contains attributes only and it
has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands
for "source". The value of the src attribute is the URL of the image you want
to display on your page.

The syntax of defining an image:

<img src="url">

The URL points to the location where the image is stored. The browser puts
the image where the image tag occurs in the document. If you put an image
tag between two paragraphs, the browser shows the first paragraph, then
the image, and then the second paragraph.

The Alt Attribute

The alt attribute is used to define an "alternate text" for an image. The value
of the alt attribute is an author-defined text:

<img src="boat.gif" alt="Big Boat">

The "alt" attribute tells the reader what he or she is missing on a page if the
browser can't load images. The browser will then display the alternate text
instead of the image. It is a good practice to include the "alt" attribute for
each image on a page, to improve the display and usefulness of your
document for people who have text-only browsers.

Examples

Display an alternate text for an image


This example demonstrates how to display an alternate text for an image.
The "alt" attribute tells the reader what he or she is missing on a page if the
browser can't load images. It is a good practice to include the "alt" attribute
for each image on a page.
Make a hyperlink of an image
This example demonstrates how to use an image as a link.

Background colors

The 216 cross-browser color palette was created to ensure that all computers would display the
colors correctly when running a 256 color palette:

000000 000033 000066 000099 0000CC 0000FF


003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

HTML Color Names

The table below provides a list of the color names that are supported by all
major browsers.

Note: If you want your pages to validate with an HTML or a CSS validator,
W3C has listed 16 color names that you can use: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
yellow. If you want to use other colors, you must specify their RGB or HEX
value.

Click on a color name (or a hex value) to view the color as the background-
color along with different text colors:

Color Name Color HEX Color

AliceBlue #F0F8FF

AntiqueWhite #FAEBD7

Aqua #00FFFF

Aquamarine #7FFFD4

Azure #F0FFFF

Beige #F5F5DC

Bisque #FFE4C4
Black #000000

BlanchedAlmond #FFEBCD

Blue #0000FF

BlueViolet #8A2BE2

Brown #A52A2A

BurlyWood #DEB887

CadetBlue #5F9EA0

Chartreuse #7FFF00

Chocolate #D2691E

Coral #FF7F50

CornflowerBlue #6495ED

Cornsilk #FFF8DC

Crimson #DC143C

Cyan #00FFFF

DarkBlue #00008B

DarkCyan #008B8B

DarkGoldenRod #B8860B

DarkGray #A9A9A9

DarkGrey #A9A9A9

DarkGreen #006400

DarkKhaki #BDB76B

DarkMagenta #8B008B

DarkOliveGreen #556B2F

Darkorange #FF8C00
DarkOrchid #9932CC

DarkRed #8B0000

DarkSalmon #E9967A

DarkSeaGreen #8FBC8F

DarkSlateBlue #483D8B

DarkSlateGray #2F4F4F

DarkSlateGrey #2F4F4F

DarkTurquoise #00CED1

DarkViolet #9400D3

DeepPink #FF1493

DeepSkyBlue #00BFFF

DimGray #696969

DimGrey #696969

DodgerBlue #1E90FF

FireBrick #B22222

FloralWhite #FFFAF0

ForestGreen #228B22

Fuchsia #FF00FF

Gainsboro #DCDCDC

GhostWhite #F8F8FF

Gold #FFD700

GoldenRod #DAA520

Gray #808080
Grey #808080

Green #008000

GreenYellow #ADFF2F

HoneyDew #F0FFF0

HotPink #FF69B4

IndianRed #CD5C5C

Indigo #4B0082

Ivory #FFFFF0

Khaki #F0E68C

Lavender #E6E6FA

LavenderBlush #FFF0F5

LawnGreen #7CFC00

LemonChiffon #FFFACD

LightBlue #ADD8E6

LightCoral #F08080

LightCyan #E0FFFF

LightGoldenRodYello
#FAFAD2
w

LightGray #D3D3D3

LightGrey #D3D3D3

LightGreen #90EE90

LightPink #FFB6C1

LightSalmon #FFA07A
LightSeaGreen #20B2AA

LightSkyBlue #87CEFA

LightSlateGray #778899

LightSlateGrey #778899

LightSteelBlue #B0C4DE

LightYellow #FFFFE0

Lime #00FF00

LimeGreen #32CD32

Linen #FAF0E6

Magenta #FF00FF

Maroon #800000

MediumAquaMarine #66CDAA

MediumBlue #0000CD

MediumOrchid #BA55D3

MediumPurple #9370D8

MediumSeaGreen #3CB371

MediumSlateBlue #7B68EE

MediumSpringGreen #00FA9A

MediumTurquoise #48D1CC

MediumVioletRed #C71585

MidnightBlue #191970

MintCream #F5FFFA

MistyRose #FFE4E1

Moccasin #FFE4B5
NavajoWhite #FFDEAD

Navy #000080

OldLace #FDF5E6

Olive #808000

OliveDrab #6B8E23

Orange #FFA500

OrangeRed #FF4500

Orchid #DA70D6

PaleGoldenRod #EEE8AA

PaleGreen #98FB98

PaleTurquoise #AFEEEE

PaleVioletRed #D87093

PapayaWhip #FFEFD5

PeachPuff #FFDAB9

Peru #CD853F

Pink #FFC0CB

Plum #DDA0DD

PowderBlue #B0E0E6

Purple #800080

Red #FF0000

RosyBrown #BC8F8F

RoyalBlue #4169E1

SaddleBrown #8B4513
Salmon #FA8072

SandyBrown #F4A460

SeaGreen #2E8B57

SeaShell #FFF5EE

Sienna #A0522D

Silver #C0C0C0

SkyBlue #87CEEB

SlateBlue #6A5ACD

SlateGray #708090

SlateGrey #708090

Snow #FFFAFA

SpringGreen #00FF7F

SteelBlue #4682B4

Tan #D2B48C

Teal #008080

Thistle #D8BFD8

Tomato #FF6347

Turquoise #40E0D0

Violet #EE82EE

Wheat #F5DEB3

White #FFFFFF

WhiteSmoke #F5F5F5

Yellow #FFFF00
YellowGreen #9ACD32

HTML Basic Document

<html>
<head>
<title>Document name goes here</title>
</head>

<body>
Visible text goes here
</body>

</html>

Heading Elements
<h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>

Links, Anchors, and Image Elements


<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:[email protected]">Send e-mail</a>

Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>

Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Frames

<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>

Forms
<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="lastname" value="Nixon" size="30"

maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>

<textarea name="Comment" rows="60" cols="20"></textarea>

</form>
Entities
&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©

Other Elements

<!-- This is a comment -->

<blockquote>
Text quoted from some source.
</blockquote>

<address>
Address 1<br>
Address 2<br>
City<br>
</address>

Information Inside the Head Element

The elements inside the head element should not be displayed by a browser.

According to the HTML standard, only a few tags are legal inside the head
section. These are: <link>, <meta>, <title>, <style>, and <script>.

Look at the following illegal construct:

<head>
<p>This is some text</p>
</head>

In this case the browser has two options:

• Display the text because it is inside a paragraph element


• Hide the text because it is inside a head element

If you put an HTML element like <h1> or <p> inside a head element like
this, most browsers will display it, even if it is illegal.
<html>

<head>

<meta name="author"

content="Jan Egil Refsnes">

<meta name="revised"

content="Jan Egil Refsnes,6/10/99">

<meta name="generator"

content="Microsoft FrontPage 4.0">

</head>

<body>

<p>

The meta attributes of this document identify the author and the editor software.

</p>

</body>

</html>
Head Tags
Tag Description

<head> Defines information about the document

<title> Defines the document title

<link> Defines a resource reference

<meta> Defines meta information

The HTML <font> Tag


With HTML code like this, you can specify both the size and the type of the
browser output :

<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>

Font Attributes
Attribute Example Purpose

size="number" size="2" Defines the font size

color="color-value" color="#eeff00" Defines the font color

face=”style” Face=”verdana” Defines the font style


color="color-name" color="red" Defines the font color

It is used to set the color and size of text.It has three attributes

1 size

2.color

3.face

Set the font size, font style and font color of text

<html>

<body>

<p>

<font size="2" face="Verdana" color="red">

This is a paragraph.

</font>

</p>

<p>

<font size="3" face="Courier New" color="green">

This is another paragraph.

</font>

</p>

</body>

</html>
CASCADED STYLESHEETS
There are 3 types style sheet

1. External stylesheet
2. Internal stylesheet
3. Inline stylesheet

External Style Sheet

An external style sheet is ideal when the style is applied to many pages.
With an external style sheet, you can change the look of an entire Web site
by changing one file. Each page must link to the style sheet using the <link>
tag. The <link> tag goes inside the head section.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Internal Style Sheet

An internal style sheet should be used when a single document has a unique
style. You define internal styles in the head section with the <style> tag.

<head>
<style type="text/css">
body {
background-color: red
}
p
{
margin-left: 20px
}
</style>
</head>

Inline Styles

An inline style should be used when a unique style is to be applied to a


single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property. The example shows how to change
the color and the left margin of a paragraph:

<p style="color: red; margin-left: 20px">


This is a paragraph
</p>

Style Tags
Tag Description

<style> Defines a style definition

<link> Defines a resource reference

<div> Defines a section in a document

Ordered Alphabetically

DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict,
T=Transitional, and F=Frameset

Tag Description DTD

<!--...--> Defines a comment STF

<!DOCTYPE> Defines the document type STF

<a> Defines an anchor STF

<abbr> Defines an abbreviation STF

<acronym> Defines an acronym STF

<address> Defines an address element STF

<b> Defines bold text STF

<bdo> Defines the direction of text display STF


<big> Defines big text STF

<blockquote> Defines a long quotation STF

<body> Defines the body element STF

<br> Inserts a single line break STF

<button> Defines a push button STF

<caption> Defines a table caption STF

<center> Deprecated. Defines centered text TF

<cite> Defines a citation STF

<code> Defines computer code text STF

<col> Defines attributes for table columns STF

<colgroup> Defines groups of table columns STF

<dd> Defines a definition description STF

<del> Defines deleted text STF

<div> Defines a section in a document STF

<dl> Defines a definition list STF

<dt> Defines a definition term STF

<em> Defines emphasized text STF

<fieldset> Defines a fieldset STF

<font> Deprecated. Defines text font, size, and color TF

<form> Defines a form STF

<frame> Defines a sub window (a frame) F

<frameset> Defines a set of frames F

<h1> to <h6> Defines header 1 to header 6 STF

<head> Defines information about the document STF


<hr> Defines a horizontal rule STF

<html> Defines an html document STF

<i> Defines italic text STF

<iframe> Defines an inline sub window (frame) TF

<img> Defines an image STF

<input> Defines an input field STF

<ins> Defines inserted text STF

<kbd> Defines keyboard text STF

<label> Defines a label for a form control STF

<legend> Defines a title in a fieldset STF

<li> Defines a list item STF

<link> Defines a resource reference STF

<meta> Defines meta information STF

<ol> Defines an ordered list STF

<optgroup> Defines an option group STF

<option> Defines an option in a drop-down list STF

<p> Defines a paragraph STF

<param> Defines a parameter for an object STF

<pre> Defines preformatted text STF

<samp> Defines sample computer code STF

<script> Defines a script STF

<select> Defines a selectable list STF

<small> Defines small text STF

<span> Defines a section in a document STF

<strong> Defines strong text STF


<style> Defines a style definition STF

<sub> Defines subscripted text STF

<sup> Defines superscripted text STF

<table> Defines a table STF

<tbody> Defines a table body STF

<td> Defines a table cell STF

<textarea> Defines a text area STF

<th> Defines a table header STF

<title> Defines the document title STF

<tr> Defines a table row STF

<tt> Defines teletype text STF

<ins> Defines underlined text TF

<ul> Defines an unordered list STF

<var> Defines a variable STF

HTML 4.0 Event Attributes

New to HTML 4.0 is the ability to let HTML events trigger actions in the
browser, like starting a JavaScript when a user clicks on an HTML element.
Below is a list of attributes that can be inserted into HTML tags to define
event actions.
If you want to learn more about programming with these events, you should
study our JavaScript tutorial and our DHTML tutorial.

Window Events

Only valid in body and frameset elements.

Attribute Value Description

onload script Script to be run when a document loads

onunload script Script to be run when a document unloads

Form Element Events

Only valid in form elements.

Attribute Value Description

onchange script Script to be run when the element changes

onsubmit script Script to be run when the form is submitted

onreset script Script to be run when the form is reset

onselect script Script to be run when the element is selected

onblur script Script to be run when the element loses focus

onfocus script Script to be run when the element gets focus

Keyboard Events

Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta,
param, script, style, and title elements.

Attribute Value Description


onkeydown script What to do when key is pressed

onkeypress script What to do when key is pressed and released

onkeyup script What to do when key is released

Mouse Events

Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta,
param, script, style, title elements.

Attribute Value Description

onclick script What to do on a mouse click

ondblclick script What to do on a mouse double-click

onmousedown script What to do when mouse button is pressed

onmousemove script What to do when mouse pointer moves

onmouseout script What to do when mouse pointer moves out of an


element

onmouseover script What to do when mouse pointer moves over an


element

onmouseup script What to do when mouse button is released

You might also like