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

Slides:



Advertisements
Liknande presentationer
BAS-M Hur du på ett enkelt sätt administrerar din båtklubbs register.
Advertisements

Välkommen till internet för nybörjare
LÄNKAR och ytterst lite om bilder Hela idén med HTML är att kunna hoppa mellan dokument.
HTML - grunder. Program •Html kan skrivas i anteckningar, eller vilket annat textbehandlingsprogram som helst. Mitt tips: Notepad ++ Notepad ++ •Grafiska.
HTML – vad är det och varför ska vi använda det Och vad är XHTML.
II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.
XHTML.
E-post juni 2013.
Flexicon – Din systempartner
FTP, HTTP, HTML, XML och XHTML
1 MSPEL Föreläsning 1 DSV Peter Mozelius XML, XHTML, CSS och Java applets.
Introduktion till CSS CSS1 - EXEMPEL. Denna webbsida vill vi kopiera och förbättra.
Enkel dator teknik Tips och tricks.
XHTML 1 Designa din egen webbsida. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Validering.
Programmering?. Förslag till innehåll programmeringens grundläggande teori webbredigering, webbprogrammering html xml wml (wap 1) xhtml css javascript.
DCV Idéskiss Design Jag tror att jag ska ha en mörk och stilren design på mitt DCV. Det ska finnas dynamisk funktionalitet där designen byts utan att sidan.
HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas.
Programmeringteknik Webbdelen. HTML H yper T ext M arkup L anguage Märker upp sidans innehåll så att webbläsaren kan avgöra hur innehållet ska visas.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
HTML – vad är det och varför ska vi använda det
2. Utveckla en presentation
Webbutveckling grundkurs DA7710
Webbteknik lektion 3 Det handlar mer om stilmallar Per K, 2012.
Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.
XHTML och CSS En föreläsning om webbteknik , SK, PK TFE Umeå Universitet.
Webbteknik lektion 4 Det handlar mer om stilmallar Per K, 2012.
Webben – intro Första föreläsningen i kursen Webbutveckling.
Stilark: CSS Digitalisering av text April 2005 Mats Dahlström.
WEBMASTER DAG 4 Mahmud Al Hakim
Textkodning 2 Dokumentrepresentation. Idag  Teckenuppsättningar  Validering  Metadata  Elementen div och span  Klasser och.
CSS3 Några exempel på nyheter i CSS3. Basdokument – som används i flertalet exempel Pingvinsång Fyra små pingviner, klädda i svart och.
DHTML Designa din egen webbsida.
Tabeller.
XSLT – en introduktion Elektronisk publicering.
Av Oliver och Emil. En kort historia om Internet Datorn uppfanns i slutet av 1950-talet. Det var då man försökte koppla ihop flera datorer för att skicka.
Internet Styrdatorer och kablar Uppkopplade användare Servrar 182.QRZN.
1 ITK:P2 F2 Stilsättning av XHTML DSV Peter Mozelius.
(Cascading Style Sheets) Rebecca Landmér 2007 CSS.
CSS del 3 Kvarnbrinkx Medietyper En XHTML-sida kan ha olika CSS-filer för olika medier! Definieras med attributet “media” i link- taggen,
Webbutveckling Med fokus på grunder i html och css.
XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink
XHTML & CSS Introduktion Erik Nahkala
TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML- dokument är text – brödtext, rubriker, avgränsande linjer.
Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender.
W EBBUTVECKLING, HT 2013 En webbplats Källa: pragmatisk.se.
XHTML Digitalisering av kulturarvet.
Välkommen till årets andra nätverksträff Sundsvall 30 maj, 2006 Funda Denizhan och Magnus Burell Verva, Nätverket 24-timmarswebben.
XHTML 1 Elektronisk publicering. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Klasser och.
© Björn Lindell, Datapedagogiskt Forum, SLU Hur kommer jag i gång med att göra web-sidor? Länkar “on line” på URL:
XHTML – Dokumentets grundstruktur Body - head. Grundläggande dokument
Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim
2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
CSS del 2 Kvarnbrink Mer elementreferens ID refererar man till med #-tecken #content { width: 600px; } Klassnamn har en punkt före.newsitem.
CSS del 1 Kvarnbrink I början… Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets.
Copyright, Mahmud Al Hakim, Lektion 3 Ramar, Navigeringsfält, Lager Mahmud Al Hakim
XHTML & CSS 2 del 1 Elektronisk publicering. Idag  Repetition  Teckenuppsättningar  Metadata  Mer om klasser och ID:n  CSS.
Textkodning 1 Dokumentrepresentation. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Standarder.
Mikael Olsson SEO utbildning – Bilia Dag 2 - Onsite.
Enkel dator teknik Tips och tricks. Välja storlek och radavstånd Här väljer du storlek på texten vi vill att ni använder 14 p till rubriker och 12 p till.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
Webben – en sammanfattning Sista föreläsningen i kursen Produktion för tryckta medier och webb.
Webbteknik En kort introduktion.
CSS del 2 Samuel Kvarnbrink
CSS del 2 Samuel Kvarnbrink
IT Fördjupning Jon Wide
Introduktion till CSS CSS1 - EXEMPEL.
CSS del 2 Kvarnbrink
CSS del 1 Kvarnbrink
Internet A HTML Grunder
CSS del 1 Samuel Kvarnbrink
Presentationens avskrift:

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