First, create a place to put our simple website on your computer. Right-click your desktop and select New -> Folder, like this:
You may have different programs installed or be on a different version of Windows so your options may be different, but you will have New Folder. If you’re on a different operating system such as OSX or Linux you can still follow this tutorial: just choose a place of your own to store the files we’re going to create.
Name
your folder with a name you’ll remember. We’re going to use this folder
to keep all our files in for this whole project. I’ve named mine “FOTC
Website Tutorial”:Open your new folder, and right-click inside it. Again go to New, but this time click “Text Document”, like this:
Rename the text document to “index.html”. You need to replace the “.txt” extension with “.html” – when you do this you’ll be prompted if it’s ok to change the extension. We want to make a HTML file so click Yes.
Right click the HTML file and click ‘Edit’. This will open it in Notepad. If you can’t find Edit, you can open Notepad through the start menu, then use File – Open to open the index.html file you’ve just created.
When you’ve done this you should have an empty document in Notepad like this:
You can use much more advanced software than Notepad to do this, but an important part of this lesson is that you can use very simple tools to make websites, so we’re going to use Notepad. If you have a preferred text editor, such as TextMate, Notepad++ or another, then feel free to use those instead.
Copy the following text into your index.html file and save it:
<!DOCTYPE html>
<html>
<head>
<title>FOTC First Website</title>
</head>
<body>
This is our first FOTC web page.
</body>
</html>
Once you’ve hit save you can close Notepad.
Now if you double-click your HTML file it should open in your local browser. If this doesn’t work you can open a browser (such as Chrome, Firefox, Internet Explorer) and drag your file into it to open it.
Here’s how the file appears when I open it in my web browser.
You can see that the location of the website starts with file:/// instead of the http:// we’re used to. (If you can’t remember what HTTP:// means then go back and review the lesson on “What is HTTP” earlier in this course). Now that you understand what HTTP is you can understand that we don’t need to use HTTP to access our index.html because the file exists on our own computer: HTTP is used for talking to other computers.
So we can guess that “file:///” means that the browser is accessing a file on our local computer.
The rest of the web address is then the location of the file on our own computer.
Underneath that we can see our web page. It’s not very exciting at the moment, as it just has a single sentence.
Go back to editing your notepad document and change the HTML contents of the <body> tag, like this (you can change it to whatever you like):
Make sure to save your index.html in Notepad. Then go back to your browser window and press F5 to refresh.
As you can see the text is changed on our simple webpage:
You can put whatever text you like in and it will appear on the web page.
This cycle of editing-in-Notepad, saving-in-Notepad, and then pressing F5 in your browser to refresh is the simplest way of making websites. Of course when it comes to making more complex websites we will need to learn more complex tools, but this is an excellent way to understand the fundamentals of HTML.
Understanding Basic HTML
So far we have a very simple index.html:<!DOCTYPE html>
<html>
<head>
<title>FOTC First Website</title>
</head>
<body>
This is our first FOTC web page.
</body>
</html>
Let’s look in more detail at this HTML.
First, we can see a strange-looking tag that says <!DOCTYPE html>
This is an unusual tag as it has an exclamation symbol at the beginning, and it doesn’t have a matching end tag anywhere. That’s because this is not technically a HTML tag. Instead it tells our web browser what language we’re using to communicate with it. In this case, we are using HTML.
The DOCTYPE declaration must always come first in a HTML page. There are other possible values for DOCTYPE. If you look at webpages using the F12 Developer Tools (see earlier in the course for an example of how to do this) you will see a variety of different DOCTYPEs. For the purposes of our course we are not interested in these other DOCTYPES: <!DOCTYPE html> tells browsers that we want to use the updated version of HTML, which is currently HTML 5.
After the DOCTYPE declaration we can see our first HTML tag: <html>.
If we look at the very end of the document we see the matching closing tag: </html>.
This means that everything else in the document is inside our <html> tag. The <html> tag acts as a container. It tells the browser that everything inside it is to be rendered (displayed) as HTML.
Putting tags inside other tags is often referred to as nesting. We say that the other tags are nested inside the <html> tag.
Inside the <html> tag we put two very important tags: <head> and <body>.
This is the fundamental structure of every HTML page. They all must have a DOCTYPE declaration, then a single <html> tag, which contains <head> and <body> tags.
The <head> Tag
The <head> tag can contain a number of other special tags. We will learn about more of those in later lessons.
The important fact to remember about the <head> tag is that it contains data that is not directly displayed as part of the page. Often it tells the browser about extra resources the browser needs to fetch to display the page properly, such as additional CSS or JavaScript files. The <head> tag is also where we put metadata about the page.
Metadata is a fancy way of saying ‘data about the web page’. For example, in our <head> tag we have a <title> tag. The <title> tag contains some metadata: in this case, the title of the page. You can see the title in your browser tab:
So the <title> tag is one of the tags that can go in the <head> tag, and it defines the title of the web page. We will see more of these metadata tags in future lessons.
The <body> Tag
The <body> tag is where we put the body of the website. In other words, all the data that is displayed as part of the web page. As you can imagine, for complex websites this can be a LOT of data. At the moment our web page body is only a simple sentence… but from the next lesson we will start to add much more.
Conclusion
We now have the foundation of every website: a simple index.html with the basic structure of a HTML document. Before you move on, make sure you understand how the <html>, <head> and <body> tags are formed and what kinds of data we put in <head> and <body>.
Leave your comment
Post a Comment