Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and...
-
Upload
raymond-sparks -
Category
Documents
-
view
220 -
download
0
Transcript of Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and...
![Page 1: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/1.jpg)
Web Technology
![Page 2: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/2.jpg)
Web Technology
BackgroundHypertext, WWW
Transferring PagesHTTP
Displaying PagesHTMLCSS
XML and beyond
![Page 3: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/3.jpg)
Ted Nelson, 1963
Hyperlink, Hypertext, Hypermedia
![Page 4: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/4.jpg)
Real start: Memex
Memory Extender“As we may think”, Vannevar Bush, 1945 (!)
![Page 5: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/5.jpg)
Combine with Internet...
![Page 6: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/6.jpg)
Word Wide Web
![Page 7: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/7.jpg)
Worldwide
Hypertext + Distributed Systems
Globally unique hyperlinks
![Page 8: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/8.jpg)
Uniform Resource Locators (URL)
http://www.few.vu.nl/~wdb/
http://www.few.vu.nl:80/~wdb/
namespacescheme
hostnamegloballyunique (?)
port (?)
local path
![Page 9: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/9.jpg)
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
![Page 10: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/10.jpg)
Like the Internet: robust
![Page 11: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/11.jpg)
Web Technology
BackgroundHypertext, WWW
Transferring PagesHTTP
Displaying PagesHTMLCSS
XML and beyond
![Page 12: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/12.jpg)
Hypertext Transport Protocol (HTTP)
Request / Response
Stateless (again!)
![Page 13: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/13.jpg)
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 (?)
![Page 14: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/14.jpg)
Main HTTP Responses
200 OK
301 Moved Permanently302 Found
403 Forbidden404 Not Found
500 Internal Server Error503 Service Unavailable
![Page 15: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/15.jpg)
... although there are more
![Page 16: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/16.jpg)
![Page 17: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/17.jpg)
![Page 18: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/18.jpg)
![Page 19: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/19.jpg)
![Page 20: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/20.jpg)
![Page 21: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/21.jpg)
![Page 22: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/22.jpg)
![Page 23: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/23.jpg)
Web Technology
BackgroundHypertext, WWW
Transferring PagesHTTP
Displaying PagesHTMLCSS
XML and beyond
![Page 24: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/24.jpg)
Transmit and display data
![Page 25: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/25.jpg)
Browser Incompatibilities
Not as bad as it used to be
![Page 26: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/26.jpg)
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
![Page 27: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/27.jpg)
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
![Page 28: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/28.jpg)
Hypertext Markup Language (HTML)
<html><head>
<title>Hello World page</title></head>
<body><p>Hello World!</p><p>Second</p>
</body></html>
![Page 29: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/29.jpg)
Document Structure
<html><head>
[HEAD ELEMENTS]</head>
<body>[BODY ELEMENTS]
</body></html>
![Page 30: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/30.jpg)
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.
![Page 31: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/31.jpg)
Special Characters
Cannot write <p>this is the greater than character: '<'</p>
Instead, use character entities<p>this is the greater than charactier: '>'</p>
![Page 32: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/32.jpg)
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
![Page 33: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/33.jpg)
Head
![Page 34: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/34.jpg)
Basic Head Elements
<title><script><style><meta><link>
![Page 35: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/35.jpg)
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>
![Page 36: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/36.jpg)
Body
![Page 37: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/37.jpg)
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
![Page 38: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/38.jpg)
Basic Presentational Elements
<b>boldface</b><i>italic</i>
<tt>monospace</tt>
Mostly deprecated in favor of CSS<blink></blink>
![Page 39: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/39.jpg)
Basic Structural Elements
<p><br><hr>
<img src=”chicken.gif” alt=”image of a chicken”><span><div>
<h1> ... <h6><ul><li></li>...</ul>
![Page 40: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/40.jpg)
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
![Page 41: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/41.jpg)
Forms
![Page 42: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/42.jpg)
Forms
<form><input type=”text”><input type=”img”><input type=”hidden”><input type=”submit”>
[...]<textarea><select>
<option value=”option1”>the first option</option></select>
![Page 43: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/43.jpg)
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>
![Page 44: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/44.jpg)
The Form Tag
<form action="URL” method="post">
<form action="URL” method="get">
<form action="mailto:[email protected]” method="post">
![Page 45: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/45.jpg)
Valid Markup?
Validate!http://validator.w3.org/
![Page 46: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/46.jpg)
HTML Referencehtmlhelp.com/reference/html40/
![Page 47: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/47.jpg)
Formal Names
Elements: <></>
Two kinds: spanning elements <a></a>
inline elements <img> or <img/>
Attributes <a key=“value”>
![Page 48: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/48.jpg)
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
![Page 49: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/49.jpg)
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 50: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/50.jpg)
Page Layout
![Page 51: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/51.jpg)
What about field sizes?
Width of the nagivation bar
Vertical alignment of the navigation links
![Page 52: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/52.jpg)
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
![Page 53: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/53.jpg)
Web Technology
BackgroundHypertext, WWW
Transferring PagesHTTP
Displaying PagesHTMLCSS
XML and beyond
![Page 54: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/54.jpg)
Cascading Style Sheets (CSS)
Newer than HTML
Basic Idea: Separate content from presentational information
![Page 55: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/55.jpg)
![Page 56: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/56.jpg)
http://www.csszengarden.com
![Page 57: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/57.jpg)
Example
Not
<i>emphasized text!</i>
But
<span style=”font-style:italic”>emphasized text!</span>
![Page 58: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/58.jpg)
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!
![Page 59: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/59.jpg)
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.
![Page 60: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/60.jpg)
Style Attributes
![Page 61: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/61.jpg)
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>
![Page 62: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/62.jpg)
Syntax
[key1] : [value1][key1] : [value1]; [key2] : [value2]
font-style : italicfont-weight : bold; color : #RRGGBB
![Page 63: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/63.jpg)
Properties60(+?) properties affect presentation
6 basic classes
Fonts
Lists & Tables
Text (alignment, width)
Margins (spacing)
Colors (text, background)
Borders
![Page 64: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/64.jpg)
Long and short form
font-style : italic, font-weight : bold
Or
font: italic bold
![Page 65: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/65.jpg)
Property values
font : italic
width : 100px; height : 0.9em
color : blue; background : #0000ff
![Page 66: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/66.jpg)
CSS Reference
![Page 67: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/67.jpg)
Applying style
span and div
![Page 68: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/68.jpg)
Selecting with <span>
<p>standard<span style=”color:blue”>special</span>
</p>
standard special
![Page 69: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/69.jpg)
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
![Page 70: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/70.jpg)
Back to our layout
![Page 71: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/71.jpg)
Placement: the Box model
td {margin-left : 1cm; padding : 0; border : 2px solid blue}
![Page 72: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/72.jpg)
Shared Style Attributes
With selectors
![Page 73: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/73.jpg)
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>
![Page 74: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/74.jpg)
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
![Page 75: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/75.jpg)
Selector Syntax
SELECTOR { key=value ; key=value ; … }
![Page 76: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/76.jpg)
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
![Page 77: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/77.jpg)
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>
![Page 78: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/78.jpg)
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
![Page 79: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/79.jpg)
External stylesheets
Use the same style across a set of webpages
Not<style></style>
But<link ref=”mystyle.css” rel=”stylesheet” type=”text/css”>
![Page 80: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/80.jpg)
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
![Page 81: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/81.jpg)
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.
![Page 82: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/82.jpg)
Web Technology
BackgroundHypertext, WWW
Transferring PagesHTTP
Displaying PagesHTMLCSS
XML and beyond
![Page 83: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/83.jpg)
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, …
![Page 84: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/84.jpg)
(mostly) Hierarchical
![Page 85: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/85.jpg)
Document Object Model
We return to this later
![Page 86: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/86.jpg)
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>
![Page 87: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/87.jpg)
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>
![Page 88: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/88.jpg)
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
![Page 89: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/89.jpg)
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”
![Page 90: Web Technology. Background Hypertext, WWW Transferring Pages HTTP Displaying Pages HTML CSS XML and beyond.](https://reader036.fdocuments.us/reader036/viewer/2022062802/56649ec05503460f94bcb5d8/html5/thumbnails/90.jpg)
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