Module: Software Engineering of Web Applications Technologies Chapter 2:
advertisement
Module: Software Engineering of
Web Applications
Chapter 2:
Technologies
1
2.2 The HyperText Markup
Language (HTML)
Besides managing the request and transfer of
resources through the HTTP protocol, a Web
browser also handles the visual presentation of the
resources.
The HyperText Markup Language (HTML) is used
to express the content and the visual formatting of
Web pages.
The document presentation is managed by a
processor embedded in the Web browser, which
receives as input the marked-up content and
transforms it into a rendered document by
interpreting the meaning of the tags.
These slides are designed to accompany module: Software Engineering of Web Applications
2
A simple HTML page with an embedded
image and a clickable hyperlink
<HTML>
<HEAD>
<TITLE>Inserting an image and an anchor </TITLE>
<META name="keywords" content="HTML, example">
</HEAD>
<BODY>
<H1>A simple HTML page</H1>
<P>With an embedded image:</P>
<P align="left">
<IMG src="http://www.dei.polimi.it/images/logo.gif">
</P>
<P align="left">And with a link to an external resource: </P>
<P align="left"><FONT face="Arial" size="+1">
<A href="http://www.polimi.it">Click here</A>
to open the home page of Politecnico di Milano...
</FONT>
</P>
</BODY>
</HTML>
These slides are designed to accompany module: Software Engineering of Web Applications
3
HTML markup
1.
2.
3.
4.
A start tag marking
A number of attributes
Some content
An end tag
These slides are designed to accompany module: Software Engineering of Web Applications
4
<HTML> tag sections
The header, delimited by the <HEAD> tag,
includes general information about the
document, for example, the document title
(delimited by the <TITLE> tag), or the
keywords used by search engines for
document indexing (delimited by the <META>
tag).
The body, delimited by the <BODY> tag,
includes the actual content
These slides are designed to accompany module: Software Engineering of Web Applications
5
common HTML tags
the anchor tag <A>
The <IMG> tag
Block elements such as <p> and <h1>
List elements
Table elements
Form elements used for the definition of forms
for the gathering of user input.
These slides are designed to accompany module: Software Engineering of Web Applications
6
<FORM> elements
The element <FORM> typically contains some
nested elements specifying form controls such
as:
<INPUT> for input insertion,
<SELECT> for option selection,
<TEXTAREA> for a multi-line text input, and
<BUTTON> for including submit, reset, or push
buttons) through which the user inputs data or
interacts with the Web page.
These slides are designed to accompany module: Software Engineering of Web Applications
7
HTML Evolution
It is worth noting that, in order to enhance the
HTML potential for the creation of rich and
interactive Web pages, the use of tags
expressing graphic and formatting properties
(such as <FONT> or <TABLE>), as proposed
by the initial HTML versions, is now
deprecated.
The following section illustrates the evolution of
HTML to support better rendition capabilities
and a broader range of interactive features.
These slides are designed to accompany module: Software Engineering of Web Applications
8
2.2.1 Cascading Style Sheets
(CSSs)
The first HTML pages were characterized by
low presentation and interaction capabilities.
However, with the expansion and diffusion of
the Web, such simple documents soon became
inadequate, and new presentation
requirements started to emerge.
In December 1997, the W3C Consortium
issued a stable version of HTML, HTML 4, and
started an evolution process based on new
technologies and languages to be combined
with HTML to overcome its observed
shortcomings.
These slides are designed to accompany module: Software Engineering of Web Applications
9
CSSs
One of the most innovative features introduced
by HTML 4 is the separation of content and
presentation, achieved through the introduction
of the Cascading Style Sheets (CSSs).
CSSs allow page designers to define the lookand-feel of Web pages separately from the
page markup and content written in HTML.
These slides are designed to accompany module: Software Engineering of Web Applications
10
style sheet
A style sheet is a set of rules that tell the
browser how to present a document.
A rule is made of two parts: a selector, which
species the HTML tag to which the style rule
applies, and a style declaration, which
expresses the style property to be attached to
the HTML tag mentioned in the selector.
These slides are designed to accompany module: Software Engineering of Web Applications
11
Example
As an example, the following code fragment
defines the color and font size properties for
the <H1> tag:
<HEAD>
<TITLE> CSS Example </TITLE>
<STYLE type="text/css">
H1 { font-size: 20pt; color: red }
</STYLE>
</HEAD>
These slides are designed to accompany module: Software Engineering of Web Applications
12
Style rules can be embedded in the document
they apply to by means of the <STYLE> tag.
Alternatively, especially when multiple
documents must share the same presentation
style, the style rules can be written in a
separate linked to the HTML documents.
These slides are designed to accompany module: Software Engineering of Web Applications
13
Example
In the following example, the <LINK> tag,
placed in the head section of the HTML
document, species a reference to a style sheet
named style.css:
<HEAD>
<TITLE>CSS Example</TITLE>
<LINK rel="StyleSheet" href="style.css"
type="text/css">
</HEAD>
These slides are designed to accompany module: Software Engineering of Web Applications
14
