Nettsider og XHTML <?xml version="1.0" encoding="utf-8"?> PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- strict.dtd"> <title> En minimal nettside </title> Hallo, verden! SGML-familien SGML Standard General Markup Language HTML Hypertext Markup Language XHTML Extensible Hypertext Markup Language ISO 8879:1985 XML Extensible Markup Language Other XML-based Languages INF1040-XHTML-1 INF1040-XHTML-2 Hvordan lage et nettsted XHTML Extensible Hypertext Markup Language XML med en spesiell DTD egnet for utforming av nettsider se http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd Erstatning for HTML Hypertext Markup Language Viktig bestanddel av Hypertext Transfer Protocol HTTP Nettleser Responsen tolkes og vises av nettleseren http://www.ifi.uio.no/index.html.html filtype XHTML-kodet tekst (eller binærfil bilde) web-tjener www.ifi.uio.no index.html INF1040-XHTML-3 INF1040-XHTML-4
Tre varianter av XHTML For XHTML kan vi velge mellom tre ulike DTDer Transactional Litt romslig DTD som bl.a. tillater elementer og attributter som har med visuell presentasjon å gjøre. Egnet for XHTML som er oppussede versjoner av tradisjonell HTML http://www.w3.org/tr/xhtml1/dtd/xhtml1-transactional.dtd Frameset DTD som tillater bruk av rammer ( frames ). Omdiskutert teknologi. Ligg unna! http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd Vi skal bruke strict! Strict DTD som utelukker elementer og attributter som har med visuell presentasjon å gjøre dette skal uttrykkes i stiler og stilark http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd Hva INF1040 ikke dekker Dynamiske nettsider Nettsider som bygges opp on the fly på web-tjeneren, ofte på grunnlag av data som hentes fra en database Forms Formularer som brukeren av nettstedet kan fylle ut Image-maps Klikkbare bilder Klient-programmering Bruk av skriptspråk for å skape liv i nettsiden Java-Applets og ActiveX-controls Små programmer som lastes ned fra web-tjeneren og som utføres på klienten De to første temaene Sikkerhetsaspekter inngår i INF1050 INF1040-XHTML-5 INF1040-XHTML-6 Nettsidehode Nettsidekropp Strukturen på en nettside Sideoverskrift Link Brødtekst / bilder Tittel etc. Dato for siste oppdatering Redaktør, med e-post-adresse <html> nettsidehode nettsidekropp Den minimale XHTML nettside <?xml version="1.0" encoding="utf-8"?> Angivelse av DTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Angivelse av navnerom <title> En minimal nettside </title> Hallo, verden! INF1040-XHTML-7 INF1040-XHTML-8
Generelle editorer emacs Redigeringsverktøy Notepad (save som "filnavn.html ) Spesielle XHTML/HTML-editorer Dreamweaver Hot Metal Pro Word save as HTML Amaya (W3C open source) Vi skal ikke bruke altfor hjelpsomme spesielle XHTML/HTML-editorer, for vi skal lære XHTML Validering av XHTML-dokumenter For å kontrollere at et XHTML-dokument er gyldig, kan du bruke valideringstjenesten på http://validator.w3.org Valider alltid dine nettsider! INF1040-XHTML-9 INF1040-XHTML-10 Publisering av nettsiden (på Ifi) Nettsidehodet Legg opp en mappe med navn www_docs på brukerområdet ditt (hvis den ikke er der fra før), og gi den tilgangstillatelser 755 Inneholder data som er interessante for nettleseren og andre programvarer (spesielt søkemotorer), men innholdet vises ikke på selve nettsiden Legg XHTML-teksten du vil publisere i mappen www_docs, sørg for at filtypen er html eller htm, og gi filen tilgangstillatelser 644 Nå er nettsiden tilgjengelig under URLen http://heim.ifi.uio.no/~brukernavn/filnavn.html <title> En minimal nettside </title>. I det øyeblikk du har satt tilgangstillatelsene, er nettsiden offentlig tilgjengelig ved hjelp av nettlesere over hele Internett. Tenk over hva du publiserer! INF1040-XHTML-11 INF1040-XHTML-12
Tittel Nettsidekropp (forslag) XHTML-element for å gi web-siden en tittel <title> Tittel </title> Inngår i nettsidehodet <h1> Sideoverskrift (ofte samme som title) </h1> Påkrevet i XHTML-strict brødtekst (evt. med linker) Brukes i ymse lister og oversikter, f.eks. Favoritter Brukes i søkemotorenes databaser over nettsider Vises vanligvis i øverst i nettleservinduet Vises ikke på selve nettsiden Legg merke til mellomrommet foran /. <hr /> Dette er satt inn av hensyn til enkelte eldre nettlesere. eventuelle navigasjonslinker <br /> Oppdatert av NN dato, link til NN s epost-adresse INF1040-XHTML-13 INF1040-XHTML-14 Vanlige markeringer i nettsidekroppen <h1></h1> Overskrift. Finnes i 6 nivåer, fra h1 til h6 Paragraf omslutter brødteksten. Nettleseren skiller paragrafer med to linjeskift <br /> Tvunget linjeskift. <hr /> Horisontal Ruler horisontal linje. <em></em> Emphasis. Uthevet skrift (oftest kursiv) <strong></strong> Uthevet skrift (oftest fet) <!-- dette er en kommentar --> Bemerk at en vanlig CR og LF ignoreres av nettleseren INF1040-XHTML-15 Nettsidekropp eksempel <h1>inf1040 Digital representasjon</h1> I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer <br />tekst <br />tall <br />lyd <br />bilder <br />og hva dette innebærer for <em>lagring</em>, <em>overføring</em> og <em>fremvisning</em>. <hr /> Oppdatert 27. august 2004 av gerhard&0x0040;ifi.uio.no INF1040-XHTML-16
Lister Unummerert liste: <ul> <li>...</li> <li></li> </ul> Nummerert liste: <ol> <li>...</li> <li></li> </ol> <ul> <li> første element</li> <li> andre element</li> første element </ul> andre element <ol> <li> første num-element</li> <li> andre num-element</li> </ol> 1 første num-element 2 andre num-element Lister eksempel <h1>inf1040 Digital representasjon</h1> I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer <ul> <li>tekst</li> <li>tall</li> <li>lyd</li> <li>bilder</li> </ul> og hva dette innebærer for <em>lagring</em>, <em>overføring</em> og <em>fremvisning</em>. INF1040-XHTML-17 INF1040-XHTML-18 <dl> <dt>...</dt><dd>...</dt> <dt>...</dt><dd>...</dt> </dl> <dl> </dl> <dt>element 1 </dt> Definisjonsliste <dd> element1 beskrivelse </dd> <dt>element 2 </dt> <dd> element2 beskrivelse </dd> Element 1 Element 2 element1 beskrivelse element2 beskrivelse Definisjonsliste eksempel <h1>vanlige forkortelser på nettet</h1> <dl> <dt>afaik</dt> <dd>as Far As I Know</dd> <dt>imho</dt> <dd>in My Humble Opinion</dd> <dt>otoh</dt> <dd>in The Other Hand</dd> </dl> INF1040-XHTML-19 INF1040-XHTML-20
Tegnentiteter Vi husker at tegnene < > & har en spesiell betydning i XML Hvis slike tegn inngår i teksten, må de kodes på en spesiell måte: &tegnnavn; eller &#kodepunkt; altså: < < < > > > & & & I XHTML kan også andre tegn kodes på tilsvarende måte (nødvendig hvis tegnsettet er ren ASCII): æ æ æ ø ø ø å å å. For konvertering fra Unicode-tegn til heksadesimal, bruk for eksempel http://pioneer.stereo.lu/converter.html INF1040-XHTML-21 Tegnentiteter eksempel <h1>inf1040 Digital representasjon</h1> I INF1040 skal vi blant annet lære om hvordan vi i en datamaskin representerer <ul> <li>tekst</li> <li>tall</li> <li>lyd</li> <li>bilder</li> </ul> og hva dette innebærer for <em>lagring</em>, <em>overføring</em> og <em>fremvisning</em>. INF1040-XHTML-22 Linker <a href="url">tekst som beskriver linken</a> attributt verdi Eksempel: <h1>inf1040 Digital representasjon</h1> I <a href= "http://www.uio.no/studier/emner/matnat/ifi/inf1040/index.html"> INF1040</a> skal vi blant annet lære om hvordan vi i en datamaskin representerer.. INF1040-XHTML-23 Absolutte og relative URLer En absolutt URL er komplett med Internettnode-adresse eks.: http://www.uio.no/studier/emner/matnat/ifi/inf1040/index.html En relativ URL har ingen Internettnode-adressedel eks.: versjon2.html Nettsiden ligger da i samme filhierarki som nettsiden som inneholder linken. Relativ URL som ikke begynner med / Filbanen er relativ til nivået over nettsiden som inneholder linken Relativ URL som begynner med / Filbanen tar utgangspunkt i roten til filhierarkiet til nettsiden som inneholder linken INF1040-XHTML-24
Fremmed nettsted i nytt vindu Hvordan få åpnet fremmed nettsted i nytt vindu? <?xml version="1.0" encoding="utf-8"?> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">.. I <a href="http://www.uio.no/studier/emner/matnat/ifi/inf1040/" target="new">inf1040</a> skal vi blant annet. Legg merke til: transitional, ikke strict Relative URLer eksempel <h1>inf1040 XHTML-kurs</h1> Denne nettsidestrukturen inneholder eksempler på ulik utforming av en nettside <ul> <li> <a href="minimal.html">en minimal nettside</a> </li> <li> <a href="versjon1.html">en meget enkel nettside</a> </li> <li> <a href="versjon2.html">en nettside med liste</a> </li> <li> <a href="versjon6.html">en nettside med spesialtegn</a> </li> <li> <a href="versjon7.html">en nettside med link</a> </li> </ul> INF1040-XHTML-25 INF1040-XHTML-26 mailto Bilder på nettsiden mailto er en spesiell type URL som kaller opp e-postprogrammet (Eksempel: Se neste lysark) <img src="url" alt="alternativ tekst" width="pikselbredde" height="pikselhøyde"/></a> Mal for en mailto <a href="mailto:e-post-adresse"> beskrivende tekst for e-post-adresse</a> Eksempel: Oppdatert 27. august 2004 av <a href="mailto:gerhard@ifi.uio.no"> gerhard@ifi.uio.no</a> spesialtegnoppsett for @ Publiser ALDRI en e-postadresse i klartekst på en nettside! Eksempel: <img src="binartall.gif" alt="binærtall" width="431" height="273"/> Angi alltid width og height. Da kan nettleseren bygge opp siden raskere. Angi alltid alt. Beskriver bildet, for eksempel hvis det ikke kan vises INF1040-XHTML-27 INF1040-XHTML-28
Bilder som utgangspunkt for linker <a href="url"><img src="url" alt="alternativ tekst" width="pikselbredde" height="pikselhøyde"/></a> Eksempel: <a href="index.html"> <img src="home.gif" alt="hjem" width="40" height="28"/> </a> Det er vanlig å bruke bildet av et hus som symbol for linken til hjemmesiden. Alternativ: Se senere nettsidemal Bilder som utgangspunkt for linker thumbnails Bilder kan være store og tidkrevende å laste ned. En thumbnail er et lite bilde som gir nettsurferen valget om hun vil se det i full størrelse: <a href="urltilstortbilde"><img src="urltilthumbnail" alt="alternativ tekst" width="pikselbredde" height="pikselhøyde"/></a> bildetekst/størrelse Eksempel: <a href="storttre.gif"> <img src="litetre.gif" alt="tre" width="40" height="28"/></a> Et vakkert tre [full størrelse 8 kb] INF1040-XHTML-29 INF1040-XHTML-30 Tabeller på nettsider Tabell eksempel 1 Rad1 Rad2 <table> Kolonne1 data11 data21 Kolonne2 data12 data22 Kolonne3 data13 data23 <tr><th> </th> <th>kolonne1</th><th>kolonne2</th><th>kolonne3</th></tr> <tr><th>rad1</th><td>data11</td><td>data12</td><td>data13</td></tr> <tr><th>rad2</th><td>data21</td><td>data22</td><td>data23</td></tr> </table> se http://www.w3schools.com/html/html_tables.asp INF1040-XHTML-31 <?xml version="1.0" encoding="iso-8859-1"?> PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <title>vanlige forkortelser på nettet</title> <h1>vanlige forkortelser på nettet</h1> <table> <tr><th>forkortelse</th><th>lang form</th></tr> <tr><td>afaik</td><td>as Far As I Know</td></tr> <tr><td>imho</td><td>in My Humble Opinion</td></tr> <tr><td>otoh</td><td>on the Other Hand</td></tr> </table> Eksempel fra http://www.htmlhelp.com/reference/html40/tables/table.html INF1040-XHTML-32
Tabell eksempel 2 <?xml version="1.0" encoding="iso-8859-1"?> PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <title>vanlige forkortelser på nettet</title> <table> <caption>vanlige forkortelser på nettet</caption> <thead> <tr><th>forkortelse</th><th>lang form</th></tr> </thead> <tbody> <tr><td>afaik</td><td>as Far As I Know</td></tr> <tr><td>imho</td><td>in My Humble Opinion</td></tr> <tr><td>otoh</td><td>on the Other Hand</td></tr> </tbody> </table> Eksempel fra http://www.htmlhelp.com/reference/html40/tables/table.html Mer moderne versjon med flere elementer, egnet for bruk av stilark INF1040-XHTML-33 Tabeller mer avanserte muligheter Tabellceller kan slås sammen, se for eksempel http://www.htmlhelp.com/reference/html40/tables/colgroup.html Stiler kan brukes til setting av tykkelse og farger på kantlinjer størrelse og farge på teksten polstring ("padding") rundt teksten bakgrunnsfarger INF1040-XHTML-34 Strukturen på et nettsted Gode råd om sideutforming relativ URL Hjemmeside index.html La nettsiden fortelle en selvstendig historie. Du vet ikke hvor leseren kommer fra, og hvor han drar. Tving ikke brukeren oppover i sidehierarkiet for at han skal kunne komme til neste side. underside underside absolutt URL fremmed nettside Lag korte, konsise sider. Begrens bruken av inline grafikk. Naturlig brødtekst også for linker: Unngå klikk her! Linker innen eget nettsted bør være relative Inkludér alltid en link til hjemmesiden! underside Linker til fremmede sider må være absolutte Det bør alltid være en link tilbake til hjemmesiden INF1040-XHTML-35 INF1040-XHTML-36