Inför prov 1 i webbdesign

Storlek: px
Starta visningen från sidan:

Download "Inför prov 1 i webbdesign"

Transkript

1 Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument <html> <head> <title> sidtitel </title> </head> <body> övriga instruktioner </body> </html> Grundläggande märken, samt hur de används startmärke stoppmärke <h1> text som påverkas </h1> Det ska alltid vara start och stopp för följande märken: <html> </html> detta är en HTML-fil <head> </head> sidhuvud <body> </body> själva sidan finns mellan start och stop för body <h1> </h1> rubrik: nivå 1 <h2> </h2> rubrik: nivå 2 <h3> </h3> rubrik: nivå 3 <p> stycke <em> </em> text som märks <strong> </strong> fet stil <ul> </ul> punktlista <ol> </ol> nummerlista <li> </li> en rad i en lista <table> </table> tabell <tr> </tr> tabellrad <td> </td> datacell i tabell <a> </a> länk <div> </div> avsnitt <span> </span> avsnitt i löpande text... men inte på följande märken: <br> <hr> <img> radbrytning streck infoga bild

2 Attribut för att påverka märken Ett märke kan påverkas genom att man ger det ett attribut. Om flera attribut ska ges, skriv dem inom startmärkets början < och slut >. <body bgcolor= red text= blue link= blue > Attributets värde anges genom att skriva = värde, dvs likhetstecken och sedan värdet inom citationstecken. Några vanliga attribut: Textjustering: <h1 align= left > <h1 align= right > <h1 align= center > Färg: bgcolor= färg color= färg bakgrundsfärg förgrundsfärg Länkar Extern länk: <a href= > Linköping </a> Texten som syns i webbläsaren är den som står mellan <a> och </a>. Den blir blå och understruken. Epost-länk: <a href= > Erik </a> Bokmärke: (ges ett unikt namn med name= namn ) <a name= inledning ><h1>inledning </h1></a> Länk som refererar till ett bokmärke med ett givet namn: <a href= inledning >Inledning </a> Bilder Infoga en bild (ex erik.jpg) som finns i samma mapp som HTML-dokumentet: <img src= erik.jpg alt= Erik > Infoga en bild (ex erik.jpg) som finns i en undermapp [ex mappen bilder]: <img src= bilder/erik.jpg alt= Erik > Infoga en bild (ex erik.jpg) som finns i en sidomapp till mappen som HTML-dokumentet finns i: <img src=../bilder/erik.jpg alt= Erik > Några övriga användbara attribut för <img>-märket: width= #, height= #, hspace= #, vspace= #, align= left, align= right, align= center

3 Tabeller För att skapa en tabell med 4 rutor skriver man på följande sätt: (# = siffra) <table border= # cellspacing= # cellpadding= # width= # > <tr> <td>... </td> <td>... </td> </tr> <tr> <td>... </td> <td>... </td> </tr> </table> Varje rad i tabellen skrivs mellan <tr>... </tr>. I varje rad lägger man in ett antal celler, där innehållet i varje cell skrivs inom märket <td>... </td>. border cellspacing cellpadding anger bredden på linjerna mellan cellerna [border= 0 inga linjer alls] avstånd mellan cellerna avstånd mellan text och kantlinje i cellerna Innehållet för varje cell fyller man i mellan <td> och </td>. Varje cell kan innehålla vad som helst en hel webbsida, en annan tabell, en bild... Attribut till <td>: <td width= # height= # colspan= # rowspan= # align= # valign= # > width height colspan rowspan align valign ger cellen en given bredd [pixlar (dvs ett siffervärde) eller i % av tabellens bredd] ger cellen en given höjd [pixlar] sammanfogar celler horisontellt sammanfogar celler vertikalt justerar innehållet i cellen [right, center, left] justerar innehållet i vertikalled [bottom, middle, top] Tabeller används till: Tabeller samt layout, dvs vi ser till att placera innehållet på webbsidan där vi vill att det ska vara. <table border= 1 cellspacing= 20 cellpadding= 5 > <tr> <td width= 100 colspan= 3 >... </td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </table> Detta ger en tabell med tre rader och tre kolumner, där den översta radens tre celler är sammanslagen till en enda stor cell [rubrik]. Listor En lista skapas på följande vis, där varje rad i listan skrivs mellan start- och stoppmärket <li>... </li>. <ul> ger en punktlista och <ol> ger en nummerlista. <ul> <li>... </li> <li>... </li> </ul>

4 Formatmallar Ni behöver inte veta hur man infogar en formatmall i ett HTML-dokument. Det ni behöver veta är följande: Varför man använder formatmallar. Vad formatmallar kan användas till. Hur man skriver en formatmall. Hur man använder klasser. Hur man definierar ett format för ett märke beroende på i vilket sammanhang det märket finns i dokumentet [se nedan]. Vad de vanligaste definitionerna i formatmallarna gör [du behöver inte veta namnen, bara hur de fungerar] I formatmallsfilen [namn.css] lagras information om hur texten i ett HTML-dokument ska formateras, dvs hur den ska se ut. Man skriver på följande sätt: märkesnamn { formatdefinition 1: värde ; formatdefinition 1: värde ; formatdefinition 1: värde ; } OBS! Glöm ej kolon [:] efter varje formatdefinition och semikolon [;] efter varje rad. h1 { color: red; font-family: Verdana, sans-serif; font-size: 120%; font-style: italic; font-weight: 700;} Denna deklaration ger rubriker som har röd färg, typsnittet Verdana (eller ett standardteckensnitt utan hakar om Verdana inte finns på datorn), fetstil och kursiv text som är 120% större än normal text. Klasser En klass definerar en egenskap som kan ges till ett valfritt märke. I formatmallsfilen skrivs klasser med en punkt först i namnet.rod { color: red; }.bla { color: blue; }.central { text-align: center; } Klasser används på följande vis i HTML-dokumentet <p class= rod > Texten i detta stycke blir röd, men övrig text påverkas inte. <p class= bla > Texten i detta stycke blir blå, men övrig text påverkas inte.

5 <p> Texten i detta stycke påverkas inte. <div class= central >... allt som står mellan startmärket och slutmärket för avsnittet hamnar centrerat i webbläsarfönstret. </div> Formatering beroende på i vilket sammanhang märket finns Man kan deklarera ett format för en märke som bara gäller om det märket finns mellan ett annat märkes start och stopp, exempelvis: <h1> En rubik med ett <em>kursivt</em> ord som ska vara gult </h1> eller <div class= bla > Den här texten blir blå men det <strong>här</strong> ordet blir fetstilt och blått För att åstadkomma detta skriver man så här i sin formatmallsfil h1 em { color: yellow;}.bla em { color: blue; font-weight: 700;} Formatdeklarationer background-color: färg; background-image: url(sökväg och filnamn ); text-indent indrag för text text-align textjustering text-decoration none,underline font-family typsnitt [standard: serif, sans-serif, monospaced, cursive, fantasy] font-style normal, italic, oblique font-weight 100, 200,..., 900 [900 fetast] font-size pixlar, %, small, normal, large, larger, smaller, em text-align left, right, center, justify vertical-align bottom, middle, top, sub, sup margin-# marginaler finns för top, right, bottom, left padding-# avstånd mellan kant och text finns för top, right, bottom, left border-#-width bredd på marginal finns för top, right, bottom, left border-color: top- höger- botten- vänster-färg eller 1 färg för alla sidor border-style none, dotted, dashed, solid, double, groove, ridge width längd, % height längd, % float left, right, none clear none, left, right, both

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

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

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

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

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

Styla och formatera text

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

Läs mer

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

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

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

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

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

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

Läs mer

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

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

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

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

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

Internet & WWW Laboration 2 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 2 CSS del 1. 1 av 8 Laboration 2 CSS del 1 1 av 8 Vad kommer jag att lära mig på laboration 2? Skriva en stilmall: o Skriva extern CSS-mall och länka den till XHTML-dokument o Skriva inbäddad CSS-mall i XHTML-dokument o Skriva

Läs mer

En grundkurs i hemsidor och hur de är uppbyggda

En grundkurs i hemsidor och hur de är uppbyggda En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och

Läs mer

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

Ö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

Ö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

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

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

Läs mer

WEBBUTVECKLING CSS. Formatmallar - CSS

WEBBUTVECKLING CSS. Formatmallar - CSS betyder Cascading Style Sheets, vilket i svensk översättning blir ungefär formatmallar (inte riktigt, men nästan...). Anledningen till att man använder är att det är ett lätt sätt att skilja utseende och

Läs mer

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

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

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

Läs mer

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

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

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

Läs mer

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

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

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

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

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

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

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

Läs mer

Webbstudio Internetworld - Webbproduktion förklarad på svenska - En del av IDG.se. I dessa program redigerar du HTML och så sparar du dina filer

Webbstudio Internetworld - Webbproduktion förklarad på svenska - En del av IDG.se. I dessa program redigerar du HTML och så sparar du dina filer Webbstudio Internetworld - Webbproduktion förklarad på svenska - En del av IDG.se http://internetworld.idg.se/webbstudio/pub/avdelning.asp?id=25 Sida 1 av 2 2006-10-18 HTML Publicerade artiklar» Lektion

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

Lathund för HTML-kodning

Lathund för HTML-kodning Lathund för HTML-kodning Grunderna i dokumentet Starttagg för Html-dokument, berättar för webbläsaren att här börjar det en sida med Html-koder. Hela dokumentet skall finnas inom dessa. Starttagg

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

Innehåll. HTML Editor Sida 2 av 30

Innehåll. HTML Editor Sida 2 av 30 HTML editor Innehåll Länka till webbsida... 4 Extern länk.... 7 Länka till e-post.... 8 PROs bildbank.... 10 Ladda upp ny bild.... 12 Redan uppladdad bild... 16 Bildredigeraren.... 17 Infoga/redigera inbäddad

Läs mer

<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

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

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

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

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning... 10 CSS-klass... 10 Egna anteckningar:...

Läs mer

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

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

- - - W e b d e s i g n s k o l a n - - - B i l d e r

- - - W e b d e s i g n s k o l a n - - - B i l d e r skriv ut» B i l d e r Att använda bilder kan vara ett sätt att lyfta fram ett skrivet budskap eller helt enkelt för att göra webplatsen mer attraktiv och lättnavigerad. Bilder skapar du själv i ett bildbehandlingsprogram

Läs mer

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

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

Läs mer

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

Dupoint i.site 4.0 Mallhandboken

Dupoint i.site 4.0 Mallhandboken Dupoint i.site 4.0 Mallhandboken Dupoint AB Telefon: 08-441 74 80 E-post: info@dupoint.com Internet: www.dupoint.com Innehåll Arbeta med mallar... 1 Skapa en mall 1 Metadata avancerade mallar 2 Referenslista,

Läs mer

Den kompletta HTML- och CSS-guiden. Framsida

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

Läs mer

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

EPI Server 6.0. Lathund till Episerver. Innehåll

EPI Server 6.0. Lathund till Episerver. Innehåll EPI Server 6.0 Lathund till Episerver Innehåll Inloggning... 1 Hitta dina sidor... 1 Skapa, spara och publicera... 3 Obligatoriska fält... 4 Redigera innehåll... 6 Tillgängliga knappar i editorn... 6 Bilder...

Läs mer

En stiligare portal Laboration 3

En stiligare portal Laboration 3 Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt

Läs mer

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

Lathund Bygga mallar. Senselogic AB Version 2.3

Lathund Bygga mallar. Senselogic AB Version 2.3 Lathund Bygga mallar Senselogic AB Version 2.3 Innehållsförteckning 1 Begrepp... 1 1.1 Innehållsyta... 1 1.2 Mallyta... 2 1.3 Layouter... 3 1.3.1 Fliken marginaler... 1.3.2 Fliken Inställningar... 1.3.3

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

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

Lägga till artiklar i Joomla

Lägga till artiklar i Joomla Lägga till artiklar i Joomla från framsidan Logga först in så att du är inloggad. Klicka sedan på Lägg till ny artikel i menyn under hem. Skriv in en rubrik på rubrikraden ej för lång! Skriv sedan artikeln

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

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

Övningar i CSS för anpassning till olika enheter

Övningar i CSS för anpassning till olika enheter Övningar i CSS för anpassning till lika enheter Hittills har vi i föregående labratiner tittat på hur man med CSS utfrmar en presentatin för bildskärm på en vanlig datr. Men det finns fler presentatiner

Läs mer

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

F06 A table form Dagens agenda

F06 A table form Dagens agenda F06 A table form Dagens agenda Länkar Tabeller Formulär Hyperlänkar index.html feed/news.html klickbar text hippo.png about.html Relativ länk till webbsida via klickbar länk: klickbar

Läs mer

1. Uppdateringsmodul (CMS)

1. Uppdateringsmodul (CMS) Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...

Läs mer

Dokumentation av rapportmall

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

Läs mer

Övningar i kursen Webbdesign 100p

Övningar i kursen Webbdesign 100p Övningar i kursen Webbdesign 100p Innehåll ÖVNINGAR I KURSEN WEBBDESIGN 100P... 1 INLEDNING OCH HISTORIA... 7 ORDNA EGET HEMSIDEUTRYMME... 7 1. HEMSIDOR MED HTML... 8 MÄRKEN I VÅR FÖRSTA HEMSIDA... 8 ATTRIBUT,

Läs mer

DIN FÖRSTA HEMSIDA: Det här är min första hemsida.

DIN FÖRSTA HEMSIDA: Det här är min <b>första</b> hemsida. 3 Grunderna Nu är det dags att börja skriva HTML på allvar. I det här kapitlet kommer vi att gå igenom allt du behöver veta för att göra en hemsida med rubriker i olika storlekar och text som är formaterad

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

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

Läs mer

P O R T A L S Y S T E M

P O R T A L S Y S T E M P O R T A L S Y S T E M MODULER OCH TILLÄGGSTJÄNSTER: Publisher o Administrationsmeny o Ny sida o Ändra sida o Nytt/ändra stycke o Min publisher o Publisherns verktyg Kalender < Språkmodulen Korsholm Mustasaari

Läs mer

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR

Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Sophia Prosell DREAM WEAVER SKAPA OCH PUBLICERA EFFEKTIVA WEBBSIDOR Del 4 BILDER OCH TABELLER 0. Arbeta med bilder... 9. Redigera bilder... 96. Klickbara bilder/imagemaps... 0. Tabeller... 04 4. Skapa

Läs mer

Införande av CSS i existerande tabellbaserat HTML-dokument

Infö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 mer

Guide Till Bättre Nyhetsbrev. För dig som jobbar som webbdesigner eller med HTML i allmänhet

Guide Till Bättre Nyhetsbrev. För dig som jobbar som webbdesigner eller med HTML i allmänhet Guide Till Bättre Nyhetsbrev För dig som jobbar som webbdesigner eller med HTML i allmänhet För dig som har, eller ska börja skicka nyhetsbrev Introduktion Skicka HTML brev Många som är nya på området

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

Vägen till en lyckad responsiv webbdesign.

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

Läs mer

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. Adobe GoLive CS

Innehållsförteckning. Adobe GoLive CS Innehållsförteckning 1 Om GoLive CS... 1 Mappar och filstruktur...1 Vad är en webbsida?...1 Vad är speciellt för en webbsida?...2 Vad är en webbplats?...3 Vanliga fallgropar med webbdesign...3 Överföra

Läs mer

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1

Personalsupport. Medicinska fakulteten, Lunds universitet. Textredigeraren. Moodle version 2.7.1 Personalsupport Medicinska fakulteten, Lunds universitet Textredigeraren Moodle version 2.7.1 Lars Rundgren, 2012-2014 Moodle 2.7.1 Textredigeraren Textredigeraren... 3 Nya ikoner i textredigeraren...

Läs mer

Manual för lokalredaktörer villaagarna.se

Manual för lokalredaktörer villaagarna.se Manual för lokalredaktörer villaagarna.se Version 2 Villaägarnas Riksförbund Sollentuna 2011 Innehåll Redigera befintlig sida... 3 Skriva text eller klistra in kopierad text... 5 Rubriker i brödtext...

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

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

VERKTYGSFÄLTET I ARTIKELEDITORN

VERKTYGSFÄLTET I ARTIKELEDITORN Joomla Guide 2.5.11 VERKTYGSFÄLTET JCE EDITORN Sida 1 av 8 VERKTYGSFÄLTET I ARTIKELEDITORN En kort genomgång/förklaring till de vanligaste symboler och användningsområdena för verktygsfältet i Joomla Uppdateringsmodulen

Läs mer

Utveckla den moderna släktboken vidare

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

LATHUND FRONTPAGE 2000

LATHUND FRONTPAGE 2000 LATHUND FRONTPAGE 2000 RXK Läromedel AB, Riddarplatsen 36 Plan 7 177 30 Järfälla Tel: 08-580 886 00, Fax: 08-580 259 40 www.rxk.se, e-post: info@rxk.se Detta material är författat av RXK Läromedel AB.

Läs mer

Frågor och svar Gränssnittsdesign/Webbutveckling

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

Läs mer

WWAAC Layout Editor. 1. Standard för knapp (kolla att fliken Standard för knapp är vald)

WWAAC Layout Editor. 1. Standard för knapp (kolla att fliken Standard för knapp är vald) WWAAC Layout Editor Layout Editor För att ändra en befintlig layout eller göra en ny kan du antingen öppna Layout Designer for the Browser via Start Program wwaac eller nå den via knappen Inst i browsern

Läs mer

Användarmanual för Content tool version 7.5

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

Läs mer

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

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

Lab 5: ASP.NET 2.0 Site Navigation

Lab 5: ASP.NET 2.0 Site Navigation Lab 5: ASP.NET 2.0 Site Navigation Enkel navigering är en viktig del av en modern webbapplikation. Eftersom en stor del av utvecklingstiden för en site används för att bygga meyer, trädstrukturer och andra

Läs mer

Manual för lokalredaktörer villaagarna.se

Manual för lokalredaktörer villaagarna.se Manual för lokalredaktörer villaagarna.se Version 1 Villaägarnas Riksförbund Sollentuna 2011 Postadress Besöksdress Telefon Fax E-post Hemsida Box 7118, 192 07 Sollentuna Johan Berndes väg 8-10 010-750

Läs mer

Kurs 6:1 Att publicera på webben

Kurs 6:1 Att publicera på webben Kurs 6:1 Att publicera på webben S TUDE NTDATOR UTBILDNINGE N MALMÖ HöGSKOLA Beijerskajen 8, K3, källaren, sal Apollo (A01:303), 205 06 Malmö www.bit.mah.se/undervisning/sdm Att publicera på webben, del

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

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

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

Instruktioner till övningen som börjar på nästa sida Instruktioner till övningen som börjar på nästa sida Övningen innehåller det grundläggande som du måste kunna för att klara Word. Varje stycke ska vara formaterat så som det står i stycket. Under varje

Läs mer

Introduktion till HTML - Grunder

Introduktion till HTML - Grunder Introduktion till HTML - Grunder Kursmål Att ge kunskaper och färdigheter om hur man utformar en Webbsida. Kännedom om multimediala programvaror. Att använda text och bild (även ljud) för att förstärka

Läs mer

ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande

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

Läs mer

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

Att använda laget.se

Att använda laget.se 2012 Att använda laget.se för ungdomsledare i MSSK Dokumentet är framtaget för att hjälpa till att förenkla användningen av lagens webbsidor. Har du förslag på ändringar eller ser felaktigheter kan du

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

Frontpage 2002/XP (2)

Frontpage 2002/XP (2) Frontpage 2002/XP Frontpage 2002 eller Frontpage XP som det också kallas är ett hemsideprogram där du inte behöver kunna koda som annars är fallet om man gör en hemsida. Att snabbt, enkelt och snyggt kunna

Läs mer

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