Detta är en mycket kort genomgång av HTML för att ge ett exempel på hur sådan kod ska läsas och hur den kan användas på IdrottOnline-sidor.

Är man ute efter en grundligare genomgång finns det många kurser man kan gå och andra guider som går att hitta gratis på internet, t.ex. http://www.w3schools.com/html/

HTML är språket som används för att göra de visuella elementen på hemsidor. HTML-kod består av sk. taggar som definierar elementen. Dessa taggar är av olika typer och beroende på vilken typ så kan den ha olika attribut.

En HTML-sida är uppbyggd på detta sätt:

<html>
<head>
</head>
<body>
</body>
</html>

 

Ett element påbörjas med en öppningstagg, t.ex. <body> och avslutas med motsvarande stängningstagg, för <body> är denna </body>. Allt som ligger emellan dessa taggar hamnar inuti elementet.

All HTML-kod ska ligga i html-elementet. I head-delen läggs information om hemsidan som inte direkt är synlig på hemsidan. Det kan t.ex. vara sökord och en beskrivning av hemsidan som ska visas upp av sökmotorer.

När det gäller IdrottOnline-sidor har man väldigt begränsad möjlighet att interagera med informationen som ligger i head. Detta kan endast göras genom att fylla i fält och så kommer informationen automatiskt att läggas in på motsvarande plats i head.

Det som läggs i body är det som syns på hemsidan. Detta får man ganska stor kontroll över på IdrottOnline-sidor, det finns förstås redan existerande kod inlagd här som man inte kan ta bort/ändra på hur som helst. Men det går att lägga in sin egenskrivna kod på olika ställen i body.

För att använda egen HTML-kod på er IdrottOnline-sida så klickar ni på HTML-rutan som finns vid alla innehållsfält i redigeraläget.


 

Exempel med tabell

Här är ett exempel på en tabell, <table>-taggen.

Taggen <table> kan ha t.ex. attribut för tjocklek på ramen. Så om vi vill göra en tabell med en ram som är 1 pixel tjock kan koden se ut så här:

<table border=”1”></table>

Denna tabell kommer dock inte se mycket ut för världen då den inte innehåller några rader eller kolumner.

Dessa bygger man upp med hjälp av taggarna <tr> (table row) och <td> (table data). En tabell med två rader och två kolumner ser ut på det här sättet:

<table border=”1”>

           <tr>

                   <td>Text i cell nr 1</td>

 <td>Text i cell nr 2</td>

           </tr>

            <tr>

                   <td>Text i cell nr 3</td>

                   <td>Text i cell nr 4</td>

            </tr>
</table>
Table-elementet öppnas.
Inuti table-elementet påbörjas en ny rad med <tr>.
Inuti tr-elementet görs en ny cell med <td></td>.
Här görs cell nummer två med <td></td>.
Första raden avslutas med </tr>.
Andra raden påbörjas med <tr>.
Här börjas och avslutas cell nummer 3 med <td></td>.
Och här gör vi sista cellen med <td></td>.
Andra raden avslutas med </tr>.
Tabellen avslutas med </table>
Och resultatet ser då ut så här:


 
 

 

Om man inte vill använda sig av CSS, men ändå vill ha t.ex. textstycken och bilder bredvid varandra kan en osynlig (border=”0”) tabell vara ett bra alternativ.

Begränsningar

I IdrottOnlines HTML-verktyg finns det vissa begränsningar, för att skydda från att hela strukturen går sönder pga. Icke-komplett kod. Verktyget försöker alltså filtrera bort avsluts-taggar som inte har en början, samt ta bort oönskade radbrytningar osv.

Detta kan ibland ha lite bieffekter som att det blir svårt att få med radbrytningar exakt där man vill ha dem. Det kan då vara bra att istället för <br/> används sig av <p>&nbsp;</p> för att göra en radbrytning.

Om man använder sig av script-taggar så kommer det läggas in lite extra kod som visas nästa gång man öppnar HTML-verktyget. Denna kod kan man bara strunta i.

 

För att se vilka olika attribut som de olika elementen har samt vilka element som finns kan man besöka W3C:s sida http://www.w3schools.com/