Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet
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
<!doctype html> <html lang="sv"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
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>
<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>
<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-8859-1 > </body> </html> Se demo
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
URL En URL (Uniform Resource Locator) är en webbsidas adress på Internet. Om du publicerar på GitHub är din adress: http://användarnamn.github.io/repronamn/sökväg Exempelvis givet: Användarnamn = xx222yy Repronamn = 1dv435-laborationer Sökväg = pages/kontakt.html http://xx222yy.github.io/1dv435-laborationer/pages/kontakt.html
<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>
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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv"> <head> <title>en XHTML-sida</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> </body> </html>
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.
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...
Struktur
Struktur Toppdel
Struktur Huvud Naviga7on
Struktur Huvud Innehåll Naviga7on
Struktur Huvud Innehåll Naviga7on
Struktur Huvud Innehåll Innehåll Naviga7on Del Del Del
Struktur Huvud block Naviga7on block block block block Innehåll Del Del Del block block block
Struktur <div id= header > <div id= navigation > <div id= content > <div id= banner > <div id= parts > <div> <div> <div>
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>
Validering http://validator.w3.org Se demo ok med varning om HTML5
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
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>
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
Taggar <div id= container >Text</div>
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
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