INTRODUCTION TO WEB DEVELOPMENT

SCOPE OF THE EXERCISE

In this exercise, students will have an overview of web development. Topics include definition of important terms such as the internet, World Wide Web, web server, web browser, HMTL, XHTML, and XML. Also, it provides a brief explanation of HTML and XHTML, and why there are two different languages designed to do the same thing create web pages and what is XML and how it solved the problem of many web developers to separate content from tags. Finally, students will research on the following topics: good and bad web design features, planning a web site, web page layouts, and web standards. The information on the visited web sites will be used in evaluating the quality of students own work.
LEARNING OBJECTIVES

At the end of this exercise, the student should be able to: (a) know the definition of the important terms used in web development; (b) know how web pages work; (c) know the difference between HTML and XHTML; (d) know how to apply the web design features to their projects; (e) know the different web page layouts; and, (f) know how to plan a web site.
LIST OF SOFTWARE REQUIRED

Students will use the following software to perform the tasks required in this exercise: (a) Notepad (b) Internet Explorer
DEFINITION OF TERMS

Throughout this exercise, the use of these terms mean: (a) INTERNET - a worldwide network of computers that houses information on a multitude of subjects. It links together millions of businesses, the government, educational institutions, and individuals using modems, telephone lines, and other communication devices and media. (b) WORLD WIDE WEB - also called the Web, is the part of the Internet that supports multimedia and consists of a collection of linked documents. (c) WEB PAGE a document or page of information which contains multimedia, text, graphics, sound and video. (d) WEB SITE - is a collection of Web pages that are created and maintained by a company, a university, or college, a government agency, or even an individual. (e) WEB SERVER is a computer that sends (serves), requested Web pages. Any computer that has server software installed and is connected to an Internet can view it. (f) WEB BROWSER - also called a browser, is a program that interprets and displays Web pages and enables

IT002L LABORATORY MANUAL you to link to other Web pages. (g) HTML (HYPERTEXT MARKUP LANGUAGE) - is a set of special instructions called tags or markups that specify links to other documents, as well as how the page is displayed. (h) XML (EXTENSIBLE MARKUP LANGUAGE) - is a language used to create markup languages, such as HTML, that describes structured information. (i) XHTML (EXTENSIBLE HYPERTEXT MARKUP LANGUAGE) - is a version of HTML that is compliant with the stricter rules of XML. (j) WEB STANDARDS - are the core set of rules for developing websites. (k) WORLD WIDE WEB CONSORTIUM (W3C) - The central organization who is responsible for creating and maintaining web standards.
DISCUSSION

Quick access to information is vitally important. Each day, you make decisions in all areas of your life. Today, computers and networks have become the tools people use to gather, analyze, and use information to make informed decisions and to communicate with others around the world. The world's largest network is the Internet - a worldwide network of computers that houses information on a multitude of subjects. It links together millions of businesses, the government, educational institutions, and individuals using modems, telephone lines, and other communication devices and media. More than 12.5 million people in more than 150 countries are connected to the Internet in their homes, offices, or schools. Users with computers connected to the Internet have access to a variety of services including e-mail, newsgroups, and the World Wide Web. The World Wide Web, also called the Web, is the part of the Internet that supports multimedia and consists of a collection of linked documents. These documents, or pages of information, are known as Web pages. Because the Web supports multimedia, text, graphics, sound and video, they all can be included on a Web page. Today, many people are developing Web pages including students, business executives, and teachers, as well as professional Web developers. Each person has his or her own style of and the resulting Web pages are as diverse as the people who create them. 1.01. WHAT IS A WEB PAGE? A Web site is a collection of Web pages that are created and maintained by a company, a university, or college, a government agency, or even an individual. Web sites are used at universities and colleges to distribute information about major areas of study, to display course information from professors to students to view, and to allow students to register for classes online. Companies use Web sites to advertise their products worldwide as well as to provide 24-hour online support for their customers. Web pages are stored on a Web server or host, which is a computer that sends (serves), requested Web pages. Any computer that has server software installed and is connected to an Internet can view it. Web pages are created using hypertext markup language (HTML), which is a set of special instructions called
1-2 MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL tags or markups that specify links to other documents, as well as how the page is displayed. A Web page is a file that contains both text and HTML tags. HTML tags mark the text to define how it displays when viewed as pages on the World Wide Web. Examples of tags are <B> to indicate bold text, <P> to indicate a new paragraph, and <HR> to display a horizontal rule across the page. To view a Web page written in HTML, you use a Web browser. A Web browser, also called a browser, is a program that interprets and displays Web pages and enables you to link to other Web pages. The two more popular browsers are Internet Explorer and Netscape Navigator. 1.02. HOW WEB PAGES WORK When you are viewing web pages, they look a lot like paper pages. At first glance, the process of displaying a web page is simple: You tell your computer which page you want to see, and the page appears on your screen. If the page is stored on a disk inside your computer, it appears almost instantly. If it is located on some other computer, you might have to wait for it to be retrieved. Of course, web pages can do some very convenient things that paper pages can't. For example, you can't point to the words continued on page 57" in a paper magazine and expect page 57 to automatically appear before your eyes. Nor can you tap your finger on the bottom of a paper order form and expects it to reach the company's order fulfillment department five seconds later. You're not likely to see animated pictures or hear voices talk to you from most paper pages either. All these things are commonplace on web pages. But there are some deeper differences between web pages and paper pages that you'll need to be aware of as a web page author. For one thing, what appears as a single page on your screen may actually be an assembly of elements located in many different computer files. In fact, it's possible to create a page that combines text from a computer in Australia with pictures from a computer in Russia and sounds from a computer in Canada. A web browser reads the commands in the HTML code and then displays all the images and text. The coded HTML commands in the text instruct the browser to look for separate image files and display them along with the text. Other commands tell it how to break up the lines of text on the page. 1.03. THE PIECES AND PARTS OF A WEB PAGE The important point to note right now is that creating a web page is just a matter of typing some text. You can type and save that text with any word processor or text editor you have on hand. You then open the text file with any HTML-compatible software (web browser) to see it as a web page. When you want graphics, sound, animations, video, and interactive programming to appear on a web page, you dont insert them into the text file directly, as you would if you were creating a document in most print-oriented programs, such as Microsoft Word and Adobe Acrobat. Instead, you type HTML text commands telling the web browser where to find the media files. The media files themselves remain separate, even though the web browser makes them look as if theyre part of the same document when it displays the page.

MALAYAN COLLEGES LAGUNA

1-3

IT002L LABORATORY MANUAL Most Web pages are made up of the same common elements, shown in Figure 1.01. Figure 1.01 Graphics, text, and links are among the elements of a Web page

Table 1.01 Explains these common elements in more detail Element URL Text Graphic Hypertext link Graphic link Description The address of the current Web page. Just normal text, like you'd read in a book. A picture on a Web page. A text-based link to another Web page; click the underlined text to go to the linked page. A graphic that, when clicked, links you to another Web page.

1.04. THE MANY FACES OF HTML It is important to understand that a single web page can take on many different appearances, depending on who views it and what they view it with. This distinction in web page views is important to grasp early in your HTML education because it hammers home the point that you dont have a whole lot of control over how your pages are viewed. Or, more accurately, you dont have much control over the size of the area in which your pages are viewed. Beyond that, browsers are reasonably consistent in rendering the actual content on your pages, as well as deciding what is most important (text) and what can be overlooked (images) if screen space is limited.

1-4

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL What this means is that most web pages will look the same across major desktop web browsers, and they will also look the same on PCs, Macintoshes, and UNIX machines. The page in Figure 1.01, for example, would look the same on any of these machines as long as the size of the viewing window, fonts, and program settings were the same on each machine. Your job is to design pages so that they look as consistent as possible across major browsers with their default settings. Unfortunately, you as a web page author have no direct control over the display settings on a particular computer; each individual who looks at your pages can always choose whatever browser settings he or she prefers. You cant even assume that people will be viewing your web pages on a computer screen. As you learn to make your own web pages, remember how many different forms they can take when people view them. 1.05. THE SCOOP OF HTML, XML, and XHTML HTML quickly went from a tidy little markup language for researchers to a full-blown online publishing language. And after it was established that HTML could be jazzed up for graphical browsing, the creators of web browsers went crazy by adding lots of nifty features to the language. Although these new features were neat at first, they compromised the simple design of HTML and introduced lots of inconsistencies when it came to how browsers displayed web pages. In the past years a significant effort has been made to reel in the inconsistencies of HTML and attempt to restore some order to the language. Ideally, a web page designer should be able to define exactly how a page is to look and have it look the same regardless of what kind of browser or operating system someone is using. Better still, a designer should be able to define exactly what a page means, and have it look consistent across different browsers and platforms. This utopia is still off in the future somewhere, but a language called XML (Extensible Markup Language) is playing a significant role in leading us toward it. XML (Extensible Markup Language) is a language used to create markup languages, such as HTML, that describes structured information. XML provides a basic structure and set of rules to which any markup language must adhere. The point is that XML lays the ground rules for organizing information in a consistent manner, and that information can be anything. XML is not entirely about web pages. It can be used to represent any kind of information whizzing around the globe among computers, mobile phones, handheld computers, televisions, and radios, you can start to understand why XML has much broader ramifications than just cleaning up web pages. However, one of the first applications of XML is to restore some order to the web, which is why XML is relevant to your learning HTML. The natural merger of the two technologies results in HTMLs adherence to the rules and structure of XML. To accomplish this merger, a new version of HTML was reformulated that follows the stricter rules of XML. The new compliant version of HTML is known as XHTML.

MALAYAN COLLEGES LAGUNA

1-5

IT002L LABORATORY MANUAL XHTML (Extensible Hypertext Markup Language) is a version of HTML that is compliant with the stricter rules of XML. It consists of all the elements in HTML 4.01 combined with the syntax of XML. XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible!

1-6

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL

References: Textbooks

1. Cox, V.L., Wermers, L., and Reding E. HTML Third Edition. Thomson Course Technology, 2007. 2. Haynes, B., Crumpler, W., & Duggan, S., Photoshop Artistry for Photographers Using Photoshop CS2 and Beyond. New Riders (2007). 3. Oliver, D., Morrison, M. HTML and CSS in 24 Hour 7th edition. Sams Publishing, 2006. 4. Shelly, G. B., Cashman, T. J., and Vermaat, M. E. Discovering Computers 2007. Course Technology 2007. 5. Zeldman, J. Designing with Web Standards Second Edition. New Riders, 2007.
Online Documents

1. About.com Web Design and Tutorial. http://webdesign.about.com/ 2. Nielsen, Jakob, Ten Usability Heuristics , http://www.useit.com/papers/heuristic/heuristic_list.html 3. Tognazzini, Bruce, First Principles of Interaction Design, http://www.asktog.com/basics/firstPrinciples.html 4. University of Washington. Access IT Web Design and Development I. http://www.washington.edu/accessit/webdesign/index.htm 5. WebPagesThatSuck.com, http://www.we bpagesthatsuck.com/ 6. Williams, Robin, Good Web Design Features, http://www.ratz.com/featuresgood.html 7. WWW Cyberguide Ratings for Web Site Design, http://www.cyberbee.com/design.pdf

MALAYAN COLLEGES LAGUNA

1-7

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 1
OUTPUT INDICATORS:

After performing the following exercises, the student is expected to be able to: (a) recognize a good web design from a bad web design; (b) critique a web site; (c) point out the different web standards; (d) plan a web site; and (e) identify different web page layouts.
INSTRUCTIONS:

(a) (b) (c) (d)

Read the problem carefully and follow stated instructions. Detach the accomplished exercises and laboratory score sheets. Submit exercises and laboratory score sheets to your laboratory instructor. Do not forget to shut down your system properly.

1-8

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 1-01 INTRODUCTION TO WEB DEVELOPMENT

NAME OF STUDENT ____________________________________________________ DATE _____________

INSTRUCTIONS:

1. 2. 3. 4. 5.

Start the browser. Search for web sites that give information on good and bad web design features. Cite URL, Title of Article, and Author of Article. Write down some of the most important ideas. Use a separate sheet if necessary.
GOOD AND BAD WEB DESIGN FEATURES

TOPIC URL TITLE OF ARTICLE AUTHOR OF ARTICLE IMPORTANT IDEAS

1 2 3

CRITERIA Organization of Thought (work is clearly organized) Explanation (complete response with a detailed explanation) Choice of Article (article is carefully chosen for its relevance to topic) TOTAL

SCORE 30 40 30 100

COMMENTS/REMARKS

Evaluated by / Date

MALAYAN COLLEGES LAGUNA

1-9

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 1-02 INTRODUCTION TO WEB DEVELOPMENT

NAME OF STUDENT ____________________________________________________ DATE _____________

INSTRUCTIONS:

1. 2. 3. 4. 5.

Start the browser. Search for web sites that give information on how to plan a web site. Cite URL, Title of Article, and Author of Article. Write down some of the most important ideas. Use a separate sheet if necessary.
HOW TO PLAN A WEB SITE

TOPIC URL TITLE OF ARTICLE AUTHOR OF ARTICLE IMPORTANT IDEAS

1 2 3

CRITERIA Organization of Thought (work is clearly organized) Explanation (complete response with a detailed explanation) Choice of Article (article is carefully chosen for its relevance to topic) TOTAL

SCORE 30 40 30 100

COMMENTS/REMARKS

Evaluated by / Date

1-10

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 1-03 INTRODUCTION TO WEB DEVELOPMENT

NAME OF STUDENT ____________________________________________________ DATE _____________

INSTRUCTIONS:

1. 2. 3. 4. 5.

Start the browser. Search for web sites that give information on web page layouts. Cite URL, Title of Article, and Author of Article. Write down some of the most important ideas. Use a separate sheet if necessary.
WEB PAGE LAYOUTS

TOPIC URL TITLE OF ARTICLE AUTHOR OF ARTICLE IMPORTANT IDEAS

1 2 3

CRITERIA Organization of Thought (work is clearly organized) Explanation (complete response with a detailed explanation) Choice of Article (article is carefully chosen for its relevance to topic) TOTAL

SCORE 30 40 30 100

COMMENTS/REMARKS

Evaluated by / Date

MALAYAN COLLEGES LAGUNA

1-11

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 1-04 INTRODUCTION TO WEB DEVELOPMENT

NAME OF STUDENT ____________________________________________________ DATE _____________

INSTRUCTIONS:

1. 2. 3. 4. 5.

Start the browser. Search for web sites that give information on web standards. Cite URL, Title of Article, and Author of Article. Write down some of the most important ideas. Use a separate sheet if necessary.
WEB STANDARDS

TOPIC URL TITLE OF ARTICLE AUTHOR OF ARTICLE IMPORTANT IDEAS

1 2 3

CRITERIA Organization of Thought (work is clearly organized) Explanation (complete response with a detailed explanation) Choice of Article (article is carefully chosen for its relevance to topic) TOTAL

SCORE 30 40 30 100 Evaluated by / Date

COMMENTS/REMARKS

1-12

MALAYAN COLLEGES LAGUNA

IT002L LABORATORY MANUAL

LABORATORY EXERCISE 1-05 INTRODUCTION TO WEB DEVELOPMENT

NAME OF STUDENT ____________________________________________________ DATE _____________

INSTRUCTIONS:

1. 2. 3. 4. 5. 6. 7. 8.

Start the browser. Visit one web site and comment on the site's design, content and noteworthy features. Keep detailed notes of what you observed. Answer the following questions: What is the eye drawn to immediately? Is the purpose of the site clear? How do the features enhance the site's main purpose? Based on your answers in question #4, conclude if the visited web site is a good or bad site. Cite URL of the web site. Write down some of the most important ideas. Use a separate sheet if necessary.
CRITIQUE A WEB SITE

TOPIC URL CONCLUSION

1 2 3

CRITERIA Organization of Thought (work is clearly organized) Explanation (complete response with a detailed explanation) Choice of Article (article is carefully chosen for its relevance to topic) TOTAL

SCORE 30 40 30 100 Evaluated by / Date

COMMENTS/REMARKS

MALAYAN COLLEGES LAGUNA

1-13