Introduction to Introduction to HTMLHTML
Lists, Images, and LinksLists, Images, and Links
Before We BeginBefore We Begin Save another file in NotepadSave another file in Notepad
Open your HTML, then do File>Save AsOpen your HTML, then do File>Save As Make sure your saving in the same placeMake sure your saving in the same place ‘‘Save As Type’ should be ‘All Files’Save As Type’ should be ‘All Files’ In ‘File name’, use the same name but put ‘2’ In ‘File name’, use the same name but put ‘2’
at the end then at the end then ‘.html’‘.html’ Click the Save buttonClick the Save button Remove everything between the <BODY> and Remove everything between the <BODY> and
</BODY> tags</BODY> tags Change the title appropriatelyChange the title appropriately
ListsLists Lists are used to group related pieces Lists are used to group related pieces
of info togetherof info together Makes it clear they are relatedMakes it clear they are related Makes it easier to readMakes it easier to read Can be ordered (numbered) or Can be ordered (numbered) or
unordered (bulleted)unordered (bulleted)
Unordered ListUnordered List Creates a bulleted listCreates a bulleted list Uses one set of <UL></UL> tags Uses one set of <UL></UL> tags
enclosing one or more sets of enclosing one or more sets of <LI></LI> tags<LI></LI> tags
Like this:Like this:<UL><UL>
<LI>Item1</LI><LI>Item1</LI><LI>Item2</LI><LI>Item2</LI>
</UL></UL>
Unordered List ExampleUnordered List Example Put this in the Body of your HTML:Put this in the Body of your HTML:
<h1>Some facts about lists</h1><h1>Some facts about lists</h1>
<ul><ul>
<li>They group things</li><li>They group things</li>
<li>Some have bullets </li><li>Some have bullets </li>
<li>Some have numbers</li><li>Some have numbers</li>
</ul></ul>
1
Ordered ListOrdered List Creates a numbered listCreates a numbered list Uses one set of <OL></OL> tags enclosing Uses one set of <OL></OL> tags enclosing
one or more sets of <LI></LI> tagsone or more sets of <LI></LI> tags Like this:Like this:<OL><OL>
<LI>Item1</LI><LI>Item1</LI>
<LI>Item2</LI><LI>Item2</LI>
</OL></OL>
Ordered ListOrdered List Can also use letters or roman Can also use letters or roman
numerals by using the ‘Type’ attribute numerals by using the ‘Type’ attribute on the <OL> tagon the <OL> tag
Like this Like this <OL TYPE=?><OL TYPE=?> ?=a - lower case letters?=a - lower case letters ?=A - upper case letters?=A - upper case letters ?=?=ii - lower case roman numerals - lower case roman numerals ?=?=II - upper case roman numerals - upper case roman numerals
Ordered List ExampleOrdered List Example Put this after the unordered list:Put this after the unordered list:
<h1>Steps to add a list</h1><h1>Steps to add a list</h1>
<ol><ol>
<li>Type the OL or UL tag</li><li>Type the OL or UL tag</li>
<li>Type the list items </li><li>Type the list items </li>
<li>Type the correct end tag</li><li>Type the correct end tag</li>
</ol></ol>
Next, try out the ‘type’ optionsNext, try out the ‘type’ options2
ImagesImages Used to make your web page more Used to make your web page more
interesting (among other things)interesting (among other things) Use caution when adding imagesUse caution when adding images
Download timesDownload times Not all people may be able to see themNot all people may be able to see them
ImagesImages
Can be any graphic fileCan be any graphic file PicturesPictures DrawingsDrawings ButtonsButtons Etc., etc.Etc., etc.
Can be still or animated (moving)Can be still or animated (moving) Multiple types: jpg, gif, png, etc.Multiple types: jpg, gif, png, etc.
ImagesImages
Using images requires the browser to Using images requires the browser to find a file containing the imagefind a file containing the image
You must provide the filename and You must provide the filename and possibly the file’s location (path)possibly the file’s location (path)
If you don’t provide a location, the If you don’t provide a location, the image file must be in the same folder image file must be in the same folder as the HTML source file as the HTML source file
ImagesImages Displayed using the IMG tagDisplayed using the IMG tag The IMG tag uses the SRC (source) The IMG tag uses the SRC (source)
attribute to tell it the name (always) attribute to tell it the name (always) and location (if necessary) of the and location (if necessary) of the image fileimage file
Like this:Like this:<IMG SRC=“image1.jpg”><IMG SRC=“image1.jpg”>
ImagesImages IMG tag also uses the ALT (alternative) IMG tag also uses the ALT (alternative)
attribute to show text if the picture attribute to show text if the picture can’t displaycan’t display
Like this:Like this:<IMG SRC=“image1.jpg” <IMG SRC=“image1.jpg” ALT=“Picture of some ALT=“Picture of some idiot”>idiot”>
IE will also show it as a tooltipIE will also show it as a tooltip
ImagesImages Other IMG attributesOther IMG attributes
HEIGHT=# (# is number of pixels or %)HEIGHT=# (# is number of pixels or %) WIDTH=#WIDTH=# ALIGN=? – controls images position in ALIGN=? – controls images position in
relation to the text around itrelation to the text around it? can be LEFT, RIGHT? can be LEFT, RIGHT
Images ExampleImages Example First, find and save an image fileFirst, find and save an image file
Go to the Web and find a pictureGo to the Web and find a picture Right-click on it, then ‘Save Picture As’Right-click on it, then ‘Save Picture As’ Change ‘Save In’ location to the same Change ‘Save In’ location to the same
folder where your HTML file isfolder where your HTML file is Change the filename to something short Change the filename to something short
and sweetand sweet Note what’s in ‘Save as type’Note what’s in ‘Save as type’ Click ‘Save’Click ‘Save’
Images ExampleImages Example Put this after the ordered list:Put this after the ordered list:
<h1>Image stuff</h1><h1>Image stuff</h1><IMG SRC=“filename.filetype” <IMG SRC=“filename.filetype” ALT=“my picture”>ALT=“my picture”>
I’m trying out images. This might I’m trying out images. This might be fun – well, sort of.be fun – well, sort of.
‘‘filename’ is what you called itfilename’ is what you called it ‘‘filetype’ is what was in ‘save as type’ filetype’ is what was in ‘save as type’
when you saved itwhen you saved it 3
Images ExampleImages Example Put this after the last image stuff:Put this after the last image stuff:
<h1>More Image stuff</h1><h1>More Image stuff</h1>
<IMG SRC=“filename.filetype” <IMG SRC=“filename.filetype” ALT=“my picture again” HEIGHT=# ALT=“my picture again” HEIGHT=# WIDTH=# ALIGN=???>WIDTH=# ALIGN=???>
Let’s see what happens when I use Let’s see what happens when I use the attributes on the IMG tag.the attributes on the IMG tag.
Enter different values for # and ??? Enter different values for # and ??? and see what happensand see what happens
LinksLinks Main way web pages are connectedMain way web pages are connected Called Anchor linksCalled Anchor links Uses the Anchor tag <A></A> Uses the Anchor tag <A></A> Whatever is between the two tags Whatever is between the two tags
becomes the link on your pagebecomes the link on your page You can link to virtually any fileYou can link to virtually any file
LinksLinks The <A> tag uses the HREF attribute to The <A> tag uses the HREF attribute to
point to the other page/file.point to the other page/file. Like this:Like this:<A HREF=“URL or file”>Text <A HREF=“URL or file”>Text that shows as the link</A>that shows as the link</A>
LinksLinks As with images, links require the browser As with images, links require the browser
to find the page or fileto find the page or file For external web pages, you must provide For external web pages, you must provide
the correct URL (it’s best to include the the correct URL (it’s best to include the whole thing including http://)whole thing including http://)
For local pages and files, you must provide For local pages and files, you must provide the filename and possibly the file’s the filename and possibly the file’s location (path)location (path)
If you don’t provide a location, the If you don’t provide a location, the page/file must be in the same folder as the page/file must be in the same folder as the HTML source file HTML source file
LinksLinks External web page exampleExternal web page example<A HREF=“http://www.yahoo.com”> <A HREF=“http://www.yahoo.com”> Yahoo</A>Yahoo</A>
Local web page exampleLocal web page example<A HREF=“somepage.html”>My <A HREF=“somepage.html”>My Page</A>Page</A>
Local file exampleLocal file example<A HREF=“somefile.doc”>My doc</A><A HREF=“somefile.doc”>My doc</A>
Links Example - ExternalLinks Example - External Put this after the image stuff:Put this after the image stuff:
<BR><BR>
<h1>External link</h1><h1>External link</h1>
<A HREF=“http://www.ajc.com”>Click <A HREF=“http://www.ajc.com”>Click here for the AJC</A>here for the AJC</A>
<BR><BR>
Links Example – Your Other PageLinks Example – Your Other Page
Put this after the external link:Put this after the external link:
<BR><BR>
<h1>Link to my other page</h1><h1>Link to my other page</h1>
<A HREF=“{name of your first <A HREF=“{name of your first page}.html”>Click here for my page}.html”>Click here for my first web page</A>first web page</A>
<BR><BR>
4
Links Example – Your Other PageLinks Example – Your Other Page
Open your first HTML file and add this Open your first HTML file and add this at the bottom:at the bottom:
<BR><BR>
<h1>Link to my other page</h1><h1>Link to my other page</h1>
<A HREF=“{name of your second <A HREF=“{name of your second page}.html”>Click here for my page}.html”>Click here for my second web page</A>second web page</A>
<BR><BR>
LinksLinks Want to create a popup? Use the Want to create a popup? Use the
TARGET=“_blank” attribute to open TARGET=“_blank” attribute to open the linked page in another windowthe linked page in another window
<A HREF=“http://www.yahoo.com” <A HREF=“http://www.yahoo.com” TARGET=“_blank”> Yahoo</A>TARGET=“_blank”> Yahoo</A>
Try it!!Try it!!