Innehållsförteckning
Start
CSS
1. Grundkurs
2. Paragrafer
3. Class och ID
4. Div delar upp din hemsida i olika delar
5. Sida vid sida: float
6. Marginaler/margin
7. Text-align
8. Mer om bilder
9. Mer om rubriker
10. Mer om XHTML och Doctypes
HTML och grund
Detta är en fortsättning på egen hemsida. Börja där om du är helt ny på hemsidor.
I ditt textdokument börjar du med att skriva in följande:
<html> <head> </head> <body> </body> </html>
Det är inom body taggarna, alltså <body> och </body> som innehållet på sidan ska stå. Börja med att skriva vad du vill, t.ex. “Hej, jag är en gurka”.
Nu kommer en lista med dom vanligaste HTML-taggarna så du kan komma igång snabbt med din hemsida.
<a href> gör en länk. T.ex. <a href=”http://www.hotmail.com”>Gå till Hotmail</a> Detta kommer skapa en länk som heter Gå till Hotmail och som när man klickar på den tar dig till just Hotmail. Byt hemsideadress och text på länken, prova dig fram.
<img /> infogar en bild. Bilden är en fil som du måste ha adressen till. Om ditt HTML-dokument ligger i samma mapp som den bild du vill ha med på sidan så räcker det med att skriva <img src=”bild.jpg” /> så syns bilden. Byt ut “bild” mot vad din bild heter. .jpg stämmer bara om bilden är i formatet .jpg. De vanligaste bildformaten är .jpg .gif och .png. Du måste veta vilket format bilden är i (högerklicka på bilden och ta egenskaper så står det vilket format den är i, om du inte redan vet).
<br /> gör en radbrytning.
<p> skapar en paragraf. Avsluta med avslutande tagg. Mer om paragrafer i nästa avsnitt.
Ok, det var de mest grundläggande men ändå viktigaste HTML-taggarna, ett tips är att testa runt med dessa så att du känner att du “bemästrar” dem alla innan du går vidare. Du kommer såklart ihåg att jag berättade hur man sparar och förhandsgranskar i början av denna artikel.
När du kan denna grundläggande HTML kanske du vill börja formge din sida, dela upp den i sektioner, ändra teckensnitt, fixa bakgrundsbild, ramar o.s.v. Detta gör du med hjälp av CSS.
CSS-guide
Innehållsförteckning, klicka på någon av länkarna eller läs allt från början:
1. Grundkurs
2. Paragrafer
3. Class och ID
4. Div delar upp din hemsida i olika delar
5. Sida vid sida: float
6. Marginaler/margin
7. Text-align
8. Mer om bilder
9. Mer om rubriker
10. Mer om XHTML och Doctypes
HTML är lika gammalt som Internet, men CSS är ett hyfsat nytt fenomen. Det står för Cascading Style Sheets och används av nästan alla hemsideskapare nuförtiden. Det är ett mycket effektivt sätt att dela upp din hemsida i två delar, en del innehåller text och innehåll, den andra delen innehåller design, formatering av text och allt som har med hemsidans design och utseende att göra. Detta är jättebra i många avseenden. HTML:en sköter innehållet och CSS:en sköter utseendet.
Du skriver din CSS i en separat fil med filändelsen .css. Gör ett nytt textdokument, och spara det som style.css. Detta är ditt CSS-dokument som du ska ha all din webbdesign i. Sen ska du koppla ditt HTML-dokument till denna CSS-fil, det gör du genom att lägga in en kodsnutt i din head-tagg i HTML-dokumentet.
Snutten är: <link rel=”stylesheet” href=”style.css” />
Lägg den mellan din head-taggar så att det ser ut såhär: <head><link rel=”stylesheet” href=”style.css” /></head>
Nu är du redo att göra en massa olika vackra saker med din hemsida. Låt oss byta till ett snyggare teckensnitt.
I ditt CSS-dokument, kopiera in detta:
body { font-family: Trebuchet MS; color: #696969; background-color: #FFFFFF; }
… och spara. Om du nu förhandsgranskar ditt HTML-dokument så kommer din text vara skriven med Trebuchet MS och vara ljusgrå i tonen. Färgen ändras genom “color:” som du ser däruppe. Textfärger på Internet anges i sex-siffriga tal med ett # innan, såsom #696969 däruppe.
Vanliga färger:
Röd: #FF0000
Vit: #FFFFFF
Svart: #000000
Grön: #00FF00
Lägg märke att i ett CSS-dokument avslutas varje rad med ett semikolon. Det är viktigt att du inte glömmer semikolon efter varje rad. Med CSS-koden ovan har vi alltså ändrat hur innehållet i body ser ut. Tredje raden bestämmer background-color (bakgrundsfärg) som du ser. Bara att ändra och testa dig fram om du vill.
Paragrafer <p>
En paragraf inleds med taggen <p> och avslutas med </p> Paragrafer används för att dela upp din text i delar så att du kan ändra utseende och annat på dina olika texter. Du kan nu bestämma i ditt CSS-dokument hur en paragraf, och hur allt inuti den, ska se ut. Klistra in i ditt CSS-dokument:
p { font-family: Verdana; color: #FF0000; }
Sen tillbaka till HTML-dokumentet. Ha kvar texten som du haft sen innan. Skriv en ny text och inneslut denna text med <p> och </p> alltså <p>ny text</p>. Spara ochförhandsgranska i webbläsaren.
Du kommer att se att den text som är i din paragraf nu kommer vara skrivet med Verdana som teckensnitt samt att den är röd. Du kan ha många olika paragrafer och alla kan se olika ut. Men vi leker lite med den här paragrafen först så du får öva lite mer på CSS. Vi kan göra en ram runt paragrafen. Lägg till border: 1px solid; i din CSS-kod så att det blir:
p { font-family: Verdana; color: #FF0000; border: 1px solid; }
Spara och förhandsgranska. Nu har du en ram runt. Den är för bred, det ser inte snyggt ut. Du kan sätta en bestämd vidd (width) och höjd (height) på din paragraf. Addera width: 200px; och height: 200px; så att du får
p { font-family: Verdana;
color: #FF0000;
border: 1px solid;
width: 200px;
height: 200px;
}
Spara och förhandsgranska. Nu ser du att din paragraf numer är en ruta som är 200 pixlar bred och 200 pixlar hög. Möjligheterna till att ändra designen på din hemsida med CSS och paragrafer är ändlösa.
Class och ID
Som du vet kan du bestämma utseendet på en paragraf med CSS. Alla paragrafer kommer dock se likadana ut som det är nu. Därför finns klasser (class) och ID som gör att du kan göra paragrafer med olika namn, och på det sättet få dem att se annorlunda ut. Säg att du har en text som du vill ska vara röd och fet, och en annan text som du vill ha en ruta runt samt en bakgrundsbild bakom. Du använder paragrafer till båda och namnger” dem med class. Du kan namnge dem med vad du vill, säg att du t.ex. vill döpa första paragrafen till “röd” och andra till “ram”. Såhär skriver du i CSS-dokumentet:
.röd {diverse kod här;}
.ram {diverse kod här;}
Och i ditt HTML-dokument så skriver du:
<p class=”röd”>Den här texten blir röd och fet och andra saker som du bestämt i CSS-dokumentet</p>
<p class=”ram”>Den här texten får en ram runt och andra saker du bestämt i CSS-dokumentet.</p>
Svårare än så är det inte. Det finns både class och ID. Du ska använda class när du använder något som dyker upp flera gånger på din hemsida och ID för sånt som bara är med en gång. Dock är ett tips att börja med att alltid använda class då detta funkar i 99% av fallen, och börja använda ID när du har stenkoll, för enkelhetens skull. Men sträva efter att lära dig båda.
<a href=”#upp”>Upp ^</a>
<div> delar upp din hemsida i olika delar
Div står för division och du använder divar för att strukturera upp din hemsida och dela upp den i divisioner. Denna hemsida har som du ser en del med en header däruppe, en meny till höger och så denna sektion med innehålllet. Dessa är uppdelade med divar. Som med paragrafer kan du med CSS utforma dina divar på alla möjliga sätt, t.e.x. bestämma höjd, längd, om det ska finnas en ram på diven o.s.v.
Här är CSS:en för min vänstra div:
#left { width: 250px; height: 400px; padding: 0px; float: left; margin-right: 20px; }
Testa själv, lägg på ramar, ändra storlek o.s.v. på dina divar. Att hålla på själv är bästa sättet att lära sig.
Sida vid sida: float
Som det är nu lägger sig allt du gör efter varandra. Du kanske vill ha vissa saker sida vid sida? Då är det float som gäller. Om du har två paragrafer som du vill ska lägga sig bredvid varandra så addera kodsnutten float: left i din CSS på paragraferna. Float funkar på allt, divar, bilder, paragrafer, rubriker o.s.v. Med float: left lägger sig saker och ting på vänster sida, byt till float: right om du vill ha det på höger sida.
Marginaler/margin
Marginaler används ofta flitigt för att göra små justeringar så att man kan få saker och ting där man vill ha dem. Om du nu har en rubrik, div, bild eller paragraf, vi tar div i detta exempel, och vill att den ska befinna sig lite längre ner i förhållande till en div som vi säger finns ovanför så kan du lägga på lite marginal med margin-top i din css:
.mindiv {
margin-top: 10px;
}
Lägger på 10 pixlars marginal på din div. HTML-koden skulle vara <div class=”mindiv”>Innehåll</div>.
Du kan lägga på marginaler åt alla håll i din CSS med margin-top, margin-bottom, margin-left och margin-right. Du kan också bestämma alla på en gång såhär: margin: 10px 20px 10px 30px;
Text-align, centrera text och annat
Med text-align kan du bestämma om du vill att texten ska vara centrerad eller hålla sig till vänster eller höger. Om du har texten inuti en div eller paragraf adderar du helt enkelt “text-align: center” eller left eller right; i din CSS.
Mer om bilder
Här kommer lite tips i form av kodsnuttar som du stoppar in i din CSS när du vill göra något av nedanstående. Dessa kodsnuttar ska alltså vara med i din img CSS någonstans mellan { och } som vanligt.
Centrera bilden:
text-align: center; display: block;
Ta bort ram:
border: 0;
Ändra storlek på bild :
height: Xpx; width: Xpx;
Ändra bakgrundsbild:
background-image: (namnetpådinbild.jpg);
Göra en bild till en länk :
Gör enligt följande för att få en klickbar bild, detta är i ditt HTML-dokument, inte din CSS:
<a href=”http://www.någonsida.se”><img src=”någonbild.jpg”></a>
Bilden dyker inte upp
Gör du som du lärt dig och ändå dyker inte bilden upp? Har du bilden i en mapp? Isåfall måste du tala om det för webbläsaren. Om din mapp heter “bilder” så skriver du <img src=”bilder/bild.jpg”> Nu går den in i mappen och letar efter bilden bild.jpg.
Ha med bild som ligger på en annan hemsida
Du kan länka till en bild som ligger på vilken hemsida på Internet som helst så att den visas på din hemsida. Du måste bara veta URLen till den bilden.
För att visa bilden, skriv helt enkelt in URLen i din HTML såhär: <img src=”dinURL”> så visas bilden,
URL? Det är “adressen” till bilden. Högerklicka på bilden och välj egenskaper så kommer du att se att adressen/URLen står där. Bara att kopiera och klistra in.
Mer om länkar
Här kommer lite tips i form av kodsnuttar som du stoppar in i din CSS när du vill göra något av nedanstående. Dessa kodsnuttar ska alltså vara med i din img CSS någonstans mellan { och } som vanligt.
Centrera bilden:
text-align: center; display: block;
Ta bort ram:
border: 0;
Ändra storlek på bild
height: Xpx; width: Xpx;
Ändra bakgrundsbild
background-image: (namnetpådinbild.jpg);
Göra en bild till en länk
Gör enligt följande för att få en klickbar bild, detta är i ditt HTML-dokument, inte din CSS:
<a href=”http://www.någonsida.se”><img src=”någonbild.jpg”></a>
Bilden dyker inte upp
Gör du som du lärt dig och ändå dyker inte bilden upp? Har du bilden i en mapp? Isåfall måste du tala om det för webbläsaren. Om din mapp heter “bilder” så skriver du <img src=”bilder/bild.jpg”> Nu går den in i mappen och letar efter bilden bild.jpg.
Ha med bild som ligger på en annan hemsida
Du kan länka till en bild som ligger på vilken hemsida på Internet som helst så att den visas på din hemsida. Du måste bara veta URLen till den bilden.
För att visa bilden, skriv helt enkelt in URLen i din HTML såhär: <img src=”dinURL”> så visas bilden,
URL? Det är “adressen” till bilden. Högerklicka på bilden och välj egenskaper så kommer du att se att adressen/URLen står där. Bara att kopiera och klistra in.
Mer om rubriker
En rubrik ska skrivas med en rubrik-tagg och dom kan ha 6 olika rangordningar, från <h1> ner till <h6>. Använd h1 för huvudrubriken på din sida, h2 för eventuell underrubrik o.s.v. I CSS-filen ska det se ut såhär, precis som med text och allting annat:
h1 { diverse kod beroende på hur du vill att rubriken ska se ut }
Och mer än så är det egentligen inte.
Mer information om XHTML och Doctypes
XHTML är något av ett modeord i webbvärlden, men av en anledning. Grovt förenklat kan man säga att XHTML är en utveckling av HTML och finns till för att göra hemsidor och deras innehåll mer tillgängligt för användare oavsett framför vilken dator eller annan enhet dom besöker din hemsida med.
De flesta sidor med XHTML-kod länkar till en CSS-stilmall och har i den all information för det estetiska på hemsidan. På detta sätt separeras innehållet (HTML-dokumentet) från all layout-information (CSS-dokumentet), vilket är positivt bl.a. för att det blir lättare att arbeta med, felsöka och se över din hemsida. Det blir också lättare för sökmotorerna att söka igenom din sida efter innehåll. Sökmotorn bryr sig bara om ditt innehåll, inte om din design, vilket gör gör att om du genom XHTML/CSS bara har innehåll i ditt HTML-dokument så blir det lättare för sökmotorn att hitta det, vilket också kan innebära att du hamnar högre upp i sökmotorerna.
Du behöver också göra utföra mindre arbete med din hemsida på detta sätt. Med en liten kodsnutt i huvudet på alla dina HTML-dokument kan du länka till din CSS-stilmall. Om du nu gör en ändring i din stilmall så kommer ändringen att synas i alla dina HTML-dokument som du har på din hemsida.
För att din hemsida ska vara i korrekt XHTML måste du också ange en doctype.
Doctype betyder “Document Type Declaration” och är en instruktion för att sammankoppla din hemsida med en DTD, “Document Type Definition”. Det är säkert grekiska för de flesta, men för att kort förklara varför du behöver ange doctype så är det för att din kod ska validera som XHTML, och du måste ha en av XHTML’s document type definitions vilka är strict, transitional och frameset.
Strict är som namnet antyder den striktaset DTD’n och din kod får här intehålla några fel eller “tvivelaktiga” taggar. En sådan skulle kunna vara <center>. Egentligen ska du ju sköta allt sånt i ditt CSS-dokument så <center> är inte tillåtet, bland annat.
Transitional är den vanligaste DTD’n. Koden får inte innehålla fel men här får du använda taggar som <center> och <br /> utan att valideringen misslyckas.
Om du har en sida som använder ramar ska du använda DTD’n Frameset. Du ska så långt du kan undvika ramar/frames då de inte gillas av sökmotorer.
