Introducerande övningar i HTML

Storlek: px
Starta visningen från sidan:

Download "Introducerande övningar i HTML"

Transkript

1 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 och i HTML-koden finns det koder för att referera till bildfilerna. På så sätt inkluderas de i presentationen i webbläsaren. Webbläsaren behöver alltså tolka HTML-koderna dels för att formatera texten och dels för att läsa in andra filer. HTML (HyperText Markup Language) är ett beskrivningsspråk som består av ett antal koder för vad som ska presenteras och hur det ska visas upp. De koder som används kallas ibland för "taggar" (från engelska tag = etikett). Det finns koder för att formatera text, referera till bilder, definiera länkar, etc. Rent allmänt har man först en kod som anger var direktivet ska börja gälla och sedan en slutkod som anger var det ska upphöra att gälla. Alla koder anges inom mindre än och större än tecken (< >). Slutkoden inleds med ett snedstreck (/). Ett exempel är koden <p> som används för att markera början och slut på ett stycke (paragraph), t.ex. <p>detta är ett textstycke.</p>. I vissa fall behövs inte någon slutkod, t.ex. då man vill ha en radbrytning mitt i ett stycke med koden <br>. Då behövs endast en kod för att markera positionen i texten. I många fall kan man också ange olika attribut för koderna. Dessa anges då i "taggen", efter namnet, t.ex. <img src="bild.jpg">, för att markera att här ska bildfilen bild.jpg inkluderas. Det finns också andra koder för speciella tecken, t.ex. å, ä och ö. Dessa koder inleds med & och avslutas med ;. T.ex. är koden för bokstaven å lika med å. Men om man i början av HTMLdokumentet specificerar vilken teckenkodning som används för filen, så behöver man inte dessa koder. HTML har kommit i ett antal versioner och den senast standardiserade versionen är XHTML. Man har dock arbetat med utveckling av HTML5 ett antal år nu och de moderna webbläsarna stödjer nu en stor del av HTML5, även om den versionen ännu inte är standardiserad. I denna laboration kommer vi att använda oss av HTML5, men vi tar här upp de grundläggande delarna och de är i stort sett lika oavsett vilken version av HTML som används. 1. Skapa ett HTML-dokument Du börjar med att skapa ett HTML-dokument med den grundläggande koden för en webbsida. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>sidans titel</title> </head> <body> Min första sida </body> </html> Skapa ett nytt dokument i din editor Dreamweaver o Använder du Dreamweaver väljer du menykommandot File->New... I fönstret som då dyker upp väljer du HTML i kolumnen för Page Type och <none> i kolumnen för Layout. I popup-menyn för DocType väljer du HTML5. Klicka sedan på knappen Create. Du får då ett dokument för grundstrukturen för ett HTML-dokument. Om inte HTML-koden visas klickar du på knappen Code i fönstrets övre vänstra hörn. o Skriv in en text mellan body-taggarna enligt koden ovan Rune Körnefors (rune.kornefors@lnu.se) 1

2 Komodo Edit o Använder du Komodo Edit väljer du menykommandot File->New->File from Template... I kolumnen Categories väljer du Web och sedan i kolumnen Template väljer du HTML5. Klicka sedan på knappen Open. Du får då ett nytt dokument med HTML-kod. o Kontrollera att filen sparas i teckenuppsättningen UTF-8, genom att ta fram programmets inställningar (Preferences). Där klickar du på Internationalization. Mitt i fönstret finns en popupmeny med HTML5 och till höger om den en annan meny för teckenuppsättningen. Välj UTF-8 där och klicka sedan på OK. o Välj dessutom menykommandot Edit->Current File Settings I rutan för File Settings väljer du UTF-8 i popupmenyn för Encoding. o I HTML-koden lägger du till följande kod under raden med koden <head>: <meta charset="utf-8"> o Skriv också in en text mellan body-taggarna enligt koden ovan. Vanlig texteditor o Använder du en vanlig texteditor skapar du ett nytt textdokument och skriver själv in ovanstående kod. o Kontrollera programmets inställningar, för att se till att filen sparas i UTF-8. I en del editorer görs detta i inställningsfönstret, medan det i en del andra väljs först då man sparar filen. Spara ditt dokument på din hårddisk Spara ditt HTML-dokument i övningsmappen som du laddat ner till laborationen, så att ditt dokument hamnar i samma mapp som dokumentet sida2.htm. Ge ditt HTML-dokumentet med något lämpligt namn, t.ex. webbsida.htm o Som regel bör man endast använda bokstäver ur det engelska alfabetet i filnamnen. Det går också bra att använda siffror och _, men filnamnen bör börja med en bokstav. Filerna bör dessutom sluta med.htm eller.html med små bokstäver. Blanktecken eller andra tecken bör inte användas i filnamnen. Följer du dessa regler brukar det inte bli några problem då du flyttar över filerna till en server, som kanske har ett annat operativsystem (och annat sätt att koda tecken som t.ex. åäö) än det du själv använder. 2. Titta på sidan i en webbläsare För att studera resultatet av din HTML-kodning öppnar du den i en webbläsare (t.ex. Firefox). Öppna sidan i en webbläsare Öppna en webbläsare. Välj Öppna fil i Arkiv-menyn och peka ut ditt nya dokument. Observera att det endast är den text som du skrev mellan body-taggarna som visas i fönstret. o Om du använde åäö kan det ha blivit några andra tecken, om inte filen är sparad i den teckenuppsättning som anges i meta-taggen. Kontrollera i så fall inställningarna i din editor, så att du verkligen sparar i UTF-8. Använder du en vanlig texteditor, så kanske du måste välja UTF-8, då du sparar filen. Observera också att den text som står i title-taggen visas i webbläsarfönstrets titelrad. o Gå över till editorn och ändra texten i title-taggen till t.ex. Pelles sida, där du byter ut Pelle mot ditt eget namn. Spara sedan filen och gå över till webbläsaren igen. Där klickar du på "Ladda om"-knappen, så laddas den nya sidan in. Kontrollera att texten i fönstrets titelrad ändras Rune Körnefors (rune.kornefors@lnu.se) 2

3 Dokumentet öppet både i editorn och webbläsaren Behåll nu sidan öppen både i din editor och i webbläsaren, så kan du lätt växla mellan dem i de följande övningarna. När du gör förändringar i ditt HTML-dokument kan du titta på dessa i din webbläsare genom att trycka på "Ladda om"-knappen (i de flesta webbläsare är det en böjd pil intill adressfältet, för att uppdatera sidan). o Har du en stor skärm, så kan du ändra fönsterstorlekarna, så att du lägger editorns fönster och webbläsarens fönster intill varandra. Då kan du snabbt växla mellan dem. 3. Text i dokumentet Du ska nu skriva lite mer text på din webbsida och använda koderna för stycken och radbrytning. Efter varje punkt går du över till webbläsaren och laddar om sidan, för att studera resultatet. Textstycken och radbrytning Skriv in några textstycken mellan body-taggarna, t.ex. <p>text i ett eget stycke.</p> <p>text i ett annat stycke.</p> <p>ett tredje stycke.</p> Lägg in en radbrytning mitt i det andra stycket, t.ex. <p>text i ett <br>annat stycke.</p> Observera skillnaden mellan p-taggen och br-taggen i webbläsaren. Textstycken utgör hela block med en eller flera rader i webbläsaren. Man kan inte lägga textstycken inuti varandra, så man lägger inte en p-tagg inuti en annan p-tagg. Man avslutar alltså först föregående stycke med en sluttagg </p> innan man påbörjar ett nytt stycke med ett nytt <p>. Specialtecken Skriv in några specialtecken med s.k. entitets-koder (&kod;) i din text. Koderna för svenska tecken är: Å = Å Ä = Ä Ö = Ö å = å ä = ä ö = ö o Egentligen behöver du inte använda dessa, eftersom du i meta-taggen angett vilken teckenuppsättning som din fil sparas i. Då fungerar det att skriva åäö som vanligt direkt i texten. Men prova ändå några koder och kontrollera att de skrivs som svenska tecken i webbläsaren. Det finns också en del andra specialtecken som man måste skriva med koder, för att det ska bli rätt i webbläsaren. o Tecknet & måste skrivas som &. Skriver man bara & i texten, så tror webbläsaren att det är början på en entitet och då kan det bli fel. o Copyright, dvs, skrivs som o Fler exempel hittar du i kursboken Rune Körnefors (rune.kornefors@lnu.se) 3

4 4. Rubriker Medieteknik Rubriker finns i sex nivåer och skrivs med taggarna h1 till h6. Det är dock ingen strukturell skillnad mellan dem, utan de skrivs endast i olika storlekar. Skriv t.ex. in följande rubriker på din webbsida: <h1>världen</h1> <h2>europa</h2> <h3>sverige</h3> <h4>småland</h4> <h5>växjö</h5> <h6>universitetet</h6> Studera skillnaden i hur de skrivs i din webbläsare. 5. Avskiljare Med taggar som p, br och rubrikerna h1-h6 får man nya rader. Ibland vill man också åtskilja dem mer med en horisontell linje. Det kan man göra med hr-taggen ("horizontal rule"). Lägg in hr mellan några av textstyckena i din HTML-kod, t.ex. <p>text i ett eget stycke.</p> <hr> <p>text i ett annat stycke.</p> 6. Annan formatering av texten För ytterligare formatering av texten kan man använda koder för att markera olika avsnitt. Fetstil och kursiv stil Omge någon del av texten i ett textstycke med b-taggen för att markera den i fetstil (bold), t.ex. <p>text i ett <b>eget</b> stycke.</p> Gör på samma sätt någon del av texten kursiv (italic) med i-taggen, t.ex. <p>text i ett <i>eget</i> stycke.</p> Använd taggarna b och i endast för att markera delar av text i textstycken. o Du ska inte skapa rubriker genom att omge hela texten i ett stycke med b-taggen eller i- taggen. Vill du ha en rubrik, ska du istället använda någon av taggarna h1 till h6. o Taggarna b och i anger direkt vilken stil man vill ha. Egentligen ska man inte göra det i HTML, utan istället använda CSS som vi kommer in på senare i kursen. Men det är ganska vanligt att man vill markera någon liten del av texten i fetstil eller kursiv stil, så därför finns dessa taggar också i HTML. Text med speciell betydelse Andra koder ger en "semantisk" markering. Dvs istället för att ange stilen, anger man att det är en text som ska en speciell betydelse. Exempel på detta är strong och em (emphasized). Dessa skrivs oftast i fetstil respektive kursiv stil av webbläsaren. o Prova t.ex. att lägga in följande i något textstycke i din fil. <strong>en text</strong> <em>en text</em> Fler exempel hittar du i kursboken Rune Körnefors (rune.kornefors@lnu.se) 4

5 7. Listor Medieteknik I HTML kan man skapa olika typer av listor. Vi ska här titta på hur man gör en punktlista (så som dessa övningar är skrivna) och en numrerad lista. En punktlista (unordered list) skapas med ul-taggen och en numrerad lista (ordered list) skapas med ol-taggen. Varje rad (list item) i listan skapas med litaggen. Punktlista Skapa en punktlista med följande kod, som du skriver in efter ett textstycke i din HTML-kod. <ul> <li>småland</li> <li>blekinge</li> <li>skåne</li> <li>halland</li> </ul> Numrerad lista Ändra listan till en numrerad lista genom att byta ut ul-taggen till en ol-tagg (både start- och sluttagg). <ol> <li>småland</li> <li>blekinge</li> <li>skåne</li> <li>halland</li> </ol> Punkterna byts då till siffror. Lägg till ett attribut i starttaggen för ol, för att ändra siffrorna till en annan uppräkning. <ol type="a"> Raderna markeras då med bokstäver. Andra värden som man kan ha istället för a är A, i, I eller 1. Det sista ger siffror och är detsamma som man får utan type-attributet. Underlistor Det går också att lägga en lista inuti en lista, genom att lägga in en ny ul- eller ol-lista i en li-tagg. Prova följande: <ol> <li>småland <ul> <li>jönköping</li> <li>kalmar</li> <li>växjö</li> </ul> </li> <li>blekinge</li> <li>skåne</li> <li>halland</li> </ol> Observera att det inte står </li> efter Småland. Taggen avslutas istället på raden efter den lista som lagts in där Rune Körnefors (rune.kornefors@lnu.se) 5

6 8. Tabeller Medieteknik En tabell skapas på samma sätt som en lista, fast med en table-tagg som omger hela tabellen. Sedan har man en tr-tagg för varje rad (table row) och en td-tagg för varje cell i raden (table data). Skriv in följande kod i ditt HTML-dokument: <table> <tr> <td>stad</td> <td>antal invånare</td> </tr> <tr> <td>kalmar</td> <td>36.000</td> </tr> <tr> <td>växjö</td> <td>60.000</td> </tr> </table> Använd tabeller till data som ska spaltas upp Tabeller i HTML använder man för data som ska räknas upp som t.ex. ovanstående tabell eller ett schema. Man kan också skapa en tabell inuti en tabell, men det bör undvikas, eftersom koden blir väldigt rörig och omfattande. Förr var det vanligt att man använde en tabell för att skapa en layout för en sida. Man skapade då en stor tabell som täckte hela dokumentet och fick rutor där man placerade logo, navigeringsmeny, Sidans innehåll, etc. Det ska man dock också undvika, eftersom sidans kod då blir komplex och svårtillgänglig för sökrobotar och personer med speciella webbläsare, t.ex. för synskadade. En layout skapar man istället på annat sätt och det kommer vi in på i samband med att vi studerar CSS. 9. Bilder Nu ska du också ta med några bilder på din webbsida. Bilderna ligger lagrade som separata filer, så i HTML-koden lägger man in en img-tagg (image) där man vill att bilden ska visas. I img-taggen har man ett attribut kallat src (source), där man anger vilken bildfil som ska användas. På webbsidan för denna laboration kan du ladda ner en zip-fil med ett par bilder, så om du inte redan gjort det, laddar du ner den nu. Efter uppackning av zip-filen får du en mapp kallad bilder. Lägg den mappen på samma plats som du sparat ditt HTML-dokument. Inkludera en bild Lägg in följande kod någonstans i innehållet på din webbsida: <p>en bild mitt i <img src="bilder/teddy.gif"> texten.</p> o Bilden hamnar då på samma rad som texten Rune Körnefors (rune.kornefors@lnu.se) 6

7 Ändra koden till: <p>en bild på en egen rad.</p> <p><img src="bilder/teddy.gif"></p> <p>mer text.</p> o o Alternativ text Bilden hamnar då i ett eget textstycke och därmed en egen rad. Vill man även justera bilden så att den t.ex. centreras på raden eller läggs till vänster om texten, så måste man använda CSS, så det väntar vi med tills vi kommer in på det i kursen. I en img-tagg finns det ytterligare ett obligatoriskt attribut och det är alt, där man anger en alternativ text som visas då bilden inte kan visas. Detta är viktigt för t.ex. synskadade och sökrobotar, som inte kan se bilden. Lägg till ett alt-attribut i img-taggen: <img src="bilder/teddy.gif" alt="teddybjörn"> Ändra storlek på en bild Lägg in följande kod i din HTML-fil: <p><img src="bilder/slott.jpg" alt="teleborgs slott"></p> Bilden är 800x600 pixlar, men det går att ändra storlek med attributen width och height. Lägg till detta i din img-tagg: <p><img src="bilder/slott.jpg" alt="teleborgs slott" width="400" height="300"></p> Storleken kan alltså lätt ändras. Men vill man ha en liten bild på sidan, så är det bäst att först förminska den i ett bildredigeringsprogram. Man kan då påverka kvalitén på bilden och bildfilen blir mindre. Bild på en annan server I ovanstående img-taggar användes en s.k. relativ adress till bildfilerna. De ligger på samma dator som HTML-filen och i adressen utgår referenserna från HTML-dokumentets placering. Man kan också referera till bilder på en annan server med en fullständig URL. Lägg in följande kod för att ta in en annan bild: <p><img src=" alt="groda"></p> Slut Vi har nu introducerat grunderna i HTML. Öva nu på egen hand med att experimentera med de koder som tagits upp här. I nästa laboration kommer vi att ta upp mer om HTML och bl.a. titta på hur man skapar länkar Rune Körnefors (rune.kornefors@lnu.se) 7

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

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi

Läs mer

Språk för webben introduk4on 4ll HTML

Språk för webben introduk4on 4ll HTML Föreläsning i webbdesign Språk för webben introduk4on 4ll HTML Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se En webbsidas beståndsdelar Text (formaterad, strukturerad) Länkar Inkluderade

Läs mer

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi

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

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

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

Ö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

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

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

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

Mappar och filer för webbsidor

Mappar och filer för webbsidor Mappar och filer för webbsidor I de4a dokument illustreras det hur du kan arbeta med mappar och filer, då du skapar webbsidor och ska publicera dem för uppgi=erna. Det visas också hur du skickar in redovisningar

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

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

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter 1M321 Webbteknik 1, 7,5hp Medieteknik 2018 Rune Körnefors rune.kornefors@lnu.se 1. Skapa ett nytt HTML-dokument I denna laboration

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

Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er

Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna

Läs mer

3. Hämta och infoga bilder

3. Hämta och infoga bilder Sida 1 av 8 Lektion 1: sida 4 av 4 «Sida 3 av 4 Till kursens framsida 3. Hämta och infoga bilder Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder? Det är inte svårt alls! Det

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

Labora&on 4 CSS och validering övningar/uppgi9er

Labora&on 4 CSS och validering övningar/uppgi9er Labora&on 4 CSS och validering övningar/uppgi9er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument och skapa en mapp för U2 Till övningarna i denna

Läs mer

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

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

STEGBESKRIVNING - WEBB

STEGBESKRIVNING - WEBB STEGBESKRIVNING - WEBB Logga in och Ut 1. Öppna upp en webbläsare (Chrome eller Firefox) 2. Skriv in sökvägen: www.krukmakarenshus.org/wp-admin/ 3. Fyll i inloggningsuppgifterna och tryck Logga in 3. När

Läs mer

Användarmanual WebNailer. 19 januari 2004

Användarmanual WebNailer. 19 januari 2004 Användarmanual WebNailer Tobias Holgers Mattias Castegren 19 januari 2004 1 Innehåll 1 Inledning 3 1.1 Definitionerochförkortningar... 3 2 WebNailer 4 2.1 Knapprad... 4 2.1.1 Gemensamma... 4 2.1.1.1 Webbläsare...

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

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

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

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

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

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

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

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

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

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

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

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

WEBDESIGN A - DTR 1210

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

Läs mer

Övningar i JavaScript del 5

Övningar i JavaScript del 5 Övningar i JavaScript del 5 I dessa övningar ska vi ta upp några lika händelsehanterare. Dessa ska dck inte läggas in med attribut i HTML-kden, så sm vi gjrt tidigare med nclick. Istället ska vi nu lägga

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

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

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

Att arbeta med. Müfit Kiper

Att arbeta med. Müfit Kiper Att arbeta med Müfit Kiper Att skriva nya inlägg Alla inlägg som är postade visas i kronologisk ordning, det vill säga det senast postade inlägget kommer visas först om inget annat angetts i temafilerna.

Läs mer

Datorövning 1 Calc i OpenOffice 1

Datorövning 1 Calc i OpenOffice 1 Datorövning 1 Calc i OpenOffice 1 1 OpenOffice Calc Till förmån för de som följer kursen Fysikexperiment för lärare skall vi här gå igenom några få exempel på hur OO Calc (motsvarar MS Excel) kan användas

Läs mer

Inledning till OpenOffice Calculator Datorlära 2 FK2005

Inledning till OpenOffice Calculator Datorlära 2 FK2005 Inledning till OpenOffice Calculator Datorlära 2 FK2005 Mål Lära sig att skapa och använda ett räkneblad med OpenOffice Calculator Beräkna medelvärde och standardavvikelsen med räknebladet Producera en

Läs mer

HTML. Introduktion till HyperText Markup Language

HTML. Introduktion till HyperText Markup Language HTML Introduktion till HyperText Markup Language 1 Frågor innan vi börjar? 2 Dagens föreläsning Snabb introduktion till webben Varför använder vi HTML? Ett första HTML-dokument Metadata Teckenkodning Validera

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

Manual för din hemsida

Manual för din hemsida Manual för din hemsida Dynamiska hemsidor är en lösning för att man på ett enkelt sätt skall kunna lägga till, ändra och ta bort sidor på sin hemsida. För att detta skall vara möjligt bygger lösningen

Läs mer

Dokument i klassens aktivitet

Dokument i klassens aktivitet Dokument i klassens aktivitet I min mall har jag ju tagit bort Aktivitetens dokument, så att eleverna inte har tillgång till dem. Min tanke med detta är att de lärare som arbetar i klassen då får en plats

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

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

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

Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor

Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor http://w3.msi.vxu.se/multimedia Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor Rune Körnefors Innehåll Variabler i JavaScript

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

Labora&on 8 Formulär övningar/uppgi6er

Labora&on 8 Formulär övningar/uppgi6er Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument

Läs mer

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

F02 En första sida. Dagens agenda

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

Labora&on 3 HTML och struktur övningar/uppgi:er

Labora&on 3 HTML och struktur övningar/uppgi:er Labora&on 3 HTML och struktur övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Skapa em nym HTML-dokument I denna labora&on ska du skapa tre sidor, som

Läs mer

SLUNIK manual. SLUNIK version 2 2010-08-03

SLUNIK manual. SLUNIK version 2 2010-08-03 SLUNIK manual SLUNIK version 2 2010-08-03 Innehåll SLUNIK...1 Kursledare... 1 Lärare... 1 LOGGA IN... 1 Hjälp, inloggning... 2 Välj kurs att administrera... 2 Om du inte ser din kurs i listan... 3 Filtrera

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

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

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2)

Instruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2) 1 Instruktioner Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 2. Logga in (SIDA 2) 3. Hem (SIDA 2) 4. Skapa/redigera sidor (SIDA 3) 41. Lägg till ny sida (SIDA 3) 42. Avancerat (SIDA 4) 5. Texteditor (SIDA

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

http://office.microsoft.com/sv-se/word/ha100444731053.aspx

http://office.microsoft.com/sv-se/word/ha100444731053.aspx 1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan

Läs mer

Steg 5 Webbsidor One.com och OpenOffice Writer Mac OS X

Steg 5 Webbsidor One.com och OpenOffice Writer Mac OS X Steg 5 Webbsidor One.com och OpenOffice Writer Mac OS X Nov 13 Liljedalsdata.se Liljedalsdata Steg 5 Mac Sida 1 Inledning Förkunskaper Steg 1, 2, 3 och 4. Innan du är mogen för att lägga ut en sida på

Läs mer

Lektion 1 - HTML och CSS

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

Läs mer

Struktur & Layout med CSS

Struktur & Layout med CSS 1ME321 Webbteknik 1 Lek0on 5 Struktur & Layout med CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 40 Läsanvisningar Exemplet Gretas Blommor GarreKs

Läs mer

ATT GÖRA WEBBSIDOR. Frivillig labb

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

Läs mer

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

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

Läs mer

2009-08-20. Manual för Typo3 version 4.2

2009-08-20. Manual för Typo3 version 4.2 2009-08-20 Manual för Typo3 version 4.2 1 2 Innehåll: 1. Allmänt 4 2. Grunderna i Typo3 5 2.1 Knappar 5 2.2 Inloggning 5 2.3 Den inledande vyn 6 2.4 Sidträdet 7 3. Sidor 8 3.1 Skapa en ny sida 8 3.1.1

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

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

Ö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

Grundutbildning EPiServer CMS6

Grundutbildning EPiServer CMS6 Grundutbildning EPiServer CMS6 Välkommen! Presentation av kursledare och kursdeltagare Kursinnehåll Verktygsfält och funktioner Skapa sida, spara och publicera Redigera sida Länkar till andra sidor och

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

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se

Manual. Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Manual Anpassad för CMS Made Simple version 1.9.x (uppdaterad 2011-10-16) Birger Eriksson webblots.se Innehållsförteckning Start... 3 Lägg till ny sida...3 Redigera sida som redan finns...3 Titta på resultatet...

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

<header> </header> <footer> </footer>

<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

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

SENIORER SENIORER. Grundläggande IT för. Windows 7. Grundläggande IT för. Windows 7. Eva Ansell Marianne Ahlgren. Eva Ansell Marianne Ahlgren

SENIORER SENIORER. Grundläggande IT för. Windows 7. Grundläggande IT för. Windows 7. Eva Ansell Marianne Ahlgren. Eva Ansell Marianne Ahlgren 600 IT för seniorer Windows 7.qxp 2011-06-0 10:27 Sida 1 Eva Ansell Marianne Ahlgren Eva Ansell Marianne Ahlgren Grundläggande IT för SENIORER Windows 7 Det här är en bok för dig som behöver grundläggande

Läs mer

Daniel Clarhed 2006-06-22

Daniel Clarhed 2006-06-22 Avdelningen för Byggnadsmekanik Daniel Clarhed PM för Byggnadsmekaniks nya hemsida 2006-06-22 Byggnadsmekaniks nya hemsida I juli kommer Byggnadsmekanik få en ny hemsida, stöpt i det LTH-gemensamma utseendet.

Läs mer

1. När du öppnar DW första gången får du några alternativ att välja på:

1. När du öppnar DW första gången får du några alternativ att välja på: Dreamweaver CS3 Grundinställningarna är något du kommer att behöva göra varje gång du kommer till en ny dator i skolan för att kunna vara säker på att programmet arbetar efter XHTML standarden och inte

Läs mer

På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett

På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett På många sätt är webben, när det kommer till kritan, en samling länkar. Inom varje given plats, gör länkarna det möjligt att snabbt navigera från ett relaterat ämne till ett annat. En länk från en sida

Läs mer

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

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

Läs mer

HTML 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

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

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

Läs mer

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

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

Miljön i Windows Vista

Miljön i Windows Vista 1 Miljön i Windows Vista Windows Aero Windows Aero (Aero Glass), som det nya utseendet eller gränssnittet heter i Vista, påminner mycket om glas och har en snygg genomskinlig design. Det är enklare att

Läs mer

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

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

Hur du gör ditt Gilles hemsida - en liten hjälp på vägen

Hur du gör ditt Gilles hemsida - en liten hjälp på vägen Hur du gör ditt Gilles hemsida - en liten hjälp på vägen Sidan 2 - Logga in Sidan 3 - Uppbyggnad av en sida Sidan 4 - Infoga länk Sidan 5 - Infoga bilaga Sidan 6 - Infoga bild Sidan 7-8 Vad betyder knapparna

Läs mer

Skapa en mall för inlämning av skriftliga uppgifter. med hjälp av Open Office Writer

Skapa en mall för inlämning av skriftliga uppgifter. med hjälp av Open Office Writer Skapa en mall för inlämning av skriftliga uppgifter med hjälp av Open Office Writer Enkel guide till ordbehandling med Open Office www.openoffice.org Medieteknik Södertörns högskola 31 januari 2011 uppdaterad

Läs mer

Så här funkar Föreningsliv

Så här funkar Föreningsliv Så här funkar Föreningsliv Logga in Logga in på den adress du fått skickat till dig via mail. Använd det lösenord och användarnamn som du tilldelats. Kom alltid ihåg att logga ut när du skrivit färdigt,

Läs mer

Skapa webbsidor med SeaMonkey Composer

Skapa webbsidor med SeaMonkey Composer 1 av 25 2011-01-18 19:37 Skapa webbsidor med SeaMonkey Composer SeaMonkey Composer låter dig skapa dina egna webbsidor och publicera dem på webben. Du behöver inte känna till HTML för att använda Composer;

Läs mer

REDIGERA BILDER OCH TEXT PÅ DIN WORDPRESS-HEMSIDA

REDIGERA BILDER OCH TEXT PÅ DIN WORDPRESS-HEMSIDA REDIGERA BILDER OCH TEXT PÅ DIN WORDPRESS-HEMSIDA Anna Muñoz Lundgren & MejDej Teknikhjälp, januari 2019. INTRODUKTION Den här guiden är främst avsedd för dig som skapat en hemsida med hjälp av MejDej

Läs mer

«Sida 2 av 4 Till kursens framsida Sida 4 av 4»

«Sida 2 av 4 Till kursens framsida Sida 4 av 4» Sida 1 av 11 Lektion 1: sida 3 av 4 «Sida 2 av 4 Till kursens framsida Sida 4 av 4» 2. Formatera text Du kan ju redan skriva in text, men nu ska vi se hur man formaterar det man skrivit in -- alltså hur

Läs mer

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning.

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Sida 1 av 23 Editor, Avancerad I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Detta dokument syftar till att hjälpa dig som vill jobba mer aktivt

Läs mer

Användarmanual för. 1(1)

Användarmanual för. 1(1) Användarmanual för sofie.landelius@bypasset.se 1(1) 2005-06-13 Innehållsförteckning 1. Logga in... 3 Problem... 3 Content... 4 Account... 4 Help... 4 2. Att skriva en artikel... 5 Publicera artikel alt

Läs mer

Strukturering med XML och DTD

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