Internets innehåll
HTML,
SGML,
CSS,
XML,
XHTML,
MIME,
HTTP
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 1 av 27
Vad ska vi lära?
• Vad HTML är, var det kommer från och var vi hittar information
• Nästa generation av HTML: CSS, XHTML
• Beskrivning av internetdata: XML
• Hur internet hanterar olika typer av data (MIME)
• HTTP, intenetprotokoll, ställföreträdare (proxies)
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 2 av 27
HTML & SGML
• HyperText Markup Language
• Märkning:
– Traditionell användning: <b>editera text</b>
– Men också för korrektion, beskriva data och mycket annat
• Märkspråk har funnits länge:
– troff, nroff (för unix manualsidor), runoff
– TeX, LaTeX, utärkta för böcker, OH (dessa OH t.ex.)
– SGML, HTMLs ursprung, liknar XML. Både SGML och XML
beskriver data
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 3 av 27
SGML/XML-exempel
<email>
<sender>
<person>
<christianname>Serafim</christianname>
<familyname>Dahl</familyname>
</person>
</sender>
<reciever>
<person>
<distributionlist>[email protected]</distributionlist>
<distributionlist>[email protected]</distributionlist>
</person>
</reciever>
<reciever>
<contents>
Visst är det fult!?!
</contents>
</email>
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 4 av 27
SGML/XML-exempel . . .
• I exemplet finns en beskrivning av datas innebörd
• Ingenting om presentation av data (färg, font, . . . )
• All text inom <ettikett>text</etikett>
• Det finns separata dokument som kan användas för att specificera
vilka etiketter som får förekomma i ett SGML-dokument, i vilken
ordning de får förekomma, et.c. Kan användas för validering
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 5 av 27
DTD, Document Type Definition
<!doctype
<!element
<!element
<!element
<!element
email[
email (sender,reciever,contents)>
sender (person)>
reciever (person)+>
person (distributionlist) |
(christianname, middlename?,familyname)>
<!element (christianname, middlename?,familyname)
(#PCDATA)>
<!element distributionlist (#PCDATA)>
<!element contents (#PCDATA)>
]>
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 6 av 27
HTML
• beskriver hur webbsidor ska presenteras
• en ”webbläsare” läser beskrivningen och tolkar den enligt antingen en
”standardtolkning” eller enligt tolkningsmall som finns angiven i dokumentet
• en tidig version redan 1965 i Douglas Englebarts ”oNLine System”, NLS
• en idéskiss och en hypertextbaserad ”anteckningsbok” (ett för CERN globalt
program kallat ENQUIRE) gjordes av Tim Berners-Lee 1980
(http://www.w3.org/History.html)
• Utvecklas och underhålls av W3C (World Wide Web Consortium)
– HTML, CSS, XHTML, XML
– Vanligast är HTML 4.0
– Nya standarden är XHTML 1.1
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 7 av 27
<html><head><title>HTML</title></head><body>
<!-- raden ovan kan fattas -->
<h1>HTML</h1>
<p>En kort presentation av <b><u>HTML</u></b>. Huvudpunkter:</p><ul>
<li>Till skillnad från XML och SGML, beskriver HTML <i>presentation</i>
av data och inte <i>strukturen</i> eller <i>innehållet</i> i stort på
samma sätt som <a href="http://www.ctan.org/">TeX</a><ul>
<li>Det kan finnas text utanför etikett-paren. Sådan text
&quot;fungerar&quot; men valideras inte.</li>
<li>Man kan inte skriva ett &quot;valideringsdokument&quot;</li>
<li>Om man inte skriver korrekt HTML kommer dokumentet visas i alla
fall. Här fattas en avslutsetikett.
</ul>
</li><li>Som i andra märkspråk kan vissa etiketter endast förekomma
inom vissa andra. T.ex. får &lt;li&gt; endast finnas inuti
&lt;body&gt;</li>
<li>Ett textfragment kan länkas till andra dokument eller till en viss
plats i ett annat dokument</li>
</ul>
</body>
</html>
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 8 av 27
HTML
En kort presentation av
•
HTML.
Huvudpunkter:
Till skillnad från XML och SGML, beskriver HTML
innehållet
◦
◦
◦
presentation
av data och inte
strukturen
eller
i stort på samma sätt som TeX
Det kan nnas text utanför etikett-paren. Sådan text fungerar men valideras inte.
Man kan inte skriva ett valideringsdokument
Om man inte skriver korrekt HTML kommer dokumentet visas i alla fall. Här fattas en
avslutsetikett.
•
Som i andra märkspråk kan vissa etiketter endast förekomma inom vissa andra. T.ex. får <li>
endast nnas inuti <body>
•
Ett textfragment kan länkas till andra dokument eller till en viss plats i ett annat dokument
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 9 av 27
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML</title>
</head>
<body>
<h1>XHTML</h1>
<p>En kort presentation av <b><u>XHTML</u></b>. Huvudpunkter:</p>
<ul>
<li>Till skillnad från XML och SGML, beskriver XHTML
<i>presentation</i> av data och inte <i>strukturen</i> eller
<i>innehållet</i> i stort på samma sätt som
<a href="http://www.ctan.org/">TeX</a>
<ul>
<li>Det kan finnas text utanför etikett-paren.
Sådan text "fungerar" men valideras inte.</li>
<li>Man kan inte skriva ett "valideringsdokument"</li>
<li>Om man inte skriver korrekt XHTML kommer dokumentet
orsaka en felutskrift. Här fattas en slut-etikett
</ul>
</li>
<li>Som i andra märkspråk kan vissa etiketter endast
förekomma inom vissa andra. T.ex. får &lt;li&gt;
endast finnas inuti &lt;body&gt;</li>
<li>Ett textfragment kan länkas till andra dokument eller
till en viss plats i ett annat dokument</li>
</ul>
</body>
</html>
XML Tolkningsfel: felmatchad tagg. Förväntat: </li>.
Adress: http://www.csc.kth.se/~serafim/02-internet-content.xhtml
Radnummer 22, Kolumn 9:
</ul>
--------^
HTML-etiketter
• HTML-referens: http://www.htmlhelp.com/reference/html40/
• (X)HTML-referens:
http://www.webreference.com/authoring/languages/(x)html/
• Också på http://www.w3schools.com/ som också har länkar till
tutorials
• Organiserad lista över alla etiketter:
http://www.htmlhelp.com/reference/html40/olist.html
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 12 av 27
HTML-etiketter . . .
• Ett HTML-dokuments delar:
– head (dokumenthuvudet) innehåller generell information om dokumentet, som
titel, författare, teckenkodning, vilket program som genererat sidan . . .
– body (dokumentkroppen), dokumentets innehåll ELLER
– frameset, beskriver en samling med ramar
– OBS! Om huvudet saknas tolkas hela dokumentet som ”body”
• Etiketten <a> med attributet href motsvarar en länk. Länken kan anges som en
absolutadress eller en relativ adress. Adresser till sidor på samma ”site” anges
med fördel som relativa eftersom det ”är enkelt att flytta hela ”siten” till annan
server eller annan filkatalog
– <a href="dokument-i-samma-katalog.html">. . .
– <a href="katalog/dokument.html">. . .
– <a href="../annan-katalog/annat-dok.html">. . .
– BASE kan användas för alla relativa länkar
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 13 av 27
HTML-etiketter . . .
• Andra användbara huvud-etiketter: title (mest använda)
• Kommer senare: meta som används för att simulera HTTP-headers.
• style som används för att ändra presentationen, t.ex. genom användande av
cascading style sheets (CSS)
• i kroppen används <p>...</p> för att avgränsa stycken och om det inte finns
någon etikett kring en text är <p>...</p> skönsvärde (i HTML). Använd <br> eller
<br /> för radbyte.
• Ankare: <a name="here"> markerar en plats i ett dokument som man senare kan
hoppa till m.h.a.dokumentnamn#here som
t.ex.http://www.nada.kth.se/kurser/kth/2D2052/index.php#siteoversikt
• <h1> </h1> ... <h6> </h6>. Rubriknivåer.
• Om du vill att radbrott och blanka ska räknas som de är: <pre> </pre>
• Textens utseende kan ändras med <b>, <i>, <font>, <big>, <small>, <sub>,
<tt>, <s>. Modernare är att använda CSS, krav i XHTML, klokt även i HTML.
• Tabeller <table>, tabellrader <tr>, tabellhuvud <th>, tabellcell <td>
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 14 av 27
HTML-verktyg
På webben finns ett antal program som kontrollerar och korrigerar era
HTML-sidor, t.o.m. som uppgraderar till nyare standard.
• http://www.htmlhelp.com/tools/validator/
• http://sourceforge.net/projects/tidy/
• http://jigsaw.w3.org/css-validator/
•
http://www.thefreecountry.com/webmaster/htmleditors.shtml
Dessutom finns det utvecklingssystem för HTML (med och utan CSS)
som ger omfattande hjälp och stöd vid programmeringen.
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 15 av 27
Cascading Style Sheets (CSS)
Med CSS kan man definiera om presentationen av i stort sett alla HTML-element.
Stilinformationen kan man ge i HTML-filen:
<html>
<head>
<style type="text/css">
h2 {text-decoration:overline} h4 {text-decoration: line-through}
p {text-decoration: underline} a {text-decoration: none}
</style>
</head>
<body>
<h2>En rubrik på nivå 2</h2>
<h4>En rubrik på nivå 4</h4>
<p>Ett stycke text</p>
<p>Ett annat stycke <a href="http://w3schools.com">
med en länk</a></p>
</body>
<html>
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 16 av 27
En rubrik på nivå 2
En rubrik på nivå 4
Ett stycke text
Ett annat stycke med en länk
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 17 av 27
CSS . . .
Man kan också definiera stil
• i en separat fil och ange detta i ett ”länk”-attribut i HTML-filens
huvud:
<link rel="stylesheet" type="text/css" href="stil.css">
• eller direkt i htmlkoden:
<p style="color: sienna; margin-left: 20px">
Här kommer ett stycke</p>
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 18 av 27
XML
• XML är ett sätt att beskriva data (som SGML).
• Det finns inga fördefinierade etiketter som i (X)HTML. Man måste ange en tolkning,
t.ex. m.h.a. en DTD
• XML utför ingenting men data från ett XML-dokument kan presenteras på hur
många sätt som helst
• XML kan användas för datautbyte eller för att beskriva hur mjukvara ska
konfigureras eller t.o.m. som programkod
• En exempel-XML-applikation: RSS (really simple syndicating). Se
t.ex.http://www.mozilla.org/products/firefox/live-bookmarks.html
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 19 av 27
XML: exempel
<?xml version="1.0" encoding="ISO-8859-1" ?>
<note>
<to>Serafim</to>
<from>Carina</from>
<heading>Påminnelse</heading>
<body>Glöm inte lunch med mig idag!</body>
</note>
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 20 av 27
Denna XML-fil verkar inte ha någon associerad stilinformation.
Dokumentträdet visas nedan.
-<note>
<to>Serafim</to>
<from>Carina</from>
<heading>Påminnelse</heading>
<body>Glöm inte lunch med mig idag!</body>
</note>
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 21 av 27
XHTML
•
•
•
•
eXtensible HTML
ska ersätta HTML
XHTML 1.0 är (nästan) exakt HTML 4.1
Mera strikt, renare genom att
– alla etiketter måste slutas (stängas). <br> blir <br/>. Bättre med <br /> så
gamla webbläsare klarar av dem.
– alla html-filer måste vara välformade.
<p><a href="adress.html">en länk</p></a> genererar ett fel.
– ingen text utanför etikettpar
• XHTML är HTML definierat som en XML-applikation:
http://www.w3c.org/TR/xhtml1/dtds.html
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 22 av 27
MIME: Multimedia Internet Mail Extension
• Öppen standard för hur multimediaobjekt skall skickas per e-post. Numera även
för http-förfrågningar och -svar (och mycket mer)
• Beskriver hur innehållet är organiserat. Helhet/delar/mindre delar.
• Beskriver varje dels typ, t.ex.:
– text
· plain, html
– news
– postscript, pdf, doc
– zip
– image
· jpeg, tiff, gif, . . .
– audio
– video
· mpeg, quicktime, wmv . . .
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 23 av 27
HTTP: HyperText Transport Protocol
•
•
•
•
Standard för hur webbservrar och -klienter (mest webbläsare) ska utbyta data.
Använder MIME för att koda data i båda riktningarna
Använder TCP/IP för datatransport
För att få tag i /kurser/kth/2D2052/ingint06/index.html skickar klienten en
förfrågan, såsom:
GET /kurser/kth/2D2052/ingint06/index.html HTTP/1.1
• Se http://www.w3c.org/Protocols|
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 24 av 27
HTTP, förfrågan
• Kommando (GET eller POST)
GET /kurser/kth/2D2052/ingint06/index.html HTTP/1.1
• Header (namn och värde)
Host: www.nada.kth.se
Accept: */*
acceptera varje MIME-typ
• tom rad
• innehåll (med deklarerad innehållstyp, ingenting för GET)
• med POST skickas även värden
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 25 av 27
HTTP, svar
• Kommando (oftast OK)
HTTP/1.1 200 OK
• Header (med t.ex. innehållstyp)
Date: Fri, 20 Jan 2006 00:11:31 GMT
Server: Apache/2.0.54 (Fedora) PHP/5.0.4
mod_perl/2.0.1 mod_ssl/2.0.54 OpenSSL/0.9.7f
Transfer-Encoding: chunked
Content-type: text/html
• tom rad
• innehåll (i vårt fall filen
/public/www/kurser/kth/2D2052/ingint06/index.html på NADA
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 26 av 27
HTTP, proxies (ställföreträdare)
• Ibland vill man begränsa HTTP-access mllan sitt eget LAN och WAN
• Då måste alla webbläsare inom ett (lokalt) nätverk ansluta till en gemensam
värddator inom nätverket som kan agera som en ställföreträdare (proxy) för
nätverket. Det är vanligt att kombinera den funktionaliteten med en brandvägg.
• Ställföreträdaren verkar utåt som en vanlig webbserver men lagrar inga egna
HTML-sidor utan ”reläar” sidor från de lokala servrarna till den värddator som
ställer förfrågningar till proxy’n. Den begränsas inte av brandväggen.
• Ställföreträdaren ansluter till önskad värd på internet
• Ställföreträdaren kan begränsa åtkomst av vissa sidor eller servrar
• Ställföreträdaren kan också ha en egen cache så att sidor som ofta efterfrågas kan
lagras lokalt på ställföreträdaren. Svarstider minskas ofta radikalt då.
• Ställföreträdaren lägger till egen header-information till svars-header’n
• Vissa nätverk kräver port 80 för proxies. Det kan fortfarande gå med länkar till
http://host:8080
• Tekniken används för många andra protokoll också.
gruint06/ingint06, internets innehåll
Föreläsning 2, bild 27 av 27
