Definitions
(X)Html & Css Terminology
Pick a Word for a Full Definition
Attributes
Attributes are an optional part of some HTML [ Tags ]. They always appear in pairs- the thing to change,
and the way to change it, eg color="red" or width="100%".
The purpose of attributes is to add some extra information to a tag, for instance the image tag has width and height attributes, and most
importantly of all the src attribute which defines the path to the image, so the browser knows where to find it!
<img src="http://www.printedexistence.com/grafix/vampy.gif" width="75px" height="150px">
Browser
A browser is the program you use to view the internet. Many people think that Internet Explorer is the only web browser, but this isn't the
case at all. Other popular web browsers include [ Firefox ],
[ Netscape ] and
[ Opera ].
All of these are freely available for you to download and use. Firefox in particular is becoming increasingly popular, as it is more secure
than Explorer, decreasing your chances of picking up evil viruses around the web.
From a web design point of view, it's important to check your pages render well in all of the major browsers, so that all of your visitors
will be able to view your content. [ Doctypes ] can help with this, by making sure your pages are rendered
in standards-compliant mode.
Classes
In the context of [ CSS ] a class is an identifying name which refers to one, or several
elements on your page. These identifying names are so that you can attach styles to particular things, for example, if you have an image with
the class myimage:
<img src="http://www.path to my image.gif" class="myimage">
You can then use that classname in your style sheet, to apply styles to your image:
<style type="text/css">
.myimage {
border: 1px solid deeppink;
width: 100px; height: 100px;
}
</style>
Notice the dot before myimage in the style sheet- class names are always preceded by a dot, so that the browser knows it is
looking for something with the class myimage, rather than a tag called myimage.
Many blog, or profile sites like Myspace have classes predefined on their pages, so you can easily edit or hide things on your page.
Css / Style Sheets
CSS stands for (Cascading) Style Sheets. These provide a quick and easy way to add styles (for instance colors, borders and background images)
to existing [ HTML ] or [ XHTML ] documents.
Although you can define colors and borders in HTML too, CSS offers much greater control, for example, whilst you can define a simple border in
HTML, CSS lets you make the border dotted, dashed, or hair thin. You can also use CSS to style several elements at once, for instance, you
could put a border around every image on your page with one simple command.
In [ XHTML ] many tags to do with styling are no longer valid, so without the use of CSS you would have very
limited control over the look of your page indeed.
CSS commands can either go directly into your (X)HTML document, between <style> and </style> tags, or be written onto a separate
document called a style sheet, which is then added to your (X)HTML document using the <link> tag.
Doctypes
A doctype is a tag used at the very top of web pages, to define what kind of content is to follow, ie
[ HTML ] / [ XHTML ] and what version.
Doctype declarations are useful because they tell the [ Browser ] to render your page in
standards-compliant mode, which means it is more likely to look and behave as you would expect across all browsers. Pages without a
valid doctype are rendered in browsers' "quirks mode" which may lead to (sometimes quite staggering) differences in the way some tags
and styles are displayed.
There are a variety of doctypes for use with different kinds of pages. If you're just starting out writing HTML you probably want the
HTML 4.1 Transitional doctype. (although if you're a perfectionist and don't mind sacrificing some tags, you might want to go for the
Strict version). If you write in XHTML you will want an XHTML doctype.
You can find more about doctypes, and check if your page validates on the
[ W3C ]
website. [ (X)Html Validator ].
Html 4.1 Transitional Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Html 4.1 Strict Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Xhtml 1.0 Transitional Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Html
Short for Hypertext Markup Language, HTML is a simple language used to write web pages. It is made up of
[ Tags ] and [ Attributes ] which provide simple
commands [ Browsers ] can understand, for example, this image tag:
<img src="http://printedexistence.com/grafix/vampy.gif">
Would display the image on the page like this:
A lot of people start learning basic HTML because you can use it to customise certain web blogs, and profiles (like myspace) as well
as for writing full web pages of your own.
Most HTML tags and attributes are pretty simple and human-readable, for example <font color="deeppink"> would change the font color to
deeppink.
HTML Entities
HTML entities can be used to display non-textual characters on your page. For instance, typing © into the source of your page creates
a © symbol, and ® creates a ®.
[ See All Entities ]
This is particularly useful if you want to show your code, for instance by writing a tag onto the page. If I wrote <font> into the
source of my page it would simply be read as a font tag (and be invisible), so when I write tags for you to see I write <font>
(< is the entity reference for < and > for >).
Another common use of HTML Entities in [ XHTML ] is to encode [ Urls ],
because characters such as ? or & inside a link tag would stop your page from validating. Substituting your ?'s for ? and &'s for
&'s fixes this problem.
Tags
Tags are the little codes between < and > marks which make up [ HTML ] and
[ XHTML ]. <font> is a tag, and so is <img>.
Most HTML tags also have end tags (the same tag again, but with a slash in it) to show where that particular piece of formatting ends,
for example:
text text text <font color="deeppink">deeppink text</font> normal text again
Some tags don't require ending tags, for instance the <img> tag can be used on its own, and so can break <br>.
However in [ XHTML ] all tags must be ended, so <img> becomes <img /> and <br> becomes
<br />.
Tags can also have [ Attributes ] which help specify what you want the tag to do, for instance, color is an
attribute in the font tag above. The font tag could also contain the face and / or size attributes:
<font color="deeppink" face="Georgia">some pink Georgia text
</font>
Urls
An url (Uniform Resource Locator) is another word for a path or link. It can point to a web page, song, or image, in fact anything that is
stored on the internet. The url appears in the address bar of your browser (The url of the main page of this site is
http://www.printedexistence.com)
(Most urls start with http:// like this).
Xhtml
XHTML (Extensible Hypertext Markup Language) is a newer cleaner version of [ HTML ]. It is a hybrid born out of the
better elements of HTML and XML (another markup language). XHTML is often defined as the new HTML, and is likely to replace it in the future.
The key difference you will probably notice between this and HTML is the formatting- XHTML is stricter, requiring all its tags to be
properly ended. Tags that don't normally have ending tags in HTML will be ended with a slash within them, eg, <br> becomes <br />
Another difference is that many old HTML tags have been done away with in XHTML, and you need to use
[ CSS ] to achieve those effects.
The main point of all this strict correct markup is to create web pages that will work well on all types of computer, all browsers, and
even handheld devices.
| ![PrintedExistence[dot]com](http://www.printedexistence.com/grafix/title.jpg)
