Anda di halaman 1dari 16

Web designing Create a Basic HTML Template

We've produced a video to go with this lesson. It's recommended that you read the text below as well, though. The video is here: How to Create a HTML Template While you have the Windows Explorer or Finder screen open, you can save your current HTML skeleton as a template. That way, you don't have to type it all out every time you want a new web page. In your text editor, delete any text between your two TITLE tags. Now click File > Save As. From the Save As dialogue box change the name of your web page to template.txt:

Click Save to save the code as a text file. You will be returned to your text editor. Click File > Save As again. Now change the name of the file to newpage.html. In the Save As Type box in Windows, change it to All Files:

Save the file and switch to Windows Explorer or Finder. You should now see three pages:

One of these, the template is a text file rather than a HTML file. From now on, you can open the template text file, and repeat the process above: Click File > Save As, change the Save As Type box to All Files, then type a new name for your web page, not forgetting the html ending. There is a problem, however. If you were to double click your newpage.html file it would open up in your browser. But you will want to open it up in Notepad so that you can edit the file and make changes.

To solve the problem, you can add an item to the Send to menu in Windows (Macs will have an Open With right-click menu. Your text editor should be on there). This appears when your right-click the file:

In the image above, we have Notepad on the Send to menu. Selecting this item means that we can quickly open up the code in Notepad. To add an item to the Send to menu, switch back to your Explorer window. In the address bar at the top, enter the following: %APPDATA%\Microsoft\Windows\SendTo Press the Enter key on your keyboard and you will be taken to the Send to folder:

You can now drag and drop items from your Start menu to this folder. (Make sure Windows Explorer doesn't fill the whole of your screen by clicking the Restore Down icon just to the left of the Red X.) Click your Windows Start button. From the All Programs > Accessories menu, locate Notepad again. Hold down your left mouse button on Notepad. Keep it held down and drag across to your Windows Explorer and your Send To folder:/

Let go of your left mouse button and Notepad will be on your Send To menu when you rightclick a file in Windows Explorer.

Now you can quickly open up your HTML code in Notepad and makes changes to it. To recap this section, here are the important points again:

The HTML skeleton is the foundation on which most internet pages are based HTML is written in Tags Tags usually come in pairs A Tag is a word surrounded by angle brackets, e.g.: <HTML> </HTML>, <HEAD> </HEAD>, <TITLE> </TITLE> A pair of tags has as a starting Tag and an end Tag. The end Tag is preceded by a forward slash Add <!DOCTYPE HTML> to the top of all your HTML pages.

Basic HTML - Heading Tags


You can have a nice big heading on your web page quite easily. This is done with the H tags. The biggest size heading you can have is H1. If you want smaller sized headings then you change the number after the H. You can have up to 6 different sizes. All headings need to go between the two BODY tags. Try it out for yourself. Open up the code for your firstwebpage.html file, if it's not already open. (If it's not, you can now right-click and Send To > Notepad. If you didn't get this working then simply click File > Open from the menu at the top of your text editor.) Add the following just below your first BODY tag: <H1>A Size 1 Heading</H1> Incidentally, tags are not case sensitive. So you can have this: <h1>A Size 1 Heading</h1> Or even this: <h1>A Size 1 Heading</H1>

Paragraph and BR breaks


If you've ever used a word processor like Microsoft Word then you know that to start a new paragraph all you need to do is to hit the Enter key on your keyboard. The cursor will then move down, ready for you to start typing. In HTML, however, you can't do this. If you want to start a new paragraph, you have to use the P tags. To try it out, add the following just below your Heading (You can use your own text, though, rather than type out the Hamlet soliloquy): <P>To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing end them? </P> <P>To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd.</P> When you've finished, your HTML code should look like this: (Don't worry about the indenting, though. We did ours just so it would look nice in this book. Only one press of the spacebar is recognised in HTML, everything else is ignored, including indents and carriage returns.)

Note the P tags: <P></P>

You have to use the P tags whenever you want to start a new paragraph. Strictly speaking, though, you don't need the closing P tag. You can just do this to start a new paragraph: <P> To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing end them? <P> To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd. The result is the same. But in modern web coding, it's best to use the closing tag for paragraphs, so that you can add Styling rules. (You'll learn how to do this a little later.) Save your work and view the results in your browser. You should see this:

Notice the paragraphs breaks in the text. Notice, too, that although our code was indented, this doesn't show up in the browser. The browser will ignore all those indents we had, and any extra white space. If you want white space you have 'tell' the browser. You do this with the break tags, like P and BR (which you'll see soon).

As an exercise, try deleting the P tags in your code. Save and refresh your browser. Watch what happens:

Without the P tags the text just runs on. There is still, however, a paragraph break after the heading, even though we deleted all the P tags. This is because the H heading tags insert their own paragraph breaks.

The BR tag
The BR tag is used when you don't want a full paragraph break. The space between lines of text is then reduced. The BR tag doesn't need a closing tag, and can be just by itself. As an example, add the following to the end of your text (the BR part). <P>To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd. <BR> ... Rest of Hamlet's Soliloquy goes here </BODY> </HTML> Notice that we've deleted the end P tag for the second paragraph. If you leave it in, you'll get a double line break from the two <P> tags, as well as a single line break from the <BR> tag. Save your changes and switch to your browser. Press F5 to refresh the page and the results should look like this:

Formatted: Font: (Default) Times New Roman, 12 pt

HTML Lists
You can insert a bulleted list onto your page with HTML. There are two types of lists to choose from: Ordered List and Unordered. An Ordered list is one that uses number, letters, roman numerals, or a combination. Like this:

An Unordered List is one that uses bullets. Like this:

To get a list with numbers or letters, this tag is used: <OL> </OL> The OL stands for Ordered List, of course. But those two tags won't get you a list. You need to include another tag, the LI tag. LI stands for List Item. You need one pair of LI tags for every item in your list. So for three items, the code is this:

(Strictly speaking, you don't need the end LI tags.) To get the bulleted list, the UL tag is used. UL stands for Unordered List. It's used in exactly the same way. Just substitute the OL tags for UL tags. For both the Ordered and Unordered list, you can specify which type you want to use for the bullets or numbers. The types are these:

You use the Types like this:

You can specify a start, as well. But the start has to be a number:

So that List will be uppercase letters, starting at the 7th letter, or 'G'. There are three types of bullets you can use for unordered lists: Disc, Circle, and Square. You use them like this:

The default is Disc. So if you want round black circles for your bullets, you can miss the TYPE attribute off:

And here are the results in a browser:

An Introduction to Cascading Style Sheets


HTML was not intended to be a graphic design tool. It was set up as a simple way to display text in a browser, rather like a word processor displays text on a page. Tags were added over the years in order to add a bit of colour and life into the basic white page (actually, grey at first). So along came things like images, tables, frames, and forms. These could all be presented on the page using straight HTML code. Web designers clamoured for a better way to present their work on a web page. Plain HTML just wasn't enough. After all, with HTML, in order to get text or an image exactly where you want it, you have to resort to complicated tables to force the alignment. And suppose you want colour behind a single paragraph of text, and not have to colour the entire page? Very tricky with straight HTML. And what about hyperlinks? Is there any way, with HTML, that we can turn the underline on and off?

These questions, and many more, were finally addressed by the introduction of Cascading Stylesheets. A Style is, basically, just another way to manipulate elements on a page, in order to bring a spark of life into your web design.

What is a Stylesheet?
If you were using a word processor like Microsoft Word, you could tell the word processor how you want blocks of text to be formatted. For example, all of your page Headings could be in 28 point Times, bold, and coloured red. If you wanted the same Heading again, you can just click a drop down list and select the Heading style you set up. Using straight HTML, you can't do that. There's no way to apply the same formatting with a single Tag. Cascading Stylesheets, however, let you do precisely that ' change whole blocks of text with a single tag. This not only makes your code easier to read, it is also very simple to change all the formatted blocks of text to say a different font size or font colour. For example, in HTML, if you want to set the first paragraph of every page to bold and italics, you'd have to do this for every single paragraph that needs it: <P> <B><i>This is the first paragraph on page One. The same font styles are needed for each page on my web site.</i></B> </P> With Stylesheets, you can get rid of all that code, and place it in the HEAD section of your page. You would then just apply the Style to any paragraph that needs it. Like this: <P Class = "FirstParagraph"> This is the first paragraph on page one. The same font styles are needed for each page on my web site. </P> The new code, I'm sure you'll agree, looks much cleaner. And if you decided that the text colour should be blue, you can just make one change to your Stylesheet code and all the first paragraphs of your pages would change. A stylesheet is set up by using the word STYLE in between two angle brackets. An end STYLE tag is needed to tell the browser to stop formatting the style: <STYLE> </STYLE>

Your stylesheet code then goes between the two Style tags. Here's a style that can change text blue: <STYLE> .Font1 { Color: Blue } </STYLE> <P Class =" Font1"> This is my text. </P> Although you may not understand the code layout yet, the point is that you can add other styles to the one above that we have called Font1. We can add a bold style and a size style: <STYLE> .Font1 { Color: Blue; Font-size: 24pt; Font-weight: Bold; } </STYLE> Now the part of the code where we applied the style (P Class = Font1) will have its text updated. We don't have to make any changes at all to the P part of the code. So a style is way to change blocks of code (or even individual words) and apply formatting to the block as a whole. You don't need individual HTML tags in the BODY of your pag

Cascading Style Sheet Rules


We've produced a video to go with this lesson. It's recommended that you read the text below as well, though. The video is here: Cascading Stylesheet Rules

A Cascading Stylesheet rule tells the browser what the HTML looks like, and what it should do. A rule can dictate what just one HTML tag should look like, or you can construct your own rule to be applied as and where you want it. For example, a rule can be set up that tells the browser to format every <P> tag so that its first line is indented. Or you could construct your own paragraph rule, and just apply the style to certain paragraphs, not all paragraphs. There are three parts to a Rule: The Selector, the Property, and the Value.

The Selector
There are three different kinds of CSS Selector: An HTML selector, a Class selector, and an ID selector. An HTML Selector is the text part of an HTML tag. The complete paragraph tag is <P>. So its Selector is just P ' in other words, strip the angle brackets off and you get the HTML Selector. A Class Selector is one you set up yourself, to be used anywhere on your page. The Font1 from our STYLE example above was a Class Selector. We picked the name ourselves and then applied the style to some text on the page. An ID Selector is similar to a Class selector, but you use them to identify a particular element, a text box element on a form, for example. Here's an example of what all three selectors look in a STYLE tag.

The first one, H1, is the HTML Selector. Notice that it has had its angle brackets removed. With an HTML selector, all the HTML tags on the page will be formatted in the style you have set. So for H1 above, all the text between the <H1></H1> tags on the page will now be in Red.

The second one, .NewFont, is the Class selector. Note that a class selector must start with a full stop (period). Then you type the name for your selector (anything you want). No space is added between the full stop and the name of your selector. The third one, #NewTextboxColour, is the ID selector. An ID selector starts with the hash/pound (#) symbol. You then type the name you want to use for your ID selector. Again, no space is added between the symbol and the name of your selector.

Property and Value


Once you have set up your Selector, you then define the Properties and Values for that selector. The Property for the selector is the thing you're trying to change. Examples are: Font, Color, Background, Margin, Text. The Value for the selector is the new setting for the property. For example, for our COLOR property, we can set it to a value of an actual colour (red, blue, yellow), or a colour code (#FFFF00, #000000). The property and the value are enclosed in curly brackets { }. The syntax for the whole thing would then be: Selector {Property: Value} An example is: H1 {Color: Red} H1 is the selector, Color is the property, and Red is the value of the property. Note the colon ( : ) after the Property. This is used to separate a Property from a Value, so that the browser knows which one is which. If you want to add more than one property and value, there are two way to do it: all on one line, with each pair of properties and values separated by a semi-colon ( ; ). Or you can put each pair of properties and values on multiple lines separated by a semi-colon ( ; ). Like this: H1 {Color: Red; Font-weight: Bold; Font-Size: 16pt;} The multiple lines version is this:

The multiple lines version is easier to read. So, to sum up:


A CSS rule has three parts, a Selector, a Property, and a Value The Selector can be a HTML selector, a Class selector, or an ID selector You separate the Property and Value from the Selector by enclosing them in curly brackets, a left curly bracket first { and a right curly bracket to close the rule } A Property is separated from a Value by a colon ( : ) If you're using more than one pair of properties and values for the same selector, separate them with semi-colons ( ; )