HTML skola/guide

Sann hälsa för dig!!!

   URL

E n URL (Uniform Resource Locator) är en sökvägsbeskrivning till en resurs på internet. En URL för vanliga HTML-dokument ser ofta ut någonting i stil med: http://karelma.com/internet/htmlskola.html

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Objekt

O bjektet är vad som avses med kommandot, exempelvis en bild, en länk eller liknande.

   Attribut

D etta begrepp fattast enklast genom lite praktisk erfarenhet. Man kan säga att attributen difinierar objektets (kommandots) olika dimensioner, alltså de sätt varpå objektet kan ändras. Se nedan!

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Argument

A rgumentet är ett visst, av kodmakaren valt värde, vilket objektets attribut sättes till. I kommandot <img src="http://karelma.com/superpluseng/svenskflagga.gif" alt="Svenska Flaggan" width="50" height="25" border="0" /> så är alla uttryck inom citationstecken argument, därvid "http://karelma.com/superpluseng/svenskflagga.gif", "Svenska Flaggan","50", "25" och "0". Attributen är "src", "alt", "width", "height" och "border".

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Skelett

N är man inledningsvis startar med HTML är det brukligt att få sig föreslaget ett enkelt skelett, vilket ser ut så här:

<html>

  <head>
    <title>Din sidas namn</title>
  </head>

  <body>
Din sidas innehåll
  </body>

</html>

O vanstående kommandon omnämnes i allmänt tal såsom HTML- taggar. HTML, och enkannerligen XHTML (den förfinade, modernare formen), uppbygges kring par av taggar varav den avslutande taggen inledes med ett /, exempelvis sålunda </html>. Denna tagg avslutar inledningstaggen <html> vilka två kommandon bildar ett par. </head> avslutar det huvud som inledes med <head> och </body> avslutar den kropp vilken inledes med <body>. XHTML, till skillnad mot HTML kräver att alla kommandon är skrivna med gemena, inte versaler. Eftersom HTML också accepterar gemena är dessa att föredraga.

B ody- delen, alltså den del som står mellan body- taggarna, utgör ditt egentliga dokument och är förutom titeln mellan <title> och </title> det enda besökaren kan se av ditt dokument utan att granska källan.

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Titel

D et är värt att lägga ned extra möda på titeln, eftersom många sökmotorer med förkärlek väljer allt mellan titeltaggarna som nyckelord för dokumentet. Därigenom hamnar du högre i sökmotorernas index för dessa nyckelord och får fler besökare. Titeln är den enda delen i dokumentets huvud, mellan <head> och </head> som är omedelbart synligt för besökaren. Om du som ytterligare beskrivning av din sida önskar nyttja meta- taggar så kommer dessa att läsas av en del sökmotortjänster, såsom i skrivande stund AltaVista, AllTheWeb (Evreka), Overture m.fl. Google läser inte meta- taggar. Även söktjänster som de tidigare nämnda fäster knappast större vikt vid meta- taggarna än vid den text som möter besökaren. XHTML kräver att dokumentets huvud inkluderar taggarna <title> och </title> även om det är tomt däremellan.

D en text du önskar presentera för din sidas besökare skall alltså ligga mellan body- taggarna, exempelvis.

<html>

  <head>
    <title>Påver sida</title>
  </head>

  <body>
Detta är en påvert designad sida.
  </body>

</html>

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Text

I denna text så måste alla "konstiga" tecken bytas ut, exempelvis "å" mot "å" "ä" mot "ä" och "ö" mot "ö". En mer fullständig sammanfattning hittar du på:
http://ramses.coolfreepages.com
XHTML kräver till skillnad från HTML dessutom att all text lägges mellan två ytterligare taggar, exempelvis: <p> texten här </p> -i bodydelen. I en tabell räcker tabellens egna taggar även för XHTML. För den som inte önskar använda body-taggar så finns bara ett alternativ, nämligen frames, ramar, varvid <body> och </body> antingen utgår eller placeras separat för att på något sätt säkra sökmotorernas uppfattning om sidans innehåll. Frames är dock i allmänhet inte att rekommendera. Grundorsaken är att det krånglar till indexeringen i sökmotorernas index, vilket leder till att man får konstruera två versioner av sidan, en för besökarna (nästan alla webbläsare klarar ramar numera) och en för sökmotorerna.

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Radbrytning Vagnretur

N ästa steg är att göra radbrytningar. En radbrytning markeras med <br> eller i XHTML <br /> vilket är likasågott att skriva redan från första början. För att alternativet <br /> skall fungera också i äldre browsers måste mellanslaget innan slashen vara med. I XHTML måste denna tagg ligga mellan två andra taggar, företrädelsevis i en paragraf mellan <p> och </p>. Om du i något fall vill skriva en sträng tecken inkluderande mellanslag vilka bäst presenteras på en och samma rad så finns alternativet att lägga in teckensträngen mellan taggarna <nobr> och </nobr>. Allting däremellan hamnar på en rad.

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Rubrik

O bservera skillnaden mellan rubrik och titel. Titeln hamnar som huvudnamn på dokumentet uppe i den grå zonen, medan rubrikerna möter besökaren i själva dokumentet. Det finns flera storlekar, från <h1>Din rubrik</h1> som ger största möjliga rubrik till <h6>Din rubrik</h6> vilket ger minsta möjliga; och alla storlekar däremellan. Du kan välja att ytterligare påverka storleken på dina rubriker med <font size="7"><h1>Din rubrik</h1></font> för största möjliga rubrik.

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Textstorlek

<font size="7">Din text</font> påverkar storleken på all text som ligger emellan taggarna. Här är numreringen på storlekarna den omvända, dvs 7 ger största möjliga text och 1 minsta möjliga. Du bör vara försiktig med åtminstone de två minsta textstorlekarna eftersom en del sökmotorer (AltaVista) tolkar det som försök till "spam", alltså sådan text som mera riktar sig till sökmotorerna än besökarna, på vad sätt vissa webbmastrar försöker manipulera sidans ranking i indexen. Textstorleken kan också markeras på en relativ skala, då med: <font size="+2">Din text</font>. I XHTML är det noga med att "2" eller "+2" eller vilken storlek du än har på argumentet markeras med citationstecken. Detta gäller även för alla andra argument för alla kommandon.

   Textfärg

O m du vill ändra färgen på din text så låter sig detta göras genom att du lägger in texten mellan taggarna <font color="red" >Din text</font> eller vilken annan sanktionerad färg som helst istället för "red" . Ett annat sätt att ange textfärg är att uppge hexadecimalkoden för färgen ifråga:

<font color="#FFFFFF">Vit text</font>
<font color="#000000">Svart text</font>
<font color="#FFFF00">Gul text</font>
<font color="#00FF00">Grön text</font>
<font color="#0000FF">Blå text</font>
<font color="#999999">Grå text</font>
<font color="#FF0000">Röd text</font>
<font color="#996633">Brun text</font>
<font color="#FF9900">Orange text</font>

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Teckensnitt stil

D et är fullt möjligt att bestämma med vilket teckensnitt din text skall framträda på sidan. Kommandot härför är: <font style="times">Din text</font> där "times" kan utbytas mot vilket annat önskvärt teckensnitt som helst. Förutsättningen för att din sidas besökare skall kunna läsa texten i det teckensnitt som du tänk dig är att de har det lagrat i sin dator. Undvik därför alltför exotiska varianter. Vanliga teckensnitt är exempelvis times, courier, times new roman, geneva, helvetica och verdana. Verdana är vanligt på stora, kommersiella sajter.

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Text - sammanslagna kommandon

I stället för att för ett textblock precisera tre olika par taggar, en för textstorlek, en för textens färg och en för teckensnittet så är det tillåtet att kombinera alltihop i en tagg: <text size="5" font="times" color="red" >Din text</font>

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Fet och kursiv stil

T ext kan lätt visas såsom fet eller kursiv. Man åstadkommer detta genom att placera in texten mellan taggarna <b>Din feta text</b> respektive <i>Din kursiva text</i>. Kommandot <em>Din kursiva stil</em> är ett meningslöst alternativ till sistnämnda kommando (oftast).

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Kommandot PRE

M ellan taggarna <pre> och </pre> så bevaras ursprungsformateringen i ditt dokument med avseende på radbrytningar och mellanslag. En poäng brukar sägas vara att man på så sätt lättare presenterar programkod.

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Länkar

N aturligtvis vill man som webbsidesnickare kunna länka till andra sidor, alternativt inom det egna dokumentet. Om man förfogar över en egen domän är det bästa att använda hela sökvägen då man länkar, exempelvis:
<a href="http://karelma.com/internet/htmlskola.html">HTML-skola</a>
Man kan också välja att länka ofullständigt mellan dokument på en given nivå, vilken markeras av sista slashen. Om jag från dokumentet: http://karelma.com/internet/javascript.html vill länka till http://karelma.com/internet/htmlskola.html kan jag nöja mig med följande länk: <a href="htmlskola.html">HTML-skola</a>
Vill jag först gå tillbaka ett steg i hierarkin, förbi mappen /internet/, så markeras detta med två inledande punkter:
<a href="../teknik/bilar.html">bilar - historia</a>
Den fullständiga länken skrives: <a href="http://karelma.com/teknik/bilar.html">bilar - historia</a>
Skriv inte in länkar till andra dokument med domännamnet dit, men utan "http:// ". Om jag från detta dokument länkar till http://www.goteborgschat.com på följande sätt: <a href="www.goteborgschat.com">Chat - Göteborg</a> så blir det fel. Då ledes besökaren till http://karelma.com/internet/ww.goteborgschat.com vilket ju är en icke existerande sida. Den korrekta länken är förstås: <a href="http://www.goteborgschat.com">Chat - Göteborg</a>

L änkar kan beskriva hopp inom ett dokument. Målen för dessa hopp måste i förväg ha utmärkts med ankare. Om jag i detta dokument har angivit följande ankare: <a name="kkjsdhfk">kom pjutti, pjutti</a> så kan jag länka till stället ifråga genom följande länk: <a href="#kkjsdhfk">Klicka här för att komma till ankaret "#kkjsdhfk"</a> Från ett annat dokument kan du länka till detta ankare i detta dokument genom kommandot: <a href="http://karelma.com/internet/htmlskola.html#kkjsdhfk">Klicka här för att komma till ankaret på skolsidan"kkjsdhfk"</a>

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Länkar till epostadresser

D u bör som seriös webbsidemakare avsluta dina dokument med namn och epostadress. Detta göres bäst på detta vis:
<a href="kare_andersson@y-a-h-o-o.s-e">maila mig på adressen kare_andersson@y-a-h-o-o.s-e</a>

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Bilder

B ilder lägges in genom liknande metodik som för länkar, nämligen genom att URL:en till din i förväg uppladdade bild lägges in på sidan: <img src="http://karelma.com/superpluseng/svenskflagga.gif" alt="Svenska Flaggan">Svenska Flagganeller hellre med omedelbar anpassning till XHTML: <img src="http://karelma.com/superpluseng/svenskflagga.gif" alt="Svenska Flaggan" />. Bilder i formaten GIF (Graphics Interchange Format) respektive JPEG/JPG (Joint Photographers Expert Group) brukar stödjas av de flesta webbläsare. Se alltså till att lägga dina bilder på servern i detta format. Andra, mer sällsynta format är BMP (bitmap), XBM (X bitmap) och PNG (Portable Network Graphics). Det är en god idé att inte laborera med dessa format. Du kan medels attributen "height" och "width" modifiera storleken på din ursprungliga bild. Exempel: <img src="http://karelma.com/superpluseng/svenskflagga.gif" alt="Svenska Flaggan" width="40" height="10" border="0" />Svenska Flaggan Detta bör om möjligt undvikas, eftersom bilden blir distorderad och antingen grynig, vid förstoring, eller skrymmande och tung att nedladda i förhållande till vad besökaren kan se, vid förminskning. Som du förstår kan jag göra en enpixelbild av svenska flaggan, men den tar fortfarande lika lång tid att ladda ned eftersom bildfilens storlek är konstant.

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   Bilder som länkar

L ika enkelt som man kan länka till ett annat dokument med en textsnutt, lika enkelt kan man åstadkomma samma en länk, fast med en bild som objekt. Besökare som klickar på bilden hamnar på den URL vilken du i din visdom har bestämt: <a href="www.goteborgschat.com"><img src="http://karelma.com/superpluseng/svenskflagga.gif" alt="Svenska Flaggan" /></a>Svenska 
Flaggan För att åter dryfta sökmotorer och ranking rankas ett dokument med många registrerade länkar pekande mot sig högt på nyckelord vilka finns med i länktexterna. Om man vill länka med bilder bör man därför sannolikt använda attributet alt="nyckelord" för att ernå samma fördel. Så genom detta dokument och bildlänken ovan kan enstaka besökare leta sig fram till http://www.goteborgschat.com/ genom att söka på "svenska flaggan" på sökmotorerna- hypotetiskt, alltså.

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

   tabeller

E n tabell inledes med taggen <table> och avslutas med </table>. Varje horisontell rad i tabellen inledes med <tr> och avslutas med </tr>. Varje kolumn i respektive rad inledes med <td> och avslutas med </td>. För varje rad måste antalet kolumner vara konstant, möjligen med undantag av översta och nedersta raden. Ett ytterligare undantag är celler vilka i horisontalled sträcker sig över flera kolumner, vilket åstadkommes med kommandot colspan="". Genom att markera en färg till attributet color="" i tr- taggen kan du välja att färga en cell. En tabell med två rader och tre kolumner ser ut sålunda:

<table>

<tr>
<td colspan="2" color="red" >Hej!</td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

</table>

D et går att få en cell att sträcka sig över flera rader genom att på motsvarande sätt som för td och colspan="" tillsätta rowspan="" som attribut i en tr- tagg. Kommandot <table> har också flera attribut, exempelvis color="" som reglerar tabellens färg och width="" som reglerar tabellens bredd i pixlar eller, försåvitt ett %- tecken sättes före talet i argumentet, i procent. Du har även kontroll över linjerna mellan cellerna, dessas bredd, och tomrummet emellan innehållet i olika celler. Linjetjockleken bestämmes av attributet border="" och tomrummet med cellpadding="". Ett ytterligare argument är cellspacing, vilket kompletterar border="" genom att tillföra större eller mindre tomrum mellan border- linjerna.

   Kåre Andersson
 

Kåre L.M. Andersson | Tebaks