Labora&on 4 CSS och validering övningar/uppgi9er
|
|
- Lisa Sandström
- för 7 år sedan
- Visningar:
Transkript
1 Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se
2 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna labora&on finns det en bildfil som du kan ladda ner i en zip-fil. Länk &ll zip-filen finns på labora&onens webbsida. Då du packat upp zip-filen, får du en mapp som innehåller bildfilen. Skapa en mapp kallad u2 i din mapp dold i mappen webbsidor, som du skapade i labora&on 1. De filer du sedan skapar i labora&on 4 &l 6, lägger du i mappen u2. Skapa där en mapp pics och lägg den nedladdade bildfilen i den. pics är mappen med bilden som du laddar ner från labbens sida. Övriga filer är de som du skapar i labora&onen.
3 2a. Skapa en HTML-fil Även i uppgi9 U2 ska du skapa tre webbsidor med svar på varsin fråga. Det ges en fråga i var och en av de tre labora&onerna L4 &ll L6. Frågorna benämns Fråga D &ll Fråga F och de har också beskrivande underrubriker, på samma sä[ som Fråga A &ll Fråga C i &digare uppgi9/labora&oner. I U2 ska sidorna också s&lsä[as med CSS. I L4 skapas grundstrukturen, i L5 skapas layout och i L6 görs en responsiv design. I denna labora&on (L4) skapar du alltså HTML-filerna och en CSS-fil som ger en grunds&l för dem. Nu skapar du först en mall för sidorna. Denna mall ska också finnas med i din redovisning av uppgi9 U2. Skapa en HTML-fil och kalla den template.htm. Strukturera koden i HTML, så a[ du har med följande delar: mall header: e[ sidhuvud med frågans rubrik nav: navigeringslänkar för a[ gå mellan de olika sidorna main: innehåll där en del består av frågans text och en annan del består av di[ svar footer: en sidfot med t.ex. di[ namn och datum. fortsä7ning i övning 2b
4 2b. Innehåll på sidan För a[ ha något a[ s&lsä[a i de kommande övningarna, lägger du först in en nonsenstext eller "Lorem ipsum"-text: h[p:// header nav main footer h1 för huvudrubrik och h3 för underrubrik. Länkarna för sidorna läggar du i en ul-lista. Ta med länkar för de tre frågorna samt mallen. E[ element (t.ex. sec>on eller div) för frågan. Lägg in e[ id-a[ribut med lämpligt namn i star[aggen. Innehållet ska vara e[ textstycke och en ol-lista med delfrågor. Resten av main ska sedan vara di[ svar, men lägg nu in fem textstycken med "lorem ipsum" och några rubriker. Använd h2 för den första rubriken och h3 för de övriga. Lägg också in en tabell med fem rader. Använd th i den övre raden och td i de övriga. Ta inte med något border-a[ribut i table-taggen. (S&l med kantlinjer ska du sedan göra med CSS.) Lägg in di[ namn och datum. Lägg texten direkt i footer, utan p-element.
5 3. Skapa en CSS-fil Alla sidor ska s&lsä[as med samma CSS-fil. Skapa en CSS-fil. Lägg in en s&l för body, där du anger en s&l för en bakgrundsfärg. De[a för a[ du enkelt ska kunna se a[ du sedan länkar in CSS-filen korrekt. I HTML-filen (template.htm) lägger du in en link-tagg för a[ ta in CSS-filen. Testa i webbläsaren och se a[ sidan har den bakgrundsfärg du ange[, så a[ du vet a[ CSS-filen länkas in korrekt. Skapa tre kopior av HTML-filen för fråga D &ll F och namnge filerna så som du namngav dem i dina navigeringslänkar. Testa igen i webbläsaren, för a[ se a[ länkarna i navigeringen fungerar och a[ s&lmallen används på alla sidor. D E F mall
6 4. Grunds&l I CSS-filen börjar du med en grunds&l för några vanliga element i sidornas kod. body Lägg t.ex. in s&l för bakgrundsfärg, texhärg och val av typsni[. Begränsa också bredden &ll t.ex. 800 pixlar. h2, h3 Både för rubrikerna h2 och h3, lägger du in en annan texhärg och kursiv text eller annan valfri s&l. Du ska alltså ha en gemensam s&l för h2 och h3. h3 Skapa även en egen s&l för h3 och lägg in en kantlinje ovanför h3-rubrikerna med följande kod för h3: border-top:1px solid #999; padding-top:10px;
7 5. S&l för sidhuvud Skapa nu en s&l för sidhuvudet. header Lägg in bilden bg.jpg som bakgrundsbild. Sä[ höjden på header &ll 140px (samma höjd som bilden). Bilden är bredare än sidans innehåll, så lägg även in background-posi>on:center; för a[ centrera bilden. Rubrikerna h1 och h3 i header Sä[ padding &ll lämpligt värde (t.ex. 10px) för a[ få e[ litet avstånd från kanten &ll texten. Den s&l du redan har för h3 (från föregående övning) gäller även här. Du får ändra den &digare s&len, så a[ den endast gäller för rubriker i main. Lägg där &ll main både före h2 och h3. Lägg sedan &ll s&l för h1 och h3 i header där du väljer lämplig texhärg och eventuellt annan s&l. Om du vill justera avståndet mellan rubrikerna, dvs h1 och h3, får du experimentera med olika värden på margin och padding (eller egentligen margin-top, margin-bo7om, padding-top och padding-bo7om). Du kan börja med a[ sä[a dem &ll 0 och sedan öka &ll de värden du vill ha.
8 6. S&l för sidfot Nu ska du skapa en s&l för sidfoten. footer Välj valfri färg på bakgrund och text. Centrera texten med text-align. Välj också lämpligt värde (t.ex. 10px) på padding.
9 7. S&l för navigering Nu är det dags a[ s&lsä[a navigeringslänkarna. Du ska ändra listan, så a[ det blir en rad med länkar. nav ul Ta bort punkterna före varje rad. Sä[ padding &ll 0, så a[ inskjutningen i vänsterkanten tas bort. nav ul li Ändra display, så a[ alla li-element hamnar in&ll varandra på samma rad. Lägg &ll en marginal i högerkanten för varje li, för a[ få lämpligt avstånd mellan länkarna. nav a Ta bort understrykningen. Lägg in en padding på några pixlar. Lägg in en bakgrundsfärg och texhärg för a:link och a:visited. Lägg in en annan bakgrundsfärg (och eventuellt texhärg) för a:hover och a:ac>ve.
10 8. S&l för frågerutan Rutan för frågan ska nu få rundade hörn och en skugga. Referera &ll rutan med hjälp av det id du lagt in i taggen. Lägg in en annan bakgrundsfärg. Lägg &ll en kantlinje, t.ex. en kant på 4px, solid och lite mörkare färg. Lägg &ll rundade hörn med border-radius. Experimentera med olika värden, för a[ få den rundning du vill ha. Lägg också &ll en padding, så a[ inte texten hamnar precis in&ll kanten. Gör rutan smalare och centrera den. Sä[ bredden &ll 80%. Lägg &ll margin:0 auto; för a[ centrera rutan. Lägg på en skugga Lägg på en skugga i höger- och underkant med box-shadow. Välj valfria värden på storlek och färg.
11 9. S&l för tabellen Nu ska tabellen s&lsä[as. th, td Börja med a[ ge th och td en kantlinje med border:1px solid #666; Lägg också in e[ lämpligt värde på padding, för a[ få en inre marginal i tabellcellerna. table För a[ slå ihop cellerna, så det inte blir något avstånd mellan dem, lägger du för table in följande s&l: border-collapse:collapse; tr Lägg in s&l för vit bakgrundsfärg, så a[ raderna i tabellen blir vita. th Lägg in s&l för en annan bakgrundsfärg och texhärg för th. table Lägg också en skugga på table, på samma sä[ som du gjorde för frågerutan i föregående övning. För a[ skuggan under tabellen ska få plats, får du också lägga &ll margin-bo7om, med e[ värde som är lite större än skuggan.
12 10. Pseudoklasser Det finns olika sä[ a[ välja ut vilka element som en s&l ska gälla för. Då man ange[ en tagg (eller id eller class) kan man också lägga på en pseudoklass. Du har redan använt det i länkarna med :link, etc. Nu ska du också använda en pseudoklass för a[ välja varannan rad i tabellen. Jämna rader i tabellen Skriv en s&l för tr:nth-child(even) { } Lägg in en annan bakgrundsfärg i s&len, dvs mellan klamrarna.
13 11. Lägga &ll innehåll Med pseudoklasserna :before och :aper, kan man lägga &ll e[ innehåll i början eller slutet av e[ element. Det blir alltså före eller e9er det innehåll som finns i elementet i HTML-koden. Lägg &ll tre streck före varje h3-rubrik i main. I s&len använder du content, för a[ lägga &ll innehållet. main h3:before {content: "--- ";}
14 12. Validera CSS-koden För a[ kontrollera a[ CSS-koden stämmer med språkets regler, ska du validera koden. Använd validatorn på h[p://jigsaw.w3.org/css-validator/#validate_by_upload Se &ll a[ du är på fliken för filuppladdning. Dra din CSS-fil &ll rutan i mi[en eller klicka på knappen Bläddra och peka ut din fil. Klicka sedan på knappen Granska. Om koden är korrekt, får du en grön ruta som säger a[ du inte har några fel. I annat fall får du en lista med felmeddelanden. Rä[a i så fall dess fel och validera om, &lls allt är OK. Om du inte fick några felmeddelanden i valideringen, kan du prova med a[ införa något fel i din CSS-kod och validera om. Då ser du hur felmeddelandena kan se ut.
15 13. Fråga D Garre[s utvecklingsmodell Fråga D ska läggas in och besvaras i den HTML-fil som du skapade för frågan. Delfrågor Två frågor om kravspecifika&on och Garre[s utvecklingsmodell. D D1: I en kravspecifika&on är det vik> a[ kraven skrivs, så a[ de är mätbara. Vad menas med det? Ge e[ exempel. D2: Beskriv Garre[s modell i en tabell med en rad per plan i modellen. I första kolumnen anger du namn på planet. I den andra kolumnen anger du namn på de delar som finns (dvs namnen som finns på planen i figuren för modellen). I tredje kolumnen ger du en mycket kort beskrivning av vad som görs på planet (en eller två meningar). Då du lagt in frågan och di7 svar på sidan, öppnar du den i webbläsaren och kontrollerar om s>len stämmer eller om du behöver justera något. Dessa frågor är avvägda mot vad du nu också ska arbeta med i uppgi9 U3, där du gör olika delar enligt modellen parallellt med U2 och övriga moment i kursen. Se veckoplanen och Gan[- schemat på kursens webbplats. Omfa[ning på D1 ska vara e[ par textstycken, fem &ll &o rader text på webbsidan. Omfa[ning på D2 är tabellen med korta texter i rutorna.
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 merLabora&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 merLabora&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 merLabora&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 merLabora&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 merLaboration 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 merLektion 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 merLabora&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
Läs merLabora&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
Läs merStruktur & 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/*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:
Läs merLaboration 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 merXhtml 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 merLabora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er
Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi
Läs merInfö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
Läs merTillä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 merLabora&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
Läs merKravspecifika.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 merSidan 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 merLabora&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
Läs merÖ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
Läs merLaboration 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
Läs merÖ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 merLabora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er
Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi
Läs merORDLISTA 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 merHTML 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 merMappar och filer för webbsidor
Mappar och filer för webbsidor I de4a dokument illustreras det hur du kan arbeta med mappar och filer, då du skapar webbsidor och ska publicera dem för uppgi=erna. Det visas också hur du skickar in redovisningar
Läs merHTML 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 merSammanfattning 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 merSkeleton plane & Responsiv webbdesign med CSS
1ME321 Webbteknik 1 Lek0on 6 Skeleton plane & Responsiv webbdesign med CSS Rune Körnefors Medieteknik 1 2016 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen U2 deadline Exemplet Gretas Blommor
Läs merEn 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 merFö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 merF07 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 merWordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm
WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm WordPress är ett kraftfullt publiceringsverktyg för webben som trots sin flexibilitet och styrka är lätt att komma igång
Läs merLathund 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<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 merIntroducerande övningar i HTML
Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer
Läs merLektion 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 merSophia 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
Läs merSprå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 merTabeller. 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Övningar i layout med CSS
Övningar i layut med CSS Med CSS strukturerar man innehållet i lika delar. Med div-taggar kan man avgränsa delar av kden för sidhuvud, navigeringslänkar, innehåll, etc. Med CSS kan man sedan ge dessa delar
Läs merInnan man börjar bygga ett skin i LUVIT bör man göra vissa förberedelser. Dessa är beskrivna nedan.
1. Introduktion LUVITs standardutseende för portal och utbildningsmiljö vad gäller logotyp, färger, typsnitt mm kan ändras genom att skapa nya så kallade skins. Skinnen kan man sedan ladda upp i LUVIT
Läs merWebbteknik 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 mer21/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 merInternet 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
Läs merLabora&on 7 Färger och bilder för webben övningar i Pixlr Editor
Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on
Läs mer12/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
Läs merFö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 merLathund för redigering av Falkenbergs gymnasieskolas hemsidor
Lathund för redigering av Falkenbergs gymnasieskolas hemsidor Börja med att logga in på hemsidan Adress: http://www.edu.falkenberg.se/gymnasieskolan Klicka på nyckeln. Skriv i användarnamn och lösenord,
Läs merWebbutveckling 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
Läs merÖvningar i bilder och färger
Övningar i bilder och färger I dessa övningar ska du öva på att redigera några bilder för att anpassa dem till en webbplats. Bilderna kommer att beskäras på olika sätt, förändras i färguppsättning och
Läs merT a b e l l e r - t a b l e s
skriv ut» T a b e l l e r - t a b l e s Exempel på tabeller» Grundkoden för tabellen» Tabell- och kolumnbredd» Sammanfoga celler» Bakgrundssbild och bakgrundsfärg» Kantlinjebredd och färg» Avstånd mellan
Läs merStruktur & Layout med CSS
1ME321 Webbteknik 1 Lektion 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2018 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Denna vecka Exemplet Gretas Blommor Garretts modell Structure
Läs merLathund för att lägga in information på ovanaker.se Innehållsförteckning
Lathund för att lägga in information på ovanaker.se Innehållsförteckning Inloggning... 2 Redigeringsläget... 3 Skapa innehåll... 4 Verktygsfältet... 4 Lägga till textblock... 4 Ändra textformat... 5 Lägg
Läs merLabbrapport: 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 mer12 Webb och kurshemsidor
12 Webb och kurshemsidor Många lärare använder sig av kurswebbsidor eller egna personliga webbsidor som ett ställe att samla information och dokumentation kring sitt arbete. Om du ska skapa en webbsida,
Läs merGrafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida.
1 Grafisk Webbprofil http://users.du.se/~v10evawa/inlamningsuppgift_3/valkommen.html Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida. Författare: Eva Wallin
Läs merTDDD52 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 merRepetition. 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 merRepetition. 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 merGuide 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
Läs merHTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren.
Vad är Semantic Elements? HTML5 Semantic Informationen kommer från w3schools.com Semantik (av grekiska sema, "tecken") avser det vetenskapliga studiet av teckensystems innebörd och tolkning. Semantic elements
Läs merLä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
Läs merVisa och dölja element med JavaScript
Föreläsning i webbdesign Visa och dölja element med JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Visa och dölja element Förändra elementets sdl för display eller visibility
Läs merManual. 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...
Läs mer1. Uppdateringsmodul (CMS)
Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...
Läs merLaboration 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 merKom 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 merLathund för att lägga in information på ovanaker.se Innehållsförteckning
Lathund för att lägga in information på ovanaker.se Innehållsförteckning Inloggning... 2 Redigeringsläget... 3 Skapa innehåll... 4 Verktygsfältet... 4 Lägga till textblock... 4 Ändra textformat... 5 Lägg
Läs merLaboration 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 merIkon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering
Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning... 10 CSS-klass... 10 Egna anteckningar:...
Läs merStorleksförändra figurer och bildobjekt - Word 2007 / 2010
Word (Textruta Figursättning, storleksförändra, beskära, Linjal, Sidhuvud/fot) 1:5 En textruta är en ram som kan innehålla text, bild, tabell etc. och kan precis som bilder, figursättas. Textrutan använder
Läs merStrukturering med XML och DTD
Föreläsning i webbdesign Strukturering med XML och DTD Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se PresentaCon SCl Layout OrganisaCon/struktur InformaConsobjekt Länkar Innehåll/data
Läs merIntroduktion Översikt av kursen och området webbteknik
1ME321 Webbteknik 1 Kursintroduktion och lektion 1 Introduktion Översikt av kursen och området webbteknik Rune Körnefors Medieteknik http://medieteknik.lnu.se/1me321 1 2019 Rune Körnefors rune.kornefors@lnu.se
Läs merDesignhäftet. När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se
Designhäftet När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se Materialet är framtaget i samband med utbildningstunrén 2011. Praktiska designtips En lista
Läs merInnehå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 merFrontpage 2002/XP (2)
Frontpage 2002/XP Frontpage 2002 eller Frontpage XP som det också kallas är ett hemsideprogram där du inte behöver kunna koda som annars är fallet om man gör en hemsida. Att snabbt, enkelt och snyggt kunna
Läs merEDA095 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
Läs merInternet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8
Laboration 2 CSS del 1 1 av 8 Vad kommer jag att lära mig på laboration 2? Skriva en stilmall: o Skriva extern CSS-mall och länka den till XHTML-dokument o Skriva inbäddad CSS-mall i XHTML-dokument o Skriva
Läs merManual för visionutv.net Redigera
Manual för visionutv.net Redigera Version 2.0 Visionutveckling 2004 Innehåll: 1 Om Redigera 3 1.1 Bakgrund 3 1.2 Hur Redigera är uppbyggt 3 1.3 Vad är? 4 2 Inloggning 6 3 Nyheter i Redigera 2.0 7 3.1 Funktionsknappar
Läs merSkapa en mall för inlämning av skriftliga uppgifter med hjälp av Microsoft Office Word
Skapa en mall för inlämning av skriftliga uppgifter med hjälp av Microsoft Office Word Enkel guide till ordbehandling med Word 2010 Medieteknik Södertörns högskola 2 september 2011 Du hittar vilka krav
Läs merIntroducerande övningar i CSS
Intrducerande övningar i CSS CSS (Cascading Style Sheets) är ett språk sm används för att göra stilinställningar av en webbsida skapad i HTML. Stilinställningarna kan läggas in på tre ställen: sm attribut
Läs merOn-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 merFormulär i Sitecore. Innehåll. Inlogg sitecore:
Formulär i Sitecore Inlogg sitecore: http://cms2.in.stofair.se/sitecore/login Innehåll Formulär i Sitecore... 1 Skapa formulär... 2 Lägga till fält... 3 List Type:... 5 Bekräftelsemail... 8 Peka ut formuläret...
Läs merFrå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 merInstruktioner till övningen som börjar på nästa sida
Instruktioner till övningen som börjar på nästa sida Övningen innehåller det grundläggande som du måste kunna för att klara Word. Varje stycke ska vara formaterat så som det står i stycket. Under varje
Läs merInternet 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
Läs merLektion 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
Läs merLabora&on 3 Objekt i JavaScript övningar/uppgi:er
Labora&on 3 Objekt i JavaScript ö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 det
Läs merOptimering av webbsidor
1ME323 Webbteknik 3 Lektion 7 Optimering av webbsidor Rune Körnefors Medieteknik 1 2019 Rune Körnefors rune.kornefors@lnu.se Agenda Optimering SEO (Search Engine Optimization) Sökmotor: index, sökrobot
Läs merKurs 6:1 Att publicera på webben
Kurs 6:1 Att publicera på webben S TUDE NTDATOR UTBILDNINGE N MALMÖ HöGSKOLA Beijerskajen 8, K3, källaren, sal Apollo (A01:303), 205 06 Malmö www.bit.mah.se/undervisning/sdm Att publicera på webben, del
Läs merCarl-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...
Läs merhttp://office.microsoft.com/sv-se/word/ha100444731053.aspx
1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan
Läs merLektion 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
Läs merAnvä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
Läs merGrafiska riktlinjer för e-tjänster. Enligt stadens nya grafiska profil - 2013
Grafiska riktlinjer för e-tjänster Enligt stadens nya grafiska profil - 2013 Form Typsni!, färger och layout skapar igenkänning mellan stockholm.se och e-tjänster. Typsni! och färg Typsni! Stockholm
Läs merManual - Introduktionskurs SiteVision
Sidan 1 Manual Introduktionskurs SiteVision 20141125 Version 2 Innehållsförteckning Logga in 2 Redigera text 3 Om bilder på ale.se 6 Lägga till en bild 7 Lägga till en länk i text 9 Lägga till länkar under
Läs merVilken 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 merInnehåll. HTML Editor Sida 2 av 30
HTML editor Innehåll Länka till webbsida... 4 Extern länk.... 7 Länka till e-post.... 8 PROs bildbank.... 10 Ladda upp ny bild.... 12 Redan uppladdad bild... 16 Bildredigeraren.... 17 Infoga/redigera inbäddad
Läs mer