Bilder. Bilder och bildformat

Storlek: px
Starta visningen från sidan:

Download "Bilder. Bilder och bildformat"

Transkript

1 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 och sök, högerklicka och spar som eller save as, ge filen ett namn exempelvis hund.jpg. En bild har tre olika bildformat som används mest: jpg, png och gif. GIF (Graphics Interchange Format) har formatet.gif GIF-formatet är komprimerad på ett sätt som gör att originalbilden kan återställas exakt när bilden visas, förutsatt att den inte har många färger. När GIF utvecklades var det ovanligt med datorer som kunde visa mer än 256 färger. Därför begränsade man antalet färger till 256, det går att göra GIFbilder med 2 eller 16 färger och då blir filen ännu mindre.

2 och bildformat PNG (Portable Network Graphics) har formatet.png Formatet är utvecklat som en modernare efterföljare till GIF, och PNG-bilder kan ha miljontals färger. Detta format har stöd för avancerade funktioner som gammakorringering, alpha-genomskinlighet, färgkorrigering och förbättrad kompression. Gamma- och färgkorrigering är speciellt intressant, eftersom de gör att webbläsare på andra operativssystem kan visa bilder med korrekta färger. Det finns också en inofficiell variant av PNG med stöd för animeringar, APNG. Av de stora webbläsarna är det bara Firefox och Opera som kan visa animationer utan tilläggsprogram. Det är W3C, World Wide Web Consortium som förvaltar PNG-standarden.

3 och bildformat JPEG (Join Photographic Experts Group) har formatet.jpg JPEG är utvecklat för att komprimera fotografier. Fotografier skannas ofta in med miljontals färger, och det är då mycket svårt att komprimera bilden i någon större utsträckning med konventionella metoder. JPEG använder i ställdet så kallad förstörande kompression, där man helt enkelt kastar delar av bildinformationen. Man försöker ta bort information på ett sådant sätt att det mänskliga ögat inte upptäcker skillnaden, och det fungerar mycket bra vid låga och medelhöga kompressionsgrader. Vid kompression med JPEG väljer man själv hur mycket bilden ska komprimeras, och därmed hur stor kvalitetsförlust man kan acceptera. Man kan oftast komprimera bildfilen till en 1/20 del av deras normala storlek.

4 och bildformat I nedanstående exempel ligger en PNG-fil med en bild på ett paket i samma katalog som exempelfilen. <html> <head> <title>en bild </title> </head> <body> <h1>äntligen dags för bilder!</h1> <p> Man kan lägga in en bild <img src= paket.png alt= Bild på ett paket /> var som helst i texten. </p> </body> </html> Attributet alt, ger endast texten om man håller musen över bilden eller om bilden inte visas. Webbsidan blir mer lättanvänd, speciellt vid tröga uppkopplingar.

5 och bildformat heigth och width Dessa två attribut används för att ange hur hög (height) och vid (width) bilden är, mätt i bildpunkter pixels. Du kan använda dessa två attribut för att göra bilden större- eller mindre på webbsidan. ismap och usemap Dessa attribut används när man vill ha aktiva områden i en bild. Aktiva områden används när man vill hoppa till olika sidor beroende på vilken del av bilden användaren klickar i.

6 som länkar Ett bra sätt att få en webbsida att se bättre ut är att länkar i form av knappar, alltså bilder som går att klicka på. Att åstadkomma det är inte svårt allt du behöver göra är att lägga en bild i ett ankarare. Om du till exempel har en bild med namnet hem.png som föreställer en knapp med texten Till startsidan kan du lägga in den så här: <a href= index.html > <img src= hem.png alt= Till startsidan /> </a>

7 och bildformat PNG jämfört med JPEG JPEG är oftast det bästa valet för kompression av stora filer med fotografiska bilder. PNG är oftast det bästa valet för ritningar, skärmbilder och serier. Alla linjer förblir skarpa, och kompressionen blir bra. Om bilden ska ha genomskinliga delar är PNG ett måste JPG har inte stöd för genomskinlighet. <img /> Det finns inget behov av en sluttagg, eftersom <img /> bara gör att en bild visas på taggens plats i texten. I rena HTML-dokument behöver du inte skriva ut snedstrecket i sista taggen, men det gör ingen skada att ta med det. I XHTML, däremot är snedstrecket obligatoriskt. Attributet SRC (source) betyder källa och används för at berätta vilken bild som ska läggas in. Värdet av attributet ska vara en URL. <img src= minbild.png />

8 <figure> och <figcaption> Man vill ofta skriva texter som beskriver bilder, och i HTML5 tillkom två nya taggar som ger möjlighet att koppla texter till både bilder och annat innehåll. I vetenskapliga dokument använder man ofta ordet figur för att hänvisa till en bild eller en illustration, så <figure> är lätt att komma ihåg. <figcaption> är en sammandragning av figure caption, alltså bildtext eller figurtext på engelska. Här är ett exempel som visar hur man använder taggar: <p> Man kan ha flera bilder i samma figur: <figure> <img src= hem.png alt= Ett stiliserat hus /> <img src= paket.png alt= Ett paket /> <figcaption> Några exempelbilder </figcaption> <p> Här får bilderna en gemensam bildtext. </p>

9 <object> och <embed> Taggen <object> är mycket generell den används helt enkelt för att lägga in objekt, vilket som helst i webbdokument. Ett objekt kan vara exempelvis en bild, en video, ett appletprogram eller ett annat dokument. <object> är alltså en mycket allängiltig tagg som man kan ha i många situationer, bland annat i stället för <img />. Denna tagg har många olika attribut, <object> måste ha en </object> sluttagg, vilket inte <img /> har. I stället för attributet SRC använder taggen <object data= fil1.png > data som attribut för filer. Taggen <embed> är lite udda. Gammal tagg som togs bort i tidigare, men är nu tillbaka för att stödja äldre webbläsare. Om taggen <object> inte fungerar i webbläsaren, prova då med <embed> i stället.

10 <map> och <area> - överkurs Kartstrukturer anges med taggen <map>. Taggen har attributen name och id som ger strukturen ett namn så att bilden kan referera till den. För att bildkartan ska fungera i så många webbläsare som möjligt är det bäst att ange båda attributen. De måste då ha samma värde. Inne i kartstrukturen anges sedan ett antal områden och URL-strängar för dem som taggen <area > avser. Strukruren avslutas med </map>. Exempel: <map name= kartan id= kartan > <area... > <area > </map>

11 <map> och <area> - överkurs Taggen <area > kan ha nio olika attribut. shape coords href alt target, rel, media hreflang och type dessa fungerar på samma sätt som i <a> Exempel: <area shape= rect coords= 0, 0, 99, 49 href= gubbe.html alt= En rektangel >

12 <base /> Det händer att webbläsaren blir förvirrad och försöker hoppa till en URL som inte finns när man använder bilder med aktiva områden. Om det händer kan du lägga in taggen <base /> i sidans huvud. <base /> berättar vilken utgångspunkt webbläsaren ska ha när den ska beräkna vart relativa länkar leder. Taggen har, precis som ankare, ett attribut som heter href med en URL som värde. Denna URL ska peka ut dokumentet den befinner sig i. <html><head> <title>min fil </title> <base href= /> <br /> <base href= minfil.html /> </head><body> </body> </html>

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

WEBBUTVECKLING Bilder

WEBBUTVECKLING Bilder Bildformat Kurskod: WEBWEU01 Kursmål: och media med alternativa format, optimering och tillgänglighet. Bildformat De bilder som används på webben är vanligtvis JPG, PNG eller GIF-bilder. Anledningen till

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

Ljud och video på webbsidor

Ljud och video på webbsidor Nivå 3 Ljud och video på 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

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

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

Att bygga enkla webbsidor

Att bygga enkla webbsidor Nivå 1 Att bygga enkla 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/18cplpy to find out what

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

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

Torstens Digitalbildguide

Torstens Digitalbildguide Thor Stone Education Torstens Digitalbildguide 1 Det finns två huvudtyper av digital bild, vektorbaserad och pixelbaserad. - Vektorbaserade bilder bygger på en matematisk formel och kan storlekförändras

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

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

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

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

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

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

Att skapa en bakgrundsbild och använda den i HIPP

Att skapa en bakgrundsbild och använda den i HIPP Att skapa en bakgrundsbild och använda den i HIPP Bakgrundsbilder i HIPP kan användas till olika saker, t ex som ett rutnät för en tabell eller en grundkarta. Här visas hur man gör en grundkarta som en

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

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

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

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

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

Ö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

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

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

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

Bilduppladdning i Järnvägshistoriskt forum (gäller MS Windows för PC)

Bilduppladdning i Järnvägshistoriskt forum (gäller MS Windows för PC) Bilduppladdning i Järnvägshistoriskt forum (gäller MS Windows för PC) I Järnvägshistoriskt (i forts. Jvmv) forum finns ingen möjlighet att ladda upp bilder direkt i inlägg från sin hårddisk. Man måste

Läs mer

Bilder... Dagens föreläsning. Objektgrafik. Objektgrafik. TNMK30, 2010 Föreläsning

Bilder... Dagens föreläsning. Objektgrafik. Objektgrafik. TNMK30, 2010 Föreläsning TNMK30, 2010 Föreläsning Bilder... Tobias Trofast, LiU 1 Dagens föreläsning Olika grafikformat Bitdjup Färglägen och kanaler Komprimering Filformat Bildkvalitet Upplösning & Interpolering Objektgrafik

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

<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

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

LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR

LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR UPPDRAGSGIVARE: IT-CENTER VÅR REFERENS: STEFAN JOHANSSON TEL.: 0708-23 10 64 E-POST: stefan.johansson@funkanu.se INNEHÅLL: LÄRARHANDLEDNING TILLGÄNGLIGA WEBBSIDOR _ Funka Nu AB Finnbodavägen 2, 131 31

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

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se

Macromedia. Dreamweaver 8. Grundkurs. www.databok.se Macromedia Dreamweaver 8 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 1 Arbeta i Dreamweaver... 3 Fönster... 4 Statusfältet... 4 Menyer...

Läs mer

INT 3 F3. En texts läsbarhet. Teckensnitt. Medieteknik Del1. Färger, teckensnitt och bildformat

INT 3 F3. En texts läsbarhet. Teckensnitt. Medieteknik Del1. Färger, teckensnitt och bildformat INT 3 F3 Medieteknik Del1 Färger, teckensnitt och bildformat DSV Peter Mozelius En texts läsbarhet Teckensnitt Teckengrad Radlängd Radavstånd Papper/Skärm Bakgrundsfärg Teckensnitt Teckensnitt kan delas

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

Kort om World Wide Web (webben)

Kort om World Wide Web (webben) KAPITEL 1 Grunder I det här kapitlet ska jag gå igenom allmänt om vad Internet är och vad som krävs för att skapa en hemsida. Plus lite annat smått och gott som är bra att känna till innan vi kör igång.

Läs mer

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

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

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

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

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

Pixelgrafik. Utdrag ur Adobe Photoshops handbok. Om bitmappsbilder (pixelbilder) Om vektorgrafik (kallas ibland objektgrafik)

Pixelgrafik. Utdrag ur Adobe Photoshops handbok. Om bitmappsbilder (pixelbilder) Om vektorgrafik (kallas ibland objektgrafik) Pixelgrafik Utdrag ur Adobe Photoshops handbok Om bitmappsbilder (pixelbilder) I bitmappsbilder, eller rasterbilder eller pixelgrafik, används ett rektangulärt rutnät med bildelement (pixlar eller bildpunkter)

Läs mer

Publiceringsverktyget

Publiceringsverktyget Publiceringsverktyget Uppdaterad 2015-03-18 Presentera företaget på eventwebben Inför mässan är det viktigt att du så tidigt dom möjligt uppdaterar din presentation på eventwebben. Många av dina kunder

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

I den här övningen tränar du på att göra olika programfönster. Övningarna går att göra på egen hand.

I den här övningen tränar du på att göra olika programfönster. Övningarna går att göra på egen hand. I den här övningen tränar du på att göra olika programfönster. Övningarna går att göra på egen hand. Innehållsförteckning Kontrollpanelen i kategoriläge. Frågor 2 Utforskaren, hantera filer och mappar.

Läs mer

Så skapas färgbilder i datorn

Så skapas färgbilder i datorn Så skapas färgbilder i datorn 31 I datorn skapas såväl text som bilder på skärmen av små fyrkantiga punkter, pixlar, som bygger upp bilden. Varje punkt har sin unika färg som erhålls genom blandning med

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

Föreläsning i webbdesign. Bilder och färger. Rune Körnefors. Medieteknik. 2012 Rune Körnefors rune.kornefors@lnu.se

Föreläsning i webbdesign. Bilder och färger. Rune Körnefors. Medieteknik. 2012 Rune Körnefors rune.kornefors@lnu.se Föreläsning i webbdesign Bilder och färger Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Exempel: Bilder på några webbsidor 2 Bildpunkt = pixel (picture element) Bilder (bitmap

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

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

2I1073 Föreläsning 1. HTML och XHTML XHTML

2I1073 Föreläsning 1. HTML och XHTML XHTML 2I1073 Föreläsning 1 XHTML, stilmallar och Javascript 1 KTH-MI Peter Mozelius HTML och XHTML HyperText Markup Language Element = taggar + taggarnas innehåll innehåller lite text taggarna kan

Läs mer

06. Skapa bildsegment

06. Skapa bildsegment 1/8 06. Skapa bildsegment Två mycket goda vänner, hunden Toya och katten Lisa. För att kunna länka från bilden till Toyas och Lisas egna hemsidor väljer vi att dela in bilden i segment. Till varje segment

Läs mer

Struktur och innehåll Laboration 2

Struktur och innehåll Laboration 2 Laborationsanvisning Struktur och innehåll Laboration 2 Författare: Johan Leitet Version: 2 Datum: 2011-08-08 Inledning Till skillnad från laboration 1 som mest handlade om att komma igång med arbetsmiljön

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

Att skapa er logotyp. Kreativitet

Att skapa er logotyp. Kreativitet Att skapa er logotyp Er logotyp är ert ansikte utåt. Det är er logotyp som ger en första bild av vilka ni är, vad ni gör, vad ni kan etc. Framtagandet av er logotyp är viktig och består enligt oss av två

Läs mer

Zimplit CMS Manual. Introduktion. Generell Information

Zimplit CMS Manual. Introduktion. Generell Information Zimplit CMS Manual Introduktion Detta dokument ger en överblick av Zimplit CMS (Content Management System) användargränssnitt och dess funktioner. (För mer information och hjälp-forum, se zimplit.org.)

Läs mer

Laboration 4: Digitala bilder

Laboration 4: Digitala bilder Objektorienterad programmering, Z : Digitala bilder Syfte I denna laboration skall vi återigen behandla transformering av data, denna gång avseende digitala bilder. Syftet med laborationen är att få förståelse

Läs mer

Mobilt. Digitala annonsformat och teknisk specifikation. Gäller fr om

Mobilt. Digitala annonsformat och teknisk specifikation. Gäller fr om Mobilt Digitala annonsformat och teknisk specifikation Gäller fr om 2016 01 19 Mediekompaniet följer IAB Sveriges rekommendationer. För mer information www.iabsverige.se INTERSTITIAL För större genomslagskraft

Läs mer

1 Se till att dokumentet C:\Webbkurs\html\pronto\index4.html är öppet i Anteckningar.

1 Se till att dokumentet C:\Webbkurs\html\pronto\index4.html är öppet i Anteckningar. Grundläggande HTML 9 Listor Listor kan komma väl till pass när kortfattad information ska presenteras på ett lättöverskådligt sätt. I HTML kan du skapa flera olika typer av listor; numrerade listor och

Läs mer

Laboration 1. Webbprodution Struktur & innehåll HT2015

Laboration 1. Webbprodution Struktur & innehåll HT2015 Laboration 1 Webbprodution Inledning Denna inledande laboration syftar i mångt och mycket till att du ska känna dig bekväm med den laborationsmiljö ni blivit introducerat inför. De inledande uppgifterna

Läs mer

Lathund skapa och redigera sidor en projektwebb

Lathund skapa och redigera sidor en projektwebb Lathund skapa och redigera sidor en projektwebb 1. Gå in via redigeringsadressen: https://projektwebbaradmin.lansstyrelsen.se/miljosamverkanskane 2. Skapa sida Navigera till den del av webbplatsen där

Läs mer

Digital bildhantering

Digital bildhantering Digital bildhantering En analog bild blir digital när den scannas. Bilden delas upp i småbitar, fyrkanter, pixlar. En pixel = den digitala bildens minsta byggsten. Hur detaljrik bilden blir beror på upplösningen

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

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

Materialspecifikation för alla Portalens mässajter

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

Läs mer

Övningar i bilder och färger

Övningar i bilder och färger Övningar i bilder och färger I dessa övningar ska du öva på att redigera några bilder för att anpassa dem till en webbplats. Bilderna kommer att beskäras på olika sätt, förändras i färguppsättning och

Läs mer

Övningar i bilder och färger

Övningar i bilder och färger Övningar i bilder och färger I dessa övningar ska du öva på att redigera några bilder för att anpassa dem till en webbplats. Bilderna kommer att beskäras på olika sätt, förändras i färguppsättning och

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

Visuell design Bilder & färger

Visuell design Bilder & färger 1ME321 Webbteknik 1 Lek0on 8 Visuell design Bilder & färger Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 43 Läsanvisningar UpphovsräPslagen Kort sammanfapning

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

Grunder. Grafiktyper. Vektorgrafik

Grunder. Grafiktyper. Vektorgrafik 2 Grunder All vår början bliver svår eller hur det nu brukar heta, och detta är något som gäller även Flash. För den som är ovan vid Flash gäller det säkert extra mycket, då det kan vara knepigt att förstå

Läs mer

Exportera karta juni 2010

Exportera karta juni 2010 Exportera karta juni 2010 När man har skapat en karta kanske man vill exportera kartdokumentet till en bild eller grafisk filtyp. Nedan ges exempel på vilka olika format som stöds, samt tips för exporten.

Läs mer

19-21. Samling och kaffe. Temakväll Bildhantering i släktforskningen Genomgång kring temat. Forska själv. Forska själv. Diskussion kring temat

19-21. Samling och kaffe. Temakväll Bildhantering i släktforskningen Genomgång kring temat. Forska själv. Forska själv. Diskussion kring temat 19-21 Samling och kaffe Temakväll Bildhantering i släktforskningen Genomgång kring temat Forska själv Diskussion kring temat Forska själv Höstens temakvällar 13/9 Digitala bilder i släktforskningen 11/10

Läs mer

Beställning till Diakrit

Beställning till Diakrit Februari 2010 Capitex AB Kalmar (huvudkontor): Box 751 Svensknabbevägen 30 391 27 Kalmar Tel vxl 0480-44 74 00 Fax 0480-44 74 01 Stockholm: Gustavslundsvägen 30 167 51 Bromma Tel 08-720 36 50 Fax 08-720

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

I FNUF:s grafiska profil finns information om typsnitt, logga, färger, illustrationer samt mallar för dokument och posters.

I FNUF:s grafiska profil finns information om typsnitt, logga, färger, illustrationer samt mallar för dokument och posters. Grafisk profil FNUF - Föreningen Nordens Ungdomsförbund tror på en bredare och en öppnare relation över landsgränserna i Norden. FNUF arbetar för ett ökat samarbete inom bland annat arbetsmarknad, utbildning,

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra gången MuddyCards Animation Portfolio Lab 3. Muddycards - resultat Positiva kommentarer Tempo föreläsningar Labbhandledning, pedagogik Mer labbhandledning Instruktioner

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

Handbok Kgeografi. Anne-Marie Mahfouf Kushal Das Översättare: Stefan Asserhäll

Handbok Kgeografi. Anne-Marie Mahfouf Kushal Das Översättare: Stefan Asserhäll Anne-Marie Mahfouf Kushal Das Översättare: Stefan Asserhäll 2 Innehåll 1 Inledning 5 2 Snabbstart av Kgeografi 6 3 Använda Kgeografi 12 3.1 Fler funktioner i Kgeografi.................................

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

Publiceringsverktyget

Publiceringsverktyget Publiceringsverktyget Uppdaterad 2016-09-05 Presentera företaget på mässwebben Inför mässan är det viktigt att du så tidigt dom möjligt uppdaterar din presentation på mässwebben. Många av dina kunder använder

Läs mer

SNABBGUIDE för Windows Media Encoder (media kodaren) - Sänd live med din webbkamera

SNABBGUIDE för Windows Media Encoder (media kodaren) - Sänd live med din webbkamera SNABBGUIDE för Windows Media Encoder (media kodaren) - Sänd live med din webbkamera Instruktionerna till denna kameraguide är en enkel kom igång guide. Grundkrav: En webbkamera som är kopplad till datorn

Läs mer

APA för nybörjare. Innan du börjar. Översikt

APA för nybörjare. Innan du börjar. Översikt APA för nybörjare Den här texten är tänkt som en snabb introduktion hur du kan använda publiceringssystemet APA (Advanced Publication Application) för att redigera webbplatser. Texten kräver inga förkunskaper

Läs mer

Publiceringsverktyget

Publiceringsverktyget Publiceringsverktyget Uppdaterad 2013-11-18 Presentera företaget på mässwebben Inför mässan är det viktigt att du så tidigt dom möjligt uppdaterar din presentation på mässwebben. Många av dina kunder använder

Läs mer

Statistik från webbplatser

Statistik från webbplatser Statistik från webbplatser problem och möjligheter Ulf Kronman Föredragets huvuddelar Frågorna och motfrågorna Vilka frågor ställer chefen, BIBSAM och ISO? Varför ställer webmastern krångliga motfrågor?

Läs mer

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR

MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering

Läs mer

Produktionsprislista och materialspecifikationer

Produktionsprislista och materialspecifikationer SYDSVENSKAN WEBBYRÅ Produktionsprislista och materialspecifikationer 2013 www.sydsvenskan-webbyra.se Webbannons Pris: 2250:- En webbannons är en grafisk animation (bild och text) anpassad för webben. Vi

Läs mer

Underhåll av webbshopsmodul i excellence PRO butik

Underhåll av webbshopsmodul i excellence PRO butik Kort bekrivning av webbplatsens grundfunktioner Webbshoppen består av en Internetapplikation som körs på Windows Internet Information Server. Hela webbshopen jobbar online mot excellence PRO butiks databas.

Läs mer

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07 Guide Eva Pärt-Enander, 2012-12-14 Webbsidor i Studentportalen Uppdaterad: 2014-10-07 Innehåll Webbsidor i Studentportalen... 1 Om webbsidor... 2 Lägg till en webbsida... 2 Lägg till samma webbsida på

Läs mer

Manual för Veneröds Dressyrstall

Manual för Veneröds Dressyrstall 1 Manual för Veneröds Dressyrstall Bildredigering På nyhetssidan finns möjlighet att lägga in en bild. Restriktionerna på denna är en bredd på 320 px och en höjd på 120 px, den får inte heller överstiga

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

De olika exportmetoderna för rasterfiler inne i ArcMap är BMP, TIFF, GIF och PNG.

De olika exportmetoderna för rasterfiler inne i ArcMap är BMP, TIFF, GIF och PNG. Exportera karta När man har skapat en karta kanske man vill exportera kartdokumentet till en bild eller grafisk filtyp. Nedan ges exempel på vilka olika format som stöds, samt tips för exporten. Det går

Läs mer

Appar med ryggrad. Introduktion till JavaScriptramverket Backbone

Appar med ryggrad. Introduktion till JavaScriptramverket Backbone Appar med ryggrad Introduktion till JavaScriptramverket Backbone Vanlig webbsida Databas MVC - Model View Controller MVC - Model View Controller MVC Backbone.js Ger struktur Bygger på MVC konceptet Tvingar

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

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

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

Mer information om RefWorks, andra referenshanteringsprogram och hur man refererar hittar du på Linköpings universitetsbiblioteks webbsidor.

Mer information om RefWorks, andra referenshanteringsprogram och hur man refererar hittar du på Linköpings universitetsbiblioteks webbsidor. Guide till RefWorks För att förenkla hanteringen av referenser och referenslistor finns det flera olika verktyg, s.k. referenshanteringsprogram. Med dem kan du samla, organisera och presentera dina referenser.

Läs mer

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI

JavaScript. 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 mer

Adobe Photoshop Elements Skapa bakgrundsbilder för webbsidor

Adobe Photoshop Elements Skapa bakgrundsbilder för webbsidor 1 Adobe Photoshop Elements Skapa bakgrundsbilder för webbsidor Du kan använda ett foto som bakgrundsbild för en webbsida. Men om du använder ett fyrfärgsfoto som är stort nog att fylla en hel webbsida

Läs mer