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 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 >
HOMEWORK Questions?
HOMEWORK • File name matters • Put files in the correct folder • Testing is crucial • Receiving aka ‘Pulling’ feedback
INDIVIDUAL PROJECT Did you start thinking about it?
NEW TAGS?
HTML • SEO • Web Crawlers • HTML5 • Machine to machine communication
TODAY, MORE HTML • Lists • Hyperlinks or Anchors • Images • Tables
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 > < h1 >This is my shopping list</ h1 > </ ul > < ol > < li >Coffee</ li > < li >Oats</ li > < li >Milk</ li > < li >Maple Syrup</ li > </ ol >
TABLES Year Winner 2016 Patriots 2015 Broncos
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 >
HTML - LINKS • What are hyperlinks? • Types • External links • Internal links • Page Anchors • Attributes
HTML LINK/ANCHOR <a href=“http://google.com” title=“Click to visit Google” > Go to Google </a>
MORE LINKS Absolute Path <a href="http://google.com" > Go to Google </a> Relative Path <a href=“./sample-formatting.html” > Sample - Formatting </a>
IMAGES < img src="./images/google.jpg" alt="Google Logo"> < img src="./images/google.jpg" alt="Google Logo Thumbnail" width="100">
LAB ACTIVITY week-03/labs/readme.txt Code individually in groups of 2
Recommend
More recommend
