Källkod

Är det något på den här sidan du inte förstår? Fungerar inte koden? Är det något annat du behöver hjälp med? Skicka ett e-mail eller använd kontaktformuläret under Kontakt ovan. I den mån jag kan lovar jag att hjälpa dig.

Du kan modifiera min kod så mycket du vill. Skicka gärna ett e-mail om du gör det, så lägger jag ut din kod på den här sidan.

Koden nedan är färgad enligt följande:

Jag kommer troligen att göra ett mer utvecklat färgschema senare men vill skynda långsamt. Jag har sett en del ruggiga exempel på färgad kod och vill helst inte bidra med ytterligare ett sådant exempel.

Källkod som används på mkforlag.com

Hämta ett urval av källkoden som används på den här webbplatsen. Just nu kan följande hämtas:

Observera att koden inte är kommenterad. Kontakta mig via kontaktformuläret eller via mail om du behöver hjälp. Jag besvarar dina frågor så gott jag kan.

Hämta Källkod (4,4 MB). Senast reviderad 2 februari 2008.

Omdirigering med php header

Användbart när du vill radera eller byta namn på en php-fil, i det här exemplet gammal.php, och skicka de som försöker nå gammal.php till en annan php-fil.

Byt ut innehållet i gammal.php mot

<?php header("Location: http://min_webbplats.com/annan_fil.php"); ?>

Byt ut http://min_webbplats.com/annan_fil.php mot den fullständiga sökvägen till filen du vill omdirigera till.

Spara gammal.php med samma namn och på samma plats som tidigare.

Resutat: Den som försöker nå gammal.php omdirigeras direkt till filen du angivit sökvägen till i koden.

Php include

Om du kan html åtminstone ganska bra men inte php, lär dig åtminstone php include. Åtminstone om du har kod som ser exakt likadan ut på alla eller många sidor, t.ex.:

På rak arm kan jag inte komma på någon kod jag lärt mig som har underlättat så mycket och öppnat så många möjligheter. Det påståendet färgas förstås av att jag just lärt mig koden nedan och inte har så mycket distans till den, men jag tror att jag även senare, åtminstone i princip, kommer att hålla med mig själv.

Så här ser koden ut:

<?php include "my_file.php"; ?>

Kommentarer:

Förutsättningar för att koden ska fungera:

Exempel:

Skapa tre filer. Skriv så här i den första filen (head-delen kan förstås se annorlunda ut om du har andra preferenser än jag):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>En fil med php include</title>
</head>
<body>
<?php include "top.php"; ?>
<p>Innehåll som är unikt för just den här sidan.</p>
<?php include "bottom.php"; ?>
</body>
</html>

Spara som my_file.php e.d. Skriv så här i den andra filen:

<p>Innehåll längst upp i filen som är precis likadant på alla sidor.</p>

Spara som top.php. Skriv så här i den tredje filen:

<p>Innehåll längst ner i filen som är precis likadant på alla sidor.</p>

Spara som bottom.php.

Ladda upp alla tre filerna till samma folder på din webbplats. Öppna my_file.php i din webbläsare. Resultat:

De tre filerna har alltså byggts ihop till en fil innan de skickades till dig.

Nästa steg är att byta ut innehållet i mina exempelfiler mot ditt innehåll. Sedan är det bara att, förhoppningsvis framgångsrikt, fortsätta experimentera!

Rgb-färger i css-dokument

Av någon anledning används i princip alltid hexfärger i css-dokument. Personligen föredrar jag dock att använda rgb-färger. Det är giltig kod enligt w3schools.com.

Några exempel på hexfärger: 000000 = svart, ff0000 = röd, 00ff00 = grön, 0000ff = blå, ffff00 = gul, ff00ff = magenta, 00ffff = cyan och ffffff = vit (värdena anges alltså med det hexadecimala talsystemet, där tal byggs upp av siffrorna 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e och f).

Några exempel på rgb-färger: 0,0,0 = svart, 255,0,0 = röd, 0,255,0 = grön, 0,0,255 = blå, 255,255,0 = gul, 255,0,255 = magenta, 0,255,255 = cyan och 255,255,255 = vit.

Det finns kanske fördelar med att använda hexfärger i css-dokument som jag inte känner till, men såvitt jag kan bedöma påverkas inte resultatet nämnvärt (om ens alls) om man använder rgb-färger istället. Skriv så här för att få blå text:

Css:

.blue {color:rgb(0,0,255);}

Html:

<p class="blue">Texten blir blå.</p>

Resultat:

Skriv så här för att få blå text och grå bakgrund:

Css:

.blue_and_grey {color:(0,0,255); background:rgb(224,224,224);}

Html:

<p class="blue_and_grey">Texten blir blå. Bakgrunden blir grå.</p>

Resultat:

Styckeindrag som i en bok

Css:

.em_1 {margin-left:1em;}

Html:

<p>Det här är det första stycket. Som i en bok har det inget indrag.<br />
<span class="em_1">Det här är det andra stycket. Som i en bok har det en fyrkants indrag (d.v.s. ett indrag med samma bredd som bokstävernas höjd.</span><br />
<span class="em_1">Det här är det tredje stycket.</span>
</p>

Resultat:

Det här är det första stycket. Som i en bok har det inget indrag.
Det här är det andra stycket. Som i en bok har det en fyrkants indrag (d.v.s. ett indrag med samma bredd som bokstävernas höjd).
Det här är det tredje stycket.

Centrerad text

Bl.a. användbart om man vill centrera dikter som i en bok.

Css:

.auto {margin-left:auto; margin-right:auto; width:auto;}

Html:

<table class="auto" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Där haven möts står tiden stilla.<br />
Bäckar föds, och källor dör:<br />
Där vitklädd flicka alltmer dränks i damm.<br />
Där svartklädd pojke bränns av solens vind.<br />
Där ängen är en avbild blott och avbilden en äng.</td>
</tr>
</table>

Resultat:

Där haven möts står tiden stilla.
Bäckar föds, och källor dör:
Där vitklädd flicka alltmer dränks i damm.
Där svartklädd pojke bränns av solens vind.
Där ängen är en avbild blott och avbilden en äng.

MK bildgalleri

Klicka på Bilder ovan och sedan på en av länkarna för att se galleriet i verkligheten. Den fullständiga koden (inklusive exempelbilder) finns i det hämtbara ziparkivet. Nedan citeras det mesta av LÄS MIG!.txt, som bör ge en ganska god bild av hur galleriet fungerar:

1. Byt ut mina stora bilder i big-mappen mot dina stora bilder. Ge dem namnen 01.png, 02.png, 03.png etc. (Du kan förstås också använda t.ex. jpg-bilder.)

Tips: Använd höjden 650 px till ett galleri anpassat för skärmupplösningen 1280x1024 (som det här) och höjden 400 px till ett galleri anpassat för skärmupplösningen 1024x768. Det är åtminstone de höjder jag använder, och de fungerar bra i de kanske tio olika bildskärmar jag testat mitt galleri i.

2. Byt ut mina miniatyrbilder i small-mappen mot dina miniatyrbilder.

Tips: Använd höjden 130 px till ett galleri anpassat för skärmupplösningen 1280x1024 och höjden 100 px till ett galleri anpassat för skärmupplösningen 1024x768. Det är åtminstone de höjder jag använder, och de fungerar bra så länge galleriet inte består av fler än ungefär 30 bilder (d.v.s. om man som jag vill att alla miniatyrbilder ska rymmas på skärmen). Består galleriet av fler än ungefär 30 bilder får man minska storleken på miniatyrbilderna något.

3. Gör ett zip-arkiv av dina originalbilder och placera dem i zip-mappen (d.v.s. om du vill att dina framtida besökare ska kunna hämta dina originalbilder; vill du inte det hoppar du över det här steget).

Tips: Tänk på att placera bilderna i en mapp innan du zippar dem. Det underlättar mycket för de som senare hämtar bilderna.

4. Ta bort eller lägg till numrerade php-filer (01.php, 02.php, 03.php etc.) om du inte har exakt 30 bilder.

Lägger du till php-filer behöver de redigeras. Om du t.ex. sparat fil 30.php som fil 31.php behöver följande ändras:

5. Om du tagit bort eller lagt till php-filer behöver du ändra slutet av rad 12 till "index.php">Framåt i den sista numrerade php-filen (d.v.s. 20.php om du har 20 bilder etc.).

6. Ta bort eller lägg till rader som börjar med <a href= i index.php så att de stämmer med det antal bilder du har. Ändra två nummer i varje rad till 31, 32, 33 etc. om du lägger till rader.

7. Ta bort rad 12 i index.php om du inte gjort något zip-arkiv (se 3 ovan).

8. Redigera setup.php. Ändra BARA text mellan citattecken, t.ex. "Partille": det är den texten som syns på bildskärmen. Några kommentarer om texten mellan citattecknen:

Hämta MK bildgalleri 1.1 (4 MB). Senast reviderat 16 juli 2008. Det mesta av de 4 MB:n är exempelbilder.

Dagens datum på svenska

Version 1:

<?php
date_default_timezone_set ("Europe/Stockholm");
$month = array("januari","februari","mars","april","maj","juni","juli","augusti","september","oktober","november","december");
$today = date("j") . " " . $month[(date("n")-1)] . " " . date("Y");
print "$today"; // 10 juli 2008
?>

Resultat:

Version 2:

<?php
date_default_timezone_set ("Europe/Stockholm");
$week = array("måndag","tisdag","onsdag","torsdag","fredag","lördag","söndag");
$month = array("januari","februari","mars","april","maj","juni","juli","augusti","september","oktober","november","december");
$today = $week[date("N")] . " " . date("j") . " " . $month[(date("n")-1)] . " " . date("Y");
print "$today"; // torsdag 10 juli 2008
?>

Resultat:

Anm 1: Kod för olika tidszoner finns på http://se2.php.net/manual/en/timezones.php.

Anm 2: Använd charset=utf-8 i head-delen på ditt php-dokument för att å, ä och ö ska visas korrekt.

Flashvideo i html-dokument

Den här koden för inbäddning av en flashvideo i ett html-dokument klarar W3C:s validering för xhtml 1.1.

<div>
<object type="application/x-shockwave-flash" data="mk_logo.swf" width="160" height="80">
<param name="movie" value="mk_logo.swf" />
</object>
</div>

Gör så här om du vill använda koden:

Byt ut mk_logo mot namnet på din swf-fil.

Byt ut 160 mot vidden i pixlar och 80 mot höjden i pixlar på din video.

Google-sökning

Den här koden för sökning med google klarar W3C:s validering för xhtml 1.1.

<div>
<form action="http://www.google.com/search" method="get">
<div>
<input type="text" name="q" value="" id="textbox" alt="" size="70" maxlength="1000" />
<input type="submit" name="go" value="Google-sökning" class="green" />
<input type="hidden" name="domains" value="http://www.mkforlag.com" /><br />
<input type="radio" name="sitesearch" value="" id="radio-1" alt="" />
<label for="radio-1">www</label>
<input type="radio" name="sitesearch" value="http://www.mkforlag.com" id="radio-2" alt="" checked="checked" />
<label for="radio-2">mkforlag</label>
</div>
</form>
</div>

Gör så här om du vill använda koden:

Rad 05: Byt ut 70 mot önskad längd på textboxen och 1000 mot önskad maxlängd på textboxen. Värdena anger såvitt jag förstår ungefär hur många bokstäver som får plats i boxen; t.ex. innebär värdet 70 att 64 bokstäver får plats.

Rad 06: class="green" kan tas bort. Jag har gett submit-knappen en klass, eftersom jag vill att texten på knappen ska vara grön för att harmonisera med den övriga layouten på min webbsida.

Rad 07 kan tas bort men behövs om du vill att besökare fortfarande ska kunna söka på just din webbplats utan att använda bakåtknappen efter att ha gjort en googlesökning. Om du väljer att behålla rad 07, byt ut mkforlag.com mot adressen till din webbplats. http://www. behöver du antagligen inte byta ut, men jag har markerat de bokstäverna också, eftersom det förekommer att webbadresser börjar på något annat sätt.

Rad 09: www kan bytas ut mot t.ex. Sök hela webben, som Google valt att kalla radioknappen ifråga.

Rad 10: http://www.mkforlag.com: se kommentar till rad 07. Ta bort checked="checked" om du inte vill att radiknappen ska vara markerad redan när besökare anländer till din webbplats.

Rad 11: Byt ut mkforlag mot namnet på din webbplats e.d.

Kommentera den här sidan

P.g.a. problem med spam måste din kommentar godkännas innan den publiceras.

Tre vita vingar inskrivna i en cirkel fängslar ilarna.
MK Förlag
mkforlag@live.com
Timmervägen 3A
541 64 Skövde Senaste nytt 16/1 2010: Testa nästa version av mkforlag.com (fungerar ännu bara delvis) Mats Kristiansson
rekommenderar ... Prova ESET Smart Security i 30 dagarFler länkar ... Skaffa webbhotell Servage erbjuder 750 GB webbhotell för 0(!) - 69 kr per månad
MK Förlag ¤ mkforlag@live.com ¤ Timmervägen 3A ¤ 541 64 Skövde