Module 1: HTML

Objective: learn HTML, the structure language of webpages.

HTML: let's make websites!
See you next time

HTML: let's make websites!

Coding: what is it? HTML: what is it? Let's discuss.

HTML is simple! HTML is a markup language that uses tags to tell the browser how to display a web page.

HTML works by defining elements, which have predefined roles. Elements begin with a tag name inside < > and end with an identical tag but with a slash before the tag name, like </ >. Everything between the two tags is the element's content.

Here's a simple website (try it yourself in a text editor: save the file as index.html and view the results in a browser, or pop it into Codepen--type it out instead of copying and pasting so it sticks better):

<html>
  <head>
    <title>My website has a title</title>
  </head>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>

Notice how elements are "nested," meaning an element can contain other elements inside of it in addition to text. We can see above that the element defined by the <html> tag is the parent of all other elements, because all other elements' opening and closing tags appear before the final </html> closing tag. <head> is a child of the <html> element which contains additional information about the page. <body> is where all of the page content that the user can view and interact with is defined. You'll mostly be doing coding in the body.

Let's look at a few basic tags.

<h1> means "header 1". There are 6 sizes. Try 'em out!
<ul> and <li> for creating unordered lists
<p> for making paragraphs
<br> for adding line breaks
<a> (anchor) for adding links to other pages
<img> for adding images

Here's an example of how to use these tags:

<html>
  <head>
    <title>My website has a title</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <h3>My favorite foods:</h3>
    <ul>
      <li>Kale</li>
      <li>Pizza</li>
      <li>Romanesco, the most fractal brassica</li>
    </ul>
    <p>
      I was born under a full moon in a log cabin out in the woods...
    </p>
    <p>
      By the way, here's an image of the world's largest rodent, the 
      <a href="https://en.wikipedia.org/wiki/Capybara">capybara</a>:
      <br>
      <img src="https://sitbackandstarve.files.wordpress.com/2016/04/capybara-2.jpg?w=696">
    </p>
  </body>
</html>

A few things to note about the above website:

Whitespace is ignored in HTML--indent two or four spaces when opening a new tag and de-indent when closing, unless the opening and closing tags fit nicely on a line. This helps preserve your sanity when coding and emphasizes the structure of an HTML document, which is basically a bunch of smaller containers inside of larger containers.
Note that the <a> and <img> tags have a little bit of extra information inside of them (href="..." and src="...", respectively). These are called attributes or properties, which modify how the tag works.
<br> and <img> don't have closing tags. I guess there are exceptions to every rule.

You may be wondering: "where's the style/color/background?" Answer: that's the job of CSS, which we'll look at next week.

Cool trick: you can view the source of any webpage. See if you can figure it out for your browser/OS (ask if you can't!). A lot of web pages are very complex (and possibly minified and obfuscated), so don't be intimidated if it looks like a bunch of unreadable garble. Try checking the source on a simpler website, like this one!

That's pretty much HTML in a nutshell! Let's make our first website, the community agreements page, as a class. Keep the agreements positive!

See you next time

Feel free to reach out after class if you have any concerns, suggestions, or comments you'd like to share with me! Onward to Module 2: Make your first website!