1. 1 CHAPTER 03: GOING FURTHER By Tharith Sriv

2. This chapter covers the following topics:  Flying texts or images  Using Comment  Using tag  Using …  Putting Images  Putting sound Topics to Be Covered

3. Using … -Displays a scrolling text message within a document. -In other words, in HTML you can make your text or image fly to left, right, up, and down. - See video in next slide!

5. How to make your text fly? Syntax: Your text goes here Attribute: DIRECTION, BEHAVIOR, SCROLLDELAY, SCROLLAMOUNT, ALIGN, BGCOLOR, WIDTH, HEIGHT, LOOP, VSPACE, HSPACE Sample: <MARQUEE DIRECTION=LEFT BEHAVIOR=SCROLL SCROLLDELAY=250 SCROLLAMOUNT=10>My flying text!. Using …

6. 6 Align={left, right, center, top, bottom} This specifies the alignment of text outside the marquee. Sample: Flying Text in a simple webpage! Align={left, right, center, top, bottom} This specifies the alignment of text outside the marquee. Sample: Flying Text in a simple webpage! Using …

7. 7 BEHAVIOR={SLIDE, SCROLL, ALTERNATE} Indicates the type of scrolling. BEHAVIOR= SCROLL scrolls text from one side of the marquee, across, and off the opposite side. BEHAVIOR= SLIDE scrolls text from one side of the marquee, across, and stops when the text reaches the opposite side. BEHAVIOR=ALTERNATE bounces the marquee text from one side to the other. Sample: GO BEARS! WIN WIN WIN! BEHAVIOR={SLIDE, SCROLL, ALTERNATE} Indicates the type of scrolling. BEHAVIOR= SCROLL scrolls text from one side of the marquee, across, and off the opposite side. BEHAVIOR= SLIDE scrolls text from one side of the marquee, across, and stops when the text reaches the opposite side. BEHAVIOR=ALTERNATE bounces the marquee text from one side to the other. Sample: GO BEARS! WIN WIN WIN! Using …

8. 8 BGCOLOR=“#RRGGBB” or “...” Specifies the background color of the marquee. Use a hexadecimal RGB color value or a color name. Sample: The bgcolor attribute! BGCOLOR=“#RRGGBB” or “...” Specifies the background color of the marquee. Use a hexadecimal RGB color value or a color name. Sample: The bgcolor attribute! Using …

9. 9 DIRECTION={LEFT, RIGHT} Indicates the direction in which the marquee text scrolls. Sample: This text is flying toward the left. DIRECTION={LEFT, RIGHT} Indicates the direction in which the marquee text scrolls. Sample: This text is flying toward the left. Using …

10. 10 HEIGHT=”n” WIDTH=“n” Specifies the vertical and horizontal dimension of the marquee (in pixels). Sample: Testing width and height tags. HEIGHT=”n” WIDTH=“n” Specifies the vertical and horizontal dimension of the marquee (in pixels). Sample: Testing width and height tags. Using …

11. 11 HSPACE=”n” Specifies the size of the margins (in pixels) to the left and right of the marquee. Sample: Check out our detailed product descriptions! HSPACE=”n” Specifies the size of the margins (in pixels) to the left and right of the marquee. Sample: Check out our detailed product descriptions! Using …

12. 12 VSPACE=”n” Specifies the size of the margins (in pixels) at the top and bottom of the marquee. Sample: This is room 315A, main building! VSPACE=”n” Specifies the size of the margins (in pixels) at the top and bottom of the marquee. Sample: This is room 315A, main building! Using …

13. 13 LOOP={n, INFINITE} Controls the appearance of the marquee text. Sample: I come five times, then I stop. LOOP={n, INFINITE} Controls the appearance of the marquee text. Sample: I come five times, then I stop. Using …

14. 14 SCROLLAMOUNT=”n” Indicates how far (in pixels) the marquee text shifts between redraws. Decrease this value for a smoother (but slower) scroll; increase it for a faster (but bumpier) scroll. Sample: <MARQUEE SCROLLAMOUNT=10 SCROLLDELAY=40>Plant a tree for Arbor Day! SCROLLAMOUNT=”n” Indicates how far (in pixels) the marquee text shifts between redraws. Decrease this value for a smoother (but slower) scroll; increase it for a faster (but bumpier) scroll. Sample: <MARQUEE SCROLLAMOUNT=10 SCROLLDELAY=40>Plant a tree for Arbor Day! Using …

15. 15 SCROLLDELAY=”n” Indicates how often (in milliseconds) the marquee text redraws. Increase this value to slow the scrolling action; decrease it to speed the scrolling action. Sample: <MARQUEE DIRECTION=RIGHT SCROLLDELAY=30>Study at RUPP’s CEC SCROLLDELAY=”n” Indicates how often (in milliseconds) the marquee text redraws. Increase this value to slow the scrolling action; decrease it to speed the scrolling action. Sample: <MARQUEE DIRECTION=RIGHT SCROLLDELAY=30>Study at RUPP’s CEC Using …

16. 16 WIDTH=”n” Specifies the horizontal dimension (in pixels) of the marquee. Sample: Go Bears! WIDTH=”n” Specifies the horizontal dimension (in pixels) of the marquee. Sample: Go Bears! Using …

17. 17 This tag is used to draw horizontal lines (rules) in your document. This is useful for visually separating document sections. This tag is used to draw horizontal lines (rules) in your document. This is useful for visually separating document sections. Inserting tag! Sample: Sample: Other Attributes This tag also accepts the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, and onKeyUp attributes.

18. Comment:  Indicates an author comment. Sample:  Another way is … This way of using comment works in all browsers. If the browser is Netscape, you can use something like: Sample: This document was created September 19, 1997 18

19. 19 Contains preformatted plain text. This is useful for including computer program output or source code within your document. Sample: Here’s the source code: #include void main() { printf(“Hello World!\n”); } Contains preformatted plain text. This is useful for including computer program output or source code within your document. Sample: Here’s the source code: #include void main() { printf(“Hello World!\n”); } Using … tag:

20. 20 Other Attributes This tag also accepts the lang, dir, onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, and onKeyUp attributes. Other Attributes This tag also accepts the lang, dir, onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, and onKeyUp attributes. Using … tag:

21. 21 Willing to put image in your page? places an inline image in a document. You can use the attributes ISMAP = and USEMAP= with the tag to implement image maps. Putting Image: Tag

22. 22 SAMPLE: SAMPLE: Attribute: ALIGN, ALT, BORDER, SRC, WIDTH, HEIGHT, HSPACE, VSPACE,… See next slide! Attribute: ALIGN, ALT, BORDER, SRC, WIDTH, HEIGHT, HSPACE, VSPACE,… See next slide! Putting Image: Tag

23. Sample Page with Image Tag ( ) PUTTING IMAGE

24. 24 Bgsound Tag Eample The background sound tag for this page is: If your browser supports this tag you should be listening to a wav file called waitng2.wav Bgsound Tag Eample The background sound tag for this page is: If your browser supports this tag you should be listening to a wav file called waitng2.wav Putting Sound using Different HTML tags

25. 25 Embed Sound Tag Example VOLUME DEFAULT SET AT 50% CONTROLS HIDDEN, AUTOSTART Embed Sound Tag Example VOLUME DEFAULT SET AT 50% CONTROLS HIDDEN, AUTOSTART Putting Sound using Different HTML tags

26. 26 Combined Bgsound and Embed Tags: Netscape ignores what is inside the tags. Combined Bgsound and Embed Tags: Netscape ignores what is inside the tags. Putting Sound using Different HTML tags

27. 27 Sound Tag: If your browser supports this tag you should be listening to a wav file called waitng2.wav Sound Tag: If your browser supports this tag you should be listening to a wav file called waitng2.wav Putting Sound using Different HTML tags

28. A Note About Event onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload 28