Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det?

Transkript

1 Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det? I dag skal du lære at lave hjemmesider, så du også kan bidrage til at opbygge det og snakke med det. Websites er skrevet ved hjælp HTML, som står for: Hyper Text Markup Language. Du vil finde ud af mere om det, efterhånden, som du opbygger dit website. Det er ligesom, at lære et nyt sprog og svarer lidt til, at rejse til udlandet. Her er det en kæmpe fordel,hvis man kan tale med de lokale, på deres eget sprog. Så, lad os rejse til HTML-land og får lært noget HTMLsprog. 1

2 STEP 1: Hvad er web-sider? 1. Åben et almindelig tekst-program, der skriver ren tekst, som Notepad eller Wordpad.. Lav et nyt dokument. 3. Skriv et eller andet! Det kunne f.eks. være: Hallo! Mit navn er Gem filen i en mappe på din pc og kald filen hallo.txt.

3 STEP 1: Hvad er web-sider? 4. Luk tekstprogrammet og find nu filen igen, i din mappe. Åben den ved at dobbeltklikke på den. Den åbner op i dit tekst-program. 5. Gem filen igen, men denne gang som hallo.html 6. Prøv at åbne filen ved igen, at dobbeltklikke på den. 3

4 STEP 1: Hvad er web-sider? 7. Hvilket program blev denne gang brugt til, at åbne filen? En web browser er et specielt program, der ved hvordan man oversætter tekst-filer, som indeholder HTMLkoder. Vi har endnu ikke tilføjet noget HTML, vi har kun skrevet noget tekst, men browseren er ligeglad! Så længe du skriver.html, vil browseren gøre sit bedste for at vise filens indhold så godt som den forstår det. 8. Dette er meget nyttigt. Selv når en hjemmeside indeholder fejl, vil browseren forsøge at finde ud af, at vise det til dig alligevel. 9. Hvordan kan vi se disse filer? Når du skriver i adressefeltet i din browser, bliver din anmodning sendt videre til en computer, der altid er tændt og konfigureret til, at tillade dig at se de sider, der lever inde i den. Denne computer kaldes en server. Når den modtager en anmodning fra din computer, leder den efter alle de nødvendige filer (hallo.html filen), som den sender dig med alle de elementer, siden skal vise, som f.eks. teks, billeder og videoer. Når du dobbeltklikker på hallo.html filen i din mappe fungerer din pc, som en server, der sender html-filen videre til browseren på din pc. 4

5 STEP : Hvad er HTML? 1. HTML er et markup sprog - det betyder, at det bliver brugt til at beskrive, hvad tingene er. Selvom browseren vil forsøge at vise tingene så godt som den kan, hjælper det den, at vide hvad disse ting er, om det er en overskrift, et citat, en liste osv.. Til at fortælle browseren dette, bruger vi tags. 3. Tags indrammer det indhold vi putter på websiden. De ser f.eks. således ud: <p>dette er noget tekst</p> <p> er en forkortelse for paragraph. Der er en åbnings tag, som ser således ud: <p> og en tilhørende luknings tag med en skråstreg: </p> Browseren ved, at alt imellem de to tags er et afsnit med tekst. 4. Prøv at lave et tekstfelt vha. tekst-programmet: 5

6 STEP : Hvad er HTML? 5. Læg mærke til, at selv om teksten i den sidste paragraph står på 3 linjer, vises den i browseren, som om de tre linjer står i forlængelse af hinanden. Det er fordi vi ikke har fortalt browseren, at den skal lave linjeskift. Man kan få browseren til at skifte linje ved, at skrive <br/> som betyder break (stop eller stands) for enden af det ord, hvor der skal være linjeskift. Prøv - og se hvad der sker. 6. Tags kan have attributter, som er stumper af nyttige oplysninger om elementet. Lad os se på et link tag: <a href= www. youtube.com >Se nogle videoer på Youtube</a> <a> står for anchor (anker). 7. Det har også et åbnings tag: <a> og et luknings tag: </a> men vi tilføjede også en attribut til åbningstagget: <a href= > href er attributten, og er værdien. href står for: hypertext reference. En tekst, der linker til andre tekster blev tidligere kaldt: hypertext, fordi den kunne indeholde billeder, lyde, og kunne linke til andre tekster. Det gjorde det til noget andet end bare ren tekst. href fortæller browseren hvor linket skal føre dig hen, og teksten imellem tagsene er den synlige linktekst i browseren. 6

7 STEP : Hvad er HTML? 8. Spørg en af hjælperne om du må downloade og bruge editværktøjer som: Notepad-plus til pc eller Bluefish til mac og et udviklingsværktøj Firebug som bruges til at kigge på koder i både en Firefoxbrowser og en Chrome-browser. (en udvikler, er en der skaber ting med koder). 9. Dobbeltklik på page.html filen fra mappen: filer til opg1, der hører til opgaven. Åben den i en browser. Hvis du bruger udvikler værktøjer, så prøv at bevæg dig rundt på siden. Højreklik på alt du synes ser interessant ud, og klik på Inspect element (vis detaljer om elementet). Et panel vil åbne op, som viser dig sidens koder samtidig med at siden vises. 7

8 STEP : Hvad er HTML? 10. Bevæg musen hen over forskellige stykker af kode. De tilsvarende ting på siden vil blive fremhævet, så du kan se, hvilke ting, der gør hvad. Prøv at inspicere alle dele af siden. Kan du regne ud hvad de forskellige tag-navne står for? 11. Vi kender allerede: <p> and <a>. <ol> - ordered list (ordnet liste) <ul> - unordered list (uornet liste) <li> - list item (listeelement) <h1>, <h>, <h3>, <h4>, <h5>, <h6> - headings (overskrifter) <hr> - horizontal rule (vandret streg) <div> - en boks til grupering af elementer <img> - et særligt element, som i modsætning til andre ikke har et afsluttende tag. Vi bruger det til at indsætte billeder med. 8

9 STEP : Hvad er HTML? 1. Der er også tags, som vi altid bruger i HTML-dokumenter, og de er: <html> - fortæller browseren hvor vi sætter koden <head> - inde i <head> skriver vi information, der kan være nyttig for browseren, men som ikke kan ses som tekst på siden. I dette eksempel har vi sat en <title> ind, som vises i toppen af browser vinduet. <body> - Her placerer vi de elementer vi gerne vil have vist på siden. 13. Åben filen page.html i et edit-værktøj: Notepad++, Bluefish eller et andet 14. Læg mærke til hvordan tags kan indlejre inden hinanden. Vi har <a> tag, som er inde i et <p> tag, som igen er inde i et <div>, som er placeret inde i <body>. Hver gang dette sker, siger vi at tag et der bliver pakket ind er the child (barnet) og det tag der er indpakningen er the parent (forældre) elementet. Det er lidt ligesom et familietræ! 9

10 STEP : Hvad er HTML? 15. For browseren er tags af samme type ens, men du kan gøre dem individuelle eller forskellige ved at markere dem med classes (klasser) eller ids (udtales aye-dees). For eksempel kan nogle af dine afsnit være introduktioner, så du kunne give dem en klasse, som hedder introduktion. Prøv om du kan få øje på nogle klasser inde på page.html. 16. Ids bruges til at markere unikke elementer på din side. Se om du kan få øje på div tag med et id kitten på siden. 17. Hvad sker der hvis du flytter rundt på tingene? Lad os gå tilbage til kode-editoren. Find et <ol> tag i koderne og marker alt, som er inde i den: <ol> <li>killinger</li> <li>rummet</li> <li>sove længe</li> <li>spille spil</li </ol> 10

11 STEP : Hvad er HTML? 18. Kopier det nu et andet sted hen i koderne. Gem siden og refresh (opdater) siden i browseren. Hvordan påvirker rækkefølgen af din kode rækkefølgen, som tingene vises i browseren? Ting du kan prøve 1. Lav din egen paragraph med tekst: <p> Noget tekst, som du synes kune være interessant. Hvor meget du skriver er, op til dig. </p>. Lav et link, som peger hen til en anden del af siden (hint: det har noget, at gøre med id - kig efter et link, der tager dig hen til kitten). 3. Tilføj dine egne overskrifter, der hvor du tror, de kan være nyttige. Hvad sker der, hvis du ændrer overskriftens numre, for eksempel fra <h> til <h4>? 11

12 STEP : Hvad er HTML? 4. Hvad skal du gøre, hvis du gerne vil linke til en anden side? (hint: se linje 9 i koderne) 5. Hvis du bruger et udvikler værktøj, og du har panelet fremme, der viser koderne, prøv at dobbeltklik på et tag, der ser interessant ud. Prøv om du kan ændre det. Her får du et live preview (direkte visning) uden, at du behøver bevæge dig mellembrowseren og kodeeditoren. Sejt ikke? 6. Refresh siden. Hvad skete der? Når du redigerer kode på denne måde, bliver det ikke gemt. Så, det du kan gøre er, at se et preview (forhåndsvisning) af hvad der vil ske hvis du ændrede koderne, uden at du kommer til at rode rundt i koderne. Det giver dig mulighed for, at eksperimentere en masse og hele tiden kunne gå tilbage til de oprindelige koder. 1