HTML-kurs FAQ



Del 2 i det litt populære kurset er her. Hittil har vi hatt simple sider – svart på hvitt. Det kan vi gjøre noe med. Aller best er CSS, vi ser på det i del 3. Her i del 2 får du ett helt lager med CSS-funksjoner. Bruk gjerne det som oppslagsbok. Gled dere! ..og nyt livet (mens du ennå har det).

Om kurset

Dette er del 2 av ett HTML kurs på 4 deler totalt, hvor vi gradvis får mer avanserte koder. De fire delene er som følger:

Det er også en FAQ:

Håper du nyter den! NB! Kurset er ikke ferdig ennå!

Relativ og absolutt

Relativ og absolutt er to utrykk du kan lære deg først som sist. La oss ta for oss disse nå.

La oss si at vi har ett mappesystem som er slik:
/root
/html
/php
/test
som betyr at hovedmappen er root, og inni den ligger html, php og test.

Hva hvis vi er inne på nettsida index.html som ligger i html mappen, og vi skal ha tak i en ting i mappen test, må vi først en mappe opp, også inn i test;
../test/bilde.jpg

hvor ../ betyr en mappe opp, test er mappen og bilde.jpg er filen. Dette er relativt – vi er allerede inni index.html, og går videre til bilde.jpg.
Men absolutt betyr uannsett. La oss bruke det samme eksemplet:
/root/test/bilde.jpg
Vi markerer først at dette er absolutt – ved å starte med en /. Deretter oppgir vi hele veien. Hvis domenet vårt hadde hett www.minside.no, ville man startet helt på begynnelsen – hele URLen hadde blitt
http://www.minside.no/root/test/bilde.jpg
Men det ville ikke vært nødvendig å skrive alt;
/root/test/bilde.jpg

Husk å angi filetternavnet også! (.html, .jpg osv…)

Oppsumering:

Relativt er itillegg til noe, og absolutt er absolutt – helt fra begynnelsen av.

Lenker

Lenker..? Dette kalles også links. Men hva er så links?

http://www.vg.no er en link – grunnet at det tilvanlig er blått, og at du , de fleste ganger, havner et annet sted når du trykker. Det er jo lurt med slike ting?

I kode 9.0 vil vi ta for oss en link – åpne hist.html (kode 7.1)(HTML kurs del 1), og se til at når du lagrer ser det ut som Kode 9.0.

Kode 9.0

<head>
 <title>Historien om Ole Jakob</title>
</head>
<body>
 <h1><center>Historien om Ole Jakob</center></h1>
  <p><b>Ole JAkob gikk i klasse 6A.</b><br>
  B-klassingene ertet ham hvert eneste friminutt.<br>
  De sier han er teit.<br>
  Ikke minst på grunn av at faren var purk.<br></p>
  <h2 align="right"><u>Hvordan går dette?</u></h2>
 <h2>Fortsettelsen er her!<br>
 <a href="hist2.html" title="Neste side">TRYKK</a></h2>
</body>

Nå må vi lage hist2.html – husk å lagre den i samme mappe. Bruk erfaringene fra forrige kapittel.

<head>
 <title>Historien om Ole Jakob * Del 2</title>
</head>
<body>
 <h1><center>Del 2</center></h1>
  <p>
   <!-- Tja, hva skal man skrive her?
   Finn gjerne på en fortsettelse. 
   Eller du kan gjøre som meg..
   -->
   Ole Jakob skulket skolen hver eneste dag.<br>
   Han lærte ingenting.<br>
   Derfor ble han faktisk teit.<br>
   En dag rømte han hjemmefra.<br>
   Ingen så han senere.
  </p>
</body>

Figur 9.0 viser resultatet – Husk at overskriften er større hos deg, men her på Wikien går det ikke med store overskrifter (uten at det blir nytt avsnitt og streker).

Figur 9.0


hist.html


Historien om Ole Jakob
Ole Jakob gikk i klasse 6A.
B-klassingene ertet ham hvert eneste friminutt.
De sier han er teit.
Ikke minst på grunn av at faren var purk.

Hvordan går dette?
Fortsettelsen er her!
TRYKK


Det skulle gå ann å trykke på «TRYKK» hos deg, men ikke her.

hist2.html


Del 2
 

Ole Jakob skulket skolen hver eneste dag.
Han lærte ingenting.
Derfor ble han faktisk teit.
En dag rømte han hjemmefra.
Ingen så han senere.


Tips: Så du <!– og –>? Alt mellom disse to kalles kommentarer – bruk kommentarer godt. F. eks:

<title>Hei!</title>
<!-- Med title kan man bestemme hva som står i den blå boksen. -->

Det som er så bra: Kommentarer kan ikke leses når nettsiden vises! Bruk kommentarer til å si hva forskjellige kommandoer gjør – når du kommer om et halvt år, og lurer på hva dette betyr, kan kommentarer være svært nyttige. Jeg kommer til å bruke kommentarer i de fleste script fra nå av.


Hva er så links?

Nøkkelen til links er slik:
<A HREF=»URL» TITLE=»TITTEL» ALT=»MÅL»>TEKST SOM SKAL BLI LENKE</A>
Eks:
<a href=»http://www.vg.no» title=»VG Nett» alt=»_blank»>VGs nettsider</a>
Vil gi ett slikt resultat:
VGs nettsider
Men hva i all verden er det vi skriver? Forklaring kommer:

  • A – Taggen. Denne taggen kan brukes til mer enn links.
  • href – angir kilden som skal åpnes. Bruk erfaringene fra kapitlet «Relativt og absolutt» for å finne stien. Nytt her er at hvis du skal lage en ekstern link, må du starte med http:// og deretter hele URLen. Med ekstern menes det at lenken går til ett annet nettsted. F. eks: http://www.vg.no. Men hvis du linker til noe på samme sted, bruk bare stien.
  • title – angir det som kommer i en gule ruten som dukker opp når du tar musepekeren over linken. title kan angis mange flere steder – og med mange flere tagger!
  • alt – angir målet. Vi kommer til dette når vi kommer til Frames (ett oppdelings-system, som er enkelt – men upopulært.). Men noe annet man kan bruke alt til, er hvis du vil åpne lenken i nytt vindu – da bruker du bare «_blank».

Prøv og utforsk og eksperimenter med links. Links holder alt sammen – hvis ikke måtte du skrive inn URLen for hver eneste ting.


Tips: Link er ett engelsk begrep, som har kommet inn til Norge. Derfor bøyer vi substantivet også på engelsk måte – links, men noe mer brukt er «lenker», som er den norske versjonen.


Tips: Vi kan bruke A taggen til mer – f. eks. for å dele ting inn i kapitler. Senere, det også!


Slurvefeil-oppgave

Test deg selv med denne koden. 10 slurvefeil er der. Finn, og rett alle feilene. (Gjør det hos deg da, ikke her..!)

<html>
 <head>
 </head>
 <title>En side</title>
 <body>
  >h1>En side<h1>
   <p align=right>
   En tekst <i>Ikke sant?</i>
   </p align=right>
  </h2><ceter>Om meg</center></h1>
   <p>Jeg er ett menneske.<//p>
 </boddy>
 </head>
 </html>>

Tabeller

Du har kanskje sett et par steder på wikien at det er tabeller. Disse lages veldig forskjellig med wikiformatering og HTML formatering.

For å lage en tabell, bruker du <table> taggen:

<table>
<!-- Tabell-innhold -->
</table>

Tabellen er delt opp i flere rader. Taggen for rader er <tr> – Table Row. Hver firkant i tabellen er en celle. Vi kommer til dem straks.

<table>
<tr>
<!-- Celler i rad 1 -->
</tr>
<tr>
<!-- Celler i rad 2 -->
</tr>
<!-- Man kan ha så mange rader man vil --> 
</table>

En celle lages med taggen <td> – Table Data. Antallet på celler definerer hvor mange kolonner tabellen har. Her er et lite eksempel:

Kode 11.0

<table>
<tr>
<td>Rad 1, Celle 1</td>
<td>Rad 1, Celle 2</td>
<td>Rad 1, Celle 3</td>
</tr>
<tr>
<td>Rad 2, Celle 1</td>
<td>Rad 2, Celle 2</td>
<td>Rad 2, Celle 3</td>
</tr>
</table>

Figur 11.0

Rad 1, Celle 1 Rad 1, Celle 2 Rad 1, Celle 3
Rad 2, Celle 1 Rad 2, Celle 2 Rad 2, Celle 3

Litt mer om tabeller

<table> taggen kan ha attributter:

  • border angir om det skal være kanter eller ikke. Sett denne til 1 for kanter, 0 for ingen.
    Om eksemplet over ikke hadde noen kanter, kan du prøve med border=»1″. Da skulle de dukke opp 😉

Det vil komme litt mer om tabeller med tiden. Bare vær tålmodig 😉

CSS

Med HTML beskriver du strukturen til siden – hvordan den ser ut kommer ann på hvilket operativsystem du kjører, og hvilken browser du bruker. Tidligere var det kun få browsere å forholde seg til, men nå har du 4 store browsere, hvor en av dem ikke følger standardene, dvs. at du må kode annerledes for å optimalisere siden. Med CSS, bestemmer du utseendet på websiden.

Etter hvert som weben utvikler seg, ble det et behov for å kunne gjøre mer med websidene. HTML, som i utgangspunktet er et strukturspråk, ble brukt til å bestemme farger. Inntil CSS kom, var dette den eneste metoden. Nå har du minst fire måter å bestemme farger, stil og alt annet på:
Bruke atributter

<body bgcolor="green">

De følgende metoder bygger på CSS:

Bruke atributten style

<body style="background-color: green;">

Bruke taggen STYLE sammen med atributten og verdien type=»text/css»

<STYLE type="text/css">
body {
background-color: green;
}
</STYLE>
<body>

Men metoden som både HTML.dk og jeg bruker, er å bruke ett eget dokument for CSS og la resten av dokumentene linke til dette:

<html>
 <head>
 <!-- verdien i href er URLen til .css dokumentet. -->
<link rel="stylesheet" type="text/css" href="blablabla.css">
 </head>
 <body>
  HEI!
 </body>
</html>

Deretter, i .CSS dokumentet blablabla.css:

body {
background-color: green;
color: #000000;
}

Fordelene er blant annet at du behøver kun å redigere .CSS filen hvis du gjerne vil endre stilen. Skjønte du ingenting? Alt blir så mye logisk etterpå. Nøkkelen til CSS:

element {
stil-element: verdi;
}

Hvis man ønsker bakgrunnsfargen blå, kan man bruke script 11.0 og 11.1. Try it out!

Kode 12.0

bakgrunn.html

<html>
 <head>
  <title>Hei!</title>
 <link rel="stylesheet" type="text/css" href="bakgrunn.css">
 </head>

 <body>
  <h1>Hei på deg,<br>
  kul side nå!</h1>
  WUHU
 </body>
</html>

Kode 12.1

bakgrunn.css

body {
 background-color: blue;
 color: black;
}
h1 {
 background-color: #000000;
 color: #FFFFFF;
}

De følgende stil-elementene er bruk:

  • background-color: Bakgrunns-fargen. Se detaljert skjema over HTML-fargekoder her. Du kan også skrive fargen i engelsk.
  • color: I disse tilfellene er det fargen på teksten.

Elementene er taggene body og h1. Egentlig går hver eneste HTML tagg som ett element. Egentlig kunne jeg brukt P som et element, eller H2 – mulighetene er mange!
Finn frem bakgrunn.html, og se på resultatet.


Tips: Hvis du bruker It’s Learning editoren, og lagrer en fil som .CSS fil, kan du ikke redigere den. Bruk følgende fremgangsmåte:

  1. Fisk fram filen.
  2. Ta endre filnavn. Endre slik at filetternavnet blir .HTML eller .HTM .
  3. Fjern alle koder It’s Learning legger til, som <HTML> og lignende.
  4. Rediger filen etter dine behov.
  5. Lagre, og skift deretter filetternavn til .CSS .
  6. FERDIG!

Tips: Hvis du bruker It’s Learning editoren, vil It’s Learning kopiere hele .CSS filen inn i HTML-dokumenter som linker til den. Det er ikke annet å gjøre enn å fjerne dette hver eneste gang.


Tips: Sjekk ut HTML kurs FAQ hvis du skulle få problemer!


Det skulle helst ligne Figur 11.0.

Figur 12.0

Hei på deg,
kul side nå!

WUHU

Vennligst merk at dette vil se mye annerledes hos deg. Den blå bakgrunnsfargen skulle helst være over hele skjermen. Gratulerer med ditt første CSS script!

 

Kommentarer

kommentarer

Forfatter: Tobinus

Del denne artikkelen på
468 ad
Start chat
1
Close chat
Hei! Takk for at du besøker oss! Trykk på knappen under for å starte en chat.

Start chat