Chapter 2 - Building your first website
Hopefully, you've grasped the theory in last chapter, but don't worry if you feel that you don't remember it all, this chapter will feature reminders.
It is imperative that you do not copy code from this tutorial, the only way to learn is to write.
In this chapter, you will learn how to make the most basic website, a page with some text and images.
You may write this code in any text editor, but please don't use Word, if you're on windows, use notepad and if you're on mac; you can use TextEdit, or even better: download SubEthaEdit. The only rule is that the name of the document must end with .html or .htm. For example "website.html".
All text in a website should be put into certain tags, like <p></p>, in fact you should put all main text in the <p></p> tag, though you should put topics and sub-topics in the <h1></h1> and <h2></h2> tag. Why? because google favors this text, if you want people to find your website through google or other search engines, this is one of many rules.
First thing, let's put some text and a topic on your website, let's make this website about you.
<html> <!-- defines this as a html document -->
<head> <!-- the head tag, here you will put things like, title, stylesheet and keywords google don't pay attention to! -->
<title></title> <!-- The sites title -->
</head> <!-- Ends the head tag -->
<body> <!-- This is the websites body, you will build the html content in here. -->
<h1>Your site's topic, for example "Welcome to Tobias Wallin's website!</h1> <!-- This is the H1 tag, google favor this the most, that's why you should use it for topics. -->
<p>Any text about you</p> <!--the <p> tag, put text in this tag. -->
</body> <!-- Ends the body tag -->
</html> <!-- Ends the html tag -->
You will notice that the text stretches from one side to the other, this is not good design because the longer the rows are, the harder it is to read them. That's why newspapers always have columns of text.
So how do we make the text into a column? We use a layer, the <div> tag. div's are layers, and you can put anything inside a layer.
So what we do is to put the text inside a layer, we do it this way:
<html> <!-- defines this as a html document -->
<head> <!-- the head tag, here you will put things like, title, stylesheet and keywords google don't pay attention to! -->
<title></title> <!-- The sites title -->
</head> <!-- Ends the head tag -->
<body> <!-- Body, this is the websites body, you will build the html content in here. -->
<div>
<h1>Your site's topic, for example "Welcome to Tobias Wallin's website!</h1> <!-- This is the H1 tag, google favor this the most, that's why you should use it for topics. -->
<p>Any text about you</p> <!--the <p> tag, put text in this tag. -->
</div>
</body> <!-- Ends the body tag -->
</html> <!-- Ends the html tag -->
Now all the text is inside the layer, you notice that I ended the <div> tag with </div>.
Though the layer will stretch from one side to the other as well, you will need to set a specific width on the layer and to do that, we put the attribute style="" on the div-tag. Inside this attribute, you can put any CSS you want, for example is "width: 780px" CSS code, first you declared that it is the css property "width" you want to use, then you write a colon to indicate you want to put a value on this attribute, for example "780px" which means 780 pixels. and like XHTML, you need to end all css attributes. To do this, you use semicolon. Watch example code below:
<div style="width: 780px;">
<h1>Your site's topic, for example "Welcome to Tobias Wallin's website!</h1> <!-- This is the H1 tag, google favor this the most, that's why you should use it for topics. -->
<p>Any text about you</p> <!--the <p> tag, put text in this tag. -->
</div>
Now this <div> has the width of 780 pixels. Why did I choose this width? Because the screen resolution you whould optimize websites for it 800x600, this resolution is as you can see 800px wide, so a 780px wide website can be watched correctly in this resolution. If you make a large site with much content, you may want to optimize the site for the resolution 1024x768. It is okay, however, if you can optimize it for 800x600 you should do so.
Now you have text on your website, you might want an image as well. Before you put an image on your website, I must tell you that everything in you website must be in the same folder, so if you haven't made a folder for your website yet, do so and put your text-file in the folder.
First thing, you must choose an image and compress it! If the image is to large in file-size, viewers won't wait for your image but move along.
let's say that you have a photo which is 500px wide and 400px high, don't let the file-size of that image reach over 100k. Second, put the image in your website folder.
Now to include this image on your site, you will use the <img> tag I showed you before.
To choose your image with this tag, you will need to enter the search path to the image and because the image is in the same folder as your text-file, it is just the name of the image. For example:
<img src="portrait.jpg" alt="A picture of me" />
If your image isn't named that way, just put in the right name, that line of code will insert the image on your website.
So what is this alt="" attribute for?
If the image won't load for some reason, perhaps the person who surf into your site have images turned off in his or her web browser, the text in the alt="" attribute will show instead of the image, it will also optimize your site some more for the search engines. Is this necessarily? No. Is it the right thing to write? Yes. :)
So the whole code should look something like this now:
<html>
<head>
<title>The title of your website</title>
</head>
<body>
<div style="width: 780px">
<h1>Your site's topic, for example "Welcome to Tobias Wallin's website!</h1> <p>Any text about you</p>
<img src="portrait.jpg" alt="A picture of me" />
</div>
</body>
</html>
Go ahead and experiment with the code if you wish, if you rather want your image to be on the top, just move the image tag in the code on the top, that is; over the <h1> tag.
Whey! Your first website! Do you notice how ugly it is? we will change that in the next chapter were I will go through the basics of CSS, to style your site.