Tutorial 1 Assignments 
Assignments are due by midnight of the assigned date.

Lecture 1

DEVELOPING A WEB PAGE

Learning Objectives:

Tutorial 1 explores the basics of World Wide Web and Hypertext Markup Language.  You will learn how to create a basic Web page.  In addition, you will  learn how to create and apply HTML tags, format page headings, paragraph, lists, and individual characters. You will  learn about logical and physical elements. Finally, you will be able to insert a picture, a special character, and a line in an HTML document.

In the first session, you will  learn about different networks, World Wide Web history, Web browsers and Web servers.  You will start to explore the language of the Web – HTML.  In addition, you will learn how to create HTML documents using different tools.

The second session explores the syntax of HTML language, and teaches you about elements.  You will  learn how to create HTML tags and apply them to an HTML document.  You will learn how to create and format text in an HTML document.  You will learn about one-sided and two-sided tags, and opening and closing elements. Finally, you will create basic a HTML document with headings, paragraphs, and lists.

In the third session, you will learn about inline and external images that can be displayed on the Web.  You will study how to insert an image into an HTML document and how to create special characters not found on the keyboard. The session winds up with tips for writing good HTML code. 

To help you understand any new vocabulary that you may not understand, I have created a list of Key Terms that you can refer to whenever you feel the need.

Exploring the History of the World Wide Web

Following are some basic facts about the Internet. To share resources effectively computers can be linked together in a structure called a network. If the computers are close together, the network is called a local area network (LAN). A network that covers a wider area, perhaps several cities, is called a wide area network (WAN). The Internet is a “network of networks.” The physical structure of the Internet uses fiber-optic cables, satellites, phone lines, and other telecommunications media to send data back and forth. 

In 1989, Timothy Berners-Lee and other researches at the CERN nuclear research facility near Geneva, Switzerland, laid the foundation of the World Wide Web (Web), which allows a quick access to any resource on the Internet. They developed a system of hypertext documents; electronic files that contain elements that you can select. The key to hypertext is the use of links, which you activate by clicking, to move from one topic to another. The hypertext approach has become the dominant method of sharing and retrieving information on the Internet, known as World Wide Web.

Documents on the Web are known as Web pages. Web pages can contain images, video, sound clips, and programs that run directly from a Web page. A Web page is stored on a Web server, which makes the page available to users of the Web. To view the page, the users run a Web browser installed on their computer. A Web browser is a software program that retrieves a Web page and displays it. Browsers can either be text-based (e.g., Lynx) or graphical browsers (e.g., Internet Explorer, Netscape). With a text-based browser, you navigate the Web by typing commands; with a graphical browser, you use the mouse to move from page to page.

Introducing HTML

Web pages are text files, written in a language called Hypertext Markup Language (HTML). A markup language describes the content and format of documents. HTML was derived from the Standard Generalized Markup Language (SGML) used for large-scale documents. HTML allows Web authors to create documents that can be displayed across different operating systems. HTML code is easy to understand for nonprogrammers. HTML describes the format of Web pages through the use of tags.

HTML has a set of rules, called syntax, that specify how document code is written. These rules appear as a set of standards or specifications developed by a consortium of Web developers, programmers, and authors called the World Wide Web Consortium (W3C).

Many tools have evolved that allow you to create and manipulate HTML documents. While anyone can write an HTML document in a text editor like Notepad, newer tools include HTML converters and HTML editors. If you want to download a good free HTML editor, with a WYSIWYG (What You See Is What You Get) interface, click this link. (Note: You cannot download programs in the computer commons.)

HTML is continually evolving. Many users have learned earlier versions of HTML that contain features that will no longer be supported in future versions, or which are no longer recommended. Newer Web pages are compliant with XHTML standards. This tutorial teaches the latest, XHTML-compliant techniques, but also refers to rules that were true in earlier versions of HTML. When a reference window in the tutorial is labeled Deprecated, it refers to a technique that is no longer recommended.

Creating an HTML Document

Plan how you want to layout your web page and how you want it to look before writing the code. An element is a distinct object in a document, such as a photograph, or a paragraph of text. Be sure that you understand the difference between elements and tags? Tags are the HTML codes that control the appearance of the document content. There are two types of tags: one-sided tags, which require only a single tag, and two-sided tags.

Elements that require one-sided tags are known as empty elements. A one-sided tag allows you to insert non-character data into the Web page, such as a graphic or a video clip. A two-sided tag contains an opening tag that tells the browser to turn on a feature to be applied to the content, and a closing tag that turns off the feature. Tags are not case sensitive, but the current standard is to display all tags in lowercase letters. The HTML tags are involved in specifying the basic structure of a document. These include the <html> tag, the head element and the body element.

To create and display a web page, you will need a text editor, a browser, and web space. I have described them below and provided a simple activity that I hope helps you understand the process involved in writing your web pages. After going through the short activity shown below, I hope that you will be excited to learn more about using HTML to create your own web pages.

1.  Using a Text Editor

A text editor is used to create simple documents that do not require formatting and to write web pages.  Notepad comes with Microsoft Windows.

TRY THIS AS AN EXAMPLE OF HOW YOU TO CREATE A WEB PAGE:

First open Notepad by clicking Start, pointing to All Programs, pointing to Accessories, and then clicking Notepad.

When Notepad is open, type the HTML text show below. Or to save time, you can highlight the HTML text below (on this page) by dragging your mouse pointer over it instead of typing it, then right-click on the highlighted HTML text and click Copy to copy it. Next right-click the white space in Notepad and click Paste to insert the HTML text into Notepad.

When you finish, it should look like the Notepad illustration next to it. 

 

<html>
<head>
<title>This is the title at the top of the window</title>
</head>

<body>
This is the text that will appear in my web page.
</body>

</html>

 

 

SAVING A FILE AS A WEB PAGE:

Click the File menu and choose the Save As command. Notepad wants to save the file as .txt, but you must delete the suggested File name in the textbox and type the filename as trythis.htm. When you type the file name, you must type the period and extension .htm to save the file as a web page instead of a text page.

The extensions may not show in your file list unless you change your folder options from the Tools menu on the View tab (or for Vista from the Organize tab, choose Folder and Search Options from the drop-down list) and then remove the checkmark from the option Hide extensions from known file types.

Make sure you know where you saved the file. You must be able to find a file after you save it. It would be a good idea to create a file folder for this class in which you save all your work to make it easy later to find the files you need.

TIP: Never use spaces in file or folder names. Following is an example of a web address that contains spaces in the folder and filename:

\link{http://nolsongolden.com/users/ghenders/Review%201/gh%20Review%201.htm,Review1

Do you see the %20 all through the example?  These will appear because the Internet was not made to show file or folder names with spaces.  If you want to create good HTML, I strongly suggest you start learning now that spaces are not allowed in file or folder names on the web.

Without spaces in your files and folders, your web address would look like this:

\link{http://nolsongolden.com/users/ghenders/Review1/Review1.htm,Review1

See how much less confusing the web address looks when you don't use spaces in the folders or filenames.

NOTE: Programs such as Notepad will save files with .txt extensions. Web browsers cannot read files with a .txt extensions at the end, such as gloria.txt. Browsers can only read files with .html, .htm, .shtml, .dhtml, and so forth. After you type your web page in a text editor, you must make sure that you use the SAVE AS command and type in the extension .htm at the end of the filename, such as gloria.htm.

To create your own web page for practice, you could replace the CAPITALIZED words shown in the illustration above with your own text.

2.  Using a Browser

Since you have saved the HTML file, you are ready to open it in a browser to see how it looks. Recall that a browser is a software program that allows you to view the web page on your computer screen. The two Web browsers used most often are Microsoft Internet Explorer and Netscape Navigator. Below are some browsers that are available free on the Internet:

  • Microsoft Explorer - Download the latest version.
  • Mozilla - download for the latest release.
  • Opera - All desktop versions of Opera 5 and 6 are free!
  • Netscape Navigator - Download hte latest version.
  • Web Washer - a browser add-on that filters all kinds of advertising on Web pages. Runs on clients or servers. Free for home users.
  • Surfin' Annette - web browser for children filtering out offensive material and sites

Open the .htm file from My Computer by clicking Start, My Computer, and then locating the file trythis.htm that you created. Then double-clicking the file name will open it as a web page, and you can see how your first web page looks.

ALTERNATIVE METHOD: To open the .htm file in your Web browser, you can first launch your Web browser, then pull down the File menu and select Open File, and then enter the location and file name that you just created.

                Below is an illustration of the web page the way it will appear in a browser.

     Suggestion for Checking Your Work More Quickly

While you are typing your HTML text in Notepad, keep both Notepad and your browser open.

If you want to make a change, click on the Notepad window, edit your HTML text, and resave it. Then click on the browser window and click the Refresh button to see your changes.

 3. Using web space on a web server

Web space is what you need to put your web pages on the Internet for anyone to view. The webmaster will be providing free web space for this class without advertisement where you will upload the required web page assignments each week. In the Tutorial 1 assignments, I have provided the link and instructions on how to upload your files.

Self-Test

Using a Web Authoring Tool to Create Web Pages

If you know how to use Microsoft FrontPage, you are allowed to use it to create your web pages. The campus computer labs and LRC have the FrontPage program installed. FrontPage automatically converts the text portion of the document into HTML format and saves each graphic in the document as a separate graphic file with sequentially generated file names. Therefore a single document with pictures will be converted into a collection of several files; keep them all in the same folder so they won't get separated. You may need to clean up the automatically-generated HTML to have it formatted correctly.

Working with Block-Level Elements

A block level element contains content displayed in a separate section within the page, set off from other blocks. Paragraphs and headings are examples of block-level elements. HTML supports six levels of headings, numbered <h1> through <h6>. The <h1> heading tag is the largest and most prominent. Headings are always displayed in a bold font.

Earlier versions of HTML allowed a great deal of inconsistency with paragraph tags and with blank lines. Use the techniques that conform to XHTML standards, using the paragraph element correctly.

Making a List

HTML supports three kinds of lists: ordered, unordered, and definition. An ordered list is used to display information in a numeric order. Use the syntax described in the Reference Window on page 24 to mark lists. You can also create an unordered list using <ul> tags. Unordered lists have bullets in front of the items, instead of numbers.  A definition list is a list of terms, each followed by a definition line that is typically indented slightly to the right.

Exploring Other Block-Level Elements

HTML supports many block-level elements. Review  the chart in Figure 1-25 in your text, and try to think of examples of how you  might use some of these elements.

Working with Inline Elements

Inline elements are also known as character formatting tags.  Look at  the chart in Figure 1-26.

Using Element Attributes

Logical tags define the nature of the tag’s contents, but not necessarily how that content should appear. An example of a logical tag is the <head> tag. Physical tags define the appearance of the content. The bold tag <b> describes only the appearance of the content, but nothing about its purpose in the document.

In HTML development, the movement is away from physical tags, toward logical ones. When you have a choice, you should use the logical elements, and save the physical ones for situations where there is no other choice.

Working with Empty Elements

Empty elements are used to insert graphic images and other similar items into a Web page. This section of the Tutorial shows how to use empty elements to insert graphics and horizontal lines. Graphics are inserted as inline images. An inline image is displayed directly on the Web page when the page is accessed by a user. An inline image can be placed on a separate line or directly within a line of text. There are two formats for inline images: GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group). To create an inline image, you should use <img> tags. If the image file is located in another folder, you need to specify the “src” attribute, which indicates the full location path. Review  the Reference Window on page 41 of the textbook.

You can create a horizontal line using <hr> tag. A height attribute specifies the height of the line. A width attribute indicates the width of the line. A color attribute indicates the color of the line. The “size” and “width” attributes are measured either in pixels or as a percentage of the screen width. A pixel is a square dot on your computer screen about 1/72 inch wide.

Working with Character Sets and Special Characters

Occasionally you  will want to include symbols in your Web page that do not appear on the keyboard. For example, you can insert mathematical symbols or the copyright symbol into an HTML document. HTML supports the use of special character symbols that are identified by a code number or name.

To create a special character, type an ampersand (&) followed by the code name or the code number, and then a semicolon. Code numbers are preceded by a pound sign (#). Figure 1-39 shows some HTML symbols and the corresponding code numbers or names.

 

Basic Rules (for uploading files to the server)

1. ALWAYS USE lowercase when writing HTML, naming files, using links, or anything really that isn't deemed "text."

2. Never use spaces when calling or naming files.

3. Organize your stuff. Put all of your HTML files in the root folder and create an organizational structure that holds all of your images by creating a sub-folder within your root folder called "images."

4. Always use hierarchical structure rather than linear (unless your website is small and simple, such as a two page website).

Remember:

 

ASSIGNMENTS FOR TUTORIAL 1

(If you have not already submitted the interactive syllabus, please do it before you do the assignments.)

  1. READ Lecture
     

  2. DOWNLOAD STUDENT FILES. You will need the files to complete each tutorial assignment in the book. Download the files listed as item Data Files for Exercises in Text (9.45 MB) (shown as item 2) from the publisher's website:

     http://course.com/studentcenter/downloads.cfm?isbn=978-1-4239-2546-0&CFID=9685277&CFTOKEN=29114126.

It is VERY IMPORTANT that you take the proper time to extract your data files and know where you put them in order to use them later. If you do not, you will not be able to complete any of the work for this course.

TIP: After you download the files, you need an extracting software program on your computer. Windows XP has a built in extracting program, but if you are on a different operating system, you need to download an extracting program, such as WinZip to your computer. If you need WinZip, you can download a "TRIAL VERSION" for free and use it for the entire course at http://www.download-it-free.com/winzip2/.

  1. COMPLETE TUTORIAL 1 in the Textbook, Pages 1-48. Be sure to do the TAN  sections in the book by typing the HTML code into Notepad. You will need to do the activities in this section in order to complete the Review Assignment.

Open Notepad from your computer as the text editor where you will type your HTML code. It comes with the Windows Operating System, and you can use it to create text files for the web pages that you will create. On your computer, you will find it by clicking START>PROGRAMS>ACCESSORIES>NOTEPAD.

TIP: If you do not want to use Notepad, you can download a different "text editor" by clicking the link to the Textbook's website http://www.course.com/np/html/index.cfm?action=software&chapter=99.  

IMPORTANT--Saving web pages:

TIP: To edit your browser (.htm) file, open it with Notepad. Each time you change the .htm file, you must resave it before you can see the changes in the browser when you click Refresh.

  1. DO REVIEW ASSIGNMENT (Pages 50-52 with blue background--not tan sections as shown in the tutorial.)
     
  2. JOIN THE WEBSITE AND THE WEBSITE CLASS.

You will use a class website to upload your assignments to display them on the Internet. To start, you must first you must join the website online and then join the website class. For instructions, click Join the Website and the Website Class

  1.  UPLOADING YOUR WEB PAGES AND SUBMITTING YOUR ASSIGNMENTS ONLINE

    Each time you create a web page, first make sure that you have previewed it in your browser before you upload your files to the server. When it looks the way you want it to look, you will upload the files to the server in order to submit it to me.

 For instructions, click Upload and Submit

After you upload and share your files in RCampus, I will look at your web pages and give you a grade for completing them according to the textbook instructions. In order for me to see your web pages, you will share your files to submit them, and you do not have to e-mail your assignments to me.

  1. TAKE QUIZ 1 by clicking QUIZ.

You will take the multiple-choice, true/false quiz on-line. The quiz program will generate the results. You may take the quiz only one time. To get 100 percent on the quizzes, use your book to look up the answers to questions that you don't know. The quizzes are to entice you to study and understand the concepts and terminology in your book.

You cannot go back and look at the quizzes online after you take them. Therefore, take note of anything you missed on a quiz, and study that section in your book to prepare for the midterm and final exams. You can print the test results to keep a hard copy.

To take the quiz, you will need to enter your username and password. Remember that your username is the first four letters of your last name and the last four digits of your social security number, such as hend6789 (for Henderson 123-45-6789). Use lowercase letters. 

Tip: Be sure that you do not press the ENTER KEY after entering information from the keyboard! Pressing the Enter key may end the quiz and grade it immediately.

  1. POST TWICE TO DISCUSSION BOARD by logging into the Discussion Board and responding to the Topics. Please review the syllabus for instructions on how to adequately post for this course.

click here to go to the home page click here to email the instructor Click here to go to the discussion group