HTML/XHTML:What is HTML

From virtualMV2015wiki
Jump to: navigation, search
 Home  HTML/XHTML <

Introduction

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

HTML (Hypertext Markup Language)

  • 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.


Icon Activity.png

Activity TryIt: Learning some basic tags

  1. Enter the code above into the frame on the right. To see what it looks like in a web browser click the refresh button.
  2. just before the last body tag, add another paragraph (is between two p tags) e.g. <p>Michael here</p>
  3. Lets bold world. Surround the word world like this <b>world</b>, then click refresh button
  4. Lets add a heading. On the line following the body tag enter <h1>Welcome human</h1>
  5. change h1 to h2 and see what happens (you can try h3,h4,h5, and h6 also)

Basic html tags

A tag is a formatting command which the browser must interpret to create your web page, and generally takes the form

<tag> ... </tag>.

e.g. to bold a word, use

<b>bold</b>
  • Tags may be nested or combined e.g. to get bold italic text, use:
<b>bold <i>bold italics</i></b>

Notes

  • Keep the nested tags in the right order (this is required in newer versions of html - xhtml or xml).
  • If you want to future proof your web page you should close all tags with an end tag. (Many browsers will still interpret the page correctly even if tags are omitted (e.g. for the new paragraph tag <p>, the </p> tag is optional), but tag closing is required in XHTML/XML).
  • Tags may be in upper or lowercase. Nowadays it is common to use lowercase.

Brief history

HTML

  • 1991 HTML First described by Tim Berners-Lee (20 tags were described)
  • 1992 Introduction of IMG tag(putting image) in html by the Mosaic team. Later, when HTML 4 came out the IMG tagged was replaced by the OBJECT that was some years later.-Jerric 123 20:44, 30 August 2010 (UTC)
  • 1994 The first World Wide Web conference is held in Geneva. Dave Raggett was working on some new HTML ideas which he called as HTML+,and the conference concluded that the work on the HTML+ should be carried on as it may lead to the development of HTML 3.
  • 1995 HTML 2.0 Had most of the tags we use, missing table support or align attributes, and did not include Microsoft / Netscape extensions
  • 1996(jan) Work on "Cougar"( the next version of HTML - HTML 4)begun.-Jerric 123 20:44, 30 August 2010 (UTC)
  • 1997(jan) HTML 3.2 was ready -Jerric 123 20:44, 30 August 2010 (UTC)
  • 1997 (Jan) HTML 3.0 - adopted most of Netscapes tags.
  • 1997 (Dec) HTML 4.0 - introduced strict (deprecated elements forbidden), Transitional (deprecated elements are allowed) and Frameset (mostly only frame elements allowed)
    • 1999 HTML 4.01 (XHTML 1.0). Includes support for most of the proprietary extensions, plus support for extra features (Internationalized documents, support for Cascading Style Sheets, extra TABLE, FORM, and JavaScript enhancements)
  • Present HTML 5 (working draft)
    • Amongst other things is designed to reduce need for proprietary technologies like Flash and Silverlight. Adds tags for audio and video (included 2009 in Firefox and Chrome).

(HTML, 2010, January 14[1]; HTML5, 2010, January 15)[2] ("HTML", n.d) [3]

XHTML (HTML 4.01)?

XHTML is an XML compliant version of HTML. As the development of HTML was pretty much left to the authors’ of the web browsers ( Netscape and Microsoft) with regards to adding features many non-standard things were added. Some of the more common things required by XHTML browsers

  1. All tag and attribute names must be in lowercase.
    • You cant have <A HREF="myfile.html" .. <A>
  2. All tags must close
    • e.g. <p> must be closed with </p>
  3. Tags that are singular, have an extra slash added to the tag
    • e.g. <br> in XHTML becomes <br />
    • e.g. <img src="myPic.png" />
  4. Attributes of tags must be in quotes
    • e.g. <body bgcolor=blue> in XHTML becomes <body bgcolor="blue">
  5. Attributes must always have a value
    • e.g. in HTML <hr size="2" noshade> must be written <hr size="2" noshade="noshade" />
  • 2000 XHTML 1.0 (reformulation of HTML 4.01)
  • 2009 XHTML 2.0 never released, terminated end 2009
  • XHTML 5 is being defined alongside HTML 5. For some info read Pilgrim (2010)[4])

One implication of the stricter requirement of XHTML is that browsers can be coded more efficiently (less error checking), which means the can be smaller on low memory and/or portable devices.

HTML 5

Some of the changes from HTML 4 include;

  • New elements
    • video and audio: for multimedia content.
    • canvas: for rendering dynamic bitmap graphics on the fly, such as graphs or games.
  • Presentation elements and attributes removed as better handled by CSS
    • Elements: e.g. center, font, u (underline)
    • Attributes: e.g. align, background, border

HTML5 differences from HTML4 (van Kesteren, 2010) http://dev.w3.org/html5/html4-differences/[5]

28 HTML5 Features, Tips, and Techniques you Must Know. (Way, 2010)[6]

HTML in other places

  • You will find many online editors allow you to enter HTML directly, e.g. Wordpress Blog posts, MediaWiki (Wikipedia), Moodle. However, in many cases you will have a restricted feature set to avoid people adding code that could be used to hack the Web Server.
  • Apparently the best format to develop a Kindle eBook is HTML (Roush, 2010)[7]

Comment


Icon References.png References

  1. HTML. (2010, January 14). In Wikipedia, The Free Encyclopedia. Retrieved 10:17, January 17, 2010, from http://en.wikipedia.org/w/index.php?title=HTML&oldid=337884656
  2. HTML5. (2010, January 15). In Wikipedia, The Free Encyclopedia. Retrieved 10:28, January 17, 2010, from http://en.wikipedia.org/w/index.php?title=HTML5&oldid=338029625
  3. HTML. (n.d). A story about HTML. Retrieved 8:31, August 31, 2010, from http://www.w3.org/People/Raggett/book4/ch02.html
  4. Pilgrim, M (2010) Dive into HTML5. Retrieved March 29, 2010 from http://diveintohtml5.org/
  5. van Kesteren, A. (2010) HTML5 differences from HTML4. Retrieved October 20, 2010 from http://dev.w3.org/html5/html4-differences/
  6. Way, J.(2010). 28 HTML5 Features, Tips, and Techniques you Must Know. Retrieved November 19, 2010 from http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/
  7. Roush, W. (2010, May) Kindle Conniptions: How I Published My First E-Book. Retrieved from http://www.xconomy.com/national/2010/02/05/kindle-conniptions-how-i-published-my-first-e-book/?single_page=true

HTML/XHTML:What is HTML. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 18, 2017, from http://www.virtualmv.com/wiki/index.php?title=HTML/XHTML%3AWhat_is_HTML    (zotero)