LO130A Webpublisering. Forelesning

Transkript

1 LO130A Webpublisering Forelesning

2 I dag Leksjon 1: Internett, webservere og nettlesere. Leksjon 2: Innledende om (X)HTML. 2

3 Kort om historien til INTERNETT ARPA-net (Advanced Research Project Agency) startet på slutten av 1960-tallet som et prosjekt for det amerikanske forsvaret. Hensikten var å bli så lite sårbar som mulig ved mulig (atom-) angrep. Datamaskiner i et nettverk fortsatt skulle kunne kommunisere selv om en maskin falt ut. Med utvikling av maskinvare som rutere og programvare som TCP-IP kunne nettverk kobles sammen til internettverk. Tjenestene ble stadig bedre, og ARPANET utviklet seg til det som vi idag kaller Internett. 3

4 Oppbyggingen av Internett 4

5 Pakkesvitsjing Pakkesvitsjing er en teknikk for å sende data på Internett. Informasjon som skal sendes deles opp i mindre biter = pakker. Hver bit sendes uavhengig hverandre og tar forskjellige veier til mottaker (gjennom forskjellige rutere der belastningen er minst). Ved feilsending trenger bare et fåtall pakker å sendes på nytt. TCP-IP (Transmission Control Protocol - Internet Protocol) er den programvare som sørger for at informasjon kommer fra A til B. TCP-delen deler informasjonen opp i mindre biter på avsendersiden og setter det hele sammen igjen på mottakersiden. TCP sjekker også at alle pakkene kommer fram og sørger for ny sending av tapte pakker. IP-delen setter på "adresselapper" og styrer pakkene gjennom nettet til rett mottaker. 5

6 Pakkesvitsjing i nettet A stream of packets from sender to receiver. 6

7 Tjenester i nettet Telnet, og FTP ( File Transfer Protocol) er tjenester som eksisterte lenge før WWW, men få maskiner hadde muligheten til å benytte disse tjenestene. Telnet er et vindu mot en vertsmaskin slik at du kan starte mulige prosesser som om det var din egen maskin. FTP benyttes til filoverføring. 7

8 Kort om historien til WorldWideWeb Begrepet er opprinnelig knyttet til protokollen HTTP (HyperText Transfer Protocol) som ble utviklet rundt HTTP skulle håndtere dokumenter (ren tekst) skrevet etter en standard som ble kalt HTML (HyperText Markup Language). Bakgrunnen for WorldWideWeb var at det vitenskapelige miljøet ønsket å løse et arkivproblem rundt vitenskapelige rapporter som refererte til mange andre rapporter. Linker var helt essentielt i HTML-standarden. WorldWideWeb forble et verktøy for vitenskapelige miljøer inntil rundt 1995 da nettsteder ble alment tilgjengelig via nettleverandører som Telenor etc. WorldWideWeb har utviklet seg mye de siste årene ved at HTML har blitt utvidet med CSS (stilark) og script (JavaScript). Nye protokoller som XML og WML osv. er utviklet. Spesielt har XML ledet til utvikling fra HTML til XHTML. 8

9 Hvordan hentes websidene? 9

10 Nettlesere 10

11 Nettlesere - forskjeller De mest vanlige er Netscape Navigator (N) og Microsoft Internet Explorer (IE), den norske Opera. Et HTML-dokument kan bli vist noe forskjellig i forskjellige web-lesere så du bør teste web-sidene dine i både N og IE, evt. Opera. NB! N følger HTML-standarden mer strengt enn IE. Slurvete HTML-koding kan derfor få det resultatet at alt synes OK i IE mens det ikke blir vist i N. Det mest vanlige feilen som kan resultere i slike effekter er at HTML-tagger som blir åpnet ikke blir lukket. F.eks. vil en tabell som er åpnet med <table>, men ikke lukket med </table>, bli vist i IE, men ikke i N. 11

12 Hvordan adressere maskiner i nettet Nettadresser ( IP-adresser ) Alle maskiner tilknyttet Internett har en unik adresse Format (IPv4): 4 tall med punktum mellom Eks.: IP-adressen kan være statisk, dvs. fast tilordnet eller dynamisk, dvs tilordnes ved oppkobling 12

13 Nodenavn DNS (Domain Name Server) DNS-adresser, DNS-navn Format: domene.domene....toppdomene Eks.: Internett bruker et hierarkisk adressesystem En maskin har bare én IP-adresse, men kan ha flere nodenavn. Eks: cube eller alias student IP adressen er feks

14 DNS navnehierarkiet A portion of the Internet domain name space. 14

15 URLen - den universelle adressen URL: Universal Resource Locator 15

16 Web-serveren Avdelingens Web-sider ligger på en UNIX-server, og det er ikke den samme maskinen du logger deg inn på på pc-nettet. Spesielle grep må derfor gjøres forat du skal kunne "se" Web-serveren fra pc-nettet. Alle Web-dokumenter MÅ ligge på Web-serveren for å bli synlig for omverdenen. Du kan lage websidene dine og lagre dem lokalt på maskinen, eller direkte på webserveren. Da blir de synlige med en gang. Et alternativ er å bruke FTP. Dette er en grei metode dersom du har internett hjemme. MERK! WS_ftp er ikke kryptert. Man kan bruke et program som heter WINscp det er sikrere. 16

17 Direkte oppkobling til Webserver (fra pc-nettet) Start Windows utforsker med Start/Programmer/Windows Utforsker. Trykk Verktøy/Koble til nettverksstasjon... I vinduet som kommer opp er det to ruter som skal fylles ut. I ruten Stasjon: blir det foreslått en (ledig) stasjonsbokstav. La den stå som det er hvis du ikke har andre grunner for å endre det. I ruten Bane: skriver du: \\CUBE\LOGINNAVN. Kryss av ruten Koble til ved oppstart:. På den måten vil du alltid se Web-serveren når du logger inn på pc-nettet. Dere får hjelp på øvingstimen... 17

18 Kort om filoverføring med WS_ftp (1) FTP-programmet startes fra Windows med Start/Programmer/WS_FTP. Trykk New for å lage en ny profil. (Senere kan du bare velge den profilen som passer deg fra vinduet Profile Name:.) Hvis du vil lage en profil for oppkobling mot vår Web-server fyller du inn i rutene nedover. Profile Name: HiO Host Name/Address: student.iu.hio.no (eller cube.iu.hio.no) Host Type: (Hopp over denne - la det stå "Automatic detect") User ID: ditt loginnavn på Web-serveren Password: ditt passord på Web-serveren Merk av Save Pwd. Dette anbefales bare dersom du er på din egen private pc. Trykk OK, og du skal være oppkoblet mot Web-serveren. 18

19 Innloggingsvinduet 19

20 Kort om filoverføring med WS_ftp (2) I vinduet til venstre ser du filstrukturen på din egen maskin, og i vinduet til høyre ser du filstrukturen til vertsmaskinen (f.eks. Webserveren). Du kan manipulere med filene med de tilhørende knapperadene. Ved å merke av filer (en eller flere) kan du flytte filer fra det ene systemet til det andre ved hjelp av tastene mellom vinduene. Trykk Close når du er ferdig. 20

21 HTML - XHTML 21

22 Verktøy for HTML koding En type er såkalte WYSIWYG (What You See Is What You Get) dokumentbehandlere. Her bygger du opp (X)HTML-dokumentet uten å se (X)HTML-koden slik du ønsker det skal bli vist i en web-leser. Ulempen er at du er bundet av programmets måte å bygge opp (X)HTML-koden på. Verktøyene lager ofte mye rar (stygg) kode. Det kan bli vanskelig å oppnå akkurat din spesielle design. Eksempler på slike (X)HTML-verktøy er Microsoft FrontPage, Netscape Composer, Dreamweaver, Adobe GoLive... 22

23 Teksteditorer Den andre typen er rene tekstbehandlere der du må skrive (X)HTML-taggene selv. Under Windows er Notepad (Notisblokk) og TextPad mest brukt, I dette kurset skal vi holde oss til TextPad/Notepad. De andre programmene må du lære selv. Mange lager web-sider først med f.eks. FrontPage for så å skreddersy det hele med TextPad til slutt. 23

24 (X)HTML - hva er det? (extensible) HyperText Markup Language er et språk med et system av koder for å lage interaktive web-sider. Man skal kunne hoppe fra emne til emne, fylle ut skjemaer, sende informasjon, søke i databaser etc. Et (X)HTML-dokument (XHTML-fil) er en ren tekstfil. Det inneholder hverken bilder, lyd, videoer eller animasjoner. Derimot inneholder det "pekere" til slik type informasjon (filer). Et (X)HTML-dokument inneholder koder (tagger og attributter) som skal fortelle web-leseren hvordan de forskjellige komponentene skal vises. 24

25 (X)HTML - eksempel <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title> Tittel</title> <link rel="stylesheet" type="text/css" href="webkurs.css" /> </head> <body> <h1> Overskrift 1 </h1> <h2> Overskrift 2 </h2> </body> </html> 25

26 (X)HTML-taggenes hensikt De definerer dokumentets struktur, dvs. dokumentets logiske oppbygning i overskrifter, avsnitter, lister, tabeller osv. De definerer referanser til elementer som skal inkluderes i (X)HTML-dokumentet: bilder, video, lyd, stilark, script osv. De definerer IKKE layout som skrifttyper, skriftstørrelser, fargevalg osv. Til det finnes det stilark som vil bli omtalt senere. 26

27 (X)HTML-tagger - regler En HTML-tag er en kode som står mellom tegnene < og >. Eksempelvis vil taggen <p> starte et nytt avsnitt (eng. paragraph) og taggen </p> slutte et avsnitt. For de aller fleste HTML-elemenetene SKAL det være en sluttag. Spesielt for XHTML-elemeneter MÅ det være en sluttag. For noen få HTML-elementer finnes det ikke sluttag. Eksempler er <br> for å skrive neste tegn på ny linje (linjeskift) og <img> for innsetting av et bilde. I XHTML MÅ dette skrives med en ekstra skråstrek slik: <br /> og <img />. 27

28 Forts... Selv om enkelte HTML-elementer ikke krever en sluttag, så anbefales det sterkt at dette gjøres. F.eks. vil taggen <p> uansett starte et nytt avsnitt selv om forrige avsnitt ikke ble avsluttet med </p> (i XHTML kan den ikke utelates). (X)HTML-tagger kan ha attributter (parametre). Et eksempel er: <img src="bilde.gif" /> som forteller hvilken bildefil (src = source) som skal inkluderes i HTML-dokumentet (web-siden). 28

29 Generelt om (X)HTML-koding HTML-tagger kan skrives med små eller store bokstaver, men det mest vanlige er små bokstaver (XHTML krever små bokstaver). En (X)HTML-tag skal skrives tett uten innslag av unødige blanke tegn. En avsnittstag skal f.eks. skrives <p> og IKKE < p >. Det kan være flere åpne tagger samtidig, men det er den taggen som ble åpnet sist, som må lukkes først. Et avsnitt i fete typer kan f.eks. åpnes med <p><b>, men må da lukkes med </b></p>. 29

30 HTML-dokumentets utseende Det er HTML-koden som bestemmer utseende av et HTML-dokument i en web-leser. I en lang ren tekst er det f.eks. web-leserens vindusbredde som bestemmer hvor mange ord det er plass til på en linje, og ikke hvordan teksten er skrevet inn i en tekstbehandler. Flere blanke tegn mellom ord blir bare vist med ett blankt tegn. For lettere å kunne finne frem i HTML-koden kan det lønne seg å benytte innrykk som følger strukturen i HTML-dokumentet. 30

31 Tre eksempler: Samme resultat. Eksempel 1 <!DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01//EN" " ><html><head> <title>tittel</title></head><body>her kommer det en tekst. </body></html> 31

32 Eksempel 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " > <html> <head> <title> Tittel</title> </head> <body> Her kommer det en tekst. </body> </html> 32

33 Eksempel 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN " <html> <head> <title>tittel</title> </head> <body> Her kommer det en tekst. </body> </html> 33

34 Stammen i et XHTML-dokument <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN strict.dtd"> <html> <head> <title>tittel</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> Her kommer informasjonen som blir vist i Webleseren. </body> </html> Denne XHTML-koden kan du lagre som xmal.html og bruke som utgangspunkt for senere Web-sider. 34

35 <head>-taggen Denne taggen omslutter informasjon som dokumentets tittel, script (programkode), stildefinisjoner og dokumentbeskrivelse. <title>-taggen definerer dokumentets tittel, og den kommer til syne øverst til venstre på web-leserens tittellinje. <script>-taggen inneholder programkode for å gjøre web-siden mer livaktig eller å sjekke data som blir gitt av besøkeren. <style>-taggen inneholder stildefinisjoner som bestemmer utseende av Web-siden med skrifttyper fargevalg osv. <link>-taggen inkluderer andre filer inn i HTML-dokumentet. Dette kan være programkode (script) og stilark. <meta>-taggen beskriver først og fremst hvilket tegnsett som er benyttet, men det kan også beskrive dokumentets innhold i form av en kort beskrivende setning og/eller en eller flere stikkord. Denne informasjonen blir brukt av søkemotorer for å klassifisere siden din slik at besøkende lettere kan avgjøre om siden er interessant eller ikke. (Mer senere.) 35

36 Stammen i et HTML-dokument <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>tittel</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> Her kommer informasjonen som blir vist i Webleseren. </body> </html> Denne HTML-koden kan du lagre som mal.html og bruke som utgangspunkt for senere Web-sider. 36

37 <body>-taggen Denne taggen omslutter all den informasjon som blir vist i Web-leserens hovedvindu. Stort sett de fleste taggene som blir presentert i dette kurset hører hjemme her. Det er to grupper tagger, den ene er tagger på blokknivå, og den andre er tagger på tegnnivå. Den første gruppen blokknivå - vil alltid starte et nytt avsnitt, mens den andre - tegnnivå -virker direkte på tegnene den står rundt. I tillegg er det tagger for tabeller og skjemaer som vil bli beskrevet senere. 37

38 Tagger på de to nivåene: Tagger på blokknivå er <h1> til <h6> for overskrifter <p> for avsnitt <blockquote> for innrykket avsnitt <pre> for uformaterte avsnitt <div> for selvstendige blokker <ul>, <ol>, <li> for lister. Tagger på tegnnivå er <b> for fet skrift <i> for skråskrift <sub> og <sup> for senket og hevet skrift <a> for referanser til andre dokumenter. Tre tomme tagger (dvs. ingen sluttag) er mye brukt, og det er <br /> for å tvinge neste tegn på ny linje, <hr /> for horisontal strek og <img /> for bilde. 38

39 Overskrifter (<h1>... <h6>) Det finnes 6 forskjellige overskrifter med <h1> til <h6>. Her er <h1> størst og <h6> minst. Enhver overskrift må avsluttes med hhv. </h1> til </h6>. Hvis ikke vil overskriftens skriftstørrelse fortsette gjennom hele dokumentet. Det er naturlig å definere overskriftenes størrelse gjennom stilark slik at de blir tilpasset teksten forøvrig i vanlige avsnitt. Her er 3 standard definerte overskrifter uten bruk av stilark: <h2>overskrift 2</h2> <h4>overskrift 4</h4> <h6>overskrift 6</h6> 39

40 Avsnitt (<p>) Et avsnitt starter med <p> og kan, men må ikke, avsluttes med </p>. For ethvert nytt avsnitt (som er startet med <p>) er det underforstått at forrige avsnitt er avsluttet (med eller uten </p>). Det vil alltid bli luft mellom etterfølgende avsnitt tilsvarende ca. en tom linje. NB! For å få mer luft mellom avsnittene nytter det ikke med flere <p> etter hverandre (tomme avsnitt). Web-lesere ignorerer tomme avsnitt akkurat som de ignorerer flere enn ett blankt mellom hvert ord. Mer luft mellom avsnitt kan oppnås ved sekvenser som <p> <p>. Koden står for et såkalt "hardt" blankt tegn (nonbreaking space) som web-lesere ikke ignorerer, og som dermed gjør at et avsnitt ikke blir tomt. Tegnet medvirker også til at ordet før og etter alltid vil stå samlet og ikke bli delt på to linjer. 40

41 Din webside på www Når du lager din hjemmeside skal hovedsiden alltid ha navnet index.html Min hjemmeside: Da kommer jeg rett til index-siden 41

42 Neste gang Om hvordan data er representert i datamaskinen Tallsystemer Litteratur: Et ressurshefte blir delt ut. Øvingstimen denne uka: Utvid websiden din med overskrifter og avsnitt. Bruk malene fra forelesningen. 42