Need help? Chat now!

Hostwinds Blog

Search results for:


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

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

by: Hostwinds Team  /  December 21, 2018


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 lovely 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 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 directions on 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. The 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 has syntax and rules 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 to feel more confident when building 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 starting 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 vital 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:

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

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, which denotes space between two elements on your web page.

To ensure this blog post isn't as long as the Titanic, I 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 shebang. In our example above, the element is:

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

Sweet, step one to writing an HTML document is setting it the tags upright. Every time you create an HTML document, you'll want to set it up with a first template.

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

The 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 and tags denotes information pertinent to the website.

Anything between the tags is something you don't want to be seen on the site, but information needs to be communicated to the browser 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 web page structure are called "meta tags."

Another example of a meta tag is the 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 think of.

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

Anything between the tags is what you want the tab 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 imperative 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:

My Photos     My Resume      About Me    Hostwinds' Homepage

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 and 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 the 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 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" 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 fundamental blogging website as we start 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 how you want to set it up/the way you want it to look on paper. Once I began following such advice, I noticed I could 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):

My Blogging Website

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. 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. The tag right before the closing body tag. As mentioned in the "Hostwinds HTML Hype Part 2: Tag Talk," the tag makes a space between two elements. Considering we want a space between our navigation bar and the next element, we plopped a 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 tag:

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

Notice we have a heading with the blog post's name right above a featured image for the blog post right above the synopsis of the blog post right above a 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 create three more HTML documents 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 tags. This allows us to click the button and navigate to the web page we want to get to.

Notice the horizontal line 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 posts 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, or 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:

<img src= “https://www.hostwinds.com/images/new-pages/home-img.png” alt=“Hostwinds is Awesome”>

Example of a relative file path:

<img src= “/new-pages/home-img.png” alt=“Hostwinds is Awesome”>

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 3: 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, instruct the browsers to go within the "images" folder to grab each image.

Blog Post 1 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 4: Add the area where your viewers can click to view your second blog post below the tag by simply copying the chunk of code 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 5: Add the area where your viewers can click to view your third blog post below the tag by again copying the chunk of code 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."

Blog Post 1 Title

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

Read Blog Post

Step 6: Now, we're ready to add a footer below the tag. We'll make it simple for now and doll it up later.

Thank you for visiting this blogging site!

Step 7: 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 tags for each featured image between an opening and closing anchor tag (like the anchor tags we used for our navigation bar link and 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:

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!

Step 8: 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, 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. When you check 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!

Written by Hostwinds Team  /  December 21, 2018