Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
HTML PowerPoint Presentation

HTML

180 Views Download Presentation
Download Presentation

HTML

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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”