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.

Unit 2.3 Part 2

380 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Unit 2.3 Part 2

  1. 1. Unit 3 – Basic Tags in HTML Presentation 2 Web Programming
  2. 2. Objectives <ul><li>At the end of this presentation, you will be able to </li></ul><ul><li>Decorate your page by inserting horizontal lines </li></ul><ul><li>Scroll text across the Web page </li></ul>
  3. 3. Horizontal Rule <ul><li><HR> tag is used to draw horizontal line. </li></ul><ul><li>Attributes of <HR> tag: </li></ul><ul><ul><li>Size - Specifies the thickness of the line. </li></ul></ul><ul><ul><li>Width - Specifies the width of the line. </li></ul></ul><ul><ul><li>Align - Specifies the alignment of the line. </li></ul></ul><ul><ul><li>Noshade- Removes the shade from the line. </li></ul></ul><ul><li>Example: </li></ul><ul><li><HR Size=”5” Width=”40%” Noshade Align=”Left”> </li></ul>
  4. 4. Hands On! <ul><li>Open the HTML file Hor_Rule.HTML in C:HTMLUnit3Hands On Folder </li></ul><ul><li>This HTML document describes the use of different attributes of <HR> tag. </li></ul><ul><li>The output is shown below: </li></ul>
  5. 5. Lab Exercise <ul><li>Open D3_3.html in Internet Explorer. </li></ul><ul><ul><li>View the source code in Notepad. </li></ul></ul><ul><ul><li>Which tag is used for draw a horizontal line in the Web page? </li></ul></ul><ul><ul><li>What are the attributes are used in the horizontal line? </li></ul></ul>
  6. 6. Lab Exercise <ul><li>9. Open D3_3.html in Internet Explorer. </li></ul><ul><ul><li>View the source code in Notepad. </li></ul></ul><ul><ul><li>Change the alignment of the last horizontal line to left. </li></ul></ul><ul><ul><li>Reduce the size of the second horizontal line size to 5. </li></ul></ul><ul><ul><li>Save the file and view the output in the browser. </li></ul></ul>
  7. 7. Hands-On! <ul><li>Open the HTML file Scroll.HTML in C:HTMLUnit3 Hands On Folder </li></ul>
  8. 8. Scrolling Text <ul><li><MARQUEE> tag makes the text move across the browser. </li></ul><ul><li>Text is placed between <MARQUEE> and </MARQUEE> tags. </li></ul><ul><li>Attributes of <MARQUEE> tag are Height, Width, Bahavior, Bgcolor, Scrolldelay, Scrollamount, Loop, Direction, Vspace and Hspace. </li></ul>
  9. 9. Lab Exercise <ul><li>10. Open Welcome.html, add <HR> tag into the file and display the output as given in the following figure. Save the file and view the output in the browser . </li></ul>
  10. 10. Lab Exercise <ul><li>Open D3_4.html in Internet Explorer. </li></ul><ul><ul><li>View the source code in notepad. </li></ul></ul><ul><ul><li>Identify the tag which is used for scrolling </li></ul></ul><ul><ul><li>text? </li></ul></ul><ul><ul><li>c. Find out the attribute that is used in <MARQUEE> tag. </li></ul></ul>
  11. 11. Lab Exercise <ul><li>12. Open D3_4.html in Internet Explorer. </li></ul><ul><ul><li>View the source code in Notepad. </li></ul></ul><ul><ul><li>Change the marquee background colour </li></ul></ul><ul><ul><li>to green. </li></ul></ul><ul><ul><li>c. Change the direction of the scroll from </li></ul></ul><ul><ul><li>right to left. </li></ul></ul><ul><ul><li>d. Save the file and view the output in the browser. </li></ul></ul>
  12. 12. Lab Exercise <ul><li>13. Open Welcome.html, add <MARQUEE> tag into the file and display the output as given in the following figure. Save the file and view the output in the browser. </li></ul>
  13. 13. Summary <ul><li>In this presentation, you learnt the following: </li></ul><ul><li><HR> tag is used to draw horizontal lines. </li></ul><ul><li><MARQUEE> tag makes the text move across the browser window. </li></ul>
  14. 14. Assignment <ul><li>Name the tag used to scroll a text. </li></ul><ul><li>List the attributes of the <MARQUEE> tag. </li></ul>

×