Web Technologies/2021-2022/Laboratory 2

HTML
The 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.

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: The following example shows a strict XHTML 1.0 document:

Language elements
The language is made up of tags and attributes. Bellow is a list of them:


 * HTML document
 * content and presentation separation
 * syntax
 * DTD
 * elements
 * start tags, end tags
 * element content
 * empty elements
 * attributes
 * comments
 * character entities
 * standard elements
 * html
 * head
 * title
 * link
 * meta
 * body
 * headings
 * paragraphs
 * line breaks
 * horizontal rulers
 * anchors
 * text formating
 * tables
 * lists
 * forms
 * form
 * field sets
 * text fields
 * text areas
 * radio buttons
 * drop down boxes
 * check boxes
 * buttons
 * submit
 * reset
 * normal
 * labels
 * images

The next fragment of code exemplifies how we can create a form by using the table and form tags.

Validator
Validates (X)HTML documents.


 * W3C HTML Validator

Links:


 * HTML -- Wikipedia
 * HTML 4.01 specification -- W3C
 * HTML tutorial -- W3Schools
 * HTML tutorial -- HTML.net
 * DTD

CSS
CSS (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):


 * inserted in the document head by using the style tag:


 * separated from the (X)HTML content by means of a separated CSS file:

The HTML document: The CSS file:

Language elements

 * 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
Validates CSS documents:


 * W3C CSS Validator

Links:


 * CSS -- Wikipedia
 * CSS home page -- W3C
 * CSS level 1 specification -- W3C
 * CSS level 2 specification -- W3C
 * CSS tutorial -- W3Schools
 * CSS tutorial -- HTML.net

Exercises
Implement 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, [mailto:alexandru.munteanu@e-uvt.ro alexandru.munteanu@e-uvt.ro]