HTML Editor

---

Most computer users like to surf the Web. In previous chapters you were briefly introduced to the browser that comes with Red Hat Linux 9.0. You probably already have a lot of experience visiting Web sites using Microsoft Internet Explorer or Netscape Navigator. What are those Web pages you visit, and how would you make one of your own? Eventually, most avid computer users and even many novice users ask themselves these questions. A Web site is one or more documents written in a language called HTML (HyperText Markup Language). This language is something Web browsers understand. When they go to a Web address and see HTML documents, the browsers can interpret those documents and display the contents to you in your browser.

This leaves the question of how you might make your own Web pages. You could take a course at a local community college and learn how to use HTML. You also could purchase several HTML books and study them. Fortunately, if you have neither the time nor the inclination for such an in-depth study of HTML, Open Office has an alternative. One of the applications in Open Office is HTML Editor. That editor, depicted in Figure 11.11, looks much like a standard word processor.

Figure 11.11: HTML Editor.

You can insert text, change fonts, insert pictures, and do many of the things you have always done in word processors like Open Office Writer and Microsoft Word. However, the HTML Editor takes what you are writing and inserting and generates the HTML language code for you. You then have a Web page without actually knowing anything at all about HTML! This probably has your interest, so let’s jump right in.

HTML Editor Basics

When you first open the HTML Editor, you will notice that the toolbar at the top looks very much like the toolbar from Open Office Writer. This should be expected. Web pages often include text. That text might be bold, italicized, centered, or formatted in some other way. You will need the same text manipulation tools that you would in any word processor. Even the toolbar at the side is very similar to what you saw in Open Office Writer. It enables you to insert tables, images, and other items.

The first button on the side toolbar enables you to insert many common items. This button is shown in Figure 11.12.

Figure 11.12: The first insert button.

Some of these options should be familiar to you. Inserting graphics or a table works in exactly the same way as it did with Open Office Writer. However, inserting a frame may sound strange to you. A frame is a way to organize elements in any document into logical groupings. When you choose this option, you then drag your mouse on the document to create the frame. If you then right-click on the frame, you will see a pop-up menu with several options. The most important is about midway down the list and says Frame. If you click on this option you will see a screen, much like the one in Figure 11.13, where you can alter a number of your frame’s properties.

Figure 11.13: Frames.

Under that is a button for inserting various fields. This button’s options are shown in Figure 11.14. You can insert date fields, page number, author, and more. This is a rather simple but useful item to add to any Web page.

Figure 11.14: Inserting special fields.

The rest of the buttons on this left toolbar, except for the very last button, have been discussed in previous chapters. These buttons are identical to the ones you find in Open Office Writer. However, the last button is quite different. You have already learned that one way to create HTML pages for the Web is to learn the HTML language and type in all that code. The last button on this toolbar enables you to view the HTML code you have generated with this HTML Editor. That code will look similar to what you see in Figure 11.15.

Figure 11.15: HTML source code.

Some of the HTML code should make sense to you because it is very close to plain English. Other elements of it will seem peculiar. However, the real point here is that you don’t have to know anything at all about HTML code to create some pretty decent Web pages using the Open Office HTML Editor.

Next you should turn your attention to the drop-down menu at the top of the screen. Take a moment to examine the Insert menu shown in Figure 11.16. The first few items duplicate options you have seen in the toolbar buttons, either on the left or at the top. It is common practice in many applications, including both Open Office and Microsoft Office, to duplicate functions. This way you can use whatever method you prefer, a toolbar or a drop-down menu.

Figure 11.16: The Insert menu.

The third option down, however, is not duplicated in the toolbar. It enables you to insert a hyperlink. A hyperlink is a link to an e-mail address, a file, or another Web site. It is certain that you have at some point clicked your mouse on a link on some Web page and been taken to another Web page. This is a hyperlink. When you click on that option in the drop-down menu, you will see a screen like the one in Figure 11.17.

Figure 11.17: Inserting a hyperlink.

The buttons on the left enable you to determine what type of link this is. It might be an Internet link to a Web site or perhaps a link to an e-mail address, or even a link to a document. For our purposes we will stick with Internet links. You then need only to type in the Web address in the Target text field. Then in the Text field you can put whatever text you want the reader of your Web page to see. For our purposes we will put in the Web site of this book’s author, www.chuckeasttom.com in Target, and for the text we will put click here to visit Chuck’s web page. This is all shown in Figure 11.18.

Figure 11.18: Setting up a hyperlink.

You click the Apply button and then the Close button, and this link will be inserted into your HTML document. Inserting links is rather important. Most Web pages have links of one sort or another. When you are done, your link will look much like the one you see in Figure 11.19.

Figure 11.19: A hyperlink in your Web page.

A Basic Web Page

With all of the basics out of the way, let’s create a very basic Web site. So that all readers are on the same page, so to speak, we will create a Web page about Linux. The only image we will use will be the Linux penguin Tux. You can do a Web search using Google™ or Yahoo!™ and easily find this image. With most Web browsers you right-click on an image in a Web page and select Save As from the drop-down menu.

Starting with a blank HTML document in the HTML Editor, we will type in the phrase Linux is Cool. We will then make that text centered, bold, italicized, and a much larger font using the toolbar at the top (remember the common text formatting buttons found in all word processors). Then use the Enter key to skip down a few lines. You can then use the drop-down menu to select Insert and Graphics and insert an image. For the purposes of this example we will insert the previously downloaded Tux image. You should note that your image is surrounded by small dots, enabling you to resize it if you want. Right now your Web page should look much like what is shown in Figure 11.20.

Figure 11.20: The basic Web page.

Now we are going to add a table. Recall that the toolbar on the left side of your screen is where you will go to do this. Click on the uppermost button and then select the button that looks like a table. You then drag your mouse over the same number of cells you want your table to have, as depicted in Figure 11.21.

Figure 11.21: Adding a table.

Now we are going to practice creating links. Each of these cells is going to have a link to some Linux-related Web site. In case you have forgotten, put your mouse in one of the cells, click once, then go to the drop-down menu and select Insert and Hyperlink. Each of our cells will have a different link. The links are listed here:

Linux Online: www.linux.org/

Linux.Com: www.linux.com/

Red Hat: www.redhat.com/

Open Office: www.openoffice.org/

We now have a relatively simple Web page, but one that shows the basics of developing a Web page. Obviously there is a lot more you can do with the HTML Editor, but this gives you enough to create a basic résumé Web page or personal Web page. You can see the Web page we created in Figure 11.22.

Figure 11.22: Our sample Web page.

Once you have created a Web page, you might want to make it available on the Web. To do that you will need to have some Web server host your Web site. Fortunately, Web hosting, much like Linux and Open Office, can be obtained at little or no charge. Two very popular free Web hosting services are www.geocities.com and www.angelfire.com. For business sites, www.netfirms.com is very popular. If you visit any of these sites you will find complete instructions for obtaining free Web space and uploading your Web page.

Obviously this short segment will not make you a professional Web developer. It would be virtually impossible for you to do that without some extensive knowledge of HTML and at least one scripting language such as JavaScript. However, it is not the purpose of the Open Office HTML Editor or this book to make you a professional Web developer. The purpose is to make you competent enough to put up a simple Web page with very little difficulty. It is recommended that you spend some time experimenting with the HTML Editor.

Some Advanced Features

For some of you, the previous elements of a Web page are not enough. You want more. Let’s explore just a few additional items you can use in your Web pages. First let’s examine using images for links. You have probably been to Web sites where you clicked on a link in order to visit some other Web page. If you will right-click on any image, such as our Tux image, and choose Graphics, you will see a screen that enables you to alter almost any facet of that image. We are interested in the fourth tab, labeled Hyperlink. Enter your Web address, as you see in Figure 11.23, and your picture is now a link to a Web site.

Figure 11.23: Making a picture a Web link.

An even more interesting option can be found by right-clicking on your picture and selecting Image Map. An image map is when one picture links to more than one Web site. Different regions of the image are linked to different sites. When you select the Image Map option, you are presented with the Image Map Editor shown in Figure 11.24.

Figure 11.24: The Image Map Editor.

Now you can select any of the shape tools in the toolbar and drag your mouse across an area. That area will be highlighted with that shape. You then assign that area a Web address, as you see in Figure 11.25. Just remember not to have any overlap in your regions.

Figure 11.25: Creating an image map.

The addition of image links and image maps should really increase both the functionality and the appeal of your Web site. And all of this was done without any need for you to know anything at all about HTML.

---