F02 En första sida Dagens agenda doctype <html> <head> <body> taggar, element, attribut, värden teckenkodning HTML/XHTML Indentering Block/inline-element Struktur Se demo #2
<!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> attribut element 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>
Utf-8 eller iso-8859-1? Välj utf-8 eller is0-8859-1 (aka ANSI eller Windows Codepage 1252) Notepad++ Tänk på att dokumentet måste skrivas i en editor som använder samma teckenuppsättning. Visual Studio Se demo #3 Aptana Studio
Att tänka på Webbsidorna sparas vanligen med filändelsen.html (.htm var vanligt förr) Försök att alltid använda gemener (små bokstäver) i filnamnen. HTML-filer kan sparas var som helst och visas i en webbläsare genom att öppna filen i denna. För att publicera filen på webben måste dock filen ligga på en webbserver. För att publicera en fil på skolans webbserver lägger du.html-filen i katalogen p:/www
URL En URL (Uniform Resource Locator) är en webbsidas adress på Internet. Genom att skriva in följande URL hittar du din personliga hemsida på LNU: http://homepage.lnu.se/student/xx222yy/default.htm
<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 Navigation
Struktur Huvud Innehåll Navigation
Struktur Huvud Innehåll Navigation
Struktur Huvud Innehåll Innehåll Navigation Del Del Del
Struktur Huvud block Navigation 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>