Microsoft Expression Web For Dummies
You don't need programming experience to learn to use HTML, because HTML isn't a programming language; it's a markup language. The difference is that a programming language gives your computer direct instructions; HTML, by contrast, is a series of codes that signal your Web browser to display content in certain ways. These codes, or tags, surround the different elements on your HTML page. Some tags tell the Web browser what to display in the browser window, and some tags tell the browser information about the page and how it's written. Most tags open (<tag>) and close (</tag>), working in layers like Russian nesting dolls. Here's an example:
<body><para><em>Content goes here</em></para></body>
In this example, think of the <em> tag pair as the littlest doll. The <p> tag is the middle doll with the <em> doll inside it, and the <body> tag is the big doll with both the middle doll and little doll inside it.
The content that the tag displays on the page appears between the opening and closing tag. Here's some content added to the same HTML tags:
<body><para>This is a paragraph. The word <em>italic</em> is displayed in the browser in italics.</para></body>
Figure 14-1 shows this sentence in Expression Web, in both Code view and Design view:
Looking at the essential Web page parts
Every HTML page has the same structure and set of tags, regardless of the page's content. When you create a new HTML page in Expression Web, it sets up the basic structure for you and adds the required coding to the page. Table 14-1 lists the different parts and describes their functions. See HTML 4 for Dummies, 5th Edition, by Ed Tittel and Mary Burmeister (Wiley) for a more in-depth discussion of these parts.
| Part Name | Purpose |
|---|---|
| doctype | The doctype, or document type declaration, tells the Web browser which version of HTML or XHTML code the page is written in so that it knows how to display it correctly. The doctype appears at the top of the page. See the nearby sidebar "What's up, doctype?" for more information. |
| <html> | Tells the Web browser where the HTML code starts (<html>) and ends (</html>; this closing tag is always the last tag on the page). |
| <head> | Tells the Web browser how to display information that doesn't appear inside the main body of the page, such as the title (displayed on the Web browser's title bar) and which language the page is coded for. It can also contain other noncontent stuff, such as embedded styles or links to external style sheets or scripts that control dynamic behaviors on the page. The </head> tag closes the page's <head> section. |
| <body> | Tells the Web browser where the page's content-the stuff that's shown on the page inside the browser window itself-begins (<body>) and ends (</body>). |
Because HTML coding is basically just text, you can create an HTML page in any text editor. If you were to create a Web page from scratch, you would have to manually add all the tags and information listed in Table 14-1. Fortunately, Expression Web handles all that for you. Create a blank page (we show you how in Chapter 2), and the basic code gets added automatically to the page's code. Figure 14-2 shows a new, blank page with its code revealed.
When you specify a title for the page (we tell you how in Chapter 2), your title replaces <title>Untitled 1</title> in the <head> section. When you add content to the page in Design view, the content shows up between the <body> and </body> tags.
Taking a closer look at HTML elements
An HTML tag plus its content is an HTML element. An HTML element begins with the first opening angle bracket (<) and ends with the last closing angle bracket (>). The sidebar "Anatomy of an HTML element" dissects and explains an HTML element's essential parts and shows you their proper names.
You look at the top of your new, "blank" page, and this is what you see:
<!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">
This perplexing-looking mumbo jumbo is a document type declaration, or doctype. It introduces the Web browser to the page and tells it which version of HTML the page speaks so that the Web browser can display it properly. (It also tells Expression Web which code format to expect so it can alert you if something isn't up to snuff.) The example shown here is the default setting for new pages created in Expression Web: XHTML 1.0 Transitional. Web designers use this standard as the default because it's the most compatible with the greatest percentage of Web browsers now in use and also complies fully with current standards set by the World Wide Web Consortium (the folks who set the road rules for traffic on the Web). For most (perhaps even for all) Web sites you create, the Expression Web default doctype is ideal. If not, someone on your design team is highly likely to know more about HTML and doctype declarations and can let you know which one to pick. You can change the doctype by choosing Tools
If you want to find out more about doctype declarations, read up in your HTML reference. Or just type doctype into your favorite search engine to get more information than you could possibly ever read.
An HTML element can be either block-level or inline. Here's the difference:
-
Block-level elements: If the HTML tag starts a new line with its opening tag and starts another new line after its closing tag, it's a block-level element. Paragraphs (<p>) and headings (<h1>-<h6>) are all block-level elements. An easy way to understand block-level HTML elements is to picture them as separate paragraphs on a page. Each paragraph starts on a new line. When the paragraph ends, a break occurs and then the next paragraph comes along. Block-level elements can contain inline elements and other block-level elements.
-
Inline elements: An inline element goes with the flow without interrupting anything. An inline element inserted into a block-level element changes just the part that its tags surround, but leaves everything else the same. Using our paragraph analogy, an inline element is a word or phrase within a paragraph that has been made bold or italic. (In fact, <em> and <strong> are the inline HTML elements that make the text they surround italic and bold, respectively). Inline elements cannot exist outside block-level elements; they must be nested inside a block-level element (like words within a paragraph). An inline element can contain other inline elements, however.
An HTML elementdescribes what appears on the page and its content. Here's an HTML element that displays a first-level heading on a Web page:
<h1>Piano Tuners of Portland< /h1>
The content-what's displayed on the page-appears between the opening <h1> tag and the closing </h1> tag.
Some HTML elements contain attribute and valuepairs that describe something about the element. The following diagram shows two HTML elements with their attribute/value pairs identified. The first one contains all the information for displaying a picture on the page: the name of the picture file, its width and height, and its alt text (refer to Chapter 5). The second one contains a class attribute/value pair so that a class-based style rule (refer to Chapter 7) can be applied to it:
An HTML element always has this format:
<tag attribute="value" attribute="value" >content</tag>
A few HTML elements combine their opening and closing tags into one set of angle brackets. An example of this is the <img> element.
By the way, XHTML, the latest version of HTML (and the version that Expression Web writes by default) is picky about exact syntax. If you have older Web pages that you want to bring up to current XHTML code standards, you have to do some code housecleaning. See Chapter 18 for tips on how to update old pages; you can find this bonus chapter online by browsing for this book's page at http://www.dummies.com.
Table 14-2 describes some of the most commonly used HTML elements for building your Web pages.
| Block-Level HTML Tag | HTML Element That It Defines |
|---|---|
| <body> | Defines the Web-page content itself; all content that appears inside the browser window falls between the <body> and </body> tags. |
| <h1>–<h6> | Used to indicate first-through sixth-level headings; the content of the heading appears between <h x > and </h x >. |
| <p> | Specifies a paragraph; the content of the paragraph appears between <p> and </p>. |
| <ol> | Defines a numbered list (ordered list); these tags indicate the beginning (<ol>) and the end (</ol>) of the numbered list. |
| <ul> | Defines a bulleted list (unordered list); these tags indicate the beginning (<ol>) and the end (</ol>) of the bulleted list. |
| <li> | Defines each item within a list (either ordered or unordered); each list item appears between an opening <li> tag and a closing </li> tag. If you want to get technical, a list item has its category-called, surprisingly, list-itemHTML element. |
| <div> | Specifies a container that surrounds other HTML elements, enclosing them between <div> and </div>; use div tags to define the different parts of your Web page's content, such as navigation, page banner, footer, content area. In HTML alone, they're not much use, but combined with CSS, they give you all sorts of control over layout and styling. We talk about the <div> tag and how to use it in Chapter 8. |
| Inline-Level HTML Tags | |
| <a> | Specifies an anchor (hyperlink); the attribute/value pair <a href=“destination”> in the opening tag defines the hyperlink's destination; the hyperlink source (the thing on the page that gets clicked) appears between the opening tag and the closing </a> tag. |
| <strong> | Makes all text between the <strong> and </strong> bold by default; you can change the appearance by selecting this element and creating a style rule. |
| <em> | Makes all text between <em> and </em> italic by default; you can change the appearance by selecting this element and creating a style rule. |
| <span> | Allows you to define a chunk of content within a block-level element or within another inline element (such as a word in a sentence) in order to apply a style to it. The <span> tag is the inline equivalent of a <div> tag. |
| <img> | Specifies an image (picture); because this tag has no closing tag, all information about the image is inside the tag (<img src="imagefilename"/>). |
Structuring HTML content
Web-standards experts often banter about the term well-formed, or well-structured, documents. They're not talking about whether the content is worth reading (you can write anything you want), nor are they talking about whether the page has been checked for spelling errors and typos (although we suggest that you do that). The experts aren't even talking about whether the page has an attractive layout. They're talking about structuring a document so that it follows a logical order and makes sense by using the right HTML elements for the right parts. Just like your composition teacher harped on the importance of having good essay structure-with a topic sentence, supporting paragraphs, and a conclusion-your Web page's content should follow a logical structure.
Figure 14-3 shows an example of well-structured HTML content in Design view. Figure 14-4 shows the code for the content in Figure 14-3.
Using a logical structure like this one can help you create and organize content for your Web pages more quickly by breaking information into chunks. A well-structured content page makes it a snap to prepare the page's content for viewing on different devices (such as mobile phones, PDAs, or printers) just by applying a different style sheet. It also ensures that the content makes sense with no styles at all, in case your style sheet isn't accessible to your page's content.