Web Authoring: HTML, XHTML and CSS

HTML, XHTML and CSS

If you don’t already know then you're probably wondering what HTML, XHTML, CSS and W3C are. I’ll discuss each heading individually and explaining what each of these are for when you’re designing a website of your own.

HTML

HTML means ‘Hyper Text Markup Language’. HTML is not a programming language it’s a markup language. Markup describes a text so things such as bold, italics (etc.). Markup language is a set of markup tags which describes how text should be displayed. HTML tags look like these <html> </html> and the tags are keywords which are surrounded by angles brackets. They usually come in pairs so like the ones I’ve just spoke about.

Others are

= open bold

= close bold

= starting a paragraph

= closing paragraph

<body>

</body>

IMG = Image

SRC = Source

In every pair the start is the opening and the second would be the closing tag. Tags are not case-sensitive which means in your tags you can write them in lowercase, uppercase or any mixture or a common convention is to also write in capitals as it will stand out from the rest of the document.

XHTML

X means EXtensible so altogether is it Extensible Hyper Text Markup Language which is a combination of HTML and XML (extendable markup language). XHTML is much stricter and also cleaner than the version of HTML which all new browsers support. XHTML creates more dynamic websites with much smooth transitions. Browsers such as Firefox and Google Chrome and it also load a lot faster. XHTML MUST be properly nested which means lowercases as XHTML screen readers (check everything work). It allows a designer to be able to create their own customised tags. XML got designed to describe data whereas HTML was designed to display data. XHTML does use the same principals as HTML but it creates more dynamic websites. There are so many different products that can display web pages these days such as computers, phones, PDA’s.

CSS

CSS means ‘Cascading Style Sheets. This follows on from HTML and XHTML which is basically the way of the web pages are being visually displayed. ‘Style sheet language’ is used to describe the presentation so that means the look and formatting of a document written a markup language. Formatting for types are things such as layout, colours, margins, backgrounds and also borders which then all get used on all the pages within the site to keep the continuity and it’s also all achieved by using markup languages.

Examples of tags which get uses in CSS are <div> this is a divider which is pretty much a box which contains all content and all instructions inputted. When using a style sheet it will control the size, shape and layout of these boxes. If you are going to use Adobe Dreamweaver CS5 then all the options you set are automatically converted to CSS. When designing my work I have used the ‘Design’ view however you are able to look at the ‘Code’ view and you’ll be able to see any coding which has been created.

Your turn!

I’ve been on a website (link below) which offers a number of tutorials online for you to go through to gain new skills. Below are the ones I’ve had a good at to show a few examples of how to change and how it could look afterwards.

http://www.w3schools.com/css/css_examples.asp

Example One - Set the background colour of a page

This is pretty simple to do - Go into Adobe Photoshop and make a new page otherwise you won't be able to select your colours. Then go into the colours at the bottom left hand side of your menu bar to select a colour - copy the '#' number then go back into this tutorial and replace the '#' with what you copied and pasted.

Before changes

Colour code - #b0c4de

Text - My CSS web page! Hello world! This is a W3Schools.com example

After changes

Colour code - #df7b7b

Text – Katie’s testing page! Hello world! This is my W3Schools.com example

Example Two - Set the width of the four border.

To do this you just need to change the border-style and border-width.

Before changes

border-style:solid;

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

p.three

{

border-style:solid;

border-width:1px;

}

</style>

</head>

<body>

Some text.

Some text.

Some text.

Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

</body>

After changes

border-style:solid;

border-width:15px;

}

p.two

{

border-style:solid;

border-width:1px;

}

p.three

{

border-style:solid;

border-width:medium;

}

</style>

</head>

<body>

border-sytle solid and border width 15px.

border-sytle solid and border width 1px.

border-sytle solid and border width medium.

Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

</body>

Example Three - All the font properties in one declaration

To do this go into Microsoft Word or even Photoshop to select a font you wish to use. Say if it's Serif like Times New Roman or say if it is Sans-Serif like Arial. Then select the size of the text you want and also whether you want it bold, italics or underlined.

Before changes

font:15px arial,sans-serif;

}

p.ex2

{

font:italic bold 12px/30px Georgia,serif;

}

</style>

</head>

<body>

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

After changes

font:bold 12px times new roman, serif;

}

p.ex2

{

font:italic 20px/30px Eras Demi ITC,sans-serif;

}

</style>

</head>

<body>

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph It is bold 12px times new roman and serif.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. It is italic 20px/30px eras demi itc sans-serif

W3C

W3C means 'World Wide Web Consortium'. The three is pointing out that in the full naming there is three 'W' in the title. W3C basically means that members of organizations or even full-time staff work together to develop Web standards. It’s led by web inventor Tim Berners-Lee and Jeffrey Jaffe. Its overall mission is to be able to lead the whole web to its full potential. It is the main international standards organization which means it’s the regulatory body for web design.

I’ve had a look at a site called Validator (URL below) which allows you to copy a website URL into this search box to see how many errors and warnings a website actually has. While looking through there were some pretty shocking ones. So why not try it yourself? Find your favourite website and see how many errors and warnings it has been given. Below are some which I have found out.

http://validator.w3.org/