Velkommen til Maritas HTML-side
Dette må du vite om HTML:
Et HTML-dokument er bygd opp av tagger. Taggene skrives med <hakeparanteser>. De fleste tagger trenger en </slutt-tagg>. Med slutt-taggen stopper du kommandoen gitt i start-taggen.
Eksempel:
Noen få tagger trenger ikke slutt-tagg. Ber du f.eks om et linjeskift <BR> (BReak), får du et linjeskift, og du trenger følgelig ikke avslutte den. Noen mener at taggen for avsnitt: <P> (Paragraph), bør ha slutt-tagg, for ellers funker ikke stilsett, men siden jeg ikke bruker stilsett, slipper jeg det.
Men jeg må nok bruke det,
når jeg bruker ALIGN=left/right/center for å angi hvor jeg vil plassere teksten,
slik som jeg gjør her.
Taggen som brukes for å få horisontal linje <HR> (Horizontal Rules), skal derimot ikke ha slutt-taggDet første man må gjøre når man skal lage en HTML-side, er å bygge skjelettet, som skal se slik ut:
Mellom start- og sluttbody, bygger du opp selve HTML-dokumentet. All tekst og koder skal ligge her.
<HEAD> Her kan du legge inn metadata, stilsett m.m
<TITLE> Her legger du inn tittelen på dokumentet som vil vises HELT øverst i browseren
</TITLE>
</HEAD>
<BODY atributter: bakgrunnsfarge BGcolor="#" /-bilde BACKGROUND=".gif", linkfarge før; LINK="#" og etter; VLINK="#" man har trykket på linken, og mens den er aktiv ALINK="#". Tekstfarge kan også angis TEXT="#">
</BODY>
</HTML>
Nå er jeg ferdig med å fortelle deg hva man må vite om HTML. Nå er det bare å finne den rette koden og smekke den inn i dokumentet du lager. Det har jeg tenkt til. For å kikke på kodingen i et HTML-dokument, trykker man på View - Source på verktøylinjen i browseren. Hvis du gjør det, får du vite for eksempel hvordan jeg skriver tegn som: >, <, æ, ø, å, Å, © og ¥.
Tekstformatering |
||
|---|---|---|
|
<FONT>-taggen brukes for å angi egenskaper til visning av teksten. Du kan angi farge: COLOR="#", skrifttype: FACE="" og størrelse: SIZE="1-7". |
For å få overskrift brukes <H1-6> (Heading). Her kan man legge inn ALIGN=left/right/center for å angi hvor på skjermen overskriften skal stå. | |
|
<Font size=1> <Font size=2> <Font size=3> <Font size=4> <Font size=5> <Font size=6> <Font size=7> |
<H6 Align=center><H5 Align=center><H4 Align=left><H3 Align=right><H2><H1> | |
Mer formatering
Uthevet skrift <B> (Bold)*
Uthevet skrift <STRONG>
Stor skrift <BIG>
Liten skrift <SMALL>
Kursiv <I> (Italic)*
Kursiv <EM>
Kursiv <CITE> (Citation)
Kursiv <DFN>
Adresse - kursiv <ADDRESS> (med innlagt linjeskift) "Skrivemaskin" <TT> (Typewriter Text)*
"Skrivemaskin" <CODE>"Skrivemaskin" <KBD>
Streket under <U>
Teksten kan bli slik: <PRE> (Innlagt avsnitt før og etter)
Farger
Koden color kan legges i <FONT>-taggen, <HR>-taggen og når man bruker atributtet BORDER (ramme)
Man kan også definere farge på linker (se over)
Det kan hende jeg kommer på mer...
Fargebeskrivelsen kan enten være i tekst: <FONT COLOR="yellow">
eller i heksidesimal tall: <FONT COLOR="#666666">.
Når man bruker heksidesimale tall, er det et poeng og bruke browser-sikre fager, slik at fargene vises likt uansett hvilken nettleser som brukes. En browser-sikker fargekube finner du her
Kuben leses slik: RØD - GRØNN - BLÅ (skjønn det om du kan!)
Jeg bruker helst tall-varianten, men her er likevel noen farger jeg har lært av Ole-Harald...
| Farge-tabell | |||
|---|---|---|---|
| Aqua | Indigo | Purple | Olive |
| Fuchsice | Silver | Lime | Grey |
| Pink | Orange | Navy | Teal |
| Blue | Red | Green | Yellow |
| Maroon | Blade | Black | White |
Tabeller
| Da kan du for eksempel lage: |
| Eller du kan få: |
|
Jeg har aldri klart å forklare for nybegynnere hvordan man lager en tabell, så jeg skal ikke kaste bort plass på en forklaring som ikke fungerer (Å studere kodene til eksemplene over, er mitt beste tips). Istedet kommer en oversikt over atributter man kan legge inn i de forskjellige taggene som kan brukes i en tabell.
| Tabell: <TABLE> | align="center/right" background="bilde" bgcolor="#" border="verdi" bordercolor="#" cellpadding="verdi" cellspacing="verdi" summary="tekst" width="%" |
Plassering av tabellen på siden Bakgrunnsbilde Bakgrunnsfarge Rammestørrelse 0=usynlig Rammefarge Avstand fra rammestreker til tekst/bilder Avstand mellom rammestreker Forklaring Størrelse |
| Rad: <TR> (Table Row) | align="center/right/justify" bgcolor="#" valign="top/middle/bottom/baseline" |
Plassering av tekst i raden Bakgrunnsfarge i raden Dette har jeg ikke testet ennå |
| Celle: <TD> | align="center/right/justify" bgcolor="#" colspan="antall" rowspan="antall" valign="top/middle/bottom/baseline" width="%" height="%" |
Plassering av teksten i cella Bagrunnsfarge i cella Sammenslåing av celler Sammenslåing av rader Dette har jeg som sagt ikke testet ennå Bredde på cella Høyde på cella |
| <TH> (Table header) | Kan erstatte <TD>, hvis man vil ha overskrifter. | |
Lenker og Bilder
<A HREF=""> En link </A>. For å åpne linken i et nytt vindu brukes target="_new" eller target="_blank". Forskjellen mellom de to, er at "blank" åpner et nytt vindu hver gang du trykker på en link, mens "new" vil laste opp siden i det samme vinduet som forrige link ble lastet opp i.
For å legge inn et bilde:
<IMG SRC="">. Taggen ALT="" Brukes for å angi alternativ tekst som vises hvis nettleser ikke klarer å vise bilde, og også når man rører bildet med musa.
Imagemap og TOC (table of contents)
| Ordnet liste |
Dette bildet er tatt helt ut av sammenheng...
|
Lister
Taggen for ordnet liste er <OL> (Ordered List). Bruker man ingen atributter, vil listen se ut som det første eksempelet. Legger man inn START="tall", vil oppramsingen starte på det tallet du angir. Man kan også ramse opp med romertall og bokstaver. Da legger man inn TYPE="1/A/a/I/i". Koden <LI> (List Item) angir et listepunkt.
|
|
|
Koden for uordnet liste er <UL> (Unordered List). Setter man på type="square", får man firkantede markeringer. <LI> (List Item) angir et listepunkt.
|
|
For å lage definisjonsliste, bruker man koden <DL> (Definition List). Teksten som skal defineres, markeres med <DT> (Definition Term), og <DD> (Definition) brukes på selve definisjonen.
- OI! Dette tar lang tid...
- Jeg visste ikke at jeg kunne såååå mye HTML...
- Men å kode for hånd, som jeg gjør, tar tid!
- Men det er jo verdt det!
- Nei til Front page og andre tulle-ting!
- SÅ DET SÅ!
Skjema
Dette er taggen man bruker:
<FORM METHOD="POST" ACTION="mailto:navn@mailadresse.no?subject=Noen har fylt ut skjema" ENCTYPE="text/plain">
Frames
For å lage frames, starter man med å lage en side (index.html) som skal se omtrent slik ut:
<NOFRAMES>
</FRAMESET>
<HEAD>
<TITLE>Min hjemmeside</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%" FRAMEBORDER="1" FRAMESPACING="0">
<FRAME SRC="meny.html" NAME="venstre" SCROLLING=AUTO>
<FRAME SRC="hovedside.html" NAME="hoyre">
Browseren din støtter desverre ikke frames
</NOFRAMES>
</HTML>
Med dette har du fortalt nettleseren at:
- "Min hjemmeside" skal leses med frames, hvor venstre del av siden skal dekke 20% av skjermen, og høyre del skal dekke 80%. Rammen mellom sidene skal være "1" (0=usynlig) og avstanden mellom rammestrekene er så liten som mulig (0).
- Venstre side av skjermen kaller jeg "venstre", og her skal siden meny.html hentes opp. Jeg vil at det skal være mulig å scrolle hvis det blir nødvendig. (Andre atributter er : YES/NO)
- Høyre side av skjermen gir jeg navnet "hoyre", og her vil jeg åpne hovedside.html.
- Hvis besøkende har en nettleser som ikke kan lese frames, vil de få meldingen: "Browseren din støtter desverre ikke frames"
Hvis vi deretter lager siden meny.html...:
<HEAD>
<TITLE>Meny</TITLE>
</HEAD>
<BODY>
Dagens meny: <P>
<a href="meg.html" target="hoyre">Om Marita</A><BR>
<a href="hovedside.html" target="hoyre">Tilbake til hovedsiden</A><BR>
</BODY>
</HTML>
Her er det en ting som er viktig, nemlig target-taggen, som forteller at du vil åpne siden i det området som vi ga navnet "hoyre" i FRAMES-dokumentet. Hvis man ikke setter dette vil dokumentet erstatte menyen. Setter man target="_top", blir linken åpnet i hele vinduet, og rammen forsvinner.
De andre dokumentene jeg har henvist til; hovedside.html og meg.html, lager du slik som du ville laget sider uten frames, men man må huske på at man får mindre plass å boltre seg på når man bruker frames (I dette tilfellet: 20% mindre). Jeg har ikke sagt så mye om nettdesign på denne siden, men en ting bør sies: Scrolling sideveis må for Guds skyld unngås!
Til slutt...
Helt til slutt vil jeg hilse fra Grooo, som har vært så snill å gi meg kritikk på denne siden, om at adressen til min hjemmeside ikke er http://www.home.no/maritastedet/index.html, men http://www.home.no/maritastedet/. Index-siden blir generert automatisk, og slik er det med alle hjemmesider! :)
(Det klarer du sikkert.)