Module 4 HTML. Web Jargon A Web site is a collection of webpages A Homepage is the main entry to...

Module 4Module 4

HTMLHTML

Web JargonWeb Jargon A Web site is a collection of webpages

A Homepage is the main entry to a web site index.htm or index.html

Hyperlinks (links) are words or pictures that act as buttons, allowing you to go to another webpage

Links are typically underlined or displayed in a different color allow you to locate information without knowing its exact location (it

may move from time to time)

Back and Forward buttons let you retrace your steps

Bookmarks and Favorites can be set up to mark your favorite Web locations

HTML language was created for encoding and displaying documents on the web

An HTML file contains the data (content displayed by the browser) as well as the tags instructing the browser on what to do with this data

Browser software was built for viewing documents from remote locations

Inside the WebInside the Web

Publishing on the Web Publishing on the Web

HTML was created for encoding and displaying documents on the web

An HTML file contains the data (content displayed by the browser) as well as the tags instructing the browser on what to do with this data

An An HTMLHTML document includes document includes tags (codes) that determine the tags (codes) that determine the format, layout, and structure of a format, layout, and structure of a Web documentWeb document

HTML (Hypertext Markup Language)HTML is NOT

WYSIWYG

Things you need to know before starting

HTML Essential VocabularyHTML Essential Vocabulary

ElementsElements Fundamental units - Mark off regions of the text file to Fundamental units - Mark off regions of the text file to

indicate that some processing is to be applied to that indicate that some processing is to be applied to that section of textsection of text

May describe non-textual and stylistic features of the May describe non-textual and stylistic features of the page as wellpage as well

<H1>Matilda the Dancing Goat</H1><H1>Matilda the Dancing Goat</H1>• Instructs the browser to display “Matilda the Dancing Goat” Instructs the browser to display “Matilda the Dancing Goat”

as a Heading of type 1.as a Heading of type 1.• The entire line is considered an “element”The entire line is considered an “element”

……HTML Essential Vocabulary…HTML Essential Vocabulary…

Tags Bracketed <tags> indicate the start and end points

of an element

<H1> Matilda the Dancing Goat </H1>• <H1> and </H1> are tags• <H1> is a START tag because it marks the start of an

element• </H1> is an END tag because it marks the end of an

element

Note: End tags always have a / (backslash) as the first character. Start tags do not.

Tags contain the “instructions” to be interpreted

……more Vocabulary…more Vocabulary… Container ElementsContainer Elements

Elements that use a start and end tagElements that use a start and end tag• <H1>Matilda the Dancing Goat</H1><H1>Matilda the Dancing Goat</H1>

Empty ElementsEmpty Elements Elements that do no have an end tagElements that do no have an end tag

• <BR><BR> Simply means “break” and moves to the next line when Simply means “break” and moves to the next line when

displaying textdisplaying text

There are few empty elements and these are There are few empty elements and these are generally “exceptions to the rule”. Most elements generally “exceptions to the rule”. Most elements require an end tagrequire an end tag

……Vocabulary…Vocabulary…

AttributesAttributes Used to specify extra details about the element. Used to specify extra details about the element. Attributes are extra instructions written inside the Attributes are extra instructions written inside the

start tag of the elementstart tag of the element Attributes CANNOT be used on their own!Attributes CANNOT be used on their own!

<HR <HR WIDTH = 90%WIDTH = 90% > >• HR creates a horizontal rule – a line across the pageHR creates a horizontal rule – a line across the page• WIDTH = 90% is an attribute, specifying that the line WIDTH = 90% is an attribute, specifying that the line

should be 90% of the width of the page.should be 90% of the width of the page.

Grammatical IssuesGrammatical Issues

HTML is case-InSeNsItIvEHTML is case-InSeNsItIvE It doesn’t care if you use upper or lowercase It doesn’t care if you use upper or lowercase

lettersletters By convention, we put HTML tags in By convention, we put HTML tags in

uppercase letters to make it easier to read uppercase letters to make it easier to read and distinguishand distinguish

……Grammar…Grammar… Elements can be nested but not overlapped

Think of them as containers… they can go inside each other, but not half in half out

<H1> Matilda the <B> dancing goat </B> </H1>• Is correct

<H1> Matilda the <B> dancing goat </H1> </B>• Is INCORRECT

HTML - Basic Page StructureHTML - Basic Page Structure

<TITLE>… </TITLE><TITLE>… </TITLE>……

</HEAD></HEAD><BODY><BODY>……</BODY></BODY>

</HTML></HTML>

Note: Indentation is to make it easier for people to read – the browser does not care about white space.

USE LOTS OF WHITESPACE!

It makes your, your marker’s, and your advisor’s lives much easier!

HEAD and BODYHEAD and BODY

The The HEADHEAD element element Contains meta-information about the documentContains meta-information about the document

• Information that doesn’t show up on the page when Information that doesn’t show up on the page when displayeddisplayed

• For us, this includes the “Title” (what shows up on the For us, this includes the “Title” (what shows up on the top bar of the window) and any JavaScript code.top bar of the window) and any JavaScript code.

The The BODYBODY element element Contains all of the text to be displayed and all Contains all of the text to be displayed and all

elements that control how the text appearselements that control how the text appears• All the details about what shows up on the page when All the details about what shows up on the page when

displayeddisplayed• If it shows up on the page, it’s in the body!If it shows up on the page, it’s in the body!

Comment tagsComment tags Comment tags can be inserted anywhere Comment tags can be inserted anywhere

within the documentwithin the document The browser ignores themThe browser ignores them Their sole purpose is to give info to the Their sole purpose is to give info to the

humans who read the codehumans who read the code

--> Comment tags Comment tags

• start with “open bracket, exclamation mark, dash, dash” start with “open bracket, exclamation mark, dash, dash” • and end with “dash, dash, close bracket” (no exclamation and end with “dash, dash, close bracket” (no exclamation

mark at the end)mark at the end)

HTML – the practical partsHTML – the practical partsthe world of tagsthe world of tags

First HTML PageFirst HTML Page

HeadingsHeadings HeadingsHeadings

6 types of headings, numbered from 1 to 66 types of headings, numbered from 1 to 6

<H1><H1>Matilda the Dancing Goat - using Heading of Size 1Matilda the Dancing Goat - using Heading of Size 1</H1></H1>

<H2><H2>Paprika the Singing Sheep - using Heading of Size 2 Paprika the Singing Sheep - using Heading of Size 2 </H2></H2>

<H3><H3>Lou the Talking Flea - using Heading of Size 3 Lou the Talking Flea - using Heading of Size 3 </H3></H3>

<H4><H4>Cornelius the Whistling Hippo - using Heading of Size 4 Cornelius the Whistling Hippo - using Heading of Size 4 </H4></H4>

<H5><H5>Augustus the Chanting Camel - using Heading of Size 5 Augustus the Chanting Camel - using Heading of Size 5 </H5></H5>

<H6><H6>Argentina the Typing Aardvark - using Heading of Size 6 Argentina the Typing Aardvark - using Heading of Size 6 </H6></H6>

</BODY></BODY>

ParagraphsParagraphs Paragraphs use <P> and </P> tags

They can have an attribute specifying alignment• ALIGN = LEFT/RIGHT/CENTER

<BODY><H3>Matilda the Dancing Goat - using Heading of Size 3</H3><P> Matilda is my favorite goat. She lives with me in my apartment. We've been friends since kindergarten. We took dancing lessons together for 11 years. She is much better than I am.</P><P ALIGN = CENTER> I don't have anything to say in this paragraph, I just wanted you to see what a second paragraph would look like. This paragraph uses the align attribute to center the paragraph. See it in the start tag?</P>

</BODY>

Style elementsStyle elements Physical style elements describe exactly how

the text should be modified Bold uses <B> and </B> tags Italics uses <I> and </I> tags Underline uses <U> and </U> tags

Logical style elements say that *something* should be done but leave the details to the browser

Emphasis can be done with • <EM> and </EM> tags• <STRONG> and </STRONG> tags

Style elements…Style elements…<BODY><BODY>

<P><P>Matilda is my Matilda is my <B><B> favorite goatfavorite goat</B></B>.. She lives with me She lives with me in my apartment. We've been friends since kindergarten. in my apartment. We've been friends since kindergarten. We took dancing lessons We took dancing lessons <I><I> together for 11 years together for 11 years</I></I>.. She She is is <U><U> much better much better </U></U> than I am. than I am.</P></P><P><P>I don't have I don't have <EM><EM> anything anything </EM></EM> to say in this to say in this paragraph, I just wanted you to see what a paragraph, I just wanted you to see what a <STRONG><STRONG> second paragraph second paragraph </STRONG></STRONG> would look like. This would look like. This paragraph uses style elements to format the text. It also paragraph uses style elements to format the text. It also shows you that shows you that <EM><U><EM><U> you can nest tags.you can nest tags. </U></EM></U></EM> </P></P>

</BODY></BODY>

More style elementsMore style elements PhysicalPhysical

To display text as To display text as computer codecomputer code, use , use • <CODE><CODE> and and </CODE></CODE> tags tags

To display text as To display text as superscriptsuperscript or or subscriptsubscript, use, use• <SUP><SUP> and and </SUP></SUP> tags tags• <SUB><SUB> and and </SUB></SUB> tags tags

To display text exactly as in the HTML file (same spacing), useTo display text exactly as in the HTML file (same spacing), use• <PRE><PRE> and and </PRE></PRE> tags tags

LogicalLogical To display text as a definition, useTo display text as a definition, use

• <DFN><DFN> and and </DFN></DFN> tags tags

To display text as a quote, use To display text as a quote, use • <BLOCKQUOTE><BLOCKQUOTE> and and </BLOCKQUOTE></BLOCKQUOTE> tags tags

<P><P>Matilda is my favorite goat. She lives with me in my apartment. Matilda is my favorite goat. She lives with me in my apartment. We've been friends since kindergarten. We took dancing lessons We've been friends since kindergarten. We took dancing lessons together for 11 years. She is much better than I am. To quote our together for 11 years. She is much better than I am. To quote our teacher:teacher:

<BLOCKQUOTE><BLOCKQUOTE> ""Why can't you be more like Matilda? She has 4 legs Why can't you be more like Matilda? She has 4 legs and she's still more graceful than you are! Maybe you should take up and she's still more graceful than you are! Maybe you should take up another hobby..." another hobby..." </BLOCKQUOTE></BLOCKQUOTE>

<P><P>Her definition of graceful definitely did not include my pitiful Her definition of graceful definitely did not include my pitiful attempts... here it is: attempts... here it is: <DFN><DFN> Graceful: Someone who can dance Graceful: Someone who can dance without hitting into walls or knocking down other dancers without hitting into walls or knocking down other dancers </DFN></DFN>

</P></P>

</BODY></BODY>

<BODY><BODY><P><P>Matilda is my favorite goat. She lives Matilda is my favorite goat. She lives <SUP><SUP> with me with me </SUP></SUP> in in <SUB><SUB> my apartment. my apartment. </SUB></SUB> We've been friends since We've been friends since kindergarten. We took dancing lessons together for 11 years. She kindergarten. We took dancing lessons together for 11 years. She is much better than I am. is much better than I am. </P></P>

<P><P><PRE><PRE> And... this is what the PRE tag is for...And... this is what the PRE tag is for...

keepingkeeping all of these funny spaces in. all of these funny spaces in. </PRE></PRE>

</P></P>

<P> <P> <CODE><CODE> This is an example of what text formatted in This is an example of what text formatted in computer code would look likecomputer code would look like. . </CODE></CODE> </P></P>

</BODY></BODY>

Breaking things up…Breaking things up… To add blank lines, useTo add blank lines, use

<BR><BR> meaning Break meaning Break

To add a dividing line, useTo add a dividing line, use <HR><HR> meaning Horizontal Rule meaning Horizontal Rule Attributes of horizontal rules includeAttributes of horizontal rules include

• WIDTH =WIDTH = 70% 70% Means the line will take up 70% of the width of the pageMeans the line will take up 70% of the width of the page

• SIZE =SIZE = 8 8 Means the line would be relatively thick, the bigger the Means the line would be relatively thick, the bigger the

number, the thicker the linenumber, the thicker the line

• ALIGN =ALIGN = LEFT/RIGHT/CENTER LEFT/RIGHT/CENTER Means the relative horizontal position of the line Means the relative horizontal position of the line

<P><P>Matilda is my favorite goat. Matilda is my favorite goat. <BR> <BR> <BR><BR><BR><BR><BR><BR> She lives with me in my apartment.She lives with me in my apartment.

<BR><HR><BR><BR><HR><BR> We've been friends since We've been friends since kindergarten. kindergarten. <BR><BR>

We took dancing lessons together for 11 years. She We took dancing lessons together for 11 years. She is much better than I am. is much better than I am.

</P></P>

</BODY></BODY>

CenteringCentering

You can center anything horizontally by You can center anything horizontally by enclosing it between center tags…enclosing it between center tags… <CENTER><CENTER> and and </CENTER></CENTER> Note the US spelling of “center”Note the US spelling of “center”

<P>This is a short paragraph</P><P>This is a short paragraph</P>

</CENTER></CENTER>

<BODY>

<H3>Maurice the Flying Eel </H3>

<P>I've known Maurice since last summer when I was at the lake. I was standing by the lake and he landed on my head. We became close friends instantly.</P>

<H4>Description of Maurice</H4>

<P>Maurice is about 17 inches long. He's a very colorful, spotted eel, most of his spots are red, blue, and purple though. He wears glasses, but they look more like goggles.</P>

</CENTER>

</BODY>

ColorsColors

ColorsColors You can specify the color of any element on You can specify the color of any element on

your web pages (note the US spelling of your web pages (note the US spelling of “color”)“color”)

There are 16 colors that any browser will There are 16 colors that any browser will recognizerecognize

AquaAqua GrayGray NavyNavy SilverSilver

Black GreenGreen OliveOlive TealTeal

BlueBlue LimeLime PurplePurple WhiteWhite

FuchsiaFuchsia MaroonMaroon RedRed YellowYellow

Fancier Colors…Fancier Colors…

There are MANY more colors that can be specified, There are MANY more colors that can be specified, however there is no guarantee that the viewer’s however there is no guarantee that the viewer’s browser will interpret them the same as yoursbrowser will interpret them the same as yours

Can specify them by name, but it’s best to specify the Can specify them by name, but it’s best to specify the RGB value (or “hexadecimal triplet”) for the color you RGB value (or “hexadecimal triplet”) for the color you wantwant

RRGGBB = = RedRed--GreenGreen--BlueBlue The RGB value is the amount of red, green, and blue that The RGB value is the amount of red, green, and blue that

are mixed together to make the desired colorare mixed together to make the desired color

RGB Values / Hexadecimal RGB Values / Hexadecimal TripletTriplet

Red, green, and blue can be combined in various Red, green, and blue can be combined in various proportions to obtain any colorproportions to obtain any color

Each level is represented by the range of decimal Each level is represented by the range of decimal numbers from 0 to 255, or hexadecimal 00 to FFnumbers from 0 to 255, or hexadecimal 00 to FF

00 to FF for Red00 to FF for Red 00 to FF for Green00 to FF for Green 00 to FF for Blue00 to FF for Blue

Total number of available colors is Total number of available colors is 256 X 256 X 256 = 16 777 216 colors256 X 256 X 256 = 16 777 216 colors

RGB examplesRGB examples

#FF0000 = #FF0000 = REDRED

#CC00FF = PURPLE

#00D7D2 = TURQUOISE

Fonts and colorsFonts and colors To change fonts, useTo change fonts, use

<FONT><FONT> and and </FONT></FONT> tags tags Must use attributes with this tag otherwise, it does Must use attributes with this tag otherwise, it does

nothingnothing Some attributesSome attributes

• SIZE =SIZE = -2 -2 Means the font would appear much smaller than the restMeans the font would appear much smaller than the rest If you use +/- in front of the number, it specifies “relative If you use +/- in front of the number, it specifies “relative

size” … so “+3” means 3 sizes bigger than the current sizesize” … so “+3” means 3 sizes bigger than the current size If you only use a number without a sign, it specifies the If you only use a number without a sign, it specifies the

“absolute size”… so “3” means font of size 3. The sizes “absolute size”… so “3” means font of size 3. The sizes go from 1 to 7.go from 1 to 7.

• FACE =FACE = “Times Roman” “Times Roman” Specifies the type of font to useSpecifies the type of font to use

• COLOR =COLOR = “red” “red” Specifies the color of the textSpecifies the color of the text

• Use the name of the colorUse the name of the color• Use RGB code with a # in frontUse RGB code with a # in front

Matilda is my favorite goat Matilda is my favorite goat </FONT></FONT> . She lives with . She lives with me in my apartment. We've been friends me in my apartment. We've been friends <FONT <FONT COLOR = "#0000FF" FACE = "Courier New">COLOR = "#0000FF" FACE = "Courier New"> since since kindergarten kindergarten </FONT></FONT> .. We took dancing lessons We took dancing lessons together for 11 years. She is much better than I am. together for 11 years. She is much better than I am.

</P></P>

</BODY></BODY>

Background Color…Background Color… To set the background color, you need to set To set the background color, you need to set

an attribute in the an attribute in the <BODY><BODY> tag tag BGCOLOR =BGCOLOR = “green” “green”

• Means that the background color of the page will be set Means that the background color of the page will be set to greento green

• It is in the BODY tag because it affects the entire pageIt is in the BODY tag because it affects the entire page

<BODY BGCOLOR = "yellow"><BODY BGCOLOR = "yellow"><P><P>Matilda is my favorite goat . She lives with me in my Matilda is my favorite goat . She lives with me in my apartment. We've been friends since kindergarten. We took apartment. We've been friends since kindergarten. We took dancing lessons together for 11 years. She is much better than dancing lessons together for 11 years. She is much better than I am. I am. </P></P>

</BODY></BODY>

HyperlinksHyperlinks

Hyperlinks are created using the Anchor tagHyperlinks are created using the Anchor tag <A><A> and and </A></A> Attributes of the <A> tag areAttributes of the <A> tag are

• NAME =NAME = “somename” “somename” Makes this anchor serve as the Makes this anchor serve as the destinationdestination of a link of a link This anchor does not lead to anywhere, it simply “names” an This anchor does not lead to anywhere, it simply “names” an

area of the page so that you can refer to it later onarea of the page so that you can refer to it later on

• HREF =HREF = “somedestination” “somedestination” Identifies where the link points toIdentifies where the link points to Can be a URL or another anchor’s nameCan be a URL or another anchor’s name This anchor will lead to whatever location is specified in the This anchor will lead to whatever location is specified in the

HREFHREF

Example HyperlinksExample Hyperlinks <A HREF = “http://www.cs.usask.ca”><A HREF = “http://www.cs.usask.ca”>CS Homepage CS Homepage </A></A>

Displays the words “CS Homepage” as a link that goes to the webpageDisplays the words “CS Homepage” as a link that goes to the webpage

<A NAME = “TopOfPage”><A NAME = “TopOfPage”>This is the top of the page This is the top of the page </A></A> Gives a name to a particular point on the page so that it can be Gives a name to a particular point on the page so that it can be

referenced later on. In this case, the point is called “TopOfPage”. The referenced later on. In this case, the point is called “TopOfPage”. The words “This is the top of the page” are displayed.words “This is the top of the page” are displayed.

Does Does notnot create a link create a link

<A HREF = “#TopOfPage”><A HREF = “#TopOfPage”>Go to the top of the page Go to the top of the page </A></A> Displays the words “Go to the top of the page” as a link that brings you Displays the words “Go to the top of the page” as a link that brings you

to the part of the page called “TopOfPage”to the part of the page called “TopOfPage” The The ## simply tells the browser that this is a reference to another Anchor simply tells the browser that this is a reference to another Anchor

on this page rather than to a URL.on this page rather than to a URL.• It says “look on *this* page for a spot named “TopOfPage”It says “look on *this* page for a spot named “TopOfPage”

<A NAME="<A NAME="toptop"> </A>"> </A><H3><H3>Roy the Mountain-Climbing Seaturtle's HomepageRoy the Mountain-Climbing Seaturtle's Homepage</H3></H3>

<A HREF="http://www.nationalgeographic.com"><A HREF="http://www.nationalgeographic.com">Roy's favorite Roy's favorite website website </A></A>

<A HREF = “myhomework.html"><A HREF = “myhomework.html">Roy's physics assignment Roy's physics assignment </A></A><BR><BR>

<A HREF = "<A HREF = "#top#top">">Return to the top of Roy's homepage Return to the top of Roy's homepage </A></A>

</BODY></BODY>

ImagesImages

Images are inserted using a special tag called Images are inserted using a special tag called <IMG><IMG> No end tag is required because there is no enclosed textNo end tag is required because there is no enclosed text This is one of the special cases where there is no end tagThis is one of the special cases where there is no end tag

Image files can be stored on your local computer or Image files can be stored on your local computer or somewhere on the internet – as long as you know somewhere on the internet – as long as you know exactly where it isexactly where it is

Images can be used as linksImages can be used as links

<IMG> attributes<IMG> attributes SRC = “location of image file”

Required attribute Specifies the Source for the image (where the image is stored) Image files need to be of either .gif or .jpg format

ALIGN = LEFT/RIGHT/TOP/BOTTOM/MIDDLE Specifies how image is aligned with respect to surrounding text Align = center does not work for images

HEIGHT = number Specifies the height of the picture, in pixels

WIDTH = number Specifies the width of the picture, in pixels

More <IMG> attributes…More <IMG> attributes…

HSPACE =HSPACE = number number Specifies the amount of white space at the left/right of picture in pixelsSpecifies the amount of white space at the left/right of picture in pixels

VSPACE =VSPACE = number number Specifies the amount of white space at the top/bottom of picture in pixelsSpecifies the amount of white space at the top/bottom of picture in pixels

BORDER =BORDER = numbernumber Places a border around the picturePlaces a border around the picture larger number = wider borderlarger number = wider border To have no border around a picture, use BORDER = 0To have no border around a picture, use BORDER = 0

ISMAPISMAP Indicates that the image is an image mapIndicates that the image is an image map We will look at image maps later onWe will look at image maps later on

<IMG> examples<IMG> examples <IMG SRC = “roy.gif”><IMG SRC = “roy.gif”>

Will insert the image contained in the file roy.gif (this file must be in the Will insert the image contained in the file roy.gif (this file must be in the *same* folder as the html file where the reference is made*same* folder as the html file where the reference is made

<IMG SRC = <IMG SRC = “http://www.cs.usask.ca/classes/100/t1/gifs/c100url.gif” BORDER = “http://www.cs.usask.ca/classes/100/t1/gifs/c100url.gif” BORDER = 3 ALIGN = RIGHT>3 ALIGN = RIGHT>

Inserts the image taken from a website, right-aligned and with a 3 pt. Inserts the image taken from a website, right-aligned and with a 3 pt. BorderBorder

</A></A> Inserts a picture that is a link to a websiteInserts a picture that is a link to a website

<BODY><BODY><H3><H3>This is Mountain Climbing Roy This is Mountain Climbing Roy </H3></H3>

<H3><H3>This is Roy's best friend - EsmereldaThis is Roy's best friend - Esmerelda</H3></H3>

</A></A>

<P><P>Click on Esmerelda's picture to go to her favorite Click on Esmerelda's picture to go to her favorite webpagewebpage

</P></P></BODY></BODY>

Lists and Tables…Lists and Tables…

Lists and TablesLists and Tables Lists and tables are used to organize your Lists and tables are used to organize your

information on a pageinformation on a page

There are two kinds of listsThere are two kinds of lists Ordered lists – automatically numberedOrdered lists – automatically numbered Unordered lists – bulleted lists (no numbers)Unordered lists – bulleted lists (no numbers)

Tables are defined in terms of rows and columnsTables are defined in terms of rows and columns They are very useful for organizing/aligning components on They are very useful for organizing/aligning components on

your pageyour page

List <TAGS>List <TAGS>

Ordered lists useOrdered lists use <OL><OL> </OL></OL> as tags as tags

Unordered lists useUnordered lists use <UL> </UL><UL> </UL> as tags as tags

Both use Both use <L<LII></L></LII>> to identify each to identify each LList ist IItem tem within the listwithin the list NOTNOT L1, L2, etc. L1, L2, etc.

<OL> attributes<OL> attributes TYPE =TYPE = “A”, “a”, “ “A”, “a”, “II”, “i”, “1””, “i”, “1”

Identifies how you want the list numberedIdentifies how you want the list numbered

Default is “1”, meaning items will be numbered 1, 2, 3, etc. Default is “1”, meaning items will be numbered 1, 2, 3, etc. … so if you do not specify a type, the ordered list will be … so if you do not specify a type, the ordered list will be numbered using 1, 2, 3, etc.numbered using 1, 2, 3, etc.

START =START = startvalue startvalue Starting point for numberingStarting point for numbering

Must be aMust be a numbernumber valuevalue

Default is 1 … so if you do not specify a start value, the list Default is 1 … so if you do not specify a start value, the list will automatically start at 1 (or “A” or “I” or…)will automatically start at 1 (or “A” or “I” or…)

<UL> attributes<UL> attributes TYPE =TYPE = “DISC”, “CIRCLE”, “SQUARE” “DISC”, “CIRCLE”, “SQUARE”

Default is discDefault is disc

Specifies the type of bullet used for itemsSpecifies the type of bullet used for items

List examplesList examples

<OL TYPE = “a” START = 13><OL TYPE = “a” START = 13><LI> <LI> apples apples </LI></LI><LI> <LI> bananas bananas </LI></LI><LI> <LI> watermelon watermelon </LI></LI><LI> <LI> peaches peaches </LI></LI>

</OL></OL>

Gives a list that looks like this:Gives a list that looks like this:

m. Applesm. Applesn. Bananasn. Bananaso. Watermelono. Watermelonp. Peachesp. Peaches

<UL><LI> carrots </LI><LI> asparagus </LI><LI> zucchini </LI>

Gives a list that looks like this:

•Carrots•Asparagus•Zucchini

<BODY><BODY><H3><H3> Roy's favorite hobbies Roy's favorite hobbies </H3></H3>

<OL TYPE="i"><OL TYPE="i"><LI><LI> Mountain climbing Mountain climbing </LI></LI><LI><LI> Swimming Swimming </LI></LI><LI><LI> Stamp collecting Stamp collecting </LI></LI><LI><LI> Kite flying Kite flying </LI></LI>

</OL></OL>

<H3><H3>Esmerelda's favorite hobbiesEsmerelda's favorite hobbies</H3></H3>

<UL TYPE="square"><UL TYPE="square"><LI><LI> Playing darts Playing darts </LI></LI><LI><LI> Computer solitaire Computer solitaire </LI></LI><LI><LI> Grocery shopping Grocery shopping </LI></LI>

</UL></UL>

</BODY></BODY>

Tables <TAGS>Tables <TAGS> There are several tags you need to know in order to There are several tags you need to know in order to

set up tablesset up tables

<TABLE><TABLE> and and </TABLE></TABLE>• Go at the very top and very end of the table, anything in Go at the very top and very end of the table, anything in

between is contained in the tablebetween is contained in the table

<TR><TR> and and </TR></TR>• Means Table RowMeans Table Row• Creates one row in the tableCreates one row in the table

<TD><TD> and and </TD></TD>• Means Table Data (think Table Column, although it doesn’t Means Table Data (think Table Column, although it doesn’t

match the tag abbreviation)match the tag abbreviation)• Creates one column inside one row in the table (so one “cell”)Creates one column inside one row in the table (so one “cell”)

Tables… important…Tables… important…

Must *always* have all the closing tagsMust *always* have all the closing tags

The order of tags is importantThe order of tags is important TABLE tags on the outsideTABLE tags on the outside Then <TR> between the TABLE tagsThen <TR> between the TABLE tags Then <TD> between the TR tagsThen <TD> between the TR tags

The total number of TDs must be the same in each rowThe total number of TDs must be the same in each row

Use lots of white space and indenting when creating tables… Use lots of white space and indenting when creating tables… trust me, you’ll need it!trust me, you’ll need it!

Any other tags used in the table *must* be between the <TD> Any other tags used in the table *must* be between the <TD> </TD> tags</TD> tags

<TABLE>

</TABLE>

Table example 1Table example 1<TABLE><TABLE>

<TR><TR> <TD><TD>namename</TD></TD><TD><TD>speciesspecies</TD></TD>

</TR></TR><TR><TR>

<TD><TD>RoyRoy</TD></TD><TD><TD>sea turtlesea turtle</TD></TD>

</TR></TR><TR><TR>

<TD><TD>MatildaMatilda</TD></TD><TD><TD>GoatGoat</TD></TD>

</TR></TR></TABLE></TABLE>

namename speciesspecies

RoyRoy sea turtlesea turtle

MatildaMatilda goatgoat

Gives a table that looks like this:

<TABLE> attributes<TABLE> attributes BORDER = number

Specifies the width of the border to have around the cells of the table Default is none (ie. a border of size 0) Hint: when first creating a table, always include a border so that you can

see where it is when displayed… it is much easier to debug this way. You can remove the border once you are happy with how it looks

CELLSPACING = number Specifies the amount of space *between* cells Default is none

CELLPADDING = number Adds spaces *within* each cell Default is none

WIDTH = number or number% Specifies the total width of the table across the page Either as a number of pixels or as a percentage

Table Example 2Table Example 2<TABLE BORDER = 3 CELLPADDING=5 CELLSPACING=10>

<TD>species</TD>

<TD>sea turtle</TD>

<TD>Matilda</TD>

</TABLE>

Cellpadding = 5Cellspacing = 10

<TR><TR> <TD><TD>namename</TD></TD> <TD><TD>speciesspecies</TD></TD> </TR></TR>

<TR><TR> <TD><TD>RoyRoy</TD></TD> <TD><TD>sea turtlesea turtle</TD></TD> </TR></TR>

<TR><TR> <TD><TD>MatildaMatilda</TD></TD> <TD><TD>goatgoat</TD></TD> </TR></TR>

</TABLE></TABLE>

<TR><TR> <TD><TD>namename</TD></TD> <TD><TD>speciesspecies</TD></TD> </TR></TR>

</TABLE></TABLE>

</BODY></BODY>

<TR> attributes<TR> attributes

These refer to the entire *row*These refer to the entire *row*

ALIGN =ALIGN = “LEFT”, “RIGHT”, “CENTER” “LEFT”, “RIGHT”, “CENTER” Positions the content horizontally within each cellPositions the content horizontally within each cell

VALIGN =VALIGN = “TOP”, “BOTTOM”, “MIDDLE” “TOP”, “BOTTOM”, “MIDDLE” Positions the content vertically within each cellPositions the content vertically within each cell

<TD> attributes<TD> attributes Refers to the specific cellRefers to the specific cell

ALIGN =ALIGN = “RIGHT”, “LEFT”, “CENTER” “RIGHT”, “LEFT”, “CENTER”

VALIGN =VALIGN = “TOP”, “BOTTOM, “MIDDLE” “TOP”, “BOTTOM, “MIDDLE”

COLSPAN =COLSPAN = number number Makes the cell cover a number of Makes the cell cover a number of

columns within a rowcolumns within a row

ROWSPAN =ROWSPAN = number number Makes the cell cover a number of rows Makes the cell cover a number of rows

within the tablewithin the table

COLSPAN

ROWSPAN

Table Example 3Table Example 3<TABLE BORDER = 3 WIDTH = 50%><TABLE BORDER = 3 WIDTH = 50%>

<TR ALIGN = "CENTER"><TR ALIGN = "CENTER"> <TD><TD>namename</TD></TD> <TD><TD>speciesspecies</TD> </TD> </TR></TR><TR ALIGN = "RIGHT"><TR ALIGN = "RIGHT"> <TD><TD>RoyRoy</TD></TD> <TD><TD>sea turtlesea turtle</TD> </TD> </TR></TR><TR><TR> <TD><TD>MatildaMatilda</TD> <TD></TD> <TD>goatgoat</TD> </TD> </TR></TR>

</TABLE></TABLE><BR><BR><TABLE BORDER = 3 WIDTH = 50%><TABLE BORDER = 3 WIDTH = 50%>

<TR><TR><TD COLSPAN = 2><TD COLSPAN = 2>namename</TD></TD>

</TR></TR><TR><TR>

<TD><TD>RoyRoy</TD></TD><TD><TD>sea turtlesea turtle</TD></TD>

</TR></TR><TR><TR>

<TD ROWSPAN = 2><TD ROWSPAN = 2>MatildaMatilda</TD></TD><TD><TD>goatgoat</TD></TD>

</TR></TR><TR><TR>

<TD><TD>buffalobuffalo</TD></TD></TR></TR>

</TABLE></TABLE>

A closer look at A closer look at colspan and rowspancolspan and rowspan

<TD COLSPAN = 2><TD COLSPAN = 2>namename</TD></TD>

</TR></TR>

<TD><TD>RoyRoy</TD></TD>

<TD><TD>sea turtlesea turtle</TD></TD>

</TR></TR>

<TD ROWSPAN = <TD ROWSPAN = 2>2>MatildaMatilda</TD></TD>

<TD><TD>goatgoat</TD></TD>

</TR></TR>

<TD><TD>buffalobuffalo</TD></TD>

</TR></TR>

</TABLE></TABLE>

One more type of Table tag: One more type of Table tag: <TH><TH>

Tables can have headings, these require Tables can have headings, these require <TH><TH> and and </TH></TH> tags tags Table headings are preformatted for you like other headingsTable headings are preformatted for you like other headings They are used as a replacement for a TD tagThey are used as a replacement for a TD tag

<TH> attributes are<TH> attributes are ALIGNALIGN VALIGNVALIGN COLSPANCOLSPAN ROWSPANROWSPAN

• These work just like in the other table tagsThese work just like in the other table tags

Table Example 4Table Example 4<TABLE BORDER = 3 WIDTH = 80%><TABLE BORDER = 3 WIDTH = 80%>

<TR><TR> <TH><TH>namename</TH></TH> <TH><TH>speciesspecies</TH></TH> </TR></TR>

</TABLE></TABLE>

<TR><TR> <TH COLSPAN=2><TH COLSPAN=2>My FriendsMy Friends</TH></TH> </TR></TR>

<TR><TR> <TH><TH>namename</TH></TH> <TH><TH>speciesspecies</TH></TH> </TR></TR>

<TR><TR> <TD><TD>AlvinAlvin</TD></TD> <TD><TD>SpiderSpider</TD></TD> </TR></TR>

<TR><TR> <TD><TD>ThelmaThelma</TD></TD> <TD><TD>GiraffeGiraffe</TD></TD> </TR></TR>

</TABLE></TABLE>

Image MapsImage Maps

Image maps let different portions of one Image maps let different portions of one image be hyperlinks to various locationsimage be hyperlinks to various locations

Image Map tagsImage Map tags Uses Uses <IMG><IMG> tag… tag…

but includes a new attributebut includes a new attribute <IMG SRC=“filename” <IMG SRC=“filename” USEMAP=“#mapname”USEMAP=“#mapname” > >

• ““this image is a map, it uses the map called “mapname” to this image is a map, it uses the map called “mapname” to describe its links”describe its links”

Must define the map usingMust define the map using <MAP><MAP> and and </MAP></MAP> tags tags Each area within the map is specified by an Each area within the map is specified by an <AREA><AREA> tag tag So, it looks like this:So, it looks like this:

</MAP></MAP>

<MAP> attributes<MAP> attributes

NAME =NAME = “mapname” “mapname” Names the map so that it can be referred to in other Names the map so that it can be referred to in other

codecode

<AREA> attributes<AREA> attributes SHAPE =SHAPE = RECT / CIRCLE / POLYGON RECT / CIRCLE / POLYGON

Specifies the shape of the clickable areaSpecifies the shape of the clickable area We will only use rectanglesWe will only use rectangles SHAPE=“default” indicates the “leftover” SHAPE=“default” indicates the “leftover”

area of the image that was not specified with area of the image that was not specified with other AREA tagsother AREA tags

COORDS =COORDS = “x1, y1, x2, y2” “x1, y1, x2, y2” Specifies the x-y coordinates of the top-left-Specifies the x-y coordinates of the top-left-

hand corner and the bottom-right-hand hand corner and the bottom-right-hand corner of the rectanglecorner of the rectangle

(0,0) is the coordinates of the top-left-hand (0,0) is the coordinates of the top-left-hand corner of the whole image (not necessarily of corner of the whole image (not necessarily of the clickable rectangle)the clickable rectangle)

(x1,y1)

(x2,y2)

Entire image

Clickable area

……<AREA> attributes<AREA> attributes

HREF =HREF = “destination” “destination” Specifies where to go if the particular area is Specifies where to go if the particular area is

clickedclicked

NOREFNOREF Specifies that nothing is to happen when this Specifies that nothing is to happen when this

particular area is clickedparticular area is clicked

How do these all fit together?How do these all fit together?

……

<<MAP NAME= “firstmapMAP NAME= “firstmap” >” >

<<AREAAREA SHAPE = RECT COORDS = “25,50, 100,125” SHAPE = RECT COORDS = “25,50, 100,125”

HREF = “http://www.yahoo.com”>HREF = “http://www.yahoo.com”>

<<AREAAREA SHAPE = RECT COORDS = “200,250, 500, 400” SHAPE = RECT COORDS = “200,250, 500, 400”

HREF = “http://www.google.com”> HREF = “http://www.google.com”>

</MAP</MAP>>

How to get the coordinates?How to get the coordinates?

There are a few ways to get the coordinatesThere are a few ways to get the coordinates

Guess! … trial-and-errorGuess! … trial-and-error

Look at the image in some graphic editing Look at the image in some graphic editing program, it will give you the coordinates when you program, it will give you the coordinates when you move your cursor over the imagemove your cursor over the image

Use the ISMAP attribute to figure it out using only Use the ISMAP attribute to figure it out using only your browser and htmlyour browser and html

Getting the coordinates using Getting the coordinates using ISMAPISMAP

If you use the <A> and <IMG> tags, you can figure If you use the <A> and <IMG> tags, you can figure out the coordinates.out the coordinates.

</A></A> Load an html page with these instructions into NetscapeLoad an html page with these instructions into Netscape The coordinates will appear in the gray bar at the bottom of The coordinates will appear in the gray bar at the bottom of

the browser window as you move your cursor over the the browser window as you move your cursor over the image image

Once you’ve found the coordinates, you can remove this line Once you’ve found the coordinates, you can remove this line of codeof code

Example Image MapExample Image Map<BODY><BODY>

<CENTER> <H1>Cats, Halloween, and Aliens</H1><CENTER> <H1>Cats, Halloween, and Aliens</H1>

</CENTER></CENTER>

<AREA SHAPE=RECT COORDS="100,115, 330,340" <AREA SHAPE=RECT COORDS="100,115, 330,340" HREF="http://www.cathumor.com/">HREF="http://www.cathumor.com/">

<AREA SHAPE=RECT COORDS="130,390,290,555" <AREA SHAPE=RECT COORDS="130,390,290,555" HREF="http://www.jack-o-HREF="http://www.jack-o-

lantern.com/">lantern.com/">

</MAP></MAP>

</BODY></BODY>

http://www.cathumor.com

http://www.jack-o-lantern.com

http://www.seti-inst.edu

HTML FormsHTML Forms

Allow webpages to contain more complex widgets such Allow webpages to contain more complex widgets such as buttons, textboxes, checkboxes, selection lists, radio as buttons, textboxes, checkboxes, selection lists, radio buttons, etc.buttons, etc.

Allows users to enter inputAllows users to enter input

<FORM> tag<FORM> tag The The <FORM><FORM> and and </FORM></FORM> tags are used to define tags are used to define

the beginning and end of a form.the beginning and end of a form. All details of the form are included between these tagsAll details of the form are included between these tags *nothing* will work if you forget the <FORM> tags!!*nothing* will work if you forget the <FORM> tags!!

Attributes of the <FORM> tagAttributes of the <FORM> tag NAME =NAME = “name” “name”

• Gives a way to identify the form so that its elements can be Gives a way to identify the form so that its elements can be accessed within scripts (JavaScript programs)accessed within scripts (JavaScript programs)

ACTION =ACTION = “URL” “URL”• The address of the program that will process the form when The address of the program that will process the form when

submittedsubmitted

• We will not use this attributeWe will not use this attribute

New elements for formsNew elements for forms There are 3 types of html elements that can There are 3 types of html elements that can

*only* be used inside of forms*only* be used inside of forms

<INPUT><INPUT>• Used to specify some type of input mechanismUsed to specify some type of input mechanism

<SELECT><SELECT> and and </SELECT></SELECT>• Creates a selection listCreates a selection list

<TEXTAREA><TEXTAREA> andand </TEXTAREA></TEXTAREA>• Creates a multiple-line text field for inputCreates a multiple-line text field for input• Default value is the enclosed textDefault value is the enclosed text

<INPUT> attributes<INPUT> attributes TYPE =TYPE =

““text” text” Creates a textboxCreates a textbox

““checkbox”checkbox” Creates a checkboxCreates a checkbox

““radio”radio” Creates a radio buttonCreates a radio button

““button”button” Creates a buttonCreates a button

““reset”reset” Creates a reset buttonCreates a reset button

… … <INPUT> attributes<INPUT> attributes

NAME =NAME = “name” “name” Name by which this item can be referencedName by which this item can be referenced Get into the habit of naming everything! It will make life easierGet into the habit of naming everything! It will make life easier

VALUE =VALUE = “string” “string” The default value for the itemThe default value for the item

CHECKEDCHECKED For items of type For items of type radioradio or or checkboxcheckbox only only

SIZE =SIZE = num num The size of a textbox (number of characters)The size of a textbox (number of characters)

Example 1 – textbox and Example 1 – textbox and checkboxcheckbox<BODY><BODY>

<FORM NAME = "firstform"><FORM NAME = "firstform"><CENTER><CENTER><INPUT TYPE = "text" <INPUT TYPE = "text"

NAME = "mytextbox" NAME = "mytextbox"

SIZE = 15>SIZE = 15><BR><BR><INPUT TYPE = "checkbox" <INPUT TYPE = "checkbox"

NAME = "mycheckbox" NAME = "mycheckbox"

VALUE = "hippo" VALUE = "hippo" CHECKED>CHECKED>HippopotamusHippopotamus

Example 2 - radio buttonsExample 2 - radio buttons<BODY><BODY>

<INPUT TYPE = "radio" <INPUT TYPE = "radio"

NAME = "NAME = "myradiobuttonsmyradiobuttons" "

VALUE = “5" > AlligatorsVALUE = “5" > Alligators

NAME = "NAME = "myradiobuttonsmyradiobuttons" "

VALUE = “10" VALUE = “10"

CHECKED> ElephantsCHECKED> Elephants

NAME = "NAME = "myradiobuttonsmyradiobuttons""

VALUE = “4" > MonkeysVALUE = “4" > Monkeys

</FORM></FORM>

</BODY></BODY>

Example 3 – Example 3 – button and checkboxbutton and checkbox

<INPUT TYPE = "button" <INPUT TYPE = "button"

NAME = "button1" NAME = "button1"

VALUE = "Click Me!">VALUE = "Click Me!">

<INPUT TYPE = "checkbox" <INPUT TYPE = "checkbox"

NAME = "check1" > No! Check NAME = "check1" > No! Check Me!Me!

</FORM></FORM>

</BODY></BODY>

<SELECT> boxes<SELECT> boxes

Select boxes are like drop-down menusSelect boxes are like drop-down menus

<SELECT><SELECT> Attributes:Attributes:

NAME =NAME = “name” “name”• Name by which the item can be referencedName by which the item can be referenced

SIZE =SIZE = “num” “num”• The number of options to display at onceThe number of options to display at once• Default is 1Default is 1

MULTIPLEMULTIPLE• Allows more than one option to be selected at onceAllows more than one option to be selected at once

Selects enclose Selects enclose <OPTION> </OPTION><OPTION> </OPTION> elements elements Each “option” in the list gets its own option tagEach “option” in the list gets its own option tag

To have one option automatically selected by default, include To have one option automatically selected by default, include the the SELECTEDSELECTED attribute in the OPTION tag attribute in the OPTION tag

• <OPTION SELECTED> hello world </OPTION><OPTION SELECTED> hello world </OPTION>

Example <SELECT>Example <SELECT><BODY><FORM NAME = "fourthform">

<SELECT NAME = "select1"><OPTION> avocado</OPTION><OPTION> pepperoni </OPTION><OPTION> jello </OPTION>

</SELECT>

<SELECT NAME = "select2" SIZE = 3><OPTION SELECTED> carpet<OPTION> sunshine </OPTION><OPTION> cat </OPTION><OPTION> ice cube </OPTION><OPTION> banana </OPTION>

</SELECT>

</FORM></BODY>

Creates a large text area where the user Creates a large text area where the user may enter textmay enter text

<TEXTAREA><TEXTAREA> Enclose text between the Enclose text between the <TEXTAREA><TEXTAREA> and and

</TEXTAREA></TEXTAREA> tags tags To have an “empty” textarea, you must have the two tags right To have an “empty” textarea, you must have the two tags right

next to each othernext to each other

Attributes:Attributes: NAME =NAME = “name” “name”

• Name by which the item can be referencedName by which the item can be referenced

ROWS =ROWS = number number• Number of lines to displayNumber of lines to display• How tall to make the textareaHow tall to make the textarea

COLS =COLS = number number• Number of characters per line to displayNumber of characters per line to display• How wide to make the textareaHow wide to make the textarea

Example <TEXTAREA>Example <TEXTAREA><BODY><BODY><FORM NAME = "fifthform"><FORM NAME = "fifthform">

<TEXTAREA NAME = "firsttext" ROWS = 4 COLS = 20><TEXTAREA NAME = "firsttext" ROWS = 4 COLS = 20> Once upon a time there Once upon a time there was a friendly little water buffalo named Fred. Fred lived in a pond in the center was a friendly little water buffalo named Fred. Fred lived in a pond in the center of the city because he liked peopleof the city because he liked people

</TEXTAREA></TEXTAREA>

<TEXTAREA NAME = "secondtext" ROWS = 1 COLS = 40><TEXTAREA NAME = "secondtext" ROWS = 1 COLS = 40> Once upon a time Once upon a time there was a friendly little water buffalo named Fred. Fred lived in a pond in the there was a friendly little water buffalo named Fred. Fred lived in a pond in the center of the city because he liked peoplecenter of the city because he liked people

</TEXTAREA></TEXTAREA>

<TEXTAREA NAME = "thirdtext" ROWS = 6 COLS = 30><TEXTAREA NAME = "thirdtext" ROWS = 6 COLS = 30> Once upon a time there Once upon a time there was a friendly little water buffalo named Fred. Fred lived in a pond in the center was a friendly little water buffalo named Fred. Fred lived in a pond in the center of the city because he liked peopleof the city because he liked people

</TEXTAREA></TEXTAREA></FORM></FORM></BODY></BODY>

•You may need to use the “WRAP” attribute to make the text inside the textarea wrap when it reaches the end of the first line… depends on the version of your browser

Corresponding ReadingsCorresponding Readings Little blue bookLittle blue book

" Compact Guide to Web Page Creation & Design" " Compact Guide to Web Page Creation & Design"

HTML ReferencesHTML References RGB Color CodesRGB Color Codes

• http://www.htmlgoodies.com/tutors/colors.htmlhttp://www.htmlgoodies.com/tutors/colors.html• http://www.kenjikojima.com/java/WebPaletteColorPicker2.htmlhttp://www.kenjikojima.com/java/WebPaletteColorPicker2.html

HTML Tag References HTML Tag References • NCSA - A Beginner's Guide to HTML NCSA - A Beginner's Guide to HTML

http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.htmlhttp://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html• Web Monkey HTML Cheat sheet Web Monkey HTML Cheat sheet

http://http://hotwired.lycos.com/webmonkey/reference/html_cheatsheethotwired.lycos.com/webmonkey/reference/html_cheatsheet//• Web Monkey’s TutorialsWeb Monkey’s Tutorials

http://http://hotwired.lycos.com/webmonkey/authoring/html_basicshotwired.lycos.com/webmonkey/authoring/html_basics//• Web Source HTML referenceWeb Source HTML reference

http://www.web-source.net/html_codes_navigator1.htmhttp://www.web-source.net/html_codes_navigator1.htm

Vocabulary/definitionsVocabulary/definitions All tags/elements/attributes discussedAll tags/elements/attributes discussed

Basic formatting, links, tables, lists, imagesBasic formatting, links, tables, lists, images

Be able to write out simple html page Be able to write out simple html page RGB conceptRGB concept Advanced HTMLAdvanced HTML

Forms – know how to create, including all Forms – know how to create, including all input types, selects, and textareasinput types, selects, and textareas

Image maps – understand, won’t have to Image maps – understand, won’t have to write out yourselfwrite out yourself

To Know – Module 4To Know – Module 4

Module 4 HTML. Web Jargon A Web site is a collection of webpages A Homepage is the main entry to...

Documents

Web security (Spoofing & TLS & DNS) Ge Zhang. Web surfing yahoo IP of yahoo? 1.2.3.4 Get index.htm from 1.2.3.4 Response from 1.2.3.4

WWI weapons & inventions firstworldwar/weaponry/index.htm

Management Information System Instructor: Fei Tian Associate Professor Cell: 13705606629 Email: fei.tian.ahu@gmail.comfei.tian.ahu@gmail.com Web: 210.45.208.10/dep/tf/index.htm

Πρόγραμμα «ΔΑΙΔΑΛΟΣ» ein.gr/daidalos/index.htm

index.htm Newsletter No 77. Jan 2007. Editorial Pete

Basado en: //exa.unne.edu.ar/ingenieria/computacion/index.htm Sentencias de control Estructuras

Course web page: ece.gmu/courses/ECE545/index.htm

U.S. Economic Accounts · 2018-07-03 · Home (/index.htm) National (/national/index.htm) International (/internationaVindex.htm)

Http://titus.fkidg1.uni- frankfurt.de/personal/manana/Allgem/index.htm

SOSC 102 U.Lecture Note 2 Sex and Gender sosc102u/index.htm

Sakai Classroom Gateway or apus/online-library/index.htm

Shadow Banking: New Regulatory Issue 1. s/tid_150/index.htm

EL BEI eib/ eib/about/index.htm

Killer Whales By, Gabriella 10/ 2 / 09 whale/index.htm

Silver Hawks Soar to Success! Teacher Web siteTeacher Web site: KMcdonald/index.htm Teacher Web site Grades, Assignment Calendar,

Programming Interest Group comp.hkbu.hk/~chxw/pig/index.htm

Coastal Smart Growth s/index.htm s/index.htm

Patrick Manning Web site · Patrick Manning Web site

Greenhouse Effect and Carbon Footprint. kids.earth.nasa.gov/faq/index.htm

Jim Olsen Western Illinois University wiu/users/mfjro1/wiu/index.htm