Top Banner
A Look at HTML (and XHTML)
23

A Look at HTML (and XHTML). Types of Web Applications.

Jan 17, 2016

Download

Documents

August Lloyd
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: A Look at HTML (and XHTML). Types of Web Applications.

A Look at HTML(and XHTML)

Page 2: A Look at HTML (and XHTML). Types of Web Applications.

Types of Web Applications

Page 3: A Look at HTML (and XHTML). Types of Web Applications.

Clipper

• In your home directory create the directory: public_html

• Index.html acts as your home page.

• To make the page accessible on the web do the following to the home directory: chmod o+x <home directory>

Page 4: A Look at HTML (and XHTML). Types of Web Applications.

Birth of HTML

• 1960’s the seeds of what would become the Internet are formed.

• Roughly the same time some physicists at CERN released an authoring language and distribution system they developed for creating and sharing multimedia-enabled, integrated electronic documents over the new Internet.

• First modern browser is built at NCSA and is called Mosaic (Mozilla).

Page 5: A Look at HTML (and XHTML). Types of Web Applications.

Standard Generalized Markup Language (SGML)

• Could be thought of as the godfather of all markup languages.

• Problem: It is so broad and all encompassing that mere morals can’t use it.

• HTML, somewhat a black sheep of the family is a simplified enough form of SGML to make it more usable.

Page 6: A Look at HTML (and XHTML). Types of Web Applications.

World Wide Web Consortium(The Guardians of HTML)

• Formed with the charter to define the standards for HTML and later XHTML.

• Broader Responsibilities Include:– Cascading Style Sheets (CSS)– HTML– Extensible Markup Language (XML)– Document addressing on the web– Solicit draft standards for extensions to

existing web technologies.

Page 7: A Look at HTML (and XHTML). Types of Web Applications.

HTML vs. XHTML

• HTML’s development was more or less a tug of war between the World Wide Web Consortium (W3C) and the browser developers (first Netscape, then IE).

• Eventually the W3C won out with the release of HTML 4.01, which is pretty much the last release of HTML.

Page 8: A Look at HTML (and XHTML). Types of Web Applications.

HTML vs. XHTML

• HTML needed a way for the constant changes in how to distribute, process, and display documents.

• W3C developed the XML standard.• XML Provided a way to create new,

standards-based markup languages that don’t take an act of the W3C to implement.

• XHTML is HTML reformulated to adhere to the XML standard.

Page 9: A Look at HTML (and XHTML). Types of Web Applications.

HTML vs. XHTML

• They are not word-processing tools, desktop-publishing solutions, or even programming languages.

• Fundamental purpose is to define the structure and appearance of documents and document families so that they may be delivered quickly and easily to a user over a network for rendering on a variety of display devices.

Page 10: A Look at HTML (and XHTML). Types of Web Applications.

HTML vs. XHTML

• Provides a framework for display content in a web page.

• They are however limited in how much control you have over how the content will be displayed.

Page 11: A Look at HTML (and XHTML). Types of Web Applications.

HTML vs. XHTML

• Deprecated features– Replace when able.

• Standards not supported– Cope the best you can.

• Supported features not part of the standard.– Avoid using at all costs.

Page 12: A Look at HTML (and XHTML). Types of Web Applications.

The Basics

• HTML and XHTML function through the heavy use of tags.

• A tag is enclosed within a set of ‘< >’.

• Tags are paired together, with affected content placed between the pair.

• The end tag is noted by placing a ‘/’ before the name of the tag.– Example: <title> This is the Title Tag </title>

Page 13: A Look at HTML (and XHTML). Types of Web Applications.

The Basics

• Every tag has a name.– XHTML case sensitive, HTML not.

• Some tags have an optional list of tag attributes.– Order unimportant.– Placing attributes in quotes optional

(sometimes) for HTML not for XHTML.

• Try and keep a tag all on one line.

Page 14: A Look at HTML (and XHTML). Types of Web Applications.

Some Notable Tags

• <html>,</html> : Lets the browser know the web page is encoded in html.

• <head>,</head> : Where you put information about the document being displayed.

• <title>,</title> : What title you want to give your document.

• <body>,</body> : Where you put the actual document you want displayed.

Page 15: A Look at HTML (and XHTML). Types of Web Applications.

Example Web Page

<html><head><title> My first HTML document </title></head><body>This is a web page.</body></html>

Page 16: A Look at HTML (and XHTML). Types of Web Applications.

Ways to Create Web Pages

• Use and editor like Netscape Composer or have Microsoft Word save your document encoded in html.

• Put in all the tags yourself using a basic text editor or perhaps an editor designed to help match up tags.

Page 17: A Look at HTML (and XHTML). Types of Web Applications.

Nesting Tags

• Last tag in should be first tag closed off.

• XHTML very much dislikes improper nesting of tags.

Page 18: A Look at HTML (and XHTML). Types of Web Applications.

Tags Without Ends

• A few tags in HTML have no end:

<area> <base> <base front>

<br> <col> <frame>

<hr> <img> <input>

<isindex> <link> <meta>

<param>

• XHTML tags all have endings: <br />

Page 19: A Look at HTML (and XHTML). Types of Web Applications.

Adding Comments

• <!--, --> : Used to include comments in the web page.

Note: Anything that isn’t a tag or a comment is text.

Page 20: A Look at HTML (and XHTML). Types of Web Applications.

Hyperlinking

• <id> </id> : Used to set a hyper location for a section of text.

• <a> </a> : Used to create a hyperlink to a web page or a section of text.

Page 21: A Look at HTML (and XHTML). Types of Web Applications.

Hyperlink Example

<h3 id = “Stews”>Kumquat Stew Recipes</h3>

<a href= “http://www.kumquat.com/archive.html” >Kumquat Archive</a>

<a href= “http://www.kumquat.com/archive.html#Stews” >Kumquat Archive</a>

Page 22: A Look at HTML (and XHTML). Types of Web Applications.

Few Text Formatting Tags

• <i> </i> : Italics

• <b> </b> : Bold

Page 23: A Look at HTML (and XHTML). Types of Web Applications.

Splitting up the Text

• <br> </br> : Line break

• <div> </div> : Division

• <p> </p> : Paragraph

<div> and <p> define a region, and <p> adds more vertical space between two regions of text.