TID Chapter 8 Web Page Development

http

://w

ww

.

Iife is about the moments you live, not the regret you feelUnanimous

http

://w

ww

. Understanding a Web

• Web page is a single page containing text and graphics that has been labeled with the appropriate HTML coding for the web.

• Web site is a collection of linked Web pages containing various content that easily be navigated using a Web browser. It includes a beginning file called a home page.

• From the home page, you can navigate to all other pages on the site.

http

://w

ww

.A web page can contain any of the following:

– Text – Graphics (gif or jpeg) – Audio (.mid or .wav) – Interactive multimedia content that requires a

plug-in such as Flash, Shockwave or VML – applets (subprograms that run inside the page)

which often provide motion graphics, interaction, and sound

Web Page

http

://w

ww

. Terms used on the Web• WWW (World Wide Web)

– The Web is the part of the Internet that includes all files and documents that are available through servers. The two main parts of the Web are Web clients and servers.

• Browser– Browser is Internet computer programs that allow you to

navigate through the Internet. The most common Web browsers are Microsoft Internet Explorer and Netscape Browser (Navigator).

• URL (Uniform Resource Locator)– A URL is a Web site’s network address. If you enter a URL in a

browser, you will be taken directly to the Web site.– E.g: http://www.uum.edu.my/hea

protocol server name path

http

://w

ww

. Terms used on the Web

HTTP (Hypertext Transfer Protocol) HTTP is a protocol that is used to transfer and receive

files on the internet.

Hyperlinks A link to another Web page on your site or another

Web site on World Wide Web.

HTML (Hypertext Markup Language) HTML is a markup language or a collection of markup

tags that define the various components of a WWW document.

Web Server a computer on the World Wide Web (connected to the

Internet Backbone) that stores HTML documents that can be retrieved via a Web browser.

http

://w

ww

.This is a webpage displayed by Internet Explorer.

http

://w

ww

. Essentials of Good Web Design

Navigation buttons or bars are easy to understand and use.

A large site has an index or site map. The navigation bar or button give the visitor a clue

as to where they are, what page of the site they are currently on.

The hierarchy of information is perfectly clear. Text is big enough to read, but not too big. Graphics and backgrounds use safe colors. Page download quickly. Consistency from page to page every web page in

the site looks like it belongs to the same site.

http

://w

ww

. Planning a Web Site

Provide answers to the following planning questions.

– What are the goals of the web?

– What will its content be?

– How will it be organized?

– What do you want it to look like?

http

://w

ww

. Hierarchical Structure of Web Site

Sketching out a structure before creating a site can save you lots of work later.

After you've sketched a map of your site, it's time to start sketching a common layout for each of your pages.

• Prepare a sketch of your proposed website that shows the relationships between the pages.

http

://w

ww

. Hierarchical Structure of Web Site

http

://w

ww

. Web Page Development

• Web page can be created in a number of ways:

Using a plain text editor such as Notepad (writing HMTL code).

Using a WYSIWYG editor (web authoring

tool) such as Microsoft FrontPage or

Macromedia Dreamweaver.

http

://w

ww

. Writing HTML Code

• HTML Exercise• All you need is a text editor (eg: Notepad)• Open Notepad

Type the following code into your file and then save as index.html

<html> <head> <title> My First Web Page </title> </head <body> Hello World </body></html>

http

://w

ww

. Writing HTML Code

• Open browser to view your page

http

://w

ww

. Writing HTML Code (continue..)

<html> <head> <title> My First Web Page </title> </head <body> <center><H1>Hello World</h1><br>

<a href=http://www.uum.edu.my> Universiti Utara Malaysia</a> </body></html>

http

://w

ww

.

http

://w

ww

. Using FrontPage

• FrontPage is a great Web editing tool for people with limited knowledge and time for HTML coding.

• It’s similar to using Microsoft Word and it allows for two different editing modes, Normal and HTML view.

• As you are bolding text and inserting graphics in Normal view, FP is writing the HTML code for you.

http

://w

ww

. Understanding the FrontPage Screen

Page view tabs

Web Pagewindows

Web page name

Insertion point

Views bar

http

://w

ww

.Window Element

Description

Web page window This is where you type in text and work on your Web pages. You can have more than one Web page open at a time.

Web page name The name of the Web page you are working on.

Insertion point The small, blinking line is where your typed text appears in the Web page.

Views bar Used to display your Web site in six different views: Page, Folder, Reports, Navigation and Tasks.

Page View tabs You can view your page in three different ways: Normal, HTML and Preview.

Understanding the FrontPage Screen

http

://w

ww

.Page View DescriptionNormal Allows you to edit the Web page in

WYSIWYG (What You See Is What You Get) mode.

HTML Allows you to edit the Web page directly in HTML code. It is very textual and shows the code that translates the code onto the Internet.

Preview Allows you to see the Web page as it would appear in a Web browser.

Understanding the FrontPage Screen

http

://w

ww

.

http

://w

ww

. Create a New Web Site Using a

Template

• Using the templates and wizards makes it quick and easy to create a Web site.

• If you know what kind of information you will display in your web site, FrontPage’s Web site templates are a good resource.

• There are several templates to choose from a fun, personal site, to a more formal, customer support site.

• The pages and themes within each template change according to its type.

http

://w

ww


Template

• Click the New Page button arrow.

• A list of items you can create appears:

Page: Creates a single Web page based on the Normal Page template.

Web: Creates a new Web Site from a template or wizard.

http

://w

ww


Template

Select Web from the list. Click a template to see its description.

E.g. Select Personal Web from the Web Sites tab.

http

://w

ww


Template

From the Navigation View:

Double-click any page to be edited.E.g. Double-click Home Pageo Change the properties from the Format button or right

click the mouse.o Replace the template’s example text with your own

text.

http

://w

ww


Template

http

://w

ww

. Create a New Web Site Using a Wizard

• Using a Wizard is similar to using a template, but it does even more to help you create your web site.

• A wizard asks a series of questions that give information about your organization.

• The wizard then takes that information and automatically installs it into the new web site.

Make sure your have preplanned your web site.

http

://w

ww


http

://w

ww


Click Next to begin answering the wizard’s questions.

o Answer each question according to your needs and preferences.

After Finish, the wizard creates the web site for you with the information you entered.

http

://w

ww

. Creating a New Web Page

• As with other Microsoft programs, FrontPage automatically opens a blank web page.

• But if you want to create a new page after that, you can either use

OR

http

://w

ww


• A new web page can also created in Navigation view.

• Click the Navigation button in the Views bar.

• Double-click the Home Page button to create a home page (named as index.htm).

http

://w

ww


• To add connecting pages to your home page, right click the Home Page button and then click New Page two times to add two pages. The pages appear under the home page.

• You can rename the pages.

http

://w

ww

.• Working with text in MS FrontPage is very similar to

working with text in MS Word.

• Begin creating your Web site by building a home page. Begin creating your Web site by building a home page.

This is the “front door” to your Web site and should This is the “front door” to your Web site and should

include a greeting, a short explanation of what the Web include a greeting, a short explanation of what the Web

site is for, and links to the rest of the Web site.site is for, and links to the rest of the Web site.

• A home page is normally saved as index.htm/html or A home page is normally saved as index.htm/html or

default.htmdefault.htm

Creating a New Web Page

http

://w

ww


Your site should have:Personal detail & contact information

Format the web page using the Standard and Formatting Toolbar or using the Format Menu

Tips: Use table to control your layout

Save your work. Title Pictures or imagesHyperlink

Example:Tom Jute’s Website

Hands On Exercise - Creating Your Own Website

(plan before beginning)

http

://w

ww

. Inserting Pictures or Images

• There are four sources of pictures for a web:

Clip art from any number of sources including the Internet, FrontPage and PhotoDraw. It gives ready made images that can be placed into your work.

Scan the existing photographs with a scanner.

Capture pictures with a digital camera.

Programs like MS PhotoDraw, CorelDraw, Windows Paint or Adobe Photoshop allow you to create your own pictures.

http

://w

ww

. Formatting Pictures or Images

Resizing

Moving

CopyingCroppingAdding a BorderAligning an Image with TextAdding a Background ImageCreating a Thumbnail ImageAdding a Hyperlink to an Image

http

://w

ww

. Changing the Title of a Web Page

• A Web page’s title is an important part of the page and it introduce the web.

• It appears at the top of the Browser window (Browser title bar) when the page is open.

• To change the page Title:

• File Properties Type the title in the Title boxOR

• Right-click on the page and select Page Properties and enter the new title

http

://w

ww

. Inserting Hyperlinks

• A hyperlink is a link to another Web page on your site or another Web site on World Wide Web.

• It is a main tool for navigating the WWW.• Hyperlinks can take the form of text or

graphics, when clicked, gives the browser an address called a URL. The browser then opens the page at that address.

• Hands on Exercise: Create two other web pages named My_Hobbies and My_Photo_Gallery Create links to the above web pages + a link to another Web site on WWW.

http

://w

ww

.• Creating Text Hyperlinks:

Type the text that will serve as the hyperlink select the text select Insert select Hyperlink type the address of the site in the URL box.

• Creating Graphic Hyperlinks:

Insert the picture of clip art to use as the hyperlink select the graphic select Insert select Hyperlink type the address of the site in the URL box.

Inserting Hyperlinks

http

://w

ww

. Your Website

Make sure to test your new link!hyperlinks

http

://w

ww

. Understanding How Web Pages are Saved

Word saves different pages and pictures in the same, single file.

FrontPage saves different pages and pictures in separate files. These related files are usually saved in the same folder.

http

://w

ww

. Displaying a Web Page ina Web Browser

• it is better to view the web pages in a Web Browser because users are going to view the pages in a browser, not in FrontPage.

http

://w

ww

.To view your web page using the Hyperlink View, make sure to open your web folder with Open Web menu (for the first time).

• On the File menu, click Open Web, and then do one of the following:

• To open a disk-based web on your local computer, in the Folder Name box, type the path to the folder containing the web, and then click Open.

• Or, use the Look In box to navigate to the My Webs folder (or any other folder containing webs).

Using the Hyperlinks View

http

://w

ww

. Using the Hyperlinks View

To view links of the individual page: click Hyperlinks button and click the page in the Folder List on the standard toolbar.

Pages to which the selected page links. A + (plus sign) indicates that the page has additional links.

http

://w

ww

. Using the Navigation View

• Navigation view is important because it requires you to

organize your Web site, and the navigation bar properties

depend on the Web site’s navigational structure.

Explore the Navigation View:Explore the Navigation View:

1. 1. On the On the ViewsViews toolbar, click toolbar, click Navigation.Navigation.

2.2. Click Click YourYour Home PageHome Page page ( page (index.htmindex.htm). ).

3.3. Click and hold the Click and hold the my_hobbiesmy_hobbies page, and then drag it page, and then drag it under the under the index.htmindex.htm page. Any changes you make in page. Any changes you make in this view effect the pages in this view effect the pages in Page Page view.view.

4. 4. From the From the NavigationNavigation view, you can also double-click a page to view, you can also double-click a page to see it in see it in Page Page view.view.

http

://w

ww

. Using the Navigation View

http

://w

ww

. Publishing Your Web Site

After completed the web site, ready to publish the Web so that your web site can be accessed by many people.

Publishing the Web means place all the folders and files in the Web onto a Web server.

The Web server then serves up your site to visitors on the WWW.

A user cannot simply copy his or her files to a server.

Two different ways/routes to get your Web onto the server:

HTTP (to upload your Web files to the server) FTP (to move the files to the server).

http

://w

ww

. Additional Features

• Inserting Line Break• Inserting Table • Inserting Bulleted and Numbered

Lists• Theme• Frame• Form

Education

TID Chapter 8 Web Page Development