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.
|
