Læringsmål og pensum. Hvordan virker webteknologi? (klient-tjener arkitektur) HTML - virkemåte. Nettleser: Firefox, Opera, Safari

Transkript

1 1 2 Læringsmål og pensum TDT4105/4110 Informasjonsteknologi grunnkurs: Uke 35/36 HTML Førsteamanuensis Alf Inge Wang Læringsmål Lære å lage statiske hjemmesider Bilder Lenker Lister Tabeller Skjema for utfylling av data Endre utforming av hjemmesider ved hjelp av stiler og CSS Pensum Introduksjonshefte kapittel1 til TDT4105/4110 Informasjonsteknologi grunnkurs: 3 HTML - virkemåte <html> <head> <title>min webside</title> </head> <body> <h1>overskrift</h1> Dette er en webside </body> </html> Et dokument med etternavn.htm eller.html Leser inn HTML Nettleser: Firefox, Opera, Safari Presenterer dokumentet 4 Hvordan virker webteknologi? (klient-tjener arkitektur) Klient Ber om en webside: Sender HTML m.m. tilbake Nettverk Tjener

2 5 HTML - En intro HTML er en forkortelse for HyperText Markup Language: Hypertekst: Interaktive dokumenter der du kan hoppe mellom ulike dokumenter. Markup: Kan bruke bestemte merkelapper (tags) i et dokument for å bestemme egenskaper til innholdet, f.eks. Fet skrift. Språk: For å presentere interaktive dokumenter som kan inneholde tekst og multimedia på Internett. 6 Hva er html Hyper Text Markup Language Et standardisert markeringsspråk En merkelapp / tag Har et navn og ofte en start- og en sluttmerkelapp De fleste har innhold, men de kan være uten også: Skråstrek betyr avslutt <start> innhold </avslutning> <title> innhold </title> <br/> Forteller hvordan data som tekst og bilder skal presenteres i en nettleser TDT4105/4110 Informasjonsteknologi grunnkurs: 7 8 Internettside i HTML Litt om filnavn og websider Skal kan begynne med <HTML>, har et hode <HEAD> med en tittel <TITLE> og en kropp <BODY> Et HTML-dokument må ha etternavn.html eller.htm Eksempel på minimal webside: <html> <head> <title>tittel på websiden</title> </head> <body> Litt tekst kommer her. </body> </html> Noen websider har bestemte filnavn: Andre websider oppgir ikke bestemte filnavn: I slike tilfeller vil webtjeneren lete etter filer med navn index.htm, index.html, index.jsp, index,php osv. Hvis dere skal lage en egen webside på stud, bør dere ha en fil som heter index.html Eks:

3 9 Oversikt over enkle merkelapper Overskrifter: <h1>...</h1>, <h2>...</h2>,<h3>...</h3>... Avsnitt: <p>...</p> Vektlegge tekst (kursiv): <em>...</em> (kan bruke <i>...</i>) Uthevet tekst: <strong>...</strong> (kan bruke <b>...</b>) Senket tekst : <sub>...</sub> Hevet tekst : <sup>...</sup> Tvunget linjeskift: <br> Horisontal linjedeler (horizontal ruler): <hr> uke35-1.html 10 Merkelapper med attributter Merkelappene kan ha attributter <merkelappnavn attributtnavn= attributtverdi > Bakgrunnsfarge <body bgcolor= lightblue > Bilder <img src= bilde1.jpg /> uke35-2.html Eksempel: uke35-1.html Eksempel: uke35-2.html 11 uke35-3.html 12 Lister Hyperlenker Uordnede lister (punktlister) Ordnede lister (nummererte lister) Definisjonslister Eksempel: uke35-3.html <ul> <li>donald</li> <li>viggo</li> </ul> <ol> <li>donald</li> <li>viggo</li> </ol> <dl> <dt>donald</dt> <dd>en gal and</dd> <dt>viggo</dt> <dd>en fyr med trøbbel</dd> </dl> Brukes til å knytte sammen sider. Ved å bruke en hyperlenke, vil man få klikkbar tekst eller bilde som gjør at nettleseren vil lese inn en ny webside. Hyperlenker kan også brukes til å forflytte seg i samme dokument. Merkelappen til en hyperlenke er følgende: <a href= adressetilwebside >LenkeTekst</a> Eks: <a href= >Klikk for NRK</a> klikk for NRK Selve målet for lenken kan angis absolutt eller relativt

4 13 14 Absolutt hyperlenke Protokoll Domene / server Kataloger + filnavn <a href= >Eks1</a> En slik komplett adresse til filen kalles en URL og består av: Protokollen som brukes til å overføre filen http Domenet/serveren hvor filen ligger Filens plassering i domenet/på serveren ~alfw/jsp/eks1.html For å skille mellom mapper bruker vi / Rot Katalogstrukturer (trestruktur) Dokumenter Programmer Bilder Fritid Jobb Diverse Seriøst Spill Natur Folk Dyr fil. doc Absolutt adresse til et dokument i katalogen Fritid: Rot/Dokumenter/Fritid/fil.doc Relativ adresse hvis du står i katalogen Fritid: fil.doc Relativ adresse hvis du står i katalogen Dokumenter: Fritid/fil.doc Relativ adresse hvis du står i katalogen Diverse:../Fritid/fil.doc Relativ adresse hvis du står i katalogen Dyr:../../Dokumenter/Fritid/fil.doc 15 uke35-4.html 16 uke35-5.html Relativ hyperlenke Tabeller En relativ hyperlenke peker til websider relativt i forhold til hvor nåværende webside befinner seg. Relativ: <a href= eksempel1.html >Eks1</a> Lenken blir da relativ i forhold til dette dokumentets plassering I dette tilfellet må filen eksempel1.html ligge i samme mappe som den filen vi lager. Kan også bruke kataloger for relative hyperlenker <a href= historier/historie1.html >Historie1</a> Kan også angi websider i foreldre katalogen (katalogen over) <a href=../eksempel4.html >Eksempel4</a> Eksempel: uke35-4.html For å dele inn data i rader og kolonner Fire nye merkelapper Tabell: <table> </table> Lager nye rader: <tr> </tr> Radene må inn i en tabell Overskriftscelle: <th> </th> Vanlige celler: <td> </td> Cellene må inn i en rad Husk å avslutte merkelappene Eksempel: uke35-5.html <table> <tr> <th>tegneserie </th> <th>forklaring </th> </tr> <tr> <td>pondus </td> <td>fotballgale øldrikkere </td> </tr> </table

5 17 uke35-6.html 18 uke36-1.html Attributter for tabeller Farger Ramme: <table border= 1 /> Tekstplassering: Horisontalt: <td align= right /> Vertikalt: <td valign= bottom /> Utspente celler Over flere rader: <td rowspan= 2 /> Over flere celler: <td colspan= 3 /> Størrelse Bredde: <table width= 50% /> Vidde: <td height= 500px /> Vi kan forandre farger med attributter For å endre bakgrunnsfargen: <body bgcolor= lightblue > Her kan fargen angis som en tekst (lightblue, red, green, ) Vi kan også angi fargen som bestanddeler: #rødt grønt blått Fargene angis fra 00 til ff i det heksadesimale tallsystemet 0-9 som i det vanlige desimaletallsystemet Videre: 10 = a, 11 = b, 12 = c, d = 13, e = 14, f = 15, 16 = 10, Eksempel: <body bgcolor= #8899ff > Her kan dere prøver dere frem selv. Velg verdier fra 00 til ff og prøv. En del bildebehandlingsprogrammer kan gi dere denne fargeverdien fra et bilde Eksempel: uke35-6.html Form - skjema Vi kan fylle ut et skjema med informasjon av forskjellig typer og sende det over internett. Form - skjema Har to viktige attributter action: Hvor innholdet av skjemaet skal sendes Relativ adresse: action= rdform.pl" Absolutt adresse: action= E-postadresse: action= mailto:usr@stud.ntnu.no" method: Hvordan data sendes Som skjult tekst: method= post" Kan inneholde større datamengder/lengre tekststrenger Advarer mot å sende samme informasjon to ganger Som åpen tekst: method= get Lettere å se hva som blir sendt TDT4110 IT Grunnkurs

6 21 22 Input - tekstfelter Sende og nullstillingsknapp Finnes i flere typer Typen angis ved attributtet type= text Tekstfelter er kanskje den vanligste typen av datafeltene Navnet angis ved attributtet name= fornavn Vi må senere bruke fornavn for å få ta i dataene våre For tekstfelter kan vi også angi Lengde size= 30 Maks antall tillatte tegn maxlength= 15 Skjemaet må ha en knapp for å sende data Knappen er typen submit type= submit" Vi kan her angi hva som skal stå på knappen med value= send Skjemaet kan ha en knapp for å fjerne data Knappen er typen reset type= reset" Vi kan her angi hva som skal stå på knappen med value= nullstill <input type= text" name= fornavn" > <input type= text" name= fornavn" > <input type= submit" value= send" > <input type= reset" value= nullstill" > Knapper Select - flervalgsboks Avkryssingsboks Knappen er typen checkbox type= checkbox" Radioknapper Knappen er typen radio type= radio Flere knapper tilhører samme gruppe, men har forskjellig verdi name= kjonn value= mann name= kjonn value= kvinne <input type= checkbox" name= myndig" /> <input type= radio" name= kjonn" value= mann" /> <input type= radio" name= kjonn" value= kvinne" /> Kan brukes til å velge verdier fra en liste Bruker som de andre attributtet name name= reisemaal" Omslutter en eller flere merkelapper av typen <option> <option> gir valgmulighetene Må ha attributtet value value= egypt" < select name= reisemaal" > <option value= egypt" >Egypt</option> <option value= mexico" >Mexico</option> </select>

7 25 26 Textarea - stort tekstfelt Table - litt repetisjon Kan brukes til å skrive lengre tekster Bruker som de andre attributtet name name= kommentar For å angi størrelse Rader rows rows= 5 Kolonner cols cols= 20 <textarea name= kommentar rows= 3 cols= 10"></textarea> Hvordan kan vi få skjemaet vårt til å se ryddig ut? <table> <tr> <td>fornavn</td> <td><input type= text" name= fornavn" ></td> </tr> <tr> <td> <input type= submit" value= send" ></td> <td> <input type= reset" value= nullstill" ></td> </tr> </table Forandre utseende Forandre utseende For å forandre utseende på mobiltelefoner kan vi bytte deksel På en windows-pc kan vi bruke themes Vi ser at vi har det samme innholdet, men forskjellig utseende Vi kan gjøre det samme for html-dokumenter Eksempel: Vi bruker da noe som heter cascading style sheet Norsk : stilark TDT4110 IT Grunnkurs

8 29 30 Stilark/style sheets (CSS) External style sheet Html Forteller hvilken struktur et dokument skal ha CSS - Cascading Style Sheets Forteller hvordan html-elementer skal presenteres Vi har forskjellige typer CSS Browser default Standard for nettleser Inline Style For en merkelapp (se heftet for mer) Internal Style Sheet For et html dokument (se heftet for mer) External Style Sheet For et web-område (mange html dokumenter) Vi kan angi felles stil for flere dokumentet Stilene samles i egen fil Inneholder bare stiler Inne i html-filene må vi lenke til stilarket <head> <link rel="stylesheet" type="text/css" href= minstil.css"/> </head> 31 uke36-3.html 32 uke36-4.html Stiler style.css Classes (klasser) style2.css Stilene angis i en egen fil (minstil.css) slik merkelappnavn{ egenskap: verdi; egenskap: verdi; } For eksempel slik Gir utseende til innholdet i ALLE td-merkelappene td{ font-size: 16pt; font-family: arial; } Gir forskjellig utseende til like merkelapper Angis i css-filen med merkelappnavn.klassenavn td.red{color: #ff0000;} Eksempel Forandrer KUN utseende til innholdet i de td-merkelappene hvis klassen red angis. <td class="red"> </td>

9 33 uke36-5.html 34 Formatering av et område style3.css Oppsummering Usynlige merkelapper <div> </div> Lager automatisk linjeskift før og etter <div class= minklasse > </div> <span> </span> Kan brukes midt i en tekst <span class= minklasse > </span> HTML gir strukturen på dokumentet Vi har sett på merkelapper for formattering av tekst, bilder, hyperlenker, tabeller, webskjema, etc CSS forteller hvordan det skal presenteres visuelt Marger, farger, fontstørrelse, fonttype, bakgrunn, bokstavavstand, høyde, bredde, rammer, tekstplassering Ikke alle egenskapene er kompatible med alle nettlesere Eksterne style sheets er mest vanlig Størrelse kan gis i px (pixler), pt (points), em (emphasize) og % Skjemaer brukes til innfylling og sending av data 35 Nettsteder Fagets hjemmeside: w3schools: HTML help: 36 Hvordan legge ut en egen hjemmeside Først må du skaffe deg bruker til datasalene. Logge deg inn på en maskin på datasal (3.etg. P15) Starte opp programmet TextPad eller NotePad (TextWrangler Mac OS X) Skrive inn HTML-kode Lagre HTML-dokumentet: Velg Min datamaskin /my Computer Velg Q: (folk on Samba b (webedit.ntnu.no) ) Velg filtype HTML Velg navn på fil (f.eks. index) Du finner din hjemme side på: