Web Technologies/2021-2022/Laboratory 2
HTML
editThe Hyper Text Markup Language (HTML) is well known as a way to write web pages. It is based on XML and permits users to create structured text documents. It does this by using tags and attributes, as well as insert text semantics (paragraphs, headers, tables, etc.). It was SGML based up to and including HTML 4.01.[1]
Usually it is used in conjuncture with JavaScript and CSS (Cascading Style Sheets)- the former influences the behaviour of browsers, while the latter formats text and overall page appearance.
Latest standard release by W3C was that of HTML 5.2 (ISO/IEC 15445:2000) in March 2018.
A draft for an HTML 5 was released in 2008 that includes a number modifications:
- obsolete tags such as font, frameset or center were removed
- new tags such as footer, audio, video, nav, etc.
- new attributes such as ping, async, etc.
- new parsing mechanism
- ability to use SVG and MathML in text/html
- etc.
Related languages include the XHTML 1.1 which is an extension of HTML based on XML and not SGML.
Three sub-specifications exist for both HTML and XHTML:
- Strict: represents the standard proper and encourages the omission of presentational markup (eg. center or font tags) by using style sheets (CSS)
- Transitional: allows for presentational markup
- Frameset: allows for presentational markup and additionally from Transitional a frameset replacing body, containing frame elements, and optionally noframes, with a body
Each document is checked against a DTD (Document Type Definition) file for validity.
The following example shows an HTML 4.01 document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Transitional HTML Example </title>
</head>
<body bgcolor="#FFFFFF" link="#000000" text="red">
<p>This is a transitional HTML example</p>
</body>
</html>
The following example shows a strict XHTML 1.0 document:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Strict DTD XHTML Example </title>
</head>
<body>
<p>This is a strict XHTML example</p>
</body>
</html>
Language elements
editThe language is made up of tags and attributes. Bellow is a list of them:
- HTML document [1]
- content and presentation separation
- syntax
- standard elements [7]
The next fragment of code exemplifies how we can create a form by using the table and form tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Simple Form </title>
</head>
<body>
<form method="POST" action="login.jsp">
<table>
<tr>
<td>
Username:
</td>
<td>
<input type="text" name="username" value="">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type="password" name="password" value="">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="Login" value="login">
</td>
</tr>
</table>
</form>
</body>
</html>
Validator
editValidates (X)HTML documents.
Links:
CSS
editCSS (Cascading Style Sheets) is used establish how a document appears to the reader (establishes presentation semantics)
It can be:
- embeded directly inside tags (by using the style attribute):
<body style="font-family:arial,verdana,sans-serif;font-size:10px;font-weight:bold;">
Some 10px bold text
</body>
- inserted in the document head by using the style tag:
<head>
<style type="text/css">
body {font-family:arial,verdana,sans-serif;font-size:10px;font-weight:bold;}
.hugeRed {font-family:arial,verdana,sans-serif;font-size:20px;color:red;}
</style>
</head>
<body>
Some 10px bold text
<p class="hugeRed"> Some large red text </p>
</body>
- separated from the (X)HTML content by means of a separated CSS file:
The HTML document:
<head>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>
Some 10px bold text
<p id="id" class="hugeRed"> Some large red text </p>
</body>
The CSS file:
body {font-family:arial,verdana,sans-serif;font-size:10px;font-weight:bold;}
.hugeRed {font-family:arial,verdana,sans-serif;font-size:20px;color:red;}
#id {font-family:arial,verdana,sans-serif;font-size:20px;color:red;}
Language elements
edit- syntax
- selectors
- properties
- values
- comments
- selector grouping
- classes
- multiple classes
- pseudo classes
- pseudo elements
- IDs
- properties
- background
- text
- font
- border
- outlines
- margin
- padding
- list
- table
- elements dimensions (width, height, etc.)
- classification (display, position, visibility, etc.)
- positioning (position: static, absolute, relative; right, left, top, bottom, etc.)
Validator
editValidates CSS documents:
Links:
Exercises
editImplement an HTML page which offers:
- a main page describing the project and links to the other pages;
- a site map;
- three pages, each having a form, acting as a web interface for the web service http://www.random.org/:
- integer generation form;
- sequence generation form;
- string generation form;
- [OPTIONAL] - A form to act as an interface for http://www.google.com/advanced_search;
- it should contain at least 8 inputs, for the other provide default values by using hidden inputs;
TIP: Use the try it yourself (i.e. Try It) online editor.
You should use:
- text fields for number and text inputs;
- radio buttons or drop down lists for enumerated or finite options;
- check boxes for on / off options;
Customize the fonts on each page by using CSSs you should set the font color, family, size. Use colored borders and backgrounds to enhance the look of the forms.
Include in each page a link pointing to: http://validator.w3.org/check?uri=referer. It will help validate the page. Use HTML strict as option.
A page is considered valid if:
- it is validated by the W3C validator;
- gives the right parameters to the services.
Alexandru Munteanu, 2021-09-30, alexandru.munteanu@e-uvt.ro