More Related Content
What's hot
What's hot (20)
Similar to WEBD 162 Week 02 LWD4e
Similar to WEBD 162 Week 02 LWD4e (20)
Recently uploaded
Recently uploaded (20)
WEBD 162 Week 02 LWD4e
- 1. WEBD 162 Week 2 Chapter 4 p.49-68 Chapter 5 p.69-74
- 2. Semantic Markup •Choose elements that provide a meaningful description of the content •Choose elements that give the document structure •Elements should not be used for presentation 2
- 3. Example HTML5 Web Page <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title Goes Here</title> </head> <body> ... body text and more HTML5 tags go here ... </body> </html> 3 accessibility displays in tab content
- 4. Block / Inline Elements 4 Block • Begins on a new line • Some space is added on top and bottom Inline • Goes with the flow of the content <p>there is content here</p> <p>there is content <em>here</em></p>
- 5. Two-Sided / Empty Elements 5 Two-Sided • Contain content or html elements • Have opening and closing tag Empty • Do not have text content • Provide a directive to the browser • Opening tag only <p>there is content here</p> <img> <br> <meta> <hr> <img /> <br /> <meta /> <hr />
- 6. HTMLAttributes 6 •Instructions that clarify or modify an element •Go inside the opening tag only <img src=“photo.jpg” alt=“Photo of my dog”> element attribute value attribute value
- 7. Cascading Style Sheets (CSS) 7 •Properties that create the visual display •Go inside the <head> or external file
- 8. W3C Validators • https://validator.w3.org/ • https://validator.w3.org/nu/ • https://jigsaw.w3.org/css-validator/
- 9. Heading Element <h1>Heading Level 1</h1> <h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6> 9
- 10. HTML Lists •Unordered List •Ordered List •Description List formerly called a definition list 10
- 12. Ordered List Example <ol> <li>Apply to school</li> <li>Register for course</li> <li>Pay tuition</li> <li>Attend course</li> </ol> 12
- 13. Type and start attribute •<ol type=“A” start=“10”> <li>Item 1</li> <li>Item 2</li> </ol>
- 14. Description List Useful to display a list of terms or an FAQ list ◦ <dl> </dl> Contains the description list ◦ <dt> </dt> Contains a term/phrase/sentence Configures empty space above and below the text ◦ <dd> </dd> Contains a description of the term/phrase/sentence ◦ Indents the text ◦ Configures empty space above and below the text 14
- 15. Description List Example <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl> 15