Paris Graphics

Home > Web Development Course > Web Development XHTML > You Are Here

Web Development - XHTML

Intro

Hypertext Markup Language is a subset of SGML (standard generalized markup language). You can read the history online, e.g., on the Wikipedia Site. One of the people credited for inventing it is Tim Berners-Lee. He is now the head of The World Wide Web Consortium which is a good place to know about.

In short, HTML is written by enclosing it's keywords in brackets: < and >
For example to enclose a paragraph of text, you would write:

<p>Here is our text. It might go on and on. Now it will stop.</p>

A web browser (Firefox, IE, Safari, Opera, etc) decodes these "tags" (generally how things like <p> are referred to). This is somewhat similar to how a "compiler" or "interpretor" takes a page of C++ code or a PHP script and makes it execute. In a perfect world, each browser would handle a tag the same way. Unfortunately, this is not the case (although it's a bit better today than it was years ago). In addition, some browsers have special tags which only they recognize - again this used to be a bigger problem than it is today.

Bottom line: stick to tags that are part of the HTML specification, test your work on several browser and beware of Internet Explorer as it is the worst at following the specification.

Last warning... as you read about HTML on the web you will find lots of info from the days when people used HTML for Structure as well as Presentation. This is not how things are done today (not how they SHOULD BE). Some of the tags that you will see in these older pages were browser specific, others have been removed from the HTML spec.

Basically: HTML should be used for structure and CSS (we will cover later) should be used for presentation. This keeps your content independant so it can be used in a variety of different ways. E.g. One (or more style for web, one for print, one of cell phones, etc.

Creating your first page

Start by creating a directory on your machine to hold your website - name it anything you like - maybe www.

Open a text editor (not MS Word or other app that saves in a binary format). There are ton of them here.

First we need to put in some info - the doc type. It is used to give info to validation tools and to the browser and it is good form to always include it. There are few types, we will use this one. Type it or paste it in - it is one continuous line but my word wrap if you have that feature turned on because it's so long:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Next thing that you need to include is the html tag:

<html>

and the head tag:

<head>

Note that we haven't closed the html or head tag yet.
Next comes the title:

<title>Web Development Experiments</title>

We ended the title, so we closed it. The title will show up at the top of the browser window (generally).

Then close the head because nothing else is going there in this example.

</head>

Later you will see other tags that go between the opening and closing head tag.

Next we add this:

<body>

which is the start of the real content.

Hang in there.. a few more things then we can view our work.

Headings: these are h1, h2, ...,h6 and stylistically they are bigger and bolder than usual text but structurally they are important too. you should always use them - not some stylized other text tag. if you don't like the way they look, don't worry that's where CSS will come in where you can define the font, size, weight, color, etc.

Now add the h1 heading:

<h1>Web Development Experiments</h1>

We closed h1 because we are done with the heading.

Now a paragraph of text:

<p>Welcome to my page. This is where I will be experimenting as I learn all about web development. The colors, styles, images, text will change. Some of the topics that I am going to learn are (X)HTML, graphics for the web, audio/video for the web, CSS, Javascript, and MySQL. Along the way I will be learning how to use various software tools, so I'll keep a page of links. I'll be learning some server stuff too. </p>

Again we closed the p tag because the paragraph is over.

Now to end our document.

</body>

because the body of the doc is done, and

</html>

because the whole document is done.

All together you should have this: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Web Development Experiments</title>
</head>

<body>
<h1>Web Development Experiments</h1>
<p>Welcome to my page. This is where I will be experimenting as I 
learn all about web development. The colors, styles, images, text will change.
Some of the topics that I am going to learn are (X)HTML, graphics for the web, 
audio/video for the web, CSS, Javascript, and MySQL. Along the way I will be 
learning how to use various software tools, so I'll keep a page of links. 
I'll be learning some server stuff too.
</p>

</body>
</html>

Save the file as index.html and load it up in your browser.

A few additions... Lists and Links

Without doing any styling, let's do a few things with the structure to make it more readable (and logical).

First, there's a list of things in our paragraph. HTML has tags for lists - let's use them. HTML has two types of lists they are:

each element of the list starts with <li> and ends with </li> and then we indicate that our list is done with either </ol> or </ul> as appropriate.

Now we use lists to rewrite the content as follows: 

<p>
Welcome to my page. This is where I will be experimenting as I 
learn all about web development. The colors, styles, images, 
text will change.
Some of the topics that I am going to learn are: </p>
<ul>
<li>(X)HTML, </li>
<li>graphics for the web,</li> 
<li>audio/video for the web, </li>
<li>CSS, </li>
<li>Javascript,</li> 
<li>MySQL and </li>
<li>PHP. </li>
</ul>
<p>
Along the way I will be learning how to use various 
software tools, so I'll keep a page of links. I'll be 
learning some server stuff too.
</p>

Save the file and reload. Better, right?

I should have mentioned this before but... two things:

  1. html doesn't care about white space in the content
  2. don't mix cases - e.g. <body>blah blah blah </BODY>
    3. just keep it all in lower case please..

Let's add links.

There are two kinds that we are going to look at - external and internal. The link tag is <a> Tags can have properties or attributes. So far we haven't used any, but now we will.

Go back to the list and let's change the first line to this: 

<li><a href="http://en.wikipedia.org/wiki/HTML">(X)HTML</a></li>

Save and reload.

href tells where we are linking to. This is an external link and so we type the full URL including http

Before we move on to internal links, let's take a break - literally...

Notice that as you resize your browser, the paragraph of text re-adjusts itself. Since HTML ignores white space in the content, just adding more if it won't cause a line break in the text. A new <p> would but sometimes that's not what you want. You just want a break.
Then use the break tag <br /> It doesn't have a matching tag and back in the day it was written as <br> but in order to comply with XML, all tags that don't have an end tag now have a space followed by /, like
<br />

If you "view source" on some pages you will still see the old style <br> just don't use it. This also applies to the <hr /> tag (horizontal rule, it draws a line, try it) and the <img blah blah blah /> tag (blah blah means there's a bunch of stuff, but we will cover this later).

So... now you can go back to the text and right before "The colors.." add a <br /> like this: 

<br />The colors, styles, images,

Now back to links. An internal link is one that links to a page on your webserver. Let's make another page so we have something to link to.

Start a new file in your text editor and enter something like this: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Web Development Experiments</title>
</head>

<body>

<h1>About Me</h1>

<p>
I live in NY. I like discovering new music, 
unusual movies, food that's good for you, and other stuff.
</p>

<p><a href="index.html">This is my home page</a></p>
</body>
</html>

The internal link is:
<a href="index.html">This is my home page</a>
There is no, www, http, etc. just the file name.

If the file was in another directory we would include that path RELATIVE to this page - but more on that later. (If you want to know: Use relative paths instead of absolute paths so that you can easily move your site to another server, run it locally, etc. ALSO when creating a path to a file in another directory you use UNIX style paths (slashes go this way /, not this \). More about relative paths on this Wikipedia page.

Save the file as about_me.html

Do not use spaces in filenames- and for that matter, no weird characters. Underscore is good.

All that we need now is to link to this page from the home page.

Go back to that page and add a new paragraph anywhere before the ending body tag. 

<p><a href="about_me.html">About Me</a></p>

Now reload your index.html page. You have a link to your About Me page and then back.

That's about it for this lesson - a few things for you to look up: