HTML: a step further
description
Transcript of HTML: a step further
![Page 1: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/1.jpg)
HTML:a step further
Chris Limb
![Page 2: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/2.jpg)
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>
![Page 3: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/3.jpg)
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>
![Page 4: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/4.jpg)
Tools you will be using...
Internet Explorer: To view your files...
PFE (or Notepad) : To edit your files...
![Page 5: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/5.jpg)
Finding PFE (or Notepad)
Start >Programs > Utilities >Text Editor (PFE)
Start >Programs > Accessories >Notepad
![Page 6: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/6.jpg)
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
![Page 7: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/7.jpg)
more formatting
![Page 8: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/8.jpg)
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.
![Page 9: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/9.jpg)
<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")
![Page 10: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/10.jpg)
RED GREEN BLUE
#0000ff
Colour codes
![Page 11: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/11.jpg)
RED GREEN BLUE
#ff0000
Colour codes
![Page 12: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/12.jpg)
RED GREEN BLUE
#00ff00
Colour codes
![Page 13: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/13.jpg)
RED GREEN BLUE
#ffff00
Colour codes
![Page 14: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/14.jpg)
RED GREEN BLUE
#cccccc
Colour codes
![Page 15: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/15.jpg)
#000000
#ffffff
#00ffff#ff00ff#ffd700
black
whitewhite
cyancyan
magenta
goldgold
Colour codes
#c0ffee not coffee at allnot coffee at all
![Page 16: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/16.jpg)
Counting in Hex
Now imagine you had sixteen fingers...
1
2
3 4 56
7
8 9
ab
c d ef
10
![Page 17: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/17.jpg)
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...
![Page 18: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/18.jpg)
Practical 2
Open index.html in PFE and add some formatting using colour, horizontal lines and divisions
![Page 19: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/19.jpg)
tables
![Page 20: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/20.jpg)
How do they do that?
![Page 21: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/21.jpg)
Introducing the table
![Page 22: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/22.jpg)
Introducing the table
the table contains table rows
the table rows contain table cells
![Page 23: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/23.jpg)
Sounds familiar?
<td> </td> <td> </td>
<td> </td> <td> </td>
<table>
</table>
</tr>
</tr>
<tr>
<tr>
![Page 24: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/24.jpg)
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>
![Page 25: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/25.jpg)
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"
![Page 26: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/26.jpg)
Table Attributes
cellpaddingcellpadding & cellspacingcellspacing
spacespace between the cells between the cells
padded cell
![Page 27: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/27.jpg)
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
![Page 28: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/28.jpg)
intermission
![Page 29: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/29.jpg)
layout with tables
![Page 30: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/30.jpg)
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
![Page 31: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/31.jpg)
Use of tables
Now more often used for layout:
![Page 32: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/32.jpg)
Use of tables
Have a closer look:
![Page 33: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/33.jpg)
More complex tables
colspancolspan & rowspanrowspan
![Page 34: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/34.jpg)
Using colspan
<table border="1">
<tr> <td colspan="2">First Cell</td>
<td>Cell 2</td>
</table>
</tr>
<td>Cell 3</td><tr> </tr>
![Page 35: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/35.jpg)
Using rowspan
<table border="1">
<tr> <td rowspan="2">First Cell</td>
<td>Cell 2</td>
</table>
</tr>
<td>Cell 3</td><tr> </tr>
![Page 36: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/36.jpg)
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.
![Page 37: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/37.jpg)
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.
![Page 38: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/38.jpg)
introducing style
![Page 39: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/39.jpg)
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>
![Page 40: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/40.jpg)
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>
![Page 41: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/41.jpg)
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>
![Page 42: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/42.jpg)
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>
![Page 43: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/43.jpg)
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>
![Page 44: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/44.jpg)
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
![Page 45: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/45.jpg)
a touch of class
![Page 46: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/46.jpg)
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>
![Page 47: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/47.jpg)
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>
![Page 48: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/48.jpg)
Classes
![Page 49: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/49.jpg)
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>
![Page 50: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/50.jpg)
Pseudo-classes
![Page 51: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/51.jpg)
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.
![Page 52: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/52.jpg)
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]
![Page 53: HTML: a step further](https://reader036.fdocuments.us/reader036/viewer/2022062321/56813e75550346895da88d79/html5/thumbnails/53.jpg)
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