Building a Home Page: A Look Behind the Curtain
What You’ll Learn in This Hour:
. How to read and edit basic HTML code in Code view
. How to import text from Microsoft Word and other documents . How to clean up imported code using Code and Design views
In Hour 3, “A Website Is Really Just Text: Build One in 5 Minutes,” you built a basic web page using functions similar to those in a word-processing program. But that is just half the story: In web design, what happens behind the curtain is what really matters. It’s time to learn some basic HTML and see how the code affects the con- tent. To do this, you build the basic structure of the home page of the MyKipple site.
Opening and Editing an Existing File Using Code View
If you haven’t already done so, open the default.html file you worked on in Hour 3.
The MyKipple site should open automatically when you open Expression Web 4. If not, you can find it by selecting Open Site from the Site menu or from the drop- down menu of the Open icon on the Common toolbar (see Figure 4.1).
ptg7913109 The Open Site dialog lists all the sites created in Expression Web 4 (see Figure 4.2).
When you create or manage a website with Expression Web 4, the program auto- matically generates a shortcut to facilitate easy access to the site from this list. If you can’t find the project on this list, you can navigate to it as you normally would. If you followed the directions in Hour 3, the project is in the My Web Sites folder under Documents.
FIGURE 4.1 The drop-down menu under the Open icon on the Common tool- bar gives you quick access to open files and sites with- out having to go to the main menu.
FIGURE 4.2 The Open Site dialog displays all the web- sites you created in Expression Web 4 (here seen with the My Kipple project).
The Open Sites dialog isn’t restricted to local sites. You can also use it to open and manage external websites both through Hypertext Markup Language (HTML) and File Transfer Protocol (FTP) if you have the necessary permissions to access the sites. If you use the Browse button or insert an address that Expression Web 4 does not already have on the list, the Add to Managed List box becomes active, and you can give the site a friendly name. In fact, you can use Expression Web 4 to make changes to live websites in real time.
Before going any further, let’s look at what is happening in the page’s code. Select Split view using the button at the bottom of the pane to reveal both Code view and Design view. Click anywhere on the heading and then click the h1tag on the Block Selection box. This highlights the content affected by the h1style in both Design
By the Way
ptg7913109 view and Code view (see Figure 4.3). In Design view, you see a box with gray striped
shading above and below. The gray areas are the default top and bottom margins for the h1tag. In Code view, you see the text buffered or wrapped on both sides by code tags. These tags tell the browser to display the text in the h1heading style.
FIGURE 4.3 When you click an element in either Code or Design view, that object is highlighted in both views for easy reference.
HTML is a basic markup language that can be summarized in one simple rule:
Everything is wrapped between a beginning and an end tag. All beginning tags con- sist of a “less-than” bracket (<), the tag name and/or function, and a “greater-than”
bracket (>). End tags look much the same, but with the addition of a forward slash (/) before the content. In this example, <h1>tags wrap the heading like this:
<h1>This is my first web page!</h1>
You now have two ways to change the appearance of your content. You can use the Style drop-down menu, as you learned in Hour 3, or you can go into Code view and manually change the style. Try changing the heading <h1>and</h1>tags to para- graph<p>and</p>to see what happens in Design view.
By the Way
To use Design view to see changes you made in Code view, you need to click inside the Design view area or save the page. This is because as you change the code in Code view, you are temporarily breaking the code. Rather than trying to display broken code, Expression Web 4 waits for you to tell it when you finish edit- ing before it refreshes the WYSIWYG (What You See Is What You Get) editor.
ptg7913109 Notice that when you change the beginning tag, Expression Web 4 highlights the
end tag in yellow and red to tell you that your code is broken (see Figure 4.4).
Likewise, the status bar at the bottom of the workspace puts up two warning signs:
The first one tells you that it detects an HTML incompatibility; the second one tells you that it detects a code error. When you change the end tag to match the start tag, the errors go away.
FIGURE 4.4 When Expression Web 4 discov- ers a code error, it high- lights the error with a yellow background and red text and shows a warning sign in the status bar.
Error in highlighted code
Code error warning
By studying the code, you see that all the different styles you applied in Hour 3 are actually just code tags:
. Heading 1 <h1>
. Heading 2 <h2>
. Paragraph<p>
. Emphasized (italicized) <em>
. Strongly emphasized (bold) <strong>
. Unordered (bullet) list <ul>
. Ordered (numbered) list <ol>
. List item for both lists <li>
ptg7913109 Looking at the rest of the code, the <body>tag, which wraps all the content, tells the
browser that this is the content to display. The <head>tag contains all the meta information that is available to the browser but that the browser does not display within the page. Meta information includes the page title displayed at the top of the window, info about the designer, and so on. Finally, the <html>tag, which tells the browser that the following content is written in the HTML language, wraps both the
<head>and<body>sections. Scroll to the bottom of the Code view and you can see the</body>and</html>tags that close the page.
Importing Styled Text from a Document
What is a website if not a source of information? You need some real content to work with. Right now, the default.html file contains whatever text you inserted dur- ing Hour 3. The next step is to introduce some real content. In most cases, you will either be provided with or write your own content in some form of word-processing software. Your first instinct is probably to cut and paste this content straight into your page. The problem is that, depending on what word processor you use, a large amount of legacy formatting is likely to be attached to the document—code that becomes difficult to work with after it is imported into an HTML file. Newer versions of word processors, such as Microsoft Word 2010, have less of this code clutter, but simple copy-and-paste will still leave you with code that has no place in a website.
To import the text correctly, you need to use a built-in tool in Expression Web 4.
In the lesson files for this hour downloaded from the book site is a Microsoft Word document called homepagetext.doc (see Figure 4.5). Open this document in
Microsoft Word, and you see a standard document with headings, subheadings, and some text.
ptg7913109 The next step is to move all this content over to the default.html file and translate
the styling to standards-based markup.
With the default.html file open in Design view, select and delete all existing content.
Then, go to the homepagetext.doc file in your word-processing software, select all the text, and press Ctrl+C (universal shortcut for Copy) to copy the content. Next, go back to the default.html file in Expression Web 4, place your cursor at the top of the page, click Edit on the main menu, and select Paste Text from the drop-down. This opens the Paste Text dialog (see Figure 4.6).
FIGURE 4.5 Homepagetext.
doc as it appears in Microsoft Word.
FIGURE 4.6 Expression Web 4 has a dedicated func- tion for pasting text.
ptg7913109 The Paste Text dialog provides you with five options:
. Plain text
. One <pre> formatted paragraph . Many <pre> formatted paragraphs . Normal paragraph with line breaks . Normal paragraphs without line breaks
If you click each of them, you get a further description of each option in the Results section. For most purposes, including ours, the last option—Normal paragraph with- out line breaks—is the correct one. This Paste function inserts the text, wrapping each line or paragraph in its own <p>tag. This makes it easy to edit later.
Select the last option and click OK, and Expression Web 4 pastes in your content, wrapping each section in its own set of <p>tags.
By the
You don’t need Microsoft Office or Microsoft Word to open Word (.doc) documents. Way
If you don’t have one of these applications installed, you can still access the les- son file by downloading and installing OpenOffice—an open source office suite that contains much the same kind of programs as Microsoft Office 100% free of charge. OpenOffice can be downloaded from www.openoffice.org.
Advanced Tag Editing
With the text pasted into the document, you now have a page consisting entirely of paragraphs. But looking at the Word document, you see that the original text had headings, subheadings, and even an indented quote section. To finalize the conver- sion from document to web page, you need to apply the correct markup tags for each of these sections. You can do this either by using the Style drop-down on the Common toolbar or by using the Quick Tag Editor found at the top of the View panel.
To see how it works, click the first line of text in Design view. At the top of the View panel you will now see two tags in the Quick Tag Selector: <body>and<p>(see Figure 4.7). The Quick Tag Selector shows you what tags are applied to the selected element and also in which order they are applied, from the outermost on the left to the innermost on the right. If you hover your mouse over the <p>tag, you’ll see a small down arrow appear on the right side. Clicking this arrow reveals the Quick Tag Editor drop-down menu (see Figure 4.8).
ptg7913109 From the drop-down menu, you can select the tag or the contents within the tag and
edit, remove, or add additional tags directly. This tool is especially useful when you’re changing or adding new tags because it changes both the beginning and end tags at the same time, thus ensuring you don’t inadvertently break the code on the page.
To change the first paragraph to Heading 1, place your cursor on the first paragraph in Design view, activate the Quick Tag Editor for the <p>tag, and select Edit Tag.
This opens the Quick Tag Editor dialog. In the dialog, change <p>to<h1>and click the green check mark on the far right (see Figure 4.9). This changes both the begin- ning and end tag to h1and the first paragraph is now a heading. You can use the same technique to apply <h2>tags to the subheadings on the page.
FIGURE 4.7 The Quick Tag Selector pro- vides informa- tion about the currently applied tags and their order.
FIGURE 4.8 The Quick Tag Editor drop- down menu provides quick access to tag-editing and selection features.
FIGURE 4.9 The Quick Tag Editor allows you to change the beginning and end tags of any tag on the page.
ptg7913109 Looking at the Word document again, you’ll notice the fourth paragraph is
indented. In traditional publishing this is called a pull quotebecause it’s a quote that is literally pulled out of the regular content and highlighted in a different way.
HTML has a special tag for this type of content: <blockquote>. To match the Word document, use the Quick Tag Editor to change the paragraph tag surrounding the fourth paragraph to the <blockquote>tag.
With all the tags changed in your page, preview the page in your browser and note that the formatting now matches the Word document (see Figure 4.10).
FIGURE 4.10 With some sim- ple formatting, the web page looks like the original Word document in Internet Explorer 9.
ptg7913109
Summary
In this hour, you took a trip behind the scenes and learned a bit about how an HTML page works. You saw that the code boils down to wrapping the content in a beginning and an end tag and that changing these tags can be done from Code view and Design view. You got a preview of some of the code-editing tools available in Expression Web 4, the Quick Tag Selector, and the Quick Tag Editor, and you also learned how to import text content from external files and format the code so that it matches the original document. In Hour 5, “Getting Connected with (Hyper)Links:
The Cornerstone of the World Wide Web,” you create a second page and add hyper- links to your pages to make them interactive.
Q&A
Q. Why can’t I simply cut and paste the content from a Word document straight into my web page?
A. A word processor such as Microsoft Word inserts a large amount of hidden style code in documents. When you copy and paste text from these pro- grams, all that code quite literally tags along. One example of this is pull quotes. When you press the Tab key in a word processor to visually distin- guish a long quote by indenting it, you actually insert a block of style code defining how far in to indent the content. Therefore, when you copy and paste the content to Expression Web 4, that style code follows along and clutters up the code. This indentation code is unnecessary in HTML because there is already a dedicated tag for long quotes called <blockquote>. To avoid this problem, use the Paste Text command found under Edit on the main menu. This command strips the style code from copied text and inserts it as plain text with only the tags you request. Yes, using the Paste Text command forces you to apply the different heading and other tags manually, but it also ensures that all your code is up to standards, and that’s what matters in the end.
Workshop
The Workshop has quiz questions and exercises to help you put to use what you just learned. If you get stuck, the answers to the quiz questions are in the next section.
But try to answer them first. Otherwise, you’ll be cheating yourself.
ptg7913109
Quiz
1. In Code view, how do you tell the browser to treat one line of text differently from another?
Answer
1. To separate and group content, HTML uses tags. Any content placed between a beginning and an end tag is semantically defined by that tag so that browsers understand paragraphs as paragraphs, headings as head- ings, unordered lists as unordered lists, and so on. When you apply a par- ticular style to content in Design view, you are actually telling the browser to find content wrapped by a certain tag and then apply the defined styles to this content.
Exercise
Find a Word document you already have on your computer or write a new one.
Make sure it has several headings and subheadings along with bold and italicized content and a few lists. With the default.html file open in Expression Web 4, choose Save As under File, and select a new name (such as myTest.html) and save it. Delete all the content in your new file and import the content from the Word document.
Clean up the code so the formatting matches the original document, and all bold and italicized content is strong and emphasized instead. Save the file and test it in your browser to verify that it works properly.
ptg7913109
ptg7913109