Dreamweaver Tutorial – Beginners HTML
November 17, 2008 at 11:42 am 1 comment
Dreamweaver Tutorial videos for users who prefer to learn visual at their own pace. Using practical working examples and clearly presented lessons you will find that learning even the most complex aspects of Dreamweaver is as simple as following step-by-step stages Dreamweaver CS3 Tutorial Videos .
Quick recap
In the last beginners HTML tutorial we learnt that HTML is made up of tags. These tags are enclosed in angular brackets and determine the layout and structure of your webpage.
We made a basic webpage with all of the required HTML that you will need on every page you ever write. Remember – all your tags need a matching closing tag, and it is important that you get the tags in the right order. Look back at the last article if you need a reminder.
This Article along with all coding examples and images can be donwloaded in zip format
HTML heading Tags
Your webpage is no good without any content. So, starting from where we left off last time, let’s add some headings and some content.
To define headings in HTML we use the <h1> tag. This stands for “Heading 1” – there is also <h2>, <h3>, etc, right the way down to <h6>. The smaller the number, the more important the heading is and the bigger it will be displayed. So, for example, you could use <h1> for your main headings then <h2> for your sub-headings. See below for the code from our last article with some headings & text.
<html> <head> <title>Page Title</title> </head> <body> <h1>First Heading</h1> <p>Some introductory text</p> <h2>Sub Heading</h2> <p>Some specific text relating to your first sub heading</p> <h2>Second Sub Heading</h2> <p>Some more text</p> </body> </html>
If you look at this in your browser you will see something like the following:
Let’s make it look better
The page still looks a bit dull, so we’ll add some colour and also learn to change the font.
There are two ways to do this. First we’ll look at the quick and dirty way then we’ll learn the proper way! Let’s make the H2 headings (the sub headings) blue, and change the font to Comic Sans MS. For this we’ll need the <font> tag. We’ll also need something called attributes, which we haven’t seen before. These control a particular property or option relating to a tag. Look at the example below and it will all make sense!
<html> <head> <title>Page Title</title> </head> <body> <h1>First Heading</h1> <p>Some introductory text</p> <h2><font face=”Comic Sans MS” color=”blue”>Sub Heading</font></h2> <p>Some specific text relating to your first sub heading</p> <h2> <font face=”Comic Sans MS” color=”blue”>Second Sub Heading</font> </h2> <p>Some more text</p> </body> </html>
You’ll see that in the two <font> tags we have used two attributes:
- color=”blue”
- face=”Comic Sans MS”
Always remember to use the quote marks, and don’t forget to close the font tags. Then open it up in your browser to check it worked.
See what happens if you take one of the closing <font> tags away – have a go. You’ll find that the whole page, starting from the opening tag, is shown as blue Comic Sans!
The proper way – CSS
CSS stands for Cascading Style Sheets. Imagine that you had a website with 20 pages each with a few H2 headings, and you decided you wanted to change the font and color like we just did. You could easily have 50 <font> tags to write – this would take for ever and also there would be a high chance of you making a mistake somewhere along the line. The font tags that we used in the last example don’t follow the new, strict XHTML mark-up, so why did we show it? Well lots of websites still use them and it’s important that you have an understanding of both present and past versions of HTML mark-up.
CSS allows you to set the style – font size, colour, bold, and lots more – for more than one area in one go. Each of these controllable options is called a property, and whatever you set it to be is called the value. In the example below we will set all H2 headings to be blue and in Comic Sans MS font. All CSS goes inside the <style> tags as shown.
<style>
h2 { color: blue; font-family: Comic Sans MS; }
</style>
As you can see from above, within the <style> tag the word h2 is followed by curly brackets. Then we have the name of the property we want to set (color), then a colon (:), then a space and the value for that property (blue), then a semi-colon (;). You can repeat this for as many properties as you want to, then finally we need to close the curly brackets.
The style tag is not part of what is actually displayed on the webpage, so it needs to go within the <head> tags, like so:
<html>
<head>
<title>Page Title</title>
<style>
h2 { color: blue; font-family: Comic Sans MS; }
</style>
</head>
<body>
<h1>First Heading</h1>
<p>Some introductory text</p>
<h2>Sub Heading</h2>
<p>Some specific text relating to your first sub heading</p>
<h2>Second Sub Heading</h2>
<p>Some more text</p>
</body>
</html>
You’ll also see in the code that I have deleted the <font> tags as we no longer need these. Open it up in your browser and check that it works – it should look something like this:
A challenge
Can you repeat the above for H1 tags? Let’s try and make them red, a bit bigger, and also in Comic Sans MS. The only clue you get is that the property that controls size is font-size, and the value you need to use is 250%. We’ll explain this in a moment. Feel free to read on when you’ve got it.
The answer
Easy? Good! You should have something like this:
<style>
h1 { color: red; font-family: Comic Sans MS; font-size: 250%; }
h2 { color: blue; font-family: Comic Sans MS; }
</style>
We could also have used an exact size like you might in Microsoft Word – e.g. “font-size: 16pt;” (meaning 16 points). However, think for a second about how people access the internet. Some are on handheld PCs, laptops, or even mobile phones. People who are partially sighted might have their browsers set to increase all font sizes to make it easier to read.
By using an exact size you would mess all this up – people on their mobile phone would find your heading not fitting on the screen, and people who are partially sighted would find your heading the same size as the rest of the text.
By using 250% as the size, this simply means 250% times the default text size on the page (i.e. the size that your main content is displayed in, without any heading tags or CSS to change the size). If your main text was size 10 this would be size 25.
Take a look at your page in your browser. It should now look like this:
There’s more…
Look back at our original reason for introducing CSS. It was to enable you to change the font, colours, etc of all of your headings across your entire website.
At the minute we only have one page, so that objective is fulfilled. But as soon as we add more pages, you’ll need to duplicate the CSS text at the top of each one. Then if you need to change it you’ll have to alter it on every page. Better than changing it for every heading, but not good enough.
So, let’s use something called external CSS. Make a new file in your editor and put the code from inside the <style> tags in it. You don’t need the actual tags. Then save this page as “style.css”. Remember, like in the last article, you will need to choose “CSS” or “All Files” from the file type box to make this work. Make sure you save it in the same folder as your HTML file.
Then, in the HTML file, take out the entire style section (starting with <style> and finishing with </style>), and replace it with this:
<link rel=”stylesheet” type=”text/css” href=”style.css” />
What do you notice that’s unusual about that tag? There’s no closing tag. On a very small number of tags like this, there is never anything that you could put “inside” it, so a closing tag wouldn’t make sense. However, to satisfy the HTML rules we must still close the tag, so we put a slash at the end, just before the closing angular bracket. There must be a space immediately before the slash. We’ll look at other exceptions like this as they come up.
Back on topic…open up the HTML page in your browser and it should look exactly the same as it did before, but you now know that all the style code
is stored outside of the page.
A few other style attributes
That’s it for now, but I want to leave you with a few other style properties and attributes to play with:
- font-weight: bold;
- font-style: italic;
- text-decoration: underline;
The property names don’t make all that much sense but once you get the hang of them they will be easier to remember. See if you can use these in your headings.
Next time we’ll put our new external CSS to good use by making some other pages and linking between them.
Reference
- <h1>, <h2>…<h6> – headings, smaller numbers are bigger or more important headings
- <style> – encloses the CSS that controls the appearance of your page. You’ll need these attributes: (as well as the ones I gave you in the previous section to experiment with yourself)
- color: red;
- font-family: Comic Sans MS;
- <link> – allows you to link your HTML page to an external CSS file.
I’ve not included the <font> tags in the reference because you now know a better way of setting fonts. It’s important for you to know the font tag exists – particularly as when looking at example code that someone else has written, if it is quite old it may well use <font> tags – but try not to use it if you can help it.
Entry filed under: dreamweaver. Tags: dreamweaver cs3 tutoral, HTML Tutorial.
1. Beginners HTML Tutorial - Web Design Basics : Computer Training - Video Tutorials | November 17, 2008 at 11:45 am
[...] Beginners HTML Tutorial part 2: look at some formatting options to give a bit more life to your page, by introducing CSS. [...]