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.
Stilmallen
STILMALLEN FÖR ORANGE CITY - DIN NYA STILMALL
För att underlätta och göra allt mer ihophängande ska vi utgå ifrån temat Orange City som är perfekt för dig som vill ha en bra grundmall att arbeta med. I det här steget ska vi mest av allt visa hur stilmallen ser ut och i kommande steg visa hur du ändrar specifika delar.
TA BORT ONÖDIGA DELAR
Vissa delar av stilmallen kommer inte ha någon effekt på din blogg och kan därför tas bort. Dessa delar kan tas bort:
.video
VARFÖR: Om du ska sätta in ett videoklipp använder man inte det här attributet. Därför behövsinte .video i din stilmall. Det här betyder INTE att du inte kan ha filmklipp.
Calender
VARFÖR: Den här funktionen har tagits bort av Blogg Esse och gör därför ingen skillnad i stilmallen eller bloggen om den tas bort.
Som du kan se är bloggen indelad i 4 delar (+1 som heter #wrapper men är osynlig på bloggen). Dessa delar kommer vi att gå in på mer i detalj i de kommande stegen. Vi ska dock visa huvuddetaljerna här.
BODY - BLOGGENS KROPP
Ja, bloggen har en kropp precis som den också har ett huvud HEAD (förväxla inte med #HEADER) som vi kommer berätta mer om när vi kommer till kodmallarnas uppbyggnad. Nu nöjer vi oss med BODY. BODY sätter stilen för själva sidan där bloggen kommer att hamna.
body {
background: #F5DFB1;
margin:0;
padding:0px 0 14px;
text-align:center;
color:#000000;
}
#WRAPPER - DEN OSYNLIGA BEHÅLLAREN
Trots att #WRAPPER delen inte syns så finns den där. Den bestämmer bland annat den totala storleken på bloggen och vart bloggen kommer att placeras på sidan.
#wrapper {
text-align: left;
width: 800px;
position:relative;
margin:0px auto;
padding: 0px 10px 10px;
vertical-align: top;
}
#HEADER - HUVUDET PÅ DIN BLOGG
Headern är lika viktig som själva blogginnehållet. Det är den som besökarna först kommer att lägga märke till och det är också den som är logon för just din blogg. Det är alltså i #HEADER som du ändrar din headerbild.
#header {
background: #000000 url(http://static.blogg.se/shared/img/css/orangecity_top.jpg) no-repeat left top;
margin: 0px;
padding: 37px 0px 0px 100px;
height: 90px;
text-align: left;
border-top: 0px none;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}
#SIDE - DEN STRUKTURERADE BITEN
#SIDE används kort och gott till att länka innehållet i din blogg på ett smart sätt så att det blir lätt för besökaren att hitta det de vill läsa. Dessutom kan du lägga till olika texter, bilder och länkar som du inte har med i inläggen men känns viktiga att ha med. Till exempel BlogLovin' knapp eller bilder på dig. Det är också här som din profil hamnar.
#side {
margin-right:0;
padding: 24px 12px 0px;
background: #F5BC46;
border-right-width: 5px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #000000;
float: right;
width: 159px;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #000000;
}
#CONTENT - WHERE THE MAGIC HAPPENDS
Vad mer kan man säga än att alla dina inlägg kommer att hamna här?
#content {
overflow: hidden;
width: 602px;
float: left;
background: #FFFFFF;
padding: 0px 0px 20px;
voice-family:"\"}\"";
voice-family:inherit;
text-align: left;
vertical-align: top;
border-top: 0px none;
border-right: 3px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
margin: 0px;
}
Attributen
Härifrån och ned kommer de olika specifikationerna för de olika attributen. Du behöver inte läsa allting utan gå upp och tryck på det attributet du vill veta mer om så kommer du automatiskt till förklaringen.
- background:
Bestämmer bakgrunden för ett element.
background: color image attachment position repeat;
bakground-color: #FÄRG;
background-image: url(http://adressentilldinbild.se/dinbild.jpg), none;
background-attachment: scroll, fixed;
background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos;
background-repeat: repeat, repeat-x, repeat-y, no-repeat;
scroll: bakgrundsbilden scrollas samtidigt som sidan scrollas ner
fixed: bakgrundsbilden scrollas inte när sidan scrollas ner
top: topp
left: vänster
center: mitten
right: höger
x% y%: sidans vågräta position i % sidans lodräta position i %
xpos ypox: sidans vågräta position i pixlar sidans lodräta position i pixlar
repeat: upprepa lodrätt och vågrätt
repeat-x: upprepa endast vågrätt
repeat-y: upprepa endast lodrätt
no-repeat: upprepa inte
exempel:
background: #000000 url(http://colorsandlovers.blogg.se/meetagraycheetahbg.png) fixed top left repeat;
- border:
Bestämmer kantlisterna för ett element.
border-left: width style color;
border-left-width: thin, medium, thick, px;
border-left-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset;
border-left-color: #FÄRG;
thin: tunn
medium: medel
thick: tjock
px: pixlar
none: ingen
hidden: gömd
dotted: prickig
dashed: streckad
solid: heldragen
double: dubbel
groove: grove
ridge: ås
inset: infälld
outset: utfälld
border-left (kant-vänster) kan ersättas eller kompleteras med border-right (höger), border-top (topp), border-bottom (botten) eller border (alla kanter).
exempel:
border: #000000 dashed 4px;
- color:
Bestämmer färgen för text.
color: #FÄRG;
exempel:
color: #000000;
- float:
Bestämmer vart ett element kommer att hamna inuti ett annat element.
float: left, right, none;
left: vänster
right: höger
none: ingen
- height:
Bestämmer hur hög ett element ska vara.
height: auto, px, %;
auto: webbläsaren bestämmer automatiskt
px: pixlar
%: procentandel av elementet
- margin:
Bestämmer mellanrummet runt om ett element.
margin: auto, px, %;
margin-left: auto, px, %;
margin-left (marginal-vänster) kan ersättas eller kompleteras med margin-right (höger), margin-top (topp), margin-bottom (botten) eller margin (alla marginaler).
auto: webbläsaren bestämmer automatiskt
px: pixlar
%: procentandel av elementet
- overflow:
Bestämmer vad som händer om ett element överlappar sitt utrymme.
overflow: visible, hidden, scroll, auto;
visible: Elementet beskärs inte utan går över utrymmet
hidden: Elementet beskärs
scroll: Elementet beskärs + får en rullningslist
auto: Om elementet beskärs får den en rullningslist som visar resten av innehållet
- padding:
Bestämmer utrymmet mellan ett elements kant och dess innehåll.
padding: auto, px, %;
padding-left: auto, px, %;
auto: webbläsaren bestämmer automatiskt
px: pixlar
%: procentandel
padding-left (utfyllnad-vänster) kan ersättas eller kompleteras med padding-right (höger), padding-top (topp), padding-bottom (botten) eller padding (all utfyllnad).
- position:
Bestämmer ett elements slag av position
position: static, relative, absolute, fixed;
static: position i ordningsföljd
relative: element är bara relativt till sig självt
absolute: position som "släpper" från sidan
fixed: fixerad position med koordinater beroende av webbläsarens fönster.
- text-align:
Bestämmer textposition i ett element.
text-align: left, right, center, justify;
left: vänster
right: höger
center: mitten
justify: kantjustera
- vertical-align:
Bestämmer lodrät position inuti ett element.
vertical-align: baseline, sub, super, top, text-top, middle, bottom, text-bottom, lenght, %;
baseline: baslinje
sub: nedsänkt
super: upphöjt
top: topp
text-top: text-topp
middle: mitten
bottom:botten
text-bottom: text-botten
lenght: i pixlar eller andra längdenheter
%: procentandel
- voice-family:
Bestämmer rösten på uppläsning av text i ett element.
inherit: Använder de förinställningar som besäkaren redan har på sin dator.
- width:
Bestämmer hur bred ett element ska vara.
width: auto, px, %;
auto: Webbläsaren bestämmer
px: pixlar
%: procentandel
- background:
Bestämmer bakgrunden för ett element.
background: color image attachment position repeat;
bakground-color: #FÄRG;
background-image: url(http://adressentilldinbild.se/dinbild.jpg), none;
background-attachment: scroll, fixed;
background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos;
background-repeat: repeat, repeat-x, repeat-y, no-repeat;
scroll: bakgrundsbilden scrollas samtidigt som sidan scrollas ner
fixed: bakgrundsbilden scrollas inte när sidan scrollas ner
top: topp
left: vänster
center: mitten
right: höger
x% y%: sidans vågräta position i % sidans lodräta position i %
xpos ypox: sidans vågräta position i pixlar sidans lodräta position i pixlar
repeat: upprepa lodrätt och vågrätt
repeat-x: upprepa endast vågrätt
repeat-y: upprepa endast lodrätt
no-repeat: upprepa inte
exempel:
background: #000000 url(http://colorsandlovers.blogg.se/meetagraycheetahbg.png) fixed top left repeat;
- border:
Bestämmer kantlisterna för ett element.
border-left: width style color;
border-left-width: thin, medium, thick, px;
border-left-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset;
border-left-color: #FÄRG;
thin: tunn
medium: medel
thick: tjock
px: pixlar
none: ingen
hidden: gömd
dotted: prickig
dashed: streckad
solid: heldragen
double: dubbel
groove: grove
ridge: ås
inset: infälld
outset: utfälld
border-left (kant-vänster) kan ersättas eller kompleteras med border-right (höger), border-top (topp), border-bottom (botten) eller border (alla kanter).
exempel:
border: #000000 dashed 4px;
- color:
Bestämmer färgen för text.
color: #FÄRG;
exempel:
color: #000000;
- float:
Bestämmer vart ett element kommer att hamna inuti ett annat element.
float: left, right, none;
left: vänster
right: höger
none: ingen
- height:
Bestämmer hur hög ett element ska vara.
height: auto, px, %;
auto: webbläsaren bestämmer automatiskt
px: pixlar
%: procentandel av elementet
- margin:
Bestämmer mellanrummet runt om ett element.
margin: auto, px, %;
margin-left: auto, px, %;
margin-left (marginal-vänster) kan ersättas eller kompleteras med margin-right (höger), margin-top (topp), margin-bottom (botten) eller margin (alla marginaler).
auto: webbläsaren bestämmer automatiskt
px: pixlar
%: procentandel av elementet
- overflow:
Bestämmer vad som händer om ett element överlappar sitt utrymme.
overflow: visible, hidden, scroll, auto;
visible: Elementet beskärs inte utan går över utrymmet
hidden: Elementet beskärs
scroll: Elementet beskärs + får en rullningslist
auto: Om elementet beskärs får den en rullningslist som visar resten av innehållet
- padding:
Bestämmer utrymmet mellan ett elements kant och dess innehåll.
padding: auto, px, %;
padding-left: auto, px, %;
auto: webbläsaren bestämmer automatiskt
px: pixlar
%: procentandel
padding-left (utfyllnad-vänster) kan ersättas eller kompleteras med padding-right (höger), padding-top (topp), padding-bottom (botten) eller padding (all utfyllnad).
- position:
Bestämmer ett elements slag av position
position: static, relative, absolute, fixed;
static: position i ordningsföljd
relative: element är bara relativt till sig självt
absolute: position som "släpper" från sidan
fixed: fixerad position med koordinater beroende av webbläsarens fönster.
- text-align:
Bestämmer textposition i ett element.
text-align: left, right, center, justify;
left: vänster
right: höger
center: mitten
justify: kantjustera
- vertical-align:
Bestämmer lodrät position inuti ett element.
vertical-align: baseline, sub, super, top, text-top, middle, bottom, text-bottom, lenght, %;
baseline: baslinje
sub: nedsänkt
super: upphöjt
top: topp
text-top: text-topp
middle: mitten
bottom:botten
text-bottom: text-botten
lenght: i pixlar eller andra längdenheter
%: procentandel
- voice-family:
Bestämmer rösten på uppläsning av text i ett element.
inherit: Använder de förinställningar som besäkaren redan har på sin dator.
- width:
Bestämmer hur bred ett element ska vara.
width: auto, px, %;
auto: Webbläsaren bestämmer
px: pixlar
%: procentandel
