MainPage

HTML

The Master Site

Audio Files
Basic HTML Requirements
Body Tag Attributes
Font
Images
Links
Lists
Scrolling Text
Spacing and Stuff
Tables



= = = = Basic HTML Requirements = = = =

< HTML >
< HEAD >
< TITLE > < /TITLE >
< /HEAD >
< BODY >

< /BODY >
< /HTML >


Saving an HTML Document ==> "name.html"


Comments ( Like Pascal's {} ) < !-- COMMENT -- >



= = = = Body Tag Attributes = = = =

< BODY BGCOLOR="colour" > {background is declared colour}

< BODY BACKGROUND="http://www.geocities.com/conscious_matter/ProgrammingNotes/mybg.jpeg" > {background is mybg.jpeg}

< BODY BACKGROUND="http://www.geocities.com/conscious_matter/ProgrammingNotes/mybg.jpeg" BGPROPERTIES="fixed" > {fixed background image}

< BODY TEXT="colour" > {all text, unless changed, is all the declared colour}



= = = = Font = = = =

Headings (Biggest to Smallest)
< H1 > < /H1 >
...
< H6 > < /H6 >

DESIRE	TAG	EFFECT
Bold	< B > < /B >	Bold
Italics	< I > < /I >	Italics
Underlined	< U > < /U >	Underlined
Center	< CENTER > < /CENTER >	Center
Subscript	< SUB > < /SUB >	Subscript
Superscript	< SUP > < /SUP >	Superscript

SIZE Attribute: < FONT SIZE=# >
COLOR Attribute: < FONT COLOR="colour" >
FACE Attribute: < FONT FACE="text style" >


List of Colours:

black, white, red, fuchsia, green, yellow, orange, violet, purple, pink, silver, gold, gray, aqua, skyblue, lightblue, blue



= = = = Scrolling Text = = = =

< MARQUEE >
Scrolling text is so much fun.....I can scroll forever!
< /MARQUEE >


Attributes:

LOOP Attribute: < MARQUE LOOP="# of times text scrolls" >
BGCOLOR Attribute: < MARQUE BGCOLOR="colour" >
WIDTH Attribute: < MARQUE WIDTH="#" >



= = = = Spacing and Stuff = = = =

< P > New Paragraph ==> double spaced from previous action
NOTE: Multiple < P >s are ignored
NOTE: Can use ALIGN attribute with < P > tag

< BR > New Paragraph ==> single spaced from previous action

& n b s p ; Extra Space



LINES!

< HR > tag

Attributes

WIDTH Attribute: < HR WIDTH="" >
ALIGN Attribute: < HR ALIGN="" >
SIZE Attribute: < HR SIZE="" > (Vertical size; default is 2)
COLOR Attribute: < HR COLOR="" >
noshade Attribute: < HR noshade > (solid colour!)



= = = = Links = = = =

< A HREF="http://www.geocities.com/conscious_matter/ProgrammingNotes/URL" > Highlighted Text < /A >


Link Colours:

< BODY link="color" alink="color" vlink="color" >
{alink => active link, vlink => visited link}


Linking Within a Page:

< A NAME="top" > < /A >
< A HREF="#top" > Click Here < /A > to go to the top


Linking to a New Window:

< A HREF="http://www.geocities.com/conscious_matter/ProgrammingNotes/blah.html" target="_blank" > WORD! < /A >


Getting rid of the underline:

SINGLE LINK:
< A HREF="http://www.geocities.com/conscious_matter/ProgrammingNotes/blah.html" style="text-decoration:none" >

ALL LINKS:
(Put this inside the Head Tags of the document)

< STYLE type="text/css" >
< !--
A { text-decoration:none }
-- >
< /STYLE >


LINK TO EMAIL:
< A HREF="mailto:[email protected]?subject=Hey R Dawg!" > E-Mail Me! < /A >



= = = = Lists = = = =

< LI > List Item < /LI >


1. UNORDERED LISTS < UL > < /UL >

Bullet Types:
< UL > ==> Filled in Circle
< UL TYPE=square > ==> Filled in Square
< UL TYPE=circle > ==> Open Circle


2. ORDERED LISTS < OL > < /OL >

Types:
< OL TYPE=1 > ==> numbers (default)
< OL TYPE=a > ==> lowercase letters (A => uppercase)
< OL TYPE=i > ==> lowercase roman numerals (I => uppercase)


Different Start: < OL TYPE=I START=7 >



Nesting Lists, EXAMPLE:

< UL >
< LI > List Item Number 1 < /LI >
< LI > List Item Number 2 < /LI >
< UL >
< LI > Item 2 - A < /LI >
< LI > Item 2 - B < /LI >
< /UL >
< LI > List Item Number 3 < /LI >
< /UL >



= = = = Images = = = =

< IMG SRC="filename" >

Image Attributes:

ALIGN Attribute: < IMG ALIGN="(left, right, top, bottom, middle)" >
HEIGHT Attribute: < IMG HEIGHT=# >
WIDTH Attribute: < IMG WIDTH=# >
ISMAP Attribute: < IMG ISMAP(specifies image as clickable imagemap) >
ALT Attribute: < IMG ALT="(text to show onMouseover)" >


Thumbnail Image links to external image:
< A HREF="http://www.geocities.com/conscious_matter/ProgrammingNotes/MEP.gif" > < IMG SRC="http://www.geocities.com/conscious_matter/ProgrammingNotes/MEPThumbnail.gif" > < /A >

Image as Screen Background:
Attribute to Body Tag ==> < BODY BACKGROUND="http://www.geocities.com/conscious_matter/ProgrammingNotes/mybg.jpeg" >



= = = = Tables = = = =

< TABLE > < /TABLE >

< TH > Table Heading < /TH >
< TR > Entire Row < /TR >
< TD > Table Data < /TD >


Nesting Tables Works Too!


Merging Cells
< TD ROWSPAN=2 > (takes up two rows)
< TD COLSPAN=2 > (takes up two columns)


TABLE Tag Attributes:

BORDER Attribute: < TABLE BORDER >
(BORDER=0 makes no border! Good for nested tables)

WIDTH Attribute: < TABLE WIDTH=# >
(Default = 1; makes table stretch empty space accross the screen! ho ho hO!)

BGCOLOR Attribute: < TABLE BGCOLOR="colour" >

ALIGN Attribute: < TABLE ALIGN="center" >
(Default = left; ALL = Left, Right, Center, Justify)

CELLSPACING Attribute: < TABLE CELLSPACING="" >
(boxes text while making a bubble around it)

CELLPADDING Attribute: < TABLE CELLPADDING="" >
(Creates bubble around text)


NOTE:
BGCOLOR and ALIGN Attributes can be used in TR, TD, and TH as well.



= = = = Audio Files = = = =

< EMBED src="" >

Attributes of EMBED tag:

Width Attribute: < width="" > (most common is 144)
Height Attribute: < height="" > (most common is 60)
Autostart Attribute: < autostart="true or false" >
Loop Attribute: < loop="true or false" >
Hide Attribute: < hidden="true or false" >


Can put audio files in a link too.



= = = = Styles = = = =

Style tags can be thrown in anywhere.
style="property:value"
&lt is <
&gt is >
&amp is &