Webbteknik En kort introduktion
Innehåll Historisk återblick 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 (-91 Tim Bernsers Lee) 00-tal – sociala medier 10 – tal – vad kommer nu??????
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
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”
HTML 4.01 Tre versioner: Strict Transitional Frameset Standardiseringsorgan Document Type Defenition
stilmallar CSS – Cascading Style Sheets – Styr utseendet på ett strukturerat dokument – Exempelvis font, färg, storlek och placering Tre versioner: Inline Internal External
Standardisering W3C – World Wide Web Consortium – Över 500 medlemmar. – Industrier, forskningsinstitut, standardiseringsorgan, regeringar… Standardiserar bland annat: HTML XHTML XML CSS
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
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
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
Grundläggande dokument <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Basdokument Hello world
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
LINK – ett exempel <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" " Elementet LINK MIN BIL Titta en bil
Meta – exempel
Meta - exempel
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
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
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
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)
- 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 och span är Containrar som används tillsmmans med.CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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;}
LÄNKAR och ytterst lite om bilder Hela idén med HTML är att kunna hoppa mellan dokument
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.
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 Bertil Bertislsson Caesar caesarsson