HTML, DHTML, CSS, Java Script: Tag Description DTD Basic

HTML, DHTML, CSS, Java Script
Tag Description DTD

Basic
<!DOCTYPE> Defines the document type STF
<html> Defines an HTML document STF
<body> Defines the document's body STF
<h1> to <h6> Defines HTML headings STF
<p> Defines a paragraph STF
<br /> Inserts a single line break STF
<hr /> Defines a horizontal line STF
 Defines a comment STF
Formatting
<acronym> Defines an acronym STF
<address> Defines contact information for the author/owner of a document STF
<b> Defines bold text STF
<bdo> Defines the text direction STF
<big> Defines big text STF
<blockquote> Defines a long quotation STF
<center> Deprecated. Defines centered text TF
<cite> Defines a citation STF
<code> Defines computer code text STF
<del> Defines deleted text STF
<dfn> Defines a definition term STF
<em> Defines emphasized text STF
<font> Deprecated. Defines font, color, and size for text TF
<i> Defines italic text STF
<ins> Defines inserted text STF
<kbd> Defines keyboard text STF
<pre> Defines preformatted text STF
<samp> Defines sample computer code STF
<small> Defines small text STF
<strike> Deprecated. Defines strikethrough text TF
<strong> Defines strong text STF
<sub> Defines subscripted text STF
<sup> Defines superscripted text STF
<tt> Defines teletype text STF
<u> Deprecated. Defines underlined text TF
<var> Defines a variable part of a text STF
1
<xmp> Deprecated. Defines preformatted text
Forms
<form> Defines an HTML form for user input STF
<input /> Defines an input control STF
<textarea> Defines a multi-line text input control STF
<button> Defines a push button STF
<select> Defines a select list (drop-down list) STF
<optgroup> Defines a group of related options in a select list STF
<option> Defines an option in a select list STF
<label> Defines a label for an input element STF
<fieldset> Defines a border around elements in a form STF
<legend> Defines a caption for a fieldset element STF
<isindex> Deprecated. Defines a searchable index related to a document TF
Frames
<frame /> Defines a window (a frame) in a frameset F
<frameset> Defines a set of frames F
<noframes> Defines an alternate content for users that do not support frames TF
<iframe> Defines an inline frame TF
Images
<img /> Defines an image STF
<map> Defines an image-map STF
<area /> Defines an area inside an image-map STF
Links
<a> Defines an anchor STF
<link /> Defines the relationship between a document and an external resource STF
Lists
<ul> Defines an unordered list STF
<ol> Defines an ordered list STF
<li> Defines a list item STF
<dir> Deprecated. Defines a directory list TF
<dl> Defines a definition list STF
<dt> Defines a term (an item) in a definition list STF
<dd> Defines a description of a term in a definition list STF
<menu> Deprecated. Defines a menu list TF
Tables
<table> Defines a table STF
<caption> Defines a table caption STF
<th> Defines a header cell in a table STF
<tr> Defines a row in a table STF
<td> Defines a cell in a table STF
2
<thead> Groups the header content in a table STF
<tbody> Groups the body content in a table STF
<tfoot> Groups the footer content in a table STF
<col /> Defines attribute values for one or more columns in a table STF
Styles
<style> Defines style information for a document STF
<div> Defines a section in a document STF
<span> Defines a section in a document STF
Meta Info
<head> Defines information about the document STF
<title> Defines the document title STF
<meta> Defines metadata about an HTML document STF
<base /> Defines a default address or a default target for all links on a page STF
<basefont /> Deprecated. Defines a default font, color, or size for the text in a page TF
Programming
<script> Defines a client-side script STF
<noscript> Defines an alternate content for users that do not support client-side scripts STF
<applet> Deprecated. Defines an embedded applet TF
<object> Defines an embedded object STF
<param /> Defines a parameter for an object STF
Keyboard Events
Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta,
param, script, style, and title.
Attribute Value Description

onkeydown script Script to be run when a key is pressed
onkeypress script Script to be run when a key is pressed and released
onkeyup script Script to be run when a key is released
====================================
<html> Defines an HTML document

<body> Defines the document's body
HTML Links
3
HTML links are defined with the <a> tag.
Example
<a href="http://www.w3schools.com">This is a link</a>
HTML Images
HTML Image Tags

Tag Description
<img /> Defines an image
<map> Defines an image-map
<area /> Defines a clickable area inside an image-map
HTML images are defined with the <img> tag.

Example
<img src="w3schools.jpg" width="104" height="142" />
Nested HTML Elements
<body>
<p>This is my first paragraph.</p>
</body>
The <html> element:

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
------------------------------------------------
HTML Attributes
Attributes provide additional information about HTML elements.

HTML Attributes
* HTML elements can have attributes

* Attributes provide additional information about an element
* Attributes are always specified in the start tag
* Attributes come in name/value pairs like: name="value"
Attribute Example
Attribute values should always be enclosed in quotes.
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="http://www.w3schools.com">This is a link</a>
--------------------------------------------------------
Headings
4
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
<h1>This is a heading</h1>
--------------------------------------------------------
HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments
are ignored by the browser and are not displayed.
Comments are written like this:
Example

---------------------------------------------------------
HTML Paragraphs
HTML documents are divided into paragraphs.

HTML Paragraphs
Paragraphs are defined with the <p> tag.

Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Note: Browsers automatically add an empty line before and after a paragraph.
-----------------------------------------------------------------------------
HTML Line Breaks
<br /> Inserts a single line break
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br />a para<br />graph with line breaks</p>
The <br /> element is an empty HTML element. It has no end tag.
<br> or <br />
--------------------------------------------------------------------------------------------
HTML Text Formatting
5
This text is bold
This text is big
This text is italic
This is computer output
This is subscript and superscript
Often <strong> renders as <b>, and <em> renders as <i>.
However, there is a difference in the meaning of these tags:
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be rendered in a way that
the user understands as "important".
Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to
make a text highlighted with the strong feature, it might be cursive for example and not bold!
--------------------------------------------------------------------------
HTML 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
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
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
<pre> Defines preformatted text
-------------------------------------------------------------------------------------
HTML Styles
Look! Styles and colors

This text is in Verdana and red
This text is in Times and blue
6
This text is 30 pixels high
Tags Description <center> Defines centered content <font> and <basefont> Defines HTML fonts <s> and
<strike> Defines strikethrough text <u> Defines underlined text Attributes Description align Defines the
alignment of text bgcolor Defines the background color color Defines the text color
HTML Style Example - Background Color

The background-color property defines the background color for an element:
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
7
HTML Images
<html>
<body>
<img src="tr.jpg"/>
</body
</html>
HTML The Alternate Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat" />
Aligning Image
<html>
<body>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" />
with align="bottom".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />
with align="middle".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />
with align="top".</p>
<p><b>Tip:</b> align="bottom" is default!</p>
<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />

An image before the text.</p>
<p>An image after the text.

<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>
</body>
</html>
Image insert in paragraph

<html>
<body>
8
<p>
<img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" />
A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left
of this text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" align="right" width="32" height="32" />
A paragraph with an image. The align attribute of the image is set to "right". The image will float to the
right of this text.
</p>
</body>
</html>
Make a Hyperlink of an Image

<html>
<body>
<p>Create a link of an image:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:

<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>
Create an Image Map
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
9
HTML Tables
Apples 44%
Bananas 23%
Oranges 13%
Other 10%
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
<colgroup> Defines a group of columns in a table, for formatting
<col /> Defines attribute values for one or more columns in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
row 1, cell 1 row 1, cell 2
HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be
useful, but most of the time, we want the borders to show.
10
To display a table with borders, specify the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers

Header information in a table are defined with the <th> tag.
The text in a th element will be bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
How the HTML code above looks in a browser:
Header 1 Header 2
Table Without Border:
html>
<body>
<h4>This table has no borders:</h4>

<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
11
<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>
Table Header:
<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>
12
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Table headers:
Name Telephone Telephone
Bill Gates 555 77 854 555 77 855
Vertical headers:
First Name: Bill Gates
Telephone: 555 77 854
Telephone: 555 77 855
Table with a Caption:

<html>
<body>
<table border="1">
<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>
13
Cell Spanning:
<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>
Cell that spans two columns:

Name Telephone
Bill Gates 555 77 854 555 77 855
Cell that spans two rows:

First Name: Bill Gates
555 77 854
Telephone:
555 77 855
----------------------------------------------------------------------------------------------------
Tag inside Table:

<html>
14
<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>
This is a paragraph
This is another paragraph
This cell contains a table:

A B
C D
This cell contains a list
 apples
 bananas
 pineapples
HELLO
15
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="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Without cellpadding:
First Row
Second Row
With cellpadding:
First Row
Second Row
Cell Spacing:
<html>
16
<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>
Without cellspacing:
First Row
Second Row
With cellspacing:
First Row
Second Row
The Frame Attribute:

<html>
<body>
<p>
<b>Note:</b>
If you see no frames/borders around the tables below, your browser does not support
the "frame" attribute.
</p>
<h4>With frame="border":</h4>
17
<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>
18
</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>
19
Note: If you see no frames/borders around the tables below, your browser does not support the "frame"
attribute.
With frame="border":
First Row
Second Row
With frame="box":
First Row
Second Row
With frame="void":
First Row
Second Row
With frame="above":
First Row
Second Row
With frame="below":
First Row
Second Row
With frame="hsides":
First Row
Second Row
With frame="vsides":
First Row
Second Row
With frame="lhs":
First Row
Second Row
With frame="rhs":
First Row
Second Row
HTML <colgroup> Tag
Example
Two colgroup elements that specify different alignment and style for the three columns in the table (notice
20
that the first colgroup element spans two columns):
<table width="100%" border="1">

<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#0000FF;"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Definition and Usage

The <colgroup> tag is used to group columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each
cell, for each row.
The <colgroup> tag can only be used inside a table element.
Define Column value in “Center or right or left” in table:

<table width="100%" border="1">
<col align="center" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
HTML <thead> Tag
21
Example
An HTML table with a thead, tfoot, and a tbody element:
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
HTML Lists
The most common HTML lists are ordered and unordered lists:
HTML Lists
An ordered list: An unordered list:

1. The first list item  List item
2. The second list item  List item
3. The third list item  List item
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
22
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list
HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
 Coffee
 Milk
HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
HTML Definition Lists

A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
23
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in
the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
Different Types of Order 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>
24
</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>
Lowercase letters list:

a. Apples
b. Bananas
c. Lemons
d. Oranges
Roman numbers list:

I. Apples
II. Bananas
III. Lemons
IV. Oranges
Lowercase Roman numbers list:

i. Apples
ii. Bananas
iii. Lemons
iv. Oranges
Different Types of Un-ordered 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>
25
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Disc bullets list:

 Apples
 Bananas
 Lemons
 Oranges
Circle bullets list:

o Apples
o Bananas
o Lemons
o Oranges
Square bullets list:

 Apples
 Bananas
 Lemons
 Oranges
Nested Lists:
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
26
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
A nested List:
 Coffee
 Tea
o Black tea
o Green tea
 Milk
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>
A Definition List:
Coffee
Black hot drink
Milk
White cold drink
27
HTML Forms and Input
HTML Form Tags

Tag Description
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button
HTML Forms
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label
elements.
28
HTML Forms and Input
HTML Forms are used to select different kinds of user input.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Password Field
<input type="password" /> defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
29
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE 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>
Male
Female
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE
options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
I have a bike
I have a car
Submit Button
<input type="submit" /> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. 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>
30
Submit
Username:
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to
a page called "html_form_action.asp". The page will show you the received input.
Form Button:
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
---------------------------------------------------------------------------------------------
Border around form:
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>
Personal information: Name:
E-mail:
Date of birth:
Form with Radio Button:
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">

<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female<br />
<input type="submit" value="Submit" />
31
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>
Male
Female
Submit
If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".
Send Email from Form:
<html>
<body>
<h3>Send e-mail to someone@example.com:</h3>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">

Name:<br />
<input type="text" name="name" value="your name" /><br />
E-mail:<br />
<input type="text" name="mail" value="your email" /><br />
Comment:<br />
<input type="text" name="comment" value="your comment" size="50" />
<br /><br />
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Send e-mail to someone@example.com:

Name:
your name
E-mail:
your email
Comment:
your comment
Submit
32
HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light.
Color Values
HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and
Blue color values (RGB).
The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255
(in HEX: FF).
HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.
Color Values
Color Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
16 Million Different Colors

The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different colors
(256 x 256 x 256).
If you look at the color table below, you will see the result of varying the red light from 0 to 255, while
keeping the green and blue light at zero.
To see the full list of color mixes when RED varies from 0 to 255, click on one of the
HEX or RGB values below.
33
Red Light Color HEX Color RGB
34

#000000 rgb(0,0,0)
#080000 rgb(8,0,0)

#100000 rgb(16,0,0)

#180000 rgb(24,0,0)

#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)
35
Shades of Gray
Gray colors are created by using an equal amount of power to all of the light sources.
To make it easier for you to select the correct shade, we have created a table of gray
shades for you:
Gray Shades Color HEX Color RGB

#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
#808080 rgb(128,128,128)
#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
#C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
#D8D8D8 rgb(216,216,216)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
#F8F8F8 rgb(248,248,248)
36
#FFFFFF rgb(255,255,255)
Cross-Browser Color Names

A collection of nearly 150 color names are supported by all major browsers.
View the cross-browser color names
Web Standard Color Names

The World Wide Web Consortium (W3C) has listed 16 valid color names for HTML and CSS:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
yellow.
Note: Different browsers may display different colors for the same color name. "Green" can be lighter in
one browser than another. To achieve the same result in all browsers, always use the HEX notation.
Web Safe Colors?

Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors" was
suggested as a Web standard, reserving 40 fixed system 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.
This is not important today, since most computers can display millions of different
colors. Anyway, here is the list:
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
37
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
What is so Great About HTML 4.0?

In HTML 4.0 all formatting can be removed from the HTML document, and stored in a style sheet.
Because HTML 4.0 separates the layout from the document structure, we have what we always needed:
Total control of layout, without messing up the document content.
What You Should do About it

 Do NOT use presentation attributes inside your HTML elements
 Start using styles! Please read our CSS tutorial to learn about style sheets
38
 Do NOT use deprecated tags. Visit our HTML 4.01 Reference to see which tags and attributes that
are deprecated
 Validate your HTML pages
Validate Your HTML Files

To validate an HTML document, a doctype declaration must be added.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of
the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the
markup language, so that the browsers can render the content correctly.
The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or
deprecated elements (like font). Framesets are not allowed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated
elements (like font). Framesets are not allowed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">
Validate Your HTML With W3C's Validator

Type a URL in the input field below (like http://www.w3schools.com/):
39
Validate the page
HTML DOCTYPE Element

Tag Description
<!DOCTYPE> Defines the document type. This declaration goes before the <html> start tag
HTML CSS:
In HTML 4.0, all formatting can be removed from the HTML document, and stored in a style sheet.
How to Use Styles

When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
 External style sheet

 Internal style sheet
 Inline styles
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 can be used if one single document has a unique style. Internal styles are defined in
the <head> section of an HTML page, by using the <style> tag, like this:
<head>
40
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of an element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS
property. The example below shows how to change the text color and the left margin of a paragraph:
<p style="color:blue;margin-left:20px">This is a paragraph.</p>
The HTML file below links to an external style sheet with the <link> tag:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="ex1.css" />
</head>
<body>
<h1>This header is 36 pt</h1>

<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>

This is the style sheet file (ex1.css):
body
{
background-color:yellow;
}
h1
{
font-size:36pt;
}
h2
{
color:blue;
}
p
{
margin-left:50px;
}
41
The result is in the frame below:
The HTML file below links to an external style sheet with the <link> tag:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="ex2.css" />
</head>
<body>
<h1>This is a header 1</h1>

<hr />
<p>You can see that the style

sheet formats the text</p>
<p><a href="http://www.w3schools.com"
target="_blank">This is a link</a></p>
</body>
</html>

This is the style sheet file (ex2.css):
body {background-color:tan;}
h1 {color:maroon;font-size:20pt;}
hr {color:navy;}
p {font-size:11pt;margin-left:15px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
42
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
CSS Example
CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets:
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like this:
Example
p
{
color:red;
text-align:center;
}
Try it yourself »
CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
CSS Id and Class
The id and class Selectors
43
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id"
and "class".
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":
Example
#para1
{
text-align:center;
color:red;
}
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector
is most often used on several elements.
This allows you to set a particular style for any HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
Example
.center {text-align:center;}
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:
Example
44
p.center {text-align:center;}
Do NOT start a class name with a number! This is only supported in Internet Explorer.
CSS How To...

When a browser reads a style sheet, it will format the document according to it.
Three Ways to Insert CSS

There are three ways of inserting a style sheet:
 External style sheet

 Internal style sheet
 Inline style
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>
An external style sheet can be written in any text editor. The file should not contain any html tags. Your
style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-
left:20px") will work in IE, but not in Firefox or Opera.
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 of an HTML page, by using the <style> tag, like this:
45
<head>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this
method sparingly!
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:sienna;margin-left:20px">This is a paragraph.</p>
Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited
from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
46
The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by
the internal style sheet.
Multiple Styles Will Cascade into One

Styles can be specified:
 inside an HTML element

 inside the head section of an HTML page
 in an external CSS file
Tip: Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the
following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a
style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).
Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the
external style sheet will override the internal style sheet!
CSS Background
CSS background properties are used to define the background effects of an
element.
CSS properties used for background effects:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
Background Color
47
The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector:
Example
body {background-color:#b0c4de;}
The background color can be specified by:
 name - a color name, like "red"

 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"
In the example below, the h1, p, and div elements have different background colors:
Example
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Example
body {background-image:url('paper.gif');}
Below is an example of a bad combination of text and background image. The text is
almost not readable:
Example
48
body {background-image:url('bgdesert.jpg');}
Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange,
like this:
Example
body
{
background-image:url('gradient2.png');
}
If the image is repeated only horizontally (repeat-x), the background will look better:
Example
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Background Image - Set position and no-repeat

When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
49
In the example above, the background image is shown in the same place as the text. We want to change the
position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Background - Shorthand property

As you can see from the examples above, there are many properties to consider when dealing with
backgrounds.
To shorten the code, it is also possible to specify all the properties in one single property. This is called a
shorthand property.
The shorthand property for background is simply "background":
Example
body {background:#ffffff url('img_tree.png') no-repeat right top;}
When using the shorthand property the order of the property values are:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
It does not matter if one of the property values are missing, as long as the ones that are present are in this
order.
All CSS Background Properties
50
The number in the "CSS" column indicates in which CSS version the property is defined
(CSS1 or CSS2).
Property Description Values CSS

background-color
background-image
Sets all the background properties in background-repeat
background 1
one declaration background-attachment
background-position
inherit
Sets whether a background image is scroll
background-attachment fixed or scrolls with the rest of the fixed 1
page inherit
color-rgb
color-hex
Sets the background color of an
background-color color-name 1
element
transparent
inherit
url(URL)
Sets the background image for an
background-image none 1
element
inherit
left top
left center
left bottom
right top
right center
Sets the starting position of a right bottom
background-position 1
background image center top
center center
center bottom
x% y%
xpos ypos
inherit
repeat
repeat-x
Sets if/how a background image will
background-repeat repeat-y 1
be repeated
no-repeat
inherit
CSS Text
TEXT FORMATTING
This text is styled with some of the text formatting properties.
The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is
specified. The underline is removed from the "Try it yourself" link.
Text Color
51
The color property is used to set the color of the text. The color can be specified by:
 name - a color name, like "red"

 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector.
Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
For W3C compliant CSS: If you define the color property, you must also define the background-color
property.
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal
width, and the left and right margins are straight (like in magazines and newspapers).
Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design
purposes:
Example
52
a {text-decoration:none;}
It can also be used to decorate text:
Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
It is not recommended to underline text that is not a link, as this often confuses users.
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first
letter of each word.
Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
Example
p {text-indent:50px;}
53
CSS Font
CSS font properties define the font family, boldness, size, and the style of a text.
Difference Between Serif and Sans-serif Fonts
On computer screens, sans-serif fonts are considered easier to read than serif fonts.
CSS Font Families

In CSS, there are two types of font family names:
 generic family - a group of font families with a similar look (like "Serif" or "Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")
Generic family Font family Description
Serif
Times New Roman Serif fonts have small lines at the ends on some
Georgia characters
Sans-serif
Arial "Sans" means without - these fonts do not have the
Verdana lines at the ends of characters
Courier New
Monospace Lucida All monospace characters have the same width
Console
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not
support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the
generic family, if no other fonts are available.
54
Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family:
"Times New Roman".
More than one font family is specified in a comma-separated list:
Example
p{font-family:"Times New Roman", Times, serif;}
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
 normal - The text is shown normally

 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size
adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
 Sets the text to a specified size

 Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
 Absolute size is useful when the physical size of the output is known
55
Relative size:
 Sets the size relative to surrounding elements

 Allows a user to change the text size in browsers
If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
Set Font Size With Pixels

Setting the text size with pixels, gives you full control over the text size:
Example
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
The example above allows Firefox, Chrome, and Safari to resize the text, but not Internet Explorer.
The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just
the text).
Set Font Size With Em

To avoid the resizing problem with Internet Explorer, many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is
16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
Example
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
In the example above, the text size in em is the same as the previous example in pixels. However, with the
em size, it is possible to adjust the text size in all browsers.
56
Unfortunately, there is still a problem with IE. When resizing the text, it becomes larger than it should
when made larger, and smaller than it should when made smaller.
Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the body
element:
Example
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
All CSS Font Properties

(CSS1 or CSS2).

font-style
font-variant
font-weight
font-size/line-height
font-family
caption
font Sets all the font properties in one declaration 1
icon
menu
message-box
small-caption
status-bar
inherit
family-name
font-family Specifies the font family for text generic-family 1
inherit
font-size Specifies the font size of text xx-small 1
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
57
%
inherit
normal
italic
font-style Specifies the font style for text 1
oblique
inherit
normal
Specifies whether or not a text should be
font-variant small-caps 1
displayed in a small-caps font
inherit
normal
bold
bolder
lighter
100
200
300
font-weight Specifies the weight of a font
400
500
600
700
800
900
inherit
CSS Links
Links can be styled in different ways.
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Special for links are that they can be styled differently depending on what state they are in.
The four links states are:
 a:link - a normal, unvisited link

 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked
Example
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
58
a:active {color:#0000FF;} /* selected link */
When setting the style for several link states, there are some order rules:
 a:hover MUST come after a:link and a:visited

 a:active MUST come after a:hover
Common Link Styles

In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Example
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Background Color
The background-color property specifies the background color for links:
Example
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
CSS Lists
The CSS list properties allow you to:
59
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
List
In HTML, there are two types of lists:
 unordered lists - the list items are marked with bullets

 ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers

The type of list item marker is specified with the list-style-type property:
Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}
Some of the property values are for unordered lists, and some for ordered lists.
Values for Unordered Lists

Value Description
none No marker
disc Default. The marker is a filled circle
circle The marker is a circle
square The marker is a square
Values for Ordered Lists

Value Description
armenian The marker is traditional Armenian numbering
60
decimal The marker is a number
decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)
georgian The marker is traditional Georgian numbering (an, ban, gan, etc.)
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
Note: No versions of Internet Explorer (including IE8) support the property values "decimal-leading-
zero", "lower-greek", "lower-latin", "upper-latin", "armenian", or "georgian" UNLESS a DOCTYPE is
specified!
An Image as The List Item Marker

To specify an image as the list item marker, use the list-style-image property:
Example
ul
{
list-style-image: url('sqpurple.gif');
}
The example above does not display equally in all browsers. IE and Opera will display the image-marker a
little bit higher than Firefox, Chrome, and Safari.
If you want the image-marker to be placed equally in all browsers, a crossbrowser solution is explained
below.
Crossbrowser Solution
The following example displays the image-marker equally in all browsers:
Example
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
61
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Example explained:
 For ul:
o Set the list-style-type to none to remove the list item marker
o Set both padding and margin to 0px (for cross-browser compatibility)
 For li:
o Set the URL of the image, and show it only once (no-repeat)
o Position the image where you want it (left 0px and down 5px)
o Position the text in the list with padding-left
List - Shorthand property

It is also possible to specify all the list properties in one, single property. This is called a shorthand
property.
The shorthand property used for lists, is the list-style property:
Example
ul
{
list-style: square url("sqpurple.gif");
}
Try it yourself »
When using the shorthand property, the order of the values are:
 list-style-type
 list-style-position (for a description, see the CSS properties table below)
 list-style-image
It does not matter if one of the values above are missing, as long as the rest are in the specified order.
all the different list-item markers in CSS.
62
All CSS List Properties
(CSS1 or CSS2).

list-style-type
list-style-position
list-style Sets all the properties for a list in one declaration 1
list-style-image
inherit
URL
list-style-image Specifies an image as the list-item marker none 1
inherit
inside
Specifies if the list-item markers should appear
list-style-position outside 1
inside or outside the content flow
inherit
none
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
list-style-type Specifies the type of list-item marker 1
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit
CSS Tables
The look of an HTML table can be greatly improved with CSS:
Company Contact Country

Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France
63
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td elements:
Example
table, th, td
{
border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because both the table, th, and td
elements have separate borders.
To display a single border for the table, use the border-collapse property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single
border or separated:
Example
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Table Width and Height

Width and height of a table is defined by the width and height properties.
64
The example below sets the width of the table to 100%, and the height of the th elements
to 50px:
Example
table
{
width:100%;
}
th
{
height:50px;
}
Table Text Alignment

The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:
Example
td
{
text-align:right;
}
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
Example
td
{
height:50px;
vertical-align:bottom;
}
Table Padding
65
To control the space between the border and content in a table, use the padding property
on td and th elements:
Example
td
{
padding:15px;
}
Table Color
The example below specifies the color of the borders, and the text and background color
of th elements:
Example
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
Make a Fancy Table:
<html>
<head>
body
{
margin-left:200px;
background:#5d9ab2 url('img_tree.png') no-repeat top left;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
66
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>
<body>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned yet. But, we will
explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
</body>
</html>
67

HTML, DHTML, CSS, Java Script: Tag Description DTD Basic

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML, DHTML, CSS, Java Script: Tag Description DTD Basic

Hochgeladen von

Copyright:

Verfügbare Formate

HTML, DHTML, CSS, Java Script

Tag Description DTD

Attribute Value Description

<html> Defines an HTML document

HTML Image Tags

HTML images are defined with the <img> tag.

Nested HTML Elements

The <html> element:

Attributes provide additional information about HTML elements.

* HTML elements can have attributes

Attribute values should always be enclosed in quotes.

Comments are written like this:

HTML documents are divided into paragraphs.

Paragraphs are defined with the <p> tag.

HTML Line Breaks

<br /> Inserts a single line break

<br> or <br />

HTML Text Formatting

This text is big

This text is italic

This is computer output

This is subscript and superscript

Often <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

HTML Text Formatting Tags

HTML "Computer Output" Tags

<code> Defines computer code text

Look! Styles and colors

This text is in Times and blue

HTML Style Example - Background Color

HTML Style Example - Font, Color and Size

HTML Style Example - Text Alignment

HTML The Alternate Attribute

The value of the alt attribute is an author-defined text:

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

<p><b>Tip:</b> align="bottom" is default!</p>

<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />

<p>An image after the text.

Image insert in paragraph

Make a Hyperlink of an Image

<p>Create a link of an image:

<p>No border around the image, but still a link:

Create an Image Map

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

HTML Table Tags

HTML Tables and the Border Attribute

HTML Table Headers

The text in a th element will be bold and centered.

How the HTML code above looks in a browser:

Table Without Border:

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

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

Table with a Caption:

<h4>Cell that spans two columns:</h4>

<h4>Cell that spans two rows:</h4>

Cell that spans two columns:

Cell that spans two rows:

Tag inside Table:

This is another paragraph