| |
Opgave 9 : Indhold og layout
|
| Indhold til tabellen |
For at demonstrere de sidste ting omkring tabeller,
skal vi have noget indhold i tabellens celler. Det bliver samtidig en
god lejlighed til at repetere og anvende nogle af de html-koder du har
prøvet i de foregående opgaver.
Vi vil starte med at lave et sidehoved i den første række i
vores tabel. |
 |
- Åbn din fil opgave_8.html - og gem den som opgave_9.html
- Indsæt noget grafik i første celle i første række.
koden er <img src="filnavn.type">
Du kan evt. bare bruge logoet her t.v.
- Gem fil og Check
i browser
|
| |
Så skal vi have et navn på websiden - det indsætter vi i
2. celle i første række. Min fantasi rækker ikke længere end til at
indsætteoverskriften 'Opgaver til HTML' med typografien <h1>, men du kan
skrive hvad du vil.
- Indsæt en titel for websiden i 2. celle 1. række -
brug typografien <h1>
- gem og Check i
browseren
- indskriv efter </h1> en undertitel .....
|
| Justering af celle indhold |
Men det ser altså ikke rigtig godt ud. Vi vil gerne
have vores tekst i sidehovedet i højreside af cellen. Det gør vi ved
at sige at alt hvad der står i 2. celle skal højre-justeres.
- i celle koden <td> til 2. celle tilføjer du nu attributten
align="right" - så der står <td align="right">
- Gem filen og
check i browser
|
| Sidefod
Flet celler med collspan |
Lad os lave en sidefod nu vi er i gang.
En webside bør altid indeholde oplysninger om hvem der har lavet den og
hvornår, samt mulighed for at kontakte udgiveren.
Disse oplysninger ligger vi ned i en sidefod - hertil bruger vi den 3.
række i vores tabel.
Her vil vi skrive oplysninger om webmaster (=dig) med link til
e-mailadresse m.v. Men inden vi gør det vil vi gøre noget andet.
Vi har ikke brug for to celler (kolonner) i sidefoden. Vi vil blot have
en celle over hele tabellens bredde. Så vi skal slå de to celler
sammen til en. I Word kaldes det at flette celler.
- Slet den sidste celle definition <td>...</td> i tabellens sidste
række
- Indsæt derefter koden colspan=2 i første celle definition, altså
<td colspan="2">
- gem og check
resultat i browser
- Indtast nu dit navn - din e-mailadresse m.v. i sidefoden
(som aktivt link se evt. opgave 5 )
- Sæt font size til 2 for hele sidefoden <font
size="2"> .....</font>
- gem fil og
check i browser
|
| Tekst og
skrifttype |
Vi skal have noget tekst ind på
siden - hvis du ikke ved hvad du skal skrive, så copy -paste teksten
her.
Samtidigt skal vi have en ordentlig skrifttype - for Times New Roman er
simpelthen ikke god til websider.
- Indsæt noget tekst i 2.række 2. celle
- Indsæt kode for skrifttype øverst på siden - efter <body> og før <Table>
, f.eks.
<font face="verdana">
- check i browser
|
| |
Det hjalp en del ikke sandt ..;-)
Men der er stadig en ting som ikke rigtig dur'. Teksten klæber op at
tabellens rammer/ kanter. det skal ændres med attributten cellpadding.
|
| Cellpadding |
Cellpadding angiver antal pixels mellem cellekanten og cellens indhold
(tekst eller grafik).
Cellpadding angives i <table> tag'et på denne måde:
<table cellpadding="10px">
- Indskriv attributterne cellpadding i din tabel.
- afprøv forskellige værdier - og se hvordan det virker på placering af
tekst i forhold til tabellens kanter.
- Se eksempel
med cellpadding=10px
|
| |
|
| Cellspacing
Jeg har taget dette med -
men det bruges sjældent .. og her er det kun for din orientering.. |
Attributten cellspacing angiver hvor mange pixels der skal
være mellem de enkelte celler og indføjes i <table> tag'et på denne måde:
<table cellspacing="5">
Cellspacing angiver altså tykkelsen af tabellens indre rammer.
Hvis du ikke angiver en
værdi for cellspacing vises som default en tynd indre ramme for tabellens celler.
Hvis man ikke skal kunne se de indre rammer i tabellen skal cellspacing sættes
til værdien '0'. Altså sådan her : <table cellspacing=0> |
 |
I næste opgave skal vi knytte det
hele sammen, og få dette til at ligne en rigtig webside. Afsted til næste
opgave .. |
