LAGE HJEMMESIDER
Målet med denne innleveringen er å gi dere en liten smakebit på HTML-programmering. Hvis man skal lage hjemmesider må man i dag programmere i HTML. Det finnes ulike Editorer som setter inn kodene automatisk. Men foreløpig er ikke de gode nok; man må som regel inn å korrigere koden hvis man skal få den siden man ønsker. Vel, vi skal lære begge deler. Først HTML, deretter (i Neste innlevering) skal vi bruke ulike Editorer og se at vi kan lage bra hjemmesider også med dem.
Det følgenede er en enkel innføring i HTML. Noen av dere kan sikkert mye mer. HTML er ikke en del av pensum verken i år eller neste år. Det er likevel viktig å kunne. Derfor bruker vi mye tid på det. Vi kan imidlertid ikke bruke noe tid på skolen til det. Så det er opp til dere selv å bruke fritid, Arbeidsøkter til å lage hjemmesider.
Krav til innleveringen:
Dere kan jobbe to og to.
Presentasjon: siste gang før Høstferien.
Vurdering: Godkjent/Ikke godkjent. Mangelfull innlevering vil bety manglende vurderingsgrunnlag og dermed fare for ikke å få karakter i faget.
Krav til Innhold:
Minimum 3 sider
Bakgrunnsbilder/farge
Grafikk
Animerte GIF`er
Frames
Eksterne Linker (Utformet som Tekst, og som bilder)
Lyd
En punktliste
Det finnes også et kapittel i Brukersystemer om HTML. Se på det hvis dere er i tvil .
VIKTIG: Lagre alle filene du skal ha i hjemmesiden, tekst, bilder, Gif`er i samme katalog på H-området ditt.
DEL I ENKEL HJEMMESIDE
Vi programmerer i Programmet "Notisblokk". Finnes under tilbehør.
Grunnleggende innstillinger:
En Hjemmeside må alltid begynne og avslutte med kodene:
<HTML>
</HTML>
På denne måten vet Browseren av alt i mellom er programmert i HTML-kode som den da oversetter.
I et dokument kan man legge inn informasjon om dokumentet. Det gjøres mellom:
<HEAD> OG </HEAD>
Her kan man legge inn tittel mellom<TITLE> OG </TITLE>
Tittelen man legger inn her vil vise på øverste linje i Browseren.
All tekst man legger inn i hjemmesiden skal legges inn mellom:
<BODY> OG </BODY>
Lagring. Når du lagrer velg filtype .txt (tekstformat) og gi fila navnet: filnavn.HTML.
Husk alltid HTML.
Du kan så åpne fila i Browseren.
OPPGAVE
LAGE EN ENKEL HJEMMESIDE.
Legg inn det følgende i Notisblokk:
<HTML>
<HEAD>
<TITLE>MIN HJEMMESIDE </TITLE>
</HEAD>
<BODY>
VELKOMMEN TIL MIN HJEMMESIDE
</BODY>
</HTML>
Lagre fila under navnet: Min hjemmeside.html på området ditt. Bruk filtype .txt
Åpne internet explorer og åpne dokumentet. Funker det?
DEL II UTVIDELSE: DESIGN
Bakgrunnsfarge:
Vi må da føye til en kommando inne i <BODY> - kommandoen:
<BODY BGCOLOR="#000000">
Dette gir bakgrunnsfarge sort. For andre farger: se side 229 i Brukersystemer (Noen Browsere aksepterer også de engelske ordene "Black" og "Red", osv.
Tekstfarge:
Vi føyer da til enda en kommando i <BODY>:
<BODY BGCOLOR="#000000" TEXT="#00FF00">
Dette gir tekstfarge grønn i hele dokumentet. Hvis du ønsker å forandre noe av teksten til en annen farge: se nedefor.
Bakgrunnsbilde:
<BODY BACKGROUND="FILNAVN.FILTYPE">
Bildet som du skal ha som bakgrunnsbilde skal ligge i samme katalog som hjemmesiden. Eksempel på bilde kan være; Bobler.bmp (Husk det komplette navnet på bildet; formatet skal være med; .jpg eller .gif etc.)
Du kan bruke et hvilket som helst bilde som bakgrunnsbilde. Du kan laste det ned fra Internet, eller finne noe på Felles – området på Intranet.
Skrift
Fet tekst: Mellom <B> OG </B>
Kursiv:<I>….
Understreket: <U>…
Midtstillt tekst/bilde: <CENTER> OG </CENTER>
Skriftstørrelse:<FONT SIZE=1>……</FONT>
Skrifttype: <FONT FACE="Times New Roman">…………..</FONT>
Farge: <FONT FACE="Times New Roman" COLOR="#669933">…………..</FONT>
(På denne måten forandrer du fargen på Akkurat den linja du ønsker)
Linjeskift: <BR> (Kun)
Overskriftstyper:
<H1>….</H1>
.
.
<H6>….</H6>
For eksempler se side 215 i brukersystemer.
Horisontal linje:
<HR SIZE="5">
Sette inn et bilde:
<IMG SRC="FILNAVN.FILTYPE" WIDTH=100 ALIGN=RIGHT BORDER=5>
Dette gir bildet bredden 100 pixler. Høyden blir automatisk tilpasset. Du kan godt gi det en annen størrelse.
Align-kommandoen vil plassere bildet til høyre for tekst som er i samme avsnitt. Border=5 vil gi en ramme på 5 pixler. (IMG SRC står for IMAGE SOURCE)
Avsnitt:
Mellom <P> og </P> Det blir automatisk satt inn mellomrom før og etter et avsnitt.
OPPGAVE
Åpne hjemmesiden din i notisblokk og foreta de følgende endringer: Du bør lagre for hver endring og gå til Browseren og se og det går. Trykk på "Oppdater"
*Sort bakgrunnsfarge
*Oransje tekst
*Overskriften: Midtstillt, Uthevet, Overskriftstype 2,
*Legg inn noen linjeskift over overskriften, og noen under.
*Legg deretter inn en horisontal linje
Finn et bilde på internet som du vil ha med i hjemmesiden. Kopier det inn på ditt H: (Høyreklikk på bildet – lagre som)
Legg bildet inn under overskriften
Midtstillt, Størrelse: Bredde: 200 pix. Ramme: 5 pix
DEL III LINKER
En Link legger du inn slik:
<A HREF="HTTP://WWW.DAGBLADET.NO">DAGBLADET</A>
Nå vil kun Ordet dagbladet vise som Link, mens adressen er skjult.
OPPGAVE
Legg inn Linker til
Dagbladet, VG, Aftenposten, Yahoo.
Bilder som Linker.
Gå til Dagbladet og kopier inn logoen deres til ditt hjemmeområde.
For å legge inn dette bildet om link Skriver vi:
<A HREF="HTTP://WWW.DAGBLADET.NO"><IMG SRC="DAGBLADET.GIF" WIDTH=100></A>
OPPGAVE
Legg inn logoen til VG som link til VG. Gjør det samme for Alta Vista.
DEL IV FRAMES
Vi skal nå lage en ny side som vi skal linke opp mot forsiden.
Den nye siden skal ha frames.
Den skal være delt i to: en menyside på venstreside og en innholdsside på høyre.
Vi må da lage de to innholdsidene før vi lager rammesiden.
Lag en side som du lagrer under navnet MENY.HTML. Skriv bare Meny mellom <BODY> OG </BODY>
Lag en side som du kaller INNHOLD.HTML. Overskrift: INNHOLD
Vi lager så Rammesiden:
Den ser ut som følger:
<HTML>
<HEAD><TITLE>LINKER</TITLE></HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC ="MENY.HTML" NAME="MENY">
<FRAME SRC ="INNHOLD.HTML" NAME="INNHOLD">
</FRAMSET>
<BODY>
</BODY></html>
Prosenttallene viser til størrelsene på rammen. Prøv å forandre på dem og se hva som skjer. Du ser at vi legger inn de to innholdssidene som kilder for rammesidene.
Hvis du ønsker horisontale rammer skal du bruke Ordet ROWS i stedet for COLS (ROWS står for rader og COLS står for Kolonner)
Lagre den under navnet: LINKER.HTML.
Vi skal så legge inn en link til denne siden i forsiden.
Åpne Min hjemmeside i notisblokk.
Legg inn følgende link:
<A HREF="LINKER.HTML">LINKER</A>
Lagre og gå til Browseren for å se om det funker.
DEL V. LAGE LINKER I FRAMES-VINDUET
Vi ønsker nå å lage en link i Menyvinduet som virker slik at hvis vi klikker på den så viser linken i Innholdsvinduet.
<A HREF="HTTP://WWW.VG.NO" TARGET="INNHOLD">VG</A>
Test at det funker
OPPGAVE
Legg inn noen flere linker i Meny-vinduet på samme måte.
Del VI Animasjoner
Som du kanskje har sett på en del hjemmesider så finnes det animasjoner. Disse kan du kopiere inn på samme måten som for bilder. Høyreklikk og lagre i riktig katalog.
Finn en animasjon på nettet og sett den inn i hjemmesiden din. Du kan eventuelt søke etter hjemmesider på nettet der det er lagt ut GIF`er. Det finnes mange slike. Gå til en søkemotor og søk etter "animated GIF". (GIF er filformatet, på samme måte som Word dokumenter blir lagret i format DOC og Excel – filer i format XLS)
Del VII LYD
Finn en lydfil og kopier den inn på ditt H-område.
Følgende kommando vil lage en link til fila:
<A HREF="FILNAVN.WAV">LYD</A>
Du kan bytte ut ordet LYD med et bilde.
Denne linken virker slik at du kan spille den eller laste den ned. Det betyr at den er separat fra hjemmesiden.
Prøv denne linken:
<EMBED SRC="LYD.WAV" AUTOSTART="TRUE">
Som du ser får du fram kontrollpanelet med en gang, og så starter lyden automatisk.
I embed kommandoen kan du sette inn ulike parametre:
Størrelsen på avspilleren kan angis med: WIDTH="XX" HEIGHT="XX"
Du kan skjule den helt med HIDDEN=TRUE
Den kan også repetere seg selv med LOOP="TRUE", på denne måten får du bakgrunnsmusikk til siden.
Del VIII VIDEO
Du lager en link til en video på denne måten:
<A HREF="VIDEO.AVI">VIDEO</A>
Ellers virker video på samme måte som lyd. Du kan lage en Embed kommado som vist for Lyd.
Del IX Punktlister
Begynn listen med <UL> og avslutt med </UL>.
Hvert listeelement skrives innenfor <LI> og </LI>
Nummererte lister får du på følgende måte:
Bruk <OL> og </OL> i stedet.
(UL står for unorderd list. OL står for Orderd list.)