Your page looks bare doesn't it? Well, we can fix that! Time to liven it up a bit, by adding some colour. Colour Colours can be added into most HTML tags, including body (for background and text), horizontal rule lines, links colours, font, tables and more. There are several ways to specify a colour. The easiest one is to just specify a colour by name. Colour names require a higher version of browser - one that can read HTML 4.0 standard. There are 16 colour names you can use, like "silver", "magenta", "aqua" or "maroon". For more control over the colour though and so they will be recognized by more browsers and visitors (cross-browser compatibility), you should use the hexidecimal number. The hexidecimal colour is a six digit number prefixed with the # sign. The 6 digits allow two digits for each of the three colours of red, green, blue or RGB. The first two digits are the amount of red, the second two the amount of green and the last two the amount of blue in your colour. F is for on and 0 is for off. So: #FF0000 gives you red, #00FF00 gives you green #0000FF gives you blue. #FFFFFF (all on) is white and #000000 (all off) is black. You will find in time that your favourite colour codes live in the back of your head, but for now you can use a colour chart. Adding Colour as a background Let's add a background colour or BGcolor. You already know the <BODY> tag. To get a background colour, you add a colour code, or colour attribute, to your body tag like this. Instead of closing the tag after the word BODY, you add an additional piece of information. In this case background colour or BGCOLOR: Note: the spelling colour is the American spelling, i.e., color for all HTML coding <BODY BGCOLOR="#000000"> Notice the quotation marks ( " " ). Whenever we add a colour, text or image we will define it by adding the " and " after the object we will be using. The colour I used was black. Lets make it a light colour to start until we add a text colour. Note: if you do not add colour attributes to your body tag, the browser will automatically give you a default colour of a white background and your text will be black. EXERCISE 1.2 1. Go back to your file manager. Select the page you created earlier and select edit. Add a BGCOLOR into the <BODY> tag as shown above. Remember that if you choose #000000 (black), you will not see your text because the text is automatically black (we will show you how to change that later!). Example: <BODY BGCOLOR="#00FF00"> Save your page, and take a look at what you have in the preview link. Don't forget to save your work. So, you have now learned how to make a simple HTML document, how to add a background color, and how to separate your text with a paragraph tag <P> Easy eh! Headings: Headings are some of the most important tags within the BODY of your HTML document. You will usually use a heading to tell what the following section of your page is about. The opening tag for a heading is <h1> and the closing tag is </h1> from 1 to 6 (1 being largest, and 6 being smallest). So, <H1>Area 52 I Believe </H1> creates: Area 52 I Believe<H2>Area 52 I Believe </H2> creates: Area52 I Believe<H3>Area 52 I Believe </H3> creates: Area52 I Believe<H4>Area 52 I Believe </H4> creates: Area52 I Believe<H5>Area 52 I Believe </H5> creates: Area52 I Believe<H6>Area 52 I Believe </H6> creates: Area52 I Believe...the smallest being h6. With the heading tag, you do not need to add a <P> paragraph tag since space will be provided by the heading tag. ASSIGNMENT NO. 1 OK, time for your assignment. *grin* With the knowledge you have acquired, create an HTML page using the four basic tags and add a background colour into the body tag . Add some text and use at least one heading. Don't forget to add a title to your page. Example: <HTML> <HEAD> <TITLE>This is my new page</TITLE> </HEAD> <BODY BGCOLOR="#00FF00"> <H1> Area 51 I Believe</H1> <P>This is my new page, I will be learning a whole lot. Far more then just a BG color! <P>I am adding a new paragraph here, so my words are not all cluttered together! </BODY> </HTML> When you have finished creating your page, please save your work TIP: Always use the full address by including the http:// in front of your web page address. This will create a hyperlink - a link that potential visitors just have to click - and it increases their convenience and likelihood that they will visit your page. Also, always double check the address after you have typed it. It must be exactly right to work (spaces, capitalization, etc.). Lessons created by "Odona".2008/2009 |