Introduktion till webbutveckling HT12: föreläsning 2

Introduktion till webbutveckling F2: HTML

Idag (Kort praktisk info) Grundläggande byggstenar i HTML HTML som
standard Spara och publicera webbdokument

Labbgrupper publicerade (grupp 1: efternamn A-K, grupp 2: efternamn L-Ö)
Salar för 11/9: Grupp 1: C119, Grupp 2: C121 Ny på programmet? Fråga i pausen om något är osäkert!

Andrea Resmini Gästföreläsning Ons 12/9, 14:30. U305.

http://www.ﬂickr.com/photos/adactio/6800969243/

Webbsidans tre lager Innehåll HTML CSS JavaScript

innehåll + syntax + semantik HTML

En webbsida Webbsida Vad webbläsaren visar genom att rendera ett
HTML-dokument HTML-dokument Innehåll uppmärkt enligt HTML HTML-fil Ett HTML-dokument sparat i en textfil.

Ett HTML-dokument En serie nästlade element vars ordning avgör strukturen
och vars typ och egenskaper beskriver innehållet Kan representeras med ett dokumentträd

Vad är ett element? Komponent med vilka HTML-dokument är uppbyggda.
Är av en viss typ (elementets namn). Kan ha egenskaper (attribut) och/ eller innehåll Definieras med ”taggar”. Ex: <h1>Huvudrubrik</h1>

<abbr title="Malmö högskola">Mah</abbr> Strukturkod (elementnamn) Attribut med värde Strukturkod Innehåll
Starttagg Sluttagg

Typsik dokumentstruktur <html> - rotelementet <head> - dokumenthuvud, för data
om dokumentet <title> - dokumenttitel <body> - för innehåll i dokumentet

Typsik dokumentstruktur http://www.ﬂickr.com/photos/daniello/422213306/ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mitt
dokument</title> </head> <body>  </body> </html>

Dokumentträdet http://reference.sitepoint.com/html/page-structure

DOM https:/ / addons.mozilla.org/sv- SE/firefox/addon/6622/

Exempel (Enkelt HTML- dokument.)

innehåll + syntax + struktur + strikta regler HTML

Formell beskrivning a dokumentstruktur Dokument deklarerar vilken DTD som används
…och förväntas upprätthålla reglerna i denna DTD (validera) Document Type Definition

DTD Vem som helst kan skapa en DTD, men webbens
standarder administreras av W3C. En DTD kan beskriva dokumentstrukturen för alla SGML- baserade språk, som HTML & XML. En DTD är inte trivial att läsa.

Recommended DTDs to use in your Web document http://www.w3.org/QA/2002/04/valid-dtd-list.html

Vilka element kan användas?

Svar 1: Något referensverk Developing with Web Standards http://reference.sitepoint.com/html http://dev.opera.com/articles/view/1-
introduction-to-the-web-standards- cur/#toc

Svar 2: Språkets specifikation

HTML 4.01 Strict HTML 4.01 Transitional XHTML 1.0 Strict XHTML
1.0 Transitional XHTML 1.1 XHTML 2 HTML5

XML • eXtensible Markup Language • Utbyggbar och förenklad efterträdare
till SGML • Man är (i princip) fri att välja namn på element

<?xml version="1.0" encoding="iso-‐8859-‐1"?> <boksamling> <bok sprak="engelska">
<titel>XSLT Cookbook</titel> <forfattare>Sal Mangano</forfattare> </bok> <bok sprak="svenska"> <titel>Skriv med XML</titel> <forfattare>Åsa Blom</forfattare> </bok> </boksamling> http://sv.wikipedia.org/wiki/XML#Syntax

XHTML • Omformulering av HTML i XML. • Syntaxregler från
XML, element och strukturregler från HTML. • XHTML 1.1 har rekommendationsstatus, men XHTML 1.0 är vanligare.

Skillnad? • Dokument följer samma struktur; använder samma element. •
Det går att vara lika strikt med HTML. • Den utökade funktionalitet som XML ger har dåligt webbläsarstöd.

Framtid? • 2 juli 2009 meddelade W3C att arbetsgruppen för
XHTML2 inte ﬁck förnyat uppdrag. • XML används ”överallt”, men framtiden för XHTML är oviss • ...men 1.0 är standard i många system.

HTML5 <!DOCTYPE html> While the HTML syntax described in this
speciﬁcation bears a close resemblance to SGML and XML, it is a separate language with its own parsing rules. http://dev.w3.org/html5/spec/single-page.html

HTML5 • Inte baserat på SGML, men bakåtkompatibelt. • Kan
skrivas med HTML-syntax eller XML-syntax. Se även: http://www.w3.org/QA/2008/01/html5-is-html-and-xml.html • Innehåller många nya element för att beskriva innehåll och struktur: • <article>, <ﬁgure>, <nav>, <audio>, <video>, … <!DOCTYPE html>

HTML 4.01 Strict HTML 4.01 Transitional XHTML 1.0 Strict XHTML
1.0 Transitional XHTML 1.1 XHTML 2 HTML5

Har jag skrivit rätt? W3C tillgängliggör en tjänst som kontrollerar
om ett dokument är giltigt enligt använd standard. http://validator.w3.org/ Vissa verktyg har inbyggd funktionalitet för att göra samma kontroll.

Webbpublicering

Ev. demo av webshare

Teckenkodning

Teckenkodning • Regler för hur symboler (tecken) ska representeras [av
en dator]. • ”Teckenuppsättning” är synonymt inom HTTP (och därmed HTML). • En vanlig teckenkodning är ASCII, med stöd för 128 tecken, inkl engelska alfabetet.

http:/ /www.jimprice.com/ascii-0-127 .gif

( http://joeyh.name/blog/entry/unicode_eye_chart/ )

Teckenkodning • Webbserverns ansvarar för att ”berätta” vilken typ av
innehåll som skickas. • Detta innefattar vilken teckenkodning. • Många gånger påverka webbserverns inställningar. • Ett HTML-dokument bör speciﬁcera med vilken teckenuppsättning det är sparat.

Så, ”helt enkelt”: 1.Välj teckenkodning att spara HTML-dokumentet med. 2.Ange
samma teckenkodning i HTML-dokumentet.

Om labb 1

Att läsa • Developing with Web Standards kap. 1-3 •
Introduktionsartiklarna länkade i labb 1

Introduktion till webbutveckling HT12: föreläsn...

Introduktion till webbutveckling HT12: föreläsning 2

More Decks by Fredrik Ohlin

Other Decks in Technology

Featured

Transcript