In this post, we will create a full-page blog layout.
This is the fifth post and video in a series on learning web development. You may need to check out the first post to learn how to get set up to begin coding:
You may watch the following video or follow along with the expanded transcript that follows.
To begin this lesson, open our project in VSCode.
In the Terminal, type the start command
npm run start to run the project, and then open the index.html file.
Let's copy our
semantic-layout.html file and rename the copy:
Go to the browser and after
/blog-layout.html. It will look the same since we haven't changed any content.
Let's look a preview of where we're headed today:
You'll see we're going to treat the whole page as a single post out of our blog. So, back in VSCode, let's update the
<title> to indicate this is a new page. A common convention is "Page Title (pipe character) Website Name" so we'll update this to:
<title>An Amazing Blog Post | My Website</title>
Next, we'll move our blog title out of the
h2 in the
article into the
h1 inside of the
<header> <h1>An Amazing Blog Post</h1> </header>
For blog posts, some important info visitors want to know is who wrote the article and when. Within the header and following the
h1, we'll add a paragraph tag with the text "By (and you can use your name) (pipe character) Posted on: (and you can pick a date, I'm going with 02/02/2020)"
<header> <h1>An Amazing Blog Post</h1> <p>By Stephanie Eckles | Posted on: 02/02/2020</p> </header>
There's a couple of text formatting tags we can use to distinguish this information using native browser styles. First, we can add italics around words by using the
<em> tag, so let's add
em tags around your name and the date.
<p>By <em>Stephanie Eckles</em> | Posted on: <em>02/02/2020</em></p>
Then save, and take a look at the result.
While this information is important, it's ok to de-emphasize it, so let's also wrap all the content inside of the paragraph tag with the
<p><small>By <em>Stephanie Eckles</em> | Posted on: <em>02/02/2020</em></small></p>
Save, and you'll notice the size has in fact decreased.
An interesting thing about the
small tag is it will decrease relative to the content tag it's in, so if you place it within the
h1 it will be larger than what we see in our paragraph, but smaller than the default
Ok, let's move to the
<article> content. Let's update the first
<h2> to say "Topic Introduction". Reminder that we start with an
h2 because we already have used our single
h1 to identify the page title in the
Just to add more content, let's copy both the
h2 and the
p tags and their content and paste below. Then change the pasted
h2 to say "The Main Topic". Let's copy paste again, but on the new set update the
h2 to be an
h3 and change the
h3 text to "A subtopic to the main one". This is to help you remember that heading tags are hierarchical and should be used sequentially.
<article> <h2>Topic Introduction</h2> <p>Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o. </p> <h2>The Main Topic</h2> <p>Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o. </p> <h3>A subtopic to the main one</h3> <p>Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o. </p> </article>
Following the last
p you have, let's add a new tag:
<blockquote>. This tag can be used to call out a quote, like from a person, book, or other sources, or to emphasize some text from the article. These techniques are mimicking tactics used by newspaper layout designers.
<blockquote> we'll add a
<p> and then our quote - feel free to use your real favorite quote, I'm going to just say "Here's a fabulous thing someone said".
<blockquote> <p>"Here's a fabulous thing someone said."</p> </blockquote>
To semantically attribute this quote, we'll follow the
p tag with a
footer tag - whoa, wait! Don't we already have a footer on the page? We do! But the
footer tag can be included multiple places as it's intent is to be a footer for any sectioning content, and the
blockquote is it's own contained section.
<blockquote> <p>"Here's a fabulous thing someone said."</p> <footer> </footer> </blockquote>
<footer> we'll use the common convention of a
- and then add one more tag for semantics which is
<cite>. Finally, within
cite we'll put the quote author's name - I'm going to say "Someone Awesome".
<blockquote> <p>"Here's a fabulous thing someone said."</p> <footer> - <cite>Someone Awesome</cite> </footer> </blockquote>
Ok, let's save! You'll see the browser indented the
blockquote and also italicized the author's name that is within
cite. So not only are you marking this up semantically, you can see how the markup informed the browser to treat it differently stylistically.
Now, I feel the
article content is running into the
footer so a quick fix we can do is add a border. A way to do that is with a horizontal rule, indicated by an
<hr> self-enclosing tag. Self-enclosing means it has no end tag.
Let's add the
<hr> between the closing
</main> tag and the starting
<footer> tag, then save, and you can see the border line has been added.
</main> <hr> <footer>
The last thing we'll do to wrap up this lesson is add our first image. We're going to add it as the first element within the
Images are included via the
<img> tag. This tag is also self-enclosing, and uses attributes - like we discussed with links - to identify the source file for the image.
The attribute to add the link to an image is
src. Let's source an image from my favorite free service called PlaceCorgi. Add the following value to the
http://placecorgi.com/200x150. The numbers on the end are a method that service provides to indicate the size of image you want to use, where
200 is the width and
150 is the height.
<article> <img src="http://placecorgi.com/200x150"> <h2>Topic Introduction</h2> // ... rest of article content
Save, and check out which cute corgi has been added!
We need to add two more attributes to our
img tag. The first is the
alt attribute which should be a short description of the image. This text will not be visible, but is used by search engines as well as assistive technology used by impaired visitors. I'm going to use the text "Good corgi doggo".
<img src="http://placecorgi.com/200x150" alt="Good corgi doggo">
The last attribute is optional, but let's add the
align attribute with the value of
<img src="http://placecorgi.com/200x150" alt="Good corgi doggo" align="left">
Save, and you'll see that the
img is now positioned to the left of the text content, and the content that is longer than the image is tall has wrapped and continues below and flush with the left of the image. We will refine this appearance when we learn CSS for styling.
Next up in Episode 6: Card HTML Layout