Ladda ner presentationen
Presentation laddar. Vänta.
Publicerades avAlexandra Arvidsson
1
Webbteknik En kort introduktion
2
Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender
3
Historisk återblick -89 CERN Tim Berners-Lee Ett plattformsoberoende sätt att sprida forskningsinformation -93 NCSA Mosaic National Center for Supercomputing Applications, University of Illinois
4
Webbläsare (-93)
5
Webbläsare (-93) (-94)
6
Webbläsare (-93) (-94) (-95)
7
Webbläsare (-93) (-94) (-95) Opera (-96)
8
Webbläsare (-93) (-94) (-95) Firefox (-03) Safari (-03) Opera (-96)
9
Teknisk beskrivning Internet Webbserver Dator med webbläsare
10
Teknisk beskrivning Internet Webbserver Dator med webbläsare Webbsida efterfrågas
11
Teknisk beskrivning Internet Webbserver Dator med webbläsare Webbsida efterfrågasHTTP Request
12
Teknisk beskrivning Internet Webbserver Dator med webbläsare Webbsida efterfrågasHTTP Request Förfrågan processas
13
Teknisk beskrivning Internet Webbserver Dator med webbläsare Webbsida efterfrågasHTTP Request Förfrågan processas Efterfrågad sida returneras
14
Teknisk beskrivning Internet Webbserver Dator med webbläsare Webbsida efterfrågasHTTP Request Förfrågan processas Efterfrågad sida returneras HTTP Response
15
Teknisk beskrivning Internet Webbserver Dator med webbläsare Webbsida efterfrågas Webbsida visas HTTP Request Förfrågan processas Efterfrågad sida returneras HTTP Response
16
Begrepp URL – Uniform Resource Locator http://www.tfe.umu.se/webbkursen/index.html ProtokollDomännamnKatalogFil
17
Begrepp URL – Uniform Resource Locator http://www.tfe.umu.se/webbkursen/index.html ProtokollDomännamnKatalogFil Toppdomän
18
Begrepp URL – Uniform Resource Locator http://www.tfe.umu.se/webbkursen/index.html ProtokollDomännamnKatalogFil Toppdomän Huvuddomän
19
Begrepp URL – Uniform Resource Locator http://www.tfe.umu.se/webbkursen/index.html ProtokollDomännamnKatalogFil Toppdomän Subdomäner Huvuddomän
20
begrepp HTTP – Hypertext Transfer Protocol Datorer kommunicerar med varandra med hjälp av protokoll Detta protokoll är speciellt framtaget för webben Huvuduppgiften är att överföra webbsidor mellan server och datorer med webbläsare HTTP – GET Vanlig förfrågan efter en webbsida HTTP – POST Skickar data vid förfrågan (exempelvis data från formulär)
21
begrepp IP-nummer – Unikt nummer för varje dator Domännamn – Unikt ”smeknamn” som kan användas istället för IP-numret DNS – Domain Name System – Kan jämföras med en telefonkatalog innehållande alla ”smeknamn” och tillhörande IP-nummer
22
Märkspråk SGML – Standard Generalized Markup Language HTML – Hyperttext Markup Language XML – eXtensible Markup Language XHTML – Extensible Hypertext Markup Language
23
Innehåll, funktion och utseende HTML-kod – Kod som styr strukturen av en webbsidas innehåll Stilmallar – Kod som styr sidans utseende JavaScript – Kod som styr en webbsidas beteende
24
html Hypertext – text som via hyperlänkar är förbunden med andra texter Uppmärkning sker med ”taggar”
25
HTML 4.01 Tre versioner: Strict Transitional Frameset Standardiseringsorgan Document Type Defenition
26
stilmallar CSS – Cascading Style Sheets – Styr utseendet på ett strukturerat dokument – Exempelvis font, färg, storlek och placering Tre versioner: Inline Lokalt Globalt
27
Standardisering W3C – World Wide Web Consortium – Över 500 medlemmar. – Industrier, forskningsinstitut, standardiseringsorgan, regeringar… Standardiserar bland annat: HTML XHTML XML CSS
28
trender Statiska webbplatser Databasdrivna JavaScript RIA (Flash, AJAX, Flex, Silverlight…) Web 1.0 Web 2.0 Stationär webb Mobil
29
javascript Ett standardiserat skriptspråk Körs i webbläsaren Baserar sig på DOM (Document Object Model) Kan användas till ”multimediaeffekter” och vid validering av data i formulär En av grundstenarna i AJAX
30
Javascript - Exempel
31
RIA Rich Internet Application - RIA Finesser och funktionalitet som vanliga program Kräver ingen installation (körs i webbläsare eller annan spelare) Arbetsfördelning mellan dator och server
32
AJAX Asynchronous JavaScript and XML (AJAX) Webbteknik för ökad: - interaktivitet, hastighet, funktionalitet och användbarhet Baserar sig på: - XHTML (eller HTML), CSS, DOM, JavaScript och XMLHttpRequest
33
Flash Flash 1.0 (-96) - Ett vektorbaserat animeringsverktyg Flash CS3 (-07) - Fullfjädrat utvecklingsverktyg för multimedia på webben Inte XHTML, JavaScript etc Kräver plugin: ”Flash Player”
34
Web 2.0 Tim O´Reilly -04 Nästa generation av webbtjänster och affärsmodeller på webben Användare bidrar Användare har kontroll Användbar och interaktiv design System interagerar } Enligt O´Reilly
35
Web 2.0 - exempel Web 1.0Web 2.0 OfotoFlickr AkamaiBitTorrent mp3.comNapster Britannica OnlineWikipedia personal websitesblogging screen scrapingweb services publishingparticipation content management systemswikis directories (taxonomy)tagging ("folksonomy") stickinesssyndication
36
Mobil webb Möjligheter och begränsningar! Web 2.0 och RIA 3G och stöd för WLAN Mognad hos användare… och utvecklare! Java 2 Mobile Edition – J2ME Adobe’s Flash Lite Google’s Android
37
Länktips http://en.wikipedia.orghttp://en.wikipedia.org (Allt möjligt!) http://www.w3schools.com/http://www.w3schools.com/ (HTML, CSS…) http://www.w3.org/http://www.w3.org/ (W3C, HTML, CSS…) http://www.oreilly.com/pub/a/oreilly/tim/news/20 05/09/30/what-is-web-20.htmlhttp://www.oreilly.com/pub/a/oreilly/tim/news/20 05/09/30/what-is-web-20.html (Web 2.0)
38
HTML – vad är det och varför ska vi använda det Och vad är XHTML
39
HTML Markeringsspråk (MarkUp Language) - strukturerar dokument för Webben (World Wide Web) Dokumentet delas upp i komponenter med hjälp av ”element” eller taggar – starttaggar och sluttaggar Detta är ett stycke text Detta är en rubrik – troligen med stor font
40
HTML beskriver bara strukturen hos dokumentet – inte hur det skall se ut på läsarens skärm. Försök inte att layouta ditt HTML-dokument. Utseendet styrs i ett separat style-dokument – en.CSS-fil Det är browsern, skärmens upplösning och CSS- filen som slutligen bestämmer hur ditt dokument ser ut
41
HTML-dialekter Den HTML-standard som är aktuell idag är HTML 4 vilken publicerades 1997. Den finns i tre versioner HTML 4.0 strict – vilken enbart stödjer strukturella element – utseendet läggs helt och hållet i stilmallar (CSS) HTML 4.0 transitional eller ”loose” innehåller element som på sikt kommer att avvecklas HTML 4.0 frameset – tillåter layout genom att sidan delas upp i frames
42
XHTML XHTML - Extensible HyperText Markup Language I XHTML måste man skriva alla elementnamn och attributnamn med gemener, man alltid använda sluttaggar, eller man sätta citationstecken eller apostrofer runt alla attributvärden. XHTML kan kombineras med CSS och JavaScript XHTML skapades genom att man översatte de tre DTD:erna i HTML 4.01 från SGML till XML. Man måste alltså inte kunna XML för att kunna använda XHTML
43
XHTML dialekter XHTML 1.0. publicerad januari 2000 och innehåller tre dialekter precis som HTML 4 - Transitional, Frameset och Strict XHTML Basic. publicerad december 2000 – avsedd som en minimal uppsättning av element för användning i exempelvis XHTML 1.1. publicerad i maj 2001 – är i stort sett samma sak som XHTML 1.0 Strict. Här finns alltså bara en variant - Strict
44
FILOSOFI 1. I detta material kommer vi huvudsakligen att jobba med XHTML Basic och XHTML Strict 2. Vi använder HTML-koden enbart för strukturering av dokumentet – inte för formgivning 3. Vi skriver koden i generella editorer – undviker verktyg för utveckling av HTML-dokument 4. Det är enkelt och kul med HTML
46
Notepad2 Gratis och bra
47
CoffeeCupHTML – en bland många
48
PINSAMT!
50
HTML-kod genererad av Word
51
Några HTML-skolor bland många En fullständig beskrivning av standarden för HTML 4 (4.01) hittar du hos W3C Consortiet. http://www.w3.org/MarkUp/Guide/standarden för HTML 4 (4.01) http://www.w3.org/MarkUp/Guide/ http://www.w3schools.com/xhtml/ http://www.echoecho.com/html.htm http://learningforlife.fsu.edu/webmaster/refere nces/xhtml/tags/ http://learningforlife.fsu.edu/webmaster/refere nces/xhtml/tags/ http://vonpepel.com/ref/html/index.html http://www.tiger.se/dok/xhtml.html
52
HTML – Lite kort om editorer Word, Notepad eller Dreamweaver - Välj 2 och släng den tredje
54
Notepad2 Gratis och bra
55
CoffeeCupHTML – en bland många
56
PINSAMT!
58
HTML-kod genererad av Word
59
XHTML – Dokumentets grundstruktur Body - head
60
Grundläggande dokument <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Basdokument Hello world
61
XML version Deklarationen Skall alltid placeras överst i dokumentet före alla andra taggar
62
XHTML version <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Anger vilken standard som dokumentet följer och var man kan hitta denna standard
63
HTML - taggen Sedan man angett DOCTYPE och XML standard så kommer det egentliga HTML – dokumentet omgivet av starttaggen och sluttaggen HTML – taggen innesluter taggarna … … HTML- taggen kan ha språkattribut XMLNS är referens till Extended Markup Language Name Space
64
HEAD Head-taggen markerar en sektion av dokumentet som innehåller overheadinformation – titel, sökord, författarnamn med mera Mellan body-taggarna finns det egentliga dokumentet
65
Ett mycket enkelt exempel
66
Validering
67
Lyckad validering ger en ikon som pris
68
En miss- lyckad vali- dering Samma fil – Vad är skillna- den?
69
HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas av webbläsaren.
70
Head Ligger alltid under taggen Mellan starttaggen och sluttaggen kan elementen base link meta script style och title finnas
71
BASE Med elementet kan man ange en basadress. Bilden som finns på adress ”http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/bil.jpg” Kan enklare hittas med hjälp av basadressen ”http:/www.tfe.umu.se/courses/systemteknik/webteknik/xhtml/” och filnamnet ”bil.jpg”
72
Exempel - base <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> Elementet BASE Titta en bil <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
73
Link Elementet link används för att referera till externa resurser Det kan finnas flera Link-element i ett html- dokument En vanlig användning är att ge en referens till.css filer d.v.s filer som information om hur dokumentet skall se ut på skärmen
74
LINK – ett exempel <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> Elementet LINK MIN BIL Titta en bil
75
LINK – grundläggande Attribut href – specificerar var resursen finns - href="stajl.css" Det finns ett antal typer av fördefinierade länkar Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help och Bookmark. Media – specificerar målmedium – screen är det som gäller om ingenting anges (default) - media="screen" andra media är tty, tv, projection, handheld, print, braille, aural and all. type anger mediatyp – type="text/css" Det kan exempelvis vara text/css eller text/javascript.
76
LINK – ett exempel <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> Elementet LINK MIN BIL Titta en bil
78
META Meta elementet används för att specificera data kring dokumentet – vem som är författare, nyckelord, övergripande beskrivningar av dokumentet med mera KEYWORDS – nyckelord som kan användas av sökmotorer AUTHOR - författarnamn DESCRIPTION – kort beskrivning – visas av sökmotorn som sammanfattning av dokumentet DISTRIBUTION - specificerar om dokumentet är globalt eller regionalt
79
Meta – exempel
80
Meta - exempel
81
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> META-ELEMENT …
82
Script och Style Elementet Style används för att bädda in information om exempelvis fonter, färger, marginaler e.t.c. Denna information bör läggas i ett separat dokument.css Elementet Script används för att bädda in script som styr beteende om sidan – detta behandlas inte i detta sammanhang
83
Title Elementet Title används för att identifiera dokumentet – titeln brukar visas övers i det fönster där dokumentet visas XHTML – Title Tag Det får bara finnas en title-tag i dokumentet
84
TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML- dokument är text – brödtext, rubriker, avgränsande linjer
85
SAMMANfattning Det här avsnittet handlar om brödtexten till rubriker av olika dignitet ny rad utan att skapa ett nytt stycke Speciella tecken % & Förstärkning och
86
P markerar ett stycke (paragraph) I stycket kan det finnas text och bilder samt inlinekod P används för att strukturera texten – att dela upp den i stycken – man skall inte användas för att formge dokumentet. Detta skall istället göra i ett separat style-dokument Webbläsarna brukar lämna en tom rad mellan dokumentets stycken Får finnas innuti exempelvis följande element: ADDRESS, BLOCKQUOTE, DD, DIV, TD, TH
87
och Den text som skrivs in mellan starttaggen och sluttaggen betraktas som ett flöde av asciitecken – de radbrytningar som du skriver i editorn kommer inte att visas i webbläsaren. Extra mellanslag och radbrytningar måste markeras med taggen för radbrytning eller
88
, och ä Alternativ 1: Titta en bil Den är jättefin Alternativ 2: Titta en bil den är jättefin
89
Andra specialtecken <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> P-ELEMENT ¢ cent ± plus-minus © copy µ mikro £ pund MER: http://www.w3.org/TR/html401/sgml/entities.html
90
- Rubriker Rubriker finns av sex ”storlekar” Normalt är störst och minst, men det styr du i ditt stylesheet Rubrik 1 Rubrik 2 Rubrik 3 Rubrik 4 Rubrik 5 Rubrik 6
91
Att förstärka delar av texten med och … Detta är en himla rolig historia: - har du julgransfot - ja de har jag - hur får du då på dig byxorna … …
92
Citat och Att markera citat i sin HTML-kod är att sätt att underlätt enhetlig formattering samt att underlätta för synskadade att rätt uppfatta texten De element som används är blockquote och q
93
Citat – ett exempel Om man Googlar på Roliga citat så kan man hitta följande om Bill Gates 640 kB borde vara tillräckigt för vem som helst och det kan man ju tyckas vara roligt så här i efterhand
94
Ytterligare element för logisk formattering definition - tjur=kopappa kod - u=sin(2*pi*200*t exempel - exempel tangentbord - knatter knatter knatter variabel - svaret=5 citat - two bee or not two bee en förkortning - t.ex. akronym - XHTML
95
Addresser Kontaktperson för XHTML- föreningen Eva Andersson Skogsstigen 8 903 45 Umeå
96
Preformatterad text Detta stycke är oformatterat och omgivet bara av p- taggarna. Läsaren kommer inte att bry sig om radbrytningar om det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör Detta block kommer att vara maximalt 20 tecken brett och radbrytningarna kommer att finnas kvarom det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör
97
Div och span är Containrar som används tillsmmans med.CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Div and span ELEMENT asd ssdlk ss sfk jkk aj s asd ssdlk ss sfk jkk aj s asd ssdlk ss sfk jkk aj s asd ssdlk ss sfk jkk aj s body { background-color: #def; margin-left: 30px; margin-top: 20px; } p span {color: green}.kontainer1 {font-family: verdana, arial, sans-serif; color: black;}.kontainer2 {margin-left: 20px;color: yellow;color: blue;}.kontainer3 {margin-left: 30px;color: green;}
98
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Employee Profile h1 span {color: red} p span {color: green} John Smith Is Employee Of The Month John Smith has been a Project Manager for 10 years.
99
ATT STYRA UTSEENDE HOS TEXTEN Det finns ett antal taggar som vi inte ska använda
100
HTML – används för logisk formatering inte för utseende I HTML-dokumentet skall du formattera logiskt Dessa ord ska framhävas Detta är en tabell Detta är en länk Detta är en rubrik MEN du sak inte använda HTML för att styra utseendet hos sidan – du ska inte ange kursiv stil, stilstorlek eller font i HTML – Lämna detta till stilmallen – CSS-dokumentet
101
Formattering som vi inte ska använda b (fet stil- andra raden) ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg sdkl fjöglksdfjgsldfkjgöslgk big - andra raden ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg sdkl fjöglksdfjgsldfkjgöslgk i - kursiv stil - andra raden ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg sdkl fjöglksdfjgsldfkjgöslgk small - andra raden ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg sdkl fjöglksdfjgsldfkjgöslgk sub - delar av raden fjöglksdfjgs sdkl lgk ldfkjgös sup - delar av raden fjöglksdfjgs sdkl lgk ldfkjgös tt - tele type - andra halvan av raden ldf lsdfjk lf gslf slfk sdkl fjglksdfjgösldfkjgöslgk
102
LÄNKAR och ytterst lite om bilder Hela idén med HTML är att kunna hoppa mellan dokument
103
En länk åstadkommer att exempelvis en ny fil öppnas i det aktuella fönstret eller (eventuellt) i något annat fönster Länken består av en startpunkt – ett ankare Ett mål – en target och En destination När du klickar på länken kommer du att flyttas till en annan plats –en annan fil, en annan plats i det aktuella dokumentet eller exempelvis till din mail-hanterare.
104
Tre varianter av länkar Telefonlista i separat dokument <a onclick="window.open(this.href); return false;" href="tfn_lista.html">Telefonlista i nytt fönster Telefonlista i detta dokument lsd las dlakjs dlad las la lasjd laksj lask lj d flaks dlasj dlaskjd lasj la dlaj dlasd laksdj lksdjlksdjalksd jasklj dlk d - Anders Andersson 090 - 12 35 67 - Bertil Bertislsson 080 - 23 45 67 - Caesar caesarsson 070 45 67 89
105
Tre andra typer av länkar och här dyker det uppe en bild Specialtecken Skicka mail till Nisse å äö -->
106
ATT SKAPA TABELLER Tabeller skall endast användas om man verkligen vill presentera något i tabellform Använd INTE tabeller för att strukturera hela sidor
107
Så här ser grundstrukturen ut för en tabell Tabellrubrik kolumn rubrik 1 kolumn rubrik 2 cell 11 cell 12 cell 21 cell 22 cell 31 cell 32
108
border Anger bredden på ramen runt varje element – angivet i pixlar. cellpadding Anger hur mycket ”luft” det skall vara mellan cellens innehåll och ramen cellspacing Anger hur mycket luft det ska vara mellan ramen och nästa cell. summary En text som beskriver tabellens innehåll – texten är inte synlig på skärmen, men kan ev. finnas med om sidan presenteras i talade medier. width Anger tabellens totala bredd i pixlar eller som procent av det fönster där den ligger.
110
Border
111
Cellpadding
112
Cellspacing
113
Frame void: Inga sidor. above: Övers. below: Nederst. hsides: Uppe och nere. vsides: Höger och vänster. lhs: Vänster. rhs: Höger. box: Runt om. border: Runt om.
114
RULE none: default rows: cols: all:
115
ATT SKAPA Listor Ibland kan det vara bra att strukturera sig lite
116
Ordnade listor, oordnade listor och definitionslistor LISTANS UTSEENDE STYRS I CSS-filen
Liknande presentationer
© 2024 SlidePlayer.se Inc.
All rights reserved.