chapter w authoring your own websitewps.prenhall.com/.../objects/14087/14425332/chapter_w.pdfchapter...

CHAPTER W

Authoring Your Own Website

In thIs chapter, you wIll

Create a website from beginning to end

Survey web authoring software

Enhance a website with hyperlinks

Learn about HTML structure and tools

how will this chapter help Me?Recall that each chapter provides three projects focusing on personal, academic, or technical career goals. Depending on your own interests, you might choose to complete any or all of these projects to help you achieve your goals.

Personal Project: I want to build my own personal website with links to other sites. I want to include a history of my family and family photos. What do I need to know to get started?

academic Project: My club built a website and has assigned me the job of testing the site before it goes live. I displayed it in my browser, and it looks fine. Is there anything more I need to do?

technical career Project: I work for a small company, and my boss asked me to build a company website. I need to know what software to use and how to get started.

JuMp rIGht InIf you want even more of a challenge, try proceeding directly to the Chapter Mastery Project at the end of this chapter. If you need help on the project, refer to the On Your Own activities in the chapter or use the web to do your own independent investigating. When you complete the project, you will have mastered the skills in this chapter. Then proceed to the other projects that require you apply your skills to new situations.

In this extra chapter, you build your own website from the ground up. You start by creating a simple web page and publishing it to a web hosting site. Then you learn how to add photos, links, and multiple pages to your website. In this chapter, you use a text editor to create the web pages. If you want to move on to build more complex websites, you can use better web authoring tools that are introduced at the end of the chapter.

Try to do each On Your Own activity without any help. But remember, if you need help, you can always refer to the solutions. These solutions are in the Chapter W Solutions document in the Extra Chapters folder on the DVD.

W-4 Jump right In! Essential Computer Skills Using Microsoft Office 2010

creating a website from Beginning to endA website is a collection of web pages and related files that a web server can present to a browser. Recall from Chapter 2, “Finding and Using Information on the Web,” that web pages are documents constructed using htMl. Each website has one page called the home page or default page. This page is presented to the browser if no particular page is requested.

htMl—Text used as commands in a text file to format fonts, colors, graphics, and hyperlinks. A browser is used to interpret the commands and display the document as a web page. HTML stands for Hypertext Markup Language.

The four steps to create a website are

step 1. Create the website pages. You can use a text editor to manually create the pages or use web authoring software that automatically does a lot of the work for you.

step 2. Test the website by displaying it in your browser.

step 3. Publish the website by uploading the files to the web server.

step 4. Test the website using the URL to the site.

text editor—An application such as Notepad or WordPad that creates and edits text files. Text in a text file contains no formatting and can be read by all word process-ing programs and many other programs.

web authoring software—An application used to create web pages that automati-cally generates the HTML text in the document.

create a website with text

In this chapter, we build a website about a family vacation. Our first step is to create a simple home page. Later in the chapter, we enhance this page and add a second web page to our website. We use the notepad application to create the pages so that you can learn how to write the HTML text without software doing it for you.

notepad—A text editor that comes with Windows.

chaPter W: Authoring Your Own Website W-5

On Your Own W-1

create a Web Page

FIGure w-1A simple web page is created containing a single line of text.

Do the following to create the web page:

step 1. Create a folder on your USB flash drive, hard drive, or another location given by your instructor. Name the folder website. All the files and subfolders for your website will be kept in this folder.

step 2. Open notepad. In the Notepad window, enter the following text and press enter:

To see just how simple creating a web page can be, let’s first create a web page that has only a single sentence. At the end of this activity, our very simple web page should look like that in Figure W-1.

Our family vacation this year was at the beach.

step 3. Save the file and name it Index.html. Do not allow Notepad to add the .txt file extension to the file.

step 4. Test the web page by viewing it in your browser. To do so, use Windows Explorer to locate the file and double-click it. The file opens in Internet Explorer.

Index.html—The default filename and extension of the home page on a website. Most web servers also allow the filename Index.htm or Default.html. Files with an .html or .htm file extension are HTML document files.


Websites can and do get much more complicated, but it’s nice to know they can be this simple. Now it’s time to publish the web page.

publish your website

Many websites offer storage space and services to host multiple websites, called shared web hosting. Some offer limited storage space and services for free.

On Your Own W-1

create a Web Page tip Some web servers require you be consistent with upper- and lowercase letters in filenames, whereas others don’t care. To avoid a problem when publishing a website, always be consistent with the case used in your filenames.

hint The solutions for the activities in this chapter are in the Extra Chapters folder on the DVD in the chapter w solutions file.For help, see solution w-1:

how to create a web page.

Solutions Appendix

shared web hosting—A single web server makes available multiple websites to the web.

To find a good free web hosting site, do a Google search on free web hosting. Be sure to read reviews about a hosting site before you use it. When using a web hosting site, gener-ally you must follow these steps:

step 1. Set up an account on the web hosting site, which requires your name, mailing address, and email address. The site also requires you decide on a password to your account.

step 2. Respond to an email sent to your email address. This response validates the email address. You can then log on to your web hosting account.

step 3. When you first log on, you need to explore the hosting site to find the page that provides the tools you need to set up your website. Look for how to set up your subdomain name and how to upload files to your website. Figure W-2 shows one example of this page, but your hosting site might look different. If you are having trouble navigating the site, look for a Help feature where you can find tutorials on how to get started.


FIGure w-2This Website Manager page on a web hosting site is used to set up your website.

step 4. Set up your subdomain name for your website. Figure W-3 shows the window when setting up the subdomain name myvacation.atwebpages.com. The name myvacation was provided by the user, and the name atwebpages.com was provided by the hosting site. When you set up a subdomain name, the hosting site creates a subfolder on the web server computer by this name.

subdomain name—A domain name that includes the domain name of the web hosting site and is unique for your site. For example, if the hosting site is awardspace.com, your subdomain name might be mywebsite.awardspace.com.


FIGure w-3Set up a subdomain name that others can use to find your website.

not Working? Use a different subdomain name than myvacation.atwebpages.com. That one is taken.

step 5. Post your web pages and related files to this subfolder. For one hosting site shown in Figure W-2, you click File Manager. Then you select your subdomain name and then the folder by that name. Finally, you see the area of the window shown in Figure W-4. First, verify the current folder is the folder you want. Then click Browse to locate the files on your local computer to upload. Your hosting site might work differently.


FIGure w-5The web page is published by the web server and displays in the browser window.

FIGure w-4For this sample website, upload files to the folder named myvacation.atwebpages.com.

Be sure one of the files you put in the subfolder is named Index.html or Index.htm. The web server sends out this web page when a user enters the URL myvacation.atwebpages.com in his Internet Explorer address box.

With this information in hand, you are now ready to publish your own website.

On Your Own W-2

Publish Your Website

Use Google.com to search for free web hosting sites and read some reviews about the sites. Select a site and set up an account. What subdomain name did you assign to your website?

Publish your Index.html file to the site. Open a new tab in Internet Explorer and enter the URL of your website in the address box. Your website displays. You are now an author of a website! For one web hosting site, the browser window looks like that in Figure W-5, but your URL will be different.

tip Although some hosting sites encourage you to purchase your own domain name, know this is not necessary when setting up a website on a hosting site. With shared hosting, you can use the domain name of the hosting site.

For help, see solution w-2: how to publish your website.

Solutions Appendix


You now know the bare-bones basics of authoring and publishing your own website. Let’s build on that knowledge by learning to use HTML tags.

add an htMl tag to the web page

Browsers use htMl tags in a web page document to format text and to add graphics and hyperlinks to the page.

htMl tag—Text in a web page document that a browser recognizes as a command rather than text to display. A tag is almost always enclosed in angle brackets < >.

In this part of the chapter, you learn to use one simple HTML tag, the line break tag <br>. A line break causes the text following the <br> tag to print on the next line. We begin by editing the Index.html file and inserting the <br> tag into the text.

hint To edit the Index.html file, you need to first open it using Notepad. To open the Index.html file in Notepad, know that you cannot double-click the Index filename because that action opens the file using Internet Explorer. Instead, you have to first open Notepad and then use the File menu in Notepad to locate and open the file.

On Your Own W-3

add a line Break tag to the Page

Do the following to learn how an HTML tag works:

step 1. Open notepad. Using the Notepad File menu, open the Index.html file stored on your local computer. Add a new line of text so that your screen looks like that in Figure W-6. Press enter at the end of the line.

FIGure w-6The Index.html file now has two lines of text.

tip When you make changes to the Index.html file, don’t use Microsoft Word to edit the file because Word automatically inserts many HTML tags into an HTML document. In this chapter, we use Notepad because it is a simple text editor that inserts into the file only the text we type.


understanding htMl structure and toolsLet’s take the Index.html file a step further by adding an HTML structure that is common to all HTML documents. An HTML document is divided into two areas: the header area and the body area.

On Your Own W-3

add a line Break tag to the Page

step 2. Save the file and view it in Internet Explorer. Notice all the text appears on one line. The problem is the browser does not recognize the hard return that Notepad entered into the file. A browser recognizes only text and HTML tags and not hard returns or other formatting commands.

step 3. Type the line break tag <br> at the end of the first line.

step 4. Save the file and view it in Internet Explorer. The text appears on two lines (see Figure W-7).

FIGure w-7The <br> tag in the Index.html file causes the browser to insert a line break.

hint As you edit a web page, keep the Notepad window open and the Internet Explorer window open. When you make a change in Notepad, click File and save on the menu bar. In Internet Explorer, click the Refresh button to the right of the address box to view your change in the browser window.

For help, see solution w-3: how to add a line Break tag to the page.

Solutions Appendix

header—In an HTML document, the header gives information about the document that is not always displayed by the browser. It contains the title of the web page displayed in the page tab of Internet Explorer. The header can give keywords that help a search engine such as Google find the page.

body—In an HTML document, the body contains the text and tags that are used to build the web page displayed in a browser window.

The <html> and </html> tags are used at the beginning and end of an HTML document. The <head> and </head> tags mark the header area. The <body> and </body> tags mark the body area. Figure W-8 shows the Index.html file open in Notepad with these tags added.


FIGure w-8The Index.html file with <head>, <title>, and <body> tags added.

FIGure w-9The <title> tag puts a title in the IE title bar and on the IE tab displaying the page.

When writing HTML, be sure to use hard returns, indentations, and double spacing to help people read the tags. But know that the browser ignores this formatting when displaying the web page. Table W-1 lists some common HTML tags. We use several of them in this chapter.

tip When HTML tags are used in pairs, the second tag always includes a slash /. For example, consider the <title> and </title> tags.

The <title> tag places a title for the web page in the Internet Explorer title bar and on the tab for the page (see Figure W-9).

hint Windows 7 comes with Internet Explorer version 8 and can be upgraded to Internet Explorer version 9. IE version 9 does not display the title of a web page in the IE title bar.


taBle w-1 Some HTML Tags

tag Description

<html> </html> Marks the beginning and end of an HTML document.

<head> </head> Marks the beginning and end of the header in an HTML document.

<title> </title> Goes in the header and marks the title of the web page. The title appears in the title bar of the browser window and on the IE page tab.

<meta name=“KEYWORDS”> Goes in the header after the <title> tag and gives words that a search engine uses to list the page in search results. Table W-2 shows an example.

<body> </body> Marks the beginning and end of the body in an HTML document.

<br> Inserts a line break.

<p> </p> Marks the beginning and end of a paragraph. A double space is inserted before and after the paragraph.

<h1> </h1>

<h2> </h2>

Provides six levels of headings or styles. Use headings to format titles on the page.

…

<h6> </h6>

<b> </b> Begins and ends boldface.

<i> </i> Begins and ends italics.

<hr> Inserts a horizontal line across the entire page.

<img src=filename> Inserts an image or graphic on the page. Replace filename with the location and name of the file, including the file extension. If no location is given, the web server looks for the file in the same location as the web page.

As you can see from Table W-1, some HTML tags work in pairs with a beginning and ending tag. When tags work in pairs, the last tag always includes a slash. Table W-2 shows a few examples of how HTML tags look when they are used.

Table W-2 Some Examples of How HTML Tags Are Used

example of tag results or Description of results

<h1>This Is My Title</h1> The text between the tags is formatted as a heading.

This is a <b>great</b> day! Results: This is a great day!

This is a <i>great</i> day! Results: This is a great day!

<meta name=“KEYWORDS” contents=“beach aquarium vacation”>

The three words increase the likelihood the site will be included in search results when either of these words is used in a search.

<img src=MyPhoto.png> The photo displays on the web page in place of the <img> tag.

tip HTML tags are not case sensitive, which means it doesn’t matter whether you use upper- or lowercase letters when typing a tag.


FIGure w-10The Index.html file uses HTML structure and tags to format the text.

Do the following to add text and HTML tags to the file:

step 1. Use Notepad to open the Index.html file. Add the <html>, <head>, and <body> tags to define the structure of the HTML document. Include in the header the title for the web page.

step 2. Save the file and display it using Internet Explorer. What changes do you see in the browser window after you add the <title> tags?

step 3. Add the tags and text to complete the web page as shown in Figure W-10. Save and view the page using Internet Explorer.

On Your Own W-4

Use html structure and Formatting tags

When this activity is completed, the Index.html web page should look like Figure W-10 when displayed by the browser before the page is published. The browser also displays the HTML tags used to generate the page.

Let’s continue to build the Index.html web page by adding the HTML structure, some more text, and tags for formatting.


On Your Own W-4

Use html structure and Formatting tags

step 4. Internet Explorer allows you to view the source code for a web page it dis-plays. To see the web page as text and HTML tags, click View source under the Page menu of Internet Explorer. The text and tags appear in a new window. Notice how IE color-codes the tags (refer to Figure W-10).

For help, see solution w-4: how to use htMl structure and Formatting tags.

Solutions Appendix

Most websites use clip art, background patterns, drawings, and photos. Each of these graphic elements is stored in a graphics file. These files must be stored on the web server. When a browser receives a web page, it scans the page for references to other files and then requests these files from the web server.

Pay close attention to the size of files used on your websites. Large files take a long time to download and can make a web page slow to load in a browser window. The most popular types of graphics files used on websites are pnG files and GIF files. Both types are compressed to reduce the file size.

pnG file—A file type used for photos, clip art, and other graphic images. PNG files are usually smaller than other types of graphics files such as JPEG files or TIFF files.

GIF file—A file type typically used for clip art or animated clip art and sometimes for photos. Photos stored in GIF files might not retain the most accurate color.

not Working? If Internet Explorer does not display the page correctly, check the file displayed in the Notepad window and look for errors using the tags. Make sure the pairs of tags are used as shown in Table W-1. Are you missing an ending tag, or is the ending tag in the wrong place?


On Your Own W-5

add a Photo to the Web Page

Add a photo to the Index.html page. When this activity is completed, the web page should look like Figure W-11 when displayed by the browser.

FIGure w-11A photo is added to a web page using the <img> tag.

Do the following to add the photo:

step 1. Use Windows Explorer to copy the aquarium.png file from the Extra Chapters folder on the DVD to the Website folder on your local computer.

step 2. Use Notepad to edit the Index.html file. Insert the <img> tag that points to the aquarium.png file. Position the <img> tag so the image is located as shown in Figure W-11.

step 3. Below the photo, insert a horizontal line and the additional text as shown in the figure.

step 4. Save the Index.html file and display it in your browser. Correct any errors you see.

step 5. Publish the Index.html file and the Aquarium.png file to your web hosting site. View the website using Internet Explorer and verify you can see the page and photo correctly.

For help, see solution w-5: how to add a photo to the web page.

Solutions Appendix


organize your Files in subfolders

A website might have many web pages and related files. It’s a good idea to organize all these files in subfolders. For a small website, you might consider putting all the images in a subfolder of the main website folder.

When an image is in a subfolder of the website folder, you must specify that subfolder in the <img> tag so the browser or web server can find the file. The browser and server assume the subfolder is in the main website folder. Therefore, you do not need to give the entire path to a file.

On Your Own W-6

Use a subfolder on Your Website

Do the following to put the Aquarium.png file in a subfolder on your local computer and on the web hosting site:

step 1. Use Windows Explorer to create a subfolder on your local storage device. Put the folder under the Website folder and name it Images. Move (not copy) the Aquarium.png file to this subfolder. Verify the file is no longer in the Website folder and is in the Website/Images folder.

step 2. Use Notepad to edit the Index.html file. Include the location in the <img> tag:

<img src=Images/Aquarium.png>

step 3. Save the Index.html file and view it in Internet Explorer. Correct any errors you see.

step 4. If you are not already logged on to your web hosting site, log on.

step 5. Create a subfolder named Images under the subdomain folder. For the web hosting site shown earlier in Figure W-2, click File Manager and follow the links to create a folder in the subdomain folder. The section of the window used to create this subfolder is shown in Figure W-12.

FIGure w-12Create a folder in the subdomain folder on your website.

step 6. Upload the Index.html file to the subdomain folder and the aquarium.png file to the Images subfolder.

step 7. Open a new tab in Internet Explorer and use the URL to your website to view the new web page. Fix any problems you see.


On Your Own W-6

Use a subfolder on Your Website hint To keep your website files and folders well organized, you might want to

delete the Aquarium.png file in the subdomain folder. You no longer need the file there.

For help, see solution w-6: how to use a subfolder on your website.Solutions Appendix

enhancing a website with hyperlinksA hyperlink (or link) can be used to link your web page to other pages on your website or to pages on other websites. A hyperlink can also be used to link to a different location on the same web page. An anchor tag is used to create a hyperlink. The tag always begins with <a> and ends with </a>. The tag has many variations; the most common forms of the anchor tag are listed in Table W-3.

taBle w-3 Some HTML Anchor Tags

tag Description

<a href=filename> </a> An anchor tag that inserts a hyperlink to another page on the same website. Replace filename with the location and name of the HTML file. If no location is given, the web server looks for the file in the same location as the web page. The text between the beginning and ending tags becomes the hyperlink and is colored blue and underlined.

<a href=link> </a> An anchor tag that inserts a hyperlink to another web page. Replace link with the URL to the other web page. Begin the URL with http://.

<a href=#section-name> </a> An anchor tag that inserts a hyperlink to another location in the same document. Replace section-name with the name that has been assigned to the other location.

<a name=section-name> </a> An anchor tag that assigns a section name to a location in a document.

Here is one example of using anchor tags, which are colored in red:

To read about my family history, <a href=Family.html>click here</a>.

In this example, the text click here becomes a link to the web page Family.html. When displayed by the browser, this text is colored blue and underlined to indicate it is a hyper-link. Because no location for the Family.html file is given, the browser and web server assume it is in the same folder as the current web page.


On Your Own W-7

add a link to a second Web Page on Your site

In this activity, you add a second web page to your site and link the first page to it. The second web page is shown in Figure W-13 as displayed by Internet Explorer. When the user clicks “beach photos” on the Index.html page, the second page appears.

hint To save time, you can copy and paste the HTML tags and text from one web page to a new page and then edit the new page.

FIGure w-13The second web page contains two photos.

Do the following to create the second web page:

step 1. Copy two photos, Zack.png and shark.png, from the Extra Chapters folder on the DVD to the Website/Images folder you created earlier on your local com-puter.

step 2. Use Notepad to create a file named Beach.html. Save the file in the website folder on your local computer.

step 3. Enter the HTML tags and text to build the page as shown in Figure W-13.

step 4. Save the Beach.html file and view it in Internet Explorer. Correct any errors you see.


On Your Own W-7

add a link to a second Web Page on Your site

The first anchor tag listed in Table W-3 is used to link one page to another page on the same site. Do the following to add a hyperlink to the Index.html page:

step 1. Use Notepad to edit the Index.html file. Create an anchor tag using the exist-ing text beach photos for the link. Insert the beginning anchor tag before this text and the ending anchor tag after the text.

step 2. Save the Index.html file and view it in Internet Explorer. When you click the link on the page, the second web page displays. Correct any errors you see.

step 3. If necessary, open a new tab in Internet Explorer and log on to your web host-ing site.

step 4. Upload the Index.html and the Beach.html file to the subdomain folder.

step 5. Upload the Zack.png and Shark.png files to the Images subfolder.

step 6. Using another tab in Internet Explorer, enter the URL of your website. Your home page appears. Click the link to view the second page. If errors appear, fix the problem.

For help, see solution w-7: how to add a link to a second web page on your site.

Solutions Appendix

On Your Own W-8

add a link to another Website

In this activity, you make the aquarium photo on your website home page a hyperlink to the Ripley’s Aquarium website. When you hover over a photo that is a hyperlink, a hand icon appears (see Figure W-14).

FIGure w-14The photo is a hyperlink to another website.


By now, you must be thinking that building a website is a time-consuming and tedious task. If you had to type every HTML tag in a text editor, it certainly would be. Fortunately, web authoring tools are available that generate the HTML tags for you.

surveying web authoring softwareA web authoring application, also called an HTML editor, allows you to enter and format text, hyperlinks, and graphics without ever having to type one HTML tag. Web authoring programs can be free or costly. Some are quick and easy to use, and others are complex professional tools that require a lot of training. In this section, we survey a few well-known programs.

As you learn about web authoring, you are likely to encounter two programming languages other than HTML: cascading style sheets (css) and extensible Markup language (XMl). XML and HTML are two examples of a markup language.

On Your Own W-8

add a link to another Website

A link to another website uses the second anchor tag listed in Table W-3. Do the following:

step 1. Use Notepad to edit the Index.html file. Surround the <img> tag in the docu-ment with the beginning and ending anchor tags. The anchor tag points to the URL http://gatlinburg.ripleyaquariums.com/.

step 2. Save the Index.html file and view it in Internet Explorer. When you click the link on the page, the Ripley’s Aquarium site displays. Correct any errors you see.

step 3. Upload the new version of your home page to your web hosting site and test the site. Correct any problems you see.

For help, see solution w-8: how to add a link to another website. Solutions Appendix

cascading style sheets (css)—A language used to create a style sheet, which is a document that defines the styles used when formatting web pages. The styles help give consistency to formatted text on the website.

extensible Markup language (XMl)—A language used to write a new markup language. Using XML, you can create your own HTML tags.

markup language —A language that inserts commands in a file that also contains text. You distinguish the commands from the text by enclosing them in special char-acters. HTML uses angle brackets to separate tags from text.

Now let’s look at a few web authoring applications.

explore web authoring applications

Web authoring applications range from the simple to the complex. An application might step you through building a website with lots of help designed for beginners, or it might assume you already know HTML and how to build complex sites. When selecting a web authoring application, be sure to read reviews about the application to decide whether it is right for you.


Two web authoring applications that work for beginners are

. WebEasy Professional by Avanquest Software (www.avanquest.com). The applica-tion is easy to learn and use. The website includes articles on how to get started as well as how to build comprehensive websites.

. CoffeeCup Free HTML Editor by CoffeeCup Software (www.coffeecup.com). The free software is a good HTML text editor that works in coding mode to help you write HTML tags. You can purchase the full version, which works in wysIwyG mode. Using this WYSIWYG editor, you can visually build the website, and the soft-ware generates the tags for you.

wysIwyG—Stands for “What You See Is What You Get” and is pronounced “Whiz-E-Wig.” A WYSIWYG program allows you to visually build a web page or other document by placing text, graphics, and other objects on the program’s window. The program generates the underlying code for you.

Two web authoring applications designed for professional web developers (called web masters) are

. Dreamweaver by Adobe Systems (www.adobe.com). The application can be used to build websites that work on personal computers, smartphones, tablets, and other mobile devices. It works in both WYSIWYG mode and coding mode.

. Microsoft Expression Web by Microsoft (www.microsoft.com). The application is rich with features. You can build web pages using WYSIWYG mode, or you can manually edit the code.

tip To find out more about the best web authoring applications, use Google to search on top 10 web authoring software. Click links to read reviews about the software.

use Microsoft word to Generate htMl tags

Microsoft Word can be used as a web authoring application. Using Word, you can save a document as a web page. When you do that, Word creates the HTML tags in the document and assigns to the file the .htm file extension. It also creates a subfolder and puts in the folder any graphics files or other files related to this HTML file. Also, Word can be used to insert hyperlinks into a normal Word document.

For example, in Figure W-15, we built a document using the Aquarium.png photo. We saved the document to a folder named Website3. The filename with extension is Index.docx. So far, this is just a normal Word document.

tip To insert a horizontal line in a Word document, type the underscore _ three times and press enter.


FIGure w-15You can insert four types of hyperlinks into a Word document.

To insert a hyperlink in this document, do the following:

step 1. Select the text or graphic that will be the hyperlink. In Figure W-15, that text is beach photos.

step 2. Click Hyperlink on the Insert ribbon. The Insert Hyperlink box opens. Notice in the figure the four options that the link can point to: an existing file or web page, a place in this document, a new document not yet created, or an email address. For an existing file, use the dialog box to locate the file. For a web page, you can enter a URL in the Address box.

step 3. Click OK to create the hyperlink.

To use a hyperlink in a Word document, press Ctrl and click the link. If the link is to the web, the browser opens to display the requested web page.

We can save a Word document as a web page: Click File, Save As, and select Web Page in the Save as type box. The .htm file is created along with the subfolder containing the Aquarium.png file. Figure W-16 shows the web page displayed by Internet Explorer with the HTML tags displayed. Word put a lot of tags in the file! You can search through these tags and find the tags that you used in this chapter to create your own version of this web page.


FIGure w-16Word created a web page that contains extensive HTML tags.


summarycreating a website from Beginning to end

. A website is a collection of web pages and related files. The pages are built using HTML tags. A web server makes the pages available to the web. You can use a text editor to create a web page, but web authoring software is more automatic and faster after you learn to use it.

. The four steps to create a website are to create the web pages, test the pages in your browser, publish the pages to a web server, and test the website using its URL.

. Notepad can be used to create a simple web page because it does not automati-cally add HTML tags to the page. Microsoft Word, on the other hand, automatically embeds many tags in a web page.

. The home page on a website is named Index.html, Index.htm, or Default.html. Filenames are case sensitive for some web servers, whereas other servers do not pay attention to case. A file with an .html or .htm file extension is an HTML document.

. A good way to learn to build a website is to use a shared web hosting site. Many of these sites offer limited free services. The site assigns you a subdomain name for your website.

. HTML tags can be used to format text on the page. Most HTML tags are enclosed in angle brackets to distinguish them from text in the document.

understanding htMl structure and tools

. Every HTML document has two sections: the header and body. HTML tags are used to mark these sections.

. Photos and other graphics are included on a website by posting the graphics files to the site. Keep file sizes small so the page is not slow to download. Common file types used for websites are PNG and GIF files. These file types are compressed to reduce size.

. Organize your files on a website in subfolders.

. Heading tags such as <h1> and <h2> are used to format text as headings on the page.

. The <img> tag is used to embed an image in a web page. The <a> anchor tags are used to create hyperlinks on the page.

surveying web authoring software

. HTML is a markup language, meaning the HTML tags are included in the same file with text. Two other programming languages used to build websites are CSS (cascad-ing style sheets) and XML (Extensible Markup Language). CSS is used to define and apply styles to text in web pages, and XML is used to write customized HTML tags.

. WebEasy Professional by Avanquest Software and CoffeeCup Free HTML Editor by CoffeeCup Software are examples of web authoring software that are easy to learn and use. They are good choices for those new to web development.

. Dreamweaver by Adobe Systems and Microsoft Expression Web by Microsoft are examples of professional web development tools. Both assume the web developer is already familiar with HTML and building a website.

Jump right In! Essential Computer Skills Using Microsoft Office 2010W-26

review QuestionsAnswer these questions to assess your skills and knowledge of the content covered in the chapter. Your instructor can provide you with the correct answers when you are ready to check your work.

1. What are the four steps to create a website?

2. Which text editor is used in the chapter to create web pages?

3. What is the most common filename used for the home page on a website?

4. You can purchase your own domain name, or a web hosting site can provide a domain name for you. What is the domain name called that is provided by a web hosting site?

5. What is the HTML tag to insert a line break in a page?

6. Which two HTML tags are used to mark the beginning and end of the header section in an HTML document?

7. Which two HTML tags are used to mark the title that appears in the title bar of Internet Explorer?

8. Which two HTML tags are used to mark the beginning and end of italics applied to text on the page?

9. Which HTML tag inserts a horizontal line in a web page?

10. Which file type is preferred (PNG or JPEG) when posting a photo to a website? Why?

11. What is the HTML tag used to insert the photo MyPhoto.png on a web page? The photo is in the same folder as the web page.

12. What is the HTML tag used to insert a link to the www.facebook.com website on a web page?

13. Which programming language is used to create styles in a style sheet that is used to format text on a website?

14. What is a web authoring software application by Microsoft?

15. What are the two modes that web authoring software can work in?

chapter Mastery projectFind out how well you have mastered the content in this chapter by completing this project. If you can answer all the questions and do all the steps without looking back at the chapter details, you have mastered this chapter. If you can complete the project by finding answers using the web, you have proven that you can teach yourself how to build and publish a website.

If you find you need a lot of help doing the project and you have not yet read the chapter or done the activities, drop back and start at the beginning of the chapter and then return to this project.

hint All the key terms in the chapter are used in this mastery project. If you encounter a key word you don’t know, such as cascading style sheets, enter define:cascading style sheets in the Internet Explorer search box.

For this project, you are creating a website about a visit to an aquarium. The home page for the site is shown in Figure W-17.


FIGure w-17A website about a visit to an aquarium includes this home page.

Do the following to create the website:

step 1. Create a folder named website2 on your USB flash drive, hard drive, or other location given by your instructor. Create a subfolder named Images in the Website2 folder.

step 2. Copy these three PNG files from the Extra Chapters folder on the DVD to your Website2/Images folder: tunnel.png, JellyFish1.png, and JellyFish2.png.

step 3. Open the text editor Notepad. Use it to create the HTML file named Index.html. Save the file to the Website2 folder on your local storage device.

step 4. Enter the HTML tags and text used to create the web page shown in Figure W-17. The page includes the following HTML tags:

a. Use the <html>, <head>, and <body> tags to build the HTML structure for the document.

b. The title to the web page that appears in the IE title bar and page tab is Visit to the aquarium and uses the <title> tag.

c. Format the text on the page using the <H2>, <hr>, <i>, and <p> tags.

d. The <img> tag is used to put the photo on the page. The photo file is tunnel.png stored in the Website2/Images folder.

e. Use the <a href> anchor tag to make the photo a hyperlink to the Ripley’s Aquarium website at http://gatlinburg.ripleyaquariums.com.

f. Use the <a href> anchor tag to make the text “jelly fish photos” a hyperlink to the second page on the website, named JellyFish.html.


step 5. Save the Index.html file and view it in Internet Explorer. Correct any errors you see. (The link to the second page will not work until you create the second page.)

The second web page is shown in Figure W-18.

FIGure w-18The second web page has two photos and a link back to the home page.

Do the following to create the second web page:

step 1. Using Notepad, create the HTML file named JellyFish.html and save it to the website2 folder you created earlier on your USB flash drive, hard drive, or another location given by your instructor.

step 2. Enter the HTML tags and text used to create the web page shown in Figure W-18. The page includes the following HTML tags:

a. Use the <html>, <head>, and <body> tags to build the HTML structure for the document.

b. The title to the web page that uses the <title> tag is Jelly Fish.

c. Format the text on the page using the <H2>, <hr>, and <br> tags.

d. Use two <img> tags to put the photos on the page. The photo files are JellyFish1.png and JellyFish2.png stored in the Website2/Images folder.

e. Use an <a href> tag to create a link back to the Index.html page when the user clicks “home page.”

step 3. Save the JellyFish.html file and view it in Internet Explorer.


If you have already set up an account on a web hosting site, you can skip these next two steps. Do the following to set up a web hosting account:

step 1. Do a Google search on free web hosting. Read some reviews about the sites and select one.

step 2. Go to the web hosting site and set up your user account on the site. After you log on to the site, set up your subdomain name for your website. What is the URL to your website?

Do the following to publish the web pages to your web hosting site:

step 1. If you have not already done so, create a subfolder named Images on the web hosting site.

step 2. Copy the Index.html and JellyFish.html files to the subdomain folder. Copy the three PNG files to the Images subfolder under the subdomain folder.

step 3. Open a new tab in Internet Explorer and enter the URL of your subdomain name. Check the links on both web pages to make sure they work. Correct any errors you see.

Answer the following questions:

1. If your subdomain name is mywebsite.myhost.com, what URL would you enter in the Internet Explorer address box so that the JellyFish.html page displays?

2. Which file type would you use on your website so that the file size is minimal, JPG or GIF? Why are small file sizes important for a website?

3. Which language is a markup language, CSS or XML? Which language is used to cre-ate consistent text formatting on a website?

4. Which web authoring software would you recommend to someone who is just get-ting started building websites, Microsoft Expression Web or CoffeeCup HTML Editor? Why?

5. Which authoring mode, WYSIWYG or coding mode, does not require you enter HTML tags in an HTML document?

Becoming an Independent learner

Answer the following question about becoming an independent learner:

The most important skill learned in this book is how to teach yourself a computer skill. In the Chapter Mastery Project for each chapter, you have been rating yourself on how well you are doing with this skill. What is your overall rating for the entire book?

O Level A: I was able to successfully complete the Chapter Mastery Project without the help of doing the On Your Own activities in the chapter. I have proven that I can teach myself a computer skill without directions given by others.

O Level B: I completed all the On Your Own activities and the Chapter Mastery Project without referring to any of the solutions in the Solutions Appendix. I have proven that I am able to teach myself a computer skill without directions given by others.

O Level C: I completed all the On Your Own activities and the Chapter Mastery Project by using just a few of the solutions in the Solutions Appendix. I need some help, but for the most part I can teach myself computer skills.

O Level D: I completed all the On Your Own activities and the Chapter Mastery Project by using many of the solutions in the Solutions Appendix. I still need some help when learning a new computer skill.

O Level E: I completed all the On Your Own activities and the Chapter Mastery Project and had to use all the solutions in the Solutions Appendix. I learn new computer skills by following directions given by others.


projects to help youNow that you have mastered the material in this chapter, you are ready to tackle the three projects introduced at the beginning of the chapter in the section “How Will This Chapter Help Me?”

project 1: Building your personal website

Now that you know how to build a simple website, create your own personal site. Collect a few of your favorite photos and include them on the site. If you don’t have photos, use any you find on the DVD. Include in your website the following:

. At least two web pages. The first page links to the second.

. A hyperlink to another website of your choosing.

. One or more photos.

. Formatted text that uses the heading tags or paragraph tags listed in Table W-1.

Publish the website and email to your instructor the URL to the site.

project 2: testing a website

Expect your website will be viewed by people using a variety of browsers, screen resolu-tions, and devices. Web developers test their sites for these situations:

. Different browsers including Internet Explorer, Mozilla Firefox, Google Chrome, and Apple Safari and different versions of these browsers.

. Different screen resolutions, such as 1024×768 or 1280×800.

. Different devices such as a personal computer, smartphone, or tablet.

Do the following to test a website you have created for this chapter:

step 1. Set your screen resolution to one of the lowest values your monitor offers and use your browser to display the pages on your website. Also test at a higher resolution and a mid-range resolution.

step 2. If you have access to a different browser other than Internet Explorer, test your website using this browser.

step 3. If you have access to a smartphone or tablet, use this device to open your browser and view your website.

Based on your tests, what changes do you need to make in the website so it works well in all situations?

project 3: using web authoring software and an Ftp client

Now that you know a little about HTML tags and how to publish a website, you are ready to get started using web authoring software. Go to www.coffeecup.com and download the free version of CoffeeCup HTML Editor by CoffeeCup Software. Install the program on your computer and use it to create one of the web pages in this chapter. How is using the CoffeeCup editor easier than using Notepad when building an HTML document?

Websites might require hundreds of files. In these situations, better tools are needed to upload the files rather that the simple ones offered by a free web hosting service. FTP is a file transfer protocol and software that can be used to upload files to a website.

CuteFTP by GlobalSCAPE is reliable and easy-to-use file transfer software. Go to www.globalscape.com/cuteftp and read about the software. Download the free version of the software and install it on your computer. Use it to upload files from your local computer to your web hosting site.

Personal Project: I want to build my own personal website with links to other sites. I want to include a history of my family and family photos. What do I need to know to get started?

academic Project: My club built a website and has assigned me the job of testing the site before it goes live. I displayed it in my browser, and it looks fine. Is there anything more I need to do?

technical career Project: I work for a small company, and my boss asked me to build a company website. I need to know what software to use and how to get started.


project to help othersOne of the best ways to learn is to teach someone else. And, in teaching someone else, you are making a contribution in that person’s life. As part of each chapter’s work, you are encouraged to teach someone else a skill you have learned. In this chapter, help someone learn how to build a website.

Who is your apprentice? ______________________

Do the following:

step 1. Show your apprentice one of the websites you built in this chapter. Explain how the web pages were created using HTML tags. Explain the purpose of each tag.

step 2. Help your apprentice build his own website using photos and links. Use Notepad to build the web pages. If your apprentice wants to publish his web-site, help him set up an account on a web hosting site and publish his website.

chapter w authoring your own websitewps.prenhall.com/.../objects/14087/14425332/chapter_w.pdfchapter...

Documents