Web pages Using web standards

Download Report

Transcript Web pages Using web standards 

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)
&amp;
&#38;
< (less than)
&lt;
&#60;
> (greater than)
&gt;
&#62;
" (straight double quote)
&quot;
&#34;
' (straight single quote)
&apros;
&#39;
(space)
(nobreaking space)
&#32;
&nbsp;
(tab)
&#160;
&#09;
© (copyright)
&copy;
&#169;
† (dagger)
&dagger;
&#8224;
“ (curly double start quote)
&#147;
” (curly double end quote)
&#148;
‘ (curly single start quote)
&#145;
’ (curly single end quote)
&#146;
. (period)
&#46;
Inserting Special Characters ...
• Sample HTML
<p>&#147;&lt;&#148; and
&#147;&gt;&#148; are
special characters in
HTML documents&#46;</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>&lt;</td>
<td>&amp;lt;</td>
</tr>
<tr><td>&gt;</td>
<td>&amp;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>&lt;</td><td>&amp;lt;</td></tr>
<tr><td>&gt;</td><td>&amp;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