HTML, som står för HyperText Markup Language, är ett språk som används för att presentera information och data på Internet. Det finns flera versioner av HTML, men de vanligaste idag är HTML4 och XHTML (extensible html) och det sistnämnda är vad vi kommer att använda oss av i denna artikel.
Värt att notera innan vi börjar är att HTML och XHTML är två olika språk, även fast man kan tro att XHTML är en nyare version av HTML. HTML är baserat på ett språk som kallas SGML, medan XHTML är baserat på det striktare XML, men detta är överkurs.
Varje HTML-sida består av mängder av så kallade element. Det finns en mängd olika element som kan användas på hemsidor, men det är egentligen bara ett tiotal man egentligen behöver komma ihåg.
Vi börjar simpelt med en sida som vi döper till index.html. Det första elementet vi behöver är <html>, som säger åt webbläsaren att det här är en typ av HTML-kod. I det elementet kommer vi att behöva ett <head>-element och ett <body>-element.
index.html
<html>
<head>
<body>
<html> <head> </head> <body> </body></html>
Genom att titta på detta kodstycke förstår du nog hur ett element är uppbyggt. Inom < och > anger man vilken typ av element det är, och man avslutar taggen med samma tagg fast med ett snedstreck.
<
>
I <head> anger man kod som webbläsaren använder för att ta reda på bakgrundsinformation för sidan, detta kan vara saker som vad sidan heter, vem som gjort den och så vidare. vi börjar med att lägga till en <title>-tagg, där vi anger sidans namn (kodexempel kommer om en liten stund).
<title>
I <body> hamnar det som i slutändan visas i webbläsaren. Detta kan vara text, bilder, tabeller och så vidare. Vi börjar med att lägga till en rubrik och ett litet text-stycke.
<html> <head> <title>Min hemsida</title> </head> <body> <h1>Startsidan</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </body></html>
Som du kanske förstår så är <h1> en rubrik (h = heading som betyder rubrik. Det finns flera storlekar, därav siffran) samt att <p> är ett stycke text (p = paragraph = stycke). Det här är faktiskt tillräckligt med information för att de flesta webbläsare ska kunna förstå och presentera sidan, så du kan prova att öppna den.
<h1>
<p>
Som jag nämnde tidigare så är XHTML som vi skulle använda oss av idag baserat på XML och därav mycket mer strikt än HTML. Detta gör att vi behöver lite extra kod för att sidan ska vara "valid" XHTML.
Först måste man lägga till en dokumentmall, även känd som DOCTYPE. Vi kommer att använda en som kallas XHTML 1.0 Transitional, som är en lite snällare variant av XHTML. Dokumentmallen bestäms genom att lägga till följande kod högst upp i HTML-sidan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Dokumentmallen bestämmer vilken version av (X)HTML som ska användas. Olika versioner har stöd för olika element och attribut, för XHTML 1.0 finns exempelvis Strict, Transitional och Frameset.
En annan sak som behövs är en så kallad namnrymd. Det är ett attribut (som vi kommer till senare) som gör att <html>-taggen ser ut såhär:
<html xmlns="http://www.w3.org/1999/xhtml">
En sista rad man enligt standarden måste använda, men som man i dagsläget inte borde använda eftersom IE6 går i ett specialläge, är en teckenkodning som ser ut så här:
<?xml version="1.0" encoding="iso-8859-1"?>
Men som sagt borde man strunta i den i skrivande stund, eftersom IE6 inte gillar den och IE6 är alldeles för populär än så länge.
Attribut används för att bestämma vissa saker på olika element. Vi ska använda en bild som exempel, eftersom bild-elementet kräver ett attribut som heter src för att hitta igen själva bilden.
src
<img src="bild.jpg" />
Det var väl inte så svårt? Men vänta nu, ser inte <img>-taggen annorlunda ut? Eftersom det inte är tänkt att man ska kunna ha något värde eller element inuti en <img>-tagg så "avslutar" man den direkt istället för att ha en slut-tagg. Detta görs då genom att lägga snedsträcket direkt i start-taggen.
<img>
HTML och XHTML erbjuder en hel den olika element och attribut, men det är långt ifrån alla man behöver kunna. Däremot finns det ett par som kan vara bra att komma ihåg.
Något som är viktigt att komma ihåg är att en del element inte passar in i andra. Det finns så kallade block-element, som läggs in på sidan som block (syns lättast genom att de ofta har 100% bredd), i dessa block-element kan man placera andra block-element eller så kallade inline-element. Man kan dock inte placera block-element i inline-element. Låter nog krångligt men det är ganska enkelt när man får kläm på det.
Divisioner...används för att dela upp olika typer av innehåll på sidan (<div>), exempelvis kan man ha en meny i en och huvudtexten i en annan.
<div>
Rubriker...tillhör block-elementen. Det finns som jag skrev tidigare fem olika storlekar, <h1>, <h2>, <h3>, <h4>, <h5> och <h6>.
<h1>, <h2>, <h3>, <h4>, <h5> och <h6>
Hyperlänkar...som används för att länka till andra sidor. Ser ut ungefär såhär: <a href="sida2.html">Text</a>
<a href="sida2.html">Text</a>
Textformatering...för att göra texten exempelvis <strong>fet</strong> eller <em>kursiv</em> (går att ändra betoning, men det tar vi i någon annan artikel).
<strong>
</strong>
<em>
</em>
Bilder...ser ut ungefär såhär:
<img src="sökväg" alt="Bilden kunde inte hittas" />
Nu har vi nog lärt oss tillräckligt egentligen för att göra HTML-sidor, men det är ju inte direkt häftigt. Nu ska vi fixa en sida med lite nyttig (hehe, right) information.
Som exempel tar vi en sida där vi presenterar mina gamla Eldar Swooping Hawks. För detta behöver vi använda lite rubriker och text-stycken, som vi skrivit om tidigare, men vi behöver också en tabell för att presentera figurernas styrka och så vidare.
Tabeller består av celler åt alla möjliga håll. För att få nån ordning på detta börjar man först ordna varje rad (<tr>) och sedan varje kolumn (<td>, eller <th> ifall det är rubriker för kolumnerna). Vi kommer också att sätta en rubrik för själva tabellen, eftersom man kan göra det på ett lite speciellt sätt.
<tr>
<td>
<th>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Rules for Swooping Hawks, from the old Codex</title> </head> <body> <h1>Swooping Hawks</h1> <p>Swooping Hawks specialise in bringing death to anyone, no matter who they are. Their wings allow them to swiftly move to anywhere on the battlefield, picking off the enemy with a hail of energy bolts.</p> <table width="100%" border="1"> <caption>Swooping Hawks</caption> <tr> <th></th> <th>Points/Model</th> <th>WS</th> <th>BS</th> <th>S</th> <th>T</th> <th>W</th> <th>I</th> <th>A</th> <th>Ld</th> <th>Sv</th> </tr> <tr> <td>Swooping Hawk</td> <td>21</td> <td>4</td> <td>4</td> <td>3</td> <td>3</td> <td>1</td> <td>5</td> <td>1</td> <td>9</td> <td>4+</td> </tr> <tr> <td>Exarch</td> <td>+12</td> <td>5</td> <td>5</td> <td>3</td> <td>3</td> <td>1</td> <td>6</td> <td>2</td> <td>9</td> <td>3+</td> </tr> </table> <p>The squad consists of between 5 or 10 Swooping Hawks.</p> <p><strong>Weapons:</strong> Lasblaster, Plasma grenades, Swooping Hawk grenade pack.</p> <h2>Special rules</h2> <p>Swooping Hawk Wings: See the Wargear section.</p> </body></html>
Denna kod borde ge något som ser ut ungefär såhär:
Så där, nu har vi gjort en fungerande och lättöverskådelig sida. Men fy så ful den är, ser ut som en hemsida från 80-talet. Detta fixas enkelt med CSS, som vi lär oss i nästa del. See you later.
Skribent: Marcus Olovssonhttp://www.w3sidan.net/profil/Arood
Var innehållet i den här artikeln användbar? Har du några övriga kommentarer?
Hur mycket gillade du den här artikeln? Ju fler hjärtan desto bättre.