1 / 14

Advanced Elements of HTML: Stylesheets and CSS

Learn about advanced elements of XHTML, including image maps, tables, forms, frames, and stylesheets in detail. Explore using color values in XHTML and stylesheets. This session also includes practical work on projects.

perryj
Download Presentation

Advanced Elements of HTML: Stylesheets and CSS

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. LIS1510Library and Archives Automation IssuesFurther features of HTML – Stylesheets and CSS Andy Dawson School of Library, Archive & Information Studies, UCL(University of Malta 2008) Andy Dawson

  2. What we will be covering today • A very quick look at most of the advanced elements of the XHTML workbook: • Image maps • Tables • Forms • Frames • Stylesheets in a little more detail • Using colour values in XHTML and stylesheets • More practical work on your projects!

  3. Image maps • A method for making areas of images “clickable” • Client-side processed • Overlays an invisible “grid” on your image – the image map • Map definition and image are quite separate • Always remember to provide a textual alternative!

  4. Tables • a useful facility • for tables of information  • for laying out “unusual” Web page designs • Tables need to be specified carefully • Cells of data, within rows, within a table • Tables are not automatically reconciled! • Best to create blank tables “in reverse” and then populate with data

  5. A simple table <table> <tr> <td>Row 1, Col 1</td> <td>Row 1, Col 2</td> </tr> <tr> <td>Row 2, Col 1</td> <td>Row 2, Col 2</td> </tr> </table>

  6. Forms • A tool for gathering information from users • Provides specific prompts for information • Data is then sent somewhere (usually to a computer process) • Can’t really do much without server-side processing

  7. Frames • A way of organising information • Screen split into independent sections • a different document displayed in each section • Bookmarking problems • Frame loading and the target atttribute • Tables and CSS quite often used to mimic frames – different pros and cons

  8. Stylesheets • A definition of a document’s appearance: • typeface, size, colour for headings and text • line spacing, margin widths on all sides • spacing between headings … and much more! • Specified at the beginning of a document by linking or embedding, or inline use • Written in various special languages, e.g. CSS1

  9. Stylesheets • Promotes the separation of form and content • Allow Web designers to ensure consistency across a site’s pages • Specific elements of the overall stylesheet can be overridden locally (cascading) • Use of stylesheets is recommended by the World Wide Web Consortium • Stylesheets can only be used with modern (IE5+ or Netscape 4+) graphical browsers

  10. Some basic stylesheet elements • Linking to external stylesheets: • <link href="special.css“ rel="stylesheet” type="text/css"> • Syntax • TAG { property : value; } • <TAG style=“property:value;property:value;”> … </TAG> • Some common properties font-family : font-size : font-style : font-weight : color : background-color • See handbook, cribsheet and the W3c website (www.w3.org) for further information – stylesheets are very useful!

  11. Local and Inline style • Any tag can be given a “one-off” application of style with a style attribute • Classes can be established to modify tags repeatedly but irregularly • Blocks of a page can be changed with <div> and <span> tags • Always remember principles of inheritance! • Order – most local takes precedence!

  12. An example embedded stylesheet <html> <head> <style type="text/css"> body {color : #000000; font-family : arial; sans-serif; font-size : 13px;} p {color: #ff0000;} .special {color : #00ff00;} </style> </head> <body> <p> This paragraph is black text… </p> <p class="special">This paragraph is green text!</p> </body> </html>

  13. A note about colours • The Hexadecimal RGB triplet • RGB colour mixing • Hexadecimal representation • How to work out your colours • Palette tools, e.g.http://www.linkline.com/personal/jkun/palette.htm • Websafe colour charts:www.lynda.com/hex.html

  14. That’s all for today… • Any questions? • Next session – XML and extensible systemsMore practical work • Now carry on with your projects!

More Related