CSS-övningar. 1. Grunder

Storlek: px
Starta visningen från sidan:

Download "CSS-övningar. 1. Grunder"

Transkript

1 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 Två övningar Anna Berg / Ove Lundgren 1 CSS_1.doc

2 CSS Du har förmodligen använt formatmallar i när du arbetat med något ordbehandlingsprogram, t.ex. Word. En formatmall är en mall för hur texten ska se ut med avseende på typsnitt, stil, storlek med mera. CSS är formatmallar för webbsidor. På svenska använder vi ofta ordet stilmallar CSS = Cascading Style Sheets Äldre html-kod innehåller dels information om innehållet på en webbsida, dels information om webbsidans utseende (typsnitt, färger etc.). Numera använder man (som förut) html för att beskriva innehållet, men utnyttjar CSS för att beskriva utseendet! Testa stilmallar Vi utgår från en "traditionell" fil där html används för både innehåll och utseende: Skriv följande kod i en editor och spara som cssovn1.html <html> <head> <title> cssovn1 </title> </head> <body bgcolor="yellow"> <h1> <font face="arial" COLOR="blue"> En rubrik har vi här </font> </h1> <p> <font face ="Verdana" SIZE ="3" > Så lite brödtext i ett stycke </font></p> <h1>en rubrik till</h1> <p> </p> </body> </html> Det här minns du väl från html-kursen? body, h1, p och font är element (ibland kallade "taggar"). Ibland förses taggarna med attribut: Elementet body har i exemplet ett attribut, bgcolor som har värdet "yellow" Elementen font har här argumenten: face som bestämmer typsnitt och COLOR som sätter färg. Se efter i webbläsaren hur resultatet blir! I fortsättningen ska du alltid kolla hur sidan ser ut i webbläsaren, så snart du gjort en förändring. Använd helst Internet Explorer. Antag nu att vi vill att alla rubriker (texten i h1-blocken) ska skrivas med typsnittet Arial i blå färg. Antag vidare att vi vill att all text i stycke-blocken (P) ska ha typsnittet Verdana och att den ska vara 11 punkter stor. Vi skulle kunna åstadkomma detta (i alla fall något liknande) med attribut i alla h1- och P-element. CSS erbjuder ett enklare sätt! Anna Berg / Ove Lundgren 2 CSS_1.doc

3 Med CSS kan vi skriva regler som, en gång för alla, anger hur texten i alla h1-element respektive alla P-element ska se ut. Dessutom kan vi med CSS beskriva t.ex. bodyns utseende. Ändra nu filen cssovn1.html så här: <html> <head> <title> cssovn1 </title> body { background-color : yellow; h1 p { font-family : Arial; color : blue; { font-family : Verdana; font-size : 11pt; </head> <body> <h1>en rubrik har vi här</h1> <p> Så lite brödtext i ett stycke </p> <h1>en rubrik till</h1> <p> </p> </body> </html> Som synes lägger vi in ett style-element i head-blocket. style har ett attribut type. Dess värde "text/css" anger att CSS-regler följer. I style-blocket skriver man sina CSS-regler - sina stilmallar. Man säger att man bäddar in CSS i html-koden. Observera att html-koden nu endast hanterar sidans innehåll (rubrik- och textinnehåll). Allt utseende hos texter, rubriker och själva bodyn beskriver vi med CSS. Doctype-deklaration Vi använder i detta material doctype-deklarationen En doctype-deklaration anger vilken version av html som används och bidrar till att olika webbläsare behandlar koden på likartat sätt. Anna Berg / Ove Lundgren 3 CSS_1.doc

4 Så här är en CSS-regel uppbyggd: en regel selektor h1 { font-family : Arial ; font-size : 16pt ; color : blue ; deklaration attribut värde Regelns "namn" kallas selektor. Selektorn har samma namn som en tagg t.ex. h1 Det som står inom krullparenteserna kallas deklaration. Deklarationen består av ett antal attribut med tillhörande värde. T.ex. har attributet color värdet blue. Mellan attributet och dess värde står ett kolon-tecken. Efter varje attribut med tillhörande värdeangivelse ska det stå ett semikolon. Terminologin är alltså ungefär densamma som i html. Så här blir resultatet: Anna Berg / Ove Lundgren 4 CSS_1.doc

5 En regel kan ha flera selektorer. Gör ändringar enligt nedan (ändringar visas med fet stil) : <html> <head> <title> cssovn1 </title> body { background-color : yellow; h1, h2 { font-family : Arial; color : blue; p { font-family : Verdana; font-size : 11pt; </head> <body> <h1>en rubrik har vi här</h1> <p> Så lite brödtext i ett stycke </p> <h2>en rubrik till</h2> <p> </p> </body> </html> Provkör! (Regeln påverkar om synes båda rubriktyperna.) Det är noga med syntaxen när du skriver CSS. I följande regel finns flera vanliga nybörjarfel: Skriv inga "vinklar" här! <h1> { font-family : Arial color : red ; Här saknas ett semikolon! Här saknas höger krullparentes! Anna Berg / Ove Lundgren 5 CSS_1.doc

6 Det är vanligt att man omger alla CSS-regler med html:s kommentartecknen (<!-- -->). Så här: <!-- h1 { font-family : Arial ; color : red ; --> Syftet är att äldre webbläsare som inte förstår CSS skall dölja innehållet i formatmallen. (Vi utelämnar dock kommentartecknen här så exemplen blir lättlästa) Svårare än så här är det inte att använda CSS! Har du bara tillägnat dig kunskaper om html så lär du snart greppa idén med stilmallar också Här är några adresser som man kan ha nytta av när man jobbar med html och CSS: World Wide Web Consortium ( ) sätter standard för html och CSS. html-standarden: html4.01 elementen html4.01 attributen Om CSS : CSS1-standarden: Dessa attribut har vi använt hittills: Attribut Exempel på värde Typsnitt font-family Arial Verdana Textstorlek font-size 16pt 1cm Textfärg color red blue green Dessa ska vi strax använda: Attribut Exempel på värde Fetstil font-weight bold Stil font-style italic Vänstermarginal margin-left 1cm 10px Bakgrundsfärg background-color lime maroon Anna Berg / Ove Lundgren 6 CSS_1.doc

7 Klasser Gör tilläggg/ändringar enligt nedan och spara som cssovn2.html. <html> <head> <title> cssovn2 </title> body { background-color : yellow; h1,h2{ font-family : Arial; color : blue; p { font-family : Verdana; font-size : 11pt;.minklass { margin-left : 1cm ; font-weight : bold ; color : yellow ; background-color : blue; </head> <body> <h1>en rubrik har vi här</h1> <p> Så lite brödtext i ett stycke </p> <h2>en rubrik till</h2> <P class = "minklass"> </p> </body> </html> Här har vi skrivit en regel med en selektor som har ett namn som vi själva har hittat på (minklass) Selektorn är alltså inte namnet på ett html-element. En sådan regel kallas en klass. Observera att det ska stå en punkt framför selektorn för en klass. När vi har deklarerat en klass kan man sedan låta ett (eller flera) html -element använda sig av klassen. I exemplet låter vi det andra P-elementet använda de egenskaper som definierats i klassen minklass Det sker som synes med attributet class = "minklass" Provkör! Så här blir det: Anna Berg / Ove Lundgren 7 CSS_1.doc

8 Elementen div och span Gör följande ändringar. Spara som cssovn3.html och provkör! <html> <head> <title> cssovn3 </title> body { background-color : yellow; h1,h2{ font-family : Arial; color : blue; div { font-family : Verdana; font-size : 11pt;.minklass { margin-left : 1cm ; font-weight : bold ; color : yellow ; background-color : blue; </head> <body> <h1>en rubrik har vi här</h1> <div> Så lite brödtext i ett stycke </div> <H2>En rubrik till</h2> <div class = "minklass"> </div> </body> </html> Anna Berg / Ove Lundgren 8 CSS_1.doc

9 För text inom ett P-block gäller att man får radmatning (och lite extra "luft" före och efter textstycket). För text inom ett div-block gäller att man får en radmatning efter blocket. För text inom ett span-block gäller att man inte får någon radmatning. div- och span-element är vanliga när man använder CSS Gör följande ändring. Spara och testa. <div> <span class="minklass"> En massa text </span> - en massa text </div> Så här blir det nu: span-taggen ger inte någon radbrytning I element som genererar ett radbyte (blockelement, t.ex. P, div, h1, H2 ) fylls bakgrundsfärgen ut ända till högerkanten. I element som kan inpassas på en rad (inline-element, t.ex. span och A ) visas bakgrundsfärgen endast bakom texten. Ärvda egenskaper En html-sida innehåller blocken head och body. I vårt nästa exempel ska vi skriva in lite text i body-blocket. body-blocket ska dessutom innehålla en rubrik, h1, och ett div-element med lite text. Vi kan tänka oss att vår html-sida har denna hierarkiska struktur: html head body h1 div Anna Berg / Ove Lundgren 9 CSS_1.doc

10 Skriv denna kod och spara som cssovn4.html Provkör! <html> <head> <title> cssovn4 </title> body { font-family : "Times New Roman"; font-size : 12pt; color : black; background-color : yellow; h1 { /* lämnas avsiktligt tom så länge */ div { /* lämnas avsiktligt tom så länge */ </head> <body> </body> </html> <h1>en rubrik</h1> <div> </div> Här har vi gett body vissa egenskaper i en CSS-regel ( Times New Roman, 12pt, svart text på gul bakgrund) Dessa inställningar kommer att gälla i hela bodyn. Vi har i ovningen ovan lämnat h1 och div-reglerna tomma så länge. Som du ser så ärvs de flesta egenskaperna hos h1- och div-elementen från body: Texten har typsnitt Times New Roman, den är svart på gul bakgrund. (Undantaget är textstorleken i h1. Rubrikelement är från början definierad med en viss textstorlek.) Skriv nu in attribut med värde i reglerna nedan. Spara och provkör. h1 { color : blue; div { font-style : italic; Rubriken är nu blå (men övriga egenskaper ser ut som förut) Texten i div-blocket är kursiv (men övriga egenskaper är som förut, ärvda från body ) Anna Berg / Ove Lundgren 10 CSS_1.doc

11 Skriv in ytterligare några attribut. Testa html h1 { color : blue; font-family : Verdana; font-size : 24pt; head h1 body div Arv div { font-style : italic; color : maroon; h1 och div ärver egenskaper fån body Du ser här att man kan sätta en egen storlek även på rubriker. Experiment: Lägg rubriken i ett div-element: <div> <h1> En rubrik </h1> </div> Rubriken ärver som synes font-style från div Förutom det här med arv kan du lägga märke till ytterligare några saker i exemplet ovan: Om det ingår blanktecken i typsnittsnamnet ska detta omgärdas av citationstecken ("Times New Roman") Kommentarer i CSS skrivs med snedstreck-stjärna (som i C++ och Java), så här: /* En kommentar */ Anna Berg / Ove Lundgren 11 CSS_1.doc

12 Mer om typsnitt, marginaler och mått Några ytterligare fakta kring de attribut vi hittills lärt oss: 1. font-family kan ha flera värden. Exempel: font-family : Verdana, Arial, sans-serif; Om det första typsnittet saknar stöd i webbläsaren används det andra osv. 2. Man kan sätta vänstermarginal så här: margin-left : 1cm ; Om man vill att endast första raden i en text ska börja 1 cm åt vänster används attributet text-indent: text-indent : 1cm; Testa text-indent-attributet i övningen cssovn2.html 3. Vid måttangivelser kan man använda enheterna cm, mm, px, pt Testa i någon av övningarna textstorlekarna 24cm, 24mm, 24pt och 24px Ytterligare en enhet är em. Om du sätter t.ex. en marginal till 2em så blir marginalen 2 gånger den aktuella textstorlekens höjd. Textdekor I cssovn4.html: Lägg in en "ankartagg" så att du får en länk till en annan sida, t.ex.: <a href="http://www.kck.amal.se"> Välkommen till KCK Åmål! </a> I style-elementet: Skriv in en regel för A-taggen: a { font-family : Verdana; color : navy; font-weight : bold; Testa! Lägg sedan till attributet text-decoration och testa a { font-family : Verdana; color : navy; font-weight : bold; text-decoration : none; Skillnad? Det finns ingen linje under texten (Vi ska senare se hur utseendet hos en länk kan göras beroende av om det är en aktuell länk, en besökt länk osv.) Anna Berg / Ove Lundgren 12 CSS_1.doc

13 Färgad ram kring bilder I någon av dina html-filer, lägg in en <img>-tagg så att en bild visas med ram: <img src = minbild.jpg border = 10 > Provkör! (En svart ram visas kring bilden.) Med CSS är det enkelt att färglägga (och ändra utseende på) ramen. Skriv denna regel: img { border-width : 10px; border-style : solid; border-color : red; och ändra <img>-taggen till <img src = minbild.jpg > Testa andra värden för attributet border-width: Byt 10px mot t.ex. 2px eller 20px Testa andra värden för attributet border-style: Byt solid mot dotted eller dashed Testa andra värden för attributet border-color: Byt red mot t.ex. blue eller green De tre border-attributen kan skrivas om till ett enda, så här: img { border : 10px solid red; Mer om attributet border och om färger kommer i CSS-häfte nummer 2 Anna Berg / Ove Lundgren 13 CSS_1.doc

14 Fristående CSS -fil Hittills har vi skrivit CSS-reglerna i style-blocket (alltså bäddat in dem i html-filen), så här /* här skrivs CSS */ Ett annat sätt är att skriva all CSS-kod i en fristående fil, som sedan länkas till vår html-fil i LINK-taggen, så här: <link rel="stylesheet" href="minstil.css" type="text/css"> Ändra cssovn4.html enligt nedan och spara som cssovn5.html <html> <head> <title> cssovn5 </title> <link rel="stylesheet" href="minstil.css" type="text/css"> </head> <body> <h1>en rubrik</h1> <div> </div> <A href="http://www.kck.amal.se">välkommen till KCK Åmål!!</A> </body> </html>. Kopiera reglerna i cssovn4.html till en egen fil. Spara den som minstil.css body { font-family : "Times New Roman"; Color : black; font-size : 12pt; background-color : yellow; h1 { font-family : Verdana; font-size : 24pt; Color : blue; div { font-style : italic; color : maroon; a { font-family : Verdana; font-weight : bold; Color : navy; text-decoration: none; Testa cssovn5.html Fristående CSS-filer är mycket praktiska t.ex. då man vill ha samma stil på alla sidorna i en sajt (och det vill man ju nästan alltid ) Anna Berg / Ove Lundgren 14 CSS_1.doc

15 Attributet style Hittills har vi använt elementet style. Vi har skrivit CSS-regelerna inom style-taggarna i head-blocket. Det finns också ett attribut som heter style. Med hjälp av det kan man skriva CSS-regler direkt i en html-tagg - så här: <div style = "color:blue ; font-size:36pt;"> </div> Detta sätt att skriva stilmallar används endast undantagsvis. Varför? Vitsen med CSS försvinner. Man kan i princip lika gärna använda html-attribut. Vi vill ju utnyttja CSS för att separera innehåll och utseende. Prioritetsordning hos stilmallar Vilken stil används om mer än en stil är angiven för ett html-element? 1. I första hand används eventuell stilmall skriven med style-attribut direkt i taggen. 2. I andra hand använd interna stilmallar (CSS inom style-taggar i head-blocket) 3. I tredje hand används externa stilmallar (Stilmallar i fristående CSS-fil) 4. I fjärde hand används webbläsarens standard. I nedanstående exempel finns färgen på rubriken (h1-elementet) definierad på fyra nivåer: Direkt i taggen anges röd färg. Enligt style-blocket är färgen grön. I den externa filen minstil.css anges blå färg. Webbläsarens standardfärg är (normalt) svart. Utgå från cssovn5.html. Lägg till kod/ändra enligt nedan. Spara som cssovn6.html <html> <head> <title> cssovn6 </title> <link rel="stylesheet" href="minstil.css" type="text/css"> h1 { color : green; </head> <body> <h1 style="color:red;"> En rubrik </h1> <div> </div> <a href="http://karlbergsgymnasiet.se">välkommen Karlberg!!</A> </body> </html> Testa! (Rubriken är röd så som CSS-regeln efter style-attributet anger) Ta bort style-attributet i h1-taggen. Testa! (Rubriken är nu grön. Internt stilelement har högre prioritet än extern!) Ta bort style-blocket. Testa. (Rubriken är blå så som anges i det externa stilelementet i filen minstil.css) Ta bort LINK-elementet. Testa. (Rubriken är svart vilket är webbläsarens standard) Anna Berg / Ove Lundgren 15 CSS_1.doc

16 Två övningar Nu ska du själv skapa snygga webbsidor efter egen smak, med hjälp av stilmallar. Hämta filen examensarbeten.html Texten innehåller information om examensarbeten på en teknisk högskola. Du skall använda texten för att göra en webbsida med information om dessa. Använd vad du hittills har lärt dig om CSS för att lösa uppgiften. Gör sidan så snyggt och överskådlig som möjligt. Milda färger. Hämta filen Formatering.html Där finns en text med rubriken Formateringsmönster i CSS. Denna texten ska på ett snyggt och överskådligt sätt presenteras på en webbsida. Använd vad du hittills har lärt dig om CSS för att lösa uppgiften. Använd väl avstämda färger som inte är jobbiga för ögat. Asteriskerna markerar bokmärken (interna referenser) i texten. Från sidans topp ska man med interna länkar kunna klicka och nå de olika avsnitten i texten. Ordet Upp står sist i varje stycke. Man ska kunna klicka på orden Upp och därvid (med intern länk) kunna gå tillbaka till sidans topp Det första ordet i varje stycke ska du ge ett eget format så att ögat lätt kan orientera sig. Exempel: Intern länk till sidans topp Upp * blockelement Blockelementen är sådana element bokmärke eget format Observera: Det inte ska visas någon bild på sidan. Däremot ska följande text stå sist i texten: <img src="bild.gif"> hänvisar t ex till en fil som heter bild.gif Dessa attribut har vi använt i övningshäftet: Attribut Exempel på värde Typsnitt font-family Arial Verdana Times New Roman Textstorlek font-size 16pt 1cm 10px Fetstil font-weight bold normal Stil font-style italic normal Textfärg color red blue green Bakgrundsfärg background-color lime maroon navy Vänstermarginal margin-left 1cm 10px Första raden indrag text-indent 1em 1cm Textutsmyckning text-decoration none underline line-through blink Ram-bredd border-width 5px Ram-stil border-style dotted dashed solid double groove Ram-färg border-color Red green blue fuchsia gray lime Ram (sammanfattn.) border 5px solid lime Anna Berg / Ove Lundgren 16 CSS_1.doc

Ö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

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

Internet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8

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

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

Styla och formatera text

Styla och formatera text Nivå 2 Styla och formatera text All Code Clubs must be registered. By registering your club we can measure our impact, and we can continue to provide free resources that help children learn to code. You

Läs mer

Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20

Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20 Laboration 3 CSS del 2 1 av 20 Vad kommer jag att lära mig på laboration 3? 1. Skriva en stilmall Boxegenskaper o border o margin o padding o width o float o clear Färger och bakgrundsbilder Positionering

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

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

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

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

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

CSS-WORKSHOP. Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek

CSS-WORKSHOP. Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek CSS-WORKSHOP Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek sarabritta.jadelius@trollhattan.se 0520-49 76 65 HTML strukturerar innehåll det här är

Läs mer

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara: Hemsida CSS Introduktion till Cascading Style Sheets (CSS) Detta är en mycket kort genomgång av CSS med exempel på hur sådan kod ska läsas och hur den kan användas på IdrottOnline-sidor. Är man ute efter

Läs mer

En introduktion till stilmallar (CSS) Cascading Style Sheets (CSS)? 2002 Ulf Tornert 1

En introduktion till stilmallar (CSS) Cascading Style Sheets (CSS)? 2002 Ulf Tornert 1 En introduktion till Stilmallar eller Cascading Style Sheets (CSS) 1 Stilmallar en introduktion... 4 Vad är stilmallar?...4 Vad behöver du för att lära dig stilmallar?...4 Hur stilmallar integreras i en

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

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg

layout-tagg

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

Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014. Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014 NÅGRA EXEMPEL WWW.CSSZENGARDEN.

Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014. Copyright Mahmud Al Hakim, mahmud@dynamicos.se, 2014 NÅGRA EXEMPEL WWW.CSSZENGARDEN. CSS CASCADING STYLE SHEETS GRUNDKURS Introduktion till stilmallar, CSS CSS står för Cascading Style Sheets CSS är ett språk som används för att få bättre kontroll över utseendet (formatering och layout)

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

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

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

ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande

ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande Hjälpmedel: Kurslitteratur, utdelade papper, webbdesignskolan, samt World Wide Web. Tillåtna program att skriva kod i är Anteckningar eller

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

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

Gilla r d u d en h ä r g u id en? Vill d u a tt vi ska f o rtsä tta g ö ra f ler g u id er? - lä s mer h ä r»

Gilla r d u d en h ä r g u id en? Vill d u a tt vi ska f o rtsä tta g ö ra f ler g u id er? - lä s mer h ä r» Gilla r d u d en h ä r g u id en? Vill d u a tt vi ska f o rtsä tta g ö ra f ler g u id er? - lä s mer h ä r» skriv ut» C SS - gr unde r Infor mation om C S S CS S i exter n mall eller i dokumentet? A

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

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

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

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

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

Frågor och svar Gränssnittsdesign/Webbutveckling

Frågor och svar Gränssnittsdesign/Webbutveckling Frågor och svar Gränssnittsdesign/Webbutveckling Bilder och optimering 1. Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96

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

Grundläggande instruktioner för att publicera webbsidor på webbservern.se

Grundläggande instruktioner för att publicera webbsidor på webbservern.se Grundläggande instruktioner för att publicera webbsidor på webbservern.se Av Julia Klingvall i samarbete med webbservern.se. Version 1.1, januari 2005. I denna guide kommer du att lära dig de viktigaste

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

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

«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

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

Dags att skriva uppsats?

Dags att skriva uppsats? Dags att skriva uppsats? Grundkurs i Word 2010 SDM Studentdatorutbildning vid Malmö högskola Att skriva i Word! 1 Börja skriva/skapa ditt dokument- något att tänka på 1 Spara ditt dokument 1 Bra att veta

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

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

<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

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket.

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket. e-line mobilversion Pyramid Business Studio 3.42A servicepack 05 (2015-07-13) Mobilversionen av e-line är i grunden samma applikation som fullversionen av e-line. Skillnaden är att endast valda delar av

Läs mer

Lathund PDF-utskrift. Senselogic AB Version 2.3

Lathund PDF-utskrift. Senselogic AB Version 2.3 Lathund PDF-utskrift Senselogic AB Version 2.3 Innehållsförteckning 1.1 PDF -utskrift... 3 1.1.1 Användningsområde... 3 1.1.2 Inställningar för PDF... 3 Fliken Allmänt... 3 Fliken Kapitel... 3 Fliken Formatmallar...

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

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

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

Formatmall för uppsatser vid Historiska institutionen Användarinstruktioner

Formatmall för uppsatser vid Historiska institutionen Användarinstruktioner Formatmall för uppsatser vid Historiska institutionen Användarinstruktioner HISTORISKA INSTITUTIONEN Uppdaterad 19 januari 2015 av Erik Lindberg Innehållsförteckning Om formatmallar... 4 Titelsidan...

Läs mer

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

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

Carl-Oscar Hermansson WEBB DESIGN

Carl-Oscar Hermansson WEBB DESIGN Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...

Läs mer

Även om man placerar information kolumnvis så kommer all information att visas radvis i PDF-utskriften.

Även om man placerar information kolumnvis så kommer all information att visas radvis i PDF-utskriften. Lathund PDF-modulen Detta är en lathund för hur man ställer in och använder PDF-modulen. Med hjälp av PDF-utskrift kan du enkelt skapa PDF-utskrifter av webbsidor. Denna modul omvandlar text, bild och

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

Skärmtypografi. Mikael Becker, Mittuniversitetet 2005

Skärmtypografi. Mikael Becker, Mittuniversitetet 2005 Skärmtypografi Mikael Becker, Mittuniversitetet 2005 Introduktion Detta häfte är gjort med i huvudsak Georgia. Gjort av Matthew Carter för Microsofts räkning (det bästa Microsoft har gjort i mitt tycke).

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

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00

HTML. Laborationskompendium i konstruktion av webbsidor. Detta exemplar tillhör: VT 2005. Mitthögskolan ITM Telefon 063-16 53 00 Mitthögskolan ITM Telefon 063-16 53 00 HTML Laborationskompendium i konstruktion av webbsidor Detta exemplar tillhör: VT 2005 Mittuniversitetet, ITM Telefon 063-16 53 00 Laborationskompendium för konstruktion

Läs mer

2I1073 Föreläsning 1. HTML och XHTML XHTML

2I1073 Föreläsning 1. HTML och XHTML XHTML 2I1073 Föreläsning 1 XHTML, stilmallar och Javascript 1 KTH-MI Peter Mozelius HTML och XHTML HyperText Markup Language Element = taggar + taggarnas innehåll innehåller lite text taggarna kan

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

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

PIM Skriva http://www.pim.skolutveckling.se/

PIM Skriva http://www.pim.skolutveckling.se/ PIM Skriva http://www.pim.skolutveckling.se/ Examination http://pimbevis.skolutveckling.se/ Nivå 1 Frågefilm om sökning på internet Inlämningsuppgift - Worddokument med bilder http://www.pim.skolutveckling.se/upload/pimpresentation.ppt

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

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

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

Dokumentation av rapportmall

Dokumentation av rapportmall Dokumentation av rapportmall Utgivningsår: 2003 Författare: Eva Erbenius Samhällsmedicin Centrum för Tillämpad Näringslära Box 175 33 Wollmar Yxkullsgatan 19 118 91 Stockholm Innehåll Inledning... 3 Rapportens

Läs mer

Vägen till en lyckad responsiv webbdesign.

Vägen till en lyckad responsiv webbdesign. Vägen till en lyckad responsiv webbdesign. Tänk mobilt först! Utgå ALLTID från den mista skärmen och jobba dig uppåt. Man brukar räkna med att 320px är i minsta laget idag. Korrekt ViewPort är mycket viktig,

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

Ö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

RIKTLINJER FÖR FORMALIA VID SKRIFTLIGA STUDIEUPPGIFTER

RIKTLINJER FÖR FORMALIA VID SKRIFTLIGA STUDIEUPPGIFTER RIKTLINJER FÖR FORMALIA VID SKRIFTLIGA STUDIEUPPGIFTER Akademin för vård, arbetsliv och välfärd Högskolan i Borås, augusti 2014 ALLMÄNT OM FORMALIA Skriftliga studieuppgifter ska struktureras utifrån akademins

Läs mer

Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener ... 3 Typsnitt ... 3 Övergångar ...

Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener <scenes>... 3 Typsnitt <fonts>... 3 Övergångar <transitions>... Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener ... 3 Typsnitt ... 3 Övergångar ... 4 Mall för slide ... 5 , ...

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

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

Labora&on 8 Formulär övningar/uppgi6er

Labora&on 8 Formulär övningar/uppgi6er Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument

Läs mer

Animering på webben En jämnförande studie av CSS och jquery i deras gemensamma funktionsområde för animering

Animering på webben En jämnförande studie av CSS och jquery i deras gemensamma funktionsområde för animering Uppsala universitet Inst. för informationsvetenskap/data- och systemvetenskap Animering på webben En jämnförande studie av CSS och jquery i deras gemensamma funktionsområde för animering Hannes Dahlberg

Läs mer

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare. 1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera

Läs mer

Att berätta med webb + En introduktion till HTML

Att berätta med webb + En introduktion till HTML Att berätta med webb + En introduktion till HTML Vad är en bra historia? Uppbyggnad En serie handlingar/händelser som tillsammans bildar en enhet Budskap Produkt Bra, användarvänlig, lättförståelig, etc.

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

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

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

GRAFISK PROFIL TIDAHOLMS KOMMUN

GRAFISK PROFIL TIDAHOLMS KOMMUN GRAFISK PROFIL TIDAHOLMS KOMMUN INNEHÅLL 2 3 4 5 6 7 8 8 8 Varför grafisk profil? Övergripande riktlinjer Logotyper Kommunvapen Tidaholmslogotyp Verksamhetsspecifika symboler Skyltar Mallar Audiell profil

Läs mer

Webbdesign. maj 2008 Daniel Cronholm Sensus Studieförbund daniel.cronholm@gmail.com 073 600 8000

Webbdesign. maj 2008 Daniel Cronholm Sensus Studieförbund daniel.cronholm@gmail.com 073 600 8000 Webbdesign Bestäm dig för på vilket sätt du vill lära dig att göra webbsidor. Titta på de metoder som används när du kodar. Skapa en första sida med XHTML och CSS. Gör lite övningar. En sammanställning

Läs mer

Instruktioner till övningen som börjar på nästa sida

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

Kom igång med FrontPage 2003

Kom igång med FrontPage 2003 Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker

Läs mer

En enhetlig profil är viktig för alla organisationer

En enhetlig profil är viktig för alla organisationer En enhetlig profil är viktig för alla organisationer och ännu viktigare för en stor grupp av frivilliga. Då öppnas möjligheten för att alla känner samhörighet och vet åt vilket håll gruppen går. Det gör

Läs mer

Kort om World Wide Web (webben)

Kort om World Wide Web (webben) KAPITEL 1 Grunder I det här kapitlet ska jag gå igenom allmänt om vad Internet är och vad som krävs för att skapa en hemsida. Plus lite annat smått och gott som är bra att känna till innan vi kör igång.

Läs mer

Användarmanual för Content tool version 7.5

Användarmanual för Content tool version 7.5 Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN

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

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI JavaScript JavaScript Ramverk (Bibliotek) jquery + jquery UI Allmänt ramverk/bibliotek Importera JavaScript-kod Plattformsoberoende JavaScript Prototype + script.aculo.us jquery + jquery UI Återanvända

Läs mer

Manual till publiceringsverktyg

Manual till publiceringsverktyg Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten

Läs mer

Kort instruktion för arbete i Sitevision ( exempel från ATM)

Kort instruktion för arbete i Sitevision ( exempel från ATM) Sitevision på HiG BOL /2010-06-07 Kort instruktion för arbete i Sitevision ( exempel från ATM) För att lägga in text eller redigera text på HiG s nya webb måste du tillhöra någon grupp som har behörighet

Läs mer

Riktlinjer kring grafisk profil för arbete med hemsidor och trycksaker

Riktlinjer kring grafisk profil för arbete med hemsidor och trycksaker Riktlinjer kring grafisk profil för arbete med hemsidor och trycksaker Riktlinjer för och lokala NyföretagarCentrum Framtagna av i samarbete med s Kvalitetsråd 1 Logotype Logotype s logotype består av

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

MS WORD 97. Microsoft Word Lathund för att arbeta med kortkommandon. Utgivare Syncentralernas Datateam Stockholm

MS WORD 97. Microsoft Word Lathund för att arbeta med kortkommandon. Utgivare Syncentralernas Datateam Stockholm MS WORD 97 Microsoft Word 2013 Lathund för att arbeta med kortkommandon Utgivare Syncentralernas Datateam Stockholm 2013-01-19 Innehållsförteckning Öppna ett dokument.... 3 Öppna ett dokument från USB-minne....

Läs mer

Spelprogrammering med JavaScript och HTML5

Spelprogrammering med JavaScript och HTML5 Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj.

Läs mer

Visa och dölja element med JavaScript

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

Den kompletta HTML- och CSS-guiden. Framsida

Den kompletta HTML- och CSS-guiden. Framsida Framsida 2005-08-24 14.34 Sida 1 av 99 Innehållsförteckning Framsida...1 Vad kommer HTML ifrån?...3 SGML... 3 XML...5 Struktur...6 HTML...7 Får vi börja skriva webbsidor nu?... 9 HTML 4.01...9 Introduktion

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

Nätet. Uppgiften. Nivå

Nätet. Uppgiften. Nivå Nivå 1 Nätet All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Uppgiften Har

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