Språk för webben introduk4on 4ll HTML

Storlek: px

Starta visningen från sidan:

Download "Språk för webben introduk4on 4ll HTML"

Ulla-Britt Berg
för 5 år sedan
Visningar:

1 Föreläsning i webbdesign Språk för webben introduk4on 4ll HTML Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 En webbsidas beståndsdelar Text (formaterad, strukturerad) Länkar Inkluderade medier (bilder, video, ljud) 2

3 HyperText Markup Language Hypertext = länkar, referenser Märker upp informa4onen (texten) för ap markera formatering, länkar och infogning av bilder HTML EP HTML- dokument innehåller text och koder för: formatering (rubriker, stycken, fets4l, tabeller, listor, ) referenser (bilder, länkar, etc) speciella tecken (åäö,, etc) 3

4 En webbsidas dokument Text + koder och referenser b.htm" 1.gif" a.htm" c.htm" 2.gif" Länkar 4ll andra webbsidor Referenser 4ll bilder (separata filer) 4

HTML- koder Koder (Taggar) Start- och slupaggar t.ex. <b>fets4l</b> Endast en tagg t.ex. <hr> APribut t.ex. <img src= bild.jpg > Specialtecken t.ex. för tecknet <tagg a=ribut= värde >.

5 HTML- koder Koder (Taggar) Start- och slupaggar t.ex. fets4l Endast en tagg t.ex. <hr> APribut t.ex. <img src= bild.jpg > Specialtecken t.ex. för tecknet <tagg a=ribut= värde >. </tagg> &tecken; Referenser (adresser) Fullständig URL (Uniform Resource Locator) t.ex. hpp://medieteknik.lnu.se/1me101/index.htm Rela4v adress t.ex. bilder/slop.jpg 5

6 Grundstruktur för HTML <html>" <head>" <title>sidans titel</title>" </head>" <body>" Texten som visas..." </body>" </html>" Sidans titel Texten som visas... 6

7 Adresser Fullständig URL (Uniform Resource Locator) Korrekt: refererar 4ll fil på nätet t.ex. hpp://w3.msi.vxu.se/mul4media/index.htm Fel: refererar 4ll fil på hårddisken t.ex. file:///c:hd/minawebbsidor/index.htm Rela4v adress Utgå från den fil där adressen ges t.ex.../../bilder/bild.jpg 7

8 RelaLva adresser Strukturera filerna i olika mappar, t.ex.: - olika områden i olika mappar - bilder i separata mappar w" Referens 4ll filen b.htm i w: b.htm a.htm" b.htm" x" y" Referens 4ll bilden 1.gif i y: y/1.gif a.htm" z" 1.gif" 2.gif" 3.gif" Referens 4ll bilden 1.gif i y:../y/1.gif 1.gif" 2.gif" 8

9 Exempel Program En editor för ap skriva kod En webläsare för ap se resultatet Demo av HTML Dokumentet index.htm skapas. <html>" <head>" <title>min" </head>" <body>" index.htm" ucd.htm" puzzle.jpg" user.jpg" usercenter" pics" 9

10 Versioner av HTML HTML 0 (1989) Endast text och enkel formatering, t.ex rubriknivåer och listor HTML 1 (1992) Möjligt ap infoga grafik i presenta4onen HTML 2.0 (1994) Den första officiella standarden fastställd av W3C HTML 3.0 (1995) Endast ep förslag som aldrig antogs av W3C Förslag på stöd för bl.a. tabeller och matema4ska symboler HTML 3.2 (1996) Tabeller, bakgrunds- och texmärger, text flödar runt bilder, etc. HTML 4.0 (1997) Ramar, s4lmallar, inkludering av script, matema4ska symboler, etc. HTML 4.01 (1999) RäPning av en del buggar XHTML 1.0 (2000) I stort sep detsamma som HTML 4.01, fast mer strikt XHTML Basic (2000) En minimal uppsäpning av XHTML. Används t.ex. för mobiltelefoner, handhållna datorer, etc. som inte stödjer XHTML fullt ut. XHTML 1.1 (2001) Modulariserad. Annars lik version 1.0. XHTML 2.0 (Working Drap 2005) Fler moduler. Arbetet med XHTML2 avbröts i juli HTML5 (Working Drap 2008) Utvecklingen påbörjades 2004 Första working drap i januari 2008 Ej ännu standard Sedan 1993 standardiseras HTML av W3C, World Wide Web ConsorLum, h=p:// 10

11 W3C:s standardiseringsprocess Working Drap Förslag publicerat för granskning. Candidate Recommenda4on Förslag som granskats och uppfyller arbetsgruppens tekniska krav. Publiceras för ap få in erfarenhet från implementering av förslaget. Proposed Recommenda4on Fullt utvecklad teknisk rapport som skickas 4ll W3C Advisory CommiPee för bekräpelse. W3C Recommenda4on Specifika4on eller riktlinjer som utgör en standard. W3C Process Document, hpp:// /tr 11

12 XHTML vs. HTML XHTML är striktare än HTML Koder måste skrivas med gemener, t.ex. <body> Alla koder måste avslutas med slutkod, t.ex. text med /, t.ex. <img src= bild.jpg /> APribut måste anges inom cita4onstecken, t.ex. <table border= 1 > </table> Koderna måste nästlas korrekt, t.ex. ej <4tle> </4tle> måste vara den första koden i head- delen. 12

13 Standard och validering Varför följa en standard? Tillverkarna av webbläsare gör egna 4llägg 4ll standarden T.ex. införs egna taggar eller apribut, men dessa fungerar opa endast i deras webbläsare Följ standard specificerad av W3C Större chans ap det fungerar i alla webbläsare och datormiljöer LäPare ap kombinera med CSS och JavaScript UnderläPar för sökop4mering och 4llgänglighet HTML5 är ingen standard Ganska långt utvecklat Webbläsarnas stöd stämmer ganska väl med förslaget i W3C:s arbetsdokument Validering av HTML- koden Kontroll för ap se ap koden följer språkets regler Se lab 2 för demo och exempel på validering 13

Relevanta dokument

Introducerande övningar i HTML

Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer