Web-design og HTML

Dag 1 i emnet hierarki og webdesign. Uke 44, 2011

TextEdit1. Åpne TextEdit

I denne første oppgaven skal vi bruke “TextEdit” – et superenkelt tekstbehandlings-program som følger gratis med alle Mac'er. Endea så enkelt deter så er det ikke enkelt nok. Det første du må gjøre er å stille om programmet til “ren tekst”. Dette gjør vi for at programmet ikke lagrer noe annet enn de tegnene vi ser i vinduet. Ingen bilder, ingen informasjon om fonter osv. Velg “Konverter til ren tekst (Shift+Cmd+T)” fra “Format” i menylinjen øverst.

 

Screendump

2. Lagre som HTML

Det neste vi gjør er å lagre dokumentet som et HTML-dokument. Det gjør du ved å endre “etternavnet” på fila fra .txt til .html. Nå får du beskjed om at standardendelse er .txt – men klikk på .html. Dette gjør vi for at maskiner, servere og programmer skal vite at dette er et .html-dokument. Ikke bruk mellomrom, æ, ø, å, slash (/) eller komma (,)i filnavnet. Bruk bokstavene a – z, tall og bindestrek (-) eller underscore (_). Dette er en absolutt regel i web-design.

Screendump

NB! Til denne øvelsen er det viktig at du oppretter en mappe under “Dokumenter” og lagrer alt vi gjør i denne øvelsen der – på samme sted.

3. Tagg dokumentet ditt korrekt

Kopier og lim inn all koden nedenfor i dokumentet ditt:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dokument uten navn</title>
</head>
<body>
</body>
</html>

Nå vil dokumentet ditt kunne “svare” på alt en nett-leser (web-browser) trenger å vite før den kan begynne å laste ned informasjonen på siden din:

  • Hva er dette? Et HTML-dokument
  • Hvilken versjon? XHTML 1.0
  • Hva slags innhold? txt/html charset UTF-8
  • Hva er dokumentents tittel? Dokument uten navn

Her er en ferdig versjon av dokumentet så langt >>
Det er riktignok blankt, men Ctrl+klikk på det og last ned til prosjektmappa di – så kan du jobbe videre med det. Dett gjelder også for de neste avsnittene dine

FireFox asks

4. Sett inn en tittel for dokumentet ditt

Husk at tittelen <title> for dokumentet ditt ikke er headingen/ overskriften. Title er bare synlig på tobben av nettleservinduet når brukeren er inne på siden. Og i nettleserens logg. Derfor skal vi alltid gi sidene våre en tittel/title. Det er dårlig gjort mot brukeren å fylle loggen hans eller hennes med en haug “Untitled Document”.

Gi dokumentet ditt tittelen Red Hot Chilipepper

<title>Red Hot Chilipepper</title>

Screendump

5. Sett inn tekst på siden din

Kopier og lim inn teksten nedenfor mellom <body> og </body>.

Keyboard
Chilipepper
Chili (eller chillipepper, eller spansk pepper) er en plante hvis avling kan brukes både som grønnsak og som et sterkt krydder. Navnet kommer fra chilli på det mexikanske nahuatl-språket. Chilien stammer fra Mexico, der man har nydt chilipepper de siste 9000 år.

Ikke pepper
På grunn av den sterke smaken og fordi planten brukes som krydder, omtales chili ofte som chilipepper. Chili er imidlertid ikke en peppervariant. Botanisk hører planten til en helt annen familie enn pepper. Navnet spansk pepper har ikke med Spania, men med det spansktalende Amerika å gjøre.

Capsaicin
Chilifrukten inneholder stoffet capsaicin. Dette stoffet virker voldsomt sterkt på mennesker og andre pattedyr, men ikke på fugler. Capsaicin stimulerer nerver i huden og tungen som normalt reagerer på varme og smerte og hjernen narres til å fornemme det som om man brenner. Ut fra chilifrukten er det utarbeidet en skala for å bedømme en capsaicinbasert smaksstyrke: Scovilleskalaen.

Capsaicin brukes i smerteforskning til å drepe nerveender. Chili har den positive bieffekt at den kan være bakteriedrepende.

I pepperspray til selvforsvar er virkestoffet capsaicin.

6. Vi sjekker arbeidet vårt så langt …

Åpne HTML-siden din en en nettleser; Safari, Firefox, Chrome, Opera eller hva du foretrekker. Du kan bruke kommandoen Cmd+O for åpne fra nettleseren, eller bare dobbeltklikke på dokumentet i Finder.

For en skuffelse! All teksten flyter sammen i nettleservinduet, uten avsnitt, uten overskrifter. Men fortvil ikke; vi kommer dit. Endre størrelsen på nettleservinduet ditt å se hvordan teksten yller ruta, uansett hvor stor eller liten den er.

Dette skyldes at vi ikke har gitt teksten/innholdet en struktur enda. Alt nettleseren ser er en lang rekke bokstaver …

Her er en ferdig versjon av dokumentet så langt >>

Ustrukturert

7. Vi tagger først alle overskriftene

Skriv <h1> og </h1> før og etter “Chilipepper”

Skriv <h2> og </h2> før/etter “Ikke pepper” og “Capsaicin”

<h1>Chilipepper</h1>

<h2>Ikke pepper</h2>

<h2>Capsaicin</h2>

 Lagre og ta en ny kikk på dokumentet i nettleseren. Hvis ikke du lukket vindet er det bare å oppdatere. Nå er overskriftene skilt ut og har to nivåer. Vi kunne gitt oss der – men for å få dette skikkelig på plass tagger vi videre …

Her er en ferdig versjon av dokumentet så langt >>

Screendump

8. Paragraph <p></p> definerer et avsnitt

Uten <p> før, og </p> etter er ikke avsnittet en blokk (block). Og i et korrekt utført HTML-dokument trenger vi blokker om vi skal gi dem de egenskapene vi vil. Dessuten må vi skille mellom avsnittene når de er flere mellom to overskrifter. Bruk gjerne copy/paste for å gjøre det enklere for deg selv. Eks. siste avsnitt:

<p>I pepperspray til selvforsvar er virkestoffet capsaicin. </p>

Her er en ferdig versjon av dokumentet så langt >>

Lego

Omtrent som å bygge med Lego

9. Vi setter inn et bilde

Last først ned bildet til venstre (Ctrl+Klikk og “Arkiver bilde som …”). Nå er det viktig at du lagrer bildet i samme mappe som du har jobbet så langt; på samme sted som HTML-dokumentet ditt.

Cayenne

10. Nå legger du til følgende linje etter siste </p>:

<img src="chili.jpg" />

Skal vi være helproffe som forteller vi også nettleseren størrelsen på bildet, og en alternativ tekst (alt=) for den som har slått av for bildevisning. Og da blir linjen slik:

<img src="chili.jpg" width="750" height="216" alt="Cayenne" />

Dessuten bør også et bilde få være et avsnitt:

<p><img src="images/chili.jpg" width="750" height="216" alt="Cayenne" /></p>

Merk deg at img-taggen ikke har en ordentlig </>-tagg. Men vi setter inn en slash før siste vinkleparantes. Bildet vises uten, men du får feil om du validerer koden …

Det samme gjelder om du ikke bruker en alt=""-attributt. Grunnen til at vi setter inn målene på bildet er for raskere oppdatering i nettleservinduet.

Gratulerer! du har nå tagget din første HTML-side! Ta en titt på det ferdige resultatet og brisk deg litt.

Screendump

Hvis siden din ser ut som ovenfor har du gjort alt korrekt. Men husk at HTML-delen bare er innhold og struktur. I neste del skal vi bruke CSS for å lage layout; vi vil f.eks holde teksten innenfor en ramme, vi vil stelle litt med teksten for å nevne noe.

WebWeaver