Need help? Chat now!

Hostwinds Blog

Search results for:


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

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

by: Hostwinds Team  /  December 23, 2018


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:

My Blogging Website

Blog Post 1 Title

Here is where you can place a short synopsis of your blog post if you like

Read Blog Post

Thank you for visiting this blogging site!

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 are the three HTML documents we'll make in Part 2 (notice they are almost identical):

Blog Post 1 Web Page:

My Blogging Website | Blog 1

My Blogging Website

Blog Post 1 Title

Here is where you can place all the text you want to add to your blog post for the day.

Thank you for visiting this blogging site!

Blog Post 2 Web Page:

My Blogging Website | Blog 2

Blog Post 2 Title

Here is where you can place all the text you want to add to your blog post for the day.

Read Next Blog Post

Thank you for visiting this blogging site!

Blog Post 3 Web Page:

My Blogging Website | Blog 3

Blog Post 3 Title

Here is where you can place all the text you want to add to your blog post for the day.

Read Next Blog Post

Thank you for visiting this blogging site!

Notice that the content between the opening and closing 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):

<!DOCTYPE html><html> <head> <meta charset="UTF-8">

Step 9: Add a blog post title (not to be confused with the 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 tags. The cool thing about this is we can 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:

My Blogging Website | Blog 1

Blog Post 1 Title

Here is where you can place all the text you want to add to your blog post for the day.

Thank you for visiting this blogging site!

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, 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 tags. Then take a look at the whole HTML document and make sure it looks loverly:

My Blogging Website | Blog 2

Blog Post 2 Title

Here is where you can place all the text you want to add to your blog post for the day.

Thank you for visiting this blogging site!

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 tags. Then take a look at the whole HTML document and make sure it looks loverly:

My Blogging Website | Blog 3

Blog Post 3 Title

Here is where you can place all the text you want to add to your blog post for the day.

Thank you for visiting this blogging site!

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, please 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.

Homepage

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 tags of all four HTML documents (including your index.HTML 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 three web pages will be like this.

My Blogging Website

Blog Post 1 Title

Here is where you can place a short synopsis of your blog post if you like

Read Blog Post

Blog Post 2 Title

Here is where you can place a short synopsis of your blog post if you like

Read Blog Post

Blog Post 3 Title

Here is where you can place a short synopsis of your blog post if you like

Read Blog Post

Thank you for visiting this blogging site!

2. Blog Post 1 Web Page

My Blogging Website | Blog 1

Blog Post 1 Title

Here is where you can place all the text you want to add to your blog post for the day.

Thank you for visiting this blogging site!

3. Blog Post 2 Web Page

My Blogging Website | Blog 2

Blog Post 2 Title

Here is where you can place all the text you want to add to your blog post for the day.

Thank you for visiting this blogging site!

4. Blog Post 3 Web Page

My Blogging Website | Blog 3

Blog Post 3 Title

Here is where you can place all the text you want to add to your blog post for the day.

Thank you for visiting this blogging site!

Responsive web design is coding one's website to make 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 Tutorials. Click below to view Abigail's guide entitled "How to Make Your Website Mobile-Friendly."

How to make your website Mobile Friendly

Classes, IDs & Divs

One last thing to add to a couple of our HTML documents is understanding 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 straightforward, so classes, IDs, and divs aren't 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 two and blog post 3 (the web page for blog post one 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

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

tag in our BlogPost2.html and BlogPost3.html documents, we can give the tags in the footers of both HTML documents a class, then target the 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 tags for these HTML document classes to distinguish them from the other tags we have throughout our HTML documents. We will use the same CSS document for all our HTML documents, so our classes will inform the browser exactly which links we want to target.

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

My Blogging Website | Blog 2

Blog Post 2 Title

Here is where you can place all the text you want to add to your blog post for the day.

Read Next Blog Post

Thank you for visiting this blogging site!

My Blogging Website | Blog 3

Blog Post 3 Title

Here is where you can place all the text you want to add to your blog post for the day.

Read Next Blog Post

Thank you for visiting this blogging site!

Notice we named the tags' classes "ReadNext." Again, we will use these class values when we target the link in CSS—moving on!

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 will give an ID with a value of "ThankYou" to the tag in the footer of our index.html document only. This will allow us to make the text in that specific tag in our index.html document different than the tag in the footer of our BlogPost1.html document, the tag in the footer of our BlogPost2.html document, and the tag in the footer of our BlogPost3.html document (and all other tags in every one of our HTML documents, for that matter) when we spruce our website up with CSS. The ID differentiates the tag from all other tags.

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

Blog Post 2 Web Page

Blog Post 3 Web Page

Onto the tag! We will section off a certain portion of the code in our index.html document to help us understand 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 tag. We want to modify the entire chunk of code amounting to our blog post 1 section. To do this, we will nest all of it within an opening and closing tag and then give the opening tag.

NOTE: Typically, tags require a class or an ID in more complex HTML documents. This is because HTML documents are generally filled with numerous tags, and one must differentiate between such tags in some way. In our case, however, we only have one tag throughout all four of our HTML documents. Thus, we can target 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.

Blog Post 1 Title

Here is where you can place a short synopsis of your blog post if you like

Read Blog Post

Our Entire Index.html Document:

My Blogging Website

My Blogging Website

Blog Post 1 Title

Here is where you can place a short synopsis of your blog post if you like

Read Blog Post

Blog Post 2 Title

Here is where you can place a short synopsis of your blog post if you like

Read Blog Post

Blog Post 3 Title

Here is where you can place a short synopsis of your blog post if you like

Read Blog Post

Thank you for visiting this blogging site!

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 intensely 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!

Written by Hostwinds Team  /  December 23, 2018