Labora&on 2 HTML och validering övningar/uppgi:er

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

Download "Labora&on 2 HTML och validering övningar/uppgi:er"

Transkript

1 Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors

2 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en antal filer som du kan ladda ner i en zip-fil. Länk &ll zip-filen finns på labora&onens webbsida. Då du packat upp zip-filen, får du en mapp med en HTML-dokument samt en mapp med en antal bildfiler.

3 2. Skapa en nyn HTML-dokument Du ska nu skapa en nyn HTML-dokument, som ska fungera som ingångssida för din webbporwolio. Namnet på filen ska vara index.htm eller index.html. I servern är det förvalt an en fil med dena namn är ingångssidan, då man anger adressen &ll mappen. Filens namn behöver då inte ingå i URL:en &ll sidan, så adressen blir lite kortare. DeNa kommer du se i den sista övningen i denna labora&on, då du ska ta fram den publicerade webbsidan. På de två följande sidorna visas det hur du skapar en nyn HTML-dokument i Dreamweaver respek&ve Komodo Edit. Använder du en annan editor, får du själv ta reda på hur man gör.

4 2a. Skapa nyn HTML-dokument i Dreamweaver Här beskrivs hur du skapar en nyn HTML-dokument i Dreamweaver CS6. Starta programmet Dreamweaver. Välj New i File-menyn. I dialogrutan, du då får, väljer du Blank page. I kolumnen för Page Type väljer du HTML. I kolumnen för Layout väljer du <none>. I popupmenyn för DocType väljer du HTML5. Klicka sedan på knappen Create. Du får då en nyn HTML-dokument med de grundläggande elementen. Kontrollera också an koden inkluderar en meta-tagg där charset är UTF-8. Spara filen med namnet index.htm i din mapp webbsidor, som du skapade i labora&on 1. Obs! Använd kodläget i Dreamweavers fönster.

5 2b. Skapa nyn HTML-dokument i Komodo Edit Här beskrivs hur du skapar en nyn HTML-dokument i Komodo Edit 9. Starta programmet Komodo Edit. Välj New->New File from Template i File-menyn. I dialogrutan, du då får väljer du Web i kolumnen för Categories. I kolumnen för Templates väljer du HTML5. Filnamn, etc. behöver du inte bry dig om nu. Klicka sedan på Open. Du får då en nyn HTML-dokument med de grundläggande elementen, fast det finns ingen meta-tagg som anger teckenkodning. Välj Current File Preferences i Edit-menyn. Kontrollera där an UTF-8 är vald, annars väljer du det och klickar på OK. (se labora&on 1) I HTML-koden lägger du &ll en meta-taggen som anger an UTF-8 ska användas. <meta charset="utf-8"> Spara filen med namnet index.htm i din mapp webbsidor, som du skapade i labora&on 1.

6 3. Titel och första innehåll Sidan ska vara en presenta&on av dig själv, så en lämplig &tel i &tle-elementet är din namn. Skriv in din namn som innehåll i Otle-elementet. Skriv även in din namn som första innehåll i body-elementet. Spara filen. Du bör all&d spara filen e:er varje ändring, så denna instruk&on ges o:ast inte längre i de kommande övningarna. Men du fortsäner alltså då an spara ändå. I illustraoonen används Dreamweaver. Men, oavset om du använder Dreamweaver, Komodo Edit eller någon annan editor, så handlar det nu om innehållet i HTML-koden och då är det likadant i alla editorer. I de följande övningarna i denna laboraoon, beskrivs det vad du ska göra i koden. Det visas också hur det kan se ut i webbläsaren. Däremot visas inte den exakta HTML-koden. Det är din uppgiy at ta fram den. TiTa på exempel i föreläsningar och kursboken om HTML, för at få Ops om hur du skriver koden.

7 4. Öppna sidan i webbläsaren Öppna nu din webbsida i webbläsaren, så an du kan se resultatet. Öppna filen index.htm i webbläsaren. Ändra storlek på fönstret och lägg fönstret för webbläsaren och fönstret för editorn in&ll varandra. Då kan du län växla mellan fönstren och se resultatet av de ändringar och &llägg du gör i HTML-filen. Du bör nu se din namn, dels i flikens &tel och dels som innehåll på sidan.

8 5. Text och avskiljare Skriv nu in lite innehåll på webbsidan. DeNa skrivs i body-delen, dvs mellan start- och slunaggen för body-elementet. Innehållet ska vara en presenta&on av dig själv för dina kurskamrater och lärarna i kursen. Ta upp vad du vill, men det kan t.ex. vara hur gammal du är, var du kommer ifrån, eventuellt &digare utbildning/arbete, vilka intressen du har och vad du vill arbeta med e:er din utbildning. Ta upp vad du vill, men lägg in lite olika informa&on, som kan struktureras enligt övningarna i denna labora&on. Så börja med lite grand nu och fyll på med mer i de kommande övningarna i labora&onen. E:er varje punkt nedan sparar du filen och laddar om sidan i webbläsaren, så an du kan se resultatet. Omge din namn med h1, så an det blir huvudrubrik på sidan. Skriv sedan in lite text om dig själv. Löpande text skrivs inom p-element. Lägg &ll underrubriker med h2-h6, där du vill dela upp det i olika avsnin. Radbrytning mellan textstycken läggs in automa&skt genom p-elementen. Men ibland vill man ha en radbrytning min i en stycke. Det görs med <br>. Lägg in dena på något ställe i en stycke, så an du kan se hur det görs. EN block av en eller flera element (rubriker och stycken) omges med blockquote, för an markera det. I webbläsarna brukar resultatet bli an det blir inskjutet i vänsterkanten. Markera något stycke med blockquote. En horisontell linje läggs in med <hr>. Lägg in det i din kod på lämpligt ställe.

9 6. En&teter Om filen sparas i UTF-8 och meta-taggen anger UTF-8, kan många specialtecken skrivas som vanligt i editorn, utan speciell kod, t.ex. åäöéøü. En del andra tecken måste dock skrivas som en en&tet med koden &kod; där kod anger vilket tecken som avses. Skriv in några en&teter på din webbsida, för an testa. Men försök lägga in det där det är naturligt i din text. &-tecken. E:ersom & är början på en en&tet, tror webbläsaren an det kommer en kod, då man skriver &. Vill man ha en &-tecken, får man skriva en&teten för det, & (ampersand). < och > är tecken som omger taggar. Vill man ha dessa tecken i texten, får man skriva < och > (less than och greater than). Blanktecken som all&d skrivs ut skriver man med (non breakable space). Det kan man lägga in mellan två ord som ska höra ihop och där man inte vill an det ska ske en radbrytning. Skriver man flera vanliga blanktecken e:er varandra, t.ex. abc xyz, så skriver webbläsaren det endast som en blanktecken, dvs abc xyz. Vill man ha en större mellanrum, kan man lägga in flera, t.ex. abc xyz. Observera dock an dena ska inte göras för an få en inskjutning av texten. Då används istället blockquote (eller senare i kursen margin i CSS).

10 7. Listor En lista omges av ol (ordered list, numrerad lista) eller ul (unordered list, punktlista). Varje punkt i listan omges av li-elementet (list item). Skriv in en punktlista med lämpligt innehåll. Ändra det &ll en numrerad lista. Lägg &ll en type-anributet i ol-taggen, för an det ska bli en ordnad lista med a, b, c, etc. En underlista läggs &ll som en ny lista som ingår i en li-element i den ynre listan. Observera an den inre listan ska ligga inu& li-elementet, dvs mellan <li> och </li> och inte mellan raderna (li-elementen).

11 8. Bilder En bild läggs in med img-elementet. I mappen pics (som ingick i det arbetsmaterial du laddade ner) finns det en bild som du kan lägga in för an öva. Men byt sedan ut den mot en egen bild helst en bild på dig själv. Lägg in en img-tagg för bilden teddy.jpg, som ligger i mappen pics. Använd en rela&v adress &ll bilden. Lägg också in en alt-anribut som ger en kort beskrivning av bilden. Vill du justera storleken på bilden gör du det med width- och height-anributen. Använd endast en av dessa anribut, så behålls bildens propor&oner och det andra värdet justeras automa&skt.

12 9. Länkar En länk skapas genom an man dels anger ankaret, som är det man kan klicka på, och dels anger des&na&onen. DeNa görs med med a-elementet och href-anributet i a-taggen. Skapa en länk &ll kursens webbplats. Skriv en a-element där du har lämplig text som ankare och refererar &ll adressen htp://medieteknik.lnu.se/1me321. Lägg &ll anributet target="_blank" i a-taggen. Då öppnas länken i en nyn fönster eller flik i webbläsaren. Du kan också ha en bild som ankare. Skapa en ny länk och lägg in en img-tagg mellan start- och slunaggen för a-elementet. I mappen pics finns två bilder som du kan använda, för an testa. Länka t.ex. &ll följande två sidor: htps://sv.wikipedia.org/wiki/kalmar_slot htps://sv.wikipedia.org/wiki/teleborgs_slot

13 10. Validera HTML-koden För an kontrollera an din kod stämmer med de syntak&ska reglerna för HTML5, validerar du koden i en validator. Använd validatorn på hnps://validator.nu I den första menyn (där det står Adress) väljer du File Upload. Dra sedan din fil &ll rutan &ll höger om Bläddra-knappen. Alterna&vt klickar du på Bläddra-knappen och pekar sedan ut din fil. I menyn för Parser väljer du HTML5. Klicka sedan på knappen Validate. Om koden är korrekt, får du en ruta med grön ram som säger an det är OK. I annat fall får du en lista med felmeddelanden. RäNa i så fall dess fel och validera om, &lls allt är OK. Som övning validerar du också filen errors.htm (som finns i mappen med arbetsmaterialet, L2downloads). Den innehåller en antal fel. Gå igenom dem och räna koden.

14 11. Publicera sidan Publicera din sida i Web Publishing i FirstClass. Använda an&ngen FirstClass klient eller FTP-program (Cyberduck). Om det fungerar med FTP i det nätverk du siner rekommenderar jag an du använder det. Ladda upp filen index.htm och mappen pics direkt i Web Publishing. Både filen och mappen kan dras &ll Web Publishing, så du behöver inte skapa något på servern först. Kontrollera an det fungerar i webbläsaren, genom an skriva in adressen &ll din webbplats. Den är nu htp://www.fc.lnu.se/~anvid där anvid är din eget användarid. E:ersom filen heter index.htm, behöver den inte anges i url:en.

15 Uppgi: U1 Det du gjort i denna labora&on är en övning för en av de sidor du ska ha med i uppgi: U1, dvs ingångssidan för din webbporwolio. Du kan nu behöva gå igenom det igen och göra en del justeringar av kod och innehåll. Krav för denna sida i U1 finns på webbsidan för labora&onen.

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

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

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

Labora&on 1 Variabler och beräkningar övningar/uppgi9er

Labora&on 1 Variabler och beräkningar övningar/uppgi9er Labora&on 1 Variabler och beräkningar övningar/uppgi9er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns

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

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

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

Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er

Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er Labora&on 5 Dynamisk HTML och &mers övningar/uppgi=er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns

Läs mer

Labora&on 3 Objekt i JavaScript övningar/uppgi:er

Labora&on 3 Objekt i JavaScript övningar/uppgi:er Labora&on 3 Objekt i JavaScript övningar/uppgi:er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det

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

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

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

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 Kursplanering

WEBBUTVECKLING Kursplanering Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,

Läs mer

Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor

Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor Labora&on 7 Färger och bilder för webben övningar i Pixlr Editor 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on

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

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

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

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

Övningar i JavaScript del 3

Övningar i JavaScript del 3 Övningar i JavaScript del 3 I dessa övningar tar vi upp datumbjektet Date, arrayer ch lpar. Du utgår från ett prgram där man kan klicka på små bilder ch mtsvarande stra bild visas. Detta är i princip samma

Läs mer

Vilken version av Dreamweaver använder du?

Vilken version av Dreamweaver använder du? Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser

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

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

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

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

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

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

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

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

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

Visa och dölja element med JavaScript

Visa och dölja element med JavaScript Föreläsning i webbdesign Visa och dölja element med JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Visa och dölja element Förändra elementets sdl för display eller visibility

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

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

Labora&on 4 Händelser och drag and drop övningar/uppgi:er

Labora&on 4 Händelser och drag and drop övningar/uppgi:er Labora&on 4 Händelser och drag and drop övningar/uppgi:er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns

Läs mer

icad - Användarbeskrivning V1.1

icad - Användarbeskrivning V1.1 icad - Användarbeskrivning V1.1 2011-01- 18 Denna manual beskriver funk5onaliteten i icad- gränssni

Läs mer

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

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

Läs mer

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

Lathund - webbsidor och filer

Lathund - webbsidor och filer Lathund - webbsidor och filer 2005-09-07 Manualen nås via denna webbadress: http://www.med.lu.se/support Lathund - webbsidor och filer... 1 1. Inloggning... 2 Efter inloggningen... 2 2 Översikt över gränssnittet...

Läs mer

Skeleton plane & Responsiv webbdesign med CSS

Skeleton plane & Responsiv webbdesign med CSS 1ME321 Webbteknik 1 Lek0on 6 Skeleton plane & Responsiv webbdesign med CSS Rune Körnefors Medieteknik 1 2016 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen U2 deadline Exemplet Gretas Blommor

Läs mer

Välkommen som användare av medietekniks och informatiks publika studentserver

Välkommen som användare av medietekniks och informatiks publika studentserver Välkommen som användare av medietekniks och informatiks publika studentserver student.ktd.sh.se Syfte Vår server är en kombinerad ftp- och webbserver med två grundläggande syften: 1) Spara dokument som

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

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

Ö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

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

Kravspecifika.on, pappersprototyp & CSS

Kravspecifika.on, pappersprototyp & CSS 1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna

Läs mer

Formulär används för att ta in anmälningar, göra undersökningar etc. Skapa en ny sidtyp och välj Formulär

Formulär används för att ta in anmälningar, göra undersökningar etc. Skapa en ny sidtyp och välj Formulär Snabbguide till EpiServer CMS 5 Formulär Vad är ett formulär? Formulär används för att ta in anmälningar, göra undersökningar etc. Du bygger upp ett formulär med frågor där besökare kan fylla i information

Läs mer

Lathund FE-edit i Typo3

Lathund FE-edit i Typo3 1(6) Lathund Front-end-editing (FE-edit) i Typo3 Front-end-editing (FE-edit) är ett förenklat sätt att redigera innehåll med Typo3. Helt kort går det ut på att man redigerar innehållet medan man surfar

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

Introduk+on +ll JavaScript if- sats, funk+oner, bilder

Introduk+on +ll JavaScript if- sats, funk+oner, bilder Föreläsning i webbdesign Introduk+on +ll JavaScript if- sats, funk+oner, bilder Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se if- sats I en if- sats kan man kontrollera ee villkor

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

LADDA UPP EN PDF-FIL OCH LÄNKA TILL DEN I DIN ARTIKELTEXT

LADDA UPP EN PDF-FIL OCH LÄNKA TILL DEN I DIN ARTIKELTEXT Joomla Guide 2.5.11 LÄNKAR LADDA UPP EN PDF & LÄNKA TILL I ARTIKEL Sida 1 av 11 LADDA UPP EN PDF-FIL OCH LÄNKA TILL DEN I DIN ARTIKELTEXT I denna guide får du lära dig att: Ladda upp ett PDF dokument på

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

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

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

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

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

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

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

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

Quick Guide till Mahara och din Portfolio

Quick Guide till Mahara och din Portfolio Quick Guide till Mahara och din Portfolio 2012-05-20 A. Arstam Sida 1 Quick Guide till Mahara och din Portfolio Syftet med portfolion är att Du genom reflektion och självutvärdering ska få insikt i ditt

Läs mer

Lathund länkar. Skapa en intern länk som en sida

Lathund länkar. Skapa en intern länk som en sida Lathund länkar SiteVision hanterar enkelt olika typer av länkar: interna länkar (webbsidor som finns på egna webbplatsen) externa länkar (andras webbsidor) länkar till filer/dokument länkar till bilder

Läs mer

Manual för webbpublicering. Enköpings kommun

Manual för webbpublicering. Enköpings kommun Manual för webbpublicering Enköpings kommun Innehåll ATT LOGGA IN I SWWWING 3 Inloggningsrutan 3 GRÄNSSNITTET 4 Filhanteraren 4 Content Management 4 Verktyget Notify - Dags att uppdatera 4 SKAPA OCH REDIGERA

Läs mer

Snabbguide för publicering i Drupal för ki.se

Snabbguide för publicering i Drupal för ki.se Senast uppdaterad 2014-04-20 av Webbteamet Version: 1.0 Snabbguide för publicering i Drupal för ki.se Den här snabbguiden tar bara upp de vanligaste momenten i Drupal. Du hittar hela manualen på webben:

Läs mer

SLU anpassad lathund

SLU anpassad lathund SLU anpassad lathund för personpresentation i EPiServer uppdaterad 17 maj 2011 För att kunna använda CV mallen på SLU webben krävs två saker: 1. Att man är anställd på SLU och har AD behörighet. Detta

Läs mer

Introduk+on +ll programmering i JavaScript

Introduk+on +ll programmering i JavaScript Föreläsning i webbdesign Introduk+on +ll programmering i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se Språk Naturliga språk Mänsklig kommunika+on T.ex. Svenska, engelska,

Läs mer

2007-03-28. Manual för Typo3 version 4.04

2007-03-28. Manual för Typo3 version 4.04 2007-03-28 Manual för Typo3 version 4.04 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.2 Redigera

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

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

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

Men banners kan också placeras i composerblock samt på nyhets- och artikelsidor. Du kan skapa en banner i vilken editor som helst i EpiServer CMS 5.

Men banners kan också placeras i composerblock samt på nyhets- och artikelsidor. Du kan skapa en banner i vilken editor som helst i EpiServer CMS 5. Snabbguide till EpiServer CMS 5 Banners Vad är en banner? En banner är egentligen en bild. Med en banner menas oftast en reklambild eller ett erbjudande. Exempel på banners på innebandy.se (banners är

Läs mer

Att arbeta med centralfiler i Revit AADA20 Rhino/Revit Workshop 2016 LTH Ludvig Hofsten

Att arbeta med centralfiler i Revit AADA20 Rhino/Revit Workshop 2016 LTH Ludvig Hofsten Att arbeta med centralfiler i Revit 2017 AADA20 Rhino/Revit Workshop 2016 LTH Ludvig Hofsten 1. Öppna Revit. 2. Tryck på New 1. Hitta en bra mallfil (template på engelska.) Förslagsvis Mallfil LTH-A som

Läs mer

!!!!! Bruksanvisning !!!!!!!!! För version 1.11.x (uppdaterad 2014-07-09) !!!!!!!!!!!!! Birger Eriksson webblots.se

!!!!! Bruksanvisning !!!!!!!!! För version 1.11.x (uppdaterad 2014-07-09) !!!!!!!!!!!!! Birger Eriksson webblots.se Bruksanvisning För version 1.11.x (uppdaterad 2014-07-09) Birger Eriksson webblots.se Bruksanvisning för webbsidor byggda med CMS Made simple Start... 4 Lägg till eller ändra sida... 4 Lägg till ny sida...

Läs mer

Datakommunika,on på Internet

Datakommunika,on på Internet Webbteknik Datakommunika,on på Internet Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Internet Inter- = [prefix] mellan, sinsemellan, ömsesidig Interconnect = sammanlänka Net =

Läs mer

Administration av lagets arbetsrum lathund

Administration av lagets arbetsrum lathund Administration av lagets arbetsrum lathund 1: Logga in Öppna din webbläsare och gå in på nya Skuru-webben (www.skuruik.se/handboll). 1. Gå till ditt lags arbetsrum (du hittar laget antingen under Barn/Ungdom

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

Ö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

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

[ HUR DU UPPDATERAR FÖRSTASIDAN PÅ OTHELLO.NU ]

[ HUR DU UPPDATERAR FÖRSTASIDAN PÅ OTHELLO.NU ] Logga in på backend www.othello.nu/admin Välj Site för att få upp trädvyn över alla sidor Uppdatera Nyheter Klicka på sidan nyheter i trädvyn och tryck Edit Väl inne på kan du Skapa, Uppdatera och Radera

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

Programutveckling med Java Development Kit. (JDK 1.1.x) och Programmers File Editor (PFE 7.02)

Programutveckling med Java Development Kit. (JDK 1.1.x) och Programmers File Editor (PFE 7.02) UMEÅ UNIVERSITET Institutionen för datavetenskap Thomas Johansson Oktober 1998 Programutveckling med Java Development Kit (JDK 1.1.x) och Programmers File Editor (PFE 7.02) Umeå universitet 901 87 Umeå.

Läs mer

Arg-administratörens guide till Umbraco v 1.2.1

Arg-administratörens guide till Umbraco v 1.2.1 Arg-administratörens guide till Umbraco v 1.2.1 Logga in 1. Öppna en webbläsare och gå till inloggningssidan: https://www.sfog.se/umbraco/ 2. Skriv in följande användarnam & lösenord : 3. Klicka på Logga

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

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

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

Lathund länkar. Skapa en intern länk som en sida

Lathund länkar. Skapa en intern länk som en sida Lathund länkar SiteVision hanterar enkelt olika typer av länkar: interna länkar (webbsidor som finns på egna webbplatsen) externa länkar (andras webbsidor) länkar till filer/dokument länkar till bilder

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

Version X6 Fler tips

Version X6 Fler tips Version X6 Fler tips Jobba i ditt EndNote-bibliotek Hantera PDF:er För att använda dig av den automatiska Find fulltext-funktionen, markera den eller de referenser du vill söka fulltext för och välj References

Läs mer

Kom igång med FrontPage 2003

Kom igång med FrontPage 2003 Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker

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

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

En användarmanual för att publicera Y-bladet på webben

En användarmanual för att publicera Y-bladet på webben Publicera Y-bladet Innehåll Publicera Y-bladet...1 En användarmanual för att publicera Y-bladet på webben...1 Logga in...2 Logga ut...2 Att lägga till en artikel till Y-bladet...3 Ändra ett inlägg...5

Läs mer

Välkomna till. Utbildning i Episerver 9 för Handboksredaktörer och Handboksansvariga

Välkomna till. Utbildning i Episerver 9 för Handboksredaktörer och Handboksansvariga Välkomna till Utbildning i Episerver 9 för Handboksredaktörer och Handboksansvariga Komma igång Öppna din webbläsare och ange URL:en: http://beta.kristianstad.se/epis erver/ Skapa favoritlänk i IE Logga

Läs mer

1. För att komma till inloggningen skriver du in följande adress i din webbläsare: http://skolpost.varnamo.se

1. För att komma till inloggningen skriver du in följande adress i din webbläsare: http://skolpost.varnamo.se 1. För att komma till inloggningen skriver du in följande adress i din webbläsare: http://skolpost.varnamo.se 2. När du är framme vid själva inloggningen, fönstret nedan, där du skriver in ditt användarnamn

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

Lathund för lättredaktörer i InfoGlue

Lathund för lättredaktörer i InfoGlue Lathund för lättredaktörer i InfoGlue Kommunikationsenheten 1 (8) Erik Dahlbergsgatan 11 B, plan 5, Box 100, 405 30 Göteborg 031 786 00 00 www.gu.se Innehållsförteckning Inloggning Gröna plattan Redigeringslänkar

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

Handhavande manual problemhantering

Handhavande manual problemhantering av Handhavande manual problemhantering 1(9) av Flytta dina dokument från H: till OneDrive I och med att Norrtälje kommun går över till Office 365 för skolverksamheten så kommer den egna lagringsplatsen

Läs mer

Publicera material i Learn

Publicera material i Learn Publicera material i Learn Inne i kursrummet har du en ny meny till vänster. Har du arbetat i Fronter tidigare känner du igen dig rätt bra. Du kan publicera material i Kursinformation och i Kursmaterial.

Läs mer