|
HTML
Backgrounds
A good
background can make a Web site look
really great.
Backgrounds
The
<body> tag has two attributes where
you can specify backgrounds. The
background can be a color or an
image.
Bgcolor
The
bgcolor attribute sets the
background to a color. The value of
this attribute can be a hexadecimal
number, an RGB value, or a color
name.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
|
The
lines above all sets the background
color to black.
Background
The
background attribute sets the
background to an image. The value of
this attribute is the URL of the
image you want to use. If the image
is smaller than the browser window,
the image will repeat itself until
it fills the entire browser window.
<body background="clouds.gif">
|
The
URL can be relative (as in the first
line above) or absolute (as in the
second line above).
Note:
If you want to use a background
image, you should keep in mind:
-
Will the background image
increase the loading time too
much? Tip: Image files should be
maximum 10k
-
Will the background image look
good with other images on the
page?
-
Will the background image look
good with the text colors on the
page?
-
Will the background image look
good when it is repeated on the
page?
-
Will the background image take
away the focus from the text
advanced
The HTML <font> Tag
With HTML code like this, you can
specify both the size and the type
of the browser output :
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>
|
Font Attributes
|
Attribute |
Example |
Purpose |
|
size="number" |
size="2" |
Defines the font size |
|
size="+number" |
size="+1" |
Increases the font size |
|
size="-number" |
size="-1" |
Decreases the font size |
|
face="face-name" |
face="Times" |
Defines the font-name |
|
color="color-value" |
color="#eeff00" |
Defines the font color |
|
color="color-name" |
color="red" |
Defines the font color |
HTML Styles
With HTML 4.0 all formatting can be
moved out of the HTML document and
into a separate style sheet.
How to Use Styles
When a browser reads a style sheet,
it will format the document
according to it. There are three
ways of inserting a style sheet:
External Style Sheet
An
external style sheet is ideal when
the style is applied to many pages.
With an external style sheet, you
can change the look of an entire Web
site by changing one file. Each page
must link to the style sheet using
the <link> tag. The <link> tag goes
inside the head section.
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
|
Internal Style Sheet
An
internal style sheet should be used
when a single document has a unique
style. You define internal styles in
the head section with the <style>
tag.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
|
Inline Styles
An
inline style should be used when a
unique style is to be applied to a
single occurrence of an element.
To
use inline styles you use the style
attribute in the relevant tag. The
style attribute can contain any CSS
property. The example shows how to
change the color and the left margin
of a paragraph:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
|
Style Tags:
NN: Netscape, IE:
Internet Explorer
|
Start Tag |
NN |
IE |
Purpose |
|
<style> |
4.0 |
3.0 |
Defines a style in a
document |
|
<link> |
4.0 |
3.0 |
Defines the relationship
between two linked documents |
|
<div> |
3.0 |
3.0 |
Defines a division/section
in a document |
|
<span> |
4.0 |
3.0 |
Defines a section in a
document |
|
<font> |
|
|
Deprecated. Use styles
instead |
|
<basefont> |
|
|
Deprecated. Use styles
instead |
|
<center> |
|
|
Deprecated. Use styles
instead |
The Meta Element
As
we explained in the previous
chapter, the head element contains
general information
(meta-information) about a document.
HTML also includes a meta element
that goes inside the head element.
The purpose of the meta element is
to provide meta-information about
the document.
Most often the meta element is used
to provide information that is
relevant to browsers or search
engines, like redirecting the user
to a new address, or describing the
content of your document.
Keywords for Search Engines
Some search engines on the WWW will
use the name and content attributes
of the meta tag to index your pages.
This meta element defines a
description of your page:
<meta name="description"
content="Free Web tutorials
on HTML, CSS, XML, and
XHTML"> |
This meta element define
keywords for your page:
<meta name="keywords"
content="HTML, DHTML, CSS,
XML, XHTML, JavaScript,
VBScript"> |
The
intention of the name and content
attributes is to describe the
content of a page.
However, since too many webmasters
have used meta tags for spamming,
like repeating keywords to give
pages a higher ranking, some search
engines have stopped using them
entirely.
|
