F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet

Storlek: px

Starta visningen från sidan:

Download "F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet"

Emil Andersson
för 7 år sedan
Visningar:

1 Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet

2 F02 HTML Dagens agenda doctype <html> <head> <body> taggar, element, attribut, värden teckenkodning HTML/XHTML Indentering Block/inline-element Struktur Grafisk/Logisk formatering Taggar

4 <!doctype html> <html lang="sv"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>

5 doctype <!doctype html> Det första som finns i dokumentet. Standard mode/quirks mode <!doctype html> <html lang="sv"> <head> <meta charset="utf-8 /> <title></title> </head> <body> </body> </html> Dokumenttypsdeklarationen för XHTML 1.1 ser ut så här: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

6 Hypertext Markup Language tagg <div id= container >Some text</div> element attribut This is an <em>example</em> text <div id= container >Some text</div> värde <div id= container >Some text</div>

7 <html> Attributet lang talar om vilket språk innehållet på sidan är skrivet på. <!doctype html> <html lang="sv"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>

8 <head> <title> - Sidans titel. Ska anges. <!doctype html> <html lang="sv"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <meta charset= > - Teckenkod som används. Använd: <meta charset= utf-8 > eller <meta charset= iso > </body> </html> Se demo

9 Att tänka på Filändelse:.html Undvik svenska tecken och specialtecken i filnamn Publicera på en webbserver (i kursen gh-pages ) Försök att ha en logisk filstruktur

10 URL En URL (Uniform Resource Locator) är en webbsidas adress på Internet. Om du publicerar på GitHub är din adress: Exempelvis givet: Användarnamn = xx222yy Repronamn = 1dv435-laborationer Sökväg = pages/kontakt.html

11 <body> Här skriver vi det som ska synas på sidan. <!doctype html> <html lang="sv"> <head> <meta charset="utf-8 /> <title></title> </head> <body> </body> </html>

12 HTML5 vs. XHTML <?xml version="1.0" encoding="utf-8"?> <!doctype html> <html lang="sv"> <head> <meta charset="utf-8 /> <title>en HTML5-sida</title> </head> <body> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="sv"> <head> <title>en XHTML-sida</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> </body> </html>

13 Indentering block <div> <img src= mypic.jpg /> <p> this is some <em>text</em> </p> <p>to show structure</p> </div> inline Det är alltid en god idé att indentera sin kod så att den är lätt att läsa.

14 block Inline-/blockelement inline Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia aliquet auctor. Morbi lacinia ultricies condimentum. Donec ut nisi at tellus aliquet adipiscing a vitae velit. Nunc mauris est, blandit ac consectetur at, mollis quis nunc. Ut at ante sit amet nisl volutpat cursus. Praesent feugiat turpis eget orci semper fringilla porta augue hendrerit. Proin interdum, turpis eget semper congue, purus metus dapibus nibh, vitae semper sapien tellus accumsan sapien. Morbi feugiat ultricies risus. I HTML5 har man en annan modell än block och inline, men denna sparar vi lite...

15 Struktur

16 Struktur Toppdel

17 Struktur Huvud Naviga7on

18 Struktur Huvud Innehåll Naviga7on

19 Struktur Huvud Innehåll Naviga7on

20 Struktur Huvud Innehåll Innehåll Naviga7on Del Del Del

21 Struktur Huvud block Naviga7on block block block block Innehåll Del Del Del block block block

22 Struktur <div id= header > <div id= navigation > <div id= content > <div id= banner > <div id= parts > <div> <div> <div>

23 Struktur <!doctype html> <html lang="sv"> <head> <meta charset="utf-8 /> <title></title> </head> <body> </body> </html> <div id= header >...</div> <div id= navigation >...</div> <div id= content > <div id= banner >...</div> <div id= parts > <div>...</div> <div>...</div> <div>...</div> </div> </div> HTML5 introducerar några nya semantiska taggar, exempelvis nav. Mer om detta senare <div id= header > <div id= navigation > <div id= content > <div id= banner > <div id= parts > <div> <div> <div>

24 Validering Se demo ok med varning om HTML5

25 Logisk/grafisk formatering Vi ska alltid sträva efter att låta vår HTML-kod stå för den logiska formateringen och låta CSS sköta grafisk formatering. Varför? Tillgänglighet Underhåll Utbyggbarhet Stöd för olika enheter SEO

26 Grafisk formatering <center>denna text är skriven med <b>grafisk formatering</b> </center> Denna text är skriven med grafisk formatering <body bgcolor="ffc0cb"> <big> <u> <s> Intenterar lite text <b> <i>

27 Logisk formatering Talar om en text betydelse snarare än dess grafiska utseende. Sidans semantik. <p>denna text är skriven med <strong>logisk formatering</strong> </p> b!= strong

28 Taggar <div id= container >Text</div>

29 Taggar. h1-h6 Rubriknivåer p Stycke ul, ol, dl Listor div, span Strukturelement  Kommentarer img Bilder audio, video Video och ljud a länkar table tabeller form formulär header, article Strukturtaggar HTML5 Se demo

30 Referenser developer.mozilla.org Bra resurs för HTML/CSS/JavaScript Utmärkt listning av element och attribut samt länkar till specifikationerna docs.webplatform.org/wiki/html Community-drivet initiativ för att utbilda på webben som en plattform. w3schools.org Använd inte. Har inget med W3C att göra. Läs mer på: w3fools.com

Relevanta dokument

F02 En första sida. Dagens agenda

F02 En första sida. Dagens agenda F02 En första sida Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML Indentering Block/inline-element Struktur Se demo #2