Differences
This shows you the differences between two versions of the page.
|
webbutv_05 [2019-09-13 08:39] Mattias Hamberg |
webbutv_05 [2022-07-18 13:20] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Formge webbens historia ====== | ||
| - | ===== 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. | ||
| - | |||
| - | ==== 1. Skapa semantisk struktur i HTML5 ==== | ||
| - | Länkat med uppgiften finns en fil {{:: | ||
| - | |||
| - | **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, | ||
| - | em, abbr, dfn, var Speciellt markerade ord. | ||
| - | figure, img, figcaption Hantering av figurer och bilder | ||
| - | table, tbody, thead, tr, th, td, caption | ||
| - | 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 [[http:// | ||
| - | |||
| - | ==== 2. 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 och ge dem såväl marginal som padding på minst 1em. | ||
| - | * Bilder skall ha en bredd av 25em. | ||
| - | * Hela sidan skall ha en padding på 3em. | ||
| - | * Gör fler lämpliga formateringar så att sidan ser bra ut. | ||
| - | |||
| - | ===== Inlämning ===== | ||
| - | Se vklass.\\ | ||
| - | All HTML ni skriver ska vara korrekt och validerad med exempelvis http:// | ||
| - | Din CSS-fil kan valideras med http:// | ||
| - | |||
| - | <php> | ||
| - | /* | ||
| - | |||
| - | HTML5: | ||
| - | |||
| - | < | ||
| - | <html lang=" | ||
| - | < | ||
| - | < | ||
| - | <meta charset=" | ||
| - | <link rel=" | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <h2> | ||
| - | Artikeln är till stora delar baserad på den artikel som finns i | ||
| - | <a href=" | ||
| - | </h2> | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | <nav> | ||
| - | < | ||
| - | <ol> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ol> | ||
| - | </ | ||
| - | |||
| - | <section id=" | ||
| - | < | ||
| - | |||
| - | | ||
| - | < | ||
| - | <img src=" | ||
| - | alt=" | ||
| - | < | ||
| - | </ | ||
| - | < | ||
| - | ARPANET</ | ||
| - | <abbr title=" | ||
| - | Telekomgiganten AT& | ||
| - | <abbr title=" | ||
| - | oktober 1969 ledde Leonard Kleinrock ett forskarlag som lyckades få en | ||
| - | <abbr title=" | ||
| - | med en dator på ett annat forskningsinstitut. Det första meddelandet som skickades iväg | ||
| - | var kommandot " | ||
| - | kraschade emellertid efter att den tagit emot " | ||
| - | blev därför " | ||
| - | |||
| - | < | ||
| - | 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.</ | ||
| - | |||
| - | < | ||
| - | mellan sig med denna teknik. Det spred sig ganska fort till andra länders | ||
| - | universitet, | ||
| - | Högskola, det första svenska <abbr title=" | ||
| - | Vid denna tid fanns telnet, e-post, <abbr title=" | ||
| - | och vissa andra tjänster, men inte webbsidor.</ | ||
| - | |||
| - | < | ||
| - | 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.</ | ||
| - | </ | ||
| - | |||
| - | <section id=" | ||
| - | < | ||
| - | |||
| - | <p>I början av 1990-talet tog vanliga men erfarna datoranvändare äver. I mitten | ||
| - | till slutet av 1990-talet började " | ||
| - | World Wide Web slog igenom. Det skapade en hausse på IT omkring | ||
| - | millennieskiftet, | ||
| - | 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.</ | ||
| - | </ | ||
| - | | ||
| - | <section id=" | ||
| - | < | ||
| - | |||
| - | < | ||
| - | Den används väldigt mycket och har stor betydelse, även om det dykt upp andra | ||
| - | sätt att skicka meddelanden, | ||
| - | missbruka eposttjänsten, | ||
| - | </ | ||
| - | | ||
| - | <section id=" | ||
| - | < | ||
| - | |||
| - | < | ||
| - | 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.</ | ||
| - | |||
| - | < | ||
| - | men då Microsoft insåg Internets betydelse utvecklade de en egen webbläsare, | ||
| - | Internet Explorer. Microsoft dominerade marknaden för programvara för | ||
| - | persondatorer, | ||
| - | webbläsarmarknaden: | ||
| - | 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.</ | ||
| - | |||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | < | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | <tr> | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </tr> | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | < | ||
| - | Safari, Opera och senare även Google Chrome. Dessa följer W3C standarderna | ||
| - | bättre och är bättre konstruerade ur säkerhetssynpunkt.</ | ||
| - | |||
| - | < | ||
| - | 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, | ||
| - | <abbr title=" | ||
| - | telefonlinjen, | ||
| - | telefoniutrustningen förmedlar). Omkring millennieskiftet kom även | ||
| - | mobiltelefoner som kunde nå Internet och datoruppkopplingar baserade på | ||
| - | <abbr title=" | ||
| - | |||
| - | <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.</ | ||
| - | </ | ||
| - | | ||
| - | <section id=" | ||
| - | < | ||
| - | |||
| - | < | ||
| - | alla människor skulle kunna kommunicera med alla andra människor om vad de vill | ||
| - | baserat på datorteknik. Viktigt var <abbr title=" | ||
| - | EIES</ | ||
| - | som sattes upp 1978 av Torgny Tholerus och Jacob Palme. Dessa system hade många hundra | ||
| - | användare, som kunde diskutera och utbyta information, | ||
| - | telefonlinjer till en central dator.</ | ||
| - | |||
| - | < | ||
| - | användare kunde sätta upp olika tjänster för varandra baserat på datornät.</ | ||
| - | |||
| - | < | ||
| - | var lyckade system, många misslyckade försök gjordes också, t.ex. Viewdata i England | ||
| - | och Teleguide i Sverige.</ | ||
| - | |||
| - | < | ||
| - | 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, | ||
| - | väldigt mycket för Internets popularitet.</ | ||
| - | </ | ||
| - | | ||
| - | <section id=" | ||
| - | < | ||
| - | | ||
| - | <ul> | ||
| - | <li> | ||
| - | <a href=" | ||
| - | </li> | ||
| - | <li> | ||
| - | <a href=" | ||
| - | Internets historia i Sverige</ | ||
| - | </li> | ||
| - | </ | ||
| - | </ | ||
| - | | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | CSS: | ||
| - | |||
| - | body { | ||
| - | color: #000000; | ||
| - | background-color: | ||
| - | padding: 3ex; | ||
| - | margin: 0; | ||
| - | } | ||
| - | |||
| - | h1, h2{ | ||
| - | font-family: | ||
| - | color: #123456; | ||
| - | background-color: | ||
| - | padding: 0; | ||
| - | } | ||
| - | |||
| - | p, ul, ol{ | ||
| - | font-family: | ||
| - | font-size: 2.2ex; | ||
| - | text-align: | ||
| - | } | ||
| - | |||
| - | nav{ | ||
| - | background: | ||
| - | color: #000000; | ||
| - | margin: 1ex; | ||
| - | padding: 1ex; | ||
| - | border: 1px solid #000000; | ||
| - | } | ||
| - | |||
| - | img{ | ||
| - | width: 400px; | ||
| - | } | ||
| - | |||
| - | |||
| - | |||
| - | Extra formatteringar: | ||
| - | |||
| - | header h1{ | ||
| - | font-size: 6ex; | ||
| - | margin: 0.5ex 0ex 0.5ex 0ex; | ||
| - | } | ||
| - | |||
| - | header h2{ | ||
| - | font-size: 2.5ex; | ||
| - | margin: 1ex 0ex 4ex 0ex; | ||
| - | } | ||
| - | |||
| - | section h1 { | ||
| - | font-size: 3.3ex; | ||
| - | margin: 4ex 0ex 1ex 0ex; | ||
| - | } | ||
| - | |||
| - | nav h1{ | ||
| - | font-size: 3.3ex; | ||
| - | margin: 1ex 0ex 1ex 0ex; | ||
| - | } | ||
| - | |||
| - | header, section{ | ||
| - | margin: 0ex 1ex 0ex 1ex; | ||
| - | padding: 0; | ||
| - | } | ||
| - | |||
| - | footer{ | ||
| - | border-top: | ||
| - | font-size: 1.8ex; | ||
| - | margin: 1ex; | ||
| - | padding: 1ex; | ||
| - | } | ||
| - | |||
| - | footer p{ | ||
| - | text-align: | ||
| - | } | ||
| - | |||
| - | p{ | ||
| - | margin: 2.5ex 0ex 2.5ex 0ex; | ||
| - | padding: | ||
| - | } | ||
| - | |||
| - | ul, ol{ | ||
| - | margin: 3ex; | ||
| - | padding: 1ex; | ||
| - | list-style-position: | ||
| - | } | ||
| - | |||
| - | ul{ | ||
| - | list-style-type: | ||
| - | } | ||
| - | |||
| - | ol{ | ||
| - | list-style-type: | ||
| - | } | ||
| - | |||
| - | li{ | ||
| - | margin: 0ex 0ex 1ex 0ex; | ||
| - | padding: 0; | ||
| - | } | ||
| - | |||
| - | table{ | ||
| - | margin: 4ex auto 4ex auto; | ||
| - | padding: 1ex; | ||
| - | border-collapse: | ||
| - | caption-side: | ||
| - | text-align: | ||
| - | } | ||
| - | |||
| - | th, td{ | ||
| - | border: 1px solid #000000; | ||
| - | width: 9ex; | ||
| - | padding: 0.5ex; | ||
| - | margin: 0; | ||
| - | } | ||
| - | |||
| - | th{ | ||
| - | color: #000000; | ||
| - | background-color: | ||
| - | } | ||
| - | |||
| - | td{ | ||
| - | color: #000000; | ||
| - | background-color: | ||
| - | } | ||
| - | |||
| - | caption{ | ||
| - | padding: 1ex; | ||
| - | margin: 0; | ||
| - | text-align: | ||
| - | font-style: | ||
| - | font-size: 1.9ex; | ||
| - | } | ||
| - | |||
| - | em, dfn{ | ||
| - | font-style: | ||
| - | } | ||
| - | |||
| - | figure{ | ||
| - | float: right; | ||
| - | padding: 1ex; | ||
| - | margin: 3ex 0ex 3ex 3ex; | ||
| - | border: 1px solid #000000; | ||
| - | } | ||
| - | |||
| - | figcaption{ | ||
| - | font-size: 13px; | ||
| - | margin: 0; | ||
| - | padding: 2ex 1ex 1ex 1ex; | ||
| - | font-style: | ||
| - | text-align: | ||
| - | } | ||
| - | |||
| - | a, a:visited{ | ||
| - | text-decoration: | ||
| - | color:# | ||
| - | background-color: | ||
| - | } | ||
| - | |||
| - | a:hover, a:focus{ | ||
| - | color: #FF6347; | ||
| - | background-color: | ||
| - | } | ||
| - | |||
| - | |||
| - | */ | ||
| - | |||
| - | </ | ||