Introduktion: Du kender nu nogle enkle HTML tags, så nu er det på tide, at du kommer i gang med at lave din første side! Når du har nogle HTML-sider klar skal du have dem lagt op, så dine venner kan se websitet. 1
1 STEP 1: Lav en en side om dig selv 1. Åben en tekst editor. Et program, som f.eks. Notepad++, Bluefish eller et andet.. Åben about_me.html filen. Det indeholder kun lidt HTML kode. Lige nok til at få dig i gang. Du kommer til at skrive resten selv. Noget om fejl Fejl sker jævnligt. Det er rigtig nemt at komme til at lave dem i HTML, fordi man skal huske at lukke hver eneste tag, også fordi åben og lukke tags ene er en lille smugle forskellige. Lad os prøve at lave nogle fejl med vilje og se hvordan browseren forsøge at få mening i koderne, selv om de ikke er skrevet perfekt. 1. Lad os vælge listen af ting vi kan lide, som eksempel. En af de fejl, der ofte sker er, at man glemmer lukke-tagsene. Så, lad os prøve at fjerne </ul> for at se hvilken effekt det har i browsere.
STEP 1: Lav en en side om dig selv Hvad skete der? Noget under listen flyttede sig lidt til højre. Hvis du inspicerer siden med dit udvikler værktøj kan du se, at de ting der kommer efter listen bliver indlejret inde i den. Det er grunden til at de flyttede sig til højre. Efter vi fjernede lukke-taget, ved browseren ikke, at listen af ting er slut. Tilføj </ul> taget igen og gem. Når du laver et refresh af browseren er de efterfølgende tags ikke længere inde i <ul>.. Tags skal staves rigtigt, for at browseren kan forstå dem. Hvad sker der hvis vi staver noget forkert? Find <h1> tag et. Lad os ændre det til <d1>. Gem dokumentet og refresh browseren. 3
STEP 1: Lav en en side om dig selv Hvad skete der? Eftersom browseren ikke ved hvad du mener med dette tag, kan den ikke længere se, at det skal være en overskrift (heading). Derfor bruger den ikke en stor tekst til at vise, hvor vigtigt dette stykke tekst er. Ændre <d1> tilbage til <h1> og gem igen. 3. Find et af <img> tagsene. Vi har lige prøvet at stave tag-navnet forkert, og browseren var ikke sikker på hvad den skulle gøre med det. Men, hvad sker der hvis man staver forkert i attributten? Inde i <img> tag et har vi scr og alt attributerne: <img src= kitten.jpeg alt= Det er en killing > 4
STEP 1: Lav en en side om dig selv Prøv at ændre src til noget andet, f.eks. div. Gem dokumentet og refresh browseren. Åh nej - killingen er væk! Pludselig ved browseren ikke længere hvor den skal finde billedet, så den kan vise det - den leder efter. Ændre det tilbage til srcog få billedet af killingen tilbage. 4. Nu skal du prøve at fjerne det andet citationstegn (") fra src attributten til dette billede, således at det ser sådan her ud: <img src= kitten.jpeg alt= Det er en killing > Gem og refresh browseren. 5
STEP 1: Lav en en side om dig selv Her tror browseren at alt tagget med tekst hører med til navnet, men billedfilens navn er jo kun kitten.jpeg. Browseren viser et ikon, der fortæller at der skal vises et billede, men at browseren ikke kan finde det. Sæt citationstegnet ind igen og refresh browseren. Vi har prøvet at lave nogle almindelige fejl, og nogle gange får simple fejl browseren til virkelig at kæmpe for at forstå hvad vi mener. Men for det meste vil den forsøge at vise os et eller andet alligevel. Så, da vi ændrede header tag et til noget andet, forstod browseren ikke at dette stykke tekst skulle være en overskrift, men den viste os alligevel noget tekst. Nogle gange forstår den noget mens andre fejl kan være meget forvirrende. 6
STEP : Lav en ny side og link til den Lad os lave en ny side. Åben about_me_page_.html. Der lidt mindre kode på denne side, end den side du lige har arbejdet på. Men, jeg er sikker på at du kan finde ud af at sætte nye tags ind nu. Lidt hints og ideer: Tilføj en heading som kan fungere som overskrift for siden. Siden kunne handle om dine kæledyr, din favorit hobby eller dine venner og deres hobbyer. Tilføj en liste af ting dine kæledyr kan lide, hvis siden handler om kæledyr. Er du færdig nu? Super! Lad os linke de to sider du har lavet sammen. Når vi har linket til dele på den samme side, kunne vi bare pege links hen på bestemte id inde på siden, på denne måde: <a href="#kitten">linke til dette element</a> Som tog dig hen til dette sted: <div id= kitten > <img src="spacecat.jpg" alt="en kat i rummet" /> </div> For at linke til en anden side, behøver vi ikke at bruge dette tegn (#), i stedet skal vi fortælle hvilken side vi gerne vil have linket til at føre os hen til. For at linke fra about_me_page_.html til about_me.html skal du skrive: <a href="about_me.html">link til Om mig siden</a> 7
STEP : Lav en ny side og link til den Du kan ændre link teksten Link til Om mig siden, til noget andet. Det kunne være Mig, Om mig eller noget helt tredje. For at linke tilbage fra about_me.html til about_me_page_.html skal du skrive sådan her: 1. Lav et link i koderne <a href="about_me_page_.html">side Om Mig</a> 8
Tillykke du har lavet dit eget website. 1. Nu har du lavet dit eget website, og nu skal det vises til hele verden! Hvis du kopierer adressen i browseren, for dit website og sender det til en du kender, vil de ikke kunne se hvad du har lavet i deres browser. Det er fordi denne adresse beskriver et sted på din computer, og dine venner har ikke adgang til den. Hvis de havde adgang - hvad så hvis de ville se det, når din computer er slukket? Kan du huske, der var noget om servere i opgavearket HTML 1? Servere er computere, som altid er tændte og på internettet. De er sat op, så alle kan besøge websites, der bor på disse computere.. som regel uploader folk deres websites til et webhotel, som sørger for, at websitet kan ses til alle tider. Det koster penge og derfor vil vi vise dig en anden måde, hvor du kan vise simple HTML sider til dine venner uden at det koster penge. Du skal oprette en G-mail og derigennem skal du have adgang til Google-drev hvortil du downloader en app Neutron Drive, som er et online editerings værktøj, der også kan vise dit website, når du sender linket til folk du kender. 3. Det er dog et krav at du er 13 for, at kunne oprette en G-mail. Er du yngre skal dine forældre gøre det for dig. 9
4. Søg efter g-mail i f.eks. google og klik på linket. 5. For at kunne lave en g-mail skal du udfylde formularen. 6. Når du har udfyldt formularen klikker du videre på Next step 10
7. Her kan du uploade et billede, men vent med det og klik videre. 8. Du har nu oprettet en g-mail, som du efterfølgende skal bruge til, at oprette google-drev med. Klik videre på dne blå knap, så du kan åbne g-mailen. 11
9. Når du har åbnet g-mailen, kan du søge efter google drive i søgefeltet. 10. Klik på linket videre til Google-drive. 1
11. Herefter kommer du til en side hvor du kan downloade google-drive 1. Log ind på Google-drive med samme login, som til din g-mail. 13. Når du er logget ind har du mulighed for at oprette en ny mappe til dine HTML-filer. Klik på den røde knap hvor der står CREATE, vælg folder eller mappe til at putte dine filer i. 13
14. Giv din folder et navn, det kunne f.eks. være HTML1 15. Nu skal du uploade dine HTML-filer til mappen. Det gør du ved, at klikke på den lille røde knap med pilen, ved siden af CREATE knappen. Herefter skal du vælge mappen med filerne til opgave 1. 14
16. Du kan følge med i hvor lang tid det tager, at uploade filerne i pop-up vinduet, nede i venstre hjørne af skærmen. Når mappen er uploadet kan du åbne den og se alle HTML-filerne. 17. For at andre skal kunne se dit website skal du dele mappen dit website ligger i og derefter gøre den public. 18. Højreklik på mappen filer til opg1, vælg Share og share igen. 19. Klik på Change for at ændre fra Private til Public 15
0. Sørg for, at der er en prik i cirklen ud for Public on the web. Klik save på den grønne knap. Du kan nu se at mappen ikke længere er Private. Klik på den blå knap Done for at gemme indstillingen. 1. Nu skal du have fat i en Google-app, der kan hjælpe dig med at vise dit website i en browser med en sti, som du kan sende til dine venner og famile, så de kan se dit website.. Klik på CREATE knappen igen og men denne gang skal du klikke på Coonect more apps. Søg efter appen Neutron Drive i søgefeltet. 16
3. Klik på Connect for at tilknytte appen til din google drive. Appen indeholder en masse funktioner, som du kan lære mere om vha. videoen. Men, til at starte med skal du bruge den til at vise dit website til andre. 4. Når appen er installeret skal du gå tilbage til mappen med alle dine html-filer. klik på den fil, som skal fungere, som startside på websitet. Det kan f.eks. være page.html. 5. Siden åbner nu op i Neutron drive, hvor du kan se dine mapper, på samme måde som på drive. Åben mapperne til du kommer til filen page.html. 17
6. Højreklik på page.html og vælg View file. Filen åbner nu op i en browser og den adresse der står i browservinduet kan du sende til folk du kender og de kan nu gå ind og se dit website. 18