Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Web pages Using web standards
Document related concepts
Transcript
Chapter 4 Web Pages Using 2 WebChapter Standards Web Pages Using Web Standards Introduction • Web architecture – Tier 1: client-side presentation, with web browsers rendering HTML – Tier 2: server-side presentation, with a web server encoding data presentation in HTML and CSS – Tier 3: application server, providing scalable business computation – Tier 3: data persistence and legacy systems Hypertext Markup Language • Basic functions – Describe data’s logical structure • Paragraph, division, tables, lists, titles, … – Specify data presentation rules • What font and font size for titles? • Which icon/symbol will lead each list item? • Traditional HTML uses tags and attributes to perform both of the functions XHTML • XHTML uses XML syntax – Can be processed by XML parsers and transformers to provide different views of the same data – Focuses on data logical structure specification – Introduces CSS to specify data presentation • This lecture is based on XHTML v1.0 • This lecture treats HTML and XHTML as synonyms: it covers their common core Tag Names and Tags • HTML has reserved tag names like html, body, and p • A start tag is a tag name enclosed in angle brackets < and >, like <html> and <p> • An end tag is the same as the corresponding start tag except it has a forward slash / immediately before the tag name, like </html> and </p> Tags vs Elements • An element consists of a start tag and a matching end tag based on the same tag name, with optional text or other elements, called element value, between them – <p>This is free text</p> – <p>This element has a nested <b>element</b></p> Nested Elements • Elements cannot be partially nested: the end tag of an element must come after the end tags of all its nested elements (first starting, last ending) – <p>This is not a valid <b>element</p></b> White-Space Characters • The newline, tab, and space characters are collectively called the white-space characters • A sequence of white-space characters acts like a single space <html> <body> <p>Sample text</p> </body> </html> <html><body><p>Sample text</p></body></html> Empty Elements • If an element contains no value, the start tag and the end tag can be combined into one tag as <tagName/> <p></p> <p/> • Important exceptions – <script></script> cannot be written as <script/> – <textarea></textarea> cannot be written as <textarea/> Attributes • The start tag of an end element can have attributes separated by white spaces, each in the form – attributeName="attributeValue" • <p class="quotation" id="paragraph1"> – attributeName='attributeValue' • <p style="font: bold 24px 'Times New Roman', serif"> HTML File Structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Sample Title Shown in Window Title Bar</title> </head> <body> <p>Sample text</p> </body> </html> Basic HTML Elements • Element p for creating paragraphs • Elements h1, h2, h3, h4, h5, and h6 for creating headings in decreasing font s • Element b for presenting text in boldface • Element i for presenting text in italic • Element pre for presenting in a monospace font and preserving whitespace characters Basic HTML Elements … • Sample HTML <h2>A Large-Size Heading</h2> <p>Successive white spaces are equivalent to a single one, and the new-line character will not break the current line in a <b>Web browser</b>.</p> <p>To break a line without creating a <br/> new paragraph, use element <i>br</i>.</p> <p>You can introduce a <tt>horizontal line</tt> with element <i>hr</i>.</p> <pre> To present preformatted text in monospace font, use element <i>pre</i> </pre> <hr/> Basic HTML Elements … • Corresponding browser rendering Creating Lists • Creating unordered lists <ul> <li>Disc item 1</li> <li>Disc item 2</li> </ul> • Creating ordered lists <ol> <li>Disc item 1</li> <li>Disc item 2</li> </ol> Creating Lists … <ul> <li>Disc item 1</li> <li>Disc item 2 <ol><li>Decimal item 1</li> <li value="3">Decimal item 3 (skip item 2)</li> <li>Decimal item 4</li></ol> <li>Disc item 3</li> </ul> <ul style="list-style-type: square"> <li>Square item 1</li> <li>Square item 2 <ol style="list-style-type: lower-alpha" start="2"> <li>Lower-alpha item 2 (skip item 1)</li> <li value="4">Lower-alpha item 4 (skip item 3)</li> <li>Lower-alpha item 5</li> </ol> <li>Square item 3</li> </ul> Creating Lists … Inserting Special Characters HTML uses entities to specify special characters. An HTML entity can be specified with syntax &code;, where code could be a predefined entity name or a predefined entity number. Only some popular entities have entity names. Symbol Entity Name Entity Number & (ampersand) & & < (less than) < < > (greater than) > > " (straight double quote) " " ' (straight single quote) &apros; ' (space) (nobreaking space)   (tab)   	 © (copyright) © © † (dagger) † † “ (curly double start quote) “ ” (curly double end quote) ” ‘ (curly single start quote) ‘ ’ (curly single end quote) ’ . (period) . Inserting Special Characters ... • Sample HTML <p>“<” and “>” are special characters in HTML documents.</p> • Corresponding rendering Applying Colors • For any element that can contain text – specify its background color with background-color: color – specify its background color with color: color – Popular colors: aqua, black, blue, gray, green, lime, navy, red, silver, white, yellow • Example – <body style="background-color: navy; color: blue"> Uniform Resource Locator • Each web page on the Internet has a URL (uniform resource locator) to identify its location. A typical URL has the following format: http://domain-name:port/application/resource?query-string – http: protocol – Domain-name: mapped to an IP address by DNS (domain name server) for identifying a server; could just be an IP address – Port: identifying a server program on the server – Application: identifying a web application on the web server Uniform Resource Locator … http://domain-name:port/application/resource?query-string – Resource: a web page or component of the web application – ?query-string: optional arguments to the web server • If a web server uses the default port 80, the port specification is optional • “localhost” is an alias for 127.0.0.1 referring to the local server, useful for local testing of web sites Uniform Resource Locator … http://domain-name:port/application/resource?query-string • A query string starts with the question character, ?, and consists of a sequence of “name=value” (both name and value are strings) assignments separated by character & – URL encoding examples: space is encoded as + or %20, & as %26, + as %2b – “?lang=Java+%26+C%2b%2b&os=unix” • lang =Java & C++ and os=unix Uniform Resource Locator … • Example URLs – http://localhost/welcome.html • Web page “welcome.html in the default web application – http://localhost:8080/index.html • Tomcat web server by default uses port 8080 – http://www.amazon.com • The default web page at http://www.amazon.com, typically index.html, index.jsp or index.asp Creating Hyperlinks • A user can click on a hyperlink to visit a different web page • A hyperlink has the general structure of <a href="url">Hyperlink Text</a> – <a href="http://www.google.com">Google</a> – <a href="http://www.google.com" target="_blank">Google</a> • Open the Google welcome page in a new web browser; other target values can also be used to load several web pages in the same browser, one at a time Creating Hyperlinks … • If the current web page has URL http://domain-name/app/a.html – “<a href=“b.html">Page B</a>” links to page “b.html” in the same folder as “a.html” on the web server – “<a href=“../c.html">Page C</a>” links to page “c.html” in the folder one level above that for “a.html” on the web server – “<a href=“s/d.html">Page D</a>” links to page “d.html” in subfolder “s” of the folder holding “a.html” on the web server Creating Hyperlinks … • Element a has attribute title to specify a tooltip • Send email using the “mailto” qualifier – <a href="mailto:[email protected]">Contact Us</a> – <a href="mailto:[email protected]?subject=Comment" title="Comment on the topic">Contact Us</a> Creating Anchors • An anchor is a location in a web page that can be the target of a hyperlink • To define an anchor, use syntax “<a name="anchorName">Anchor Text</a> – <a name="conclusion">Conclusion</a> • To link to an anchor in file test.html, use a hyperlink – From the same web page: <a href="#conclusion">View the Conclusion</a> – From another web page: <a href="test.html#conclusion">View the Conclusion</a> Creating Tables • tr: table row • td: value for a column in a row • th: table column header <table> <tr><th>Symbol</th> <th>Entity</th> </tr> <tr><td><</td> <td>&lt;</td> </tr> <tr><td>></td> <td>&gt;</td> </tr> </table> Creating Tables … • Element table’s attribute border specifies border line width • Element th or td’s attribute width specifies column width • Element td’s attribute colspan specifies number of columns to be combined <table border="1"> <tr><th width="100px">Symbol</th> <th width="100px">Entity</th> </tr> <tr><td><</td><td>&lt;</td></tr> <tr><td>></td><td>&gt;</td></tr> <tr><td colspan="2">More are available</td></tr> </table> Graphic File Types • PNG is the best and can replace GIF and JPEG; GIF is good for computer drawings; JPEG is good for photos – Attributes to consider: resolution, number of colors, compression rate, loss-less compression, transparent background, built-in animation, patent issues Inserting Graphics • Element image is used for inserting images – Attribute src for specifying URL for the image file – Attribute width and height for specifying image size; using one of them to keep aspect ratio – Attribute alt for specifying text in case the web browser cannot present the image <image src="tomcat.gif" /> <image src="tomcat.gif" width="100" height="100" alt="Tomcat" /> <a href="tomcat.gif" target="_blank" title="Tomcat"> <image src="tomcat.gif" width="40px" /> </a> Cascading Style Sheets • CSS is used for specifying the presentation of HTML data • Web browsers have default presentation of HTML elements, which can be modified by – Using browser’s GUI, normally its view menu – Using external CSS specifications – Using internal CSS specifications – The style attribute of HTML elements • The priorities of presentation rules are in reverse order of the above list • A style rule specified for an element will also be applied to elements nested in it unless it is overridden in its child elements Locations of CSS • External CSS files are included by the link element • Internal CSS specifications are values of the style element nested in the head element <head> <title> ... </title> <link rel="stylesheet" type="text/css" href="default.css" /> <style> Local CSS definitions go here </style> </head> CSS Style Rule Format • A style sheet consists of a list of style rules, and most style rules in a CSS sheet are of form e1 e2 ... ek { attribute1: value1; attribute2: value2; ... attributen: valuen} where “e1 e2 ... e k”, called a selector, is a list of spaceseparated elements, and each of them, except the first one, is nested in the element to its left p {border-style: solid; border-width: 2px} a image { width: 40px} (style for image elements nested in an a element) CSS Style Rule Format … • If a style only needs be applied to one element instance, use the element’s style attribute <p style="border-style: solid; border-width: 2px"> • A list of selectors, separated by commas, can share style rules p, h1 {color: red} (text in p and h1 elements should be printed in red) Formatting Text • Sample style attributes for text – font-family, font-size, font-style, font-weight, color, background-color, text-align, text-indent, line-height, text-decoration, word-spacing, letter-spacing • Specifying font family – p { font-family: "Times New Roman", serif} – <p style="font-family: Times New Roman, serif"> ...</p> Text in (the) p element(s) should be printed in Times New Roman; or in serif if the former is not available Formatting a Single Element Instance Differently • To format a single element instance differently, assign a unique value for its id attribute, and prefix the id name with # to specify the style rule for it • CSS p { text-indent: 20px} #first {text-indent: 0px} • HTML <p id="first">No first-line indentation ...</p> <p>With first-line 20 pixel indentation ...</p> Formatting Some Element Instances Differently • To format some element instances, assign a unique value for their class attribute, and prefix the class name with . to specify the style rule for them • CSS p {color: black} .important {color: red} • HTML <h2 class="important">Title in Red</h2> <p class="important">Text in this paragraph will be in red</p> <p>Text in this paragraph will be in black</p> Formatting Part of Text with Span • A span element usually encloses a few words in a paragraph; it does not start a new line by itself • A span element itself has no visual effect on text formatting, but it supports attributes style, id and class to format its text differently • CSS #id1 {color: red; text-decoration: underline} .keyword {color: blue; font-style: italic} • HTML <p>This course introduces you to the <span id="id1"> fundamental concepts</span> underpinning the latest IT technologies like <span class="keyword">Service-Oriented Architecture</span>. Formatting Part of Document with Div • A div element usually encloses a logical section of a document with multiple paragraphs • A div element itself has no visual effect on text formatting, but it supports attributes style, id and class to format its text differently Example CSS for Span and Div <style> #id1 {color: red; text-decoration: underline} .keyword {color: blue; font-style: italic} #ajax .keyword {color: green; font-style: italic} #intro {border: 4px blue outset; margin: 10px; padding:5px} #ajax {border: 4px blue inset; margin: 10px; padding: 5px} </style> Example HTML for Span and Div <body> <div id="intro"> <h3>Introduction</h3> <p>This course introduces you to the <span id="id1">fundamental concepts</span> underpinning the latest IT technologies like <span class="keyword">Ajax</span> and <span class="keyword">Service-Oriented Architecture</span>. </p> </div> Example HTML for Span and Div … <div id="ajax"> <h3>What is Ajax?</h3> <p>Ajax supports <span class="keyword">incremental update</span> of a Web page thus improves the responsiveness of Web applications.</p> </div> </body> Presentation of the Span and Div Example HTML Forms • Element form is used to create simple user interfaces to interact with web applications • Important attributes of a form element – method: “post” or “get” – action: URL for the web component that will receive and process the submitted data <form method="post" action="http://localhost:8080/demo/echo"> Enter your name: <input type="text" name="user"/> <br/><br/> <input type="submit" value="Submit"/> <input type="reset" value="Reset"/> </form> HTML Forms … • Common input control elements nested in a form – Text field: <input type="text" name= "paraName“/> • Attribute name specifies the parameter name used by server programs to access data in the text field – Submit button: <input type="submit" value="Send"/> • Attribute value specifies the string on the button • When a submit button is clicked, all form data will be sent with the specified method to the web component specified by the form’s action URL – Reset button: <input type=“reset" value=“Cancel"/> • Attribute value specifies the string on the button • When a reset button is clicked, all form data is reinitialized HTTP Request • When a form’s submit button, or a hyperlink, is clicked on – A TCP/IP communication channel is created between the browser and the web server specified by the form’s action URL or the hyperlink’s href value • An HTTP request similar to the following will be sent to the web server POST /demo/echo HTTP/1.1 Accept: text/html Accept: audio/x User-agent: Mozilla/5.0 Referer: http://localhost:8080/demo/echoPost.html Content-length: 8 user=Ada HTTP Request … POST /demo/echo HTTP/1.1 Accept: text/html Accept: audio/x User-agent: Mozilla/5.0 Referer: http://localhost:8080/demo/echoPost.html Content-length: 8 user=Ada • First line: submission method, target web application and component, and the HTTP version that the browser supports • Header lines of form “name: value”, specifying that the browser can process HTML files and standard audio files; the browser adopts software architecture “Mozilla/5.0”; the request is sent from which web page; and number of bytes in the entity body HTTP Request … • After one blank line, the entity body carries the submitted data in form of “name=value” • If the form submission method is “get” – The first line submission method will be “POST” – The entity body will be empty – The submitted data will be in form of a query string showing in browser’s URL text field HTTP Respond • Upon receiving an HTTP request, the web server will forward the request to the target web component for processing, and forward the return HTML document back to the browser as an HTTP respond HTTP/1.1 200 OK Server: NCSA/1.3 Mime_version: 1.0 Content_type: text/html Content_length: 2000 <HTML> …… </HTML> HTTP Respond … HTTP/1.1 200 OK Server: NCSA/1.3 Mime_version: 1.0 Content_type: text/html Content_length: 2000 <HTML> …… </HTML> • First line: web server’s HTTP version, request processing status code and its meaning • Header lines of form “name: value”, specifying that the server architecture is “NCSA/1.3”; it can process MIME v1.0 data types; the return data type is HTML; the return data has exactly 2000 bytes • After a blank line, the entity body carries the actual return data HTTP Respond … • The web browser renders the returned HTML document as HTTP Respond … • If the form’s submission method is “get”, the browser will show the submitted data in form of query string in the browser’s URL text field HTTP GET vs. HTTP POST • HTTP GET sends data as query strings so people can read the submitted data over submitter’s shoulders • Web servers have limited buffer size for accommodating query string data, so HTTP GET could be used by hackers to crash the web server or launch buffer overflow attacks • By default web browsers keep (cache) a copy of the web page returned by an HTTP GET request, which could be disastrous if the web page is create dynamically • In general HTTP POST is the preferred submission method • Clicking on a hyperlink always generates an HTTP GET request Conclusion • Web technologies are based on a tiered web architecture with each tier having its well-defined roles • HTML is the web language for describing the logical structure of web documents • Cascading style sheets are for customizing the presentation of the web documents • HTTP is the application-level protocol to support dynamic interactions between web browsers and web servers • In general HTTP POST is a more secure way for a client to interact with web applications
