Medieteknik
Fler introducerande övningar i HTML Hittills har vi talat om koder i HTML och ibland kallat dem taggar. Vi har då menat de koder som
skrivs inom < och >, som t.ex. <p> och <h1>. Ibland behöver vi dock vara lite mer noggranna med
benämningarna.
Element, taggar och attribut Följande bild illustrerar de olika begreppen.
element%med%innehåll%
tagg%(star9agg)%
tagg%(slu9agg)%
<kod%atrr="värde">innehåll</kod>%
a9ribut%
tomt%element%
tagg%
<kod%atrr="värde">%
a9ribut%
Ett element är både koderna (taggarna) och det som formateras av taggarna. Har man t.ex. <b>abc</b>
för att skriva abc i fetstil, så är hela denna text ett element som börjar med en starttagg och slutar med
en sluttagg. Innehållet är texten mellan dessa taggar. En del element har ingen sluttagg, som t.ex.
elementet <br> för att ge en radbrytning. Detta är endast en position i texten och det finns inget
innehåll att formatera. Detta kallas ett tomt element.
Attribut kan förekomma både för element med innehåll och tomma element och 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 och
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å olika typer av element.
1. Ett HTML-dokument
Har du kvar ditt HTML-dokument från föregående laboration, så kan du arbeta vidare i det. Annars
skapar du ett nytt dokument.
•
•
Se de inledande övningarna i föregående laboration och öppna upp ett HTML-dokument både i
din editor och i webbläsaren.
Spara ditt HTML-dokument i övningsmappen som du laddat ner i laborationen, så att ditt
dokument hamnar i samma mapp som dokumentet sida2.htm.
2013-09-19 – Rune Körnefors ([email protected])
1
Medieteknik
2. Länkar
En viktig del av webben är länkar mellan olika sidor. En länk består av två delar. Den första är den del
som man klickar på för att aktivera länken. Denna del brukar kallas ankare (anchor) och specificeras
som ett innehåll i ett a-element, dvs texten mellan en starttagg <a> och en sluttagg </a>. Den andra
delen av länken är destinationen och den specificeras med ett href-attribut i a-taggen. Href står för
hypertext reference, eftersom länkar även kallas hypertext.
•
Skriv in en länk i ett textstycke i din HTML-kod, t.ex.
<p>Jag studerar på
<a href="http://lnu.se">Linnéuniversitetet</a>
i Kalmar och Växjö.</p>
•
o Det går också skriva det på en rad, men delades här upp för att tydliggöra a-elementet.
Gå över till webbläsaren och testa länken.
o Du bör komma till Linnéuniversitetets startsida, då du klickar på länken. Klicka sedan på
Tillbaka-knappen i webbläsaren, för att komma tillbaks till din sida igen.
Fullständig eller relativ adress I föregående exempel användes en fullständig url, eftersom destinationens sida ligger på en annan
server. Länkar man till en annan sida inom den egna webbplatsen, så brukar man använda en relativ
adress.
•
Lägg in följande kod i ditt HTML-dokument:
<p>Du kan se exempel på en webbsida på
<a href="sida2.htm">den andra sidan</a>.</p>
o
Eftersom ditt HTML-dokument och sida2.htm ligger i samma mapp, så räcker det med att
ange filnamnet i referensen.
Visa destinationen 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>
o
o
o
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 beror 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.
Bild som ett ankare Innehållet mellan start- och sluttaggen för a-elementet har i exemplen varit en text, men vi kan också
lägga in ett img-element där.
•
Skriv in följande kod:
<p>
<a href="sida2.htm" target="_blank">
<img src="bilder/litetslott.gif" alt=""><br>
Slottet
</a>
</p>
o
I detta fall är alt-attributet tomt (ingen text mellan citationstecknen). Kan inte bilden visas,
så ska det inte vara någon alternativ text. Då finns ju i alla fall texten som står under
bilden. Men alt-attributet måste ändå finnas med i taggen.
2013-09-19 – Rune Körnefors ([email protected])
2
Medieteknik
3. Block- och inline-element
Ett HTML-element är antingen av typen block eller inline. Skillnaden är hur det läggs in på sidan då
det visas.
Block Ett block-element består av en eller flera hela rader och fyller hela bredden av webbläsarens fönster.
Exempel på block-element är textstycken, p, och rubriker, h1-h6. Även om inte texten fyller hela
fönstrets bredd, så upptar elementet hela fönstrets bredd, så att nästa stycke eller rubrik kommer på
raden under.
•
Prova följande kod:
<h2>Rubrik</h2><p>Ett stycke
text.</p><p>Radbrytningar i koden 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 som en del av en rad och upptar endast den yta som innehållet kräver. Man
kan ha flera inline-element intill varandra och på samma rad. Exempel på inline-element är b och i för
fetstil och kursiv stil, a för länkar och img för bilder.
•
Prova följande kod:
<p>
En text och en <b>bild</b>
<img src="bilder/litetslott.gif" alt="slott">
på samma rad.
</p>
Kombination av block och inline Man kan inte ha block-element inuti varandra. Så man kan inte ha ett textstycke inuti ett annat
textstycke eller i en rubrik och 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 block-element inuti ett inline-element. Så man kan t.ex. inte ha en rubrik
inuti en länk.
Gör man fel och ändå skriver t.ex. en rubrik inuti ett textstycke, så kommer ändå webbläsaren att visa
det, eftersom den försöker tolka det ändå. Men man kan inte vara säker på att det blir vad man tänkt
sig och att det visas på samma sätt i alla webbläsare. Det blir också fel, då man validerar koden.
Man kan dock ha inline-element inuti block-element. Ofta går det också bra att ha inline-element inuti
andra inline-element.
•
Prova följande kod:
<p>En text som är både <b><i>fet och kursiv</i></b>.</p>
o
Observera att man nästlar element i varandra, så man avslutar först den tagg som 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örnefors ([email protected])
3
Medieteknik
4. Elementen div och span
De element som vi gått igenom hittills har en speciell betydelse, t.ex. skapa rubrik, textstycke, länk,
etc. Ibland vill man gruppera olika delar i koden, t.ex. navigeringslänkarna, sidfoten en
informationsruta, etc. Man kan då använda sig av ett element som kallas div (division). När vi sedan
kommer in på CSS och JavaScript, så kan man hänvisa till ett sådant element, för att ge det en stil eller
kunna gör något som t.ex. visa och dölja det. För att skilja på de olika div-elementen ger man dem
varsitt id-attribut.
•
•
Skapa ett nytt HTML-dokument. Spara det i samma mapp som sida2.htm och kalla ditt nya
dokument index.htm.
Lägg in följande kod i body-delen:
<div id="header">
<img src="bilder/litetslott.gif" alt="Logo" height="70">
<h1>Slottet</h1>
</div>
<div id="nav">
<ul>
<li><a href="index.htm">Start</a></li>
<li><a href="sida2.htm">Sida 2</a></li>
</ul>
</div>
<div id="content">
<h2>Startsida</h2>
<p>Välkommen till sidan om Slottet.</p>
<p>...</p>
<p><img src="bilder/slott.jpg" alt="Slottet" width="400"></p>
</div>
<div id="footer">
<p><i>&copy; Slottets vänner</i></p>
</div>
•
Titta på koden i webbläsaren. Du ser ingenting av div-taggarna. De är endast till för att strukturera
upp koden i olika delar. Namnen i id-attributen hittar man på själv vad man vill ha. Det är genom
dem som man sedan refererar till div-elementen i CSS eller JavaScript, men det gör vi längre fram
i kursen.
Div är ett block-­‐element Elementet div är ett block-element, men det skiljer sig från andra block-element genom att man i div
kan lägga alla typer av element. Det går att ha både block-element och inline-element inuti i div. Man
kan till och med ha nya div-element inuti ett div-element.
Span, motsvarande inline-­‐element Vill man gruppera en del av något på en rad, t.ex. en del av texten i ett textstycke, så kan man använda
span. Det fungerar på samma sätt som div, med den skillnaden att span är ett inline-element.
Det är först då vi kommer in på CSS som vi har nytta av span, så vi tar inget exempel på det här, utan
återkommer till det då.
2013-09-19 – Rune Körnefors ([email protected])
4
Medieteknik
5. Attributet id
Med attributet id såg vi i föregående övning att vi kan ge div-elementen olika namn. Dessa namn kan
skrivas med bokstäver (i engelska alfabetet), siffror och understrykningstecken. Man brukar välja
namn som beskriver vd elementet används till.
Det är främst för att kunna referera till ett element i CSS eller JavaScript som man använder id. Det
användningsområdet återkommer vi till i kommande laborationer i kursen.
Det finns dock även en annan användning av id, som vi ska gå igenom här. Man kan använda id som
en destination 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
scrolla fram till det element som har id-attributet med det namn man har i adressen.
•
•
Skapa ett nytt HTML-dokument och kalla det sida3.htm. Spara det i samma mapp som dina övriga
HTML-dokument.
I body-delen skriver du in följande kod:
<p><a href="#section2">Gå direkt till del 2</a></p>
<hr>
<h1 id="top">Sida 3</h1>
<p>Någon text</p>
<p>...</p>
<p>...</p>
upprepa detta p-element, så att du får så många
rader att texten behöver scrollas i webbläsaren.
<p>...</p>
<p><a href="#top">Gå till toppen</a></p>
<hr>
<h2 id="section2">Del 2</h2>
<p>...</p>
<p>...</p>
<p><a href="#top">Gå till toppen</a></p>
<hr>
I rubrikerna h1 och h2 finns det id-attribut med unika namn för dessa. Man kan kalla dem
vad man vill, så det behöver inte vara top och section2 som vi valde här.
o I länkarna refererar vi till dessa id genom att skriva# följt av id.
Prova att öppna sidan i webbläsaren och klicka på länkarna.
o
•
Länk till en del av en annan sida •
Öppna någon av dina föregående webbsidor i editorn och skriv in följande länk någonstans:
<p><a href="sida3.htm#section2">Gå till del 2 på sida 3</a></p>
I href-attributet skriver vi först den sida som ska öppnas och sedan till det id som ska
scrollas fram, då användaren klickar på länken.
Öppna sidan i webbläsaren och prova att klicka på länken.
o
•
2013-09-19 – Rune Körnefors ([email protected])
5
Medieteknik
6. HTML5-taggar
I övning 4 infördes div-element för att dela upp sidans kod i sidhuvud, sidfot, navigering och innehåll.
Vi införde då också id med namnen header, footer, nav och content. I HTML5 finns det särskilda
element för detta. Vi tittar kort på dem här, men kommer sedan i kursen att fortsätta använda div
istället. Det är lite mer flexibelt och fungerar även i äldre webbläsare som inte har stöd för HTML5.
•
•
Skapa ett nytt HTML-dokument och spara det med namnet sida5.htm.
Skriv in följande kod:
<header>
<img src="bilder/litetslott.gif" alt="Logo" height="70">
<h1>Slottet</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älkommen till sidan om Slottet.</p>
<p>...</p>
<p><img src="bilder/slott.jpg" alt="Slottet" width="400">
</article>
<footer>
<p><i>&copy; Slottets vänner</i></p>
</footer>
o
Detta är samma kod som i övning 4, fast div-taggarna är utbytta mot header, nav, article
och footer. 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 som div, genom att de endast är till för att dela upp koden i
olika delar. De har ingen speciell presentation i webbläsaren, så tittar man på sidan i webbläsaren, ser
den likadan ut som en kod utan dessa element. Då vi sedan kommer in på CSS kommer vi att se hur vi
kan stilsätta dessa element och därmed visa de olika delarna på olika delar av webbsidan. Men vi
kommer då att använda oss av div med id, eftersom det finns ett bredare stöd för det i webbläsarna,
men principen är densamma som med användning av ovanstående element i HTML5.
Slut
Nu har vi gått igenom det mest användbara i HTML, för att kunna strukturera upp koden i ett HTMLdokument. Öva nu på egen hand, genom att experimentera med koden.
Titta gärna igenom referenslistan för HTML5 på W3Schools webbplats (www.w3schools.com). Du
ser då att det finns en hel del element som vi inte tagit upp i övningarna i denna och föregående
laboration, men vi har gått igenom det mest fundamentala. Resten tar vi upp vid behov, då vi arbetar
med andra delar av webbdesign.
I nästa laboration introducerar vi språket CSS, för att kunna sätta stil på det som struktureras med
HTML.
2013-09-19 – Rune Körnefors ([email protected])
6
