Scribd
Upload
36 views

IS221 Week2 Lecture

The document discusses the basics of HTML and XHTML syntax. It compares HTML5 and XHTML, explaining that XHTML is stricter but also more compatible with other technologies. The document outlines rules for writing valid XHTML, including requirements for tags, attributes, and document structure.

Uploaded by

diristi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

IS221 Week2 Lecture

The document discusses the basics of HTML and XHTML syntax. It compares HTML5 and XHTML, explaining that XHTML is stricter but also more compatible with other technologies. The document outlines rules for writing valid XHTML, including requirements for tags, attributes, and document structure.

Uploaded by

diristi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

2/29/2024

Week2 – Lecture 1 Week 2 – Lecture 1


Basic HTML (1)

Web Applications Development


2

Agenda Objective
• Review HTML5 syntax • After completing this session, you will become
• Explore XHTML syntax familiar with using XHTML for creating Web
• Compare and contrast HTML5 and XHTML pages
syntax • Compare and contrast XHTML and HTML5
syntax

3 4

What is XHTML? XHTML and HTML


• XHTML stands for Extensible HyperText Markup • Using XHTML is not very different from HTML.
Language, and it evolved from HTML as the primary • XHTML is identical to HTML in many respects.
means of describing Web content. • According to the W3C, ‘XHTML 1.0 is a
• Like HTML, all XHTML files are plain-text files, so reformulation of HTML’.
they can be edited on any type of computer. • XHTML 1.1 was released on May 2001 as a W3C
• XHTML is not really a programming language: it is recommendation – in that specific modules are
more of a set of rules stored within the browser that defined to handle particular tasks
defines a way to structure the elements of a page by
using embedded tags.

5 6

1
2/29/2024

XHTML and HTML XHTML and HTML


• Authors can use standard XHTML modules and • XHTML encourages a more structured, disciplined
create their own XML modules approach and unlike HTML does not tolerate
• XHTML is central to the W3C’s work to create violations in the rules.
standards that provide richer Web pages on an ever- • XHTML will not accept ill-formed document – such
increasing range of browser platforms including cell as non-closing tags
phones, televisions, cars, wallet sized wireless • XHTML gives:
communicators and more. • Compatibility with previous versions of HTML
• Developers the power and flexibility to define
their own tags and extend the language to their
needs.

7 8

Why use XHTML instead of HTML? Rules for using XHTML?


• XHTML is another application of XML - is The following rules must be strictly applied when writing XHTML
compliant documents:
structured set of rules for how one might • All tag names must be in lower case -
define any kind of data to be shared on the • <html> NOT <HTML>
Web.
• All tags must have a corresponding matching closing tag
• XHTML will help make pages more readable (container tags)
for disabled users. • <body> </body>
• XHTML accommodates new devices and
• Empty elements must have an end tag or include the closing
technologies – PDA, mobile phone, pager. tag
• <br> </br> OR <br />

9 10

Rules for using XHTML? Rules for using HTML5?


• All attribute values must be enclosed in quotes
(either double or single – the notes use double)
• Compare and contrast XHTML
• size="10" rules with HTML5 rules…
• Nested tags must be terminated in the reverse
order to the way they are written.
• <p><b> … </b></p> is a correct construction,
• <p><b> … </p></b> is incorrect.

11 12

2
2/29/2024

The Three variants of XHTML Strict Version


• The W3C has marked some elements in HTML for • use this when you want really clean structural
eventual removal, or deprecation. Such as empty markup, free of any tags associated with layout.
tags: <br>, <font> • deprecated tags and attributes are taboo also
• XHTML: strict – does not allow deprecated tags • goal is of separating structure from presentation is
• XHTML: transitional – allows these tags observed
• XHTML: frameset – allows these tags and tags which • Cascading Style Sheet (CSS) needs to be used to get
support frames font, colors, layout effects

• The DOCTYPE declaration defines which flavour of


XHTML the document uses.

13 14

Transitional Version Frameset Version


• permits use of deprecated tags and attributes • this is used when you want to use frames to
• more relaxed on the application of the rules of partition the browser window into two or
XHTML more frames.
• Main idea is to take advantage of XHTML • exactly the same as the transitional version,
features including style sheets. apart from its support for frames.

• http://www.angelfire.com/super/badwebs/

Principles of Web Design 5th


15 16
Ed.

Document Declaration Tags Document Version Declaration Tag


• Layout a basic working framework.
• XHTML documents must follow a defined An example would be:
sequence of tags if they are to be interpreted <?xml version = “1.0”?>
correctly.
• Create a template to use for each of your pages
so that you are less likely to leave out an Purpose: tell the browser which document
important detail. version you are using
• Conform to the proper XHTML syntax.
• Include a group of tags in any document that are
called document declaration tags - three such
tags that must be declared.
Principles of Web Design 5 th
17
Ed.

3
2/29/2024

2. Document Type Declarations Tag 3. Namespace Tag


• An example would be: • An example would be:
<!DOCTYPE html PUBLIC “-//WC3//DTD XHTML 1.0 <html xmlns = “http://www.w3.org/1999/xhtml”>
Transitional //EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11-
transitional.dtd”> • Apply on the root element.
• Purpose: inform the browser what variant of XHTML you are
conforming to and only render documents that conform to • Every XHTML document must begin with the
the DTD (Document Type Definition). root element, html.
– XHTML is another application of XML.

3.19 3.20
IS221 Web Applications Development

The Name Space Tag (1) The Name Space Tag (2)
• For anyone to create a set of markup elements, DTD 1.define
the DTD is required to define elements and Elements and attribute names
attribute names that make up the markup
language. You
3.reference
• These elements and attribute names are stored in 2.store
a namespace that is unique to the DTD. Your document

• The tag is used to prevent ambiguity from arising 4.Look up


Namespace
when tag elements may be assigned names that Browser
5. Find out
match existing element names.
3.21
IS221 Web Applications Development

Name conflict
This XML carries HTML table information: Name conflict – solve using Prefix
<table> This XML carries HTML table, and a piece of furniture:
<tr>
<td>Apples</td> <h:table>
<td>Bananas</td> <h:tr>
</tr> <h:td>Apples</h:td>
</table> <h:td>Bananas</h:td>
</h:tr>
</h:table>
This XML carries information about a table (a piece of
furniture):
<f:table>
<table>
<name>African Coffee Table</name> <f:name>African Coffee Table</f:name>
<width>80</width> <f:width>80</f:width>
<length>120</length> <f:length>120</f:length>
</table> </f:table>
http://www.w3schools.com/xml/xml_namespaces.asp http://www.w3schools.com/xml/xml_namespaces.asp

3.23 3.24

4
2/29/2024

An XHTML Document Template


Name conflict – solve using Prefix <?xml version = “1.0”?>
<!DOCTYPE html PUBLIC “-//WC3//DTD XHTML 1.0 Transitional
//EN”
This XML carries HTML table, and a piece of “http://www.w3.org/TR/xhtml11/DTD/xhtml11-
transitional.dtd”>
furniture:
<h:table xmlns:h="http://www.w3.org/TR/html4/"> <html xmlns = “http://www.w3.org/1999/xhtml”>
<h:tr>
<!- - my first XHTML page - ->
<h:td>Apples</h:td>
<h:td>Bananas</h:td> <!- -Date written 20/02/2006 - ->
</h:tr>
</h:table> <head >
<title > My First XHTML page </title>
<f:table xmlns:f="http://www.w3schools.com/furniture"> </head >
<f:name>African Coffee Table</f:name>
<f:width>80</f:width> <body >
<f:length>120</f:length> Put the body text in here.
</f:table> http://www.w3schools.com/xml/xml_namespaces.asp </body >
</html>

3.25
IS221 Web Applications Development

The XHTML Document Template Deprecated Elements


• All XHTML listings begin with document template tags • The WC3 often discourages the use of older tags and
described earlier. attributes that have been replaced by more appropriate
elements - deprecated elements.
• Next is the <head> tag, which opens up the heading • The reason - it may be more efficient to implement some
part of the document. tasks by using Cascading Style Sheets or some other
• This normally contains the <title> element, which is techniques.
used for adding a title to your document. • Using deprecated elements will not necessarily result in
faults in the way that your document is rendered in a
• The heading is closed with the </head> tag. browser.
• The body of your document is turned on with the start • By avoiding deprecated elements, you will be conforming
<body> tag. to standards that will often improve the readability of the
document as well as making it easier to maintain.
• The body element is closed with the end tag, </body>.

3.28

Attributes and Values (1) Attributes and Values (2)


<img src=“myphoto.jpg” width=“300”
• Attributes are used to control some aspect of a tag’s height=“200” />
actions.
• For example: • src, width and height are attributes of the ‘img’
– A heading tag could use an attribute to control the alignment. element
– A heading attribute could set this value as the centre or right • The attributes have values, must be in single or
aligned.
double quotes
• Attributes take values that follow an = sign after the
attributes name. • Value of attribute src is text string “myphoto.jpg”
• The way in which an attribute is used within a tag is shown • Value of attribute width is text string “300”
in the following examples: • Value of attribute height is text string “200”
<h1 align =“centre”>My Favourite Music Page</h1> (<img src=myphoto.jpg width=300 height=200> HTML)
<font color =“red”>

3.29 3.30
IS221 Web Applications Development IS221 Web Applications Development

5
2/29/2024

Adding Hidden Comments to Simple1.html


HTML XHTML
Your XHTML Files <?xml version = “1.0”?>
• It is possible to add comments to your XHTML <!DOCTYPE html PUBLIC “-//WC3//DTD XHTML 1.0
Transitional //EN”
document that will not be seen by a reader. <HTML>
“http://www.w3.org/TR/xhtml11/DTD/xhtml11-
<head>
• To add a comment tag, start with <!--, and <title> a simple1 page</title>
transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
after the comment is completed, finish with two </head> <head>
<BODY>
hyphens and closing angle bracket, that is, --> <img src=myphoto.jpg width=300
<title> a simple page</title>
</head>
tag. height=200 > <body>
• An example of an XHTML comment is given <FONT COLOR=“red">
<img src=‘myphoto.jpg’ width=‘300’ height=‘200’ />

below: <p>Hello, <B>CS221


Students</B>! </p> <font color="red">
</FONT> <p>Hello, <b>CS221 Students</b>! </p>
<!-- This is a comment tag and will </font>
</BODY> </body>
not be displayed in the browser --> </HTML> </html>

3.31 3.32
IS221 Web Applications Development

Creating Lists in XHTML


• Lists have long been used in traditional text
documents for achieving layout in the form of
contents pages, and so on.
• The same effect is often desired in Web documents.

• XHTML offers Web authors three types of lists:


– Unordered lists using the <ul> tag
– Ordered lists using the <ol> tag
– Definition lists using the <dl> tag.

Ordered List Ordered List


• This uses numbers or letters to identify each item in
the list. • Attributes associated with the ordered list include
(<ol type=“i”> or <ol type=‘i’>)
type and start.
• Ordered list begin with <ol> and close with • Type is used to define the numerical type of each
</ol> item in the list. Default is Arabic numerals
• Each item uses standard list item <li> tag e.g. <ol type=“A”> or
<h2> Steps to create a Web Page </h2> <ol type=“a”>
<ol>
<li> Load Editor </li>
• Start attribute defines the starting value for the
<li> Type in XHTML code</li> list to begin from. Default value is 1.
<li> View in Browser </li> e.g. <ol start=“10”> or
</ol>
<ol start = “2004”>

IS221 Web Applications IS221 Web Applications


5.35 5.36
Development Development

6
2/29/2024

Unordered List
Type Attribute
• Unordered list begin with <ul> and close
with </ul>
• Each item uses standard list item <li> tag <h2> Shopping List </h2>
<ul type=“disc”>
• Type attribute – change shape of the bullet <li> Buy apples </li>
for each item – disc, square or circle <ul type=“circle”>
<h2> Shopping List </h2> <li> Buy oranges </li>
<ul> <li> Buy pears </li>
<li> Buy apples </li> </ul>
<li> Buy oranges </li> <li> Buy grapes </li>
<li> Buy pears </li> </ul>
<li> Buy grapes </li>
</ul>
IS221 Web Applications
5.37 5.38
Development

Definition List (1) Definition List (2)


• This is useful when you want to associate a phrase
• <dl> consists of a pair of terms and with a word.
definitions. <h2>XHTML</h2>
An abbreviation for eXtensible Hypertext Markup Language
• Use <dt> and <dd> instead of <li> <dl>
<dt>Extensible</dt>
definition term definition description <dd>conforms with the XML standard</dd>
<dt>HyperText</dt>
<dd>navigation links embedded within the text</dd>
<dt>Mark-up</dt>
<dd>additional signs to show how text is
• It is useful on scientific and academic Website structured</dd>
<dt>Language</dt>
<dd>formal communication with syntax/grammar<dd>
</dl>
IS221 Web Applications
5.39
Development

Content, Structure, Appearance,


Behaviour
• The content is the words (or pictures …etc) that will
appear on the page.
• The structure refers to parts of the page such as the
title, a heading, a block such as a division or paragraph,
or a cell in a table.
• The appearance or layout of the page is the colour and
position of the content and the style of the page.
• Finally the behaviour is how parts of the page respond
to activities such as the movement of the mouse or the
click of a button or when the page scrolls.

IS221 Web Applications


5.41
Development

7
2/29/2024

Adding Structure to your page


Markup Syntax - Containment
• The document content (the characters, • The basic xhtml page layout given on a previous
words etc) - appear in the browser window lecture shows the body element containing a div
• The document appearance - is used by the element.
browser to control how the document should • It is good practice to enclose content inside block-
appear in the browser. level elements of which <div> </div>
and <p> </p>are examples.
• The syntax of mark-up keeps the structure
• Block-level elements start a new paragraph
and content explicitly separate leaving a space between block.
• Elements • In-line elements do not start a new paragraph
<tag> Start content...end content </tag> such as: <b> </b>, <i> </i>, and <em>
</em>

Block-level Containment Naming Elements


• html • Groups of elements can be given the same name –
– head class
• title - my page title • An individual element can be named – id
– body <body>
• h1---my page heading <h1> BSc – CS/IS </h1>
• p---A paragraph (a useful block-level container) <div class=“degree">
• ol---An ordered list This is a three year degree course. </div>
– li---Item 1 <h2> CS221 </h2>
– li---Item 2
<div class=“course">
• ul---An unordered list
This is a level 2 course introducing basic
– li---Item 1
XHML</div>
– li---Item 2
<h3 id = "lect1"> Lecture 1 </h3>
• div --– A block-level element
– - etc <div class="lecture">
Content, Structure, Appearance, Behaviour</div>
</body>
IS221 Web Applications
5.46
Development

Name Part of In-line Text


(style and span)
<head>
<title>Title</title>
<style type="text/css">
.stress {color: red;}
</style>
</head>

<body>
<div class = "lecture">This lecture stresses that for any page
it is the <span class="stress">Content, Structure, Appearance,
Behaviour</span> that should dominate. <br />
It notes the use of <span class="stress"> elements and named
elements </span>to emphasise the structure with a view to
controlling the appearance later.
</div>
</body>

IS221 Web Applications IS221 Web Applications


5.47 5.48
Development Development

8
2/29/2024

Style.html Tool-tips ( Title Attribute)


<body>
<h1> BSc – CS/IS </h1>
<div class=“degree" title=“Degree Information">
This is a three year degree course
</div>
<h2> CS221 </h2>
<div class=“course" title="course details">
This is a level 2 course introducing basic XHTML
</div>
<h3 id = "lect1"> Lecture 1 </h3>
<div class = "lecture" title="lecture content">
This lecture stresses that for any page it is the <span class="stress"
title="Four key facets of a web page"> Content, Structure, Appearance,
Behaviour </span> that should dominate. <br/>
It notes the use of <span class = "stress"> elements and named elements
</span> to emphasise the structure with a view to controlling the
appearance later.
</div>
</body>

IS221 Web Applications


5.49
Development

IS221 Web Applications


Development
5.51

You might also like