<TR><TH>Djur</TH><TH>Mat</TH></TR>
<TR><TD>Katt</TD><TD>Mus</TD></TR>
<TR><TD>Mus</TD><TD>Ost</TD></TR>
</TABLE>
Och så här ser den ut i webbläsaren
| Djur | Mat |
|---|---|
| Katt | Mus |
| Mus | Ost |
Taggarna <TABLE> och </TABLE> omger tabellen och berättar, att detta är en tabell.
Taggarna <TR> och </TR> (Table Row) omger varje rad i tabellen.
Taggarna <TH> och </TH> (Table Heading) omger rubrikcellerna.
Taggarna <TD> och </TD> (Table Data) omger varje vanlig cell i tabellen.
Uppgift 19
Skapa i en ny HTML-fil en tabell som är 4*3 (b*h) rutor. Skriv i ruorna 1, 2, 3, o.s.v. (från vänster till höger, uppifrån neråt). Gör första radens celler till rubrikceller (använd TH i stället för TD).
Mera om tabeller
Den som vill kan läsa mera om tabeller på egen hand. I denna kurs hinner vi tyvärr inte gå djupare in på dem. Tabeller kan dock vara väldigt användbara för att dela upp sidor i spalter.
CSS - Cascading Style Sheets
Cascading Style Shhet används för att ge olika objekt olika egenskaper. T.ex. kan man ställa in färger, fonter, storlekar, bakgrunder, ramar och mycket mer med CSS.
CSS egenskaper kan sparas på tre olika ställen:
- Inline CSS. Detta betyder att CSS koden läggs in i en annan tag med attribytet STYLE="...", detta har ni sett tidigare i undervisningsmaterialet.
T.ex.<SPAN STYLE="color:green">Grön text</SPAN> - Stilen lagrad i dokumentets HEAD:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<STYLE TYPE="text/css">
H1 { color: blue;
background-color:#66CC66;}
H2.test { color: green }
</STYLE>
</HEAD>
<BODY>
<H1>Rubrik</H1>
<H2>Vanlig rubrik2</H2>
<H2 CLASS="test">Green heading2</H2>
</BODY>
</HTML> - I en skild CSS fil. Man linkar då till CSS-filen såhär:
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK HREF="styles.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<H1>Rubrik</H1>
<H2>Vanlig rubrik2</H2>
<H2 CLASS="test">Green heading2</H2>
</BODY>
</HTML>
Filen styles. css kan då se ut såhär:
H1 { color: blue;
background-color:#66CC66;}
H2.test { color: green }
Uppgift 20
Kopiera koden, som visas i 2. ovan och spara den i filen uppg20.html. Öppna filen i webbläsaren och se på den.
Uppgift 21
Kopiera HTML-koden, som visas i 3. ovan och spara den i filen uppg21.html. Öppna filen i webbläsaren och se på den.
Kopiera CSS-koden, som visas i 3. ovan och spara den i filen styles.css. Öppna (eller uppdatera) uppg21.html i webbläsaren och se på den. Den bör nu se likadan ut som uppg20.html
Inline vs. inte inline CSS
Ibland är det vettigare att använda inline CSS, ibland är det vettigare att låta bli. När du vill skapa flere sidor, som skall ha samma utseende stilmässigt rekommenderas det varmt att du använder en extern css-fil. Då blir det enkelt att ändra på utseendet på samtliga sidor. Du behöver t.ex. bara ändra på ett ställe om du vill ändra storleken och typsnittet på rubrikerna. Dessutom blir HTML-koden lättare att läsa.
En tummregel är att om du använder copy&paste på stilinformation, så är det vettigare att skapa en stil för det i CSS-filen. Gör du däremot en specialsak, som du använder bara på en plats är inline CSS ett bra val.
Olika men ändå lika
Du stöter säkert på situationer där du vill ha olika stil på samma sorts objekt, för att de används i olika sammanhang. Du kanske vill ha bilder med blå ram och bilder med svart ram.
Du kan skapa två olika stilar.
Din CSS-fil kan t.ex. innehålla detta:
IMG.bla { border-color: #0000FF; border-width: thin;border-style: solid }
IMG.svart { border-color: #000000; border-width: thin;border-style: solid }
Du kan då använda svart ram runt bilden med:
<IMG SRC="bilder/vinterbild.jpg" CLASS="svart"> och blå, ram med koden
<IMG SRC="bilder/vinterbild.jpg" CLASS="bla">
CSS i linkar
Linkar är vanligen blåa, besökta linkar (visited link) gredelina och en link som man trycker ner musen på (active link) brukar vara röd.
Om du vill kan du ändra på detta med följande:
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */
P.S. /* Kommentar */ är hur du gör kommentarer i CSS-kod.
Ett par användbara taggar
Ett par användbara taggar är <SPAN> och <DIV>. DIV kan anväbndas för att omge ett stycke med text
som man vill formatera på ett visst sätt. SPAN kan med fördel användas för att omge enstaka ord, som man vill formatera med en viss stil.
Ex. <SPAN CLASS="orangetext">ord</SPAN>
Mera info om CSS
CSS är ett så stort område, att det är omöjligt att berätta allt om det här. Jag kan t.ex. inte berätta på hur
många olika sätt man kan påverka listornas symboler, att man kan få en egen bild i stället för den vanliga punkten, att man påordnade
listor kan få alfabetet i stä,llet för siffror, eller romerska siffror, eller att man kan skapa en textstil, vars första bokstav ser ut på ett visst sätt...
I stället kan jag ge er linkar till de sidor jag själv använder som uppslagsverk vid behov.
