Jhon Adams' Notes http://blog.jhonadams.net A collection of ramblings Sun, 13 Jul 2008 21:08:13 +0000 http://wordpress.org/?v=2.5.1 en An Introduction to XHTML and CSS, Part II http://blog.jhonadams.net/2008/07/13/an-introduction-to-xhtml-and-css-part-ii/ http://blog.jhonadams.net/2008/07/13/an-introduction-to-xhtml-and-css-part-ii/#comments Sun, 13 Jul 2008 21:08:13 +0000 Jhon Adams http://blog.jhonadams.net/?p=8 While the last article was mainly about XML, in this article you’ll actually learn the basics to creating a webpage.

I noted very briefly last time that XHTML has three different flavors, Basic, Transitional and Strict. The only flavor we are going to talk about is XHTML Strict. The Strict specification is designed to totally separate the content from the design. This allows the design to be completely interchangable through “Cascading Style Sheets” (or CSS) without needing to reload the page. This also allows the webpage to provide different style sheets for printing than are used in the browser.

The first step toward creating a web page is to include the XML specification from the last article. This is not required by the XHTML specification, but it is not a bad idea. The second thing is the document type. This tells the web browser what flavor you’re going to be using. If you break from the document type the browser may enter a mode where instead of displaying what it has been told to display, it will attempt to display its best guess. In this case we’ll be saying that we are using the “XHTML 1.0 Strict” specification.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Now that we have document type in there, the rest of the document is going to be exactly like the XML we did before. Instead of having a <pets> tag though, we’re going to be using an <html> tag. The html tag should have a few attributes. The first one is an “xmlns” attribute (short for XML Namespace). This seems sort of redundant, but it tells the browser that all the HTML contained between the html tags are actually XHTML. The second two attributes are to let the browser know both what language the html is in and what language the content is in. After adding the html tag (and closing tag) our document will look like:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
</html>

We’re well on our way to creating our webpage, but there are still a few items that are required by the XHTML strict specification to have a webpage! The first is a head tag. The head tag will contain information about the webpage that isn’t part of the actual content. This includes things like the title and the style information. The second part is the body tag which contains the actual content that is displayed in the browser. The head tag requires a title and the body tag isn’t worth it’s salt unless there’s something in it so we’ll add those items too. Which leads us to:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Tutorial 2a</title>
	</head>
	<body>
		<p>Hello, World.</p>
	</body>
</html>

The <p> tag is one that I never explained, but it is very simple. It is a paragraph tag. The text in between the <p> and </p> tag are considered to be complete paragraphs and will be separated from the rest of the text. If you simply hit enter a couple times between paragraphs, the browser will mash all your paragraphs into one big block of text. Now take this code and place it into a text document, saving it with the extension “html”. If you open this file in a web browser you should get something that looks like this.

A fantastic start to a webpage, but normally you will have more than one webpage, so we need to be able to connect them. For this we use an anchor tag. The tag itself uses only the letter “a” and has an “href” attribute to specify where the link goes to. In this case, we’re going to link to our previous page, so we can use a “relative href”. This means that we really only need the page name. If you wanted to link to http://www.example.com, you would have to enter the whole URL including the http://. We’ll save this as a separate file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Tutorial 2b</title>
	</head>
	<body>
		<p>Where is the <a href='tut2a.html'>World</a>?</p>
	</body>
</html>

This page can be seen here. As you can see, by clicking the linke we are taken back to the last page. If this is not working for you, make sure your new page is saved to the same directory and the href has the name of your last file in it.

The last two things that will be covered in this article are images and headings. There are 6 kinds of headings that you can use, h1 being the largest, h6 being the smallest and the rest falling somewhere in between. Today, we’re just going to use h1. We use it just like any other tag, by putting the text we want as a heading in the middle of it.

The image tag is more complex. It is abbreviated as img and does not have an end tag, instead it requires several attributes. The first is the image’s source, where the image comes from. The second and only other required is the alternate text. This attribute is abbreviated as “alt” and is used when the image cannot be displayed (or if the image needs to be read aloud). Another attribute that is often used is the title text, this is the text that is displayed when you move your mouse over the image. In this case we’re going to use an image hosted by the World Wide Web Consortium which says that our page is 100% XHTML compliant.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Tutorial 2c</title>
	</head>
	<body>
		<h1>Perhaps we need a title?</h1>
		<p>Then there should be some text that goes here to entertain us ^_^</p>
		<p>
			<a href="http://validator.w3.org/check?uri=referer">
				<img src="http://www.w3.org/Icons/valid-xhtml10-blue"
					alt="Valid XHTML 1.0 Strict"
					title="Valid XHTML 1.0 Strict" />
			</a>
		</p>
	</body>
</html>

The completed page is located here. Tomorrow I’ll cover using CSS to style the page.

]]> http://blog.jhonadams.net/2008/07/13/an-introduction-to-xhtml-and-css-part-ii/feed/ An Introduction to XHTML and CSS, Part I http://blog.jhonadams.net/2008/07/12/an-introduction-to-xhtml-and-css-part-i/ http://blog.jhonadams.net/2008/07/12/an-introduction-to-xhtml-and-css-part-i/#comments Sat, 12 Jul 2008 18:38:56 +0000 Jhon Adams http://blog.jhonadams.net/?p=7 After I recommended that a friend of mine look into Web Design as a way to put her artistic skills to use, I realized that I can at start my blog rolling by writing a tutorial on XHTML and CSS. The main concept behind this part of the tutorial is to familiarize you with the basics of the structure of XHTML and introduce some concepts to play with.

XHTML has 3 different “flavors”. XHTML Basic, XHTML Transitional, and XHTML Strict.

XHTML is built ontop of a language called XML. XML consists of opening and closing “tags” that are used to describe content. For instance, if you wanted to describe your pets you could do it in XML:

<?xml version="1.0" encoding="UTF-8"?>
<pets>
	<cat>
		<name>Moonlight</name>
		<age>10</age>
		<color>Black and Grey</color>
	</cat>
	<dog>
		<name>Sparky</name>
		<age>6</age>
		<color>Reddish Orange</color>
	</dog>
</pets>

The first line of XML tells whatever is reading this document, whether it is human or machine, that the document is going to conform to the standards of XML version 1.0, and the character encoding used in the document is UTF-8. The character encoding is the way the the computer represents each letter as 1’s and 0’s. Today, the most common encoding is UTF-8.

The next portion of this XML document is the pets tag. By using the pets tag, we tell the reader that the information contained within this document (or rather, between <pets> and </pets>) is information about pets. By the same token, the cat tag tells the reader that the information contained within <cat> and </cat> is information about a cat and the information between <name> and </name> is information about a name.

In addition to tags, XML documents can also contain attributes. Attributes get stuffed into the tags to supply even more information. For instance, saying all the pets belong to Jhon is going to be difficult with what we’ve learned so far. We could stuff an <owner> tag into everything, but what if I’ve named everyone of my 300 goldfish? That’s a huge number of additional tags! Instead we can add an attribute to our pets tag, making it read:

<pets owner="Jhon">

In a similar way, we can cram most of our previous file into 5 glorious lines by using:

<?xml version="1.0" encoding="UTF-8"?>
<pets owner="Jhon">
	<cat name="Moonlight" age="10" color="Black and Grey"></cat>
	<dog name="Sparky" age="6" color="Reddish Orange"></cat>
</pets>

There is one more thing that can be done to simplify it one step further. In XML, if a tag contains no tags (e.g. <cat></cat>) we can combine the two tags into one by using <cat />. Therefore our file becomes:

<?xml version="1.0" encoding="UTF-8"?>
<pets owner="Jhon">
	<cat name="Moonlight" age="10" color="Black and Grey" />
	<dog name="Sparky" age="6" color="Reddish Orange" />
</pets>

While we could cram the cat and the dog attributes into the pets tag but concocting some sort of patter that separates the attributes by commas, this defeats the purpose of XML. Anything that can be pluralized should remain inside it’s own tag. We can see above that the colors are listed as a list so should probably have their own tags. This has the added benefit that we can add attributes to the colors themselves.

<?xml version="1.0" encoding="UTF-8"?>
<pets owner="Jhon">
	<cat name="Moonlight" age="10">
		<color where="back">Black</color>
		<color where="belly">Grey</color>
	</cat>
	<dog name="Sparky" age="6">
		<color where="back">Reddish Orange</color>
		<color where="belly">Cream</color>
	</dog>
</pets>

This has the effect of creating a longer document, but we have more data than before and it is easier to read. There’s no real good way to tell when you should be using an attribute and when you should be using a tag, different people have different ways of writing it.

While none of this document actually covers writing a webpage, it provides a good introduction to the underlying language. XHTML is a specific set of rules for using XML in the description of webpages and CSS is how you display it. Tomorrow (or later today) I’ll cover writing a hello world page.

]]> http://blog.jhonadams.net/2008/07/12/an-introduction-to-xhtml-and-css-part-i/feed/