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!

5 detaljer i en blogg

Åh, idag så tänkte jag lista fem detaljer i en blogg som jag tilltalas lite extra av. Min blogg handlar ju om detaljer i stort och smått, och har även handlat väldigt mycket om bloggdesign genom åren. Så jag tänkte att det kan ju jag kombinera, eller vad tycker ni? Så, det blir inte yttepyttesmå detaljer som jag kommer lista, utan delar av en blogg som gör att jag fastnar lite extra och gärna vill ha mer.

1. Vackra bilder

Ja, jag önskar vackra och välredigerade bilder. En behöver inte vara någon stjärna på att fotografera om en kan få till färgerna i redigeringen, tycker i alla fall jag (feel free to disagree!). Det som framför allt tilltalat mig med vackra bilder är inspirationen det skänker mig. En plockar inspiration från så många hörn och ställen nu för tiden, i och med att det finns oändligt många källor till att bli inspirerad idag. Därför följer jag gärna olika personer, och i olika medier, för att de tillsammans representerar vad jag tilltalas av och min skaparanda blir således lite av en blandad kompott av den inspirationen jag får från alla mina källor.

2. En tilltalande och genomtänkt design

Ja, förstås. Jag är en person som gärna lägger märke till småsaker. Ibland känns en design verkligen för plottrig. Jag tror att det sker när personen bakom designen helt enkelt känner sig inkomplett kring designen i sig. Inte som människa förstås, haha. Men det är någonstans en konst att kunna hålla något simpelt och cleant, och inte för att jag kanske lyckas med det själv, men det är något jag strävar efter. Som Steve Jobs en gång sa: “Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.”

3. Matnyttiga artiklar

Jag vill gärna lära mig något i en blogg. Inte nödvändigtvis måste den bestå av fakta. Men att känna att en blir inspirerad av bilder är inte alltid tillräckligt för mig, jag vill också känna att jag kan lära av de som står bakom “publikationen”. Och det behöver absolut inte vara något som jag kan praktisera, det kanske är ett motto någon lever efter, eller ett hack hen har som en har sparat in tid på. Det kan vara ett sätt att designa, eller göra kollage på. Eller en livsstil, bara. Men det kan förstås också vara tutorials, guider, idéer. Eller bara reflektioner av livet, det inspirerar mig mycket.

4. Snygga och lättlästa typsnitt

Ja, det är en detalj som är väldigt viktig för mig, kanske för att jag ser lite halvkasst sedan många år tillbaka. Jag ser gärna att rubriker och text är lättlästa, inte med för mycket space runtomkring, inte med för stora radavstånd och inte med för små. Inte för liten text, men inte för stor. Inte för smalt och inte för tjockt. Ett typsnitt som kan kombinera att vara snyggt och samtidigt lättläst är ett vinnande koncept för mig. Det ska vara vilsamt och bekvämt att läsa, helt enkelt.

5. En inspirerande livsstil

Ja, det här är ju en rätt stor detalj, inte sant? Något vi pratade om mycket på mitt förra jobb, då jag jobbade mot bloggvärlden och influencers varje dag, var det där “ha-begäret” som vi kallade det. De flesta framgångsrika bloggare skapar ett ha-begär hos sina läsare som gör att de vill stanna. Det finns såklart undantag men om vi verkligen ska se till de som lyckats över tid så är det ofta för att de har något som läsarna kanske inte har. Det behöver inte vara fysiska ägodelar, utan kan vara utseende, hälsoinriktning, ett hem eller bara en livsstil som tilltalar läsaren. Kanske lever personen ett liv som följarna vill leva, eller så lever personen ett liv som följarna önskar att de levde men förmodligen aldrig kommer leva. Se till exempel på Kardashian/Jenner-familjen. Där snackar vi ha-begär! Jag själv inspireras inte särskilt mycket utav dem utan det som skapar ha-begär hos mig är fin inredning, en sund och hälsosam livsstil, personer som är kreativa och skapar, reseglada människor och… det där lilla extra? Människor som unnar sig tilltalar mig väldigt mycket. Om det så bara gäller att ta ett glas på stan, fixa naglarna eller fransarna eller köpa en ny klänning på impuls. Jag vet inte, jag bara känner att jag kan identifiera mig med det ibland och att det blir som en inspirerande livsstil för mig även om jag själv inte alltid unnar mig. Det är svårt att förklara, men jag hoppas att ni ändå har ett litet hum om vad jag menar.

Namn, e-post & url hamnar efter fälten

Innan:

Namn: <br />
<input type="text" name="author" onchange="doChange(this)" value="" size="42" maxlength="255" />
<input name="remember" onclick="doCheck(this)" type="checkbox" value="1" id="remember" /> Kom ihåg mig?<br />
<br />
E-postadress: (publiceras ej)<br />
<input type="text" name="authoremail" onchange="doChange(this)" value="" size="42" maxlength="255" />
<br />
URL/Bloggadress: <br />
<input type="text" name="authorurl" onchange="doChange(this)" value="http://" size="42" maxlength="255" />
<br />
Kommentar: <br />
<textarea name="comment" onchange="doChange(this)" cols="52" rows="7"></textarea>


Efter:

<input type="text" name="author" onchange="doChange(this)" value="" size="42" maxlength="255" /> Namn
<input name="remember" onclick="doCheck(this)" type="checkbox" value="1" id="remember" /> Kom ihåg mig?<br />
<br />
<input type="text" name="authoremail" onchange="doChange(this)" value="" size="42" maxlength="255" /> E-postadress (publiceras ej)
<br />
<br />
<input type="text" name="authorurl" onchange="doChange(this)" value="http://" size="42" maxlength="255" /> URL/Bloggadress
<br />
<br />
Kommentar: <br />
<textarea name="comment" onchange="doChange(this)" cols="52" rows="7"></textarea>

Bubbla runt inläggen


Styckena jag pratar om är:
h3 {
.entrybody {
.entrymeta {

Lägg till denna rad i h3-stycket och entrymeta-stycket:

background: url(http://länktillbilden) no-repeat;


Lägg till denna rad i h3-stycket och entrymeta-stycket:

background: url(http://länktillbilden) repeat-y;


Lägg till denna rad i h3-stycket och entrymeta-stycket:

background: url(http://länktillbilden) no-repeat;


Sanna tipsar:
I h3 ska du lägga toppbilden, i entrybody lägger du mittenbilden och i entrymeta lägger du bottenbilden. Detta tips går dock att använda lika bra, då är det bara att lägga till skugga och rundade inlägg också, men det blir liksom inte en bubbla i fyrkanten (som är content, inläggsdelen).

Dropdown från en bild


OBS! Du måste kunna hantera att göra en dropdownmeny för att kunna göra detta. Kolla på denna film först om du inte vet det.

Istället för ”Överkategori” lägger du alltså din bildkod:

<img src="http://bildensurl" border="0">


I koden nedan har jag strukit under alla överkategorier som finns enligt koden jag lagt ut i tipset jag länkade ovan:

<ul id="navbar">  
<li><a href="#">Överkategori</a>   
<ul> 
<li><a href="http://adress">Länk 1</a></li>      
<li><a href="http://adress">Länk 2</a></li>     
<li><a href="http://adress">Länk 3</a></li>      
<li><a href="http://adress">Länk 4</a></li>  
</ul>            
</li>

<li><a href="#">Överkategori</a>   
<ul>      
<li><a href="http://adress">Länk 1</a></li>      
<li><a href="http://adress">Länk 2</a></li>     
<li><a href="http://adress">Länk 3</a></li>      
<li><a href="http://adress">Länk 4</a></li>  
</ul>            
</li>

<li><a href="#">Överkategori</a>   
<ul>      
<li><a href="http://adress">Länk 1</a></li>      
<li><a href="http://adress">Länk 2</a></li>     
<li><a href="http://adress">Länk 3</a></li>      
<li><a href="http://adress">Länk 4</a></li>  
</ul>            
</li>

<li><a href="#">Överkategori</a>   
<ul>      
<li><a href="http://adress">Länk 1</a></li>      
<li><a href="http://adress">Länk 2</a></li>     
<li><a href="http://adress">Länk 3</a></li>      
<li><a href="http://adress">Länk 4</a></li>  
</ul>            
</li>
</ul>

Ändra bakgrundsfärg på kommentarerna

Styckena jag pratar om är de som börjar med:
.commentheader {
.commenttext {
.commentmeta {

Du ändrar sedan färgkoden som står bakom background/background-color i varje stycke.

Se till så att margin och padding ser likadant ut i alla dessa stycken.

Om du inte hittar dessa stycken kan du trycka på ctrl+f (PC)/cmd+f (MAC) och söka på dem i rutan som dyker upp. Då hittar du dem garanterat.

Bild mellan rubrik & datum



Stilmallskoden:

.datum {
color: #484848;
font-family: arial;
font-size: 10px;
padding-left: 53px;
padding-bottom: 5px;
padding-top: 18px;
font-weight: normal;
text-align:left;
letter-spacing: 1px;
font-style: none; background: transparent url(http://bildurlhär) no-repeat;
height:44px;
margin-left: 700px;
margin-top: -80px;
}


Kodmallskod:

<div class="datum">TEXT/LÄNKEN JAG PRATAR OM HÄR</div>
1 2 3 4 7