Lesson Monday

We're going to start our HTML writing by working with block elements. These are HTML elements that when displayed start on a line of their own, in effect making a block on the page.

Let's create a project directory and initialize a Git repository for a new project called my-first-webpage.

As a review, here are the steps:

  • Open Terminal
  • Make a project directory called my-first-webpage in your Desktop directory. (It is important that when you begin a new project you create a new project folder that is not nested inside of an existing project folder.)
  • Change into your project directory.
  • If you type pwd now, you should see that you are in your project directory at /Users/Guest/Desktop/my-first-webpage.
  • Within your project directory, initialize your git repository: $ git init
  • Add the authors of the project (git pair ___ ___) (skip this if you are working solo).
  • Create an empty file: $ touch my-first-webpage.html.
  • Open your project directory in Atom: $ atom . (The command atom . opens the whole directory you are currently in because the . refers to current directory. If you only want to open the single file, you could instead type: atom my-first-webpage.html).

With my-first-webpage.html open in Atom, let's start by typing the following code (no more copying and pasting!):

my-first-webpage.html
<p>This is my first web page!</p>
<p>Isn't it nice?</p>

The instructions for formatting around the text are called tags. The <p> is called a p tag. It means that everything that follows is a paragraph, until </p> is reached. The </p> is called a closing tag or end tag and indicates the paragraph is at its end. The <p> is a block element because it is written on its own line and creates a block of content on the displayed page.

Now, if we open the file in a web browser, we have two paragraphs of text. We just wrote our first HTML code! Let's commit it!

$ git add my-first-webpage.html
$ git-pair-commit -m "add initial paragraph block elements to the page"

Let's try some more tags:

my-first-webpage.html
<h1>My first web page</h1>
<h2>Written with the guidance of Epicodus</h2>

<p>This is my first web page!</p>
<p>Isn't it nice?</p>

Here, we've added a main header (<h1>) and a subheader (<h2>). You can actually add up to six different levels of headers using <h1> through <h6>. Like the paragraph tags, we have an opening tag that indicates where the header begins (<h1>) and a closing tag that indicates where it ends (</h1>) . Closing tags always match the header but have a backslash in front.

HTML ignores empty spaces and blank lines, which is called whitespace. That's why the extra line we might add between our headers and paragraphs doesn't do anything when it is displayed. We could take it out, or make it three spaces, and it would look exactly the same in the browser.

Let's commit again!

$ git add my-first-webpage.html
$ git-pair-commit -m "add header block elements"

Let's keep going with some list elements:

my-first-webpage.html
<h1>My first web page</h1>
<h2>Written with the guidance of Epicodus</h2>

<p>This is my first web page!</p>
<p>Isn't it nice?</p>

<p>Here are some things I'm going to learn about coding:</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>And a lot more!</li>
</ul>

Here we've added an unordered list (<ul>) with four list items (<li>). If we wanted to make an ordered list that uses numbers and letters instead of bullets, we would use an <ol> tag instead of a <ul>.

Notice how I've indented the <li>s within the <ul>s. This makes it much easier to read which tags are nested, and makes it easy to see where the closing tag goes when it's not on the same line. It's a good practice to indent using two spaces (tabs are often rendered as different widths, whereas spaces are standard). It's also a good idea to write your closing tag just after you write your opening tag, and then go back and fill in whatever comes in the middle. This way, you won't forget to close a tag after you've opened it.

Let's commit again!

$ git add my-first-webpage.html
$ git-pair-commit -m "add list elements"

We have some final additions to make for this to be a valid HTML web page:

my-first-webpage.html
<!DOCTYPE html>
<html>
  <head>
    <title>Web page #1!</title>
  </head>
  <body>
    <h1>My first web page</h1>
    <h2>Written with the guidance of Epicodus</h2>

    <p>This is my first web page!</p>
    <p>Isn't it nice?</p>

    <p>Here are some things I'm going to learn about coding:</p>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>And a lot more!</li>
    </ul>
  </body>
</html>

The <!DOCTYPE html> tag tells the browser that this document contains HTML, and specifically that it contains the newest version of HTML, HTML5. (An example of a doctype for an older version of HTML is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.)

The <head> tag contains information about the page, which for now is just the <title> tag. The <title> tag sets the title for the web page - if you look in your browser, you can see that the title of the browser tab is now Web page #1!.

Finally, the actual content of the page is now wrapped in a <body> tag.

Now go ahead and commit your final changes:

$ git add my-first-webpage.html
$ git-pair-commit -m "add final, official HTML elements DOCTYPE, head, title, body"

We're done for the moment. It's a good time to push the project to GitHub. As a reminder, here are the steps (which should be done by both you and your pair, since you each want a copy of the repository on your GitHub):

  • Create my-first-webpage repository on GitHub
  • $ git remote add [remote nickname] [remote url] (replacing [remote nickname] with your initials or another good nickname and [remote url] with the URL to the GitHub repository you just created)
  • $ git push [remote nickname] master (replacing [remote nickname] with the same nickname you used when you added the remote link)
  • Check on GitHub that your code uploaded successfully

Terminology


  • Block elements: HTML elements that create a "block" in the display by appearing on their own line.

  • Tags: HTML annotations which indicate how the text should be formatted.

  • P tag: An HTML tag that indicates text should be formatted in a paragraph.

  • Opening tag: An HTML tag that appears before the text that will be formatted in an HTML document. For example, the <p> in <p> This is a paragraph. </p> is the opening tag.

  • Closing tag: An HTML tag that appears after the text that is formatted. It matches the opening tag but begins with a /. For example, the </p> in <p> This is a paragraph. </p> is the closing tag.

  • End tag: An alternative name for a closing tag.

  • Header: An HTML tag to indicate the text being formatted is a header. There are 6 sizes of HTML headers <h1> through <h6>.

  • Whitespace: All of the "empty" space that includes spaces, indentation, blank lines, etc.

  • Unordered list: A list of items that are designated with bullet points.

  • Ordered list: A list of items designated with numbers.

  • List item: An item in an ordered or unordered list.

HTML block Element Tags


  • <head>: Head

  • <body>: Body

  • <p>: Paragraph

  • <ul>: Unordered list

  • <li>: List item (must exist within a set of <ul> or <ol> tags)

  • <ol>: Ordered list

  • <h1> through <h6>: Headings

  • <title>: Title

Example


my-first-webpage.html
<!DOCTYPE html>
<html>
  <head>
    <title>Web page #1!</title>
  </head>
  <body>
    <h1>My first web page</h1>
    <h2>Written with the guidance of Epicodus</h2>

    <p>This is my first web page!</p>
    <p>Isn't it nice?</p>

    <p>Here are some things I'm going to learn about coding:</p>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>And a lot more!</li>
    </ul>
  </body>
</html>