HTM-what? Do I have to learn HTML or XHTML?

XHTML Although you don't have to learn HTML to creat Web pages in Dreamweaver, having a basic concept of how it works does come in handy.

Here's a short, crash course to get you started.

Contrary to popular belief, HTML isn’t a programming language.

HTML a markup language: That is, HTML is designed to mark up a page, or you could say, provide instructions for how a Web page should look when displayed in a web browser (what is a web browser?).

HTML is written by using tags, which serve as markup instructions that tell a Web browser where to place all of the images, text, and other things on the page, and what fonts, colors, and other formatting to use. For example, to apply italic formatting to text, you insert the HTML tag <em>, which stands for emphasis, where you want the italics to begin and end. (If you use a program, like Adobe Dreamweaver, when you click on the italics icon, Dreamweaver inserts the tag for you)

Most tags in HTML include both an opening tag and a close tag. Open tags look like this <open> and close tags look like this </close>. You'll never use tags for open and close, but you can remember that the close tag is indicated by the forward slash / in the second of any pair of tags. (Open and close tags usually match, at least mostly), ,.

The following markup would make the title of my latest Dreamweaver For Dummies book, appear in italics:

<em>Dreamweaver CS5 For Dummies.</em>

The difference between HTML and XHTML

XHTML, a stricter version of HTML, is the recommended language to use to meet the highest standards of Web design today. Among the differences between the two languages, XHTML must be written in lowercase letters; in HTML, it doesn’t matter whether tags are upper or lowercase. Similarly, XHTML requires that all tags include a close tag. Rest assured all templates and code examples in this book follow the XHTML standard.

To see what the code behind a Web page looks like:

In most browsers, choose View > Source.
If you’re using Dreamweaver, as shown in this figure, you can click the Split button (upper-left corner of the workspace) to see the code and the design areas of the program at the same time in Split view.
Tip: Split view in Dreamweaver is a useful way to keep an eye on what’s going on behind the scenes and, as a bonus, you can learn a lot of XHTML as you go along.

Split view in Dreamweaver

Use the Split view option in Dreamweaver to display the page design and the code behind the page.

If you select something in Design view, like the headline shown in this figure, the same text is highlighted in Code view, enabling you to easily find your place in the code.

Dreamweaver offers three view options:

* Code: In Code view, you see only the XHTML and other code.

* Design: In Design view, you see only the page as it should be displayed in a Web browser.

* Split: In Split view, the page is dived so you can see the code in one part of the workspace and a view of the how the page should be displayed in a Web browser in the other part.

If at first glance you think that XHTML code looks like hieroglyphics, don’t give up too quickly. With just a little training, you can start to recognize at least some common tags, like the <h1> tag (heading 1 tag) that was used to format the headline on the page shown in this figure.

A few points to help you better understand XHTML:

In XHTML, all tags must include the closing slash. A few tags can stand alone, such as the <br /> tag, which adds a line break. XHTML tags must have a closing tag, even if there is only one tag, and close tags always contain a forward slash (/). As a result, the line break tag in HTML looks like <br>, but in XHTML, it looks like <br />.
XHTML includes many tags that are designed to be hierarchical. Examples are the <h1> through <h6> (heading 6) tags, which are ideally suited to formatting text according to its importance on a Web page. Reserve the <h1> tag for the most important text on the page, such as the top headline. <h2> is ideal for subheads or secondary headings, <h3> for the third level of headings, and so on. A headline formatted with the <h1> tag looks like this:

<h1>This is a headline</h1>

Some tags are more complex, and the open and close tags don’t always match. More complicated tags, such as the tags used to create links or insert images into pages, are more challenging to use because they include link information, and the close tag doesn’t always match the open tag.
For example, the code to create a link to another Web site looks like this:

<a href="http://www.digitalfamily.com">This is a link to DigitalFamily.com</a>

At its heart, XHTML is just text, and believe it or not, you can write XHTML in a plain-text editor as simple as Notepad, SimpleText, or TextEdit. If you ever try it, however, you have to be careful to type all the code perfectly because there is no room for error or typos in XHTML.

After writing code yourself, even to create a simple page, you’re sure to quickly appreciate how well Dreamweaver writes the HTML code for you.

...

Featured Tutorial

Promote Your Web Site

HTM-what? Do I have to learn HTML or XHTML?

The difference between HTML and XHTML

To see what the code behind a Web page looks like: