ht16 - da156a - introduktion till html
TRANSCRIPT
![Page 1: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/1.jpg)
HTMLIntroduktion till HyperText Markup Language
1
![Page 2: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/2.jpg)
Frågor innan vi börjar?
2
![Page 3: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/3.jpg)
Dagens föreläsning
• Repetition: HTML & Webbläsare• Repetition: Ett simpelt HTML-dokument• Metadata• Teckenkodning• Validera sin kod• Ett dokuments struktur – dokumentträdet• Länkar & bilder• Punktlistor
3
![Page 4: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/4.jpg)
RepetitionHTML, Webbläsare & Ett simpelt HTML-dokument
4
![Page 5: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/5.jpg)
Vad består en webbplats av?
JavaScript
CSS
HTML
Innehåll
Interaktivitet
Utformning
Struktur
Innehåll
5
![Page 6: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/6.jpg)
Praktiska färdigheter
http://joelglovier.com/img/wallpaper/power-3.jpg6
![Page 7: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/7.jpg)
Hur fungerar det?
Internet
Klient
Klient
Server
7
![Page 8: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/8.jpg)
Resultat
• En webbläsare visar oss en webbsida efter att ha renderat ett HTML-dokument
8
![Page 9: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/9.jpg)
Element?
• Det finns olika element som representerar olika innehåll, t.ex. rubriker, paragrafer, listor m.m.
• Grundprincipen är att det finns en start- och ett sluttagg. Det innehåll som finns mellan dessa taggar tilldelas elementets formatiering.
• Kan även ha attribut
9
![Page 10: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/10.jpg)
HTML som märkspråk
10
![Page 11: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/11.jpg)
Vad är ett element
• Komponent med vilka ett HTML-dokument är uppbyggda• Är av en viss typ (elementets namn)• Kan ha egenskaper (attribut) och/eller innehåll
• Definieras med taggar
11
![Page 12: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/12.jpg)
12
![Page 13: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/13.jpg)
Ett HTML-dokuments struktur
<!DOCTYPE HTML><html>
<head><meta charset=”utf-8”><title>Min sida</title>
</head> <body>
<!-- Här kommer innehåll som visas för användaren ligga --></body>
</html>
Element som ingår i ett HTML-dokument:- <html>, rotelementet- <head>, dokumenthuvud (info om dokumentet)- <title>, dokumentets titel- <body>, dokumentets innehåll
13
![Page 14: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/14.jpg)
Exempel på HTML-struktur
Text-editor Webbläsare
14
![Page 15: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/15.jpg)
HTML-dokumentet i helhet
15
![Page 16: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/16.jpg)
En webbsida
• Webbsida:- Vad webbläsaren visar genom att rendera ett HTML-dokument
• HTML-dokument:- Innehåll uppmärkt enligt HTML
• HTML-fil:- Ett HTML-dokument sparat i en text-fil
16
![Page 17: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/17.jpg)
Ett HTML-dokument
• En serie nästlade element• Vars ordning avgör strukturen• Och vars typ och egenskaper beskriver innehållet
• Kan representeras med ett dokumentträd
17
![Page 18: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/18.jpg)
HTML-dokument som träd
18
![Page 19: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/19.jpg)
19
![Page 20: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/20.jpg)
20
![Page 21: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/21.jpg)
HTML-dokumentet i helhet
21
![Page 22: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/22.jpg)
MetadataData om data
22
![Page 23: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/23.jpg)
Metadata
• Beskriver vilket innehåll som finns på HTML-sidan• Det kan vara saker som:
- Sidans titel- Vilken teckenkodning som används- Vilket språk sidan är på- Vilka författare som gjort sidan- Funktion & utseende på sidan
• Detta skrivs inom <head>-taggen och berör hela dokumentet.
23
![Page 24: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/24.jpg)
Metadata, exempel
24
![Page 25: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/25.jpg)
Regler & Standarder då?
25
![Page 26: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/26.jpg)
26
![Page 27: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/27.jpg)
27
![Page 28: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/28.jpg)
28
![Page 29: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/29.jpg)
29
![Page 30: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/30.jpg)
30
![Page 31: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/31.jpg)
31
![Page 32: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/32.jpg)
DemoEn hemsida! =)
32
![Page 33: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/33.jpg)
Mer om text<p>, <i>, <em>, <b>, <strong>
33
![Page 34: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/34.jpg)
Paragrafer: <p>
34
![Page 35: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/35.jpg)
Hur man inte ska göra
35
![Page 36: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/36.jpg)
Fetstilt: <strong>
36
![Page 37: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/37.jpg)
Kursivt: <em>
37
![Page 38: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/38.jpg)
<strong> vs. <b><em> vs. <i>
• <strong> & <em> används för hur en text/ett ord ska bli förstått, alltså ger semantik till texten/ordet.
• Detta visar sig t.ex. när en text läses upp av en webbläsare (t.ex. för blinda människor) då <strong> indikerar att det ska läggas tyngd på ordet/meningen & <em> indikerat att det ska läggar mer betoning på order/meningen.
• <b> & <i> används för att formge ett ord, så att det blir fetstilt/kursivt. Detta har hängt med sedan lång tid tillbaka, i de tidigare versionerna av HTML, då man formgav element genom HTML.
• Detta gör man numera genom CSS (vilket vi kommer att titta närmare på senare i kursen), vilket gör att <b>- och <i>-elementet tappat lite av sitt syfte.
38
![Page 39: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/39.jpg)
Länkar
39
![Page 40: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/40.jpg)
Sökvägar, hur länkar man till andra sidor (eller källor)?
40
![Page 41: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/41.jpg)
Relativa sökvägar
• En relativ sökväg innebär att man utgår från den plats som HTML-filen som man länkar från finns.
• Detta innebär att man inte behöver oroa sig över vilken URL (webbadress) som HTML-filen man länkar till har - bara man vet var den ligger i förhållandet till HTML-filen som man länkar från.
• Relativa sökvägar används när sidan man vill länka till ligger inom webbplatsen.
41
![Page 42: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/42.jpg)
Exempel relativa sökvägar (1)
• Vår filstruktur• Vi vill från filen ”index.html” länka till ”about.html”
42
![Page 43: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/43.jpg)
Exempel relativa sökvägar (2)
• Vår filstruktur• Vi vill från filen ”index.html” länka till ”about.html”
43
![Page 44: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/44.jpg)
Bilder: <img>
44
![Page 45: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/45.jpg)
Bilder: relativa och absoluta sökvägar
45
![Page 46: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/46.jpg)
Bilder: attributet ”alt”
• Om en bild inte kan visas – då vill vi berätta vad bilden föreställer!• En annan anledning att använda alt-attributet är att datorer som läser upp
webbsidor (t.ex. hjälpmedel för synskadade) är att de kan berätta att det finns en bild, samt genom alt-attributet vad denna bild föreställer. Detta kan bli ännu mer användbart om t.ex. bilden visar en graf där alt-attributet berättar om vad som visas på grafen.
46
![Page 47: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/47.jpg)
Listor: <ul>, <ol>, <li>
• En lista i HTML innebär alltid minst två element. Det första är antingen:
• <ul> (för en oordnad lista)• <ol> (för en ordnad lista).
• För att sedan lägga till punkter i listan användaren man elementet <li>
47
![Page 48: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/48.jpg)
Nästlade listor, ”listor i listor”
48
![Page 49: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/49.jpg)
DemoLänkar, bilder, listor
49
![Page 50: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/50.jpg)
Om salar på labben på fredaghttp://kronox.mah.se/setup/jsp/Schema.jsp?startDatum=idag&intervallTyp=m&intervallAntal=6&sprak=SV&sokMedAND=true&forklaringar=true&resurser=k.DA156A-20162-TS789-
50
![Page 51: HT16 - DA156A - Introduktion till HTML](https://reader030.vdocuments.site/reader030/viewer/2022020301/5872916c1a28ab36118b644f/html5/thumbnails/51.jpg)
Bra länkar
• http://www.w3schools.com/• https://developer.mozilla.org/en-US/docs/Web• http://reference.sitepoint.com/html
51