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>ingint06@kth.se</distributionlist> <distributionlist>gruint06@kth.se</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 email[ <!element email (sender,reciever,contents)> <!element sender (person)> <!element reciever (person)+> <!element 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 "fungerar" men valideras inte.</li> <li>man kan inte skriva ett "valideringsdokument"</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 <li> endast finnas inuti <body></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 presentation av data och inte strukturen eller innehållet 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 <li> endast finnas inuti <body></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