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
<b> = open bold
</b> = close bold
<p> = starting a paragraph
</p> = 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.
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>
<p
class="one">Some text.</p>
<p
class="two">Some text.</p>
<p
class="three">Some text.</p>
<p><b>Note:</b>
The "border-width" property does not work if it is used alone. Use
the "border-style" property to set the borders first.</p>
</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>
<p
class="one">border-sytle solid and border width 15px.</p>
<p
class="two">border-sytle solid and border width 1px.</p>
<p
class="three">border-sytle solid and border width
medium.</p>
<p><b>Note:</b>
The "border-width" property does not work if it is used alone. Use
the "border-style" property to set the borders first.</p>
</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>
<p
class="ex1">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.</p>
<p
class="ex2">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.</p>
After
changes
font:bold
12px times new roman, serif;
}
p.ex2
{
font:italic
20px/30px Eras Demi ITC,sans-serif;
}
</style>
</head>
<body>
<p
class="ex1">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.</p>
<p
class="ex2">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</p>
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/
Canon – 77 errors, 92 warnings
Google - 26 errors, 4 warnings
Vauxhall – 15 errors, 12 warnings
MySpace – 21 errors, 2 warnings
Blogger – 3 errors, 1 warnings
Heat magazine – 19 errors, 3 warnings
Play.com –
372 errors, 21 warnings
HBO – 197 errors, 69 warnings
Microsoft
had 512
errors, 490 warnings! This was a real shock to see! So i compared it to another
huge company like Apple.
Not a surprise but Apple only had 2
errors, 1 warning in total.
Amazon was also in the higher numbers with a shocking 485
errors, 117 warnings
Finally Nikon had 11
errors, 1 warning whilst comparing it to Canon it had 77 errors and 92 warnings.
