Your SlideShare is downloading. ×
Web Design LSC 532: Lecture 11
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Web Design LSC 532: Lecture 11

1,239
views

Published on

Working with Lists, Links and Images

Working with Lists, Links and Images

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,239
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Explain: There are three different types of list... 1. Ordered - The order of list items is important 2. Unordered - The order of list items is not important 3. Definition - To explain the meaning of terms
  • Explain: What tags stand for: <ol> = ordered list <li> = list item Re-iterate that the sequence of the steps in a recipe is important, therefore we use an ordered list
  • Explain: What tags stand for: <ul> = unordered list <li> = list item Re-iterate that there is not sequence to these items, therefore unordered list
  • Explain: What tags stand for: <dl> = definition list <dt> = definition term <dd> = definition description
  • Explain how you can nest lists inside other lists You can do the same for ordered lists to create sub-points
  • Click: Value of the href attribute is highlighted - Explain that this is the 'value' of the href attribute Click: Clickable area is highlighted (what the user sees)
  • Explain: when linking to pages in own site can use shorthand - Relative URLs These links are to pages that are all in the same folder
  • Shows files used for a fictional site (compare to Finder / Windows explorer) Home page, then sections about Movies, Music, and Theater Movies has two sections: Cinema and DVD Note: Folders often referred to as directories on server Click: Root folder - folder that everything else sits inside Click: Child folder Click: Parent folder Click: Granchild folder Click: Grandparent folder Note use of terms similar to those of a family tree
  • Click: highlights the mailto: before email address
  • Click: highlights target="_blank" Note: tell users when link opens in a new window
  • Click: highlights target="_blank" Note: tell users when link opens in a new window
  • Click: highlights target="_blank" Note: tell users when link opens in a new window
  • Transcript

    • 1. LSC 532: Class Session #11Progress Update, Lists, Links and Images Don Stanley 3Rhino Media | UW-Madison 532.3rhinoacademy.com www.lsc.wisc.edu DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 2. Step 1: Visualize DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 3. Step 2: Info Arch DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 4. DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 5. DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 6. HTML STEP 3: Lists
    • 7. ORDERED UNORDERED DEFINITION1. Chop potatoes into quarters • 1kg King Edward potatoes Sashimi2. Simmer in salted water • 100ml milk Sliced raw fish3. Heat milk and butter • 50g salted butter Scale4. Drain potatoes and mash • Freshly grated nutmeg A device used to5. Mix in the milk mixture • Salt and pepper to taste accurately measure weight
    • 8. Ordered Lists (numbered) <ol> <li>Chop potatoes into quarters</li> <li>Simmer in salted water for 15-20 minutes until tender</li> <li>Heat milk, butter and nutmeg</li> <li>Drain potatoes and mash</li> <li>Mix in the milk texture</li> </ol>
    • 9. Unordered Lists (bulleted lists) <ul> <li>1kg King Edward potatoes</li> <li>100ml milk</li> <li>50g salted butter</li> <li>Freshly grated nutmeg</li> <li>Salt and pepper to taste</li> </ul>
    • 10. Definition Lists <dl> <dt>Sashimi</dt> <dd>Sliced raw fish served with condiments.</dd> <dt>Scale</dt> <dd>Device used to measure the weight of ingredients.</dd> <dd>A technique by which the scales are removed from the skin of fish. </dd> </dl>
    • 11. Nested Lists (lists inside of lists) <ul> <li>About Me</li> <li>Portfolio</li> <ul> <li>Writing Samples</li> <li>Design Samples</li> <li>Radio Samples</li> <li>Video Sample</li> </ul> <li>Contact Me</li> </ul>
    • 12. LIST SUMMARY »Ordered Lists use # »Unordered lists use bullets. »Definition lists are used to define terminology. »Lists can be nested DON STANLEY | @3rhinomedia | 3rhinomedia.com
    • 13. HTML STEP 4: Links
    • 14. THE PAGE THE LINK TAKES YOU TO<a href=http://www.empire.com>Empire</a>
    • 15. <a href=”index.html”>Home</a><a href=”about.html”>About</a><a href=”movies.html”>Movies</a><a href=”contact.html”>Contact</a>
    • 16. <a href="mailto:jon@example.org">Email Jon</a>
    • 17. <a href="http://www.imdb.com” target="_blank">IMDB</a> (opens ina new window)
    • 18. • Lists• Links (internal, external and opening in new Window)• Directory Structure• If we have time, we’ll upload.
    • 19. • Take your site map and create HTML documents for each page in your site and link them.• Get ready to upload your sites and review what we’ve covered by using any online resource, the recommended course text or the W3Schools Website.• NEXT TIME: We’ll upload your sites AND work with images. • We’ll also discuss the DIV tag.