This is an old revision of the document!
Grunderna i HTML5
Syfte
Uppgiften går ut på att bekanta sig med html som märkspråk och hur språket används till att bygga upp en semantisk struktur hos textmaterial. En viktig princip hos HTML är separera på innehåll och presentation. I uppgiften introduceras därför även CSS som är ett viktigt verktyg i HTML 5 för att beskriva presentation och utseende.
Uppgift
- Starta med att kolla upp vad alla nedanstående taggar används till i HTML5.
- Första uppgiften går ut på att ta ett färdigt textmaterial och bygga upp en semantisk struktur av detta i html 5.
- Andra uppgiften går ut på att skapa en CSS-fil för att styra utseendet på den fil vi skapat i deluppgift 1.
Skapa semantisk struktur i HTML5
Länkat med uppgiften finns en fil historia.txt som vi ska skapa en html5-sida av. Den nya filen ska heta historia.html. Fokus på uppgiften är att skapa en semantisk struktur där textens olika delar omsluts av taggar enligt rekommenderat bruk. I tabellen nedan anges exempel på taggar som särskilt bör beaktas i uppbyggandet av sidan. Alla behöver dock inte användas men kan vara en utgångspunkt att överväga. Ingen text får läggas till eller tas från den presenterade textmassan.
Exempel på taggar och deras användning
DOCTYPE, html, head, title, body Struktur på omslagsinformation section, p Semantisk struktur av text header, hgroup, h1, h2 Hantering av rubriker aside, nav, footer Specialbehandlade textblock, såsom marginaltext, navigationsrutor och sidfötter. em, abbr, dfn, var Speciellt markerade ord. figure, img, figcaption Hantering av figurer och bilder table, tbody, thead, tr, th, td, caption Hantering av tabeller ul, ol, li Hantering av listor
Förutom god struktur enligt gängse normer, finns följande explicita krav på det inlämnade dokumentet:
- Förklaringen till textens ursprung ska anges i en header-tag tillsammans med sidans rubrik.
- Ni ska använda taggen abbr på förkortningarna ARPA och WWW. Du får använda taggen på fler förkortningar också om du vill.
- Den refererade bilden skall göras till en figur med bildtext och visas med img.
- Tabellen ska göras om till en html5-tabell med table, thead, tbody, tr, th, td och caption.
- Under rubriken ”Se även” skall länkarna anges i en punktlista.
- Sista raden ”Obligatorisk uppgift […]” skall bli en sidfot.
- Varje kapitel bör vara en section.
- De webbadresser som finns med inom parenteser i texten ska inte skrivas ut utan användas till länkar eller bilder.
- Navigationsmenyn skall referera till ankare för respektive kapitel. Använd id (inte name).
Länka CSS till HTML5
Vanligtvis vill vi att olika sidor inom en domän eller webbplats alla följer en viss stil. Genom att separera innehåll från presentation kan vi därför skapa flera olika sidor där fokus är på innehåll och text. Därefter länkas dessa sidor till en gemensam stilmall. Genom att göra förändringar i stilmallen påverkas då utseendet på alla sidor utan att vi behöver ändra i individuella sidor. Att förändra utseendet på en hel webbplats blir därmed enkelt.
Med hjälp av taggen link kan vi länka bl.a. stilmallar till våra dokument. Uppgiften går ut på att skapa en CSS-fil som är länkad till dokumentet skapat i den tidigare uppgiften. I CSS-filen ska vi styra utseende genom att koppla stil till olika taggar (dvs. inte använda ID- eller class-information).
Följande ska finnas med:
- Ändra rubrikerna till valfri färg (utom svart) och fonten ska vara av sans-serif typ.
- Fonten på paragraftext ska vara av typen serif.
- Ändra bakgrundsfärg på navigationsrutorna till #EAEAE4, med en marginal till omgivande element av 1ex och en padding på lika mycket. Rutan ska också ha en heldragen kant som är en pixel tjock och svart.
- Paragrafer ska ha marginal-justerad text.
- Bilder skall ha en bredd av 400 pixlar.
- Hela sidan skall ha en padding på 3ex.
- Gör fler lämpliga formatteringar så att sidan ser bra ut.
Inlämning
Lämna in filerna historia.html samt pagestyle.css.
All HTML ni skriver ska vara korrekt och validerad med exempelvis http://html5.validator.nu/.
Din CSS-fil kan valideras med http://jigsaw.w3.org/css-validator/ (Ange CSS3 under ”Fler val”)
<?php /* <!DOCTYPE html> <html lang=“sv”>
<head>
<title>Internets historia</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="pagestyle.css"/>
</head>
<body>
<header>
<hgroup>
<h1>Internets historia</h1>
<h2>
Artikeln är till stora delar baserad på den artikel som finns i
<a href="http://sv.wikipedia.org/wiki/Internets_historia">Wikipedia</a>
</h2>
</hgroup>
</header>
<nav>
<h1>Innehåll</h1>
<ol>
<li><a href="#skapas">Internet skapas</a></li>
<li><a href="#bubblan">IT-bubblan</a></li>
<li><a href="#epost">E-post</a></li>
<li><a href="#utveckling">Senare utveckling</a></li>
<li><a href="#lyckas">Varför lyckades Internet?</a></li>
<li><a href="#se">Se även</a></li>
</ol>
</nav>
<section id="skapas">
<h1>Internet skapas</h1>
<figure>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/First_Web_Server.jpg/800px-First_Web_Server.jpg"
alt="Första WWW-servern"/>
<figcaption>NeXT-enheten Tim Berners-Lee använde som den första <abbr title="World Wide Web">WWW</abbr>-servern.</figcaption>
</figure>
<p>Föregångaren till Internet, <abbr title="Advanced Research Projects Agency Network">
ARPANET</abbr>, skapades av USA:s militära forskningsanstalt Advanced Research Projects Agency,
<abbr title="Advanced Research Projects Agency">ARPA</abbr> är 1969.
Telekomgiganten AT&T ägde ledningarna som band ihop datorer i
<abbr title="Advanced Research Projects Agency Network">ARPANET</abbr>. Den 29
oktober 1969 ledde Leonard Kleinrock ett forskarlag som lyckades få en
<abbr title="University of California, Los Angeles">UCLA</abbr>-dator att kommunicera
med en dator på ett annat forskningsinstitut. Det första meddelandet som skickades iväg
var kommandot "LOG", som skulle användas för att logga in på en annan dator. Mottagardatorn
kraschade emellertid efter att den tagit emot "O":et. Det första meddelandet som sändes
blev därför "LO".</p>
<p>Syftet med <abbr title="Advanced Research Projects Agency Network">ARPANET</abbr>
var att experimentera med tekniker för datanät, bland annat hantering av avbrott och
möjlighet att kringgå utslagna nätverksnoder. Det är troligtvis detta som har gett
upphov till myten att Internet skapades för att klara ett kärnvapenangrepp.</p>
<p>År 1985 tog universiteten, i första hand i USA, över och skapade ett datanät
mellan sig med denna teknik. Det spred sig ganska fort till andra länders
universitet, även till Sverige. Ulf Bilting rekvirerade via Chalmers Tekniska
Högskola, det första svenska <abbr title="Internet Protocol">IP</abbr>-nätnumret 1984.
Vid denna tid fanns telnet, e-post, <abbr title="File Transfer Protocol">FTP</abbr>
och vissa andra tjänster, men inte webbsidor.</p>
<p>Tim Berners-Lee kombinerade ett antal olika tekniker under slutet av 1980-talet
för att skapa http-protokollet och vad man idag kallar World Wide Web eller
webben, ett system som möjliggör ihoplänkning av i princip all information. Dock
måste man ta i beaktande att det var ett universitet i Schweiz som var först med
den ursprungliga idén till detta.</p>
</section>
<section id="bubblan">
<h1>IT-bubblan</h1>
<p>I början av 1990-talet tog vanliga men erfarna datoranvändare äver. I mitten
till slutet av 1990-talet började "vanligt folk" använda nätet i samband med att
World Wide Web slog igenom. Det skapade en hausse på IT omkring
millennieskiftet, där många företag satsade stora belopp på design av snygga
webbsidor på nätet och intensiv marknadsföring av bredband. Till slut sprack
IT-bubblan, och många av de nyanställda webbdesignarna blev arbetslösa. Men
IT-bubblan förde med sig att användningen av internet mångdubblades på några år,
jämförbart med försäljningsexplosionen av TV-apparater i början av 1950-talet.</p>
</section>
<section id="epost">
<h1>E-post</h1>
<p>E-post (elektroniskt överförda brev) är en av de äldsta tjänsterna på internet.
Den används väldigt mycket och har stor betydelse, även om det dykt upp andra
sätt att skicka meddelanden, såsom via sociala nätverk. Det går också att
missbruka eposttjänsten, och det är över epost som den mesta spammen skickas ut.</p>
</section>
<section id="utveckling">
<h1>Senare utveckling</h1>
<p>På 1990-talet uppstod World Wide Web (<abbr title="World Wide Web">WWW</abbr>),
med Internet som grund. Den första webbläsaren skapades av Tim Berners-Lee på
Cern 1990. I samma tider började internetförbindelser erbjudas också kommersiellt.
Windows 95 stödde Internet och därmed blev det lätt för PC-användare i hemmen att
koppla upp sig. Dessa nya användare blev i första hand erbjudna sin internetleverantörs
webbportal och förblev ofta omedvetna om många av de andra tjänsterna på Internet.</p>
<p>Den dominerande webbläsaren också för PC-datorer var till att börja med Netscape,
men då Microsoft insåg Internets betydelse utvecklade de en egen webbläsare,
Internet Explorer. Microsoft dominerade marknaden för programvara för
persondatorer, utnyttjade denna sin position och tog över den större delen av
webbläsarmarknaden: Internet Explorer levererades med operativsystemet Windows
och företag och organisationer var ovilliga att licensiera och installera fler
tredjepartsprodukter än nödvändigt. Microsofts dominans och affärsmetoder ledde
till åtal i både USA och Europa för olovlig monopoltaktik.</p>
<table>
<caption>Ungefärlig statistik för webbläsarnas marknadsandel 1994-2011</caption>
<thead>
<tr>
<th></th>
<th>Mosaic</th>
<th>Netscape</th>
<th>IE</th>
<th>Firefox</th>
<th>Safari</th>
<th>Opera</th>
<th>Chrome</th>
</tr>
</thead>
<tbody>
<tr>
<th>1994</th>
<td>97%</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>1997</th>
<td></td>
<td>81%</td>
<td>12%</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2000</th>
<td></td>
<td>18%</td>
<td>80%</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2003</th>
<td></td>
<td>1%</td>
<td>94%</td>
<td>2%</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2006</th>
<td></td>
<td>1%</td>
<td>83%</td>
<td>12%</td>
<td>3%</td>
<td></td>
<td></td>
</tr>
<tr>
<th>2009</th>
<td></td>
<td></td>
<td>67%</td>
<td>23%</td>
<td>5%</td>
<td>2%</td>
<td>3%</td>
</tr>
<tr>
<th>2011</th>
<td></td>
<td></td>
<td>54%</td>
<td>22%</td>
<td>7%</td>
<td>3%</td>
<td>13%</td>
</tr>
</tbody>
</table>
<p>På 2000-talet blev andra webbläsaralternativ också populära, såsom Firefox,
Safari, Opera och senare även Google Chrome. Dessa följer W3C standarderna
bättre och är bättre konstruerade ur säkerhetssynpunkt.</p>
<p>Fram till slutet av 1990-talet var det vanligaste sättet att koppla upp sig mot
Internet ett modem, som via telefonnätet ringde till en server. Telefonlinjens
kapacitet är begränsad till 64 kilobit per sekund, varav modemen kunde använda
högst 56,6 kbps. Senare har de flesta internetanvändare övergått till att
använda olika former av fasta förbindelser, vanligen
<abbr title="Asymmetric Digital Subscriber Line">ADSL</abbr> (som använder
telefonlinjen, men genom skild apparatur utnyttjar större bandbredd än vad
telefoniutrustningen förmedlar). Omkring millennieskiftet kom även
mobiltelefoner som kunde nå Internet och datoruppkopplingar baserade på
<abbr title="Global System for Mobile Communications">GSM</abbr>-tekniken.</p>
<p>I slutet av 2000-talet är Internet väletablerat i nästan alla länder, och i
västvärlden och många andra länder använder de flesta Internet regelbundet.</p>
</section>
<section id="lyckades">
<h1>Varför lyckades Internet?</h1>
<p>Redan på 1970-talet var det många som drömde om att datorerna skulle göra att
alla människor skulle kunna kommunicera med alla andra människor om vad de vill
baserat på datorteknik. Viktigt var <abbr title="Electronic Information Exchange System">
EIES</abbr>-systemet, som sattes upp 1975 i USA av Murray Turoff och KOM-systemet,
som sattes upp 1978 av Torgny Tholerus och Jacob Palme. Dessa system hade många hundra
användare, som kunde diskutera och utbyta information, huvudsakligen baserat på
telefonlinjer till en central dator.</p>
<p>Under 1980-talet utvecklade franska televerket Minitel, ett system där tusentals
användare kunde sätta upp olika tjänster för varandra baserat på datornät.</p>
<p><abbr title="Electronic Information Exchange System">EIES</abbr>, KOM och Minitel
var lyckade system, många misslyckade försök gjordes också, t.ex. Viewdata i England
och Teleguide i Sverige.</p>
<p>Vad var det som skilde de som lyckades och de som misslyckades? Skillnaden var
framförallt att de lyckade system var underifrånstyrda. Vem som helst kunde
sätta upp nya tjänster och det är konkurrensen mellan alla dessa olika tjänster,
som är grunden för Internets framgång. Ett sådant system måste ha användbara
tjänster, det räcker inte med tekniken i sig. Att ta emot nyheter kunde man göra
via TV och boka biljetter via telefon. Systemet med hyperlänkar i webbsidorna,
att vilken sida som helst lätt kunde länka till vilken annan sida som helst var
betydelsefullt. År 1994 kom de första söktjänsterna, något som kom att betyda
väldigt mycket för Internets popularitet.</p>
</section>
<section id="se">
<h1>Se även</h1>
<ul>
<li>
<a href="http://sv.wikipedia.org/wiki/Internets_historia">Internets historia</a>
</li>
<li>
<a href="http://sv.wikipedia.org/wiki/Internets_historia_i_Sverige">
Internets historia i Sverige</a>
</li>
</ul>
</section>
<footer>
<p>Obligatorisk uppgift för kursen Webbutveckling1</p>
</footer>
</body>
</html>
*/