Internet technologies/HTML+CSS/Home

From virtualMV2015wiki
Jump to: navigation, search



Overview

Icon Objectives.png

Objectives

By the end of this page you will be able to:

  • Define and describe the term HTML
  • Describe a basic web page and fundamental tags
  • Describe basic features of XHTML

Client Side technologies

In 1991 Tim Berners-Lee of CERN released the hypertext system, which allowed:

  • Pages and formatting to be contained in a simple text file
  • links to be made from page to page, and
  • images to be included in pages.

One big drawback of the HTML code developed was that it mixed the content with formatting and layout. Work on adding this capability came in the form of developing a styling language that could be applied to the HTML code. In Dec 1996 Cascading Style Sheets were officially released, but it wasn't until 2000 that Web Browsers were offering fairly full implementations of CSS. Unfortunately implementation in different browsers was not consistent. CSS allows:

  • Formatting to be applied to tags and areas in a web page
  • Areas on a web page to be laid out

Alongside the development of CSS was the development of a programming language that could be used in a web browser to add interactivity. By 1997 specifications for ECMAScript language based on Netscape's JavaScript was published. JavaScript(Netscape) and JScript(Microsoft) follow ECMA standards but have extensions. JavaScript allows:

  • Code to be included in an HTML file
  • Forms to be validated in the browser
  • Interactivity such as mouse actions, drag and drop, object movement.

HTML/CSS and JavaScript all function together and form the technology ecosystem used by HTML 5. The all function without the need to access a Web Server so are called Client-Side technologies.

Hypertext Markup Language (HTML)

  • A language that describes the structure and content of a page or document used on the World Wide Web. Each page is a plain ASCII text file with formatting instructions, called tags, inserted.

Here is an ASCII text drawing:

(@ @)
--o00-(_)-00o--
Kilroy was here

Basic HTML Page

A basic Web page could look like this and have the following tags:

<html> 
<head> 
    <title>My first page</title>
</head> 
<body>
    <p>Hello world</p>
</body> 
</html>
  • First and last tag
    • <html> ... </html>
      The first tag on a Web page and the last tag, tells the browser that it is an HTML document.
  • Each html page is divided into
    • heading information (meta-information) and is not displayed on the web page
      <head> ... </head>
    • the actual information to be displayed on the web page between
      <body> ... </body>
  • In the head area is the title you see at the top of your browser, ( not on your actual Web Page), as well as Meta tags containing information to help Search Engines find your pages. The title is also used by most browsers when saving the user’s "hotlist," also called "bookmarks" or "favourites". Because of this, the title should be descriptive.

Cascading Style Sheets (CSS)

Adding interactivity

Server side web pages

Icon References.png References