KREATiV -- Text I Foto I Design

Det här är en favorit-tutorial från en av mina gamla bloggar.

Ibland händer det att man vill formatera texter man skriver på nätet för hand, även som 'vanlig' användare. Du har säkert sett hur andra människor skriver i fetstil, kursivt eller stryker över ett ord mitt i texten. Här har du sju frågor och svar om textformatering i xHtml för nybörjare. Lathund är trots allt människans bästa vän.

1) Hur gör jag delar av min text fet?

Skriv <strong>texten jag vill ska vara fet</strong>
eller <b>texten jag vill ska vara fet</b>
så får du nästan garanterat fram raden texten jag vill ska vara fet

2) Hur gör jag delar av min text kursiv?

Skriv <em>texten jag vill ska vara kursiv </em>
eller <i>texten jag vill ska vara kursiv</i>
så får du nästan garanterat fram raden texten jag vill ska vara kursiv

3) Hur gör jag delar av min text överstruken?

Skriv <strike>texten jag vill ska vara överstruken</strike>
eller <span style="text-decoration: line-through;">texten jag vill ska vara överstruken</span>
så får du nästan garanterat fram raden texten jag vill ska vara överstruken

4) Hur gör jag delar av min text understruken?

Skriv <u>texten jag vill ska vara understruken</u>
Om du har tur så fungerar det som texten jag vill ska vara understruken

xHtml vill dock gärna att du använder det mer komplicerade
<span style="text-decoration: underline;">texten jag vill ska vara understruken</span>
alltså texten jag vill ska vara understruken

5) Hur lägger jag en färg bakom min text som om jag strukit över den med markeringspenna?

Skriv <span style="background-color:yellow;">texten jag vill ska ha en färgad bakgrund</span>
så får du nästan garanterat fram raden texten jag vill ska ha en färgad bakgrund

Att skriva ut färgnamn fungerar med 16 olika så kallade webbsäkra, namngivna färger. Du finner en lista på dessa namn bland annat här.

Du kan också skriva <span style="background-color:#ffff00;">texten jag vill ska ha en färgad bakgrund</span>
så får du också nästan garanterat fram raden texten jag vill ska ha en färgad bakgrund

I det andra exemplet skriver du hexadecimalkoden för samma färg. Detta ger mer kontroll över färgnyansen. HEX-koden bygger på RGB-färgsystemet. De två första siffrorna/bokstäverna står för mängden rött i färgen, de två mittersta för mängden grönt och de två sista för mängden blått.

HEX-koden hittar du med hjälp av en colorpicker online  eller till exempel i Photoshop. Den har alltid och ska alltid ha ett nummertecken (#) framför sex (6, varken mer eller mindre) siffror/bokstäver.

Det finns faktiskt ett tredje alternativ också, nämligen att använda RGB-kod direkt.

Skriv <span style="background-color: rgb(255, 255, 0);">texten jag vill ska ha en färgad bakgrund</span>
så blir det nästan garanterat också texten jag vill ska ha en färgad bakgrund

Vanligen använder man dock något av de två tidigare alternativen.

6) Hur ändrar jag färg på min text?

Skriv <span style="color: blue;">texten jag vill ska ha en annan färg</span>
så får du nästan garanterat fram raden texten jag vill ska ha en annan färg

eller skriv HEX-koden istället för 'blue'. För detaljer se fråga fem.

7) Hur ändrar jag färg på både bakgrund och text samtidigt?

Skriv <span style="background-color: black; color: white;">texten jag vill ska ha en annan färg och bakgrund</span>
så får du nästan garanterat fram raden texten jag vill ska ha en annan färg och bakgrund

Du kan ersätta färgnamnen med HEX-koden (hexadecimalkoden), för mer information se fråga fem.

Det här är en artikel jag skrev på en gammal blogg jag drev en gång, men ämnet är alltid aktuellt så det blir favorit i repris.

Hur lägger jag in en bild på en sida med hjälp av html-kod?

Skriv följande i ditt utrymme för html kod:

<img src="http://www.minvärd.com/mittnamn/album/bildnamn.jpg" alt="Foto på min katt i badkaret." title="Ville gillar inte vatten." height="100px" width="200px" />
(Du kan kopiera koden och använda direkt med dina egna värden.)

På ren svenska blir det:

< = starta kod.
img src = bild sök.
"http://www.minvärd.com/mittnamn/album/bildnamn.jpg" = Se till så adressen du använder slutar med bildfilen annars är det inte en direktlänk.
height = höjd på bilden, anges i pixlar.
width = bredd på bilden, anges i pixlar.
alt = alternativ text att visa om bilden inte syns av någon anledning.
title = titel på bilden som kommer att visas i en liten textlåda när jag drar med pekaren över bilden.
/= den här kodremsan är fullständig fast den saknar en tag.
> = slut på kod.

Om du inte har någon egen domän att lägga dina bilder på och länka in dem från kan du använda en bildserver. De tre största och bästa är:

http://www.photobucket.com -Lätt att använda, snabbt. Kan vara lite nitiska med deletandet av copyright skyddat material (misstag sker). Du måste registrera dig.
http://www.flickr.com -Lätt att använda, socialt, kan länkas till ditt yahoo kontonamn. Du måste registrera dig. http://imageshack.us -Lätt att använda. Du behöver inte registrera dig, men behåller din IP adress som det enda sättet att identifiera dig på så det är bäst att du sparar ner adresserna till dina bilder någonstans annars kommer du aldrig hitta dem igen.

Kan jag lägga in vilka bilder som helst på min blogg?

Kan, kan du, men det är inte så värst lagligt och väldigt oförskämt. Det finns många gratisbilder på nätet, men alla är inte menade att dela med sig av. Oftast framgår det av sidan du besöker om bilderna är fria att använda.

Vanligtvis kan du använda nätbilder så länge du berättar varifrån de kommer (att skriva Google som källa gillas inte) och länkar till källan, men det är inte alltid lämpligt det heller.

Vad som också är absolut olämpligt är att 'hotlinka', det vill säga lägga in en bild på ex. blogg.se genom att länka den från en annan hemsida direkt. Det är bara tillåtet om det framgår av sidan att det är okej. Det äter nämligen upp bandbredd för sajtägaren.

Tre enkla tumregler för användning av bilder på nätet:

• Allt på nätet är inte fritt att använda bara för att det ligger på nätet.
• Ge alltid cred för bilden och länka till källan, såvida ägaren inte uttryckligen sagt att det inte behövs.
• Om du är tveksam över vem som äger bilden eller hur den får användas är det alltid bäst att fråga!

Ända sen början av webb 2.0 har det varit populärt med tonade bakgrunder på bloggar och hemsidor. Det kan bli en ganska snygg och stilren effekt.

Hur lägger jag in en tonad bakgrund på min blogg?

Att lägga in en tonad bakgrund på sin blogg är faktiskt inte alls så svårt. Nyckeln är att använda en horisontell bakgrundsbild plus en vanlig bakgrundsfärg.

Bakgrundsbilden
Skapa en gradient i ditt bildprogram eller med hjälp av ett onlineverktyg. Bilden behöver inte vara så bred, men se till att den är så hög som du vill ha den. Kopiera också färgkoden (exempelvis #FFFFFF) för den nedersta färgen. Den kommer du lägga som bakgrundsfärg på din blogg sedan.

Spara din bild och ladda upp den på din bildserver/blogg. Leta reda på adressen till bilden (slutar på .jpg .gif eller .png) exempelvis genom att högerklicka på din bild och välja 'visa bild'. Det här beror förstås på vilken bildserver du använder. På exempelvis Bloggesse behöver du bara klicka på bilden i ditt bildarkiv två gånger så kommer du till bildadressen.

Koden
Gå in i din stilmall och leta reda på 'body'. Om det står något om 'background' mellan { och } så radera det och ersätt med/klistra in din egen kod. Såhär:

body {
background: #FFFFFF url(adressentillbilden.jpg) top left repeat-x;
}

Översatt betyder koden rätt upp och ned: Bakgrunden för 'body' ska ha färgen vit, den ska också ha en bakgrundsbild som går från övre vänstra hörnet och följer x-axeln (alltså upprepas horisontellt över skärmen).

Några färdiga gradients som du kan använda

Lycka till!

LinkWithin är en liten widget som man kan lägga in i sin blogg oavsett vilken bloggplattform man ligger på. Tanken är att du ska lägga in LinkWithin så att den hamnar under varje blogginlägg och länkar vidare till mellan 3 och 5 andra inlägg på din blogg. Med både bild, text och länk till dina tidigare inlägg ökar trafiken på din blogg då fler personer söker sig vidare längre in i arkivet. Dessutom länkar denna smarta widget inte bara till random gamla inlägg utan till såna som är relevanta för det aktuella ämnet.

Hur gör jag för att lägga in LinkWithin på min blogg?

Börja med att surfa in på http://www.linkwithin.com/learn och registrera dig.
Du får ange:

• Din e-mailadress.
• Adressen till din blogg.
• Vilken plattform du ligger på (blogg.se räknas till 'other').
• Hur många länkar du vill ha.
• Om bakgrunden ska vara ljus eller mörk.

Sedan får du ett script (javascript) som du ska klistra in i kodmallen för din blogg. Scriptet kan du klistra in var du vill inom <body> och </body>, men förslagsvis lägger du det just innan </body> så det läses sist på sidan. Fast jag lägger in all kod på samma ställe, för enkelhetens skull, så det kan ni ju också göra.

Scriptet ser ut ungefär såhär (fast med ditt eget blogg-id):

<script>
var linkwithin_site_id = 190536;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>/blockquote>

Det finns dock två viktiga kodsnuttar vi måste lägga till här. Den första koden bestämmer vad texten ovanför länkarna ska säga, exempelvis: "Om du gillade det här kanske du också tycker om:". Den andra koden bestämmer var själva länkarna ska ligga någonstans.

Alltså lägger vi till:

linkwithin_text='Kanske gillar du också:'

Klistra in detta direkt under raden med ditt linkwithin_site_id. Texten inom '' kan du ändra till vad du vill.

Vi lägger också till:

<div class="linkwithin_div"></div>

Denna kodsnutt är jätteviktig att placera rätt då den som sagt bestämmer var länkarna ska lägga sig någonstans. Klistra in den förslagsvis mellan <div class="entrybody"> och <div class="entrymeta">, men absolut före </tag:entrylist>. Om du vill ha extra kontroll över placeringen kan du dessutom lägga in allting i en helt ny div.

Såhär:

<div class="entrybody">${EntryBody}</div>

<div id="linkwithin">
<script type="text/javascript">
var linkwithin_site_id = 190536;
linkwithin_text='Kanske gillar du också:'
</script>
<script type="text/javascript" src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
<div class="linkwithin_div"></div>
</div>

<div class="entrymeta">

Kom ihåg att du måste lägga in koden i alla kodmallar om du vill att länkarna ska synas på fler sidor än framsidan. Lycka till!

Den som vill arbeta med egna teman till wordpress eller andra applikationer behöver ofta en fungerande testatmosfär direkt på sin egen dator. Detta för att undvika problemet med att konstant behöva vara uppkopplad till nätet, samt ladda upp nya filer till sitt webbhotell.

Här i veckan bestämde jag mig för att börja arbeta ordentligt med Wordpress och laddade därför ned det på datorn. För att kunna driva Wordpress lokalt behövs det dock bland annat server och databas, jag laddade därför också ned XAMPP, ett litet program som innehåller det mesta, bland annat Apache och SQL, som kan behövas för att testa olika applikationer.

Det är ganska vanligt att man använder just XAMPP när man ska driva Wordpress på sin egen dator och jag trodde därför att detta skulle gå relativt smärtfritt. Ack så jag bedrog mig; tydligen har senaste versionen några buggar...

1. Den som vill lägga in ett lösenord för root, vilket programmet ber om när man kommer in på phpMyAdmin trots att default för programmat är password-no, kommer upptäcka att de blir utslängda när de lagt till ett sådant. Det är tydligen en fnurra på tråden så man måste gå in i config- och password-filerna för XAMPP och manuellt ändra till matchande lösenord där. Uppdatera browser-fönstret och vips så är du inne igen.
   
   
2. När det är dags att gå in på wp-admin/install.php kommer felmeddelandet:

   PHP is not running. WordPress requires that your web server is running PHP. Your server does not have PHP installed, or PHP is turned off.

   Detta error beror på en programmeringsmiss. XAMPPs konfigurationsinställningar för PHP tillåter helt enkelt inte användandet av shorthand. Vilket såklart är helt absurdt eftersom de flesta programmerare använder det. Lösningen är dock enkel nog när man vet problemet: Gå in i php-mappen under xampplite och öppna php.ini Lägg till kodsnutten ; short_open_tag = On och sen kan du äntligen komma in på wp-admin/install.php Inte ett ögonblick för tidigt, va?

Hoppas därmed att er eventuella installation av XAMPP och Wordpress går lite smidigare.


Länkar

---

XAMPP på Sourceforge
Wordpress.org
Tutorial (på engelska) för användning av Wordpress med XAMPP