XHTML/HTML Intro and Basics

Introduction

HTML stands for Hyper Text Markup Language, and it's one of many coding languages on the Internet. XHTML stands for Extensible Hyper Text Markup Language. These languages are very similar, but XHTML is the newest one that the Web is slowly being converted to. Webpages coded in XHTML are Web Standards compliant, make sure your site displays properly on cell phone Internet browsers, etcetera, so I'm going to be giving you the basics of XHTML.

Coding a Simple Page

If you think this is going to be hard, you're wrong! HTML is actually very simple and straight-forward. Let's start off our page with our DOCTYPE. A DOCTYPE tells the Internet browser which HTML or XHTML specification you're using (for more information, here's our tutorial on DOCTYPES.) For this tutorial, I'm going to be using the XHTML Strict DOCTYPE, the same one this website uses. Open up a simple word processing program, such as Notepad (Start > All Programs > Accessories > Notepad, if you're using Windows) and copy and paste the code chunks I give you into a new document so you can follow along.


<!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" xml:lang="en">

Now that we've got that done, it's time to move on to two more tags- the <head> tag and the <title> tag. The head tag is where information that your visitor doesn't see goes, such as the inclusion of a Cascading Style Sheet (more on that later.) Just for this tutorial, we're only going to be including the <title> tag. This tag contains the text that your visitor sees at the top of their Internet browser window. For example, when you go to Google, and the top of the window says "Google." Copy and paste the following after your DOCTYPE:


<head>
<title>YOUR WEBPAGE TITLE HERE</title>
</head>

Before we can start adding content to our page, we need to let the Internet browser know that we're going to start. This is where the <body> tag comes in handy. Add <body> after the ending <head> tag in your document. Now, we can start adding our content. First we'll need a header. There are six different headers, one being the biggest, six being the smallest. The most important header, <h1> goes first. Then comes the less important ones. For example, the h1, or "Header 1" on this page is HTML/XHTML Intro and Basics, then comes Introduction, Coding a Simple Page, etcetera. Then, we need to start a paragraph by using the paragrah tag, <p></p>. Add this chunk of coding to your page:


<body>
<h1>PAGE HEADING</h1>
<p>PAGE TEXT</p>

The last thing we have to do is close the page by adding two simple tags:


</body>
</html>

I know you're wondering, "Where did the <html> tag come from?" If you're not, you are now. In HTML, instead of a DOCTYPE, some people just put <html>. In correct markup (coding) the DOCTYPE takes the place of the <html> tag, but we still have to end it. And there you have it, a simple webpage! Not too difficult, now was it? If you'd like to view your page in your Internet browser, save it as PAGENAME.html (make sure the ending is .html!), then right click on it, go to "Open With" and click your Internet browser. Looks rather...plain, doesn't it? Not to worry, we're going to jazz it up in the section.

Adding On to Your Page

There are tons and tons of things you can do to your page, and I'm going to tell you some of the most useful and common ones. First, we'll look at how to link other webpages:


<a href="WEBPAGE URL HERE">LINK NAME HERE</a>

You'll need to add in the URL of the webpage you'd like to link to. What's a URL, you ask? It stands for Uniform Resource Locator, and is a fancy way of saying "Website address." For example, http://google.com is Google's URL. Where it says "LINK NAME HERE" is the title of your link. In other words, the text that the link will show up as. Let's use the Google example again and say, for some reason, you're linking Google. You'd most likely put "Google" as the link name to let people know what they're clicking on. As with all tags, the link one must be ended as well, or the rest of your page will turn into one giant link. Now, I'm going to show you how to add images to your webpage.


<img src="IMAGE URL HERE" alt="ALT TEXT HERE" />

To show your images on the web, you must upload them so that they can have their own URL, too. Good image uploading sites are ImageShack, TinyPic, and Photobucket. Once your image is uploaded, just copy and paste the URL (which starts with http://, remember). Next, we have something called "alt text." This is the text that comes up when you hover over an image. If you're wondering where the ending tag is, the " />" is the ending tag. This next tag is very simple, but oh so necessary! It's the line break tag, because if you just press the Enter key in your markup, it will not make a line break! The tag for this is <br />. Its opening and closing tag is all-in-one.

Final Words

If you'd like to learn more (which of course you do), W3Schools and TutorialTastic are two great sites that I use practically daily.

XHTML/HTML Intro and Basics

Introduction

Tags

Coding a Simple Page

Adding On to Your Page

Final Words

Navigation

Affiliates

Sisters