Of Zombies and Page Skeletons
Next, let’s add some page-wide structural elements (a page’s skeleton). These won’t initially change how the page looks, but they will provide some semantic information about the types of content we’re using; provide spaces for us to add things the page needs, such as a header and a footer; and give us something to hook into when we get to CSS.
Add <nav></nav> around your navigation (the unordered list). This ensures that no other list of links will be mistaken for page navigation and makes our layout a little easier.
Add a <header></header> element around your h1 tag. This signifies, as you’ve probably already guessed, the structural header of the page.
Add a <main></main> element around the essay itself. Do not include the header/h1 in the main element, but do include the span with the author’s name and all the p elements.
Below the main, add a <footer></footer>.
Within footer, add an <hr> element. hr stands for horizontal rule and just draws a line across the screen. It’s used as a separator. It’s also a void element and has no closing tag.
Symbolic Apocalypse
Below the hr, add a paragraph element with the word “copyright,” the current year, and “by Dr. Alexander Cornelius Boople VII.”
While we have the word “copyright” in place, it might seem more official if we used the copyright symbol ©. To do this in HTML, we need to use what’s called an HTML symbol. HTML symbols are how we write characters that aren’t on our keyboards and/or how we make a character show that would otherwise be interpreted as code—for example, the less than (<) and greater than (>) signs. HTML entities are easier-to-remember versions of HTML symbols (symbols are usually just a string of numbers). Entities start with an ampersand (&) and end with a semicolon (;). The copyright symbol is © the less than symbol is < and greater than is >. Because the ampersand is used to signify symbols, we also need a symbol when we want to show an ampersand on the page (i.e., &). If you haven’t already, go ahead and replace the word copyright with the entity and replace the ampersand from the title with its entity.
Night of the Living Tip:
The ampersand in your title may have looked correct without the amp;. Modern browsers are usually smart enough to figure out whether you meant an actual ampersand or the start of a symbol and shows you what it thinks you want accordingly. Though it’s accurate almost all the time, it’s not in all cases, and if you have text running through a content management system or something, it may change the code in a way that confuses the browser. Also, not every user will have the most up-to-date browser, and older browsers may not interpret a stand-alone ampersand correctly. So, for best compatibility, I’d recommend using &, but you might get away without it.
While we haven’t added everything to each page we’re going to use, we’ve got most of it in place. Save your file, and look at it in a web browser (it might look like a zombie without its lipstick, but we’ll fix that shortly).
A Zombie’s Eating Boople’s Bio
Now create a copy of your file. You can do this by using the Save As..: function in your code editor, by right-clicking on the file in your operating system and choosing duplicate (or a similarly titled command), or creating a new file and copying all of index.html into it. Name/rename the duplicate/copy bio.html.
In bio.html, delete the content of the main element so that we can add different content to the page. On bio.html, change the <h1> text to Dr. Alexander Cornelius Boople’s Bio, and paste the biography text from content.txt into the main element. Add paragraph tags around the first paragraph, <h2> tags around Dr. Boople’s Favorite Things and a <span> around the parenthetical. Add a <ul> and <li>s around Boople’s favorite things. Then add an <h2> around the steps title and an <ol> and <li>s around each step. Replace the asterisks with <b> or <strong> elements and the underscores with <i> or <em> elements.
Also add a ™ after the word Frieeendship. The HTML entity for a trademark symbol is ™.
We’ll be adding an image to this page. Find the image boople.png in the starter files and copy it to the same folder as bio.html (if it isn’t already there). The <img> element is a self-closed or void element, which means there’s no closing tag, just an opening tag. This is possible because the two most important things about the <img> element, the image you are going to show and a text description of it are handled through attributes. The src attribute shows the path to the file, and the alt attribute is the text alternative/text description of what the image shows. (It aids the visually impaired in understanding the role the image plays in the website.)
<img src=“boople.png” alt=“Dr. Alistair Boople in a lab coat with neon glasses, neon shirt, and neon coffee cup plus a hairdo that could never be considered dignified”>Place the <img> element just after the first opening paragraph tag in the main. We’ll make this look better when we get to CSS.
We have all our HTML, the structure/skeleton of the page, in place now. Let’s start adding the metaphorical flesh and clothes, the CSS.
To Be Continued in Part 5
