XHTML/CSS Week 2
This Week Quiz to revise last week (XHTML and DW) Lists - & tags Images tag Hyperlinks tag Using CSS to define the appearance of XHTML tags.
Quiz - 1 What do the following XHTML tags do,,,,,,,,,,,,,,,, ?,,,, ? What can you say about the difference between the and tags? Which font does the tag appear in? Why? Why ? Why are all the above tags in lowercase letters? What filename suffix should a file containing XHTML have? What filename should exist in every website? What happens if it is missing?
Quiz - 2 How many errors can you find in the following code? <html><body> My Web Page My Web Page </body><head> About my web page About my web page This is my web page This is my web page</html>
Lists Two main flavours Ordered (numbered lists) … Ordered (numbered lists) … Unordered (bulleted lists … Unordered (bulleted lists … Each list item is surrounded by … Each list item is surrounded by …
An Unordered List Type this into notepad, save as ul.htm and preview in a browser <html><head> XHTML Unordered List XHTML Unordered List </head><body> Fruit Favourites Fruit Favourites <ul> Apples Apples Pears Pears Bananas Bananas </ul></body></html>
An Ordered List Type this into notepad, save as ol.htm and preview in a browser <html><head> XHTML Ordered List XHTML Ordered List </head><body> Popular Web Browsers Popular Web Browsers <ol> Internet Explorer Internet Explorer Firefox Firefox Safari Safari </ol></body></html>
Images Unlike programs like Microsoft Word - where images become part of the.doc file - XHTML files simply reference the file name of the external image file to be inserted at that point in the web page. For example: The image file must be in JPEG, GIF or PNG formats.
30 Seconds on Images (You will cover this in more detail in the Photoshop module) JPG images can be made up of millions of colours – so they are good for photographs but they need careful editing so as not to lose quality GIF images can only contain 256 colours. They are good for line art and coloured blocks. PNG offers the best of both worlds but are usually ignored by web designers! It’s a good idea to get images prepared to the correct size and image quality before using them in a web page.
The tag The image tag has many options. Here’s an example listing the commonest of these: src = image file to display alt = alternate text (used when image cannot be seen) width, height = size of image (overrides the image file dimensions) border = draws a border around the image. Here it’s three pixels wide align = left, right on page. There are lots more of these that we won’t use as we have better ways of aligning images.
Hyperlinks Can be pieces of text or images Click them to go somewhere else: A web page in the same web site A web page in the same web site A web page in another site A web page in another site Somewhere else in the same web page Somewhere else in the same web page The XTHML tag for a hyperlink is The XTHML tag for a hyperlink is
Hyperlinks in Action About me About me Load the webpage ‘aboutme.htm’ from the same directory as the current page. The clickable text reads ‘About me’ RACC RACC Load the home page of the RACC web site Jobs Jobs Load the RACC jobs page
Practise your XHTML skills Create two simple web pages using XHTML tags of your choice – save these pages as page1.htm and page2.htm. Edit each page to add a hyperlink to the other, that is page1.htm has a hyperlink to page2.htm and page2.htm has a hyperlink to page1.htm Check these work in a browser.
CSS Part the First
Old Style HTML Can you think of some reasons why this wasn't a good way forward? A Simple Web Page…
…In Old-School HTML (Content highlighted in yellow) Old Style HTML Old Style HTML Can you think of some reasons why this wasn't a good way forward? Can you think of some reasons why this wasn't a good way forward?
What’s the problem? HTML and the dreaded tag caused problems for: Blind People Web Designers Search Engines Everyone else!
XHTML and CSS So much better! A Simple Web Page…
A Similar Page using CSS (edited to fit this screen) h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-style: italic; font-weight: 700; color: #0000FF; } p { font-family: "Times New Roman", Times, serif; font-size: 12pt; color: #000000; }</style> XHTML and CSS XHTML and CSS So much better! So much better! Note the: Style section in the area CSS definitions for the appearance of the and tags