Important Information Where to Go for Online Help

Week 4:

Important Information – where to go for online help:

Today’s overview:

1. Review – Hexadecimal and Colors –see last page for reference

2. New Lesson - Navigation with Hyperlinks

First let’s create two CSS classes using the Style tag in the header:

------

Program 4-1:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Week 4 - Hyperlinks </TITLE>

<STYLE>

/* Create a CSS Class called "linkbox" in which to put hyperlinks */

.linkBox { float: left; border: 3pt solid #000000; padding: 20pt; background-color: #d0dbf0; }

marquee { font-size: 20pt; color: brown; }

</STYLE>

</HEAD>

<BODY>

<H1> Hello World! </H1> <BR>

MARQUEE>

Here come some Cool Hyperlinks!

</MARQUEE> <BR<BR>

</P>

</BODY>

</HTML>

------

Now let’s add a hyperlink element – using the <A HREF> tag. Notice three things:

1. <BR> single tag at the end of the line which adds a line break.

2. The naming conventions –both folders and filenames – are critical.

3. The Absolute File Structure Referencing using the Google Drive location “drive:drive/root”

------

Program 4-2:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Week 4 - Hyperlinks </TITLE>

<STYLE>

/* Create a CSS Class called "linkbox" in which to put hyperlinks */

.linkBox { float: left; border: 3pt solid #000000; padding: 20pt; background-color: #d0dbf0; }

marquee { font-size: 20pt; color: brown; }

</STYLE>

</HEAD>

<BODY>

<H1> Hello World! </H1> <BR>

Here come some Cool Hyperlinks!

</marquee> <BR<BR>

<A HREF="drive:drive/root/Programming/Week1/week1.html"> First Week - Introduction </A> <BR>

</P>

</BODY>

</HTML>

------

Now try adding hyperlinks to your next two week’s HTML files:

------

Program 4-3:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Week 4 - Hyperlinks </TITLE>

<STYLE>

/* Create a CSS Class called "linkbox" in which to put hyperlinks */

.linkBox { float: left; border: 3pt solid #000000; padding: 20pt; background-color: #d0dbf0; }

marquee { font-size: 20pt; color: brown; }

</STYLE>

</HEAD>

<BODY>

<H1> Hello World! </H1> <BR>

Here come some Cool Hyperlinks!

</marquee> <BR<BR>

<A HREF="drive:drive/root/Programming/Week1/week1.html"> First Week - Introduction </A> <BR>

<A HREF="drive:drive/root/Programming/Week2/week2.html">

Second Week Program - Cascading Style Sheets Introduction </A> <BR>

<A HREF="drive:drive/root/Programming/Week3/week3.html"> Third Week Program - Images </A> <BR>

</P>

</BODY>

</HTML>

------

Now let’s have some fun with the <marquee> HTML element:

------

Program 4-4:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> Week 4 - Hyperlinks </TITLE>

<STYLE>

/* Create a CSS Class called "linkbox" in which to put hyperlinks */

.linkBox { float: left; border: 3pt solid #000000; padding: 20pt; background-color: #d0dbf0; }

marquee { font-size: 20pt; color: brown; }

</STYLE>

</HEAD>

<BODY>

<H1> Hello World! </H1> <BR>

marquee behavior=alternate bgcolor=yellow direction=right hspace=150 loop=5

onclick="alert('Ouch - stop poking me!')" >

Here come some Cool Hyperlinks!

</marquee> <BR<BR>

<A HREF="drive:drive/root/Programming/Week1/week1.html"> First Week - Introduction </A> <BR>

Second Week Program - Cascading Style Sheets Introduction </A> <BR>

<A HREF="drive:drive/root/Programming/Week3/week3.html"> Third Week Program - Images </A> <BR>

</P>

</BODY>

</HTML>

------

Time to Experiment:

- Make a new folder, make a new HTML file, and then create a link to it from your home page in the Week4 folder. Have fun!

Hexadecimal Codes and Common Colors in HTML

Color HEX / Color RGB
#000000 – Black / rgb(0,0,0)
#FF0000 – Red / rgb(255,0,0)
#00FF00 – Green / rgb(0,255,0)
#0000FF – Royal Blue / rgb(0,0,255)
#FFFF00 – Yellow / rgb(255,255,0)
#00FFFF – Light Blue / rgb(0,255,255)
#FF00FF – Violet / rgb(255,0,255)
#C0C0C0 – Gray / rgb(192,192,192)
#FFFFFF - White / rgb(255,255,255)

Special Tag Information – Control of the Marquee Tag

The HTML<marquee> element is used to insert a scrolling area of text.

Attributes

Behavior - Sets how the text is scrolled within the marquee. Possible values arescroll,slide, andalternate. If no value is specified, the default value isscroll.

Bgcolor - Sets the background color through color name or hexadecimal value.

Direction - Sets the direction of the scrolling within the marquee. Possible values areleft,right,up, anddown. If no value is specified, the default value isleft.

Height - Sets the height in pixels or percentage value.

Hspace - Sets the horizontal margin

Loop -Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously.

Scrollamount - Sets the amount of scrolling at each interval in pixels. The default value is 6.

Scrolldelay - Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead, unlesstruespeedis specified.

Truespeed - By default,scrolldelayvalues lower than 60 are ignored. Iftruespeedis present, those values are not ignored.

Vspace - Sets the vertical margin in pixels or percentage value.

Width - Sets the width in pixels or percentage value.

Examples

<marquee>This text will scroll from right to left</marquee

marquee direction=upThis text will scroll from bottom to top</marquee

marquee direction=downwidth=250height=200behavior=alternatestyle=border:solid

marquee behavior=alternate

This text will bounce

</marquee