Lektion 3 HTML, CSS och JavaScript
|
|
|
- Karl Ek
- för 6 år sedan
- Visningar:
Transkript
1 Lektion 3 HTML, CSS och JavaScript I den här lektionen behandlas HTML, CSS och JavaScript (JS). Det förutsätts att lektion 1 och 2 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML och CSS för att klara den här lektionen. I denna lektion kommer JS att användas för att förändra innehållet i en webbsida (dvs HTML), och för att förändra utseendet (dvs CSS). HTML - Börja så här 1. Skapa ett nytt html-dokument. 2. Skriv Lektion 2 som titel. 3. Sedan ska själva strukturen, fyrkanterna, för webbsidan göras. Dessa fyrkanter skapas med hjälp av <div>. En div är ett generiskt element som kan innehålla andra element, och som är lätt att placera på webbsidan. Läs mer om div här: Skapa fyra divar med följande id: left, mid, right, och textbox. Dessa ska tillhöra en klass som kan kallas content. Koden bör nu se ut så här ungefär: <!doctype html> <html> <head> <meta charset="utf-8"> <link href="style.css" media="screen" rel="stylesheet" type="text/css"/> <title>lektion 2</title> </head> <body> <div id="left" class="content" ></div> <div id="mid class="content" ></div> <div id="right" class="content" ></div> <div id="textbox" class="content" ></div> </body> </html> 4. I textbox ska ett stycke läggas till med siffran 0 i. Ge stycket id t clickcounter, vilket kommer att utnyttjas i JS senare. <div id= textbox ><p id="clickcounter" >0</p></div> CSS - Fortsätt så här 1. En div som inte har något innehåll syns inte på webbsidan. För att kunna se vad som gjorts hittills i lektionen, behövs en CSS-fil skapas. I CSS-filen ska body få #6a6a6a som bakgrundsfärg. #left och #right ska få #a6a6a6 som bakgrundsfärg och mid ska få #ff7d00 som bakgrundsfärg. #textbox behöver ingen bakgrundsfärg utan bakgrundsfärgen från body får gälla. 2. Klassen content ska få bredd respektive höjd till 20vw. Det betyder att varje element som tillhör klassen content ska vara 20% av viewport width i höjd och i bredd. Viewport width innebär bredden på browserfönstret. Detta är ett bra sätt att få innehållet på webbsidan att bli mer responsiv eftersom storleken på elementen anpassas efter storleken på fönstret. Läs mer här:
2 Så här bör CSS-koden se ut ungefär: body { background-color: #6a6a6a;.content { width: 20vw; height: 20vw; #textbox { #left { #mid { background-color: #ff7d00; #right { 3. Om CSS-filen sparas och webbsidan laddas kommer en mörkgrå bakgrund användas. Till vänster i fönstret finns en ljusare grå ruta, med en orange ruta under, under den en ljusgrå ruta, och längst ned siffran Detta är helt ok, men de tre färgade rutorna ska ligga horisontellt bredvid varandra. Detta görs genom att lägga till float: left; i CSS-filen under.content. Float innebär att elementen flyter och hamnar bredvid varandra justerade åt vänster. För att inte siffran 0 också ska flyta och justera sig åt vänster, men till höger om fyrkanterna måste clear: left användas i #textbox. Läs mer om float här: 5. Nu är det dags att snygga till fyrkanterna. Först ska de få marginal mot omkringliggande element med margin: 2vw;. 6. Nästa steg är att göra fyrkanterna mindre kantiga genom att ändra border-radius till 2vw. Detta rundar av hörnen. Läs mer här: 7. Sedan ska fyrkanterna få en vit kant/ram runt om. Det görs med border, och ramen ska vara solid 2px tjock och vit. Det skrivs så här: border: solid 2px #fff;. Läs mer om border här: 8. Därefter ska rutorna få en skuggning mot bakgrunden. Detta görs med boxshadow. Box-shadow har fem saker att specificera: horisontell skugga, vertikal skugga, suddighet i skuggan, spridning av skuggan, samt färg på skuggan. Färgen sätts som RGB-värde med komma mellan varje färgkanal samt alphakanalen (genomskinligheten). Sätt skuggan så här: box-shadow: 0 6px 12px 3px rgba(0, 0, 0, 0.4);. Läs mer om skugga här: 9. Spara CSS-filen och ladda om webbsidan. Nu syns fyrkanterna som de ska, även om den undre inte är placerad på rätt ställe. Detta fixas genom att ändra marginalinställningarna för #textbox. Testa margin: 2vw 26vw; vilket ser ok ut, även om det inte blir helt perfekt.
3 p { 10. Nu är det dags att se över siffran 0. I p i CSS-filen ska teckensnittet ändras med font-family till 'Open Sans Condensed', sans-serif;. Sätt storleken till 8vw, fontvikten (dvs smal via normal till fet) till 300, färgen till orange, och centrera texten. Så här: font-family: 'Open Sans Condensed', sans-serif; font-size: 8vw; font-weight: 300; color: #ff7d00; text-align: center; Läs mer här: Nu ser 0:an bättre ut, även om den sitter lite för långt ned i rutan. Detta ordnas genom att förändra radhöjden för text i diven texten sitter i, dvs textbox i detta fall. Ange: line-height: 5vw; Det fyra fyrkanterna ska vara klickbara, och det ska visas genom att musmarkören får ett nytt utseende när den är över fyrkanterna. Detta åstadkoms med cursor: pointer;. Läs mer om cursor här: JS - Äntligen är det dags 1. Det går att skriva JS direkt i HTML-dokumentet, men det ska vi inte göra. Det är bättre att samla en eller flera funktioner i en egen fil. Denna fil länkas till från headern i HTML-dokumentet precis som till CSS-filen. På så sätt kan flera HTMLdokument använda samma uppsättning JS i stället för att samma JS ska skrivas i varje HTML-dokument. JS-filen kan i sin tur innehålla flera funktioner. I stället för link används script och vilken källa (src) som avses. Script-taggen måste också avslutas till skillnad mot link. Så här: <script src="lektion2.js"></script> 2. Kommentarer i JS skrivs för en rad med // följt av kommentaren, eller för flera rader /* följt av ett antal rader med kommentarer, och avslutas med */. 3. Skapa nu en ny textfil. Döp den till lektion2.js. 4. En funktion i JS skrivs som function namnetpåfunktionen(eventuella variabler för att ta emot data) { och avslutas sedan med. Till exempel så här: function changecolor(id){ alert(id); 5. Innan det skrivs något i JS behövs HTML-filen ändras något. Fyrkanterna left, mid, och right ska ropa på en funktion som heter changecolor. Det görs med onclick, så här: onclick="changecolor(this.id). Det innebär att när något klickas på anropas funktionen changecolor och id t på elementet som klickades på skickas med. Läs mer här:
4 6. Nu är det dags att skriva JS. Funktionen ska heta changecolor och den ska ta emot id t och spara det i en variabel som kallas id. Sedan ska en alert visas som i sin tur visar id t på elementet som klickades på. En alert visar en ruta, ett nytt litet browserfönter, med textinformation till användaren. Denna alertruta har en Ok-knapp. En alert är också ett ganska smidigt sätt att använda för felsökning, då till exempel olika alerts kan visas beroende på var man är i en if-sats eller för att visa innehållet i en variabel. Läs mer om alerts här: 7. Spara JS-filen, och ladda om webbsidan och testa att det fungerar. Om allt fungerar som det ska är det dags att ta bort alerten från funktionen, och börja koda JS på allvar. Det första som ska göras är att låta JS läsa in värdet som finns i siffran som visas på webbsidan, dvs i id="clickcounter". Detta värde ska sparas i en variabel. En variabel i JavaScript deklareras som var variabelnsnamn = värde; (till exempel: var x = 5;). Tänk på att alltid använda bra variabelnamn som visar vad variabeln faktiskt används till, detta kommer att underlätta all kodning och felsökning. Läs mer om variabler i JS här: 8. Sedan ska värdet i clickcounter läsas på webbsidan. Det görs med följande kod: document.getelementbyid("clickcounter").textcontent. Det innebär att textinformationen (textcontent) i clickcounter (getelementbyid("clickcounter")) hämtas från webbsidan (document). Läs mer här: 9. Då kommer siffran att läsas ut till en sträng. En sträng går inte att räkna matematik med varför strängen behöver göras om till ett heltal (integer). Genom att använda parseint görs siffran i strängen om till ett heltal. Läs mer här: Reference/Global_Objects/parseInt Läs mer om strängar här: Detta ger en kodrad liknande denna: var numberofclicks = parseint(document.getelementbyid("clickcounter").textcontent); 10. Nu läses siffran från webbsidan, men varje klick som görs på rutorna ska göra att denna siffra uppdateras. Det görs genom att använda i stort sett samma kod som tidigare, men denna gång ska clickcounter få värdet av numberofclicks + 1. Så här: document.getelementbyid("clickcounter").textcontent = numberofclicks+1; 11. Spara JS-filen och ladda om webbsidan. Nu ska siffran uppdateras varje gång någon av de tre fyrkanterna klickas på. Det enda sättet att åter nollställa siffran är dock att ladda om sidan. Det är tråkigt. Därför ska rutan med siffran i göras klickbar och den ska kalla på (med hjälp av onclick) en ny funktion som kallas resetpage. Ändra i HTML-koden så att textbox har en onclick. Skriv sedan en ny funktion i JS-filen som sätter clickcounter = 0.
5 12. Nu ska rutorna byta färg och den som klickas på ska bli orange medan de övriga ljusgrå. Detta kan göras på olika sätt, men i detta fall ska en if-sats i funktionen changecolor användas. En if-sats kollar om ett specifikt villkor uppfyllts och om så är fallet ska vissa saker ske eller ändras. En if-sats skrivs som if (villkor) { vad som ska ske. I detta fall: Om left klickas på ska den bli orange och då ska mid samt right bli ljusgrå. Om mid klickas på ska den bli orange och de andra ljusgrå. Om right klickas på ska den bli orange medan de andra blir ljusgrå. Detta skulle kunna skrivas som tre if-satser, men det är bättre att skriva en if-sats som innehåller else if (annars om). Villkoren för else if kollas om villkoren i den första if inte uppfyllts. Sist kan man ha en else (annars). Uppfylls inte villkoren i tidigare kontroller så gäller alltid else. Så här kan vi skriva if-satsen: if (id == "left") { else if (id == "mid") { else { Detta fungerar eftersom det bara är left, mid eller right som anropar funktionen. Och är det left som klickades ska left bli orange, eller om det är mid så ska mid bli orange, annars är det right som klickades och då ska right bli orange. Läs mer om if-satser här: För att kunna skriva if-satser korrekt måste man känna till hur operatorerna för jämförelser skrivs. Lika med, som ska användas i detta fall, skrivs med två ==. Läs mer om operatorer här: Nu ska färgen på rutorna ändras. Det görs på samma sätt som för siffran som räknas upp, men i stället för textcontent ska backgroundcolor ändras. Det görs först genom att påpeka att det är CSS som ska ändras med style följt av backgroundcolor. Det id som klickas på ska få "#ff7d00" medan övriga id ska få "#a6a6a6". Varje del av if-satsen behöver alltså få tre rader som sätter färgen för varje fyrkant. document.getelementbyid("left").style.backgroundcolor = "#ff7d00"; 14. Spara JS-filen och ladda om sidan och kolla att allt fungerar. Ändra i funktionen resetpage så att fyrkanternas bakgrundsfärger återställs med orange i mitten och ljusgrått till vänster och till höger. Sedan är all kod JS färdigskriven. CSS - En sista finess 1. Avslutningsvis ska en sista finess göras i CSS-filen. Det som ska ändras är att ändringen av bakgrundsfärg i de tre fyrkanterna ska göras med en snabb fade (transition). Övertoningen (faden) mellan orange och ljusgrått, och vice versa, ska vara snabb, 0.2 sekunder. Problemet med transition är att standarden inte är helt bestämd, utan varje webbrowser tolkar koden lite olika. Därför blir vi tvungna att skriva flera rader kod för att vara säkra på att övertoningen ska fungera bra. Övertoningseffekten ska ligga i klassen.content för att påverka alla fyrkanterna.
6 -webkit-transition: background-color 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out; -khtml-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; Läs mer här: Och här om browserkompatibilitet: 2. När all kodning är klar, testa den i en validator för att få hjälp att upptäcka syntaxfel. HTML: CSS: 3. Om allt stämmer enligt validatorerna, har vi nu en enkel webbsida som innehåller ett utbud av vanliga element, en del CSS-finesser samt JS som ändrar både innehåll (HTML) samt utseende (CSS). HTML-koden: <!doctype html> <html> <head> <meta charset="utf-8"> <link href="style.css" media="screen" rel="stylesheet" type="text/css"/> <script src="lektion2.js"></script> <title>lektion 2</title> </head> <body> <div id="left" class="content" onclick="changecolor(this.id)"></div> <div id="mid" class="content" onclick="changecolor(this.id)"></div> <div id="right" class="content" onclick="changecolor(this.id)"></div> <div id="textbox" class="content" onclick="resetpage()"> <p id="clickcounter">0</p> </div> </body> </html> CSS-koden: body { background-color: #6a6a6a;.content { float: left; width: 20vw; height: 20vw; margin: 2vw; border-radius: 2vw; border: solid 2px #fff; box-shadow: 0 6px 12px 3px rgba(0, 0, 0, 0.4); cursor: pointer; -webkit-transition: background-color 0.2s ease-in-out;
7 -moz-transition: background-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out; -khtml-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; #textbox { clear: left; margin: 2vw 26vw; line-height: 5vw; p { font-family: 'Open Sans Condensed', sans-serif; font-size: 8vw; font-weight: 300; color: #ff7d00; text-align: center; #left { #mid { background-color: #ff7d00; #right { JS-koden: function changecolor(id){ var numberofclicks = parseint(document.getelementbyid("clickcounter").textcontent); document.getelementbyid("clickcounter").textcontent = numberofclicks+1; if (id == "left") { document.getelementbyid("left").style.backgroundcolor = "#ff7d00"; document.getelementbyid("mid").style.backgroundcolor = "#a6a6a6"; document.getelementbyid("right").style.backgroundcolor = "#a6a6a6"; else if (id == "mid") { document.getelementbyid("left").style.backgroundcolor = "#a6a6a6"; document.getelementbyid("mid").style.backgroundcolor = "#ff7d00"; document.getelementbyid("right").style.backgroundcolor = "#a6a6a6"; else { document.getelementbyid("left").style.backgroundcolor = "#a6a6a6"; document.getelementbyid("mid").style.backgroundcolor = "#a6a6a6"; document.getelementbyid("right").style.backgroundcolor = "#ff7d00"; function resetpage(){ document.getelementbyid("clickcounter").textcontent = 0; document.getelementbyid("left").style.backgroundcolor = "#a6a6a6"; document.getelementbyid("mid").style.backgroundcolor = "#ff7d00"; document.getelementbyid("right").style.backgroundcolor = "#a6a6a6";
Lektion 2 - CSS. CSS - Fortsätt så här
Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt
Lektion 4 HTML, CSS och PHP
Lektion 4 HTML, CSS och PHP I den här lektionen behandlas i huvudsak PHP. Det förutsätts att lektion 1, 2 och 3 är gjorda, eller att du har tillräckliga kunskaper i grundläggande HTML och CSS för att klara
ORDLISTA WEBBDESIGN 100P
ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.
Lektion 2 Del 1 Kapitel 6
Lektion 2 Del 1 Kapitel 6 Inlärningsmål Att kunna kontrollera och styra webbsidors utseende med hjälp av CSS mallar Att med hjälp av CSS mallar kunna ge en hel website ett gemensamt utseende Att med hjälp
/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }
/*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height:
Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er
Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna
Labora&on 4 CSS och validering övningar/uppgi9er
Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna
<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim
Kursledare: Mahmud Al Hakim Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet
F07 Stilmallar Dagens agenda
F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar
21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html
Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar
12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration
REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap
Inför prov 1 i webbdesign
Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Dokument i övningarna I denna labora&on finns inga filer ar
En stiligare portal Laboration 3
Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt
TDDD52 CSS. Färger. Färger 1/3/13
Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis
Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">
CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning
Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er
Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on
Labora&on 2 Funk&oner, if och loop övningar/uppgi:er
Labora&on 2 Funk&oner, if och loop övningar/uppgi:er 1M322 Webbteknik 2, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns
En grundkurs i hemsidor och hur de är uppbyggda
En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och
Labora&on 1 Variabler och beräkningar övningar/uppgi9er
Labora&on 1 Variabler och beräkningar övningar/uppgi9er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns
EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript
EDA095 HTML Per Andersson Lund University http://cs.lth.se/pierre_nugues/ April 26, 2017 Innehåll: HTML, CSS, DOM, JavaScript Per Andersson EDA095 HTML April 26, 2017 1 / 23 Webben Webben byggs upp av
JAVASCRIPT. Beteende
JAVASCRIPT Beteende OVERVIEW HTML Formulär JavaScript Syntax Events DOM Validering av fomulär WEBBPROGRAMMERING PÅ KLIENTSIDAN Skriptspråk som körs på klientsidan (klientskript) Koden exekveras i webbläsaren
Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Föreläsning 2 Internet Hypertext Server och klient HTTP HTML Internet Många sammankopplade nät Gemensamma adresser T ex 10.10.0.1 Gemensamma protokoll Protokoll = regler och algoritmer för kommunikation
Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma
HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015
. HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17
Att styla webbsidor. Nivå. Uppgiften
Nivå 2 Att styla webbsidor All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.
JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?
Innehåll JavaScript En introduktion till skriptspråket JavaScript och till DOM Scripting Introduktion till JavaScript och DOM JavaScript Syntax DOM och DOM Scripting Händelsehantering och CSS Historia
En bortsprungen katt
Nivå 1 All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. En bortsprungen katt
CSS. TNMK30 - Elektronisk publicering
CSS TNMK30 - Elektronisk publicering Dagens föreläsning CSS Layout med CSS Vad är CSS? Cascading Style Sheets (CSS), ett språk som beskriver hur HTML element ska se ut. Utseende Layout Presentation (HTML
WEBDESIGN A - DTR 1210
Lektion 9: Tips tricks och diverse Bakgrundsbilder Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt är att använda bakgrundsbilder. Man behöver en bild: HTML-koden
Introduk+on +ll programmering i JavaScript
Föreläsning i webbdesign Introduk+on +ll programmering i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Språk Naturliga språk Mänsklig kommunika+on T.ex. Svenska, engelska,
Lägga till artiklar i Joomla
Lägga till artiklar i Joomla från framsidan Logga först in så att du är inloggad. Klicka sedan på Lägg till ny artikel i menyn under hem. Skriv in en rubrik på rubrikraden ej för lång! Skriv sedan artikeln
HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)
HTML och CSS Eric Elfving Institutionen för Datavetenskap (IDA) Upplägg Introduktion Grundläggande HTML Ändra utseende med CSS 2 Introduktion HyperText Markup Language används för att strukturera text
Föreläsning 4. CSS Stilmallar för webben
Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll
Webbdesign vt. 2010. Innehållsförteckning
Webbdesign vt. 2010 mångar: Kl. 8:30 12:00 Innehållsförteckning 2. FTP-hur gör man? 3. Grundtaggar 5. Tabeller 6. Infoga bilder 7. Rubriker och fonter 8. Övning 1 9. Installera HTML-edit 11. Startsidans
JavaScript del 2 DocumentWrite, Prompt och ParseInt
JavaScript del 2 DocumentWrite, Prompt och ParseInt Senast kollade vi lite på vad JavaScript är för något, hur man skapar variabler samt hur vi kan skicka ut ett meddelande till användaren genom alert.
JavaScript del 3 If, Operatorer och Confirm
JavaScript del 3 If, Operatorer och Confirm Under förra uppgiften så kollade vi på hur användaren kan ge oss information via promt(), vi använde den informationen både för att skriva ut den och för att
Laboration 2. Webbproduktion En stiligare webbsida HT2015
Laboration 2 Webbproduktion Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt sätt som möjligt. Nu är det dags att ge ögat något vackert att vila på.
Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR
Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Del 4 BILDER OCH TABELLER 0. Arbeta med bilder... 9. Redigera bilder... 96. Klickbara bilder/imagemaps... 0. Tabeller... 04 4. Skapa
CSS Cascading Style Sheets första bilden andra bilden Spelprogrammering med JavaScript och HTML5
Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj.
Laboration 2: Xhtml och CSS.
Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi
Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.
Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny
CSS-övningar. 1. Grunder
CSS-övningar 1. Grunder CSS Testa stilmallar Klasser Elementen div och span Ärvda egenskaper Mer om typsnitt, marginaler och mått Textdekor Fristående CSS -fil Attributet style Prioritetsordning hos stilelement
Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.
Lab1 - CV-sidan Du ska bygga en variant av en CV-sida i HTML och CSS. Sidan ska åtminstone innehålla en bild på dig, en klassisk tabell med utbildningar/erfarenheter, ditt favoritcitat, en eller flera
Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20
Laboration 3 CSS del 2 1 av 20 Vad kommer jag att lära mig på laboration 3? 1. Skriva en stilmall Boxegenskaper o border o margin o padding o width o float o clear Färger och bakgrundsbilder Positionering
Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1
Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min
TNMK30. Elektronisk publicering
TNMK30 Elektronisk publicering Välkomna till kursen Niklas Rönnberg niklas.ronnberg@liu.se Kopparhammaren 2, rum 2011 Medverkande Stefan Gustavson, stefan.gustavson@liu.se Camilla Forsell, camilla.forsell@liu.se
Webbdesign vt. 2009. Innehållsförteckning
Webbdesign vt. 2009 Fysiska träffar onsdagkvällar: Kl. 18:00 21:00 28/1 11/2 11/3 25/3 1/4 22/4 6/5 Innehållsförteckning 2. FTP-hur gör man? 3. Vad ska jag göra? 4. Grundtaggar 6. Tabeller 7. Infoga bilder
För att få respektive betyg krävs: 25 för godkänt, 37,5 för väl godkänt (obs betyget gäller tentan, inte kursen som helhet)
Webbdesign Provmoment: Ladokkod: Tentamen ges för: TentamensKod: TEN NWD011 SV16 7,5 högskolepoäng Tentamensdatum: 31 okt 2017 Tid: 9-13 Hjälpmedel: Färgpennor är tillåtna. Totalt antal poäng på tentamen:
Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er
Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns
Struktur & Layout med CSS
1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs
Laboration 6 Formulär och stränghantering övningar/uppgifter
Laboration 6 Formulär och stränghantering övningar/uppgifter 1M322 Webbteknik 2, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna laboration
Labora&on 8 Formulär övningar/uppgi6er
Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument
Labbrapport: HTML och CSS
Labbrapport: HTML och CSS Utförd av: Natalie Olmosse Mailadress: natalie.olmosse@gmail.com Datum: 2015 12 18 Kursansvarig: Karin Fahlquist Övriga lärare: Ulrik Söderström Första inlämningen Resultat (Godkänd/Retur):
Övning (X)HTML 2. Sidan 1 av 7 2010-11-11
Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan
Användarmanual för. 1(1)
Användarmanual för sofie.landelius@bypasset.se 1(1) 2005-06-13 Innehållsförteckning 1. Logga in... 3 Problem... 3 Content... 4 Account... 4 Help... 4 2. Att skriva en artikel... 5 Publicera artikel alt
Användarhandledning Version 1.2
Användarhandledning Version 1.2 Innehåll Bakgrund... 2 Börja programmera i Xtat... 3 Allmänna tips... 3 Grunderna... 3 Kommentarer i språket... 4 Variabler... 4 Matematik... 5 Arrayer... 5 på skärmen...
Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)
Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet
Övnings hemtentamen med förslag till lösning, webbprogrammering
Övnings hemtentamen med förslag till lösning, webbprogrammering Se detta som ett förslag efter som uppgifterna ofta går att lösa få flera sätt. Uppgift 1 CSS 4 poäng Alla css regler skall placeras i en
Lektion 5 HTML, CSS, PHP och MySQL
Lektion 5 HTML, CSS, PHP och MySQL I den här lektionen behandlas i huvudsak PHP för att läsa information från en databas, MySQL. Det förutsätts att tidigare lektioner är gjorda, eller att du har tillräckliga
Webbutveckling Laboration 1: HTML5 och CSS3.
Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan
Webbteknik för ingenjörer
Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera
WEBDESIGN A - DTR 1210
Lektion 6: Tabeller Vi ska lägga till en tabell i hemsidan. Först ska vi titta lite på hur man gör tabeller. Vi börjar med enklast tänkbara tabell. En tabell med bara en ruta: Nu ska vi gå igenom steg
Styla med CSS3. Översikt. Lektion 1: Styla text med CSS3
Styla med CSS3 Översikt Styla text med CSS3. Styla med Block element. Pseudo-Classes och Pseudo-Elements. Förhöja grafiska effekter med CSS3. Lektion 1: Styla text med CSS3 Fonter och storlek. @font-face.
Carl-Oscar Hermansson WEBB DESIGN
Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...
WEBBUTVECKLING Kursplanering
Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,
6. Nu skall vi ställa in vad som skall hända när man klickar på knappen samt att markören skall ändra sig till en hand när markören är på knappen.
Fiskar Arbetsbeskrivning knappmeny (Mediator 8) I detta exempel kommer du att lära dig Att göra en mastersida med knappar Att använda en mastersida på andra sidor Att använd funktionen Alignment Arbetsgång
TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p
UMEÅ UNIVERSITET TFE SE/KF TENTAMEN 2004-09-29 TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p Tid: 2004-09-29 kl. 14.00-18.00 (-20.00 förlängd skrivtid) Plats: Östra paviljongen sal 8 Hjälpmedel: Presentation:
Tentamen ITK:P2. Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng.
Tentamen ITK:P2 lördag 2007-04-14 Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng. 40 poäng ger betyget G, 55 ger VG Peter Mozelius DSV 1.) Ditt
«Sida 2 av 4 Till kursens framsida Sida 4 av 4»
Sida 1 av 11 Lektion 1: sida 3 av 4 «Sida 2 av 4 Till kursens framsida Sida 4 av 4» 2. Formatera text Du kan ju redan skriva in text, men nu ska vi se hur man formaterar det man skrivit in -- alltså hur
Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen
MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering
Labora&on 2 HTML och validering övningar/uppgi:er
Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det
Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!
Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna
JavaScript del 9 Dynamik och animeringar
JavaScript del 9 Dynamik och animeringar Det sista vi ska titta på när det kommer till att lära oss JavaScript är hur vi skapar dynamik på vår webbplats, ge användarna chansen att påverka vad som händer
DOM (Document Object Model) är modellen efter vilken en webbläsaren är uppbyggd. Alla objekt/element i webbläsaren finns hierarkiskt ordnade i DOM.
JavaScript del1 Syftet med detta häfte är att sammanfatta det viktigaste i JavaScript så kort och koncist som möjligt men ändå tillräckligt omfattande för att ge god kännedom om en av de vanligaste teknikerna
Anvä ndärguide Nyä Expeditionsresor
Anvä ndärguide Nyä Expeditionsresor Hjälpguide för att använda Wordpress och Nya Expeditionsresor.se 2014-08-10 Innehållsförteckning Logga in till Wordpress-panelen... 3 Skapa bildspel... 4 Färgkoder...
Övningar i CSS för anpassning till olika enheter
Övningar i CSS för anpassning till lika enheter Hittills har vi i föregående labratiner tittat på hur man med CSS utfrmar en presentatin för bildskärm på en vanlig datr. Men det finns fler presentatiner
Gesällprov. Webbutveckling klient- och serversidan. Tomas Pålson topa4233
Gesällprov Webbutveckling klient- och serversidan Tomas Pålson topa4233 Kombinerat gesällprov Webbutveckling klient- och serversidan Startsida (Filens namn= start.html) Här är startsidan till mitt gesällprov.
Lab5 för prgmedcl04 Grafik
Lab5 för prgmedcl04 Grafik Viktigt läs detta först:den här labblydelsen är ganska lång, detta betyder inte att labben tar lång tid.en hel del av lydelsen är anvisning om hur man går tillväga för att kunna
Vägen till en lyckad responsiv webbdesign.
Vägen till en lyckad responsiv webbdesign. Tänk mobilt först! Utgå ALLTID från den mista skärmen och jobba dig uppåt. Man brukar räkna med att 320px är i minsta laget idag. Korrekt ViewPort är mycket viktig,
Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket.
e-line mobilversion Pyramid Business Studio 3.42A servicepack 05 (2015-07-13) Mobilversionen av e-line är i grunden samma applikation som fullversionen av e-line. Skillnaden är att endast valda delar av
Vilken skillnad gör det var du placerar det? Prova båda.
Micro:bit- Namnskylt Vi börjar med att döpa programmet till något. Till exempel ditt namn. Det gör du längst ner i mitten. Nu ska vi göra ett enkelt program som med lysdioderna skriver ditt namn. När du
Skapa en webbplats med WordPress
Skapa en webbplats med WordPress Daniel Karlsson 2016-01- 26 Licens Creative Commons Attribution- NonCommercial 2.0 Du får fritt sprida, redigera och kopiera guiden, men ej för ekonomisk vinning och endast
Vi börjar med en penna som ritar när du drar runt den på Scenen.
Nivå 3 Målarlådan All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Introduktion
JS & beteende. TNMK30 - Elektronisk publicering
JS & beteende TNMK30 - Elektronisk publicering Dagens föreläsning HTML Formulär JavaScript Syntax Events DOM Validering av fomulär JavaScript Skriptspråk som körs på klientsidan (klientskript). Koden exekveras
Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se
Manual Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Innehållsförteckning Start... 3 Lägg till ny sida...3 Redigera sida som redan finns...3 Titta på resultatet...
Frågor och svar Gränssnittsdesign/Webbutveckling
Frågor och svar Gränssnittsdesign/Webbutveckling Bilder och optimering 1. Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96
E07 "Greased Lightning"
E07 "Greased Lightning" Föreläsning 7, HT2014 CSS och Event Kurs: 1dv403 Webbteknik I Johan Leitet E07 Greased Lightning Dagens agenda CSS-egenskaper Händelsestyrd programmering Händelsehanterare Typer
Materialspecifikationer
HD SYDSVENSKAN CITY NÄRA H I T TA H E M. S E MERAJOBB.SE Materialspecifikationer webb 2015 www.hdsydsvenskan.se Standardformat Panoramabanner Storlek: 980x240 px Enhet: Dator / Läsplatta Video / ljud:
Appar med ryggrad. Introduktion till JavaScriptramverket Backbone
Appar med ryggrad Introduktion till JavaScriptramverket Backbone Vanlig webbsida Databas MVC - Model View Controller MVC - Model View Controller MVC Backbone.js Ger struktur Bygger på MVC konceptet Tvingar
Lathund för spel med karta
Lathund för spel med karta Från lärardagarna 2018, Scratch fördjupning med Linda Folkesson, Lotta Korslid och Linn Bergqvist Steg 1: Skapa prickar som säger en världsdel Moment: Kopior/kloner Lägg in en
Widgetguiden Vad är Publits widgetshop?
Widgetguiden Den här guiden är till för dig som vill använda Publits widgetshop för att enkelt sälja böcker direkt på din egen hemsida, blog eller Facebook. Här går vi steg för steg igenom processen för
Labb i Datorsystemteknik och programvaruteknik Programmering av kalkylator i Visual Basic
Labb i Datorsystemteknik och programvaruteknik Programmering av kalkylator i Visual Basic Inledning Starta Microsoft Visual Studio 2005. Välj create Project Välj VB + Vindows Application och välj ett nytt
Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener <scenes>... 3 Typsnitt <fonts>... 3 Övergångar <transitions>...
Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener ... 3 Typsnitt ... 3 Övergångar ... 4 Mall för slide ... 5 , ...
CSS-WORKSHOP. Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek
CSS-WORKSHOP Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek sarabritta.jadelius@trollhattan.se 0520-49 76 65 HTML strukturerar innehåll det här är
Övningar i JavaScript del 5
Övningar i JavaScript del 5 I dessa övningar ska vi ta upp några lika händelsehanterare. Dessa ska dck inte läggas in med attribut i HTML-kden, så sm vi gjrt tidigare med nclick. Istället ska vi nu lägga
Nätet. Uppgiften. Nivå
Nivå 1 Nätet All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Uppgiften Har