Div i XHTML
Elementet div är som standard stil lös och används till att bygga upp och designa en hemsida. När man ger arbetar med div’s använder man sig alltid av CSS för att placera och ge div’en det utseende man vill ha och där efter forma designen. Under 90-talet var det populärt att använda tabeller för att designa hemsidor och visst det funkar, men det var inte menat att tabeller skulle användas till det, utan tabeller ska presentera tabulära data, som siffror etc. Man får även onödigt tungladdad kod om man använder tabeller för att designa sina hemsidor därför är det smartare att jobba med div’s, det är även enklare.
Här är ett vanligt exempel hur div elementet kan användas:
<div class="bla-box">Texten som ligger inuti div’en</div>
Nu har vi gett div’en en class som heter ”stilen” och med hjälp av CSS ska vi nu ge den en fin liten stil.
.bla-box {
Background-color: #84bcdf;
Border: 2px solid #5e94b6;
Margin: 10px;
Padding: 10px;
}
För att vi anropar Class’en ”bla-box” börjar vi selectorn med en . (punkt). Koden ger oss är en box med himmelsblå bakgrund, mörkare blå linje runt boxen som är 2px tjock. Margin ger oss luft runt om boxen, 10 pixlar på alla fyra sidor i detta fall, och Padding ger oss 10 pixlar luft inuti boxen. Kom ihåg det, margin på utsidan, padding på insidan.
Resultat:
En enkel layout med div’s
Med div’s och CSS kan man utan bekymmer skapa en enkel layout till en hemsida. Layouten vi ska göra består av en header, två kolumner under samt en footer.
Såhär ser html koden ut:
<div id="wrapper"> <div id="header"><h1>Header</h1></div> <div id="sidebar">En meny här kanske</div> <div id="main"><strong>Innehåll</strong><p> En massa text</p> </div> <div id="footer">copyright text etc.</div> </div>
Nu har vi XHTML koden för en layout, div’en med id wrapper är där för att hålla om dom andra div’arna så dom inte flyter iväg eller hamnar fel. Resten är inte så klurigt, så nu hoppar vi över till CSS koden.
#wrapper {
width: 600px;
margin: 0 auto;
border: 1px solid #666666;
}
#header {
width: 600px;
border-bottom: 1px solid #666666;
}
#sidebar {
width: 149px;
float:left;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
}
#main {
width: 450px;
float:left;
}
#footer {
width: 600px;
clear: both;
border-top: 1px solid #666666;
}
För att #sidebar och #main ska lägga sig bredvid varandra använder vi oss av Float:left; som gör att div’arna lägger sig åt vänster. Om man har två div’ar med float:left; lägger dom sig bredvid varandra. När man använder sig av float måste man ”clear:a” dom annars kan innehållet som är under div’arna med float hamna fel. Det har vi gjort vi gjort i #footer med clear:both;
För att layouten ska hamna centrerad i webbläsaren avnänder vi margin: 0 auto; i #wrapper. Har lagt till några borders så det ska vara lättare se hur layouten ser ut.
Så ser det ut att skapa en enkel layout, för att piffa upp den är det bara att leka med CSS'en, lägga till lite färg, margin, padding etc. En mer genomgående artikel om hur man gör en design med div's kommer senare i HTMLskolan
Exempel
Formulär
Om man jobbar med dynamiska hemsidor i serverspråk och vill att besökarna ska kunna skriva t.ex. kommentarer använder man sig utav formulär. Men även om man bara jobbar med statiska sidor i XHTML så kan det komma till användning.
Det finns olika formulär typer man kan använda sig utav när man bygger ett kommentar formulär eller liknande.
För att man ska kunna posta formuläret, måste man ha sina fält inom en <form></form> tagg. Som ser ut såhär:
<form method="post" action="sidan_som_tar_emot_formuläret.asp"> </form>
Method – Visar hur vi vill skicka formuläret. Om du använder method="get" skickas formuläret i en s.k. querystring och visas i adressfältet. Medans method="post" skickas dolt.
Action – Där skriver du i vilken sida man ska skicka formuläret till, för att ta hand om det som skickas via ett formulär behöver du använda dig av ett serverspråk som ASP eller PHP.
Vi fortsätter med fälten som ska vara inom <form></form>.
<input type="text" value="Text" name="text" />
Type – Definerar vilket typ av fält det ska vara.
Value – Används om du vill ha en viss text stående i fältet.
Name – Bestämmer namnet på just det fältet.
<input type="password" value="Lösenord" name="text" />
Password genererar ett fält för lösenord.
<input type="submit" name="submit" value="Skicka" />
Detta blir en knapp som du kan skicka formuläret, som det står skicka på.
Om du vill ha ett fält för längre texter använder du dig av <textarea> såhär:
<textarea rows="5" cols="20" name="textarea">Om du vill ha en text i text-arean</textarea>
Cols – bestämmer den synliga bredden på text-arean.
Rows – bestämmer den synliga höjden av rader på text-arean.
Ett helt formulär
Nu när du vet vad ett formulär består av, ska ni nu få se hur ett enkelt formulär ser ut i sin helhet.
<form method="post" action="skicka.asp"> <p>Namn:<br /> <input type="text" name="namn" /></p> <p>Hemsida:<br /> <input type="text" value="http://" name="hemsida" /></p> <p>Inlägg:<br /> <textarea name="inlagg" rows="5" cols="20"></textarea></p> <p><input type="submit" name="submit" value="Skicka " /></p> </form>
Styla ditt formulär med CSS
Ett ostylat formulär kan se olika ut beroende vad man har för operativsystem/tema. Så om du vill att det ska likadant ut hos dom flesta och anpassa den till din design på hemsidan är det bara att använda CSS.
Den standard kod jag använder för formulär ser ut såhär:
input, textarea {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 3px;
color: #000000;
font-size: 14px;
width: 300px;
background-color: #e4e4e4;
border: 1px solid #3fb2ee;
}
Om man vill ge flera element samma stil, anger man flera selectorer och avkiljer dom med ett , (komma) som vi har gjort i koden. Alla våra <input> och <textarea> taggar får samma stil.
Font-family – Vi ger fälten typsnittet Verdana
Padding – Vi ger 3px luft mellan texten och fältens kant.
Color – Ger texten e svart (#000000) färg.
Font-size – Texten blir 14px
Width – Bredden på fälten blir 300px
Background-color – Fältens bakgrundsfärg blir ljusgrå (#e4e4e4)
Border – Kanten på fälten blir 1px bred och solid, i en blå färg (#3fb2ee)
Exempel
Formulär utan css
Fromulär med css
Koden för skicka_formular.asp
Bilder
Med bilder kan du ge din hemsida dom grafiska element som behövs och pigga upp din text. För att infoga en bild i ett .html dokument använder man sig utav <img> taggen. Såhär ser taggen ut i action. Då vi kodar i XHTML så stänger vi taggen med ett / (slash).
<img src=”bilden.jpg” alt=”En bild” width=”100” height=”100” />
Src – Där skriver du in sökvägen och bildens namn. I detta fall ligger bildfilen ”bilden.jpg” i samma mapp som .html filen.
Alt – Är en kort beskrivande text om bilden, detta är viktigt för sökmotorer och blinda besökare.
Både src och alt attributen är ett krav att finnas i <img> taggen.
Width / height – Sätter en bestämd storlek på bilden, men det trycker bara ihop bilden. Så om du har en bild med storleken 2000x2000 (pixlar) och sätter width och height på 100 (pixlar) som vi har gjort, så är det samma stora bild, fast hoptryckt vilket resulterar i onödigt långa laddningstider.
I förra avsnittet av html skolan gick vi igenom länkar, och det är ingen ovanlighet att man länkar bilder. För att göra det, skriver man såhär:
<a href=”en_sida.html”><img src=”bilden.jpg” alt=”En bild” /></a>
Som standard får bilder i en länk en ful ram runt sig, vilket inte är så fint. För att få bort den använder vi oss helt enkelt utav CSS.
img {
border: none;
}
Med denna kod kommer varje <img> tagg vara utan en border. Men ibland kanske man vill ha en liten vit ram runt bilden så det får en liten old school fotografi känsla, som jag använder på vissa bilder i bloggen.
img .ram {
padding:3px;
border: 1px solid #e8e8e8;
}
Detta kanske ser lite lurigt ut med två selectorer som det är nu, men det som händer är, att alla <img> taggar med classen ”ram” får den här stilen, så om du har en annan tagg med classen ”ram” så får den inte stilen.
Såhär ser XHTML koden ut
<img class=”ram” src=”bilden.jpg” alt=”En bild” />
Länkar
Att använda länkar på hemsidor är såklart en självklarhet, nu ska vi gå igenom hur enkelt det är att skapa länkar så du kan ha undersidor på din webbsida.
Vi börjar med den grundläggande koden:
<a href=”index.html” title=”Detta är index.html”>Index</a>
När man klickar på denna länk hamnar man på “index.html” och när man håller musen över länken kommer en ruta med texten “Detta är index.html”. Title attributet är inget krav men är bra att skriva en beskrivande text på länken med hjälp av Title för sökmotorerna. Den text som är klickbar är texten ”Index”.
Om man vill länka till en extern sida t.ex. google.com, måste man skriva ”http://” innan länken, så här:
<a href=”http://www.google.se” title=”En sökmotor”>Google</a>
För att länken ska öppnas i ett nytt fönster använder vi oss av target=”_blank”, att tänka på är att target=”_blank” inte är ett validerat argument i XHTML 1.0 Strict.
<a href=”http://www.google.se” title=”En sökmotor” target="_blank">Google</a>
Länkar med CSS
Som standard kommer länken presenteras såhär:
- En obesökt länk är blå och understruken
- En besökt länk är lila och understruken
- En aktiv länk är röd och understruken
Detta kanske inte är så passande om man har gjort en design i helt andra färger, så då vänder man sig till CSS och ändrar utseendet på dom.
a {
color: #53b100;
text-decoration: none;
}
a:hover {
color: #c5ff92;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: underline;
}
Med denna CSS kod har länkarna helt andra färger:
- En obesökt länk är moss-grön och inte understruken
- En besökt länk är ljusgrön och inte understruken
- En aktiv länk är svart och understruken
Om du vill ändra mer på länkarnas utseende ta en titt på Ge dina texter stil.
Föregående: Ge dina Texter stil
Ge dina Texter stil
I denna digital era där bloggar är så pass stort som det är, måste man som blogg ägare göra texten lättläst för sina besökare. För att läsa på en datorskärm är inte samma sak som att läsa i en gammal hederlig bok. Man måste tänka på att inte ha för liten text, tillräckligt med mellanrum mellan raderna och troligen det viktigaste, att styckeindela texten!
Men bara för att du kanske inte äger en blogg, betyder det inte att du kan strunta i att göra texten lättläst. På Internet läser oftast inte besökaren hela texten, utan man börjar oftast med att scanna texten. Därför kan det vara bra att strukturera och skriva texten så den är lätt att först scanna, men också för att sedan läsas.
Så hur strukturerar man en text kanske ni undrar? Jo man kan använda sig av taggen <p> som står för ”paragraph” på svenska: paragraf, vilket är ganska solklart att man använder <p> för att styckeindela sin text.
<p>En liten text här som ligger i en paragraf</p> <p>En till paragraf så att det bildar ett mellanrum mellan texterna</p>
Resultat:
En liten text här som ligger i en paragraf
En till paragraf så att det bildar ett mellanrum mellan texterna
Men om man inte vill ha ett mellanrum mellan texten utan bara vill byta rad, då måste man använda sig utav taggen <br /> för html är visar inte vanlig retur-byt-rad. <br /> står officiellt för ”BReak” men min inofficiella betydelse för <br /> är ”Byt Rad”, så kom ihåg vart ni hörde det först, om ingen annan har hunnit före mig.
Här har vi en text som kommer att bry<br />tas när man minst anar det.
Resultat:
Här har vi en text som kommer att bry
tas när man minst anar det.
Som ni ser så blir det inte samma mellanrum mellan raderna när man använder <br /> istället för <p>, vilket är <br />’s syfte att vara ett vanligt rad byte. Nu kanske ni tänker att man kan använda två <br /> efter varann för att få samma mellanrum. Svaret är Ja det kan man men det är inget att föredra då <p> skapar ”snyggare” indelningar samt att html strukturen blir etiskt snyggare också, det är även lättare att ändra mellanrummet mellan dom olika paragraferna med CSS då man använder <p>.
Det finns olika sätt för att betona och dra uppmärksamhet till vissa ord, detta kan vara bra att tänka på för besökarna som scannar texten. Betona dom ord med Tjock textstil som ger ett bra sammanhang och piggar upp läsarnas intresse.
Textstilar i XHTML
Kan tänka mig att det är många som känner till dom tre vanligaste textstilarna, tjock, itaclic, understruken. Dom två första kan man göra med två olika taggar vardera, antingen med en som är Presentationsmärkning och den andra är en Strukturmärkning.
Läs mer om detta i Vad är html?
En Tjock text
<strong> - Våran strukturmärkning för tjock text, definierar ett ord som har en stark betoning. Ett ord inom <strong> tolkas med större vikt av sökmotorer.
<strong>En strong text</strong>
<b> - Är då våran presentationsmärkning som bara gör texten tjock, i jämfört med <strong>.
<b>En bold text</b>
En Italic text
<em> - Börjar med strukturmärkningen, ett ord inom <em></em> är betonet, medans <strong> var starkt betonat. Tolkas något lättare än <strong> av sökmotorer.
<em>En betonad text</em>
<i> – Visar bara att texten är Italic och är därför en presentationsmärkning.
<i>En italic text</i>
Detta är bra att veta så man vet vilket element man ska använda om man vill betona ett ord, eller bara göra den tjock eller italic för besökarna.
En understruken text
<u> - <u> är en presentationsmärkning och gör texten understruken för besökarna.
<u>En understruken text</u>
Andra presentationsmärkningar som kan vara bra att veta är element som <big></big> och <small></small>. Dom gör texten som dom omsluter stor och liten.
<big>Stor text</big>
<small>Liten text</small>
