Kodmallarna
Kodmallarna här på blogg.se består av fyra stycken: front page, entry page, category page och archive page.
FRONT PAGE:
Din framsida. Det här är den delen som kommer att ses när man skriver in din blogg-adress.
ENTRY PAGE:
Inläggens sida. Det är här man bland annat kommenterar dina inlägg.
CATEGORY PAGE:
Kategorisida. När man vill läsa en specifik kategori så kommer man till denna sida.
ARCHIVE PAGE:
Månadsarkiv. När man vill läsa en specifik månad så kommer man till denna sida.
Om du vill ändra färger, stilar, teckensnitt, länkar etc så gör du det i din stilmall. Det kan dock vara bra att veta hur kodmallarna fungerar.
HTML vs. XHTML
HTML står för Hyper Text Markup Languague och betyder i princip att sidan är uppbyggd på pålagda taggar. Dessa pålaggda taggar kallas oftast för HTML-taggar. Taggarna kommer i par och har en start-tagg och en slut-tagg. Till exempel: <html> (start-tagg) och </html> (slut-tagg).
I dina kodmallar används ett slags HTML-språk men det heter XHTML. Vad är skillnaden då? Jo, XHTML är en renare och mer strikt version av HTML men ser nästan precis likadant ut.
DIN KODMALL
Steg för steg ska vi gå igenom hur FRONT PAGE ser ut.
1. SKELETTET
Mellan <html>-taggarna, med det menas då start och slut-taggarna, så har vi hela bloggen i princip. I sidans "osynliga" del lägger man till koder som inte kommer att synas som text i din webbläsare men som ändå "gör sitt". I sidans "synliga" del lägger man till alla element som kommer att synas och göra själva bloggen.
<html>
<head>
Sidans "osynliga" del
</head>
<body>
Sidans "synliga" del
</body>
</html>
2. DET STRIKTA MED XHTML + <HEAD>
Det är väldigt viktigt i XHTML att ha !DOCTYPE som beskriver språket i ditt dokument. Det finns tre olika alternativ att välja mellan: STRICT, TRANSITIONAL och FRAMESET. Blogg Esse använder sig av transitional vilket innebär att du kan använda html-taggar också. Det här finns redan i dina kodmallar och ser ut så här:
Efter !DOCTYPE kommer själva html-taggen som dessutom har något som kallas för namespace. Namespace används för att ge unika namn till element. Så här ser det ut:
<html xmlns="http://www.w3.org/1999/xhtml">
Efter html-start-taggen kommer head-taggarna. Mellan head-taggarna hamnar som tidigare nämnts det "osynliga" som ändå behövs för att bloggen ska fungera. Egentligen är det fel att säga att det är osynligt eftersom att det kan synas trots att det inte syns som text. I din blogg finns detta mellan head-taggarna:
<title>${BlogTitle} - ${BlogDescription}</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="${AppUrl}" />
<link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />
<link rel="alternate" href="${BlogUrl}index.rss" type="application/rss+xml" title="RSS" />
<script type="text/javascript" src="http://static.blogg.se/public/js/script_blogg.js"></script>
<script type="text/javascript" src="http://static.blogg.se/shared/js/script.js"></script>
<title> är titeln som syns i själva webbläsarens fönster och blir också rubriken när din sida sparas i olika RSS-läsare som BlogLovin' och om folk sparar din sida i sina favoriter.
<meta> kan vara förklaring. I vårt fall: http-equiv, förklaring för vad http är för något, generator: förklarar vilket program som genererar dokumentet.
<link> länkar till ett externt dokument. I vårt fall så länkas stylesheet alltså stilmallen och sedan alternate där rss-flödet för din blogg länkas.
<script> är javascript som används för olika ändamål. I vårt fall så är det script för att få själva bloggen att fungera.
3. <BODY>
Inom body-taggarna har du din blogg. Alltså den synliga bloggen. Bloggen är gjord av olika lager som kallas för div-layers och har taggarna <div></div>. Till div-taggarna kan man lägga till olika id:n så att man kan identifiera de olika delarna och senare göra olika attribut för de olika lagerna beroende på vad de har för id. I det stora hela ser body-skelettet ut så här:
<body>
<div id="wrapper"> SJÄLVA HÖLJET DÄR BLOGGEN FINNS
<div id="header"> HEADER-DELEN (här finns din blogg-titel och beskrivning också)
</div>
<div id="content"> INLÄGGS-DELEN PÅ BLOGGEN
</div>
<div id="side"> SIDSPALTEN PÅ BLOGGEN
</div>
</div> SLUT-TAGG PÅ WRAPPER-LAGRET
<img src="http://stats.blogg.se/?id=${BlogID}" border="0" width="0" height="0" alt="" />
</body>
bild-taggen <img> som finns längst ner i <body> används för att hålla statistik på din blogg och bör därför inte tas bort!
Så här enkelt var det att förstå allt som ser så komplicerat ut i dina kodmallar. Här har vi inte gått igenom allt i detalj som finns mellan de olika lagerna i <body> men det är rätt simpelt om man kan grunderna. HTML är lite som ett garnnystan. Om du försöker reda ut det genom att hitta båda ändarna så kommer du också kunna se tydligare vad allting handlar om. I värsta fall får du helt enkelt be COLORS & LOVERS om hjälp.
FRONT PAGE:
Din framsida. Det här är den delen som kommer att ses när man skriver in din blogg-adress.
ENTRY PAGE:
Inläggens sida. Det är här man bland annat kommenterar dina inlägg.
CATEGORY PAGE:
Kategorisida. När man vill läsa en specifik kategori så kommer man till denna sida.
ARCHIVE PAGE:
Månadsarkiv. När man vill läsa en specifik månad så kommer man till denna sida.
Om du vill ändra färger, stilar, teckensnitt, länkar etc så gör du det i din stilmall. Det kan dock vara bra att veta hur kodmallarna fungerar.
HTML vs. XHTML
HTML står för Hyper Text Markup Languague och betyder i princip att sidan är uppbyggd på pålagda taggar. Dessa pålaggda taggar kallas oftast för HTML-taggar. Taggarna kommer i par och har en start-tagg och en slut-tagg. Till exempel: <html> (start-tagg) och </html> (slut-tagg).
I dina kodmallar används ett slags HTML-språk men det heter XHTML. Vad är skillnaden då? Jo, XHTML är en renare och mer strikt version av HTML men ser nästan precis likadant ut.
DIN KODMALL
Steg för steg ska vi gå igenom hur FRONT PAGE ser ut.
1. SKELETTET
Mellan <html>-taggarna, med det menas då start och slut-taggarna, så har vi hela bloggen i princip. I sidans "osynliga" del lägger man till koder som inte kommer att synas som text i din webbläsare men som ändå "gör sitt". I sidans "synliga" del lägger man till alla element som kommer att synas och göra själva bloggen.
<html>
<head>
Sidans "osynliga" del
</head>
<body>
Sidans "synliga" del
</body>
</html>
2. DET STRIKTA MED XHTML + <HEAD>
Det är väldigt viktigt i XHTML att ha !DOCTYPE som beskriver språket i ditt dokument. Det finns tre olika alternativ att välja mellan: STRICT, TRANSITIONAL och FRAMESET. Blogg Esse använder sig av transitional vilket innebär att du kan använda html-taggar också. Det här finns redan i dina kodmallar och ser ut så här:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Efter !DOCTYPE kommer själva html-taggen som dessutom har något som kallas för namespace. Namespace används för att ge unika namn till element. Så här ser det ut:
<html xmlns="http://www.w3.org/1999/xhtml">
Efter html-start-taggen kommer head-taggarna. Mellan head-taggarna hamnar som tidigare nämnts det "osynliga" som ändå behövs för att bloggen ska fungera. Egentligen är det fel att säga att det är osynligt eftersom att det kan synas trots att det inte syns som text. I din blogg finns detta mellan head-taggarna:
<title>${BlogTitle} - ${BlogDescription}</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="${AppUrl}" />
<link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />
<link rel="alternate" href="${BlogUrl}index.rss" type="application/rss+xml" title="RSS" />
<script type="text/javascript" src="http://static.blogg.se/public/js/script_blogg.js"></script>
<script type="text/javascript" src="http://static.blogg.se/shared/js/script.js"></script>
<title> är titeln som syns i själva webbläsarens fönster och blir också rubriken när din sida sparas i olika RSS-läsare som BlogLovin' och om folk sparar din sida i sina favoriter.
<meta> kan vara förklaring. I vårt fall: http-equiv, förklaring för vad http är för något, generator: förklarar vilket program som genererar dokumentet.
<link> länkar till ett externt dokument. I vårt fall så länkas stylesheet alltså stilmallen och sedan alternate där rss-flödet för din blogg länkas.
<script> är javascript som används för olika ändamål. I vårt fall så är det script för att få själva bloggen att fungera.
3. <BODY>
Inom body-taggarna har du din blogg. Alltså den synliga bloggen. Bloggen är gjord av olika lager som kallas för div-layers och har taggarna <div></div>. Till div-taggarna kan man lägga till olika id:n så att man kan identifiera de olika delarna och senare göra olika attribut för de olika lagerna beroende på vad de har för id. I det stora hela ser body-skelettet ut så här:
<body>
<div id="wrapper"> SJÄLVA HÖLJET DÄR BLOGGEN FINNS
<div id="header"> HEADER-DELEN (här finns din blogg-titel och beskrivning också)
</div>
<div id="content"> INLÄGGS-DELEN PÅ BLOGGEN
</div>
<div id="side"> SIDSPALTEN PÅ BLOGGEN
</div>
</div> SLUT-TAGG PÅ WRAPPER-LAGRET
<img src="http://stats.blogg.se/?id=${BlogID}" border="0" width="0" height="0" alt="" />
</body>
bild-taggen <img> som finns längst ner i <body> används för att hålla statistik på din blogg och bör därför inte tas bort!
Så här enkelt var det att förstå allt som ser så komplicerat ut i dina kodmallar. Här har vi inte gått igenom allt i detalj som finns mellan de olika lagerna i <body> men det är rätt simpelt om man kan grunderna. HTML är lite som ett garnnystan. Om du försöker reda ut det genom att hitta båda ändarna så kommer du också kunna se tydligare vad allting handlar om. I värsta fall får du helt enkelt be COLORS & LOVERS om hjälp.
