HTML Tutorial Part 2: Basic Styling and Formatting
There are numerous ways to style attributes of your page such as your font colours and so forth. I am not going to go over changing the colour of fonts in this part of the tutorials because I believe that changing font colours is a matter better resolved with CSS - which I will cover in another tutorial.
In the previous lesson you've already learnt about the <hr> tag which creates a horizontal rule over the screen. For now let's look at a few other ways to spice up your website. I suggest that you just modify the original code from the first part of this tutorial-set.
Adding a Title
We need to add a big title that will shout our page's name. We can do this with the <h1> to <h6> tags. 1 being the largest and 6 the smallest heading tag. Just above your navigation, add this.
<h1>My Cool Site!</h1>
<hr />
Text Formatting
In our layout we have "<p><a href="index.html">Home Page</a> - <a href="aboutme.html">About me</a></p>" that make up our links. To make the links look a bit bigger and attract some more attention we're going to use the <strong> tag to make the links a bit bolder.
So "<p><a href="index.html">Home Page</a> - <a href="aboutme.html">About me</a></p>" now becomes "<p><a href="index.html"><strong>Home Page</strong></a> - <a href="aboutme.html"><strong>About me</strong></a></p>". Here's a clearer view.
<p><a href="index.html"><strong>Home Page</strong></a> - <a href="aboutme.html"><strong>About me</strong></a></p>
Adding Images to Our Page
Adding images to your page can make a difference in usability and in some cases even bring over a message much clearer. Add the following line of code just below your paragraph in a new paragraph.
<p><img src="images/springbokemblem.jpg" width="150" height="150" title="Springbok Rugby Emblem" alt="Springbok Rugby Emblem" /><p/>
Will show...
Here are a couple of things to notice.
- The image's location (directory).
- The width and height attributes.
- The title attribute.
- The alt attribute.
The width and the height should be change according to the size you want the image to display. Usually it's better to stick to the original size or rather crop the image with an image editing program instead of scaling it with the attributes which can lead to pixelation. We added the title attribute so that we can see the title (a short description) of the image when we hover our mouse over the image in our browser. Last but not least is the alt tag. This tag is very important and is required by W3C standards. The function of the alt tag is to show a description of the image in case it cannot load or in cases where people us text-based browsers so they can see a description of the image.
Google and other search engines might use the title attribute to assign certain keywords to your images when caching them so remember to label them well. The title attribute is not mandatory however and you can include or exclude them to images as you wish.
Final Product
Our final product should now look like this.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>My Home Page!</title>
</head>
<body>
<h1>My Cool Site!</h1>
<hr />
<p><a href="index.html"><strong>Home
Page</strong></a> -
<a href="aboutme.html"><strong>About me</strong></a></p>
<hr />
<p>Hallo, this is my first web page. I hope it will turn
out OK!</p>
<p><img src="images/springbokemblem.jpg" width="150" height="150" title="Springbok Rugby Emblem" alt="Springbok Rugby Emblem" /></p>
</body>
</html>
Here's an example of what it will look like in your browser.
You can validate the page at http://validator.w3.org/.