Embedded Files
HTML och Javascript finns på nästan alla webbsidor du besöker. HTML är grundspråket för webbsidor och sätter upp ramarna för hur en webbsida ska se ut. Javascript gör sidan mer dynamisk - exempelvis genom att jag som besökare kan påverka vad sidan ska innehålla eller hur den ska se ut. (De flesta sidor innehåller också CSS som påverkar utseendet på sidan.) Till dessa språk kan man sedan lägga andra typer av programmering.
Den här sidan är gjord med i Google Sites - man behöver inte kunna programmera för att göra en webbsida. Men om man vet hur en webbsida är uppbyggd och kan grunderna, kan man sedan lägga till funktioner, utseende och interaktivitet som gör sidan unik.
Här får du gå igenom grunderna i html och nosa på lite javascript - samtidigt som du får se resultatet på en webbsida.
Steg 1
Steg 1
Vi börjar med html. Gör så här:
Vi börjar med html. Gör så här:
Öppna dokumentet "html övning 1" och kopiera texten(koden) på sidan.
Gå till webbsidan htmledit.squarefree.com/ (På den här sidan kan man skriva html-kod och se resultatet direkt. Övre delen av sidan skriver man kod - undre delen visar resultatet.)
Klistra in den kopierade texten på övre delen av sidan (istället för den kod som finns där). Se resultatet - en sida med rubriken "Mina bilder" och en bild.
Vad gör då html-koden?
Vad gör då html-koden?
Jo, allting innanför hakar < > är html (Hypertext Markup Language) och kallas taggar. Med hjälp av dessa bestämmer man hur Webbsidan ska vara uppbyggd och se ut. De flessta taggar har ett start och ett slut. Exempel: <P> startar en nytt stycke </P> avslutar detsamma. Det som står mellan taggarna <body> och </body> är själva innehållet på sidan - kroppen.
Några förkortningar:
img=image (bild)
src=source (källa)
jpg=bildformat för foton
I taggen <img...> säger alltså html-koden till webbläsaren att källan till den bild som ska visas här finns på adressen "http://selah.sg..." och att bredden på bilden ska vara 400 bildpunkter <img width="400" src="http://selah.sg/wp-content/uploads/2016/04/Spring-3-1080x675.jpg">
Uppföljning Steg 1
Uppföljning Steg 1
Kan du räkna ut vad <h1>, <center> och <br> står för?
Prova att sätta en annan siffra efter h i <h1>
Var syns det som står efter <title> ?
Försök att ändra storleken på bilden
Steg 2
Steg 2
Öppna dokumentet "html övning 2" och kopiera texten(koden) på sidan.
Gå till webbsidan htmledit.squarefree.com/ igen och klistra in koden istället för den som redan finns där.
Skillnaden mot förra koden är att det längst ned i högra hörnet visar sig en länk till Pixabay och att sidan fått grå bakgrund.
Uppföljning steg 2
Uppföljning steg 2
Varför hamnar texten till höger?
Vilken tagg är det som gör att texten blir klickbar och leder till Pixabay?
Försök ändra bakgrundsfärgen på sidan
Med hjälp av bilder från Pixabay - försök byta ut bilden på sidan mot en du väljer själv
Gör så här på Pixabay:
Sök efter en bild
Klicka på den bild du vill använda. bilden visar sig i större format.
Klicka höger på bilden (två fingrar på chromebook) och välj "Kopiera bildadress"
Klistra in adressen på rätt ställe i koden
Steg 3
Steg 3
Öppna dokumentet "html övning 3" och kopiera texten(koden) på sidan.
Gå till webbsidan htmledit.squarefree.com/ igen och klistra in koden istället för den som redan finns där.
Nu har det tillkommit två länkar ovanför bilden "Bild 1 | Bild 2". När man klickar på dessa byts bilden ut. Detta med hjälp av javascript.
Det som hänt är att ett stycke kod tillkommit högst upp. Ofta lägger man javascriptet i <head>, huvudet, för att enkelt hitta koden senare.
<script language="Javascript"> säger till webbläsaren att nu kommer det javascript så att den inte försöker tolka html-språk. </script> säger till webbläsaren att nu är det slut på javascriptkoden - html tar över igen.
Javascriptet i detta exempel innehåller bara en funktion som heter changeImage. Som man kan förstå ska denna byta ut bilden på sidan. Nedan förklaring hur detta går till.
I länktaggen <a> finns inte bara en adress till en sida. När jag klickar på länken "bild 1" ropar länken på ett javascript (istället för att öppna en sida eller en bild) och på en funktion som heter changeImage <a href="javascript:changeImage..."> Denna funktion återfinns längst upp i koden.
När länken ropar på javascriptet skickas en bildadress med - innanför parentesen. I funktionen högst upp i koden sparas denna adress i en variabel som heter "imageaddress". (En variabel är som en låda som kan innehålla olika saker - när jag klickar på "bild 1" fylls lådan med en bildadress, när jag klickar på "bild 2" fylls lådan med en annan bildadress.)
Funktionen innehåller endast en kodrad mainimage.src=imageaddress; Enligt den ska källan till något som heter mainimage vara detsamma som innehållet i imageaddress. Om vi tittar längre ned på kodsidan hittar vi vår image-tagg <img> - den som gör att vi ser en bild så fort vi öppnar webbsidan. Den har nu fått ett attribut name="mainimage". Den bildplatsen har alltså fått namnet mainimage och med hjälp av mainimage.src kan jag alltså byta ut den bildadress som är skriven från början i taggen mot en ny - i detta fall mot innehållet i variabeln imageaddress.
När jag så klickar på länken "bild 2" istället händer samma sak som ovan om igen - fast denna gång fylls "lådan" med en annan bildadress med resultatet att en annan bild visas.
Uppföljning steg 3
Uppföljning steg 3
Prova att byta ut bilden på sidan mot egna bilder (sådana du hämtar från Pixabay eller liknande).
Försök att lägga in en bild till på sidan (under den första) och skapa länkar som byter ut den bilden mot andra. Det mesta går att ordna genom att kopiera och klistra in från befintlig kod, men du behöver en ny funktion med ett nytt namn och ett annat namn på den nya bildplatsen. (Var noga med citationstecknen - dubbla " och enkla ' )
...eller lägg till en länk till som byter ut bilden.
Steg 4 - överkurs
Steg 4 - överkurs
Öppna dokumentet "html övning 4" och kopiera texten(koden) på sidan.
Gå till webbsidan htmledit.squarefree.com/ igen och klistra in koden istället för den som redan finns där.
Några knappar för att ändra bakgrundsfärg har tillkommit på sidan. <button type="button"> skapar en knapp som sedan kan användas för att starta ett javascript exempelvis. I det här fallet startas det med hjälp av onclick - ett attribut som känner av när knappen klickas.
Uppföljning steg 4 - överkurs
Uppföljning steg 4 - överkurs
Kan du med hjälp av steg 3 räkna ut hur bakgrundsfärgen byts när man klickar på knapparna? (Det har tillkommit en funktion längst upp i koden.)
Prova även att (eller istället för) byta färg på texten. För att komma åt textfärgen används color istället för background i funktionen, alltså document.body.style.color = color;
Fördjupning
Fördjupning
Lär dig mer om html
Webdesignskolan.se (sv)
Html.com (eng)
Codecademy.com (eng)
Lär dig mer om Javascript
Javascript.nu (sv)
Javascript.com (eng)
Report abuse