HTML Intro

Dette er et kurs for nybegynnere og vil ta for seg det aller mest grunnleggende innenfor det å lage en hjemmeside. Kurset er egnet for alle som ønsker en kort innføring i HTML.

Hva du trenger

Du trenger en tekstbehandler. Det er en fordel med en som er beregnet til å skrive HTML, men til og med NotePad er tilstrekkelig, selv om det ikke er å anbefale. Og du trenger en nettleser, en såkalt "Browser". De fleste har som regel Internet Explorer på sin maskin, men det er en fordel å ha flere av de mest brukte installert, slik at man kan se hvordan siden man lager vil se ut i de forskjellige nettlesere. Det kan nemlig variere litt fordi ikke alle nettlesere er like gode og fordi forskjellige nettlesere har forskjellige feil. Det vi tar sikte på her er å skrive korrekt standard HTML og så får det være opp til de som lager nettlesere å rette opp på sine feil og gjøre sine produkter bedre. Vi vil bare se våre sider i de forskjellige, slik at vi ser etter om der er store avvik.

  1. HTML Editor (gratis)
    1. Stone's WebWriter
  2. Nettlesere
    1. Mozilla (gratis)
    2. Opera (gratis med reklamer)
    3. Internet Explorer kommer med Windows

Forberedelser

Etter å ha lastet ned det du trenger, registrert din gratisversjon av WebWriter, så er det noen ting man skal gjøre før man setter i gang. Jeg regner med at du har lest min side om "Ny PC" og derfor nå vet hvordan du setter opp dine nettlesere sikrest mulig. Og at du har gjort dette.

WebWriter skal også justeres litt slik at det er valid kode vi får opp når vi starter et nytt HTML dokument.
Først sjekker du at det er fanebladet "Filer" som er aktivt. Det er der hvor det er 4 faneblad (Filer, Prosjekter, Sitemap og Bibliotek). Så høyreklikker du i et tomt område på den nederste firkanten, der hvor filer er listet opp. (Altså ikke høyreklikk på en fil.) Så velger du at du vil se alle filtyper. (Vis Filtyper - Alle).

Det du skal gjøre nå er å kopiere det som står i boksen nedenfor inn på en tom side i WebWriter. Vær oppmerksom på at de to første linjer skal egentlig være på en linje. Så manøvrerer du deg til mappen Skabeloner, som du ser i den øverste boks til venstre. Du klikker på Filer aller øverst til venstre, og "Gem Som". Du får da opp en "Save As" dialog og du velger "Skabeloner *.wws " nederst. Deretter klikker du en gang på Standard.wws og velger "Save". Du får opp en advarsel om du vil overskrive den filen som er der fra før, og det vil du.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
	<TITLE>Untitled</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <META HTTP-EQUIV="Content-Language" CONTENT="no">
</HEAD>
<BODY>
</BODY>
</HTML>

Du kan nå klikke på "Filer" øverst oppe og velge "Luk Alle".
Snart skal du til å lage din første hjemmeside med denne HTML editoren. Men før du begynner, så skal du unngå en av de mange feil som pleier å bli gjort, nemlig at mange lagrer alle sine filer i samme mappe. Du skal derfor nå bruke din Stifinner, eller hva du bruker for å se og forandre på dine mapper på disken. Du skal lage en mappe under Webwriter4 mappen som for eksempel kan hete "minside" - uten aporstrofer selvsagt. Under denne mappen igjen så kan du allerede nå lage to undermapper; bilder og minstil.

Så går du tilbake til WebWriter og der står du vel fortsatt i mappen Skabeloner. Bare klikk en gang til på den mappen, for å forsikre deg at det er det området som er i fokus. Deretter trykker du på F5 og venter litt mens WebWriter gjen-innleser mappestrukturen. Nå ser du at din nye mappe blir vist og at der er et pluss foran, som betyr at den også har undermapper.

Bare klikk på "minside" for det er her du skal arbeide nå. Det er i denne mappen du skal lagre dine HTML domumenter.

Din første hjemmeside.

Du står nå i den riktige mappen og du har et tomt dokument foran deg. (den store skriveplassen til høyre som fyller det meste av arbeidsplassen til WebWriter)
Du klikker nå på Filer øverst oppe og velger "Ny". Du får da frem noen valg hvor du velger Standard.wws. Det er den skabelon som vi nettopp har forandret på, slik at den skal skrive inn våres skabelon som er bedre enn den WebWriter er "født" med. Vips, så er der kommet noen linjer med kode på våres tidligere tomme ark. Du kan allerede nå venne deg til å lagre etterhvert som du skriver. Velg "Filer" øverst oppe og klikk på "Gem". Det skal være et HTML dokument, og det skal hete index.html

Når du velger filnavn skal du ikke bruke norske spesialtegn som æ, ø eller å. Du skal heller ikke bruke mellomrom i dine filnavn. Og du skal venne deg til å bruke kun små bokstaver. (Dette er en anbefaling, med mindre du har lyst til å lære deg om Escape og Hexadesimale verdier og slikt.)

index.html er den siden som først blir lest inn i en nettleser når vi surfer til en hjemmeside hvor filnavnet ikke er angitt. For eksempel dersom vi surfer til http://www.flaaten.dk/ På noen hjemmesideområder kan det også være andre slike standard navn som blir vist først. Noen vanlige er index.php dersom man skriver i PHP, eller default.asp dersom man benytter ASP teknologien. Vi skal bruke index.html som navn på vår første side, og eventuelle andre sider skal ha andre navn.

Nå er vår nye side ikke spesielt innholdsrik, men det skal vi gjøre noe med før vi gir oss for i dag. Først forandrer du der det står "Untitled" til for eksempel "En side om blomster". Det er det som står i TITLE elementet. <title>Untitled</title> blir til
<title>En side om blomster</title>

Alt det som skal vises på en webside skal være i Body eller i Kroppen. Det vil si at det skal stå mellom <BODY> og </BODY>. Så nå skriver du "Jeg liker blomster" mellom <BODY> og </BODY> slik at det hele nå ser slik ut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>En side om blomster</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="Content-Language" CONTENT="no">
</HEAD>
<BODY>
Jeg liker blomster
</BODY>
</HTML>

Og så lagrer du ditt dokument igjen.
Trykker du nå på F12, så vil du se hvordan denne siden vil se ut. Og trykker du på F12 igjen, så går du tilbake til der du skriver i dokumentet. Nå har du brukt WebWriters egen fremvisning. Du kan nå se på din nye side i dine nettlesere også. Og du skal også gjøre deg det til vane å sjekke dine sider i en validator for å se at det er gyldig kode du har laget. Det gjør du her http://validator.w3.org/ hvor du også kan sjekke filer på din egen maskin. Og selv om din første side ikke ser ut som så mye, så er du allerede nå kommet lenger enn de fleste andre, som svært ofte har feilet allerede nå med å lage valid kode. Til lykke med din aller første og feilfrie hjemmeside!

Konsentrert.

Et HTML dokument består av tre deler.

  1. Pre-HTML
    1. Før <HTML> (Egentlig ikke en del av dokumentet men en beskjed til nettleseren.) Det vi har stående er en opplysning til nettleseren om at det er HTML versjon 4.01 vi bruker og hvor den kan finne denne definisjonen dersom den ikke har det fra før, samt litt mere som vi ikke skal komme inn på her.
  2. Header
    1. Mellom <HEAD> og </HEAD>
  3. Kropp
    1. Mellom <BODY> og </BODY>
  1. Det som står mellom <TITLE> og </TITLE> er tittelen og den vil vises øverst oppe i våres nettleser.
  2. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> forteller nettleseren at det er et HTML dokument med tegnsettet som kalles ISO-8859-1
  3. <META HTTP-EQUIV="Content-Language" CONTENT="no"> forteller nettleseren at språket er norsk.
  4. Det som står mellom <BODY> og </BODY>, eller det vi kaller kroppen, er det som vises på websiden.

Neste gang.

I neste avsnitt skal vi lære mere om å bruke de grunnleggende elementer, lage linker og sette inn bilder. Inntil da så regner jeg med at du leser hjelp innholdet i både dine nettlesere og til Stone's WebWriter. Det er en forutsetning for å bruke et program at man setter seg inn i hvordan de virker og tilegner seg den informasjon som forfatteren mener at man bør kunne om programmet.

Siden vi har laget i dag

Kan du se her

Ekstra lesestoff

Doctype W3
Doctype og Quirk
Indeks over Elementer


Linker

  1. Om websider
  2. Noen retningslinjer
  3. Design - Utseende - Redesign?
  4. Spyware og Adware
  5. Download Kalkulator
  6. Websikre Farger
  7. Ny PC? Hvordan?
  8. HTML Intro
  9. HTML Del 1
  10. HTML og CSS Del 2
  11. Infisert maskin?