Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and...

Web Technology

Web Technology

BackgroundHypertext, WWW

Transferring PagesHTTP

Displaying PagesHTMLCSS

XML and beyond

Ted Nelson, 1963

Hyperlink, Hypertext, Hypermedia

Real start: Memex

Memory Extender“As we may think”, Vannevar Bush, 1945 (!)

Combine with Internet...

Word Wide Web

Worldwide

Hypertext + Distributed Systems

Globally unique hyperlinks

Uniform Resource Locators (URL)

http://www.few.vu.nl/~wdb/

http://www.few.vu.nl:80/~wdb/

namespacescheme

hostnamegloballyunique (?)

port (?)

local path

More URLs

relative URL:“cv” from http://www.few.vu.nl/~wdb/

http://www.few.vu.nl.nl/~wdb/cv

mailto:[email protected]:25

namespacescheme

hostnamelocal path

Like the Internet: robust

Web Technology




XML and beyond

Hypertext Transport Protocol (HTTP)

Request / Response

Stateless (again!)

HTTP Requests

SafeGET download a documentHEAD GET without body

IdempotentPUT upload a documentDELETE delete a document

OtherPOST submit data to a URL... unused in practice (?)

Main HTTP Responses

200 OK

301 Moved Permanently302 Found

403 Forbidden404 Not Found

500 Internal Server Error503 Service Unavailable

... although there are more

Web Technology




XML and beyond

Transmit and display data

Browser Incompatibilities

Not as bad as it used to be

This is not a web design class

Only a technical primer.

Some more language elements online.

Don't copy elements and such,use online references. For instance:

http://www.w3schools.comhttp://htmlhelp.com/reference/html40

Write a webpage

Today: complex websites, but ...Basis: prettyprinted text

Method: annotation

Syntax: enclosing brackets

For instance, bold text

is encoded as<b>bold text</b>

in web's hypertext language

Hypertext Markup Language (HTML)

<html><head>

<title>Hello World page</title></head>

<body><p>Hello World!</p><p>Second</p>

</body></html>

Document Structure

<html><head>

[HEAD ELEMENTS]</head>

<body>[BODY ELEMENTS]

</body></html>

Whitespace

<html> <head> <title> white space, what white space?</title>

</head> <body>

Like it or not, your browser

will remove all white space to make the page look nice

according to its rules.

</body></html>

Don't force line breaks and such, leave to display device. Many different types (desktop monitor, phone, blind reader) and sizes.

Special Characters

Cannot write <p>this is the greater than character: '<'</p>

Instead, use character entities<p>this is the greater than charactier: '>'</p>

Character Entities

Char. Entity Meaning

& & Ampersand

< < Less than

> > Greater than

” " Double quote

’ ' Single quote

¼ ¼ One quarter

½ ½ One half

¾ ¾ Three quarters

° Degree

(space) Non-breaking space

Basic Head Elements

<title><script><style><meta><link>

Head Example

<head><meta name="description" content="What this page is

about"><meta name="keywords" content="HTML, example"><title>Example HTML Header</title><link href="style.css" rel="stylesheet" type="text/css">

</head>

Hyperlinks

<a href=”URL”>Text of link</a>

<p>Go to <a href=”http://www.few.vu.nl/~wdb/”>My webpage</a> now</p>

in browser:

Go to My webpage now

Basic Presentational Elements

<b>boldface</b><i>italic</i>

<tt>monospace</tt>

Mostly deprecated in favor of CSS<blink></blink>

Basic Structural Elements

<p><br><hr>

<img src=”chicken.gif” alt=”image of a chicken”><span><div>

<h1> ... <h6><ul><li></li>...</ul>

Tables

<table><tr><th>first column</th><th>second column</th></tr><tr><td>a</td><td>1</td></tr><tr><td>b</td><td>2</td></tr></table>

first columnab

second column12

Forms

<form><input type=”text”><input type=”img”><input type=”hidden”><input type=”submit”>

[...]<textarea><select>

<option value=”option1”>the first option</option></select>

Google Form markup

<form action="/search" name=f><table cellpadding=0 cellspacing=0><tr valign=top>

<td width=25%> </td><td align=center nowrap><input name=hl type=hidden value=en><input name=btnG type=submit value="Google Search"><input name=btnI type=submit value="I'm Feeling Lucky">

</td>[...]

</tr></table></form>

The Form Tag

<form action="URL” method="post">

<form action="URL” method="get">

<form action="mailto:[email protected]” method="post">

Valid Markup?

Validate!http://validator.w3.org/

HTML Referencehtmlhelp.com/reference/html40/

Formal Names

Elements: <></>

Two kinds: spanning elements <a></a>

inline elements <img> or <img/>

Attributes <a key=“value”>

Document Types

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd">

Different versions of HTML

Non HTML documents

Tell the client (browser) which version of which language to expect

Common Page elements

Logo/Banner

at the top of all pages

Main navigation Bar

below the banner, or to the left or right of the main text

Q: How would you place it to the left?

Ad bar

at the right

Secondary Bar

at the bottom

Page Layout

What about field sizes?

Width of the nagivation bar

Vertical alignment of the navigation links

Assignment 1.a

The three page static website, but

with navigation bar and CSS for style

Hand in first version todayPlace files in Internet Programming2009\data\ass1a\<yourname>

Doesn’t matter if it is finished. Total must be finished by Friday

Web Technology




XML and beyond

Cascading Style Sheets (CSS)

Newer than HTML

Basic Idea: Separate content from presentational information

http://www.csszengarden.com

Example

Not

<i>emphasized text!</i>

But

<span style=”font-style:italic”>emphasized text!</span>

Why?

Bad example.Can do much more than italics

(<i> is even still used)

What if you want to change

emphasized text!into

emphasized text!

Why?

Give presentational information

Make it easy to change the style (CSS) without changing the contents (HTML)

For instance, say that on your site all <h1> headers should be Blue on a black background.

Style Attributes

Example: underlining text

<p>

This text takes the default color set by a higher level item or

the browser itself.

</p>

<p style=“color : blue”>

This text is blue

<span style=“text-decoration : underline”>

and this is even underlined.

</span>

</p>

Syntax

[key1] : [value1][key1] : [value1]; [key2] : [value2]

font-style : italicfont-weight : bold; color : #RRGGBB

Properties60(+?) properties affect presentation

6 basic classes

Fonts

Lists & Tables

Text (alignment, width)

Margins (spacing)

Colors (text, background)

Borders

Long and short form

font-style : italic, font-weight : bold

Or

font: italic bold

Property values

font : italic

width : 100px; height : 0.9em

color : blue; background : #0000ff

CSS Reference

Applying style

span and div

Selecting with <span>

<p>standard<span style=”color:blue”>special</span>

</p>

standard special

Selecting Blocks with <div>

Box that groups a number of items

Similar to <p>, but without meaning

<div style=”color:red”><h1>Hey!</h1><p>Main text</p>

</div>

Can be used for presentation instead of tables

Back to our layout

Placement: the Box model

td {margin-left : 1cm; padding : 0; border : 2px solid blue}

Shared Style Attributes

With selectors

Using a selector

<html>

<head>

<style type=“text/css”>

h1 {color : blue; font-size : 150%}

</style>

</head>

<body>

<h1>First heading</h1>

<h1>Second Heading</h1>

</body>

</html>

Selectors

Select to which HTML element a style rule applies

p {color : blue}p.notice {color : red}.notice {color : green}#testid {color: purple}

<p>text 1</p><p class=”notice”>text 2</p><h4 class=”notice”>text 3</h4><p id=”testid”>text 4</p>

<- Type selector

<- Class selector<- ID selector

Selector Syntax

SELECTOR { key=value ; key=value ; … }

Selectors

Again, many more.

Such as select the descendant of a tag

But I’ve never used these.

More info at:

http://www.w3.org/TR/CSS2/selector.html

Classes and ids

HTML attributes

Any element can have any number of classes<p class=“myclass,otherclass”></p>

Any element may have an ID, but this must be unique

<p id=“markedparagraph”></p>

Selectors

Select to which HTML element a style rule applies

p {color : blue}p.notice {color : red}.notice {color : green}#testid {color: purple}

<p>text 1</p><p class=”notice”>text 2</p><h4 class=”notice”>text 3</h4><p id=”testid”>text 4</p>

<- Type selector

<- Class selector<- ID selector

External stylesheets

Use the same style across a set of webpages

Not<style></style>

But<link ref=”mystyle.css” rel=”stylesheet” type=”text/css”>

Cascading Style Sheets

Three types of style sheets

Inline - Attach to a tag

This is fine-grain style, which defeats the purpose of style sheets - uniform style

<span style=””>

Document-level style sheets - Define a class in the <head><span class=””>

External style sheets - Link to an external css file from the <head><span class=””>

Cascade: Most specific type applies

Minor warning

Like HTML, different versions of CSS:

CSS 1

CSS 2

CSS 2.1

Not all versions are equally well supported by

all browsers.

Web Technology




XML and beyond

XML

“Metalanguage” of elements and attributesSimple Human readable Syntax

But not a presentation language, e.g.,

<book><title>My Book</title><author>Me</author>

</book>

Describes HTML, SVG, RSS, …

(mostly) Hierarchical

Document Object Model

We return to this later

Well-formedness and Validity

Well-formed: conforms to syntactic rulesValid: follows datatype semantics

<!DOCTYPE MYBOOK PUBLIC "URI"><book>

<title>My Book</title><author>Me</author><track>

<id>1</id><title>Angy</title>

</track></book>

SGML

Superset of XML, older

Basis for HTML(although it does not conform)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>

<head></head><body>

<p>line 1<br/>line 2</p></body>

</html>

XML + HTML 4.0 = XHTML 1.0

XML pure version of HTML

More logical/strict/simple syntax

For instance: not <br> or <br/>, only <br/>

Personally, I prefer to write XHTML

Web Technology Practical

Write 3 static pages for your project website●that conform to HTML 4.01 or XHTML 1.0●that uses a shared, external CSS file for presentation●that all link to one another using a navigation bar●index.html should present the site, its purpose

●And embed an image●contact.html page should enable user feedback

●Enable them to submit a form by GET (for now)●The form must contain at least 4 different input types

●products.html lists all products in the shop●must contain a table of at least 5 rows●Each row has a name, price and quantity column

Validate it by uploading to the W3C validator

Open it in Firefox from your drive using “open file”

Practical: Assignment 1.aDeadline: Friday

Counts for 50% of the first week test

If everything works and code is valid: 8/10

Minor issues: 6 or 7

Major omissions: 5 or lower

For a 9 or 10, be creative!

Make it look like a real site.

Spend time getting presentation nice

Insert non-trivial amount of text (e.g., product information), images, …

Use HTML/CSS features I have not discussed

Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and...

Documents

Transcript of Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and...