Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Learning outcomes
Essential Reading
Additional reading
url format
<scheme>://<server-domain-name>/<pathmane>
http://doc.gold.ac.uk/~username/index.html
Apache
Other possibilities
Stateless connection
Cookies
Introduction to HTML
The markup tags tell the Web browser how to display the page
Internet - Services
Markup languages
Markup languages
Markup languages
A basic document
Block elements
Paragraphs
Paragraphs: <p>...</p>
force a break between the
enclosed text and the text
surrounding it
the tagged region of text may be
subject to special formatting
<p align="center">Here is
another paragraph</p>
align is an attribute of the
paragraph tag
center is the value of the align
attribute
<p>here is a piece of
text that has been
placed inside a
paragraph</p>
<p align="center">Here
is another
paragraph</p>
Headings
Element relationships
<strong></strong> strong,
usually with bold
<body>
A <em>fascinating</em>
subject that I
<strong>must</strong>
understand
</body>
<boldface></boldface>
<big></big> bigger font than surrounding text
<small></small> smaller font than surrounding text
<i></i> italics
<s></s> strikethrough
<sub></sub> subscripts
<sup></sup> superscripts
<span></span> delimits text for stylesheet control
<div></div> delimits blocks of text for stylesheet control
Unordered lists
Ordered lists
Definition lists
<dl>
<dt>MIME</dt>
<dd>
Multipurpose...
</dd>
<dt>FTP</dt>
<dd>
File transfer...
</dd>
<dt>TCP</dt>
<dd>
Transmission...
</dd>
</dl>
Nested lists
<body>
<ol>
<li>apples</li>
<ul>
<li>red</li>
<li>green</li>
</ul>
<li>oranges</li>
<li>pears</li>
<li>bananas</li>
</ol>
</body>
Comments
<body>
<!-this is
a comment
-->
</body>
Horizontal lines
<body>
<h1>Chapter 1</h1>
<hr align="center" size="3" width="50%" noshade>
<h2>Introduction</h2>
</body>
Special characters
<body>
A <em> <
fascinating > </em>
subject that I
<strong>m u
s t</strong>
understand
</body>
Links
</body>
Relative addressing
The
previous example gave the full path name, known as the absolute address
<a href="research.html">Research</a>
<a href=./pub.html">Publications</a>
<a href="../../index.html">Computer Science home</a>
Images
some
Image attributes
The align attribute also controls the horizontal location of the image,
relative to the line of text
align="left"
image aligned with left margin
align="right" image aligned with right margin
Colour
<body bgcolor="#994422">
#ff0000 (red),
#00ff00 (green)
#0000ff (blue)
#ffff00 (yellow)
...
#3395ab (a pastel blue)
Colour
<body text="#994422">
In the body element, the colour of link text can be controlled with the
following attributes:
link
for an un-visited link
vlink
for a visited link
alink
for a link that is currently selected by the mouse
Example
<body text="#000000" link="#0000ff">
Colour
To set the colour of an individual piece of text use the font element
(or preferably stylesheets see later)
<body bgcolor="#3395ab">
Text in quotes <font color="#ff0000">"such as
this"</font> has a different colour
</body>
Colour names
Background patterns
Rather than a uniform color
You can give the background of web
page a pattern as follow:
<body background="tileimage.gif">
Forms
Example applications
Input types
text
checkbox
radio
select
textarea
password
button
submit
reset
hidden
file
image
(buttons)
(options)
<body>
<form method="POST" action="comments.php">
<h2>Tell us what you think</h2>
<!-- etc -->
</form>
</body>
Tables
Tables
provide a means of
organising the layout of data
Tables
<table>
element
main
<tr>
table row
<th>
table header
<td>
table data
<table border="1">
<tr>
<th>Name</th>
<td>A B Morgan</td>
<td>D P Jones</td>
</tr>
<tr>
<th>Course</th>
<td>Fishing</td>
<td>Sailing</td>
</tr>
<tr>
<th>Year</th>
<td>8</td>
<td>5</td>
</tr>
<tr>
</table>
Rows and
Columns
<table border="1">
<tr>
<th colspan="2">Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B</td>
<td>Morgan</td>
<td rowspan="2">Fishing</td>
<td>5</td>
</tr>
<tr>
<td>D J</td>
<td>Jones</td>
<td>8</td>
</tr>
<tr>
</table>
The align
attribute
determines the
position of the
text within a cell
The width
attribute
determines the
width of the row
relative to the
table
Table attributes
Table attributes
Furthermore
The <caption> element puts a title above the table
Table attributes
<table border="3" align="center" cellspacing="6"
cellpadding="6" bgcolor="cyan">
<caption>
<h2>Course Data</h2>
</caption>
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
</tr>
<! etc -->
Framesets
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
</html>
Frame attributes
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
Frame attributes
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
navigation.html
<html><head><title>Navigation Bar</title></head>
<body><center>
<a href="course.html" target="mainF">HTML Course</a><br><br>
<a href="paragraph.html" target="mainF">Paragraphs</a><br>
<a href="headings.html" target="mainF">Headings</a><br>
<a href="ulists.html" target="mainF">Unordered lists</a><br>
<a href="olists.html" target="mainF">Ordered lists</a><br>
<a href="nlists.html" target="mainF">Nested lists</a><br>
<a href="intro.html" target="mainF">Home</a><br>
</center></body>
intro.html
A simple document which is initially placed in the
"mainF" frame
This is replaced when a user clicks on a link in the
"navF" frame
<html>
<head><title>Internet Computing</title></head>
<body>
<h2>Welcome to the HTML Course</h2>
<p>
<h4>Please select the subject of...</h4>
</p>
</body>
</html>
Nested framesets
<html>
<head><title>Frames 2</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frameset rows="30%,70%">
<frame name="upperF" src="intro.html">
<frame name="lowerF" src="course.html">
</frameset>
</frameset>
</html>
Noframes
Some browsers cannot process frames. Alternative
content should be provided using the noframes element
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
<noframes>
<body>
Something here for browsers not supporting frames
</body>
</noframes>
</html>
Stylesheets
Styles
Inline styles
Inline styles
<body>
<h1 style="color:blue; border:ridge">
Inline styles</h1>
<p style="margin-left:10%; background:#ffffcc">
some text . . . some text
</p>
<body>
Global styles
<head>
<title>Styles</title>
<style>
<!-h1 {
color: red;
border: thin groove;
text-align:center;
}
-->
</style>
</head>
<body>
<h1>Simple styles</h1>
</body>
Example
<head>
<style>
<!-h1 {
color: red;
border: thin groove;
text-align:center;
}
p {
margin-left: 10%;
border: ridge;
background: #ee8822;
}
-->
</style>
</head>
<body>
<h1>Simple styles</h1>
<p>some text . . . </p>
</body>
Stylesheets
Multiple stylesheets
Cascading stylesheets
Cascading stylesheets
Style rules
selector {
property:
property:
property:
property:
}
value;
value;
value;
value;
Style rules
Some properties can be given multiple values
The browser first looks for the "Book Antiqua" font
If this is not on the system, it looks for the Times font
Last resort: the browser uses the generic serif font
body {
background-color: lightgreen;
}
h1 {
color: lightgreen;
background-color: blue;
font-family: "Book Antiqua", Times, serif;
border: thick groove #9baab2;
}
font-style: normal|italic|oblique
font-weight: normal|bold|bolder|lighter
font-size: small|medium|large|smaller|larger
color: <value>
background-color: <value>|transparent
background-image: URL|none
border-style: none|dotted|dashed|solid|
double|groove {1,4}
width: length|percentage|auto
height: length|auto
location: absolute|relative|fixed
absolute: relative to upper left corner of window
relative: relative to the last item
fixed:
does not move when the page is
scrolled
Classes
Simple classes
</head>
<style>
<!-h1.fred {
color: #eeebd2;
background-color: #d8a29b;
border: thin groove #9baab2;
}
-->
</style>
</head>
<body>
<h1 class="fred">A Simple Heading</h1>
<p>some text . . . some text</p>
</body>
Anonymous classes
</head>
<style>
<!-.fred {
color: #eeebd2;
background-color: #d8a29b;
border: thin groove #9baab2;
}
-->
</style>
</head>
<body>
<h1 class="fred">A Simple Heading</h1>
<p class="fred">some text . . . some text</p>
</body>
white
CSS Classescont.
TD {font-face : sans-serif; font-size : 12pt}
.even {background-color : #FFFFFF}
.odd {background-color : #CCCCCC}
grey
IDs
<head>
<style>
<!-#list1 {
color: blue;
background: cyan;
text-decoration: underline;
border: thin groove red;
}
-->
</style>
</head>
<body>
<ul id="list1">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>
Divisions
<head>
<style>
<!-.myclass {
color: blue;
background: cyan;
text-decoration: underline;
border: thin groove red;
}
-->
</style>
</head>
<body>
<div class="myclass">
<h2>A Simple Heading</h2>
<p>some text . . . </p>
</div>
</body>
Spans
<head>
<style>
<!-.myclass {
color: red;
background: cyan;
text-decoration: none;
}
-->
</style>
</head>
<body>
<span class="myclass">
<h2>A Simple Heading</h2>
<p>some text . . . </p>
</span>
</body>
spans
are similar
to divisions
Layers
Layers
<body>
<div style="z-index:2; left:100px; top:50px; position:absolute;
background-color:red; font-size:30">
<p>THIS STUFF IS ON TOP</p>
</div>
<div style="z-index:1; left:10px; top:10px; position:absolute;
background-color:yellow; font-size:56">
<p>BACKGROUND STUFF</p></div>
</body>
Summary
By now you should be able to use:
Tables
Frames
Stylesheet CSS
Inline
style
Embedded style
External style
Next
Look at the disadvantages of html
XML
Well
XHTML vs HTML
DHTML
Useful sites
http://www.w3schools.com/
http://www.w3schools.com/html
http://www.w3schools.com/css