Læringsmål og pensum. Skript og markupspråk. Hva er HTML?

Størrelse: px

Begynne med side:

Download "Læringsmål og pensum. Skript og markupspråk. Hva er HTML?"

Oddbjørn Carlsen
7 år siden
Visninger:

1 1 2 Læringsmål og pensum TDT4105 Informasjonsteknologi grunnkurs: Uke 46 Markup og skriptingspråk Alf Inge Wang Asbjørn Thomassen Mål Viktige begreper, forkortelser og prinsipper for markup og skriptingspråk Enkle merkelapper for statiske HTML-hjemmesider Bilder Lenker Lister Tabeller Skjema Pensum Chapter 10.6 i Using Information Technology TDT4105/4110 Informasjonsteknologi grunnkurs: 3 4 Skript og markupspråk Hva er HTML? Markupspråk (HTML, VRML, XML, SGML) er en form for koding vha merkelapper (tagger) som settes inn i teksten Inneholder detaljer om struktur og utseende (presentasjon) Skript (JavaScript, ActiveX, CGI, PHP) kort liste av selv-utførende kommandoer som er innebakt i en web-side for å utføre en eller annen oppgave (funksjon/ rutine) Vi skal mest se på HTML 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. 4

2 5 HTML - virkemåte! <head>! <title>min webside</title>! </head>!! <h1>overskrift</h1>! Dette er en webside!!! Et dokument med etternavn.htm eller.html Nettleser: Firefox, Opera, IE Presenterer dokumentet 6 Hvordan virker webteknologi? (klient-tjener arkitektur) Klient Ber om en webside: Sender HTML m.m. tilbake Nettverk Tjener HTML merkelapper Merkelappene ser slik ut: <MERKELAPPNAVN...> Bruker alltid <...> rundt en merkelapp Eksempler på fire svært vanlige merkelapper: <HTML>, <HEAD>, <TITLE>, <BODY> Ved hjelp av mange merkelapper og vanlig tekst kan vi lage sider med ulike utseender, bilder, animasjoner som er klikkbare. Merkelapper - egenskap De aller fleste merkelapper skal både begynnes og avsluttes: Skråstrek Merkelapp begynner slik: <TITLE> betyr avslutt Merkelapp avsluttes slik: </TITLE> Alt mellom <TITLE> og </TITLE> blir dermed tittelen til dokumentet. Eks: <TITLE>Min første Webside</TITLE> 7 8

3 9 Et html dokument 10 Oversikt over enkle merkelapper uke46-1.html Lenket, interaktivt tekstdokumenter som inneholder html-merkelapper Kan leses av en nettleser Internett Explorer, Firefox, Opera, Safari osv Lagres i tekstfiler med endelsene.html eller.htm Eksempel Html dokument med Overskrifter: <h1> tekst </h1> Avsnitt: <p> tekst </p> <head> <title>itgk</title> </head> 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/> Eksempel: uke46-1.html TDT4105/4110 Informasjonsteknologi grunnkurs: 11 uke46-2.html 12 Merkelapper med attributter Bilder i et HTML-dokument Merkelappene kan ha attributter <merkelappnavn attributtnavn= attributtverdi > Bakgrunnsfarge <body bgcolor= lightblue > Bilder <img src= bilde1.jpg /> <img src="storgitar.gif"> <img src="storgitar.gif" width="100" height="185" border="4"> Eksempel uke46-2.html: Bilder og bakgrunn

4 13 14 Lister Uordnede lister Ordnede lister Definisjonslister <ul> <li>pondus </li> <li>nemi </li> </ul> <ol> <li>pondus </li> <li>nemi </li> </ol> uke46-3.html <dl> <dt>pondus </dt> <dd>fotballgale øldrikkere</dd> <dt>nemi </dt> <dd>sarkastisk dame</dd> </dl> Hyperlenker Brukers til å knytte sider sammen. Ved å bruke en hyperlenke, vil man få klikkbar tekst eller bilde som gjør at nettleseren vil lese inn en ny webside. Hyper lenker kan også brukes til å forflytte seg i samme dokument. Merke lappen til 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 Absolutt hyperlenke Katalogstrukturer (trestruktur) <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 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 katalogen Fritid: fil.doc katalogen Dokumenter: Fritid/fil.doc katalogen Diverse:../Fritid/fil.doc katalogen Dyr:../../Dokumenter/Fritid/fil.doc

5 17 uke46-4.html 18 Relativ hyperlenke Bilder som anker i hyperlenker 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> <h2>trykk ikonet for å hente MatLab sin hjemmeside.</h2><br> <a href=" src="fig6.gif"></a> 19 Flytende bilde i et html-dokument <img src="gitar.gif" width="75" height="107" border="0" align="left alt= bilde av en gitar"> In my other life, I'm a guitar player and vocalist. I've been singing since I was a child, and was formally trained as a vocalist. I spent many years singing soprano in a variety of school choirs and other music organizations Tabeller 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 uke46-5.html En enkel tabell uke46-5.html <table> <tr> <th>tegneserie </th> <th>forklaring </th> </tr> <tr> <td>pondus </td> <td>fotballgale øldrikkere </td> </tr> </table

6 21 Attributter for tabeller 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 /> uke46-6.html uke46-7.html 22 Form - skjema Vi kan fylle ut et skjema med informasjon av forskjellig typer (tekst, radioknapper, flervalgsboks, avkrysningsboks, send/reset knapp) og sende det over internett. uke46-8.html Eksempel Hvordan kan vi lage denne tabellen? TDT4110 IT Grunnkurs 23 Skjema (form-merkelapp) Forms gjør det mulig å overføre data fra klientmaskin til server Form (HTML-skjema) overføres fra server, tolkes av klientmaskinens nettleser. Tag innenfor form bestemmer skjema på skjermen, f.eks: Select gir rullgardinmeny som skjema (flervalgsboks) <form action=""> <select name= Reisemål"> </form> <option value= egypt">egypt</option> <option value= hellas >Hellas</option> </select> <input type="radio" name="kjønn" value= Kvinne> <input type="checkbox" name= myndig" value= N">Myndig<br> <textarea name="kommentar" rows= 7 cols= 30 > Skriv kommentarene dine her.. </textarea> Bruker fyller inn data i skjema (tekst/valg knapper etc se neste foil) Alle skjema er utstyrt med en send (Submit)-knapp. Når submit-knapp trykkes overføres data i skjema fra klientmaskin til server (må ha et program der som mottar og behandler dataene) 24 Andre markup og skriptingspråk VRML virtual reality markup language brukes til å lage 3D web-sider. Språket utvider webens muligheter til å levere informasjon. XML extensible markup language kommunikasjonsmiddel mellom ulike informasjonssystemer og dataformater basert på SGML mer kraftfull enn HTML med bruk av generelle tagger What it is vs How it looks tillater web-designere å legge til egne tagger i web-siden. Organiserer data i en hierarkisk struktur.

7 25 26 Andre markup og skriptingspråk(2) JavaScript objekt-orientert skriptingspråk brukes bl.a til å skrive små funksjoner inne i HTML-sider for å lage kraftfulle dynamiske web-sider. bruker browserens innebygde funksjoner (må støtte JavaScript) Andre språk: ActiveX, CGI, PHP JavaScript eksempel <head><title>simple page</title></head> <script type="text/javascript"> document.write('hello World!'); </script> <noscript> JavaScript programkode inn her. Benytter funksjoner i browseren <p>your browser either does not support JavaScript, or you have JavaScript turned off.</p> </noscript>

Like dokumenter

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

Læringsmål og pensum. Hvordan virker webteknologi? (klient-tjener arkitektur) HTML - virkemåte. Nettleser: Firefox, Opera, Safari 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