Webdesigning (HTML and CSS) |
HTML |
|
<A>text</A> |
Anchors are one of the most used and most important tags. |
Common attributes: |
HREF="page.html" |
Links to a page in the same folder |
HREF="http://www.pc-wizard.eu" |
Links to a website on the internet |
NAME="name" |
Defines a certain place in a page by name. The text between the anchors isn't clickable |
HREF="#name" |
Links to the position in the same page that's marked with the NAME attribute.
It's also possible to create full links that jump to a defined position: <A HREF="page.html#name">text</A> |
TARGET="framename" |
The page specified in the link will be opened in the specified frame name. |
<A HREF="example.html" TARGET="content">Example</A> |
Creates a link that opens the webpage example.html in the frame called content |
<A NAME="example">Example</A> |
Creates an anchor-point to which can be linked |
<A HREF="#example">Go to the example</A> |
Creates a link to an anchor-point called example |
|
|
<IMG> |
Images are important parts of webdesigning. They can be used for creating a nice layout
and making a text more readable.
|
Common attributes: |
SRC="photo.jpg" |
The path and source of the image file |
ALT="description" |
This text will be shown before the image is loaded, or when it cannot load
This text is also shown when you move your mouse over the image
|
WIDTH="200" |
Defines the width of the image. You can use numerical values, but also percentages.
If you use a percentage, then it will calculate the percentage from the original image size.
If you don't specify a width, the browser will use the image's original width
|
HEIGHT="100" |
Defines the height of the image. You can use numerical values, but also percentages.
If you use a percentage, then it will calculate the percentage from the original image size.
If you don't specify a height, the browser will use the image's original height
|
LOWSRC="photo.jpg" |
Defines the low-resolution image file that will be loaded prior to loading the original,
high-resolution image file when using a slow internet connection
|
HSPACE=5 |
Defines the number of cleared horizontal pixels between the image and the text (left and right sides)
|
VSPACE=5 |
Defines the number of cleared vertical pixels between the image and the text (top and bottom)
|
BORDER=2 |
Defines the thickness ofthe border around the image. Zero (0) means no border
|
ALIGN=2 |
Specifies the alignment of the image. Options are:
left
|
The image is placed on the left side of the containing element.
You can use <BR CLEAR=left> to keep the left side of the image clear of text.
The text will continue after passing the image.
You can use <BR CLEAR=all> to keep both sides of the image clear of text
|
right
|
The image is placed on the right side of the containing element.
You can use <BR CLEAR=right> to keep the right side of the image clear of text.
The text will continue after passing the image.
You can use <BR CLEAR=all> to keep both sides of the image clear of text
|
texttop
|
The top of the image levels with the top of the text
|
top
|
The image is placed at the top of the containing element
|
middle
|
The image is centered to the bottom of the text
|
absmiddle
|
The image is centered to middle of the largest element
|
bottom
|
The bottom of the image is leveled with the bottom of the textcentered to middle of the largest element
|
baseline
|
The image is centered to middle of the largest element
|
absbottom
|
The bottom of the image is leveled with the bottom of the largest element
|
|
<IMG SRC="photo.jpg" WIDTH="300" HEIGHT="200"> |
Show the image at a size of 300 by 200 |
<IMG SRC="photo.jpg" BORDER="0" ALIGN="left"> |
Shows the image without a border and aligned to the left |
<IMG SRC="photo.jpg" VSPACE="5" HSPACE="5"> |
Shows the image with a free space of 5 pixels on all sides |
|
|
<OL>list options</OL> |
Creates a numbered list for an enumeration. |
Common attributes: |
START=n |
The number the list will start with. n represents the number. |
<LI> |
Creates a list item |
TYPE= |
Defines the enumeration type. You can choose from the following list:
A Capital letters
a Lower case
I Roman numbers
i small Roman numbers
1 normal numbers
|
<OL>
<LI>This is an enumeration
<LI>This is the second row:
<OL TYPE=a>
<LI>This is a sublist
<LI>This is a sublist
</OL>
<LI>This is the third row
</OL>
|
- This is an enumeration
- This is the second row:
- This is a sublist
- This is a sublist
- This is the third row
|
|
|
<HR> |
The HR tag insert a horizontal line. |
Common attributes: |
SIZE=5 |
Specifies the height of the line in pixels |
WIDTH=100 |
Specifies the width of the line. Values can be in pixels or a percentage.
If you specify a percentage, it will calculate the specified percentage based on the size of the containing element
|
ALIGN=LEFT |
Align on the left side |
ALIGN=RIGHT |
Align on the right side |
ALIGN=CENTER |
Centre the line |
NOSHADE |
Shows a solid line without a shade |
<HR ALIGN=center SIZE=1 WIDTH=250>
<HR ALIGN=left SIZE=1 WIDTH=200 NOSHADE>
|
|
|
|