| |
Overall
<! path/foo.html - description >
<! Copyright notice, other details >
<html>
<head>
</head>
<body>
web page goes here
</body>
</html>
<! >
Page head items:
<head>
<title> title </title>
<link to CSS stylesheet>
<style>
(see Styles)
</style>
<script>
JavaScript
</script>
<meta search-engine info >
</head>
Stylesheet link:
<link href="url" rel="stylesheet" type="text/css">
Note: <link> has no end tag.
Search engine topics:
<meta name="keywords" content="topic 1, topic 2, ...">
Note: <meta> has no end tag.
|
Inline
<i>italic</i>
<b>bold</b>
| HTML |
Result |
two
words |
two words |
two<br>
words |
two
words |
two<p>
words |
two words |
<p align= "right"> two words</p> |
two words |
<center>center</center>
<hr align=center width=80%>
<blockquote>
Quote, too long to include within quotation marks.
</blockquote>
Use <q>for short quotes </q> within text.
<pre>
Preformatted
turns off
HTML formatting.
</pre>
< font size=+1 color=red>
Font
tags modify the font. </font>
Also:
<u>
<strike>
<sub>
<sup>
And <X> </X> where X is one of:
Define styles for these for
consistency across browsers.
|
Lists
UL (unordered lists, bullets)
OL (ordered lists, numbers)
<ul>
<li> item 1 </li>
<li> item 2 </li>
...
</ul>
|
<ol>
<li> item 1 </li>
<li> item 2 </li>
...
</ol>
|
(See type attribute for list styles.)
Definition list:
-
<dl>
-
<dt> defined term 1
</dt>
-
<dd>
definition 1
</dd>
-
<dt> defined term 2
</dt>
-
<dd>
definition 2
</dd>
-
</dl>
Provide your own styles for <dt> and <dd> tags.
|
<table>
<caption>Caption</caption>
<tr>
<th> Column Heading 1 </th>
<th> Column Heading 2 </th>
...
</tr>
<tr>
<td> Datum row 1, col 1 </td>
<td> Datum row 1, col 2 </td>
...
</tr>
<tr>
<td>Datum row 2, col 1 </td>
...
</tr>
...
</table>
Also, with styles you provide:
<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>
|
Styles
Defining Styles
1) In every tag's style attribute:
<... style="border-style:groove" >
2) Between <style> </style> tags in the page header.
For tags: a, li {font-size:large}
Tag's class:
a.bigger {font-size:x-large}
Class: .biggest {font-size:xx-large}
Layer: #banner {height:30px; width:300px}
3) In a stylesheet linked in page header:
/* path/foo.css description, etc. */
stylespecs
/* end of path/foo.css */
Note: stylespecs in .CSS file are the same as within <style> </style> tags.
Using Styles
1) Styles defined for tags: just use the tag.
2) Styles defined for tag's class:
<a class="bigger"...>
3) Styles defined for a class:
<...(any tag) class="biggest"...>
4) Using a defined layer style:
<div id="banner">
... banner layer here
</div>
|
Link to another page, this site:
<a href="page-2.html">Page 2</a>
Provide a named location in the page:
<a name="intro"></a>
Link to named location, this page:
<a href="#intro">Introduction</a>
Link to named location, another page:
<a href="page2.html#p3>Item 2-3</a>
Link to other site:
<a href="http://www.w3.org">W3C</a>
"http://" is required.
Link using new window or tab:
<a href="samp.html" target="_new">...
Highlight with color?
1) In page head:
<style type="text/css">
.pink {
background-color:#fff0f0 }
.yellow {
background-color:#f0fff0}
</style>
2) In page body:
<span class="yellow"> yellow section</span>
|
(These go in page <head>.)
<frameset cols="60px, *" border=0>
<frame
name="menu"
src="menu.html">
<frameset rows="30px,*" border=0>
<frame
name="banner"
src="banner.html"
scrolling="no" >
<frame
name="main"
src="main2.html"
frameborder=0>
</frameset>
</frameset>
cols="60px, *" means:
First column, 60 pixels wide.
Second column, all the remaining pixels.
|
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>, usually miniscule, is defined here as:
h6 {
color:#300060;
font-size:20;
font-variant:small-caps;
margin-bottom:5;
text-align:center
}
|
© ©, ® ®, ™ ™
& &, < <,
( = non-breaking space)
¿ ¿, § §, ¶ ¶
" ", ' ',
¼ ¼, ½ ½, ¾ ¾
¹ ¹, ² ², ³ ³
¢ ¢, € €, £ £, ¥ ¥
&Xaccent; where:
| X = |
A a E e I i O o U u Y y |
| accent = |
acute circ grave uml |
Ö Ö
|
é é
|
È È
|
î î
|
Α (Beta, Gamma, Delta...) Α Β Γ Δ
α (beta, gamma, delta...) α β γ δ
– –, — —
|
<img
src="snoozy-kitty.jpg"
border=0 height=150 width=250
alt="picture of kitten napping" >
Note: <img> has no end tag.
|
Links and Frames
Load same frame as link: <a href='...'>
Load other frame: <a href='...' target='other-frames-name'>
Clear frames, then load: <a href='...' target='_top'>
|
Tags
All tags support id, class, style and title attributes, in theory. Test for fact.
| <Tag> </Tag>¹ | Meaning | Selected Attributes |
a |
|
anchor, link in page body |
accesskey href name target |
b |
|
bold |
|
blockquote |
|
blockquote |
|
body |
|
body of page |
bgcolor |
br |
NO |
break |
clear |
caption |
|
center over table |
align-tblr |
center |
|
center |
|
code |
|
monospace |
|
dd |
|
definition |
|
div |
|
division (layer) |
align-lcr |
dl |
|
definition list |
|
dt |
|
defined term |
|
font |
|
font |
color face size |
frame |
NO |
frame |
frameborder
hw
noresize
scrolling src
|
frameset |
|
set of frames |
|
head |
|
page header |
|
hr |
|
horizontal rule |
align-lcr noshade size width |
html |
|
start of html |
|
h1-h6 |
|
header |
align-lcr |
i |
|
italic |
|
img |
NO |
image |
align-img alt
border
hw
src title
|
li |
|
list item |
start type |
link |
NO |
stylesheet link |
href rel type |
meta |
NO |
description of page |
name content |
ol |
|
ordered list |
|
p |
NO |
skip a line |
|
p |
|
begin/end paragraph |
align-lcr |
pre |
|
preformatted |
width |
q |
|
in-text quote |
|
script |
|
encloses JavaScript |
type language
(JavaScript not covered)
|
strike |
|
strikes out |
|
style |
|
encloses CSS specs |
|
sub |
|
subscript |
|
sup |
|
superscript |
|
table |
|
table |
align-lcr background bgcolor border cellpadding cellspacing hw summary |
td |
|
table datum |
align-lcr
background bgcolor colspan
hw
rowspan valign
|
th |
|
table column head |
(same as td) |
title |
|
page title |
|
tr |
|
table row |
align-lcr bgcolor valign |
u |
|
underline |
|
ul |
|
unordered list |
type |
The following tags have little or no meaning on their own, but are very useful for consistent, multi-browser support when you define their styles:
big
cite
em
kbd
samp
small
span
strong
tbody
tfoot
thead
tt
var
¹All tags require normal <tag></tag> pairs, except for those noted "NO" which have no end tag (<img src="my.jpg">).
Note re styles to the right: Of the tested browsers, Konqueror and Opera render the styles as specified. (Click a "style?" box to view the specs.) Konqi, Opera and Firefox lay out the poster intelligently.
|
Attributes
| Key | Example | Comments |
| accesskey |
accesskey="a" |
| align-lcr |
align="right" |
| align-tblr |
align="top" |
| align-img |
align="right" |
| alt |
alt="picture of kitten napping" |
| background |
background="graphics/backpic.jpg" |
| bgcolor |
bgcolor=#fff8f0 |
| border |
border=0 |
| cellpadding |
cellpadding=3 |
| cellspacing |
cellspacing=2 |
| class |
class=myClass |
| clear |
clear=left |
| color |
color=#300060 |
| colspan |
colspan=2 |
| content |
content="HTML, HTML summary, HTML reference" |
| face |
face="FreeSans, Helvetica, Arial, sans-serif" |
| frameborder |
frameborder=0 |
| href |
href="http://www.w3.org"
|
| hw |
height=200px width=250px |
| name |
<a name="intro"></a>
=keywords =description
=robots |
| noresize |
noresize |
| rel |
rel="stylesheet" |
| rowspan |
rowspan=3 |
| scrolling |
scrolling="auto" |
| size |
size=16 |
| size |
size=5 |
| src |
src="some-page.html"
src="some-image.jpg" |
| start |
start=1001 |
| style |
style="font-size:14; font-weight:bold" |
| summary |
summary="This table shows ... " |
| target |
target="_new" |
| title |
title='Taken with Pentax K100D' |
| type |
type="I" |
| type |
type="circle" |
| type |
type="text/css" |
| valign |
valign="top" |
| width |
width=80% |
colorspec: #rrggbb - a "#" followed by two hex digits for each of red, green, blue.
hex digits: 0 1 2 3 4 5 6 7 8 9 a b c d e f (used for hexadecimal, base 16, numbers)
#ffffff
#000000
#ff0000
#00ff00
#0000ff
#d0d0ff
#0000a0
#ffff00
#ff00ff
#00ffff
#ffffe0
|
|
|