HTML-skola

HTML är en förkortning av Hyper Text Markup Language och är egentligen inte ett programmeringsspråk utan en uppsättning markeringskoder. Varje textutseende och layout har sin egen kod eller “tagg” som det kallas (från engelskan). Koden för till exempel fetstil är <strong>( strong). All text som står efter en kod får det utseende koden ger. </strong> betyder “slut på fetstil”. Alla HTML-koder är omgivna av <>. De flesta koder fungerar på samma sätt. En startkod och en slutkod. Start-koden är omgiven av <> och slutkoden är om-given av </>, som till exempel slutkoden för fetstil: </strong>. Koden för kursiv stil är <em> (emphasis) och </em> är slutkoden för kursiv stil.

HTML-innehåll som du kan komma att hitta på din n.nu sida & förslag på lösningar till problem som ibland uppkommer.

Div

<div> Information som ska visas webbläsaren </div> Används för att dela upp en webbsida i olika områden och används som behållare för annat innehåll. I sidredigeraren på n.nu används detta främst av gallerifunktionen. Har du haft ett galleri eller en lightbox och sedan skriver text kan det bli så att den gör "divvar" i stället för paragrafer och att det inte alls blir som tänkt. Vi på supporten ser det ganska ofta. 

Exempel på problem och lösning kommer finns längre ner. 

Rubrik 1-6

<h1> Din rubrik </h1> Användning: Rubriker där 1 är huvudrubrik och 6 är den minsta underrubriken, dock är h4 den minsta valbara på n.nu. Endast 1 och 2 är "nödvändiga". Orsak: Om en rubrik innehåller ett visst sökord så ökar chanserna för att din webbsida ska visas på just den sökningen. Google bryr sig bara om h1 för att bestämma relevans. Bing bryr sig även om h2.

<H1>

<H2>

<H3>

<H4>

Paragraf/stycke

<p> Stycke-text </p> Användning: Taggen p används för att skapa stycken och är den tagg som används flitigast när du skriver text till din hemsida.

Radbryting

<br> Användning: Radbrytning. Används för att byta rad utan att behöva skapa ett nytt stycke. Tangentbord: shift+enter.

Span

<span></span> Användning: Span används för att välja ut särskilda områden inuti ett annat element som ska formateras med CSS.Till exempel måla röd text i ett annars svart stycke.

Externa länkar

Vi måste skriva http:// före adresserna. Vad betyder detta? Länkar har koden <a>. href (Hypertext REFerence) talar om vilken typ av länk det är, nämligen en hyperreferens till en annan sida. Efter adress-koden talar du om vad det ska stå på länken. Sedan avslutar vi länken med </a>. Det var väl inte så svårt? Nu ska vi skapa länken till hej.com. Vi börjar med att tala om vilken typ av länk vi vill göra:

<a href=

Sedan anger vi adressen till Hej:

<a href="http://www.hej.com">

Vad ska ska det stå på länken? Och avslutningskoden:

<a href="http://www.hej.com"> Hej! </a>

Interna länkar

I stora sidor, som denna, är det ofta bra att kunna hoppa snabbt mellan olika ställen inom sidan. Det gör du med interna länkar. För att kunna hoppa till ett ställe inom sidan måste du sätta ett så kallat “ankare” på den plats du vill kunna hoppa till. Ett ankare kan se ut till exempel så här:

<a name="ankare">ett ord eller en bild</a>

Byt ut ankare mot vilket namn du vill så länge det bara används en gång på samma sida. När du har ett ankare är det lätt att göra en länk till den platsen på sidan:

<a href="#ankare">

# betyder att länken refererar till ett ankare. Interna länkar kan även användas för förflyttning från en sida till ett namngivet ställe på en annan sida. En sådan länk kan se ut så här:

<a href="annan_sida.htm#ankare">

Eller om den ligger i en annan domän:

<a href="http://annan.domän.se/annan_sida.htm#ankare">

Maillänkar

Visst är det trevligt att få post! Därför ska vi lägga till en e-postlänk, så att den som besöker hemsidan kan skicka några rader. Allt vi behöver är din e-postadress. Här använder vi ingenreklam@alls.com. Vi bygger upp länken steg för steg:

<a href=

Inga konstigheter så långt. Vi går vidare:

<a href="mailto:

Vänta nu, vad var det där? Jo,  mailto: talar om att webb-läsaren ska öppna sin e-post-funktion. Nu måste vi tala om vem vi vill skicka e-post till och vad det ska stå på länken. För tydlighetens skull skriver vi e-postadressen, men det kan lika gärna stå "mejla mig".

<a href="mailto:ingenreklam@alls.com"> ingenreklam@alls.com </a>

Jag lade till slutkoden </a> på en gång.

En del har webbläsare som inte kan visa bilder, exempelvis synskadade som använder skärmläsare. För att de ändå ska veta vad en bild föreställer kan vi hjälpa dem genom att lägga till lite kod:

<img src="bilder/vacker.jpg" alt="Skönheter" border="1">

ALT (alternative) gör att de som inte kan se bilden i stället ser den alternativa texten. Du måste inte använda ALT, men det är hövligt att göra det. Dessutom är det bra för sökmotorer, som inte heller kan se vad bilder föreställer.

<img src="images/testbild.jpg" width="143" height="107" alt="Text visas om bilden är trasig" title="Text visas när du för muspekaren över bilden" />

Vi börjar med att tala om att vi vill ha en tabell:

<table border="1">

TABLE (tabell) betyder att vi vill göra en tabell. BORDER="1" talar om att det ska vara en ram som är 1 pixel bred mellan rutorna och runt tabellen. Nästa steg är att tala om att vi vill påbörja en rad i tabellen:

<table border="1"><TR>

<tr> (table row) betyder att här börjar en ny rad i tabellen. Vi måste tala om att vi vill ha ett fält i tabellen också:

<table border="1"><tr><td>En ruta med ram runt

<td> (table data) gör att vi får ett datafält i tabellen. Dessa tre rader är vad vi behöver för att definiera en enkel tabell. Vi sätter dit slutkoder också:

<table border="1"><tr><td>En ruta med ram runt</td></tr></table>

Nu ska vi lägga till en ruta i tabellen bredvid den vi redan har. Det ser ut så här:

<table border="1"><tr><td>En ruta med ram runt</td><td>En till ruta med ram runt</td></tr></table>

Vi lägger alltså till ett datafält efter det första men före slutet på raden (</TR>). Då ser tabellen ut så här:

När vi ändå är igång kan vi lägga till en rad i tabellen så att det blir två rader med vardera två fält i:

<table border="1"><tr><td>En ruta med ram runt</td><td>En ruta till med ram runt</td></tr><tr><td>En ruta med ram runt på rad 2</td><td>En ruta till med ram runt på rad 2</td></tr></table>

Vi lägger in koderna för den nya raden efter den första raden, men före tabellslutet (</table>).

Ibland händer det att vi vill ha en ruta som är lika lång som flera fält. Vi gör en sådan och sätter en rubrik i den

<table border="1"><tr><th colspan="2">Tabellrubrik</th></tr> <tr><td>Ruta 1, rad 1</td><td>Ruta 2, rad 1</td></tr> <tr><td>Ruta 1, rad 2</td><td>Ruta 2, rad 2</td></tr> </table>

Ibland vill vi ställa upp saker i punktform. Det finns några funktioner i HTML som är till för just det. Börja med att tala om att du vill göra en punktlista. Det gör du med <UL> (unnumbered list). Starta varje listrad med <LI> (list item) och avsluta dem med</LI>. Vi gör en enkel lista:

<ul> <li>Rad ett i vår lista</li> <li>Rad två i vår lista</li> <li>Rad tre i vår lista</li> <li>Och så vidare ...</li></ul>

Så här ser ovanstående ut:

• Rad ett i vår lista
• Rad två i vår lista
• Rad tre i vår lista
• Och så vidare …

Nu gör vi samma sak, men byter ut <UL> mot <OL> så att vi får en numrerad lista (ordered list):

<ol> <li>Rad ett i vår lista</li> <li>Rad två i vår lista</li> <li>Rad tre i vår lista</li> <li>Och så vidare ...</li></ol>

Det ser ut så här när du är färdig:

1. Rad ett i vår lista
2. Rad två i vår lista
3. Rad tre i vår lista
4. Och så vidare …

Det finns en del andra sätt att definiera listor, men vi nöjer oss med det vi har gått igenom. Det kommer du långt med.

Problem och lösningar

Gallerisidan ser bra ut i redigeraren men inte när jag sparar. Det kan bero på nedanstående:

div class="lightbox fleft"></div> <br> <div class="lightbox fleft"></div><br> <div class="lightbox fleft"><span style="text-align: center;"> </span></div> <br> <div class="lightbox fleft"></div> <div></div> <div></div> </div> <div class="lightbox fleft"> <div> </div> </div>

Såhär (som ovan) kan det bli om du har redigerat på en gallerisida. 

Såhär ska ett galleri se ut (utan text under bilderna):
<!-- Begin gallery --> <br><div class="lightbox fleft"><a href="adress till stor bild" rel="lightbox"><img src="adress till minibild" alt="" /></a></div> <br><div class="lightbox fleft"><a href="adress till stor bild" rel="lightbox"><img src="adress till minibild" alt="" /></a></div><br><div class="lightbox fleft"><a href="adress till stor bild" rel="lightbox"><img src="adress till minibild" alt="" /></a></div> <br><div style="clear: both; height: 0;"> </div> <br> <!-- End gallery -->

Det du kan göra om din sida ser knas ut är att 

1. Börja om från början, ta bort hela galleriet och lägg in det igen. 
2. Kika i koden, se om det finns en massa <div></div> som inte ska vara där. Sudda alla dem, och har de text mellan sig, byt ut dem till <p></p>
3. Kontakta support med ditt lösenord och en beskrivning på problemet, så hjälper vi dig.