Activity 9:Learning xHTML and CSS

Written by: Jonathan Briggs

December 5, 2008 [2898 views]

We have now reached a point in the module when activities become more open ended and optional (although recommended). Many of you have been asking how you can develop your own WordPress themes and how you can learn some professional web design.

Some of you will have covered this in previous courses you have done but it is still worth just checking to make sure that you can demonstrate your understanding of the principles.

There will be other opportunities on your course to learn about web coding but if you follow this activity then you will have a head start.

Deadline for written feedback and answers to questions raised is Thursday 11th December Noon (just before the lecture)

Part 1: xHTML

To develop web pages you can use a page layout program such as Dreamweaver, iWeb, FrontPage or even Word but to understand what you are really doing you need to use raw markup languages such as HTML or better still xHTML. HTML has developed rapidly over 10 years and has become flabby and bloated. xHTML is a newer stricter version of the language that is now compulsory for any professional work. Although it is a little harder the benefits are enormous (in terms of compatibility and flexibility). As you access different online tutorials you will sometimes see that xHTML is referred to as HTML Strict or simply HTML. Don’t worry too much at this stage about the differences but try to use modern books and tutorials so that you don’t get into old fashioned bad habits.

What will you do in this activity?

1. Find appropriate tools for developing web pages
2. Explore what is meant by a “mark-up” language
3. Work you way through a number of tutorials
4. Create some simple linked pages that use the main markup ideas

Task 1: Finding tools to edit web pages

If you have cPanel then you already have a built-in editor (a bit like notepad) which you could use.
It’s worth, however, finding yourself some proper tools to run on your own computer (rather than on the server) such as Aptana (a fully featured development environment) or something simpler such as EditPlus, Notepad++ or HTMLPad (for Windows) or TextMate (for Mac). All of these tools have a free 30 day trial period.
Don’t be surprised that these are quite complex and sophisticated software tools. You will need to spend some time finding your way around.

In particular, find out how to create a new HTML file, enter some text and preview the results in a browser.

Task 2: Understanding the concept of markup

Create an empty file and type some text into the file. Save the file with a .html extension and preview it in a browser. In most cases the text will be displayed fine with no styling (no special fonts, spacing, layout etc).

A markup language adds additional tags to the text which are interpreted by the browser to provide layout, structure and sometimes other features to your text. xHTML is one such markup language and it consists of tags that surround the piece of text they affect.

Try adding the following tag pairs around bits of text in your page and then preview in a browser.

<strong> text goes here </strong>
<p> some text goes here </p> and some more goes here
<h1> some text goes here </h1>

Task 3: Work through some tutorials

Here are a few tutorials to give you the basic ideas.

http://www.htmldog.com/guides/htmlbeginner/
http://www.htmlprimer.com/htmlprimer/html-primer
http://jessey.net/simon/xhtml_tutorial/
http://www.w3.org/MarkUp/Guide/
http://www.w3schools.com/xhtml/default.asp (Standard Reference)

You don’t have to do all of them but find one that you find understandable or go out and buy/borrow a book and work through that.

The key things to look out for are

1. The range of tags available
2. The rules about how tags are used
3. How one page can be linked to another (being careful about how you name your links)
4. The structure of an HTML file
5. Common mistakes and how to spot them and correct them
6. How to try out your ideas within the editor that you have chosen

Task 4: Create 3-4 linked pages

Use the knowledge from the tutorials to build your own very simple site (much less sophisticated than WordPress). Concentrate on understanding the basic concepts rather than on design (which we come to in the next part).

Your site should have a core or home page and 2-3 sub pages. Every page should have some links that allow you to go home or to any of the sub pages. This is a very common pattern!

Upload your simple site to a folder on your hosting server being careful not to overwrite your wordpress blog.

Here are the questions you have to answer to complete this exercise

1. If you have created your site on your server give us the URL of the home page so that we can test it.
2. Why do you think we have suggested using a text editor or raw development environment rather than a WYSIWYG editor?
3. How would you explain the concept of markup to a friend who did not know anything about web page design?
4. Describe three errors that you made as you developed your simple web pages (or errors that you expect other people would have made)?
5. What are the questions that have been raised by this activity?

Here is the link to feedback you answers to Part 1 of this Activity

Deadline for written feedback and answers to questions raised is Thursday 11th December Noon (just before the lecture)

Part 2: CSS

In the days of early HTML there were many additional tags (such as <b>, <font> and <i>) that designers used to try and make their pages look the way they wanted. Then came one pixel images, Frames and Tables with lots of extra tags. All of these are now frowned on if they are being used for design purposes (as opposed for example to using Tables for laying out tabular data).

Instead a much more powerful design language has been introduced called Cascading Style Sheets (or CSS) which allow the design of a site to be separated for its content. This becomes absolutely vital for all except the very smallest sites.

There are two basic principles in applying styles to your HTML pages using CSS. The first allows you to create a style for any HTML tag while the second allows you to define sections of code (called classes, divs and spans) to which you can apply specific styles. This may sound complicated (and learning CSS is quite hard) but once you have got the basic idea you should be fine. Good CSS designers are in extremely short supply and are guaranteed a good salary!

In this activity you will

1. Explore the basic ideas of CSS
2. Follow some CSS tutorials
3. Create a better looking version of the simple site you created above using CSS

Task 1: Find some CSS tutorials and work your way through at least one of them

Here are some of the better ones I have found (but there are lots):

http://www.htmldog.com/guides/cssbeginner/
http://www.echoecho.com/css.htm
http://www.w3schools.com/css/css_intro.asp
http://www.howtocreate.co.uk/tutorials/css/combinedpage

As you work through these here are some of the things you should look out for:

1. How styles can be included in existing pages or via a linked style sheet
2. How styles can be applied to HTML tags
3. How classes can be used to make selective application of styles possible
4. Common mistakes and how they can be corrected

Task 2: Use CSS to add some design to the simple web pages you created in Part 1

As a minimum you should change the fonts of your text, add some colour to your pages and experiment with ways to show that your links are links (eg colour change on rollover). You made need to search for the specific styles that you will need.

Upload your new version of your simple site to a different folder so that we can compare the two versions.

Here are the questions you need to answer to complete the activity:

1. What is the URL of the CSS version of your simple site?
2. Which tutorial did you find the most useful?
3. What problems did you have while trying to learn about CSS?
4. How did you solve those problems?
5. Why do you think CSS is so important for modern Web Design?
6. What questions do you have about this activity?

Here is the link to feedback your answers to Part 2 of this activity

Deadline for written feedback and answers to questions raised is Thursday 11th December Noon (just before the lecture)

What do you think?

Add your comments