10 basic HTML-koder

Aaaaarrrghhhh – det brinner i min kreativitet. Jag har ju – som jag skrivit så många gånger förr – slutat att koda sådär mycket på jobbet och känner nu att det är brist på kod i mitt liv. Min designförsäljning har jag kommit igång med dessutom. Men jag känner att det saknas grafik, det saknas tips, det saknas design och kod i mitt liv just nu. Jag älskar ju sådant! Det är faktiskt något som jag nog aldrig kommer sluta tycka om – jag har ändå kodat sedan jag var 14 år gammal, så snart är jag inne på 13:e året. Så, jag har förstått att flera har saknat mina tips; designtips, kodtips, typsnittstips… Ja, allt det där jag grejade mycket mer förr. Jag känner att för min egen del så var det oerhört givande att ha en lång paus från allt det. Jag tycker att mina grejer jag gör nu är finare än de jag gjort tidigare. Jag har nog hittat mitt kreativa jag tack vare fastan. Det känns mycket bra! Så, jag tänkte börja lite lätt med 10 basic HTML-koder som varje bloggare borde känna till för att underlätta för sig själv.

10 basic HTML-koder

JUSTERING

För att centrera din text:

<p style="text-align: center;">Text här</p>

alternativt

<center>Text här</center>

För att vänsterställa din text:

<p style="text-align: left;">Text här</p>

För att högerställa din text:

<p style="text-align: right;">Text här</p>

LÄNK

Om du behöver göra en länk i HTML:

<a href="http://länkhär" target="_blank">Länktext</a>

Tips: Det är alltid viktigt att se till att länkar ut från din blogg och/eller ett inlägg har target=”_blank” i sig. Då öppnas länkarna i ett nytt fönster eller i en ny flik, annars finns det risk att läsaren glömmer av och inte kommer tillbaka.

BILD

Om du ska infoga en bild i HTML:

<img src="http://bildlänkhär">

Tips: Lägg gärna till en alt-tagg som förklarar din bild så att Google vet vad den innehåller. Då har du lättare att hamn på Googles bildsök och få fler besökare.

BILDLÄNK

Kombinera bild och länk till en bildlänk:

<a href="http://länkhär" target="_blank"><img src="http://bildlänkhär"></a>

FETSTIL, KURSIV, GENOMSTRUKEN & UNDERSTRUKEN TEXT

Fetstil

<strong>Text här</strong>

Kursiv

<em>Text här</em>

Genomstruken

<s>Text här</s>

Understruken

<u>Text här</u>

RADBYTE

Om du vill hoppa ner en rad och fortsätta där:

<br />

MELLANSLAG

Ett mellanslag i HTML:

&nbsp;

Varför? Ibland kan ett mellanslag vara användbart om du till exempel vill ha mer luft kring ett ord, eller om radbytes-koden ovan inte fungerar. Då kan du hoppa ner en rad, göra ett mellanslag i HTML och då blir det garanterat ett radbyte.

TEXTSTORLEK

Om du vill att en del av texten är större/mindre:

<p style="font-size: 10px">Text här</p>

Tips: Blanda inte alltför mycket!

TEXTFÄRG

Om du vill att en del av texten har en annan färg:

<p style="color: #a18b87">Text här</p>

Tips: Tänk på att när du gör detta och någon gång byter design så kommer färgen att kvarstå, och kanske inte matcha din nya design. Det bästa är istället att skapa HTML-klasser med en färg du kan ändra i samband med att du ändrar din design. Då ändras textfärgen på alla ställen.

RUBRIKER

Om du vill skapa rubriker & underrubriker på din blogg:

<h1>Text här</h1>

<h2>Text här</h2>

<h3>Text här</h3>

<h4>Text här</h4>

<h5>Text här</h5>

Tips: Ofta brukar en inte ha mer än fem stycken H-taggar. Den första (H1) ska alltid vara den största, och säga mest om en sida, därefter kommer H2 som är mindre och är mer en beskrivning av sidan. H3 brukar vara rubriken i ett inlägg, och H4 & H5 kan du använda i dina inlägg. Detta förbättrar läsbarheten och SEO’n dessutom!

3 Comments

  1. Jennifer 8 augusti, 2017

    Jag kan inget alls om sådana koder haha

    Svara
  2. Är helt kär i din design Ragna, säljer du möjligtvis wordpress-version av den också?

    Svara
    • Sanna @ Sannas Rum 9 augusti, 2017

      Åh, tyvärr gör jag inte WP-designer. Det är alldeles för omständligt och tidskrävande 😞 Min plan är dock att gå ngn form av kurs så att jag blir en hejare på det. Så kanske kan jag erbjuda det i framtiden, men dessvärre inte i dagsläget!

      Svara

Kommentera

Follow