Dottie's Virtual Notebook

DOTTIE'S VIRTUAL NOTEBOOK - VU HTML1 - SUMMER 2006 - Page 1

HTML NOTES

Notes Section
Tips Section
Tags Section
Attributes Section
Special Characters and Entities Section
Tag Reference Section

Notes

setup html folder to contain all class files.
create template and save into html folder.
using template, create first file (notebook1) of usable html code.
using browser, open notebook1 file and view.
edit notebook1 throughout lessons to change "web page".
using free web host, upload notebook1 to web.

Back to the Top

Tips

Be consistent.
Nest HTML tags.
Use lowercase.
Remember closing tags.

Back to the Top

Tags

<html> - lets browser know that the document is written in HTML. must use </html> at very end of web page. entire web page between <html> and </html>. used once per web page.
<head> - used to hold special information about the web page itself. info here is not seen on web page. contains the title tag set. must use </head>. used once per web page.
<title> - info placed here appears at top of web browser, not web page. must use </title>. used once per web page.
<body> - contains everything seen on the web page. must use </body>. used once per web page. can use attributes bgcolor, text, background, link, alink, vlink.
 - new paragraph. double space to start first line. must use . can use attributes align.
 - font. must use . can use attributes color, size, face.
<img src=> - image source. can use attributes width, height, alt, border.
 - bold. must use .
 - italics. must use .
  - line break.
<center> - center. must use </center>.
<h1> - heading. must use </h1>. can use attributes align. also h2, h3, h4, h5, h6. give different font sizes.
 - emphasis. must use . usually renders text as italics.
 - strong emphasis. must use . usually renders text as bold.
<hr> - creates horizontal rule or line centered across the page. no closing tag. can use attributes width, align, size.
 - underline. must use .
<blockquote> - sets apart text by indenting slightly. must use </blockquote>.
<ul> - unordered or bulleted lists. must use </ul>.
<ol> - ordered or numbered lists. must use </ol>.
<li> - list item. used with a list. must use </li>.
 - comment. text between opening and closing delimeters will not appear on the screen.
<a href=> - anchor link. directs browser to look for the location of the given HTML document. clickable text goes between anchor tags. must use </a >.
<a name=> - anchor link. use with the tag a href="#xxxx". a name="xxxx" is used to locate point on page to jump to. must have # sign with the href. no spaces in name value. must use </a >.
<pre> - preformatted text. text appears as it appeared in the original document. must use </pre>.
<big> - big text. makes text in between tags larger than the rest of the text. must use </big>.
 - small text. makes text in between tags smaller than the rest of the text. must use .
<strike> - strikes out or puts a line through the center of the text. must use </strike>.
 - subscript. places text slightly lower than rest of text on the line. must use .
 - superscript. places text slightly higher than rest of text on the line. must use .
<address> - sets apart info about the author of the web page. creates italicized section of text. must use </address>.
<table> - table. must use </table>. can use attributes border, summary, cellspacing, cellpadding.
<tr> - table row. must use </tr>. sets up a row in which all items contained are listed in a straight line.
<td> - table data. must use </td>. sets a cell on a table row. can use attributes colspan=, rowspan=.
<caption> - table caption. must use </caption>. should describe the nature of the table. permitted only immediately after the table start tag. displays above table.
<th> - table header. must use </th>. places a centered heading on top of the table in bolder and larger typeface. sits inside tr and /tr tag set. can use attributes colspan=, rowspan=.

Back to the Top

Attributes

Attributes must be used in conjunction with a tag. only in start tag of a tag set. must be followed by = and then value. value must be in quotation marks.

align - use with body,p,img src. values include 'center', 'left', 'right', 'justify' 'top' 'middle' 'bottom'.
bgcolor - background color.
background - graphic background image (.gif).
text - text color.
link - color of links before a visitor "clicks" on them.
alink - color of links while a visitor "clicks" on them.
vlink - color of links after a visitor has visited linked sites.
color - color the text between opening and closing tags.
size - size of text between opening and closing tags. values 1-7, 3 is default.
face - style of text between opening and closing tags. safe Windows fonts: Arial, Comic Sans MS, Courier New, Modern, MS Sans Serif, Symbol, Times New Roman, Wingdings. can specify up to three fonts. computer uses 1st one it finds, starting with 1st one in list.
alt - gives textual explanation that can be read when a graphical image is not displayed. use with img src.
border - size of border for graphical element. use with img src, table.
width - use with hr,img src. values include 50%, 25% for hr. values for img src give dimensions in pixels.
height - use with img src. values give dimensions in pixels.
size - use with hr. causes line to appear solid.
noshade - use with hr. causes line to appear solid. uses no quotation marks.
type - used with li. values include square, circle, disc.
summary - used with table. verbal description of table.
cellspacing - used with table. values are numeric. makes the space between table cells large and internal borders thicker.
cellpadding - used with table. values are numeric. makes the space between items in the cells and cell walls larger.
colspan - used with th, td. values are numeric. creates heading or cell that covers more than one column, stretching across the table.
rowspan - used with th, td. values are numeric. creates heading or cell that covers more than one row, stretching down the table.

Back to the Top

Special Characters and Entities

all case sensitive. alpha characters all begin with an ampersand (&) and end with a semi-colon (;). numeric characters all begin with an ampersand (&) followed by a number sign (#) and end with a semi-colon (;).

< - to show on a web page the left side bracket
> - to show on a web page the right side bracket
£ - to show the British pound sign
© - to show the copyright symbol
  - non-breaking space - to add spaces for indenting or to space out words
& - to show the ampersand character on a web page
½ - one-half fraction - ½
 - bullet - •
¬ - logical "not" symbol - ¬

Back to the Top

Tag Reference

using the  and <center> tags:
strong and centered

using the  tag and align attribute:

emphasized and centered

using the <blockquote> tag:

This is using the blockquote tag over and over. This is using the blockquote tag to indent text. This is using the blockquote tag to indent text. This is using the blockquote tag to indent text. This is using the blockquote tag to indent text. This is using the blockquote tag to indent text. This is using the blockquote tag to indent text. This is using the blockquote tag to indent text.

using the   7 times:
This has been indented with nbsp.