Lesson 1 (Part 1)

HTML, which stands for HyperText Markup Language, isn’t a programming language, per se, but it is the language of the Internet. It’s what programmers use to tell web browsers (like Chrome, Firefox, or Safari) how to format webpages.

The basic structure of an HTML document (or a webpage) is as below.

<!DOCTYPE html>
<html>
  <head>
    <title>Page title for the browser title bar or tab</title>
  </head>
  <body>
    <h1>Some stuff that gets displayed</h1>
  </body>
</html>

Notice the words like “<html>”, “<head>”, “<title>”, and “</title>”. These words are called tags and are the page formatting instructions. Tags are recognized by what we call angle brackets (most likely known to you as less than and greater than signs). Most tags come in pairs like “<title>” and “</title>”, or “<head>” and “</head>”.

As you see, there is a section called the “head” and a section called the “body”. In addition to being where we specify the title of our page, like in the example, the head is where we can put information about the page that doesn’t get displayed. During Learn to Code Camp, we’ll talk about some of the many different things that can go in the head of an HTML document.

For this lesson, we’re going to focus on the body. The body is where the content of the page is described. We’ll start by creating an HTML document.

Copy the HTML example above into a new text document titled mydoc.html using either the instructions for Windows or the instructions for Mac OS X.
Find the document you just created (“mydoc.html”) and open it using your web browser (e.g., Internet Explorer, Safari, Firefox, Chrome). This is usually possible by just double-clicking on the file icon.

Your page should look something like this:

Rendering of the basic HTML example

Compare the HTML example to the page in your web browser.

Identify at least two correlations between your HTML file and what you see in your browser.

After you are finished making observations, try making some changes to your HTML file and reloading the page in your browser.

What effects did your changes to your HTML file have? Were they what you expected?

Try several different things. If anything “breaks” or the page doesn’t display, you can always go back to the original and try something else.

When you are finished, you can go on to Part 2.