CSS- Cascading Stylesheets
|
|
- Bo Jonasson
- för 4 år sedan
- Visningar:
Transkript
1 CSS- Cascading Stylesheets 2D1525 Programmering för interaktiva medier Cascading Stylesheets Ett språk för att definiera hur XML-dokument ska rendreras på web, papper, TV, ljud etc. Rekommendation från W3C Är i sig inte XML-baserad, men opererar på XMLstrukturer Björn Hedin, NADA/KTH Björn Hedin, NADA/KTH CSS - Historiskt perspektiv Exempel html är byggt för att strukturera textdokument med textlänkar, oavsett presentationsmedium. Den kommersiella framgången för www drev på för att kunna göra mer estetiskt tilltalande dokument. Logiska (t.ex. <h3>) används för att få en viss grafisk effekt, istället för att ange ett logiskt innehåll. Netscape & Microsoft startade tag-kriget där de lade till nya tags (<blink>,<font>) för att uppnå visuella resultat. Lösningen: Gör ett helt nytt språk för layout: CSS Förr Filen a.html <font face= Helvetica > Text visas med helvetica </font> Nu Filen b.css p { font-family: Helvetica, sans-serif; Filen b.html <?xml-stylesheet type= text/css href= b.css?> Text visas med helvetica Björn Hedin, NADA/KTH Björn Hedin, NADA/KTH
2 Internt eller externt CSS Ett CSS kan antingen läggas i själva xml/html-dokumentet eller som en extern fil. Ett internt CSS läggs till som en CDATA-sektion. Interna CSS har fördelen att de endast kräver en http-överföring. Nackdelen är att man behöver skriva samma CSS-kod i flera dokument -> svårare att göra förändringar. Associering XML-dokument ->CSS För att associera ett CSS till ett XML-dokument lägger man in en process-instruktion i XML-dokumentet. Processintruktion i en XML-fil <?xml-stylesheet type= text/css href= b.css charset= ISO title= Mitt Stylesheet media= screen?> type: MIME-typen text/css href: URI till css-filen charset: Teckenuppsättning title: Titel media: För vilket medium stylesheetet ska användas. Ett XML-dokument kan ha flera stylesheets associerade med sig, men väljer vilket det ska använda beroende på outputmedium. Media som finns är: screen -tty tv - projection handheld - print braille - aural All Björn Hedin, NADA/KTH Björn Hedin, NADA/KTH Grundprincipen: Mönster -> Beteende p { font-family: Helvetica, sans-serif; Egenskap Selector: Alla p- Grundprincipen är att hitta olika mönster med selectors i XMLdokumentet, och till detta sätta värdet på en egenskap, property. Mönster är exempelvis tagnamn. Egenskaper kan vara fontstorlek. Egenskapsvärde Björn Hedin, NADA/KTH Det finns en mängd olika selektorer med vilka man kan upptäcka olika typer av strukturer i XML-dokument. Exempelvis kan man finna ättlingar, barn, direkta barn, syskon och attribut. Olika selektorer Matchar alla * { p a { Matchar alla a- som är ättlingar till p Björn Hedin, NADA/KTH
3 Olika selektorer Matchning på attribut <a></a> <strong> <a>hej</a> </strong> Matchar Matchar inte p > a { p + a { Matchar a- som är omedelbara barn till p-. Matchar alla a- som följer direkt efter ett p- (syskon) Det går att matcha på attributs värde, om attributet har ett värde över huvud taget, delsträngar av attributvärden och ID-värden a- med href= a.html a[href= a.html ] { a- som har ett href-attribut a[href] { Alla som har ett href-attribut a[href= a.html ] { a- vars href innehåller delsträngen html a[href~= html ] { Björn Hedin, NADA/KTH Björn Hedin, NADA/KTH Pseudo-klasser och pseudo- Pseudo-klasser och pseudo matchar på olika typer av metainformation i XML-dokumentet. De separeras från /attribut med ett kolon. Första barnen till p- p:first-child { Första bokstaven i banan- banan:first-letter { Första raden i banan- banan:first-child { Före (efter) ett banan- banan:before {content: En banan! Björn Hedin, NADA/KTH Properties: Höjd/längd/storlek Det finns flera properties för att ange höjd/längd/storlek. border-width font-size line-height margin-left, margin-top, margin-right, margin-bottom left, top height, width Det går att använda de flesta enheter som används i typografiska sammanhang. Absoluta, t.ex. cm, in, pt Relativat.ex. em, ex, px Exempel banan {line-height: 2.2em tomat {font-size:14pt; line-height:3ex Obs! Två properties till samma selektor, separerat med semikolon Björn Hedin, NADA/KTH
4 Properties:Fonter Properties:Texter För fonthantering finns ett antal properties. font-family: t.ex Helvetica, sans-serif font-style: t.ex. italic, slanted font-size: absoluta värden som 12pt eller relativa värden som x-small font-variant: small-caps för kapitäler font-weight: bold, bolder, lighter eller på en skala från font-stretch:wider, ultraexpanded, semi-condensed etc. m.fl. Text-properties hanterar sådant som indrag, justering och enkla transformer. text-indent: applicerbar endast på med block-display. Text-align: left, right, center, justify Text-decoration: underline, overline, linethrough Text-transform: capitalize, uppercase, lowercase White-space: pre för att bevara radbrydningar och whitespace Björn Hedin, NADA/KTH Björn Hedin, NADA/KTH Properties:Färger Räknare De tre viktigaste properties för färger som finns är Color (observera: amerikansk stavning) Background-color Border-color Fördefinierade färger Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow Eller som hexadecimala färgrepresentationer p {color: #FFFFCC Eller P {color:rgb(100%,100%,70% Det finns också möjligheter att använda variabler som räknare, och därefter använda räknarens värde. P:before { content: counter(banan). ; counter-increment: banan Björn Hedin, NADA/KTH Björn Hedin, NADA/KTH
5 Browsersupport Historiskt sett har stöd i browsers varit mycket bristfälligt. Detta har gjort att många undvikit stylesheets. Idag är stödet bättre. Bäst i Opera (!), därefter Netscape 6 (jag har inte kollat stödet i IE6 än). Begränsningar och möjligheter I CSS1 stöds endast html-taggar I CSS2 stöds alla XML-dokument vilket är mycket bra då innehåll blir fullständigt skiljt från presentation. I CSS3 kommer stöd finnas för t.ex. kolumner, paginering, kraftfullare selektorer och bättre stöd för icke-europeiska teckenuppsättningar Björn Hedin, NADA/KTH Björn Hedin, NADA/KTH Begränsningar och möjligheter Ett stort problem är att det inte går att ändra ordningen på, utan deras innehåll visas (eller visas inte) sekventiellt. Detta kan dock hanteras med XSLT. XSL-FO är ett mycket exaktare layoutspråk med vilket man kan göra mycket exakt layout. XSLT och XSL-FO är båda XML-baserade. Framtiden I XHTML är layout-tags förbjudna, istället ska CSS användas. Några tänkbara scenarios för framtidens webproduktion. Enkla, statiska sidor görs i XHTML + CSS Dokument där man har en mer innehållsrik xml-struktur i botten (t.ex. recept, pjäser etc) använder den XML-strukturen + CSS Datastrukturer som kräver omordning av eller som ska publiceras i flera kanaler (som web och wap) använder först XSLT-transformer för att strukturera innehållet, därefter CSS för media som stöds av CSS. Slutligen sidor som kräver bättre layout än vad XHTML+CSS kan erbjuda använder XSL-FO för att transformera och göra layout Björn Hedin, NADA/KTH Björn Hedin, NADA/KTH
Web (html+xhtml), CSS. Dagens föreläsning. Web - grundprinciper. Syfte Ge er grunderna för att skapa och publicera websidor.
Web (html+xhtml), CSS 2D1553 Mediaproduktion http://www.nada.kth.se/kurser/kth/2d1553/ 2003-11-04 Björn Hedin, NADA/KTH 2003 1 Dagens föreläsning Syfte Ge er grunderna för att skapa och publicera websidor.
Läs mer12/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 merF07 Stilmallar Dagens agenda
F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar
Läs merFö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<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim
Kursledare: Mahmud Al Hakim Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet
Läs merORDLISTA 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 merCascading Style Sheets (CSS) An Introduction. Nayeb Maleki
Cascading Style Sheets (CSS) An Introduction Nayeb Maleki CSS CSS utvecklades under mitten av 90-talet för att kunna separera stilformatering och formateringsinformation från innehåll i HTML sidor. Fungerar
Läs merAtt 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 merInternet 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 merLektion 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 mer21/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 merFö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 merInfö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 merCSS-ö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 merVad är XLink. XLink/XPointer/XSLT-FO. Namespace. Simple Links
Vad är XLink XLink/XPointer/XSLT-FO XMLs motsvarighet till HTMLs -länkar fast med mycket större funktionalitet. Simple Links motsvarar ungefär vanliga länkar Extended links kan länka till grupper av
Läs merLektion 2 Del 1 Kapitel 6
Lektion 2 Del 1 Kapitel 6 Inlärningsmål Att kunna kontrollera och styra webbsidors utseende med hjälp av CSS mallar Att med hjälp av CSS mallar kunna ge en hel website ett gemensamt utseende Att med hjälp
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%; }
/*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 merIGÅR. Internet, www, TCP/IP, IP-adress, DNS, URL. HTTP Request. HTTP Response (HTML & status code)
CSS Presentation IGÅR Internet, www, TCP/IP, IP-adress, DNS, URL client HTTP Request server HTTP Response (HTML & status code) HTML Innehåll och struktur via semantiska märkningar Block, inline element
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:
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 merCSS. TNMK30 - Elektronisk publicering
CSS TNMK30 - Elektronisk publicering Dagens föreläsning CSS Layout med CSS Vad är CSS? Cascading Style Sheets (CSS), ett språk som beskriver hur HTML element ska se ut. Utseende Layout Presentation (HTML
Läs merStyla med CSS3. Översikt. Lektion 1: Styla text med CSS3
Styla med CSS3 Översikt Styla text med CSS3. Styla med Block element. Pseudo-Classes och Pseudo-Elements. Förhöja grafiska effekter med CSS3. Lektion 1: Styla text med CSS3 Fonter och storlek. @font-face.
Läs merVad är XSLT XSLT extensible Stylesheet Language Transformations
Vad är XSLT XSLT extensible Stylesheet Language Transformations 2D1525 Programmering för interaktiva medier http://www.nada.kth.se/kurser/kth/2d1525/ Ett transformationsspråk som transformerar ett XMLdokument
Läs merTDDD52 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 merHTML 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 merLektion 3 HTML, CSS och JavaScript
Lektion 3 HTML, CSS och JavaScript I den här lektionen behandlas HTML, CSS och JavaScript (JS). Det förutsätts att lektion 1 och 2 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML
Läs merInternet 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Övnings hemtentamen med förslag till lösning, webbprogrammering
Övnings hemtentamen med förslag till lösning, webbprogrammering Se detta som ett förslag efter som uppgifterna ofta går att lösa få flera sätt. Uppgift 1 CSS 4 poäng Alla css regler skall placeras i en
Läs merEDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript
EDA095 HTML Per Andersson Lund University http://cs.lth.se/pierre_nugues/ April 26, 2017 Innehåll: HTML, CSS, DOM, JavaScript Per Andersson EDA095 HTML April 26, 2017 1 / 23 Webben Webben byggs upp av
Läs merHTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)
HTML och CSS Eric Elfving Institutionen för Datavetenskap (IDA) Upplägg Introduktion Grundläggande HTML Ändra utseende med CSS 2 Introduktion HyperText Markup Language används för att strukturera text
Läs merWEBBUTVECKLING CSS. Formatmallar - CSS
betyder Cascading Style Sheets, vilket i svensk översättning blir ungefär formatmallar (inte riktigt, men nästan...). Anledningen till att man använder är att det är ett lätt sätt att skilja utseende och
Läs merRepetition. 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 merRepetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Föreläsning 2 Internet Hypertext Server och klient HTTP HTML Internet Många sammankopplade nät Gemensamma adresser T ex 10.10.0.1 Gemensamma protokoll Protokoll = regler och algoritmer för kommunikation
Läs merEn 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 merLaboration 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<sid nr="1" av="2" /> Stackenföreläsning: XML & XSLT: Intro. XML och XSLT
Intro Stackenföreläsning: XML & XSLT: Intro XML och XSLT Rasmus Kaj, Stacken http://www.stacken.kth.se/~kaj/ Intro Korrekt XML? Alternativ till XSL? XSLT Funktioner Exempel
Läs merFö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 merXhtml 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 merWebbstandarder för fler än en plattform
Beteckning: Institutionen för matematik, natur- och datavetenskap Webbstandarder för fler än en plattform Mikael Norling, Tomas Wigren Juni 2008 Examensarbete, 15 poäng, B Datavetenskap Internetteknologi
Läs merInformationsmodellering och e-infrastrukturer
Informationsmodellering och e-infrastrukturer Semiotik Sign = Tecken Semiotik = Teckenlära Tecken är representationer Tecken är intentionella Tecken förmedlar information Figure 3.1: Levels of semiotics
Läs merVad är XML XML. Exempel - SMIL. Exempel - XHTML. extensible Markup Language
XML Vad är XML extensible Markup Language 2D1525 Programmering för interaktiva medier http://www.nada.kth.se/kurser/kth/2d1525/ Ett meta-märkspråk med vilket man kan bygga märkspråk som xhtml, wml, smil
Läs merFrå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 merKommunikation. 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 merEn 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 merLabora&on 5 CSS och layout samt fråga E övningar/uppgi>er
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Dokument i övningarna I denna labora&on finns inga filer ar
Läs merXSLT. Extensible Stylesheet Language Transformations
XSLT Extensible Stylesheet Language Transformations 1 Vad är XSLT Ett transformationsspråk som transformerar ett XML-dokument till ett annat XML- eller textdokument. Kan t.ex. användas för att transformera
Läs merCSS-WORKSHOP. Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek
CSS-WORKSHOP Nätverksträff för it-bibliotekarier, 7 mars 2013 Sara Britta Jadelius Trollhättans Stadsbibliotek sarabritta.jadelius@trollhattan.se 0520-49 76 65 HTML strukturerar innehåll det här är
Läs merITK: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 merKravspecifika.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 merHyperlä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 merAtt berätta med webb + En introduktion till HTML
Att berätta med webb + En introduktion till HTML Vad är en bra historia? Uppbyggnad En serie handlingar/händelser som tillsammans bildar en enhet Budskap Produkt Bra, användarvänlig, lättförståelig, etc.
Läs merProgrammeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen
MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering
Läs merFrågor och svar Gränssnittsdesign/Webbutveckling
Frågor och svar Gränssnittsdesign/Webbutveckling Bilder och optimering 1. Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96
Läs merBareko Pantone Matching System Color Chart (PMS färger)
Bareko Pantone Matching System Color Chart (PMS färger) Använd denna sida som en hjälp för att välja färg. Tänk på att ditt grafikkort och skärm inte visar exakt den rätta nyansen, för att vara säker bör
Läs merWebbteknik. 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 merF10 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 merXML. Extensible Markup Language
XML Extensible Markup Language XML - 1969 Generalized Markup Language (GML) 1979-85 Standard Generalized Markup Language (SGML) 1990 HyperText Markup Language (HTML) 1996-98 Extensible Markup Language
Läs merSkapa en webbplats med WordPress
Skapa en webbplats med WordPress Daniel Karlsson 2016-01- 26 Licens Creative Commons Attribution- NonCommercial 2.0 Du får fritt sprida, redigera och kopiera guiden, men ej för ekonomisk vinning och endast
Läs merF02 En första sida. Dagens agenda
F02 En första sida Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML Indentering Block/inline-element Struktur Se demo #2
Läs mer07/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 merRiksteatern Grafisk manual
Riksteatern Grafisk manual 2017-08-24 Om manualen Riksteaterns utseende ska vara tydligt och igenkännbart i visuell kommunikation - både internt och externt. Det är en förutsättning för att skapa ett starkt
Läs merTabeller. 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 merF12 Mobila enheter Dagens agenda
F12 Mobila enheter Dagens agenda Tekniker för mobil surfning Möjligheter och fallgropar Statistik Opera Sidor för smartphones Testning Responsiv webbdesign... Olika tekniker Det finns/fanns många olika
Läs merUtveckla den moderna släktboken vidare
22-1 Utveckla den moderna släktboken vidare 22 I detta kapitel utvecklas den moderna släktboken ytterligare, för att få med mer information om de olika personerna genom en mer-knapp med variabel text.
Läs merInnehåll Introduktion... 3 InteractiveScene.config... 3 Scener <scenes>... 3 Typsnitt <fonts>... 3 Övergångar <transitions>...
Innehåll Introduktion... 3 InteractiveScene.config... 3 Scener ... 3 Typsnitt ... 3 Övergångar ... 4 Mall för slide ... 5 , ...
Läs merTillä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Ö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 merManual 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 merJavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?
Innehåll JavaScript En introduktion till skriptspråket JavaScript och till DOM Scripting Introduktion till JavaScript och DOM JavaScript Syntax DOM och DOM Scripting Händelsehantering och CSS Historia
Läs merAlternativ för halsband med eget tryck
Alternativ för halsband med eget tryck Foder/lining Band/webbing Passpoal/piping Halsbandsmodeller: - Halvstryp - Halvstryp med spänne - Fast med spänne - Jaktmodell - Agilitymodell Pris: från 269 SEK
Läs merKompletterande exempel till XSLT
UMEÅ UNIVERSITET Institutionen för informatik Andreas Lund alund@informatik.umu.se Kompletterande exempel till XSLT Inledning Denna text är avsett som komplement till det bokkapitel i kompendiet som behandlar
Läs merEn introduktion till stilmallar (CSS) Cascading Style Sheets (CSS)? 2002 Ulf Tornert 1
En introduktion till Stilmallar eller Cascading Style Sheets (CSS) 1 Stilmallar en introduktion... 4 Vad är stilmallar?...4 Vad behöver du för att lära dig stilmallar?...4 Hur stilmallar integreras i en
Läs merXML. Dagens föreläsning. Vad är XML extencible Markup Language. Exempel - XHTML
Dagens föreläsning XML D151 Databasteknik och datorkomunikation http://www.csc.kth.se/dd1051/ Syfte Få en introduktion till XML, vilket är det vanligaste dataformatet för att strukturera data idag. Mål
Läs merDagens föreläsning. Vad är XML. Exempel - XHTML. extencible Markup Language
Dagens föreläsning 2D1522 Datorteknik och -kommunikation 2D2051 Databasteknik och datorkomunikation http://www.nada.kth.se/kurser/kth/2d1522/ http://www.nada.kth.se/kurser/kth/2d2051/ Syfte Få en introduktion
Läs merOn-line produktion TDDC61
On-line produktion TDDC61 Hej! Jakob Bandelin jakob.bandelin@liu.se Kognitionsvetenskap, interaktionsdesign, webbdesign On-line produktion (GDK), Elektronisk publicering (MT), Webbprogrammering (SVP),
Läs merWebbdesign 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 merT a b e l l e r - t a b l e s
skriv ut» T a b e l l e r - t a b l e s Exempel på tabeller» Grundkoden för tabellen» Tabell- och kolumnbredd» Sammanfoga celler» Bakgrundssbild och bakgrundsfärg» Kantlinjebredd och färg» Avstånd mellan
Läs merAnvändbarhet för webben MDI, Webb och speciella behov 1
Användbarhet för webben MDI, Webb och speciella behov 1 Hur används webben? Webbsidor läses inte, de skummas! Således, designa för att de ska skommas scanability Vi gör inga optimala val, vi söker något
Läs merStyla och formatera text
Nivå 2 Styla och formatera text All Code Clubs must be registered. By registering your club we can measure our impact, and we can continue to provide free resources that help children learn to code. You
Läs merWebbdesign 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 merInförande av CSS i existerande tabellbaserat HTML-dokument
Institutionen för kommunikation och information Examensarbete i datalogi 10p C-nivå Vårterminen 2006 Införande av CSS i existerande tabellbaserat HTML-dokument Henrik Larsson HS-IKI-EA-06-604 Examensrapport
Läs merWEBBUTVECKLING 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 merHantera informationspaket i system för bevarande
Kompetensutveckling har erbjudits deltagare inom projektet Elektroniskt bevarande i form av en kurs i XML. Kursen har genomförts av Riksarkivet och haft en praktisk inriktning. Ett 10-tal personer deltog
Läs merSidan 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<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 merI den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.
Lokal Gästbok I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok. Gästboken ska fungera som så att man har ett fält där man kan
Läs merLabora&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 merCarl-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ÅMOT 2:4 NR TAKVINKEL GRADER TAK FASAD % FÖN- NOCK-
ÅMOT 2:4 NR TAKVINKEL GRADER TAK FASAD % FÖN- - STER HÖJD 1 Sadel, plåt, färg 2 Trä, färger 3, 4 7 2,60 2 27 Sadel, takpapp, färg 2 Trä, färger 1, 21 7 2,90 3 38 Sadel, plåt, färg 2 Trä, färger 1,14 5
Läs merInternet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8
Laboration 2 CSS del 1 1 av 8 Vad kommer jag att lära mig på laboration 2? Skriva en stilmall: o Skriva extern CSS-mall och länka den till XHTML-dokument o Skriva inbäddad CSS-mall i XHTML-dokument o Skriva
Läs merINLEDNING. Inledning Logotyp Färger Teckensnitt Tillämpningar
GRAFISK MANUAL INLEDNING Den här manualen beskriver hur vi arbetar med vår grafiska profil. I den hittar du allt från användandet av logotypen och hanterandet av färger och typografi, till mallar för utformning
Läs merStrukturering med XML och DTD
Föreläsning i webbdesign Strukturering med XML och DTD Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se PresentaCon SCl Layout OrganisaCon/struktur InformaConsobjekt Länkar Innehåll/data
Läs merWebbutveckling 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 merBilder. 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 merJavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI
JavaScript JavaScript Ramverk (Bibliotek) jquery + jquery UI Allmänt ramverk/bibliotek Importera JavaScript-kod Plattformsoberoende JavaScript Prototype + script.aculo.us jquery + jquery UI Återanvända
Läs merWEBBUTVECKLING 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 merF02 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 merInstruktioner för Articulate Storyline 2
Instruktioner för Articulate Storyline 2 Instruktion för kursproduktion till Netcompetence Talent Portal NETCOMPETENCE 2016-12-19 Innehåll Inledning... 2 Om Articulate... 2 Om Studio 13... 2 Om Storyline
Läs merTentamen ITK:P2. Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng.
Tentamen ITK:P2 lördag 2007-04-14 Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng. 40 poäng ger betyget G, 55 ger VG Peter Mozelius DSV 1.) Ditt
Läs merWebbteknik 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