Figure 2: Formatted HTML page
Web pages are text documents that are created on an individual’s computer and then copied to a publicly accessible area on a Web server. Collectively, there are four steps to creating a Web page. Each step is discussed in a sub-section below.
This task is done by a Web page designer who begins by determining the purpose of each Web page in the Web site and the visual appearance of each Web page. This step includes selecting the format and content of the each Web page, and the hyperlinks between each page. We suggest that you create a picture of each Web page comprising your Web site on paper before trying to create the Web page on the computer. In addition, design how the user will navigate from page to page.
A Web page usually contains text and graphical images. Graphical images are not stored as part of the Web page but in separate files. Each graphical image is stored in its own file. Some Web pages also contain audio or video content too. These files are not stored as part of the Web page either. Other Web pages offer the viewer something to download in a specialized file such as a Microsoft Word document, or an Adobe .pdf file. It is up to the Web designer to decide the look and feel of the Web page, as well as the content. The content of a Web page is extremely important if you want the page to achieve its desired purpose. At first, people were very excited viewing colorful Web pages with pretty graphical images. Since the number of Web sites has exploded, people now want to see something worthwhile, rather than just looking at pretty pictures. That is why it is so important to have a clear purpose for a Web site and rich content.
Web pages are designed for a reader to view on a computer monitor in a Web
browser visually. Almost all computer monitors today are color, so Web pages
are designed to take advantage of the vivid colors available. Web pages also
take advantage of the use of graphics or pictures for display. Sometimes, a
picture is just a waste of download bandwidth, but other times a picture can
be a fun or interesting addition to a Web page. Pictures are referred to as
images and are stored in computer files with extensions such as .gif
(Graphics Interchange format), or .jpg (JPEG File Interchange
Format).
Many images on Web pages are public property and can be downloaded from the
Web to your personal computer. If you find a good image on someone else's Web
site, first check to see if that image is copyrighted. There will be notification
somewhere on the Web page if its images are protected by copyright laws. Some
artists create images and allow others to copy them freely, or copy them with
some notification on the copiers Web site. If the image is copyright protected,
then you cannot legally use it without express permission from the copyright
holder. If the image is not copyrighted, then your second task is to download
that image from the Web page to your personal computer.
You can download an image using the following steps. (These steps apply to Internet Explorer but are similar in Netscape Navigator)
There are a great many free images available on the Web. In fact, there are
many Web sites devoted to nothing but distributing these images. We recommend
that you use www.yahoo.com, www.altavista.com, www.go.com, or any other Web
search engine to locate images for your Web pages. If you use the phrase “free
clip art” you should get a great many results from the search engine.
Web pages use a language called the Hypertext Markup Language (HTML).
HTML is a text-only language that is designed to allow text to be tagged or
marked up (these words are synonymous in this context) to format a Web page.
There are quite a few Web sites discussing current HTML tags. We recommend the following Web sites as good introductions to HTML coding but there are many others.:
There are many additional Web sites with information about HTML coding. Use a search engine with the search phrase "HTML tutorial" for additional sites. If you are interested in learning how to code HTML, we recommend taking a short seminar at the University of Nevada Systems Computing Services. They offer a number of sessions (you can go to one or all) discussing HTML coding and Web page creation. Each session is two hours and costs $10.
We refer to the process of creating a Web page and Web site as coding. Coding can be done in a variety of ways from placing all tags directly into a text document manually one by one using a text editor such as Notepad, to using a coding software package (such as Macromedia’s Dreamweaver MX or Microsoft’s Front Page) that creates the text and tags for you in an easy to use visual way. We will use Dreamweaver MX as our coding software package for this class. Do not use Microsoft Word to create the Web pages in this class. When Word saves a document in HTML format, an excessive amount of confusing HTML code and a complex directory structure is created to save the text and images. If you chose another coding package, then we may not be able to help you if problems arise. If you choose to use Microsoft's Front Page, then be aware that you MUST find a Web server to host your site that is running Internet Information Services (IIS)
Documents that have been coded for display on the Web are referred to as HTML documents. Documents must be coded this way in order for them to be formatted and displayed by a Web browser. HTML is a fast changing language, and the coding software packages do not always contain all the codes available in the language at any point in time. Many Web designers use a coding software package to help them create a Web page, but then they directly edit the coded document to add codes, as necessary, to adjust the content or visual formatting of the Web page. Our Web pages for this class will be relatively simple, so you should be able to use Dreamweaver MX for all your coding needs.
To understand the purpose of HTML, we examine a coded Web page, and how that coded Web page will appear in a Web browser. For illustrative purposes, we have chosen a very simple page for this illustration. Figure 1 shows the HTML codes used to produce the formatted document appearing in Figure 2.
| <html> <head> <title>Creating and Designing Web Pages</title> </head> <body bgcolor="#D3D2E3" text="#000066" link="#666666"> <h1>Creating a Web Site and its Pages</h1> <p>Create a Web page by writing HTML.</p> <h1> </body> </html> |
An example of a Web page is provided in Figure 2.
Figure 2:
Formatted HTML page
The HTML for the Web page shown in Figure 1 appears formatted as shown in Figure 2. Compare the displayed Web page with the HTML used to generate that result. Try to read the HTML and see if you can tell the difference between tags and actual text that appears on the Web page.
Your options for designing a Web page differ greatly from those for the printed page. When you create a printed page, you have complete control over what that page will look like when printed on paper. You select the font type, font size, color, margins, graphics, and tables knowing that the printed output will look exactly as you planned. You are in control of both the content and appearance of the printed page.
As you design Web pages, you have to remember that you do not have control over how the reader sets the page size, the width of the text column, the fonts, or the size of the text. You might use a font on your Web page that is not installed on the reader’s computer. The Web browser will select a replacement font that is “similar” to font specified in the Web page, but it may not look much like the one you originally selected. The reader may choose to view your Web page using their entire monitor screen, or he/she might decide to view the page in a small window. As the user resizes the window in a Web browser, the contents are automatically reformatted by the Web browser.
Another issue is the display characteristics of a reader’s monitor. These display characteristics are called resolution. Resolution is measured in pixels. A pixel is a measurable point on the screen. Some people use a display setting on their computer of 640 x 480 pixels, which is a very low resolution. At this resolution, less data can be displayed on reader's monitor.
This is the default setting of the display and many people never change it. This default setting means that the characters will appear very large on the screen and, as a result, very few characters can be displayed at any one time. For example, with a display setting of 1280 x 1024 pixels, the UNR home page will resemble Figure 4.
The Web page displays much more data because of the higher resolution. Note that additional space appears between the events calendar and the student image.
Many Web page designers choose to develop pages suitable for a 640 x 480 pixel display since that is the setting used by many people, especially those with older computers. Other Web designers create pages appropriate for the content and leave it to the reader to scroll the page back/forth and up/down as necessary. Professional Web designers test their Web pages in a variety of different display settings to see how they will look. If the formatting of a document is absolutely critical, the Web may not be the best medium for display. Many people place links on their Web sites to files that can be downloaded in word processing or .pdf format. For this class, I will probably be the only reader of your Web page, so you do not have to test it with different settings - just use the setting of your own computer.
Another issue in Web page testing is the differences in Web page format attributable to the Web browser. Netscape and Internet Explorer do not always interpret HTML tags exactly the same way. Professional Web page designers test their Web pages in a variety of different browsers. For this class, you will be using Internet Explorer to read your Web pages. However, as the HTML that you will create is so simple, it will likely appear the same in both Internet Explorer and in Netscape.
You will be designing, coding, and testing your Web site on your own (or the College of Business lab) computer. You can test your Web page in a browser on any computer, but to make it available to the rest of the world, you must load the Web site to a Web server. Don't load your pages until you are ready to make the site accessible to the world. Visit the page in this site for instructions to upload a Web page and Web site (Tutorial) Using FTP to Upload Web Page