Hostwinds Blog

Search results for:


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:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 My Blogging Website

Blog Home

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!

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:

12345678910111213141516171819202122232425262728293031323334 My Blogging Website | Blog 1

Blog Home

My Blogging Website

Blog Post 1 Title

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

Thank you for visiting this blogging site!

Blog Post 2 Web Page:

1234567891011121314151617181920212223242526272829303132 My Blogging Website | Blog 2

Blog Home

Blog Post 2 Title

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

Read Next Blog Post

Thank you for visiting this blogging site!

Blog Post 3 Web Page:

1234567891011121314151617181920212223242526272829303132 My Blogging Website | Blog 3

Blog Home

Blog Post 3 Title

Here is where you can place all the text you want to add into 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):\

\

123456789 \<!DOCTYPE html>\ \

\ \<p><strong>Step 9:</strong> 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 just copy and paste a lot of the code from our index.html document.</p><p><strong>Step 10:</strong> Take a look at the whole HTML document and make sure it looks loverly:</p><p>123456789101112131415161718192021222324252627282930 My Blogging Website | Blog 1 </p><p><a href="index.html">Blog Home</a> </p><h3>Blog Post 1 Title</h3><p>Here is where you can place all the text you want to add into your blog post for the day.</p><p>Thank you for visiting this blogging site!</p><p><strong>Step 11:</strong> 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):</p><p>123456789 </p><p><strong>Step 12:</strong> 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:</p><p>123456789101112131415161718192021222324252627282930 My Blogging Website | Blog 2 </p><p><a href="index.html">Blog Home</a> </p><h3>Blog Post 2 Title</h3><p>Here is where you can place all the text you want to add into your blog post for the day.</p><p>Thank you for visiting this blogging site!</p><p><strong>Step 13:</strong> 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):</p><p>123456789 </p><p><strong>Step 14:</strong> 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:</p><p>123456789101112131415161718192021222324252627282930 My Blogging Website | Blog 3 </p><p><a href="index.html">Blog Home</a> </p><h3>Blog Post 3 Title</h3><p>Here is where you can place all the text you want to add into your blog post for the day.</p><p>Thank you for visiting this blogging site!</p><p><strong>Step 15:</strong> 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.</p><p><em>Homepage</em> </p><p><em>Blog Post 1 Web Page</em></p><p><strong>QUICK NOTE:</strong> 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:</p><p>How to Add a Navigation Bar to Your Website</p><h2><strong>Responsive Web Design</strong></h2><p><strong>Step 16:</strong> Add this line of code within your tags of <strong>all four HTML documents (including your index.hml document)</strong> to help ensure your web pages will all look nice whether they are viewed from a huge computer screen, a tablet, a smartphone, etc.</p><p>1</p><p>Now, the HTML documents representing our homepage and three web pages will look like this:</p><p><strong>1. Homepage</strong></p><p>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 My Blogging Website </p><p><a href="index.html">Blog Home</a> </p><h3>Blog Post 1 Title</h3><p>Here is where you can place a short synopsis of your blog post if you like</p><p><a href="BlogPost1.html">Read Blog Post</a> </p><h3>Blog Post 2 Title</h3><p>Here is where you can place a short synopsis of your blog post if you like</p><p><a href="BlogPost2.html">Read Blog Post</a> </p><h3>Blog Post 3 Title</h3><p>Here is where you can place a short synopsis of your blog post if you like</p><p><a href="BlogPost3.html">Read Blog Post</a> </p><p>Thank you for visiting this blogging site!</p><p><strong>2. Blog Post 1 Web Page</strong></p><p>1234567891011121314151617181920212223242526272829303132 My Blogging Website | Blog 1 </p><p><a href="index.html">Blog Home</a> </p><h3>Blog Post 1 Title</h3><p>Here is where you can place all the text you want to add into your blog post for the day.</p><p>Thank you for visiting this blogging site!</p><p><strong>3. Blog Post 2 Web Page</strong></p><p>1234567891011121314151617181920212223242526272829303132 My Blogging Website | Blog 2 </p><p><a href="index.html">Blog Home</a> </p><h3>Blog Post 2 Title</h3><p>Here is where you can place all the text you want to add into your blog post for the day.</p><p>Thank you for visiting this blogging site!</p><p><strong>4. Blog Post 3 Web Page</strong></p><p>1234567891011121314151617181920212223242526272829303132 My Blogging Website | Blog 3 </p><p><a href="index.html">Blog Home</a> </p><h3>Blog Post 3 Title</h3><p>Here is where you can place all the text you want to add into your blog post for the day.</p><p>Thank you for visiting this blogging site!</p><p>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"</p><p><a href="/tutorials/how-to-make-your-website-mobile-friendly">How to make your website Mobile Friendly</a></p><h2><strong>Classes,</strong> <strong>IDs**</strong>,** <strong>&</strong> <strong>Divs</strong></h2><p>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.</p><p>Here's what we'll do:</p><p>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</p><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</p><p>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.</p><p>NOTE: It is important to give our tags for these HTML documents classes in order to distinguish them from the other 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.</p><p>The web pages for blog posts 2 and 3, respectively, will now look like so:</p><p>1234567891011121314151617181920212223242526272829303132 My Blogging Website | Blog 2 </p><p><a href="index.html">Blog Home</a> </p><h3>Blog Post 2 Title</h3><p>Here is where you can place all the text you want to add into your blog post for the day.</p><p><a href="BlogPost1.html">Read Next Blog Post</a></p><p>Thank you for visiting this blogging site!</p><p>1234567891011121314151617181920212223242526272829303132 My Blogging Website | Blog 3 </p><p><a href="index.html">Blog Home</a> </p><h3>Blog Post 3 Title</h3><p>Here is where you can place all the text you want to add into your blog post for the day.</p><p><a href="BlogPost2.html">Read Next Blog Post</a></p><p>Thank you for visiting this blogging site!</p><p>Notice we named the tags' classes "ReadNext." Again, we will use these class values when we target the link in CSS—moving on!</p><p>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><p>tag in the footer of our <strong>index.html document only</strong>. This will give us the opportunity to make the text in that specific</p><p>tag in our index.html document different than the</p><p>tag in the footer of our BlogPost1.html document, the</p><p>tag in the footer of our BlogPost2.html document, and the</p><p>tag in the footer of our BlogPost3.html document (and all other</p><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><p>tag from all other</p><p>tags.</p><p>The</p><p>tag nested within the opening and closing</p><p>tags in our index.html page will now look like this:</p><p>1</p><p>Thank you for visiting this blogging site!</p><p>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 <strong>camel casing</strong>.</p><p><em>Blog Post 2 Web Page</em> </p><p><em>Blog Post 3 Web Page</em></p><p>3. Onto the</p><p>tag! We will section off a certain portion of the code in our index.html document to help us understand</p><p>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</p><p>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</p><p>tag and then give the opening</p><p>tag.</p><p>NOTE: Typically</p><p>tags require a class or an ID in more complex HTML documents. This is because HTML documents are generally filled with numerous</p><p>tags, and one must differentiate between such</p><p>tags in some way. In our case, however, we only have one</p><p>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.</p><p>The chunk of code amounting to our Blog Post 1 section will look like this:</p><p>1234567891011121314</p><h3>Blog Post 1 Title</h3><p>Here is where you can place a short synopsis of your blog post if you like</p><p><a href="BlogPost1.html">Read Blog Post</a></p><p><strong>Our Entire Index.html Document:</strong></p><p>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 My Blogging Website </p><p><a href="index.html">Blog Home</a> </p><h4><strong>My Blogging Website</strong></h4><h3>Blog Post 1 Title</h3><p>Here is where you can place a short synopsis of your blog post if you like</p><p><a href="BlogPost1.html">Read Blog Post</a> </p><h3>Blog Post 2 Title</h3><p>Here is where you can place a short synopsis of your blog post if you like</p><p><a href="BlogPost2.html">Read Blog Post</a> </p><h3>Blog Post 3 Title</h3><p>Here is where you can place a short synopsis of your blog post if you like</p><p><a href="BlogPost3.html">Read Blog Post</a> </p><p>Thank you for visiting this blogging site!</p><p>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.</p><h2><strong>Heart of HTML</strong></h2><p>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!</p>

Written by Hostwinds Team  /  December 23, 2018

Need help? Chat now!