2. Tools of the trade
Browser adjustments (click any heading below to return here)
The course has an extensive number of pages of reading. Follow these simple instructions to set up your screen display. If you do not set up your screen as recommended, you may suffer fatigue and aggravation over having to scroll.
Also, you will learn how screen settings affect the pages you author.
Reading on the screen is about 25% slower than reading from printed material. Adjustments to your display can improve reading speed, reduce eye strain, and improve concentration. Take a few minutes now and read about set up.
|window size||Maximized||Largest area for displaying course material|
|display size||1024 by 768**||Generous page area for text and graphics|
|text size||Smaller**||More text per Web page|
|font||? you decide ?***||Reading speed and comfort|
* Maximize screen size!. It fills your entire display with your browser and removes all borders and toolbars.|
** These settings were used to author and test the course for minimum scrolling.
*** Exact font selection choice depends on which fonts you have installed.
The display settings are under your control now, so choose in favor of ease of reading and eye comfort, and experiment.
Display size is another major factor in ease of reading. Your Display Setting should be 1024 by 768 or larger. You can adjust this setting by opening the Windows Start menu and selecting Settings/Control Panel. Next, open the Display control and adjust the Screen Area as indicated below.
Text size, a major factor in ease of reading, is controlled through your browser menu. Choose View and Text Size to adjust the overall text size. The graphic shows the settings used to select one of five text sizes.
IE provides font choices for a "Web page font" which should be proportionately spaced for easy paragraph reading, and a "plain text font" which should be monospaced for code listings. Either Times New Roman or Verdana are popular choices for Web page font, while Lucida Console is the preferred plain text font.
|Web page||plain text|
|Times New Roman||Lucida Console|
You have just read about four display factors that influence ease of reading and eye comfort. Name them. Click the check point to confirm your answers.
The computer you use for the course should be set up to show full file names. Computers are usually shipped with part of the names of files automatically hidden. Presumably, this makes file names look less complex to new users, but it will cause you unnecessary problems. You do not want to work with a computer that hides file extensions -- for example ".txt" and ".html" may be hidden from view. Change this option in Windows or Mac OS to make your work easier.
Have you wondered how the World Wide Web keeps billions of HTML pages on millions of computers all over the world neatly organized? My Web pages and your Web pages can be accessed by any computer on the Internet because our pages have totally unique names and addresses. You cannot address your pages as I do and vice versa.
The rules that ensure unique Internet addresses will be discussed in the upcoming chapter on Internet history. To forecast that chapter for a moment, each page is given a name before being placed on a Web server by its author. It becomes identified on the Web through its URL (uniform resource locator). The URL was conceived and developed by the originator and inventor of the Web, Tim Berners-Lee, who also programmed the first Web browser.
This chapter explains the best way to organize your pages, images, and programs on your own Web site. By adopting these standard practices for site organization, you will be joining with millions of successful Web system developers.
Web site addresses, called URL's (uniform resource locators), are how you can reach particular Web sites all around the world. When you want the IBM Web site, click in the Internet Explorer address bar and type in:
Your typing will be reformatted automatically and appear in the address bar like this.
Internet Explorer has a shortcut for entering addresses. Type in only
IBM and press Ctl+Enter. It saves typing the beginning
WWW and ending
You will learn about the parts of the URL next, and then learn about how to organize your own Web pages for easy URL access.
You may have see a URL like the following.
There are four major parts to this URL.
In this fictitious example, the Web software engineers at IBM decided to organize their catalog of Web products and services two layers below their domain root directory. They created the directory
internet below the root, and then created the directory
web below that. The catalog page was placed in the Web directory. We use the three terms folder, directory, and path interchangeably in the course.
The IBM URL has four components. Name them. Click the check point to confirm your answers.
We will look now at the Web server directories that were structured to serve a page with the IBM URL. Here is the fictitious IBM URL again.
The top folder is traditionally assigned as the root of the URL's served by Unix-Linux Web servers. Your site may not have a top folder named
public_html, but you will see one if you stay in the Web development profession very long. In any case, it is the root of the fictitious IBM site.
The site pictured above has only one folder directly off the root. It is called
internet. Within this folder notice the general purpose folders for databases, images (graphics), scripts (programs), and style sheets. Each folder would hold the type of files used on Web pages that its folder name suggests.
Next, we will learn about the
/internet/web folder and how the
catalog.html page there can address the databases, images, scripts, and style sheets.
Up to this point you have been thinking about the URL as if it were used only from outside the Web site. Now we will use the URL in another way: to have
catalog.html make the following requests (via markup with HTML) to fill in its catalog page appropriately.
As you will learn later in the course, the HTML necessary for placing an image on the page is the
<img> tag. Because images shown on Web pages are stored as files on servers, an HTML page has to tell the browser exactly where to find the image on the Web. Here is how this HTML tag would look.
<img src="http://www.ibm.com/internet/images/graphic102.gif" />
Next we will see how students should organize their Web sites, how to shorten the long URL address, and how to gain mobility.
How should students in this course organize the folders that hold their pages, databases, images, scripts, and styles? Read this to learn the customary locations for storing your files, and the most efficient way to reference the folders and files when authoring HTML.
All student Web sites begin with a home page folder. We have been using the public_html example from Unix-Linux, but any system will have a named folder that is assigned as your root.
Students in Web Sys, for example, are assigned folders using their names. The URL of the root is the students name. Note: students have not been assigned the status of "root" for their name folder; therefore, file references should not be made with respect to the root. Other servers do assign root status to the starting folder of a site, but not in the case of students.
http://server.college.edu/CIS3312-Poynor/first.lastname/-- or --
This student Web site is organized neatly and has the required folders. The URL for a CIS3312 student site is
Students in Web Sys are assigned folders using their names. The URL of the root is the students name. Note: college students have not been assigned the status of "root" for their name folder; therefore, file references should not be made with respect to the root. Other servers do assign root status to the starting folder of a site, but not for you as a student.
It is customary to name homepages "index.html", and we have followed custom by placing the file in the URL directory. Users addressing the URL above would automatically see the homepage. CIS3312 students are not required to have a homepage.
http://uts.cc.college.edu/~Smith/-- or --
The ending "/" in the fictitious student Web site is important because Web servers look for a default file (index.html) if none is provided in the URL address, and the ending "/" terminates an unambiguous address to the Web site with no file specified. Because no file name was included in the URL above, the server looks for the default file
Your student Web site should begin with a homepage folder. We have been using the public_html example from Unix-Linux, but any system will have a named folder that is the beginning of your Web site. Create four folders in the root: db, images, scripts and styles.
You should create these four folders in your named folder on the Web server you will use during the course.
Now that the Web server folders are defined, you should begin to think about how you will be working on your local computer. Your HTML pages will be created in a text editor program on your computer, tested there, and then uploaded to the Web server. It is not necessary to upload files in order to author pages or test them. You can do a great deal of Web development without using the Web until the last step.
To take full advantage of this important fact, you should repeat (mirror) directory structure of folders on your local hard disk. Make the same folders on drive C:\ that you made on the Web server. Instead of the Web server manager naming public_html for you, make a root folder called "WebSystemsCourse." Here are the two directory structures side by side.
Because it is very convenient to develop, test, and revise Web pages on a local computer instead of uploading to the Web server to test, you should adopt identical directory structures on your computer and Web server. This generally means from the starting folder downward to subfolders. In other words, keep the main folder name and all subfolder names the same on the workstation and the server. Testing your markup is much easier this way. And uploading is much less tedious.
For example, as a Web Sys student you could keep your mirror site on a high-capacity Zip disk of CD/DVD. If the workstation assigns D to the Zip drive (or CD/DVD), then you could test
eproject0.html by entering this address in the Internet Explorer address bar:
Or test index.html on the Web by entering this address bar:
Remember these two addresses will be copies of each other. You will create and edit your HTML files on the workstation mirror directories, and upload the files to the corresponding directories on your assigned Web site.
And there are more reasons to have a mirror directory than saving some time typing in href, src and url locations.
A mirror directory is helpful because you need to transfer files to the Web server. The upload program must be told where you have the files on the workstation and where the files are going on the server. Its good to be organized to prevent overwriting files unintentionally.
The advantage of the mirror may not be apparent yet, but if you set up folders badly it will become pretty clear that you are spending too much time looking through folders for your files.
A mirror organization will save you time and hassle when marking up HTML, when uploading files, when moving files to another workstation (or disk drive), and when moving files to another server. The files can be moved in all these instances without changing any relative references in the markup.
As an HTML author you probably will want to include graphics on your pages, or hyperlink to another page at your site. You have to know where the graphic or page can be found (you have to know the directory structure). This section describes how to code the relative addresses of files on your site.
Three HTML attributes are concerned with addresses:
url. Although they are used for different purposes, they have the same syntax and will be described together here. Links from one HTML file to another depend on the anchor
<a> tag. To give users a hyperlink from index.html to another file named more.html in the same folder:
<a href="more.html">More on this same topic</a>
Here is an explicit version of the same file reference that introduces unnecessary hard coding. It would prevent workstation testing. Relative references are preferred.
Here is a relative reference to a graphic image in the images folder. Notice that the subfolder path
images/ must be part of the address.
<img src="images/flowchart.gif" />
The src attribute specifies the Web location and name of a graphic image file. The file reference syntax for href, src and url are identical. The table below is a summary of relative file referencing in HTML.
Here is an exercise in Web file references. We will begin with a set of facts to help clarify the site's structure.
<img src="images/flowchart.gif" />
The line above shows how HTML markup in the site homepage references an image. Use this example to markup a reference to the image from the marketing homepage. And use this example to markup a reference to the image from the corporate finance homepage.
The line below shows how markup in the site homepage hyperlinks to the more.html page in the same root folder. Use this example to markup hyperlinks between all the homepages in the site.
<a href="more.html">More on this same topic</a>
<img src="/images/flowchart.gif" />
Is the line above a useful reference to the flowchart image from anywhere in the previous site? Will the reference work at your student site? Provide references for hyperlinking to all other homepages from the site homepage; from the marketing homepage; from the corporate finance homepage. Click the checkpoint to confirm your answer.
Software for the Web is developed in a phased sequence. Each phase is essential for the success of the Web project. It is often said that "projects that start wrong ... end wrong." Managers embrace a "quality assurance" process defining the role of each phase in sequence. Quality assurance procedures represent a definite process managers are expected to follow.
The sequence sometimes has to repeat parts of earlier phases in a process called iteration.
Describe how the first two phases of software development are different.
Search engine services are available without charge on the Web. Obtaining the use of this last development tool is only a matter of understanding where to find the engines and learning how to search for information.
Below is a list of search engines that provide good results with minimal advertising and have relatively stable histories. Because there is so much consolidation of businesses on the Web, however, by the time you read this textbook, one or more of these search engines may have been renamed, discontinued, or subsumed in another engine's technology.
To enter one of the search engine sites listed above, key its name into the browser address bar. Then press Ctrl+Enter.
Regardless of which engine you are using, you start a search by entering a key word query and clicking a Search button. The engine locates matches (Web pages) that contain ALL of the key words you entered. You can then link to those Web pages directly from the search results page.
Selecting words for a query is very important. Be specific or you will be shown links to thousands of pages. Avoid using "and" since it is already implicit in the query logic. That is, pages that match your query will contain all of your key words in any order. Capitalization, incidentally, does not matter.
Engine logic will vary slightly, but a general rule that seems to apply is that subtle differences between root words and derivatives or variations of the root words are honored in key word searches. For example, the key word queries graphics editor and graphic editors will provide different -- albeit potentially overlapping -- search results.
Phrase queries can also be very handy. If you do a key word query on graphic editor, you will get back pages that use the word graphic anywhere and the word editor anywhere. On the other hand, a phrase query in the form "graphic editor" (quotes included) will produce only pages that include that specific phrase. Phrase queries that specify multiple phrases can narrow a search very nicely. For example, to look for a free Web host that provides free e-mail, query on
"free web host" "free email" "free e-mail"
According to the Chicago Manual of Style, the spelling of e-mail should have the hyphen. Since not every Web page spells it correctly, however, two spellings are included in the query above. You will appreciate little realities of life like alternative spellings of e-mail rather quickly once you start using search engines. Do you want to know whether Internet should be capitalized? Enter this query:
Searching the Web for information is a basic skill for Web authors. You have been introduced to the activity here because it is one of the most necessary tools in your project toolkit.
Do you markup on a Windows computer? You also have a good range of choices for free HTML editors. I have used Textpad for years and made it a required download for my in-person Web Sys course at the University of Texas for years. It is described below.
This information on downloading and setting up TextPad on your home computer expands on the information in Lesson 1. TextPad is required for the course.
The TextPad Download is a zipped file containing a free trial-ware version of Textpad.
Please follow these tested directions:
Begin the set up steps described next
Use the Help system and practice using the "WebDNA-HTML Tags" clip library.
I have been teaching with TextPad for about five years and hear from students several semesters after class about how useful TextPad is on their nonstudent Web projects.
This is further information on transferring your assignments from your home computer to the UTTC komodo Web server. You will need to read about obtaining a userID and password in Lesson 1.
The graphic below show local folders (left) and remote folders (right) that are mirror images (exact copies) of each other. Working on the Web often means your work is done on a home computer. After testing your work upload it to a remote Web server where it is visible on the World Wide Web. Neither the local computer nor the remote server are sufficient. Both systems serve a purpose and are necessary for this course.