Märkspråk, HTML, XHTML, CSS & JavaScript: kort intro med pekare till till mer information Föreläsning 4

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

HTML, SGML, CSS, XML, XHTML, MIME, HTTP

Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 3. Peter Dalenius Institutionen för datavetenskap

Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 3. Peter Dalenius Institutionen för datavetenskap

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML


Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Konstruktion av datorspråk

XML. Extensible Markup Language

ORDLISTA WEBBDESIGN 100P

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät

Hantera informationspaket i system för bevarande

Idag. Webben och HTML. Webbens funk3on. URL och websidor. Moment F om webben och HTML startar nu

TSKS06 - Rapportskrivning

2I1073 Föreläsning 1. HTML och XHTML XHTML

Språk för webben introduk4on 4ll HTML

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

Strukturering med XML och DTD

Evaluation Summary - CT3380 Grundäggande webbdesign HT06 Dan Levin

Föreläsning 4. CSS Stilmallar för webben

<sid nr="1" av="2" /> Stackenföreläsning: XML & XSLT: Intro. XML och XSLT

En snabb titt på XML LEKTION 6

Litteratur. Nätverk, Internet och World Wide Web. Olika typer av nätverk. Varför nätverk? Anne Diedrichs Medieteknik Södertörns högskola

Introduk+on +ll programmering i JavaScript

Uppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 4. Peter Dalenius Institutionen för datavetenskap

Grundläggande datavetenskap, 4p

TSKS06 - Rapportskrivning

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

Idag. Webben, HTML och CSS. Live demo. Webbens funktion

TNMK30. Elektronisk publicering

Metaspråket XML Mika Suonvieri

Immigration Studying. Studying - University. Stating that you want to enroll. Stating that you want to apply for a course.

Immigration Studera. Studera - Universitet. Ange att du vill anmäla dig. Ange att du vill anmäla dig till en kurs. Kurs.

Immigration Studera. Studera - Universitet. Ange att du vill anmäla dig. Ange att du vill anmäla dig till en kurs. Kurs. Typ av kurs.

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

XML. XML is a method for putting structured data in a text file

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, Internet började med ARPANET

Webbservrar, severskript & webbproduktion

Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod

729G28 Webprogrammering och databaser. Föreläsning 1: Diverse praktiskt om kursen Webprogrammering Databaser, terminologi

Nätverk grunder Föreläsning 1: 1: Introduktion till Internet

Christer Scheja TAC AB

TNMK30. Elektronisk publicering

! Katerina Vrotsou! Medieteknik. 2004! Informationsvisualisering, visuell data analys

WD406F - Interaktiva medier I 7,5hp Moment: Web Usability Inlämningsuppgift 1ab. Wynona Ekesrydh

Nätverk och Java, grunder Föreläsning 0: 0: Introduktion till Internet

Datasäkerhet och integritet

Lite mer om CGI-programmering

Att styla webbsidor. Nivå. Uppgiften

F02 En första sida. Dagens agenda

Övning (X)HTML 2. Sidan 1 av

Webbplats analys ipchecker.us

Programmeringteknik. Planering MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Administration: Grundläggande internetprogrammering

CSS- Cascading Stylesheets

Objektorienterad Programkonstruktion. Föreläsning 10 7 dec 2015

EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

Webbplats analys emreemir.com

Policy för öppen källkod RIV Tekniska Anvisningar

Laboration 2: Xhtml och CSS.

Webbtillgänglighet. Tillgänglighet på webben. Hörselskadades behov. Synskadades behov. Kognitivt funktionshindrades behov. Rörelsehindrades behov

<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt

Separation av innehåll och presentation i ett CMS med WYSIWYG-gränssnitt

F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet

Användbarhet för webben MDI, Webb och speciella behov 1

Kursutvärdering av Tekniker för webbdesign samt Tekniker för webbdesign, distans, 7,5hp (31KTW1, 31ETW1, 31FTW1), höstterminen 2016

Isolda Purchase - EDI

Webbplats analys google.com

Introduction to the Semantic Web. Eva Blomqvist

Arbetsmaterial HTML pass 1 - Grunder

Kort om World Wide Web (webben)

Webbplats analys akcpdistributor.de.ipaddress.com

Webbplats analys sarajacob3216.wordpress.com

HTML. Introduktion till HyperText Markup Language

Webbplats analys cite4me.org

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)

TNMK30 - Elektronisk publicering

CSS-övningar. 1. Grunder

Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">

Utseende. Lauri Watts Översättare: Stefan Asserhäll

WWW. Exempel på klientsidan. Överföring av en html-fil. Snyggare variant. Verkligt format. Meddelandeformat för begäran HTTP

Att göra Web-sidor på Macintosh

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

729G74 IT och programmering, grundkurs. Tema 2, Föreläsning 1 Jody Foo,

Dagens föreläsningar

Dagens föreläsningar

Webbteknik för ingenjörer

F07 Stilmallar Dagens agenda

Länkar och navigering

Webbplats analys akcpsensor.de.ipaddress.com

Introduktion till programmering

Webbutveckling Laboration 1: HTML5 och CSS3.

Vad är XML XML. Exempel - SMIL. Exempel - XHTML. extensible Markup Language

Nätet. Uppgiften. Nivå

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

Klient/server. Översikt. Lektion 1: Webbtekniker från Microsoft. Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning.

Lektion 2 - CSS. CSS - Fortsätt så här

Transkript:

previous next Märkspråk, HTML, XHTML, CSS & JavaScript: kort intro med pekare till till mer information Föreläsning 4 Innehåll Märkspråk med HTML, XHTML, och CSS JavaScript en kort intro Speciella referenser Ince, Developing Distributed and E-commerce Applications Dietel Internet & World Wide Web How To Program, 2ed 2002 Tut, dvs tutorial (~kurs) som finns hos w3schools på nätet http://www.w3schools.com Fler exempel i http://www.nada.kth.se/kurser/kth/2d1390/03-04/contents/exempel.html

previous next Märkspråk Märkspråk kort intro och historik

Inledning Märkspråk har länge spelat en stor roll för att beskriva hur texter skall visualiseras eller typsättas Efter webens tillkomst har märkspråken, via HTML, visats en starkt ökat intresse Genom tillkomsten av XML har märkspråken börjat användas i alla möliga olika sammanhang previous next 3

Vad är ett märkspråk Märkspråk beskriver bland annat Struktur Data Visualisering, typsättning Inställningar Synkronisering, kommunikation previous next 4

Redigering och korrektur Redigeringsmarkeringar Märkspråk & JavaScript Har använts (och används) för att beskriva hur ett dokument skall typsättas I stil med <r1>rubrik</r1> <b>brödtext med <f>fet</f> text</b> Rubrik Brödtext med fet text Korrekturmarkeringar Används vid korrekturläsning (se exempel på tavlan) previous next 5

Primitiva märkspråk RUNOFF.ctr Primitiv märkning.sp 2.b fet TROFF, NROFF, mfl Används tex i Unix för att beskriva manblad previous next 6

nroff exempel Manbladet whois User Commands whois(1) NAME whois - Internet user name directory service SYNOPSIS whois [ -h host ] identifier DESCRIPTION whois searches for an Internet directory entry for an identifier which is either a name (such as ``Smith'') or a handle (such as ``SRI-NIC''). To force a name-only search, precede the name with a period; to force a handle-only search, precede the handle with an exclamation point. osv previous next 7

Skapas via följande märkning '\" t.\" @(#)whois.1 1.19 97/01/03 SMI; from SVr4 '\"macro stdmacro.\" Copyright 1989 AT&T.nr X.TH whois 1 "14 Sep 1992".SH NAME whois \- Internet user name directory service.sh SYNOPSIS \f3whois\f1 [ \f3\-h\f1.i host ] OSV previous next 8

TeX Ett språk för att beskriva och typsätta dokument Märkspråk & JavaScript Konstruerat av datalogen Donald Knuth då han behövde bättre system för att beskriva och typsätta sina böcker om datalogins grundvalar previous next 9

TeX Exempel % -*- latex -*- % read by l2htest.tex \section{mathematic formulas} This is a sample formula: $$ c = \pm\sqrt{a^2 + b^2} $$ And this is an inline formula: $\int_0^1 f(x)dx = F(x) _0^1$ and so it goes. previous next 10

och ett exempel till % -*- latex -*- % read by l2htest.tex This is included text. faun.nada.kth.se>more /pkg/latex2html/src/latex2html-2k.1beta/tests/rrm-col.te x \documentclass{article} \usepackage[dvips,dvipsnames]{color} \usepackage{colordvi} \usepackage{html} \bodytext{ TEXT = white BGCOLOR = black } \color[x11]{steel} \pagecolor[named]{skyblue} \subdef{rgb.2.4.1} \begin{document} previous next 11

\RedOrange{Reddish Orange \globalcolor{...reverting to normal.}} {\textyellow Yellow} \RedOrange{Reddish Orange \globalcolor{...reverting to normal.}} \textcolor{.2.3.4.1} coloured \Color{.2.3.4.1}{coloured} \textrhodamine Here is some coloured text. What happens to \colorbox{red}{this box}? What happens to \fcolorbox{red}{green}{this box}? \color[cmyk]{.3,.3,.3,.2} light gray \color[gray]{.3} gray \color[rgb]{.3,.3,.3} gray \textcolor{red}{...and some red text...} \Plum{And some more text.} \end{document} previous next 12

SGML Standard Generalized Markup Language ISO-standard 8879:1986, där 1986 är tillkomståret Idéerna började formas på 1960-talet Föregicks av GML, Generalized Markup Language, 1969 1974 visades att en parser kan validera ett dokument utan att processa det SGML ser ungefär ut som det idag populära XML Man hade DTDer redan då för att beskriva strukturen previous next 13

SGML exempel <EMail> <sender> <person> <firstname> Karen </firstname> <lastname> Lemone </lastname> </person> <receiver> <person> <distributionlist> cs525@cs </distributionlist> </person> </receiver> <contents> Don't you agree this is really ugly? </contents> </EMail> previous next 14

SGML DTD exempel <!doctype EMail [ <!element EMail - o (sender, receiver,contents)> <!element sender o o (person) > <!element receiver o o (person)+ > <!element person o o (distributionlist) (firstname, middlename?, lastname )> <!element (firstname, middlename, lastname) o o (#PCDATA)> <!element distributionlist o o (#PCDATA)> <!element contents o o (#PCDATA)> ]> previous next 15

Weben Vid Webens skapande av Tim Berners-Lee på Cern så behövdes och skapades också ett sätt att beskriva dokument bland annat i syfte att enklare kunna flytta och visualisera dem på olika typer av plattformar Alla websidor innehåller instruktioner för hur sidorna ska visualiseras En webbläddrare läser dessa instruktioner Det skall dock påpekas att WEBen utvecklats/skapats allt sedan 1960-talet i samband med framförallt ARPAs och Internets skapande Även Douglas Engelbarts NLS, on-line-system med allt från hypertext och epost till videkonferenser har varit influerande, ca 1965 Webens historia http://www.w3.org/history.html http://www.hitmill.com/internet/web_history.asp previous next 16

HTML Hyper Text Markup Language Kanske det mest kända och mest spridda märkspråket Man beskriver dokumenten med text och märken (eng tags) En uppmärkning är ett element mellan ett par tagar <tag>...</tag> <p>ett stycke (eng paragraph)</p> previous next 17

Vem styr webspråkens utveckling? Reglerna/standarderna bestäms av W3C, World Wide Web Consortium Dom främsta standardarna är HTML, CSS och XML Den senaste HTML standarden heter XHTML 1.0 previous next 18

ett exempel <html> <head> <title>title of page</title> </head> <body> This is my first homepage. <b>this text is bold</b> </body> </html> previous next 19

HTML Vi tittar mer HTML och på flera exempel efter det vi har pratat lite om CSS, XHTML och XML Vi använder då dom utmärkta beskrivningarna på http://www.w3schools.com Det finns också exempel på kursens websidor http://www.nada.kth.se/kurser/kth/2d1390/03-04/contents/cgi/exampleshtml.html previous next 20

CSS Cascading Style Sheets Märkspråk & JavaScript Ett sätt att styra hur dom olika elementen på en eller flera HTML-sidor ska se ut previous next 21

CSS exempel <html> <head> <style type="text/css"> h2 {text-decoration: overline} h4 {text-decoration: line-through} p {text-decoration: underline} a {text-decoration: none} </style> </head> previous next 22

<body> <h2>this is header 2</h2> <h4>this is header 4</h4> <p> This is some text in a paragraph </p> <p> <a href="http://www.w3schools.com">this is a link</a> </p> </body> </html> previous next 23

Och exempel på w3schools http://www.w3schools.com/css/css_examples.asp previous next 24

XHTML XHTML står för EXtensible HyperText Markup Language XHTML syftar att ersätta HTML XHTML nästan identiskt med HTML 4.01 XHTML är en striktare och renare version av HTML XHTML är HTML definerad som en XML application Se http://www.w3schools.com/xhtml/default.asp previous next 25

XML Den nya märkstandarden som används för bland annat websidor olika andra märkspråk att lagra information att utbyta information inställningar i servrar, java-containers, databaser, mm källkod beskriva matematiska formler previous next 26

Vad är XML? XML står för EXtensible Markup Language XML är märkspråk (eng markup language) liknande HTML. XML designades för att beskriva data. XML-taggarna är inte fördefinierade i XML. Man måste definera egna taggar. XML använder en DTD (Document Type Definition) för att beskriva data. XML med DTD är gjort så att det är självbeskrivande. previous next 27

Vad skiljer XML och HTML? XML designades för att förmedla data. XML ersätter inte HTML. XML och HTML designades med olika mål: XML designades som ett sätt att beskriva data och fokuserar på vad data är. HTML designades som ett sätt att visualisera data och fokuserar på hur data ser ut. HTML handlar om att visualisera data, XML handlar om att beskriva information. previous next 28

XML gör ingenting! XML konstruerades inte för att göra någonting! XML konstruerades som ett sätt att konstruera, lagra och skicka information. previous next 29

Exempel XML Skicka meddelande från Tove till Jani, beskrivet i XML: <?xml version="1.0" encoding="iso-8859-1"?> <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> previous next 30

Mer om XML Vi återkommer till XML på föreläsning 12, den 4/12 previous next 31

JavaScript, kort-kort intro JavaScript används på massor av websidor för att förbättra designen, validera forms och en hel del annat. JavaScript konstruerades år 1995 av Netscape, då hette det LiveScript men byttes snabbt till JavaScript JavaScript fungerar i alla stora webläsare med verisionsnummer 3.0 eller högre previous next 32

Vad är JavaScript? JavaScript är konstruerat för att lägga till interaktivitet på HTML-sidor JavaScript är ett skriptspråk JavaScript är vanligen inbäddade på HTML-sidor JavaScript är ett interpreterande språk JavaScript är fritt och kräver ingen licens previous next 33

Vad kan man göra med JavaScript? JavaScript ger HTML-designers ett programmeringsverktyg JavaScript kan lägga till dynamik till HTML-sidor JavaScript kan reagera på händelser I webläsaren JavaScript kan läsa och skriva HTML-element JavaScript kan validera data previous next 34

Vi tittar på W3Schools sidor (som vanligt...) Märkspråk & JavaScript http://www.w3schools.com/js/default.asp previous next 35