Post on 25-Dec-2015
The Web Document
HTML
2 BACKGROUND
HTTP is the protocol used by most web applications Two phases
REQUEST: a client asks a server for information RESPONSE: the server responds to the clients request
Communication is primarily textual. The response is usually an HTML document.
3 INTRODUCTION
Browsers request data from servers. The requested data is usually delivered as an HTML document.
An HTML document is composed of content : the data of the document. structure : the way in which the content is organized
within the document style : how the content is displayed / rendered
4 DOCUMENT CONTENT
Title
Attribution
Chapter
Paragraph
Quotation
Essays in the art of writing.
By Robert Louis Stevenson
On Some Technical Elements of Style in Literature
There is nothing more disenchanting to man than to be shown the springs and mechanism of any art. All our arts and occupations lie wholly on the surface; it is on the surface that we perceive their beauty, fitness, and significance; and to pry below is to be appalled by their emptiness and shocked by the coarseness of the strings and pulleys. In a similar way, psychology itself, when pushed to any nicety, discovers an abhorrent baldness, but rather from the fault of our analysis than from any poverty native to the mind. And perhaps in aesthetics the reason is the same: those disclosures which seem fatal to the dignity of art seem so perhaps only in the proportion of our ignorance; and those conscious and unconscious artifices which it seems unworthy of the serious artist to employ were yet, if we had the power to trace them to their springs, indications of a delicacy of the sense finer than we conceive, and hints of ancient harmonies in nature. This ignorance at least is largely irremediable. We shall never learn the affinities of beauty, for they lie too deep in nature and too far back in the mysterious history of man. The amateur, in consequence, will always grudgingly receive details of method, which can be stated but never can wholly be explained; nay, on the principle laid down in Hudibras, that
‘Still the less they understand, The more they admire the sleight-of-hand,’
5DOCUMENT STRUCTURE
Essays in the art of writing.
By Robert Louis Stevenson
On Some Technical Elements of Style in Literature
There is nothing more disenchanting to man than to be shown the springs and mechanism of any art. All our arts and occupations lie wholly on the surface; it is on the surface that we perceive their beauty, fitness, and significance; and to pry below is to be appalled by their emptiness and shocked by the coarseness of the strings and pulleys. In a similar way, psychology itself, when pushed to any nicety, discovers an abhorrent baldness, but rather from the fault of our analysis than from any poverty native to the mind. And perhaps in aesthetics the reason is the same: those disclosures which seem fatal to the dignity of art seem so perhaps only in the proportion of our ignorance; and those conscious and unconscious artifices which it seems unworthy of the serious artist to employ were yet, if we had the power to trace them to their springs, indications of a delicacy of the sense finer than we conceive, and hints of ancient harmonies in nature. This ignorance at least is largely irremediable. We shall never learn the affinities of beauty, for they lie too deep in nature and too far back in the mysterious history of man. The amateur, in consequence, will always grudgingly receive details of method, which can be stated but never can wholly be explained; nay, on the principle laid down in Hudibras, that
‘Still the less they understand, The more they admire the sleight-of-hand,’
The document contains a title and a chapter. The chapter contains a paragraph and a quotation.
There are likely many more details that are not shown.
6 DOCUMENT STYLE
Essays in the art of writing.
By Robert Louis Stevenson
On Some Technical Elements of Style in Literature
There is nothing more disenchanting to man than to be shown the springs and mechanism of any art. All our arts and occupations lie wholly on the surface; it is on the surface that we perceive their beauty, fitness, and significance; and to pry below is to be appalled by their emptiness and shocked by the coarseness of the strings and pulleys. In a similar way, psychology itself, when pushed to any nicety, discovers an abhorrent baldness, but rather from the fault of our analysis than from any poverty native to the mind. And perhaps in aesthetics the reason is the same: those disclosures which seem fatal to the dignity of art seem so perhaps only in the proportion of our ignorance; and those conscious and unconscious artifices which it seems unworthy of the serious artist to employ were yet, if we had the power to trace them to their springs, indications of a delicacy of the sense finer than we conceive, and hints of ancient harmonies in nature. This ignorance at least is largely irremediable. We shall never learn the affinities of beauty, for they lie too deep in nature and too far back in the mysterious history of man. The amateur, in consequence, will always grudgingly receive details of method, which can be stated but never can wholly be explained; nay, on the principle laid down in Hudibras, that
‘Still the less they understand, The more they admire the sleight-of-hand,’
Large bold underlined
Small all-caps gray
Medium bold blue
Small black
Small italic indented
7 RENDERED DOCUMENT
The browser takes the content, structure, and style information and 'renders' the document. This is the result.
8 HTML DOCUMENTS
HTML documents: Hypertext markup language hypertext : links markup language : tags are used to describe structure
HTML documents are plain text documents content is just typed in tags are used to provide structure to the content CSS is used to provide style to the document
9 HTML SYNTAX
HTML documents are composed of elements (also known as tags) A tag is written like:
<section> …. </section> <div> … </div> <table> … </table>
Notes on tags the ‘<‘ indicates that what follows is a command to the browser The ‘</’ indicates the end of a command The name of the tag is what occurs first in the angled brackets.
There are a fixed number of tags in HTML. You can’t just type whatever you want: <china> … </china> <scun> … </scun>
10 HTML SYNTAX
Tags define the structure of the content What kind of thing the content represents
section quotation title …
How the content is related to other content Tags are not case sensitive
<BODY> <Body> <body> <bODY>
11DOCUMENT STRUCTURE
<div>Essays in the art of writing.
</div>
<h6>By Robert Louis Stevenson</h6>
<div class="chapter">On Some Technical Elements of Style in Literature
</div>
<p>There is nothing more disenchanting to man than to be shown the springs and mechanism of any art. All our arts and occupations lie wholly on the surface; it is on the surface that we perceive their beauty, fitness, and significance; and to pry below is to be appalled by their emptiness and shocked by the coarseness of the strings and pulleys. In a similar way, psychology itself, when pushed to any nicety, discovers an abhorrent baldness, but rather from the fault of our analysis than from any poverty native to the mind. And perhaps in aesthetics the reason is the same: those disclosures which seem fatal to the dignity of art seem so perhaps only in the proportion of our ignorance; and those conscious and unconscious artifices which it seems unworthy of the serious artist to employ were yet, if we had the power to trace them to their springs, indications of a delicacy of the sense finer than we conceive, and hints of ancient harmonies in nature. This ignorance at least is largely irremediable. We shall never learn the affinities of beauty, for they lie too deep in nature and too far back in the mysterious history of man. The amateur, in consequence, will always grudgingly receive details of method, which can be stated but never can wholly be explained; nay, on the principle laid down in Hudibras, that</p>
<q>‘Still the less they understand, The more they admire the sleight-of-hand,’</q>
Document structure is defined by the tags.
12DOCUMENT STRUCTURE
Tags define the structure of a document. Tags must be properly nested. Each tag must be fully contained
within a ‘parent’ tag. Good:
<div>This is some text <span>with nesting</span></div> Bad:
<div>This is some text<span>with</div> nesting</span>
Tags are related to each other as parent : If tag A contains tag B without another tag between them,
tag A is the parent of tag B. child : If tag B is contained by tag A without another tag between
them, tag B is the child of tag A. sibling : If tag A and tag B have the same parent, A and B are siblings.
13EXAMPLE OF DOCUMENT
STRUCTURE
14HTML SYNTAX :
ATTRIBUTES
Tags may also have attributes <tagname att1="val1" att2="val2" …>
Examples: <div class=“highlight”> … </div> <td border=“0”/> … </td>
An attribute is always name=“value” A tag may have many attributes
Attribute names are fixed. You can’t just type whatever you want. <div school="scun"> … </div> <td singer="Huo Zun"> … </td>
15 HTML TAGS
There are over 100 tags in HTML5. They can be grouped as follows Structure: html, head, body, div, span Text: p, h1-h6, strong, em, abbr, acronym, address, bdi, bdo,
blockquote, cite, q, code, ins, del, dfn, kbd, pre, samp, var, br, sub, sup, b, i, big, small, hr, pre
Links: a, base Images and Objects: img, area, map, object, param Lists: uo, ol, li, dl, dt, dd Tables: table, tr, td, th, tbody, thead, tfoot, col, colgroup,
caption Forms: form, input, textarea, select, option, optgroup,
button, label, fieldset, legend
16HTML DOC
STRUCTURE Every document must have the following skeleton
DOCTYPE tag says that this is an "HTML 5" document <html> tag as the root element with exactly two children.
<head> tag as the first element of the root <title> within the head
<body> follows the title.
<!DOCTYPE HTML><html> <head> <title>Title</title> </head> <body> </body></html>
17 ENTITIES
Some characters have a special meaning "<" indicates the start of an element (or tag)
How to put a ‘<‘ in a paragraph of text? Create a page that contains the text "x < y".
Result Description Entity Name Entity Number non-breaking space  < less than < <> greater than > >& ampersand & &¢ cent ¢ ¢£ pound £ £¥ yen ¥ ¥€ euro € €§ section § §© copyright © ©® registered trademark ® ®
18 ELEMENT LAYOUT
Tags are either block or inline BLOCK: appear as a 'block' which means that the
elements are separated from surrounding elements as if a line-feed had been entered and an empty-line inserted.
INLINE: are not separated from other elements and may not have any visible indicator at all.
19GENERIC STRUCTURAL
ELEMENTS
20 PREFORMATTED
21 HEADINGS
22 SECTION
23 ARTICLE
24 PARAGRAPH
25 QUOTATION
26 BLOCKQUOTE
27 BLOCKQUOTE
28 ANCHORS
29 IMAGES
Web browsers have support for images in many formats. The most common are: GIF
8 bit color (usually lossy) Small file size Use for logos/icons
JPEG 24 bit color (usually lossy) Good compression Use for photos
PNG 24 bit color with better transparency support than JPEG Good compression Use for photos
30 IMAGES
31 IMAGES
32 LISTS
There are three kinds of HTML lists UL : an unordered list of items
order of the items is not meaningful rendered with bullets items are tagged with <LI>
OL : an ordered list of items order of the items is meaningful rendered with numbers items are tagged with <LI>
DL : a definition list a list of terms and their definitions Contains only dt and dd elements
33 LISTS
34 LISTS
35 LISTS
36 LISTS
37 LISTS
38 FORMS
An HTML form defines a set of interactive controls that collect data from a user and submit the data to a web site. Different types of input : text, numbers, dates, others Need to know where to submit the data Need to know when to submit the data Need to know how to submit the data
A form defines the specific inputs where to submit the data when to submit the data how to submit the data
39 FORMS
40 INPUT
41 FORMS
Form data is sent to the server as name-value pairs. When the above form is submitted, the web server
would receive the following information first_name="Jackie" last_name="Chan" email="jchan@gmail.com"
42 FORMS
Form data is sent to the server as name-value pairs. When the above form is submitted, the web server
would receive the following information first_name="Jackie" last_name="Chan" email="jchan@gmail.com"
43 SELECT
44 TABLE OVERVIEW
A table is a grid of data. A table contains A <caption> (optional) A head <thead> (optional) A foot <tfoot> (optional) A body <tbody> (mandatory but supplied if not provided)
Contains rows <tr> Contains column headers <th> Contains data <td>
45 TABLE
46 TABLE
47 TABLE
A table is a matrix of cells: <table> A <caption> is the table title.
First child of <table> Each row is contained in a <tr> element A cell <td> can have HTML elements within A header cell <th> contains column headers Border attribute is used to specify the border!
border=“border” means browser default border=“3” means 3 pixel-width border
48 TABLE EXAMPLE
<table border = "border"> <caption> Fruit Juice Drinks </caption> <tr> <th> </th> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr> <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> <td> 0 </td> </tr> <tr> <th> Lunch </th> <td> 1 </td> <td> 0 </td> <td> 0 </td> </tr> </table>
49 TABLE EXAMPLE
<table border = "border"> <tr>
<th></th><th colspan=“3”>Fruit Juice Drinks</th>
</tr> <tr> <th> </th> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr> <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> <td> 0 </td> </tr> <tr> <th> Lunch </th> <td> 1 </td> <td> 0 </td> <td> 0 </td> </tr> </table>
50 FORMS
A form is used to gather information from the browser and send it to a server.
Data is entered into HTML controls (or widgets) radio buttons textareas checkboxes…
When a form is submitted, the values of the controls in the form are gathered and transmitted to the server
All controls must be located in a <FORM> element. ACTION is a required attribute and denotes what URL
receives the submitted data action=“http://www.company.com/login.jsp”
51CONTROLS (WIDGETS)
<INPUT> tag is used to create various kinds of controls Usually best to enclose the inputs in <label> tags TYPE attribute denotes the kind of input created
TYPE=“TEXT”: a horizontal box for text input size: default size is 20 characters maxlength: if set, causes extra characters to be ignored
TYPE=“PASSWORD”: identical to text except that the typed characters are displayed as asterisks
TYPE=“CHECKBOX”: used to collect zero-or-more values value: the value if checked checked: whether or not the control is initially checked
52 CHECKBOXES
My favorite football teams<p><form action=""><label><input type="checkbox" name="favorite" value="Rams" checked="checked"/>Rams</label><label><input type="checkbox" name="favorite" value="Packers" />Packers</label><label><input type="checkbox" name="favorite" value="Bears" />Bears</label><label> <input type="checkbox" name="favorite" value="Vikings" />Vikings</label></form>
53 RADIO BUTTONS
TYPE=“RADIO”: selects exactly one of many choices Every button in the group must have the same name Only one ‘checked’ attribute must be set and if none are
set the browser will usually check the first choice
Select your favorite football team<p><form action=""><label><input type=“radio" name="favorite" value="Rams" checked="checked"/>Rams</label><label><input type=“radio" name="favorite" value="Packers" />Packers</label><label><input type=“radio" name="favorite" value="Bears" />Bears</label><label> <input type=“radio" name="favorite" value="Vikings" />Vikings</label></form>
54 SUBMIT AND RESET
Enter SSN:<p><form action=""><input type="TEXT" size="11"></text><input type="SUBMIT" value="Submit"><input type="RESET"></form>
55 SELECT
Select: <SELECT> element behaves like either the checkbox or radio button but uses a different interface Radio button is the default behavior multiple=“multiple” denotes checkbox behavior name attribute is required each option is denoted by an <OPTION> element
SELECTED attribute is used to denote which option is selected
56 SELECT
Select your favorite football team:<p><form action="">
<select name="favorite"><option>Rams</option><option>Packers</option><option>Bears</option><option>Vikings</option>
</select></form>
57 TEXTAREA
Text area: <textarea> A multi-row control for entering text rows=“n” denotes the number of rows cols=“n” denotes the number of columns Textarea scrolls if the entered text overflows the
displayed size
Enter comments:<p><form action="“><textarea name="comment" rows="3" cols="40">The Rams rule and the Vikings drool.</textarea></form>