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

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

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

Transkript

1 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 = element med mening. En semantisk elementet beskriver tydligt dess betydelse för både webbläsaren och utvecklaren. Exempel på icke-semantiska element: <div> och <span> - Berättar ingenting om dess innehåll. Exempel på semantiska element: <form>, <table> och <img> - tydligt definierar dess innehåll.

2 Browser Support Internet Explorer, Firefox, Opera Google, Chrome och Safari HTML5 semantiska element stöds i alla moderna webbläsare. Dessutom kan du "lära" äldre webbläsare hur man hanterar "okända element". Läs om det i HTML5 Browser Support. Nya semantiska element i HTML5 Många webbsidor innehåller HTML-kod som: <div id = "nav"> <div class = "header"> <div id = "footer"> för att indikera navigering, sidhuvud och sidfot.

3 HTML5 erbjuder nya semantiska element för att definiera olika delar av en webbsida: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>

4 HTML5 <section> Element HTML5 Semantic Sektions taggens element <section> </section>, definierar ett avsnitt i ett dokument. Enligt W3C: s HTML5 dokumentation: "Ett avsnitt är en gruppering av innehåll, vanligtvis med en rubrik. Webbplatsens startsida kan delas upp i sektioner för: * introduktion * innehåll HTML5 <article> Element * kontaktinformation. En Artikel element <article>, anger oberoende samt fristående innehåll. Det är vettigt att en artikel <article> </article> är ensam och inte i en grupp med andra taggar, för att det ska vara möjligt att läsa den oberoende från resten av webbplatsen. Som exempel används <article> elementet i form av; Forum inlägg, Blogg inlägg och nyhets artiklar.

5 Blandande (nästlade) semantiska element I HTML5-standarden definierar <article> elementet som ett komplett, fristående block av tillhörande element. Elementet <section> definieras som ett block av relaterade element. Kan vi använda de definitioner för att avgöra uppsättningen av elementen? Nej, det kan vi inte! På Internet hittar du HTML-sidor med artikel element innehållande <article> och <article> element innehållande <section> element. Du hittar också sidor med sektions element innehållande <section> element och artikel element innehållande <article> element. Tidning: I sportartiklar används <article> och i sportdelen <section>, om det finns en teknisk avdelning används <section> i varje artikel (<article>).

6 HTML5 <header> Element HTML5 Semantic <header> elementet anger en rubrik för ett dokument eller avsnitt. <header> elementet bör användas som en behållare för introduktions innehåll. Du kan ha flera <header> element i ett dokument. I följande exempel definieras en rubrik för en artikel: <article> <header> <h1>what Does WWF Do?</h1> <p>wwf's mission:</p> </header> <p>wwf's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>

7 HTML5 <footer> Element <footer> element anger en sidfot för ett dokument eller avsnitt. <footer> element ska innehålla information om dess innehåller element. En sidfot innehåller normalt författaren av information handlingen, upphovsrätt, länkar till användarvillkoren, kontaktinformation mm Du kan ha flera <footer> element i ett dokument. HTML5 <nav> Element Den <nav> elementet definierar en uppsättning navigeringslänkar. Den <nav> elementet är avsedd för stora block av navigeringslänkar. Dock bör inte alla länkar i ett dokument vara inuti en <nav> elementet!

8 HTML5 <aside> Element HTML5 Semantic Den <aside> elementet definierar en del innehåll bortsett från det innehåll som är placerad i (som en sidebar). Innehållet bör relateras till det omgivande innehållet. <aside> <h4>epcot Center</h4> <p>the Epcot Center is a theme park in Disney World, Florida.</p> </aside> HTML5 <figure> and <figcaption> Elements I böcker och tidningar, är det vanligt att ha bildtexter med bilder. Syftet med en bildtext är att lägga till en visuell förklaring till en bild. Med HTML5, kan bilder och bildtexter grupperas tillsammans i <Bild> element. <Img> elementet definierar bilden, <figcaption> definierar elementet och bildtexten.

9 Exempel: <figure> <img class= ImageWidth src="pic_mountain.jpg" alt="the Pulpit Rock > <figcaption>fig1. - The Pulpit Rock, Norway.</figcaption> </figure> Varför Semantisk HTML5 Elements? Med HTML4, utvecklare använde sin egen favorit attributnamn till stil och side element som; header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav m m Detta gjorde det omöjligt för sökmotorer att identifiera rätt sidans innehåll. Med HTML5 element som: <header> <footer> <nav> <section> <article>, kommer detta att bli lättare. Enligt W3C, en semantisk webb: Tillåter att data kan delas och återanvändas mellan applikationer, företag och samhällen."

10 Beskrivning av de nya taggarna i HTML5 <article> Definierar en artikel <aside> Definierar innehåll bortsett från innehållet på sidan <details> Definierar ytterligare detaljer som användaren kan visa eller dölja <figcaption> Definierar en bildtext till en <figure> elementet <figure> Anger fristående innehåll, som illustrationer, diagram, foton, kodexempel. <footer> Definierar en sidfot för ett dokument eller avsnitt <header> Anger en rubrik för ett dokument eller avsnitt <main> Anger det huvudsakliga innehållet i ett dokument <mark> Definierar märkt eller markerad text <nav> Definierar navigeringslänkar <section> Definierar en sektion i ett dokument <summary> Definierar en synlig rubrik för en <details> elementet <time> Definierar ett datum och tid

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

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

<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

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

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

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

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet

Läs mer

Laboration 2: Xhtml och CSS.

Laboration 2: Xhtml och CSS. Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och

Läs mer

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

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS. Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny

Läs mer

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

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

Ö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

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

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

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

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

Användarhandledning. edwise Webbläsarinställningar 2012-10-24

Användarhandledning. edwise Webbläsarinställningar 2012-10-24 Användarhandledning edwise Webbläsarinställningar 2012-10-24 Sida 2/11 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompatibilitetsläge... 3 1.1.1 Inställningar för kompatibilitetsvyn...

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

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

Bildstorlekar i olika sidlayouter.

Bildstorlekar i olika sidlayouter. 2014-04-01 Sida 1 av 9 Bildstorlekar i olika sidlayouter. Innehåll Inledning... 2 Startsida... 3 Vanlig sida för förening... 4 Formulärsida... 5 Block i Karusell... 6 Block i Högerkolumn... 7 Nyhetsarkivet...

Läs mer

Webbsida i Wordpress. Existens på webben och bli sökbar

Webbsida i Wordpress. Existens på webben och bli sökbar Webbsida i Wordpress Existens på webben och bli sökbar Om Susann Rickan Susann Rickan bor i Nora Byggt webbsidor i 16 år Eget företag sedan 2009. Hjälper företag med webb och foto. Tycker om att bygga

Läs mer

Användarhandledning. edwise Webbläsarinställningar 2013-10-24

Användarhandledning. edwise Webbläsarinställningar 2013-10-24 Användarhandledning edwise Webbläsarinställningar 2013-10-24 Sida 2/22 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompabilitetsläge... 3 1.1.1 Inställningar för kompabilitetsvyn...

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

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

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

Webzoo AB har idag ett tiotal anställda. Webzoo AB ägs till 100 % av anställda inom företaget och har en sund ekonomisk grund som bas.

Webzoo AB har idag ett tiotal anställda. Webzoo AB ägs till 100 % av anställda inom företaget och har en sund ekonomisk grund som bas. Backoffice Manual Inledning Webzoo AB Webzoo är en webbyrå som varit med sedan internet började ta fart under mitten av 90-talet. Vi hjälper till från idé till lansering och med alla behov som det kan

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

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

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

Läs mer

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

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma

Läs mer

Användarhandledning. edwise Webbläsarinställningar 2013-01-11

Användarhandledning. edwise Webbläsarinställningar 2013-01-11 Användarhandledning edwise Webbläsarinställningar 2013-01-11 Sida 2/14 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompatibilitetsläge... 3 1.1.1 Inställningar för kompatibilitetsvyn...

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

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

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

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

LISAM. Linköpings Universitet. Logga in. Du loggar in på Använd ditt LiU-id, användarnamn och lösenord.

LISAM. Linköpings Universitet. Logga in. Du loggar in på  Använd ditt LiU-id, användarnamn och lösenord. LISAM Logga in Du loggar in på http://lisam.liu.se Använd ditt LiU-id, användarnamn och lösenord. Din personliga sida (Min Sida) skapas första gången du loggar in så det kan ta en liten stund innan den

Läs mer

Länkar och navigering

Länkar och navigering Föreläsning i webbdesign Länkar och navigering Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Hypertext Hyper [grekiska] över Hypertext Går över textens sekvengella flöde Referens

Läs mer

Arbetsmaterial HTML pass 1 - Grunder

Arbetsmaterial HTML pass 1 - Grunder Arbetsmaterial HTML pass 1 - Grunder Det vi idag kallar Internet växte fram ur ett amerikanskt nätverk kallat ARPAnet som skapades i slutet av 60 talet. Ett topphemligt verktyg för att koppla ihop stordatorer

Läs mer

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

Ö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

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

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0 Webbtillgänglighet Webbtillgänglighet Att göra webbinnehåll så att de är tillgängliga för alla oavsett vilka funktionsnedsättningar man har Att göra webbinnehåll tillgängligt oavsett vilken in- och utmatningsutrustning

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

Användarstöd för lärare. Anna-Karin Larsson 2013-10-02

Användarstöd för lärare. Anna-Karin Larsson 2013-10-02 itslearning (LMS) Användarstöd för lärare Anna-Karin Larsson 2013-10-02 Innehåll Skapa ny kurs... 1 Kopiera kurs eller mallkurs... 2 Kursens startsida - Kursinfopanelen... 3 Lägga till innehåll... 4 Redigera

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

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

F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet F02 HTML Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML

Läs mer

Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014

Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014 Fejjan för alla 1.0 Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014 Fejjan för alla gör det lättare för personer med olika typer av funktionsnedsättningar

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

Gör en modern släktbok för CD eller webben

Gör en modern släktbok för CD eller webben Gör en modern släktbok för CD eller webben 21 Den traditionella släktboken består av ett antal tabeller och i bästa fall en grafisk stam- eller antavla, och man kan med ett register eller hänvisningar

Läs mer

Grafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida.

Grafisk Webbprofil. Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida. 1 Grafisk Webbprofil http://users.du.se/~v10evawa/inlamningsuppgift_3/valkommen.html Skrivregler och grafiska riktlinjer för utformning och publicering av Sjökrogen bojens hemsida. Författare: Eva Wallin

Läs 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

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

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

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

Frontermanual för Rektorsprogrammet

Frontermanual för Rektorsprogrammet Frontermanual för Rektorsprogrammet Denna manual beskriver övergripande vad Fronter är och hur det kan användas. Skapad: 2010-04-27 Version: 1.0 1 Innehållsförteckning Vad är Fronter?... 3 Vilka behörigheter

Läs mer

Materialspecifikation för alla Portalens mässajter

Materialspecifikation för alla Portalens mässajter Materialspecifikation för alla Portalens mässajter BADRUMSPORTALEN BYGGPORTALEN ENERGIPORTALEN GOLVPORTALEN KÖKSPORTALEN POOLPORTALEN SOVRUMSPORTALEN TRÄDGÅRDSPORTALEN VILLAPORTALEN Annonsplatser på STARTSIDAN

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

Bilder. Bilder och bildformat

Bilder. Bilder och bildformat och bildformat Det första du måste göra är att skaffa bilder att lägga in i ett HTMLdokument. Ta en bild med din mobil/ webbkamera eller rita bilden själv.du kan ta gratisbilder från Google, gå in på bilder

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

Sveriges Kommuner och Landsting

Sveriges Kommuner och Landsting Sida 1 av 16 Sveriges Kommuner och Landsting Användarguide för skl.se Sida 2 av 16 Sidhuvud och sidfot Verktygsmenyn Menyer i sidfot Undermeny Startsidan Temarutans bakgrundsbild Temarutans text Temarutans

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

Tillgänglighet som en naturlig del i våra projekt. Sid 1 Mars 2016 Tillgänglighet

Tillgänglighet som en naturlig del i våra projekt. Sid 1 Mars 2016 Tillgänglighet Tillgänglighet som en naturlig del i våra projekt Sid 1 Mars 2016 Tillgänglighet Sid 2 Mars 2016 Tillgänglighet Responsiv webb Projektet Responsiv webb 28 nov 2015 Responsiva produkten v 1.0 Maj 2016 Responsiva

Läs mer

VÄLKOMMEN TILL LINKÖPINGS UNIVERSITET OCH LISAM

VÄLKOMMEN TILL LINKÖPINGS UNIVERSITET OCH LISAM Linköpings Universitet 2014.08.13 VÄLKOMMEN TILL LINKÖPINGS UNIVERSITET OCH LISAM LiU-ID Som ny student behöver du först skapa ett temporärt LiU-ID (studentkonto). På www.liu.se/antagen finns anvisningar

Läs mer

Skeleton plane & Responsiv webbdesign med CSS

Skeleton plane & Responsiv webbdesign med CSS 1ME321 Webbteknik 1 Lek0on 6 Skeleton plane & Responsiv webbdesign med CSS Rune Körnefors Medieteknik 1 2016 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen U2 deadline Exemplet Gretas Blommor

Läs 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

Visma Proceedo. Att logga in - Manual. Version Version /

Visma Proceedo. Att logga in - Manual. Version Version / Visma Proceedo Att logga in - Manual Version 1.4.1 Version 1.4.1 / 170510 1 Innehåll 1) INLOGGNING VIA MEDARBETARWEBBEN... 4 2) INTERNET EXPLORER... 7 2.1 Java... 7 2.2 Popup- fönster... 9 2.3 Browser,

Läs mer

Användarstöd för lärare. Anna-Karin Larsson 2013-06-24

Användarstöd för lärare. Anna-Karin Larsson 2013-06-24 itslearning (LMS) Användarstöd för lärare Anna-Karin Larsson 2013-06-24 Innehåll Skapa ny kurs... 1 Kopiera kurs eller mallkurs... 2 Kursens startsida - Kursinfopanelen... 3 Lägga till innehåll... 4 Redigera

Läs mer

[Plats för ev. illustration] Projektrapport inom Datateknik, Webbanvändbarhet, 7,5 poäng. Webbplats. Bergsåkers Pensionärers Biljardklubb

[Plats för ev. illustration] Projektrapport inom Datateknik, Webbanvändbarhet, 7,5 poäng. Webbplats. Bergsåkers Pensionärers Biljardklubb MITTUNIVERSITETET Institutionen för informationsteknologi och medier (ITM) Lärare: Mikael Hasselmalm, Mattias Dahlgren Författarens e-postadress: mawe0507@student.miun.se Utbildningsprogram: Webbutveckling,

Läs mer

Visma Proceedo. Att logga in - Manual. Version 1.4. Version 1.4 / 151016 1

Visma Proceedo. Att logga in - Manual. Version 1.4. Version 1.4 / 151016 1 Visma Proceedo Att logga in - Manual Version 1.4 Version 1.4 / 151016 1 Innehåll 1) INLOGGNING VIA MEDARBETARWEBBEN... 4 2) INTERNET EXPLORER... 7 2.1 Java... 7 2.2 Popup- fönster... 9 2.3 Browser, 32-64-bitars

Läs mer

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

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

Läs mer

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

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

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

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

HUR MAN SKAPAR EN SÖKMOTORVÄNLIG LANDNINGSSIDA.

HUR MAN SKAPAR EN SÖKMOTORVÄNLIG LANDNINGSSIDA. HUR MAN SKAPAR EN SÖKMOTORVÄNLIG LANDNINGSSIDA. Innehåll Introduktion... 2 Title... 2 Huvudrubrik... 2 Underrubriker... 3 Alt-attributet... 3 Fetstil och kursivering... 3 Brödtexten... 4 Meta Description...

Läs mer

Rensa cache-minnet hos din webbläsare

Rensa cache-minnet hos din webbläsare Rensa din dators cache-minne Helst ett par tre gånger i veckan. Annars är risken stor att informationen du får är inaktuell eller att du missar ny och väsentlig information. På de följande fyra sidorna

Läs mer

Version: 1.0.1 Datum: 2012-05-23. DynaMaster 5 Golf Övergripande manual

Version: 1.0.1 Datum: 2012-05-23. DynaMaster 5 Golf Övergripande manual Version: 1.0.1 Datum: 2012-05-23 DynaMaster 5 Golf Övergripande manual Innehållsförteckning 1 Inledning 3 1.1 Systemkrav 3 2 Logga in 4 3 Översikt 5 4 Verktygsfält och funktioner 6 4.1 Översikt gränssnitt

Läs mer

Artiklar via UB:s sö ktja nst

Artiklar via UB:s sö ktja nst 1 Artiklar via UB:s sö ktja nst UBs startsida har fått ett nytt utseende. I centrum finns nu UBs söktjänst. Istället för tre sökrutor möts du nu som användare av en sökruta där det är meningen att du kan

Läs mer

Uppdaterad: 2014-03-18. Lathund. Nyhetsbrev

Uppdaterad: 2014-03-18. Lathund. Nyhetsbrev Uppdaterad: 2014-03-18 Lathund Nyhetsbrev 1 1 Innehållsförteckning Inledning 3 Nyhetsbrev 4 Nyhetsbrevsanmälan 4 Skapa nyhetsbrevsanmälan 4-6 Skapa layout för nyhetsbrev 7-10 Skapa nyhetsinnehåll 10 Lägg

Läs mer

Dokumentation. Joomla - Administrationsguide 1. Logga in i administrations-gränssnittet 2. Ändra globala inställningar 2.

Dokumentation. Joomla - Administrationsguide 1. Logga in i administrations-gränssnittet 2. Ändra globala inställningar 2. Joomla - Administrationsguide Joomla - Administrationsguide 1 Logga in i administrations-gränssnittet 2 Ändra globala inställningar 2 Ändra titel 3 Artiklar, kategorier och sektioner 4 Skapa sektioner

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

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

Dokumentation för användning av administrationspanelen på Xtractor.se

Dokumentation för användning av administrationspanelen på Xtractor.se Dokumentation för användning av administrationspanelen på Xtractor.se Kontrollpanelen når man på: http://xtractor.se/admin Xtractors webbplats är uppbyggt på en skräddarsydd variant av publiceringssystemet

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

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

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

Manual för utskrift av pris och produktskyltar

Manual för utskrift av pris och produktskyltar Manual för utskrift av pris och produktskyltar Med Skyltdirekt.nu skapar du på ett användarvänligt sätt pris och produktskyltar. Alla i butiken kan skapa prisskyltar. Ingen datavana eller installation

Läs mer

1. Hur öppnar jag Polisens blanketter / formulär, trycksaker och annat som är i PDF-format?

1. Hur öppnar jag Polisens blanketter / formulär, trycksaker och annat som är i PDF-format? PDF-tips Vill du veta mer eller har problem med att ladda ner eller att öppna PDF-filer på polisen.se? Här får du några tips. 1. Hur öppnar jag Polisens blanketter / formulär, trycksaker och annat som

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

ATT GÖRA WEBBSIDOR. Frivillig labb

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

Läs mer

Denna guide beskriver hur en nyhetsfunktion sätts upp med nyheter från DN. Två delmoment krävs för denna funktionalitet:

Denna guide beskriver hur en nyhetsfunktion sätts upp med nyheter från DN. Två delmoment krävs för denna funktionalitet: Lathund RSS Det går att hämta nyheter från externa källor med hjälp av RSS. RSS står för Rich Site Summary och är ett standardformat för att överföra nyhetsrubriker på webben. SiteVision kan hämta data

Läs mer

Skyltdirekt 08-550 029 79 www2.skyltdirekt.nu support@skyltdirekt.nu

Skyltdirekt 08-550 029 79 www2.skyltdirekt.nu support@skyltdirekt.nu Med Skyltdirekt.nu skapar du på ett användarvänligt sätt pris och produktskyltar. Alla i butiken kan skapa prisskyltar. Ingen datavana eller installation krävs. Skyltdirekt 08-550 029 79 www2.skyltdirekt.nu

Läs mer

Uppdaterad: 2014-02-24. Lathund. Strukturträdet

Uppdaterad: 2014-02-24. Lathund. Strukturträdet Uppdaterad: 2014-02-24 Lathund Strukturträdet 1 Innehållsförteckning Inledning 3 Hemsida 4 Redigerarläge 5 Vanliga fel 5 Strukturträdet 6 Redigera innehåll på sida 6 Lägg till undersidor 7 Navigera mellan

Läs mer

Hja lp till Mina sidor

Hja lp till Mina sidor Hja lp till Mina sidor Vanliga Frågor Varför godkänner inte Mina sidor mitt personnummer trots att jag har prövat flera gånger och är säker på att jag skrivit rätt? Du behöver använda ett 12 siffrigt personnummer

Läs mer

Styrelsebloggens bruksanvisning

Styrelsebloggens bruksanvisning Styrelsebloggens bruksanvisning sidan 1 av 11 Styrelsebloggens bruksanvisning 1. Inledning Skattkammarvägens samfällighetsförening i Lindsdal, Kalmar består av 85 friliggande hus fördelat på gatorna: Skattkammarvägen

Läs mer

1. Polopoly och webbpublicering på SU

1. Polopoly och webbpublicering på SU 1. Polopoly och webbpublicering på SU Den här guiden är en introduktion till webbpubliceringssystemet Polopoly 9.16 för dig som ska arbeta som webbredaktör vid Stockholms universitet. Här går vi igenom

Läs mer

Manual till APA. En instruktionsmanual för användare av APA Advanced Publication Application

Manual till APA. En instruktionsmanual för användare av APA Advanced Publication Application Manual till APA En instruktionsmanual för användare av APA Advanced Publication Application Versionshistoria 2005-10-13 början Anders Nilsson 2007-05-12 slutversion Adam Boman Vid frågor om APA eller denna

Läs mer

Hemsida. Lathund för medlemsföreningar. Funktioner för medlemsföreningar på hemsidan. Syfte med medlemsföreningens sidor

Hemsida. Lathund för medlemsföreningar. Funktioner för medlemsföreningar på hemsidan. Syfte med medlemsföreningens sidor Hemsida Lathund för medlemsföreningar 2015 10 13 Funktioner för medlemsföreningar på hemsidan Varje medlemsförening har en egen sektion på scuf.se Styrelsen kan redigera sin medlemsförenings sidor, skriva

Läs mer

Analys Riksdagspartiernas tillgänglighet på webben

Analys Riksdagspartiernas tillgänglighet på webben I detta dokument presenteras en sammanställning av en tillgänglighetsanalys på de sju riksdagspartiernas webbplatser. För att samla in datat till analysen har Meridiums tjänst Validerat.se (www.validerat.se)

Läs mer

Joomla CMS Del 2 av 2

Joomla CMS Del 2 av 2 JOOMLA 3 CMS GRUNDKURS DEL 2 AV 2 Innehåll Extern Struktur Menyer och Sidor Användare och Åtkomstnivåer Skapa en sida som kräver inloggning Moduler och Positioner Sökmotor och undermenyer Copyright Mahmud

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

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