SlideShare a Scribd company logo
1 of 27
LSC 532: Class Session #11
Progress Update, Lists, Links and Images



                Don Stanley
                3Rhino Media | UW-Madison
                532.3rhinoacademy.com
                www.lsc.wisc.edu




                                    DON STANLEY | @3rhinomedia | 3rhinomedia.com
Step 1: Visualize




          DON STANLEY | @3rhinomedia | 3rhinomedia.com
Step 2: Info Arch




         DON STANLEY | @3rhinomedia | 3rhinomedia.com
DON STANLEY | @3rhinomedia | 3rhinomedia.com
DON STANLEY | @3rhinomedia | 3rhinomedia.com
HTML STEP 3:
   Lists
ORDERED                          UNORDERED                    DEFINITION


1. Chop potatoes into quarters   • 1kg King Edward potatoes   Sashimi
2. Simmer in salted water        • 100ml milk                   Sliced raw fish
3. Heat milk and butter          • 50g salted butter          Scale
4. Drain potatoes and mash       • Freshly grated nutmeg        A device used to
5. Mix in the milk mixture       • Salt and pepper to taste     accurately measure weight
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>
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>
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>
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>
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
HTML STEP 4:
   Links
THE PAGE THE LINK TAKES
            YOU TO


<a href=http://www.empire.com>Empire</a>
<a href=”index.html”>Home</a>

<a href=”about.html”>About</a>

<a href=”movies.html”>Movies</a>

<a href=”contact.html”>Contact</a>
<a href="mailto:jon@example.org">Email Jon</a>
<a href="http://www.imdb.com” target="_blank">IMDB</a> (opens in
a new window)
•   Lists
•   Links (internal, external and opening in new Window)
•   Directory Structure
•   If we have time, we’ll upload.
• 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.

More Related Content

Similar to Web Design LSC 532: Lecture 11 (9)

Web Information Systems Lecture 2: HTML
Web Information Systems Lecture 2: HTMLWeb Information Systems Lecture 2: HTML
Web Information Systems Lecture 2: HTML
 
Class 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTMLClass 10 Learning about Planning and More HTML
Class 10 Learning about Planning and More HTML
 
Creating lists
Creating listsCreating lists
Creating lists
 
Web forms and html (lect 3)
Web forms and html (lect 3)Web forms and html (lect 3)
Web forms and html (lect 3)
 
Ordered lists
Ordered listsOrdered lists
Ordered lists
 
Html introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niaz
 
Web topic 8 listings in html
Web topic 8  listings in htmlWeb topic 8  listings in html
Web topic 8 listings in html
 
Printable Lined Paper Landscape - Printable World Holiday
Printable Lined Paper Landscape - Printable World HolidayPrintable Lined Paper Landscape - Printable World Holiday
Printable Lined Paper Landscape - Printable World Holiday
 
Lecture 4 html lists
Lecture 4   html listsLecture 4   html lists
Lecture 4 html lists
 

More from Don Stanley

Don Stanley's LSC 432 s14 Intro to G+ and comment Posses
Don Stanley's LSC 432 s14 Intro to G+ and comment PossesDon Stanley's LSC 432 s14 Intro to G+ and comment Posses
Don Stanley's LSC 432 s14 Intro to G+ and comment Posses
Don Stanley
 
432 s14 lecture 2
432 s14 lecture 2432 s14 lecture 2
432 s14 lecture 2
Don Stanley
 
Lsc 532 s13 lecture 12 html images and uploading
Lsc 532 s13 lecture 12   html images and uploadingLsc 532 s13 lecture 12   html images and uploading
Lsc 532 s13 lecture 12 html images and uploading
Don Stanley
 
Web Design Core Concepts
Web Design Core ConceptsWeb Design Core Concepts
Web Design Core Concepts
Don Stanley
 
Don Stanley's LSC 440 lecture 20
Don Stanley's LSC 440 lecture 20Don Stanley's LSC 440 lecture 20
Don Stanley's LSC 440 lecture 20
Don Stanley
 
Don Stanley's, Lsc 440 lecture 5 Fall 2012
Don Stanley's, Lsc 440 lecture 5 Fall 2012Don Stanley's, Lsc 440 lecture 5 Fall 2012
Don Stanley's, Lsc 440 lecture 5 Fall 2012
Don Stanley
 

More from Don Stanley (20)

Talk 1: Butter Braid Pastries Dealer Conference: What you need to know about ...
Talk 1: Butter Braid Pastries Dealer Conference: What you need to know about ...Talk 1: Butter Braid Pastries Dealer Conference: What you need to know about ...
Talk 1: Butter Braid Pastries Dealer Conference: What you need to know about ...
 
Slide Deck for My Intro to Visual Design Course
Slide Deck for My Intro to Visual Design CourseSlide Deck for My Intro to Visual Design Course
Slide Deck for My Intro to Visual Design Course
 
Business Blogging and Content Marketing 101
Business Blogging and Content Marketing 101 Business Blogging and Content Marketing 101
Business Blogging and Content Marketing 101
 
Don Stanley's LSC 432 s14 Intro to G+ and comment Posses
Don Stanley's LSC 432 s14 Intro to G+ and comment PossesDon Stanley's LSC 432 s14 Intro to G+ and comment Posses
Don Stanley's LSC 432 s14 Intro to G+ and comment Posses
 
Don Stanley's Social Media LSC 432 lecture 3
Don Stanley's Social Media LSC 432 lecture 3Don Stanley's Social Media LSC 432 lecture 3
Don Stanley's Social Media LSC 432 lecture 3
 
432 s14 lecture 2
432 s14 lecture 2432 s14 lecture 2
432 s14 lecture 2
 
LECTURE 2: Don Stanley's Design Class LSC 332 @UW Madison
LECTURE 2: Don Stanley's Design Class LSC 332 @UW MadisonLECTURE 2: Don Stanley's Design Class LSC 332 @UW Madison
LECTURE 2: Don Stanley's Design Class LSC 332 @UW Madison
 
What is inbound marketing for cisco & cci
What is inbound marketing for cisco & cciWhat is inbound marketing for cisco & cci
What is inbound marketing for cisco & cci
 
Using Social Media for Emergency Agencies
Using Social Media for Emergency AgenciesUsing Social Media for Emergency Agencies
Using Social Media for Emergency Agencies
 
Lsc 532 s13 lecture 12 html images and uploading
Lsc 532 s13 lecture 12   html images and uploadingLsc 532 s13 lecture 12   html images and uploading
Lsc 532 s13 lecture 12 html images and uploading
 
Don Stanley's Social Media Marketing Class 9
Don Stanley's Social Media Marketing Class 9Don Stanley's Social Media Marketing Class 9
Don Stanley's Social Media Marketing Class 9
 
Web Design Core Concepts
Web Design Core ConceptsWeb Design Core Concepts
Web Design Core Concepts
 
Social and Digital Media for Wisconsin Counties Association
Social and Digital Media for Wisconsin Counties AssociationSocial and Digital Media for Wisconsin Counties Association
Social and Digital Media for Wisconsin Counties Association
 
Social Media Marketing/Personal Branding Class 3
Social Media Marketing/Personal Branding Class 3Social Media Marketing/Personal Branding Class 3
Social Media Marketing/Personal Branding Class 3
 
Web/Digital Design LSC 532 with Don Stanley
Web/Digital Design LSC 532 with Don StanleyWeb/Digital Design LSC 532 with Don Stanley
Web/Digital Design LSC 532 with Don Stanley
 
Social Media Marketing / Personal Branding Lecture 2
Social Media Marketing / Personal Branding Lecture 2Social Media Marketing / Personal Branding Lecture 2
Social Media Marketing / Personal Branding Lecture 2
 
Interface Design Concepts and Planning: 532 lecture 2
Interface Design Concepts and Planning: 532 lecture 2Interface Design Concepts and Planning: 532 lecture 2
Interface Design Concepts and Planning: 532 lecture 2
 
Social Media for Sauk County Government
Social Media for Sauk County GovernmentSocial Media for Sauk County Government
Social Media for Sauk County Government
 
Don Stanley's LSC 440 lecture 20
Don Stanley's LSC 440 lecture 20Don Stanley's LSC 440 lecture 20
Don Stanley's LSC 440 lecture 20
 
Don Stanley's, Lsc 440 lecture 5 Fall 2012
Don Stanley's, Lsc 440 lecture 5 Fall 2012Don Stanley's, Lsc 440 lecture 5 Fall 2012
Don Stanley's, Lsc 440 lecture 5 Fall 2012
 

Recently uploaded

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 

Recently uploaded (20)

Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 

Web Design LSC 532: Lecture 11

  • 1. LSC 532: Class Session #11 Progress 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 DEFINITION 1. Chop potatoes into quarters • 1kg King Edward potatoes Sashimi 2. Simmer in salted water • 100ml milk Sliced raw fish 3. Heat milk and butter • 50g salted butter Scale 4. Drain potatoes and mash • Freshly grated nutmeg A device used to 5. 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.
  • 10. 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>
  • 11.
  • 12. 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>
  • 13.
  • 14. 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>
  • 15.
  • 16. 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
  • 17. HTML STEP 4: Links
  • 18. THE PAGE THE LINK TAKES YOU TO <a href=http://www.empire.com>Empire</a>
  • 19.
  • 20. <a href=”index.html”>Home</a> <a href=”about.html”>About</a> <a href=”movies.html”>Movies</a> <a href=”contact.html”>Contact</a>
  • 21.
  • 22.
  • 24.
  • 26. Lists • Links (internal, external and opening in new Window) • Directory Structure • If we have time, we’ll upload.
  • 27. • 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.

Editor's Notes

  1. 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
  2. Explain: What tags stand for: &lt;ol&gt; = ordered list &lt;li&gt; = list item Re-iterate that the sequence of the steps in a recipe is important, therefore we use an ordered list
  3. Explain: What tags stand for: &lt;ul&gt; = unordered list &lt;li&gt; = list item Re-iterate that there is not sequence to these items, therefore unordered list
  4. Explain: What tags stand for: &lt;dl&gt; = definition list &lt;dt&gt; = definition term &lt;dd&gt; = definition description
  5. Explain how you can nest lists inside other lists You can do the same for ordered lists to create sub-points
  6. Click: Value of the href attribute is highlighted - Explain that this is the &apos;value&apos; of the href attribute Click: Clickable area is highlighted (what the user sees)
  7. 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
  8. 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
  9. Click: highlights the mailto: before email address
  10. Click: highlights target=&quot;_blank&quot; Note: tell users when link opens in a new window
  11. Click: highlights target=&quot;_blank&quot; Note: tell users when link opens in a new window
  12. Click: highlights target=&quot;_blank&quot; Note: tell users when link opens in a new window