Ladda ner presentationen
Presentation laddar. Vänta.
1
Webbteknik En kort introduktion
2
Innehåll Historisk återblick Tim Berners Lee 1992 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 2010 – html5 och css3 kommer i läsarna. Det är en stor revidering.
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
HTMLDIALEkter Html 4.01, xhtml: Strict (Används då jag vet att jag har felfri kod) Transitional (Kan innehålla skräp) Frameset (Finns, men ska inte användas) Html5 är den modernaste dialekten och den har många nya element.
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 Responsiv design 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
HTML 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
HTML dialekter – vad är html5? HTML5 är ännu inte publicerad I begreppet ingår CSS3 och javascript Stöds av moderna webbläsare men inte äldre
15
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
16
HEAD - BODY Head-taggen markerar en sektion av dokumentet som innehåller overheadinformation (metainformation ) – titel, sökord, författarnamn med mera Mellan body-taggarna finns det egentliga dokumentet. Du ser body:n i webbläsaren. Det är bakgrunden.
17
LINK – ett exempel i xhtml Elementet LINK MIN BIL Titta en bil
18
LINK – ett exempel (HTML5) Elementet LINK MIN BIL Titta en bil
19
Meta – exempel (Två nedre i Dublin core)
20
Title Elementet Title används för att identifiera dokumentet – titeln brukar visas övers i det fönster där dokumentet visas Perrys blog Det får bara finnas en title-tag i dokumentet
21
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
22
<p><p> 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 i exempelvis följande element: ADDRESS, BLOCKQUOTE, DD, DIV, TD, TH
23
och Den text som skrivs in mellan starttaggen och sluttaggen betraktas som ett flöde av tecken – 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)
24
- 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
25
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 … …
26
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
27
Div - division – stora behållaren (Per – rita på tavlan!)
28
Lägg till shiv -
29
LÄNKAR Hela idén med HTML är att kunna hoppa mellan dokument
30
Länkar 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.
31
Tre varianter av länkar Telefonlista i separat dokument Telefonlista i detta dokument Maila Per mailto:per@gmail.se Hoppa hit!
32
Var hittar ni info om detta Läroboken Googla – det finns såååå mycket att läsa www.w3schools.com Olika bloggar
Liknande presentationer
