Yo

The city is going wild about this swineflu thingie going on. People avoid direct contact such as shaking hands and covers their faces with masks. Looks like a clip from a sci-fi movie when you look out the window.

I guess it’s just a matter of time before I start to take precausions against it. Afterall it seems like their methods is working. 140,000 has been diagnosed with swineflu, but only 781 has died. That’s 0,5%.

My regular visitors - I know you exists - have noticed that this site has been inactive for quite some time now. There’s a very good reason for that. I just started working as a service desk analyst at a big company in Malmoe, Sweden. And trust me, I have noticed the inactivity as well. I had 58 pending spam comments when I logged in. Mostly russian crap.

Thinking of adding a spam filter to the site. Could be useful.

We just had a break in here at XHTMLSchool. Suddenly there was 134 comments pending for my approval. Seriously, it takes too much of my time to put a Spam sticker on every comment.

Looks like it’s a common attack too. Here’s all of the nicks that posted:

http://www.stopforumspam.com/ipcheck/89.28.14.35

It’s time to introduce you to a valid and strict menu, á la XHTML style!

Since there are people with certain disabilities we want to make their stay a little bit easier. There are special programs that, for example, reads out correct menues to the user with a “computer voice”. This is very useful to peoples that has problems with reading, either by a decease, vision disabilities or reading or writing difficulties.

A correct menu should be built with <ul> and <li>. Here’s an example:

<ul>

<li><a href=”link.php”>My link</a></li>

<li><a href=”link.php”>My link</a></li>

<li><a href=”link.php”>My link</a></li>

</ul>

<ul> and <li> are mainly used to make lists, but since it’s possible to do some heavy modifications using CSS, we have a great way to make a menu right here.

That code above would without CSS look a bit silly. Here’s how it would be on a homepage without CSS:

• My link
• My link
• My link

I always like to put my menues inside a div, to make it easier to edit them with CSS. Therefor, I would recommend wrapping the <ul> and </ul> up with a div, and let’s call it “menu_div”.

This would look like this:

<div id=”menu_div”>

<ul>

<li><a href=”link.php”>My link</a></li>

<li><a href=”link.php”>My link</a></li>

<li><a href=”link.php”>My link</a></li>

</ul>

</div>

I don’t want the little dots to be there, so I make a little modification with CSS. I would also want them to be displayed inline instead.

#menu_div ul {

list-style-type: none;

display: inline;

}

Notice that I put “ul” right after the name of the div. This is to show the browser that it’s everything inside of “ul” that we want to edit, not the whole menu_div.

List-style-type tells the browser that there should be no dots or whatever on our list.

Display tells the browser how the list should be displayed. In this case: inline.

An attribute that I haven’t introduced to you before is margin. This little sweety allows us to move the menu x pixels up, right, down or left. I would like my inline menu to make a space between each link. This can’t be done inside of <ul>, since it contain’s the <li> which has my links. So, let’s make the margins inside of <li>, like this:

#menu_div li {

margin: 4px 2px 1px 0;

}

The numbers above are a bit strange, right? I just typed those random numbers in to be able to do this example. So, why are there 4 different numbers, and why does one of them not have “px”?

As I wrote previously, margin let’s us change the space between top, right, left or down - and this is what the numbers are for. 4px is the space to the top, 2px to the right, 1px to the bottom and 0 to the left. 0 does not have to be defined as px (pixels), since it’s zero!

And without my crappy english:

margin: top right bottom left;

And remember to define the numbers as px!

We will be continuing to modify this menu in the next step! Please feel free to leave a comment if you have any thoughts about this post!

.. that we are gonna get an archive soon with some homemade tutorials of how to make a valid XHTML website with CSS.

“Why?” - You might ask. We all have different ways of learning and many people have some difficulties to learn by reading. Some are even too lazy to read without pictures (I’m one of them!). So this is why I have started to create this little archive.

You will know when it’s here!
/Mike

Hi guys! Sorry I haven’t written in quite some time. Me and my family has been driving upnorth to share the summer with our friends and family. But I promise you that from here on there will be updates and posts as often as I can sit down with a computer.

I have talked alot about validation, but what is validation? A valid XHTML site is one that follows all of the ground rules I have explained in the first posts. These rules, or guide lines if you like, are decided by the W3C.

Validating your code is extremely easy. Just type in to http://validator.w3.org/ and insert the URL to your site.

If you only have your site on your computer there’s a really great plugin to Mozilla Firefox that you could try out. It goes by the name of Web Developer and allows you to validate your local HTML (or CSS) code on the spot. No need to upload it anywhere!

If your site would contain any error at all, the validating tool will show you exactly what’s wrong and on what row that specific code is being tortured.

Doesn’t get any easier than this, does it?

Time for a tip streak! I want to recommend notepad++ for those of you who are currently typing your code in the regular notepad application!

The name makes you think that there’s a few special features, but that’s a total lie - there are many features in this wonderful little program. Notepad++ is simply amazing, and free!

It’s excellent for those of you who like to keep your code organized and like being able to see what you’re writing.

Copy/paste from their official site:

Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.

Based on a powerful editing component Scintilla, Notepad++ is written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size. By optimizing as many routines as possible without losing user friendliness, Notepad++ is trying to reduce the world carbon dioxide emissions. When using less CPU power, the PC can throttle down and reduce power consumption, resulting in a greener environment.

[...]

I hope you enjoy Notepad++ as much as I enjoy coding it.

Interested? Get it here!

Alright! Moving on!

I bet that those of you that has been typing old-style HTML has used tables frequently? This is nothing we recommend in XHTML 1.1. It’s OK if you’re presenting statistic data and such, but I’ve learned that tables should be used carefully in XHTML.

So, I’ve been short of a div-junky since I was told not to use tables. And I’m gonna show you what it is.

A div is a type of box that can be widely modified using CSS.

Example of a box:

<div>

Hello! I’m a great big box.

</div>

This is a div. In this shape it will appear just as regular text. This is where CSS comes in handy! First off, we have to assign the div with an id so that CSS knows what to do. You do that by adding id=”id-name” to the <div>-attribute, like this:

<div id=“id-name”>

Hello! I’m a great big box.

</div>

Here’s the catch. If you want to use the same style on more than one div, you have to use “class” instead of “id”. With class you can use the same style on an unlimited amount of divs, while you can only use id once and then it’s useless.

Now, the CSS file. I snuck in a sneakpeak of how to include a CSS-file in your HTML-document in step 2. Inside <head>, insert:

<link rel=“stylesheet” href=“stylesheet.css” />

Just as in <a> you have to show the browser where your CSS-file is located. In this case it’s called stylesheet.css.

There’s quite a few ways to edit the looks of the div. Here’s an example of how to do this in CSS.

#id-name {

width: 100px;

height: 100px;

background: #cecece;

color: #000000;

border: 1px #000 solid;

}

The # before the id-name is to define that it’s an “id” and not a “class”. If you want to create a class instead of id, you should put a simple . instead of #.

Now, width and height is so standard that I don’t think I need to explain, but I do it anyway. Width tells the browser how wide the div should be, while height tells the browser how high the div should be.

Background changes the background color. You can also use a background image if you replace #000000; with url(url-to-image.png);.

Color tells the browser what text color that should be used.

Border is just what it sounds like. A border around the whole div. 1px wide, #000 (black) colored and solid, which means that it’s a straight line. You can change this to dotted and so on, if you’d like. Even though it’s butt ugly.

There are a few other attributes that’s available, but it’s not important in this post so I’ll teach you later!

Welcome back! I bet your fingers are just itching to get started with the next step. I just wanted to let you know that we are gonna take this one step at a time from here on. There is so much to explain and I wanted to keep it simple.

In the last step I introduced a couple of basic attributes, such as <b>, <p> and <h1>. In this step I will take it a little bit further. Almost every webpage has pictures on it, but how do they do that?

You include images on your site with the <img>-tag. A simple tag may look like this:

<img src=“the_image.png” alt=“Image description” />

As you can see here, the <img>-tag allows us to add a couple of options inside of it. We add the image location in src=”". You can link to other folders, for example “folder1/folder2/image.png”. You can even link to a parent folder if you’d like, with “../images/image.png”. The dots are there to tell the browser to step out of the current folder and look in the previous one.

The alt=”"-option is important, since the document won’t validate as XHTML without it. alt=”" gives the image a name and is shown when you either hold your mouse over it or when the image is unable to load.

And just to recap, the attribute is ended with /> since it has no text or images in it.

And now over to links! Every website has them, no doubt about it. We’ll do a quicky here.

<a> is the attribute to use when you want to link to something. It could for example be a setup file, an image or another homepage. A regular <a>-based link looks like this:

<a href=“http://www.google.com”>Link to www.google.com</a>

The href=”" option is where you put your destination. If you want to link to an external website you have to put http:// at the beginning, otherwise the browser will be looking for a file called “www.google.com” inside your current folder.

If you’d like to link a file, just add the filename into the href=”" option. Remember that it’s case sensitive. A file called MyPreciousBunnies.png cannot be linked as mypreciousbunnies.png!

As you can see above, I put my link text in between <a> and </a>. It has to be ended with </a> (not ” />”), because it contains data in the form of a link. Get it?

In the next step I will introduce div’s!

Hello!

Based on the ground rules I explained to you in the previous post, we will try to build a simple valid XHTML-site with the most basic elements.

A clean XHTML website must always start with an element called DOCTYPE. It explains to the browser what HTML or XHTML standard you are using, to avoid any missunderstandings with the browser. This is followed by a parent element - <html>. This element must always be ended at the very bottom of the website, with </html>. No HTML should be used below this last ending!

Inside this <html>, we have to define  titles, URL:s to for example our stylesheets or javascript files, META-tags and more, which I will explain to you shortly. This shall be done inside of <head> and </head>.

To make it easier for you to understand what I’m trying to teach, I will show you an example of a fully working and valid XHTML website below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>An example title</title>
		<link rel="stylesheet" href="stylesheet.css" />
		<meta http-equiv="Content-Type" content="text/html; 
		charset="iso-8859-1" />
	</head>
	<body>
		<h1>Hello, this is my title!</h1>

		<p>
			No way? That is so neat! I can also write
			in <b>bold text</b>, <i>italic text</i>
			and <u>underlined text</u>.<br />
			<br />
			I bet you're wondering what this thingie

			at the end of each row is? This is what
			defines where the browser should cut the
			row and begin a new one.<br />
		</p>
	</body>
</html>

The XHTML-code above would write out a text looking like this:

Hello, this is my title!

No way? That is so neat! I can also write in bold text, italic text and underlined text.

I bet you’re wondering what this thingie at the end of each row is? This is what defines where the browser should cut the row and begin a new one.

Did you see how the text inside of the <h1> and </h1> became big and bold? This is one of the most basic and oldest attributes in the history of HTML. You use the h-tag as a title on your website. Together with CSS, you’re able to change the looks of it completely. In this example it has taken the shape of the <h1> from my stylesheet on this site. The standard H1-tag looks a bit different, but is still a bit larger than the ordinary text.

Now you’ve seen a simple XHTML page in action. Let’s explain the single attributes in detail.

• <br /> is used to end a line and start a new. Since there is no data (texts, images or whatever) inside of this attribute it’s ended directly with a space and a slash (” /”).
• <p> is used as a paragraph separator. You should use it wherever you want to put in a larger set of text. You might want to separate really large texts with paragraphes, and this is a really good and correct way to do it. <p> is ended with </p>, since it contains data.
• <h1> is used to define the first title on the page. The second is <h2> and so one. Since it contains data you have to end it with a </h1>. Keep in mind that the <h1> will need a complete row, if you haven’t played around with your CSS code.
• <b> is HTML’s way to make bold text. Since it contains data, it’s ended with </b>.
• <i> makes italic text. Ends with a </i>.
• <u> makes underlined text. Ends with.. guess what? That’s right! a </u>.

These attributes, or elements, are the most basic ones you can use.

In the next step I will introduce a few other attributes and elements that you may use in your site.

XHTML 1.1 is not all that different from HTML 4.01. There are a few ground rules that I would like to explain to you. These rules are already stated as standard by the W3C, but I will explain them in my own way.

Rule number one: “XHTML elements must be properly nested.” This basically means that you cannot start an element inside another element, without ending it inside.

It shows that…
<b><i>This is bold and italic text</b></i>
is wrong, and…
<b><i>This is bold and italic text</i></b>
is correct!

Rule number two: “XHTML elements must always be closed.” This means that if you start an element, such as <b> for bold text, you must end it as well with </b>. This goes for ALL elements.

Rule number three: “XHTML elements must be in lowercase.” Forget about all HTML 4.01 standards. In XHTML every single element must be in lowercase.

Rule number four: “XHTML documents must have a root element.” This means that you must start a XHTML with <html>, just like HTML 4.01. The exception of this is the DOCTYPE-attribute, which tells the browser what HTML standard you are currently using – in this case it’s XHTML 1.1. You must also have the child elements <head> and <body> nested correctly and closed as they should be.

In the next stage I will try and explain how to build a simple and valid website. Prepare for “Hello World!”.

Time for a quick drink. Cheers!