Embed Size (px)
DESCRIPTION
HTML: a step further. Chris Limb. So where were we?. . . . My Web Page. . . . My Web Page. . .
Citation preview
HTML:a step further
Chris Limb
So where were we?<html>
</html>
<head>
</body>
</head><body background="texture1.jpg">
<title> </title>My Web Page
<h1> </h1>My Web Page<img src="image1.jpg" align="left" alt=“cat"><p>
</p>Welcome to my Web Page which contains all sorts of useless information about me.
<br clear="left">
<ol><h2> </h2>My Top 3 Cats
</ol>
<li> </li>Black Shorthair<li> </li>Silver Tabby<li> </li>Scottish Wildcat
<ul><h2> </h2>Useful Links
</ul>
<li> </li>Cats!<li> My Details
<a href="http://www.catoftheday.com"> </a><a href="details.html"> </li></a>
<b> </b>
<i> </i>
Which looks like...<html>
</html>
<head>
</body>
</head><body background="texture1.jpg">
<title> </title>My Web Page
<h1> </h1>My Web Page<img src="image1.jpg" align="left" alt="me"><p>
</p>Welcome to my Web Page which contains all sorts of useless information about me.
<br clear="left">
<ol><h2> </h2>My Top 3 Cats
</ol>
<li> </li>Black Shorthair<li> </li>Silver Tabby<li> </li>Scottish Wildcat
<ul><h2> </h2>Useful Links
</ul>
<li> </li>Cats!<li> My Details
<a href="http://www.catoftheday.com"> </a><a href="details.html"> </li></a>
<b> </b>
<i> </i>
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> </p>This is a paragraph about nothing.
<hr>
align=<div "center">
<p> </p>A centred paragraph about nothing.
</div>
align=<div "right">
<p> </p>A right aligned paragraph about nothing.
</div>
Web Page About Nothing - Netscape
This is a paragraph about nothing.
A centred paragraph about nothing.
A right aligned paragraph about nothing.
<body bgcolor= >"#ff0000"
<body text= >"#0000ff"
<body bgcolor= >"#ff0000" text="#0000ff"
This is some text
in an HTML document
Web Page About Nothing - Microsoft Internet Explorer
Colour (or "Color")
RED GREEN BLUE
#0000ff
Colour codes
RED GREEN BLUE
#ff0000
Colour codes
RED GREEN BLUE
#00ff00
Colour codes
RED GREEN BLUE
#ffff00
Colour codes
RED GREEN BLUE
#cccccc
Colour codes
#000000
#ffffff
#00ffff#ff00ff#ffd700
black
whitewhite
cyancyan
magenta
goldgold
Colour codes
#c0ffee not coffee at allnot coffee at all
Counting in Hex
Now imagine you had sixteen fingers...
1
2
3 4 56
7
8 9
ab
c d ef
10
1 3 4 65 7 98 a b dc e f2012 ...
f9 fa fb fdfc fe ff1110
...
256 values represented using only 2 characters
Counting in Hex
Still imagining you have sixteen fingers,count to 100...
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?
<td> </td> <td> </td>
<td> </td> <td> </td>
<table>
</table>
</tr>
</tr>
<tr>
<tr>
HTML table
<table border="1">
</table>
</tr>
<tr><td>First Cell</td> <td>Second Cell</td>
</tr>
<tr><td>Third Cell</td> <td>Fourth Cell</td>
Table Attributes
<table> <tr> <td>
border="n"
cellpadding="n"
cellspacing="n"
width="n%" or ="n" pixels
valign="top|middle|bottom"
align="left|center|right"
bgcolor="#nnnnnn"
Table Attributes
cellpaddingcellpadding & cellspacingcellspacing
spacespace between the cells between the cells
padded cell
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 First Table
hello hello hello
one two three
intermission
layout with tables
Use of tables
Originally designed for tabular data:
1998 1999 2000 20011.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
colspancolspan & rowspanrowspan
Using colspan
<table border="1">
<tr> <td colspan="2">First Cell</td>
<td>Cell 2</td>
</table>
</tr>
<td>Cell 3</td><tr> </tr>
Using rowspan
<table border="1">
<tr> <td rowspan="2">First Cell</td>
<td>Cell 2</td>
</table>
</tr>
<td>Cell 3</td><tr> </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 hello
one 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?
<font face="Arial,Helvetica,sans-serif" color="#ff0000">
</p>My Web Page
<p>
uses different fonts and colours</font>
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
<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>
<head>
</head>
<title>Metaphorazine</title><style>a {color : Red; font-family : Arial, Helvetica, sans-serif; font-size : large;}</style>
<body>
Put some style in your head
<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>
<head>
</head>
<title>Metaphorazine</title><style>a {color : Red; font-family : Arial, Helvetica, sans-serif; font-size : large;}</style>
<body>
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>
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.
Practical 5
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]
Telephone: ext 3129Email: [email protected] Page: http://www.sussex.ac.uk/Users/chrisli/USCS Web Page: http://www.sussex.ac.uk/USCS/
HTML:a step further
