Ladda ner presentationen
Presentation laddar. Vänta.
1
Webbteknik En kort introduktion
2
Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender
3
Innehåll 50-tal – transistorn 60-tal – ic-kretsen 70-tal – mikroprocessorn 80-tal –persondatorn 90-tal – webben (-91 Tim Bernsers Lee) 00-tal – sociala medier 10 – tal – vad kommer nu??????
4
Begrepp URL – Uniform Resource Locator http://www.tfe.umu.se/webbkursen/index.html ProtokollDomännamnKatalogFil Toppdomän Subdomäner Huvuddomän
5
begrepp IP-nummer – Unikt nummer för varje dator (aktuellt nu IPv6) 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
6
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
7
html Hypertext – text som via hyperlänkar är förbunden med andra texter Uppmärkning sker med ”taggar”
8
HTML 4.01 Tre versioner: Strict Transitional Frameset Standardiseringsorgan Document Type Defenition
9
stilmallar CSS – Cascading Style Sheets – Styr utseendet på ett strukturerat dokument – Exempelvis font, färg, storlek och placering Tre versioner: Inline Internal External
10
Standardisering W3C – World Wide Web Consortium – Över 500 medlemmar. – Industrier, forskningsinstitut, standardiseringsorgan, regeringar… Standardiserar bland annat: HTML XHTML XML CSS
11
trender Statiska webbplatser Databasdrivna JavaScript RIA (Flash, AJAX, Flex, Silverlight, Canvas) Web 1.0 Web 2.0 Stationär webb Mobil Molnet – man hämtar och lämnar data i molnet (En del pratar om detta som web 3.0) Sociala medier
12
Något om html 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
13
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
14
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
15
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
16
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
17
Meta – exempel
18
Meta - exempel
19
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
20
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
21
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
22
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 (none breaking space)
23
- 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
24
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 … …
25
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
26
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;}
27
LÄNKAR och ytterst lite om bilder Hela idén med HTML är att kunna hoppa mellan dokument
28
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.
29
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
Liknande presentationer
