1. lists Ordered Unordered

2. List Components  OR  Plus Star Wars Avatar Vacation

3. Practice (10 points)  Create a Web page that renders a Web page that:  Implements the movie list  Has a head and title  Title says “Your Name”  Add a caption above the list “My Favorite Movies”, make the caption be a  Saved as MovieList.htm  Figure out how to print the actual.htm page (source) (hint…Notepad can print)  Hand in resulting actual output and the source (htm) to GA. You can staple the htm and output together

4. Practice:Output  Should look like this:

5. Links -anchors  Components  Anchor (“a”)  Where to send user  What to click on to trigger the new location  eg Send user to Duquesne site when click the word Duquesne: ”Duquesne

6. Links (anchors) Hypertext References: links, and anchors Anchor ( ) element, has an href attribute (aka property)

7. More links

8. link-example JMA260 Index.htm html Simple3.htm We want a link from index.htm to simple3.htm

9. Start/save new page named index.htm My simple site  Save in JMA260 folder (root)on F: (as index.htm )  Copy to Z: JMA260 (root) folder  Test by typing in the long URL (the http://...!!)  Test by clicking on your name in the class schedule page

10. Null links  Look like links  Don’t do anything  Use # as the href value  My Work

11. Example-using and  Download Cozmo (a zip file ) (right-click, Save target as ) from the web site and save in html/images on F:  unzip it into html/Images on your USB device. Be sure you put it into images.  What’s a zip file

12. Image size and img element  right-click on cozmo.jpg and note the height and width . If we don’t specify the size within the img element, the browser has to figure out the size…slows download.

13.  Start a new Notepad session  Save as ListsAndAanchors.htm inside jma260/HTML on your USB device  Copy and paste this code:

14. Cat page Some 260 Stuff Here is a picture of a cat Links to cool stuff: Pittsburgh Weather Google Search

15. result Why the space between lines?

16. end Start digital portfolio Uses links, null, lists, anchors Open html-2-1