85
Web design 1: Introduction to creating a website
Web design 1: Introduction to creating a website (web-t3)
27
Appendix A. XHTML tags quick
reference
Skeletal Tags
<html> … </html> defines file as HTML document
<head> … </head> invisible, descriptive part of page
<body> … </body> visible part of page
Attributes (values expressed within double quotes):
text = "colour name/code"
link = "colour name/code" (links)
alink = "colour name/code" (active links)
vlink = "colour name/code" (visited links)
background = "URL of image fil"e
bgcolor = "colour name/code"
Header Tags
<meta /> meta tags add information to head
Attributes (values expressed within double quotes):
name = "type" (for example, keywords/description)
content = "string"
<title> … </title> title of page – appears in title bar
Hyperlinks
<a> … </a> anchor – defines link
Attributes (values expressed within double quotes):
href = url
title = "title text"
Lists
<ul> … </ul> unordered list
Attributes (values expressed within double quotes):
type = "bullet shape" ( disc/circle/square)
<li> … </li>
Attributes (values expressed within double quotes):
type = "bullet shape" ( disc/circle/square)
<ol> … </ol> ordered list
Attributes (values expressed within double quotes):
type = "symbol type" (1/A/a/i/I)
<li> … </li>
Attributes (values expressed within double quotes):
type = "symbol type" (1/A/a/i/I)
value = "starting value"
<dl> … </dl> definition list
<dd> … </dd> item to be defined
<dt> … </dt> definition
Text Markup Tags (inline elements)
<em> … </em> emphasised (usu. Italic)
<pre> … </pre> preformatted fixed-width text
<small> … </small> rel. smaller font
<strike> … </strike> strikethrough
<strong> … </strong> strong (usu. bold)
<sub> … </sub> subscript
<sup> … </sup> superscript
<tt> … </tt> typewriter text (for example,
Courier)
<address> … </address> logical address format
<span> … </span> to select a chunk of text
Attributes (values expressed within double quotes):
class = "class_name" (defined in a stylesheet)
id = "id_name" (defined in a stylesheet)
Layout Formatting Tags (block-level
elements)
<blockquote> … </blockquote>. indented quote
<br /> line break
<div> … </div> division
Attributes (values expressed within double quotes):
align = "left/right/center"
class = "class_name" (defined in a stylesheet)
id = "id_name" (defined in a stylesheet)
<hn> … </hn> heading (n=1-6)
<hr /> horizontal rule
Attributes (values expressed within double quotes):
align = "left/right/center"
size = "pixels"
width = "pixels or percentage of browser window"
noshade = "noshade"
<p> … </p> new paragraph (double line break)
Images
<img /> image
Attributes (values expressed within double quotes):
align = "type" (defines text position in relation to image)
alt = "text"
border = "pixel"s
height = "pixels"
width = "pixels"
src = "url of image file"