Grunderna för Kodmallarna (HTML)
2008-03-18 @ 20:04:26
Kodmallarna är uppbyggda med HTML. Jag ska nu visa er grunderna för HTML.
Det är på kodmallen du t ex. ändrar profilbilden, ändrar ordningen på olika saker i bloggen, ändrar färdiga texter som Arkiv, Kategorier osv. Det finns några olika sorters kodmallar; Startsida, Arkivsida, Kategorisida, XML-syndikeringsida (rör inte och Inläggssida. Alla dessa kodmallar sköter olika delar.
Startsida - Kodmallen för hur det ser ut när man först kommer in på bloggen.
Arkivssida - Kodmallen för hur det ser ut när man klickar sig fram i Arkiven
Kategorisida - Kodmallen för hur det ser ut när man klickar sig fram bland Kategorierna
Inläggssida - Kodmallen för hur det ser ut när man har klickat sig in på ett speciellt inlägg
Man kan säga att stilmallen och kodmallarna är beroende av varandra. I stilmallen bestämmer man t ex. en massa olika texters utseende (teckensnitt, storlek, färg) i Kodmallen bestämmer man vilken av textstilarna som ska sitta vart.
Exempel.
Stilen för datumtexten för varje inlägg är den här. De här koderna betyder att det är teckensnittet verdana, texten är i storlek 10, texten är normal (ej fet, kursiv eller understruken), den är färgen #666 (mörkgrå), det är 25 px mellanrum mellan den vänstra kanten och texten och texten börjar från vänster sida.
.entrymeta {
font-family: verdana;
font-size: 10px;
font-weight: normal;
color: #666;
padding:25px;
text-align:left;
}
Hur vet jag då att det just är den som är datumtexten?
Jo, i kodmallen ser det nämligen ut såhär:
<div class="entrymeta">
${EntryDate} @ ${EntryTime}</div>
Det betyder att stilen för datumet är entrymeta och som ni kommer ihåg så är det just den stilen som jag beskrev i stilmallen. Som ni kanske ser så är koden uppbyggd med en kod före datum-kombinationen och en kort kod efter. Det betyder att man vill att endast datumet ska vara av stilen entrymeta och inte den som kommer efter, det är en kod som säger till när det ska ta slut. Många koder är uppbyggda på det viset.
bildlänk - <a href="länkadress"><img src="bildadress" /></a>
bakgrund - <body background="bakgrundsadress">
Fönstertext - <head><title> ♥ Mina Fagerfjäll</title></head>
Är det någon mer kod som ni vill ha reda på eller något ni tycker jag har glömt så är det bara att kommentera om det här under.
Det är på kodmallen du t ex. ändrar profilbilden, ändrar ordningen på olika saker i bloggen, ändrar färdiga texter som Arkiv, Kategorier osv. Det finns några olika sorters kodmallar; Startsida, Arkivsida, Kategorisida, XML-syndikeringsida (rör inte och Inläggssida. Alla dessa kodmallar sköter olika delar.
Startsida - Kodmallen för hur det ser ut när man först kommer in på bloggen.
Arkivssida - Kodmallen för hur det ser ut när man klickar sig fram i Arkiven
Kategorisida - Kodmallen för hur det ser ut när man klickar sig fram bland Kategorierna
Inläggssida - Kodmallen för hur det ser ut när man har klickat sig in på ett speciellt inlägg
Man kan säga att stilmallen och kodmallarna är beroende av varandra. I stilmallen bestämmer man t ex. en massa olika texters utseende (teckensnitt, storlek, färg) i Kodmallen bestämmer man vilken av textstilarna som ska sitta vart.
Exempel.
Stilen för datumtexten för varje inlägg är den här. De här koderna betyder att det är teckensnittet verdana, texten är i storlek 10, texten är normal (ej fet, kursiv eller understruken), den är färgen #666 (mörkgrå), det är 25 px mellanrum mellan den vänstra kanten och texten och texten börjar från vänster sida.
.entrymeta {
font-family: verdana;
font-size: 10px;
font-weight: normal;
color: #666;
padding:25px;
text-align:left;
}
Hur vet jag då att det just är den som är datumtexten?
Jo, i kodmallen ser det nämligen ut såhär:
<div class="entrymeta">
${EntryDate} @ ${EntryTime}</div>
Det betyder att stilen för datumet är entrymeta och som ni kommer ihåg så är det just den stilen som jag beskrev i stilmallen. Som ni kanske ser så är koden uppbyggd med en kod före datum-kombinationen och en kort kod efter. Det betyder att man vill att endast datumet ska vara av stilen entrymeta och inte den som kommer efter, det är en kod som säger till när det ska ta slut. Många koder är uppbyggda på det viset.
Om jag till exempel vill att en text ska vara centrerad så ska det se ut såhär:
<center>Texten som jag vill ha centrerad</center>
Som ni såg på HTML-koden för centrerad text så var den en < innan center och en > efteråt. Så måste alla koder påbörjas och avslutas för att det ska fungera. Ni kanske ser att koden efter texten har ett /-tecken innan ordet. Det tecknet är till för att inte blanda ihop dem, om de skulle se likadana ut skulle det aldrig bli stopp på det centrerade. Därför måste alltid den avslutande koden ha ett /-tecken efter <, men innan koden.
Något jag bör ta upp är att textstorlekar inte är densamma i stilmallen som i HTML. Stilmallen är som på Word, medan HTML har sitt egna lilla system där storlek 12 är ungefär 3 i HTML.
Skulle ni vilja börja er bloggdesign eller någon annan hemsida helt från start så får ni inte glömma att skriva
<html> högst upp och </html> längst ner, annars fungerar det inte.
Nu ska jag lära er några grundläggande koder som kan vara bra att ha i huvudet.
Ny rad (enter) - </br>
fet - <strong>text</strong
kursiv - <i>text</i>
understruken - <u>text</u>
överstruken - <strike>text</strike>
centrerad - <center<text</center>
teckensnitt (Arial) - <font face="Arial">text</font>
textstorlek - <font size="3">text</font>
färgad text (röd) - <font color="#FF0000">text</font>
Jag återkommer med ett färgschema i nästa inlägg!
textlänk - <a href="länkadress" >text</a>
bild - <img src="bildadress"/>
Något jag bör ta upp är att textstorlekar inte är densamma i stilmallen som i HTML. Stilmallen är som på Word, medan HTML har sitt egna lilla system där storlek 12 är ungefär 3 i HTML.
Skulle ni vilja börja er bloggdesign eller någon annan hemsida helt från start så får ni inte glömma att skriva
<html> högst upp och </html> längst ner, annars fungerar det inte.
Nu ska jag lära er några grundläggande koder som kan vara bra att ha i huvudet.
Ny rad (enter) - </br>
fet - <strong>text</strong
kursiv - <i>text</i>
understruken - <u>text</u>
centrerad - <center<text</center>
teckensnitt (Arial) - <font face="Arial">text</font>
textstorlek - <font size="3">text</font>
färgad text (röd) - <font color="#FF0000">text</font>
Jag återkommer med ett färgschema i nästa inlägg!
textlänk - <a href="länkadress" >text</a>
bild - <img src="bildadress"/>
bildlänk - <a href="länkadress"><img src="bildadress" /></a>
bakgrund - <body background="bakgrundsadress">
Fönstertext - <head><title> ♥ Mina Fagerfjäll</title></head>
Är det någon mer kod som ni vill ha reda på eller något ni tycker jag har glömt så är det bara att kommentera om det här under.
Kommentarer
Trackback
