F02 En första sida. Dagens agenda

Storlek: px

Starta visningen från sidan:

Download "F02 En första sida. Dagens agenda"

Ingvar Lind
för 5 år sedan
Visningar:

1 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

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

3 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" "

4 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>

5 <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>

6 <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>

7 Utf-8 eller iso ? Välj utf-8 eller is (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

8 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

9 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:

10 <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>

11 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>

12 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.

13 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...

14 Struktur

15 Struktur Toppdel

16 Struktur Huvud Navigation

17 Struktur Huvud Innehåll Navigation

18 Struktur Huvud Innehåll Navigation

19 Struktur Huvud Innehåll Innehåll Navigation Del Del Del

20 Struktur Huvud block Navigation block block block block Innehåll Del Del Del block block block

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

22 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>

Relevanta dokument

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

F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet F02 HTML Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML