Internet content HTML SGML CSS XML XHTML MIME HTTP DD1335 - - PowerPoint PPT Presentation

internet content html sgml css xml xhtml mime http
SMART_READER_LITE
LIVE PREVIEW

Internet content HTML SGML CSS XML XHTML MIME HTTP DD1335 - - PowerPoint PPT Presentation

Internet Content Internet content HTML SGML CSS XML XHTML MIME HTTP DD1335 (Lecture 2) Basic Internet Programming Spring 2010 1 / 27 Internet Content Objectives What HTML is, what its origins are, and where one can find information


slide-1
SLIDE 1

Internet Content

Internet content HTML SGML CSS XML XHTML MIME HTTP

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 1 / 27

slide-2
SLIDE 2

Internet Content

Objectives

◮ What HTML is, what its origins are, and where one can find information

about it

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 2 / 27

slide-3
SLIDE 3

Internet Content

Objectives

◮ What HTML is, what its origins are, and where one can find information

about it

◮ Next generation HTML: CSS, XHTML

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 2 / 27

slide-4
SLIDE 4

Internet Content

Objectives

◮ What HTML is, what its origins are, and where one can find information

about it

◮ Next generation HTML: CSS, XHTML ◮ Describing internet data: XML

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 2 / 27

slide-5
SLIDE 5

Internet Content

Objectives

◮ What HTML is, what its origins are, and where one can find information

about it

◮ Next generation HTML: CSS, XHTML ◮ Describing internet data: XML ◮ Understanding how different types of content are dealt with in the Internet

(MIME)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 2 / 27

slide-6
SLIDE 6

Internet Content

Objectives

◮ What HTML is, what its origins are, and where one can find information

about it

◮ Next generation HTML: CSS, XHTML ◮ Describing internet data: XML ◮ Understanding how different types of content are dealt with in the Internet

(MIME)

◮ HTTP

, internet protocols, proxies

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 2 / 27

slide-7
SLIDE 7

Internet Content

HTML & SGML

◮ HyperText Markup Language

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 3 / 27

slide-8
SLIDE 8

Internet Content

HTML & SGML

◮ HyperText Markup Language ◮ Markup:

◮ Classic usage: editing <b>marked up text</b> ◮ Correcting, data description and other usages DD1335 (Lecture 2) Basic Internet Programming Spring 2010 3 / 27

slide-9
SLIDE 9

Internet Content

HTML & SGML

◮ HyperText Markup Language ◮ Markup:

◮ Classic usage: editing <b>marked up text</b> ◮ Correcting, data description and other usages

◮ Markup languages have a long history

◮ troff, nroff (for unix man pages), runoff DD1335 (Lecture 2) Basic Internet Programming Spring 2010 3 / 27

slide-10
SLIDE 10

Internet Content

HTML & SGML

◮ HyperText Markup Language ◮ Markup:

◮ Classic usage: editing <b>marked up text</b> ◮ Correcting, data description and other usages

◮ Markup languages have a long history

◮ troff, nroff (for unix man pages), runoff ◮ TeX, LaTeX, excellent to write books with (Knuth) and slides (eg. these

slides)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 3 / 27

slide-11
SLIDE 11

Internet Content

HTML & SGML

◮ HyperText Markup Language ◮ Markup:

◮ Classic usage: editing <b>marked up text</b> ◮ Correcting, data description and other usages

◮ Markup languages have a long history

◮ troff, nroff (for unix man pages), runoff ◮ TeX, LaTeX, excellent to write books with (Knuth) and slides (eg. these

slides)

◮ SGML, the origin of HTML, looks like today’s XML. SGML and XML

describes data

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 3 / 27

slide-12
SLIDE 12

Internet Content

SGML/XML-example

<email> <sender> <person> <id>serafim@csc.kth.se</id> <christianname>Serafim</christianname> <familyname>Dahl</familyname> </person> </sender> <reciever> <person> <distributionlist>DD1335;gruint10@kth.se</distributionlist> </person> </reciever> <contents> It’s ugly, isn’t it? </contents> </email>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 4 / 27

slide-13
SLIDE 13

Internet Content

SGML/XML-example . . .

◮ The example describes just data

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 5 / 27

slide-14
SLIDE 14

Internet Content

SGML/XML-example . . .

◮ The example describes just data ◮ It says nothing about presentation (color, font, alignment, . . . )

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 5 / 27

slide-15
SLIDE 15

Internet Content

SGML/XML-example . . .

◮ The example describes just data ◮ It says nothing about presentation (color, font, alignment, . . . ) ◮ All text is inside a <tag>text</tag>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 5 / 27

slide-16
SLIDE 16

Internet Content

SGML/XML-example . . .

◮ The example describes just data ◮ It says nothing about presentation (color, font, alignment, . . . ) ◮ All text is inside a <tag>text</tag> ◮ There is a separate document that specifies what tags are allowed in the

SGML document, in what order are they allowed, etc. Can be used to validate the SGML

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 5 / 27

slide-17
SLIDE 17

Internet Content

DTD, Document Type Definition

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 6 / 27

slide-18
SLIDE 18

Internet Content

DTD, Document Type Definition

<!doctype email[ ]>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 6 / 27

slide-19
SLIDE 19

Internet Content

DTD, Document Type Definition

<!doctype email[ <!element email (sender,reciever,contents)> ]>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 6 / 27

slide-20
SLIDE 20

Internet Content

DTD, Document Type Definition

<!doctype email[ <!element email (sender,reciever,contents)> <!element sender (person)> <!element reciever (person)+> <!element contents (#PCDATA)> ]>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 6 / 27

slide-21
SLIDE 21

Internet Content

DTD, Document Type Definition

<!doctype email[ <!element email (sender,reciever,contents)> <!element sender (person)> <!element reciever (person)+> <!element person (distributionlist) | (christianname, middlename?,familyname)> <!element contents (#PCDATA)> ]>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 6 / 27

slide-22
SLIDE 22

Internet Content

DTD, Document Type Definition

<!doctype email[ <!element email (sender,reciever,contents)> <!element sender (person)> <!element reciever (person)+> <!element person (distributionlist) | (christianname, middlename?,familyname)> <!element (christianname, middlename?,familyname) (#PCDATA)> <!element distributionlist (#PCDATA)> <!element contents (#PCDATA)> ]>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 6 / 27

slide-23
SLIDE 23

Internet Content

HTML

◮ Describes how webpages are visualised

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 7 / 27

slide-24
SLIDE 24

Internet Content

HTML

◮ Describes how webpages are visualised ◮ A “web browser” reads the description and interprets it or (when there is

no description) uses a default interpretation

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 7 / 27

slide-25
SLIDE 25

Internet Content

HTML

◮ Describes how webpages are visualised ◮ A “web browser” reads the description and interprets it or (when there is

no description) uses a default interpretation

◮ early version 1965 in Douglas Englebart’s “oNLine System”, NLS

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 7 / 27

slide-26
SLIDE 26

Internet Content

HTML

◮ Describes how webpages are visualised ◮ A “web browser” reads the description and interprets it or (when there is

no description) uses a default interpretation

◮ early version 1965 in Douglas Englebart’s “oNLine System”, NLS ◮ Tim Bernes-Lee at CERN made ENQUIRE in 1980, which developed into

HTML and present presentation techniques.

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 7 / 27

slide-27
SLIDE 27

Internet Content

HTML

◮ Describes how webpages are visualised ◮ A “web browser” reads the description and interprets it or (when there is

no description) uses a default interpretation

◮ early version 1965 in Douglas Englebart’s “oNLine System”, NLS ◮ Tim Bernes-Lee at CERN made ENQUIRE in 1980, which developed into

HTML and present presentation techniques.

◮ HTML is developped and maintained by W3C (World Wide Web

Consortium)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 7 / 27

slide-28
SLIDE 28

Internet Content

HTML

◮ Describes how webpages are visualised ◮ A “web browser” reads the description and interprets it or (when there is

no description) uses a default interpretation

◮ early version 1965 in Douglas Englebart’s “oNLine System”, NLS ◮ Tim Bernes-Lee at CERN made ENQUIRE in 1980, which developed into

HTML and present presentation techniques.

◮ HTML is developped and maintained by W3C (World Wide Web

Consortium)

◮ HTML, CSS, XHTML, XML DD1335 (Lecture 2) Basic Internet Programming Spring 2010 7 / 27

slide-29
SLIDE 29

Internet Content

HTML

◮ Describes how webpages are visualised ◮ A “web browser” reads the description and interprets it or (when there is

no description) uses a default interpretation

◮ early version 1965 in Douglas Englebart’s “oNLine System”, NLS ◮ Tim Bernes-Lee at CERN made ENQUIRE in 1980, which developed into

HTML and present presentation techniques.

◮ HTML is developped and maintained by W3C (World Wide Web

Consortium)

◮ HTML, CSS, XHTML, XML ◮ Most common is HTML 4.0 (default) DD1335 (Lecture 2) Basic Internet Programming Spring 2010 7 / 27

slide-30
SLIDE 30

Internet Content

HTML

◮ Describes how webpages are visualised ◮ A “web browser” reads the description and interprets it or (when there is

no description) uses a default interpretation

◮ early version 1965 in Douglas Englebart’s “oNLine System”, NLS ◮ Tim Bernes-Lee at CERN made ENQUIRE in 1980, which developed into

HTML and present presentation techniques.

◮ HTML is developped and maintained by W3C (World Wide Web

Consortium)

◮ HTML, CSS, XHTML, XML ◮ Most common is HTML 4.0 (default) ◮ Latest version is XHTML 1.1 DD1335 (Lecture 2) Basic Internet Programming Spring 2010 7 / 27

slide-31
SLIDE 31

Internet Content

HTML . . .

<html><head><title>HTML</title></head><body> <!- the line above may be omitted -> <h1>HTML</h1> <p>This is a short presentation of <b><u>HTML</u></b>. Its main points:</p> <ul> <li>Unlike SGML and XML, HTML describes how data is <i>presented</i>, not what the data <i>is</i>. It is thus an editing markup, much like <a href="http://www.tex.ac.uk/cgi-bin/texfaq2html">TeX</a> <ul> <li>There can be text outside any tag, and though it won’t be validated, it will &quot;work&quot;</li> <li>You can’t write a validator document</li> <li>If a HTML document is invalid e.g. by not having correct tag order, or missing tags, it will be presented

  • anyway. A closing tag is missing right here

</ul></li> <li>As in other markup languages, some tags can only appear inside other tags (e.g. &lt;li&gt; can only appear inside &lt;body&gt;)</li> <li> A text fragment in a document can link to other documents, or to a specific place in the document.</li> </ul> </body></html>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 8 / 27

slide-32
SLIDE 32

Internet Content

will look like:

HTML

This is a short presentation of HTML. Its main points:

  • Unlike SGML and XML, HTML describes how data is presented not what the data
  • is. It is thus an editing markup, much like TeX
  • There can be text outside any tag, though this won’t be validated, it will

”work”

  • You can’t write a validator document
  • If a HTML document is invalid e.g. by not having correct tag order, or missing

tags, it will be presented anyway. A closing tag is missing right here

  • As in other markup languages, some tags can only appear inside other tags (e.g.

<li> can only appear inside <body>)

  • A text fragment in a document can link to other documents, or to a specific place

in the document.

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 9 / 27

slide-33
SLIDE 33

Internet Content

XHTML

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>XHTML</title> </head> <body><h1>XHTML</h1> <p>This is a short presentation of <b><u>XHTML</u></b>. Its main points:</p> <ul> <li>Unlike SGML and XML, XHTML describes how data is <i>presented</i> not what the data <i>is</i>. It is thus an editing markup, much like <a href="http://www.ctan.org/">TeX</a> <ul><li>There can be text outside any tag, though this won’t be validated, it will &quot;work&quot;</li> <li>You can’t write a validator document</li> <li>If an XHTML document is invalid there will be an error message A closing tag is missing right here </ul></li> <li>As in other markup languages, some tags can only appear inside

  • ther tags (e.g. <li> can only appear inside <body>)</li>

<li>A text fragment in a document can link to other documents, or to a specific place in the document.</li> </ul> </body> </html>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 10 / 27

slide-34
SLIDE 34

Internet Content

XHTML - result

XML Interpreter error: mismatched tag. Expected: </li>. Adress: http://www.csc.kth.se/~serafim/02-internet-content.xhtml Radnummer 22, Kolumn 9: </ul>

  • ----^

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 11 / 27

slide-35
SLIDE 35

Internet Content

HTML tags

◮ HTML reference: http://www.htmlhelp.com/reference/html40/ ◮ HTML referece:

http://www.webreference.com/authoring/languages/html/

◮ XHTML referece:

http://www.webreference.com/authoring/languages/xhtml/

◮ Also on http://www.w3schools.com/ where there are links to other

places

◮ Organizational list of HTML tags

http://www.htmlhelp.com/reference/html40/olist.html

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 12 / 27

slide-36
SLIDE 36

Internet Content

HTML tags . . .

◮ Parts of an HTML document:

◮ the header contains general information about the document e.g. the title,

author, document generator, . . .

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 13 / 27

slide-37
SLIDE 37

Internet Content

HTML tags . . .

◮ Parts of an HTML document:

◮ the header contains general information about the document e.g. the title,

author, document generator, . . .

◮ the body contains the document content or DD1335 (Lecture 2) Basic Internet Programming Spring 2010 13 / 27

slide-38
SLIDE 38

Internet Content

HTML tags . . .

◮ Parts of an HTML document:

◮ the header contains general information about the document e.g. the title,

author, document generator, . . .

◮ the body contains the document content or ◮ a frameset that describes a set of frames DD1335 (Lecture 2) Basic Internet Programming Spring 2010 13 / 27

slide-39
SLIDE 39

Internet Content

HTML tags . . .

◮ Parts of an HTML document:

◮ the header contains general information about the document e.g. the title,

author, document generator, . . .

◮ the body contains the document content or ◮ a frameset that describes a set of frames ◮ If the header is missing, the whole content is interpreted as body DD1335 (Lecture 2) Basic Internet Programming Spring 2010 13 / 27

slide-40
SLIDE 40

Internet Content

HTML tags . . .

◮ Parts of an HTML document:

◮ the header contains general information about the document e.g. the title,

author, document generator, . . .

◮ the body contains the document content or ◮ a frameset that describes a set of frames ◮ If the header is missing, the whole content is interpreted as body

◮ The tag <a> with the attribute href denotes a link. The link may be

absolute or relative. It is good practice to use relative links to pages in the same site, because then moving the site to another server or directory is easy

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 13 / 27

slide-41
SLIDE 41

Internet Content

HTML tags . . .

◮ Parts of an HTML document:

◮ the header contains general information about the document e.g. the title,

author, document generator, . . .

◮ the body contains the document content or ◮ a frameset that describes a set of frames ◮ If the header is missing, the whole content is interpreted as body

◮ The tag <a> with the attribute href denotes a link. The link may be

absolute or relative. It is good practice to use relative links to pages in the same site, because then moving the site to another server or directory is easy

◮ <a href="document-in-same-directory.html">. . . DD1335 (Lecture 2) Basic Internet Programming Spring 2010 13 / 27

slide-42
SLIDE 42

Internet Content

HTML tags . . .

◮ Parts of an HTML document:

◮ the header contains general information about the document e.g. the title,

author, document generator, . . .

◮ the body contains the document content or ◮ a frameset that describes a set of frames ◮ If the header is missing, the whole content is interpreted as body

◮ The tag <a> with the attribute href denotes a link. The link may be

absolute or relative. It is good practice to use relative links to pages in the same site, because then moving the site to another server or directory is easy

◮ <a href="document-in-same-directory.html">. . . ◮ <a href="directory/dokument.html">. . . DD1335 (Lecture 2) Basic Internet Programming Spring 2010 13 / 27

slide-43
SLIDE 43

Internet Content

HTML tags . . .

◮ Parts of an HTML document:

◮ the header contains general information about the document e.g. the title,

author, document generator, . . .

◮ the body contains the document content or ◮ a frameset that describes a set of frames ◮ If the header is missing, the whole content is interpreted as body

◮ The tag <a> with the attribute href denotes a link. The link may be

absolute or relative. It is good practice to use relative links to pages in the same site, because then moving the site to another server or directory is easy

◮ <a href="document-in-same-directory.html">. . . ◮ <a href="directory/dokument.html">. . . ◮ <a href="../another-directory/another-doc.html">. . . DD1335 (Lecture 2) Basic Internet Programming Spring 2010 13 / 27

slide-44
SLIDE 44

Internet Content

HTML tags . . .

◮ Parts of an HTML document:

◮ the header contains general information about the document e.g. the title,

author, document generator, . . .

◮ the body contains the document content or ◮ a frameset that describes a set of frames ◮ If the header is missing, the whole content is interpreted as body

◮ The tag <a> with the attribute href denotes a link. The link may be

absolute or relative. It is good practice to use relative links to pages in the same site, because then moving the site to another server or directory is easy

◮ <a href="document-in-same-directory.html">. . . ◮ <a href="directory/dokument.html">. . . ◮ <a href="../another-directory/another-doc.html">. . . ◮ BASE can be used to indicate the base for all relative links DD1335 (Lecture 2) Basic Internet Programming Spring 2010 13 / 27

slide-45
SLIDE 45

Internet Content

HTML tags . . .

◮ Other useful head tags: title (most used)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 14 / 27

slide-46
SLIDE 46

Internet Content

HTML tags . . .

◮ Other useful head tags: title (most used) ◮ Later: meta (used to simulate HTTP headers)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 14 / 27

slide-47
SLIDE 47

Internet Content

HTML tags . . .

◮ Other useful head tags: title (most used) ◮ Later: meta (used to simulate HTTP headers) ◮ style used to change the outlook of a document eg. by using cascading style

sheets (CSS)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 14 / 27

slide-48
SLIDE 48

Internet Content

HTML tags . . .

◮ Other useful head tags: title (most used) ◮ Later: meta (used to simulate HTTP headers) ◮ style used to change the outlook of a document eg. by using cascading style

sheets (CSS)

◮ In the body: <p>...</p> denotes a paragraph. If there’s no tag around a text

fragment, the default is <p>...</p>. Use <br> or <br /> for a line break.

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 14 / 27

slide-49
SLIDE 49

Internet Content

HTML tags . . .

◮ Other useful head tags: title (most used) ◮ Later: meta (used to simulate HTTP headers) ◮ style used to change the outlook of a document eg. by using cascading style

sheets (CSS)

◮ In the body: <p>...</p> denotes a paragraph. If there’s no tag around a text

fragment, the default is <p>...</p>. Use <br> or <br /> for a line break.

◮ Anchors: <a name="here"> marks a place in the document that can be

accessed using documentname#here like

http://www.csc.kth.se/utbildning/kth/kurser/DD1335/index.php#start

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 14 / 27

slide-50
SLIDE 50

Internet Content

HTML tags . . .

◮ Other useful head tags: title (most used) ◮ Later: meta (used to simulate HTTP headers) ◮ style used to change the outlook of a document eg. by using cascading style

sheets (CSS)

◮ In the body: <p>...</p> denotes a paragraph. If there’s no tag around a text

fragment, the default is <p>...</p>. Use <br> or <br /> for a line break.

◮ Anchors: <a name="here"> marks a place in the document that can be

accessed using documentname#here like

http://www.csc.kth.se/utbildning/kth/kurser/DD1335/index.php#start

◮ <h1> </h1> ... <h6> </h6> are heading levels

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 14 / 27

slide-51
SLIDE 51

Internet Content

HTML tags . . .

◮ Other useful head tags: title (most used) ◮ Later: meta (used to simulate HTTP headers) ◮ style used to change the outlook of a document eg. by using cascading style

sheets (CSS)

◮ In the body: <p>...</p> denotes a paragraph. If there’s no tag around a text

fragment, the default is <p>...</p>. Use <br> or <br /> for a line break.

◮ Anchors: <a name="here"> marks a place in the document that can be

accessed using documentname#here like

http://www.csc.kth.se/utbildning/kth/kurser/DD1335/index.php#start

◮ <h1> </h1> ... <h6> </h6> are heading levels ◮ If you want spaces and newlines to matter, use: <pre> </pre>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 14 / 27

slide-52
SLIDE 52

Internet Content

HTML tags . . .

◮ Other useful head tags: title (most used) ◮ Later: meta (used to simulate HTTP headers) ◮ style used to change the outlook of a document eg. by using cascading style

sheets (CSS)

◮ In the body: <p>...</p> denotes a paragraph. If there’s no tag around a text

fragment, the default is <p>...</p>. Use <br> or <br /> for a line break.

◮ Anchors: <a name="here"> marks a place in the document that can be

accessed using documentname#here like

http://www.csc.kth.se/utbildning/kth/kurser/DD1335/index.php#start

◮ <h1> </h1> ... <h6> </h6> are heading levels ◮ If you want spaces and newlines to matter, use: <pre> </pre> ◮ Text appearance can be changed like in text editors with <b>, <i>, <font>,

<big>, <small>, <sub>, <tt>, <s>. The modern choise is to use style, mandatory in XHTML, wise even in HTML.

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 14 / 27

slide-53
SLIDE 53

Internet Content

HTML tags . . .

◮ Other useful head tags: title (most used) ◮ Later: meta (used to simulate HTTP headers) ◮ style used to change the outlook of a document eg. by using cascading style

sheets (CSS)

◮ In the body: <p>...</p> denotes a paragraph. If there’s no tag around a text

fragment, the default is <p>...</p>. Use <br> or <br /> for a line break.

◮ Anchors: <a name="here"> marks a place in the document that can be

accessed using documentname#here like

http://www.csc.kth.se/utbildning/kth/kurser/DD1335/index.php#start

◮ <h1> </h1> ... <h6> </h6> are heading levels ◮ If you want spaces and newlines to matter, use: <pre> </pre> ◮ Text appearance can be changed like in text editors with <b>, <i>, <font>,

<big>, <small>, <sub>, <tt>, <s>. The modern choise is to use style, mandatory in XHTML, wise even in HTML.

◮ Tables <table>, table rows <tr>, table headers <th>, table cell <td>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 14 / 27

slide-54
SLIDE 54

Internet Content

HTML tools

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 15 / 27

slide-55
SLIDE 55

Internet Content

HTML tools

On the web there are many application programs that can be used to check your (X)HTML documents, even to upgrade them to later standards

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 15 / 27

slide-56
SLIDE 56

Internet Content

HTML tools

On the web there are many application programs that can be used to check your (X)HTML documents, even to upgrade them to later standards

◮ http://www.htmlhelp.com/tools/validator/ ◮ http://sourceforge.net/projects/tidy/ ◮ http://jigsaw.w3.org/css-validator/ ◮ http://www.thefreecountry.com/webmaster/htmleditors.shtml

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 15 / 27

slide-57
SLIDE 57

Internet Content

HTML tools

On the web there are many application programs that can be used to check your (X)HTML documents, even to upgrade them to later standards

◮ http://www.htmlhelp.com/tools/validator/ ◮ http://sourceforge.net/projects/tidy/ ◮ http://jigsaw.w3.org/css-validator/ ◮ http://www.thefreecountry.com/webmaster/htmleditors.shtml

There are also development systems for HTML/CSS/PHP/EJB offering extensive help and support when programming for the web, on Linux e.g.

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 15 / 27

slide-58
SLIDE 58

Internet Content

HTML tools

On the web there are many application programs that can be used to check your (X)HTML documents, even to upgrade them to later standards

◮ http://www.htmlhelp.com/tools/validator/ ◮ http://sourceforge.net/projects/tidy/ ◮ http://jigsaw.w3.org/css-validator/ ◮ http://www.thefreecountry.com/webmaster/htmleditors.shtml

There are also development systems for HTML/CSS/PHP/EJB offering extensive help and support when programming for the web, on Linux e.g.

◮ BlueFish ◮ Quanta+ ◮ Eclipse (for all platforms and most languages) ◮ Netbeans (for all platforms and many languages)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 15 / 27

slide-59
SLIDE 59

Internet Content

Style / Cascading Style Sheets (CSS)

You can redefine the style of various HTML elements. The style can be defined in the HTML file:

<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> <body> <h2>A level 2 heading</h2> <h4>A level 4 heading</h4> <p>A paragraph</p> <p>Another paragraph <a href="http://w3schools.com"> with a link</a></p> </body> <html>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 16 / 27

slide-60
SLIDE 60

Internet Content

CSS . . .

A level 2 heading

A level 4 heading A paragraph Another paragraph with a link

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 17 / 27

slide-61
SLIDE 61

Internet Content

CSS . . .

Style can also be defined

◮ in a separate CSS file indicated in a ”link” attribute in the head section of

the HTML file:

<link rel="stylesheet" type="text/css" href="mystyle.css">

◮ or directly in the HTML code:

<p style="color: sienna; margin-left: 20px"> This is a paragraph</p>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 18 / 27

slide-62
SLIDE 62

Internet Content

XML

◮ XML is a way of describing data, according to a DTD (like SGML)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 19 / 27

slide-63
SLIDE 63

Internet Content

XML

◮ XML is a way of describing data, according to a DTD (like SGML) ◮ There are no predefined XML tags (like in HTML). One has to describe

  • nes own using e.g. a DTD

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 19 / 27

slide-64
SLIDE 64

Internet Content

XML

◮ XML is a way of describing data, according to a DTD (like SGML) ◮ There are no predefined XML tags (like in HTML). One has to describe

  • nes own using e.g. a DTD

◮ XML doesn’t do anything in itself but data from one XML document can

be presented in an indefinite number of ways

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 19 / 27

slide-65
SLIDE 65

Internet Content

XML

◮ XML is a way of describing data, according to a DTD (like SGML) ◮ There are no predefined XML tags (like in HTML). One has to describe

  • nes own using e.g. a DTD

◮ XML doesn’t do anything in itself but data from one XML document can

be presented in an indefinite number of ways

◮ XML can be used to exchange data, to express the configuration of

software in a rich, hierarchical manner or even as program source code

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 19 / 27

slide-66
SLIDE 66

Internet Content

XML

◮ XML is a way of describing data, according to a DTD (like SGML) ◮ There are no predefined XML tags (like in HTML). One has to describe

  • nes own using e.g. a DTD

◮ XML doesn’t do anything in itself but data from one XML document can

be presented in an indefinite number of ways

◮ XML can be used to exchange data, to express the configuration of

software in a rich, hierarchical manner or even as program source code

◮ Example of an XML application: RSS (really simple syndicating). See eg.

http://www.mozilla.org/products/firefox/live-bookmarks.html

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 19 / 27

slide-67
SLIDE 67

Internet Content

XML: example

<?xml version="1.0" encoding="ISO-8859-1" ?> <note> <date>2010-01-19</date> <time>08:23 GMT+1</time> <to>Serafim</to> <from>Carina</from> <heading>Reminder</heading> <body>Don’t forget our lunch meeting today!</body> </note>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 20 / 27

slide-68
SLIDE 68

Internet Content

XML: example . . .

This XML-file does not appear to have any style information associated with it. The document tree is shown below.

  • <note>

<date>2009-01-19</date> <time>08:23 GMT+1</time> <to>Serafim</to> <from>Carina</from> <heading>Reminder</heading> <body>Don’t forget our lunch meeting today!</body> </note>

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 21 / 27

slide-69
SLIDE 69

Internet Content

XHTML

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 22 / 27

slide-70
SLIDE 70

Internet Content

XHTML

◮ eXtensible HTML

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 22 / 27

slide-71
SLIDE 71

Internet Content

XHTML

◮ eXtensible HTML ◮ XHTML is designed to replace HTML

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 22 / 27

slide-72
SLIDE 72

Internet Content

XHTML

◮ eXtensible HTML ◮ XHTML is designed to replace HTML ◮ XHTML 1.0 is almost identical to HTML 4.1

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 22 / 27

slide-73
SLIDE 73

Internet Content

XHTML

◮ eXtensible HTML ◮ XHTML is designed to replace HTML ◮ XHTML 1.0 is almost identical to HTML 4.1 ◮ A stricter and cleaner version

◮ All tags must be closed <br> becomes <br/>. Better with <br /> as old

browsers understand them.

◮ All documents must be well-formed (<b><i>text</b></i> is illegal) ◮ There should be no text outside tags DD1335 (Lecture 2) Basic Internet Programming Spring 2010 22 / 27

slide-74
SLIDE 74

Internet Content

XHTML

◮ eXtensible HTML ◮ XHTML is designed to replace HTML ◮ XHTML 1.0 is almost identical to HTML 4.1 ◮ A stricter and cleaner version

◮ All tags must be closed <br> becomes <br/>. Better with <br /> as old

browsers understand them.

◮ All documents must be well-formed (<b><i>text</b></i> is illegal) ◮ There should be no text outside tags

◮ XHTML is HTML defined as an XML application:

http://www.w3c.org/TR/xhtml1/dtds.html

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 22 / 27

slide-75
SLIDE 75

Internet Content

MIME: Multimedia Internet Mail Extension

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 23 / 27

slide-76
SLIDE 76

Internet Content

MIME: Multimedia Internet Mail Extension

◮ An open standard describing how multimedia is sent via email (initially)

HTTP request, response, etc

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 23 / 27

slide-77
SLIDE 77

Internet Content

MIME: Multimedia Internet Mail Extension

◮ An open standard describing how multimedia is sent via email (initially)

HTTP request, response, etc

◮ Describes how the parts of the content are organized. A part can contain

  • ther parts, . . .

Globally/parts/subparts/. . .

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 23 / 27

slide-78
SLIDE 78

Internet Content

MIME: Multimedia Internet Mail Extension

◮ An open standard describing how multimedia is sent via email (initially)

HTTP request, response, etc

◮ Describes how the parts of the content are organized. A part can contain

  • ther parts, . . .

Globally/parts/subparts/. . .

◮ Describes a type for the data sent, for example

◮ text ◮ plain, html ◮ news ◮ postscript, pdf, doc ◮ zip ◮ image ◮ jpeg, tiff, gif, . . . ◮ audio ◮ video ◮ mpeg, quicktime, wmv . . . DD1335 (Lecture 2) Basic Internet Programming Spring 2010 23 / 27

slide-79
SLIDE 79

Internet Content

HTTP: HyperText Transport Protocol

◮ Standard that describes how a web client (mostly a browser) and server

communicate to exchange data

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 24 / 27

slide-80
SLIDE 80

Internet Content

HTTP: HyperText Transport Protocol

◮ Standard that describes how a web client (mostly a browser) and server

communicate to exchange data

◮ Uses MIME to encode data both from the browser to the server (request)

and back (response)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 24 / 27

slide-81
SLIDE 81

Internet Content

HTTP: HyperText Transport Protocol

◮ Standard that describes how a web client (mostly a browser) and server

communicate to exchange data

◮ Uses MIME to encode data both from the browser to the server (request)

and back (response)

◮ Uses TCP/IP for data transfer

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 24 / 27

slide-82
SLIDE 82

Internet Content

HTTP: HyperText Transport Protocol

◮ Standard that describes how a web client (mostly a browser) and server

communicate to exchange data

◮ Uses MIME to encode data both from the browser to the server (request)

and back (response)

◮ Uses TCP/IP for data transfer ◮ To get the /utbildning/kth/kurser/DD1335/gruint09/index.html

page the client sends a request, like GET

/utbildning/kth/kurser/DD1335/gruint09/index.html HTTP/1.1

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 24 / 27

slide-83
SLIDE 83

Internet Content

HTTP: HyperText Transport Protocol

◮ Standard that describes how a web client (mostly a browser) and server

communicate to exchange data

◮ Uses MIME to encode data both from the browser to the server (request)

and back (response)

◮ Uses TCP/IP for data transfer ◮ To get the /utbildning/kth/kurser/DD1335/gruint09/index.html

page the client sends a request, like GET

/utbildning/kth/kurser/DD1335/gruint09/index.html HTTP/1.1

◮ See http://www.w3c.org/Protocols

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 24 / 27

slide-84
SLIDE 84

Internet Content

HTTP , request

◮ Command (GET or POST)

GET /utbildning/kth/kurser/DD1335/index.php HTTP/1.1

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 25 / 27

slide-85
SLIDE 85

Internet Content

HTTP , request

◮ Command (GET or POST)

GET /utbildning/kth/kurser/DD1335/index.php HTTP/1.1

◮ Headers (name:value pairs )

Host: www.csc.kth.se Accept: */*

accept any MIME type

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 25 / 27

slide-86
SLIDE 86

Internet Content

HTTP , request

◮ Command (GET or POST)

GET /utbildning/kth/kurser/DD1335/index.php HTTP/1.1

◮ Headers (name:value pairs )

Host: www.csc.kth.se Accept: */*

accept any MIME type

◮ empty line

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 25 / 27

slide-87
SLIDE 87

Internet Content

HTTP , request

◮ Command (GET or POST)

GET /utbildning/kth/kurser/DD1335/index.php HTTP/1.1

◮ Headers (name:value pairs )

Host: www.csc.kth.se Accept: */*

accept any MIME type

◮ empty line ◮ Content (in the declared content-type, nothing in the case of GET)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 25 / 27

slide-88
SLIDE 88

Internet Content

HTTP , request

◮ Command (GET or POST)

GET /utbildning/kth/kurser/DD1335/index.php HTTP/1.1

◮ Headers (name:value pairs )

Host: www.csc.kth.se Accept: */*

accept any MIME type

◮ empty line ◮ Content (in the declared content-type, nothing in the case of GET) ◮ If it is a POST request, content is sent too

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 25 / 27

slide-89
SLIDE 89

Internet Content

HTTP , response

◮ Command (mostly OK)

HTTP/1.1 200 OK

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 26 / 27

slide-90
SLIDE 90

Internet Content

HTTP , response

◮ Command (mostly OK)

HTTP/1.1 200 OK

◮ Headers (for example content-type, MIME)

Date: Fri, 12 Jan 2009 00:11:31 GMT Server: Apache/2.2.3 (Fedora) PHP/5.1.6 mod_perl/2.0.1 mod_ssl/2.0.54 OpenSSL/0.9.8b Transfer-Encoding: chunked Content-type: text/html

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 26 / 27

slide-91
SLIDE 91

Internet Content

HTTP , response

◮ Command (mostly OK)

HTTP/1.1 200 OK

◮ Headers (for example content-type, MIME)

Date: Fri, 12 Jan 2009 00:11:31 GMT Server: Apache/2.2.3 (Fedora) PHP/5.1.6 mod_perl/2.0.1 mod_ssl/2.0.54 OpenSSL/0.9.8b Transfer-Encoding: chunked Content-type: text/html

◮ empty line

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 26 / 27

slide-92
SLIDE 92

Internet Content

HTTP , response

◮ Command (mostly OK)

HTTP/1.1 200 OK

◮ Headers (for example content-type, MIME)

Date: Fri, 12 Jan 2009 00:11:31 GMT Server: Apache/2.2.3 (Fedora) PHP/5.1.6 mod_perl/2.0.1 mod_ssl/2.0.54 OpenSSL/0.9.8b Transfer-Encoding: chunked Content-type: text/html

◮ empty line ◮ content (in in our case the file

/public/www-csc/utbildning/kth/kurser/DD1335/index.php

at CSC)

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 26 / 27

slide-93
SLIDE 93

Internet Content

HTTP , proxies

◮ Some organizations wish to limit the HTTP accesses from their network

to other networks

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 27 / 27

slide-94
SLIDE 94

Internet Content

HTTP , proxies

◮ Some organizations wish to limit the HTTP accesses from their network

to other networks

◮ To do that, all browsers will have to connect to a proxy running on a host

inside the local network. Other connections are restricted by a firewall

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 27 / 27

slide-95
SLIDE 95

Internet Content

HTTP , proxies

◮ Some organizations wish to limit the HTTP accesses from their network

to other networks

◮ To do that, all browsers will have to connect to a proxy running on a host

inside the local network. Other connections are restricted by a firewall

◮ The proxy ’looks’ like a normal HTTP server, but it doesn’t actually host

any page. It is not limited by the firewall

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 27 / 27

slide-96
SLIDE 96

Internet Content

HTTP , proxies

◮ Some organizations wish to limit the HTTP accesses from their network

to other networks

◮ To do that, all browsers will have to connect to a proxy running on a host

inside the local network. Other connections are restricted by a firewall

◮ The proxy ’looks’ like a normal HTTP server, but it doesn’t actually host

any page. It is not limited by the firewall

◮ The proxy will connect to the desired host on the Internet

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 27 / 27

slide-97
SLIDE 97

Internet Content

HTTP , proxies

◮ Some organizations wish to limit the HTTP accesses from their network

to other networks

◮ To do that, all browsers will have to connect to a proxy running on a host

inside the local network. Other connections are restricted by a firewall

◮ The proxy ’looks’ like a normal HTTP server, but it doesn’t actually host

any page. It is not limited by the firewall

◮ The proxy will connect to the desired host on the Internet ◮ The proxy can decide to block connetion to some ’banned’ host

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 27 / 27

slide-98
SLIDE 98

Internet Content

HTTP , proxies

◮ Some organizations wish to limit the HTTP accesses from their network

to other networks

◮ To do that, all browsers will have to connect to a proxy running on a host

inside the local network. Other connections are restricted by a firewall

◮ The proxy ’looks’ like a normal HTTP server, but it doesn’t actually host

any page. It is not limited by the firewall

◮ The proxy will connect to the desired host on the Internet ◮ The proxy can decide to block connetion to some ’banned’ host ◮ The proxy can also do caching: if a page is requested by a lot of people in

the local network, it will be served faster

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 27 / 27

slide-99
SLIDE 99

Internet Content

HTTP , proxies

◮ Some organizations wish to limit the HTTP accesses from their network

to other networks

◮ To do that, all browsers will have to connect to a proxy running on a host

inside the local network. Other connections are restricted by a firewall

◮ The proxy ’looks’ like a normal HTTP server, but it doesn’t actually host

any page. It is not limited by the firewall

◮ The proxy will connect to the desired host on the Internet ◮ The proxy can decide to block connetion to some ’banned’ host ◮ The proxy can also do caching: if a page is requested by a lot of people in

the local network, it will be served faster

◮ The proxy adds special headers to the HTTP response

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 27 / 27

slide-100
SLIDE 100

Internet Content

HTTP , proxies

◮ Some organizations wish to limit the HTTP accesses from their network

to other networks

◮ To do that, all browsers will have to connect to a proxy running on a host

inside the local network. Other connections are restricted by a firewall

◮ The proxy ’looks’ like a normal HTTP server, but it doesn’t actually host

any page. It is not limited by the firewall

◮ The proxy will connect to the desired host on the Internet ◮ The proxy can decide to block connetion to some ’banned’ host ◮ The proxy can also do caching: if a page is requested by a lot of people in

the local network, it will be served faster

◮ The proxy adds special headers to the HTTP response ◮ Some networks only require proxy for port 80. Links to http://host:8080

may still work

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 27 / 27

slide-101
SLIDE 101

Internet Content

HTTP , proxies

◮ Some organizations wish to limit the HTTP accesses from their network

to other networks

◮ To do that, all browsers will have to connect to a proxy running on a host

inside the local network. Other connections are restricted by a firewall

◮ The proxy ’looks’ like a normal HTTP server, but it doesn’t actually host

any page. It is not limited by the firewall

◮ The proxy will connect to the desired host on the Internet ◮ The proxy can decide to block connetion to some ’banned’ host ◮ The proxy can also do caching: if a page is requested by a lot of people in

the local network, it will be served faster

◮ The proxy adds special headers to the HTTP response ◮ Some networks only require proxy for port 80. Links to http://host:8080

may still work

◮ Proxies can be defined for many other protocols

DD1335 (Lecture 2) Basic Internet Programming Spring 2010 27 / 27