HTML, CSS och Javascript

Intro till Programmering

Teori - programmering med en presentation.

W3Schools TryIt Editor

Editors

Atom är ett bra verktyg för att koda med färg.

TextWrangler Traditinellt verktyg för textredigering.

HTML, CSS och Javascript

Vi jobbar på W3School där det finns gott om övningar. Startsidan visar precis vad det handlar om.

HTML

W3School om Canvas - där man även använder lite Javascript för att rita. Läs igenom alla delarna i avsnittet canvas som du ser i innehållet i vänsterspalten.

Bra att känna till

Färger

Exempelkod

Klipp in den i ett try it yourselffönster.

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

// Rektangel //

ctx.fillStyle = "Aqua";

ctx.fillRect(50,320, 300,180);

// Streck //

ctx.moveTo(40,80);

ctx.lineTo(200,100);

ctx.stroke();

// Cirkel //

ctx.beginPath();

ctx.arc(400,0,80,0,2*Math.PI);

ctx.fillStyle = "Yellow";

ctx.fill();

// Triangel tak //1

ctx.beginPath();

ctx.moveTo(100,260);

ctx.lineTo(300,10);

ctx.lineTo(500,260);

ctx.closePath();

ctx.fill();

ctx.stroke();

</script>

Inlämningsuppgift

Uppgift

Rita en fin bild

Rita ett hus eller en fin bild med hjälp av den html du lärt dig på W3Schools.

Du kombinerar alltså linjer, rektanglar, cirklar, färger, gradienter och text till en trevlig bild.

Sedan tar du en skärmdump på både kod och bild och lämnar in på Progress - Teknik 1 - F6.

CSS

CSS intro och CSS tutorial

Javascript

Javascript - Introduktion med inlärningsmål och bedömningskriterier

JS Introduction på W3Schools där du kan testa koden för att tända och släcka en glödlampa. Kopiera sedan koden till en textredigerare (Noterad) och spara som .html i en mapp på din dator. Högerklicka på de två bilderna på glödlampan (pic_bulbon.gif och pic_bulboff.gif). Nu kan du öppna filen från din dator och det funkar. nästa sak är att byta bilderna (lägg två nya bilder i mappen på din dator och ändra namnen i koden i html-filen).

JS Functions med exemplet Celsius to Fahrenheit ser du hur du kan använda en funktion. Skapa en egen funktion som räknar ut något på samma sätt.

W3Schools Javascrpt - The Script Tag på W3Schools

JS Functions på W3Schools