Module: Software Engineering of Web Applications Chapter 2: Technologies
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
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> </BODY> </HTML> These slides are designed to accompany module: Software Engineering of Web Applications
HTML markup 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
<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
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
<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
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
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
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 look-and-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
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
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
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
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