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 (-92 Tim Berners Lee) 00-tal – sociala medier 2010 – mobilerna tar över. 2020 - ?
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 Vår wordpressserver, 130.239.115.172, har inget domännamn så den finns inte hos någon DNS.
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” Hypertext – text som via hyperlänkar är förbunden med andra texter Uppmärkning sker med ”taggar” Min webbplats Det här är min första webbsida! Jag har precis lärt mig att använda olika storlekar på texten.
8
HTMLDIALEkter Html5 är den modernaste dialekten och den har många nyheter. Det finns äldre ”dialekter” som xhtml, html4 osv. Web ska vara semantiskt – av grekiska sema, "tecken" avser det vetenskapliga studiet av språklig betydelse eller studiet av teckensystems innebörd och tolkning. Taggarna ska så långt det är möjligt beskriva vad som visas på sidan.vetenskapligatolkning
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
Stilmallar – vad är cascade? Cascading: Tidigare definierade regler gäller tills de blir “överskrivna” av något med samma eller högre specificitet Specificitet: Vissa typer av selektorer “trumfar” andra, oavsett ordning, enligt tydliga regler Ordningen styr: !important, style, antal #, antal., antal taggar
11
Standardisering W3C – World Wide Web Consortium – Över 500 medlemmar. – Industrier, forskningsinstitut, standardiseringsorgan, regeringar… Standardiserar bland annat: HTML CSS XML Tillgänglighet, WCAG, WAI
12
trender Statiska webbplatser Databasdrivna som t.ex. WordPress Web 1.0 Web 2.0 Web 3.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 är en självklarhet idag
13
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
14
Grundläggande dokument Min webbplats Det här är min första webbsida! Jag har precis lärt mig att använda olika storlekar på texten.
15
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.
16
LINK – ett exempel i html5 Min webbplats Det här är min första webbsida! Jag har precis lärt mig att använda olika storlekar på texten.
17
Meta – exempel (Två nedre i Dublin core)
18
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
19
Några taggar 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
20
P-taggen 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: BLOCKQUOTE, DD, DIV, TD, TH
21
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)
22
- 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
23
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 … …
24
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
25
Div - division – stora behållaren (Per – rita på tavlan!)
26
LÄNKAR Hela idén med HTML är att kunna hoppa mellan dokument
27
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 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.
28
Tre varianter av länkar Telefonlista i ett annat dokument. Klickar man hoppar man dit. Telefonlista i detta dokument. Man hoppar ner eller upp beroende på var den ligger. Maila Per mailto:per.kvarnbrink@gmail.se
29
Var hittar ni info om detta www.w3schools.com Webbdesignskolan.se Googla – det finns så mycket att läsa
Liknande presentationer
