unit 2.2 web programming html basics - benchmark standard

Programming and Development Tools Web Programming

UNIT

2.2

Web Programming HTML Basics

OBJECTIVES

Benchmark standard

Acquainted with the creation of HTML document

This unit helps you to create HTML documents and familiarise the structure of HTML documents. At the end of this unit, you will be able to

Outline the structure of HTML document Create HTML document Execute HTML document in a Web browser Edit the errors in HTML document

Benchmark Standard Describe the structure of HTML document. Publish simple HTML documents in a Web browser without any

error.

HTML Basics 2.2-1


Let us Revise!

1. List the requirements to get Internet connection. 2. List any five search engines. 3. Define the term E-commerce. 4. Write the use of Forward button in Internet Explorer. 5. Expand WWW and URL.

Introduction You learnt that a Web page is an electronic document that contains information in the form of text, pictures, graphics, audio and video. The Web pages are displayed by a Web browser in the browser window. The Web browser reads the instructions from a file and displays the document in the browser window according to the instructions. This can be better understood from the pictorial representation given in Figure 2.2.1.

<html><head> <script language=javascript> var now=new Date,t1=0,t2=0,t3=0,t4=0,t5=0,t6=0,ie5=0,hp=0,ao=0,cc='';t1=now.getTime(); function err(a,b,c) { var img=new Image; img.src='http://srd.yahoo.com/hp5-err/'+escape(a)+','+escape(b)+','+escape(c)+'/*1';

Browser Web Page

An example HTML program

Figure 2.2.1: Creation of a Web page The file from which the browser reads the instructions is the HTML file. The language in which the instructions are given is the Hypertext Mark-up Language, shortly referred to as HTML. Note

Hypertext refers to the text that is linked to other documents and mark-up language refers to the instructions.

HTML Basics 2.2-2


HTML is a language that instructs the browser how to display the contents of a Web page in the browser window.

2.2.1 Structure of HTML You know how to create and execute a HTML document. The code in the HTML document has a specific structure. The structure of HTML document is shown in Figure 2.2.2. <HTML>

<HEAD>

<TITLE>

------------

</TITLE>

</HEAD>

<BODY>

--------------

--------------

--------------

--------------

--------------

</BODY>

Head Section

Body Section

</HTML>

Figure 2.2.2: Structure of a HTML Document

The <HTML> tag specifies the browser that the code enclosed between <HTML> and </HTML> is a HTML code. The HTML code is mainly divided into two sections namely HEAD section and BODY section.

HEAD Section The HEAD section contains some fundamental information about the Web page. The browser interprets and executes the HEAD section and then moves to the BODY section. The HEAD section is enclosed between <HEAD> and </HEAD> tags. The <TITLE> tag is placed inside the HEAD section. The

HTML Basics 2.2-3


text you give in the TITLE section will appear in the title bar of the browser window. The title of the Web page is given in the TITLE section.

BODY section The BODY section contains the actual content to be displayed in the browser window. This section contains the tags that specify how the content should be displayed. The BODY section is enclosed between the <BODY> and </BODY> tags.

Creating and Executing a HTML Document You can type the source code (HTML code) in a notepad application and view it as a Web page in the browser.

Hands-On!

Follow the steps given below to create a HTML document: 1. Open Notepad by choosing Start All Programs Accessories

Notepad. 2. Type the HTML code as follows.

<HTML>

<HEAD>

<TITLE> The Mind </TITLE>

</HEAD>

<BODY>

<FONT SIZE=5> <CENTER>

<H1 ALIGN=CENTER> The Mind </H1>

Great minds think about ideas

<BR> Medium minds speak about happenings

<BR> Small minds gossip about others.

</FONT></CENTER>

</BODY>

</HTML>

Code Sample 2.2.1 3. Save the file. For example, save the file as Structure.html in

C:\HTML\UNIT2\Misc folder. Creating a Virtual Directory You know that IIS is a Web server that stores the HTML documents to be viewed in a Web browser. To store HTML documents in IIS, you have to create a directory known as Virtual Directory.

HTML Basics 2.2-4


Hands-On!

Steps to create a Virtual Directory

1. Click Start Control Panel. 2. Select Performance and Maintenance 3. Select Administrative tools 4. Select IIS. Internet Information Services dialog box is displayed.

In the left pane, right click Default Web site in the Web sites folder and select New Virtual Directory. Virtual Directory Creation Wizard is displayed.

Figure 2.2.3: Virtual Directory Creation Wizard

HTML Basics 2.2-5


5. Click the Next button.

Figure

2.2.4: Virtua

l Directory

Alias

e Alias text box, type the Virtual Directory name, say School and click

the Next button.

6. In th

HTML Basics 2.2-6


Figure 2.2.5: Web Site Content Directory 7. In the Web site content directory page, browse and select the path of

the directory that contains the HTML files, say C:\HTML.

Figure 2.2.6: Access Permissions

8. With the default settings in the Access Permissions page, click the Next button.

HTML Basics 2.2-7


Figure 2.2.7: Virtual Directory Creation Wizard Click Finish to9. complete the Virtual Directory Creation wizard.

To view the Web page, open Internet Explorer and type the URL of the Web page created, in the address bar and press the Enter key. For example, http://localhost/HTML/Misc/Structure.HTML. You can open the Internet Explorer by double clicking the Internet Explorer icon on the desktop. The browser interprets the instructions given in the HTML file. After interpretation, the Web page is displayed in the browser window as shown in Figure 2.2.8.

You can also execute a HTML document by typing its filename preceded by its path in the address bar and pressing the Enter key. The steps required to create and execute a HTML document can be summarised as follows:

1. Open Notepad.

Tip

Figure 2.2.8: Web Page in a Browser Window

Tip

HTML Basics 2.2-8


HTML Basics 2.2-9

2. Type the HTML code. 3. Save the file with extension .HTML and close Notepad. 4. Open Internet Explorer 5. Select your HTML file.

If there is any error in your HTML code, it will not be pointed out by the browser. Instead of pointing out the error, the browser neglects the effect of that tag in the Web page.

Note


Lab Exercise

Lab Exercise 1: Open D2_1.html in Internet Explorer. The following code will be present in D2_1.html.

<HTML>

<HEAD> Welcome

<TITLE> First Web Page </TITLE>

</HEAD>

<BODY>

This is my First Web Page

</BODY>

</HTML>

1. Identify the tag, which is used to display First Web Page in the title bar. 2. Write the tag used to display Welcome in the source code of D2_1.html. 3. Highlight the tag used do display the contents of the Web page.

Correcting Mistakes in a HTML Document A Web page is created using the HTML code. If there are any errors in the HTML code, it should be rectified by making the corrections in the source code (HTML file). You can rectify the mistakes in the HTML code by performing the following steps:

1. Click the View menu and choose Source option. The source code (HTML code) of the Web page gets opened in the Notepad file.

2. Make the necessary corrections. 3. Save and close the file. 4. Click the Refresh button in the Standard Buttons toolbar of the

Internet Explorer. The error-free page is displayed in the Internet Explorer.

Tags The instructions given to a Web browser are called Tags. The tags are enclosed within angled brackets (< >). There are two types of tags. They are

Starting tag - The starting tag indicates the starting point of the text in the Web page to which the effect of the tag should be applied.

HTML Basics 2.2-10


The starting tag is enclosed within angled bracket. For example, <HEAD>.

Ending tag. - The ending tag indicates the ending point of the text to which the effect of the tag will be applied. The ending tag is enclosed by angled brackets and is preceded by a slash (/). For example, </HEAD>.

The effect of the tag is applied to the content, which is placed inside the starting and ending tags. There are few tags, which do not require the ending tag.

Note

Self-Check Exercise 2.2.1

List the errors in the following HTML code and justify it with your answers: <HTML>

<HEAD>

<TITLE> The Mind

</HEAD>

</TITLE>

</BODY>

Great minds think about ideas

Medium minds speak about happenings

Small minds gossip about others.

<BODY>

</HTML>

Code Sample 2.2.2

Any number of tags can be nested within each other. But the starting and ending tags of one tag should be completely inside the other.

Note

HTML Basics 2.2-11


Lab Exercise Lab Exercise 2: Open D2_1.html in Notepad 1. Change title as Welcome to My First Web Page. Display the output in Internet Explorer. 2. Remove the <Title> tag from D2_1.html and save the file. Display the output in Internet

Explorer and observe the difference. 3. Change the head tag to Welcome to HTML page. Display the output in Internet Explorer

and observe the difference. 4. Change the body text to This is my First HTML page. Display the output in Internet

Explorer and observe the difference. Lab Exercise 3: Write a HTML code to display the output as given in the following Figure

2.2.8.

Figure 2.2.8: Simple HTML Page

Lab Exercise 4: Write a HTML code to display the output as given in the following Figure 2.2.9. Create a folder with your name and save the file as Welcome.html under this folder. For example C:\Roslina\Welcome.html. Create a virtual directory with the name as Site and attach the folder (Roslina) which you have created.

HTML Basics 2.2-12


Figure 2.2.9: Welcome to Malaysia Activity 2.2.1

1. Search for the sites that provide information about various mark-up languages.

2. Create and view a HTML document as Web page that lists the importance of HTML.

Summary In this unit, you learnt that

A Web page is an electronic document that contains information in the form of text, pictures, audio and video.

HTML is a language that instructs the browser how to display the contents of a Web page in the browser window.

The source code of a Web page can be viewed by selecting View Source in the Internet Explorer.

The structure of HTML document consists of <HTML> tag in which the <HEAD> tag and <BODY> tags are placed.

The instructions given to a Web browser are called Tags. The text given in the TITLE section will appear in the title bar of the

browser window.

HTML Basics 2.2-13


Assignment

I. Solve the following crossword:

1

2 3

4 5

6 7 8

9

10

Across 2. Button to re-execute HTML document after correction. 4. Place the actual content of the Web page in this tag. 5. Instructions given to the browser. 6. Select this option from the file menu to open the HTML document. 7. ________ is a mark-up language. 9. Select this from the View menu to see the source code of the Web

page displayed. 10. Tags are placed between these brackets. Down 1. Place the title tag inside this tag. 3. The special character that differentiates the starting and ending tag. 4. __________interprets the HTML document and displays the Web

page. 8. Tag to display the text in the title bar of the browser

HTML Basics 2.2-14


II Answer the following questions: 1. Give the expansion of HTML. 2. List the steps to be followed while correcting the errors in a HTML

document. 3. List the steps to be followed in creating a virtual directory. 4. Define the term Tag.

HTML Basics 2.2-15


Criterion Referenced Test Instruction: Students must evaluate themselves to attain the list of

competencies to be achieved. Name: Subject: Programming and Development tools Unit: HTML Basics Please tick [ √ ] the appropriate box when you have achieved the respective competency. Date HTML Basics C1 C2 C3 Comment

Competency codes: C1 = Write the structure of HTML. C2 = Create a simple HTML document and execute it. C3 = Edit the HTML document and refresh the Web page.

HTML Basics 2.2-16

unit 2.2 web programming html basics - benchmark standard

Education