Introduction to HTML Lists, Images, and Links

Before We Begin Save another file in Notepad Save another file in Notepad Open your HTML, then do File>Save As Open your HTML, then do File>Save As Make sure your saving in the same place Make 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’ at the end then ‘.html’ In ‘File name’, use the same name but put ‘2’ at the end then ‘.html’ Click the Save button Click the Save button Remove everything between the and tags Remove everything between the and tags Change the title appropriately Change the title appropriately

Lists Lists are used to group related pieces of info together Lists are used to group related pieces of info together Makes it clear they are related Makes it clear they are related Makes it easier to read Makes it easier to read Can be ordered (numbered) or unordered (bulleted) Can be ordered (numbered) or unordered (bulleted)

Unordered List Creates a bulleted list Creates a bulleted list Uses one set of tags enclosing one or more sets of tags Uses one set of tags enclosing one or more sets of tags Like this: Like this:<UL><LI>Item1</LI><LI>Item2</LI></UL>

Unordered List Example Put this in the Body of your HTML: Put this in the Body of your HTML: Some facts about lists Some facts about lists <ul> They group things They group things Some have bullets Some have bullets Some have numbers Some have numbers </ul> 1

Ordered List Creates a numbered list Creates a numbered list Uses one set of tags enclosing one or more sets of tags Uses one set of tags enclosing one or more sets of tags Like this: Like this:<OL><LI>Item1</LI><LI>Item2</LI></OL>

Ordered List Can also use letters or roman numerals by using the ‘Type’ attribute on the tag Can also use letters or roman numerals by using the ‘Type’ attribute on the tag Like this Like this ?=a - lower case letters ?=a - lower case letters ?=A - upper case letters ?=A - upper case letters ?= i - lower case roman numerals ?= i - lower case roman numerals ?= I - upper case roman numerals ?= I - upper case roman numerals

Ordered List Example Put this after the unordered list: Put this after the unordered list: Steps to add a list Steps to add a list <ol> Type the OL or UL tag Type the OL or UL tag Type the list items Type the list items Type the correct end tag Type the correct end tag </ol> Next, try out the ‘type’ options Next, try out the ‘type’ options 2

Images Used to make your web page more interesting (among other things) Used to make your web page more interesting (among other things) Use caution when adding images Use caution when adding images Download times Download times Not all people may be able to see them Not all people may be able to see them

Images Can be any graphic file Can be any graphic file Pictures Pictures Drawings Drawings Buttons Buttons 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.

Images Using images requires the browser to find a file containing the image Using images requires the browser to find a file containing the image You must provide the filename and possibly the file’s location (path) You must provide the filename and possibly the file’s location (path) If you don’t provide a location, the image file must be in the same folder as the HTML source file If you don’t provide a location, the image file must be in the same folder as the HTML source file

Images Displayed using the IMG tag Displayed using the IMG tag The IMG tag uses the SRC (source) attribute to tell it the name (always) and location (if necessary) of the image file The IMG tag uses the SRC (source) attribute to tell it the name (always) and location (if necessary) of the image file Like this: Like this:

Images IMG tag also uses the ALT (alternative) attribute to show text if the picture can’t display IMG tag also uses the ALT (alternative) attribute to show text if the picture can’t display Like this: Like this: IE will also show it as a tooltip IE will also show it as a tooltip

Images Other IMG attributes Other IMG attributes HEIGHT=# (# is number of pixels or %) HEIGHT=# (# is number of pixels or %) WIDTH=# WIDTH=# ALIGN=? – controls images position in relation to the text around it ALIGN=? – controls images position in relation to the text around it ? can be LEFT, RIGHT ? can be LEFT, RIGHT

Images Example First, find and save an image file First, find and save an image file Go to the Web and find a picture Go 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 folder where your HTML file is Change ‘Save In’ location to the same folder where your HTML file is Change the filename to something short and sweet Change the filename to something short and sweet Note what’s in ‘Save as type’ Note what’s in ‘Save as type’ Click ‘Save’ Click ‘Save’

Images Example Put this after the ordered list: Put this after the ordered list: Image stuff Image stuff I’m trying out images. This might be fun – well, sort of. ‘filename’ is what you called it ‘filename’ is what you called it ‘filetype’ is what was in ‘save as type’ when you saved it ‘filetype’ is what was in ‘save as type’ when you saved it 3

Images Example Put this after the last image stuff: Put this after the last image stuff: More Image stuff More Image stuff Let’s see what happens when I use the attributes on the IMG tag. Enter different values for # and ??? and see what happens Enter different values for # and ??? and see what happens

Links Main way web pages are connected Main way web pages are connected Called Anchor links Called Anchor links Uses the Anchor tag Uses the Anchor tag Whatever is between the two tags becomes the link on your page Whatever is between the two tags becomes the link on your page You can link to virtually any file You can link to virtually any file

Links The tag uses the HREF attribute to point to the other page/file. The tag uses the HREF attribute to point to the other page/file. Like this: Like this: Text that shows as the link Text that shows as the link

Links As with images, links require the browser to find the page or file As with images, links require the browser to find the page or file For external web pages, you must provide the correct URL (it’s best to include the whole thing including For external web pages, you must provide the correct URL (it’s best to include the whole thing including For local pages and files, you must provide the filename and possibly the file’s location (path) For local pages and files, you must provide the filename and possibly the file’s location (path) If you don’t provide a location, the page/file must be in the same folder as the HTML source file If you don’t provide a location, the page/file must be in the same folder as the HTML source file

Links External web page example External web page example Yahoo Yahoo Local web page example Local web page example My Page My Page Local file example Local file example My doc My doc

Links Example - External Put this after the image stuff: Put this after the image stuff:<BR> External link External link Click here for the AJC Click here for the AJC <BR>

Links Example – Your Other Page Put this after the external link: Put this after the external link:<BR> Link to my other page Link to my other page Click here for my first web page Click here for my first web page <BR> 4

Links Example – Your Other Page Open your first HTML file and add this at the bottom: Open your first HTML file and add this at the bottom:<BR> Link to my other page Link to my other page Click here for my second web page Click here for my second web page <BR>

Links Want to create a popup? Use the TARGET=“_blank” attribute to open the linked page in another window Want to create a popup? Use the TARGET=“_blank” attribute to open the linked page in another window Yahoo Yahoo Try it!! Try it!!