So you want to learn HTML (HyperText Markup Language)? This is a great start for those who have never coded before. An excellent benefit of HTML is that it’s easy to test on your computer even without the need of an Internet connection. All that is needed is a web browser to see how it all looks for other users. Let’s begin with what we need to do first. This guide assumes that you are using Windows (though it should be fairly straight forward to replicate some of the Windows dependent steps on other operating systems as well).
A lot of web hosts can offer free website building software, but if you are working from a template, you can be limited to how your website looks. It’s possible to find something you are satisfied with, but ideally, you would have full control over the exact look of your website. The more web code you know, the more control you can have over your website.
Basic File Management
The first thing we need is an empty folder to hold our website. Find a place on your hard drive that is convenient for you to work with your website. Right click on wherever you want to create your first website, hover over “New” and click on “Folder”:
It doesn’t matter what you name it, but an idea would be either “website” or the name of your website. Really, the folder could be named anything. It really doesn’t matter what you name it so long as you know that what’s in that folder is a website you are learning to build.
Now, in that new folder, you need to make a new text file. This can be created in the same way as creating a new folder, only instead of clicking “Folder”, you click on “Text Document”:
Unlike the folder, it’s important that you name the text document “index”. The reason for this is that when someone browses to your home page, the browser actively looks for an “index” file (can be multiple kinds of extensions). If there’s no index file, then it’s possible that all the user will see is a list of files and not the site you want them to see. So, it’s ultimately very good practice to have your home pages named “index”. The same is said for any subsequent folder you create that is meant for users to see. Every user viewable folder should have an “index” file. Whatever else you create in that folder can be named anything else.
Basic HTML Code
Next, we want to open up our text file to start coding. HTML code used the “<” and the “>” (or, angle brackets). These are found on the comma and period keys and can be made when holding shift and pressing either one. These characters are used to make “tags”. Tags are used to tell the browser (or whatever it is that’s reading the HTML file) that it should do something. What that is depends on the code.
A large portion of HTML code has an opening and closing tag. I’ll use an analogy to describe how a lot of HTML code is put in to the file. Think of a room on a flat two dimensional plane (like the really old side-scroller games). The room has a start on the left side and an end on the right hand side. Of course, we want to put something in this room to make it more functional. Let’s put in a table in our mental picture of this room. The table is within the room because it’s start and end is in between the start and end of the room. Now, let’s put a vase on that table for decoration. Then, we can put in that vase a pink flower. We have basically put something within something within something. If simply reading this description gives you a headache, here’s a quick picture of what I’m explaining:
This is one way of viewing the logic that is in HTML. Many things have a start and an end and many things can be inserted in between other items starts and ends like the table starting after where the room starts and ending before the room ends. In order to express these starting and ending tags, HTML generally uses this format:
Opening tag: <tag>
Closing tag: </tag>
Note the slash inside the second tag. That denotes that a tag is closed. The opening tag does not have the slash as it is an opening tag. If you understand the general idea, that should make the following piece of code easier to understand (don’t worry, I’ll explain what it all means):
Try to type this code down as I go along (or write it all out now and read what it all means after, your choice!) So, the first tag you see is the HTML tag. That lets things like browsers know that what they are reading is an HTML file. Everything after the opening tag, in this case, is HTML content.
Since we are putting in more code after the “HTML” opening tag, we add a space on the next line so we can read it much more easily. Spacing is not necessary as far as browsers are concerned, but for now, we’ll use spacing so it doesn’t look like one large line of messy and borderline unreadable code. The “head” tag can be used to put in content like “meta-data” – that is, information about the page that things like search engines can read. We’ll save that for a later lesson, so for now, we’ll just add a closing tag right after with nothing in it.
The next piece of code is the “body” tag. In a static HTML webpage, this basically contains the guts of your page. All that text and pretty pictures, etc. are placed within this code. So, right after the opening “body” tag, I placed a “Hello world!” message. Since this is all I wanted to say on this page, I placed a closing body tag right after.
Now, remember that HTML tag I had at the beginning? Yup, we need to close that tag at the end, so I closed that tag. Save this file and, congratulations, you have your very first website!
File Extension Management
There is one problem we should have at this point. What we saved is a text file and not an HTML file. This is easily remedied by modifying the file extension. The actual file we saved at this point is “index.txt”. While browsers can read this file, it will only read the code and not the results of the code. What we want is that file to be “index.html”.
Newer versions of Windows does not allow easy access to file extensions. It automatically hides these, so all you see is “index”. This has to be changed. To be able to see file extensions, click on the folder window and press the “Alt” key on your keyboard. This will show the menu bar like so:
The next thing you should do is click on “Tools”, the click on “Folder options…” like so:
The next thing we want to do is click on the “View” tab. This will show a whole bunch of options. We want to scroll down to the option that says “Hide extensions for known file types”. If you do not see files that end with a dot and a couple of, say, letters, then chances are, you’ll see this box ticked. We want to untick this box, so click on the check mark if it’s there to make the check mark go away. The results should look something like this:
Once that is done, click the “Apply” button. You might see all the icons on your desktop flicker. This is normal as the computer is trying to re-display all the files with extensions. You can now close this scary options menu. If you are successful in this, your index file should look something like this:
Note the addition of “.txt” at the end of the name. This is what we need to change. Replace the “.txt” part of the file name to “.html” If you do this correctly, you’ll also get the following dialogue:
Since we know what we are doing, click on “Yes”. The icon will change from the notepad icon to whatever program is associated with HTML files (typically, your browser of choice). If your browser is already set to be able to open this file, you can double-click on the file to see your brand new website in action! The code mentioned in this will simply have the text “Hello world!” in the default font.
If you want to make changes to the code, the easiest way is to simply right-click on the file and click on “Open with…” and “Notepad”:
This will open the file up in notepad again. Alternatively, you could change the extension back and forth, but this method allows you to edit code in that file much more smoothly. If, for whatever reason, Notepad is not shown in the second menu, this can be added in by clicking on the “Choose default program…” You’ll get a screen like this:
Look for Notepad. If it’s not on the top few items in the list, click on the tiny down arrow circled in the screenshot. You should get an extensive list of programs installed on your computer and one of them should be notepad. Whether you tick the box that tells Windows to open the file by default with that program is not as important as Notepad being added to the right click menu. By clicking on “OK”, Windows should add that program, at least, in the “Open with…” menu when trying to open an HTML file. If you changed the HTML files so that Windows, by default, opens in notepad and you want to change it back, you can simply right click on the file, select “properties”:
In the new window, click on the “Change…” button:
In the next window, you can select whatever program you want to have automatically open an HTML document (I prefer a web browser opening it up, but it’s up to you).
That’s it! You are now well on your way to learning some code!
(at first part!) | HTML Guide List | Part 2 (HTML Part 2 – Document Declaration and Header Information)