Fler intrducerande övningar i HTML Hittills har vi talat m kder i HTML ch ibland kallat dem taggar. Vi har då menat de kder sm skrivs inm < ch >, sm t.ex. <p> ch <h1>. Ibland behöver vi dck vara lite mer nggranna med benämningarna. Element, taggar ch attribut Följande bild illustrerar de lika begreppen. element%med%innehåll% tmt%element% tagg%(star9agg)% tagg%(slu9agg)% tagg% <kd%atrr="värde">innehåll</kd>% a9ribut% <kd%atrr="värde">% a9ribut% Ett element är både kderna (taggarna) ch det sm frmateras av taggarna. Har man t.ex. <b>abc</b> för att skriva abc i fetstil, så är hela denna text ett element sm börjar med en starttagg ch slutar med en sluttagg. Innehållet är texten mellan dessa taggar. En del element har ingen sluttagg, sm t.ex. elementet <br> för att ge en radbrytning. Detta är endast en psitin i texten ch det finns inget innehåll att frmatera. Detta kallas ett tmt element. Attribut kan förekmma både för element med innehåll ch tmma element ch används för att ge mer detaljerad beskrivning för elementet. T.ex. har vi för img attributen src för att referera till bildfilen ch alt för att ange en alternativ text, <img src="bild.jpg" alt="bild">. I de följande övningarna ska vi titta lite mer på lika typer av element. 1. Ett HTML-dkument Har du kvar ditt HTML-dkument från föregående labratin, så kan du arbeta vidare i det. Annars skapar du ett nytt dkument. Se de inledande övningarna i föregående labratin ch öppna upp ett HTML-dkument både i din editr ch i webbläsaren. Spara ditt HTML-dkument i övningsmappen sm du laddat ner i labratinen, så att ditt dkument hamnar i samma mapp sm dkumentet sida2.htm. 2013-09-19 Rune Körnefrs (rune.krnefrs@lnu.se) 1
2. Länkar En viktig del av webben är länkar mellan lika sidr. En länk består av två delar. Den första är den del sm man klickar på för att aktivera länken. Denna del brukar kallas ankare (anchr) ch specificeras sm ett innehåll i ett a-element, dvs texten mellan en starttagg <a> ch en sluttagg </a>. Den andra delen av länken är destinatinen ch den specificeras med ett href-attribut i a-taggen. Href står för hypertext reference, eftersm länkar även kallas hypertext. Skriv in en länk i ett textstycke i din HTML-kd, t.ex. <p>jag studerar på <a href="http://lnu.se">linnéuniversitetet</a> i Kalmar ch Växjö.</p> Det går ckså skriva det på en rad, men delades här upp för att tydliggöra a-elementet. Gå över till webbläsaren ch testa länken. Du bör kmma till Linnéuniversitetets startsida, då du klickar på länken. Klicka sedan på Tillbaka-knappen i webbläsaren, för att kmma tillbaks till din sida igen. Fullständig eller relativ adress I föregående exempel användes en fullständig url, eftersm destinatinens sida ligger på en annan server. Länkar man till en annan sida inm den egna webbplatsen, så brukar man använda en relativ adress. Lägg in följande kd i ditt HTML-dkument: <p>du kan se exempel på en webbsida på <a href="sida2.htm">den andra sidan</a>.</p> Eftersm ditt HTML-dkument ch sida2.htm ligger i samma mapp, så räcker det med att ange filnamnet i referensen. Visa destinatinen i en annan flik/fönster Länkar man till en annan webbplats, så vill man ibland öppna länken i en ny flik eller nytt fönster. Det gör man med ett target-attribut i a-taggen. Lägg till ett target-attribut i din först länk: <a href="http://lnu.se" target="_blank">linnéuniversitetet</a> Bild sm ett ankare Med värdet _blank anger man att länken ska visas i en ny flik eller nytt fönster. Om det blir en flik eller fönster berr på inställningarna i användarens webbläsare. Det finns även några andra värden för target, men vi går inte in på dem nu. Innehållet mellan start- ch sluttaggen för a-elementet har i exemplen varit en text, men vi kan ckså lägga in ett img-element där. Skriv in följande kd: <p> <a href="sida2.htm" target="_blank"> <img src="bilder/litetsltt.gif" alt=""><br> Slttet </a> </p> I detta fall är alt-attributet tmt (ingen text mellan citatinstecknen). Kan inte bilden visas, så ska det inte vara någn alternativ text. Då finns ju i alla fall texten sm står under bilden. Men alt-attributet måste ändå finnas med i taggen. 2013-09-19 Rune Körnefrs (rune.krnefrs@lnu.se) 2
3. Blck- ch inline-element Ett HTML-element är antingen av typen blck eller inline. Skillnaden är hur det läggs in på sidan då det visas. Blck Ett blck-element består av en eller flera hela rader ch fyller hela bredden av webbläsarens fönster. Exempel på blck-element är textstycken, p, ch rubriker, h1-h6. Även m inte texten fyller hela fönstrets bredd, så upptar elementet hela fönstrets bredd, så att nästa stycke eller rubrik kmmer på raden under. Prva följande kd: <h2>rubrik</h2><p>ett stycke text.</p><p>radbrytningar i kden har ingen betydelse</p><h3>nya rader</h3><p>ny rad då ny p- eller h-tagg börjar.</p> Inline Ett inline-element läggs in sm en del av en rad ch upptar endast den yta sm innehållet kräver. Man kan ha flera inline-element intill varandra ch på samma rad. Exempel på inline-element är b ch i för fetstil ch kursiv stil, a för länkar ch img för bilder. Prva följande kd: <p> En text ch en <b>bild</b> <img src="bilder/litetsltt.gif" alt="sltt"> på samma rad. </p> Kmbinatin av blck ch inline Man kan inte ha blck-element inuti varandra. Så man kan inte ha ett textstycke inuti ett annat textstycke eller i en rubrik ch man kan inte ha en rubrik inuti ett textstycke. Föregående textstycke eller rubrik måste avslutas, innan nästa textstycke eller rubrik får påbörjas. Man kan heller inte ha ett blck-element inuti ett inline-element. Så man kan t.ex. inte ha en rubrik inuti en länk. Gör man fel ch ändå skriver t.ex. en rubrik inuti ett textstycke, så kmmer ändå webbläsaren att visa det, eftersm den försöker tlka det ändå. Men man kan inte vara säker på att det blir vad man tänkt sig ch att det visas på samma sätt i alla webbläsare. Det blir ckså fel, då man validerar kden. Man kan dck ha inline-element inuti blck-element. Ofta går det ckså bra att ha inline-element inuti andra inline-element. Prva följande kd: <p>en text sm är både <b><i>fet ch kursiv</i></b>.</p> Observera att man nästlar element i varandra, så man avslutar först den tagg sm påbörjas sist. Dvs <b><i>...</i></b> eller <i><b>...</b></i>, men inte <b><i>...</b></i>. 2013-09-19 Rune Körnefrs (rune.krnefrs@lnu.se) 3
4. Elementen div ch span De element sm vi gått igenm hittills har en speciell betydelse, t.ex. skapa rubrik, textstycke, länk, etc. Ibland vill man gruppera lika delar i kden, t.ex. navigeringslänkarna, sidften en infrmatinsruta, etc. Man kan då använda sig av ett element sm kallas div (divisin). När vi sedan kmmer in på CSS ch JavaScript, så kan man hänvisa till ett sådant element, för att ge det en stil eller kunna gör någt sm t.ex. visa ch dölja det. För att skilja på de lika div-elementen ger man dem varsitt id-attribut. Skapa ett nytt HTML-dkument. Spara det i samma mapp sm sida2.htm ch kalla ditt nya dkument index.htm. Lägg in följande kd i bdy-delen: <div id="header"> <img src="bilder/litetsltt.gif" alt="lg" height="70"> <h1>slttet</h1> <div id="nav"> <ul> <li><a href="index.htm">start</a></li> <li><a href="sida2.htm">sida 2</a></li> </ul> <div id="cntent"> <h2>startsida</h2> <p>välkmmen till sidan m Slttet.</p> <p><img src="bilder/sltt.jpg" alt="slttet" width="400"></p> <div id="fter"> <p><i>&cpy; Slttets vänner</i></p> Titta på kden i webbläsaren. Du ser ingenting av div-taggarna. De är endast till för att strukturera upp kden i lika delar. Namnen i id-attributen hittar man på själv vad man vill ha. Det är genm dem sm man sedan refererar till div-elementen i CSS eller JavaScript, men det gör vi längre fram i kursen. Div är ett blck- element Elementet div är ett blck-element, men det skiljer sig från andra blck-element genm att man i div kan lägga alla typer av element. Det går att ha både blck-element ch inline-element inuti i div. Man kan till ch med ha nya div-element inuti ett div-element. Span, mtsvarande inline- element Vill man gruppera en del av någt på en rad, t.ex. en del av texten i ett textstycke, så kan man använda span. Det fungerar på samma sätt sm div, med den skillnaden att span är ett inline-element. Det är först då vi kmmer in på CSS sm vi har nytta av span, så vi tar inget exempel på det här, utan återkmmer till det då. 2013-09-19 Rune Körnefrs (rune.krnefrs@lnu.se) 4
5. Attributet id Med attributet id såg vi i föregående övning att vi kan ge div-elementen lika namn. Dessa namn kan skrivas med bkstäver (i engelska alfabetet), siffrr ch understrykningstecken. Man brukar välja namn sm beskriver vd elementet används till. Det är främst för att kunna referera till ett element i CSS eller JavaScript sm man använder id. Det användningsmrådet återkmmer vi till i kmmande labratiner i kursen. Det finns dck även en annan användning av id, sm vi ska gå igenm här. Man kan använda id sm en destinatin i en länk. Länk till en del av en webbsida I en adress i en länk kan man skriva ett stakettecken följt av ett id (t.ex. #abc) för att få webbläsaren att scrlla fram till det element sm har id-attributet med det namn man har i adressen. Skapa ett nytt HTML-dkument ch kalla det sida3.htm. Spara det i samma mapp sm dina övriga HTML-dkument. I bdy-delen skriver du in följande kd: <p><a href="#sectin2">gå direkt till del 2</a></p> <hr> <h1 id="tp">sida 3</h1> <p>någn text</p> upprepa detta p-element, så att du får så många rader att texten behöver scrllas i webbläsaren. <p><a href="#tp">gå till tppen</a></p> <hr> <h2 id="sectin2">del 2</h2> <p><a href="#tp">gå till tppen</a></p> <hr> I rubrikerna h1 ch h2 finns det id-attribut med unika namn för dessa. Man kan kalla dem vad man vill, så det behöver inte vara tp ch sectin2 sm vi valde här. I länkarna refererar vi till dessa id genm att skriva# följt av id. Prva att öppna sidan i webbläsaren ch klicka på länkarna. Länk till en del av en annan sida Öppna någn av dina föregående webbsidr i editrn ch skriv in följande länk någnstans: <p><a href="sida3.htm#sectin2">gå till del 2 på sida 3</a></p> I href-attributet skriver vi först den sida sm ska öppnas ch sedan till det id sm ska scrllas fram, då användaren klickar på länken. Öppna sidan i webbläsaren ch prva att klicka på länken. 2013-09-19 Rune Körnefrs (rune.krnefrs@lnu.se) 5
6. HTML5-taggar I övning 4 infördes div-element för att dela upp sidans kd i sidhuvud, sidft, navigering ch innehåll. Vi införde då ckså id med namnen header, fter, nav ch cntent. I HTML5 finns det särskilda element för detta. Vi tittar krt på dem här, men kmmer sedan i kursen att frtsätta använda div istället. Det är lite mer flexibelt ch fungerar även i äldre webbläsare sm inte har stöd för HTML5. Skapa ett nytt HTML-dkument ch spara det med namnet sida5.htm. Skriv in följande kd: <header> <img src="bilder/litetsltt.gif" alt="lg" height="70"> <h1>slttet</h1> </header> <nav> <ul> <li><a href="index.htm">start</a></li> <li><a href="sida2.htm">sida 2</a></li> </ul> </nav> <article> <h2>startsida</h2> <p>välkmmen till sidan m Slttet.</p> <p><img src="bilder/sltt.jpg" alt="slttet" width="400"> </article> <fter> <p><i>&cpy; Slttets vänner</i></p> </fter> Detta är samma kd sm i övning 4, fast div-taggarna är utbytta mt header, nav, article ch fter. Har vi endast en av varje, behöver vi inga id-attribut, för att skilja dem åt. Dessa element fungerar på samma sätt sm div, genm att de endast är till för att dela upp kden i lika delar. De har ingen speciell presentatin i webbläsaren, så tittar man på sidan i webbläsaren, ser den likadan ut sm en kd utan dessa element. Då vi sedan kmmer in på CSS kmmer vi att se hur vi kan stilsätta dessa element ch därmed visa de lika delarna på lika delar av webbsidan. Men vi kmmer då att använda ss av div med id, eftersm det finns ett bredare stöd för det i webbläsarna, men principen är densamma sm med användning av vanstående element i HTML5. Slut Nu har vi gått igenm det mest användbara i HTML, för att kunna strukturera upp kden i ett HTMLdkument. Öva nu på egen hand, genm att experimentera med kden. Titta gärna igenm referenslistan för HTML5 på W3Schls webbplats (www.w3schls.cm). Du ser då att det finns en hel del element sm vi inte tagit upp i övningarna i denna ch föregående labratin, men vi har gått igenm det mest fundamentala. Resten tar vi upp vid behv, då vi arbetar med andra delar av webbdesign. I nästa labratin intrducerar vi språket CSS, för att kunna sätta stil på det sm struktureras med HTML. 2013-09-19 Rune Körnefrs (rune.krnefrs@lnu.se) 6