Unit 2.3

541 views

Published on

Basic Tags in HTML

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

  • Be the first to like this

No Downloads
Views
Total views
541
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Unit 2.3

  1. 1. Programming and Development Tools Web Programming UNIT 2.3Web ProgrammingBasic Tags in HTML OBJECTIVES This unit helps you to experiment the various tags and attributes to create attractive Web pages. At the end of this unit, you will be able to Add headings to your Web page. Align text as paragraphs in Web pages. Add blank lines to your Web page. Make your HTML code readable by adding comments. Decorate your page by inserting horizontal lines. Scroll text across the Web page. Add special characters to your Web page. Add colours and background pictures to enrich your Web page.Benchmark Standard Use the basic tags and their attributes to create professional- looking Web pages.Basic Tags in HTML 2.3-1
  2. 2. Programming and Development Tools Web ProgrammingLet us Revise! 1. Give the expansion of HTML. 2. List the steps to create and execute a HTML document. 3. Write the structure of HTML document. 4. Define the term Tag. Introduction You know that the source of a Web page is a HTML document. Reading this unit, you will realize that the code behind an attractive Web page is a simple HTML code. HTML uses tags, which are nothing but codes that specifies how a Web page should appear. There are various tags that are used to display the text, images, lists, buttons and links on the Web pages. In this unit, you will learn some of the basic tags of HTML. 2.3.1 Headings You might have seen different headings in online newspapers and magazines. Almost all topics in a newspaper begin with a heading. Figure 2.3.1 shows a Web page with different headings. Basic Tags in HTML 2.3-2
  3. 3. Programming and Development Tools Web Programming Figure 2.3.1: A Web Page using Heading TagsIn HTML, you can create headings of different sizes using heading tag. Hands-On!The following example describes how to add headings in your Web page.Open the HTML file Heading.HTML in Hands On Folder.<HTML> <HEAD> <TITLE> Headings </TITLE> Heading tag </HEAD> <BODY> <H1 Align="Center"> The Puzzles </H1> <H2> Puzzle No. 1 </H2> Heading tag55555 = 100. Make the equation true by inserting anymathematical operator in-between the digits on the leftof the equal symbol.Basic Tags in HTML 2.3-3
  4. 4. Programming and Development Tools Web Programming <H3> Puzzle No. 2 </H3> Heading tag55555 = 55. Make the equation true by inserting anymathematical operator in-between the digits on the leftof the equal symbol. <H4> Puzzle No. 3 </H4> Heading tag666666 = 100. Make the equation true by inserting anymathematical operator in-between the digits on the leftof the equal symbol. </BODY></HTML> Code Sample 2.3.1Open the above HTML document in Internet Explorer. The output is shown inFigure 2.3.2. Figure 2.3.2: A Page using Heading TagsFigure 2.3.2 shows a Web page that displays three puzzles under three sub-headings and a main heading. You are not going to solve the puzzles. Justhave a deep look at the headings. The main heading is ‘The Puzzles’ and thesub-headings are Puzzle No. 1, Puzzle No. 2 and Puzzle No. 3. The headings arebold and also of different sizes.Basic Tags in HTML 2.3-4
  5. 5. Programming and Development Tools Web ProgrammingWhen you view the code, you can identify that the heading The Puzzles,enclosed between <H1> and </H1> tags. The text enclosed within H1displays a heading of maximum size. The size of the headings produced by<H2>, <H3> and so on decreases respectively. The tags <H1>, <H2>,<H3>, <H4>, <H5> and <H6> are the heading tags. The text that has to begiven as the heading is enclosed within the opening and closing heading tags.<H1> tag produces a heading of largest size. <H6> produces a heading ofsmallest size.In Figure 2.3.2, you can see that all the sub-headings are aligned to the left.You can change the alignment of the heading using ALIGN attribute ofheading tag. NoteAn attribute is a property that enhances the effect of a tag.The Align attribute enhances the appearance of the headings in the Webpage by aligning the heading.Values for the Align attribute: • Left • Right • CenterFor example, Align=”Left” will align the text to the left in the browser window. NoteThe default alignment for heading tag is left. So, the heading will be aligned to the left, if theALIGN attribute is omitted in the heading tag.In Figure 2.3.2, the heading The Puzzle can be aligned to the left by using theattribute Align as follows.<H1 Align=”Left”> The Puzzle </H1>.Here, H1 is the heading tag and Align is the attribute of the heading tag. TheAlign attribute takes the value Left to position the text in the left of the browserwindow.Basic Tags in HTML 2.3-5
  6. 6. Programming and Development Tools Web Programming NoteHTML is not a case-sensitive language. Hence the tags and attributes that you specify in HTMLfile can be of any case (lowercase or uppercase). Self-Check Exercise 2.3.1Identify the tags and attribute values used in each line of the following Web page. Figure 2.3.3: Six Levels of Heading Tag Activity 2.3.11. Create a Web page that explains the heading tags as shown in Figure 2.3.4.2. Save the HTML file as Activity1.HTML in Activity folder.Basic Tags in HTML 2.3-6
  7. 7. Programming and Development Tools Web Programming Figure 2.3.4 : A Web Page that explains the Heading Tag Lab ExerciseLab Exercise 1: Open D3_1.html in Internet Explorer. The following code will be present in D3_1.html.<HTML><HEAD> <H1 ALIGN = CENTER> HEADING TAG </H1> <TITLE>Six Headings</TITLE></HEAD> <BODY> <H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6></BODY></HTML>Basic Tags in HTML 2.3-7
  8. 8. Programming and Development Tools Web Programming 1. View the source code in Notepad. 2. Identify the tag, which is used to display Heading 1 in the source code of D3_1.html 3. Name the attribute used to display the Heading Tag with centre alignment. 4. Underline the tag, which is used to display Heading 4 in the source code of D3_1.html.Lab Exercise 2: Open D3_1.html in Internet Explorer. View the source code in Notepad. 1. View the source code in Notepad. 2. Edit the style of Heading 1 from <H1> to <H3>. 3. Change the alignment of Heading 2 to centre align. 4. Change the alignment of Heading 3 to right align. 5. Save the source code file and refresh the Web page.Lab Exercise 3: Write HTML code to display the output as given in the following Figure 2.3.5 using the <HEAD> tag. Figure 2.3.5: HeadingsLab Exercise 4: Open Welcome.html that you have created under the folder in your name in C:. Add <HEAD> tag into the file and display the output as given in the following Figure 2.3.6. Save the file and view the output in the browser.Basic Tags in HTML 2.3-8
  9. 9. Programming and Development Tools Web Programming Figure 2.3.6: Welcome to Malaysia2.3.2 ParagraphYou have learned about the different types of Internet connections in the firstunit. Create a HTML document with the heading Types of Internet Connectionand the types of Internet connections elaborated in different paragraphs belowthe heading.Basic Tags in HTML 2.3-9
  10. 10. Programming and Development Tools Web Programming Figure 2.3.7: Web Page without using the <P> TagYour page will look more or less like the one displayed in Figure 2.3.7. Thesource code of the above page is as follows:<HTML> <HEAD> <TITLE> Headings </TITLE> </HEAD> <BODY> <H1 Align="Center"> Types of InternetConnection </H1>The computer users at home and small companies preferdial-up access because it is an easy and inexpensive wayof connecting to the Internet. But the speed in this typeof connection is less than 56 kbps (kilobits per second).In this connection, the MODEM in your computer isconnected to the Internet by using a standard telephoneline.In Broadband connection, the MODEM in your computer isconnected to the Internet through a cable TV line. Thespeed in this type of connection is around 1000 kbpswhich is faster when compared to dial-up connection.In Digital Subscriber Line (DSL) and Integrated ServicesDigital Network (ISDN), your computer is connected to theBasic Tags in HTML 2.3-10
  11. 11. Programming and Development Tools Web ProgrammingInternet through the copper telephone line. Here, yourcomputer is connected to the Internet 24 hours a day.Wireless Internet access technologies are also availablethat connect Internet with PDAs, notebook computers andsmart phones. A wireless connection is established usingsatellite and cellular radio network. </BODY></HTML> Code Sample 2.3.2Though you have written the content in different paragraphs, it appears ascontinuous text in the browser window. This is because the browser does notconsider the line breaks you have given by pressing the Enter key, whiletyping the content.<P> tag is used for creating paragraphs. Whenever the browser encounters a<P> tag a new paragraph is created from that point. The end of the paragraphis marked by </P>, which is optional. Best Programming PractiseEven though the closing tag is optional, it is better to add the closing tag to improve thereadability.The Align attribute can be used along with the <P> tag to align the paragraphto the left, right, center or justify. For example, the following segment of HTMLdocument displays the Web page with the paragraph aligned to the right.<P Align=”Right”> Paragraph tagIn Broadband connection, the MODEM in your computer isconnected to the Internet through a cable TV line. Thespeed in this type of connection is around 1000 kbpswhich is faster when compared to dial-up connection.</P>Basic Tags in HTML 2.3-11
  12. 12. Programming and Development Tools Web Programming Figure 2.3.8: Web Page created using <P> tag Self-Check Exercise 2.3.2Write the tag with its attribute that you will insert to align the four paragraphs as given in Figure2.3.8. First paragraph should be left aligned. Second paragraph should be right aligned. Third paragraph should be centred. Fourth paragraph should be justified. Lab ExerciseLab Exercise 5: Open D3_2.html in Internet Explorer. The following code will be present inD3_2.html. View the source code in Notepad.<HTML><HEAD><TITLE> Paragraph and Blank Return Tags</TITLE></HEAD><BODY> <H1 Align="CENTER"> Paragraph Tag </H1> <BR>Basic Tags in HTML 2.3-12
  13. 13. Programming and Development Tools Web Programming<P>This is paragraph aligned with the default value.<P Align="right">This is a paragraph aligned to the right<P Align="left">This is paragraph aligned to the left.<P Align="center">This is paragraph centered. </P> Learning HTML gives tremendous joy. <BR> Because it is easy, gentle and also much helpful.</BODY></HTML> 1. View the source code in Notepad. 2. Identify the tag which is used to create paragraph? 3. Identify and list the different values given for the align attribute in the HTML document.Lab Exercise 6: Write a HTML code to display the output as given in the following Figure 2.3.9 using <P> tag. Figure 2.3.9: Paragraph AlignmentLab Exercise 7: Open Welcome.html that you have created under the folder in your name in C:. Add <P> tag into the file and display the output as given in the following Figure 2.3.10. Save the file and view the output in the browser.Basic Tags in HTML 2.3-13
  14. 14. Programming and Development Tools Web Programming Figure 2.3.10: Welcome to Malaysia2.3.3 Line BreaksYou know that paragraph tag is used to break content into differentparagraphs. But line breaks are used to start a new line within the currentparagraph. It can also be used to create blank lines. Hands-On!The following example describes the use of line breaks in HTML document.Open the HTML file Break1.HTML.<HTML> <HEAD> <TITLE> Line Breaks Code without line </TITLE> break <BODY> <H1> Conduct </H1> Who loses conduct loses love Who loses love loses self-confidence Who loses self-confidence loses his life. </BODY></HTML> Code Sample 2.3.3Basic Tags in HTML 2.3-14
  15. 15. Programming and Development Tools Web ProgrammingThe output of the above code is shown in Figure 2.3.11. Figure 2.3.11 : Web Page using <BR> tagIn this source code, the content of the <BODY> tag is written in three differentlines. However, it is displayed continuously in the browser window. This isbecause more than one space given in the source code is treated as onespace by the browser.<BR> tag is used to insert the line breaks. If you want a sentence to beprinted in the next line, then it should be preceded by <BR> tag. <BR> tagdoes not have any end tag. The same Web page using <BR> tag is shown inFigure 2.3.12. Figure 2.3.12 : Web Page using <BR> tagBasic Tags in HTML 2.3-15
  16. 16. Programming and Development Tools Web Programming Self-Check Exercise 2.3.3Identify the lines where you will insert the <BR> tag in the code to display the Web page shownin Figure 2.3.12. Activity 2.3.21. Create a Web page that explains the use of <BR> tag and <P> tag as shown in Figure 2.3.13.2. Save the HTML file as Activity2.HTML in Activity folder. Figure 2.3.13 : A Web page that explains the <BR> and <P> tags2.3.4 CommentsRead the following program and identify the objective of the program. Correctthe mistakes, if any.<HTML> <HEAD><TITLE> Scrolling Text </TITLE></HEAD><BODY> <H1 Align="Center"> Terms related to IT </H1> <H2> Algorithm </H2>Basic Tags in HTML 2.3-16
  17. 17. Programming and Development Tools Web Programming <MARQUEE Behavior="Alternate" Height="120" Width=”820” Bgcolor=”Green”> The step-by-step instruction involved in solving a problem is called Algorithm. </MARQUEE> <H2> Biometrics </H2> <MARQUEE Scrolldelay=”1000”> Biometrics is a technology of identifying the finger prints, voice and facial patterns for authentication purpose. </MARQUEE> Code without comments <H2> C# </H2> <MARQUEE Scrollamount="100" Behavior=”Slide”> C# is an object-oriented programming language that has the features of C++, Java and Visual Basic. </MARQUEE> <H2> Database </H2> <MARQUEE Bgcolor="Yellow" Hspace="35" Vspace=”15”> A database is a collection of information that is organized so that it can easily be accessed, managed, and updated. </MARQUEE> <H2> Encryption </H2> <MARQUEE Loop="2"> Encryption is the process of converting data into a form that cannot be understood by unauthorized persons. The reverse process of converting encrypted data back into its original form is called Decryption. </MARQUEE> <H2> File Server </H2> <MARQUEE Direction="Right"> It is a server computer where the data files are stored so that the other computers can access these data in the network. </MARQUEE> </BODY>Basic Tags in HTML 2.3-17
  18. 18. Programming and Development Tools Web Programming</HTML>Can you identify for what purpose it is written? Also, is it easy to identify theerrors? If there are some comment statements that explain the code, it wouldbe easy to understand the code. So, comments can be added to improve thereadability and also to identify the errors in case of lengthy source codes. Thecomments are ignored by the browser. Hence the comments will appear in theHTML code, but it will not be displayed in the browser. They are added for thebenefit of the programmers.The comment should be enclosed within the <!-- and --> symbols. An examplefor a comment statement is:<!-- The following code displays the content using <P>tag -->2.3.5 Horizontal RuleThe horizontal rule is used to draw horizontal lines in your Web page asshown in Figure 2.3.14. Figure 2.3.14: Web Page with Horizontal RuleIn Figure 2.3.14, the different paragraphs of the page are separated byhorizontal lines. <HR> tag is used to draw horizontal lines. There is no endtag for <HR> tag.Basic Tags in HTML 2.3-18
  19. 19. Programming and Development Tools Web ProgrammingAttributes of <HR> tag: Size - Specifies the thickness of the line. Width - Specifies the width of the line. Align - Specifies the alignment of the line. Noshade - Removes the shade from the line.For example, a horizontal rule of size 5, width 40% of the browser window,with no shade and with left alignment can be printed using the following codesnippet: <HR Size=”5” Width=”40%” Noshade Align=”Left”>. Hands-On!The following example describes the use of different attributes of <HR> tag:Open the HTML file Hor_Rule.HTML in Hands On Folder. Figure 2.3.15: Web Page using attributes of <HR> tagThe HTML source code for the above page is as follows:<HTML><HEAD><TITLE> Horizontal rule</TITLE></HEAD>Basic Tags in HTML 2.3-19
  20. 20. Programming and Development Tools Web Programming<BODY><H1 Align="Center"> Horizontal Rule with DifferentAttributes </H1><FONT Size="5">Horizontal rule of size 5<HR Size="5"> Draws a horizontal lineHorizontal rule of size 10 and width 50% of the browserwindow<HR Size="10" Width="50%">Horizontal rule of size 15, width 75%, noshade andaligned left<HR Size="10" Width="75%" Noshade Align="Left">Horizontal rule with default values<HR></FONT></BODY></HTML> Code Sample 2.3.4 Activity 2.3.31. Create a Web page that explains the use of <HR> tag as shown in Figure 2.3.16. Add comments in your HTML file.2. Save the HTML file as Activity3.HTML in Activity folder.Basic Tags in HTML 2.3-20
  21. 21. Programming and Development Tools Web Programming Figure 2.3.16: A Web page that explains the <HR> tag Lab ExerciseLab Exercise 8: Open D3_3.html in Internet Explorer. The following code will be present in D3_3.html. View the source code in Notepad.<HTML><HEAD> <H1 Align="CENTER"> Horizontal Rule</H1> <TITLE> Horizontal Rule </TITLE><BODY> HR tag is used to draw horizontal lines. Defaulthorizontal line. <HR> Horizontal line size and noshade attribute. <HR Size=10 Noshade> Horizontal line width and align attribute. <HR Width =50% Align="CENTER"></BODY></HTML> 1. View the source code in Notepad. 2. Identify the tag which is used for draw a horizontal line in the Web page.Basic Tags in HTML 2.3-21
  22. 22. Programming and Development Tools Web Programming 3. Name the attributes are used in the horizontal line.Lab Exercise 9: Open D3_3.html in Internet Explorer. View the source code in Notepad. 1. View the source code in Notepad. 2. Change the alignment of the last horizontal line to left. 3. Reduce the size of the second horizontal line size to 5. 4. Save the file and view the output in the browser.2.3.6 Scrolling TextYou might have seen the text scrolling across the advertisement hoardings.Similarly, you can see texts scrolling across the browser window afterexecuting the following program.Basic Tags in HTML 2.3-22
  23. 23. Programming and Development Tools Web Programming Hands-On!The following example explains how to scroll a text across a Web page. Openthe HTML file Scroll.HTML in Hands On Folder.<HTML> <HEAD> <TITLE> Scrolling Text </TITLE> </HEAD><BODY> <H1 Align="Center"> Terms related to IT </H1> <H2> Algorithm </H2> Scrolls in both the directions <MARQUEE Behavior="Alternate" Height="120" Width=”820” Bgcolor=”Green”> The step-by-step instruction involved in solving a problem is called Algorithm. </MARQUEE> Sets the scrolling speed <H2> Biometrics </H2> <MARQUEE Scrolldelay=”1000”> Biometrics is a technology of identifying the finger prints, voice and facial patterns for authentication purpose. </MARQUEE> Scrolls in both the directions in the scrolling area <H2> C# </H2> <MARQUEE Scrollamount="100" Behavior=”Slide”> C# is an object-oriented programming language that has the features of C++, Java and Visual Basic. </MARQUEE> Sets the size and background colour of the scrolling area <H2> Database </H2> <MARQUEE Bgcolor="Yellow" Hspace="35" Vspace=”15”> A database is a collection of information that is organized so that it can easily be accessed, managed, and updated. </MARQUEE> <H2> Encryption </H2> Scrolls two times <MARQUEE Loop="2"> Encryption is the process of converting data into a form that cannot be understood by unauthorized persons.Basic Tags in HTML 2.3-23
  24. 24. Programming and Development Tools Web Programming </MARQUEE> <H2> File Server </H2> Scrolls from left to right <MARQUEE Direction="Right"> It is a server computer where the data files are stored so that the other computers can access these data in the network. </MARQUEE></BODY></HTML> Code Sample 2.3.5This effect of scrolling can be set to the text in your Web page using the<MARQUEE> tag.The Marquee tag makes the text move across the browser window. The textthat has to be scrolled should be placed between <MARQUEE> and</MARQUEE> tags. There are different attributes that enhance the effect of<MARQUEE> tag. The attributes of the <MARQUEE> tag are given in theTable 2.3.1: Attribute Function Example HEIGHT Specifies the height of <MARQUEE the scrolling area Height="120"> WIDTH Specifies the width of the <MARQUEE scrolling area Width="120"> BEHAVIOR Specifies the style of <MARQUEE scrolling. The values that Behavior=”Scroll”> can be assigned to this attribute are Alternate, Scroll and Slide. BGCOLOR Sets the background <MARQUEE colour of the scrolling Bgcolor="Yellow"> area SCROLLDELAY Sets the time for the text <MARQUEE to scroll from one Scrolldelay=”1000”> position to the next immediate positionBasic Tags in HTML 2.3-24
  25. 25. Programming and Development Tools Web Programming SCROLLAMOUNT Specifies the distance <MARQUEE between two consecutive Scrollamount="100"> points of text while scrolling. The greater the SCROLLAMOUNT the faster will be the speed of scrolling LOOP Specifies the number of <MARQUEE Loop="2"> times the text scrolls from one end to the other end in the text area DIRECTION Specifies the direction of <MARQUEE scrolling. By default, the Direction="Right"> text scrolls from right to left in the scrolling area. VSPACE Specifies the space <MARQUEE between the scrolling text Vspace=”15”> and the texts that scrolls above and below the scrolling text HSPACE Specifies the distance <MARQUEE between the scrolling Hspace="35"> area and the two ends of the browser window Table 2.3.1: Attributes of <MARQUEE> tag Activity 2.3.41. Create a Web page with the content given below. The conditions you have to follow while creating the Web page is given within brackets.2. Save the HTML file as Activity4.HTML in Activity folder.Scrolling TextThe TagThe tag used to scroll text across the browser window is <MARQUEE> tag.AttributesHEIGHTThis attribute specifies the height of the scrolling area.WIDTHThis attribute specifies the width of the scrolling area.BEHAVIORThis attribute specifies the style of scrolling. The values that can be assignedto this attribute are Alternate, Slide and Scroll.Basic Tags in HTML 2.3-25
  26. 26. Programming and Development Tools Web ProgrammingIf BEHAVIOR = Alternate, the text scrolls from right to left and left to rightalternatively within the scrolling area. (Make this text scroll to and fro withinthe scrolling area).If BEHAVIOR = Slide, the text scrolls from right to left and stops or slides in theleft-most portion of the scrolling area. (Make this text slide from right to left).The default value of Behavior attribute is Scroll. If this attribute is omitted orset to Scroll the text keeps scrolling from right to left indefinitely in the scrollingarea. (Make this text scroll from right to left indefinitely).BGCOLORThis attribute sets the background colour of the scrolling area. (Set thebackground colour of this scrolling area to Yellow).SCROLLDELAYThis attribute sets the time for the text to scroll from one position to the nextimmediate position. (Slow down the scrolling of this text).SCROLLAMOUNTThis attribute specifies the distance between two consecutive points of textwhile scrolling. The greater the SCROLLAMOUNT the faster will be the speedof scrolling. (Make this text scroll faster).LOOPThis attribute specifies the number of times the text scrolls from one end tothe other end in the text area. By default, the text scrolls indefinitely. (Makethis text scroll 5 times).DIRECTIONAs the name suggest, this attribute specifies the direction of scrolling. Bydefault, the text scrolls from right to left in the scrolling area. (Make this textscroll from left to right).ExampleIn this page, the text below the heading Behavior scrolls to and fro within thetext area because of the tag <MARQUEE Behavior=”Alternate”> ………</MARQUEE>. Lab ExerciseLab Exercise 10: Open Welcome.html that you have created under the folder in your name in C:. Add <HR> tag into the file and display the output as given in the following Figure 2.3.17. Save the file and view the output in the browser.Basic Tags in HTML 2.3-26
  27. 27. Programming and Development Tools Web Programming Figure 2.3.17 : Welcome to MalaysiaLab Exercise 11: Open D3_4.html in Internet Explorer. The following code will be present in D3_4.html.<HTML><HEAD> <TITLE> Scrolling Text </TITLE></HEAD><BODY><MARQUEE Bgcolor="Red" Width = 100% Height=10%> <H2> WISH YOU A HAPPY NEW YEAR </H2></MARQUEE></BODY></HTML> 1. View the source code in notepad. 2. Identify the tag which is used for scrolling text. 3. Name the attribute that is used in <MARQUEE> tag.Lab Exercise 12: Open D3_4.html in Internet Explorer. 1. View the source code in Notepad. 2. Change the marquee background colour to green. 3. Change the direction of the scroll from right to left. 4. Save the file and view the output in the browser.Basic Tags in HTML 2.3-27
  28. 28. Programming and Development Tools Web ProgrammingLab Exercise 13: Open Welcome.html that you have created under the folder in your name in C:. Add <MARQUEE> tag into the file and display the output as given in the following Figure 2.3.18. Save the file and view the output in the browser. Figure 2.3.18 : Welcome to Malaysia2.3.7 Character EntitiesCreate a HTML document that displays the HTML code to print a name, sayRabiah. That is, you have to create a page as shown in Figure 2.3.19.Basic Tags in HTML 2.3-28
  29. 29. Programming and Development Tools Web Programming Figure 2.3.19 : Web Page displaying HTML codeProbably, you may think of a code segment as given below, which is incorrect. <BODY> <H1> HTML code to print Rabiah </H1> <HTML> <HEAD> <TITLE> HTML code </TITLE> </HEAD> <BODY> RABIAH </BODY> </HTML> </BODY>If you run the above code, the code to print the name, Rabiah will not bedisplayed. Instead, the name Rabiah itself will be displayed. This is due to thefollowing reason:The symbols < and > specifies some special meaning to the browser. The <symbol indicates the browser that the word followed is a tag name and >symbol indicates the end point of the tag name. Therefore, the words<HEAD>, <TITLE> etc. are not considered as ordinary words but as tagBasic Tags in HTML 2.3-29
  30. 30. Programming and Development Tools Web Programmingnames. So, to represent the characters, such as < and >, the Entityreferences are used.The Entity references are the symbolic representation of the characters.These symbols are used instead of characters. The Entity references have 3parts. They are: The leading ampersand (&) symbol, An entity name and The Semicolon (;)For example, to display <HTML> in a Web page the code is &lt;HTML&gt;where lt stands for lesser than symbol and gt stands for greater than symbol. NoteThere are also entity references for some of the special characters, such as pound symbol andYen symbol that are not found in the keyboard.Entity references for symbols that cannot be used directly to display them inthe browser are given in Table 2.3.2. Symbol Entity reference Explanation < &lt; Lesser than > &gt; Greater than & &amp; Ampersand “ &quot; Quotation mark Space &nbsp; No break space £ &pound; Pound symbol ¥ &yen; Yen symbol © &copy; Copyright symbol ™ &trade; Trade mark symbol ® &reg; Registered symbol ± &plusmn; Plus or minus symbol ½ &frac12; Fraction 1 upon 2 Table 2.3.2: Entity referencesBasic Tags in HTML 2.3-30
  31. 31. Programming and Development Tools Web Programming Lab ExerciseLab Exercise 14: Open D3_5.html in Internet Explorer. The following code will be present in D3_5.html.<HTML><HEAD> <H1 Align="CENTER"> Character Entity </H1> <TITLE> Character Entity </TITLE></HEAD><BODY> Copyright &copy;<br> Ampersand &amp;<br> Trademark &trade;<br> Register &reg;<br> Plus or Minus &plusmn;<br> Example for&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;No-breakspace</BODY></HTML> 1. View the source code in Notepad. 2. Name the entity reference which is used for Copyright symbol. 3. Identify the entity reference for Plus or Minus symbol. 4. Name the entity reference for Trade Mark symbol. 5. Highlight entity reference is used for Register symbol. 6. Highlight the symbol for Ampersand.Lab Exercise 15: Write a HTML code to display the output as given in the following Figure 2.3.20 using character entities.Basic Tags in HTML 2.3-31
  32. 32. Programming and Development Tools Web Programming Figure 2.3.20 : Character Entities Self-Check Exercise 2.3.4Write HTML code segment to display the text given below: 1. <HTML> 2. 500¥ 3. Area of triangle = ½ bh2.3.8 Colour, Colour Values and Colour NamesKnowledge about adding colours is of great importance in HTML to createcolourful and eye-catching Web pages.The following example describes how to add colours to the background of aWeb pageCreate a HTML document with the text given in the Web page in Figure2.3.15. To specify a background colour, modify the <BODY> tag as <BODYBgcolor="Green" Text="Yellow">.The output when you run the file is shown in Figure 2.3.21.Basic Tags in HTML 2.3-32
  33. 33. Programming and Development Tools Web Programming Figure 2.3.21 : Web Page with coloured backgroundFrom Figure 2.3.21, it is clear that the attributes Bgcolor and Text are theattributes of the <BODY> tag. Bgcolor attribute specifies the background colour of the page. The background colour of the above page is set to Green, which is the hexadecimal code for a shade of green. The text colour of the above page is set to Yellow.The colours can also be specified in the form of colour values instead ofcolour names. The hexadecimal colour value for Green is 336600 where 33represent the Red component, 66 represent Green and 00 represent Blue.For example, the colour value for White is FFFFFF and for Black is 000000.Some of the colours and their values are given in Figure 2.3.22. RED GREEN BLUE FF0000 00FF00 0000FF YELLOW CYAN MAGENTA FFFF00 00FFFF FF00FF BLACK WHITE GRAY 000000 FFFFFF 808080 Figure 2.3.22 : Colour Names and ValuesPictures can also be added as background of a page. Figure 2.3.23 shows thesame page with picture as a background.Basic Tags in HTML 2.3-33
  34. 34. Programming and Development Tools Web Programming Figure 2.3.23: Web Page with a picture as backgroundTo add a picture as a background instead of colour, replace BGCOLOR withBACKGROUND attribute as follows:<BODY Background=”c:Internet.jpg”>The value for the Background attribute is a picture file along with its location.In the above example, the picture file, Internet.jpg is located in the c: drive.The background of the page will be blank, if the picture file is not in thespecified location. Lab ExerciseLab Exercise 16: Open D3_6.html in Internet Explorer. The following code will be present in D3_6.html. 1. View the source code in Notepad. 2. Identify the tag which is used to change the background and text colour of the above Web page. 3. Change the background colour to pink and text colour to black. 4. Save the file and view the output in the browser.Basic Tags in HTML 2.3-34
  35. 35. Programming and Development Tools Web ProgrammingLab Exercise 17: Open Welcome.html that you have created under the folder in your name in C:. Add background attribute into the <BODY> tag and display the output as given in the following Figure 2.3.24. Save the file and view the output in the browser. Figure 2.3.24 : Welcome to MalaysiaLab Exercise 18: Write a HTML code to display the output as given in the following Figure 2.3.25 using <H1>,<BODY> <HR> and <MARQUEE>. Save the file as Malaysia.html under the folder in your name in C:.Basic Tags in HTML 2.3-35
  36. 36. Programming and Development Tools Web Programming Figure 2.3.25 : Information about Malaysia Activity 2.3.51. Create a Web page that explains the structure of HTML document as shown in Figure 2.3.26. The continuation of the page is shown in Figure 2.3.27.2. Save the HTML file as Activity5.html in Activity folder.Basic Tags in HTML 2.3-36
  37. 37. Programming and Development Tools Web ProgrammingFigure 2.3.26 : A Web page that explains the structure of HTMLdocument Figure 2.3.27: Continuation of the Web page (Figure 2.3.26 contd..)Basic Tags in HTML 2.3-37
  38. 38. Programming and Development Tools Web Programming Technical TerminologiesAttribute - Property that enhances the effect of a tag.Entity reference - Symbolic representation of the characters.Comments - Added to improve the readability and also to identify the errors in case of lengthy source codes.Colour values - Hexadecimal values for the colour names.SummaryIn this unit, you learnt that The tags <H1>, <H2>, <H3>,<H4>, <H5> and <H6> are the heading tags. <P> tag is used for creating paragraphs. <BR> tag can be used to insert the line breaks. The comment should be enclosed within the <!-- and --> symbols. <HR> tag is used to draw horizontal lines. <MARQUEE> tag makes the text move across the browser window. Entity references are the symbolic representation of the characters. Bgcolor attribute of <BODY> tag specifies the background color of the page. Text attribute of <BODY> tag specifies the text color. Background attribute of <BODY> tag specifies the background picture of the page.Basic Tags in HTML 2.3-38
  39. 39. Programming and Development Tools Web Programming AssignmentI. Solve the following crossword: 1 2 3 4 5 6 7 8 9 10Across 6. Attribute of <MARQUEE> tag to scroll the text to and fro in the scrolling area. 8. To draw a horizontal line. 9. Attribute to specify the number of times to scroll. 10. Character entity name to display the ¥ symbol.Down 1. To scroll across the browser window. 2. Name of character entity to leave space. 3. Use of <P> tag. 4. Attribute of <MARQUEE> tag to specify the direction of scrolling. 5. Character entity reference ends with this. 7. To print in the next line.II Answer the following questions: 1. Name the attribute used to change the alignment of a paragraph. 2. Write about the use of <BR> tag. 3. Give the purpose of adding comments. 4. Name the tag which is used to scroll a text. 5. Write the use of character entities. 6. Give the tag and attribute used to add a picture to the background of the browser window.Basic Tags in HTML 2.3-39
  40. 40. 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: Basic tags in HTMLPlease tick [ √ ] the appropriate box when you have achieved the respectivecompetency.Date Basic tags in HTML C1 C2 C3 C4 C5 C6 C7 C8CommentCompetency codesC1 = Write the purpose of heading tags.C2 = Insert paragraphs and align them.C3 = Insert Line Breaks in your Web pages.C4 = Insert comment statement in your Web pages.C5 = Insert horizontal lines in your Web page.C6 = Use <MARQUEE> and its attributes.C7 = Identify the character entities for different symbolsC8 = Add colours and pictures to your Web page.Basic Tags in HTML 2.3-40

×