http://vonpepel.com/ref/ - Senaste uppdatering 5 augusti 1997
HTML för nybörjare © Eva von Pepel
* REF-BÖCKER | Lektion 1 | Lektion 2 |
WWW-klienten kommer att visa dokumentet kokbok.html (eller htm) enligt sina standardinställningar eller om användaren har ändrat på standartinställningarna kommer dokumentet att visas enligt dessa. Trots att HTML inte bryr sig om presentationen av dokument, dvs layouten, utan koncentrerar sig på dess struktur kan du formatera dina dokument, t ex lägga till färger eller placera styckena eller rubrikerna enligt eget önskemål. Men innan vi börjar prata om det måste vi utredda några begrepp så att vi kan förstå varandra.
I förra lektionen pratade vi om taggar som markerar början och slut på ett stycke eller rubrik. Det vad dessa taggar innehåller, t ex stycke eller rubrik, kallas för element. Vad är ett element? Låt oss ta en bil som exempel. En bil byggs av olika delar, t ex kaross, hjul, ratt, motor osv. Dessa delar kallas för komponenter eller element. HTML-dokument byggs (struktureras) också av element; stycken, tabeller, rubriker, listor osv. Såsom elementen i en bil måste sammansättas på ett korrekt sätt så att bilen kan fungera måste även HTML-elementen sammansättas på ett rätt sätt. Det går ju inte att han en ratt på taket. Men till det återkommer vi senare.
Som sagt, dokumenten är strukturerade av olika element. Början på elementet markeras med en starttagg som talar om vilken typ av element som följer och slutet av elementet markeras med en sluttagg. Starttaggen är strukturerad av tre delar, tecknet < som öppnar taggen och följs direkt av elementets namn och tecknet > som stänger taggen. Elementets namn är för det mesta elementets riktiga namn på engelska eller förkortning av namnet om det är för långt som till exempel PARAGRAPH (stycke). Sluttaggar ser nästan likadana ut som starttaggar men man lägger till tecknet / för att visa att elementet är slut.
<P>P-element</P>
Dessa två taggar innehåller elementet P. Man säger så, elementet P eller elementet TABLE osv. Det är viktigt att kunna åtskilja mellan tag och element då många blandar ihop dessa två begrepp. Taggar är markord som markerar elementets början och slut medan element är det innehåll som finns mellan en starttag och sluttag.
Såsom bilens element kan ha olika attribut, t ex färg eller storlek kan även HTML-element ta olika attribut. Attributen färg eller storlek säger inte så mycket om inga värden, t ex gul eller 25 cm är tilldelade till dem. Varje attribut måste ha ett värde. Man brukar säga attribut-/värde- paret. Ett och samma element kan ta olika attribut, t ex både färg och storlek. Likaså kan ett attribut ha olika värden; bilden kan vara gul eller röd och ratten kan ha 30 eller 40 cm i diameter beroende på biltyp. Så när jag skriver attribut=värde1|värde2|värde3 , t ex color=blue|red|yellow betyder det att attributet kan ta värde 1 ELLER värde 2 ELLER värde 3, dvs ett av dessa värden. (Bilen kan ju inte vara både gul och röd samtidigt). Tecknet | kallas för "pipe" och betyder eller.
Alla attribut-/värdepar skrivs i starttaggen enligt följande:
<ELEMENTTYP attribut1="värde" attribut2="värde">själva elementet</ELEMENTTYP>
Som ni ser citerar jag värden. Inte alla värden måste citeras men för att inte göra det krångligare än nödvändigt kommer jag att citera alla värden då det är tillåtet att citera även de värden som inte nödvändigtvis måste citeras. Däremot är det otillåtet att inte citera de värden som måste citeras.
I lektionen 1 sade jag att allt som finns mellan taggarna <BODY> och </BODY> tillhör dokumentets kropp, dvs den synliga delen av dokumentet. Det som finns mellan dessa två taggar är alltså elementet BODY (som in sin tur kan innehålla andra element bl a de du redan känner till P, H1, H2, H3, UL, OL). För att dokumentets kropp ska visas med en viss bakgrundsfärg måste du därför tilldela elementet BODY detta attribut. Ett bakgrundsfärgs- attribut och tillhörande värde skrivs i BODY-starttaggen.
<BODY bgcolor="white">elementet</BODY>
Bgcolor betyder background color dvs bakgrundsfärg och värdet är "white" dvs vit. Du kan använda engelska namn på 16 av de mest populära färgerna. De är: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Du får även använda andra färger men dessa skrivs på ett annat sätt, du måste uppge deras rgb-värde dvs värdet på röd-grön-blå istället för deras namn.
Till exempel, den vita färgens rgb-värde är "#FFFFFF". Värdena skrivs alltid på detta sätt, dvs med en stege innan själva numren. De flesta grafikprogram visar färgens RGB-värde. Det finns också en mängd olika små och praktiska applikationer där du kan blanda dina egna färger och samtidigt avläsa deras RGB-värde. Ett sådant program på bara 14 kB och dessutom freeware heter Color Browser och kan hämtas på http://maximized.com/freeware/clrbrwsr/.
<BODY bgcolor="white">elementet</BODY>
eller
<BODY bgcolor="#FFFFFF">elementet</BODY>
båda visar samma bakgrundsfärg
Elementet BODY kan ta andra attribut. Med attributet text väljer du textens färg, link länkens färg, alink (active link) den aktiva länkens färg som visas bara en kort stund när någon klickar på den, vlink(visited link) den besökta länkens färg, t ex:
<BODY bgcolor="white" text="black" link="blue" alink="red" vlink="maroon">elementet</BODY>
Du kan även ha en bild som bakgrund och t.o.m. både bakgrundsbild och färg. Bakgrundsfärgen kommer då att visas under tiden då bilden laddas.
<BODY background="url" bgcolor="white" text="black" link="blue" alink="red" vlink="maroon">elementet</BODY>
Attributets background värde är url. Url står för Uniform Resource Locator, dvs det ställe på servern där bakgrundsbilden finns. Med andra ord bildens adress. Om bilden heter bild.gif och finns i biblioteket bilder som finns i ditt eget hembibliotek hos leverantören skriver du då: background="bilder/bild.gif". En sådan adress kallas för relativ. Om bilden och biblioteket finns på en annan server, t ex hos Algonet i mitt eget hembibliotek som heter eva, måste du då uppge hela (s.k. absoluta) adressen; background="http://www.algonet.se/~eva/bilder/bild.gif"
Med undantag för background, som du kan välja bort, bör du alltid uppge alla BODY-attributen (eller inga). Om du inte gör det kan användarens egna inställningar överskrida dina. Om du till exempel uppger bara attributet background="white" och användaren ställer sin www-klient för att visa dokument med background="black" text="white" kommer ditt dokument visas på "din" vit bakgrund men med "användarens" vita bokstäver. Vit text på vit bakgrund syns ju inte. Samma sak gäller för länkarna. När du väljer färger glöm inte att behålla kontrasten mellan dem så att alla kan läsa texten utan problem.
Efter det att dokumentet har fått "sina färger" kan vi gå vidare i formateringen av innehållet, t ex centrera huvudrubriken H1. För att placera en huvudrubrik på ett visst sätt tilldelar du elementet H1 attributet ALIGN som betyder placera. Hur rubriken ska placeras bestäms av det värdet som du tilldelar attributet ALIGN. Du kan välja mellan left (vänster), center (centrera) och right (höger).
<H1 ALIGN="left|center|right">Rubrik på nivå 1</H1>
Då standardplaceringen av de flesta element är left behöver du inte använda detta attribut/värde för att vänsterställa rubriker. Men om du vill centrera skriver du:
<H1 ALIGN="center">Matrecept</H1>
På samma sätt centrerar du eller högerställer alla andra rubriker, t ex:
<H5 ALIGN="right">en högerställd rubrik på nivå 5</H5>
Även stycken placerar du enligt samma princip, t ex:
<P align="center">ett centrerat stycke</P>
Alla element kan inte ta attributet ALIGN. Av alla element som nämns i Lektion 1 och 2 är det bara rubriker och stycken som kan göra det.
Oftast avslutar man ett dokument med en s.k. Kontakt Information. Där kan du uppge vem som skapade dokumentet och när; hur kan man få tag på denna person, t ex adress, epostadress, telefon eller fax. Kontakt informationen består av elementet ADDRESS och skrivs mellan taggarna <ADDRESS> och </ADDRESS>. Innehåll visas oftas i kursiv stil, t ex:
<ADDRESS>Detta dokument skapades av Eva den 4 augusti 1997. Senaste uppdatering den 5 augusti 1997</ADDRESS>
Då kontakt informationen innehåller oftast adresser eller telefon-, faxnumren vill man kunna visa dem på varsin rad. Till det använder man elementet BR som står för break row (bryt/avsluta rad). Detta element kan befinna sig var som helst i texten i alla element som kan innehålla text (och även bilder), t ex rubriker, stycken eller poster i listorna och orsakar att raden avslutas och texten som kommer efter visas på nästa rad.
Elementet BR åtskiljer sig från andra element då det markeras med en enda tag <BR> som är både start- och sluttag samtidigt.
<ADDRESS>Detta dokument skapades av Eva den 4 augusti 1997. <BR>
Senaste uppdatering den 5 augusti 1997</ADDRESS>
Varför denna skillnad? Andra element kan och i vissa fall måste innehålla innehålla något. Till exempel elementet BODY kan innehålla elementen P eller OL. Elementet P kan innehålla text. Elementet OL måste innehålla elementet LI som i sin tur kan innehålla text. Elementet HEAD måste innehålla elementet TITLE som i sin tur innehåller text. Därför har dessa element både start- och sluttaggar och kallas för behållare (containers). De är behållare för text eller andra element. Elementet BR däremot inte innehåller någonting. Det bara markerar slut på en rad. Element som inte innehåller någonting kallas för tomma element och saknar sluttaggar.
Nedan finns det färdiga dokumentet och här kan du se hur det ser ut i verkligheten. Tryck på BACK-knappen för att komma tillbaka
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> |
http://vonpepel.com/ref/ - Senaste uppdatering 5 augusti 1997