Webbutveckling Laboration 1: HTML5 och CSS3.

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

Download "Webbutveckling Laboration 1: HTML5 och CSS3."

Transkript

1 Institutionen för 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 implementera webbplatsen med grundläggande HTML. Att separera innehåller och utseendet på webbplatser genom att använda html och stilmallar. Teori och förberedelse Välj ämne för din webbplats. Ta fram en Lo-fi prototyp på din tänkta webbplats. (se föreläsningsanteckningarna för teori omkring Lo-fi-prototyp.) Webplatsen ska minst innehålla 5 sidor. Du ska också rita upp flödesschemat för att beskriva webplatsens struktur. (Ett flödeschemat beskriver hur sidorna på din webplats är länkade till varandra.) Ta fram text och bilder som du ska använda på din webbplats. Se separat dokument och inlämning för denna förberedelse. Se också till att ha en webserver där du kan lägga upp din webplats på. Filmer, föreläsningsanteckningar, kurslitteratur och internetlänkar (se kurshemsidan). Material Dator med ett HTML-editeringsverktyg, exempelvis Dreamweaver. Utförande Denna laboration utför ni individuellt, men ni hjälps givetvis åt så mycket som möjligt. Utför moment 1, 2 och 3 för godkändnivå på labben. För plusnivå gäller att grunduppgifterna är lösta på ett bra och tillfredställande sätt, dessutom ska plusuppgifterna vara löst på ett bra och tillfredställande sätt samt ha relevanta referenser som stöder uppgiften. Vi kommer att bedöma om er plusuppgift ger ett högre betyg och vad det betyget blir. De högre betygen är VG och MVG. Läs igenom hela laborationen innan ni börjar. Spara filerna ni gör i mappar som heter samma sak som uppgifterna, ex.vis en mapp som heter 2a. Det är meningen att ni ska få ett stort antal filer. Lägg upp alla mappar med filerna på en webbserver. Ni kommer att använda den senaste standarden för html och CSS: HTML5 och CSS3.

2 Redovisning En rapport ska skrivas och lämnas in via Moodle-plattformen. Den ska innehålla: En problembeskrivning. Vad är det ni ska göra på labben? Svar på följande frågor: o Beskriv kort vad det är som ingår i de olika delarna: head och body. o Hur och var definierar du att det är HTML5 du använder? o Hur används metataggar? Var placeras meta-taggarna? o Hur och var visas titel? o Det finns olika typer av listor. Vilka? o Hur och var görs länkning till stilmallen (CSS)? o Vad är skillnaden element-selektorer, id-selektorer, och klass-selektorer och när används de? Din lösning. Hur ni löst labben ska vara beskrivet både i text och med bilder (ni kan ta skärmdumpar av webbsidorna) samt att ni ska redovisa er kod (HTML och CSS) i rapporten. Välj ut relevant kod och beskriv med text vad denna kod gör. Länk till din webbplats. Lägg Lo-fi dokumentet som en bilaga till detta dokument. En reflektion. Vad var bra och dåligt med labben? Vad var svårast (eller för svårt/enkelt)? Tyckte ni att något saknades eller borde behandlats mer? För godkänt på laborationen redovisas del 1, 2 och 3. För Plusnivå skall även plusuppgiften (del 4) redovisas. Det skall tydligt framgå om redovisade sidor avser grundnivå eller plusnivå.

3 Del 1 - HTML Näst steg blir nu att göra en slag mall som du kan använda för dina webbsidor. Text och bild ska nu taggas upp i ditt html-dokument. I denna del handlar det om att få in innehållet på rätt plats så att du senare kan göra det utseende som du vill att det ska vara enligt din lo-fi. Utseendet gör du först under Del 2. 1a Här ska du få börja testa på olika html-taggar hur de ser ut och hur de fungerar samt få förståelse för hur ett html-dokument är uppbyggt. Bry dig inte så mycket om utseendet det kommer i del 2. Starta programmet Dreamweaver eller något annat verktyg med liknande egenskaper och öppna ett tomt HTML5-dokument. Se till att det är indelat i en head-del och en body-del Se till fixa och placera följande på rätt plats: o Html5 o Se till att definiera upp språket du ska skriva din sida på (exempelvis engelska eller svenska) o beskriva vilken teckenuppsättning som sidan ska tolkas på o Sätt in minst 4 relevanta meta-taggar, varav 2 ska vara Dublin Core. o Sätt en titel (titel) på ditt dokument. Du har nu fått en grund som du kan använda till alla dina sidor (spara detta exempelvis som mall.html) 1b Nu är det dags att börja skapa innehållet i din webbplats. Webbplatsen ska innehålla minst 5 olika sidor. (Själva utseendet och layouten av sidan ska du få göra i Del 2.) Utgå från din Lo-fi prototyp och din skiss på websidans struktur. Använd din grunden (mall.html) du skapat i förra uppgiften att utgå ifrån. Ändra titel och meta-taggar om så behövs för respektive sida. Ändra sedan innehållet på sidorna så att de stämmer överens med din Lo-fi skiss. Märk upp innehållet på sidorna med html-taggar. På w3schools, finns en lista med alla taggar. Spara din första sida index.html. Fortsätt sedan att döpa de andra sidorna till namn som speglar innehållet på sidorna. När du skapar namne på sidorna kom ihåg: inte mellanslag (använd istället understreck) bara små bokstäver inga å, ä, ö

4 Sidorna ska tillsammans innehålla följande (anpassa efter din Lo-fi skiss): text länkar bilder listor tabeller video och ljud (använd <video> och <audio> taggar. Båda klippen ska ha kontroller som play, pause, osv.) Lägg till en meny som du placerar på alla sidor och som länkar ihop din webbplats enligt din webbplats struktur som du beskrivit i flödesschemat. Använd dig av en ul-lista för att skapa menyn. Del 2 - CSS Här ska du prova på att använda stilmallar eller formatmallar (CSS) som det också heter, för att styra utseendet på din webbplats. Utgå hela tiden efter din lo-fi skiss. 2a Skapa ett CSS-dokument, spara detta förslagsvis som stilmall.css. (Detta dokument är än så länge ganska tomt.) Länka nu ihop ditt CSS-dokument med dina html sidor. Dags att börja förändra din sida utseende mässigt: Använd nu stilmallen och bestäm hur dina rubriker, paragrafer, länkar, listor och tabeller ska se ut när det gäller färg och font genom att använda element-selektorer, id-selektorer, och klassselektorer. Utgå från din Lo-fi prototyp och skapa de block som du kommer att behöva i dina htmldokument för att kunna styra utseendet med din CSS-fil. För att skapa dessa block sätt in div:ar och de färdigahtml5- block-taggarna som ex.vis nav, article, header, footer, section, and aside i dina html-dokument. I CSS-filen använder du dig nu av margin, float, padding, clear, position, osv i dina selektorer för placera ut blocken enligt din Lo-fi prototyp. Tips: Se external styles på W3schols. Använd dig dessutom av också av minst 3 typiska CSS3-kommandon på din webplats. 2b Här ska du få testa på och visa hur samma html sida kan få helt olika utseende genom att ändra på stilmallen. Utgå från någon av dina sidor. Gör nu två helt nya och olika utseende av denna sida genom att länka två helt nya CSS-filer till dem.

5 Ändra både på ex.vis textens utseende samt placering av elementen, genom att bara ändra i i CSS-filen. Spara filerna med nya namn Del 3 - Validering För att testa att html koden följer HTML5 standarden så ska du nu få validera din webplats. Använd dig av följande valideringstjänster för att validera dina 5 sidor från uppgift 2a: Försök att åtgärda de eventuella fel som uppstår. Testa även din webplats i olika webbläsare. Ta skärm dumpar för att visa exempel på hur några av dina sidor ser ut i olika webläsare. Det är mest intressant att du visar de eventuella skillnader som du får. Del 4 - Plusuppgift Du ska designa hela din webplats så att den anpassas för olika typer av skärmar (stationär datorskärm, en surf-platta och en smartphone) så kallad responsive design och för utskrift. För denna uppgift ska du läsa följande artiklar på Alista part, och Anpassa din webbplats till minst en bärbar enhet (surf-platta eller smartphone) samt för utskrift. Se till att ta reda på vad det är du bör tänka på när du designar för de olika versionerna (bärbar enhet och utskrift) jämför med den version som visas på en stationär dator. Beskriv detta tydligt i rapporten. För denna uppgift är det viktigt att du är noga med att beskriva dina beslut och motivera besluten med relevanta referenser.

Webbteknik för ingenjörer

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

Läs mer

Tillämpad fysik och elektronik Per Kvarnbrink. Laboration 2: Xhtml och CSS.

Tillämpad fysik och elektronik Per Kvarnbrink. 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

Läs mer

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

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

Läs mer

Laboration 2: Xhtml och CSS.

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

Läs mer

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.

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

Läs mer

Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem

Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem Målsättning Att bygg upp en komplett webbplats i ett publiceringssystem. Platsen ska vara snygg,

Läs mer

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

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

Läs mer

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550 Del 1 och 2 HTML/CSS Vi har fått i uppgift att göra en hemsida av eget val! Jag har bestämt mig för att skapa en hemsida åt en påhittad restaurang här i Umeå som inriktar sig på exklusiv nyttig mat och

Läs mer

Labbrapport: HTML och CSS

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):

Läs mer

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html

07/12/2015. Stilmallar. - styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. iecept.html frukt.html grönsaker.html Stilmallar - styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html iecept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Utseende

Läs mer

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

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

Läs mer

En stiligare portal Laboration 3

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

Läs mer

Föreläsning 4. CSS Stilmallar för webben

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

Läs mer

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

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

Läs mer

Copy Cat Laboration 4

Copy Cat Laboration 4 Laborationsanvisning Copy Cat Laboration 4 Författare: Johan Leitet Version: 1 Datum: 2011-09-19 Inledning Vi kommer på denna laboration fortsätta med CSS och nu finslipa vår sida. Du kommer även att få

Läs mer

Laboration 2. Webbproduktion En stiligare webbsida HT2015

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å.

Läs mer

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 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

Läs mer

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

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

Läs mer

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter 1M321 Webbteknik 1, 7,5hp Medieteknik 2018 Rune Körnefors rune.kornefors@lnu.se 1. Skapa ett nytt HTML-dokument I denna laboration

Läs mer

WEBBUTVECKLING Kursplanering

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,

Läs mer

Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod

Kommunikation. Dator med webbläsare Förfrågan:  Webserver. Returnerar HTML-kod html och css Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa : http://www.w3schools.com/browsers/

Läs mer

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Lokal Gästbok I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Gästboken ska fungera som så att man har ett fält där man kan

Läs mer

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum: 2012-10-09

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum: 2012-10-09 Projektanvisning Webbsideprojekt Författare: Johan Leitet Version: 2 Datum: 2012-10-09 Inledning Du har nu under ett antal laborationer i webbteknik fått relativt styrda uppgifter där du ensam fått lösa

Läs mer

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">

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

Läs mer

Laboration med Internet och HTML

Laboration med Internet och HTML Laboration med Internet och HTML Denna laboration går ut på att du skall kunna skapa enkla hemsidor i HTML. Vi kommer inte att ta upp edstorer för hemsidor som t.ex. DreamWeaver eller FrontPage. Dessa

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle

Läs mer

Labora&on 4 CSS och validering övningar/uppgi9er

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

Läs mer

Övning (X)HTML 2. Sidan 1 av 7 2010-11-11

Ö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

Läs mer

Lektion 2 - CSS. CSS - Fortsätt så här

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

Läs mer

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 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

Läs mer

Viktigt! Glöm inte att skriva tentamenskod på alla blad du lämnar in.

Viktigt! Glöm inte att skriva tentamenskod på alla blad du lämnar in. Webbdesign Provmoment: Ladokkod: Tentamen ges för: TentamensKod: TEN NWD011 SV15 7,5 högskolepoäng Tentamensdatum: 1 nov 2016 Tid: 9-13 Hjälpmedel: Färgpennor är tillåtna. Totalt antal poäng på tentamen:

Läs mer

Labora&on 6 CSS och responsiv webbdesign övningar/uppgi:er

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

Läs mer

ATT GÖRA WEBBSIDOR. Frivillig labb

ATT GÖRA WEBBSIDOR. Frivillig labb Numerisk analys och datalogi KTH 100 44 Stockholm Kerstin Frenckner, tel 790 7143, e-post kfrenck@nada.kth.se 2D1339 Programkonstruktion Hösten 2001 Datorintroduktion Frivillig labb ATT GÖRA WEBBSIDOR

Läs mer

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012 Oktober 2012 Uppgiften går ut på att redovisa dina kunskaper kring JavaScript, liksom din förmåga att skapa en CSS-baserad layout. Detta gör du genom att lämna in ett resultat som följer specifikationerna

Läs mer

Struktur & Layout med CSS

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

Läs mer

2009-08-20. Manual för Typo3 version 4.2

2009-08-20. Manual för Typo3 version 4.2 2009-08-20 Manual för Typo3 version 4.2 1 2 Innehåll: 1. Allmänt 4 2. Grunderna i Typo3 5 2.1 Knappar 5 2.2 Inloggning 5 2.3 Den inledande vyn 6 2.4 Sidträdet 7 3. Sidor 8 3.1 Skapa en ny sida 8 3.1.1

Läs mer

Presentera dig själv Laboration 1

Presentera dig själv Laboration 1 Laborationsanvisning Presentera dig själv Laboration 1 Författare: Johan Leitet Version: 2 Datum: 2011-08-01 Inledning Denna inledande laboration syftar i mångt och mycket till att du ska känna dig bekväm

Läs mer

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka Webben som verktyg Idag: Hur hänger det ihop? Viktiga tekniker Stegen i ett webbprojekt Verktyg Dreamweaver Photoshop Joomla CMS Storyboard och flödesschema Fixa webbhotell Hur hänger det ihop? För att

Läs mer

Sammanfattning av hantering av redovisning av uppgift U1

Sammanfattning av hantering av redovisning av uppgift U1 Sammanfattning av hantering av redovisning av uppgift U1 Hur du redovisar Hur svar ges Hur eventuell komplettering sker Hur restuppgifter hanteras Hur registrering av resultat görs 1M321 Webbteknik 1,

Läs mer

Laboration 1. Webbprodution Struktur & innehåll HT2015

Laboration 1. Webbprodution Struktur & innehåll HT2015 Laboration 1 Webbprodution Inledning Denna inledande laboration syftar i mångt och mycket till att du ska känna dig bekväm med den laborationsmiljö ni blivit introducerat inför. De inledande uppgifterna

Läs mer

<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim

<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

Läs mer

<header> </header> <footer> </footer>

<header> </header> <footer> </footer> Tidigare har man använt taggen för att märka delar av dokument. I HTML5 har man lagt till stöd för de nya taggarna för att det inte ska bli så många -taggar. I exemplet nedan använder

Läs mer

Labora&on 3 HTML och struktur övningar/uppgi:er

Labora&on 3 HTML och struktur övningar/uppgi:er Labora&on 3 HTML och struktur övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Skapa em nym HTML-dokument I denna labora&on ska du skapa tre sidor, som

Läs mer

Prototyper används för att

Prototyper används för att Skapa en prototyp Prototyper används för att Demonstrera ett koncept i ett tidigt stadium Testa detaljer i ett senare stadium Som en specifikation för den färdiga produkten Lo-fi Prototyp: pappers prototyp

Läs mer

Evaluation Summary - CT3380 Grundäggande webbdesign HT06 Dan Levin

Evaluation Summary - CT3380 Grundäggande webbdesign HT06 Dan Levin Evaluation Summary - CT8 Grundäggande webbdesign HT6 Dan Levin Antal kursutvärderingar: Q. Anser du dig ha tillräckligt med förkunskaper för att klara kursen? (=JA =NEJ) Q. a Kurslitteratur? 6 Medel:,6

Läs mer

WEBBUTVECKLING CSS. Formatmallar - CSS

WEBBUTVECKLING CSS. Formatmallar - CSS betyder Cascading Style Sheets, vilket i svensk översättning blir ungefär formatmallar (inte riktigt, men nästan...). Anledningen till att man använder är att det är ett lätt sätt att skilja utseende och

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 14/10 Lämna in efterhand ni blir färdiga Vi rättar inom 5 arbetsdagar Portfolio, tillfälle 1:

Läs mer

ORDLISTA WEBBDESIGN 100P

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.

Läs mer

Laborationsanvisning. HTML5 Laboration 6. Författare: Johan Leitet Version: 1 Datum: 2011-10-03

Laborationsanvisning. HTML5 Laboration 6. Författare: Johan Leitet Version: 1 Datum: 2011-10-03 Laborationsanvisning HTML5 Laboration 6 Författare: Johan Leitet Version: 1 Datum: 2011-10-03 Inledning I denna avslutande laboration ska du testa att märka upp en sida med de nya taggarna i HTML5. Mikroformat

Läs mer

Vilken version av Dreamweaver använder du?

Vilken version av Dreamweaver använder du? Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser

Läs mer

Webbplats analys cofra.it

Webbplats analys cofra.it Webbplats analys cofra.it Genereras på Januari 16 2017 07:17 AM Ställningen är 37/100 SEO Innehåll Titel COFRA - Born To Work - Längd : 22 Perfekt, din titel innehåller mellan 10 och 70 tecken. Beskrivning

Läs mer

Lathund Bygga mallar. Senselogic AB Version 2.3

Lathund Bygga mallar. Senselogic AB Version 2.3 Lathund Bygga mallar Senselogic AB Version 2.3 Innehållsförteckning 1 Begrepp... 1 1.1 Innehållsyta... 1 1.2 Mallyta... 2 1.3 Layouter... 3 1.3.1 Fliken marginaler... 1.3.2 Fliken Inställningar... 1.3.3

Läs mer

TNMK30. Elektronisk publicering

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

Läs mer

Gesällprov. Webbutveckling klient- och serversidan. Tomas Pålson topa4233

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.

Läs mer

2007-03-28. Manual för Typo3 version 4.04

2007-03-28. Manual för Typo3 version 4.04 2007-03-28 Manual för Typo3 version 4.04 1 2 Innehåll: 1. Allmänt 4 2. Grunderna i Typo3 5 2.1 Knappar 5 2.2 Inloggning 5 2.3 Den inledande vyn 6 2.4 Sidträdet 7 3. Sidor 8 3.1 Skapa en ny sida 8 3.2 Redigera

Läs mer

En grundkurs i hemsidor och hur de är uppbyggda

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

Läs mer

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

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

Läs mer

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. 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

Läs mer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer www.grade.com LUVIT LMS Quick Guide LUVIT Composer LUVIT Composer LUVIT Composer är ett verktyg för att enkelt skapa snyggt innehåll direkt i LUVITs kurser. Verktyget innehåller designade mallar som du

Läs mer

Utseende. Lauri Watts Översättare: Stefan Asserhäll

Utseende. Lauri Watts Översättare: Stefan Asserhäll Lauri Watts Översättare: Stefan Asserhäll 2 Innehåll 1 Utseende 4 1.1 Allmänt............................................ 4 1.2 Teckensnitt.......................................... 4 1.3 Stilmallar...........................................

Läs mer

Responsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 2014-02-17 1

Responsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 2014-02-17 1 Responsiv webbplats Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 1 Vad är responsivt? Det betyder att webbplatsen känner av vilken skärmstorlek användaren surfar

Läs mer

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.

Tabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil. Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition

Läs mer

Programmeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

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

Läs mer

03/12/2015. Logga in på: b.socrative.com eller ladda ner appen

03/12/2015. Logga in på: b.socrative.com eller ladda ner appen Logga in på: b.socrative.com eller ladda ner appen Använder Har skapat använt skrivit internet i webbsidor. CSS html. (stilmall). (nästan ) dagligen. 1 Dator med webbläsare Interne t Webserver Smartphon

Läs mer

Tillämpad programmering CASE 1: HTML. Ditt namn

Tillämpad programmering CASE 1: HTML. Ditt namn Tillämpad programmering CASE 1: HTML Ditt namn 18 [HTML] Din handledare vill se din skicklighet i att använda HTML-koden. Du ska utveckla en webbplats om ditt intresse, inriktning eller gymnasiearbete.

Läs mer

Webbprogrammering 725G54

Webbprogrammering 725G54 Webbprogrammering 725G54 Hej! Jakob Bandelin, gästadjunkt jakob.bandelin@liu.se Interaktionsdesign, webbdesign, apputveckling Agenda Kursmål och -upplägg HTML Teckenkodning Validering Lab 1. Kursmål exemplifiera

Läs mer

Manual för att publicera på Samarbetsportalen

Manual för att publicera på Samarbetsportalen Manual för att publicera på Samarbetsportalen Ansvar och innehåll I rollen som webbredaktör ansvarar du för att: informationen från din verksamhet är uppdaterad och korrekt, dvs att sidorna granskas med

Läs mer

Användning av pdf Vägledningen 24-timmarswebben

Användning av pdf Vägledningen 24-timmarswebben 1 (7) Användning av pdf Version 1.1 Uppdaterad: 2007-07-03 Användning av pdf I den här checklistan får du veta hur du skapar tillgängliga pdf-dokument. Checklistan är ett extramaterial till 1. Använd gärna

Läs mer

Kravspecifika.on, pappersprototyp & CSS

Kravspecifika.on, pappersprototyp & CSS 1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna

Läs mer

Språk för webben introduk4on 4ll HTML

Språk för webben introduk4on 4ll HTML Föreläsning i webbdesign Språk för webben introduk4on 4ll HTML Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se En webbsidas beståndsdelar Text (formaterad, strukturerad) Länkar Inkluderade

Läs mer

Word-guide Introduktion

Word-guide Introduktion Word-guide Introduktion På det kognitionsvetenskapliga programmet kommer du läsa kurser inom flera olika vetenskapsområden och för varje vetenskapsområde finns ett speciellt sätt att utforma rapporter.

Läs mer

F07 Stilmallar Dagens agenda

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

Läs mer

Labora&on 2 HTML och validering övningar/uppgi:er

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

Läs mer

Hur du gör ditt Gilles hemsida - en liten hjälp på vägen

Hur du gör ditt Gilles hemsida - en liten hjälp på vägen Hur du gör ditt Gilles hemsida - en liten hjälp på vägen Sidan 2 - Logga in Sidan 3 - Uppbyggnad av en sida Sidan 4 - Infoga länk Sidan 5 - Infoga bilaga Sidan 6 - Infoga bild Sidan 7-8 Vad betyder knapparna

Läs mer

Webbplats analys ipchecker.us

Webbplats analys ipchecker.us Webbplats analys ipchecker.us Genereras på Juni 22 2016 19:19 PM Ställningen är 39/100 SEO Innehåll Titel IPChecker.us - Display Your IP - Whois IP - IP Lookup - What Is My IP? Längd : 70 Perfekt, din

Läs mer

Arbetsmaterial HTML pass 1 - Grunder

Arbetsmaterial HTML pass 1 - Grunder 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

Läs mer

TDDD52 CSS. Färger. Färger 1/3/13

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

Läs mer

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende: Uppsala universitet Institutionen för utbildning, kultur och medier IKT A HT 2009 Monica Langerth Zetterman 2009-09-23 Testa stilmallar Övning 1 Vi börjar med en vanlig html-fil där html används för både

Läs mer

CMS. - Content management system

CMS. - Content management system CMS - Content management system Agenda CMS Server, webbhotell och FTP Wordpress, ställ mycket frågor Om vi hinner - Snabb genomgång av CMS - uppgiften Nu & Då Sidor med bara HTML och CSS kräver manuell

Läs mer

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför

Läs mer

Innehållsförteckning. Adobe GoLive CS

Innehållsförteckning. Adobe GoLive CS Innehållsförteckning 1 Om GoLive CS... 1 Mappar och filstruktur...1 Vad är en webbsida?...1 Vad är speciellt för en webbsida?...2 Vad är en webbplats?...3 Vanliga fallgropar med webbdesign...3 Överföra

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra gången MuddyCards Animation Portfolio Lab 3. Muddycards - resultat Positiva kommentarer Tempo föreläsningar Labbhandledning, pedagogik Mer labbhandledning Instruktioner

Läs mer

Kursplanering Utveckling av webbapplikationer

Kursplanering Utveckling av webbapplikationer Kursplanering Utveckling av webbapplikationer Fakta Ämne Programmering Poäng 40 Yh-poäng Kurskod YSYS-WEB Klass Systemutvecklare.NET Syfte och koppling till yrkesrollen För att kunna arbeta som systemutvecklare

Läs mer

Att arbeta med. Müfit Kiper

Att arbeta med. Müfit Kiper Att arbeta med Müfit Kiper Att skriva nya inlägg Alla inlägg som är postade visas i kronologisk ordning, det vill säga det senast postade inlägget kommer visas först om inget annat angetts i temafilerna.

Läs mer

Webbdesign Process till produkt

Webbdesign Process till produkt Webbdesign Process till produkt Umeå Universitet Mediaproduktion för www II 7,5hp Isak Madoun Introduktion; VÅR-KOKBOK Är en kokbok som i sin första upplgaga kom ut på 50-talet. Boken innehåller mer av

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Sök till Legionen! Förra gången MuddyCards PHP Lab 4. Agenda Webbtermer och annat som är bra att veta Bildoptimering Javascript jquery Portfolio Avstämning kurs. Webbsida Webbsida

Läs mer

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)

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:

Läs mer

3. Hämta och infoga bilder

3. Hämta och infoga bilder Sida 1 av 8 Lektion 1: sida 4 av 4 «Sida 3 av 4 Till kursens framsida 3. Hämta och infoga bilder Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder? Det är inte svårt alls! Det

Läs mer

Hi-Fi Prototyping + laborationsgenomgång & verktyg

Hi-Fi Prototyping + laborationsgenomgång & verktyg Hi-Fi Prototyping + laborationsgenomgång & verktyg Karin Fahlquist 2015 Frågor att besvara Vad innebär prototyping? Vad är speciellt med hi-fi prototyping? Hur kan man använda dem? Hur väljer man nivå

Läs mer

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

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

Läs mer

SORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version 2012-09-28, rev 131101 1 (19)

SORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version 2012-09-28, rev 131101 1 (19) Handbok i OEW 28 sept 2012 Mari-Anne Englund Barbro Olofsson Sorsele kommun Version 2012-09-28, rev 131101 1 (19) Använd det användarnamn och lösenord som du fått. Fungerar det inte hör av dig till Mari-Anne

Läs mer

IGÅR. Internet, www, TCP/IP, IP-adress, DNS, URL. HTTP Request. HTTP Response (HTML & status code)

IGÅR. Internet, www, TCP/IP, IP-adress, DNS, URL. HTTP Request. HTTP Response (HTML & status code) CSS Presentation IGÅR Internet, www, TCP/IP, IP-adress, DNS, URL client HTTP Request server HTTP Response (HTML & status code) HTML Innehåll och struktur via semantiska märkningar Block, inline element

Läs mer

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se Adobe Dreamweaver CS3 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 2 Arbeta i Dreamweaver... 2 Fönster... 3 Statusfältet... 4 Menyer...

Läs mer

MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND

MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND 1 Innehåll Inledning... 3 Optimering av min webbportfolio... 4 Analys och dokumentation av utgångsläget... 4 Optimeringsaktiviteter...

Läs mer

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

Läs mer

Tentamen på kursen Webbdesign, 7,5 hp

Tentamen på kursen Webbdesign, 7,5 hp Högskolan i Borås Sektionen för informationsteknologi Akademin för bibliotek, information, pedagogik och IT Malin Nilsson Tentamen Tentamen på kursen Webbdesign, 7,5 hp Tentamenstid: 2015-11-03, kl. 09.00-13.00

Läs mer

En bortsprungen katt

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

Läs mer

TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p

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:

Läs mer

Institutionen för Tillämpad fysik och elektronik Stefan Berglund och Per Kvarnbrink. Laboration: Flerskiktade applikationer

Institutionen för Tillämpad fysik och elektronik Stefan Berglund och Per Kvarnbrink. Laboration: Flerskiktade applikationer Institutionen för 2014-11-17 Tillämpad fysik och elektronik Stefan Berglund och Per Kvarnbrink Laboration: Flerskiktade applikationer Målsättning Syftet med denna laboration är att ge den studerande kunskap

Läs mer

Lektion 3 HTML, CSS och JavaScript

Lektion 3 HTML, CSS och JavaScript 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

Läs mer