Programming and Development Tools                            Web Programming                                              ...
Programming and Development Tools                                         Web ProgrammingLet us Revise!     1. List the re...
Programming and Development Tools                           Web ProgrammingHTML is a language that instructs the browser h...
Programming and Development Tools                               Web Programmingtext you give in the TITLE section will app...
Programming and Development Tools                                Web Programming     Hands-On!Steps to create a Virtual Di...
Programming and Development Tools                              Web Programming   5. Click the Next button.Fig ur e2.2.4:Vi...
Programming and Development Tools                             Web Programming                 Figure 2.2.5: Web Site Conte...
Programming and Development Tools                                    Web Programming              Figure 2.2.7: Virtual Di...
Programming and Development Tools                                              Web Programming        2. Type the HTML cod...
Programming and Development Tools                                             Web Programming        Lab ExerciseLab Exerc...
Programming and Development Tools                                              Web Programming            The starting tag...
Programming and Development Tools                                           Web Programming        Lab ExerciseLab Exercis...
Programming and Development Tools                                 Web Programming                       Figure 2.2.9: Welc...
Programming and Development Tools                               Web ProgrammingAssignmentI.    Solve the following crosswo...
Programming and Development Tools                                   Web ProgrammingII    Answer the following questions:  ...
Programming and Development Tools                             Web ProgrammingCriterion Referenced TestInstruction: Student...
Upcoming SlideShare
Loading in...5
×

UNIT 2.2 Web Programming HTML Basics - Benchmark standard

587

Published on

Web Programming
HTML Basics
Benchmark standard

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
587
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

UNIT 2.2 Web Programming HTML Basics - Benchmark standard

  1. 1. Programming and Development Tools Web Programming UNIT 2.2Web ProgrammingHTML BasicsOBJECTIVESThis unit helps you to create HTML documents and familiarise the structureof HTML documents.At the end of this unit, you will be able to Outline the structure of HTML document Create HTML documentBenchmark standard Execute HTML document in a Web browser Edit the errors in HTML document Acquainted with the creation of HTML documentBenchmark Standard Describe the structure of HTML document. Publish simple HTML documents in a Web browser without any error.HTML Basics 2.2-1
  2. 2. Programming and Development Tools Web ProgrammingLet 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> B var now=new r Date,t1=0,t2=0,t3=0,t4=0,t5= 0,t6=0,ie5=0,hp=0,ao=0,cc=; o t1=now.getTime(); function err(a,b,c) { w var img=new Image; s img.src=http://srd.yahoo.com /hp5- e err/+escape(a)+,+escape(b)+ ,+escape(c)+/*1; r 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
  3. 3. Programming and Development Tools Web ProgrammingHTML is a language that instructs the browser how to display the contents ofa Web page in the browser window.2.2.1 Structure of HTMLYou know how to create and execute a HTML document. The code in theHTML document has a specific structure. The structure of HTML document isshown in Figure 2.2.2.<HTML> <HEAD> <TITLE> Head ------------ Section </TITLE> </HEAD> <BODY> -------------- -------------- Body -------------- Section -------------- -------------- </BODY></HTML> Figure 2.2.2: Structure of a HTML DocumentThe <HTML> tag specifies the browser that the code enclosed between<HTML> and </HTML> is a HTML code. The HTML code is mainly dividedinto two sections namely HEAD section and BODY section.HEAD SectionThe HEAD section contains some fundamental information about the Webpage. The browser interprets and executes the HEAD section and then movesto the BODY section. The HEAD section is enclosed between <HEAD> and</HEAD> tags. The <TITLE> tag is placed inside the HEAD section. TheHTML Basics 2.2-3
  4. 4. Programming and Development Tools Web Programmingtext you give in the TITLE section will appear in the title bar of the browserwindow. The title of the Web page is given in the TITLE section.BODY sectionThe BODY section contains the actual content to be displayed in the browserwindow. This section contains the tags that specify how the content should bedisplayed. The BODY section is enclosed between the <BODY> and</BODY> tags.Creating and Executing a HTML DocumentYou can type the source code (HTML code) in a notepad application and viewit 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:HTMLUNIT2Misc folder.Creating a Virtual DirectoryYou know that IIS is a Web server that stores the HTML documents to beviewed in a Web browser. To store HTML documents in IIS, you have tocreate a directory known as Virtual Directory.HTML Basics 2.2-4
  5. 5. Programming and Development Tools Web Programming 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 WizardHTML Basics 2.2-5
  6. 6. Programming and Development Tools Web Programming 5. Click the Next button.Fig ur e2.2.4:Virtua lDirect or yAli as 6. I n t h e Alias text box, type the Virtual Directory name, say School and click the Next button.HTML Basics 2.2-6
  7. 7. Programming and Development Tools Web Programming 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
  8. 8. Programming and Development Tools Web Programming Figure 2.2.7: Virtual Directory Creation Wizard 9. Click Finish to complete the Virtual Directory Creation wizard.To view the Web page, open Internet Explorer and type the URL of the Webpage created, in the address bar and press the Enter key. For example,http://localhost/HTML/Misc/Structure.HTML. TipYou can open the Internet Explorer by double clicking the Internet Explorer icon on thedesktop.The browser interprets the instructions given in the HTML file. Afterinterpretation, the Web page is displayed in the browser window as shown inFigure 2.2.8. Figure 2.2.8: Web Page in a Browser Window TipYou can also execute a HTML document by typing its filename preceded by its path in theaddress bar and pressing the Enter key.The steps required to create and execute a HTML document can besummarised as follows: 1. Open Notepad.HTML Basics 2.2-8
  9. 9. Programming and Development Tools Web Programming 2. Type the HTML code. 3. Save the file with extension .HTML and close Notepad. 4. Open Internet Explorer 5. Select your HTML file. NoteIf there is any error in your HTML code, it will not be pointed out by the browser. Instead ofpointing out the error, the browser neglects the effect of that tag in the Web page.HTML Basics 2.2-9
  10. 10. Programming and Development Tools Web Programming Lab ExerciseLab 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 DocumentA Web page is created using the HTML code. If there are any errors in theHTML code, it should be rectified by making the corrections in the sourcecode (HTML file).You can rectify the mistakes in the HTML code by performing the followingsteps: 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.TagsThe instructions given to a Web browser are called Tags. The tags areenclosed 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
  11. 11. Programming and Development Tools Web Programming 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 thestarting and ending tags. NoteThere are few tags, which do not require the ending tag. Self-Check Exercise 2.2.1List 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 NoteAny number of tags can be nested within each other. But the starting and ending tags of onetag should be completely inside the other.HTML Basics 2.2-11
  12. 12. Programming and Development Tools Web Programming Lab ExerciseLab Exercise 2: Open D2_1.html in Notepad1. 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 PageLab Exercise 4: Write a HTML code to display the output as given in the following Figure2.2.9. Create a folder with your name and save the file as Welcome.html under this folder. Forexample C:RoslinaWelcome.html. Create a virtual directory with the name as Site and attachthe folder (Roslina) which you have created.HTML Basics 2.2-12
  13. 13. Programming and Development Tools Web Programming 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.SummaryIn 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
  14. 14. Programming and Development Tools Web ProgrammingAssignmentI. Solve the following crossword: 1 2 3 4 5 6 7 8 9 10Across2. 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.Down1. 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 browserHTML Basics 2.2-14
  15. 15. Programming and Development Tools Web ProgrammingII 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
  16. 16. Programming and Development Tools Web ProgrammingCriterion Referenced TestInstruction: Students must evaluate themselves to attain the list of competencies to be achieved.Name:Subject: Programming and Development toolsUnit: HTML BasicsPlease tick [ √ ] the appropriate box when you have achieved the respectivecompetency.Date HTML Basics C1 C2 C3CommentCompetency 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

×