Hostwinds Tutorials: How to Build a Basic Blogging Website Without a Site-Building Application Pt. 2

Part 2 of Coding Blog Series

Welcome back to our website-building blog series! In Part 1, we created our blogging website’s homepage and we’ll be adding three web pages with three different hypothetical blog posts on them in Part 2! Here is the entire HTML document we made in Part 1 in addition to a link to Part 1:

HTML DOCUMENT:

IMPORTANT NOTIFICATION: When the chunk of code I insert into these blog posts is too long to fit into the window, a little scroll bar will appear at the very bottom of such code when you hover your mouse over that area. You can slide the scroll bar to the right to view the entire chunk of code. Keep this in mind throughout this blog post as well as Parts 3 of this blog series.

PART 1 LINK:

Hostwinds Tutorials: How to Build a Basic Blogging Website Without a Site-Building Application Pt.1

Oh, and that reminds me…here is another link to a blog post devoted to explaining the HTML tags we’ll be employing during this blog series:

Hostwinds HTML Hype Part 2: Tag Talk

Now, here is the three HTML documents we’ll make in Part 2 (notice they are almost identical):

Blog Post 1 Web Page:

Blog Post 2 Web Page:

Blog Post 3 Web Page:

Notice that the content between the opening and closing <title> tags are “My Blogging Website | Blog 1,” “My Blogging Website | Blog 2,” and “My Blogging Website | Blog 3,” respectively. To review, these will show up on the tab of the window that opens up when your users type your website’s domain name into their internet search bar.

No time to waste! Let’s get going with Step 8 (See Part 1 for steps 1-7): 

 

Steps 8 – 16 of Setting Up Your Blogging Website with HTML

Step 8: Create a new file within the same folder (aka the folder your index.html document lives in) and text editor you are in now (aka the text editor you used to create your index.html document). Name the file “BlogPost1.html.” Then set up the HTML template we employed in part 1 (the template with which you would generally start every HTML document):

Step 9: Add a blog post title (not to be confused with the <title></title> tags, which denote the text shown on the tab on the very top of the window. The blog post title would generally be placed between heading tags), a simple navigation bar, a featured image for the blog post, the text that encompasses the blog post, a horizontal line to separate the blog post content from the footer, and a footer within the <body></body> tags. The cool thing about this is we can just copy and paste a lot of the code from our index.html document.

Step 10: Take a look at the whole HTML document and make sure it looks loverly:

Step 11: Create a new file within the same folder and text editor you are in now. Name the file “BlogPost2.html.” Then set up the HTML template we employed in part 1 (the template with which you would generally start every HTML document):

Step 12: Add a blog post title, simple navigation bar, a featured image for the blog post, the text that encompasses the blog post, a horizontal line to separate the blog post content from the footer, and a footer within the <body></body> tags. Then take a look at the whole HTML document and make sure it looks loverly:

Step 13: Create a new file within the same folder and text editor you are in now. Name the file “BlogPost3.html.” Then set up the HTML template we employed in part 1 (the template with which you would generally start every HTML document):

Step 14: Add a blog post title, a simple navigation bar, a featured image for the blog post, the text that encompasses the blog post, a horizontal line to separate the blog post content from the footer, and a footer within the <body></body> tags. Then take a look at the whole HTML document and make sure it looks loverly:

Step 15: Test out your new blogging website (or the core of it, at least)! Go to your file explorer, right-click the “index.html” file, and click “Open With.” Next, select your preferred internet browser (I recommend Google Chrome). Try clicking the “Read Blog Post” buttons and notice they take you right to their corresponding blog post.

HTML Tutorial: Homepage
Homepage
Blog Post 1 Web Page
Blog Post 1 Web Page

QUICK NOTE: As stated in Part 1 of this blog series, if you are interested in creating a more intricate navigation bar, follow the steps provided by this Hostwinds Knowledge Base guide:

How to Add a Navigation Bar to Your Website

Responsive Web Design

Step 16: Add this line of code within your <head></head> tags of all four HTML documents (including your index.hml document) to help ensure your web pages will all look nice whether they are viewed from a huge computer screen, a tablet, a smartphone, etc.

Now, the HTML documents representing our homepage and 3 web pages will look like this:

1. Homepage

2. Blog Post 1 Web Page

3. Blog Post 2 Web Page

4. Blog Post 3 Web Page

Responsive web design is coding one’s website in a way that makes all the pieces of such site adjust in the right way no matter what device and/or screen size someone is viewing them from. Although we don’t have much time to review many of the components amounting to responsive web design, one of our Front-Line Experts, Abigail, once again is here to rescue us with another of her informative Knowledge Base guides. ABIGAIL TO THE RESCUE! Click below to view Abigail’s guide entitled “How to Make Your Website Mobile Friendly”

How to make your website Mobile Friendly

 

Classes, IDsDivs

One last thing to add to a couple of our HTML documents just to give us a better understanding of classes, IDs, and divs in HTML. As you may recall from the “HTML Hype Part 2: Tag Talk” blog post, classes, IDs, and divs play integral roles in HTML code. You may also recall our discussion regarding the difference between IDs and classes. IDs are used to target individual elements, whereas classes are used to target multiple elements. Our website is very simple at this point, so classes, IDs, and divs aren’t super necessary, however, within more complex HTML documents, all are absolutely vital.

Here’s what we’ll do:

1. We’ll give our website’s viewers the option of clicking a “Read Next Blog Post” link at the bottom of the web pages for blog post 2 and blog post 3 (the web page for blog post 1 will not need a link, as it is the most recent blog post). Let’s create an anchor tag for our “Read Next Blog Post” links between our opening and closing footer tags. Let’s say we’d like the “Read Next Blog Post” link to have more space between its letters than there is space between the “Thank you for visiting this blogging site!” letters within our opening and closing <p> tags in our footer. Let’s also say we’d like the “Thank you for visiting this blogging site!” text to appear beside the “Read Next Blog Post” rather than below it. This is where classes come to the rescue! Instead of targeting the whole <footer> tag in our BlogPost2.html and BlogPost3.html documents, we can give the <a> tags in the footers of both HTML documents a class, then target the <a> tags’ class in CSS. This will make much more sense when we modify our HTML documents with CSS in Part 3 of this blog series.

NOTE: It is important to give our <a> tags for these HTML documents classes in order to distinguish them from the other <a> tags we have throughout all our HTML documents. We will use the same CSS document for all our HTML documents, so our classes will inform the browser as to exactly which links we want to target.

The web pages for blog posts 2 and 3, respectively, will now look like so:

Notice we named the <a> tags’ classes “ReadNext.” Again, we will use these class values when we target the link in CSS. Moving on!

2. In order to get us familiar with IDs, we’ll add one ID to our index.html document. Recall that text we put in the footer of every single one of our web pages saying “Thank you for visiting this blogging site!” We are going to give an ID with a value of “ThankYou” to the <p> tag in the footer of our index.html document only. This will give us the opportunity to make the text in that specific <p> tag in our index.html document different than the <p> tag in the footer of our BlogPost1.html document, the <p> tag in the footer of our BlogPost2.html document, and the <p> tag in the footer of our BlogPost3.html document (and all other <p> tags in every one of our HTML documents, for that matter) when we spruce our website up with CSS. The ID differentiates the <p> tag from all other <p> tags.

The <p> tag nested within the opening and closing <footer> tags in our index.html page will now look like this:

Notice the naming convention for the values “ThankYou” and “ReadNext.” The first letter of the first word and second word are capitalized.  This naming convention is called camel casing.

Blog Post 2 Web Page
Blog Post 2 Web Page
Blog Post 3 Web Page
Blog Post 3 Web Page

3. Onto the <div> tag! We will section off a certain portion of the code in our index.html document to help us understand <div> tags a little better. If you want to modify a bunch of code in CSS, it is very useful to nest all of that code within an opening and closing <div> tag. Let’s say we want to modify the entire chunk of code amounting to our blog post 1 section. In order to do this, we will nest all of it within an opening and closing <div> tag and then give the opening <div> tag.

NOTE: Typically <div> tags require a class or an ID in more complex HTML documents. This is because HTML documents are generally filled with numerous <div> tags and one must differentiate between such <div> tags in some way.  In our case, however, we only have one <div> tag throughout all four of our HTML document. Thus, we can target the <div> itself in our CSS document rather than giving it an ID and targetting the ID. Again, this will make much more sense when we target this entire section of code in CSS.

The chunk of code amounting to our Blog Post 1 section will look like this:

Our Entire Index.html Document:

There is so much more to discuss regarding website-building, however, we must conclude as of right now. This being said, you can use other computer languages to add a comments section to your blogging website, set up your website to automatically generate the date and time your blog posts were published, and much more.

 

Heart of HTML

That was intense…ly awesome! HTML is so cool and fun. So is CSS! CSS is another computer language that makes the website you created via HTML prettier. Speaking of, join us in Part 3 when we add some CSS styling to our HTML documents to customize our web pages a bit. I am excited to reunite with you then!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.