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

Storlek: px
Starta visningen från sidan:

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

Transkript

1 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 favoritlänkar samt ett motivationsstycke. (Googla om du är osäker på vad du ska ha med i ett cv) Målet är inte att du ska berätta ditt livs historia utan att du ska skapa en webbsida med korrekt HTML & CSS - så du behöver inte ta med allt du gjort i livet och allt du skriver kan lika gärna vara påhittat. Motivationsdelen är dock mycket viktig - i den delen ska du skriva: varför du valt att gå programmet varför du vill bli webbutvecklare hur din framtid kommer se ut efter examen tack vare utbildningen Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle. Format För att ni ska börja vänja er vid att jobba i Visual Studio 2010 så skall sidan göras med hjälp av Visual Studio i ett standard-mvc-3-projekt (vi ska dock inte direkt pyssla med några Asp.net, mvc 3 eller c#-grejer, utan MVC 3-projektet är bara ett skal). Så få inte panik över den stora mängden med filer och grejer som finns i projektet - du behöver varken använda dem eller förstå dem just nu. Om ni inte har installerat Visual Studio 2010 och MVC 3, så gör det! Instruktioner för installationen finns på JensenOnline. Det är en hel del grejer som behöver installeras och ifall du får problem, fråga gärna någon av dina kamrater som redan har installerat allt. Asp.net MVC 3-projekt Skapa ett standardprojektet för Asp.net MVC3 i VS2010 (Internet application). Kryssa i att du vill använda HTML5 semantic markup

2

3 (Ifall du inte har någon kryssruta för HTML5 semantic markup (som ovan) behöver du installera MVC3 Tools Update )

4 Snabb förklaring av strukturen: Standardsidan är "Index.cshtml" som du hittar i /Views/Home/ (det är där du lägger din HTML) Den övergripande layouten (som delas av alla sidor som standard) finns i Views/Shared/ _Layout.cshtml (Layoutsidan bäddar in indexsidan där det står ) Bilder läggs i katalogen /Content/ (skapa gärna en underkatalog som heter 'Images) Skapa även din CSS-fil i Content-katalogen (där det redan ligger en Style.css). Länka in din egen CSS-fil på din html-sida sedan. (antingen i Views/Home/Index.cshtml eller i /Views/ Shared/_Layout.cshtml) Alltså: Din HTML-sida skapar du i /Views/Home/Index.cshtml Din CSS lägger du i en fil som du skapar i /Content/-katalogen (och länkar in i din HTMLsida) Du behöver inte bry dig om standardutseendet du får på sidan automatiskt av MVC3. För att se din sida behöver du köra igång den; Gå till Debug-menyn i Visual Studio och välj Start Debugging eller Start without debugging.

5 Deadline: Tanken är att ni ska vara klara med labben senast fredagen den 14/9. Är ni inte det så kommer det bli svårt att hinna med resten av kursen - men absolut sista deadline är sista dagen på kursen, d.v.s. fredagen den 28/9. Om ni redovisat och fått G så får ni givetvis redovisa igen sen ifall att ni även hunnit med att göra VG-delen (så länge det sker senast 14/9) Krav för G: HTML Bild på dig ska finnas på sidan och den skall ligga bredvid texten (tips: CSS, float) Följande HTML-taggar ska användas minst en gång (i "korrekt" sammanhang): <html>, <head>, <title>,<body>, <div>, <span>, <p>, <a>, <h1>, <h2>, <header>, <nav>, <footer>, <article>, <section>, <em>, <strong>, <br />, <q>, <blockquote>, <table>, <th>, <tr>, <td>, <img>, <ul>/<ol>, <li> (ni får givetvis använda fler taggar om det känns lämpligt, så länge de inte är borttagna ur HTML5) Inga taggar som tagits bort (deprecated) i samband med HTML5 får finnas på sidan: (<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>) Table får inte användas för att skapa layout på något vis utan endast för att visa tabelldata (typ listan på dina utbildningar/jobb). För layout använder vi <div> (och motsvarande) En motivationsdel måste vara med All utseende-"styling" sker med CSS - Ingen styling i HTML:en. HTML:en ska bara ange strukturen på innehållet - inte hur det ska se ut. All CSS skall finnas i en egen fil och länkas in på HTML-sidan via "<link...". Det får alltså inte finnas någon CSS kodad på HTML-sidan. Sidan skall klara HTML5-valideringen på (när ni öppnat sidan i en browser - välj visa källa och klistra in i validatorn) CSS Du skall bygga en två-, tre-, eller fyrakolumns layout någonstans på sidan. Bilden skall som sagt ligga i en sidokolumn. Du får välja om du skall ha fasta bredder eller dynamiska bredder (alltså om kolumnerna ändrar storlek när man ändrar storlek på fönstret, eller ifall kolumnerna alltid har en fast storlek). Du får välja ifall din layout ligger inuti standardlayouten du får med Asp.net MVC 3 standardprojekt eller om du vill ändra hela sidans layout (d.vs. det är ok ifall din layout ligger inuti den vita rutan) Tips: <div>, float, clear Alla länkar (<a...>) ska vara "bold" samt inte ha streck under sig Sidan ska ha en bakgrundsfärg (eller bakgrundsbild) och texten ska ha lämplig färg så att den går att läsa mot bakgrunden (t.ex. är inte svart text på en svart bakgrund speciellt lättläst). På någon del av sidan ska texten vara centrerad (exempelvis i rubriker)

6 Rubriker ska ha teckensnittsfamilj utan serifer och vara i en annan färg än blå eller svart Brödtext ska ha teckensnittsfamilj med serifer Någonstans på sidan ska det finnas en ruta med annan bakgrundsfärg och en kantlinje på 1px Krav för VG G-kraven ska vara uppfyllda Första bokstaven i varje paragraf med brödtext ska vara dubbelt så stor som övrig text samt i fetstil använd 960.gs för din layout (http://960.gs/) Tips: finns en guide på svenska längst ner på sidan. För att lyckas så måste du ändra både /Views/Home/Index.cshtml och /Views/ Shared/_Layout.cshtml. Utmaningen är att veta vilken del av 960.gs-koden som skall in i vilken del När man för musen över en länk ska länken få streck under sig och byta färg. För att göra tabellen mer lättläst skall tabell-headern vara i en tydlig annan färg samt så ska även varannan rad ha en annan färg (glöm inte att "styling" endast får ske med CSS) Tips: En lista över taggarna i HTML5 (samt de som inte längre skall användas) hittar ni på: Om ni kör fast - googla! Och var heller inte rädda för att fråga mig, skicka iväg ett mail. (Tyvärr kommer jag vara bortrest och inte ha tillgång till dator mellan fredagen den 7:e september och tisdag eftermiddag den 11:e, men jag svarar på mail så fort jag kommer hem) Extra utmaning: Få dina kolumner att vara lika höga. Sätt olika färger på header, alla "columns" samt footer. Lägg olika mycket text i de olika kolumnerna (en av kolumnerna måste ha mer text än vad som får plats på skärmen utan att scrolla). Se till att alla kolumner sträcker sig hela vägen ner till footern.

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

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

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

Inför prov 1 i webbdesign

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

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

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

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

Webbutveckling Laboration 1: HTML5 och CSS3.

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

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

/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }

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

Ö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

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

Att styla webbsidor. Nivå. Uppgiften

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.

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

«Sida 2 av 4 Till kursens framsida Sida 4 av 4»

«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

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

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

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011 Webbkurs för distriktsansvariga Stockholm den 7 och 13 september 2011 Klistra in text från Word Klistra in: all formateringskod från Word kommer med och är den som styr det webbläsaren visar, även om man

Läs mer

WEBDESIGN A - DTR 1210

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

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

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

HTML5 Semantic. Informationen kommer från w3schools.com. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren.

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

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

Frontpage 2002/XP (2)

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

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

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

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

WEBDESIGN A - DTR 1210

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

Läs mer

Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer.

Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer. Informationsinfrastruktur 7.5 hp Mattias Nordlindh Inledning Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer. Dokumentet består av

Läs mer

Internet A. HTML Grunder. 02-01-14 Maximilien Chiang 1

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

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

ASP.NET MVC. Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se. Innehåll

ASP.NET MVC. Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se. Innehåll ASP.NET MVC Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se Innehåll Introduktion till MVC Controller Action-metoder Views Arbeta med Layout-sidor och sektioner Route konfiguration

Läs mer

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5 Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med

Läs mer

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

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

Läs mer

Introducerande övningar i HTML

Introducerande ö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 mer

http://office.microsoft.com/sv-se/word/ha100444731053.aspx

http://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 mer

Introduktion Till WordPress

Introduktion Till WordPress Introduktion Till WordPress Vad är WordPress? ett blogg- och innehållshanteringssystem skrivet i PHP och som använder databasen MySQL för datalagringen Wordpress har under åren utvecklats från ett bloggsystem

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

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

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

Introduktion till programmering

Introduktion till programmering Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med

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

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

Webbdesign vt. 2010. Innehållsförteckning

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

Läs mer

Räkna med ASP.NET MVC 3

Räkna med ASP.NET MVC 3 Instruktion Räkna med ASP.NET MVC 3 Introduktionsuppgift Författare: Mats Loock Kurs: ASP.NET MVC Kurskod:1DV409 Innehåll Du ska följa steg-för-steg -instruktionen i denna introduktionsuppgift och skapa

Läs mer

CSS-övningar. 1. Grunder

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

Läs mer

CISV.se för hemsideadministratörer

CISV.se för hemsideadministratörer CISV.se för hemsideadministratörer Innehåll Om cisv.se... 2 Bakgrund... 2 Målgrupper... 2 Tekniskt... 3 Avdelningar... 3 Lediga uppdrag... 3 Framtiden... 4 Att sköta en lokalföreningssida... 4 Komma igång...

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

<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

Manual för din hemsida

Manual för din hemsida Manual för din hemsida Dynamiska hemsidor är en lösning för att man på ett enkelt sätt skall kunna lägga till, ändra och ta bort sidor på sin hemsida. För att detta skall vara möjligt bygger lösningen

Läs mer

Content Management System. Publiceringssystem

Content Management System. Publiceringssystem Content Management System Publiceringssystem Vad är ett Content Management System (CMS)? Ett verktyg för att separera innehåll från presentation Skapa webbsidor utan att kunna html Låt många skapa sidor

Läs mer

Hur man skapa en Wiki.

Hur man skapa en Wiki. Hur man skapa en Wiki. Ordet wiki (i t.e.x Wikipedia) kommer från Hawaiian och betyder snabbt. Kortfattat kan man säga att en wik i är en webbplats där alla enkelt kan publicera och redigera material när

Läs mer

Skapa en rapport med snygg formatering, rubriker, sidnummer och innehållsförteckning

Skapa en rapport med snygg formatering, rubriker, sidnummer och innehållsförteckning Skapa en rapport med snygg formatering, rubriker, sidnummer och sförteckning MS Office Word 2011 för Mac Precis som med målning och tapetsering blir jobbet med rapportskrivning både bra och roligt om man

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

Manual för visionutv.net Redigera

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

Manual för administratör

Manual för administratör Manual för administratör Innehållsförteckning 1. Bloggar... 3 1.1 Byta Header- bild till blogg... 3 1.2 Ta bort/lägg till Kategori... 4 1.3 Byt Profilbild samt Lägg till Sociala Medier... 6 2. Publicera

Läs mer

Övningar i CSS för anpassning till olika enheter

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

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

Gör så här för att rapportera:

Gör så här för att rapportera: Cykla och gå till jobbet 2012 Gör så här för att rapportera: OBS! Se till att du har anmält dig innan du gör detta. Om du inte vet hur man gör, klicka här. Steg 1: Skriv ut redovisningspapperet Gå till

Läs mer

Webbdesign vt. 2009. Innehållsförteckning

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

Läs mer

VERKTYGSFÄLTET I ARTIKELEDITORN

VERKTYGSFÄLTET I ARTIKELEDITORN Joomla Guide 2.5.11 VERKTYGSFÄLTET JCE EDITORN Sida 1 av 8 VERKTYGSFÄLTET I ARTIKELEDITORN En kort genomgång/förklaring till de vanligaste symboler och användningsområdena för verktygsfältet i Joomla Uppdateringsmodulen

Läs mer

GIT L0006B. C# och Windowsbaserad applikationsutveckling. Information inför kursstart

GIT L0006B. C# och Windowsbaserad applikationsutveckling. Information inför kursstart GIT L0006B C# och Windowsbaserad applikationsutveckling Information inför kursstart Innehåll Registrering 2 Kursplan 2 Schema 2 Föreläsningar 2 Laborationer 2 Examination 2 Litteratur 3 Referenslitteratur

Läs mer

Symprint Snabbstartsguide

Symprint Snabbstartsguide Symprint Snabbstartsguide Artikelnummer: 12020, 12021, 12022 v.1 0.10 1 Innehåll Välkommen till SymPrint... 3 Installation av medföljande mjukvara:... 3 Komma igång... 4 Skapa nytt dokument från mall...

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

Manual för administratör

Manual för administratör Manual för administratör Innehållsförteckning 1. Bloggar... 3 1.1 Byta Header- bild till blogg... 3 1.2 Ta bort/lägg till Kategori... 4 1.3 Byt Profilbild samt Lägg till Sociala Medier... 6 2. Publicera

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

LATHUND FRONTPAGE 2000

LATHUND FRONTPAGE 2000 LATHUND FRONTPAGE 2000 RXK Läromedel AB, Riddarplatsen 36 Plan 7 177 30 Järfälla Tel: 08-580 886 00, Fax: 08-580 259 40 www.rxk.se, e-post: info@rxk.se Detta material är författat av RXK Läromedel AB.

Läs mer

Instruktion för användande av Citrix MetaFrame

Instruktion för användande av Citrix MetaFrame Instruktion för användande av Citrix MetaFrame Öppna valfri browser, t ex Internet Explorer eller Firefox, och ange url en www.git.ltu.se. Detta medför att följande bild presenteras. OBS! Ny version av

Läs mer

batklubben.eu s hemsida

batklubben.eu s hemsida batklubben.eu s hemsida redigera din sida av webbplatsen 1. Skriv in http://www.din_doman.se/admin i browserns adressfält. 2. Skriv in ditt användarnamn och lösenord i inloggningsrutan, och tryck OK. 3.

Läs mer

12 Webb och kurshemsidor

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

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering

Läs mer

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den

24-timmarswebben. Riktlinje Förklaring Så uppfyller vi den 24-timmarswebben WebPublish gör det möjligt att skapa läsvänliga sidor. Vi tycker att det är en självklarthet att informationen på en webbplats ska vara tillgänglig för och kunna läsas av så många som

Läs mer

[ HUR DU UPPDATERAR FÖRSTASIDAN PÅ OTHELLO.NU ]

[ HUR DU UPPDATERAR FÖRSTASIDAN PÅ OTHELLO.NU ] Logga in på backend www.othello.nu/admin Välj Site för att få upp trädvyn över alla sidor Uppdatera Nyheter Klicka på sidan nyheter i trädvyn och tryck Edit Väl inne på kan du Skapa, Uppdatera och Radera

Läs mer

1. Uppdateringsmodul (CMS)

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

Guide för bolagskartan.com

Guide för bolagskartan.com Guide för bolagskartan.com Anvisningar för hur man kommer igång Innehållsförteckning I. Profilinställningar sida 3 1. Logga in sida 4 2. Ändra profil sida 5 3. Informationslänkar sida 6 II. Lägga upp en

Läs mer

Kursvärdering. Denna manual beskriver hur du kan skapa en mapp i Fronter som heter Kursvärdering där du ladda upp reslutat från kursutvärderingar.

Kursvärdering. Denna manual beskriver hur du kan skapa en mapp i Fronter som heter Kursvärdering där du ladda upp reslutat från kursutvärderingar. Kursvärdering Denna manual beskriver hur du kan skapa en mapp i Fronter som heter Kursvärdering där du ladda upp reslutat från kursutvärderingar. Här finns även tips på några olika sätt att skapa en kursvärdering

Läs mer

INSTALLATION AV VITEC MÄKLARSYSTEM

INSTALLATION AV VITEC MÄKLARSYSTEM INSTALLATION AV VITEC MÄKLARSYSTEM Studentversion september 2013 Innehållsförteckning 1. Installera VITEC Mäklarsystem... 2 2. Läs noga igenom manualen... 2 3. Systemkrav... 2 4. Kundservice/Teknisk support...

Läs mer

Så här funkar Föreningsliv

Så här funkar Föreningsliv Så här funkar Föreningsliv Logga in Logga in på den adress du fått skickat till dig via mail. Använd det lösenord och användarnamn som du tilldelats. Kom alltid ihåg att logga ut när du skrivit färdigt,

Läs mer

Manual för banläggning i OCAD8 170706 IF ÅLAND

Manual för banläggning i OCAD8 170706 IF ÅLAND Manual för banläggning i OCAD8 170706 IF ÅLAND Alla filer och program vi behöver finns under katalogen c:/ocad8/. Kartorna vi använder som bakgrundsfiler finns under c:/ocad8/kartor/. De är sedan indelade

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

Guide för pdf-formulär

Guide för pdf-formulär Guide för pdf-formulär Innehållsförteckning Rätt programvara... 3 Instruktion för automatiskt formulär... 3 Steg 1 Mall till pdf-format via Word... 3 Alternativt steg 1 Mall till pdf-format via Acrobat...

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

Huvudmenyn (utseendet kan variera) Skriva ett nytt mail

Huvudmenyn (utseendet kan variera) Skriva ett nytt mail Lathund Google mail (i webbläsare) För att komma till din Google mail skriver du gmail.com i webbläsaren. För att logga in skriver du ditt login, t.ex. el771117@ljusdal.se och sedan ditt lösenord. Huvudmenyn

Läs mer

Din guide till. Klientinstallation MS Driftservice

Din guide till. Klientinstallation MS Driftservice Din guide till Klientinstallation MS Driftservice September 2012 Innehåll ALLMÄNT... 3 Gamla klienter... 3 Installation... 3 Vid problem... 5 inställningar för brandväggar... 6 Inställningar för Windows

Läs mer

Online-resultat. Manual

Online-resultat. Manual Online-resultat Manual Är onlineresultat något för vår förening? Jag tror vi alla kan hålla med att online-resultat är en fantastisk service! Vi började försiktigt med några få klubbar, sedan fick fler

Läs mer

WordPress fortsättning Anpassa teman, bildgalleri, fleranvändare, webshop, CSS mm

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

Innehåll. HTML Editor Sida 2 av 30

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

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0.

Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Version 2.0 onsdag 12 oktober 2016 1 av 8 Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Kort beskrivning Instruktioner: Nedan finner du instruktioner kring hur du skapar wallpaper för ratsit.se.

Läs mer

Det här dokumentet är tänkt som en minnesanteckning. programmet och är alltså inte tänkt att förklara allt.

Det här dokumentet är tänkt som en minnesanteckning. programmet och är alltså inte tänkt att förklara allt. Det här dokumentet är tänkt som en minnesanteckning från min genomgång av programmet och är alltså inte tänkt att förklara allt. Den förutsätter att du ska göra layout till den tidningsartikel du skrivit

Läs mer

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

Instruktion för Betanias Kundportal

Instruktion för Betanias Kundportal Instruktion för Betanias Kundportal Att bli användare När er organisation godkänt att bli användare av systemet får du ett välkomstmeddelande första gången vi skickar en rekvisition till dig. Klicka eller

Läs mer

Visma Proceedo. Att logga in - Manual. Version 1.3 / 140414 1

Visma Proceedo. Att logga in - Manual. Version 1.3 / 140414 1 Visma Proceedo Att logga in - Manual Version 1.3 / 140414 1 Innehållsförteckning 1) INLOGGNING VIA VERKTYG OCH SYSTEM... 3 2) INTERNET EXPLORER... 6 2.1 Java... 6 2.2 Popup-fönster... 8 2.3 Browser, 32-

Läs mer

Widgetguiden Vad är Publits widgetshop?

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

Läs mer

Snabbguide för E-lomake

Snabbguide för E-lomake Snabbguide för E-lomake 1 Om E-lomake/E-blankett...1 1.1 Inloggning...1 1.2 Symboler...1 1.3 Användargränssnittets flikar...1 1.4 Skapande av en ny blankett...2 2 Skapande av en ny blankett, Fält-funktionen...3

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

Ehandelslösningars komma igång tips!

Ehandelslösningars komma igång tips! Ehandelslösningars komma igång tips! Här kan du få reda på allt du behöver för att komma igång och sälja dina produkter! Om du behöver redigera bilder kan du göra det gratis på www.pixlr.com (exempelvis

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