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

Part 1 of Website Building Blog Series

To begin with a candid confession or something professional and classy? Candid confession it is: I am so excited about this blog series, I feel like I have an entire butterfly estuary in my stomach! I love software development and coding and it has been my dream for some time to teach a loverly audience like yourselves how to create a very basic (emphasis on the “basic”) website from scratch. Here we are! You can all be my little guinea pigs as we learn step by step how to generate basic HTML documents and CSS documents (and potentially much more!), then link all of them together, thereby creating our very own website. This won’t just be an average website about tumbling kittens, no it won’t. In fact, because blogging is, as the kids say these days, “awesome on like every and all levels,” we’ll create a blogging site together! It’s going to be, as those kids once again say, “DOPE.” No time like the present to get started! HTML documents are where you would start were you to create a website, as HTML constitutes the base of your website. It’s fun! Before we create an HTML document and code with the HTML computer programming language, here is some stuff to know about HTML itself:

 

What is HTML?

Hypertext Markup Language is the most basic part of composing a website from scratch. The following quote from a previous blog post about HTML stuff explains what each piece of “Hypertext Markup Language” means:

“The ‘Hypertext’ in HTML refers to text that references texts other than itself.

The ‘Markup’ in HTML stands for kinda what it sounds like. HTML is a language that marks up a web page with direction as to what the website will display to viewers. This direction comes in the form of things like tags that make up the language that is HTML. Markup also accounts for the fact that website viewers can’t see the code written in the background to create the website.

The ‘Language’ in HTML explains that HTML is a computer language and it has syntax and rules just like French or Spanish.”

I highly recommend taking a look at that HTML blog post before proceeding with this tutorial because 1. It will give you more HTML context so you can feel more confident when we build a site and 2. I am shamelessly plugging the post because it’s like one of my other blog babies and I am biased about its perfection. The link below will bring you right to this blog baby I speak of:

Hostwinds HTML Hype

SPOILER ALERT: I’ll be shamelessly plugging several blog posts published previously throughout the course of this blog post because 1. They are relevant and can serve as cheat sheets for you as we learn the complex procedures involved in building a website and 2. They are all awesome and worth shamelessly plugging.

 

The Basics

Okay, now that we feel all cozy knowing what HTML is, time to get your HTML document all set up. We’ll start with your website’s homepage, otherwise known as the website’s landing page. We will open up a file in any text editor you prefer. I recommend Notepad++ if you are just starting out and Sublime Text if you are a little bit familiar with software development/coding. The best news about these text editors is that they are both free!

cPanel file manager also offers a text editor. Speaking of cPanel, feel free to reference the following blog post entitled “Hostwinds Tutorials: How to Set Up Website Files in cPanel File Manager.” It goes through every step involved in creating or uploading website files like your HTML and CSS documents in your cPanel File Manager:

Hostwinds Tutorials: How to Set Up Website Files in cPanel File Manager

Moreover, one of Hostwinds’ beloved Front-Line Experts, Abigail, wrote a brilliant Knowledge Base guide about building a homepage for your website. Within this guide, Abigail explains, “If you are using a control panel such as cPanel you will add these files to either your public_html directory or the document root for your domain name. If you are not using a control panel you would most likely add these files to your /var/www/html although the location of your domain’s document root may vary.”

The HTML file you create within your text editor is generally saved as “index.html.” Why? Abigail’s guide addresses this exact question: “The way Apache is set up, in your domain folder (or public_html) it reads your DirectoryIndex such as index.htm, index.html or index.php if these files exist and serve this file as the homepage of your folder. If there is not one of these files then it will show an index listing. You can change your directory index through your .htaccess file.” Not to shamelessly plug more, but I also highly recommend reviewing BOTH this guide and the blog post regarding file storage in cPanel before continuing further because it will give you the cliff notes of this blog piece as well as some extra information about HTML that we aren’t able to touch on. Click below to check it out:

How to create a custom landing page using HTML and CSS

One more quote from Abigail’s guide before we move on:

“Tags are how we identify different elements in our HTML document and will generally come in pairs. Most tags will have a start <>  and an end </> , some tags will not have the second tag and will end with a /> this is called an ’empty element’, mainly seen on links and images.”

 

Tags

Allow me to elaborate on a very important part of HTML – Tags. They tell the browser how you want your website to be organized. As Abigail mentioned, generally tags are complete with an opening and closing tag. The opening tag tells the computer you want to organize the content between it and the closing tag in a certain way. For example, the text within the following Paragraph Tag (or P Tag) tells the computer you want a paragraph of text to be displayed in some way on your website:

<p>This is where you would add paragraphs of text to your website.</p>

The opening paragraph tag is: <p>

The closing paragraph tag is: </p>

Some tags are self-terminating. This means they don’t require a closing tag. An example of a self-terminating tag is the break tag (<br>), which denotes a space between two elements on your web page.

In order to ensure this blog post isn’t as long as the Titanic, I previously prepared a blog post exclusively about HTML tags. If you are unsure of the purpose of each tag we use to create our HTML document, click the link below to view your HTML tag cheat sheet:

Hostwinds HTML Hype Part 2: Tag Talk

Content

“Content” is that which lies within the opening and closing tags. The content is what you want users to see on the website.

The content within the paragraph tags above, for example, is:

“This is where you would add paragraphs of text to your website.”

 

Element

An “Element” is the whole line of code including the opening tag, closing tag (if the tag does have a closing tag, which all don’t) and the content. In other words, the element is the whole shibang. In our example above, the element is:

<p>This is where you would add paragraphs of text to your website.</p>

Sweet, step one to writing an HTML document is setting it up the tags right. Every single time you create an HTML document, you’ll want to set it up with this template first:

These are the most important tags because they set up your document.

The <!DOCTYPE html> tag denotes the version of HTML we are using. It is important to place this at the very top of every HTML document you create.

Anything between the <html> and </html> tags denotes information pertinent to the website.

Anything between the <head></head> tags is something you don’t want to be seen on the site, but information that needs to be communicated to the browser in order for the website to run correctly. For example, this is where you would want to put the line of code linking the HTML document to a CSS document. Tags giving the browser important information about the structure of the web page are called “meta tags.”

Another example of a meta tag is the <meta charset=”UTF-8″> tag. This tag denotes the specific set of characters allowed to be used for your website. The characters comprising the UTF-8 character set covers nearly every character one could possibly think of.

Anything between the <body></body> tags is intended to be seen on your website page (or, in other words, the body of your website).

Anything between the <title></title> tags is what you want the tab that is on the very top of your website’s window to say.

 

Comments

Comments provide descriptions for certain tags or elements that help you or others viewing or editing your code in the future. Comments are for the website developers and they clarify things for you when you type the code amounting to your website. In my experience, it is very important to comment as much as possible so you can remember what each piece of code is for should you or someone else go back and edit your code later.

Examples of comments that might be placed within your HTML document:

Personal preference: I like to put comments around each area of my web page to make it easier for me to identify each section. An example of this is shown below:

The chunk of code above just reminded me to insert this very 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 2 and 3 of this blog series.

Attributes

Attributes are a little more complex, but we’re diving in! As stated in the “Hostwinds HTML Hype Part 2: Tag Talk” blog post, the attribute specifies something about an element.

Here are a few examples of attributes other than IDs and Classes (see blog post regarding HTML tags if you are unsure as to what IDs and Classes are and/or do):

1. The “href” part of the anchor tag is an attribute in that it specifies what file is being referenced.

2. The “alt” part of the image tag is an attribute in that it specifies what you want text to display as a placeholder if for some reason the image isn’t loading.

3. An example seems like the best way to teach what the “target” attribute does. Let’s say you have an anchor tag in your HTML document that allows your site’s users to click a link that takes them to Hostwinds’ homepage:

You can add a target attribute to the opening tag to inform the browser how you want to redirect the users to Hostwinds’ site. In other words, you can use the target attribute to choose whether you want the site to open in the exact same window they are viewing your site in or in a whole new window (aka tab).

Give the target attribute the name (aka value) “_self” like so to direct users to Hostwinds’ website in the same window they’re in currently:

Give the target attribute the name (aka value) “_blank” like so to direct users to Hostwinds’ website in a new window (aka tab):

There are other values you can give your target attribute, but you get the idea!

 

The Whole HTML Document

Wow, that was so much information so fast! Now that you know a lot about HTML, let’s set up a simple HTML document that includes everything we talked about. 

NOTE: We’ll be setting up our blogging website to emulate Hostwinds’ blogging website, however, it will be a very basic blogging website as we start out and learn the basics of HTML.

ANOTHER NOTE: My very wise and intelligent sister is a successful web developer. She gave me the following advice regarding website-building: Every time you want to make a new website from scratch, first try mapping out the way you want to set it up/the way you want it to look on paper. Once I began following such advice, I noticed I was able to develop websites almost twice as fast.

Step 1: Add a simple navigation bar at the top of the page (generally navigation bars have many links, but just for now we’ll keep it to one link in the navigation bar we make):

Notice I have placed the navigation bar tags within the body tags. As we discussed before, this ensures the navigation bar will be visible on the web page.

Notice that the navigation bar opening tag is right under the opening body tag. This ensures that our navigation bar will be at the top of the page.

SPEAKING OF NAVIGATION BAR…Although we will only create one link within our navigation bar to make this blog post more concise and to make this tutorial more basic, the following Knowledge Base guide walks you through the steps by which you can create a more complex navigation bar:

How to Add a Navigation Bar to Your Website

Feel free to add more links to your navigation bar using this tutorial if you like!

Back to the code: Notice the <br> tag right before the closing body tag. As mentioned in the “Hostwinds HTML Hype Part 2: Tag Talk,” the <br> tag makes a space between two elements. Considering we want a space between our navigation bar and the next element, we plopped a <br> tag between the two.

Step 2: Add the area where your viewers can click to view your first blog post (aka most recent blog post) below the <br> tag:

Notice we have a heading (<h3></h3>) with the name of the blog post right above a featured image for the blog post (<img>) right above the synopsis of the blog post (<p></p>) right above a button (<button></button>) that brings us to the web page we’ll create now for our first blog post. The name of the HTML file we’ll be creating for the first blog post will be “BlogPost1.html.”  In Part 2 of this blog series, we’ll be creating three more HTML documents in order to make three web pages for three hypothetical blog posts. We will name these three HTML documents “BlogPost1.html,” “BlogPost2.html,” and “BlogPost3.html.” Thus, we can reference them within our anchor tags surrounding our button tags.

Notice the opening and closing button tags are nested between opening and closing anchor (<a></a>) tags. This is what allows us to click the button and navigate to the web page we want to get to. 

Notice the horizontal line (<hr>) tag at the bottom of this chunk of code. We will have a horizontal line separating the three areas in which your viewers can click to view blog post 1, 2, and 3. We will also have a horizontal line separating the 3rd blog post from the footer.

 

File Paths: Relative vs Absolute

File paths are the way you inform your browser about which file to grab when you reference it in an element. You can either type in the entire file path of you can abbreviate it. An absolute file path is the entire file path and a relative file path is a shortened version of that same file path (, yet it still directs your website users to the same file).

Example of an absolute file path:

Example of a relative file path:

There is a cool system in which the browser interprets the relative file path you enter into your code. We’ll touch on this a little now, but don’t fret if this is a bit difficult to wrap your mind around, as we’ll likely cover the subject in more detail in one of the subsequent blog posts.

Step 2.5: Let’s quickly organize our files a little bit. Go into your files where your index.html document lives. Create a folder named “images.” Drop all the images you’d like to use for your blogging website into this folder. The featured image for blog 1, the featured image for blog 2, and the featured image for blog 3 amount to three image files in total. You are free to name your image files anything you like, but for our purposes, we’ll name them “your_image_goes_here_1.png,” “your_image_goes_here_2.png,” and “your_image_goes_here_3.png.” Furthermore, for this tutorial, we’ll be using various Hostwinds images for our featured images.

We will use a relative file path for all our website’s images. Now, in order to instruct the browsers to go within the “images” folder to grab each image, we’ll make the <img> tags look something like this:

Blog Post 1 Featured Image:

Blog Post 2 Featured Image:

Blog Post 3 Featured Image:

The period and forward slash at the front of the file path tell the browser to start where the index.html file is and dive into the “images” folder. The forward slash after “images” tells the browser to find a file within that folder.

Step 3: Add the area where your viewers can click to view your second blog post below the <hr> tag by simply copying the chunk of code that we just created for the first blog post and pasting it below. Once it is all pasted, all we have to do is change all “1” to “2.”

Step 4: Add the area where your viewers can click to view your third blog post below the <hr> tag by again copying the chunk of code that we just created for the first blog post and pasting it below. Once it is all pasted, all we have to do is change all “1” to “3.”

Here is what the document looks like after you’ve added steps 3 and 4:

Step 5: Now we’re ready to add a footer below the <hr> tag. We’ll make it simple for now and doll it up later. The footer tags look like this:

Step 6: I mentioned earlier that we are modeling this blogging website after Hostwinds’ blogging website. Notice when you visit https://www.hostwinds.com/blog/ and click on one of the featured images, you are directed to the blog post associated with such featured image. We want our blogging website’s viewers to be able to do the same thing and you’d be surprised how simple it is to create this effect. Simply (NEW CODING TERM COMING UP:) NEST the <img> tags for each featured image between an opening and closing anchor tag (just like the anchor tags we used for our navigation bar link and our buttons). We’ll reference our “BlogPost1.html,” “BlogPost2.html,” and “BlogPost3.html” documents within our anchor tags in the same way we did when we were creating our buttons.

Notice the anchor tags around each image tag in the document after we make this change:

Step 7: Give yourself a round of applause! Go ahead and play around with your website a bit! 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. When you are checking out your site, click the images and the buttons to make sure there were no “bugs” (aka typos or mistakes) in your code.

Homepage

Part 1 of this blog series is complete, folks. We will continue to add a bit more HTML to this blogging website in Part 2 of this series and it is going to be a real treat! I don’t want to spoiler alert the rest, so we’ll conclude now.

 

Happy HTML

Stay tuned for Part 2 and keep this cheat sheet because we’ll be referring back to it. Stay tuned for Parts 3 too! Oh, there will be, as the kids say, “Parts on Parts on Parts” for this blog series! Before we know it we’ll have a much more complex website we can post blogs on. Talk to you soon!

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.