HTML

What is HTML?

Hyper Text Markup Language

Hyper text

“hyper” meaning “above” or “beyond”

Beyond a single text, it is text with the ability to link to other texts.

Markup language

A language, but not quite a programming language

HTML

  • What your web browser understands.

  • A human-readable, text-based, markup language.

  • Originally designed primarily for sharing technical documentation

  • Separates structure of documents from their presentation.

A trivial HTML document

<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>
      hello, world!
    </p>
  </body>
</html>

Looks like this in the browser

Two main components

  • Text

  • Elements

Text

The text that will actually be visible on the web page.

In the previous page, there were two bits of text:

  • Hello which shows up in the name of the browser tab

  • hello, world! which is the actual content of the page.

Elements

Elements define the structure of the page and affect how it is displayed.

They are enclosed in tags.

Tags

Tags are written like <p>. Tags are made up of:

  • A less than sign, called an “open angle bracket” in this context.

  • The name of the tag, p in this case

  • And a greater than sign, called a “close angle bracket”.

Tags themselves are matched

For (almost) every <tag>, called an open tag, there needs to be a matching close tag that looks like </tag>, where tag stands for any tag name.

Back to our HTML document.

<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>
      hello, world!
    </p>
  </body>
</html>

How many elements are there?

Five: html, head, title, body, and p.

Notice how elements are nested

The p element is fully enclosed in the body element which is one of two elements enclosed in the html element.

<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>
      hello, world!
    </p>
  </body>
</html>

HTML is also multi media

  • Can include images, video, etc.

  • Virtually everything you see on the web is HTML.

  • For instance, these slides.

  • And the class website.

Vocabulary

  • element - A part of the structure an HTML page.

  • tags - Markers around HTML elements.

  • text - Visible content of most elements.

  • open tag - Marks the start of an element, e.g. <p>

  • close tag - Marks the end of the element, e.g. </p>

  • angle brackets - What we call < and > when using them in tags.

Reading

HTML basics

Yesterday Today

  • Opened Codespace

  • Re-ran the project

  • Committed a change to git and published to Github

  • Found change on Github

  • Reopen Codespace

  • Re-run the project

  • Make some actual interesting changes to the HTML

  • Commit and sync your changes

  • Make sure the changes are on Github