Då du vill skapa en ram för text på din hemsida, är en så kallad <div>-tagg lämplig. Jag har placerat följande kod inom <body>-taggen i samma dokument som vi använt i del 3 <div>-taggen ligger attributet style som jag definerar min rams egenskaper med genom olika värden.

divunred
Samma långa rader med kod …
resultram
… ger exakt samma ramutformning runt två olika texter

Istället för att behöva skriva denna långa definition inom style attributet i varje tagg i HTML dokumentet, finns en enklare väg att gå. Stilmallar, genom CSS kodning. I ett CSS dokument (eller direkt i <head>-taggen) kan du namnge och hantera style attributet genom class eller ett id attributet. Detta betyder att du kan referera till din ram genom exempelvis class attributet:

divdotframe

Ramen dyker såklart inte upp av sig själv bara för att vi refererar till klassen namne dotFrame. Vi måste definera dotFrame någonstans, och där finns två vägar att gå.

  1. Direktstyling i <head>-taggen. Fördel: sidans utseende hålls uppdaterat hela tiden. Nackdel: Det blir mycket att hålla reda på och HTML dokumentet kan ta lång tid på sig för att läsa all stilar på nytt.
  2. Länka till ett CSS dokument genom att ange länken i <head>-taggen. Fördel: HTML dokumentet blir nätt och inte så  tungt att läsa om för webbläsaren. Nackdel: Det kan ta några varv innan sidans stilar läses av på nytt eftersom det gärna ligger kvar i datorns internminne.

När jag blev varse om CSS, blev jag alldeles till mig i trasorna. Det är kraftfullt, enkelt och extremt beroendeframkallande om man är en grafiknörd. Det finns tävlingar som går djupt in i denna konstform (http://www.cssdesignawards.com/). I dagsläget är CSS3 aktuellt, och du hittar alla möjliga typer av egenskaper och värden du kan sätta för dessa hos W3 Schools. I CSS3 finns bland annat egenskaperna transform, transition eller animation som tillåter användaren att göra mer genom CSS än ett behöva anropa Javascript (se ett finfint exempel på CSS animationer här!).

Pseudo-classer kommer du bli intresserad av tidigt om du nu känner dig lika upprymd som jag gjorde då jag upptäckte CSS. En händelse, såsom då du för muspekaren över en knapp, klickar i en ruta eller scrollar kan nämligen anropa värdet av en egenskap. En pseudo-class hänvisar till vilken form av händelse det berör.

Men nu sätter vi igång! Skapa ett nytt dokument i dina Anteckningar (PC) eller TextEditorn (Mac) och spara det med namnet stilmall.css

stilmallfönster
Nu har du två filer i din hemsidekatalog. Index.html och stilmall.css

För att HTML dokumentet ska kunna läsa din stilmall måste du länka till CSS dokumentet inuti <head>-taggen. Det gör du genom <link>-taggen och med hjälp av attributen  href, rel, type och media, som talar om vilken fil som är källan (stilmall.css), förklarar vilken typ av innehåll det är (stylesheet), i vilket format det är (text/css) och genom vilken utenhet (screen [datorskärmen]) det ska presenteras.

linkcss
Det ska se ut så här i din <head>-tagg i HTML dokumentet
cssbodytags
… och nedanför i <body>-taggen kan du nu frisera bort style attributet och ersätta det med class och skriva in namnet dotFrame på din class.

I ett CSS dokument skiljer sig definitionen av egenskap och värde något från sättet man skriver HTML taggar på. Om vi nu ska utforma en ram som har exakt samma inställningar i ett CSS dokument som när vi skrev det tidigare genom HTML så kan man i ett CSS dokument börja med att inleda namnet på sin class eller id genom en punkt (.) eller numreriskt tecken (#). Jag skrev ju en class med namnet dotFrame tidigare så jag håller mig till det.

En öppningsklammer ({) och en avslutningsklammer (}) används för att tala om vilka egenskaper med tillhörande värden som en class eller id ska innefatta. Du skriver först vilken egenskap du vill anropa och deklarerar den genom kolon (:) och avslutar sen egenskapen med angivet värde genom semikolon (;). Därefter är det bara att stapla egenskap på egenskap inom klamrarna.

stilmalljusterad
Vi anropar egenskaperna för färg, ram, marginal och inre marginal till klassen dotFrame.

Men jag pratade ju om det där med pseudo-klasser också. Ja just det… Låt oss nu säga att du vill att användaren ska få en mer interaktiv upplevelse av sitt besök. Då hen rör muspekaren över <div>-taggen ska bakgrundsfärgen till <div>-taggen förändras. Om du inte redan spanat in det finfina exemplet på CSS animationer rekommenderar jag ett besök, och du kan även se här på W3 Schools hemsida vilka olika typer av pseudo-klasser som finns tillgängliga. Vi ska använda pseudonymen hover.

pseudonym
Följande pseudo-klass kommer se till att klassen dotFrame byter färg till gul när användaren “hovrar” (för muspekaren över) <div>-taggen på hemsidan.

Se resultatet här: https://jsfiddle.net/tommybonte/jh9agjfn/

Om du nu har sparat dina dokument och du inte ser någon förändring när du uppdaterar din hemsida och hovrar över <div>-taggen så kan det vara så att ditt CSS dokument inte har laddats om från HTML dokumentet. Det saktar ner hastigheten något, men om du jobbar med externa CSS dokument kan det vara gött att avaktivera cache lagringen. I Chrome gör du på följande vis:

disable
Klicka F12. Klicka Preferences och inunder inställningarna för Network kryssar du i Disable cache (while DevTools is open). Detta betyder då också att du måste hålla “verktyget för programmerare” (F12 eller inunder inställningar i Chrome), öppen.

Om du drar i sidorna av din webbläsare när du har sidan med ramarna öppen märker du kanske också att ramarna anpassas. Detta beror såklart på att vi har angivit marginalen för ramen från kroppen av vårt webbfönster med 20%. Ramen justeras aktivt när vi reglerar fönstret. Ditt första steg till att göra en hemsida responsiv. I enkla termer är gränssnittet på en responsiv hemsida anpassat för att passa alla typer av skärmar. Från mobiltelefon, surfplatta till datorskärm.

responsive-web-design
Ett tråkigt men tydligt exempel på hur en sida kan fungera responsivt

Utseendet på en hemsida är viktigt, men det är långt ifrån allt. För att en hemsida ska fungera på ett interaktivt och användarvänligt sätt, samt kunna hantera information optimalt krävs en balanserad mängd kod mellan grafik och funktionalitet.

I nästa del ska vi titta lite på de alternativ som finns till traditionellt kodande. Färdiga mallar, sajter, applikationer eller tjänster där du enkelt kan sätta upp och starta din egen hemsida utan att behöva kunna en massa kod, men lugn. Jag ska komplettera det senare i samma del med lite fina applikationer för ren kodning också.

Advertisements