CSIT884
Web Development
HTML
HTML
Objectives:
● learn the HTML language to create web site;
● understand the concept of HTML tags and attributes;
● use HTML tags to format text, add graphics, create links, display
tables, lists, etc.
2
HTML
● is a markup language for describing web documents
used to mark parts of documents to indicate
how they should appear on a display
● HTML stands for Hyper Text Markup Language
● HTML documents are described by HTML tags
● Each HTML tag describes different document content
3
The first HTML document
<html>
<head>
<title>Hi</title>
</head>
<body>
Hello World!
</body>
</html>
4
The first HTML document
<html>
<head>
<title>Hi</title>
</head>
<body>
Hello World!
</body>
</html>
5
HTML document structure
<html>
● A HTML document starts with
<head> <html> and ends with </html>
<title>Hi</title> ● A HTML document has
a head and a body
</head>
<body> ● The visible part of the HTML
document is between
Hello World! <body> and </body>
</body>
</html>
6
HTML tags
<html>
<head>
tag
<title>Hi</title>
</head>
<body>
Hello World!
</body>
</html>
7
HTML tags
tags are NOT case sensitive
<html>
<head>
tag
<title>Hi</title>
</head>
most tag goes in pair
<body>
<tagname>content</tagname>
Hello World!
</body>
start tag end tag
</html>
8
HTML tags
HTML documents are made up by HTML elements.
The HTML element is everything from the start tag to
<html>
the end tag.
<head>
<title>Hi</title>
</head> Where is the HTML element?
Where is the HEAD element?
<body> Where is the BODY element?
Where is the TITLE element?
Hello World!
</body>
</html> What elements does the HTML
element contain?
9
Self-closing tag
<tagname></tagname>
● Sometime we have an element with no content (an empty element)
● With an empty element, we can combine the start-tag and end-tag into
one self-closing tag: <tagname />
● Example:
○ <br /> tag defines a line break
○ <hr /> tag defines a horizontal line
○ <img src="..." alt="..." /> tag defines an image
10
Tag attributes
<tagname attribute1="value1" attribute2="value2">
...
</tagname>
● HTML elements can have attributes
● Attributes provide additional information about an element
● Attributes are always specified in the start tag
● Attributes come in name/value pairs like: name="value"
11
Heading tags
<body>
<h1>Heading 1</h1>
Heading tags: <h1>, <h2>,..., <h6>
<h2>Heading 2</h2>
<h1> the most important heading
<h3>Heading 3</h3>
<h6> the least important heading
<h6>Heading 6</h6>
Normal text...
</body>
12
Unordered List
My timetable:
<ul>
<li>MATH222: Mon 8:30-10:30 lecture</li>
<li>CSCI204: Tue 9:30-11:30 lab</li>
<li>ISIT206: Wed 8:30-10:30 lecture</li>
</ul>
My timetable:
● MATH222: Mon 8:30-10:30 lecture
● CSCI204: Tue 9:30-11:30 lab
● ISIT206: Wed 8:30-10:30 lecture
13
Unordered List Unordered List
My timetable:
List Item
<ul>
<li>MATH222: Mon 8:30-10:30 lecture</li>
<li>CSCI204: Tue 9:30-11:30 lab</li>
<li>ISIT206: Wed 8:30-10:30 lecture</li>
</ul>
My timetable:
● MATH222: Mon 8:30-10:30 lecture
● CSCI204: Tue 9:30-11:30 lab
● ISIT206: Wed 8:30-10:30 lecture
14
Ordered List
My timetable:
<ol>
<li>MATH222: Mon 8:30-10:30 lecture</li>
<li>CSCI204: Tue 9:30-11:30 lab</li>
<li>ISIT206: Wed 8:30-10:30 lecture</li>
</ol>
My timetable:
1. MATH222: Mon 8:30-10:30 lecture
2. CSCI204: Tue 9:30-11:30 lab
3. ISIT206: Wed 8:30-10:30 lecture
15
Ordered List Ordered List
My timetable:
List Item
<ol>
<li>MATH222: Mon 8:30-10:30 lecture</li>
<li>CSCI204: Tue 9:30-11:30 lab</li>
<li>ISIT206: Wed 8:30-10:30 lecture</li>
</ol>
My timetable:
1. MATH222: Mon 8:30-10:30 lecture
2. CSCI204: Tue 9:30-11:30 lab
3. ISIT206: Wed 8:30-10:30 lecture
16
Description List
My timetable:
<dl>
<dt>MATH222</dt>
<dd>Mon 8:30-10:30 lecture</dd>
<dt>CSCI204</dt> My timetable:
<dd>Tue 9:30-11:30 lab</dd> MATH222
Mon 8:30-10:30 lecture
CSCI204
<dt>ISIT206</dt> Tue 9:30-11:30 lab
<dd>Wed 8:30-10:30 lecture</dd> ISIT206
Wed 8:30-10:30 lecture
</dl>
17
Description List Description List
My timetable:
Description Term
<dl>
Description Definition
<dt>MATH222</dt>
<dd>Mon 8:30-10:30 lecture</dd>
<dt>CSCI204</dt> My timetable:
<dd>Tue 9:30-11:30 lab</dd> MATH222
Mon 8:30-10:30 lecture
CSCI204
<dt>ISIT206</dt> Tue 9:30-11:30 lab
<dd>Wed 8:30-10:30 lecture</dd> ISIT206
Wed 8:30-10:30 lecture
</dl>
18
Formatting text
<i>italic text</i> <br />
<b>bold text</b> <br />
<mark>highlighted text</mark> <br />
<del>deleted text</del> <br />
<ins>inserted text</ins>
19
Formatting text
<ins>My timetable:</ins>
<ul>
<li><b>MATH222</b>: Mon 8:30-10:30 <i>lecture</i></li>
<li><b>CSCI204</b>: Tue 9:30-11:30 <i>lab</i></li>
<li><b>ISIT206</b>: Wed 8:30-10:30 <i>lecture</i></li>
</ul>
My timetable:
● MATH222: Mon 8:30-10:30 lecture
● CSCI204: Tue 9:30-11:30 lab
● ISIT206: Wed 8:30-10:30 lecture
20
Formatting text
<h1>HTML <small>Small</small> Formatting</h1>
HTML <small>Small</small> Formatting
21
Formatting text
Changing font
<font size="1">This is the smallest size</font>
<font size="2">smaller than the default</font>
<font size="3">This is the default font size</font>
<font size="4">larger than the default</font>
<font size="5">larger than the default</font>
<font size="6" color="red">larger than the default</font>
<font size="7" color="blue">This is the largest size</font>
22
Formatting text
<body>
Some math
x<sub>1</sub><sup>n</sup> +
x<sub>2</sub><sup>n</sup> =
y<sub>1</sub><sup>n</sup> +
y<sub>2</sub><sup>n</sup>
</body>
23
Table border attribute
<table border="1">
<tr>
<th>Username</th>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>jsmith</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>mlee</td>
<td>Mary</td>
<td>Lee</td>
</tr>
</table>
Turn off the border:
border="0"
24
Table
<table border="1">
Table Row
<tr>
<th>Username</th>
<th>First name</th> row 1
<th>Last name</th>
</tr>
<tr>
<td>jsmith</td>
<td>John</td> row 2
<td>Smith</td>
</tr>
<tr>
<td>mlee</td>
<td>Mary</td> row 3
<td>Lee</td>
</tr>
</table>
25
Table
<table border="1">
<tr>
<th>Username</th> Table Header
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>jsmith</td> Table Data
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>mlee</td>
<td>Mary</td>
<td>Lee</td>
</tr>
</table>
26
Table
<table border="1">
<tr>
<td>jsmith</td> Sometime we do not need
<td>John</td> table header
<td>Smith</td>
</tr>
<tr>
<td>mlee</td> Table Data
<td>Mary</td>
<td>Lee</td>
</tr>
</table>
27
Table
<table border="1" width="50%">
<caption>User information</caption>
<tr>
<th width="20%">Username</th>
<th width="40%">First name</th>
<th width="40%">Last name</th>
</tr>
<tr>
<td align="center">jsmith</td>
<td align="right">John</td>
<td align="right">Smith</td>
</tr>
<tr>
<td align="center">mlee</td>
<td align="right">Mary</td>
<td align="right">Lee</td>
</tr>
</table>
28
Table
<table border="1" width="50%">
<caption>User information</caption>
<tr>
<th width="20%">Username</th>
<th width="40%">First name</th>
<th width="40%">Last name</th>
Table caption
</tr>
<tr>
<td align="center">jsmith</td>
<td align="right">John</td>
<td align="right">Smith</td>
</tr>
<tr>
<td align="center">mlee</td>
<td align="right">Mary</td>
<td align="right">Lee</td>
</tr>
</table>
29
Table Table width
within the page
<table border="1" width="50%">
<caption>User information</caption>
<tr> Column width
<th width="20%">Username</th> within the table
<th width="40%">First name</th>
<th width="40%">Last name</th>
</tr>
<tr>
<td align="center">jsmith</td>
<td align="right">John</td>
<td align="right">Smith</td>
</tr>
<tr>
<td align="center">mlee</td>
<td align="right">Mary</td>
<td align="right">Lee</td>
</tr>
</table>
30
Table
<table border="1">
<caption>User information</caption>
<tr> Column width
<th width="150px">Username</th> using pixels
<th width="200px">First name</th>
<th width="200px">Last name</th>
</tr>
<tr>
<td align="center">jsmith</td>
<td align="right">John</td>
<td align="right">Smith</td>
</tr>
<tr>
<td align="center">mlee</td>
<td align="right">Mary</td>
<td align="right">Lee</td>
</tr>
</table>
31
Table
<table border="1" width="50%">
<caption>User information</caption>
<tr>
<th width="20%">Username</th>
<th width="40%">First name</th>
<th width="40%">Last name</th>
</tr> Horizontal
<tr> alignment
<td align="center">jsmith</td>
<td align="right">John</td>
<td align="right">Smith</td>
</tr>
<tr>
<td align="center">mlee</td>
<td align="right">Mary</td>
<td align="right">Lee</td>
</tr>
</table>
32
Table
<table width="50%" border="1">
<tr>
<td valign="middle">jsmith</td>
<td>
John Smith <br />
DOB: 23/01/2000 <br />
Course code: 875 Vertical
</td> alignment
</tr>
<tr>
<td valign="middle">mlee</td>
<td>
Mary Lee <br />
DOB: 15/04/2001 <br />
Course code: 741
</td>
</tr>
</table>
33
Table
<table width="50%" border="1">
<tr>
<td valign="top">jsmith</td>
<td>
John Smith <br />
DOB: 23/01/2000 <br />
Course code: 875 Vertical
</td> alignment
</tr>
<tr>
<td valign="top">mlee</td>
<td>
Mary Lee <br />
DOB: 15/04/2001 <br />
Course code: 741
</td>
</tr>
</table>
34
Table
<table width="50%" border="1">
<tr>
<td valign="bottom">jsmith</td>
<td>
John Smith <br />
DOB: 23/01/2000 <br />
Course code: 875 Vertical
</td> alignment
</tr>
<tr>
<td valign="bottom">mlee</td>
<td>
Mary Lee <br />
DOB: 15/04/2001 <br />
Course code: 741
</td>
</tr>
</table>
35
Table Column span
<table border="1" width="40%">
<tr>
<td colspan="2">STUDENT DETAILS</td>
</tr>
<tr>
<td width="30%">STUDENT NAME</td>
<td>John Lee</td>
</tr>
<tr>
<td>STUDENT NUMBER</td>
<td>1234567</td>
</tr>
<tr>
<td>UOW EMAIL</td>
<td>[email protected]</td>
</tr>
</table>
36
Table Row span
<table border="1" width="50%">
<tr>
<td></td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
</tr>
<tr>
<td>8:30-9:30</td>
<td rowspan="2">MATH 321 lecture</td>
<td>INFO 104 lecture</td>
<td>CS 222 lecture</td>
</tr>
<tr>
<td>9:30-10:30</td>
<td>CS 222 Lab</td>
<td rowspan="2">MATH 321 tutorial</td>
</tr>
<tr>
<td>10:30-11:30</td>
<td>CS 222 lecture</td>
<td>INFO 104 tutorial</td>
</tr>
</table> 37
Paragraph tag <p>
<p>This is a paragraph</p>
Extra spaces and lines will NOT
<p>Another be displayed in paragraph
paragraph</p>
<p>yet another
paragraph</p>
38
Line break <br />
<p>This is a paragraph</p>
<br /> tag defines a line break
<p>Another <br />
<br /> is an empty element
paragraph</p> (i.e. it is a tag with no content),
it combines the start and end
<p>yet another <br /> tags together
<br />
paragraph</p>
39
Horizontal line <hr />
<p>This is a paragraph</p>
similarly, we have the
<p>Another <br /> horizontal line tag <hr />
with no content
paragraph</p>
<hr />
<p>yet another <br />
<br />
paragraph</p>
40
Non-breaking space
<p>This is a
use for non-breaking space
paragraph</p>
<p>Another <br /> this is an example of character entities
paragraph</p>
<hr />
<p>yet another <br />
<br />
paragraph</p>
41
Character entity
● Some characters are reserved in HTML.
● Reserved characters in HTML must be replaced with character entities.
Character Entity Meaning
(non-breaking space) Non-breaking space
< < Is less than
> > Is greater than
& & Ampersand
“ " Double quote
‘ ' Single quote (apostrophe)
o ° Degree
© © Copyright
42
Character entity
<body>
A HTML document starts with
<html> and ends with
</html>
</body>
A HTML document starts with <html>
and ends with </html>
43
Block quotations <blockquote>
<p>normal paragraph</p>
<blockquote>
<p>a paragraph in blockquote</p>
<p>another paragraph in blockquote</p>
</blockquote>
see the difference?
44
Preformatted text <pre>
<pre>
pre element is shown in monospace
Mary
it preserves the character and line spacing
had a
little
lamb
</pre>
45
Computer code
<pre>
<code>
a = 0;
b = 3;
c = 2;
sum = a + b + c;
</code>
</pre>
what would happen if we use <code> … </code>
without <pre> ?
46
If you want to include special characters such as
Computer code < > & " '
within pre tags, they should be substituted by
character entities so that they are not subject to
<pre>
special interpretation by the browser.
<code>
#include <iostream>
void main( ) {
cout << "Hello World!" << endl;
}
</code>
</pre>
#include <iostream>
void main( ) {
cout << "Hello World!" << endl;
}
47
Image
<img src="uow-logo.png" height="300" width="200"
alt="logo of UOW" />
Attribute Description
src URL of an image, for example
src="uow-logo.png"
src="images/uow-logo.png"
src="http://www.mycom.au/staff.png"
alt alternate text for an image
height optional.
width Specifies height, width for image in pixels, or in percentage
48
Image alt
<img src="uow-logo.png" height="300" width="200"
alt="logo of UOW" />
● If a browser cannot find an image, it will display the alt text.
● Sometimes, to save bandwidth, user can disable image display, in this
case, the alt text will be display.
● A screen reader is a software program that can read what is displayed on
a screen which is very useful to people who are blind or visually impaired.
Screen readers can read the alt text.
49
Image src
The URL of an image can be
● an absolute URL points to another website
● or a relative URL points to an image file within a website
Absolute URL
src="http://www.mycom.au/staff.png"
Relative URL
src="uow-logo.png" : the image file is in the same directory as the current
html file
src="images/uow-logo.png" : the image file is in the subdirectory called
images located at the same directory as the current html file
src="images/logo/uow-logo.png"
src="/../f1/bird.png"
50
Link
<a href="http://www.uow.edu.au" target="_blank">Visit UOW</a>
<a href="contact.html">Contact us</a>
<a href="http://www.uow.edu.au" target="_blank">
<img src="uow-logo.png" alt="visit UOW"/>
</a>
51
Link
<a href="http://www.uow.edu.au" target="_blank">Visit UOW</a>
The href in this example is an absolute URL.
If user clicks on this link, http://www.uow.edu.au will be opened in a new tab
target description
_blank open the link in a new window or tab
_self open the link in the same frame (this is default)
52
Link
<a href="contact.html">Contact us</a>
The href in this example is a relative URL.
It is similar to the src attribute of the img tag:
href="contact.html"
href="assignment/a1.html"
href="../handout/note5.html"
53
Link
<a href="http://www.uow.edu.au" target="_blank">
<img src="uow-logo.png" alt="visit UOW"/>
</a>
Within the link tag <a href...> </a>, we can put any text or image.
In the above example, it displays an image as a link to the address
http://www.uow.edu.au
54
Link - target within document
Within the html document we can use the attribute id to mark a specific location
<a href="#Proofs">1 Proofs</a>
<a href="#See_also">2 See also</a>
<a href="#Notes">3 Notes</a>
<a href="#References">4 References</a>
<a href="#External_links">5 External links</a>
<h3 id="Proofs">Proofs</h3>
…
<h3 id="See_also">See also</h3>
…
<h3 id="Notes">Notes</h3>
…
<h3 id="References">References</h3>
…
<h3 id="External_links">External links</h3> 55
…
Link - target within document
Within the html document we can use the attribute id to mark a specific location
<a href="#Proofs">1 Proofs</a>
<a href="#See_also">2 See also</a>
<a href="#Notes">3 Notes</a>
<a href="#References">4 References</a>
<a href="#External_links">5 External links</a>
<h3 id="Proofs">Proofs</h3>
…
The id value must be unique and must contain at least one character.
The id value must not contain any space characters.
56
Link - target within document
We can create a link to a specific location within a html page
For example:
<a href="https://en.wikipedia.org/wiki/Euler%27s_theorem#Proofs">
Proof of the Euler theorem</a>
57
index.html
● index.html is a default page for a directory
● For security reason, it is better to have index.html for every directory
● It stops people from knowing the content and structure of your website
Example: If the directory abc has an index.html then when we go to
http://the-web-address/abc
it automatically displays the page http://the-web-address/abc/index.html
58
Comments
<body>
<!-- this is
a long comment
it will not be displayed on the web page
-->
</body>
59
XHTML
● XHTML stands for EXtensible HyperText Markup Language
● XHTML is stricter than HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
DOCTYPE and xmlns are mandatory
</body>
</html>
60
XHTML
● XHTML is stricter than HTML
elements must be properly nested:
<b><i>bold and italic - not nested correctly</b></i>
It should be like this:
<b><i>bold and italic - not nested correctly</i></b>
61
XHTML
● XHTML is stricter than HTML
elements must always be closed:
<p>paragraph not closed
break not closed <br>
horizontal line not closed <hr>
image not closed <img src="logo.png" alt="UOW logo">
It should be like this:
<p>paragraph not closed</p>
break not closed <br />
horizontal line not closed <hr />
image not closed <img src="logo.png" alt="UOW logo" />
62
XHTML
● XHTML is stricter than HTML
elements must be in lower case:
<HEAD>
<TITLE>Web Technologies</TITLE>
<HEAD>
It should be like this:
<head>
<title>Web Technologies</title>
<head>
63
XHTML
● XHTML is stricter than HTML
attribute names must be in lower case:
<img SRC="logo.png" ALT="UOW logo" />
It should be like this:
<img src="logo.png" alt="UOW logo" />
64
XHTML
● XHTML is stricter than HTML
attribute values must be quoted:
<img src=logo.png alt=UOW logo />
It should be like this:
<img src="logo.png" alt="UOW logo" />
65
XHTML
● XHTML is stricter than HTML
attribute minimization is not allowed:
<input type="checkbox" name="subscribe" value="eletter"
checked />
It should be like this:
<input type="checkbox" name="subscribe" value="eletter"
checked="checked" />
66
HTML5
● version 5 of the HTML standard
● introduces new tags
<header> <footer> <article> <section>
<svg> <canvas> <audio> <video> …
● introduces new APIs
○ Drag and Drop
○ Local Storage
○ Geolocation
○ ….
67
References
● http://www.w3schools.com/html
● http://developer.mozilla.org/en-US/docs/Web/HTML
68
