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>