HomePhoto AlbumHot SpotsChristian Banners Designs by Barbara
 
 
l HTML Links l Image Alignment and Borders
l Using Links l Conclusion
l Creating a Link
 
   HTML Links  

The World Wide Web offers immediate access to information anywhere on the Internet. In order to find this information, files and documents must have their own unique address known as URLs (Uniform Resource Locator). Once you know an URL, you can link to that location.  

    * Note: An URL is composed of the following parts: 
       Internet Service Provider://Host Name/path/filename
Using Links   

By default, Netscape Gold 3.0 displays links as underlined blue text. When you click on a link, the browser will take you to that location. An HTML author can link a number of pages and can link various elements within a single page together by the use of anchored spots. Likewise, an author can link to other sites on the WWW. After visiting a site, that link changes color to remind you where you've been. As an author, include enough links to make your page interesting but do not get carried away--more is not always better! 

Creating a Link  

Let's create a link to a Disney site designed by a friend of mine. The URL is http://www.sover.net/~dizne. Click the Make Link icon on the toolbar. Key the words Have a Disney Year! in the Link Source box. Then, key the URL address in the Link To box. Click Apply and OK. The underlined text appears on your page indicating your first linked site. To test your link, select Browse Document from the File menu. Save the file with an html extension. For example, Lesson1.html ; then click on the link to visit Have a Disney Year! 

On the WWW, there are two popular graphic file formats: GIF (Graphical Image Format) and JPEG (Joint Photographic Expert Group). Just as you linked text, you can also link a graphic image. The graphic image below comes from a very popular web site which offers lots of "cool graphics" for web page designers. To save an image, just right click with your mouse and choose Save Image As. Make sure when you save images to be used on your HTML page(s) that you save the graphic in the same directory as your HTML page. 

Next, move your cursor to the place on your page where you would like the image to go; then click on the Insert Image icon on the toolbar. Click the Browse button to locate the image file you saved; open it, then click Apply and OK. 

 
 

Click on the newly placed image; then click the Make Link icon. Type the URL in the Link To box. Click Apply and OK. Browse the document as in the previous exercise to check this link. This is a link you will not want to lose!  

Here's another supurb link for background designs. Apply the steps given above to insert the graphic and its link into your page. 

 
 

In creating web pages, many web designers use bars, lines, animated gifs, and other icons to enhance the appearance of their page. The following links contain graphics which should provide you with all you need to create a series of well-designed, attractive web pages. 

Image Alignment and Borders  

Netscape Gold 3.0 offers unique extensions to HTML that allow text and images to be placed aesthetically on web pages. The toolbar contains five buttons on the bottom row that make this possible. They are: Decrease Indent, Increase Indent, Align Left, Align Center, Align Right. To see how each of these features works, place the cursor just to the left of the text or image. Then, click on the various buttons to see the resulting horizontal movement. 

Although the World Wide Web was not originally designed with page layout in mind, Netscape provides a variety of ways to position images in respect to text elements and graphics. For example, look at the heading above. You'll notice that the text is centered vertically in relation to the graphic image.  

To practice this feature, key some sample text and insert a graphic image on the same line. Click on the image and then on the Insert Image icon on the toolbar. Then select one of the five alignment buttons on the left side of the Alignment row. Choose Apply and OK. Experiment with each of the other four positions. 

You will also notice two buttons on the Alignment row that show text wrapped around a graphic file. The same process you followed earlier is used to wrap text either around the left or right side of an image. In addition, you can determine how much space to leave around the image and whether or not you want a border to frame your image. As you can see from the image below, placing a border around an image creates a different effect. While they enhance certain images such as photographs, they do not particularly add to the appearance of other images as in the case below. 

    A three pixel border 
     
Conclusion  

Once you know an URL, you can easily link to that location on the Internet. By linking text and graphic images, you add a dynamic element to your Web presentation. It is important to realize that material you "borrow" from the Web and publish on your own pages may be protected by copyright restrictions. You will note that many Web page designers, however, make their materials available to others as long as the URL is not a commercial site. 

In our next lesson, we will explore other types of HTML links. Until then, continue to explore the wide range of resources available to you as an HTML designer. 

View my previous guestbook, 1 2 

Free GuestBooks by Phaistos!



 
 
   
Cast and Credits
   
 
    

An Online Tutorial in Six Easy Lessons 

Created by Barbara Cunningham 
 

 
Lesson 1 Creating an HTML Document
Lesson 2 Graphic Images and Links
Lesson 3 Links and More Links
Lesson 4 Lists, Sounds, and Tables
Lesson 5 Linking HTML Files Together
Lesson 6 The Publishing Process
 
Credits  
 
Resources for Graphics   
Cool Graphics on the Web 
Designs by Barbara 
Icon Bazaar 
Microsoft Images Gallery 

Resources for Midi Music  
Complete Midi File Directory 
Mike Peterson's Pop Midi Page 
New Songs CCM Midi 

Resources for Software 
Crescendo 
Arachnophilia 
Infolink 
WS_FTP