Arbetsmaterial HTML pass 1 - Grunder

Transkript

1 Arbetsmaterial HTML pass 1 - Grunder Det vi idag kallar Internet växte fram ur ett amerikanskt nätverk kallat ARPAnet som skapades i slutet av 60 talet. Ett topphemligt verktyg för att koppla ihop stordatorer i händelse av ett kärnvapenkrig, gjort för att fungera även om delar av nätet skulle slås ut. På 70 talet skapades Internet, ett globalt nätverk av datorer som vi idag använder till att surfa på hemsidor, boka biljetter, lyssna på musik, se på film, kommunicera, rita, fotografera ja, möjligheterna verkar obegränsade. Vår digitala revolution till att gemene man fick internetåtkomst skedde på 90 talet. Plötsligt kunde vem som helst med hjälp av lite HTML lägga ut en hemsida på Internet så att andra kunde besöka den. Språket vi använder för att skapa alla dessa olika hemsidor kalla HTML (HyperText Markup Language), ett märkspråk som utgör en standard för WWW (World Wide Web) vilket är samlingsnamnet på alla hemsidor som finns tillgängliga på Internet. Med hjälp av HTML beskriver vi hemsidans struktur och innehåll. Vad som är rubriker, styckestexter, bilder, länkar och så vidare. Kort sagt så beskriver vi allt innehåll på vår hemsida. Programmet vi använder för att datorn ska kunna läsa vår HTML kallas för webbläsare. Internet explorer Firefox Chrome Safari Opera IT lyftet 2014 HTML pass 1 sida 1

2 HTTP När du knappar in på tangentbordet att du vill besöka t.ex. så skickar din dator ut en signal till en webbserver. Detta är en dator som står uppkopplad till Internet dygnet runt och enbart har som uppgift att hantera hemsidor. Så fort webbservern tagit emot vår förfrågan om att se startsidan för blocket.se, så skickar den tillbaka informationen till oss i form av HTML kod. Språket som vår dator använder när den kommunicerar med webbservern kallas för HTTP (HyperText Transfer Protocol). Andra typer av språk som vår dator använder när den kommunicerar med en webbserver kan vara FTP (File Transfer Protocol) för fil överföring, samt SMTP (Simple Mail Transfer Protocol) för hantering av e post. Webbdokument Hemsidorna vi skapar med hjälp av HTML kallas för webbdokument. Det är dessa dokument våra webbläsare får skickade till sig från webbservern när vi knappat in en hemsideadress. Dessa webbdokument kan vi utan problem skriva och öppna på våra datorer utan att vi behöver internetuppkoppling. Det är först när vi vill att andra ska kunna se våra sidor som vi måste lägga dem på en webbserver. Detta gör vi genom att använda ett webbhotell, men dessa beskriver vi lite senare. För att öppna och titta på våra webbdokument använder vi som sagt en webbläsare. För att skapa och redigera webbdokument använder vi en textredigerare. Gemensamt för alla webbdokument är att de enbart används för att skriva text. Denna text kallar vi HTML. IT lyftet 2014 HTML pass 1 sida 2

3 I Windows finns det en textredigerare inbyggd från början i operativsystemet. Denna heter Anteckningar och ska finnas på alla datorer. Vi kan skapa kompletta hemsidor i detta program genom att skriva HTML. Vill vi däremot arbeta med professionella program rekommenderas Dreamweaver eller Sublime Text. Sammanfattning HTML WWW Webbläsare HTTP Webbserver Webbdokument Textredigerare Språket vi använder för att skapa hemsidor. Samlingsnamnet på alla hemsidor vi besöker över hela världen. Program som läser HTML kod och visar resultatet på bildskärmen. Språket med vilket vår dator kommunicerar med en webbserver. En dator som ständigt är uppkopplad och hanterar hemsidor. Sidorna vi skapar med hjälp av HTML. Programmen vi använder för att skriva HTML. Syntax Vi delar in HTML taggar i två olika kategorier: öppna och stängda taggar. Öppna taggar har en start och sluttagg som berättar var taggen börjar, samt var den slutar. Innehållet mellan start och sluttagg får egenskaperna som följer med HTML taggen. <h1>välkommen till min hemsida</h1> Stängda taggar omsluter inget innehåll, och behöver således ingen start eller sluttagg. <br> <img src= minbild.jpg > IT lyftet 2014 HTML pass 1 sida 3

4 Övning 1A Öppna programmet Anteckningar. Spara därefter filen med följande inställningar på skrivbordet (desktop) på din dator: Filnamn: använd ditt förnamn. Avsluta med.html. Filformat: klicka i rutan och välj alla filer. Kodning: klicka i rutan och väl UTF 8. Detta gör bland annat att Å,Ä och Ö ser ut som det ska. Skriv in den fetstilade HTML koden nedan. Tecken för < och > hittar du till vänster om Z. <html> <head> <title>övning 1A</title> </head> <body> <h1>min testsida</h1> Detta är en rad. <br> Detta är en ny rad. </body> </html> Spara dokumentet genom att klicka Arkiv i menyn och sedan klicka på spara. Grattis! Du har gjort ditt första webbdokument. Nu ska vi se hur det ser ut. Gå till skrivbordet på din dator. Där ska du hitta filen du precis sparade med filändelsen.html. Dubbelklicka på den. Filen öppnas i webbläsaren och du ser resultatet av din HTML kod. Viktigt att komma ihåg är att du har en och samma fil öppen i två olika program samtidigt. Den ena programmet är webbläsaren som läser din HTML kod. Det andra programmet är en textredigerare där du gör alla ändringar. IT lyftet 2014 HTML pass 1 sida 4

5 Övning 1B Skapa ett nytt dokument och spara det på samma sätt som i övning 1A. Du bör dock välja ett annat filnamn så att filerna inte heter samma sak. Skriv in den fetstilade HTML koden nedan. Spara sedan dokumentet och öppna det i webbläsaren. <html> <head> <title>djur jag gillar</title> </head> <body> <h1>djur</h1> <h3>katt </h3> Katter är smidiga djur. <br> En del katter är svarta. <h3>hund</h3> Hundar är snälla. <br> En Tax har korta ben. En Boxer är stark. </body> </html> 1. Märker du skillnaden mellan h1 och h3? 2. Trots att vi gjort nya rader inuti meningen Hundar är snälla så ligger alla ord på en och samma rad. Varför är det så tror du? Vi kommer ta upp exakt vad alla dessa HTML koder gör i pass 2. IT lyftet 2014 HTML pass 1 sida 5