Adding Graphics
Wallpaper
Remember the Header section <head></head> tags in
our example page that we've ignored so far?
Well, we're about to start adding information here.
The information we are going to add will relate to the way we want our page displayed - what background colour the page should have; what colour the text should be etc.
This sort of information is known as the page STYLE and can eiither be stored inside the web page markup itself or as a separate file. We'll be using the former method for now.
Open up your example web page in a text editor.
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>
Now add the following immediately BEFORE the </head>
tag:
<style type="text/css">
body {
background-colour: #ccffcc;
color: #003300;
}
</style>
Your markup should now look like this:
<html>
<head>
<title>My First Page</title>
<style type="text/css">
body {
background-colour: #ccffcc;
color: #003300;
}
</style>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>
Now view the page in your web browser.
The background should now be a plain, pale green and the text is very dark green.
So, how did we do this?
<style></style>
The opening tag <style> tells the browser that it is about
to receive some information relating to colour and text
formatting. The addition of type="text/css" tells it
what form that information will be in.
CSS is short for Cascading Style Sheet - the W3C
recommended method for incorporating such information into a
web page.
Like most tags, there is an appropriate closing tag (</style>)
to indicate when we've finshed supplying this information.
Inside the <style></style> tags
All style information follows the same format. First you tell the browser what part of the page you intend to describe. In our case, we are describing everything between the <body> </body> tags, so we begin by using the word:
body
The rest of the information gives specific instructions to the browser on what sort of display we want and is always enclosed between { and }.
Each line should include a single 'item', a colon (:), a space (for human readability), the colour or formatting information and, finally, a semi-colon (;).
For example:
background-colour: #ccffcc;
This tells the browser that the background of all text is to be set to pale green. Colours are referred to using hexidecimal codes ie a # followed by six letter and, or, numbers. You can find a list of colours and their associated codes here.
color: #003300;
This tells the browser that all text is to be displayed in dark green. Note the spelling of 'color' rather than 'colour'.
Add this altogether and you should end up with:
body {
background-colour: #ccffcc;
color: #003300;
}
Wallpaper
You can have a wallpaper/image background for your web page but be careful that it doesn't make the text difficult to read!
Download this background file by selecting the link and the using Save Target As.. and place it in the same folder as your web page.
Edit your style information as follows:
<html>
<head>
<title>My First Page</title>
<style type="text/css">
body {
background-colour: #ccffcc;
background-image: url(paint-blur.gif)
color: #003300;
}
</style>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h3>This is my very first web page.</h3>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>
Save and view your web page. You should now have a lightly patterned, yellow, background!
Adding Other Images
In HTML, images are defined with the <img> tag.
The <img> ELEMENT has a composite tag, which means
that one tag contains all the attributes and the closing slash (/).
To display an image on a page, you need to use the SRC
attribute. src is an abbreviation of "source". The
value of the src attribute is the URL (location) of the image you want to
display on your page.
The syntax of defining an image is as follows:
<img src="the_location_of_the_image" width=
"how_wide_it_is_in_pixels" height=
"how_high_it_is_in_pixels" alt=
"what_to_display_if_the_image_cannot_be_viewed" />
The location should be the web address where the image is stored.
is in the main images folder on this site and is defined in the markup for this page as:
<img src=" http://www.blackwidows.co.uk/images/logo.gif width="80" height="80"
alt="Black Widow Small Logo" />
The browser places the image where the image tag occurs in the markup of the document. If you place an image in your first paragraph markup, it will be displayed in the first paragraph. If you place it in the second paragraph markup, it will be displayed in the second paragraph etc.
All images should always be placed with BLOCK ELEMENTS
such as <p></p> tags
Note: Images can be useful in decorating a web page or provide additoinal information in themselves, However, every images you place in an HTML document will need to be downloaded before your page can be displayed properly. Loading images take time, so use images sparingly.
Warning
When adding images, do not be tempted to link directly to other people's images on their site to display on your web pages. This is known as Bandwidth Theft and can be viewed as serious abuse. After ensuring that you are allowed to copy such an image (if neccessary email the site owner), save a copy on your own site and link to it there.