In the first part, What is HTML?, I mentioned that every webpage must start with the <html> and close with </html>. Now we get our hands dirty, so to speak. If you have a website program such as Dreamweaver, open it up. You can even just use Notepad if you want. Either way, you need some sort of a text editor to code your website in. If you don’t have the expensive ones like Dreamweaver, I recommend this free one called Notedpad++. It’s free for one, but it has color coding which really helps as well as code hinting, which helps you remember which attributes are available for an element. Did I mention it’s free?
Before we get started on that, I need to mention that your files will need to all be in the same folder (directory). The easiest way to do this is to create a folder on your desktop and call it something simple like “my_website”. There are no spaces allowed in folder/file names, so use underscores.
Open up your text editor. If you’re using Notepad or Notepad++, you need to save your file as a .html. In Notepad, when saving, call your file ‘index.html’ then click ‘Save as Type’ and choose “All Files (*.*)”. This will allow you to save with the .html extension.
If you’re using Notepad++, you’ll chose the “Hyper Text Markup Language” from the drop down. Upon doing this, you’ll get the coloring and code hints that the program provides.
The reason you called this file index is because the server is going to look for this file name to serve as the home page. Every website (save for asp.net) will use the index as the file name for the home page. The .html after it is there to tell the server that this is a standard html webpage. So your HTML homepage will always be called index and will always have the .html extension.
Now that we have that out of the way, let’s write some code. With your editor open, type, don’t copy and paste it, type the following in:
Believe it or not, that is all it takes to create a webpage. You can save this file right now and open it and you’ll see your webpage in the browser. No really, do that. Save it, open your folder and double-click the index.html file. It will open in your browser and you should see “Hello World!” in the top left corner. I sure hope you’re using a decent browser too, like Firefox or Chrome.
By now you might be thinking, that’s great and all, but what do you mean by “The Head and the Body”? I see body, but no head! Alright, so here is what’s happening. When you open a tag, stuff goes inside of it. The <html> tag holds EVERYTHING where the <body> tag only holds what is visible on the browser. Hence why we have the ‘Hello World!’ inside the <body>. The <head></head> tag is where we can store other information that your webpage/site needs, but isn’t exactly seen. The <head> will hold the title, metadata, links to CSS and JS files, etc. The most common is the <title></title> tag. I’ll get to the rest later. Let’s modify our code now:
<title>My First Website</title>
What we did was add the <head> tag and inside of it, the <title> tag. The title is important for SEO as well as aesthetics. You’ll see that at the top of your browser, the tab that you are on has the title in it.
If you’re ever interested in what a website’s code looks like you can always right-click on a webpage and select “View Source”. You may occasionally see something above the <html> tag, but you’ll notice that it’s either a <?php ?> tag or something that has been commented out: <!– comment goes here –>. Comments are bits of code or notes that you don’t want the user to see.
That does it for this lesson. Let’s move over to “The Typical Layout of A Website“, where it’s going to get a bit more fun.