Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

M02 un03 p03

411 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

M02 un03 p03

  1. 1. Web Programming <ul><li>Unit 3 – Basic Tags in HTML </li></ul>Presentation 3
  2. 2. Objectives <ul><li>At the end of this presentation, you will be able to </li></ul><ul><li>Add special characters to your Web page </li></ul><ul><li>Attract the users by adding colours and background pictures to your Web page </li></ul>
  3. 3. Character Entities <ul><li>T o represent the characters, such as < and >, the Entity references are used. </li></ul><ul><li>The Entity references have 3 parts. They are: </li></ul><ul><ul><li>The leading ampersand (&) symbol, </li></ul></ul><ul><ul><li>An entity name and </li></ul></ul><ul><ul><li>The Semicolon (;) </li></ul></ul><ul><li>For example, to display <HTML> in a Web page the code is &lt;HTML&gt; </li></ul>
  4. 4. Character Entities <ul><li>Entity References </li></ul>
  5. 5. Lab Exercise <ul><li>14. Open D3_5.html in Internet Explorer. </li></ul><ul><ul><li>Identify the entity reference which is used for Copyright symbol? </li></ul></ul><ul><ul><li>Identify the entity reference for Plus or Minus symbol. </li></ul></ul><ul><ul><li>Find out the entity reference for Trade Mark symbol. </li></ul></ul><ul><ul><li>What entity reference is used for Register symbol? </li></ul></ul><ul><ul><li>Identify the symbol for Ampersand. </li></ul></ul>
  6. 6. Lab Exercise <ul><li>15. Write a HTML code to display the output as given in the following figure using character entities. </li></ul>
  7. 7. Activity 2.3.1 <ul><li>Create a Web page that explains the heading tags as shown in Figure. </li></ul><ul><li>Save the HTML file as Activity1.HTML in C:HTMLUnit 3Activity folder. </li></ul>
  8. 8. Activity 2.3.2 <ul><li>Create a Web page that explains the use of <BR> tag and <P> tag as shown in Figure. </li></ul><ul><li>Save the HTML file as Activity2.HTML in C:HTMLUnit 3Activity folder. </li></ul>
  9. 9. Colour Values and Name <ul><li>BGCOLOR attribute of the <BODY> tag specifies the background colour of the page. </li></ul><ul><li>The Colour can be specified in the form Colour values or Colour names. </li></ul>GRAY 808080 WHITE FFFFFF BLACK 000000 MAGENTA FF00FF CYAN 00FFFF YELLOW FFFF00 BLUE 0000FF GREEN 00FF00 RED FF0000
  10. 10. Colour Values and Name <ul><li>Background attribute of the <BODY> tag specifies the background picture of the page. </li></ul><ul><li>Example: </li></ul><ul><li><BODY BACKGROUND=”c:Internet.jpg”> </li></ul>
  11. 11. Lab Exercise <ul><ul><li>16. Open D3_6.html in Internet Explorer. </li></ul></ul><ul><ul><ul><li>View the source code in notepad. </li></ul></ul></ul><ul><ul><ul><li>Identify the tag which is used to change the background and text colour of the above Web page? </li></ul></ul></ul><ul><ul><ul><li>Change the background colour to pink and text colour to black. </li></ul></ul></ul><ul><ul><ul><li>Save the file and view the output in the browser. </li></ul></ul></ul>
  12. 12. Lab Exercise <ul><ul><li>Open Welcome.html, add background attribute into the <BODY> tag and display the output as given in the following figure. Save the file and view the output in the browser. </li></ul></ul>
  13. 13. Lab Exercise <ul><ul><li>18. Write a HTML code to display the output as given in the following figure using <H1>,<BODY> <HR> and <MARQUEE> and save the file as Malaysia.html and view the output in the browser. </li></ul></ul>
  14. 14. Activity 2.3.3 <ul><li>Create a Web page that explains the use of comment and <HR> tag as shown in Figure. Add comments in your HTML file. </li></ul><ul><li>Save the HTML file as Activity3.HTML in C:HTMLUnit 3Activity folder. </li></ul>
  15. 15. Activity 2.3.3 Contd.
  16. 16. Activity 2.3.4 <ul><li>Create a Web page with the content given below. The conditions you have to follow while creating the Web page is given within brackets. </li></ul><ul><li>Save the HTML file as Activity4.HTML in C:HTMLUnit 3Activity folder. </li></ul>
  17. 17. Activity 2.3.5 <ul><li>Create a Web page that explains the structure of HTML document as shown in Figure. The continuation of the page is shown in Figure. </li></ul><ul><li>Save the HTML file as Activity5.HTML in C:HTMLUnit 3Activity folder. </li></ul>
  18. 18. Summary <ul><li>In this presentation, you learnt the following: </li></ul><ul><li>Entity references are the symbolic representation of the characters. </li></ul><ul><li>Bgcolor attribute of <BODY> tag specifies the background color of the page. </li></ul><ul><li>Background attribute of <BODY> tag specifies the background picture of the page. </li></ul>
  19. 19. Assignment <ul><li>I. Solve the following crossword: </li></ul>
  20. 20. Assignment <ul><li>Across </li></ul><ul><li>6. Attribute of <MARQUEE> tag to scroll the text to and fro in the scrolling area. </li></ul><ul><li>8. To draw a horizontal line. </li></ul><ul><li>9. Attribute to specify the number of times </li></ul><ul><li> to scroll. </li></ul><ul><li>10. Character entity name to display the ¥ </li></ul><ul><li> symbol. </li></ul>
  21. 21. Assignment <ul><li>Down </li></ul><ul><li>1. To scroll across the browser window. </li></ul><ul><li>2. Name of character entity to leave space. </li></ul><ul><li>3. Use of <P> tag. </li></ul><ul><li>4. Attribute of <MARQUEE> tag to </li></ul><ul><li>specify the direction of scrolling. </li></ul><ul><li>5. Character entity reference ends with </li></ul><ul><li>this. </li></ul><ul><li>7. To print in the next line. </li></ul>

×