How To Get Started Building A Website
The Steps To Building A Website
If you’ve been curious about building a website, you came to the right spot. Once you’re done reading this article you will understand how a basic webpage works. Hopefully you already have some form of hosting. The content below is the template for an HTML document. It is helpful for you to learn more about the structure of an HTML document if you want to learn how to build a website. I’ll give you a quick explanation but you should do some further reading.
Step 1: Declare the HTML Document
The very first line <!DOCTYPE html> is the HTML Document Declaration. Basically this tells the web browser (Internet Explorer, Chrome, Firefox, etc.) that the following document is meant to be read as HTML. If you are confused, think of it like this: on your current computer there are many different types of files. You have images, text files, Microsoft Word documents, Excel files, and so on. In order for the file to be opened, your computer has to know what type of file it is. This is why you save files with extensions such as .txt, .xls, .docx. This tells your computer what it needs to know so that it can use the correct program and give you what you are requesting. When you are creating a webpage you must include this HTML Document Declaration so that a web browser knows what to do when someone visits the page.
Step 2: Create and Define HTML Document
The second line <html lang=”en”> is the content of the HTML document. In case you didn’t notice, the last line of this document is </html>. Everything within this section is the contents of your web page. Without including these two lines, your web page would not function at all. From this point forward, these lines are referred to as the HTML tags. Now that we have a basic understanding of the HTML document model, we will explain the contents of it.
##INSERT STUFF HERE##
Step 3: Add the <head> to the HTML Document
There are two main sub-sections within the HTML document that are important. First you have the <head> section. This is where you will include information about the document such as the title, description, keywords, etc. When your website is on the internet search engines will use this information to understand your website. You can also include additional styling rules, fonts, and so on. No one will directly see this when they view your web page (however they can see it when they view the page source).
If you aren’t familiar with the term ‘meta’, it is additional data about the website. In the sample website code below, I added <meta charset=”utf-8″> in the head. UTF-8 is the encoding of the document so just leave this as it is. Without being a complete nerd, the text you see on a computer screen is not magically created. Each time a key is pressed there is code being passed to your computer. It is not all the same, and when you copy & paste text you are using the encoding of the text you copied. This can get ugly when you use a symbol such as the ampersand ‘&’. If you’re curious about this, view the page source of this article and look at how certain characters such as apostrophes or ampersands are actually shown.
Sorry for getting sidetracked, I’m a geek. Okay so <meta> is information about the webpage. The title of the document <title> … </title> is self-explanatory. Whatever you put here will be what search engines use for your website listing (usually). It is also what the tab will read when someone has your web page opened. You now officially have a basic understanding of the <head> of an HTML document. Long story short, the head is not displayed directly. It helps set the mood for the <body> of the document.
Step 4: Close the Head: Then Define the Body and Add Content
The <body> of an HTML document is what people will actually see when they are on your website. Anything that you type in here will be visible in some way, shape, or form. I should have mentioned this earlier, but there is a reason we use the greater than/less than (< >) signs in an HTML document. When used correctly, these are referred to as tags. We use these to use the tools that are built in to HTML. For example, the paragraph tag, <p>, is used to display text. Most tags require a closing tag </>. So if you wish to display ‘Hello World!’, do it as follows:
<p> Hello World! </p>
Step 5: Close the Body
Step 6: Check File To Ensure Correct File Extension/Name
Now that you have the file saved to your desktop as ‘index.html’, you should navigate to your desktop and right-click on the file. When the list of options is displayed, you should choose to open the file with a web browser. If you did everything correct, you will see ‘Hello World!’. And if you see ‘Hello World!’, you should pat yourself on the back…you just took the first steps toward building a website!!!
Step 7: Skip All Steps With This
<title>##TITLE OF WEBPAGE##</title>