Thwacking That First Zombie
Go ahead and open the file content.txt. In it, you’ll find Dr. Boople’s essay, followed by a short bio about him and a list of “Steps to Resisting a Zombie’s Frieeendship.” This is the content you’ll use to build your site. Open index.html. You can do the next part directly in that file, or use Save As to save a copy. Whatever you do though, your main file for the site should be index.html, and we’ll name the second page bio.html. (We’ll add bio.html later on, once we’ve built out the first page. We’ll duplicate and modify index.html to save us some work in smacking the zombies around when we build bio.html.)
Night of the Living Tip:
You can give your files different names if you prefer, but remember the correct file names so you can refer to them consistently and link between the pages.
Headings and Content
The first thing to do in index.html is remove the paragraph from earlier. Still within the body (between the opening and closing body tags), add the following code:
<h1>No, Zombies Are Not Your Friends, and Do Not Believe Them Even If They Say They Are</h1>This will be the heading of your page. Headings in HTML are available in six levels <h1>, <h2>, down to <h6>. h1 is your most important heading, and the largest umbrella/most encompassing title for the content of the page. h2 is the next largest, and so on. h1 is often the name of the website, h2 is often the name of the page, and you’ll start breaking out the content of the page with h3 and h4. h5 and h6 are, like Fred’s Lawn Care Service after the apocalypse, available but rarely needed.
We’re going to add a byline for Dr. Boople. So, add the words “by Dr. Alexander Boople” in a span element.
<span>by Dr. Alexander Boople</span><span> is a generic element that gives us a handle to make changes with CSS. We’ll work with this more when we get to CSS.
Next, copy all of the essay content from content.txt (skip the about and steps content for now) into index.html below the <h1> and before the closing body tag, </body>. Add <p> tags around all the paragraphs. HTML ignores white space, so if you were to save it before adding the <p> tags, the page in the browser would be just one giant blob of text.
Strongly Emphasizing Bold Italics
With paragraphs now set, save the file, and open it in a browser to see what we have thus far. Not very impressive yet, but what we have was all you. High five. If you just high fived your reading device, you’re my kind of awesome, and those zombies don’t stand a chance.
Paragraphs are rarely all that you want to add to text. Often, you’ll want to add bold, italics, and more. These types of elements are called phrase or inline elements because they surround a word or phrase, and text continues as it did before and after the element (block-level elements, like the p element, on the other hand, clear space above and below them). To make something bold, you can use either the b element or the strong element.
<b>a zombie who’s smelled your brains</b>
<strong>a zombie who just ate your brains</strong>Two places in the essay text are marked with asterisks (*) that should be replaced with <b> and/or <strong>, but you can add more where you feel appropriate.
Night of the Living Tip:
Why two elements? The HTML specification started with the b element, but there was concern that the b element did not provide enough semantic information about the content within the element. Thus, they created the strong element to indicate strong emphasis or bolding (“They” being the World Wide Web Consortium who, at the time, oversaw the HTML standard). The strong element was then highly encouraged over the b element. But strong is a lot more characters to type than b, and developers didn’t always adopt the strong element. In HTML5, they gave up and said either was fine. The same goes for the i and em elements, which we’ll discuss next.
The i and em elements italicize text.
I can’t believe I have to say this, but <i>don’t let a zombie kiss you</i>!
And, yes, even if they’re still somehow cute, <em>no kissing zombies</em>!There are two places in the essay marked with underscores (_) that should be replaced with i and em elements, but, again, add more as you feel appropriate.
Links
Links (also called anchors) are how you connect two HTML documents or, more generally, how you connect a file/URL to an HTML document. Links use the a tag (which stands for anchor). They use an href attribute to designate the HTML document or file you’ll be linking to. The text between the opening and closing a tags is the link text. It’s blue and underlined by default. Since we’re planning to have two pages, we’ll need a link to the second page, the bio page, from the main page.
<a href=“bio.html”>Bio</a>However, consistent navigation is important in helping users understand where they are in a site, so rather than just having a link to the bio page, we’ll include a link to the current page as well. This prevents the navigation items from seeming to jump around as your visitors go between pages. (And you’re right, it’s not that big a deal with just two pages, but it becomes important even at three pages so it’s a good habit to get into.)
<a href=“index.html”>Home</a>
<a href=“bio.html”>Bio</a>Go ahead and add the links above to your page above the h1 element. (Since we haven’t added bio.html yet, that link will cause a 404—page not found—error for now, but we’ll add that page soon.)
Lists
Another important and common type of content in HTML is a list. There are two main types of lists in HTML: ordered and unordered. Both use two elements to create the list: an outside element that designates the list and an internal element for each list item. <li>, for list item, is the internal element and is used in both ordered and unordered lists. The outside element for an ordered list is <ol></ol>, and the outside element for unordered lists is <ul></ul>.
Ordered lists, of course, have an order and are numbered (or lettered) accordingly. We’ll use an ordered list on our bio page, but we’ll come back to it once we finish our home/essay page.
Unordered lists use bullets. Since navigation is a list of links, we’ll use an unordered list to structure it (we’ll learn how to remove the bullets when we get to CSS).
An unordered list looks like this:
<h1>Likely places of refuge<h1>
<ul>
<li>Department Store</li>
<li>Mall</li>
<li>Old Man Willoughby's Bomb Shelter from 1947</li>
</ul>Go ahead and wrap each navigation link in an li element, and then wrap both li’s in a ul element.
To Be Continued in Part 4
