eScience Lectures Notes : COMP1710 : HTML

Slide 1 : 1/35 : From New Media to The Web (index.en.html)

COMP1710 Tools for New Media and Web

 

HTML - The glue of the web

Click here to start or press 's'tart or 'i',

then 'n'ext or 'b'ack

Click here for the 't'able of Content

Slide 2 : ToC : COMP1710 : HTML (tableOfContent.en.html)

Table of Contents (35 slides) for the presentation :

COMP1710 : HTML

Slide 3 : 3/35 : Web = HTTP + URL + HTML (intro.en.html)

In this lecture :

 

Slide 4 : 4/35 : HTML : Introduction (introduction.en.html)

HTML : Introduction

Stands for ...

HyperText Markup Language

Sounds like SGML (Standard Generalized Markup Language)...

Abbreviation of Standard Generalized Markup Language, a system for organizing and tagging elements of a document. SGML was developed and standardized by the International Organization for Standards (ISO). SGML itself does not specify any particular formatting; rather, it specifies the rules for tagging elements. These tags can then be interpreted to format elements in different ways.
Source: http://info.borland.com/techpubs/books/vbj/vbj40/programmers-guide/glossary.html

Visual vs Logical formatting of text/ideas : logical structure

Origins in CERN ( Tim Berners-Lee : a collaboration tool )

First GUI web browser was NCSA Mosaic

Later driven by Netscape and Microsoft IE

Standard published by W3C

4.01 is the most recent version of HTML

HTML is the lingua franca for publishing hypertext on the World Wide Web. It is a non-proprietary format based upon SGML, and can be created and processed by a wide range of tools, from simple plain text editors - you type it in from scratch- to sophisticated WYSIWYG authoring tools. HTML uses tags such as <h1> and </h1> to structure text into headings, paragraphs, lists, hypertext links etc.
Source: http://www.w3.org/MarkUp/

Reference : Web Wizard's Guide to HTML

List of references on HTML : http://www.vrarchitect.net/links/intern_html.en.html

For a good crash course on HTML : Dave Raggett

 

 

Slide 5 : 5/35 : HTML Versions (versions.en.html)

HTML Versions

1.0 The first version

Without included images (Mosaic extension)

2.0 The start of the web, background images, frameset

Explosion of Extensions proposed by Netscape and IE to win the market

3.2 Stabilisation of both Netscape and IE features

4.0 Back to purity (4.01)

December 1997 - April 1998

Separtion of Data and Form

Establishment of CSS

Preparation of the transition to XHTML

But ... not yet fully implemented in all Browser. Firefox is a good one to use.

XHTML : The same thing but XML compatiblle

Who decides ? the World Wide Web Consortium http://www.w3c.org

 

Extract from http://www.yourhtmlsource.com/starthere/historyofhtml.html start here ----

HTML 1.0

HTML 1.0 was the first release of HTML to the world. Not many people were involved in website creation at the time, and the language was very limiting. There really wasn't much you could do with it bar getting some simple text onto the web. But then, just that got the beardos a-foamin' back in the day.

HTML 2.0

HTML 2.0 included everything from the original 1.0 specifications but added a few new features to the mix. » HTML 2.0 was the standard for website design until January 1997 and defined many core HTML features for the first time.

HTML 3.0

More and more people were getting into the HTML game around now, and while the previous standards offered some decent abilities to webmasters (as they became known), they thirsted for more abilities and tags. They wanted to enhance the look of their sites.

This is where trouble started. » Netscape at the time was the clear leader in the browser market. To appease the cries of the HTML authors, they introduced new proprietary tags and attributes into their Netscape Navigator browser. These new abilities were called Netscape extension tags. This caused big problems as other browsers tried to replicate the effects of these tags so as not to be left behind but could not get their browsers to display things the same way. This meant that if you designed a page with Netscape ETs, the page would look bad in other browsers. This caused confusion and irritation for the markup pioneers.

At this time, a HTML working group, led by a man named » Dave Raggett introduced a new HTML draft, HTML 3.0. It included many new and improved abilities for HTML, and promised far more powerful opportunities for webmasters to design their pages. Sadly, the browsers were awfully slow in implementing any of the new improvements, only adding in a few and leaving out the rest. Partly, this failure can be attributed to the size of the overhaul; and so the HTML 3.0 spec was abandoned.
    Thankfully, the people in charge noted this and so future improvements were always designed to be modular. This meant they could be added in stages, which makes it easier on the browser companies.

HTML 3.2 (wilbur)

The browser-specific tags kept coming, and it became increasingly apparent that a standard needed to be found. To this end, the » World Wide Web Consortium (abbreviated to the W3C) was founded in 1994 to standardise the language and keep it evolving in the right direction. Their first work was named WILBUR, and later became known as » HTML 3.2. This was a toned-down change to the existing standards, leaving many of the big steps forward for later versions. Most of the extensions tags that had been introduced by Netscape (and to a lesser-extent, Microsoft) did not make it into these new standards. It soon caught on and became the official standard in January '97, and today practically all browsers support it fully.

HTML 4.0 (cougar)

HTML 4.0 was a large evolution of the HTML standards, and the last iteration of classic HTML. Early in development it had the code-name COUGAR. Most of the new functionality brought in this time is from the ill-fated HTML 3.0 spec, as well as a host of trimmings on old tags, a focus on internationalisation, and support for HTML's new supporting presentational language, cascading stylesheets.

HTML 4.0 was recommended by the W3C in December '97 and became the official standard in April 1998. Browser support was undertaken surprisingly earnestly by Microsoft in their Internet Explorer browser, and the market-leading IE5 (and current successor IE6) have excellent support for almost all of the new tags and attributes. In comparison, Netscape's terribly flawed Navigator 4.7 was crap when it came to HTML 4.0 and even basic CSS. Navigator 6 however, is a vast improvement.

Once HTML 4.0 had been out for a little while, the documentation was revised and corrected in a few minor ways and was entitled HTML 4.01; the final version of the specification.
    Head on over to the W3C site for the » official documentation; and to read more about the new tags, attributes and redundancies brought about by this new standard, read our article, HTML 4.0 Explained.

XHTML 1.0

Close to the beginning of the 21st century the W3C issued their » specifications of XHTML 1.0 as a recommendation. Since January 26, 2000 it stands as joint-standard with HTML 4.01. XHTML marks a departure from the way new specs have worked — it is an entirely new branch of HTML, taking in ideas from » XML, which is a far more complicated markup language than HTML. There aren't many new or deprecated tags and attributes in this version of HTML, but there are things that have changed with a view of increased accessibility and functionality. It's mainly just a new set of coding rules. Read all about it properly in XHTML Explained.

Source : http://www.yourhtmlsource.com/starthere/historyofhtml.html

Slide 6 : 6/35 : Generalities (considerations.en.html)

Generalities

Uniformity /Accessibility

How will your page look on different systems (OS/Browsers) ?

Specifying fonts or sizes => CSS

Never use non standard HTML Tags

Can common browsers view your page

Do you include metadata (TITLE  tag and ALT attributes and others)

Try on several systems/plateforms

Safari, Firefox, Omniweb, Netscape Navigator, OPERA, Lynx ( text only ), MSIE. ..

Can search engines extract information from your page

Do you want them to ?

 

Slide 7 : 7/35 : HTML Edition (creation.en.html)

Edition

HTML Creation : WYSIaWYG  or WYSIWYme vs Text andTags

What You See Is almost What You Get or What You See Is What may expect

Never use Frontpage ! Nor HTML export from Word ...

Dreamweaver, GoLive ... SandVox

Pros

Cons

Use HTML Tidy to check your HTML written with a text editor

Lets do a simple page

Slide 8 : 8/35 : Let's take a text editor (apage2.en.html)

Let's take a text editor

And save the text with the proper suffix : .html

Other suffixes

Type

Suffix

Images

.jpeg, .gif, png

Video

.mov, .mpeg

Sound

.mp3, .wav, .aiff

Text

.txt

HTML generated by a script

.pl .cgi .php, .asp

 

 

MIME (Multipurpose Internet Mail Extensions) types

When receiving a document from a server, the browser doesn't initially look at the suffix : it receives from the server a header that informs it about the document : its type, size, age

About .htm

 

 

Slide 9 : 9/35 : Introduction (apage1.en.html)

Let's take a text editor

 

Slide 10 : 10/35 : The minimal structure (apage3.en.html)

The minimal structure

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

 

 

Slide 11 : 11/35 : The minimal structure - with some content (apage4.en.html)

The minimal structure - with some content

<HTML>
<HEAD>
<TITLE>This will appear in the window title</TITLE>
</HEAD>
<BODY>
This will appear in the page area of the browser
</BODY>
</HTML>

 

 

Slide 12 : 12/35 : The minimal structure - two parts (apage5.en.html)

The minimal structure - two parts

<HTML>

<HEAD>

<TITLE>This will appear in the window title</TITLE>

</HEAD>

<BODY>

This will appear in the page area of the browser

</BODY>

</HTML>

 

 

Slide 13 : 13/35 : The correct structure (apage6.en.html)

The correct structure

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>in the window title</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>
<BODY>in the page area
</BODY>
</HTML>

 

 

Slide 14 : 14/35 : HTML document construction (markup.en.html)

HTML document construction

HTML documents contain HTML elements

HTML elements are marked up by HTML tags

Elements normally have opening and closing HTML tags

HTML tags are text bounded by < and >

Opening HTML tags are < tag > , closing are < /tag >

E.g. : < title > The Page Title < / title >

HTML Tags are not case - sensitive

Lower-case tags are required by XHTML

HTML Tags may contain attributes

 

Slide 15 : 15/35 : Tag Attribute (attributes.en.html)

Tag Attribute

HTML Tag Attribute values surrounded by " characters

Most HTML tags support their own set of tag attributes

Each attribute contains an attribute name and an attribute value

E.g. : <a href="index.html">

Tags may have more than one attribute

Widths, Heights given as number of pixels, or % of window

E.g. : width="25%" OR width="400"

Page size is not known

Slide 16 : 16/35 : Tag Attribute : Colours (attributesColour.en.html)

Tag Attribute : Colours

HTML colours described in hex RGB (Red Green Blue) components

#RRGGBB    ....   256x256x256 = 16 Millions colours ?

#ffff00 : yellow

table of "web safe" colours (216 = 6x6x6 colour cube : 00 33 66 99 CC FF)

Colour Blindness

When using colour, remember that 5 to 10% of men have some form of colour blindness. This can cause difficulties distinguishing between red and green, or between yellow and blue.

To know more about that subject : http://www.lynda.com/hex.html

and http://www.permadi.com/tutorial/websafecolor/

 

 

Slide 17 : 17/35 : Table of "web safe" colours by Lynda (colours.en.html)

Table of "web safe" colours by Lynda (Weinman)

WEB Safe colours

To know more about that subject : http://www.lynda.com/hex.html

 

 

Slide 18 : 18/35 : Heading Elements (header.en.html)

Let's start with the content : within <body> and </body>

Heading Elements : Structure of the page

Headings come in six sizes

<h1> </h1> is the largest heading

<h6> </h6> is the smallest heading

Headings break up text with titles and subtitles

 

 

Slide 19 : 19/35 : Breaking Up Text (breaking.en.html)

Breaking Up Text

The paragraph element <p> begins a block of text after an empty line

<p> ... asdasd ...  </p> defines a block of text and could

be attributed a style
<p class="allRed">

 or be the target of a link
<p id="targetName">

The break element <br> begins a block of text on a new line

The horizontal rule element <hr> inserts a horizontal line to emphasize a break in the text

Slide 20 : 20/35 : Standard Type Face Options (font.en.html)

Standard Type Face Options

<font face=“Arial”> </font>

It is best to specify type faces in groups since different computers use different type fonts:

face="Arial, Geneva, Helvetica, sans-serif"

face="Times New Roman, Times, serif "  (Times New Roman is the default for most browser)

face="Courier New, Courier, mono"

Other useful font attributes include color="#CC0000" and size="+6"

!! Deprecated : You should not use the font attribute once we get to the CSS content in this course

 

Slide 21 : 21/35 : Three Types of Lists (list.en.html)

Three Types of Lists

Ordered list

  

<ol>
<li> </li>
</ol>

  1. You don't have
  2. to enter
  3. the numuber

Unordered list

  

<ul>
<li> </li>
</ul>

  • You
  • may
    • use
      • different levels
      • of imbrication

Definition list

  

<dl>
<dt> </dt>
<dd> </dd>
</dl>

This is the term
and its definition
Another term
and another definition that could be really longue and complex and asdlkjasdl kjassdlkjasdlkj assdlkjsdlkk

N.B. About closing tags

 

Slide 22 : 22/35 : White Space Management (spaces.en.html)

White Space Management

Browsers are programmed to ignore extraneous blank spaces and empty lines

Controlling white space on a Web page requires special HTML elements:

More than one line ? (This is just a trick : you should use CSS instead !)

<p><p><p><p><p><p> = <p></p><p></p><p></p>= <p>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><Ppnbsp;</p>

or <br><br><br><br><br><br>

Slide 23 : 23/35 : Character Entities (character.en.html)

Character Entities

>

 &gt;

<

 &lt;

&

 &amp;

"

 &quot;

°

 &deg;

€

 &euro;

©

 &copy;

®

 &reg;

A full List : http://www.w3schools.com/html/html_entitiesref.asp

 

Slide 24 : 24/35 : Different Types of Hyperlinks : here comes the URLs (linkType.en.html)

Different Types of Hyperlinks : here comes the URLs

Absolute URLs point to Web pages on other Web servers

http://escience.anu.edu.au/lecture/comp1710/index.en.html

Relative URLs point to Web pages on the same Web server

/lecture/comp1710/index.en.html

index.en.html

../../index.html

Named Anchors point to a different location on the current (or not) Web page

#anotherPoint

/lecture/other/index.html#notTheBeginning

 

Slide 25 : 25/35 : Two Parts and Two Extremities (linkTwoParts.en.html)

All Hyperlinks Have Two Parts and Two Extremities

Anchor Tags <a>

The Link Label is the visible element that the user points to and clicks (link labels can be text segments or images)

All hyperlinks are created with the anchor tag:
<a>this is a link label</a>

The Link Destination is the location that the link takes you to when you click on the link

The href attribute is used to specify the link destination:
<a href=“destination.html”>

<a href="urlOfTheDestination">Links Label</a>   => Links Label

The same anchor tag is used for both specifying the start of a link and sometime its end, when we want to arrive in a specific place in the text

<a name="targetID">Where we will arrive</A>

 

Slide 26 : 26/35 : 3, 4 - Parts and Two Extremities (linkTwoParts2.en.html)

All Hyperlinks Have 3, 4 ? Parts and Two Extremities

Link between two pages

Slide 27 : 27/35 : Absolute URLs (linkAbsoluteURL.en.html)

Absolute URLs

All absolute URLs use complete URL addresses for their link destinations:

<a href=“http://escience.anu.edu.au/lecture/index.en.html”>eScience lectures</a>

Any Web page can be referenced by an absolute URL as long as you have its correct address

Issues

You may not yet know the correct address

What if a set of pages (a web site) moves from one host to another ?

 

Slide 28 : 28/35 : Relative URLs (linkRelativeURL.en.html)

Relative URLs

A relative URL need only to specify a file name or a relative path for its link destination:

<a href=“treehouse.html”>tree houses</a>

This assumes the destination file is in the same directory as the HTML file containing the link

If the file is in a different directory, path information must be added to the href value

'../'  means 'Go up a level' ("open the box in which you are")

'directoryName/' means go down into that subdirectory

Start with '/' means start at the root (entry point) of the web site

For instance, to go back to the home of the web site, even if you don't know where the page you are working on will be place on the global web site

Directory hierachy

What you want

Relative URL

Root

  • Directory A

    • file1.html

  • Directory B

    • Dirctory B1

      • file3.html

    • Directory B2

      • file2.html

         

Go from file2 to file3

../B1/file3.html

../../B/B1/file3.html

/B/B1/file3.html

Go from file3 (or file2) to file1

../../A/file1.html

/../A/file1.html

 

Slide 29 : 29/35 : Relative URLs : examples (linkRelativeURL2.en.html)

Relative URLs : examples

Directory hierarchy

What you want

Relative URL

Root

  • Directory A

    • file1.html

  • Directory B

    • Directory B1

      • file3.html

    • Directory B2

      • file2.html

         

Go from file2 to file3

../B1/file3.html

../../B/B1/file3.html

/B/B1/file3.html

Go from file3 (or file2) to file1

../../A/file1.html

/../A/file1.html

 

Slide 30 : 30/35 : Named Anchors (linkNamedAnchor.en.html)

Named Anchors

A named link destination specifies a location that has been marked by an anchor tag with a name attribute

<a href=“#lumber”>Some Good Lumber</a>
<a name=“lumber”>some good lumber</a>

The href value is prefaced with the # character but the name value is not

Named Anchors Combined with Other Links

A named anchor can be added to an absolute or relative link as long as the destination being referenced contains that named anchor

<a href=“treehouse.html#lumber”>Some Good Lumber</a>

Just add a # followed by the anchor’s name to the end of the file name in the href value

Slide 31 : 31/35 : What happens when one clicks on a link ? (whatHappens.en.html)

What happens when one clic on a link ?

<a target="windowname"
href="http://machine2/loc2/f2.html#name"> Link Label </a>

Q1 Where is the source file (URL : http://machine1/location1/file1.html or file///location/file1.html) ?

Q2 Window in which it is displayed
"windowname" target attribute => should I open a new window ?
NB. : just don't use pop up windows

Q3 : which protocol (given, or if not => the same as the source file)

Q4 : which machine (given, or if not => the same as the source file)

Q5 : which location (absolute or relative to  the source file)

( A0 : Send a DNS request to convert the server machine name into an IP number )

A1 : Connect to the server machine (where the file si available), HTTP, port 80

A2 : Request the file by sendinding location + file name (second half of the URL)

(A2 bis : send some other information too, like Referer, one's IP number, cookies etc)

A3 : Receive Type MIME + file content

A4 : Parse the HTML :
Look for files included : OBJECT tag (java, video etc) , IMG, tag, javascript file, attached style sheet files
Look for anchor target if specified in th URL (#name)

A5 : Run some javascript
Display the HTML file taking into account the included objects.
Start some included object animation

 

 

Slide 32 : 32/35 : Link Maintenance (linkMaintenance.en.html)

Link Maintenance

An absolute link that works today may not work tomorrow

Dead links frustrate visitors and detract from your Web pages.

"Error 404 not Found"

To keep all of your links operational, you have to test them periodically and update any that have died.

Please personalize the deafult 404 page with a map of the site or a search tool or a preconfigured search tool.

Automated Link Checkers

If you have a large number of links, you should automate the process of link testing.

You can subscribe to a Web-based service for link testing and weekly or monthly link reports.

E.g. : http://www.linkalarm.com/

You can obtain your own link testing software and run it yourself.

Slide 33 : 33/35 : The Web Page Development Cycle (development.en.html)

The Web Page Development Cycle

Edit an HTML file starting with the default template

  1. Save your HTML file

  2. Load the file into your Web browser

  3. Review the file with your Web browser

  4. Revise your HTML file with a text editor

Repeat this cycle as often as needed

 

Slide 34 : 34/35 : HTML Validation Services (validation.en.html)

HTML Validation Services

A validation service on the Web can check an HTML file for you

A validation service can be used to identify tagging errors and HTML extensions

Some HTML tagging errors are difficult to locate by manual inspection

If you don’t use an HTML editor, a validation service can be very helpful

http://validator.w3.org/check

http://bobby.watchfire.com/bobby/html/en/index.jsp (Accessibility)

 

Slide 35 : 35/35 : Prepare your transition from HTML to XHTML (xhtml.en.html)

Prepare your transition from HTML to XHTML ...

Source for more : http://www.w3schools.com/xml/xml_syntax.asp

All XML elements must have a closing tag

<anonemptyelement>
An element value.
</anonemptyelement>

With XML, it is illegal to omit the closing tag

Empty Closed Element
<anemptyelement />

XML tags are case sensitive XHTML : all tags, attributes should be in lowercase

All XML elements must be properly nested

Attribute values must always be quoted

With XML, white space is preserved

With XML, CR / LF is converted to LF

With XML, a new line is always stored as LF.