Welcome to the fourth lesson of our Web Design for Kids series, HTML Content.
In the lesson right before this, we finally jumped into coding by building the structure of our HTML file with some HTML elements. Now we will be adding our site’s content into this structure.
Remember: The finished files for this lesson can be downloaded here. And if you get stuck with anything, ask questions in the comments area at the very bottom of this page!
Containers, Containers, Containers
We will talk about containers a lot when building a website, so it’s important to understand what they do.
All of our content will need to be placed inside the right kind of HTML containers. The containers are organized with HTML elements. Each element means something special for the browser, helping it understand all the stuff on the page.
Clik here to view.
To think of it another way, in the illustration above the building is containing everything: windows, a door, and a clock. One of the windows is then acting as another container with a Tuts+ Town designer inside.
Adding Content
Now that we have our structure in place we can fill these containers up with content. All the elements we added to our file in the previous lesson helped us get organized–they’ve given us a place to insert our text and images.
Let’s start from the top!
Header
As we talked about, the header is the very top part of a website and has its own element, <header>, which is the first one nested in our body.
<body><header> </header></body>
The header generally contains an introduction and a navigation (a way to find other places in the website) of some kind. Our website has a welcoming heading and a neat image, so let’s add them!
Heading
We need to get “Welcome to Tuts+ Town” on the page, which is the website’s main heading.
There are six different levels of headings for a site; h1 is the most important, h6 is the least important. In HTML the text for headings is written within heading elements: <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>.
“Welcome To Tuts+ Town” is our main heading (it’s very important), so we will type this within the opening and closing tags of an <h1> element.
<header><h1>Welcome To Tuts+ Town</h1></header>
The browser will now recognize this bit of text as our introductory heading.
Town Image
Also in the header we have a lovely image of our town.
Clik here to view.
Within our main “tutstown” folder you need to create another folder, “images”, and save all the images in there.
Images are added with an <img> element. Inside this tag we need to give the image location, or source, like this:
<img src="images/townheader.svg"
See that / after src="images? There we’ve said “look in the images folder / for a file called townheader.svg”.
Then, before we finish the <img> tag we’ll include a description with an alt attribute.
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." />
Attributes are things we can add to elements which help further explain them, or tell them how to work. Only certain attributes work within certain elements. An <img> element will always have a src and an alt attribute.
Important! An <img> element is self-closing. This just means that the opening tag is also the closing tag:
Clik here to view.
Let’s Take A Peek!
At this point we can open our website in the browser to see what we have done so far! Find the “tutstown” folder and double-click on “index.html”. This should open the page in your browser.
Clik here to view.
There’s our website! There’s not much there now, but we are about the change that. From now on, whenever you want to see your changes in the browser, you can save the HTML file and then refresh (using that little circle with an arrow icon at the top) the browser window.
Clik here to view.
Also, you’ll notice that we can’t see our clouds just yet, because we haven’t added the yellow background. We’ll be looking at things like background colors, positioning, and sizing in our next lesson when we dive into CSS.
Main Section
The main section of our website includes the bulk of the information. We’ll contain all the super useful content about our town within this <main> element.
<body><header><h1>Welcome To Tuts+ Town</h1><img src="images/townheader.svg" alt="An illustration of Tuts Town tower." /></header><main> </main></body>
Clik here to view.
Sections
We have three related groups on our website that we will organize into three sections. A section is a standalone piece of a website that contains information and also has its own element: <section>.
Clik here to view.
<main><section> </section><section> </section><section> </section></main>
More Structuring!
Within our sections we have more smaller frames to build, like containers for the small bits of text next to the images.
Let’s do this one section at a time. Each section has a nested image and and an element that contains some text.
Clik here to view.
Let’s take a look at the structure for this before we add the actual content:
<section><img /><div></div></section>
Now, we talked about adding images earlier. This image will be added the same way as our header image, but the file name and description will be different.
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." />
Div
A <div> element is a more general container element. It allows us to group parts of a page when no other element seems to be a good fit.
<div><img /><div><!-- A heading and shop list will be added here --></div></div>
Clik here to view.
The heading and shop list will be contained by this <div>.
Heading
We can see that each section has a small heading: Sleep, Food, and Shop. These tell us about the small lists right below each one. We already used an <h1> for our introduction at the top of the page, so for these we will use <h2>, like this:
<section><img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /><div><h2>Sleep</h2></div></section>
Lists
There are two types of HTML lists, ordered (with numbers) and unordered (with bullet points instead of numbers). They are both really handy ways to list related information and each section of our site contains a short unordered list (<ul>) with two items.
Clik here to view.
Nested within every list are list items. These are the items that make up our list and they are written within <li> tags.
<ul><li></li><li></li></ul>
Links
The lists we just put together are meant to be links to the different shop websites, so our visitors can click on them to get more information. To turn a word (or words) into a clickable link we need to wrap that word within anchor tags. An anchor element looks like this: <a>.
Clik here to view.
Similar to how our <img> element has special attributes, the opening <a> tag will need to contain an attribute that includes the web address of the website we want the user to be sent to, the href attribute.
The following bit of code would give us a link connected to the word “here” that would take the user to http://tutsplus.com/
For more tutorials click <a href="http://tutsplus.com/">here</a>.
This is exactly how we will be adding the links to our list, by wrapping each shop name in an anchor. Both the opening and closing anchor tags will be within the list item, the <li>. The only difference is that because these are not real shops, with real websites, we will be be putting a # for the href value and clicking it will not take us to another website.
Here's a look at the very first shop listed:
<ul><li><a href="#">The Snooze Inn</a></li></ul>
We created an unordered list, nest a list item inside of that list, and then wrapped the shop name in an anchor tag. Keep in mind though that we haven't done any styling yet so for now our preview will show links in a default blue instead of orange.
Section Wrap Up
Once we have one full section complete we will need to repeat these same exact steps for the last two sections. Each time we need to make sure the content changes; the HTML structure will be the same for all three sections, but the text and images will be different.
Now, let’s review the code for all three sections–it’s quite a lot!
<main><section><img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /><div><h2>Sleep</h2><ul><li><a href="#">The Snooze Inn</a></li><li><a href="#">Zzz Hotel</a></li></ul></div></section><section><img src="images/townfood.svg" alt="Illustration of a Tuts Town restaurant." /><div><h2>Food</h2><ul><li><a href="#">Just Cookies</a></li><li><a href="#">Cake Too</a></li></ul></div></section><section><img src="images/townshop.svg" alt="Illustration of a Tuts Town store." /><div><h2>Shop</h2><ul><li><a href="#">Puppy Parade</a></li><li><a href="#">Cool Kittens</a></li></ul></div></section></main>
Footer
A <footer> will be the first element after the closing tag of the <main> element; it will not be nested inside it.
Clik here to view.
We can then add our footer element to the page, which will live on the same level as main because they are both nested within the body.
The only content we have within our footer is a sentence about who made our site (we did!) This content will be wrapped within a <p> (paragraph) element that is nested within the footer.
<footer><p>Created with enthusiasm by caring residents.</p></footer>
Full Preview
Have you been excitedly saving the HTML document and refreshing the browser as we work? Me too! Let’s take a final look before we wrap up:
Clik here to view.
A Look Back at Elements Used
We’ve talked about a lot of different elements here so let’s quickly review the ones we have used in our HTML file:
<html> | Holds all of our HTML |
<head> | Where we put information about the website |
<title> | The title of the website |
<body> | Holds all the page content |
<header> | Holds our welcoming message |
<h1> and <h2> | Our headings |
<img> | Brings an image onto the page |
<main> | For the main content |
<section> | Splits the page into sections |
<div> | A general container |
<ul> | An unordered list of things |
<li> | A list item within a list |
<a> | Used to link somewhere |
<footer> | The bottom content |
Conclusion
In this course we learned all about how to plug content into the super sturdy HTML structure we made with our bare hands (well, and a computer).
Next we will learn how to style this page to make it as pretty and inviting as possible, but also easier to read and use.
See you around town!
Clik here to view.
Image may be NSFW.Clik here to view.
Clik here to view.