Presentation laddar. Vänta.

Presentation laddar. Vänta.

Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender.

Liknande presentationer


En presentation över ämnet: "Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender."— Presentationens avskrift:

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


Ladda ner ppt "Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender."

Liknande presentationer


Google-annonser