Problem: Få tekst til at flyde rundt om et billede
http://www.echoecho.com/htmlimages08.htm
Løsning 1)
add align="left" or align="right" to the <img> tag
<img src="rainbow.gif"
align="left">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
<img src="rainbow.gif"
align="right">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
Løsning 2)
enter the image and text in an invisible table. Entering text in one column and the image in another
TABLES:
Using tables to divide the page into different sections is an extremely powerful tool.
Almost all major sites on the web are using invisible tables to layout the pages.
The most important layout aspects that can be done with tables are:
- Dividing the page into separate sections.
An invisible table is excellent for this purpose.
- Creating menus.
Typically with one color for the header and another for the links following in the next lines.
- Adding interactive form fields.
Typically a gray area containing a search option.
- Creating fast loading headers for the page.
A colored table with a text on it loads like a bullet compared to even a small banner.
- Easy alignment of images that have been cut into smaller pieces.
- A simple way to allow text to be written in two or more columns next to each other.
The importance of using tables for these layout purposes can't be overrated. However there are a few things to keep in mind when doing so.
Most important is, that the content of a table is not shown until the entire table is loaded. If you have extremely long pages, you should divide it into two or more tables – allowing the user to start reading the upper content while the rest of the page is loading.
The following properties can be added to the <table> tag:
Property
Description
align=
left
center
right
left align table
center table
right align table
background=filename
image inserted behind the table
bgcolor=#rrggbb
background color
border=n
border thickness
bordercolor=#rrggbb
border color
bordercolordark=#rrggbb
border shadow
cellpadding=n
distance between cell and content
cellspacing=n
space between cells
nowrap
protects agains linebreaks, even though the content might be wider than the browser window.
frame=
void,
above,
below,
lhs,
rhs,
hsides,
vsides,
box
removes all outer borders
shows border on top of table
shows border on bottom of table
shows border on left side of table
shows border on right side of table
shows border on both horizontal sides
shows border on both vertical sides
shows border on all sides of table
valign=
top
bottom
aligns content to top of cells
aligns content to bottom of cells
width=
n,n
n,n%
minimum width of table in pixels
minimum width in percentage of window size
Note:
Table properties are set for the entire table.
If certain properties are set for single cells, they will have higher priority than the settings for the table as a whole.
These settings can be added to both <tr> and <td> tags.
PROPERTY
DESCRIPTION
align=
left
right
center
aligns content to the left of cells
aligns content to the right of cells
aligns content to the center of the cells
background=filename
sets a background image for the cells
bgcolor=#rrggbb
sets a background color for the cells
bordercolor=#rrggbb
sets color for the border of cells
bordercolordark=#rrggbb
sets color for the border shadow of cells
valign=
top
middle
bottom
aligns to the top of cells
aligns to the middle of the cells
aligns to the bottom of cells
width=
n
n%
specify a minimum width for the cells in pixels
specify a minimum width for the cells in percent of the table width
height=
n
n%
minimum height of cells in pixels
minimum height of cells in percentage of table height
These settings are only valid for <td> tags.
PROPERTY
DESCRIPTION
colspan=n
number of columns a cell should span
nowrap
protects agains linebreaks, even though the content
of a cell might be wider than the browser window
rowspan=n
number of rows a cell should span
Note:
Settings for columns(<td> tag) have higher priority than settings for rows(<tr> tag).
Settings for cells (<tr> or <td> tags) have higher priority than settings for the table as a whole(<table> tag).
HTML BASICS
|| INTRODUCTION
||
WHY LEARN HTML?
TAGS
PAGE STRUCTURE
HEAD SECTION
BODY SECTION
HOW TO LEARN MORE
TAKE THE QUIZ!
HTML TEXT
|| INTRODUCTION
||
BASEFONT
FONT
TEXT LINKS
TEXT FORMAT
TEXT SIZE
TEXT LAYOUT
TAKE THE QUIZ!
HTML LISTS
|| INTRODUCTION
||
BULLETED LISTS
NUMBERED LISTS
TAKE THE QUIZ!
HTML IMAGES
|| INTRODUCTION
||
GIF&JPG IMAGES
INSERTING IN HTML
RESIZING
BORDER AROUND
ALTERNATIVE TEXT
SPACING AROUND
ALIGNMENT OF
TEXT WRAPAROUND
TAKE THE QUIZ!
HTML LINKS
|| INTRODUCTION
||
HOW TO MAKE A LINK
COLORS ON TEXT LINKS
LINK TARGETS
NO UNDERLINE
ADVANCED TEXT LINKS
IMAGE LINKS
IMAGEMAPPING
LINK WITHIN A PAGE
LINKS IN FRAMESETS
LINK TO NEW WINDOW
LINK TO EMAIL
TAKE THE QUIZ!
HTML BACKGROUNDS
|| INTRODUCTION
||
BACKGROUND COLOR
BACKGROUND IMAGE
FIXED IMAGE
TAKE THE QUIZ!
HTML TABLES
|| INTRODUCTION
||
BASIC TAGS
TABLE TAGS
ROW/CELL TAGS
TAKE THE QUIZ!
HTML FRAMES
|| INTRODUCTION
||
BASIC EXAMPLE
CREATING A FRAMESET
DEFAULT PAGES
BORDERS
RESIZEABLE WINDOWS
SCROLLBARS
LINKS WITHIN
EXAMPLES
TAKE THE QUIZ!
HTML FORMS
|| INTRODUCTION
||
EXAMPLES
CGI SCRIPTS
THE FORM TAG
FORM FIELDS
TEXT
PASSWORD
HIDDEN
TEXT AREA
CHECK BOX
RADIO BUTTON
DROP-DOWN MENU
SUBMIT BUTTON
RESET BUTTON
IMAGE BUTTON
QUICK REFERENCE
TAKE THE QUIZ!
HTML META TAGS
|| INTRODUCTION
||
SEARCH ENGINES
AUTOLOAD PAGES
RSACi CONTENT
TAKE THE QUIZ!
HTML HEXCOLORS
|| INTRODUCTION
||
DECIMAL vs HEX
RGB COLORS
HEXADECIMAL RGB
216 SAFE COLORS
CONVERTING HEX-DEC
NAMED COLORS
COLOR SAMPLES
TAKE THE QUIZ!
||
Tegn abonnement på
BioNyt Videnskabens Verden (www.bionyt.dk) er Danmarks ældste populærvidenskabelige tidsskrift for naturvidenskab. Det er det eneste blad af sin art i Danmark, som er helliget international forskning inden for livsvidenskaberne.
Bladet bringer aktuelle, spændende forskningsnyheder inden for biologi, medicin og andre naturvidenskabelige områder som f.eks. klimaændringer, nanoteknologi, partikelfysik, astronomi, seksualitet, biologiske våben, ecstasy, evolutionsbiologi, kloning, fedme, søvnforskning, muligheden for liv på mars, influenzaepidemier, livets opståen osv.
Artiklerne roses for at gøre vanskeligt stof forståeligt, uden at den videnskabelige holdbarhed tabes.
Recent Comments