Behind the scenes

Welcome to a three-part exercise that shows you how to create a basic news Web site using html coding.

The goal is not to have you master html, but to help you understand how coding works. With that knowledge, you will know more about what can and can't be done and you will be better able to troubleshoot Web authoring programs such as Dreamweaver. But this is also a way to get online without expensive programs. Basic word programs will take you a long way when you master the basic codes in this exercise.

Review: Basic HTML
Part 1 shows you how to take a news story from a word program and add coding to turn it into a Web page.
Part 2 shows you how to work with tables to organize the page. You will see how to add a photo and a cutline.
Part 3 guides you through the steps of creating the front "page" of a news site using tables within tables.

Part 1

Formatting the basic news story

Start with the story typed into a word-processing program. Let's use this:

Associated Press
Published January 26, 2006

SHANGHAI -- Google Inc. on Wednesday launched a search engine in China that censors material about human rights, Tibet and other topics sensitive to Beijing, but it defended the move as a trade-off that grants Chinese greater access to other information.

Within minutes of the launch of the new site bearing China's Web suffix ".cn," searches for the banned Falun Gong spiritual movement showed scores of sites omitted, and users were directed to articles condemning the group posted on Chinese government Web sites.

Searches for other sensitive subjects such as exiled Tibetan leader the Dalai Lama, Taiwan independence and terms such as "democracy" and "human rights" yielded similar results.

Google says the new site aims to make its search engine more accessible in China, thereby expanding access to information. But it has been criticized by media watchdog Reporters Without Borders, which also has chided Yahoo Inc. and Microsoft Corp.'s MSN.com for submitting to China's censorship regime.

Note: An unindented format where there is double-line spacing between paragraphs is more legible online than the format we're used to seeing in print publications.

Add in a title and the basic codes for html, breaks and paragraphs (in red):

<html>
<head>
<title> Google censors own searches in China</title>

</head>
<body bgcolor="FFFFFF">

Associated Press<br>
Published January 26, 2006<p>

SHANGHAI -- Google Inc. on Wednesday launched a search engine in China that censors material about human rights, Tibet and other topics sensitive to Beijing, but it defended the move as a trade-off that grants Chinese greater access to other information.</p>
<p>
Within minutes of the launch of the new site bearing China's Web suffix ".cn," searches for the banned Falun Gong spiritual movement showed scores of sites omitted, and users were directed to articles condemning the group posted on Chinese government Web sites.</p>
<p>
Searches for other sensitive subjects such as exiled Tibetan leader the Dalai Lama, Taiwan independence and terms such as "democracy" and "human rights" yielded similar results.</p>
<p>
Google says the new site aims to make its search engine more accessible in China, thereby expanding access to information. But it has been criticized by media watchdog Reporters Without Borders, which also has chided Yahoo Inc. and Microsoft Corp.'s MSN.com for submitting to China's censorship regime.</p>
</body>
</html>

Format the byline and date (we'll use bold followed by italics; many sites omit the date, change the style or place it at the end):

<body bgcolor="FFFFFF">
<b>Associated Press</b><br>
<i>Published January 26, 2006</i><p>

Add a headline (in green, below):

<body bgcolor="FFFFFF">
<h2>Google stymies Chinese with blocked searches</h2>
<b>Associated Press</b><br>
<i>Published January 26, 2006</i><p>

Change the headline''s typeface (see the blue coding, below) to one that's more appropriate for the Web: a sans-serif. The default typeface is Times New Roman, a serif type. Give three choices of typeface; the browser will look for them in order.

<font face="ariel,helvetica, sans-serif">
<h2>
Google stymies Chinese with blocked searches</h2> </font>
<b>Associated Press</b><br>

Save your story as google.html and preview it in a browser. It should look something like this:

Google stymies Chinese with blocked searches

Associated Press
Published January 26, 2006

SHANGHAI -- Google Inc. on Wednesday launched a search engine in China that censors material about human rights, Tibet and other topics sensitive to Beijing, but it defended the move as a trade-off that grants Chinese greater access to other information.Within minutes of the launch of the new site bearing China's Web suffix ".cn," searches for the banned Falun Gong spiritual movement showed scores of sites omitted, and users were directed to articles condemning the group posted on Chinese government Web sites.

Searches for other sensitive subjects such as exiled Tibetan leader the Dalai Lama, Taiwan independence and terms such as "democracy" and "human rights" yielded similar results.

Google says the new site aims to make its search engine more accessible in China, thereby expanding access to information. But it has been criticized by media watchdog Reporters Without Borders, which also has chided Yahoo Inc. and Microsoft Corp.'s MSN.com for submitting to China's censorship regime.

Keep this story. You can insert additional coding in the next tutorial and see what it looks like with a chart or a picture and cutline.

Next: Talking tables >>>