Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod

Storlek: px
Starta visningen från sidan:

Download "Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod"

Transkript

1 html och css

2 Kommunikation Dator med webbläsare Förfrågan: Webserver Returnerar HTML-kod

3 Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa :

4 Verktyg Notepad /anteckningar Notepad++ CoffeeCup Free (gratis) Dreamweaver (finns i labbsalarna) ors/tp/free-windows-editors.htm Web Developer (tillägg till Firefox) Firebug (tillägg till Firefox) (webbat-verktyg)

5 HTML Hyper Text Markup Language Taggbaserat språk: <html>, <h1>, <p>, Element - med eller utan innehåll Text, bild, ljud, film, Öppen standard W3C ; Alla moderna webbläsare följer W3C-standarden

6 html-element Principerna för att taggar upp innehållet <tagname>innehållet placeras här...</tagname> Oftast i par (en start-tag och en slut-tag)

7 Princip för html-dokument <html> <head> </head> <body> Syns inte i webbläsaren. Tolkas av webbläsaren och sökmotorer. Det som syns i webbläsarens fönster. </body> </html>

8 En avskalad sida <html> <head> <title>matsidan</title> </head> <body> <h1>välommen till matsidan</h1> <!-- Här kommer en text webbplatse. --> <p>denna sida är tänkt för dig som bor i norrland och är intresserad av mat. <p> <p>en utbildning i Umeå</p> <a href= > ICA</a> </body> </html>

9 Doctype ( HTML 4.01 => XHTML 1.0 => ) HTML 5 Lägg in följande för HTML5: <!DOCTYPE html> lang= sv <meta charset= utf-8 > Andra språk-koder: lang= en

10 Metadata Specar teckenuppsättning, sidbeskrivning, nyckelord, författare, osv Används av webläsare, sökmotorer och andra webbtjänster Placera i <head> </head> Exempel på metadata: <meta charset="utf-8"> <meta name="description" content= En sida om mat"> <meta name="keywords" content= recept, grönsaker,frukt"> <meta name="author" content= Karin Fahlquist">

11 Viewport viewport är användarens synliga område av websidan. (olika på dator och smartphone) <meta name="viewport" content="width=device-width, initial-scale=1.0"> Ger webbläsaren instruktioner om hur sidan ska scalas och dess dimentioner. width=device-width sätter bredden på sidan så den följer skärmbreddenwidth of the page to follow the screen-width of the device (which will vary depending on the device). initial-scale=1.0 Sätter zoom-nivån då sidan laddas första gången av webbläsaren.

12 <!DOCTYPE html > <html lang= sv > <head> En avskalad sida <title>matsidan</title> <meta charset= utf-8 > <meta name="viewport" content="width=device-width, initialscale=1.0"> </head> <body> <h1>välommen till matsidan</h1> <!-- Här kommer en text webbplatse. --> <p>denna sida är tänkt för dig som bor i norrland och är intresserad av mat. <p> <p>en utbildning i Umeå</p> <a href= > ICA</a> </body> </html>

13 HTML taggar Rubrik: <h1> </h1> (stor rubrik) <h6> </h6> (liten rubrik) Stycke/brödtext: <p> </p> Radbrytning: <br> Nytt tema (linje) <hr> Osynliga kommentarer : <!-- Här kommer text om utbildning.--> Citationstecken runt attributvärden <html lang= sv > Taggar i kategoriordning

14 Block & inline element Block element: börjar på en ny rad och tar upp hela bredden som finns <div> <h1> - <h6> <p> <form> Inline elements: Börjar INTE på ny rad, tar bara upp så mycket bredd som behövs <span> <a> <img>

15 Några fler taggar Länkar Bilder Listor Tabeller Semantiska taggar

16 En länk kan länka till: Länkar o Ett annat dokument o (Ett ankare i samma dokument) o (Ett ankare i ett annat dokument) Se till att ha ordning på html-sidorna och bilderna <a href="http://www.umu.se">umeå universitet</a> URL= Uniform Resource Locator <a href= mailto: > En maillänk till Karin </a>

17 Absoluta & relativa länkar medieproducent Länk från sid index till sida2: sidor/sida2.html bilder sidor index.html bild1.jpg bild2.jpg bild3.jpg Länk från sida1 till - sida 2: sida2.html - bild 1:../bilder/bild1.jpg sida1.html sida2.html sida3.html

18 Bilder JPEG/JPG, GIF, PNG Bildstorlek, filstorlek Länka till bilder Bakgrundsbilder Namn med små bokstäver & utan å,ä,ö. En tom html tagg, bara start-tagg Infoga en bild i body (två sätt): <img src="medieproducentbild.jpg" alt="två medieproducenter" width="500" height="350"> <img src="medieproducentbild.jpg" alt="två medieproducenter" style= width:500px; height:350px >

19 Bilder med klickbara ytor <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="venus"> </map> Bilder som länkar <a href="default.asp"> <img src="smiley.gif" alt="html tutorial" style="width:42px;height:42px;border:0;"> </a>

20 Listor Oordnande listor - används ofta i menyer <ul> <li>kurser</li> <li>lärare</li> <li>utrustning</li> </ul> Ordnade listor Definitionslistor <dl> <dt>coffee</dt> <dd>- black hot drink</dd> <dt>milk</dt> <dd>- white cold drink</dd> </dl>

21 Tabeller <table> <tr> <th>antal</th> <th>utrustning</th> </tr> <tr> <td>3</td> <td>digitalkameror</td> </tr> <tr> <td>7</td> <td>videokameror</td> </tr> <tr> <td>4</td> <td>ljudutrustning</td> </tr> </table> tr = tabell rad th = tabellrubrik td = tabellcell För att få synlig ram Style: border: 1px solid black;

22 Semantiska taggar (Nytt i html5) För att definiera olika delar i html-koden o <article> o <aside> o <details> o <figcaption> o <figure> o <footer> o <header> o <main> o <mark> o <nav> o <section> o <summary> o <time>

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

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

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

Prototyper används för att

Prototyper används för att Skapa en prototyp Prototyper används för att Demonstrera ett koncept i ett tidigt stadium Testa detaljer i ett senare stadium Som en specifikation för den färdiga produkten Lo-fi Prototyp: pappers prototyp

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

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

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

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

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

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

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

Integrerad i egen cup-portal Sid 1

Integrerad i egen cup-portal Sid 1 Integrerad i egen cup-portal Sid 1 Skillnader mellan fristående och integrerad cup-portal En liten viktig synpunkt innan ni går vidare: Det går snabbt och enkelt att växla mellan den fristående och integrerade

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

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

<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

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

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

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

Ö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

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 med Internet och HTML

Laboration med Internet och HTML Laboration med Internet och HTML Denna laboration går ut på att du skall kunna skapa enkla hemsidor i HTML. Vi kommer inte att ta upp edstorer för hemsidor som t.ex. DreamWeaver eller FrontPage. Dessa

Läs mer

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

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

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

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

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

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

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

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

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

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

Outline. 1 Reiteration. 2 Att konstruera en enkel Web Site. 3 Hypertextlänkar. 4 Hypertextlänkar till andra resurser. 5 Additional topics

Outline. 1 Reiteration. 2 Att konstruera en enkel Web Site. 3 Hypertextlänkar. 4 Hypertextlänkar till andra resurser. 5 Additional topics Outline 1 Reiteration Lecture 3: Internet/WWW 2 Att konstruera en enkel Web Site Anders Ardö 3 Hypertextlänkar EIT Electrical and Information Technology, Lund University September 17, 2013 4 Hypertextlänkar

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

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

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

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

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion Webbteknik En kort introduktion Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender 1 Historisk återblick 89 CERN Tim Berners Lee Ett plattformsoberoende sätt att sprida

Läs mer

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML ITK:P2 F1 FTP, HTTP, HTML, XML och XHTML DSV Peter Mozelius 1 Hemsidor med HTML Hur många av er har provat på att bygga en egen hemsida med HTML eller XHTML? För hand eller med hjälpverktyg? Har ni lagt

Läs mer

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt 850906-8550 Del 1 och 2 HTML/CSS Vi har fått i uppgift att göra en hemsida av eget val! Jag har bestämt mig för att skapa en hemsida åt en påhittad restaurang här i Umeå som inriktar sig på exklusiv nyttig mat och

Läs mer

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

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

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

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

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

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

Läs mer

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

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

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

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

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

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

WEBBUTVECKLING 1 LÄROBOK ERRATA UPPLAGA 1

WEBBUTVECKLING 1 LÄROBOK ERRATA UPPLAGA 1 Errata för J200 4500 Webbutveckling 1 av Lars Gunther Exklusive stavnings och grammatikfel. Sidan 33: Hela avsnitt 1.10.3 är omskrivet Här samlas artiklar och dokumentation, samt ett diskussionsforum.

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

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

Riktiga Vykort Partner webb Teknisk beskrivning

Riktiga Vykort Partner webb Teknisk beskrivning Riktiga Vykort Partner webb Teknisk beskrivning I denna tekniska beskrivning finns instruktioner om hur du skall konfigurerar din webb för att kunna skicka bilder som Riktiga Vykort. Har du frågor kontaktar

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

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

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

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

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Webbpublicering Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Föreläsningsöversikt Föreläsning 1 Vad är webbpublicering? Lite historia - Internet och webben Statiska webbplatser Grundkoncept: webbläsare,

Läs mer

Mobile Cross Development

Mobile Cross Development Mobile Cross Development Johan Holm och Jörgen Bengtsson Varje år bjuder vi in våra kunder till tre inspirationsdagar där vi lyfter fram de mest intressanta IT-frågorna med fokus på strategi, teknik eller

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

Webbplats analys cofra.it

Webbplats analys cofra.it Webbplats analys cofra.it Genereras på Januari 16 2017 07:17 AM Ställningen är 37/100 SEO Innehåll Titel COFRA - Born To Work - Längd : 22 Perfekt, din titel innehåller mellan 10 och 70 tecken. Beskrivning

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

Hyperlänkar. I HTML skapar man en hyperlänk med taggen , 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

Designhäftet. När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se

Designhäftet. När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se Designhäftet När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se Materialet är framtaget i samband med utbildningstunrén 2011. Praktiska designtips En lista

Läs mer

WEBDESIGN A - DTR 1210

WEBDESIGN A - DTR 1210 Lektion 6: Tabeller Vi ska lägga till en tabell i hemsidan. Först ska vi titta lite på hur man gör tabeller. Vi börjar med enklast tänkbara tabell. En tabell med bara en ruta: Nu ska vi gå igenom steg

Läs mer

Integreret i egen cup-portal Sid 1

Integreret i egen cup-portal Sid 1 Integreret i egen cup-portal Sid 1 Forskellen mellem fristående og integreret cup-portal Et lille vigtig synspunkt inden du går videre: Det går hurtigt og enkelt at skifte mellem den fristående og integrerede

Läs mer

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, 1971. Internet började med ARPANET

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, 1971. Internet började med ARPANET Olika slags datornätverk Förberedelse inför laboration 4. Historik Protokoll, / Adressering, namnservrar WWW, HTML Föreläsning 5 Internet LAN Local Area Network student.lth.se (ganska stort LAN) MAN Metropolitan

Läs mer

HTML & webbteknik. Introduktion till HTML. Formatering. Struktur HTML. Uppdelning. Hur man skapar hemsidor. Öppen standard W3C. Plattformsoberoende

HTML & webbteknik. Introduktion till HTML. Formatering. Struktur HTML. Uppdelning. Hur man skapar hemsidor. Öppen standard W3C. Plattformsoberoende Introduktion till HTML HTML & webbteknik Hur man skapar hemsidor Öppen standard W3C World Wide Web Consortium Plattformsoberoende Om standarden följs. XHTML Utveckling av HTML, kommer kanske i framtiden

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

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

Idag. Webben och HTML. Webbens funk3on. URL och websidor. Moment F om webben och HTML startar nu

Idag. Webben och HTML. Webbens funk3on. URL och websidor. Moment F om webben och HTML startar nu Idag Webben och HTML Ins3tu3onen för system- och rymdteknik Luleå tekniska universitet Moment F om webben och HTML startar nu Dead-line: torsdag 22 sep (dvs om en vecka). UppgiQ: Skriv en enkel websida

Läs mer

Handbok HTML. Vi utvecklar kontinuerligt nya titlar, besök www.rxk.se för aktuell statuslista. Gör din beställning direkt i vår webbutik.

Handbok HTML. Vi utvecklar kontinuerligt nya titlar, besök www.rxk.se för aktuell statuslista. Gör din beställning direkt i vår webbutik. Handbok HTML I denna Handbok lär du dig att skapa egna hemsidor från grunden. Handboken innehåller information om hur du hanterar texter, bilder, tabeller, ramar och listor. Du får även läsa om grunderna

Läs mer

Lektion 1 - HTML och CSS

Lektion 1 - HTML och CSS Lektion 1 - HTML och CSS Introduktion HTML (Hyper Text Markup Language) är ett märkspråk, som består av en uppsättning märktaggar. Varje HTML-dokument beskrivs med HTML-taggar, och varje tag är olika element

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

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

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

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

WEBDESIGN A - DTR 1210

WEBDESIGN A - DTR 1210 Lektion 9: Tips tricks och diverse Bakgrundsbilder Bakgrundsfärg och textfärg är några sätt att ge sin hemsida ett visst utseende. Ett annat sätt är att använda bakgrundsbilder. Man behöver en bild: HTML-koden

Läs mer

Webbplats analys ipchecker.us

Webbplats analys ipchecker.us Webbplats analys ipchecker.us Genereras på Juni 22 2016 19:19 PM Ställningen är 39/100 SEO Innehåll Titel IPChecker.us - Display Your IP - Whois IP - IP Lookup - What Is My IP? Längd : 70 Perfekt, din

Läs mer

TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p

TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p UMEÅ UNIVERSITET TFE SE/KF TENTAMEN 2004-09-29 TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p Tid: 2004-09-29 kl. 14.00-18.00 (-20.00 förlängd skrivtid) Plats: Östra paviljongen sal 8 Hjälpmedel: Presentation:

Läs mer

Gör en släktbok med Disgen

Gör en släktbok med Disgen Gör en släktbok med Disgen Bengt Kjöllerström: En modern släktbok med Mer-knapp Mer-knappen ger möjlighet att koppla moderna släktboken till egna sidor som kan ge mer information om personerna i släktboken.

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

12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration

12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap

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

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

Produktion för tryckta medier och webb

Produktion för tryckta medier och webb Ulrik Söderström ulrik.soderstrom@tfe.umu.se 8 Dec 2008 Produktion för tryckta medier och webb XHTML 1 HTML Hypertext text som via hyperlänkar är förbunden med andra texter Uppmärkning sker med taggar

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

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

Konfigurera Wordpress som Hemsida istället för blogg

Konfigurera Wordpress som Hemsida istället för blogg Konfigurera Wordpress som Hemsida istället för blogg - exempel från hemsidorna: www.vestus.se och www.thingsbym.se Copyrightinformation: Detta dokument är fritt att använda, även kommersiellt, så länge

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

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

Webbplats analys test.iphylosophy.ru

Webbplats analys test.iphylosophy.ru Webbplats analys test.iphylosophy.ru Genereras på Januari 13 2017 18:03 PM Ställningen är 73/100 SEO Innehåll Titel Философия Идиллии - создание сайтов в Ставрополе. Веб-студия Längd : 60 Perfekt, din

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

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

Innehållsförteckning. Dreamweaver 3.0

Innehållsförteckning. Dreamweaver 3.0 Innehållsförteckning 1 Välkommen till Dreamweaver... 1 Vad är Dreamweaver?... 11 Öppna Dreamweaver... 11 Hur du arbetar med Dreamweaver... 11 Arbetsområdet i Dreamweaver... 12 Vanliga komponenter i Dreamweaver...

Läs mer

WEBBAPPLIKATIONER MODUL 1 - HTML

WEBBAPPLIKATIONER MODUL 1 - HTML WEBBAPPLIKATIONER MODUL 1 - HTML Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se HTML HYPERTEXT MARKUP LANGUAGE HTML är ett Märkspråk/Taggspråk (Sidbeskrivningsspråk). HTML används

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle

Läs mer

Innehållsförteckning. 1 Välkommen till Dreamweaver Skapa en lokal webbplats...23

Innehållsförteckning. 1 Välkommen till Dreamweaver Skapa en lokal webbplats...23 Innehållsförteckning 1 Välkommen till Dreamweaver... 11 Vad är Dreamweaver? 11 Öppna Dreamweaver 11 Hur du arbetar med Dreamweaver 11 Arbetsområdet i Dreamweaver 12 Vanliga komponenter i Dreamweaver 13

Läs mer