HTML

1. HTML The Web Document

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 Essays in the art of writing. Title By Robert Louis Stevenson Attribution On Some Technical Elements of Style in Literature Chapter 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 Paragraph Quotation ‘Still the less they understand, The more they admire the sleight-of-hand,’

5. Document Structure 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. 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,’

6. Document Style Large bold underlined Essays in the art of writing. Small all-caps gray By Robert Louis Stevenson Medium bold blue 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 Small black Small italic indented ‘Still the less they understand, The more they admire the sleight-of-hand,’

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>

11. Document Structure Document structure is defined by the tags. <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>

12. Document 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.

13. Example of Document Structure

14. HTML 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="HuoZun"> … </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

16. HTML 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".

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.

19. Generic 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> <thcolspan=“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”