Embed Size (px)
Citation preview
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
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
<HTML><HTML><HEAD><HEAD>
<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
<!--<!-- this is a comment this is a comment -->--> 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
<BODY><BODY>
<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
<BODY><BODY>
<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
<BODY><BODY>
<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>
<HR WIDTH=30% SIZE=10 ALIGN = RIGHT><HR WIDTH=30% SIZE=10 ALIGN = RIGHT>
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”
<CENTER> <CENTER>
<P>This is a short paragraph</P><P>This is a short paragraph</P>
</CENTER></CENTER>
<BODY>
<H3>Maurice the Flying Eel </H3>
<CENTER>
<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
<BODY><BODY>
<P> <P> <FONT SIZE=+4><FONT SIZE=+4>
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”
<BODY><BODY>
<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>
<BR><BR>
<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 HREF=“http://www.cs.usask.ca”> <A HREF=“http://www.cs.usask.ca”>
<IMG SRC = “logo.gif”> <IMG SRC = “logo.gif”>
</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>
<IMG SRC="turtle.jpg" BORDER=7 VSPACE=15><IMG SRC="turtle.jpg" BORDER=7 VSPACE=15>
<H3><H3>This is Roy's best friend - EsmereldaThis is Roy's best friend - Esmerelda</H3></H3>
<A HREF = "http://www.cs.usask.ca/classes/100/t1"> <A HREF = "http://www.cs.usask.ca/classes/100/t1"> <IMG SRC = "donkey.jpg" HSPACE=40> <IMG SRC = "donkey.jpg" HSPACE=40>
</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>
</UL>
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>
<TR>
<TD> </TD>
</TR>
</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>
<TR>
<TD>name</TD>
<TD>species</TD>
</TR>
<TR>
<TD>Roy</TD>
<TD>sea turtle</TD>
</TR>
<TR>
<TD>Matilda</TD>
<TD>goat</TD>
</TR>
</TABLE>
Cellpadding = 5Cellspacing = 10
Cellpadding = 0Cellspacing = 10
Cellpadding = 5Cellspacing = 0
<BODY><BODY>
<TABLE BORDER = 3 WIDTH = 100%><TABLE BORDER = 3 WIDTH = 100%>
<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>
<BR><BR>
<TABLE BORDER = 10 WIDTH = 50%><TABLE BORDER = 10 WIDTH = 50%>
<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>
</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
<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 = <TD ROWSPAN = 2>2>MatildaMatilda</TD></TD>
<TD><TD>goatgoat</TD></TD>
</TR></TR>
<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>
<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>
<BR><BR>
<TABLE BORDER = 3 WIDTH = 80%><TABLE BORDER = 3 WIDTH = 80%>
<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 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:
<IMG …. …. USEMAP = “#blah”><IMG …. …. USEMAP = “#blah”><MAP NAME=“blah”><MAP NAME=“blah”>
<AREA ……….><AREA ……….><AREA ……….><AREA ……….>
</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
<MAP NAME = “blah” ><MAP NAME = “blah” >
<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)
(0,0)
(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?
<IMG SRC=“picture.gif” <IMG SRC=“picture.gif” USEMAP=“#firstmapUSEMAP=“#firstmap””>>
……
<<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 HREF=“ ” ISMAP> <A HREF=“ ” ISMAP>
<IMG SRC=“mypicture.gif” ISMAP> <IMG SRC=“mypicture.gif” ISMAP>
</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>
<IMG SRC = "cat.jpg" <IMG SRC = "cat.jpg" USEMAP="#catmap”USEMAP="#catmap” >>
<MAP NAME="catmap"><MAP NAME="catmap">
<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/">
<AREA SHAPE=RECT COORDS="250,15, 390,145" <AREA SHAPE=RECT COORDS="250,15, 390,145" HREF="http://www.seti-inst.edu/">HREF="http://www.seti-inst.edu/">
</MAP></MAP>
</BODY></BODY>
http://www.cathumor.com
http://www.jack-o-lantern.com
http://www.seti-inst.edu
HTML FormsHTML Forms
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
<BR><BR></CENTER></CENTER></FORM></FORM></BODY></BODY>
Example 2 - radio buttonsExample 2 - radio buttons<BODY><BODY>
<FORM NAME = "secondform"><FORM NAME = "secondform">
<BR><BR>
<INPUT TYPE = "radio" <INPUT TYPE = "radio"
NAME = "NAME = "myradiobuttonsmyradiobuttons" "
VALUE = “5" > AlligatorsVALUE = “5" > Alligators
<BR><BR>
<INPUT TYPE = "radio" <INPUT TYPE = "radio"
NAME = "NAME = "myradiobuttonsmyradiobuttons" "
VALUE = “10" VALUE = “10"
CHECKED> ElephantsCHECKED> Elephants
<BR><BR>
<INPUT TYPE = "radio" <INPUT TYPE = "radio"
NAME = "NAME = "myradiobuttonsmyradiobuttons""
VALUE = “4" > MonkeysVALUE = “4" > Monkeys
</FORM></FORM>
</BODY></BODY>
Example 3 – Example 3 – button and checkboxbutton and checkbox
<BODY><BODY>
<FORM NAME = "thirdform"><FORM NAME = "thirdform">
<INPUT TYPE = "button" <INPUT TYPE = "button"
NAME = "button1" NAME = "button1"
VALUE = "Click Me!">VALUE = "Click Me!">
<BR><BR>
<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>
<TEXTAREA><TEXTAREA>
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
