Grundläggande HTML-koder för din blogg

Oavsett om du kör Blogger, WordPress eller någon annan bloggplattform så kommer du förr eller senare behöva kunna några HTML-koder. HTML är ett språk som hemsidor delvis är uppbygga av och som är jättebra att kunna lite av om du ska blogga.

HTML-kod kan vid första anblick se väldigt komplicerat ut – det kan det förstås också vara, men grunderna i HTML är lättare än vad man tror. Med lite kunskap inom HTML kan man justera sin blogg och göra den lite mer personlig.

Vi går igenom grunderna!

HTML koder – grundtaggar

Det finns åtta grundtaggar i HTML och uppbyggnaden ser ut på liknande sätt. Man startar med en tag och avslutar med en tagg . En sida här på min blogg är uppbyggd med följande åtta grundtaggar.

<HTML> Inleder html-dokumentet och talar om att här kommer det komma HTML-kod.

grundläggande html koder

Matrix? Nej HTML! Foto credit: Marjan Krebelj

<HEAD> Här ligger viktigt information om sidan, som inte alltid är synlig. Till exempel text som Google använder för att läsa av vad din sida innehåller.

<TITLE> Titeln för sidan </TITLE>

<BODY> Här kommer själva sidan, men all text, bilder och länkar som brukar finnas.

</BODY> Indikerar att nu har jag visat all text, bilder och länkar som jag vill visa.

</HTML> Nu kommer det inte komma mer HTML-kod.

 

HTML koder för att ändra utseende på text

Allt som hamnar mellan <BODY> och </BODY> kan man justera utseendet på ytterligare:

<CENTER>Centrerar texten</CENTER>
<BR>Radbryter

<P>Ett stycke</P>

<H1>Huvudubrik Storlek 1</H1>

<H2>Underrubrik Storlek 2</H2>

<H3>Underrubrik Storlek 3</H3>

<H4>Underrubrik Storlek 4</H4>

<H5>Underrubrik Storlek 5</H5>
<H6>Underrubrik Storlek 6</H6>

<B> Fetstil på texten</B>

<I>Kursiv text </I>

<font face=”namn på typsnitt”>Text i annat typsnitt</font>

<font size=”1-6″>Justerar storleken på din text</font>

<font color=”din färg”>Byter färg på din text</font>

<U>Understruken text</U>

HTML koder för länkar & bilder

Så här gör du för att länka till min blogg till exempel:

<a href=”https://www.starta-blogg.se”> Starta-Blogg.se – Tips, trafik, SEO & marknadsföring för din blogg</a>

Vill du att länken ska öppna upp sig i ett nytt fönster lägger du endast till target=”_blank” så här:

<a href=”https://www.starta-blogg.se” target=”_blank”>Starta-Blogg.se – Tips, trafik, SEO & marknadsföring för din blogg</a>

Texten Starta-Blogg.se – Tips trafik, SEO och marknadsföring för din blogg är det man kallar ankartext. Det är viktigt att man försöker beskriva sidan man länkar till på ett relevant sätt och inte bara skiver ”denna sida” eller ”klicka här”, för det är varken användarvänligt eller gillas av Google.

Vill du visa en bild på din sida använder du följande HTML kod:

<img alt=”här beskriver du bilden med ord” src=”https://www.exempel.se/bildkatalog/bild.jpg” />

Du måste givetvis byta ut med adressen till bilden du ska visa.

Vill du ha en bild som länk använder du följande HTML kod:

<a href=”adressen till sidan”><img alt=”här beskriver du bilden med ord” src=”adressen till bilden” border=”0″ /></a>

Behöver du ytterligare hjälp med HTML koder? Skriv en kommentar så lovar jag att försöka besvara din fråga så snart jag bara kan. Vill du hellre försöka själv så rekommenderar jag dig att kolla in Webdesignskolan.

Fler tips för din blogg

Du gillar kanske också...

1 svar

  1. Alf Wiklund skriver:

    Försöker göra en släktbok på CD, på min startsida finns länkar till olika dokument och en länk till en video fil som finns på skivan och det är denna länk som jag inte får att fungera. Har sökt som tusan på olika sajter utan resultat.

    Mycket tacksam om du kan hjälpa mig!

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *