F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

Download "F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet"

Transkript

1 Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet

2 F02 HTML Dagens agenda doctype <html> <head> <body> taggar, element, attribut, värden teckenkodning HTML/XHTML Indentering Block/inline-element Struktur Grafisk/Logisk formatering Taggar

3

4 <!doctype html> <html lang="sv"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>

5 doctype <!doctype html> Det första som finns i dokumentet. Standard mode/quirks mode <!doctype html> <html lang="sv"> <head> <meta charset="utf-8 /> <title></title> </head> <body> </body> </html> Dokumenttypsdeklarationen för XHTML 1.1 ser ut så här: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

6 Hypertext Markup Language tagg <div id= container >Some text</div> element attribut This is an <em>example</em> text <div id= container >Some text</div> värde <div id= container >Some text</div>

7 <html> Attributet lang talar om vilket språk innehållet på sidan är skrivet på. <!doctype html> <html lang="sv"> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>

8 <head> <title> - Sidans titel. Ska anges. <!doctype html> <html lang="sv"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <meta charset= > - Teckenkod som används. Använd: <meta charset= utf-8 > eller <meta charset= iso > </body> </html> Se demo

9 Att tänka på Filändelse:.html Undvik svenska tecken och specialtecken i filnamn Publicera på en webbserver (i kursen gh-pages ) Försök att ha en logisk filstruktur

10 URL En URL (Uniform Resource Locator) är en webbsidas adress på Internet. Om du publicerar på GitHub är din adress: Exempelvis givet: Användarnamn = xx222yy Repronamn = 1dv435-laborationer Sökväg = pages/kontakt.html

11 <body> Här skriver vi det som ska synas på sidan. <!doctype html> <html lang="sv"> <head> <meta charset="utf-8 /> <title></title> </head> <body> </body> </html>

12 HTML5 vs. XHTML <?xml version="1.0" encoding="utf-8"?> <!doctype html> <html lang="sv"> <head> <meta charset="utf-8 /> <title>en HTML5-sida</title> </head> <body> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="sv"> <head> <title>en XHTML-sida</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> </body> </html>

13 Indentering block <div> <img src= mypic.jpg /> <p> this is some <em>text</em> </p> <p>to show structure</p> </div> inline Det är alltid en god idé att indentera sin kod så att den är lätt att läsa.

14 block Inline-/blockelement inline Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia aliquet auctor. Morbi lacinia ultricies condimentum. Donec ut nisi at tellus aliquet adipiscing a vitae velit. Nunc mauris est, blandit ac consectetur at, mollis quis nunc. Ut at ante sit amet nisl volutpat cursus. Praesent feugiat turpis eget orci semper fringilla porta augue hendrerit. Proin interdum, turpis eget semper congue, purus metus dapibus nibh, vitae semper sapien tellus accumsan sapien. Morbi feugiat ultricies risus. I HTML5 har man en annan modell än block och inline, men denna sparar vi lite...

15 Struktur

16 Struktur Toppdel

17 Struktur Huvud Naviga7on

18 Struktur Huvud Innehåll Naviga7on

19 Struktur Huvud Innehåll Naviga7on

20 Struktur Huvud Innehåll Innehåll Naviga7on Del Del Del

21 Struktur Huvud block Naviga7on block block block block Innehåll Del Del Del block block block

22 Struktur <div id= header > <div id= navigation > <div id= content > <div id= banner > <div id= parts > <div> <div> <div>

23 Struktur <!doctype html> <html lang="sv"> <head> <meta charset="utf-8 /> <title></title> </head> <body> </body> </html> <div id= header >...</div> <div id= navigation >...</div> <div id= content > <div id= banner >...</div> <div id= parts > <div>...</div> <div>...</div> <div>...</div> </div> </div> HTML5 introducerar några nya semantiska taggar, exempelvis nav. Mer om detta senare <div id= header > <div id= navigation > <div id= content > <div id= banner > <div id= parts > <div> <div> <div>

24 Validering Se demo ok med varning om HTML5

25 Logisk/grafisk formatering Vi ska alltid sträva efter att låta vår HTML-kod stå för den logiska formateringen och låta CSS sköta grafisk formatering. Varför? Tillgänglighet Underhåll Utbyggbarhet Stöd för olika enheter SEO

26 Grafisk formatering <center>denna text är skriven med <b>grafisk formatering</b> </center> Denna text är skriven med grafisk formatering <body bgcolor="ffc0cb"> <big> <u> <s> Intenterar lite text <b> <i>

27 Logisk formatering Talar om en text betydelse snarare än dess grafiska utseende. Sidans semantik. <p>denna text är skriven med <strong>logisk formatering</strong> </p> b!= strong

28 Taggar <div id= container >Text</div>

29 Taggar. h1-h6 Rubriknivåer p Stycke ul, ol, dl Listor div, span Strukturelement <!-- --> Kommentarer img Bilder audio, video Video och ljud a länkar table tabeller form formulär header, article Strukturtaggar HTML5 Se demo

30 Referenser developer.mozilla.org Bra resurs för HTML/CSS/JavaScript Utmärkt listning av element och attribut samt länkar till specifikationerna docs.webplatform.org/wiki/html Community-drivet initiativ för att utbilda på webben som en plattform. w3schools.org Använd inte. Har inget med W3C att göra. Läs mer på: w3fools.com

F13 HTML5 Dagens agenda

F13 HTML5 Dagens agenda F13 HTML5 Dagens agenda HTML5 Struktur Outline Nya element APIr Microdata/RDF/Microformats WHAT Working Group? Initiativ, 2004, startat av Apple, Mozilla och Opera WHATWG adapterades 2007 av W3C och rekommendationen

Läs mer

Rubriktexten. Tilläggsrubrik. Upphovsperson Avdelning 2012

Rubriktexten.  Tilläggsrubrik. Upphovsperson Avdelning 2012 Rubriktexten Tilläggsrubrik Ett citat eller en kort text tagen ur innehållet i broschyren. Texten bör väcka intresse och locka till att läsa broschyren. Texten behöver inte fylla hela det gula fältet.

Läs mer

Detta är en dokumentmall för examensarbeten. Dokumentmallen har följande egenskaper:

Detta är en dokumentmall för examensarbeten. Dokumentmallen har följande egenskaper: Detta är en dokumentmall för examensarbeten. Dokumentmallen har följande egenskaper: teckensnittet Times New Roman används genomgående. bröd har storlek 12 punkter och 1,15 radavstånd. i tabellen har storlek

Läs mer

En mötesplats i centrum

En mötesplats i centrum Finlands svenska biblioteksförenings medlemstidning Nr 1/2011 En mötesplats i centrum EAHIL INTERNET LIBRARIAN INTERNATIONAL ISSOME s turpis vel urna luctus dictum. Morbi non libero mauris, vehicula facilisis

Läs mer

Frågan om typsnitt för HT sönderfaller

Frågan om typsnitt för HT sönderfaller Typsnitt för Heraldisk Tidsskrift Frågan om typsnitt för HT sönderfaller i två delar: dels omslag, dels inlaga. Val av typsnitt för omslagets styrs av att den grundläggande utformningen av framsidan skall

Läs mer

Grafisk manual. En grafisk guide till vår identitet.

Grafisk manual. En grafisk guide till vår identitet. Grafisk manual En grafisk guide till vår identitet www.tstgruppen.se Grafisk manual Innehåll Logotyp 3 Logotyp / Alternativ... 3 Avstånd / placering... 4 Ej tillåten användning... 5 typografi 6 Vår Typografi...

Läs mer

Välkomna till SJÖLOG 2017! Denna blankett är till för er som skall medverka på SJÖLOG 2017 och som skall presenteras i dess katalog.

Välkomna till SJÖLOG 2017! Denna blankett är till för er som skall medverka på SJÖLOG 2017 och som skall presenteras i dess katalog. Välkomna till SJÖLOG 2017! Denna blankett är till för er som skall medverka på SJÖLOG 2017 och som skall presenteras i dess katalog. Jättekul att ni skall medverka på SJÖLOG 2017! Nu börjar det bli dags

Läs mer

Grafisk manual för Göteborgs rättighetscenter. Regler och ramar för användande av logotyp, färger, typsnitt m.m både inom webb och tryck.

Grafisk manual för Göteborgs rättighetscenter. Regler och ramar för användande av logotyp, färger, typsnitt m.m både inom webb och tryck. Grafisk manual för Regler och ramar för användande av logotyp, färger, typsnitt m.m både inom webb och tryck. 1 Innehåll Sida 3 4 Sammanfattning Sida 5 Färger Sida 6 8 Logotyp Sida 9 Bildspråk Sida 10

Läs mer

kontorsmaterial/visitkort

kontorsmaterial/visitkort kontorsmaterial/visitkort Det är viktigt att allt som syns utåt har en enhetlig profil, och här spelar kontorsmaterialet en viktig roll. Med kontorsmaterial menas visitkort, kontaktkort, meddelandeblock,

Läs mer

Regular expressions. "regexps" "grep" Jan Erik Moström,

Regular expressions. regexps grep Jan Erik Moström, Regular expressions "regexps" "grep" Reguljära uttryck Relativt vanligt att vi vill manipulera eller söka i text Text är inte alltid strukturerad, exempel emailadresser i ett email Definition av mönster

Läs mer

Titel. kurs uppgift. Författare A & Författare B cid@student.chalmers.se

Titel. kurs uppgift. Författare A & Författare B cid@student.chalmers.se Titel kurs uppgift Författare A & Författare B cid@student.chalmers.se Fysik, Göteborgs Universitet Göteborg, 16 november 2015 Abstract Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut purus

Läs mer

VISUELL IDENTITET FÖR TELTEK

VISUELL IDENTITET FÖR TELTEK VISUELL IDENTITET FÖR TELTEK En grafisk profil är en viktig byggsten i skapandet av ett starkt varumärke och syftar till att skapa en enhetlig visuell identitet för Teltek som är enkel att känna igen för

Läs mer

Vår grafiska profil. Antagen av direktionen

Vår grafiska profil. Antagen av direktionen Vår grafiska profil Antagen av direktionen 2016-12-16 En viktig del av vår profil är den grafiska. Vår profil ska hjälpa våra kunder att identifiera oss som avsändare och helst minnas oss på ett positivt

Läs mer

GRAFISK MANUAL Visuell identitet, logotyp och riktlinjer NOVEMBER 2013

GRAFISK MANUAL Visuell identitet, logotyp och riktlinjer NOVEMBER 2013 GRAFISK MANUAL Visuell identitet, logotyp och riktlinjer NOVEMBER 2013 2 INNEHÅLL Innehållsförteckning INLEDNING... 3 LOGOTYP... 4 Versioner... 4 Användning... 5 Frizon... 5 SYMBOLEN... 6 TYPOGRAFI...

Läs mer

Manual Manual 1 Senaste uppdatering: 2015/03/26 Olsson & Gerthel

Manual Manual 1 Senaste uppdatering: 2015/03/26 Olsson & Gerthel Manual Manual 1 Senaste uppdatering: 2015/03/26 Olsson & Gerthel Innehållsförteckning Personalrabatt... 1 Test2... 2 Test... 3 IT... 4 Servern... 5 Nätverket... 7 Personalrabatt Alla som arbetar här har

Läs mer

brandbook blågrön innovation

brandbook blågrön innovation brandbook blågrön innovation blågrön innovation blue green innovations Grafisk profil för Blågrön Innovation (Marint Centrum) joar_l_j@hotmail.com Joar Lisberg Jakobsson 2011 Namnet Blågrön Innovation

Läs mer

Grafisk Profil. Northai

Grafisk Profil. Northai Grafisk Profil Northai Förord Vi har skapat en grafisk profil för Northai som enligt oss speglar företaget på bästa möjliga sätt. Profilen attraherar med dess svenska design tillsammans med de kinesisk

Läs mer

Välkomna! till e-butik.se

Välkomna! till e-butik.se Välkomna! till e-butik.se Butiken - Butiken - Admin - Arbeta i butiken - Utseende - Viktigt att tänka på - Tips & Idéer Butiken Varukorgen längst ner 1/4 Butiken Varukorgen högst upp 2/4 Butiken Vänstermenyn

Läs mer

F10 Mer CSS Dagens agenda

F10 Mer CSS Dagens agenda F10 Mer CSS Dagens agenda Stila formulär CSS-genererat innehåll Mediatyper Utskrift Negativa marginaler Sprites Gridbaserade layouter Ramverk Formulär Prydliga formulär #cform { width: 500px;} #cform

Läs mer

Innehåll. Inledning... 3 Typsnitt & färg... 4 Logotyp... 5 Visitkort... 6 Brevpapper... 7 Kuvert... 8 Produkter... 9 Hemsida... 10

Innehåll. Inledning... 3 Typsnitt & färg... 4 Logotyp... 5 Visitkort... 6 Brevpapper... 7 Kuvert... 8 Produkter... 9 Hemsida... 10 Grafisk manual Innehåll Inledning... 3 Typsnitt & färg... 4 Logotyp... 5 Visitkort... 6 Brevpapper... 7 Kuvert... 8 Produkter... 9 Hemsida... 10 2 Inledning Företaget Lorem ipsum dolor sit amet, consectetur

Läs mer

Årsräkning/Sluträkning Period: 2013-01-01-2013-12-17

Årsräkning/Sluträkning Period: 2013-01-01-2013-12-17 Årsräkning/Sluträkning Period: 2013-01-01-2013-12-17 Överförmyndarenheten Myndighetsvägen 13B 12345 Kungshamn X Huvudman Underårig Namn Telefon Personnummer Astrid Axelsson 0523 71234 600101-1234 Gatuadress

Läs mer

Denna fil innehåller några förklaringar till mallarna för Spikblad, Titelblad (Inlaga) samt Pärm.

Denna fil innehåller några förklaringar till mallarna för Spikblad, Titelblad (Inlaga) samt Pärm. Läs Mig Först Spikblad.. sid 2-3 Titelblad.. sid 4-5 Pärm.. sid 6 Övrigt. Sid 7 Denna fil innehåller några förklaringar till mallarna för Spikblad, Titelblad (Inlaga) samt Pärm. I zip-filen som innehåller

Läs mer

Innehåll. 3. Utskrift under arbetets gång...11

Innehåll. 3. Utskrift under arbetets gång...11 Innehåll 1. Om GNS-mallen...1 1.1 Om mallen...1 1.2 Viktiga skillnader...2 1.3 Att arbeta med formatmallar...2 1.3.1 Applicera formatmallar...4 1.3.2 Radera formatering...4 2. Exempel på formatmallar...5

Läs mer

Grafisk manual 2010/2011 1

Grafisk manual 2010/2011 1 Grafisk manual 2010/2011 1 Förord Vi inom Ung Företagsamhet arbetar för fler företagsamma människor och fler företag i Sverige. Vi gör det genom utbildningskoncept i skolan. Var och en inom Ung Företagsamhet

Läs mer

GRAFISK MANUAL LATHUND 1.0 24.10.2013

GRAFISK MANUAL LATHUND 1.0 24.10.2013 GRAFISK MANUAL LATHUND 1.0 24.10.2013 INNEHÅLL NYCKELKOMPONENTER 5 LOGOTYP 6 TYPSNITT 16 TYPOGRAFI 18 FÄRGER 22 ANNONSER 27 AFFISCHER 29 Manualen är framtagen av Andrzej Olas PROFORMA HB 2013 2 Välkommen

Läs mer

Årsräkning/Sluträkning Period:

Årsräkning/Sluträkning Period: Årsräkning/Sluträkning Period: 2012-01-01-2012-12-31 Överförmyndarenheten Spårvägen 22 12345 Överby X Huvudman Underårig Namn Telefon Personnummer Evald Karlsson 390205-1234 Gatuadress Postnummer Postadress

Läs mer

Wireframes Arla - Naturens egen sportdryck Christoffer Du Rietz GreatWorks

Wireframes Arla - Naturens egen sportdryck Christoffer Du Rietz GreatWorks Wireframes Arla - Naturens egen sportdryck Christoffer Du Rietz GreatWorks Page 2 Startsida... Navigering inom subsiten. Länkar till nya sidor inom substrukturen. Få 25% på träningskläder! Någon i SOK/

Läs mer

GRÄNSÄLVSGYMNASIET. Samhällskunskap 1b. Vårterminen Baksidan av media. En studie om bullar och bakverk i tidningen.

GRÄNSÄLVSGYMNASIET. Samhällskunskap 1b. Vårterminen Baksidan av media. En studie om bullar och bakverk i tidningen. GRÄNSÄLVSGYMNASIET Samhällskunskap 1b Vårterminen 2016 Baksidan av media En studie om bullar och bakverk i tidningen Ram Streamingsson Innehållsförteckning Inledning... 1 Syfte och frågeställningar 1 Metod

Läs mer

REGLER FÖR ANVÄNDNING AV LOGOTYPER, DEKORFÄRGER OCH TYPSNITT

REGLER FÖR ANVÄNDNING AV LOGOTYPER, DEKORFÄRGER OCH TYPSNITT REGLER FÖR ANVÄNDNING AV LOGOTYPER, DEKORFÄRGER OCH TYPSNITT 1 2008 Flemingsberg är ett varumärke Ett varumärke att vara stolta över Flemingsberg är ett varumärke. I stort sett allt som påverkar ett eller

Läs mer

Logotyp. Så här kan pilen användas i en punktlist. Frizon för logotyp. Minsta tillåtna bredd är 15 mm

Logotyp. Så här kan pilen användas i en punktlist. Frizon för logotyp. Minsta tillåtna bredd är 15 mm Minimanual 2015 Logotyp Logotypen placeras vanligtvis högerställd i nederkant som avsändare till det huvudsakliga budskapet, med en bredd som aldrig överstiger 41 mm (gäller ytorna A6-A3). Överst till

Läs mer

Färgkodning: Turism & Evenemang. Näringsliv. Kommun & Samhälle. Nya Gällivare

Färgkodning: Turism & Evenemang. Näringsliv. Kommun & Samhälle. Nya Gällivare GRAFISK MANUAL Färgkodning: För att få en tydlig, visuell indelning av Gällivares olika verksamhetsben jobbar Gällivare med färgkodning. Nedan visas de olika färgerna med tillhörande värden i olika färgrymder.

Läs mer

20/01/2016. html och css

20/01/2016. html och css html och css 1 Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare http://gs.statcounter.com/#desktop-browser-se-monthly-201501-201601-bar 2 Verktyg

Läs mer

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Du kan själv följa med i denna steg-för-steg guide i din texteditor. Grundläggande HTML HTML Steg-för-steg Du kan själv följa med i denna steg-för-steg guide i din texteditor. doctype Linköpings universitet I textdokument som används på internet finns på första raden information

Läs mer

Riktlinjer och inspiration till dig som gör annonser

Riktlinjer och inspiration till dig som gör annonser Riktlinjer och inspiration till dig som gör annonser Kommunal har tagit fram exempelannonser i stående och liggandeformat. Det finns exempel med röd- och vit utfallande bakgrund. Vårt förstahandsval är

Läs mer

Walking Dinner i Göteborg!

Walking Dinner i Göteborg! Walking Dinner i Göteborg! Walking Dinner Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in pretium libero. Morbi mollis semper purus nec vestibulum. In venenatis commodo est volutpat molestie.

Läs mer

Godkänd av stadsstyrelsen xx.xx.2010

Godkänd av stadsstyrelsen xx.xx.2010 1 s grafiska anvisningar Godkänd av stadsstyrelsen xx.xx.2010 2 Innehåll Logons och den visuella profilens planering och genomförande: Aptual Oy www.aptual.fi Innehåll Logo Vapen Färgsättning Brevmall

Läs mer

ROUND TABLE 117 LINKÖPING-FILBYTER

ROUND TABLE 117 LINKÖPING-FILBYTER ROUND TABLE 117 LINKÖPING-FILBYTER Round Table 117 Linköping-Filbyter grafisk profil 2016. Ord och form av Alexander Åkerberg. Fotografi av Oskar Lüren. I Round Table möter du gamla vänner för första gången

Läs mer

Sara Berlekom Metallvägen 30 719 40 Garphyttan 070-2430821 sara@xoda.se. Webbplats: www.xoda.se www.berlekom.se. Portfolio

Sara Berlekom Metallvägen 30 719 40 Garphyttan 070-2430821 sara@xoda.se. Webbplats: www.xoda.se www.berlekom.se. Portfolio Sara Berlekom Metallvägen 30 719 40 Garphyttan 070-2430821 sara@xoda.se Webbplats: www.xoda.se www.berlekom.se Portfolio Utställnings affisch Sara Berlekom Målningar, teckningar och foton Hantverksboden

Läs mer

Innehållsförteckning. Innehåll

Innehållsförteckning. Innehåll Javascript övningar Innehåll Detta dokument innehåller flera stycken olika javascript-övningar i olika svårighetsnivåer. Vissa är utförligare beskrivna än andra. Du kan själv välja vilka du vill testa

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

Profilmanual Version 1.0. 2003-12-03

Profilmanual Version 1.0. 2003-12-03 Profilmanual Version 1.0. 2003-12-03 Innehåll Förord 3 Ett varumärke och en logotyp 4 Vår logotyp 5 Logotypens uppbyggnad 6 Logotypens reproduktioner 7 Logotypens fria yta 8 Logotypens storlekar 9 Internationell

Läs mer

1. Om GNS-mallen. 1.1 Om mallen. 1.2 Viktiga skillnader

1. Om GNS-mallen. 1.1 Om mallen. 1.2 Viktiga skillnader Innehållsförteckning 1. Om GNS-mallen...1 1.1 Om mallen...1 1.2 Viktiga skillnader...1 1.3 Om formatmallar...2 1.4 Att arbeta med formatmallar...2 1.4.1 Lista formatmallar...2 1.4.2 Applicera formatmallar...3

Läs mer

KAMPANJPLATS XX Projektplan

KAMPANJPLATS XX Projektplan 2007-03-01 1 (16) Projektplan Av: Emil Blomqvist 2007-03-01 2 (16) Innehåll 1 Projektidé och mål... 3 1.1 Bakgrund och projektidé... 3 1.2 Projektmål... 3 1.3 Avgränsningar... 3 2 Leverans och överlämning...

Läs mer

Personas och scenarios i webbutveckling - möjligheter och fallgropar. Rósa Guðjónsdóttir - PinkPuffin

Personas och scenarios i webbutveckling - möjligheter och fallgropar. Rósa Guðjónsdóttir - PinkPuffin Personas och scenarios i webbutveckling - möjligheter och fallgropar Rósa Guðjónsdóttir - PinkPuffin Tema Vad är personas och scenarios? Hur skapar man personas och scenarios? Hur använder man personas

Läs mer

GRAFISK M A N U A L SVAB

GRAFISK M A N U A L SVAB GRAFISK MANUAL SVAB Ver. 1 080801 Vår grafiska profil... 4 Logotyp... 6 Logotyp - Frizon... 8 Logotyp - Korrekt användande... 10 Logotyp - Felaktigt användande... 12 Färger... 14 Typografi... 18 Layout...

Läs mer

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

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

Läs mer

Profilmanual. Övergripande regler och riktlinjer Reviderad: 2011-06-30

Profilmanual. Övergripande regler och riktlinjer Reviderad: 2011-06-30 Profilmanual Övergripande regler och riktlinjer Reviderad: 2011-06-30 Innehåll Inledning 3 Grafiska grunder 4 Logotyp 5 Färger 6 Teckensnitt Neo Sans 7 Teckensnitt Calibri 8 Teckensnitt Arial 9 Dekor 10

Läs mer

Visuell identitet garant

Visuell identitet garant Visuell identitet garant sveriges radio VER 1.3 8 1. Logotypen Logotypen består av ett ordmärke där bokstäverna S och R skapar ett bokstavsmärke. Ordmärke och bokstavsmärke används alltid tillsammans och

Läs mer

Kooperativet OLJA Oberoende Liv Jönköping Assistans

Kooperativet OLJA Oberoende Liv Jönköping Assistans Grafisk manual 2014 Kooperativet OLJA Oberoende Liv Jönköping Assistans En gemensam bild och upplevelse Våra medlemmar och anställda skapar en bild av oss huvudsakligen genom vårt arbete, men också genom

Läs mer

Grafisk manual

Grafisk manual Grafisk manual Innehåll Inledning... 3 Logotypen... 4 Placering och frizon... 5 Logotypens färger... 6 Kommunvapnets historia... 7 Typografi... 8 Grafiska element... 9 Budskapen... 10 Färgranden... 11

Läs mer

Strategisk informationsförsörjning

Strategisk informationsförsörjning Strategisk informationsförsörjning 2015-02-25 Välkommen till en eftermiddag kring begreppet Strategisk informationsförsörjning, eller earkiv som många nog menar att det ska handla om. När det gäller digital

Läs mer

TNMK30 - Elektronisk publicering

TNMK30 - Elektronisk publicering Webben TNMK30 - Elektronisk publicering Vad är internet? Vad är internet? Vad är internet? Internet: sammankoppling av datornätverk. Används för bl.a. epost, chat, filöverföring, webbsidor. Kommunikation

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

TNMK30. Elektronisk publicering

TNMK30. Elektronisk publicering TNMK30 Elektronisk publicering VÄLKOMNA TILL KURSEN! Katerina Vrotsou katerina.vrotsou@liu.se Medieteknik. 2004 Informationsvisualisering, visuell data analys MEDVERKANDE Stefan Gustavson, stefan.gustavson@liu.se

Läs mer

! Katerina Vrotsou! Medieteknik. 2004! Informationsvisualisering, visuell data analys

! Katerina Vrotsou! Medieteknik. 2004! Informationsvisualisering, visuell data analys VÄLKOMNA TILL KURSEN! TNMK30 Elektronisk publicering! Katerina Vrotsou! katerina.vrotsou@liu.se! Medieteknik. 2004! Informationsvisualisering, visuell data analys MEDVERKANDE OVERVIEW! Stefan Gustavson,

Läs mer

Visuell identitet P4. sveriges radio VER 1.3 104

Visuell identitet P4. sveriges radio VER 1.3 104 Visuell identitet P4 sveriges radio VER 1.3 104 19. P4 / Verktygslåda Verktygslådan för P4 lyfter fram guidens breda, nyfikna och folkliga karaktär. Verktygslådan består av P1:s logotyp i svart, vitt eller

Läs mer

GRAFISKA ANVISNINGAR BUSSPOOLEN - VÄSTERBOTTEN

GRAFISKA ANVISNINGAR BUSSPOOLEN - VÄSTERBOTTEN GRAFISKA ANVISNINGAR BUSSPOOLEN - VÄSTERBOTTEN Logotype och symbol Färger Pantone 485 C 100% svart 70% svart 50% svart 40% svart Pantone 485 C 100% svart 70% svart 70% svart 50% svart 100% svart 40% svart

Läs mer

Yrkeshögskolan Novias grafiska manual för Aboa Mare

Yrkeshögskolan Novias grafiska manual för Aboa Mare Yrkeshögskolan Novias grafiska manual för Aboa Mare 2 Innehåll Förord... 2 Logotyp... 3 Logotypens användning... 4 5 Användning av DNV-certifieringsmärke... 6 Färger... 7 Typografi... 8 Annonser... 9 10

Läs mer

Alumni International site Kontakta oss A - Ö

Alumni International site Kontakta oss A - Ö Welcome! LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. FUSCE EU CONVALLIS DUI. MAURIS RISUS TELLUS, MATTIS AC POSUERE QUIS, PULVINAR AUCTOR TURPIS. Promo 8 promo 23 VEL EUM IURE REPREHENDERIT

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

HTML. Introduktion till HyperText Markup Language

HTML. Introduktion till HyperText Markup Language HTML Introduktion till HyperText Markup Language 1 Frågor innan vi börjar? 2 Dagens föreläsning Snabb introduktion till webben Varför använder vi HTML? Ett första HTML-dokument Metadata Teckenkodning Validera

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

Kocktävlingen Äkta Rök E-post kundtjanst@aktarok.se

Kocktävlingen Äkta Rök E-post kundtjanst@aktarok.se Vår/sommar 2016 Kocktävlingen Äkta Rök E-post kundtjanst@aktarok.se Sveriges Äkta Rök kock 2015 Tisdagen den 5 maj 2015 gick startskottet för Sveriges Äkta Rök kock 2015 som är en kocktävling för professionella

Läs mer

Labora&on 7 Syfte med laborationen:

Labora&on 7 Syfte med laborationen: Labora&on 7 Syfte med laborationen: - att förstå enkel 7ilhantering i PHP - att repetera grundläggande PHP- begrepp såsom loopar, arrayer, stränghantering och formulär. VIKTIGT: uppgift 3-5 är repetitionsuppgifter

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

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

Yrkeshögskolan Novias grafiska manual för Aboa Mare

Yrkeshögskolan Novias grafiska manual för Aboa Mare Yrkeshögskolan Novias grafiska manual för Aboa Mare 2 Innehåll Förord... 2 Logotyp... 3 Logotypens användning... 4-5 Användning av DNV-certifieringsmärke... 6 Färger... 7 Typografi... 8 Annonsering...

Läs mer

WEBBUTVECKLING Kursplanering

WEBBUTVECKLING Kursplanering Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,

Läs mer

SALTSTÄNK. Nummer: 6 Icke RS/TS-kontrollerat medlemsorgan för Göteborgs Sjöscoutkår Årgång: 61

SALTSTÄNK. Nummer: 6 Icke RS/TS-kontrollerat medlemsorgan för Göteborgs Sjöscoutkår Årgång: 61 Utgivare: Krabban Krönikör: Åsa-Micaela SALTSTÄNK Nummer: 6 Icke RS/TS-kontrollerat medlemsorgan för Göteborgs Sjöscoutkår Årgång: 61 PINGSLÄGER 2011 Såhär glad är man när man seglar till Nya Elfsborg

Läs mer

GRAFISK PROFILMANUAL

GRAFISK PROFILMANUAL GRAFISK PROFILMANUAL GRAFISK PROFILMANUAL Allt arbete som utförs i Gislaveds kommuns namn har i grunden ett och samma syfte att göra livet lättare för alla som bor och verkar i vår kommun. Med detta i

Läs mer

Grafiskt profilprogram 1. Grafiskt profilprogram

Grafiskt profilprogram 1. Grafiskt profilprogram Grafiskt profilprogram 1 Grafiskt profilprogram 2015 2 Grafiskt profilprogram Grafiskt profilprogram 3 Innehållsförteckning 4. Logotyp - De olika varianterna av logotypen och hur den används. 6. Typografi

Läs mer

Concept Design. Mattias Arvola

Concept Design. Mattias Arvola Concept Design Mattias Arvola 2 Today s Lecture Ideation using structured design concept divergence Structured detailing of concepts ideas Storyboards at a conceptual level Pugh charts 3 Film Time The

Läs mer

BRA. Nytt flygbolag, nya möjligheter. Destinationer. Resenären. Fakta. Mediakanaler. Redaktionell produktion & Projektledning.

BRA. Nytt flygbolag, nya möjligheter. Destinationer. Resenären. Fakta. Mediakanaler. Redaktionell produktion & Projektledning. Nytt flygbolag, nya möjligheter Sverige har fått ett nytt inrikesflygbolag med mer än 2,2 miljoner passagerare om året. BRA Braathens Regional Airlines är en saanslagning av Malmö Aviation och Sverigeflyg.

Läs mer

Innehållsförteckning. Energiservice Skellefteå Grundläggande grafisk manual

Innehållsförteckning. Energiservice Skellefteå Grundläggande grafisk manual Grafisk manual Innehållsförteckning Visuell identitet... 3 Logotyp... 4 Typografi... 7 Färger... 8 Ikoner... 9 Bildmanér... 11 Mönster... 12 Digitala presentationer...13 Kuvert...14 Brevmall...15 Signatur

Läs mer

Dagstidningsannonsering med logga mindre än 42 mm. Dagstidningsannonsering med logga större än A5 samt magasin. Vid svartvita annonser.

Dagstidningsannonsering med logga mindre än 42 mm. Dagstidningsannonsering med logga större än A5 samt magasin. Vid svartvita annonser. LOGOTYP I rekryteringsmaterial 2011/2012/2013 skall etikettlogotypen (labeln) användas. Vit logotyp mot röd botten får endast användas när slutformatet är större än A5 (105 mm bredd), dvs när logotypen

Läs mer

Manual för Eda kommuns grafiska profil

Manual för Eda kommuns grafiska profil Manual för Eda kommuns grafiska profil Grafisk manual för Eda kommun (av Smalltown Media 2009-10-29) 2(8) Syfte Denna manuals syfte är att ge en enhetlig grafisk form åt all extern och intern kommunikation

Läs mer

SÅ HÄR SPRIDER VI BILDEN AV HEMSLÖJDEN.

SÅ HÄR SPRIDER VI BILDEN AV HEMSLÖJDEN. INLEDNING STARTSIDA Har du frågor eller funderingar rörande det här dokumentet? Per Björklund Kommunikatör M: 070-890 94 58 T: 08-54 54 94 58 E: per.bjorklund@hemslojden.org SÅ HÄR SPRIDER VI BILDEN AV

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

Årsräkning/Sluträkning Period: 2013-08-22-2013-12-31

Årsräkning/Sluträkning Period: 2013-08-22-2013-12-31 Årsräkning/Sluträkning Period: 2013-08-22-2013-12-31 Överförmyndarenheten Övre gatan 3 54321 Huvudstaden X Huvudman Underårig Namn Telefon Personnummer Erik Eriksson 400101-1234 Gatuadress Postnummer Ort

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

Grafisk profil RIKTLINJER OCH STÖD I VÅRT KOMMUNIKATIONSARBETE. osthammar.se

Grafisk profil RIKTLINJER OCH STÖD I VÅRT KOMMUNIKATIONSARBETE. osthammar.se Grafisk profil RIKTLINJER OCH STÖD I VÅRT KOMMUNIKATIONSARBETE Tillsammans förmedlar vi bilden av Östhammars kommun Vårt varumärke Den bild vi förmedlar av oss själva är betydelsefull idag kanske mer än

Läs mer

Version 1.0 20111209. Grafisk manual

Version 1.0 20111209. Grafisk manual Version 1.0 20111209 Grafisk manual INNEHÅLL 1. Om Trosa kommuns grafiska profil och manual Sid 3 2. Kommunvapnet Sid 4 2.1. Form och ursprung Sid 4 2.2. Användning av vapnet Sid 5 2.3. Vapnets färger

Läs mer

Vår grafiska profil en viktig del i hur vi uppfattas.

Vår grafiska profil en viktig del i hur vi uppfattas. 1 2 Vår grafiska profil en viktig del i hur vi uppfattas. Vår framtoning är egentligen inte bara en grafisk fråga. Det är främst resultatet av det dagliga och konsekventa arbete som vi alla lägger ned

Läs mer

Göteborgsstudier i nordisk språkvetenskap # Lagom lång titel. (Language Summary) av Namn Namnsson

Göteborgsstudier i nordisk språkvetenskap # Lagom lång titel. (Language Summary) av Namn Namnsson Göteborgsstudier i nordisk språkvetenskap # Lagom lång titel (Language Summary) av Namn Namnsson title: Title with suitable length swedish title: Lagom lång titel language: Language (Language summary)

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

[Egen logotyp] Stilmall & presentation av grafisk profil

[Egen logotyp] Stilmall & presentation av grafisk profil [Egen logotyp] Stilmall & presentation av grafisk profil CMYK 0 / 0 / 0 / 20 RGB 209 / 211 / 212 HEX D1D3D4 CMYK 0 / 58 / 100 / 0 RGB 246 / 133 / 31 HEX F6851F Logotypen är nutida; enkel och ren och kommunicerar

Läs mer

Korpen. Grafisk manual. Version 3 2012.08.08. Korpen 08.08.12

Korpen. Grafisk manual. Version 3 2012.08.08. Korpen 08.08.12 Korpen Grafisk manual Version 3 2012.08.08 Innehåll 1 Introduktion 1 Introduktion 1 2. Logotype 3 2.1 Översikt 4 2.2 Färger 5 2.3 Placering 6 2.4 Kontrast 7 2.5 Friyta 7 2.6 Format 8 2.7 Andra Användare

Läs mer

EN SAMMANSTÄLLNING AV Grafiska Riktlinjer FÖR GÖTENE KOMMUN

EN SAMMANSTÄLLNING AV Grafiska Riktlinjer FÖR GÖTENE KOMMUN EN SAMMANSTÄLLNING AV Grafiska Riktlinjer FÖR GÖTENE KOMMUN 2009 Nu blir vi en enhetlig kommun! För att Götene kommun såväl internt som externt skall uppfattas som en enhet och vara lätt att känna igen,

Läs mer

Förslag. Grafisk manual. Förslag

Förslag. Grafisk manual. Förslag Grafisk manual 2012-11-07 Version 1.01 Innehåll Skinnskattebergs kommunvision 5 Varför en grafisk profil? 5 Informationsenhetens roll 5 Presentationstext för Skinnskattebergs kommun 6 Kommunvapnet 7 Kommunens

Läs mer

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

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

Läs mer

Hyperlänkar. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor).

Hyperlänkar. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor). Länkar, ankar och resurser En länk är en hänvisning från ett dokument till en resurs. En resurs kan nästan vara vad som helst. Det mesta på internet är resurser i någon form, som exempelvis HTLM-dokument,

Läs mer

Som man sår får man skörda...

Som man sår får man skörda... Som man sår får man skörda... Grafiska anvisningar för Raps Egen identitet i den stora floran En upp till 1,5 meter hög ört med blågröna blad och gula blommor i toppställda klasar. Brassica napus, om man

Läs mer

Visuell identitet P2. sveriges radio VER 1.3 56

Visuell identitet P2. sveriges radio VER 1.3 56 Visuell identitet P2 sveriges radio VER 1.3 56 9. P2 / Verktygslåda Verktygslådan för P2 lyfter fram guidens klassiska och stämningsfulla karaktär. Verktygslådan består av P2:s logotyp i svart, vitt eller

Läs mer

Concept Design. Today s Lecture. Film Time. User Research Deliverables

Concept Design. Today s Lecture. Film Time. User Research Deliverables 2 Today s Lecture Concept Design Mattias Arvola Ideation using structured design concept divergence Structured detailing of concepts ideas Storyboards at a conceptual level Pugh charts Film Time Exciter

Läs mer

varumärkesplattform arjeplogs kommun árjepluove kommuvnna arjeplogs kommun árjepluove kommuvnna

varumärkesplattform arjeplogs kommun árjepluove kommuvnna arjeplogs kommun árjepluove kommuvnna varumärkesplattform FRAMTAGANDE AV VARUMÄRKESPLATTFORM & GRAFISK PROFIL MEDFINANSIERAS AV SPARBANKEN NORD VIA FRAMTIDSBANKEN OM VARUMÄRKET ARJEPLOG Det här är en varumärkesplattform för Arjeplog. Den ska

Läs mer

Del 2 Grafisk profil

Del 2 Grafisk profil Del 2 Grafisk profil 02.1 Logotypen Skåne Nordost logotyp består av den nya symbolen och texten Skåne Nordost. Logotypen ska stå som avsändare för alla kommunikation, internt såväl som extern. Nordost

Läs mer

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

Labora&on 2 HTML och validering övningar/uppgi:er Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det

Läs mer

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

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

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