... Advanced Web Programming ...

C2. Basic Web Technologies

HTML
HTML (Hyper Text Markup Language) is a markup language based on a set of markup tags. HTML tags are keywords surrounded by angle brackets (ex. <title>). Usually the HTML tags are used in pairs (ex. <b> and </b>).

HTML documents describe web pages containing HTML tags, client side scripting code lines and plain text.

Ex.: simple web page
_____________________
<html>
  <head>
    <title> My first Web page </title>
  </head>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>


A web page could be edited using a plain text editor. However, to improve productivity a HTML editor is recommended.

Structural elements
<html> ... </html>       - root html element
<head> ... </head>     - metadata
<body> ... </body>     - displayable page content

Page metadata elements (head elements)
<base href="..." |  target="...">  - specifies a default address or a default target for all links on a page
 <meta>                                  - additional metadata about a page, such as its author, publication date, expiration date, page description, keywords
<style> </style>                  - specifies a style for the document, could be a link to an external .css file
<title> </title>                     - define the document title

Text body elements
<p> ... </p>        - describes a paragraph

<h1> </h1>    
...
<h6> ... </h6>     - section headings at different levels
<b> </b>        - set font to boldface
<i> </i>          - set font to italic
<big> </big>     - increases font size
<small> </small> - decreases font size
<u> ... </u>         - underlines text
<font [color=color] [size=size] [face=face]> </font>
                           - specify the font color, typeface, and/or absolute or relative size
<cite> </cite>  - reference for a quote or statement
<sub> </sub>  - mark subscript
<sup> </sup>  - mark superscript
<dfn> </dfn>    - inline definition of a single term 
<strong> </strong&t text emphasis
<pre> </pre>      - pre-formatted text

Lists
<dl> </dl>        - definition list
<dt> </dt>       - definition term in a definition list
<dd> </dd>      - definition of a term, in a definition list
<ol> </ol>        - ordered (enumerated) list
<ul> </ul>        - unordered (bulleted) list
<li> </li>          - list item in ordered or unordered lists

Inline elements
<a> </a>         - anchor element to text inside a page

Special elements
<br>                  - forced line-break
<hr>                   - horizontal rule
<div> </div>     - block-level logical division
<!-- a comment --> -  code comments. Comments do not nest

Images and objects
<img>                 - insert an image in the document
<map> </map>  - specifies a client-side image map
<object> </object> - includes an object in the page
<param>              - set a parameter for an <object>

Forms
<form action="url"> </form> - creates a form
<button> </button>             - generic form pushbutton
<input>                                - allow a variety of standard form controls like: checkbox, radio button, submit button, reset button, text input field, password, file select and hidden
<label for="id"> </label>     - a label for a form control
<select> </select>            - creates a selection list
<option>                              - an item in a select list
<textarea rows="n"> </textarea> - multiple-line text area

Tables
<table> </table> - creates a new table
<caption> </caption> - specifies a caption for a table
<tr> </tr>           - a row of cells in a table
<th> </th>          - table header cell
<td> </td>          - table data

Frames
<frameset> </frameset> - specifies a frameset
<frame> or <frame/>         - delimits a single frame within the frameset
<noframes> </noframes>  - normal HTML content for user agents that do not support frames
<iframe> </iframe>           - places another HTML document in a frame

Free HTML editor: PageBreeze

XML
eXtensible Markup Language is a set of rules for encoding documents in machine-readable form. Indeed, XML is designed to structure, transport and store data. It is a W3C recommendation.

XML is a markup language close to HTML. However, XML tags are not predefined and must be defined by user. It is self-descriptive.

XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data.

Ex.: xml address book
_____________________
<?xml version=10?>
<address-book>
  <entry>
    <name>Norman Doe</name>
    <address>
      <street>78 Fountain Plaza</street>
      <locality>Memphis</locality>
     </address>
     <tel>555-555-55555</tel>
     <email


Supplementary readings:
Sams Teach Yourself XML in 21 Days

Free XML editor: XML Marker

XHTML

XHTML (eXtensible Hypertext Markup Language) is a family of XML languages developed to extend HTML. The main goal was to make HTML more extensible and increase interoperability with other data formats through XML mechanisms. It allows mixing of HTML code with other XML based languages like Scalable Vector Graphics (SVG) or MathML.

There are several differences between HTML and XHTML:
  • all elements (tags) has to be closed (incl. </input> or </br>)
  • XML is case-sensitive for element and attribute names
  • XML does not allowed attribute minimization (ex. <option selected="selected">)
  • behaviour on parse errors differ (processing will be aborted)
  • support for namespaces
  • differences in JavaScript processing (ex. document.write() will not work in XHTML)
  • There are three different XHTML 1.0 corresponding to the three different versions of HTML 4 as: XHTML 1.0 Strict, XHTML 1.0 Transitional and XHTML 1.0 Frameset.

Since August 2002 the W3C start proposing several new Working Drafts for XHTML 2.0. It will include several improvements. More information could be find at W3C XHTML 2.0.

CSS

Cascading Style Sheets (CSS) is a language used to describe the appearance (the look and formatting) of a document written in a markup language (ex. HTML). The main objective of CSS was to enable the separation of document content from the document presentation. The CSS specifications are maintained by the W3C.
 

Ex.: css formatting
_____________________
<html>
<head>
...
<style type="text/css">
    ol.roman { list-style-type: lower-roman }
</style>
</head>
<body>
<ol class="roman">
<li> Step one ... 
<li> Step two ...
</ol>
...


Style changing example from w3Scools.com.

A CSS rule has two main parts as a selector and one or more declarations. The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. Each property has an associated value.
Ex:  p { text-align:center; color:black; }

There are three ways of inserting a style sheet:
  • External style sheet
  • Internal style sheet
  • Inline style


A free CSS editor: JustStyle.

Slides:
C2. Basic Web Technologies.