Embed Size (px)
Citation preview
HTML
H.T.M.L.
HyperText Markup Langauge
H.T.M.L.
HyperText Markup Langauge
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
v
v
v
v
v
v
v
v
v v v v
v
v
v v
v v
<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
Some HTML Elements
<ul> </ul>
Unordered list
Some HTML Elements
<ul> <li>item A</li> <li>item B</li> </ul>
Unordered list List items
• item A• item B
Some HTML Elements
<ul> <li>item A</li> <li>item B</li> </ul>
Unordered list List items
HTML Tags
<div> </div>
HTML Tags
<div> </div>
Opening tag Closing tag
HTML Tags
<div> </div>
Opening tag Closing tag
<amazing> </amazing>
HTML Tags
<div> </div>
Opening tag Closing tag
<amazing> </amazing>
<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>
HTML Void Elements (No closing tags — exceptions!)
<img src=“cute-animal.jpg” /> <input type=“text” /> <br /> <hr />
HTML Attributes
<a>Take me to Wikipedia!</a>
HTML Attributes
<a>Take me to Wikipedia!</a>
Take me to Wikipedia!
HTML Attributes
<a>Take me to Wikipedia!</a>
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
Take me to Wikipedia!
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
<p>Lorem ipsum dolor sit.</p>
Take me to Wikipedia!
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
<p class=“alert”>Lorem ipsum dolor sit.</p>
Take me to Wikipedia!
HTML Attributes
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
<p class=“alert”>Lorem ipsum dolor sit.</p>
Take me to Wikipedia!
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; }
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; }
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
HTML Review
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
HTML Review
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
Element
HTML Review
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
Opening tag Closing tag
HTML Review
<a href=“http://wikipedia.org”>Take me to Wikipedia!</a>
Attribute
HTML Review
<a href=“http://wikipedia.org” class=“special”>Take me to Wikipedia!</a>
Attributes
