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:09] Daniel Viström |
webbutv_05 [2012-09-13 15:30] Daniel Viström |
||
---|---|---|---|
Line 10: | Line 10: | ||
==== Skapa semantisk struktur i HTML5 ==== | ==== 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. | + | 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** | **Exempel på taggar och deras användning** | ||
Line 53: | Line 53: | ||
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: | ||
+ | } | ||
+ | |||
+ | |||
+ | */ | ||
+ | |||
+ | </ |