STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML

HTML - HyperText Markup Language

Vad är HTML?
HTML-dokument
Filnamn/sökvägar
Ett enkelt dokument
Å, Ä och Ö
HTML-editorer

Vad är HTML?
HTML (HyperText Markup Language) är ett markeringsspråk (även benämt sidbeskrivningsspråk). Tanken bakom detta språk är att ett html-dokument ska kunna ses av alla browsers (webläsare) oberoende om besökaren har ex. en Mac eller Pc. Under förutsättning då att man kodar enligt gällande rekommendationer. Du strukturerar sidan i olika element (exempel tabeller, stycken och bilder), till hjälp har du olika markeringar så kallade taggar (tags). Till exempel: du vill göra en lista. För att markera listan använder du starttaggen <UL> skriver din lista med hjälp av listtaggarna <LI> och avslutar listan med sluttaggen </UL>. Varje element har alltså en starttag <tagg> och oftast en sluttag </sluttagg>

Ett element kan ha olika attribut som påverkar hur elementet ska presenteras på skärmen. Attribut placeras i starttaggen, ett exempel på ett attribut är border. Attributet har i sin tur oftast ett värde, border=0. Värdet är det som står efter lika med-tecknet = . Ibland ska värdet citeras, se exempel på det lite längre ned.

Din browser tolkar (läser) de olika markeringarna (taggarna) och vet sedan hur den ska presentera sidan på skärmen. Under förutsättning förstås att den klarar av att tolka alla markeringarna. Har du kodat fel kan läsaren kanske inte alls tolka dina taggar eller tolkar dem helt fel. En gammal web-läsare kan inte tolka alla markeringar i HTML 3.2 samt HTML 4.0. Rekommendationen före dessa hette HTML 2.0, efter den kom ett förslag HTML 3.0, som var bra men ej antogs som rekommendation. Vill du veta vilka taggar som ingår i HTML 3.2 (rekommendation från 14 januari 1997) kan du kika här. Numera är HTML 4.0 den nuvarande gällande HTML-rekommendationen (sedan december 1997). Men det var och är den sista av den generationen. Nu är det XHTML som gäller. Men vanlig hederlig HTML funkar fortfarande :).

En gammal browser som stöter på en tagg den inte förstår ska ge sjutton i den och hoppa över den helt enkelt. Men bygg inte upp hela din struktur på sidan på så sätt att den förstörs helt om inte en äldre browser kan tolka den korrekt. Sedan har både Netscape och Explorer sina egna taggar som tyvärr bara kan tolkas av respektive browser. Vill du veta mer, kolla in:

Som nybörjare har man i början fullt upp med att få ihop snygg hemsida. Du kanske inte är så intresserad av grunderna i HTML. Men det kan vara bra att veta varför en sak syns i Netscape 4.0 men inte i Explorer 5.0 osv. 97 % av webbläsarna som surfar på svenska sidor är numera Internet Explorer (MSIE) 5.* och/eller 6.*, se min loggfil. Jämför med att lära sig ett språk, visst kan grammatiken tyckas vara tråkig men ack så nödvändig för att göra sig förstådd.

HTML-dokument
Ett HTML-dokument kan skapas i vilken text-editor som helst, under förutsättning att du kan spara ned filen som .html eller .htm - dvs. ren text (ASCII). Många undrar om det är någon skillnad på att använda antingen .html eller .htm. Svaret är nej, .htm kommer från operativsystemet Dos oförmåga att hantera mer än 3 stycken filändelser. Du ska alltså inte spara ned ditt arbete som index.txt utan det ska stå exempelvis; index.html eller index.htm. Annars kan inte web-läsaren hantera filen. Tar du upp en .txt fil i en browser visar den allt, taggar och text. Har du Notepad.exe på din hårddisk går det utmärkt att använda det.

Det spelar ingen roll om du skriver:
<TITLE></TITLE> eller <title></title>
Browsern bryr sig inte om det stora eller små bokstäver i taggarna (förutom några undantag ex. target i frames). Däremot är det viktigt att alla tecken kommer med och noga med mellanslag eller inte.

<tablewidth="80%"> är fel, det ska stå <table width="80%">
Ett vitalt mellanslag saknas samt att det ska vara " runt värdet. Citationstecknen runt värdena finns inte bara där för skojs skull, de fyller sin funktion. Det slarvas lite med citationstecknen, men varför inte lära sig att göra rätt från början. Var noga med att få med alla tecken i koden. Det kan ibland funka utan, men ger då ett syntax-fel. För många syntax-fel i ditt dokument kan krascha besökarens web-läsare eller så presenteras din sida inte alls på det sätt du hade tänkt.

! Det där med citationstecken kan vara lite irrationellt och svårt att förstå. Men fäll hellre än fria. Är du det minsta osäker kläm dit med ett par citationstecken, de gör ingen skada. En tumregel är att så fort det finns ett komma, #, mellanslag, /, procent, plus + minus - tecken i värdet ska man omge värdet med "-tecken samt när man använder bokstäver förutom aA-zZ, dvs å ä ö. Gör till en vana att citera URL:adresser samt filnamn.

Några exempel på när du ska citera:
font size="+2"
alt="Alternativ bildtext"
img src="filnamn.gif"
a href="http://www.atiger.pp.se"
td width="20%"
target="_top"

Du ska också tänka på när du blandar flera taggar (koder) att de ska skrivas i en viss ordning. Börjar man med tagg 1 ska man också sluta med tagg 1 osv. ett exempel:
<starttagg1><starttagg2>xxx</sluttagg2></sluttagg1>

Glömmer du att skriva ut en sluttagg så avslutar du aldrig startaggen. Har du t.ex skrivit <b> för att markera att här ska texten vara i fetstil så blir resten av texten i ditt dokument i fetstil om du inte avslutar med en sluttagg </b> där du vill att texten ska bli normal igen.

Filnamn / sökvägar
Jag kan även nämna en annan sak, filnamn med mellanslag, å, ä och ö. Bara för att allt går bra i Win 95/98 så funkar det ej överallt. Servrarna, dit du överför dina filer har kanske ett helt annat operativsystem, de är oftast UNIX-baserade. Har du en fil döpt till länkar.html döp då förslagsvis om den till laenkar.html. I filnamnen är det också viktigt att du skriver rätt, heter filen STor.html så skriv STor.html i länkarna/filnamnen.

Ett mycket vanligt nybörjarfel är att man i html-dokumentet anger ex. bildens namn i stora bokstäver när filen är döpt i små bokstäver. Jag har nämnt att det inte spelar någon roll när man skriver sina taggar. Men vid ex. filnamn, sökvägar och bilder har det stor betydelse. Felskrivet filnamn på bilden i koden jämfört med hur det är sparat i filsystemet ger tyvärr resultatet att bilden kommer inte att synas.

Det kan vara svårt att se i filhanteraren men det finns ett knep, öppna Ws-ftp (se Tips och FTP-filöverföring) och i det programmet ser du hur filerna är sparade i högerfönstret om du öppnar den mapp de ligger i - jämför sedan med hur det är skrivet i din html-kod. Ett annat vanligt fel är att man har vänt på / - det ska ju stå http:// först men ibland kastar en del om det till http:\\, vilket är felaktigt. Ett annat vanligt fel är att sökvägen till hårddisken anges och det funkar ju inte uppe på webben, finns det en enhetsbokstav ex. C:\ så bör du ta bort detta innan du för över filerna till din server.

Börjar du få många dokument och bilder kanske du bör strukturera din "sajt". Som ex. på Tele 2 heter din huvudmapp html. Där kan du lägga din index.html, som är startsidan. Sedan mappar du så att under html ligger ex. mapparna docs, gifs och jpgs. Då får du länka mellan mapparna. Det är inte så svårt.

  
                html       
                  |  
                docs            
                |   |
              gifs jpgs    

Från index.html länkar du till dokument i docs så här:
<a href="docs/info.html">länktext</a>
Från index.html skriver du sökväg till en gif-bild i gifs så här:
<img src="docs/gifs/din_bild.gif">
eller sökväg till en gif-bild i gifs från mappen docs:
<img src="gifs/din_bild.gif">
Upp ett steg skrivs ../ upp två steg skrivs ../../ Ponera att du har ett dokument i gifs och vill länka till ett annat i jpgs. Då skriver du sökvägen
<a href="../jpgs/ditt_dok.html">länktext</a>

Ett enkelt HTML-dokument
Så här kan ett html-dokument se ut i en editor.
Vill du se hur det ser ut i en browser, klicka här!
Det kan bli oavsiktliga radbrytningar i din browser när det gäller exemplen på doctype och body nedan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Min hemsida</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ff0000" alink="#ffff00" vlink="#0000ff">
<h1>Välkommen</h1>
<p>Detta är ett försök till en egen hemsida.<br>
Så här ser jag ut.
<p><img src="bb38.jpg" width=150 height=155 alt="Ego">
</body>
</html>

Vad är det här för grekiska? Tja, börjar man förstå principen så ser det ganska glasklart ut.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> anger att detta är ett dokument som är skrivet enligt rekommendationen HTML 4.0. Doctype är obligatoriskt, se mer om detta under Diverse, META. Du ser att det står <html> i början och </html> i slutet. Det anger att här börjar samt slutar ett HTML-dokument.

<head> samt </head> markerar dokumentets huvud (header). Observera, som nybörjare kan du börja med att bara skriva in en titel på dokumentet som med några korta ord beskriver din hemsida. Då kan du registrera sidan och sökmotorerna har titeln att söka på. Att skriva in koder (bl.a då META-taggar) inom <head></head> är väl mer för den något mer avancerade hemsidessnickraren. Se mer under Diverse, META.

<title> Det som står här inne är dokumentets titel.</title>. Att ha en title på sitt dokument är obligatoriskt. Titeln är det som syns längst upp i namnlisten på browsern. Det är också det som syns om någon sätter ett bokmärke på din sida. Försök att med några korta ord få med vad din sida handlar om. Bra om du senare ska registrera den.

<body> och </body> anger att innanför dessa taggar finns själva dokumentet, exempelvis text och bilder. Det är också i <body> du anger anger bakgrundsfärg/bild,textfärg och länkarnas färg.
<body bgcolor="#000000" text="#ffffff" link="#ff0000" alink="#ffff00"> vlink="#0000ff"> Här i detta exempel anges att bakgrundsfärgen ska vara svart, texten vit, röda länkar, aktiva länkar gula och besökta länkar ska vara blåa. Se mer om hexadecimala färger under Grafik, Bakgrunder. Anger du inget i body-taggen visas sidan i browsern som standard (default), ofta grå, svart text och blåa länkar. Det beror på hur du har inställt i din läsare.

<h1>Rubrik</h1> anger att texten innanför markeringarna är en rubrik. Rubriken visas med fetstil och finns i olika storlekar. <p> talar om för browsern att här kommer ett nytt stycke. <br> talar om för browsern att här ska den bryta till en ny rad. <img src="bb38.jpg" width="150" height="155" alt="Ego"> talar om för browsern att här ska den bilden laddas in. Man anger även höjd och bredd på bilden samt anger en alternativtext till bilden, här alt="Ego", se mer om detta under Grafik.

Å, Ä och Ö
I en vanlig text-editor måste du ersätta vissa tecken med en speciell kod. Fyra tecken ur ASCII-tabellen är speciellt viktiga. Det är < > & och ". De har var och en en speciell innebörd i HTML och kan därför inte skrivas rakt upp och ner i din vanliga text. Så här ska du alltså skriva <html> i editorn som vanligt när du ska skriva in en tagg. Men inte mindre än=<. Då måste du koda om < till &lt; du ska skriva mindre än=&lt; inne i editorn.

Jaha, säger vän av ordning. Hur är det med våra svenska tecken då? Sitter du och skriver i en editor kommer du att erfara att den ofta självmant kodar om våra bokstäver, annars finns det oftast ett snabbkommando som gör det åt dig. Men egentligen behövs inte det sedan den nya internationella "character set" ISO lat1 PUBLIC ISO 8879-1986// blev standard. Enda kruxet är att alla servrar inte är konfigurerade på detta sätt.

Personliga hemsidor behöver knappast kodas om såvida du inte tror att den kanske blir populär och föremål för utskrift. För där har tydligen Mac-ägarna problem om man inte kodar om. De har ju en annan teckenuppsättning. Men de ser sidorna helt okey på nätet utan omkodning. Eller om du börjar skriva sidor för företag och internationellt, då bör du kosta på dig att koda om våra svenska bokstäver. Vill du se fler exempel, klicka här.

< med &lt;

> med &gt;

& med &amp;

" med &#34;

ä med &auml;

Ä med &Auml;

Ö med &Ouml;

ö med &ouml;

Å med &Aring;

å med &aring;

HTML-editorer
Det finns många bra HTML-editorer att hämta ned från nätet. Jag rekommenderar HomeSite (samma företag som säljer Dreamweaver) som har en inbyggd validator (kontroll av att du kodat rätt), där du kan koda manuellt eller använda olika snabbkommandon/tangenter samt att den kodar korrekt. Vilket man tyvärr inte kan säga att flertalet andra svenska eller engelska editorer gör. Vill du bara testa så finns en äldre gratis-variant (dock ej med alla finesser) att ladda ned under avsnittet Länkar. För Mac finns WYSIWYG-editorer bl.a Golive Cyberstudio (finns numera även för Windows).

Jag började med min första hemsida i Netscaps WYSIWYG-editor, What You See Is What You Get. Vill du prova Netscape kan du plocka hem en utvärderingskopia från Sunet eller hos Netscape. Här behöver du inte peta med koderna, du skriver, klickar på knappar och du ser resultatet växa fram. För nybörjare kanske en bra start. Men ett varningens ord om du vill göra ett proffsigt intryck samt koda rent, undvik WYSIWYG-editorer.

Jag gjorde en enkät och frågade efter vad mina besökare använder för editorer. Tack för alla svar som vällde in. Det var tydligen ett intressant tema. De flesta förespråkade att använda en texteditor eller en HTML-editor typ HomeSite för bästa resultat. De flesta var rörande överens om i sina kommentarer att FrontPage och andra WYSIWYG-editorer var mindre bra. Många jobbade dock i sådana men justerade sedan till koden manuellt i en texteditor. Jag har listat resultatet i en tabell för intresserade.

© Annica Tiger a_t@tele2.se

Besök gärna min blog

Mina andra sidor ser ni nedan.

www.tiger.se, www.atiger.se, www.tiger.pp.se, www.atiger.pp.se, www.atiger.nu och www.nodaddy.se.


STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML