Learning HTML

This article is going to try to explain how the HTML in that page resulted in the page shown. If you do not have the webpage, then you can get it here: http://www.leeleon.me.uk/content/htmlpart2.html
The first things to look at are the contents of the tags in the head section; these are mostly responsible for the appearance of the webpage. The content of these tags is known as a style sheet – separating style sheets out from the main body of the page is very useful and we will look at this again in a later article.
Within the tags we have CSS specifications. These take the form of declaring HTML tags, ids or classes upon which the specification is to act. For example:
p { margin-top: 0px; margin-bottom: 12px; text-align: left; }
Specifies how a paragraph (enclosed by
paragraph text
tags) will appear. Note that the specification is enclosed in curly brackets ‘{‘, ‘}’. Within the specification are a number of attribute specifications. You only need to specify those that you want to change. In this case, the margin at the top of the paragraph will be set to 0 pixels; the margin below, between this paragraph and the next, will be set to 12 pixels; and the text will be aligned to the left.
Note that attributes end with a full-colon ‘:’ and that attribute values end with a semi-colon ‘;’. If either of these are omitted your style may not work.
#mainpage { width: 600px; margin-left: 20px; text-align: center;
background-color: aqua; padding: 10px; }
This specifies the id ‘mainpage’. This is essentially our webpage. It does not take up the entire width of the browser window, which it would by default, because we have specified a width of 600 pixels. ‘margin-left: 20px;’ indents the page slightly from the left hand side of the screen. Text will be centred and the background colour will be set to aqua. Colours can be specifed either by RGB value or, for a limited number of colours, by name. Padding specifies how much space to leave between the surrounding box and its contents, which in this case is the pagebody.
#pagebody { padding: 10px; background-color: #ffffee;
font-size: 14px; font-family: verdana, arial, helvetica, sans serif; }
This id specifies the main body of the page, everything below the title in this case. Padding here allows spacing of the paragraphs from the edges of the surrounding box. The background colour has been specified by supplying a 6 digit RGB value – we will look at RGB values in a later article. The font-size is set to 14 pixels and the font set to verdana, but it will use arial or helvetica, if the browser will not support verdana – if neither of those is available, then it will use the default sans-serif font.
.setpink { background-color: pink; }
This defines a class ‘setpink’, note the leading stop ‘.’. A class is similar to an id but, whereas an id can only apply to 1 object on the page, a class can apply to more than one object so that we could make more than 1 paragraph pink, if we wanted to.
.setright { float: right; }
This defines a class for us to apply to the image on the page. ‘float: right;’ will cause the object to be positioned on the right hand side of the container, allowing in this case the text to flow around it on the left.
Now that we have our styles defined, we can go into the main body of our webpage and use them.
The first element in our webpage body is the mainpage div. This is a pair of tags which effectively enclose our entire page. The ‘#mainpage’ style defined above has already determined how this will look and where it should be placed, so all we have to do is associate that definition with this div by using the id attribute. Note that the value of all attributes in HTML tags (but not in style sheets) need to be enclosed in quotes.
The mainpage div block contains our page heading, enclosed by tags. We could have specifed how this would appear in the style sheet above, but we have allowed the default settings to be applied.
Enclosed completely within the mainpage div and below the page heading we have the pagebody div. This has deliberately been made a different colour so that it is easy to see how the mainpage encloses the pagebody; notice the margin between the two – this has been provided by the 10px padding specified by the mainpage style. The main purpose of the pagebody div is to set the font to be used in the enclosed paragraphs. The pagebody also includes the image which has been floated to the top right of the pagebody. This has been done by quoting the ‘setright’ class for the image. We have made this a class rather than an id because this would enable us to use this again later in the page for another image. Remember, you can use a class any number of times on a webpage, but you can only use an id once.
Note that the padding specified for the pagebody has been applied not only to the paragraphs contained, but to the image floated to the right, as well.
The alt attribute in the image tag is mandatory, by the way. It is intended as explanatory text in the event that the image source file, quoted in the src attribute cannot be shown for some reason.
Then we have a number of paragraphs enclosed in
tags. The appearance of these paragraphs has again been modified slightly by the style sheet. This has been so that the default, which would have placed a margin above paragraphs, would have resulted in a large gap at the top of the page, so the margin between paragraphs is now applied below each paragraph.
One of the paragraphs is different. The class ‘setpink’ has been applied to change the background pink. Because this is a class, we could make the backgrounds of two or more of the paragraphs pink by quoting the same class. If we wanted to make the backgrounds of all of the paragraphs pink, we would not need the setpink class, but could specify a pink background for thetag instead.

You might also like More from author

Leave A Reply

Your email address will not be published.