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. 2014-02-05 Rune Körnefors (rune.kornefors@lnu.se) 1
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. 2014-02-05 Rune Körnefors (rune.kornefors@lnu.se) 2
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. 2014-02-05 Rune Körnefors (rune.kornefors@lnu.se) 3
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. 2014-02-05 Rune Körnefors (rune.kornefors@lnu.se) 4
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. 2014-02-05 Rune Körnefors (rune.kornefors@lnu.se) 5
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. 2014-02-05 Rune Körnefors (rune.kornefors@lnu.se) 6
Ä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="http://medieteknik.lnu.se/1me101/pics/groda.jpg" 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. 2014-02-05 Rune Körnefors (rune.kornefors@lnu.se) 7