COMPUTER O LEVEL(FORM THREE) NOTES – WEB DEVELOPMENT

Web Development (Web Page Design)

This topic covers creating a multimedia World Wide Web (WWW) site that informs and entertains. It is an evolving course focusing on producing multimedia content for the WWW using web design software (e.g., Java, HTML script, FrontPage). The goal is for you to create a media-enriched WWW site.

The software used to create websites includes:

• Text editors, e.g., Notepad and WordPad
• Macromedia Dreamweaver
• HTML Kit
• Microsoft Home Page
• Microsoft FrontPage

In this chapter, you will use simple text editors and FrontPage to create and maintain your WWW site, which will be stored on a secure server or hard disk.

2.1.1 Introduction to Webpage Design

If you have mastered this topic, you should be able to use the following terms correctly in your assignments and exams:

• HTML: Stands for Hypertext Markup Language, a simple scripting language to create a webpage.
• Hypertext: A piece of text that works as a link.
• Markup Language: A way of writing layout information within documents.
• Tag: A markup for telling the browser how to display content.
• Know who your audience is, e.g., customers, employees, students, friends, family.
• If making a site for your company, ensure the goal is specific and quantitative.
• Keep your goal simple. A couple of sentences or a short paragraph is enough. If your goal is too long, your site may seem unfocused.
• Script: A list of commands that can be executed without user interaction.
• Script language: A simple programming language used to write scripts.
• Perl: A scripting programming language similar in syntax to C language.
• ASP: Server-side scripting language that can be included inside HTML files.

Microsoft FrontPage

A program used to create and manage Internet and intranet sites without programming; FrontPage is available as part of Microsoft Office suites or as a stand-alone product.

What is a FrontPage Web site?

• A FrontPage Web site is created in FrontPage and contains web pages, graphics, documents, multimedia, and almost any kind of file you want.
• It also contains hidden folders and files that support FrontPage-specific functionality, known as FrontPage metadata. This metadata is simple and supports site management.

Two kinds of FrontPage Web sites

• There are two kinds: disk-based and server-based.
• A disk-based site is created on your local hard disk and later published to a Web server. A server-based site is created and worked on directly on a Web server without publishing.

2.1.2 Prepare Webpage Structure

• Once your site’s goal is defined, sketch out the structure of your site beforehand.
• Use pencil and paper or a diagramming tool like Microsoft® Visio® to draw boxes for pages and arrows for links, keeping your goal in mind.
• This visual outline saves time; it’s easier to erase and revise on paper than to delete and rebuild pages later.

Sketch a Common Layout

After sketching a site map, start sketching a common layout for each page.

Consider the following:

• Should your site have a header and footer common to each page?
• Should navigation be consistent on each page?
• Are there marketing requirements, such as specific fonts and color schemes?
• Does your site need legal elements like a copyright notice?

Later, When You’re Ready

• Using your sketches as a model, use FrontPage to design web pages in HTML, possibly using tables for page layout.
• Once the layout is defined, add content such as text, hyperlinks, pictures, and interactive buttons.

2.1.3 Create Webpage Using HTML

Introduction

HTML pages specify web page content. They contain information and instructions for web browsers on what and how to display content. HTML is simple, easily learned, and supports media like sound, images, and video.

HTML documents are ASCII files created using simple text editors or editors like FrontPage. With a text editor, you must save and load the page in a browser to see the result. WYSIWYG (What You See Is What You Get) editors like FrontPage show the page as it is constructed.

Using a simple text editor gives more control over HTML code but requires knowledge of the code and visualization of the output. As HTML becomes more complex, sophisticated editors like FrontPage support advanced features, making implementation easier.

HTML consists of tags enclosed in < and > brackets. For example, defines the head section of an HTML document. Certain characters like &, <, and > are reserved and interpreted as HTML codes.

Each HTML page follows a basic structure, as shown below:

When viewed in a browser, this page looks like:

• All normal web pages consist of a head and a body.

• The head contains text and tags that do not show directly on the page.
• The body contains text and tags that are shown directly on the page.

2.1.4 Webpage Preview

The Preview view shows an approximate view of what the page would look like in a web browser. Elements like dashed lines for tables won’t appear in this view.

2.2.1 Publishing WebPages

Publishing web pages is the process of copying all files to a remote location on a server.

2.2.2 The Importance of Publishing the Webpage

Publishing makes web pages available to others on the World Wide Web (Internet) or a Local Area Network (Intranet). This enables the targeted audience to access information from the website. People may download the pages they need along with associated files like forms and pictures.

2.2.3 Procedure of Transferring Webpage to the Web Server

• A web server is a computer running special software that “serves” HTML pages and associated files when requested by a client, such as a web browser.
• When you visit a site, you make a request by entering a URL (e.g., http://example.microsoft.com). A URL is a Uniform Resource Locator, an address for a file on the web.
• When the server receives your request, it serves or downloads the page and all associated files like pictures.

Web Server Details

• Your hosting company may determine your site’s URL, or you can register your own unique URL.
• The correct file name for your home page; common names include index.htm, index.html, default.htm, or default.html depending on the server.
• User name and password, often needed to publish pages to a remote server.
• Server restrictions, such as total file size limits or other constraints.

2.2.3 The Difference Between Webpage and Website

A webpage is a document on the World Wide Web consisting of an HTML file with associated graphics and scripts in a directory on a machine, identifiable by a URL. Usually, a webpage contains links to other webpages.

A website is a group of related HTML documents and associated files, scripts, and databases served by an HTTP server on the World Wide Web. The documents cover related topics and are interconnected through hyperlinks. Most websites have a home page as a starting point, often functioning as a table of contents. Large organizations may have dedicated HTTP servers for a website, but a single server can also serve multiple small websites. Users need a web browser and Internet connection to access a website.

You can create a website on your local computer, but it won’t be available to others until published—or copied—to a web server.

2.2.5 Access Information on a Website

Where to Find a Web Server

• Where you find a web server depends on how widely available you want your site to be.

– World Wide Web: To make your site available on the World Wide Web, find a company offering server space, called website hosting companies. Search the Internet or use a URL to find one. This will be practiced at the end of this lesson.

– Intranet: To make your site available only on your company’s intranet, your IT department may provide a server. Your own computer can also be configured as a web server.

How to Put Your Website on a Web Server

• To put your site on a web server, you publish it by copying all files to a remote server location. This location is usually an HTTP or FTP path, depending on server technology.
• FTP (File Transfer Protocol) is a common way to upload files to a remote server. If your server supports FTP, you publish to an FTP location, e.g., ftp://ftp.MyServer.com/myFolder. Note that you still visit the site using an HTTP path in your browser.