SIM – TI : Learn HTML
HTML Quick List from W3Schools
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="[Link] is a Link</a>
<a href="[Link] src="URL" alt="Alternate Text"></a>
<a href="[Link] e-mail</a>
1
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</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="[Link]">
<frame src="[Link]">
</frameset>
Forms
<form action="[Link] method="post/get">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
2
<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
< is the same as <
> is the same as >
© 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>
Source : [Link]
Everywhere on the Web you will find pages that are formatted like newspaper pages using HTML
columns.
HTML Layout - Using Tables
One very common practice with HTML, is to use HTML An HTML <table> is used to divide a part of this Web page
tables to format the layout of an HTML page. into two columns.
A part of this page is formatted with two The trick is to use a table without borders, and
columns, like a newspaper page. maybe a little extra cell-padding.
As you can see on this page, there is a left No matter how much text you add to this page, it
column and a right column. will stay inside its column borders.
This text is displayed in the left column.
3
Same Layout - Color Added
One very common practice with HTML, is to use HTML An HTML <table> is used to divide a part of this Web page
tables to format the layout of an HTML page. into two columns.
A part of this page is formatted with two This text is displayed in the right column.
columns, like a newspaper page.
The trick is to use a table without borders, and
As you can see at this page, there is a left maybe a little extra cell-padding.
column and a right column.
No matter how much text you add to this page, it
will stay inside its column borders.
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
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color
The <font> Tag Should NOT be Used
The <font> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML).
The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations.
In future versions of HTML, style sheets (CSS) will be used to define the layout and display
properties of HTML elements.
Ordered by Function
[Link]
Start tag Purpose
Basic Tags
<!DOCTYPE> Defines the document type
4
<html> Defines an html document
<body> Defines the body element
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--...--> Defines a comment
Char Format
<b> Defines bold text
<font> Deprecated. Defines text font, size, and color
<i> Defines italic text
<em> Defines emphasized text
<big> Defines big text
<strong> Defines strong text
<small> Defines small text
<sup> Defines superscripted text
<sub> Defines subscripted text
<bdo> Defines the direction of text display
<u> Deprecated. Defines underlined text
Output
<pre> Defines preformatted text
<code> Defines computer code text
<tt> Defines teletype text
<kbd> Defines keyboard text
<var> Defines a variable
<dfn> Defines a definition term
<samp> Defines sample computer code
<xmp> Deprecated. Defines preformatted text
Blocks
<acronym> Defines an acronym
<abbr> Defines an abbreviation
<address> Defines an address element
<blockquote> Defines a long quotation
<center> Deprecated. Defines centered text
<q> Defines a short quotation
<cite> Defines a citation
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Defines strikethrough text
<strike> Deprecated. Defines strikethrough text
Links
<a> Defines an anchor
<link> Defines a resource reference
Frames
<frame> Defines a sub window (a frame)
<frameset> Defines a set of frames
<noframes> Defines a noframe section
<iframe> Defines an inline sub window (frame)
Input
<form> Defines a form
5
<input> Defines an input field
<textarea> Defines a text area
<button> Defines a push button
<select> Defines a selectable list
<optgroup> Defines an option group
<option> Defines an item in a list box
<label> Defines a label for a form control
<fieldset> Defines a fieldset
<legend> Defines a title in a fieldset
<isindex> Deprecated. Defines a single-line input field
Lists
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Deprecated. Defines a directory list
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
<menu> Deprecated. Defines a menu list
Images
<img> Defines an image
<map> Defines an image map
<area> Defines an area inside an image map
Tables
<table> Defines a table
<caption> Defines a table caption
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<thead> Defines a table header
<tbody> Defines a table body
<tfoot> Defines a table footer
<col> Defines attributes for table columns
<colgroup> Defines groups of table columns
Styles
<style> Defines a style definition
<div> Defines a section in a document
<span> Defines a section in a document
Meta Info
<head> Defines information about the document
<title> Defines the document title
<meta> Defines meta information
<base> Defines a base URL for all the links in a page
<basefont> Deprecated. Defines a base font
Programming
<script> Defines a script
<noscript> Defines a noscript section
<applet> Deprecated. Defines an applet
<object> Defines an embedded object
<param> Defines a parameter for an object
6
Basic
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[Link]
<html xmlns="[Link]
<head>
</head>
<body>
...
...
...
</body>
</html>
<html>
<head>
</head>
<body>
The content of the document......
</body>
</html>
Source Output
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3> This is header 1
<h4>This is header 4</h4>
<h5>This is header 5</h5>
<h6>This is header 6</h6>
This is header 2
This is header 3
This is header 4
This is header 5
This is header 6
Source Output
<p>This is some text in a very short This is some text in a very short paragraph
paragraph</p>
Source Output
This text contains<br />a line break This text contains
a line break
Source Output
7
This is some text <hr /> This is some text This is some text
This is some text
Source Output
<!--This text is a comment--> This is a regular paragraph
<p>This is a regular paragraph</p>
Char Format
Source Output
<tt>Teletype text</tt><br /> Teletype text
<i>Italic text</i><br /> Italic text
<b>Bold text</b><br /> Bold text
<big>Big text</big><br /> Big text
<small>Small text</small><br /> Small text
Source Output
<em>Emphasized text</em><br /> Emphasized text
<strong>Strong text</strong><br /> Strong text
<dfn>Definition term</dfn><br /> Definition term
<code>Computer code text</code><br /> Computer code text
<samp>Sample computer code text</samp><br /> Sample computer code text
Keyboard text
<kbd>Keyboard text</kbd><br />
<var>Variable</var><br /> Variable
<cite>Citation</cite> Citation
Source Output
This text contains This text contains subscript
<sub>subscript</sub>
This text contains superscript
This text contains
<sup>superscript</sup>
Source Output
<bdo dir="rtl">Here is some Hebrew Here is some Hebrew text
text</bdo>
List
Source Output
<ul> • Coffee
<li>Coffee</li> • Tea
<li>Tea</li>
</ul>
Source Output
8
<dl> Coffee
<dt>Coffee</dt> Black hot drink
<dd>Black hot drink</dd> Milk
<dt>Milk</dt> White cold drink
<dd>White cold drink</dd>
</dl>
Source Output
<ol> 1. Coffee
<li>Coffee</li> 2. Tea
<li>Tea</li>
</ol>
Source Output
<ol> 1. Coffee
<li>Coffee</li> 2. Tea
<li>Tea</li>
</ol> • Coffee
• Tea
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
Source Output
<dl> Coffee
<dt>Coffee</dt> Black hot drink
<dd>Black hot drink</dd> Milk
<dt>Milk</dt> White cold drink
<dd>White cold drink</dd>
</dl>
Source Output
<dl> Coffee
<dt>Coffee</dt> Black hot drink
<dd>Black hot drink</dd> Milk
<dt>Milk</dt> White cold drink
<dd>White cold drink</dd>
</dl>
Source Output
<dl> Coffee
<dt>Coffee</dt> Black hot drink
<dd>Black hot drink</dd> Milk
<dt>Milk</dt> White cold drink
<dd>White cold drink</dd>
</dl>
Image
9
Source Output
<img src="[Link]" alt="Angry" />
Source Output
<p>Click on one of the planets:</p> Click on one of the planets:
<img src ="[Link]"
width ="145" height ="126"
alt="Planets"
usemap ="#planetmap" />
<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="[Link]" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="[Link]" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="[Link]" target ="_blank"
alt="Venus" />
</map>
Table
Source Output
<table border = "1"> Cell A Cell B
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
Source Output
<table border="1"> This is a caption
<caption>This is a caption</caption>
Cell 1 Cell 2
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Source Output
<table border = "1"> Header 1 Header 2
<tr>
<th>Header 1</th> Cell A Cell B
<th>Header 2</th>
</tr>
10
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
Source Output
<table border = "1"> This text is in the THEAD
<thead>
<tr> This text is in the TFOOT
<td>This text is in the THEAD</td> This text is in the TBODY
</tr>
</thead>
<tfoot>
<tr>
<td>This text is in the TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>This text is in the TBODY</td>
</tr>
</tbody>
</table>
Source Output
This example shows a colgroup that has three This example shows a colgroup that has three
columns of different widths: columns of different widths:
<table border="1"> 1234
<colgroup span="3">
<col width="20"></col>
<col width="50"></col>
<col width="80"></col>
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Source Output
<table border="1"> 1234
<colgroup span="3"
style="color:#FF0000;">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
11
<td>4</td>
</tr>
</table>
Link
Source Output
<p>Linking to W3Schools: Linking to W3Schools: W3Schools
<a href="[Link]
W3Schools</a> Opening W3Schools a new browser
</p> window: W3Schools
<p>
Opening W3Schools a new browser window:
<a href="[Link]
target="_blank">W3Schools</a>
</p>
Meta info
Source
<html>
<head>
<title>Title of the document</title>
</head>
<body>
...
...
...
</body>
</html>
<html>
<head>
<title>XHTML Tag Reference</title>
</head>
<body>
The content of the document......
</body>
</html>
Define keywords for search engines:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />
Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />
12
Define the last revision of your page:
<meta name="revised" content="Hege Refsnes, 6/10/99" />
Refresh page every 5 seconds:
<meta http-equiv="refresh" content="5" />
Assume that the absolute address for an image is:
<img src="[Link] />
Now we insert the <base> tag, which specifies a base URL for all of the links in a page, in the head
section of a page:
<head>
<base href="[Link] />
</head>
When inserting images on the page in the example above, we just have to specify the relative
address, and the browser will look for that file using the full URL,
"[Link]
<img src="[Link]" />
13