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 &nbsp; &#160;< less than &lt; &#60;> greater than &gt; &#62;& ampersand &amp; &#38;¢ cent &cent; &#162;£ pound &pound; &#163;¥ yen &yen; &#165;€ euro &euro; &#8364;§ section &sect; &#167;© copyright &copy; &#169;® registered trademark &reg; &#174;

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>