1 / 53

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 " >. My Web Page. </h1>. <h1>. <img src= " image1.jpg" align="left" alt=“cat">. <p>.

keelty
Download Presentation

HTML: a step further

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML:a step further Chris Limb

  2. So where were we? <html> <head> <title> My Web Page </title> </head> <body background="texture1.jpg"> My Web Page </h1> <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"> My Top 3 Cats </h2> <h2> <ol> Black Shorthair </li> </b> <li> <b> </i> Silver Tabby </li> <li> <i> </li> <li> Scottish Wildcat </ol> Useful Links </h2> <h2> <ul> </a> <li> <a href="http://www.catoftheday.com"> Cats! </li> <a href="details.html"> My Details </a> </li> <li> </ul> </body> </html>

  3. <html> <head> <title> My Web Page </title> </head> <body background="texture1.jpg"> My Web Page </h1> <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"> My Top 3 Cats </h2> <h2> <ol> Black Shorthair </li> </b> <li> <b> </i> Silver Tabby </li> <li> <i> </li> <li> Scottish Wildcat </ol> Useful Links </h2> <h2> <ul> </a> <li> <a href="http://www.catoftheday.com"> Cats! </li> <a href="details.html"> My Details </a> </li> <li> </ul> </body> </html> Which looks like...

  4. Tools you will be using... • Internet Explorer: To view your files... • PFE (or Notepad): To edit your files...

  5. Finding PFE (or Notepad) • ÿStart >Programs > Utilities >Text Editor (PFE) • ÿStart >Programs > Accessories >Notepad

  6. 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

  7. more formatting

  8. Web Page About Nothing - Netscape This is a paragraph about nothing. A centred paragraph about nothing. A right aligned paragraph about nothing. Lines and Divisions <p> This is a paragraph about nothing. </p> <hr> align= > <div "center" <p> A centred paragraph about nothing. </p> </div> align= > <div "right" <p> A right aligned paragraph about nothing. </p> </div>

  9. Web Page About Nothing - Microsoft Internet Explorer This is some text in an HTML document Colour (or "Color") <body bgcolor= "#ff0000" > <body text= "#0000ff" > <body bgcolor= "#ff0000" text= "#0000ff" >

  10. Colour codes #0000ff RED GREEN BLUE

  11. Colour codes #ff0000 RED GREEN BLUE

  12. Colour codes #00ff00 RED GREEN BLUE

  13. Colour codes #ffff00 RED GREEN BLUE

  14. Colour codes #cccccc RED GREEN BLUE

  15. Colour codes #000000 black cyan #00ffff magenta #ff00ff #ffd700 gold white #ffffff not coffee at all #c0ffee

  16. Counting in Hex Now imagine you had sixteen fingers... 4 d 3 5 e c 6 b 2 f a 7 8 9 10 1

  17. Counting in Hex Still imagining you have sixteen fingers, count to 100... 3 4 5 6 7 8 9 a b c d e f 0 1 2 12 ... 10 11 ... f9 fa fb fc fd fe ff 256 values represented using only 2 characters

  18. Practical 2 Open index.html in PFE and add some formatting using colour, horizontal lines and divisions

  19. tables

  20. How do they do that?

  21. Introducing the table

  22. Introducing the table the table contains table rows the table rows contain table cells

  23. Sounds familiar? <table> <td> </td> <tr> <td> </td> </tr> <td> </td> <tr> <td> </td> </tr> </table>

  24. 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>

  25. Table Attributes

  26. Table Attributes cellpadding&cellspacing space between the cells padded cell

  27. 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:

  28. intermission

  29. layout with tables

  30. Use of tables Originally designed for tabular data:

  31. Use of tables Now more often used for layout:

  32. Use of tables Have a closer look:

  33. More complex tables colspan&rowspan

  34. Using colspan <table border="1"> <tr> <td colspan="2">First Cell</td> </tr> <td>Cell 3</td> <td>Cell 2</td> <tr> </tr> </table>

  35. Using rowspan <table border="1"> <td rowspan="2"> First Cell</td> <tr> </tr> <td>Cell 2</td> <tr> </tr> <td>Cell 3</td> </table>

  36. Nesting Tables

  37. 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: Experiment with some other page layouts - e.g. using tables of fixed width.

  38. introducing style

  39. 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>

  40. 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>

  41. 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>

  42. 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>

  43. 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>

  44. 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.

  45. a touch of class

  46. 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>

  47. 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>

  48. Classes

  49. 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>

  50. Pseudo-classes

More Related