SLIDE 1
HTML SUMMARY
- Describe HTML
- HTML Vocabulary
- Element
- Tag
- Attributes
HTML Week 3.1 - IST 263 Section M005 HTML SUMMARY Describe HTML - - PowerPoint PPT Presentation
HTML Week 3.1 - IST 263 Section M005 HTML SUMMARY Describe HTML - - PowerPoint PPT Presentation
HTML Week 3.1 - IST 263 Section M005 HTML SUMMARY Describe HTML HTML Vocabulary Element Tag Attributes HTML RECAP <!doctype html> < html lang="en"> < head > < title >IST 263 - Week 3, Sample
SLIDE 2
SLIDE 3
HTML RECAP
<!doctype html> <html lang="en"> <head> <title>IST 263 - Week 3, Sample Formatting</title> </head> <body> <p>This page introduces you to HTML formatting elements.</p> <p> When something is <b>important</b> you can markup that in <b>bold</b>. <br><br> There is also the <i>italics</i> markup, and finally the <u>underline</u> tag. </p> <p>When something is extra important you can have <b><i><u>all three</u></i></b>.</p> <p>There are several others for you use</p> </body> </html>
SLIDE 4
HOMEWORK
Questions?
SLIDE 5
HOMEWORK
- File name matters
- Put files in the correct folder
- Testing is crucial
- Receiving aka ‘Pulling’ feedback
SLIDE 6
INDIVIDUAL PROJECT
Did you start thinking about it?
SLIDE 7
NEW TAGS?
SLIDE 8
HTML
- SEO
- Web Crawlers
- HTML5
- Machine to machine communication
SLIDE 9
TODAY, MORE HTML
- Lists
- Hyperlinks or Anchors
- Images
- Tables
SLIDE 10
LISTS
Unordered List Ordered List
<h1>This is my shopping list</h1> <ul> <li>Coffee</li> <li>Oats</li> <li>Milk</li> <li>Maple Syrup</li> </ul>
<h1>This is my shopping list</h1> <ol> <li>Coffee</li> <li>Oats</li> <li>Milk</li> <li>Maple Syrup</li> </ol>
SLIDE 11
TABLES
Year Winner 2016 Patriots 2015 Broncos
SLIDE 12
HTML TABLES
<h1>This is a list of recent Superbowl winners</h1> <table> <thead> <tr> <th>Year</th> <th>Winner</th> </tr> </thead> <tbody> <tr> <td>2016</td> <td>Patriots</td> </tr> <tr> <td>2015</td> <td>Broncos</td> </tr> </tbody> </table>
SLIDE 13
HTML - LINKS
- What are hyperlinks?
- Types
- External links
- Internal links
- Page Anchors
- Attributes
SLIDE 14
HTML LINK/ANCHOR
<a href=“http://google.com” title=“Click to visit Google”> Go to Google </a>
SLIDE 15
MORE LINKS
<a href="http://google.com">Go to Google</a> <a href=“./sample-formatting.html”>Sample - Formatting</a>
Absolute Path Relative Path
SLIDE 16
IMAGES
<img src="./images/google.jpg" alt="Google Logo Thumbnail" width="100">
<img src="./images/google.jpg" alt="Google Logo">
SLIDE 17