Intro to HTML

Learning Objectives

  • Explain the difference between a tag and an element
  • Describe self-closing tags and give an example
  • Embed links and images using appropriate tags
  • Explain purpose of attributes

  • Identify valid HTML structure that includes doctype, head, and body.

What even is HTML?

A skeleton basically

Hypertext Markup Language

Gives structure to your webpage

Parsed and rendered by the browser so we can understand it with our human

eyes

Skeleton. Tree. Same thing?

Tags
Attributes
Structure

Tags are the basic unit of HTML

< tag name>

</ tag name>

Content

< div>

</div>

Yippiyo ipsum crazy shut the shizzle up amizzle, shizzlin dizzle adipiscing i'm in the shizzle. Nullam sapizzle break it down, ghetto volutpizzle, suscipizzle quizzle, gravida vizzle, crunk. Doggy sizzle funky fresh. Sed erizzle. Mammasay mammasa mamma oo sa izzle uhuh ... yih! bizzle you son of a bizzle tempizzle tempizzle. Crazy bow wow wow nibh izzle turpizzle. Fo shizzle izzle tortizzle. Shut the shizzle up eleifend rhoncus nisi. In black habitasse platea dictumst. Dope dapibizzle. 

Real World Example

Oh and this is an element!

Self-Closing Tags

<img>

<input>

<hr>

<link>

<meta>

Embedding links?

Embedding images?

<a href="http://www.google.com"> Google it! </a>
<img src="drake.png" alt="A picture of Drake">

Tags
Attributes
Structure 

<a href="http://www.google.com"> Google it! </a>
<img src="drake.png" alt="A picture of Drake">

key-value pairs

generate content

OR

act as a reference for other tech like CSS or JS

Classes vs IDs

can be used multiple times in the same html page

used only ONCE in your html page

gives you the ability to target the element

Tags
Attributes
Structure

<!DOCTYPE html>
<html>
    <head>
        <title>The title is nested in the head</title>
    </head>
    <body>
        <h1>This header is nested in the body>
        <div>
            <p>This paragraph is nested in the div tag above it, which is itself nested in the body. It's a <em>child</em> of the div.</p>
        </div>
    </body>
</html>

Need help validating your HTML?
There's an app for that!

validator.w3.com

BAD :(

GOOD :)

Learning Objectives

  • Explain the difference between a tag and an element
  • Describe self-closing tags and give an example
  • Embed links and images using appropriate tags
  • Explain purpose of attributes

  • Identify valid HTML structure that includes doctype, head, and body.

Made with Slides.com