http://vonpepel.com/ref/ - Senaste uppdatering 26 juli 1997
HTML för nybörjare © Eva von Pepel
* REF-BÖCKER | Lektion 1 | Lektion 2 |
För att snickra ihop en egen hemsida behöver man inte ha några större HTML-kunskaper. Det enda man måste kunna är några markord som omvandlar dokumentet till ett HTML-dokument. Markorden är enkla koder, som vanligtvis kommer i par och som talar om för www-klienten när ett stycke eller en rubrik börjar och slutar. Om man inte hade dessa koder skulle då rubriker vara ihopblandade med stycken och texten visas i en enda följd då alla eventuella tabbar, sido- eller radbrytningar försvinner.
Om du till exempel vill markera ett stycke börjar du med markordet <P> som betyder att från och med nu börjar ett stycke. Detta markordet heter starttagg eller öppningstagg. Sedan skriver du texten som stycket ska innehålla och när det är slut markerar du detta med markordet </P>, dvs sluttagg eller stängningstagg. P står för paragraph som betyder stycke på engelska. Nästa stycke börjar du med <P> igen och avslutar med </P>. Nu kan alla se att det handlar om två separata stycken. De flesta www-klienter åtskiljer dem med en tom rad men det kan hända att början av varje stycke visas med ett indrag eller på annat sätt. Det är upp till en www-klient hur ett markord ska tolkas. Hur än markorden tolkas kommer de två styckena presenteras som sådana - på ett eller annat sätt. Själva markorden är osynliga på skärmen. Allt som syns är två strukturerade stycken. Alla stycken markeras på detta sätt. <P> öppnar styckena och </P> stänger dem.
HTML-dokumenten kan skapas i vilken text editor som helst. Du kan även skaffa dig en HTML-editor och "klicka in" alla markorden istället för att skriva dem för hand men jag skulle råda dig att vänta med HTML-editorn ett tag. Det kan vara kul att låta andra göra jobbet åt en själv men man lär sig inte så mycket av det. Skulle en HTML-editor göra fel, och det händer ofta att den gör det, kan du inte korrigera felet och i de flesta fall vet du inte ens om att det finns något fel i dokumentet.
I denna lektion kommer vi att skapa ett HTML-dokument. Att skapa i HTML-sammanhang betyder att strukturera. Alla koder och text som används återfinner du i slutet av lektionen tillsammans med länken till det färdiga dokumentet. För att åtskilja mina egna kommentarer från det dokument som vi kommer att strukturera visas det sistnämnda i rött om din bläddrare stödjer style sheets eller fet stil on den inte gör det. Du kan kopiera koderna, klistra dem i din egen editor och sedan anpassa själva texten till egna behov.
Öppna en editor, ta fram en tom sida och spara den som kokbok.html eller kokbok.htm om ditt system inte klarar tillägg med fyra bokstäver. Om du använder texteditorn under Windows glöm inte att ändra filformatet till "Alla filer (*.*)" när du sparar den. Om du inte gör det kommer filen sparas som vanlig textfil, dvs med tillägget .txt. Tillägget html eller htm är ett standard tillägg för HTML-dokument. Skriv (eller kopiera) följande:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Kokbok</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Allt detta betyder:
deklarerar att den nivå av HTML-språket som används är HTML 3.2. HTML betyder HyperText Markup Language och är ett markeringsspråk. Det finns ett antal olika nivåer (versioner) och en av dem är HTML 3.2 som är numera standard. Den informationen behövs för att dels reglerna kräver den dels validatorerna. Validatorer är system som påminner om stavningskontroll men istället för stavningen av ord kontrollerar de att markorden m.m. är korrekta, dvs att dokumenten är strukturerade enligt de överenskomna regler. Varje nivå av språket har sina egna regler. HTML 3.2-dokument är dokument som struktureras enligt de regler som är specificerade i "lagboken" för HTML 3.2. Då vi skrev på första raden att dokumentet är ett HTML 3.2-dokument kommer validatorerna kontrollera det enligt HTML 3.2-regler.
talar om att dokumentet är ett HTML-dokument
betyder huvud och börjar dokumentets huvud. HTML-dokument består av två delar: ett huvud och en kropp. Om vi jämför dokumentet med en vanlig bok, skulle då bokens omslag innehållande bokens titel, namn på författaren och annan information t ex förlagets notationer motsvara dokumentets huvud medan bokens innehåll (text) dokumentets kropp. Information som huvudet innehåller syns inte på skärmen men den används av t ex sökmotorer att hitta och indexera det
betyder titel, här skriver du dokumentets titel ur global perspektiv. Denna titel används av sökmotorer för att indexera dokumentet, kan visas på www-klientens statusrad eller om du bokmärker dokumentet då visas titeln som bokmärkets namn. Därför bör du inte skriva "Min hemsida" eller liknande då det inte säger någonting. Varje dokument måste ha en titel annars kommer det att vara ogilltigt, dvs validatorerna kommer att klaga.
talar om att titeln är slut
talar om att huvuddelen är slut
betyder kropp och öppnar dokumentets kroppsdel. Allt som följer detta markordet kommer att synnas på skärmen
talar om att kroppsdelen är slut
talar om att dokumentet är slut. Efter detta markord får du inte skriva något mer
Nu kommer vi att koncentrera oss på dokumentets kropp, dvs innehåll som finns mellan markorden <BODY> och </BODY>. Det kan vara roligt att dela med andra några matrecept så dokumentet kommer att handla om mat. Text och recept kommer från "Stora Köksskolan" av Görn Helleblad och Kjell Nilsson.
Vanligtvis börjar varje dokument med en rubrik. Då dokumentet kommer att innehålla matrecept, skriver vi (efter markordet <BODY> men innan </BODY>):
<H1>Matrecept</H1>
H står för heading på engelska, dvs rubrik medan 1:an att det handlar om huvudrubrik eller som man säger rubrik på nivå 1. Det finns 6 olika rubriker som organiseras enligt deras viktighet. Nr 1 är den viktigaste medan numer 6 är den minst viktiga. De flesta bläddrare visar alla rubriker i fel stil och med varierande fontstorlekar. Fonterna i rubrik på nivå 1 har de största fonterna medan sexan har de minsta.
Efter huvudrubriken kan vi rubricera denna rätt som receptet kommer att gälla, t ex Marängsviss. Då rubriken är underrubrik till "Matrecept" använder vi rubrik på nivå 2:
<H2>Marängsviss</H2>
Vidare kan vi skriva lite information om denna dessert. Då det handlar om ett vanligt stycke använder vi markorden <P> och </P>
<P>
Marängsviss är en gammal pålitlig dessert värd att komma ihåg ibland. Speciellt när man längtar efter något sött. Förr i världen var den oftast alltför sött. Här har jag ändrat litet på det genom att göra en kraftig chokladsås med en lätt brytning med en lätt brytning av kaffe, som gör att såsen får smak och karaktär utan att det söta dominerar alltför mycket. Marängerna gör ändå rätten till en riktig sötsak. Grädden är här - liksom oftast i desserter - helt osötad, vilken känns alldeles riktigt. Såsen kan lätt fördubblas en eller fler gånger.
</P>
Nu är det dags för ingredienser. Även de kan rubriceras men som rubrik på nivå 3.
<H3>Ingredienser för 4 personer</H3>
För att lista alla ingredienser kan vi använda oss av en av HTML-listorna, nämligen en osorterad sådan. För att öppna en osorterad lista skriver du <UL> som står för unsorted list. För att lista posterna används markordet <LI> som står för list item. Varje post börjas med <LI> och visas på sin egen rad. Osorterad lista kallas även för punktlista då posterna visas med en liten punkt framför. När alla poster är listade avslutar man listan med </UL>
<UL>
<LI>16-20 små maränger</LI>
<LI>3 dl vispgrädde</LI>
<LI>chockladsås (ca 1 ½ dl)</LI>
<LI>1 dl kakaopulver</LI>
<LI>1 dl socker</LI>
<LI>2 tsk vaniljsocker</LI>
<LI>1/2 msk snabbkaffepulver</LI>
<LI>1/2 kryddmått salt</LI>
<LI>1 dl vatten</LI>
</UL>
Efter ingredienserna kommer beskrivning hur man går till väga för att laga desserten. Denna avsnitt kan också rubriceras. Då i detta fall är rubriken på samma nivå som i ingredienserna använder vi rubrik på nivå 3.
<H3>Så gör du:</H3>
Då det finns olika skeden i beskrivningen kan även de listas. Men här numrerar vi dem. Till det använder vi en sorterad eller som den också kallas numrerad lista. För att öppna en sådan lista använder man markordet <OL> som står för ordered list. Posterna listas på samma sätt som i punktlistan men istället för punkter visas siffrorna. Listan avslutas med </OL>
<OL>
<LI>
Börja med chockladsåsen: Mät upp alla torra ingredienser i en kastrull. Blanda och späd med vattnet i en fin stråle under vispning så det inte klumpar sig</LI>
<LI>Koka såsen under ständig vispning tills den tjocknat och är mörk, blank och slät. Det är viktigt att vispa utmed hela kastrullbotten annars bränner såsen lätt fast. Rör om då och då medan såsen kallnar</LI>
<LI>Vispa grädden till hårt skum utan att den för den skull blir grynig. Det går lättast om grädden är kylslåpskallt</LI>
<LI>Bygg på sett serveringsfat upp en pyramid av grädde och maränger. Börja med en rejäl gräddklick i botten. Varva sedan med maränger tills pyramiden står klar, ringla över chockladsåsen strax före serveringen</LI>
<LI>Vispa gärna grädden före middagen och förvara den i kylen. Men lägg ihop den med maränger och sås alldeles före serveringen. Såsen kan däremot förberedas i god tid. Den håller flera veckor i glasburk med lock i kylen</LI>
</OL>
Här kan vi sluta dokumentet. Spara det. Öppna din www-klient. Om det är Internet Explorer klicka på "Open" under filmenyn. En liten ruta öppnas; klicka på "Browse"; när filhanteraren har öppnats leta efter kokbok.html (eller .htm). Dokumentet visas i bläddraren. Om du gör några ändringar spara dokumentet igen och klicka på "Refresh". Bläddraren kommer att visa det ändrade dokumentet.
Nu kan du ladda upp dokumentet till servern. Om du inte vet hur man gör hittar du beskrivningen här.
När dokumentet är på servern kan du validera det. Det finns ett antal olika validatorer på nätet men en av de bättre och lättare att förstå är "Kinder, Gentler Validator" som finns numera på W3Cs hemsida. Skriv bara sidans adress i rutan: URL och tryck på "Submit".
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
Här kan du se hur samma dokument, men utan några markord, tolkas. Tryck på BACK-knappen för att komma tillbaka
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> |
http://vonpepel.com/ref/ - Senaste uppdatering 26 juli 1997