HTML: a step further
Download
Report
Transcript HTML: a step further
HTML:
a step further
Chris Limb
So where were we?
<html>
<head>
<title> My Web Page </title>
</head>
<body background="texture1.jpg">
<h1> My Web Page </h1>
<img src="image1.jpg" align="left" alt=“cat">
<p> Welcome to my Web Page which contains all
sorts of useless information about me.</p>
<br clear="left">
<h2> My Top 3 Cats</h2>
<ol>
<li><b> Black Shorthair </b> </li>
<li><i> Silver Tabby</i> </li>
<li> Scottish Wildcat </li>
</ol>
<h2> Useful Links </h2>
<ul>
<li> <a href="http://www.catoftheday.com"> Cats!</a> </li>
<li> <a href="details.html"> My Details </a> </li>
</ul>
</body>
</html>
Which looks like...
<html>
<head>
<title> My Web Page </title>
</head>
<body background="texture1.jpg">
<h1> My Web Page </h1>
<img src="image1.jpg" align="left" alt="me">
<p> Welcome to my Web Page which contains all
sorts of useless information about me.</p>
<br clear="left">
<h2> My Top 3 Cats</h2>
<ol>
<li><b> Black Shorthair </b> </li>
<li><i> Silver Tabby</i> </li>
<li> Scottish Wildcat </li>
</ol>
<h2> Useful Links </h2>
<ul>
<li> <a href="http://www.catoftheday.com"> Cats!</a> </li>
<li> <a href="details.html"> My Details </a> </li>
</ul>
</body>
</html>
Tools you will be using...
Internet Explorer: To view your files...
PFE
(or Notepad)
: To edit your files...
Finding PFE
(or Notepad)
Start >Programs > Utilities >Text Editor (PFE)
Start >Programs > Accessories >Notepad
Practical 1
Using PFE, open the file template.html
from your disk, and save immediately as
index.html.
Create a simple web page in index.html
containing a couple of headings, paragraphs,
lists, images and a link to the University of
Sussex home page. You will find image files on
the floppy disk entitled image05.jpg,
image06.jpg etc
Save the file and view it in Internet Explorer
more formatting
Lines and Divisions
<p> This is a paragraph about nothing.</p>
<hr>
<div align="center" >
<p> A centred paragraph about nothing.</p>
</div>
<div align="right" >
<p> A right aligned paragraph about nothing. </p>
</div>
Web Page About Nothing - Netscape
This is a paragraph about nothing.
A centred paragraph about nothing.
A right aligned paragraph about nothing.
Colour (or "Color")
<body bgcolor="#ff0000">
<body text="#0000ff">
<body bgcolor="#ff0000" text="#0000ff">
Web Page About Nothing - Microsoft Internet Explorer
This is some text
in an HTML document
Colour codes
#0000ff
RED
GREEN
BLUE
Colour codes
#ff0000
RED
GREEN
BLUE
Colour codes
#00ff00
RED
GREEN
BLUE
Colour codes
#ffff00
RED
GREEN
BLUE
Colour codes
#cccccc
RED
GREEN
BLUE
Colour codes
#000000
#00ffff
#ff00ff
#ffd700
black
cyan
magenta
#ffffff
white
#c0ffee
not coffee at all
gold
Counting in Hex
Now imagine you had sixteen fingers...
3
2
4 5
6
7
a
b
c
d
e
f
8 9
1
10
Counting in Hex
Still imagining you have sixteen fingers,
count to 100...
0 1 2 3 4 5 6 7 8 9 a b c d e f
10 11 12 ...
... f9 fa fb fc fd fe ff
256 values represented
using only 2 characters
Practical 2
Open index.html in PFE and add some
formatting using colour, horizontal lines
and divisions
tables
How do they do that?
Introducing the table
Introducing the table
the table contains table rows
the table rows contain table cells
Sounds familiar?
<table>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<td> </td>
HTML table
<table border="1">
<tr>
<td>First Cell</td> <td>Second Cell</td>
</tr>
<tr>
<td>Third Cell</td> <td>Fourth Cell</td>
</tr>
</table>
Table Attributes
<table> <tr> <td>
border="n"
cellpadding="n"
cellspacing="n"
valign="top|middle|bottom"
align="left|center|right"
bgcolor="#nnnnnn"
width="n%"
or
="n"
pixels
Table Attributes
cellpadding & cellspacing
padded cell
space between the cells
Practical 3
Open template.html in PFE and save it as
table.html. Write the code to include a table
that it looks something like this:
My
hello
one
First
hello
two
Table
hello
three
intermission
layout with tables
Use of tables
Originally designed for tabular data:
1998
1999
2000
2001
1.358
9.518
7.314
3.141
10.8%
98.09%
45.89%
16.64%
12.57
9.70
15.94
18.88
Use of tables
Now more often used for layout:
Use of tables
Have a closer look:
More complex tables
colspan & rowspan
Using colspan
<table border="1">
<tr>
<td colspan="2">First Cell</td>
<tr> <td>Cell 2</td>
</table>
</tr>
<td>Cell 3</td> </tr>
Using rowspan
<table border="1">
<tr>
<tr>
</table>
<td rowspan="2">
First Cell</td>
<td>Cell 2</td>
</tr>
<td>Cell 3</td>
</tr>
Nesting Tables
This is just some general text. The
Computing Service is responsible for
providing academic computing services to
all departments and for developing and
managing a campus-wide LAN and its
connections to the wide area network for
academic, library and adminstrative use in
the University.
This is just some general text. The
Computing Service is responsible for
providing academic computing services to
all departments and for developing and
managing a campus-wide LAN and its
connections to the wide area network for
academic, library and adminstrative use in
the University.
Practical 4
Open template.html in PFE and save it as
table2.html. Write the code to include a table
that it looks something like this:
My
Second
Table
hello
one
hello
two
Experiment with some other page layouts e.g. using tables of fixed width.
introducing style
Why can't we change the font? The colour?
<p><font face="Arial,Helvetica,sans-serif" color="#ff0000">
My Web Page </font> uses different fonts and colours </p>
Seems easy enough...
<p>Twas <a href="brillig.html">
<font face="Arial,Helvetica, sans-serif" size="+1" color="#FF0000">brillig</font></a>,
and the slithy toves<br>Did gyre and <a href="gimble.html">
<font face="Arial,Helvetica,sans-serif" size="+1" color="#FF0000">gimble</font></a>
in the wabe:<br>All <a href="mimsy.html">
<font face="Arial,Helvetica,sans-serif" size="+1" color="#FF0000">mimsy</font></a>
were the <a href="borogoves.html">
<font face="Arial,Helvetica,sans-serif" size="+1" color="#FF0000">borogoves</font></a>,
<br>And the mome raths <a href="outgrabe.html">
<font face="Arial,Helvetica,sans-serif" size="+1" color="#FF0000">outgrabe</font></a>.</p>
Put some style in your head
<head>
<title>Metaphorazine</title>
<style>
a {color : Red;
font-family : Arial, Helvetica, sans-serif;
font-size : large;}
</style>
</head>
<body>
<p>Johnny takes <a href="meta.html">Metaphorazine</a>. Every
clockwork day.<br>
Says it <a href="burns.html">burns</a> his house down, with a
haircut made of wings.<br>
You could say he eats a <a href="problem.html">problem.</a><br>
You could say he stokes his thrill.<br>
Every <a href="clingfilm.html">clingfilm</a> evening, climb inside
a little pill.<br>
Intoxicate the feelings. Play those <a href="skullpiano.html">
skull-piano</a> blues.<br>
<a href="johnny.html">Johnny</a> takes Metaphorazine. He's a
dog.</p>
Put some style in your head
<head>
<title>Metaphorazine</title>
<style>
a {color : Red;
font-family : Arial, Helvetica, sans-serif;
font-size : large;}
</style>
</head>
<body>
<p>Johnny takes <a href="meta.html">Metaphorazine</a>. Every
clockwork day.<br>
Says it <a href="burns.html">burns</a> his house down, with a
haircut made of wings.<br>
You could say he eats a <a href="problem.html">problem.</a><br>
You could say he stokes his thrill.<br>
Every <a href="clingfilm.html">clingfilm</a> evening, climb inside
a little pill.<br>
Intoxicate the feelings. Play those <a href="skullpiano.html">
skull-piano</a> blues.<br>
<a href="johnny.html">Johnny</a> takes Metaphorazine. He's a
dog.</p>
Put some style in your head
<style>
a {color : Red;
font-family : Arial, Helvetica, sans-serif;
font-size : large;}
h1 {color : Blue;
font-family : Verdana, Arial, Helvetica, sans-serif;}
h2 {color : Green;
font-family : Verdana, Arial, Helvetica, sans-serif;}
p {color : Black;
font-family : Arial, Helvetica, sans-serif;}
</style>
Practical 5
Try to add formatting to some of your pages
by adding <style> tags to the head.
There's a reference of style sheet commands in
your handouts.
a touch of class
More stylish shortcuts
<style>
a {color : Red;
font-family : Arial, Helvetica, sans-serif;
font-size : large;}
h1, h2, h3, h4 {color : Blue;
font-family : Verdana, Arial, Helvetica, sans-serif;}
p, ul, ol, li {color : Black;
font-family : Arial, Helvetica, sans-serif;}
</style>
Classes
<style>
p.normal {color : Black;
font-family : Arial, Helvetica, sans-serif;}
p.strange {color : Red;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : x-large;}
</style>
...
<p class="normal">We are normal...</p>
<p class="strange">...and we want our freedom!</p>
Classes
Pseudo-classes
<style>
a:link {
color : Blue;
font-family : Arial, Helvetica, sans-serif;}
a:visited {
color : Purple;
font-family : Arial, Helvetica, sans-serif;}
a:hover {
color : Red;
font-family : Arial, Helvetica, sans-serif;
text-decoration : none;}
</style>
...
<a href="metaphorazine.html">Metaphorazine</a>
Pseudo-classes
Practical 6
Try extending the styles in your documents
using classes and pseudo classes.
There's a reference of style sheet commands in
your handouts.
What Next?
It's the job of the Sussex Webteam to regulate the
publication of online materials at Sussex. If you're
considering developing web pages at the University,
please refer to the documentation at:
http://www.sussex.ac.uk/central/usissussexdev.shtml
If in doubt, contact the team at:
[email protected]
HTML:
a step further
Telephone: ext 3129
Email: [email protected]
Web Page: http://www.sussex.ac.uk/Users/chrisli/
USCS Web Page: http://www.sussex.ac.uk/USCS/