Transcript 2.2 - DIT

Introduction to HTML &
XHTML
15th February
Introduction to HTML & XHTML


Introduction to HTML
Introduction to XHTML
Introduction

Web developers views a web page as a
document that must be created according to
authoring and development guidelines

Web developers use HTML or XHTML to
write code of a web page

Web browsers have a built-in interpreter to
render the results of a code in its window
The World Wide Web

Definitions

HTML



XHTML



The HyperText Markup Language
The language used to design web pages
The eXtensible HyperText Markup Language
Intended to enhance HTML, not replace it
World Wide Consortium (W3C) organisation is
responsible for developing web standards
Content of Web Pages

A web site may contain a combination of 13
standard elements:
Text
Lists
Hyperlinks
Colour
Graphics
Images
Image Maps
Sound
Video
Tables
Layers
Frames
Forms
Content of Web Pages

The content of a web site can be classified as:


Static content – does not change regularly e.g.
personal and professional web sites
Dynamic content – changes regularly e.g.,
banking web sites, weather reports…
Authoring of Web Pages

After a web page is designed one needs to use
HTML/XHTML code to author a web page
XHTML Syntax

XHTML uses tags that are enclosed in brackets (<,>)

XHTML content is enclosed between the tags



Tags and content form an XHTML Generic form: <starttag>content<end-tag>
Start and end tags have the same name, end tag has a
‘/’ before it: <b>This is BOLD</b>
XHTML tags can be nested according to the “first open,
last closed” rule: <b><i>bold and italic</i></b>
XHTML Syntax

XHTML rules










Tags must be closed
Empty tags must be closed
Use lower case tags
White space matters
All attributes values must be quoted
Tags must not overlap (i.e., during nesting)
Comments can be used
XHTML uses escaped characters
Do not use deprecated or obsolete tags
Browsers ignore mis-spelled tags
HTML Document Structure
<html>
<head>
<title>HTML Document Structure</title>
<meta name="author" content=“yupeng">
</head>
<body>
Web page content goes here
</body>
</html>
XHTML Document Structure
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content=“yupeng”/>
<title>XHTML Document Structure</title>
</head>
<body>
Web page content goes here
</body>
</html>
Document Tags
The tags that make up the framework of a typical
HTML document include the following:

Document type tag – DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Top-level tag, generally <html>

Tag indicates the beginning and end of an XHTML
document
Document Tags - Header

Header section, delimited by <head> tags



Provides extra information about the document
Serves as a container such as styles and global
scripts
The main tags used in this section are:




<title> - specifies the document title
<meta> - provides information to search engines
<style> - declares general & local styles for the document
<script> - declares any scripting information
Document Tags - Body

Body section, delimited by <body> tags


Section where visible content appears
Content is a series of block tags containing inline
content
XHTML Tags
<!DOCTYPE ….>
<html>
<head>
…..
</head>
<body>
…..
</body>
</html>
How can I write my first web page?
1.
2.
3.
4.
Open a text editor e.g., Notepad
Put in code from the HTML Document Structure
Slide
Save it as Example1.html
In web browser (IE/Firefox/Chrome),



Select File -> Open
Select Example1.html
Select Open
Meta Tags

Web pages are designed for surfers and surf engines

The <meta> tag increases the chances of page indexing

Meta data refers to data about XHTML document rather
than the document content

Browsers do not render meta data

Search engines use it for indexing and ranking the page
hits in a given search

Some attributes of this tag are name, content, http-equiv,
scheme
Meta Tags
<meta name=“keywords” content=“open, source, PHP,
programming, code” />

When a search engine indexes the page, it includes the
extra information -> open, source etc.

It provides the keywords to agents requesting them

Some search engines use these keywords to categorise
the document for searching
Amazon’s Meta Tags
<meta name="description" content="Low prices on digital cameras,
MP3, LCD TVs, books, music, DVDs, video games, software, home &
garden and much, much more. Free delivery on orders over £15." />
<meta name="keywords" content="digital camera, LCD TV, books, DVD,
low prices, video games, pc games, software, electronics, home,
garden, video, amazon" />
Authoring Tools

Tools need to develop a web site:






Types of editors



Editor
Graphics program
Digital cameras
Scanners
Audio & video software
Text: type in code and view results later -> Bottom-up development
HTML: view results as you develop the web page -> top-down
development
Web author must be familiar with both approaches
Text Formatting





Paragraphs
Lines
Headings
Horizontal Rules
Block divisions
Paragraphs

Main textual blocks, delimited by <p> tags
<p>This a paragraph of text in an XHTML document</p>
Line space
This a paragraph of text in an XHTML document
Lines

Used when you need to break a line prematurely
(before the paragraph)

The line break tag is <br/>
Lines - Example
<p>This a paragraph of text in an XHTML document</p>
<p>This a 2nd paragraph of text in an XHTML document</p>
This a paragraph of text in an XHTML document
This a 2nd paragraph of text in an XHTML document
<p>This a paragraph of text in an XHTML document</p>
<br/>
<p>This a 2nd paragraph of text in an XHTML document</p>
This a paragraph of text in an XHTML document
This a 2nd paragraph of text in an XHTML document
Headings

There are 6 levels of headings <h1>…..<h6>, the higher
the heading number the smaller the text
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Horizontal Rules


Horizontal rules appear as lines across the user agent
screen - <hr/>
Used to separate information visually
A line should be drawn under this text
<hr/>
A line should be drawn under this text
Block Divisions

Sometimes, there is a need to format a large block of text
in a similar fashion but in a way that is different from other
blocks in the same document e.g. a quote should appear
in a different style than the text around it - <div>
<div align="center">
Text formatted using div tag
</div>
Text formatted using div tag
Text Formatting
Text
Headings
<h1> largest
.
.
<h6> smallest
Paragraphs
<p>
Word/Characters
<b> bold
<i> italic
<br/> line break
<div> acts like a line break
<hr/> line in a web page,
Special Characters



These are required because some characters are reserved
for XHTML use such as ‘<‘,’>’, etc.
Special characters are represented by a character entity or
a numeric code
The character entity begins with & and ends with;
&copy; ->©

The numeric code begins with &# and ends with ;
&#169; -> ©

3 distinct character sets are:



ISO 8859-1 (Latin – 1)
Symbols, mathematical symbols, and Greek letters
Markup-significant and internationalisation characters
Hyperlinks

Hyperlinks link web pages to each other



Hyperlinks can be used as:



A link is a connection from one source to another
Hyperlinks create hypertext and is the driving force of the web
Links (inter-document links)
Anchors (intra-document links)
Links start at the source (visible part) and points to the
destination (invisible part)
<a invisible part> visible part</a>
Text or image
File / web page/ program/ image/ video or
Audio file….etc.
Hyperlinks

The important attributes of the <a> tag:
 href
 title
 name
 charset
 type
 rel
 rev
 accesskey
 shape
 coords
Hyperlinks

The visible part of the link may have 4 states
 Link – is not active and has not been visited
 Active – target of the link is active in another browser
window
 Visited – target of the link has been previously visited
 Hover – mouse pointer is over the link

Example:
<a href=http://www.dit.ie> This is the DIT web site</a>
Hyperlinks



Anchors are <a> tag to link different sections of the same
web page
2 uses of anchors are for table of contents and eliminating
scrolling
Creation of anchor requires 2 <a> tags
<a name=“sale”> and <a href=“#sale”>
Hyperlinks - anchors
<a name="Contents">Table of Contents</a>
<a href="#Section1"> Section 1</a>
<a name="Section1"> Section 1</a>
<a href="#Contents"> Return to Table of
Contents</a>
Lists

XHTML supports 3 types of lists:




Ordered – <ol>
Unordered – <ul>
Definition – <dl>
Lists may be nested to obtain multiple hierarchy
levels
Ordered List - <ol>


Lists whose elements must appear in a certain
order
Such lists usually have their items prefixed with a
number or letter
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Coconuts</li>
</ol>
1. Apples
2. Bananas
3. Coconuts
Ordered List - <ol>

How can the numbering style be changed??
<ol style=“list-style-type: lower-alpha”>
<li>Apples</li>
<li>Bananas</li>
<li>Coconuts</li>
</ol>

Some other style options:




decimal
lower-roman
upper-roman
upper-alpha
a. Apples
b. Bananas
c. Coconuts
Unordered List - <ul>

Lists whose elements do not have to appear in a
certain order
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Coconuts</li>
</ul>
•
•
•
Apples
Bananas
Coconuts
Unordered List - <ul>

How can the list item marker be changed??
<ul style=“list-style-type: square”>
<li>Apples</li>
<li>Bananas</li>
<li>Coconuts</li>
</ul>

Some other style options:



disc
circle
none
Apples
Bananas
Coconuts
Definition List - <dl>

More complex than the other 2 lists due to their
having 2 elements per list item
<dl>
<dt>Internet Explorer</dt>
<dd>Developed by Microsoft</dd>
<dt>Netscape</dt>
<dd>Developed by Netscape</dd>
</dl>
Internet Explorer
Developed by Microsoft
Netscape
Developed by Netscape
Nesting Lists

Lists can be nested of the same or different types
<ul>
<li>Send us a letter, including:</li>
<ol>
<li>Your full name</li>
<li>Your order number</li>
<li>Your contact information</li>
</ol>
<li> Use the web form to send an email </li>
</ul>
•
•
Send us a letter, including:
1. Your full name
2. Your order number
3. You contact information
Use the web form to send an email
Colours

Colour is an essential element and greatly improves
visualisation

A web author can set colours for background and text

Tags have a color attribute that enables web authors to set
colours for different XHTML elements

Colours are specified using hexadecimal codes


Black -> #000000

Red -> #FF0000

Blue -> #0000FF
Colours can be set globally or locally
Audio & Video

XHTML allows any author to incorporate digital audio and
videos in a web page

Audio formats – AU, WAV, MIDI, AIFF and MP3

Video formats – AVI, QuickTime, MPEG and MJPEG

A surfer must have the right hardware and software to be
able to play multimedia content of the web page

<embed> tag is used to incorporate audio and video files
in a web page

Attributes used are src, width and height, volume,
autostart, loop and hidden
Audio & Video
<embed src="music.mp3" width="145"
height="60" volume="70"> </embed>
Conclusion








Three views of Web pages: URL, browser display, and
document
Web sites and Web pages
Text formatting: text, lists, colors, hyperlinks, audio, video
HTML and XHTML
Text and HTML editors
XHTML document structure
Content of Web pages
Special characters
Reference

Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP
Programmer's Reference, Hungry Minds Inc,U.S.

Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility
and Protecting Against Worst-Case Scenarios with XHTML and CSS,
New Riders.

Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript