003_html_lesson1: Overview

What the hecksauce is HTML?

Think of HTML as the FOUNDATION of web development.

It's the markup language that holds the web — including all of the website we know and love — together.

[Markup Languages only describe data. They create the structure to be interpreted by web browsers. (Google Chrome, Safari, Firefox, etc)  example: HTML or XML]

Technically, markup languages are not programming languages, but we'll save that for debate class.

Let's divide this lesson into 3 small parts and an example at the end.

 

1.  Another way of thing about HTML is seeing it as the bones of a website.

Really, it's just a type of file that a browser can understand.

All HTML files end in a .html file extension.

example: mypage.html

Here, all of your page's HTML markup will live.

One HTML file corresponds to one web page.

Inside each HTML file, has two main types of content:

A. words that mean things to the browser

B. content (regular, plain old text) to show on your page.

 

2. If you want to show off your web know-how at a party,

HTML stands for HyperText Markup Language.

Besides rocking parties, and identifying fellow web developers, this is useless information and you can proceed to immediately forget it.

 

3. HTML files use elements (or markup tags or HTML tags) to describe what a web page's structure and content looks like.

HTML elements (or tags) are keywords surrounded by angle brackets ( <  > )

(open and closing brackets / aka less than greater than / aka duck and alligator) 

example: <html>

Each keyword means something different to the browser.

 

HTML tags normally come in pairs:

example: <p>This is a paragraph</p>

The first tag is the starting point of the element, the second tag is the end.

A couple of key things to know:

  • closing tags have a '/' forward slash in between the angle

(note to reader: I had to look up the name for /)

  • Not all HTML elements have an opening and closing tag, some just have an opening tag (, but will discuss that later).

Here's your first HTML example file in action:

Don't worry about understanding what it all means, just try to get an overall understanding of what's happening.

 

 

Wooo! You finished your first HTML lesson!

They grow up so fast..

HOMEWORK
LIFEWORK

AS: Type out the HTML code above yourself. (feel free to use Codepen to do so, it's free)

AS: Reflect on the HTML overview of this lesson. Try writing out what you learned in your own words. Can you think of your own analogy for HTML (mine where foundation, structure and bones)

Josh Waggoner