Webbteknik En kort introduktion

Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender

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 ?

Begrepp URL – Uniform Resource Locator ProtokollDomännamnKatalogFil Toppdomän Subdomäner Huvuddomän

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, , har inget domännamn så den finns inte hos någon DNS.

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

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.

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

stilmallar CSS – Cascading Style Sheets – Styr utseendet på ett strukturerat dokument – Exempelvis font, färg, storlek och placering Tre versioner: Inline Internal External

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

Standardisering W3C – World Wide Web Consortium – Över 500 medlemmar. – Industrier, forskningsinstitut, standardiseringsorgan, regeringar… Standardiserar bland annat: HTML CSS XML Tillgänglighet, WCAG, WAI

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

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

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.

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.

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.

Meta – exempel (Två nedre i Dublin core)

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

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

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

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)

- 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

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 … …

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

Div - division – stora behållaren (Per – rita på tavlan!)

LÄNKAR Hela idén med HTML är att kunna hoppa mellan dokument

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.

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

Var hittar ni info om detta Webbdesignskolan.se Googla – det finns så mycket att läsa