Utvikling og Publisering av Websider

Transkript

1 Utvikling og Publisering av Websider Erik Hjelmås, HiG 26. juni Introduksjon På begynnelsen av 90-tallet oppsto tjenesten World Wide Web på internet. Dette systemet baserer seg på presentasjon av informasjon i form av hypertekst dokumenter. Dokument formatet for disse dokumentene kalles hyper tekst mark-up language (HTML). Reglene for hvordan disse dokumentene utveksles og tolkes kalles hypertekst transfer protokoll (HTTP). 2 Hva er hypertekst? Hypertekst vil i praksis si at vi kan linke dokumenter sammen, dokumenter som kan befinne seg hvor som helst på internet. Dette kalles hypertekst fordi et dokument kan inneholde informasjon som befinner seg fysisk et helt annet sted enn det opprinnelige dokumentet. 3 HTML HTML er et dokumentbeskrivelsesspråk (mark-up language). Du vil snart se hva det betyr. HTML er en begrenset spesifisert versjon av et mer generelt dokumentbeskrivelsesspråk som heter S- GML (standard generalized mark-up language). I det siste har det dukket opp en annen versjon som heter XML (extended mark-up language). XML er mer liknende SGML enn HTML. Et HTML dokument er bygget opp ut fra følgende struktur: <HTML> <HEAD> div info om dokumentet (meta-informasjon) </HEAD> <BODY> selve innholdet i dokumentet beskrevet med koder </BODY> </HTML> Et HTML dokument er en tekstfil bestående av teksten du skal ha i dokumentet ditt sammen med en masse HTML-merker som beskriver hvordan dokumentet er strukturert og skal se ut. Et HTML-merke er omringet av større-enn og mindre-enn tegn (som vist over). Et HTML-merke kalles også tag eller element og det kan i tillegg til det du ser over inneholde attributter. HTML er ikke følsomt for store og små bokstaver (er ikke case-sensitive ), men det er en god regel å alltid bruke store bokstaver i merkene (da blir selve HTML-koden til dokumentet letter å lese). 1

2 4 Hvorfor bruker vi ikke bare en webeditor? Godt spørsmål, vi kan jo egentlig bare skrive i MSWord og velge lagre som html... Men vi skal nå i starten skrive HTML-koden selv med bruk av en teksteditor (Notepad). Det er klart at det ofta går raskere å bruke en webeditor, og når du føler deg komfortabel med HTML bør du finne frem en webeditor ala MSFrontPage el.l. Men fordelene med å lære seg HTML først er følgende: Bedre HTML kode en webeditor vil alltid legge på en masse unødvendige kode og gjøre k- ildekoden vanskelig å lese, dessuten legger den gjerne på HTML-merker som ikke er en del av den offisielle HTML-standarden Læringseffekten kan du HTML skikkelig gir deg en langt bedre forståelse av filformater og datateknisk tankegang, og det setter deg i stand til å ta i bruk en hvilken som helst webeditor Java, CGI, PHP osv vil du aldri skjønne viss du ikke lærer HTML skikkelig først Større frihet og fleksibilitet et verktøy vil alltid sette begrensninger på hva du kan gjøre, men koder du selv kan du gjøre nesten hva du vil med langt større kontroll 5 Hvordan publisere en webside? For å legge en webside slik at du finner den på www, må du legge den under en eller annen mappe på hjemmeområdet ditt på en webserver (som regel heter denne public_html). Ved HiG heter webservern higstud6 (den går også under navnet studenter) og den aktuelle mappen for oss er montert opp på W-stasjonen. Denne mappen finner du på internet under en addresse ala (f.eks. ved HiG Dette er relativt enkelt siden hjemmeområdet ditt er montert på PCn du sitter ved i det du logger deg inn (ved HiG sitt system). Oftest er det ikke så enkelt. For å illustrere den mest vanlige måten å publisere på skal vi også publisere på en linux maskin ved å bruke filoverføringsprogrammet ftp. Men opplegget er det samme, du publiserer en webside ved å legge den under public_html katalogen på hjemmeområdet ditt 1.Grunnen til dette er at minst 50% av webservere på internet er Apache (som forøvrig er fri programvare) som kjører på unix-maskiner (mest linux eller annen fri unix-variant), mens ca 25% er Microsoft Internet Information Server, og i de fleste tilfeller hvor du skal publisere en webside må du benytte ftp til å overføre filene til en unix server. Se forøvrig [2]. 6 Hvordan stjele fra andre? Det høres kanskje stygt ut, men fakta i dag er at de aller fleste kopierer gjerne andre sider og tilpasser disse litt for å lage sine egne. Dette er helt tillatt så lenge det ikke er copyright inne i bildet. Grunnen til at dette ofte er veien å gå, er at man kan på alle sider man er innom gå inn og se på hvordan HTML-koden for siden ser ut. Dette gjør du ved å klikke view page source (herfra er det greit å merke teksten og kopiere den ut med CTRL+C og lime inn i notepad med CTRL+V). Forøvrig bør man gjøre seg kjent med hva man har lov å ikke lov å publisere viss du blir involvert i et større prosjekt, mye om dette kan du finne på datatilsynet sine websider på [1]. 1 Dette gjelder i utg pkt personlige hjemmesider. For bedrifter med egen webserver plasseres sidene på et eget område, f.eks. på en linux-webserver vil det kanskje være på /home/httpd/html. 2

3 7 Bittelitt om design og bilder For alle vanlige bilder (landskapsbilder osv) bør du bruke jpg-bilder for de tar minst plass. For knapper og mindre bilder med skarpe kanter bør du bruke gif-bilder. På sikt bør du bruke png i stedet for gif, siden gif har lisensproblemer. Men foreløpig håndterer ikke alle weblesere png like bra, så du bør bruke gif fortsatt så lenge det dreier seg om en mindre website. Generelt bør du styre unna animerte bilder (selv om du enkelt kan lage dette innenfor gif og png standardene) siden det bare er forstyrrende. Med gif eller png kan du også lage gjennomsiktige bilder, men det er også sjeldent å foretrekke, lag heller bilder som har samme bakgrunnsfarge som bakgrunnsfargen på websiden din. Viss du ønsker lete etter bilder som du kan sette inn på siden din kan du søke på web n eller starte på f.eks. [5]. 8 Websikre farger Siden det sitter mennesker med alle typer datamaskiner og forskjellige weblesere og surfer på www, vil websidene vi lager ofte vises forskjellig. Spesielt gjelder dette hvilke farger du bruker. Derfor er det definert et sett med 216 websikre farger (figur 1) som vi bør holde oss til. Disse vil være like uansett hvilken relativt ny webleser du benytter. Farger angis som regel med en 6-sifret hexadesimal kode, dvs en kode fra (svart) til FFFFFF (hvit), hvor to og to siffer representerer respektivt rødt, grønt og blått. 9 Hva er en webside/website/hjemmeside? La oss definere det slik (selv om det brukes litt om hverandre): webside en webside er et HTML-dokument som er publisert på www website en website er alle sidene til et bestemt websted (f.eks. alt som ligger under adresser som begynner med er HiG s website) hjemmeside er hovedsiden til en website (f.eks. er siden du kommer til med adressen hjemmesiden til HiG) 10 Hvordan fungerer webleseren? Når du oppgir en adresse (en URL - universal resource locator) til en webleser (som f.eks. netscape), går webleseren til denne adressen og leter etter en fil som heter index.html (evn index.htm). Viss webleseren finner denne filen viser den denne, ellers viser den bare en liste over innholdet i mappe. Det er derfor lurt at hovedsiden under hver mappe på webmappen din (f.eks. W: her på HiG) heter index.html. 11 HTML standarden og weblesere HTML er en åpen standard, men desverre lager ofte kommersielle firmaer sine egne tillegg (extensions) til disse standardene, OG DET ER EN UTING! Dette har ført til at både Netscape og 3

4 Figur 1: De websikre fargene. Viss denne figuren er utydelig kan du se på [4] 4

5 Internet Explorer har sine egne HTML-merker i tillegg til vanlig HTML standard som bare fungerer i demmes egne weblesere. Disse merkene bør vi styre unna, de er markert i den vedlagte Barebones Guide to HTML. 12 Hva er en plug-in? En plug-in er et program man kan hente ned fra nettet og installere slik at det fungerer som et hjelpeprogram til Webleseren for å få sett på sider som webleseren egentlig ikke kan lese. F.eks. bruker vi Adobe Acroread som en plug-in til webleseren for å lese pdf dokumenter. 13 Hva finnes i webdokumenter utenom HTML-kode? HTML er det alle websider er basert på. Men viss du ønsker at websiden din skal være mer avansert, eller det skal skje noe mer enn bare visning av informasjon, kan mye annet legges til, her er noen eksempler: flash en teknologi fra Macromedia for å lage fancy websider, krever at man har en plug-in (som er gratis) javascript et script-språk for å få til bl. a. interaktivitet (f.eks. at noe lyser opp når markøren flyttes over et punkt i siden) java applets programmer som kan kjøres på websiden din (f.eks. dataspill). Disse programmene lastes ned og kjøres på maskina di, dvs de kjøres på klientsiden java servlets programmer som kan kjøres på websiden din men som kjøres på webservern i motsetning til java applets CGI (Common Gateway Interface) programmer som du kan kalle fra websiden din for å få utført spesielle oppgaver (f.eks. dialogboks for å sende mail) PHP (Professional Home Pages) et programmeringsspråk/scriptspråk som brukes for å lage dynamiske websider (dvs sider som genereres i det du henter dem til webleseren) ASP (Active Server Pages) Microsoft sin versjon av PHP Vi skal ikke gå igjennom noe av dette nu, da det meste forutsetter at man kan litt programmering. 14 Hvordan vet jeg at jeg har skrevet riktig HTML-kode? Viss du vil være nøye, og sjekke at HTML-koden din er helt ihht til HTML-standarden kan du gå til [3] og skrive inn addressen til siden din og få den sjekket. 15 Noen nyttige ressurser webdev.wrox.co.uk/html4db - HTML referanse - masse programvare - webinterface mot deler av GIMP (Photoshop liknende) - gratis addresser - registrere domene - for overvåkning av sidene dine - masse linker til andre ressurser 5

6 16 Øving - HTML I denne øvingen skal vi starte med et enkelt dokument og utvide det gjennom hele øvingen. Sørg for å lagre ofte underveis. Du kan publisere siden underveis ved av og til å kopiere den til W: området ditt Et enkelt HTML dokument 1. Start Utforsker og lag en mappe som du kaller websider på hjemmeområdet ditt. Denne mappen lager du får å ha et sted å lagre lokalt websidene du utvikler og skal publisere etter hvert. 2. Start teksteditoren Notepad, og skriv inn teksten <HTML> <HEAD> <TITLE>Velkommen til skolen!</title> </HEAD> <BODY BGCOLOR= #FFFFFF > Velkommen til skolen! </BODY> </HTML> lagre denne med filnavnet index.html i mappen H:\websider (som du opprettet i pkt 1). 3. Start Netscape og velg file-open page... og åpne og se på websiden du nettopp har laget. Underveis bør du hele tiden ha tilgjengelig både notepad (hvor du utvikler sider) og Netscape (hvor du ser på resultatet) Litt formatering 1. Utvid dokumentet ditt til følgende <HTML> <HEAD> <TITLE>Velkommen til skolen!</title> </HEAD> <BODY BGCOLOR= #FFFFFF > <H1>Velkommen til skolen!</h1> <B>Skolen vår</b> er en grunnskole som er kjempetrivelig! <P> <I>Mer informasjon om <B>skolen vår</b> kan du få ved å ringe </I> </BODY> </HTML> lagre dokumentet ditt når du har gjort disse endringene 2. Klikk reload i Netscape for å se på hvordan dokumentet ditt ser ut nå. 3. Endre størrelser på webleservinduet ditt slik at du ser hvordan webleseren tilpasser teksten til den plassen du har tilgjengelig Lister 1. Utvid dokumentet ditt til følgende <HTML> 6

7 <HEAD> <TITLE>Velkommen til skolen!</title> </HEAD> <BODY BGCOLOR= #FFFFFF > <H1>Velkommen til skolen!</h1> <B>Skolen vår</b> er en grunnskole som er kjempetrivelig! <P> <HR> <UL> <LI>Hovedside <LI>Om Skolen <LI>Bilder <LI>Elevarbeider </UL> <HR> <I>Mer informasjon om <B>skolen vår</b> kan du få ved å ringe </I> </BODY> </HTML> lagre dokumentet ditt når du har gjort disse endringene 2. Klikk reload i Netscape for å se på hvordan dokumentet ditt ser ut nå Grafikk Nå kan du prøve sette inn et bilde et sted i dokumentet ditt. Prøv flere steder slik at du du ser hvor det ender hen når du ser på siden i Netscape. Du finner bildet skolelogo.jpg på websiden for kurset. Bruk koden <IMG SRC=./skolelogo.jpg ALT= Ooops! her skulle det vært et Bilde... > Husk at HTML er ikke følsomt for små og store bokstaver, men filnavn og referanser er det, slik at du passer på å skrive dem helt korrekt Linker (hyperkoblinger) Nå skal du gjøre dokumentet ditt til hypertekst ved å sette inn hyperkoblinger. Endre punktlisten din slik at den ser ut som: <UL> <LI><A HREF=./index.html >Hovedside</A> <LI><A HREF= >Om Skolen</A> <LI>Bilder <LI>Elevarbeider </UL> 16.6 Tabeller Du har sikkert lagt merke til at Webleseren plasserer det vi inkluderer på websiden vår litt slik den vil. En av måtene vi har for å sikre at vi får plassert ting på siden vår på riktig sted, er ved å legge det i tabeller. Endre siden din til <HTML> <HEAD> <TITLE>Velkommen til skolen!</title> 7

8 </HEAD> <BODY BGCOLOR= #FFFFFF > <H1>Velkommen til skolen!</h1> <B>Skolen vår</b> er en grunnskole som er kjempetrivelig! <P> <HR> <TABLE> <TR> <TD> <UL> <LI><A HREF=./index.html >Hovedside</A> <LI><A HREF= >Om Skolen</A> <LI>Bilder <LI>Elevarbeider </UL> </TD> <TD> <IMG SRC=./skolelogo.jpg ALT= Ooops! her skulle det vært et Bilde... > </TD> </TR> </TABLE> <HR> <I>Mer informasjon om <B>skolen vår</b> kan du få ved å ringe </I> </BODY> </HTML> Prøv å sett inn attributtet WIDTH=200 i første TD element, og se hva som skjer. Sett også på noen av de andre attributten du finner i Barbones Guide to HTML. Prøv å endre størrelse på webleservinduet ditt nå og se at tabellen du har satt inn låser listen og bildet på bestemt sted Rammer (Frames) Du kan dele opp websiden din og vise flere undersider med bruk av rammer. Du kan se et eksempel på [6] Bildekart På websiden for kurset ([7]) ligger et bilde av Oppland fylke. Hent ned dette og lag det slik at du kan klikke på Gjøvik delen av kartet for å komme til Eksempel på hvordan dette gjøres kan du se på og se hvordan menyen der er laget. Se forøvrig i Barebones Guide to HTML Kommentarer og metainformasjon Du kan sette inn kommentarer hvor som helst i dokumentet ditt med HTML merket  Viss du ønsker at siden din skal bli lettere å finne via enkelte søkeverktøy så kan du sette inn litt meta-informasjon i HEAD delen av siden, f.eks. <META NAME= KEYWORDS CONTENTS= mine stikkord adskilt med komma > 8

9 For å være helt formel riktig med dokumentet skal det også ha følgende angivelse aller først i dokumentet <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 TRANSITIONAL//EN > 17 Øving - Publisering av websider med ftp Du har allerede publisert websiden på enklest mulig måte. Men denne metoden er ikke alltid tilgjengelig, derfor skal vi nå kikke på hvordan vi kan gjøre dette med ftp (file transfer protocol). 1. Start programmet WS_FTP og åpne en forbindelse til loke.hig.no. 2. Velg riktig mappe på hver side og overfør filer ved å merke dem og klikke på piltastene. 3. Se på siden på 18 En oversikt over HTML merkene T H E B A R E B O N E S G U I D E T O H T M L av Kevin Werbach < Oversatt av Sondre Skaug Bjŕrnebekk < sbjorneb/> Version Januar Dette dokumentet er tilgjengelig pâ < der finner du ogsâ HTML-versjonen av dokumentet, oversettelser og bakgrunnsmateriale. The Bare Bones Guide to HTML gir en oversikt over alle elementer det er sannsynlig at dagens nettlesere vil forstâ. Jeg har tatt med alle elementene i den offisielle HTML 4.0 anbefalingen med vanlige attributter, samt Netscapes og Microsofts utvidelser. Dette dokumentet er en konsis oversikt, ikke en komplett spesifikasjon; for offisiell informasjon om HTML og dets utvikling, referer til websiden til World Wide Web Consortium (W3C) pâ < Guiden er skrevet med tanke pâ Â vêre sâ konsis som mulig, derfor gâr den ikke i detalj angâende bruken av de ulike elementene. Du finner linker til gode steg-for-steg HTML guider pâ < FORMATERING AV DETTE DOKUMENTET Dokumentet tar seg best ut i en skrifttype med jevn tegnbredde (monospaced). Jeg har delt attributter som kan brukes pâ samme element over flere linjer, for Â gjŕre det sâ oversiktlig som mulig. Generelt sett kan flere attributter kombineres i samme element. 9

10 Elementene er skrevet med store bokstaver for Â gjŕre de lett Â lese, men de fleste elementene skiller ikke mellom store og smâ bokstaver. SYMBOLER BRUKT I DOKUMENTET URL URL til en ekstern fil (eller bare et filnavn, dersom i samme katalog)? VilkÂrlig siffer (dvs. <H?> betyr <H1>, <H2>, <H3>, osv.) % VilkÂrlig prosent (dvs. <HR WIDTH="%"> betyr <HR WIDTH="50%">, osv.) *** VilkÂrlig tekst (dvs. ALT="***" betyr fyll in tekst der * stâr) $$$$$$ VilkÂrlig hex (dvs. BGCOLOR="#$$$$$$" betyr BGCOL- OR="#00FF1C", osv.) ::: VilkÂrlig dato (dvs. DATETIME=":::" betyr " T08:15:30" E- post adresse (dvs. "mailto:@" betyr "mailto:kevin@werbach.com" osv.), Komma-separert (dvs. COORDS="," betyr COORDS="0,0,50,50", osv.) Alternativer (dvs. ALIGN=LEFT RIGHT CENTER betyr velg en av disse) KOMPABILITET (husk: HTML utvikles og nettlesernes implementasjoner varierer) (ingen merknad) Er i HTML 3.2 spes.; burde virke i alle nettlesere 4.0 Introdusert i HTML 4.0 anbefalingen N1 Netscape utvidelse introdusert med Navigator versjon 1.0 eller 1.1 N2 Netscape utvidelse introdusert med Navigator versjon 2.0 N3 Netscape utvidelse introdusert med Navigator versjon 3.0 N4 Netscape utvidelse introdusert med Navigator/Communicator versjon 4.0 MS Microsoft Internet Explorer utvidelse * Netscape utvidelse som nâ er med i HTML 4.0 spesifikasjonen =========================================================================== =========================================================================== GENERELT (alle HTML dokumenter bŕr ha disse) Type dokument <HTML></HTML> (begynnelse og slutt pâ filen) Tittel <TITLE></TITLE> (skal vêre i dokumenthodet) Dokumenthode <HEAD></HEAD> (beskrivende info, f.eks. tittel) Dokumentkropp <BODY></BODY> (hoveddelen av siden) STRUKTURDEFINISJONER (utseende styres av nettleserens forhândsinnstillinger) Overskrift <H?></H?> (spesifikasjonen definerer 6 nivâer) Juster overskrift <H? ALIGN=LEFT CENTER RIGHT></H?> Inndeling (blokk) <DIV></DIV> Juster inndeling <DIV ALIGN=LEFT RIGHT CENTER JUSTIFY></DIV> 4.0 Inndeling (inline)<span></span> Sitatblokk <BLOCKQUOTE></BLOCKQUOTE> (vises som regel innrykket) 4.0 Sitat <Q></Q> (for korte sitater) 4.0 Henvisning <Q CITE="URL"></Q> Utheving <EM></EM> (vises vanligvis i kursiv) Sterk utheving <STRONG></STRONG> (vises vanligvis med fete typer) Henvisning <CITE></CITE> (vises vanligvis i kursiv) Kildekode <CODE></CODE> (for opplistinger av kildekode) Eks. pâ utskrift <SAMP></SAMP> Eks. pâ innles. <KBD></KBD> Variabel <VAR></VAR> Definisjon <DFN></DFN> (ikke utbredt implementert) Forfatteradresse <ADDRESS></ADDRESS> Stor skriftstr. <BIG></BIG> Liten skriftstr. <SMALL></SMALL> 4.0 Innsetting <INS></INS> (viser tillegg i en ny versjon) 10

11 4.0 Endringstidspunkt <INS DATETIME=":::"></INS> 4.0 Kommentar <INS CITE="URL"></INS> 4.0 Sletting <DEL></DEL> (viser sletting i en ny versjon) 4.0 Endringstidspunkt <DEL DATETIME=":::"></DEL> 4.0 Kommentar <DEL CITE="URL"></DEL> 4.0 Forkortelse <ACRONYM></ACRONYM> 4.0 Forkortelse <ABBR></ABBR> (Uttalbar forkortelse slik som NUPI) PRESENTASJONSFORMATERING (forfatteren spesifiserer utseende) Fet skrift <B></B> (eng: bold) Kursiv <I></I> (eng: italics) 4.0* Understreking <U></U> (ikke fullt ut implementert) Gjennomstreking <STRIKE></STRIKE> (ikke fullt ut implementert) 4.0* Gjennomstreking <S></S> (ikke fullt ut implementert) Senket skrift <SUB></SUB> Hevet skrift <SUP></SUP> Skrivemaskin <TT></TT> (eng: typewriter, vises monospaced) Preformatert <PRE></PRE> (viser mellomrom i teksten der det er) Bredde <PRE WIDTH=?></PRE> (i antall tegn) Sentrert <CENTER></CENTER> (for bâde tekst og bilder) N1 Blinkende tekst <BLINK></BLINK> (den mest misbrukte tag noensinne) Skriftstŕrrelse <FONT SIZE=?></FONT> (en verdi i omrâdet 1-7) Endre skriftstr. <FONT SIZE="+ -?"></FONT> Skriftfarge <FONT COLOR="#$$$$$$"></FONT> 4.0* Velg skrifttype <FONT FACE="***"></FONT> N4 Stŕrrelse i pkt <FONT POINT-SIZE=?></FONT> N4 Tykkelse <FONT WEIGHT=?></FONT> 4.0* Grunnstŕrrelse <BASEFONT SIZE=?> (fra 1-7; standard er 3) MS Rullende tekst <MARQUEE></MARQUEE> POSISJONERING N3 Flere kolonner <MULTICOL COLS=?></MULTICOL> N3 Marg <MULTICOL GUTTER=?></MULTICOL> N3 Kolonnebredde <MULTICOL WIDTH=?></MULTICOL> N3 Mellomrom <SPACER> N3 Type mellomrom <SPACER TYPE=HORIZONTAL VERTICAL BLOCK> N3 Stŕrrelse <SPACER SIZE=?> N3 Dimensjoner <SPACER WIDTH=? HEIGHT=?> N3 Justering <SPACER ALIGN=LEFT RIGHT CENTER> N4 Lagdeling <LAYER></LAYER> N4 Navn <LAYER ID="***"></LAYER> N4 Plassering <LAYER LEFT=? TOP=?></LAYER> N4 Rel. Posisjon <LAYER PAGEX=? PAGEY=?></LAYER> N4 Kildefil <LAYER SRC="***"></LAYER> N4 Stablingsorden <LAYER Z-INDEX=?></LAYER> N4 Plass i stabel <LAYER ABOVE="***" BELOW="***"></LAYER> N4 Dimensjoner <LAYER HEIGHT=? WIDTH=?></LAYER> N4 OpptegningsomrÂde <LAYER CLIP=,></LAYER> (rel. til laget) N4 Synlig? <LAYER VISIBILITY=SHOW HIDDEN INHERIT></LAYER> N4 Bakgrunn <LAYER BACKGROUND="$$$$$$"></LAYER> N4 Farge <LAYER BGCOLOR="$$$$$$"></LAYER> N4 Lagdeling (inline) <ILAYER></ILAYER> (tar samme attributter som LAY- ER) N4 Alternativt Innhold <NOLAYER</NOLAYER> LINKER, GRAFIKK OG LYD Link til noe <A HREF="URL"></A> Link til bokmerke <A HREF="URL#***"></A> (hvis i et annet dokument) 11

12 <A HREF="#***"></A> (hvis i samme dokument) 4.0* MÂlvindu <A HREF="URL" TARGET="***"></A> 4.0* Hendelse v/klikk <A HREF="URL" ONCLICK="***"></A> (Javascript) 4.0* Hendelse v/pek <A HREF="URL" ONMOUSEOVER="***"></A> (Javascript) 4.0* Hendelse v/pek vekk <A HREF="URL" ONMOUSEOUT="***"></A> (Javascript) Link til E-post <A HREF="mailto:@"></A> Spesifiser emne <A HREF="mailto:@?SUBJECT=***"></A> (virkelig? ) Definer bokemerke <A NAME="***"></A> Vis bilde <IMG SRC="URL"> Justering <IMG S- RC="URL" ALIGN=TOP BOTTOM MIDDLE LEFT RIGHT> N1 Justering <IMG SRC="URL" ALIGN=TEXTTOP ABSMIDDLE BASELINE ABSBOTTOM> Alternativ tekst <IMG SRC="URL" ALT="***"> (hvis bildet ikke vises) Dimensjoner <IMG SRC="URL" WIDTH=? HEIGHT=?> (i bildepunkter) <IMG SRC="URL" WIDTH=% HEIGHT=%> (i prosent) Kantlinje <IMG SRC="URL" BORDER=?> (i bildepunkter) Plass rundt <IMG SRC="URL" HSPACE=? VSPACE=?> (i bildepunkter) N1 Lav-opplŕs. alt. <IMG SRC="URL" LOWSRC="URL"> Bildekart <IMG SRC="URL" ISMAP> (serverside imagemap) Bildekart <IMG SRC="URL" USEMAP="URL"> MS Filmklipp <IMG DYNSRC="***" START="***" LOOP=?> MS Bakgrunnslyd <BGSOUND SRC="***" LOOP=? INFINITE> Bildekart-definisjon <MAP NAME="***"></MAP> (definerer bildekartet) BildekartsomrÂde <AREA SHAPE="DEFAULT RECT CIRCLE POLY" COORDS="," HREF="URL" NOHREF> N1 Videresending <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"> N2 Innebygg objekt <EMBED SRC="URL"> (sett objekt inn pâ siden) N2 Stŕrrelse pâ objekt <EMBED SRC="URL" WIDTH=? HEIGHT=?> 4.0 Objekt <OBJECT></OBJECT> 4.0 Parametre <PARAM> INNDELINGER Avsnitt <P></P> (eng: paragraph, ofte implisitt s- lutt) Justering <P ALIGN=LEFT CENTER RIGHT></P> N Blokkjustering <P ALIGN=JUSTIFY></P> Linjeskift <BR> (tilsvarer return/enter/linjeskift) Clear Textwrap <BR CLEAR=LEFT RIGHT ALL> Horisontal linje <HR> Justering <HR ALIGN=LEFT RIGHT CENTER> Tykkelse <HR SIZE=?> (i bildepunkter) Bredde <HR WIDTH=?> (i bildepunkter) Bredde (prosent) <HR WIDTH="%"> (i prosent av sidebredde) Massiv linje <HR NOSHADE> (ikke 3D utseende) N1 Ikke linjeskift <NOBR></NOBR> (eng: no break, hindrer linjeskift) N1 Orddeling <WBR> (hvor linjen skal deles om nŕdvendig) LISTER (det er mulig med flere nivâer, "lister i lister") - Unummerert liste <UL><LI></UL> (<LI> fŕr hvert punkt i listen) Kompakt liste <UL COMPACT></UL> Type merking <UL TYPE=DISC CIRCLE SQUARE> (for hele listen) <LI TYPE=DISC CIRCLE SQUARE> (for dette p- kt og resten) Nummerert liste <OL><LI></OL> (<LI> fŕr hvert punkt i listen) Kompakt liste <OL COMPACT></OL> Nummereringstype <OL TYPE=A a I i 1> (for hele listen) <LI TYPE=A a I i 1> (for dette pkt og resten) Startverdi <OL START=?> (for hele listen) 12

13 <LI VALUE=?> (for dette pkt og resten) Definisjonsliste <DL><DT><DD></DL> (<DT>=begrep (term), <DD>=definisjon) Kompakt liste <DL COMPACT></DL> Menyliste <MENU><LI></MENU> (<LI> fŕr hvert punkt i listen) Kompakt meny <MENU COMPACT></MENU> Katalogliste <DIR><LI></DIR> (<LI> fŕr hvert punkt i listen) Kompakt kat.l. <DIR COMPACT></DIR> BAKGRUNNER OG FARGER Bakgrunn <BODY BACKGROUND="URL"> (gjentakende bakgrunn) MS Vannmerke <BODY BGPROPERTIES="FIXED"> (ikke gjentakende) Bakgrunnsfarge <BODY BGCOLOR="#$$$$$$"> (rekkefŕlge er rŕd/grŕnn/blâ) Tekstfarge <BODY TEXT="#$$$$$$"> Linkfarge <BODY LINK="#$$$$$$"> Besŕkt link <BODY VLINK="#$$$$$$"> Aktiv link <BODY ALINK="#$$$$$$"> (Mer informasjon pâ < SPESIELLE TEGN (her skilles det mellom store og smâ bokstaver) Spesialtegn &#?; (der? er ISO koden) < < > > & & " " Registered TM Registered TM Copyright Copyright Non-Breaking Spc Norsk Ê æ Norsk &Aelig; Norsk ŕ ø Norsk ß Ø Norsk Â å Norsk Å (Komplett liste finnes pâ < SKJEMAER (ENG: FORMS) (mest nyttig med et script pâ din webserver) Definer skjema <FORM ACTION="URL" METHOD=GET POST></FORM> 4.0* Opplasting av fil <FORM ENCTYPE="multipart/form-data"></FORM> Inndatafelt <INPUT TYPE="TEXT PASSWORD CHECKBOX RADIO FILE BUTTON IMAGE HIDDEN SUBMIT RESET"> Feltnavn <INPUT NAME="***"> Feltverdi <INPUT VALUE="***"> Avkrysset? <INPUT CHECKED> (avskrysningsfelter og radioknapper) Feltstŕrrelse <INPUT SIZE=?> (i antall tegn) Maksimal lengde <INPUT MAXLENGTH=?> (i antall tegn) 4.0 Knapp <BUTTON></BUTTON> 4.0 Navn pâ knapp <BUTTON NAME="***"></BUTTON> 4.0 Type knapp <BUTTON TYPE="SUBMIT RESET BUTTON"></BUTTON> 4.0 Tekst pâ knapp <BUTTON VALUE="***"></BUTTON> 4.0 Etikett <LABEL></LABEL> 4.0 Etikett for <LABEL FOR="***"></LABEL> Utvalgsliste <SELECT></SELECT> Navn pâ liste <SELECT NAME="***"></SELECT> Antall alt. <SELECT SIZE=?></SELECT> Flervalg? <SELECT MULTIPLE> (kan velge ut mer enn en) Valgbart element <OPTION> 13

14 Utgangsverdi <OPTION SELECTED> (valgt nâr siden lastes) Elementets verdi <OPTION VALUE="***"> 4.0 Valgbar gruppe <OPTGROUP LABEL="***"></OPTGROUP> Inndatafelt <TEXTAREA ROWS=? COLS=?></TEXTAREA> Navn pâ felt <TEXTAREA NAME="***"></TEXTAREA> N2 Tekstbrytning <TEXTAREA WRAP=OFF HARD SOFT></TEXTAREA> 4.0 Grupper elementer <FIELDSET></FIELDSET> 4.0 Forklaring <LEGEND></LEGEND> (overskrift for fieldsets) 4.0 Justering <LEGEND ALIGN="TOP BOTTOM LEFT RIGHT"></LEGEND> TABELLER Definer tabell <TABLE></TABLE> 4.0* Justering <TABLE ALIGN=LEFT RIGHT CENTER> Kantlinje <TABLE BORDER></TABLE> (av/pâ) Kantlinje <TABLE BORDER=?></TABLE> (i bildepunkter) Cellemellomrom <TABLE CELLSPACING=?> Mellomrom i celle <TABLE CELLPADDING=?> ßnsket bredde <TABLE WIDTH=?> (i bildepunkter) Prosentvis bredde <TABLE WIDTH=%> (i prosent av side) 4.0* Bakgrunnsfarge <TABLE BGCOLOR="$$$$$$"></TABLE> 4.0 Tabellramme <TABLE FRAME=VOID ABOVE BELOW HSIDES LHS RHS VSIDES BOX BORDER></TABLE> 4.0 Tabellinjer <TABLE RULES=NONE GROUPS ROWS COLS ALL></TABLE> MS Kantlinjefarge <TABLE BORDERCOLOR="$$$$$$"></TABLE> MS Mŕrk kantlinje <TABLE BORDERCOLORDARK="$$$$$$"></TABLE> MS Lys kantlinje <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE> Rad i tabell <TR></TR> Justering <TR ALIGN=LEFT RIGHT CENTER VALIGN=TOP MIDDLE BOTTOM> Celle i tabell <TD></TD> (i en rad) Justering <TD ALIGN=LEFT RIGHT CENTER VALIGN=TOP MIDDLE BOTTOM> Ikke linjeskift <TD NOWRAP> SlÂ sammen kol. <TD COLSPAN=?> SlÂ sammen rader <TD ROWSPAN=?> 4.0* ßnsket bredde <TD WIDTH=?> (i bildepunkter) N3 Prosentvis bredde <TD WIDTH="%"> (i prosent av tabellen) 4.0* Cellefarge <TD BGCOLOR="#$$$$$$"> Overskriftscelle <TH></TH> (som data (<TD>), men overskriftstype) Justering <TH ALIGN=LEFT RIGHT CENTER VALIGN=TOP MIDDLE BOTTOM> Ikke linjeskift <TH NOWRAP> SlÂ sammen kol. <TH COLSPAN=?> SlÂ sammen rader <TH ROWSPAN=?> 4.0* ßnsket bredde <TH WIDTH=?> (i bildepunkter) N3 Prosentvis bredde <TH WIDTH="%"> (i prosent av tabellen) 4.0* Cellefarge <TH BGCOLOR="#$$$$$$"> 4.0 Tabellkropp <TBODY> 4.0 Tabellbunntekst <TFOOT></TFOOT> (mâ komme fŕr <THEAD>) 4.0 Tabelltopptekst <THEAD></THEAD> Tabelltittel <CAPTION></CAPTION> (overskrift, utenfor tabell) Justering <CAPTION ALIGN=TOP BOTTOM LEFT RIGHT> 4.0 Kolonne <COL></COL> (grupperer kolonne-attributter) 4.0 SlÂ sammen <COL SPAN=?></COL> 4.0 Bredde <COL WIDTH=?></COL> 4.0 Prosentvis bredde <COL WIDTH="%"></COL> 4.0 Grupper kolonner <COLGROUP></COLGROUP> (grupperer kolonne-strukturen) 4.0 SlÂ sammen <COLGROUP SPAN=?></COLGROUP> 4.0 Bredde <COLGROUP WIDTH=?></COLGROUP> 4.0 Prosentvis bredde <COLGROUP WIDTH="%"></COLGROUP> RAMMER (ENG: FRAMES) (definer og manipuler ulike deler av skjermbildet) 14

15 4.0* Definer rammer <FRAMESET></FRAMESET> (erstatter <BODY>) 4.0* Rader <FRAMESET ROWS=,></FRAMESET> (punkter eller prosent) 4.0* Rader <FRAMESET ROWS=*></FRAMESET> (* = relativ stŕrrelse) 4.0* Kolonner <FRAMESET COLS=,></FRAMESET> (punkter eller prosent) 4.0* Kolonner <FRAMESET COLS=*></FRAMESET> (* = relative stŕrrelse) 4.0* Kantlinjer <FRAMESET FRAMEBORDER="yes no"></frameset> 4.0* Kantlinjebredde <FRAMESET BORDER=?></FRAMESET> 4.0* Kantlinjefarge <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET> N3 Mellomrom <FRAMESET FRAMESPACING=?></FRAMESET> 4.0* Definer Frame <FRAME> (innholdet i en bestemt ramme) 4.0* Kilde <FRAME SRC="URL"> 4.0* Navn <FRAME NAME="***" _blank _self _parent _top> 4.0* Margbredde <FRAME MARGINWIDTH=?> (hŕyre og venstre marg) 4.0* Marghŕyde <FRAME MARGINHEIGHT=?> (topp- og bunnmarg) 4.0* Rullefelt? <FRAME SCROLLING="YES NO AUTO"> 4.0* Fast stŕrrelse <FRAME NORESIZE> 4.0* Kantlinje <FRAME FRAMEBORDER="yes no"> 4.0* Kantlinjefarge <FRAME BORDERCOLOR="#$$$$$$"> 4.0* Alt. innhold <NOFRAMES></NOFRAMES> (for nettlesere uten frames) 4.0 Ramme (inline) <IFRAME></IFRAME> (tar samme attributter som FRAME) 4.0 Dimensjoner <IFRAME WIDTH=? HEIGHT=?></IFRAME> 4.0 Dimensjoner <IFRAME WIDTH="%" HEIGHT="%"></IFRAME> SCRIPT OG JAVA Script <SCRIPT></SCRIPT> Kilde <SCRIPT SRC="URL"></SCRIPT> Type <SCRIPT TYPE="***"></SCRIPT> SprÂk <SCRIPT LANGUAGE="***"></SCRIPT> 4.0* Alt. innhold <NOSCRIPT></NOSCRIPT> (hvis script ikke stŕttes) Applet <APPLET></APPLET> Filnavn <APPLET CODE="***"> Parametre <APPLET PARAM NAME="***"> Kildekatalog <APPLET CODEBASE="URL"> Navngivning <APPLET NAME="***"> (refereres utenfra med navn) Alt. innhold <APPLET ALT="***"> (for nettlesere uten Java) Justering <APPLET ALIGN="LEFT RIGHT CENTER"> Stŕrrelse <APPLET WIDTH=? HEIGHT=?> (i billedpunkter) Mellomrom <APPLET HSPACE=? VSPACE=?> (i billedpunkter) N4 Serverside Script <SERVER></SERVER> DIVERSE Kommentar  (blir ikke vist av nettleseren) Dokumentdefinisjon <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Inpurfelt for sŕk <ISINDEX> (idag brukes INPUT til dette) Ledetekst <ISINDEX PROMPT="***"> (tekst fŕr inputfelt) Send sŕk <A HREF="URL?***"></a> (bruk virkelig? ) Filens URLbasis <BASE HREF="URL"> (i dokumenthodet, rel. linker) 4.0* Hovedvinduets navn <BASE TARGET="***"> (i dokumenthodet) Sammenheng (link) <LINK REV="***" REL="***" HREF="URL">(i dokumenthodet) N4 Knytning til fil <LINK TYPE="***" SRC="***"></LINK> Meta Informasjon <META> (i dokumenthodet) Stilark <STYLE></STYLE> (varierende implementasjon) 4.0 Skru av Bidirect <BDO DIR=LTR RTL></BDO> (for bestemte tegnsett) 15

16 ============================================================================ Opphavsrett (c) Kevin Werbach. Ikkekommersiell redistribusjon er tillatt, sâ lenge innholdet ikke blir endret og denne meldingen beholdes. Denne guiden er ikke et produkt fra Bare Bones Software. Mer informasjon kan finnes pâ < Referanser [1] [2] [3] validator.w3.org [4] [5] [6] erikh/links.html [7] erikh/classes/larer

Vise mer