25
Introduction Introduction to HTML to HTML Lists, Images, and Lists, Images, and Links Links

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

Embed Size (px)

Citation preview

Page 1: 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

Introduction to Introduction to HTMLHTML

Lists, Images, and LinksLists, Images, and Links

Page 2: 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

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

Page 3: 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

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)

Page 4: 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

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>

Page 5: 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

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

Page 6: 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

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>

Page 7: 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

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

Page 8: 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

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

Page 9: 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

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

Page 10: 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

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.

Page 11: 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

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

Page 12: 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

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”>

Page 13: 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

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

Page 14: 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

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

Page 15: 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

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’

Page 16: 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

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

Page 17: 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

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

Page 18: 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

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

Page 19: 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

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>

Page 20: 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

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

Page 21: 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

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>

Page 22: 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

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>

Page 23: 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

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

Page 24: 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

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>

Page 25: 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

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!!