sm5312 week 5 + 6: page coding basics1 an introduction to web page coding nick foxall

SM5312 week 5 + 6: page coding basics 1

An Introduction to Web Page Coding

Nick Foxall


Web Pages: Structure and Appearance

The structure and appearance of Web pages should be specified independently.

Structure is specified by markup; appearance is specified by stylesheets.

So separate languages are used for markup and stylesheets.

XHTML for markup

CSS for appearance


A Bit of History

Early HTML had no provision for appearance or styling (and no ability to embed images) — everything relied on the browser.

Later versions of HTML incorporated styling and appearance elements into the markup of the page.

Then CSS appeared (1998) to try and separate appearance elements from structure and content elements.


A Bit of History 2

As needs on the web grew, it also became clear that HTML could not accommodate all document types.

It was necessary to have a markup language that allowed users to define their own types of document structure.

XML (Extensible Markup Language) was born…


XML

XML is a markup metalanguage: a language for defining other markup languages. In XML:

Tags are used to delimit the structural elements of a document.

XML tags are names enclosed in angle brackets < >. End tags have a forward-slash / before the name:

<subhead>Earth Day</subhead><paragraph>A day intended to inspire awareness of and appreciation for the Earth's environment.</paragraph>


XML

XML provides a standard syntax for writing marked-up documents, which is inherited by all languages, including XHTML.

Documents written to comply with this XML syntax are said to be well-formed.


XML Elements

A document is made up of elements, consisting of a start tag, some text (maybe some other elements too), and an end tag.

The material between the start and end tags is the element’s content.

If the content includes other elements, they are called child elements or children.

Some elements have no content: these are called empty elements.


XML Elements

<subhead>Earth Day</subhead><paragraph>A day

intended to inspire awareness of and appreciation for

the Earth's environment. <br /> Come and join for a fun

day out at the <strong>Peak Café</strong> on the 15th

of this month</paragraph>

ElementChild Element

Empty ElementContent


Attributes are named properties of elements.

Attributes are assigned values in an elements’ start tags, using an = sign. String values must be enclosed in quotes.

<img src="news01.jpg”>

XML Attributes

Link reference attribute for the img element


XML: Document Type Definitions (DTDs)

A schema is a specific, well-documented, and consistent plan.

Document Type Definitions (DTDs) are schemas used in XML to specify a collection of allowable elements, with their attributes and some contextual restrictions.

In other words, a DTD defines a language from which documents of that type can be marked up.

Documents whose markup complies with a DTD are said to be valid.

Documents that are valid are more consistent and can be better processed by programmes.


XML: Document Type Definitions (DTDs)

When creating web pages using XML-based languages, it is good practise to associate your web document with a chosen DTD.

This is done at the top of the code, above the <head> area, and looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The first ! Defines this as a declaration and not an XHTML element.

The DOCTYPE identifies the root element of this document. In the case of web pages, it is always html.

A URL is included for public reference to the specified DTD.


XHTML

XHTML is an XML-based markup language. All the basic rules of XML just described also apply to XHTML.

XHTML is a hybrid of history: it is based on an older language (HTML 4.01), updated to comply with the rules and syntax of XML.

XHTML pages can be read by all XML-enabled devices (the future) and XHTML allows us to write “well-formed” documents that are backward compatible with older browsers and systems (the past).


XHTML

Good XHTML should - as far as possible - include only structure and content. All styling and formatting is controlled outside the document, with CSS.

Good = well-formed, valid markup, with a DTD at the top…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">


XHTML: Strict or Transitional?

XHTML Strict follows the W3C guidelines precisely and accurately in terms of the definition and range of tags that conform to wider XML standards.

XHMTL Transitional still allows for a wider, but older, range of tags left over from HMTL 4.01.

Most of these older tags concern styling markup, now superseded by CSS style tags.

For most pages today, go with XHTML Strict.


XHTML: Core Elements

The root element of an XHTML page is html, which contains the head and body elements.

The document head contains metadata about the document; not displayed by the browser.

The content of the document is in the body; i.e. what is displayed by the browser.

<html>

<head>

<title>This is my page</title>

</head>

<body>

<h1>Simple</h1>

<p>A simple web page./p>

</body>

</html>


XHTML: Text Elements

Paragraphs, headings, lists, definitions, and tables all have XHTML-defined elementsText elements may be block level elements (like <p> and <h1> ) or inline elements (like <em> ).

Block Elements normally display as separate blocks of text, with line breaks between.

Inline Elements are displayed within blocks. Example:

<p>This is a paragraph of text. This is a paragraph of text with a <em>special style applied to this part</em> and continuing on to end here.</p>


XHTML: Core Text Elements

Element Tag Type

Headings <h1> thru <h6> block

Paragraph <p> block

Block Quote <blockquote> block

Address <address> block

Line Break <br /> inline

Horizontal Rule <hr /> block


XHTML: Core Generic Elements

Element Tag Type

Div (division) <div> block

Span <span> inline


XHTML: List Elements

Element Tag Type

Unordered List <ul> block

Ordered List <ol> block

Line item <li> (within unordered list or ordered list)

Definition List <dl> block

Definition Title <dt> (within definition list)

Definition Description <dd> (within definition list)


XHTML: Table Elements

Tables should be used for laying out tabular data only.

Core table markup elements are:<table> </table> defines the start and end of a table

<tr> </tr> defines a table row, nested inside a <table>

<td> </td> defines a table data cell, nested inside a <tr>

Additional table structural markup:<caption> </caption> sets an overall caption or title for the table

<th> </th> table heading, can be used in place of

<td>


XHTML: Table Markup Example

<table>

<caption>Appliances on Sale</caption>

<tr>

<th>Type</th>

<th>Finish</th>

<th>Dimensions</th>

</tr>

<tr>

<td>Oven</td>

<td>Stainless Steel</td>

<td>145h x 100d x 120w</td>

</tr>

</table>


XHTML: Links

End elements of links are called anchors, indicated with the <a> tag

Linking to other pages and sites requires an href (hypertext reference) attribute, with a value in quotation marks. The text to be linked is followed by a closing </a> tag.

Example:

<a href=“http://www.cityu.edu.hk”>Link to us here.</a>


XHTML: Relative Links

Relative links can be used within a site to link pages to other pages, or to link to images, so long as all the material is enclosed within a pre-defined working directory or site root folder.

<a href=“products_2007.html”>Products Page</a>

Relative link down one level to a JPG in the sub-folder “images”:

<a href=“images/oven.jpg”>Our new oven</a>

Relative link up one level to the home page HTML file, from the current file in the sub-folder “products”:

<a href=“../index.html”>Back to Home page</a>


XHTML: Links Within the Same Document

Sometimes, you’ll need to create a link down or up to something on the same page. This is done with fragment identifiers in the link.

A fragment identifier consists of a # character, followed by a name:

<a href=“products_2007.html#snowboards”>2007 Snowboard Range</a>

Any element in the document can then have an id attribute with a matching name in quotes, example:

<h1 id=“snowboards”>2007 Snowboards</h1>

The id attribute must always be unique for this link method to work.


XHTML: Forms

Forms are used in web pages to allow visitors to enter data that will be processed by server applications or scripts.

Forms are used for:

Entering payment information on e-commerce sites

Searching individual web sites or the whole web

Gathering data in surveys

Simple messages and communication

…and many other applications


XHTML: Form Controls

There are several types of form control that can be used to gather data, including:

Text Input Fields

Text Area Input Fields

Pop-up Menus

Radio buttons & Check boxes

Buttons (submit, enter, reset, etc.)

Hidden Fields

All these controls are inline elements, meaning they must appear within a block element; usually a paragraph element <p> </p>.


XHTML: Form Configuration & Markup

Form controls must appear within <form> </form> tags.

For longer forms, sets of controls can be grouped together in fieldsets, using the <fieldset> tag, for easier catagorisation and form styling.

The <form> tag itself has two attributes that control what happens when a form is submitted to the server…


XHTML: Form Attributes

Action: the value of this attribute points to the URL of the programme that actually processes the data on the server. Example:

<form action=“cgi-bin/formMail.pl”>

Method: determines how the data is sent to the server. Uses either get or post. Example:

<form action=“cgi-bin/formMail.pl” method=“post”>

Both “get” and “post” determine how the data of the form is passed to the server for processing. Usage is dependent on the processing to be done on the server.


XHTML: Form labels

A form label is text that describes what needs to be input or selected.

The label element is linked to a particular form control with the attribute for. The for value corresponds to an id value within the control tag. Example:

<label for=“win”> Windows</label><input type=“checkbox” name=“windows” id=“win”>


XHTML: Head Elements

Information appearing between the <head> </head> tags is data about the XHTML document and doesn’t appear in the browser.

Only the <title> element is compulsory, and only appears in the browser window bar. All other elements are optional.


XHTML: Head Elements: Meta tags

Meta data is data that describes other data.

Meta tags help describe information about the XHTML document itself. The most common use is to provide information for search engines, using:

Keywords, as in:

<meta name=“keywords” content=“web, web design, web standards”>

Description, as in:

<meta name=“description” content=“Web world is a standards-based web coding studio based in Hong Kong”>


XHTML: Head Elements: Meta tags (cont)

Robots, as in:

<meta name=“robots” content=“index, no follow”>

Robots are software tools used by the search engines to crawl the web, indexing and logging new and existing web sites and web pages. This tag allows you to control search engine access to pages, and whether engines should follow links going out from those pages. Content keywords include:


XHTML: Head Elements: Link Elements

The link element is commonly used to point to an external CSS stylesheet. Example:

<link href=“css/englishscreen.css” rel=“stylesheet” type=“text/css”>

The rel attribute describes the relationship the link embodies. The type attribute sets the media type the browser should recognise the file as.


XHTML: Entity References

Keyboard characters like < and > are part of the markup syntax of XML and XHTML.

What if you want to use such characters in your content text, as part of an explanation, etc?

These character or Entity References are placed in the markup starting with the & (ampersand character) and ending with a ; (semi-colon).


XHTML:Entity ReferencesCommon examples:

Symbol or character description Entity Ref.

< less than symbol <> greater than symbol >’ apostrophe '” quotation marks "& ampersand &© copyright symbol ©™ trademark symbol ™® registered trademark ®— em dash (long dash) —

NOTE: these are inserted into the code (markup) of your document.


Who is the W3C (World Wide Web Consortium)?

All these rules, DTDs and XML/XHTML “standards” are laid down and governed by the World Wide Web Consortium (the W3C).

The W3C believes that for the Web to reach its full potential all fundamental Web technologies must be compatible with one another and allow any hardware and software to access the Web and work together.

By publishing open (non-proprietary) standards for Web languages and protocols, the W3C seeks to avoid market (and Web) fragmentation (e.g. Microsoft trying to dominate certain technologies!)


Who is the W3C?

The current director of the W3C is Tim Berners Lee.

Berners Lee invented the World Wide Web and the core fundamentals of HTML in 1989.

The W3C publishes all its standards and documentation at www.w3.org

http://www.w3.org/