Grundkurs i webbutveckling

Här kommer du lära dig webbutveckling från grunden. Upplägget är gjort för ungefär 10 heldagar. Ta god tid på dig. Att öva webb, och att lära sig att hitta hjälp om saker du inte kan, är det viktigaste för att fortsätta utvecklas. Lär dig på djupet istället för att hoppa vidare – det är ingen brådska. Du kommer hela tiden bygga vidare på de du lär dig.

1 – Vad är HTML? Vad är en hemsida?

I denna första övningen skriver vi ett CV som en egen hemsida. Vi börjar enkelt och bygger vidare under övningarna. Du kommer lära dig om HTML, bilder och verktyg som är bra att använda.

HTML är språket på internet och du kommer snart att skriva din första. Du sparar en fil på din dator som du kan öppna i webbläsaren. På samma sätt som du skulle öppnat en fil du skriver i Microsoft Word. En skillnad är att en hemsida är sparad på Internet så att sökvägen istället för att peka till din hårddisk pekar till en plats på Internet där filen är sparad.

Det finns många olika tekniker (som t.ex. JavaScript, CSS och PHP) men all Internetprogrammering kommer i slutändan ner till HTML. Oavsett vad du vill göra med dina webb och Internet-kunskaper är HTML en viktig byggsten och återkommer i alla de andra teknikerna. Ha tålamod! Allt blir enklare och faller på plats snabbare om du lär dig det ordentligt från början.

En HTML-fil är en text-fil där man med programmeringsspråket HTML markerar ut olika delar av dokumentet att få olika egenskaper. Markeringerna gör man med hjälp av HTML-taggar.

cv-html-webblasare

HTML-taggar

Tänk att du vill skriva en text där ett ord ska vara i fet stil. I ett ordbehandlingsprogram (t.ex. Microsoft Word eller Google Docs) skulle man markerat ordet och sedan tryckt på knappen fetstil. I HTML skriver man istället en HTML-tag runt ordet man vill ska vara i fet stil.

<strong>fet stil</strong>

En HTML-tag börjar alltid med ett mindre-än-tecken < sedan kommer ett ord som beskriver vad det är taggen gör och sedan ett större-än-tecken >. Där efter kommer själva innehållet (t.ex. texten som ska vara fet) och sist kommer taggen igen. I sluttaggen skriver man även ett snedstreck / för att visa att taggen tar slut här.

Jag tänker mig det som att HTML-taggarna kapslar in orden som ska var fet-stil. Man markerar för webbläsaren vad i texten som ska se ut på olika sätt.

Det finns många olika HTML-taggar. För att skapa rubriker använder man taggen <h1>Min rubrik</h1> och för att skriva en underrubrik <h2>Min underrubrik</h2>.

Du måste inte lära dig alla taggar utantill. Det finns ingen mening att lära sig alla eller gå igenom alla. De ändrar sig och är lätta att slå upp. Försök istället skapa en förståelse och en känsla för hur man skulle göra olika saker i HTML.

Rubriker och underrubriker

För att markera rubriker finns det olika taggar beroende på nivå (storlek) på rubriken. En huvudrubrik markeras med <h1> , underrubriker med <h2> ,under-under rubriker med <h3>. Ju högre siffra desto mindre storlek på rubriken.

Tänk H som i Header!

Stycken och mjuka radbrytningar

Normalt när du skriver ett stycke trycker du ofta enter två gånger för att göra mellanrummet nedåt till nästa stycke. Tanken är egentligen att man trycker enter en gång och att ordbehandlingsprogrammet sedan har satt avståndet för luft runt din text så att det känns som lagom mycket. Det som händer när man trycker enter två gånger är att man lägger in två mjuka radbrytningar istället för att markera ut det som ett stycke.

I HTML skiljer man på stycken och radbrytningar.

<p>Ett stycke</p> och ett mjukt radbryt<br>

Här dyker även en ny sak upp. Titta noga på taggen <br>. Den har ingen sluttag. Det finns vissa taggar som inte har något slut. (Det fungerar att skriva med sluttaggen också <br></br> men det är helt meningslöst. Ingenting händer mellan start och slut-tag.)

Tänk Paragraph för stycke och BReak för mjukt radbryt

Textformatering

Text markeras efter hur viktig den är. Det finns tre vanliga nivåer; vanlig text, betonad text och starkt betonad text. <strong>starkt betonad text</strong> och <em>betonad text</em>. Normal text markeras inte.

Strong betyder stark och em står för ordet EMphasis som betyder eftertryck

Det går faktist att använda taggarna <i>italic betyder kursiv</i> och <b>bold betyder fet</b> men anledningen att det är rätt att använda <strong> och <em> är för att de inte sätter någon formatering. Utan bara en sorts text. Skillnaden är liten så försök bara komma ihåg det.

Bilder

Texten sparas i själva HTML-dokumentet men bilder länkas istället in i dokumentet. HTML-filen behöver då ha adressen till bilden.

Vinterjogg Göteborg 2015

För att länka in en bild används taggen <img> och precis som med taggen <br> behövs inget avslut. Adressen till bilden lägger vi in i attributet src.

<img src="min-bild.jpg">

Förutom adressen måste även bilder ha ett attribut som visas om bilden av någon anledning inte går att visa. Bildfilen kanske har blivit borttagen? Eller är i fel format? Eller kanske en blind besökare får bilden uppläst för sig? Dessutom läser sökmotorerna in den texten för att se vad som är på bilden. Ta för vana att skriva några ord som beskriver vad som är på bilden.

<img src="min-bild.jpg" alt="Min bildbeskrivning">

Att tänka HTML

Fokusera inte på att memorera alla olika taggar. Det kommer efter hand. Försök istället börja tänka HTML. Om ni vill skapa en klickbar länk i ert dokument så sök efter html link på Google och se hur du markerar det i din text. Vill du skriva en fysisk adress kan du söka efter html address. Nästan alltid finns det ett tänkt sätt att göra olika saker.

Det finns många fördelar med att använda rätt HTML-element för rätt sak men framförallt får ni en hel del formatering av text gratis. Även om ni senare vill andra utseendet så har ni en bra grund.

Skriv ett HTML-dokument

För att skriva ett HTML-dokument behöver man några saker till som berättar för webbläsaren att det är HTML. Dels behöver man ett verktyg att skriva HTML i och så behöver man några rader kod i början av dokumentet.

Program för att skriva HTML

Du behöver bara ett vanligt textprogram för att skriva HTML. Jag rekommenderar dig att använda textprogrammet Brackets men det finns andra.

Ladda hem och installera Brackets.

Enkel HTML-mall

Den enklaste mallen för ett HTML-dokument finns här. Vi kommer lägga till fler saker efterhand i mallen men börja så här.

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Ditt innehåll här</p>
</body>
</html>

OBS! Alla dina egna HTML-taggar ska ligga mellan <body> och </body>!

Skriv av den till din egen fil. Kopiera den inte utan ta tillfället i akt att försöka känna igen de första olika taggarna.

Ett förslag är att du gör en mapp på din dator för varje övning. Så har du kvar de gamla dokumenten som referens senare. Ta för vana att hålla ordning på dina filer. Du kommer behöva det.

Det finns väldigt många olika taggar för att formatera text. Experimentera med några av dem på W3Schools.

Övning 1 – HTML

Utgå från det du lärt dig och skapa ett HTML-dokument. Utgå från mallen.

Uppgiften är att skapa ditt CV. Ta för vana att göra så verkligt du kan. Det är då du stöter på de verkliga frågorna och problemen. Behöver du inspiration till ditt CV finns det flera sidor (tex hos Arbetsförmedlingen) att börja läsa.

Experimentera och var nyfiken!

Gör minst följande (och gärna mer)

  • Skriv minst ett stycke med några ord som är fet-markerade
  • Skriv minst 3 olika rubriker
  • Skriv några ord kursiva
  • Lägg in en bild i ditt dokument

Svara sedan på följande frågor

  • Vad är skillnaden på <br> och <p>?
  • Hur gör man radbrytningar i HTML?
  • Vad är skillnaden mellan taggarna <em> och <strong>?
  • Vilka program kan man använda för att skriva HTML?

2 – Min första CSS

HTML som vi gjorde i övning 1 strukturerar upp innehållet på din hemsida. CSS som vi ska arbeta med nu ändrar utseendet på HTML.

CSS liksom HTML är grunderna för all webbutveckling.

De två teknikerna samspelar. Innehållet, alltså text, bild och video, skriver du i din HTML. CSS styr utseende och layout på innehållet. Vill du ändra färg på en text skriver du texten i HTML och sedan ändrar du färgen i CSS.

CSS kompletterar HTML. De fina är att du inte behöver ändra innehållet för att ändra layouten.

Vad är HTML och CSS? Vad är en hemsida? – Fundera!
Surfa till en stor dagstidnings hemsida och titta i arkivet. Där finns säkert 10 år gamla artiklar.

Under de åren har tidningen förmodligen ändrat designen på hemsidan minst en gång. Tänk om man då behövde gå tillbaka och uppdatera alla gamla artiklar för att få den nya designen.

Hur fungerar mobil-sidor? Många webbsidor ser inte exakt lika ut på datorn som på surfplatta eller telefon. Har man då gjort två versioner av allt innehåll? Eller finns det någon teknik som ändrar utseendet på hemsidan beroende på var den läses?

Även blinda har en speciell version av hemsidan. Innehållet är fortfarande samma men istället för att visa texten på skärmen läser datorn upp hemsidan.

Anledningen till att HTML och CSS fungerar så bra ihop är att de är lagom flexibla. Innehållet i en HTML-sida kan visas på olika sätt beroende på vad man gör i sin CSS.

HTML och CSS -koppling
En HTML-fil kopplar ihop sig med en eller flera CSS-filer

CSS betyder Cascading Style Sheet eller stilmall på svenska. För er som jobbat med trycksaker känner ni till stilmallar. CSS är en fil som kontrollerar utseendet. Du kommer skriva din HTML i en fil och din CSS i en annan.

Hur skriver man CSS?

CSS (liksom HTML) skrivs som text i ett vanligt textprogram. Jag rekommenderar programmet Brackets men det finns många olika.

Följande rader är en liten del av en HTML-fil där vi vill ändra färger. Vi har två olika HTML-taggar; <h1> och <p>. Rubriken vill vi ha grön och paragrafen röd. Vi vill dessutom ändra bakgrundsfärgen till gul under paragraf-texten.

<h1>En rubrik</h1>
<p>Och här har vi en brödtext</p>

I CSS skriver du följande:

h1 {
  color: green;
}

p {
  color: red;
  background-color: yellow;
}

Titta noga på CSS:en. Första raden innehåller ordet h1 följt av en måsvinge. Två rader längre ner står det en måsvinge på andra hållet. Det som står mellan måsvingarna är det som justerar färgen på rubriken.

Texten h1 i CSS:en pekar ut all text som finns i HTML-taggen <h1>min rubrik</h1>. Raden i CSS:en kallas för CSS Selector. Lägg ordet på minnet – det återkommer. Hade vi haft många olika h1 i vår HTML hade alla ändrats.

html-css.png
Kopplingen mellan HTML-element och CSS-selectors

Fortsätter du neråt ser du nästa selector – för paragrafen, p. Den ändrar bakgrundsfärg och textfärg. Varje rad ger en egenskap.

Efter hand som du bygger ut din CSS kommer det bli både fler selectors och fler rader i varje selector. Ofta kan en selector bli 20 rader lång och en hel CSS-fil kan ibland bli flera tusen rader långa.

Typsnitt

Som standard har webbläsaren ett typsnitt för rubriker och ett för övriga texter. Det går att ändra typsnitt för alla olika HTML-taggar genom att i sin CSS-fil lägga till en rad för typsnittet.

Det finns följande olika sorters typsnitt:

  • Serif
  • Sans-serif
  • Cursive
  • Fantasy
  • Monospace

Rubriker är oftast en Serif som standard men tänk om vi vill ändra typsnittet för våra rubriker till en Sans-serif istället? Se följande CSS-exempel.

h1 {
  font-family: sans-serif;
}

Experimentera även med följande rader i din CSS för rubriken.

font-weight: 100;
font-weight: 500;
font-weight: 900;
font-style: normal;
font-style: italic;

Alla rader ska ändra något. Det finns mycket mer om typsnitt. Snart 🙂

Google-typsnitt

Nu kan vi välja från några olika sorters typsnitt. Oftast behöver du välja typsnitt friare. Isåfall behöver du länka in en CSS-fil från Google Fonts.

Tillexempel om du vill lägga till Roboto-typsnittet lägger du in följande i huvudet på din HTML:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Och i din CSS väljer du typsnittet med

body {
  font-family: 'Roboto', sans-serif;
}

Mycket mer info finns i Googles Getting started guide.

Storlekar

En dator-skärm är uppbygd av pixlar. Det är små prickar som ligger så nära varandra så de skapar en bild.

Storlekar i CSS går att justera på flera olika sätt men det enklaste är att bestämma hur många pixlar något ska vara. På en hemsida vill man oftast arbeta med max-storlekar så att innehållet skalar om sig fint till mobiler. Surfar du på telefonen vill du tex kanske inte att bilden ska gå utanför skärmen i sidled. Vi vill inte heller att bilden på datorn ska vara så stor att man bara ser en liten del av den.

Följande CSS justerar så att alla bilder på din hemsida blir max 200 px breda.

img {
  max-width: 200px;
}

Typsnitt brukar vara i en storlek på ca 14px. Vill vi ändra våran brödtext till 22px skriver vi så här:

p {
  font-size: 22px;
}

Du kan även justera dina storlekar på olika delar av dokumentet. Vill du inte ha så långa rader i din brödtext lägger du till en rad för det.

p {
  font-size: 22px;
  max-width: 400px;
}

Länka in CSS i HTML

Börja med att skapa ett nytt dokument i Brackets. Skriv av följande och spara det i samma mapp som din HTML med filnamnet style.css.

body {
  background-color: red;
  color: yellow;
}

För att din HTML ska veta om att det finns en CSS behöver du lägga till några rader. Mallen du arbetar från ser ut så här nu. Notera raden <link rel="stylesheet" href="style.css">. Den kopplar ihop dina dokument.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Olas HTML mall</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>Ditt innehåll här</p>
  </body>
</html>

Ett praktiskt tips 🙂

När du gör en ny CSS-fil så börja alltid med att skapa både HTML och CSS-filer och länka in CSS:en i HTML. Ändra sedan något enkelt som du vet fungerar som tex bakgrundsfärgen för hela sidan till röd. Kolla nu så att det fungerar.

Det är nästan alltid ett enkelt slarv eller stav-fel som är problemet.

När du är säker på att det funkar kan du bygga på CSS:en i lugn och ro.

Övning 2 – CSS

Utgå från din HTML du skapade i övning #1 (CVt). Lägg till CSS för att förbättra utseendet. Har du inte kvar din HTML så gör en ny. Det ger dig bara extra övning 🙂

Gör minst följande (och gärna mer)

  • Ändra färger på dina olika rubriker och stycke. Ändra både textfärg och bakgrundsfärg.
  • Ändra färger på de kursiva och feta texterna.
  • Byt typsnitt på dina olika element.
  • Ändra storlek på typsnitt.
  • Ändra storlek på din bild.
  • Ändra storlekar på brödtext och rubriker.

Klipp och klistra inte. Skriv hellre av texter och försök bli bekväm med hur man skriver. Dessa grundläggande saker kommer sitta i ryggmärgen efter ett litet tag.

Svara på följande frågor

  • När och hur använder man måsvingarna i CSS?
  • Vilka olika sorters typsnitt finns i webbläsaren?
  • Vad är en serif?
  • Hur kopplar man in en CSS-fil i en HTML-fil?

3.1 – Länkar

Länken är ett av de första element som kom till i HTML. Tanken med länken är att du ska kunna koppla ihop flera olika sidor. Länken skapade Internet och har även givit webben sitt namn – World Wide Webb.

En länk skrivs med elementet <a> (eng. anchor) som knyter ihop två olika sidor. Förutom elementet behöver vi lägga till information om var länken ska peka och vad för text som ska synas. För att göra texten Google klickbar med en länk till www.google.se skriver vi följande.

<a href="http://www.google.se/">Google</a>

Läs länken noga. Vi öppnar taggen, lägger in attributet href, stänger länken och skriver in vad som ska vara klickbart.

När ni väljer ut vilken text som är klickbar är det viktigt att de orden förklarar vad som kommer på nästa sida. Ibland ser man exempel som ”Läs mer här” där ordet här pekar till en sida med mer information. Ordet här förklarar inte vad som kommer. Det vore mycket bättre om det stod tex ”Läs mer på min sida om HTML-taggar”. Då vet läsaren redan innan hen har klickat vad som kommer.

Tips: Det måste inte vara en text som är klickbar. Det går andra element också som t.ex. bilder.

Absoluta & relativa länkar

Om attributet href börjar med texten http:// betyder det att du gör en absolut länk till en sida. Webbläsaren läser då in hela länken och surfar dit.

Utan texten http:// i länken läggs istället det ni skrivit i href på sist i länken. Normalt används detta för att länka inom den egna hemsidan. Har du t.ex. en meny och vill länka till ett kontakt-formulär som ligger i HTML-filen kontakt.html behöver du inte skriva hela den absoluta sökvägen utan bara filens namn.

Är det en stor sida delar man ofta upp sina HTML-filer i flera olika mappar. Då kan man göra relativa länkar genom att lägga till mappens namn också.

För att krångla till det kan man även uppåt i mappstrukturen. Då använder vi ordet ../ istället för mappens namn.

Jämför följande fyra exempel:

<!-- Absolut länk -->
<a href="http://www.google.se/">Googles hemsida</a>

<!-- Relativ länk -->
<a href="kontakta-oss.html">Kontakta oss!</a>

<!-- Relativ länk i annan mapp -->
<a href="inkopsavdelningen/kontakt.html">Kontakta inköpsavdelningen!</a>

<!-- Relativ länk från inköpsavdelningens kontaktsida tillbaka till förstasidan -->
<a href="../index.html">Tillbaka till förstasidan</a>

Testa alltid dina länkar genom att klicka på den och se så du hamnar rätt. Läs i webbläsarens adressfält var du hamnade. Det är lätt att göra fel.

Kuriosa & överkurs
http:// betyder Hyper Text Transfer Protocol och är sättet som webbläsaren kommunicerar med webbservern. I praktiken betyder det en länk till en helt ny hemsida. Det finns även andra sorters protokoll som ni kanske hört talas om. ftp:// som står för File Transfer Protocol är ett av de andra vanliga.

Ankarpunkter

Det finns fler sätt att skriva länkar t.ex. kan du länka till en del av ett dokument.

Tänk att du har ett långt dokument och vill ha en innehållsförteckning där du kan länka ner direkt till dina olika rubriker. Rubriken måste ha en speciell ”adress” som läggs till med attributet ID (IDentifier) och i länken skriver du #slutsats som adress i HREF.

Ett exempel med en del av en innehållsförteckning.

<h1>Vår innehållsförteckning</h1>

<a href="#inledning">Inledning</a><br>
<a href="#slutsats">Slutsats</a>

<h2 id="inledning">Inledning</a>
<p>Här är brödtexten för inledningen. Lägg gärna in mycket text i ditt dokument så blir det tydligare vad som händer.</p>

<h2 id="slutsats">Slutsats</h2>
<p>Här är brödtexten för slutsatsen</p>

E-postlänkar

Du kan även göra en länk till en e-postadress. Det som händer när en läsare klickar på den är att webbläsaren ser att det är en e-postadress och öppnar e-post-programmet istället för att öppna länken i ett nytt fönster.

Mail-länkar funkar men det finns två problem. Så fundera en gång extra 🙂

  1. Dels måste webbläsaren veta vilket mail-program den ska öppna. Tidigare var detta ett mindre problem men när många använder webbmail (som t.ex. Gmail eller Hotmail) blir det svårare för webbläsaren att veta vad den ska göra med mailadresser.
  2. Använder du en publik dator som tex på ett bibliotek blir det väldigt otydligt vem som skickar mailet. Datorn på biblioteket öppnar mailprogrammet men den kan inte skicka mail från dig.
  3. Företag vill alltid skriva ut kontaktuppgifter på hemsidan. Problemet är att det är väldigt stor risk att e-posten blir uppsugen i olika spam-system. Får man tillräckligt mycket skräppost till en e-postadress blir den i praktiken oanvändbar. Många använder e-postformulär istället för att skriva ut e-posten.

För att göra en mail-länk gör du följande:

<a href="mailto:ola@min-mail-adress.se">Maila ola@min-mail-adress.se</a>

3.2 – Listor

Både punktlistor och numrerade listor används flitigt på internet. Förutom i innehållet strukturerar man ofta upp menyer i listor.

På Internet är det ofta extra viktigt att hålla sig kortfattad. Läsare har mindre tålamod att läsa på en skärm än i en bok. Att skriva i punktform är ett sätt att förkorta innehåll.

Det finns två sorters listor som används ofta. Punktlista och en sorterad (även kallad ordnad lista). Punktlistan betyder att innehållet är uppdelat men inte prioriterat. I den sorterade listan kommer det viktigaste överst.

Båda sorters listor skrivs på liknande sätt. I båda fallen används elementet <li> för att lagra själva datan. Det som skiljer dem åt är <ul> mot <ol>.

<!-- Unordered List -->
<ul>
  <li>Första punkten skriver vi här</li>
  <li>Andra punkten</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>Nummer ett skriver vi här</li>
  <li>Nummer två</li>
</ol>

Du kan även ha en lista i en lista eller en sk. underlista. Du kan kombinera sorterade listor med punktlistor hur som helst. Titta noga. Framförallt på var den andra punkten avslutas.

<ul>
  <li>Första punkten</li>
  <li>Andra punkten
    <ol>
      <li>Första undersiffran</li>
      <li>Andra undersiffran</li>
    </ol>
  </li> <!-- Här stänger vi yttre listan -->
  <li>Tredje punkten</li>
</ul>

Det finns även en lista till som heter Defenition List. Den är ovanlig men finns. Läs gärna om den på W3Schools eller MDN.

Listor & menyer

Det är vanligt att man strukturera menyer på hemsidor som listor. Sedan ändrar man utseendet på listorna med hjälp av CSS. Mer om detta snart 🙂

Övning 3 – Länkar och listor

  1. Lägg in länkar till några externa hemsidor på ditt CV. Tex kan du göra så att företag du arbetat på blir klickbara (till deras respektive hemsidor).
  2. Lägg in länkar mellan olika delar på din egen hemsida. Tex kanske du förutom din CV-sida gör en portfolio-sida också?
  3. Gör om länkarna du nyss gjorde till en klickbar meny (tex längst upp) på din hemsida. Försök få den att se ut som en riktig meny.
  4. Gör så man kan klicka på en bild och komma till en ny sida.
  5. Gör en innehållsförteckning med länkar till olika rubriker.
  6. Testa att kombinera absoluta länkar med ankarlänkar för att länka från en sida direkt till en rubrik på en annan sida.
  7. Gör en mail-länk.
  8. Gör en lista.
  9. Lägg din innehållsförteckning i en ordnad lista.
  10. Gör en lista med en under-lista.

Frågor – Länkar och listor

  • Vad händer med följande länk: <a href="www.google.se/">Google</a>?
    • Testa om du inte är helt säker.
  • Vad betyder det när du skriver ../ i HREF-attributet en länk?
  • Vad är fördelen och nackdelen med relativa länkar?
  • Vad är fördelen och nackdelen med absoluta länkar?
  • Vad betyder det när du skriver <!-- text --> i HTML?

4 – HTML, mall, meta och indentering

I vår grundläggande HTML-mall hoppade vi över vissa saker. T.ex. har vi fram till nu inget sätt att styra vad som står i webbläsarens titel-rad. Titel-raden är även det som syns när vi gör ett bokmärke. Vi har inte heller berättat för webbläsaren vilket språk eller hur dokumentet är skapat.

Allt detta är meta-data eller extra-data. Det är inte livsviktigt men ökar läsbarhet och även chanserna för sökmotorerna att hitta dina sidor.

04 - HTML-dokumentet, indentering & 05 - Felsökning.png
Ett HTML-dokument kan delas upp i <head> (metadata) och <body> (det webbläsaren visar, din hemsida)

Ett HTML-dokument består av två huvud-delar. I mallen såg ni både taggen <body> och <head>. Allt som skrivs mellan  <body> och  </body> är det som syns på skärmen medans det som skrivs mellan   <head>  och </head> är metadata. Det syns oftast inte direkt utan är mer tänkt som en hjälp för webbläsaren att visa dokumentet på rätt sätt. Eller för sökmotorn att tolka dokumentet rätt. Det är även i  <head> som du länkar in din CSS-fil.

Uppdaterad HTML-mall

Från nu har vi en mall som är relativt komplett. Det är inte så mycket nytt utan bara mer av samma som kommer läggas till. Titta på mallen så går vi igenom den steg för steg.

<!doctype html>
<html lang="sv">
  <head>
    <meta charset="utf-8">
    <title>HTML-mall no. 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>All text och bilder på hemsidan skrivs här</p>
</body>
</html>

På första raden står det <!doctype html>. Ett HTML-dokument ska alltid börja med denna raden. Den berättar för webbläsaren att det som kommer längre ner i filen är HTML. I tidigare versioner av HTML var man tvungen att skriva fler detaljer för vilken version av HTML man hade skrivit sitt dokument för. Nu har många av de sakerna som man tidigare var tvingad att göra men som ingen egentligen gjorde städats bort.

På raden under står det <html lang="sv">. Här berättar vi för webbläsaren att själva HTML:en börjar. Vi specificerar även att innehållet kommer vara på svenska. Den viktigaste anledningen för att skriva vilket språk sidan är på för att synskadade ska kunna få den uppläst på rätt sätt. Men även funktioner som automatiska översättningar eller funktioner som kan slå upp ord på hemsidor bygger på att man vet vilket språk man ska utgå ifrån. Det är så enkelt att lägga till så bara gör det 🙂

I takt med att webben och Internet har mognat har många krångelsaker försvunnit. Nästa rad är resterna från en som inte försvunnit: <meta charset="utf-8">. Det finns många olika sätt att spara filer på en dator och UTF-8 är numera standard. Ibland kan ni hamna på hemsidor där t.ex. ÅÄÖ skrivs ut som frågetecken eller bara konstiga tecken. I de fallen har man nästan alltid lyckats spara dokumentet i ett format och sedan angivit fel format i HTML-dokumentet. Använder ni Brackets och anger UTF-8 i dokumentet kommer det oftast fungera automagiskt.

Längst upp i webbläsarfönstret finns en rad där det står vilken hemsida man surfar på. Det styrs med elementet <title>. Här är inget konstigt utan ni lägger in en textrad med hemsidans namn. Man brukar oftast även skriva vilken undersida man är på. Om du surfar på en dagstidnings hemsida brukar titeln vara i formatet Artikelnamn | Företagsnamn. Surfar du på företags hemsida om du surfar på kontaktsidan är då titeln oftast Kontakta oss! | Konsultbolaget.

Raden efter har ni sett tidigare. Det är raden som läser in er CSS-fil. Den berättar för webbläsaren var CSS-filen finns och att det är en CSS-fil.

Sista elementet är vår <body>. I princip allt material som skrivs här innanför syns på skärmen.

Glöm inte avsluta dina element!

Indentering

I takt med att en HTML-fil växer behöver man ett sätt att strukturera upp det. Jämför med en artikel i en tidning som har rubriker eller en bok som har kapitel och stycken. För sökmotorer och webbläsare spelar strukturen ingen roll alls. Det är bara för att du ska hitta lättare i dina dokument.

I alla programmerings-språk använder man sig av en teknik som kallas indentering. Det betyder att man gör indrag framför ord så att man bygger upp en struktur. Oftast görs indragen åt höger med tab-knappen men det är inte helt ovanligt att du ser dokument med flera space-tecken för indragen också.

Trädstruktur

I HTML blir strukturen som ett träd. Varje gång man skriver något längre ner i strukturen eller inne i ett element gör man ett längre indrag åt höger. Varje gång man kommer till ett avslutande HTML-element tar man bort ett indrag. Det fiffiga är att du hela tiden ser att du har avslutat rätt antal element och i rätt ordning.

Väldigt många programmerings-språk sorterar sig i träd.

Indentering av CSS

I CSS finns inte alls samma träd. Varje CSS-selector är oberoende av de andra. CSS-filer blir därför oftast svårare att läsa i takt med att de växer. Det finns också olika sätt att indentera CSS. Jag bruka sätta första måsvingen direkt efter selectorn, sedan gör jag ett indrag på varje deklaration och ett radbryt efter varje deklaration. Och så avslutar jag med den andra måsvingen en rad under.

body {
  background-color: red;
  color: blue;
}

Det finns ingen anledning att vara extremt strikt med din CSS-indentering. bara den hjälper dig att hitta rätt. Ibland, framförallt på kortare block, skriver jag allt på en rad.

body { color: blue; }

Det går lika bra men så fort det blir flera rader i varje selector blir det svårt att hitta rätt.

I mina CSS-filer brukar jag skriva en kommentar för att beskriva vilken del av hemsidan raderna ändrar. På så sätt byggs CSSen upp i block. Se följande exempel.

/* Generelt. Typsnitt. Färger. Länkar */
body {}
a {}
a:visited{}

/* Sidhuvud */
header {}

/* Meny */
nav {}

/* Innehåll */
article {}
section {}

/* Sidfot */
footer {}

/* Mobilversioner */

Det är omöjligt att vara väldigt strikt med sorteringen. Var pragmatisk!

Från och med nu är det dags att vara noga med dina dokument! De lönar sig snabbare än du tror!

Övning 4 – Byggblock i HTML

  • Uppdatera alla dina HTML-dokument så de innehåller de nya element du lärt dig.
  • Gå igenom både CSS och HTML-dokument och uppdatera indenteringen.
  • Testa några CSS-selectors på de olika sätten.

Frågor 4

  • Vad är det för skillnad på <head> och<body> elementen?
  • Vad används elementet <title> till?
  • Varför indenterar man ett dokument? För vem?

5 – Att felsöka en hemsida

I takt med att HTML och CSS-dokumenten växer behöver vi kunna felsöka dem mer. Om något inte fungerar på en liten sida kan man oftast efter lite testande hitta felet. I takt med att dokumentet ökar i komplexitet behöver vi ett robustare system.

Inbyggt i alla moderna webbläsare finns något som kallas för debugger eller utvecklingsverktyg. Jag använder oftast läsaren Google Chrome för jag tycker dess debugg-verktyg är kraftfullast. Exemplet utgår ifrån det.

När du surfar till din sida kan du högerklicka på ett element som är fel och välja Inspect. Nu kommer ett fönster upp där du kan se din HTML och din CSS.

Chrome debugger inspect
För att öppna debuggern i Chrome högerklickar du och väljer Inspect. På svenska heter det nog Granska.

De nya fönstret som dyker upp innehåller mängder med funktioner. Vi kommer börja med att titta på HTML och CSS-felsökningen men det finns även möjligheter att mäta vilka delar av hemsidan som är långsam eller snabb och felsöka flera sorters kod som t.ex. JavaScript.

I Chromes debugger ser du din HTML till vänster och din CSS till höger
I Chromes debugger ser du din HTML till vänster och din CSS till höger

På vänster sida ser du hela din HTML. Där kan du klicka runt mellan dina olika element. Varje gång du väljer ett element ser du all CSS som påverkar den till höger.

På höger sida kan du stänga av CSS-attributen för att se hur de påverkar sidan. Du gör det med den lilla kryssrutan. Du kan ändra värdet på ditt attribut genom att klicka på det och du kan till och med lägga till helt ny CSS.

Ändra CSS direkt i debuggern
Ändra CSS direkt i debuggern

Övning 5 – Att felsöka en hemsida

  • Öppna dina senaste HTML-dokument i debuggern. Titta och experimentera.
  • Stäng av och sätt igång olika CSS-deklarationer
  • Byt bakgrundsfärger
  • Byt typsnitt
  • Byt storlekar
  • Vad händer när du stänger webbläsaren? Sparas dina ändringar?
  • Vad händer när du laddar om hemsidan? Sparas dina ändringar?
  • Testa att öppna debuggern på valfri hemsida. Ett tipps är att välja en relativt enkel sida. Annars blir det väldigt mycket CSS 🙂

6 – Semantisk HTML

Ett av målen med att lägga in ditt innehåll i HTML är att strukturera upp det. Rubriker markeras som rubriker <h1> och brödtext delas in i olika stycke <p>. Innehållet sorteras upp på detaljnivå.

Nästa steg blir att strukturera upp hemsidan på en större nivå i olika byggblock som t.ex. i meny, sidhuvud, innehåll eller sidfot.

De flesta delarna eller byggblocken på en hemsida har färdiga HTML-element och i de fall det inte finns något passande kan man markera ut dem ändå.

En enkel layout består av följande byggblock:

  • Logotypen, överst i elementet <header>
  • Menyn precis nedanför i elementet <nav>
  • Huvudinnehållet i elementet <article>
  • Kontaktinformation mm. i sidfoten längst ner i elementet <footer>

Taken med att ha olika element som byggblock eller ”containers” runt innehållet är att gruppera det. Sätter vi en bakgrundsfärg på vårt sidhuvud kan vi göra en annan på sidfoten. Innehållet i de olika delarna ärver egenskapen från sin container. Ändringar kan lätt göras för texten i t.ex. sidfoten utan att texten i sidhuvudet ändras.

Vi kan även sätta storlekar på de olika delarna eller att den ena ska vara placerad till vänster om den andra. Menyn skulle kunna placeras till vänster om innehåller.

Är din HTML byggd ordentligt kan man ändra mellan dessa två layouter bara genom att ändra i CSS.

En annan vanlig men enkel webblayout är att lägga menyn på vänster
En annan vanlig men enkel webblayout är att lägga menyn på vänster

De semantiska byggstenarna förklarar för webbläsaren vilken del som innehåller vad. För en vanlig webbanvändare är det kanske inte så viktigt men tänk vilken fördel det är för en synskadad att veta redan på förhand vilken del som är menyn. Innan hen lyssnar igenom hela sidan för att hitta den.

Lite historia

Normalt brukar jag hoppa över historian (i grundkursen) men här behövs det.

Det finns även ett generell container-element som heter <div>. Fram till ganska nyligen (innan HTML version 5, ca 2013) fanns inte de olika specifika elementen utan vi använde olika varianter på <div>. Det används fortfarande mycket men mindre och mindre. De vanliga bygg-stenarna skulle då kunna skrivas som:

Tidigare skrev vi <div id="header"> i HTML5 skriver vi istället <header> och menyn skrevs som <div id="menu"> nu använder vi <nav>. Sidfoten skrevs ofta som <div id="footer"> istället för som nu <footer>.

Ni ser att alla inte är exakt samma men lika. Vi använde tidigare attributet id för att sätta olika namn på de olika byggblocken. Idag har de istället blivit till egna element. När de semantiska byggstenarna skapades (till HTML5) analyserades massor av hemsidor och element skapades från hur en majoritet var byggda.

De olika byggstenarna eller containrarna brukar kallas för semantiska element. Det finns många fler 🙂 Läs på MDN eller W3Schools.

Övning 6 – Semantisk HTML

  • Uppdatera ditt största HTML-dokument så att de olika delarna av dokumentet ligger i sina respektive semantiska byggstenar.
  • Testa att med CSS ändra bakgrundsfärger på de olika.
  • Ändra bredderna på dina byggstenar.
  • Testa att justera storlek med max-width på din sidebar och innehållsdel.
    • Hamnar de bredvid varandra?
    • Varför? Varför inte?
    • Testa i debuggern

Skapa följande layout. Börja med mobilversionen och försök få den att anpassa sig till datorskärm. Du bör komma ganska långt (eller kanske hela vägen) med de verktyg du har idag.

mobil-dator-version

7 – CSS Selectors

Fram till nu har vi verktyg i CSS för att ändra färg på alla taggar av en viss sort. Ändrar vi egenskaper för elementet <p> ändrar vi på all text som ligger i alla <p>-element. Oftast vill man att olika delar av hemsidan ska få olika egenskaper.

Ett exempel är att du i din sidfot vill att texten ska vara något mindre i storlek än i huvudinnehållet. Texten kanske ska vara mörkgrå istället för svart så den inte är riktigt lika stark som övriga innehållet.

Du kan peka ut bara texten som ligger i sidfoten med följande CSS.

Texten i sidfoten ändras med följande CSS: footer p { font-size: 90%; }

Notera hur vi har två ord i vår CSS-selector. Jag tänker mig det som att webbläsaren letar upp alla <footer>-element och går in i dem och letar efter alla <p>-element.

Det är inte begränsat till bara två ord utan vi kan lika gärna ändra all text som ligger i <strong>-taggar.

footer p strong {
    font-size: 120%;
}

Förutom att ge en längre sökväg finns det otroligt många andra sätt att peka ut olika element i HTML. Nedan följer några vanliga.

ID & Class

Alla element i HTML kan få en slags namn (id) eller en slags sort (class). Du kan behöva detta när du t.ex. har många rubriker som ska se olika ut.

<article>
	<h1>Inledning</h1>
	<p>...</p>

	<h1>Analys</h1>
	<p>...</p>
</article>

För att namnge ett element använder man attributet ID. På varje HTML-sida får ett ID finnas max en gång (& aldrig mer än en gång). Skapar du istället ett element som ska användas många gånger använder du attributet class.

<h1 id="foretagsnamn">Webbskolan</h1>
<p class="diskret">Lite tunnare text</p>
<p>Vanlig brödtext</p>
<p class="diskret">Mer av den tunnare texten</p>

I CSSen kan du sedan ändra dem så här

#foretagsnamn {
    font-family:fantasy;
} 
.diskret {
    color: #ccc;
}

Det smarta i första exemplet är att du ändrar exakt de elementet och inget annat. I det andra fallet ändrar du flera liknande element men inte den vanliga brödtexten.

E-handdelssida / mer avancerat ID & class – exempel

Tänk att du ska designa en e-handels-sida. Olika sorters produkter ska synas bredvid varandra. Du designar en box (.produkt) som innehåller produkt-fotot, namnet och priset. För chark-varor ska bakgrundsfärgen i .produkt-boxen vara röd och för mejeri gul.

Notera att varje produkt har två klasser. Både .produkt och .chark eller .mejeri.

HTML för produkterna

<article class=”produkt chark”>
    <img>
    <h1>Korv</h1>
    <p>25:-</p>
</article>

<article class=”produkt chark”>
    <img>
    <h1>Skinka</h1>
    <p>25:-</p>
</article>

<article class=”produkt mejeri”>
    <img>
    <h1>Ost</h1>
    <p>69:-</p>
</article>

CSS för produkterna

.produkt {
    /* Alla gemensamma egenskaper som tex. storlekar och marginaler här. */
}

.chark {
    background-color: red;
}

.mejeri {
    background-color: yellow;
}

Pseudos

Ofta kan man vilja att färgen ändras när musen kommer över en länk. Det finns en teknik som heter pseudo-klasser för att göra detta i CSS.

a:hover {
    background-color: red;
}

Det måste inte vara på just en länk du ändrar färgen. Det finns väldigt många olika. De vanligaste är följande:

  • :hover
  • :active
  • :first-child
  • :last-child

Det finns även ett gäng pseudo-element. Det är alltså ett element som lägger sig i din HTML precis före eller efter elementet du sätter det på.

  • ::before
  • ::after

Övning 7 – CSS selectors

#1 – Ändra utseende på en hemsida med bara CSS

Din uppgift är att utöka och förbättra utseendet på en fiktiv e-handel genom att bara ändra CSS. Du får alltså inte röra HTML alls.

Färgval, typsnitt osv är valfritt men målet är att du ska öva CSS-selectors och få erfarenhet i att ändra CSS. Det är ungefär så här det kan gå till att göra ändringar på en WordPress-sida via sk. child themes.

Ladda ner kursmaterialet på Github. Packa upp filen och i mappen HTML-CSS hittar du en mapp för kapitel 7. I den finns en HTML-fil som heter matbutiken.html och en CSS-fil som heter din-style.css. Du öppnar HTML-filen i webbläsaren och gör dina andringar i CSS-filen. Målet att att skapa något ungefär som efter-bilen nedan.

#2 – CSS Diner

Gör minst de 10-15 första övningarna på CSS Diner. Många är väldigt svåra så ta god tid.

#3 – Extra CSS selectors övning

Det finns även en gammal övning där du sparar ner en HTML-fil och gör ändringar direkt i den. Vill du så öppna CSS-selectors-övningar i ett nytt fönster i er webbläsare. Läs texten och gör övningarna 🙂


8 – Webblayouter

En stor skillnad mellan webben och ett tryckt material är att på webben syns samma innehåll på olika sorters skärmar – allt från små mobilskärmar till stora datorskärmar. Innehållet kan dessutom läsas upp för någon med nedsatt syn.

Webblayouter måste vara flexibla och kunna anpassa sig efter innehåll och vilket utrymme som finns.

Det vanligaste upplägget är att lägga bilder och text i byggblock där bredderna specas till en min- och maxbredder. Webbläsaren försöker sedan fylla upp skärmen från vänster till höger (eller höger till vänster i vissa länder). När material inte får plats mer radbryts det.

Enkolumnslayout till vänster (tex. mobil) och två till höger (tex. dator eller liggande iPad)

Fundera på: Genom att ändra storlek på fönstret i webbläsaren kan du bilda dig en relativt bra uppfattning om hur sidan kommer se ut på andra storlekar. Testa detta på ett par olika sidor och bilda dig en uppfattning om vad som händer med sidorna.

Det finns några olika verktyg eller strategier för att få layouten att anpassa sig efter innehåll och skärm.

I dagsläget använder vi främst Flexbox för enklare layouter och Grids för mer komplexa. Båda teknikerna är bara några år gamla och har vuxit fram från tidigare layout-strategier där de två vanligaste var att använda CSS-egenskapen float för att låta byggblock flyta runt på rätt ställe och innan dess använde vi komplexa HTML-tabeller för att bygga upp layouter.

Tabellerna var omöjliga att få responsiva och floats blev lätt hopplöst komplexa.

I dagsläget är det Flexbox och Grids som är vettigast att lära sig. Övriga tekniker kommer du troligen bara stöta på när du behöver uppdatera äldre webbar. Det finns tyvärr väldigt många äldre system kvar så du kanske behöver lära dig de senare.

När du bygger en layout börja med att lägga ut byggblocken i HTML och sätt sedan egenskaper på dem i CSS. Börja gärna med att bygga det för mobil men titta hela tiden på hur de olika delarna ändras för större skärmar.

Bygg ett block i taget. De flesta delar av din hemsida fungerar oberoende av de andra. Testa alla för mobil och dator.
Bygg ett block (röd, grön, gul) i taget. De flesta delar av din hemsida fungerar oberoende av de andra. Testa alla för mobil och dator.

Fokusera på Flexbox och efter det Grids. Övriga tekniker kan vi ta vid senare tillfälle.

Flexbox

Flexbox är ett endimensionellt verktyg för layouter. Det används främst för enklare layouter. Oftast på klassiska hemsidor som tex. blogg- eller nyhetsflöde.

Ett exempel på en Flexbox-layout

Flexbox är relativt enkelt. Du skapar en behållare där dina items ligger. Du sätter egenskaper för hur vad som ska hända när de inte får plats på behållaren och justerar dina bredder på dina items.

Ett kod-exempel finns på min Github och en längre, detaljerad beskrivning på A complete guide to Flexbox.

Grids

Grid är ett tvådimensionellt verktyg för layouter. Du specar ett rutnät där du sedan lägger ut innehåll som spänner över en eller flera boxar. Bredderna och höjderna på rutnätet kan du sätta i pixlar, procent eller låta webbläsaren justera automatiskt.

Ett exempel på en grid-layout

Läs detaljerna på A complete guide to grid.

Display

Det finns olika sorters HTML-element. De två vanligaste är block och inline och de styrs med CSS-propertyn display.  Ett block radbryter direkt (även om det skulle få plats mer) medan inline löper på ända ut i kanten. Det finns ett 20-tal andra attribut till display där inline-block också används mycket.

Element flyttar sig efter bredd på sidan

Vill du göra kolumner går det att göra ett enkelt upplägg bara genom att arbeta med display. I sidhuvud och sidfot använder vi block och i kolumnerna använder vi med inline-block enligt följande exempel.

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<style>
header,
footer {
background-color: skyblue;
}
article {
background-color:antiquewhite;
display: inline-block;
width: 49%;
}
</style>
</head>
<body>
<header>Sidhuvud med text logo och meny</header>
<article>Kolumn 1</article>
<article>Kolumn 2</article>
<footer>Sidfot med tex kontaktinformation</footer>
</body>
</html>

Float

Tidigare användes också CSS-egenskapen float för att göra layouter. Floats gör att byggblocken flyter fritt antingen åt höger eller vänster. Idén med floats var från början att du skulle kunna lägga bilder höger eller vänster-justerat och låta texten flyta runt. Under många år var floats det absolut vanligaste sättet att skapa webblayouter. Oftast blev det väldigt komplext och med många undantag för att få innehållet responsivt.

För att flyta något till höger sätter du CSS-propertyn float: right på ett byggblock. Elementet lyfts då ut från det vanliga vänster-till-höger-flödet och flyter istället längst bort till höger mot sin behållare. Det svåra är att element runt omkring oftast påverkas och ibland kan det kännas helt obegripligt.

Precis nedanför våra flytande element kan vi återställa ordningen med CSS-propertyn clear:both;. Då skapas ett radbryt ner till elementet och allt nedanför hanteras som vanligt igen.

Anledningen till att lära sig förstå floats är idag för att många befintliga system är designade kring den tekniken. De kräver en del tålamod och övning. Det finns en väldigt bra genomgång på CSS-Tricks.


Övning 8 – Webblayouter

Fokusera på Flexbox, därefter Grids. Sedan kan du göra de andra teknikerna efter det om du vill. 

Du kan utgå från exempel på vår GitHub.

Flexbox

Börja med övningen Flexbox Froggy.

Experimentera med Flexbox. Skapa följande layout. Se till så den funkar bra både för mobil och dator. Vill du experimentera testa gärna att lägga till fler kolumner och fyll på med data.

Återskapa följande Flexbox-layout

Grids

Experimentera med Grids. Skapa en layout. Testa för både mobil och dator.

Display

  • Placera fem små bilder (max 100 x 100 px) på en HTML-sida. Bilderna lägger sig från vänster till höger på sidan. De byter inte rad förrän raden är full.
  • Placera fem rubriker på en HTML-sida. De fylls på uppifrån och ner. Även om rubrikerna borde få plats bryter de alltid rad.
  • Utforska i Chrome debuggern vilka element som är display: block; och vilka som är display: inline;.
  • Testa att ändra bilderna till display: block; och rubrikerna till display: inline;. Vad händer? Experimentera! Jämför också display: inline-block; 🙂

Floats

Skapa följande mobilanpassade webblayout. Använd float:left på <nav> & <article>.

  • Testa din layout genom att ändra storlek på webblasarfönstret. När du har en liten (mindre än ca 500 px bred) skärm får du en kolumn. Annars växer den till två.
  • Extrauppgiften när du är färdig är att göra två kolumner i sidfoten. Den ena med kontaktuppgifter och i den andra kan du lägga in valfritt innehåll.

9 – Media queries

Fram tills nyligen, när Flexbox och Grids (se tidigare kapitel) blev standard-verktygen för att bygga layouter, behövde man göra flera olika layouter efter hur mycket skärm-bredd som fanns tillgängligt.

Tillexempel gjorde man en variant för skärmar upp till 480px, en för 768px, en för 992px och en för ännu bredare.

Detta upplägget är fortfarande väldigt vanligt och det funkar ganska bra. Det största problemet är att nya enheter får nya skärmar med andra upplösningar. Tex är ju upplösningen på en ny Retina-skärm mycket högre än tidigare vanliga datorskärmar.

En bra strategi för layouter är att använda Flexbox och Grids och sedan ev. mindre justeringar via Media Queries. Tex kanske typsnitt behöver justeras i storlek vid mindre skärmar. Det går att göra på andra sätt men Media Queries funkar.

Du kanske också gör en utskriftsvänlig layout där du lägger till addresser till klickbara länkar inom parentes efteråt. Du kanske också tar bort bakgrunder och justerar bredder mot papper istället för mot skärm.

Mitt förslag är att ni börjar jobba på mobil-varianten. När den är klar skalar ni sedan upp kolumnerna för datorvarianten till ni är nöjda.

Du jobbar med något som heter Media Queries. Följande exempel visar hur vi gör ändringar på layouten när bredden blir minst 768 px. Man brukar sätta gränsvärden till 480, 786 och 992 px. Dessa olika bredder är bara ungefärliga och ändrar sig hela tiden i takt med att skärmar får bättre upplösningar.

Du börjar med din vanliga CSS och sedan lägger du till följande rader längst ner. Här i gör du dina ändringar för de olika bredderna.

@media screen and (min-width: 480px) {
body {
background-color: blue;
}
h1 {
font-size: 14px;
}
}

@media screen and (min-width: 768px) {
body {
background-color: red;
}
}

@media screen and (min-width: 992px) {}

Utskrift

Ibland vill du kunna kontrollera vad på en hemsida som visas när du skriver ut den. Några vanliga justeringar är att dölja menyer och kontaktformulär eller att ändra storlek på kolumner och typsnitt.

Man kan också vilja ändra färger. Webbläsaren hjälper oftast automatiskt dig att justera så du inte skriver ut svart bakgrund med vit text men det kan ändå vara värt att justera färger manuellt också. Ljusgrå text på vitt papper är ofta för svårt att läsa.

Alla ändringarna för en utskriftsvänlig sida görs i CSS. Tänk dig utskriften som en vy på din sida. Du arbetar med Media Queries här också.

@media print {
nav,
aside {
display:none;
}

article {
width: 100%;
}

body {
background-color: white;
color: black;
}

a:after{
content:" (" attr(href) ") ";
}
}

När du sitter och jobbar med din print-css kan du börja med att testa mot förhandsgranskningen i webbläsaren. Välj skriv ut och titta hur det ser ut.

Övning 9 – Media queries

  • Gör ett ny hemsida med några rubriker och stycke. Ändra bakgrundsfärg, färg och text-storlekar som ändras efter hur stort webbläsar-fönstret är. Behöver du hjälp finns ett enkelt färg-exempel bland exempelfilerna.
  • Lägg till en vy för utskrifter. Förhandsgranska för att se resultatet.
  • Experimentera och justera lite för både olika storlekar och olika utskrift.
  • Det finns även ett layout-exempel där Media Queries används för att ändra kolumner osv. Nu använder vi helst Flexbox eller Grids för att göra layouter.