- Dokument, struktur och utformning
- HTML-dokument från grunden
- Grundläggande beståndsdelar i ett HTML-dokument
- Ditt första HTML-dokument
- Sammanfattning
Ett dokument kan beskrivas med hjälp av tre begrepp - innehåll, struktur och utformning:
Innehåll - den text och de bilder som bygger upp dokumentet
Exempel: Texten och bilderna som ligger till grund för den här sidan.
Man skulle kunna skriva ett helt dokument utan att tänka på något annat än innehållet. För att ge läsaren bättre möjligheter att läsa, hitta i och förstå detta bör man dock tänka på...
Struktur - innehållet sammanfogas och uppdelas på olika sätt
Exempel: Ord bygger upp fraser som bygger upp enkla meningar. Meningarna samlas i stycken som bygger upp kapitel.
Genom att förse innehållet med en struktur gör du det lättare att förstå detta. Du kan till exempel samla meningar som hör samman i stycken och förse sammanhängande stycken med rubriker. Dokumentet skulle dock ändå vara svårläst om all text såg likadan ut. Därför gör man så att olika delar av texten skiljer sig åt genom...
Utformning - innehåll och struktur får ett utseende
Exempel: Rubriker är större än "vanlig" text. Viktiga ord framhävs med fetstil. Sidhuvudet placeras högt uppe, och fotnoterna långt ned på sidan avskilt från den övriga texten.
Utformningen särskiljer olika strukturer i ett dokument och gör det lättare för läsaren att läsa och hitta i dokumentet.
När man skall kommunicera på elektronisk form finns det ett antal möjliga problem, vilket nämndes i introduktionen. Om man t.ex. vill utbyta information mellan två ordbehandlingsprogram kan det bli problem på grund av:
Det enda alternativet brukar vara att använda sig av vanliga, enkla textfiler (helst utan svenska tecken). Problemet med detta är att man inte kan utforma dokumentet tillräckligt (struktur + utformning) för att hjälpa läsaren. Dessutom kan man ju inte åstadkomma dokument som ser speciellt "bra" ut på det sättet.
Med HTML och WWW löser sig de flesta av ovan nämnda problem, eftersom man i detta bara överför innehåll och beskrivningar av strukturen i dokumentet.
Istället för att beskriva olika stycken, fraser och ord i termer av hur de skall se ut beskriver man vad de är. Istället för "fetstil", "typsnitt Helvetica, 12 punkter" eller "sätt en rund punkt före varje sak i listan" anger man "viktigt ord", "vanlig text" och "stycke i uppräkningslista". Man kan också beskriva innehållet med hjälp av strukturer, genom att beskriva vissa ord/fraser/stycken som t.ex. "författarnamn", "bildtext" eller "programkod".
Själva "utformningen" av strukturerna, dvs. att visa "fetstil" som fetstil och "rubriker" som större text, sköts istället av din browser. Den "vet" hur den skall visa olika strukurer.
Ett HTML-dokument är egentligen bara en vanlig, enkel textfil. Det är bland annat det som gör att WWW fungerar så bra på så många olika typer av datorer. Det som skiljer HTML-dokument från andra vanliga textdokument är att filen ser ut på ett visst sätt. Filen innehåller information om strukturerna i dokumentet.
Varje struktur i ett HTML-dokument är "märkt", eller "taggad" (av engelskans "tag"). Det innebär att man använder speciella "märken" som beskriver vilken typ av strukturer olika stycken, fraser eller ord är.
Varje struktur i dokumentet omges av en startmarkering och en slutmarkering. Eftersom HTML-dokument är vanliga textfiler måste märkena se ut på ett speciellt sätt för att man skall kunna känna igen dem och förstå att de är märken, och inte innehåll.
För att skilja märkena från resten av texten har man bestämt att de skall se ut på följande sätt:
Märkena fungerar alltså som ett slags "små lådor" - det finns lådor av olika typer och med olika innehåll. Eftersom t.ex. stycke kan innehålla flera ord som är viktiga. Märkena tillsammans med sitt innehåll kallas element - man talar om olika HTML-element.
"Koderna" i märkena är förkortningar av de engelska orden för olika typer av text och stycken, t.ex. P för "paragraph" (stycke) och H1 för "heading 1" (rubrik 1).
Ett HTML-dokument består av två delar: innehåll och beskrivning.
Innehållet är det du ser i ditt WWW-verktyg, din browser. Det du ser är resultatet av den "märkning" texten har, och de regler som browser följer för att tolka dessa märken till utformning.
För att kunna hålla reda på och kategorisera dokument, t.ex. på ett bibliotek, använder man sig av dokumentbeskrivningar - information om själva dokumentet. I beskrivningen fins information om vad det är för typ av dokument, vad det heter, etc.
Samma teknik används för WWW-dokument - varje HTML-fil har en dokumentbeskrivning allra först, och i den finns bland annat namnet på dokumentet. Det här är viktigt information, om det skall vara möjligt att leta efter och hitta dokument med vissa namn.
Informationen i dokumentbeskrivningen, eller dokumenthuvudet (head) syns inte, bortsett från namnet på dokumentet som visas i titeln på fönstret till din browser (och i "historielistan").
Ett HTML-dokument som inte innehåller någon information är ändå inte tomt. Varje dokument bygger nämligen på en stomme, och denna skall alltid finnas med. I stommen markeras dokumentets huvud (beskrivningen), dokumentets "kropp" (innehåll), och dessutom omges dessa båda av märket HTML. Detta markerar helt enkelt att filen är ett HTML-dokument, och ingenting annat.
<HTML> <HEAD> <TITLE>titeln på dokumentet</TITLE> </HEAD> <BODY> här skall innehållet in senare </BODY> </HTML>
Med "vanlig text" avses text som inte är rubriker, citat, uppräkningar, etc. Kort sagt - större delen av texten i ett vanligt dokument. Denna typ av text omges av märket P (som i engelskans "paragraph" för stycke).
<P>Detta är ett vanligt stycke .</P>
Text i ett HTML-dokument behandlas på ett speciellt sätt när det visas i en browser - alla "extra" radbrytningar och mellanslag tas nämligen bort först! Det innebär att det inte spelar någon roll om du har ett flertal radbrytningar och tomma rader inuti P märket - dessa kommer ändå inte att visas. Poängen med detta är att även om fönstren på olika browsers är olika stora, så skall texten inte "försvinna över kanten" - istället räknar browsern ut var den kan bryta raderna, och gör detta automatiskt.
För att markera en rubrik på ett kapitel eller ett avsnitt använder du dig av märket Hn (som i engelskans "heading" för rubrik). I koden är n någon av siffrorna 1..9. Ju högre siffra - desto "mindre" rubrik (underrubrik).
<H1>Detta är en rubrik</H1>
<P>Detta är vanlig text.</P>
<H2>Detta är en underrubrik</H2>
<P>Detta är ett vanligt stycke till.</P>
Om du vill räkna upp saker i listform i ett HTML-dokument kan du använda dig av något av märkena UL (som i engelskans "unordered list" för osorterad lista) eller OL (som i engelskans "ordered list" för sorterad lista). I den osorterade listan markeras varje "sak" med en punkt (bullet) före texten. I den sorterade listan visas ordningsnumret (1, 2, 3...) före varje textrad.
I båda typerna av listor markeras varje "sak" i listan - varje rad - med märket LI (som i engelskans "list item" för listelement). Detta märke är lite speciellt, då det inte behöver ett slutmärke </LI>- elementet avslutas helt enkelt då nästa element påbörjas.
| <UL> <LI>En sak</LI> <LI>En sak till</LI> <LI>Och ännu en</LI> </UL> |
|
| <OL> <LI>En sak</LI> <LI>En sak till</LI> <LI>Och ännu en</LI> </OL> |
|
För att du skall kunna börja skapa flera dokument som kan peka på varandra eller till och med på andra dokument på WWW måste du kunna skapa länkar i ditt dokument. Det gör du med märket A (som i engelskans "anchor" för ankare).
Detta märke skiljer sig en aning från de ovanstående, eftersom det består av flera delar, och "beter" sig lite mer komplicerat. Varje "länk" i din browser innehåller nämligen två saker - en adress till det länken pekar på, och en länktext som du klickar på för att följa länken.
<A HREF="adressen till sidan">länktext</A>
I koden ovan anger A att det är frågan om ett märke av typen länk. Efter detta följer ett attribut - en egenskap - som kan ha olika värden (mellan citationstecknen). Attributet HREF (som i engelskans "hypertext reference" för hypertextlänk) innehåller adressen till det som länken skall peka på; ett annat dokument, en bild, en ljudfil, etc. Hela märket A omger det som sedan blir länktexten dvs. det som du kan klicka på i din browser.
Adressen som du lägger i attributet HREF
kommer att beskrivas närmare i nästa kapitel. Här skall vi
bara titta på hur du skapar en länk till en annan HTML-fil
någonstans i världen . För att skapa en länk dit måste du
veta vilken adress de sidorna har - och det kan du se genom att
bege dig dit (t.ex. via bilden överst på dessa sidor) och titta
i din browsers ruta Location:. Där
ser du hur adressen ser ut - i det här fallet: http://www.passagen.se
För att skapa en länk från ditt dokument dit lägger du nu bara in följande i din fil:
<A HREF="http://www.passagen.se">Passagen</A>
Om du sedan tittar i din browser visas länktexten på samma sätt som alla andra länkar, och om du klickar på den får du se Skoldatanätets hemsida.
För att lägga in bilder använder du dig av märket IMG (som i engelskans "image" för bild), som också det är lite speciellt. Till skillnad från de andra märken du tittat på saknar detta slutmarkering och egentligt innehåll (i form av text). Detta är inte så konstigt egentligen - bilden i sig är innehållet.
De element som saknar slutmarkering och innehåll brukar kallas tomma element.
<IMG SRC="adress till bilden som skall visas">
Som i med länkarna ovan använder man ett attribut för att beskriva var bilden finns. Adresserna beskrivs närmare i nästa kapitel - här skall vi bara se hur man lägger in en bild som finns någon annanstans på WWW i sitt dokument.
Om du har hittat en bild någonstans på WWW, och gärna vill lägga in den i ditt eget dokument gör du ungefär på samma sätt som med länken till Skoldatanätet ovan - du tar reda på adressen till bilden. Vi antar att du fått reda på att det finns en bild på katten Gustaf på följande adress: http://reite.com/bjorn/assets/but_lank1.jpg och att du vill lägga in den i ditt dokument. Då skriver du bara in följande i din fil:
<IMG SRC="www.reite.com/bjorn/assets/but_lank1.jpg">
Det är nu dags att skapa ditt första HTML-dokument, för att testa hur det hela fungerar på riktigt. Nedan finns ett litet exempel som du kan använda som "bas" när du jobbar, men se gärna till att testa andra kombinationer av strukturer. om du vill se hur koden nedan ser ut i en browser kan du klicka här.
<HTML>
<HEAD>
<TITLE>Björn Anderssons Hemsida</TITLE>
</HEAD>
<BODY>
<H1>Björn Anderssons hemsida</H1>
<P>Jag heter Björn Andersson. Detta är min hemsida.</P>
<P>Här är en bild på en knapp som jag har använt.</P>
<IMG SRC="www.reite.com/bjorn/assets/but_lank1.jpg">
<P>Om du klickar <A HREF="www.passagen.se">här</A> kommer du till PASSAGEN.</P>
<P>Jag tycker att det är roligt att:</P>
<UL>
<LI>WWW</LI>
<LI>festa</LI>
<LI>MSU</LI>
</UL>
</BODY>
</HTML>
<KOD>innehåll</KOD> Till: Början av sidan
