Intro to HTML
Objectives
- Write simple HTML documents
- Understand the difference between closing and self closing tags
- Write tags with attributes
- Use MDN as a reference
- Given an image, write the corresponding HTML
History of HTML
- Created in 1989/1990
- Allowed publishing and exchanging of scientific and technical documents
- Allowed electronic linking of documents via hyperlinks
<tagName> Some Content </tagName>The General Rule
<!DOCTYPE html>
<html>
<head>
<!-- Our metadata goes here -->
<title></title>
</head>
<body>
<!-- Our content goes here -->
</body>
</html>Every HTML document we create will start with this boilerplate:
<!-- This is a comment. It doesn't do anything! -->Comments
<h1>I'm a header </h1>
<h2>I'm a slightly smaller header </h2>
<h6>I'm the smallest header </h6>
<p>I'm a paragraph</p>
<button>I'm a button!</button>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
</ol>Common Tags
Closing Tags
<h1>I need a closing tag </h1>
<p>Me too!</p>Self-Closing Tags
<!-- No closing tag or inner text needed -->
<img src="corgi.png">
<link href="style.css">
<!-- Don't worry about what these tags do yet -->
Adding Additional Information To Tags
<img src="corgi.png">
<p class="selected">woof woof</p>
<a href="www.google.com">Click me to go to Google</a>
<link rel="stylesheet" type="text/css" href="style.css">
<tag name="value"></tag>Attributes
Images
<img src="corgi.png">
Links
<a href="www.google.com">Click me to go to Google</a>
<a href="www.reddit.com">Click me to go to Reddit</a>
<a href="url">Link Text</a>