View
220
Download
0
Category
Preview:
Citation preview
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:w.de.bruijn@few.vu.nl:25
namespacescheme
hostnamelocal path
Like the Internet: robust
Web Technology
BackgroundHypertext, WWW
Transferring PagesHTTP
Displaying PagesHTMLCSS
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
BackgroundHypertext, WWW
Transferring PagesHTTP
Displaying PagesHTMLCSS
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
Head
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>
Body
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
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:wdb@few.vu.nl” 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
BackgroundHypertext, WWW
Transferring PagesHTTP
Displaying PagesHTMLCSS
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
BackgroundHypertext, WWW
Transferring PagesHTTP
Displaying PagesHTMLCSS
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
Recommended