An
Introduction to HTML Tags
Table
of Contents:
General
Tag
|
Attribute
|
Description
|
Sample
Code
|
| <html> |
none |
Identifies a Hypertext Markup Language (HTML) file. Every page on the Web
begins with <html> and ends with </html>. |
<html>
<head>
<title> Intro to HTML Tags</title>
<meta name "keywords" content=basic HTML tags introduction
Web programming design Hypertext Markup Language>
<meta name "description" content= A list of basic HTML tags
for students and beginning Web designers>
</head>
|
| <head> |
none |
Web pages have a two part structure: head and body. The head contains
the title and meta tags. |
| <title> |
none |
The title tag, not surprisingly, assigns a title to the document. The title
appears at the top of your browser. The title of this document is "Introduction
to HTML Tags." The title is used to identify and link pages. |
| <meta
name> |
"keywords"
"description"
content =
|
Meta
tags are useful promotional tools as they are used to provide keywords and
descriptions for search engines. Search engines use meta tags to quickly
index Web pages. As a general rule of thumb, keep your descriptions to within
200 characters and your keywords to within 1000 characters. |
| <body> |
---- |
The
majority of Web page content is contained within the body, just like the
body of a book. All pages end with the tags </body> and </html>. |
<body>
All your pages content goes in the body.
</Body> |
| background= |
When
you want to use an image file as your background, use the background value.
|
<Body background="image.jpg"> |
| bgcolor= |
Assigns
a background color based on a six digit hexadecimal number (#rrggbb) with
the first two digits specifying the red value, the middle two the green
value, and the last two the blue value. The default color is white. The
background of this table equals #FFCC66. Other sample values include:
black: 000000
white: FFFFFF
red: FF0000
green: 00FF00
blue: 0000FF
|
<body
bgcolor="#FFFFFF">
Note:
This would display a white background.
|
| text= |
Defines the text color and works similar to bgcolor. The default is black. |
<Body
text="#000000">
Note:
This would display black text.
|
| link= |
Defines
the color of links. The default is blue. |
<Body
link="#0000FF">
<body
alink="#FF0000">
<body
vlink="#00FF00">
|
| alink= |
Defines
the color of the active link or link that is currently being clicked. The
default is red. |
| vlink= |
Defines
the color of the visited link or link that has previously been used. The
default is purple. |
| <!--
--> |
none |
Comment
- These are to make comments in the code that will not be displayed on the
page. The comments can be used as references or notes for anyone viewing
the code. |
<!--
make comments here --> |
Layout
and Formatting
Tag
|
Attribute
|
Description
|
Sample Code
|
|
<b>
or
<strong>
|
none |
Bold and strong - Displays text in bold face. |
<b>
This text will be bold</b>whereas this text will not |
| <i>
or <em> |
none |
Italics
and emphasis - Displays text in italics. |
<i>
Italic versus </i> non-italic text |
| <u> |
none |
Underline
- underlines text. |
<u>underlines</u>
text |
| <tt> |
none |
Teletype
typeface - Displays text in teletype. |
Text
in <tt> teletype </tt> |
| <blockqoute> |
none |
Block
quote-
Displays
indented text and adds a line break. It is typically used for lengthy
quotations.
|
<blockquote>Put
your quote here.</blockquote> |
| <center> |
none |
Center - Displays text aligned in the center.
|
<center> Center this! </center> |
|
<h1>
.
.
.
<h6>
|
---- |
Headings
-
Headings
are sized from one to six with h1 being the largest and h6 being the smallest.
Headings change the font size, add bold, and create a paragraph break
above and below the heading.
|
<h1>Largest
Heading</h1>
<h6>Smallest Heading</h6>
|
| align |
The
align attribute can have either "left", "center", or
"right" values. |
<h3
align="center"> Hello </h3> |
| <pre> |
none |
Preformatted
- HTML typically ignores extra spaces and has limited formatting capability.
However, the pre tag displays text exactly how it is typed.
|
<pre>
format
your
text
here </pre>
|
| <font> |
size |
Defines the font size, with values from zero to seven. Unlike the heading
tag, zero is the smallest size and seven is the largest. You can define
the font size using an equals (=) sign or by adding plus (+) or minus (-)
so the font will render relative to the current size. |
<font
size=2> or <font size=+2>
Combine
the attributes:
<font size=2 face="Verdana" color="0000FF">
Your text here </font>
|
| face |
Defines
the font face. The browser rendering your page must have your selected font
installed, or it will choose the default font. To control for this, select
similar alternative fonts by adding a comma. |
<Font
face="Arial">
<font
face="Arial, Verdana, Helvetica">
|
| color |
Defines
the font color. Some browsers allow proper color names such as "green",
others require the hexadecimal value. To ensure cross-compatibility, always
use the hexadecimal value. |
<Font
color="#0000FF"> |
Lines and Line Breaks
Tag
|
Attribute
|
Description
|
Sample Code
|
| <Br> |
clear= |
Line
Break - Inserts a line break. The following text will begin on the next
line. The clear attribute may have values of "left" or "right".
These values are used to format text around inline images. |
One
line here. <Br>
Next line here. |
| <p> |
align= |
Paragraph
- Inserts a paragraph break. The following text will skip a space and then
begin on the next line. The paragraphs may be aligned with the values of
"left", "center", or "right". |
One
line here. <p>
Next
line here. <p align="right">
Next
line here.
|
| |
|
Non-breaking
space - This is not a tag, however it is useful as it renders a non-breaking
s p a c e
between characters whereas extra spaces are typically ignored by HTML.
|
<Body>
Add extra spaces by inserting wherever you want the space.
</Body>
|
| <hr> |
---- |
Horizontal
rule -
A horizontal
line appears across the the page on the next available line.
|
<hr> |
| align= |
If the
horizontal rule does not extend across the whole page you can align it
"left", "center", or"right".
|
<hr
align="center"> |
| width= |
Defines the length of the line in pixels or as a percentage of the screen.
i.e. width="50" or width="50%". |
<hr
width=50>
<hr
width=50%>
|
| size= |
Defines the height of the line in pixels or as a percentage of the screen. |
<Hr size=10> |
| noshade |
Produces a solid line without shading. |
<Hr noshade> |
Bullets, Numbers, and Lists
Tag
|
Attribute
|
Description
|
Sample Code
|
| <UL> |
none |
Unordered
or unnumbered list -
- Creates
a list
- of
indented
- bullet
items.
For embedded
lists of this kind, the bullet shape changes for each level.
|
<UL>
<li>Item one.
<li>Item two.
<Li>Item three.
</UL>
|
| <ol> |
none |
Ordered
lists -
- Creates
a list
- of
indented and
- numbered
items
|
<ol>
<li> Item one.
<Li> Item two.
<Li> Item three.
</ol>
|
| <li> |
none |
List
item - This defines an item as a member of an unordered or ordered list
and adds the number or bullet. If you simply want to indent the item, leave
out this tag. |
<Li> |
| <dl> |
none |
- Definition
or descriptive list -
- This
list allows you to indent text. It's useful for making terms more salient
by indenting their definitions.
|
<dl>
<DT>WWW
<DD>World Wide Web
<DT>
HTML
<DD>HyperText Markup Language
</dl>
|
| <DT> |
none |
Data
term - This tag identifies the term to be described or defined. It is not
indented. |
| <DD> |
none |
Data
description - This tag identifies a term's description or definition. It
is indented. |
Hypertext Links and Anchors
Tag
|
Attribute
|
Description
|
Sample Code
|
| <a> |
href= |
Anchor
- defines an anchor which is used to link within a document, to an outside
URL, or to an e-mail address. Href stands for hypertext reference. This
reference can be relative or absolute. Relative references link to points
within the current page. Absolute references link to outside pages.
|
<a
href= "http://karlcleveland.com"> Go to my home page </a> |
| name= |
Name - allows you to target specific places within your pages so that users
can jump to specific points such as the top or bottom of the page. The Table
of Contents links on this page is an example. Name provides the target and
href provides the link to that target. In the example at the right, "Go
to the top" is a link that will take you to the text "This is
text at the top."
|
<a
name="top">This is text at the top</a>
<a
href="#top>Go to the top</a>
|
| mailto: |
This
is a link to an e-mail
address. |
<a
href= "mailto:karl@karlcleveland.com"> e-mail</a> |
Images
Tag
|
Attribute
|
Description
|
Sample Code
|
| <img> |
src= |
The
image source defines the location of the image you want to use. Values
are in the same form as a hypertext reference.
|
<img
src="image.gif">
<img src= "http://karlcleveland.com/image.gif>
|
| alt= |
The alt attribute gives an image a text definition that displays while the
image is downloading or if the person viewing your Web page has disabled
the display of images to increase download speed. |
<img src="image.gif alt="This is an image"> |
| align= |
You can
align images on the Web to the left, right, top, texttop, middle, absmiddle,
baseline, bottom, or absbottom.
left: image goes to the next available line and aligns to the left
margin. Text wraps around the right side.
right: image aligns to the right and text wraps around the left
side. Note: here's where <Br clear="left or right or all">
comes in handy.
top: aligns an image with the top of the tallest item in the line
it occupies.
texttop: aligns an image with the tallest text in the line it occupies.
middle: aligns the middle of an image with the baseline of the
line it occupies.
absmiddle: aligns the middle of the image with the middle of the
line it occupies.
baseline: aligns the bottom of the image with the bottom of the
line it occupies.
bottom: same as baseline.
absbottom: aligns the bottom of an image with the bottom of the
line it occupies.
|
<img
align="left"> |
| border= |
Defines the width of the border around an image. |
<img border=2> |
| height= |
Defines the height of the image in pixels. Using the height and width attributes
allows a browser to display the text on a page without having to wait for
the image to download. |
<img height=100 width=100> |
| width= |
Defines the width of the image in pixels. |
| hspace= |
Horizontal space - Defines the amount of space to the left and right of
an image. |
<img hspace=5 vspace=5> |
| vspace= |
Vertical space - Defines the amount of space above and below an image. |
Tables
Tag
|
Attribute
|
Description
|
Sample Code
|
| <table> |
----
|
The
<table> and </table> tags define the beginning and ending of
a table. |
<table>
Insert table elements here </table> |
| border= |
Defines the size of the border around a table. The default is zero. |
<Table border=2> |
| height= |
Defines
the height of the table in either pixels or as a percentage of the window. |
<Table
height=50% width=50%> |
| width= |
Defines
the width of the table in either pixels or as a percentage of the window. |
| cellpadding= |
Defines
the space between a cell and its contents. |
<Table
cellpadding=3 cellspacing=3> |
| cellspacing= |
Defines
the space between cells. |
| <tr> |
----
|
Table
row - Establishes a table row. |
<tr>
contents </tr> |
| align= |
Defines
the horizontal alignment of the content within the cells of a row to"
left"," center", or"right". |
<tr
align="right"> |
| valign= |
Defines
the vertical alignment of the content within the cells of a row. Values
can be "top", "middle", or "bottom". |
<tr
valign="middle"> |
| <td> |
----
|
Table
data - defines a particular cell within a row. This tag must appear within
the <tr> tags. Both align and valign can be used to define the alignment
of a cell. |
<tr>
<td>Cell A</td> <td> Cell B </td>
</tr> |
| width= |
Defines
the width of the cell in either pixels or as a percentage of the table. |
<td
width=50% height=50%> |
| height= |
Defines
the height of the cell in either pixels or as a percentage of the table. |
| rowspan= |
Defines
the number of rows a cell spans. For example the cell at left spans 6 rows.
The default value is 1. |
<td
rowspan=6> |
| colspan= |
Defines
the number of columns a cell spans. |
<Td
colspan=3> |
| nowrap |
Requires
that the text or content within a cell cannot be broken to fit the cell
width. |
<Td
nowrap> |
Links
to Additional Resources about HTML
