Introduktion till
HTML CSS och
Montathar Faraon
Lars Holmberg
Kopieringsförbud Detta verk är skyddat av upphovsrättslagen. Kopiering, utöver lärares och studenters begränsade rätt att kopiera för undervisningsändamål enligt Bonus Copyright Access kopieringsavtal, är förbjuden. För information om avtalet hänvisas till utbildningsanordnarens huvudman eller Bonus Copyright Access. Vid utgivning av detta verk som e-bok, är e-boken kopieringsskyddad. Den som bryter mot lagen om upphovsrätt kan åtalas av allmän åklagare och dömas till böter eller fängelse i upp till två år samt bli skyldig att erlägga ersättning till upphovsman eller rättsinnehavare. Studentlitteratur har både digital och traditionell bokutgivning. Studentlitteraturs trycksaker är miljöanpassade, både när det gäller papper och tryckprocess.
Art.nr 37255 ISBN 978-91-44-08745-0 Upplaga 1:1 © Författarna och Studentlitteratur 2022 studentlitteratur.se Studentlitteratur AB, Lund Sakgranskning: Jenny Folkesson och Pierre Wijkman Formgivning omslag: Victor Villavicencio Omslagsbild: Freepik.com Inledande kapitelbilder: Shutterstock Illustrationer: Montathar Faraon. Ikoner från Font-Awesome Printed by Interak, Poland 2022
Till Maja R. och Robert F.
INNEHÅLL
Förord 15
KAPITEL 1
1.1 1.2 1.3 1.4 1.5
Användningsområden 20 Historik 20 Utvecklingsmiljö 22 Struktur och design 24 Övningar 25
KAPITEL 2
2.1
2.2
2.3 2.4 2.5
Introduktion till HTML 17
Konventioner för webbutveckling 27
Webbadresser 28 2.1.1 Protokoll 28 2.1.2 Domännamn 28 2.1.3 Mappar och filer 29 Namngivning av filer och mappar 29 2.2.1 Naturligt språk och engelska 29 2.2.2 Gemener 30 2.2.3 Tillåtna och otillåtna tecken 31 2.2.4 Mellanslag och understreck 31 2.2.5 Standardiserade filändelser 32 2.2.6 Prefix och suffix 33 2.2.7 Konventionella namn 33 Indentering 34 Kommentarer 36 Övningar 37
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
5
innehåll KAPITEL 3
3.1 3.2 3.3 3.4
Element 42 Taggar 44 Attribut 45 Övningar 46
KAPITEL 4
4.1 4.2 4.3 4.4 4.5 4.6
6
Semantisk uppmärkning 59
Historik 60 Semantik inom webbutveckling 61 Sidhuvud <header> 63 Navigation <nav> 66 Huvudinnehåll <main> 69 Artikel <article> 70 Sektion <section> 72 Sidoinnehåll <aside> 75 Sidfot <footer> 78 Övningar 82
KAPITEL 6
6.1 6.2 6.3 6.4 6.5 6.6
Dokumentstruktur 49
Grundläggande struktur 50 Dokumenttyp <!DOCTYPE> 52 Rotelement <html> 52 Dokumenthuvud <head> 53 Dokumentkropp <body> 55 Övningar 56
KAPITEL 5
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10
Terminologi och syntax 41
Text 85
Text inom webbutveckling 86 Rubriker <h1>–<h6> 86 Stycken <p> 88 Radbrytningar <br> 89 Initialismer, akronymer och förkortningar <abbr> 90 Ord 91 © F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
innehåll
6.7
6.6.1 Alternativt uttal eller humör <i> 91 6.6.2 Icke-textuell feedback <u> 92 6.6.3 Utan särskild betydelse <b> 93 6.6.4 Betoning <em> 94 6.6.5 Betydelsefull <strong> 95 6.6.6 Genomstruken <s> 96 6.6.7 Raderad <del> och infogad <ins> 97 Övningar 98
KAPITEL 7
7.1
7.2 7.3 7.4 7.5
Interna länkar 103 7.1.1 Rotrelativ 103 7.1.2 Relativ 104 7.1.3 Ankare 107 Externa länkar 109 E-postlänkar 109 Bildlänkar 110 Övningar 111
KAPITEL 8
8.1 8.2 8.3
8.4
8.5 8.6
8.7
Länkar 101
Bilder och figurer 113
Bildtjänster 114 Upplösning 114 Format 116 8.3.1 JPEG 116 8.3.2 GIF 117 8.3.3 PNG 118 8.3.4 SVG 119 Lägga till bilder 120 8.4.1 Alt-attributet 121 8.4.2 Bredd och höjd 122 Omskalning och beskärning 123 Figurer 123 8.6.1 Figur <figure> 123 8.6.2 Figurtext <figcaption> 124 Övningar 126
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
7
innehåll KAPITEL 9
9.1 9.2 9.3 9.4
Sorterade listor <ol> 130 Osorterade listor <ul> 132 Beskrivningslistor <dl> 134 Övningar 135
KAPITEL 10
10.1
10.2 10.3 10.4
11.4
11.5
11.6
11.7 8
Tabeller 137
Struktur 138 10.1.1 Beskrivning <caption> 140 10.1.2 Rader <tr> 140 10.1.3 Rubriker <th> och celler <td> 141 Sammanfogning av rader och kolumner 142 Gruppering av innehåll 145 Övningar 147
KAPITEL 11
11.1 11.2 11.3
Listor 129
Formulär 149
Formulärelement 150 Skapa formulär <form> 152 Lägga till text <input> 153 11.3.1 Enkelradiga textrutor 153 11.3.2 Lösenord 154 11.3.3 E-post, telefonnummer och webbadresser 154 11.3.4 Flerradiga textrutor <textarea> 156 Göra val 157 11.4.1 Radioknappar 157 11.4.2 Kryssrutor 158 11.4.3 Rullgardinsmenyer <select> 159 Knappar och filuppladdning 161 11.5.1 Knappar <input> 161 11.5.2 Knappar <button> 162 11.5.3 Filuppladdning 163 Övrigt 164 11.6.1 Datum och tid 164 11.6.2 Gruppera formulärfält 165 Övningar 167 © F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
innehåll KAPITEL 12
12.1 12.2 12.3 12.4 12.5
Video- och ljudformat 170 Video <video> 171 Ljud <audio> 172 Inbäddad extern media <object> 173 Övningar 173
KAPITEL 13
13.1 13.2 13.3
13.4
14.5
14.6
Introduktion till CSS 175
Stilsättning 176 Historik 177 Stilmallar 180 13.3.1 Extern 181 13.3.2 Intern 181 13.3.3 Inbäddad 182 Övningar 183
KAPITEL 14
14.1 14.2 14.3 14.4
Media 169
Terminologi och syntax 185
Indentering 186 Kommentarer 186 Regler 188 Selektorer 190 14.4.1 Universell selektor 190 14.4.2 Typselektor 191 14.4.3 Klasselektor 192 14.4.4 Id-selektor 194 14.4.5 Attributselektor 195 14.4.6 Barnselektor 196 14.4.7 Syskonselektor 197 14.4.8 Pseudo-klasser 198 Kaskad 203 14.5.1 Specificitet 203 14.5.2 Ordning 204 14.5.3 Viktigt 205 Övningar 205
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
9
innehåll KAPITEL 15
15.1 15.2 15.3 15.4 15.5 15.6
Pixlar (px) 210 Procent (%) 211 em 213 rem 214 Visningsyta (vh/vw) 216 Övningar 218
KAPITEL 16
16.1 16.2 16.3 16.4 16.5 16.6
16.7 16.8 16.9
16.10 16.11
10
Boxmodellen 221
Översikt 222 Marginal och utfyllnad 222 Kantlinje 224 Höjd och bredd 226 Standard och alternativ boxmodell 227 Inline, block och inline-block 229 16.6.1 Inline 231 16.6.2 Block 232 16.6.3 Inline-block 233 Float 235 Clear 238 Positionering 241 16.9.1 Relativ 242 16.9.2 Absolut 243 16.9.3 Fixerad 245 16.9.4 Klistrad 247 z-index 249 Övningar 252
KAPITEL 17
17.1 17.2
Enheter 209
Layout 255
Översikt 256 Grid 260 17.2.1 Rader och kolumner 261 17.2.2 Enheten fraktion (fr) 263 17.2.3 Utrymme mellan rader och kolumner 264 © F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
innehåll
17.3
17.4
17.2.4 Layout av rader och kolumner 265 Flexbox 269 17.3.1 Positionering 270 17.3.2 Riktning 276 17.3.3 Ordning 280 17.3.4 Storlek 282 Övningar 286
KAPITEL 18
18.1 18.2 18.3 18.4
18.5 18.6
18.7
Färgsättning 290 Färgnamn 290 RGB 291 HSL 293 18.4.1 Nyans 294 18.4.2 Mättnad 295 18.4.3 Ljushet 295 HEX 297 Genomskinlighet 298 18.6.1 RGBa 299 18.6.2 HSLa 301 Övningar 302
KAPITEL 19
19.1
19.2 19.3 19.4
Färger 289
Bakgrund 303
Bakgrundsbild 304 19.1.1 Position 306 19.1.2 Storlek 309 19.1.3 Upprepning 310 19.1.4 Fästpunkt 311 Bakgrundsfärg 312 Förkortning av bakgrund 312 Övningar 313
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
11
innehåll KAPITEL 20
20.1 20.2
20.3
20.4 20.5
Stilsättning 316 Val av typsnitt 317 20.2.1 Systembaserade 317 20.2.2 Webbaserade 318 20.2.3 Tjänstebaserade 319 Tillämpning av typsnitt 320 20.3.1 Färg 320 20.3.2 Familj 320 20.3.3 Storlek 321 20.3.4 Tjocklek 321 20.3.5 Stil 324 20.3.6 Variant 326 Förkortning av typsnitt 328 Övningar 328
KAPITEL 21
21.1 21.2 21.3 21.4
21.5
21.6
12
Formatering av text 331
Indentering 332 Gemener och versaler 333 Dekoration 335 Avstånd 336 21.4.1 Bokstäver och ord 336 21.4.2 Rader 338 Justering 340 21.5.1 Horisontell 340 21.5.2 Vertikal 342 Övningar 344
KAPITEL 22
22.1 22.2 22.3 22.4 22.5
Typsnitt 315
Stilsättning av länkar 347
Ej besökta 348 Besökta 349 Svävande 351 Klickade 352 Övningar 353 © F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
innehåll KAPITEL 23
23.1
23.2 23.3 23.4
Listor, tabeller och formulär 355
Listor 356 23.1.1 Listtyp 356 23.1.2 Listbild 357 23.1.3 Listposition 359 Tabeller 361 Formulär 364 Övningar 368
Sakregister 369
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
13
FÖRORD
You must find the courage to leave the table if respect is no longer being served. Tene Edwards
Varje dag använder människor webben för att kommunicera via sociala nätverk, söka efter information, skicka e-post och läsa nyheter. Dessa aktiviteter är möjliga tack vare HTML och CSS. Den förstnämnda skapar webbsidornas struktur och den senare styr hur dessa ska se ut. Det finns många böcker som behandlar ovanstående tekniker, ofta skrivna ur ett tekniskt perspektiv eller otydliga vad gäller aktuell praxis i webbutveckling. I vår roll som universitetslärare upplever vi att kurslitteratur ofta är utspridd och osammanhängande. Målet med denna bok är att på ett sammanhållet sätt presentera och förklara webbutveckling med kodexempel i färg, tydliga figurer och praktiska övningar. Boken vägleder läsaren genom att ge användbara tips kring kodverktyg och webbresurser, samt erbjuda en webbplats med lösningsförslag till övningarna. Förhoppningen är att boken ska ge en grundläggande förståelse för begränsningar och möjligheter i den digitala världen. Vår önskan är att boken blir en värdefull del i din utbildning och en användbar referens i framtiden. Det är många som har bidragit med feedback under skrivprocessen. Ett stort tack till fackgranskarna Jenny Folkesson och Pierre Wijkman för era värdefulla kommentarer som onekligen har stärkt bokens kvalitet. Följande ska ha ett tack för sitt engagemang: Mikael Wiberg, Caroline Lövqvist, Mia Höök, Christopher Johansson, Helena Palm och Salmin Skenderovic. Vidare vill vi rikta ett varmt tack till Victor Villavicencio för arbetet med omslaget. Ett särskilt tack till Jens Fredholm och Eva Broberg på Studentlitteratur för deras stöd med sammanställning av boken. Malmö i maj 2022 Montathar Faraon
Lars Holmberg
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
15
KAPITEL 1
Introduktion till HTML
1 introduktion till html
Den första halvan av boken presenterar HyperText Markup Language (HTML) som används för att strukturera webbsidor. Den andra halvan behandlar Cascading Style Sheets (CSS) som används för att designa webbsidor. HTML kan beskrivas enligt följande: H
Hyper innebär att en text är icke-linjär. Begreppet hyper refererar till att texten är förbunden med andra texter via länkar, det vill säga det är möjligt att koppla ihop olika texter.
T
Text är tecken, symboler och siffror som kombineras för att bilda ord och meningar.
M
Markup betyder att ett innehåll kan struktureras med så kallade HTML-element så att till exempel vissa ord blir klickbara som länkar.
L
Language innebär att HTML är ett språk skapat för datorer. Både när det gäller naturliga språk och datorspråk skiljer man på syntax och semantik; syntax är skrivregler och semantik är betydelse. Datorspråk utmärks av att de i regel har en mycket strikt syntax, vilket betyder att programmet inte fungerar om man glömmer, till exempel, ett snedstreck. Semantiken, det vill säga betydelsen eller det budskap som ska förmedlas eller vad programmet ska göra, definieras däremot av den som skapar ett program eller en webbsida.
HTML används för att strukturera innehåll som exempelvis text, bilder och annan media med så kallade element. CSS används för design och anger hur en webbsida ska se ut rent grafiskt. En webbläsare läser in HTML- och CSS-kod från en webbserver och skapar webbsidans utseende genom att tolka respektive kod. Figur 1.1 visar förloppet vid anrop av en HTML-fil. Tips!
HTML är inte ett programmeringsspråk utan ett uppmärkningsspråk som används för uppmärkning av innehåll. Ett programmeringsspråk kan hantera en process som exempelvis tar emot information från en användare, manipulerar denna och skickar tillbaka ett resultat.
18
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
1 introduktion till html
Webbsidan begärs av en användare
Webbläsaren tolkar och visar webbsidan
Webbsidan hämtas
1
5
3
Dator
Webbsidan skickas till datorn
4
Förfrågan efter en webbsida skickas till en webbserver
2
Webbserver
Händelseförloppet vid anrop av en HTML-fil. En webbläsare (1) skickar en förfrågan via internet (2) till en webbserver och begär en HTML-fil (3). Webbservern hämtar filen i systemet och skickar den till en webbläsare (4). Webbläsaren tar emot HTML-filen, tolkar och skapar webbsidan. Den skapade webbsidan visas i ett webbläsarfönster (5). FIGUR 1.1
Studera följande kodexempel i HTML som skriver ut texten ”Jag testar HTML” i en webbläsare: Kodexempel 1 1 2 3 4 5 6 7 8 9 10
HTML
< !DOCTYPE html > < html lang = " sv " > < head > < meta charset = " utf-8 " > < title >Introduktion till HTML och CSS</ title > </ head > < body > <p >Jag testar HTML</ p > </ body > </ html >
En webbläsare har som syfte att tolka den semantiska strukturen på en webbsida och sedan presentera innehållet för en besökare. För att hämta en webbsida från en webbserver behövs en så kallad URL (Uniform Resource Locator) som anges i adressfältet i en webbläsare. En URL är en unik adress som pekar till en resurs på internet, exempelvis en webbplats (https://www.google.com), en undersida på en webbplats, en bild eller annan fil på en webbplats, se vidare avsnitt 2.1. © F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
19
1 introduktion till html
1.1 Användningsområden HTML är ett uppmärkningsspråk med en öppen standard för utveckling av webbsidor. Webbsidor är det huvudsakliga användningsområdet för HTML. Vid utveckling av webbsidor används HTML för att semantiskt märka upp innehåll med hjälp av element, exempelvis <img> (eng. image) för bilder. Element används för att märka upp rubriker, stycken, listor och länkar, men även för att tilldela webbsidor specifika inställningar, som exempelvis språk och teckenkodning. Många webbsidor utvecklas utifrån responsiv webbdesign, det vill säga att layouten för en webbsida anpassas till den skärmstorlek och skärmupplösning som en besökare har. HTML används också för att strukturera och stilsätta e-postmeddelanden.
1.2 Historik Idén till HTML utvecklades 1989 av fysikern Tim Berners-Lee vid CERN, det europeiska laboratoriet för partikelfysik i Genève, Schweiz. Forskning inom partikelfysik involverar samarbete mellan olika institut världen över. Berners-Lee fick idén att möjliggöra för forskare från olika håll i världen att organisera och sammanföra information. I slutet av 1990 publicerade Berners-Lee specifikationen för HTML samtidigt som han programmerade en webbläsare och en webbserver som kunde kommunicera med varandra. Den HTML som skapades baserades till stor del på Standard Generalized Markup Language (SGML), en internationellt accepterad metod för uppmärkning av texten i strukturerade enheter som till exempel stycken, rubriker, listor och så vidare. Att basera HTML på en redan existerande standard visade sig vara en utmärkt idé och bättre än att skapa ett nytt språk från grunden. Den första specifikationen publicerades på nätet i september 1991 och fick namnet ”HTML Tags”. Eftersom Berners-Lee hade en forskningsbakgrund var det naturligt för honom att bjuda in andra till diskussion. Under september 1991 skapade han ett elektroniskt diskussionsforum där akademiker och forskare började engagera sig för att utbyta idéer kring HTML. Under 1992 tog utvecklingen fart tack vare att Joseph Hardin och Dave Thompson fick upp ögonen för tekniken som Berners-Lee hade skapat. Vid denna tidpunkt var båda anställda på National Center for Supercomputer Applications (NCSA), ett forskningsinstitut vid universitetet ChampaignUrbana i delstaten Illinois, USA. De lyckades koppla upp sig mot CERN och 20
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
1 introduktion till html
ladda ner gratisversioner av två webbläsare. Efter att ha tagit del av dessa bestämde de sig för att skapa en egen, vilket resulterade i webbläsaren Mosaic. Under samma år pågick en diskussion kring hur bilder skulle infogas på webbsidor men man lyckades inte fatta något enhetligt beslut. Det var i december 1992 som Marc Andreessen, en programmerare från NCSA som också arbetade med Mosaic, föreslog att man skulle använda sig av taggen <img>. Det fanns dock vissa motstridigheter kring användningen av <img> men med tiden blev den accepterad som en del i HTML. I april 1993 släpptes den första versionen av webbläsaren Mosaic. Den byggde på HTML-specifikationen som Berners-Lee hade utvecklat. Webbläsaren fick emellertid inte genomslag på grund av att många större företag, som exempelvis Hewlett-Packard, var skeptiska till att man kunde generera ekonomiska vinster via internet. Först i maj 1994 fick fler upp ögonen för HTML genom den första World Wide Web-konferensen i Genève, Schweiz. Specifikationen för HTML 2 kom redan i juli 1994 och i slutet av året bestämde sig Marc Andreessen för att lämna NCSA för att tillsammans med entreprenören Jim Clark skapa företaget Mosaic Communications som senare blev Netscape Communications Corp. Företaget lanserade webbläsaren Netscape som genast blev en framgång på marknaden. De fick dock kritik för att uppfinna egna HTML-taggar utan att öppet diskutera dessa. Detta genererade starka reaktioner och kan ha varit motivet bakom utvecklingen av World Wide Web Consortium (W3C) i slutet av 1994. Syftet med W3C var att utveckla webben genom öppna standarder. Under 1995 publicerades ett utkast till HTML 3, webbläsaren Internet Explorer lanserades av Microsoft, och användningen av stilmallar (CSS) började diskuteras. Utvecklingen av HTML fortsatte med version 3.2 som släpptes i januari 1997 och i december samma år publicerades version 4.0 som erbjöds i tre olika varianter: • Strict (föråldrade element är förbjudna) • Traditional (föråldrade element är tillåtna) • Frameset (oftast bara element som är relaterade till ramar är tillåtna). I maj 2001 publicerade W3C sin rekommendation av HTML 4.01, vilken blev den dominerande versionen på internet under början av 2000-talet. Det var dock inte W3C som drev utvecklingen av HTML5 utan aktörer som Apple, Mozilla Foundation och Opera Software. Under 2004 bildade de till© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
21
1 introduktion till html
sammans arbetsgruppen Web Hypertext Application Technology Working Group (WHATWG) som en respons på den långsamma utvecklingen av webbstandarder. I samband med HTML 4.01 publicerades en striktare version av HTML som fick namnet Extensible HyperText Markup Language (XHTML) och baserades på språket Extensible Markup Language (XML). Exempel på skillnader mellan HTML och XHTML är att den senare kräver att alla element ska avslutas och skrivas med små bokstäver. I april 2007 föreslog Apple, Mozilla Foundation och Opera Software att W3C:s arbetsgrupp för HTML skulle anta WHATWG:s HTML5 som utgångspunkt för sitt arbete och döpa den framtida versionen till ”HTML5”. I maj 2007 godkände W3C:s arbetsgrupp för HTML detta förslag. Den 28 oktober 2014 blev HTML5 en W3C rekommendation och från 28 maj 2019 bedrivs utvecklingen av HTML som ett levande dokument, se figur 1.2 för en sammanfattning. En skillnad från tidigare versioner av HTML är att HTML5 fokuserar på att skapa en semantisk struktur och meningsfull information. Genom att märka upp vilket innehåll olika delar av en webbsida förväntas ha, blir det enklare för personer med talsyntes att tolka innehållet på en webbsida. Det blir också enklare att identifiera det centrala innehållet på en webbsida samt att lyfta ut delar av innehållet för att använda det utanför sitt sammanhang.
1.3 Utvecklingsmiljö Det finns en mängd programvaror som kan användas för att arbeta med HTML lokalt på en dator. Exempelvis finns följande för Windows, macOS och Linux: • • • • •
Atom – https://atom.io Sublime Text – https://sublimetext.com Visual Studio Code – https://code.visualstudio.com Komodo Edit – https://activestate.com/products/komodo-edit/ Aptana Studio – http://aptana.com
Det går även att arbeta webbaserat via en webbläsare med onlinetjänster som erbjuder en integrerad miljö för webbutveckling (eng. integrated development environment, IDE). I en sådan miljö går det att skriva och exekvera kod, skapa och hantera databaser, samt samarbeta med andra online. All funktionalitet är tillgänglig via en webbläsare utan att några programvaror behöver installeras. 22
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
1 introduktion till html
1991
HTML
Netscape
1994
1994
HTML 2 / W3C
Internet Explorer
1995
1995
HTML 3
Opera
1996
1996
CSS 1 / JavaScript
1997
HTML 4
1998
CSS 2
2000
XHTML 1
2005
AJAX
2006
XHTML 2 / jQuery
2010
Responsiv design
2014
HTML5
Firefox
2002
Safari
2003
Chrome
Edge
2008
2015
2019 FIGUR 1.2
HTML Living Standard
Tidslinje som visar viktiga milstolpar i utvecklingen av webben.
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
23
1 introduktion till html
Exempel på integrerade miljöer för webbutveckling (kräver registrering): • Codeanywhere – https://codeanywhere.com • AWS Cloud9 – https://aws.amazon.com/cloud9/ • GitPod – https://gitpod.io Exempel på tjänster för att experimentera med kod (kräver ingen registrering): • Codepen – https://codepen.io • JSFiddle – https://jsfiddle.net • CodeSandbox – https://codesandbox.io
Kodredigerare (koda här)
FIGUR 1.3
Webbläsare (visa här)
En kodredigerare och en webbläsare behövs för att komma i gång med HTML och CSS.
1.4 Struktur och design Utveckling av webbsidor kräver både HTML och CSS. Skillnaden mellan HTML och CSS kan beskrivas enligt följande: • HTML bestämmer strukturen på en webbsida, exempelvis genom att skapa innehåll som rubriker, stycken och listor. • CSS styr designen av en webbsida, exempelvis genom att justera typsnitt, färger och bakgrundsbilder. HTML-delen av en webbsida kan liknas vid ett hus och dess fasta struktur bestående av olika rum. Hur de olika rummen är möblerade och färgsatta motsvaras då av CSS-delen. CSS definierar hur innehållet ser ut, samt beskriver färg, storlek, position och form. 24
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
1 introduktion till html
Tips!
HTML bestämmer strukturen för ett innehåll medan CSS styr designen av en webbsida.
1.5 Övningar Syftet med dessa övningar är att ge en känsla för syntax i en HTML-fil, hur indentering används och hur korrekt HTML-kod skrivs. Lösningar till övningarna finns på följande länk: https://k3larra.github.io/htmlcss/. Övning 1.1: Skrivträning
Skapa en fil och döp den till index.html i en textredigerare. Använd till exempel Anteckningar (Windows), Textredigerare/TextEdit (Mac) eller Nano (Linux). Återskapa koden i kodexempel 1 från detta kapitel i vald textredigerare och spara filen lokalt på datorn. Dubbelklicka sedan på filen för att se hur den ser ut i en webbläsare. I och med att filnamnet slutar på .html förstår operativsystemet att det är en webbsida som ska öppnas i en webbläsare. Övning 1.2: W3C-kompatibilitet
Kontrollera att koden i övning 1.1 är syntaktiskt korrekt. Det görs exempelvis genom att kopiera och klistra in koden på följande adress: https://validator. w3.org. Gå till webbplatsen, välj fliken Validate by Direct Input och klistra sedan in koden. Rätta till eventuella fel lokalt i vald textredigerare så att koden blir validerad. Ladda om webbsidan i en webbläsare för att se ändringarna. Övning 1.3: Indentering
Att formatera kod är viktigt för att skapa en struktur och öka läsbarheten. Observera att kod läses många fler gånger än den skrivs. Kopiera valfri kod till https://www.freeformatter.com/html-formatter.html, jämför med ursprungskoden och rätta till koden om den inte ser likadan ut, samt ladda om webbsidan.
© F Ö R FAT TA R N A O C H S T U D E N T L I T T E R AT U R
25
Montathar Faraon, fil.dr i informationssamhället, undervisar i digital design vid Högskolan i Kristianstad och har stor erfarenhet av webbutveckling. Han är biträdande professor i informatik och forskar om samskapande medier, demokratiskt deltagande och sociokulturell pedagogik.
Lars Holmberg är doktorand på Malmö universitet och forskar inom maskinlärande och artificiell intelligens. Han har över 15 års erfarenhet av att undervisa i webbutveckling med fokus på användargränssnitt och användbarhet.
Introduktion till HTML och CSS Introduktion till HTML och CSS är avsedd att snabbt ge den kunskap som krävs för att utveckla webbsidor. Boken har mängder med exempel och övningar varvat med utförliga teoretiska delar. Den kan användas både för studier i ämnet eller som kurslitteratur vid högskola, yrkeshögskola eller i gymnasieskolan. Den fungerar också utmärkt som referens för att enkelt påminna sig exempelvis om en viss regel. Boken behandlar språken HTML och CSS. HTML bestämmer struktur för ett innehåll medan CSS styr design. Boken ger också introduktion och bakgrund till vad HTML och CSS är såväl som exempel på olika miljöer och verktyg som kan användas för att komma igång. ”En komplett guide till HTML och CSS för alla som enkelt och självständigt vill lära sig utveckla och designa webbsidor.” – Caroline Lövqvist, student i digital design vid Högskolan Kristianstad ”Boken inbjuder på ett pedagogiskt sätt till studier av HTML och CSS. En heltäckande introduktion, med både exempel och övningar. Varmt rekommenderad!” – Mikael Wiberg, professor i informatik vid Umeå universitet samt professor i interaktionsdesign vid Chalmers. ”En modern bok som praktiskt vägleder nybörjare och en gedigen referens för erfarna utvecklare.” – Salmin Skenderovic, Senior Software Engineer på Proofpoint Inc.
Art.nr 37255
studentlitteratur.se