XHTML and Basic CSS for Beginners [#1]
Posted by Martin | Tagged as: HTML, XHTML and CSS, The Kickstart Guide to Making Money Online
Part 21: HTML for Beginners [#1]
You certainly don’t need to know how to build websites by hand in order to make money online. There are all kinds of programs available that will build a website for you – from point-and-click general sitebuilding programs like Dreamweaver or Frontpage to the excellent XSitePro, which has been designed with Internet marketers in mind. There is even a very good open source program called Nvu, that I’m told works very well.
All that HTML and CSS stuff is very much an optional extra.
So why is it then, that so many people learn at least a smattering of HTML?
Because there are times when your site isn’t displaying quite how you’d like, or when you want it to do something that isn’t immediately obvious how to achieve in your site builder software. Those times, it is really, really useful to be able to roll up your sleeves and wade into the site’s source code.
HTML is quite straightforward. It isn’t like a scripting language that forces you to learn all kinds of functions and expressions just to get a display online. HTML has a very simple syntax and a remarkably small list of commands to learn. And many of those are never needed.
In the next couple of instalments of the course I’ll take you by the hand and show you how to write a real working web page from scratch – using nothing more than the Notepad text editor.
You see, text is all that a web page is. You may see a graphical interface on your monitor, but all that eye-catching display is written in easy to follow text.
HTML stands for HyperText Markup Language and it was the single invention that turned the Internet into the World Wide Web.
There have been many versions of HTML over the years and people have added features and functions as the Internet has developed and needs have changed. The version that I’ll be teaching you here is, technically speaking, called ‘XHTML transitional’ with CSS styling. But you really don’t need to know why – just follow the rules and you won’t go far wrong!
What is a web page?
A web page is made up of two sections – the head section, where information about the page is passed to the browser so it knows what it is looking at, and the body section, where all the stuff you see on your monitor lives.
Everything in a webpage is wrapped up in things called ‘tags’ that tell the browser what sort of information is coming up and how to display it.
The first tag is the one that tells the browser that the document it is looking at is an html page, so naturally it is called the html tag.
Almost all tags come in pairs, an opening tag and a closing one (there are a few exceptions which we’ll cover later) and are always enclosed in angle brackets – there will be one at the front of the information they define and one at the end – so a basic web page will start with <html> and will end with </html> (closing tags are the same as opening ones, but with a forward slash at the front.
As I said, the document that makes up the webpage has a head section and a body section and they are defined by their own tags:
<html>
<head></head><body></body>
</html>
That’s it – a complete, webpage. If you were to put those few lines into Notepad and save them with a filename something like mypage.htm, you could upload it to your hosting space and it would be valid. Wasn’t hard, was it!
Note that HTML webpages can be saved with a file name that ends with either .htm or .html. Both work equally well.
Of course, the example is a web page that displays nothing and does nothing, so it is pretty useless, but fundamentally all web pages are just expansions on that basic model.
Let’s add some text so our new web page has something to display:
<html>
<head></head><body>
Here is some text in the body section
</body>
</html>
If I now save that as mypage.htm and upload it, what do you think will show up when I point my browser at mypage.htm?
That’s right – the browser displays ‘Here is some text in the body section’.
Take a look – http://www.imkickstart.com/course/html/mypage.htm
Boring, but one step up from a blank screen!
Now, the first thing to see here is that we have done nothing to tell the browser how we want that text to be displayed, so it just puts it on screen using its standard default settings. The default settings in the various browsers that people use may or may not be the same, so essentially we have no control over how people will view our words.
We can impose control – so that all browsers will show it the same way, by wrapping the text in a tag of its own and applying some styling to it.
The text is a new paragraph, so it makes sense to wrap it in a paragraph tag: <p>Here is some text in the body section</p>.
So that you can see one of the main effects of <p> tagged text, I’ll add another paragraph below it (see the code example below).
We still don’t know how any individual browser will be set up to display text within paragraph tags, and that is where CSS styling comes in.
In the head section, we add a <style></style> tag (remember, the head section is the place we pass messages to the browser).
Inside the style tag we define how we would like the <p> tag to be displayed:
<html>
<head>
<style>
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: red;
}
</style>
</head><body>
<p>Here is some text in the body section.</p>
<p>Here is a second paragraph.</p>
</body>
</html>
Oooh – is it getting complicated? Not if I break it down and explain what is going on here.
The <style></style> tag tells the browser that everything inside is to be taken as an instruction for how to display something.
In this case, the ‘something’ is whatever is put inside of a <p></p> tag.
The syntax of the styling block is straightforward:
1. First we say what we want to style – in this case the p tag (we don’t type the angle brackets because the browser knows that is what we are referring to.
2. After we’ve said what to style, we type an open curly bracket to hold all the different styling elements for that tag together.
3. Then we say what about the tags contents we want to style and how we want it to appear on screen. Each element has a name followed by a colon, the styling itself, and then a semi-colon to show that the element is complete.
4. It is usual to place each element on a new line, for ease of reading, but so long as the semi-colons are there to tell the browser which bit is which, you could put them all on one line if you prefer. It would be very messy to debug later though!
5. A closing curly bracket completes the styled section.
Here, I’ve told any browser that reads the page to show anything inside of a <p></p> tag using the verdana font if it exists on the viewer’s computer, otherwise to use the arial font. If the viewer is using a Mac, then I’ve specified helvetica (it is the arial equivalent for Macs) – and if none of those are on the viewer’s computer, to use whatever standard sans-serif font does exist. We can define as many fonts as we like, or have the patience to type out.
Next I’ve told the browser to display as 10-point text.
Finally, I’ve told it to display the text in red.
Here it is: http://www.imkickstart.com/course/html/mypage1.htm
See that gap between the two paragraphs? That’s the main effect of the <p> tag that is built in to all browsers that I alluded to above.
The <p> tag is the workhorse of web pages. You’ll use it a lot. But it are not the only tag you can use to determine the look of lines of text.
We can also use headline tags – there are 6 built in to the HTML standard – <h1>, <h2>, <h3> and so on, up to <h6>. All closed in the usual way.
Let’s see what they look like by adding some headlines to our page:
<html>
<head>
<style>
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: red;
}
</style>
</head><body>
<h1>Main headline</h1>
<h2>Secondary headline</h2>
<h3>Sub headline</h3>
<h4>Headine 4</h4>
<h5>Headline 5</h5>
<h6>Headline 6</h6>
<p>Here is some text in the body section.</p>
<p>Here is a second paragraph.</p>
</body>
</html>
Take a look here: http://www.imkickstart.com/course/html/mypage2.htm
Personally, I’ve never needed to use more than <h1>, <h2> and <h3> – I suspect that the others were originally included in the HTML standard so that official documents and scientific papers could be displayed online.
Of course, I don’t know which browser you are using, and so can’t be sure that you are seeing each of the headlines in the same way that I am. Hence we can – and usually should – fix the way they look by styling them with some CSS.
I would like the main headline of the page to be in bold and navy blue and the subhead (I’ll use <h2>, to be in blue and italic. Both will still be shown in verdana font for those who have it.
Here, then is the new code:
<html>
<head>
<style>
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: red;
}
h1 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 18pt;
color: navy;
font-weight: bold;
}
h2 {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 14pt;
color: blue;
font-style: italic;
}
</style>
</head><body>
<h1>Main headline</h1>
<p>Here is some text in the body section.</p>
<h2>Secondary headline</h2>
<p>Here is a second paragraph.</p>
</body>
</html>
http://www.imkickstart.com/course/html/mypage3.htm
Note that the <h> tags all automatically put a gap below their text, just like <p> tags do.
Modern HTML – this thing I’ve called ‘XHTML Transitional with CSS Styling’ differs from the original HTML in one major way – in the past, HTML didn’t have the <style> tag to allow all the ‘presentation’ instructions (the bits that don’t affect WHAT is being displayed, but do affect HOW it is displayed) to be kept separate. They had to be written into the flow of the text. So, for example, the main headline of our little example page would have had to be written like this:
<h1>
<font face=”Verdana,Arial,Helvetica,Sans-Serif”>
<font color=”Navy”>
<font size=”18pt”>
<b>Main headline</b>
</font></font></font>
</h1>
Quite a lot of extra code – and when you consider that all that has to be retyped for each headline and for each paragraph, you can see why writing web pages was quite tedious and resulted in bloated files sizes.
Old-style HTML had no memory. If you told it to display one paragraph in 10-point Verdana it wouldn’t remember that for the next paragraph – you’d have to tell it all over again – and again.
With the new way of doing things we can determine the ‘presentation’ data once – as we’ve done in the style tag in our example code, and then be comfortable that our display choices will be used throughout the entire web page.
And if we change our mind and want to have each paragraph display in a different font or size, we don’t have to change endless <font> tags throughout the script – all it takes is changing one line in the <style> section and the change is actioned everywhere.
Keeping presentation separate from content is wonderful thing and is the whole driving force behind the move to XHTML and CSS.
I think that’s probably enough for this lesson – we have learned about 11 tags already: html, head, style, body, h1, h2, h3, h4, h5, h6 and p. Also we’ve seen how CSS is written and looked at a few simple examples. When you consider that even the most adventurous website builders rarely use more than 30 or 40 HTML tags, you can see that this isn’t brain surgery – in fact you are already on the road to becoming an expert!
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
Dear Martin
Your HTML course is beautifully written and so clear. I am eagerly awaiting the next chapter!
Barrie Segal
Editor “The Insider’s Parking Ticket Newsletter”
http://www.appealnow.net
Dear Martin,
I, so very much, agree with Barrie’s comment about this lesson in HTML!
His reference to the next chapter has me wondering, however…is Beginners #2 still under construction?
It is listed on the blog but the link location takes me back to Beginner’s #1.
I am anticipating this second lesson with the same eagerness!
Val
Vancouver BC