As you recall from Lesson 1 (What is XHTML?), adding a paragraph in XHTML is as simple as wrapping text in <p> and </p> tags. Adding an image, however, is a little more complicated.
Follow Along
Before we continue, I encourage you to follow along by copying and pasting today’s code into your own XHTML document (or the page we created in Lesson 2: How To Create and Save Your First XHTML File by Hand). This will allow you to edit the text, and refresh the file in your web browser as we make edits. This will greatly enhance your learning ability.
A Funny Dog
Let’s pretend we have an image of a dog on our computer saved as “funny-dog.jpg” and we want to insert it into a webpage; this is the code we would use:
<img src="funny-dog.jpg" />
Let’s analyze this code. First, <img> is the code for creating an image element. Next, the letters “src” are used as an attribute (which you learned about in Lesson 3: Attributes and Values) and stand for “source”. Basically, we need to provide the web browser with a value to the source of the image. Naturally, the value for the source attribute is “funny-dog.jpg”. This example assumes your image file is located in the same directory as your XHTML file. If, for example, you had your image file inside a folder named “images” your code would look like this:
<img src="images/funny-dog.jpg" />
Self Closing Elements
As you can see, in both code examples so far there has not been an ending </img> tag, because the image code is a “self closing” element. This is because unlike a paragraph, we won’t have a plethora of content inside our <img> element, but rather a single image. The /> at the end of the code tells the web browser to end the image element.
There is one additional bit of code we must add before we are finished. We must assign an “alt” attribute and value to our image. The “alt” attribute stands for “alternative” and is used to provide a text-based alternative for viewers incase the image will not load, or if they are visually impaired. Here is what our code will look like:
<img src="funny-dog.jpg" alt="A funny dog sitting on the grass. " />
That’s it!
In our previous lesson, you encountered equal signs and quotation marks inside a XHTML element for the first time. In today’s lesson, you will learn how to use equal signs and quotation marks to create attributes and values.
Be Sure To Follow Along
Before we continue, I encourage you to follow along by copying and pasting today’s code into your own XHTML document (or the page we created in our previous lesson: How To Create and Save Your First XHTML File by Hand). This will allow you to edit the text, and refresh the file in your web browser as we make edits. This will greatly enhance your learning ability.
We will use a file name of “test.htm” for our first page in this lesson.
First Look at Attributes and Properties
Let’s begin by analyzing a piece of code that makes use of attributes and values. The code used to create a hyperlink (or simply, a link) is the perfect example. Add the following code to your “test.htm” page between the <body> and </body> tags:
<a href="newpage.htm">Our New Page</a>
Let’s dissect what is going on in this code. First, <a> is the HTML code for creating a link (or anchor). However, we cannot simply wrap text in <a> start and end tags the way we would if we were creating a paragraph of heading. While that is how we define what the clickable link says, we need to specify the location for our web browser to navigate to when we click the link. That’s where attributes and values come into play.
Link Location
The letters “href” stand for Hypertext Reference and serve as an XHTML attribute which contains a custom value; in this case the custom value is the link location. In this example our value is “newpage.htm” because we are going to create a second page to link to.
First, Create The New Page
Create a new empty XHTML page named “newpage.htm” in the same directory as your “test.htm” file and place the following code inside its <body> and </body> tags:
<h1>New Page</h1> <a href="test.htm">Back to original page.</a>
The World’s Simplest Website
When you view “test.htm” in a web browser, you’ll notice we have constructed a simple two page website. In a few short lessons you’ve already learned the essence of the entire internet; pages linking to other pages.
Let’s Add Another Attribute
To make sure you understand the syntax and formatting, let’s add another attribute to our link on the “test.htm” page; let’s give our link a title. Link titles are seen when you hover your mouse over a link for a second or two (link titles also have much more important purposes that you will learn about in later lessons). We will achieve this by using the “title” attribute and assigning it a custom value of “Our new page is extremely new”:
<a href="newpage.htm" title="Our new page is extremely new">Our New Page</a>
Now when you view “test.htm” in a web browser and hover over the link for a few consecutive seconds you will see our title; all thanks to XHTML attributes and values.
In our next lesson we will continue our study of attributes and values by learning how to insert an image into a web page.
It’s time to get your hands dirty and write your first XHTML file. Let’s begin by opening a text editing program. If you are on a Microsoft Windows PC open the program named Notepad (look in your Start Menu for it, or simply hold down the Windows Key on your keyboard and press R, then type “notepad” into the run command prompt and press enter). If you are using a Macintosh computer, launch the application named “TextEdit” (which can be found in your Apps folder).
As a coder, it is our job to turn this blank canvas of a document into a XHTML masterpiece. Let’s begin by entering the following code into our blank text document, (or utilize your computer’s copy and paste function and lift it directly from below):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Relax, I don’t expect you to understand this code! For now, just know that this code tells the web browser what computer language we are using (XHTML). You will begin every web page you ever create with this code.
Writing XHTML is Like Making Sandwiches
We are now ready to begin the actual structure of our page. Begin by adding the following code to your document, directly below our last piece of code:
<html> </html>
The start-tag <html> tells the web browser that we want to begin our document; similarly the end-tag </html> tells the browser we want to end our document. If our page is a sandwich, the <html> start and end tags are the slabs of bread.
Before we can add any exciting content to our page, there is one more element we must add. Insert the following code directly beneath the <html> start tag:
<body> </body>
The <body> element signifies the portion of our document that will house our actual content (paragraphs, images, etc…). You may be thinking “But I thought that’s what the <html> tags did?” In fact, the <html> element houses everything, both our actual content (which goes inside the <body> element) and more complex elements that we will learn about in future lessons. For now, just know that the <body> element goes inside the <html> element.
This is what your document should look like so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
</body>
</html>
Finally, The Fun Part
Now, let’s add our first bit of content to our page! How about a big bold heading? Add the following code underneath the <body> start tag:
<h1>This is a big bold heading</h1>
This code raises a good question for the beginning coder: “How am I supposed to know what element to use? How did you decide on using the <h1> tag?”
We decided to use the <h1> element to describe our heading because this is the most important (and only) heading on our page. In future lessons we will create pages with multiple headings and utilize <h1>, <h2>, and <h3> tags to create a hierarchy of importance for our content.
Russian Stacking Dolls
At this point, it is helpful to think of XHTML as a set of Russian stacking dolls. Smaller elements fit inside larger elements, which fit inside even larger elements, etc… Our header rests inside our <body> element, which rests inside our <html> element. To fully illustrate this point, let’s add a bulleted list to our page. Add the following code directly beneath your </h1> end tag:
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
The <ul> element is code for “Unordered List” and the <li> element is code for “list item.” Just like your grocery list on a scrap of paper, a list is made up of multiple list items. This is reflected in our code; our many list items are nested inside our single unordered list.
Saving Your Document
Now is a good time to save our document and then see how it looks in our web browser. From within your text editing program, click File, and then Save. Just so we’re on the same page, let’s agree to name the file “test.html”. It is very important that our file ends with the “.html” extension. This tells our computer what type of file our document is (a web page of course!). 
If you’re on a Windows PC, be sure to click the dropdown box below the file name input, labeled “Save as type:” and select the option “All files”. This will insure your document is saved in the correct format. Go ahead and save your document.
Viewing Your File In a Web Browser
Now navigate to wherever you chose to save your file (I recommend creating a new folder on your desktop to store all of your learning files) and double click “test.html.” This should open our page in a web browser and you should be greeted by a rather simple looking header which reads “This is a big bold heading” followed by a bulleted list of grocery items.
Giving Your Page a Title
You may have noticed that our page doesn’t have a title (usually displayed in the title bar of our web browser). Web page titles are an absolute necessity, as they play a huge roll in search engines being able to find your pages. Now that you are a little more familiar with the syntax of XHTML, let’s go ahead and give our page a title.
The <title> element should be stored in a new section of the page named <head>. In future lessons you will learn more about the <head> element, but for now just know that it is used to hold our page’s title. Add the following code directly below our <html> start tag:
<head>
<title>My First Page</title>
</head>
From within your text editing program, save your document, and then switch to your web browser window and refresh the page (pressing Control + R refreshes on a Windows PC, and Cmd + R refreshes on a Macintosh computer). Notice that our page now has a title in the web browser title bar.
Just One Last Step!
Before we finish this lesson, let us add two more bits of code that will help all web browsers better understand our code. First, we are going to edit the start tag for our <html> element to match the code below:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Also, insert the following line of code directly below the <head> start tag:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
This marks the first time you’ve seen an equal sign or quotation marks inside an XHTML element. You will learn about this new syntax in the next lesson (XHTML Attributes and Values) but for now just be content with copying and pasting this code and knowing that it makes your page complete! You just wrote a 100% valid web page from scratch! By hand! That is more than some professional web developers can say.
Remember, no one ever promised that your first web page would be beautiful! What’s important is that you now know how to write your own XHTML code and create basic web pages. You may think “Yes, but I don’t know all of the element codes. Without someone telling me which element to use to describe a piece of content I’ll be lost!” Let me offer you some words of comfort: you already know more than you realize. I would estimate that 95% of websites use the same basic collection of XHTML elements that a beginner can master quickly and easily. Follow the rest of my lessons and you will be completely proficient in writing XHTML in no time!
For your reference, here is the code we just put together, in its entirety:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My First Page</title>
</head>
<body>
<h1>This is a big bold heading</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>
XHTML Lesson 1: What is XHTML?
Are you a graphic designer who needs to convert a Photoshop layout into a dynamic web page? If you want your website to be accessible, quick-loading, and easy-to-edit you will need to learn a computer language named XHTML.
<p> is for Paragraph
XHTML is the language that web pages are written in; it is the code that your web browser uses to assemble the pages you view. For example, you recognize this block of text as a paragraph, but your web browser doesn’t understand the word “paragraph.” Instead, the HTML code for “paragraph” is <p>. HTML codes (also known as elements) are wrapped in brackets. For example, the HTML code for “image” is <img>.
In short, XHTML is a language used to describe content; we give different types of content their own different and semantically chosen labels. Before we go any further it is important to note that XHTML is NOT for adding style (colors, fonts, sizes, background images, etc…) to web pages. That is what Cascading Style Sheets (CSS) are for. XHTML is for raw content and raw content only. This idea of separating content and style (presentation) is important, and will become clearer as you move through these lessons. For now, forget about it, and enjoy the rest of this lesson.
What Does XHTML Look Like?
Let’s kick things off by using XTHML code to actually create a couple paragraphs of text. Here is what the code would look like:
<p>This is our first sample paragraph. This paragraph has only two sentences.</p> <p>This is the second paragraph; with only one sentence!</p>
It is important to note that both of our paragraphs were followed by a </p> code. This “end tag” corresponds with the opening <p> start tag, and together the two tell the web browser where we want our paragraph element to start and end.
It’s (almost) That Simple!
That’s it! You just taught yourself the fundamentals of XHTML! Now you just need to learn the codes for all the different elements that make up a page. For example, aside from paragraphs (<p>) and images, (<img>) what elements do you commonly find on web pages? Below is a short list of some of the most basic HTML codes. Don’t worry about memorizing them right now, just take a quick look and notice how intuitive most of the codes are.
<div>Division or Section of Page</div> <a>Link</a> <ul>Unordered List</ul> <li>List Item</li> <h1>Header (most important header)</h1> <h2>Header (second most important header)</h2> <h3>Header (third most important header) etc…</h3> <table>Table</table>
It’s not THAT intimidating, right? Now we just need to learn the rest of the elements, how they relate to one another, and how to organize them within a page. In our next lesson, you will learn how to use XHTML code to create and save a page and view it in your web browser.
