In this tutorial series I will guide you through every step of the way to create your a website on your own.
To create a website we'll use HTML - HyperText Markup Language. As I explained in my previous introductory tutorial, it's a language that allows you to format text and all other elements of a web page thanks to special html tags. Here you can see graphical example of such a tag:
As you can see it's quite simple, only the text within <b> tags will be affected by the formatting. The final result is the following:
example of html tag
Now a few words about the structure of the whole document. Generally it's divided into two parts - head and body. Head part is for the information about the website like its title, metatags, scripts, and style. This information is not shown on your web page. The body part is the place where all content of the web page is stored - that is text and its formatting, images and all other elements of a web page. Both tags <head> as well as well as <body> are stored in <html> tag:
Ok, now that you know the theory, we'll create your first web page. I'll show you how to do this in standard Notepad, if you're using other program you should go directly to the next paragraph because the following is only for Notepad. So open Notepad and click option 'Save as', then change Save as type to "All files". Now you'll be able to save your file as html file. In file name type the name of your web page followed by the extension .html - for example: "page.html". You can see how to do this in the image below:
First of all, we'll need <html>, <head> and <body> tags in our document to divide the documents into parts. Within <head> tag we'll add the following code:
This will add the title to your web page, in the browser you'll see this as the name of the current site. Now to provide some content to your web page we'll add some text with a little bit of formatting within <body> tag. So add the following text to your file:
There's a new formatting tag that you're not familiar with yet - <p>. It just indicates a new paragraph, we're informing a browser that everything between <p> and </p> is in this paragraph so the right formatting can be applied. Summing up, your whole file should look like this:
You can see how your page looks like by opening it with a web browser. It's a simple page with text and title.
Adding images to your website
Now, we'll add a picture to your page. Adding pictures is very easy, you can do this with img tag. You just have to provide the file location to src property of this tag. There are two ways - an absolute location where the file can be anywhere on the disc, but the address of the location has to be complete, or relative where you just have to specify name of the file but it has to be in the same place where the file with your web page is saved.
In our example address will be relative, so be sure to store image in the same folder as your web page. Add the following code to your page within <body> tag:
You can download the following image from this page and place it on your own one to practice.
Links
One of the most important parts of all web pages are links. Thanks to them you can navigate from one web page to another. Maybe while reading this tutorial you have asked yourself a question what the difference between web page and website is, if any? The answer is a website is a group of single web pages connected with links. When you click a link in your browser you're redirected to another web page. In link tag you just have to put address to the web page where the user should be redirected after clicking it. It looks like this:
So now create a second web page just like the previous one. Name it for example "page2.html" and add the following code inside it:
Now we'll add link from our first page to the second one. To do this add the following code to file page.html just after <img> tag:
After clicking this link you'll be redirected to your second web page. To come back to the first one you have to click "back" button in your browser. There is of course also another way - you can add to your second page a link that will direct you to your first page. Now that you know how to do this you can practice it.
In next tutorial you'll learn how to create more sophisticated websites.