Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
webbutv_05 [2012-09-13 15:23] Daniel Viström |
webbutv_05 [2018-10-05 07:42] Joakim Forsgren |
||
|---|---|---|---|
| Line 9: | Line 9: | ||
| - Andra uppgiften går ut på att skapa en CSS-fil för att styra utseendet på den fil vi skapat i deluppgift 1. | - 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 ==== | + | ==== 1. Skapa semantisk struktur i HTML5 ==== |
| Länkat med uppgiften finns en fil {{:: | Länkat med uppgiften finns en fil {{:: | ||
| Line 33: | Line 33: | ||
| * Navigationsmenyn skall referera till [[http:// | * Navigationsmenyn skall referera till [[http:// | ||
| - | ==== Länka CSS till HTML5 ==== | + | ==== 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. | 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. | ||
| Line 48: | Line 48: | ||
| ===== Inlämning ===== | ===== Inlämning ===== | ||
| - | + | Se vklass.\\ | |
| - | Lämna in filerna **historia.html** samt **pagestyle.css**. \\ | + | |
| All HTML ni skriver ska vara korrekt och validerad med exempelvis http:// | All HTML ni skriver ska vara korrekt och validerad med exempelvis http:// | ||
| Din CSS-fil kan valideras med 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: | ||
| + | } | ||
| + | |||
| + | |||
| + | */ | ||
| + | |||
| + | </ | ||