When you create a web page you will want to use different background and text colour's and to add images. This makes the site more attractive to visitors and generally makes the website look better. Take care not to make the text and background colour the same!
In this excercise we will change the background colour of your website you created in Chapter 2, to blue.
To do this you would add the following HTML code into the body of your text file. (To open your first website as a text file and not HTML, open the HTML file and select "View>Source"):
To do this you would add the following HTML code into the body of your text file. (To open your first website as a text file and not HTML, open the HTML file and select "View>Source"):
<body bgcolor = "#0000FF">
Notice how instead of saying <body bgcolor = blue> We have used some strange looking code.
Dont worry this is called "Hexadecimal colour" and can be used for inserting complex colours into your website.
Click HERE for a full list of colours and their Hexadecimal values.
Dont worry this is called "Hexadecimal colour" and can be used for inserting complex colours into your website.
Click HERE for a full list of colours and their Hexadecimal values.
If you are finding all of these different colour codes confusing dont worry!
As well as using the Hexadecimal method, you can also use good old fasioned English! Meaning that placing the following code into your HTML file would have the exact same effect:
As well as using the Hexadecimal method, you can also use good old fasioned English! Meaning that placing the following code into your HTML file would have the exact same effect:
<body bgcolor = "blue">
When inserted into your code, the code should look like this:
<html>
<head>
<head>
<title>My Own Home Page </title>
</head>
</head>
<body>
<body bgcolor= "blue">
<H1> I am Your-Name and this is my web Page!</H1>
</body>
<body bgcolor= "blue">
<H1> I am Your-Name and this is my web Page!</H1>
</body>
Test your file by saving it, remember to save it as "index.html" and make sure you slect "All Files" from the save as type box.
Your website should now look something like this:
Now that we have our background colour sorted out, we can now alter the text colour.
We go about doing this in the same way. This is the code we need to insert into our webpage:
<font color="Red">Text that you want to make red goes here</font>
We go about doing this in the same way. This is the code we need to insert into our webpage:
<font color="Red">Text that you want to make red goes here</font>
Notice that you must put </font> after the text has ended. If you didnt insert the </font> then your entire document would have the text as red. This isnt to important for now but if you ever have more than one text colour on a page this may become a problem.
Here is how your code should now look:
<html>
<head>
<head>
<title>My Own Home Page </title>
</head>
</head>
<body>
<body bgcolor= "blue">
<font color="Red">
<H1> I am Your-Name and this is my web Page!</H1>
</font>
</body>
<body bgcolor= "blue">
<font color="Red">
<H1> I am Your-Name and this is my web Page!</H1>
</font>
</body>
IMPORTANT TIP: A common error when coding with colours and HTML in general are simple spelling mistakes.
Remember that when typing "color" it is the american spelling, make sure you dont use the english spelling "colour" or your HTML wont work.
Remember that when typing "color" it is the american spelling, make sure you dont use the english spelling "colour" or your HTML wont work.
Now lets move onto Chapter 4 and look at adding images
0 comments: