Introducerande övningar i HTML
|
|
- Rut Falk
- för 8 år sedan
- Visningar:
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 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 merLabora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er
Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi
Läs merSprå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 merLabora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er
Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi
Läs merInför prov 1 i webbdesign
Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke
Läs merLaboration 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 merEn 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
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 merNä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 merWEBBUTVECKLING Kursplanering
Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,
Läs merFrontPage 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 merWebbens 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 merMappar 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 merDu 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 merManual för visionutv.net Redigera
Manual för visionutv.net Redigera Version 2.0 Visionutveckling 2004 Innehåll: 1 Om Redigera 3 1.1 Bakgrund 3 1.2 Hur Redigera är uppbyggt 3 1.3 Vad är? 4 2 Inloggning 6 3 Nyheter i Redigera 2.0 7 3.1 Funktionsknappar
Läs merLaboration 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 merWebbdesign vt. 2010. Innehållsförteckning
Webbdesign vt. 2010 mångar: Kl. 8:30 12:00 Innehållsförteckning 2. FTP-hur gör man? 3. Grundtaggar 5. Tabeller 6. Infoga bilder 7. Rubriker och fonter 8. Övning 1 9. Installera HTML-edit 11. Startsidans
Läs merLabora&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 mer3. 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 merWebbdesign vt. 2009. Innehållsförteckning
Webbdesign vt. 2009 Fysiska träffar onsdagkvällar: Kl. 18:00 21:00 28/1 11/2 11/3 25/3 1/4 22/4 6/5 Innehållsförteckning 2. FTP-hur gör man? 3. Vad ska jag göra? 4. Grundtaggar 6. Tabeller 7. Infoga bilder
Läs merLabora&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 merIntroduktion 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 merInternet A. HTML Grunder. 02-01-14 Maximilien Chiang 1
Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min
Läs merSTEGBESKRIVNING - 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 merAnvä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 merKommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod
html och css Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa : http://www.w3schools.com/browsers/
Läs mer12 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 merKom 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 merORDLISTA WEBBDESIGN 100P
ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.
Läs merLabora&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 merXhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)
Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet
Läs mer20/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 merArbetsmaterial 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 merHTML. 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 merLaboration 2: Xhtml och CSS.
Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och
Läs merLabora&on 5 CSS och layout samt fråga E övningar/uppgi>er
Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er 1M321 Webbteknik 1, 7,5hp Medieteknik 2017 Rune Körnefors rune.kornefors@lnu.se 1. Dokument i övningarna I denna labora&on finns inga filer ar
Läs merAtt 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 merTillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.
Laboration 2: HTML och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en enkel webbplats med layout, bakgrundsbilder, minst en meny
Läs merWEBDESIGN 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 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 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 merLektion 2 - CSS. CSS - Fortsätt så här
Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt
Läs merIkon 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 merAtt 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 merDatorö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 merInledning 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 merHTML. 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 merVERKTYGSFÄ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 merManual 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 merDokument 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 merSidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.
Lab1 - CV-sidan Du ska bygga en variant av en CV-sida i HTML och CSS. Sidan ska åtminstone innehålla en bild på dig, en klassisk tabell med utbildningar/erfarenheter, ditt favoritcitat, en eller flera
Läs merGuide. 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 merWEBDESIGN 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 merMedieteknologi 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 merMacromedia. 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 merLabora&on 8 Formulär övningar/uppgi6er
Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument
Läs merCarl-Oscar Hermansson WEBB DESIGN
Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...
Läs merF02 En första sida. Dagens agenda
F02 En första sida Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML Indentering Block/inline-element Struktur Se demo #2
Läs merLabora&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 merSLUNIK 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 merAdobe. 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 merITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML
ITK:P2 F1 FTP, HTTP, HTML, XML och XHTML DSV Peter Mozelius 1 Hemsidor med HTML Hur många av er har provat på att bygga en egen hemsida med HTML eller XHTML? För hand eller med hjälpverktyg? Har ni lagt
Läs merInstruktioner. 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 merZimplit 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 merhttp://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 merSteg 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 merLektion 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 merStruktur & 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 merATT 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 merGö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 mer2009-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 merTabeller. Lektion 7. en tabellrubrikcell som centrerad och i fetstil.
Lektion 7 Tabeller Under denna lektion kommer du att få lära dig hur man bygger upp tabeller med HTML och hur man styr layout och utseende på en webbsida som innehåller tabeller. Enkla tabeller Av tradition
Läs mer03/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 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 merGrundutbildning 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 merAnvä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 merManual. 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 merKurs 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>
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 merAPA 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 merSENIORER 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 merDaniel 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 mer1. 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 merPå 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 merOlika 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 merHTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015
. HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17
Läs merF02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet
Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet F02 HTML Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML
Läs merInnehå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 merSophia 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 merMiljö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 merHTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)
HTML och CSS Eric Elfving Institutionen för Datavetenskap (IDA) Upplägg Introduktion Grundläggande HTML Ändra utseende med CSS 2 Introduktion HyperText Markup Language används för att strukturera text
Läs merHur 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 merSkapa 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 merSå 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 merSkapa 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 merREDIGERA 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 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 merI 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 merAnvä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 merStrukturering med XML och DTD
Föreläsning i webbdesign Strukturering med XML och DTD Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se PresentaCon SCl Layout OrganisaCon/struktur InformaConsobjekt Länkar Innehåll/data
Läs mer