htmlveryinteractive.net/content/resources/week2-html.pdf · welcome to html!
TRANSCRIPT
![Page 1: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/1.jpg)
HTML
![Page 2: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/2.jpg)
H.T.M.L.
HyperText Markup Langauge
![Page 3: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/3.jpg)
H.T.M.L.
HyperText Markup Langauge
![Page 4: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/4.jpg)
<!DOCTYPE html> <html> <head> <title>Welcome to HTML!</title> </head> <body> <h1>Welcome to my webpage!</h1> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
![Page 5: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/5.jpg)
<!DOCTYPE html> <html> <head> <title>Welcome to HTML!</title> </head> <body> <h1>Welcome to my webpage!</h1> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
![Page 6: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/6.jpg)
<!DOCTYPE html> <html> <head> <title>Welcome to HTML!</title> </head> <body> <h1>Welcome to my webpage!</h1> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
![Page 7: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/7.jpg)
<!DOCTYPE html> <html> <head> <title>Welcome to HTML!</title> </head> <body> <h1>Welcome to my webpage!</h1> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
![Page 8: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/8.jpg)
<!DOCTYPE html> <html> <head> <title>Welcome to HTML!</title> </head> <body> <h1>Welcome to my webpage!</h1> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
![Page 9: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/9.jpg)
<!DOCTYPE html> <html> <head> <title>Welcome to HTML!</title> </head> <body> <h1>Welcome to my webpage!</h1> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
![Page 10: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/10.jpg)
<!DOCTYPE html> <html> <head> <title>Welcome to HTML!</title> </head> <body> <h1>Welcome to my webpage!</h1> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
![Page 11: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/11.jpg)
<!DOCTYPE html> <html> <head> <title>Welcome to HTML!</title> </head> <body> <h1>Welcome to my webpage!</h1> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
![Page 12: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/12.jpg)
![Page 13: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/13.jpg)
![Page 14: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/14.jpg)
![Page 15: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/15.jpg)
v
v
v
v
![Page 16: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/16.jpg)
v
v
v
v
v v v v
v
v
v v
v v
![Page 18: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/18.jpg)
<html> <body> <head> <h1>, <h2>, <h3> <p> <img> <a> <div> <span>
Root of HTML Document Document Body Information about the doc Header Tags Paragraph Tags Image Hyperlink Section in a Document Section in a Document (text)
Some HTML Elements
![Page 19: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/19.jpg)
Some HTML Elements
<ul> </ul>
Unordered list
![Page 20: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/20.jpg)
Some HTML Elements
<ul> <li>item A</li> <li>item B</li> </ul>
Unordered list List items
![Page 21: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/21.jpg)
• item A• item B
Some HTML Elements
<ul> <li>item A</li> <li>item B</li> </ul>
Unordered list List items
![Page 22: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/22.jpg)
HTML Tags
<div> </div>
![Page 23: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/23.jpg)
HTML Tags
<div> </div>
Opening tag Closing tag
![Page 24: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/24.jpg)
HTML Tags
<div> </div>
Opening tag Closing tag
<amazing> </amazing>
![Page 25: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/25.jpg)
HTML Tags
<div> </div>
Opening tag Closing tag
<amazing> </amazing>
![Page 26: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/26.jpg)
<img src=“cute-animal.jpg”> <input type=“text”> <br> <hr>
HTML Void Elements (No closing tags — exceptions!)
![Page 27: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/27.jpg)
<img src=“cute-animal.jpg”> <input type=“text”> <br> <hr>
HTML Void Elements (No closing tags — exceptions!)
<img src=“cute-animal.jpg” /> <input type=“text” /> <br /> <hr />
![Page 28: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/28.jpg)
HTML Attributes
<a>Take me to Wikipedia!</a>
![Page 29: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/29.jpg)
HTML Attributes
<a>Take me to Wikipedia!</a>
Take me to Wikipedia!
![Page 30: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/30.jpg)
HTML Attributes
<a>Take me to Wikipedia!</a>
![Page 31: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/31.jpg)
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
![Page 32: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/32.jpg)
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
![Page 33: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/33.jpg)
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
Take me to Wikipedia!
![Page 34: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/34.jpg)
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
<p>Lorem ipsum dolor sit.</p>
Take me to Wikipedia!
![Page 35: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/35.jpg)
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
<p class=“alert”>Lorem ipsum dolor sit.</p>
Take me to Wikipedia!
![Page 36: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/36.jpg)
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
<p class=“alert”>Lorem ipsum dolor sit.</p>
Take me to Wikipedia!
![Page 37: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/37.jpg)
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
<p class=“alert”>Lorem ipsum dolor sit.</p>
Take me to Wikipedia!
Lorem ipsum dolor sit..alert { font-family: Impact; font-color: red; font-size: 48px; }
![Page 38: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/38.jpg)
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
<p class=“alert”>Lorem ipsum dolor sit.</p>
Take me to Wikipedia!
Lorem ipsum dolor sit..alert { font-family: Impact; font-color: red; font-size: 48px; }
![Page 39: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/39.jpg)
Links: Local vs. Global
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
Take me to Wikipedia!
<a href=“projects/project1”>Project 1</a>
Project 1
![Page 40: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/40.jpg)
HTML Review
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
![Page 41: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/41.jpg)
HTML Review
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
Element
![Page 42: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/42.jpg)
HTML Review
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
Opening tag Closing tag
![Page 43: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/43.jpg)
HTML Review
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
Attribute
![Page 44: HTMLveryinteractive.net/content/resources/week2-html.pdf · Welcome to HTML!](https://reader033.vdocuments.us/reader033/viewer/2022051916/6007788e04d0ef7cc319fda3/html5/thumbnails/44.jpg)
HTML Review
<a href=“http://wikipedia.org” class=“special”>Take me to Wikipedia!</a>
Attributes