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:
my-first-webpagein 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.)
pwdnow, you should see that you are in your project directory at
$ git init
git pair ___ ___) (skip this if you are working solo).
$ touch my-first-webpage.html.
$ code .(The command
code .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:
my-first-webpage.html is open in your text editor, type the following code (no more copying and pasting!):
<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:
<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
<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:
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
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:
<!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">.)
<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
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):
$ 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)