1 chapter 03: going further by tharith sriv. this chapter covers the following topics: flying texts...

1

CHAPTER 03: GOING FURTHER

By Tharith Sriv

This chapter covers the following topics: Flying texts or images Using Comment Using <HR> tag Using <PRE>…</PRE> Putting Images Putting sound

Topics to Be Covered

Using <marquee>…</marquee>

<MARQUEE>-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!

How to make your text fly?Syntax:<marquee>Your text goes here</marquee>Attribute: DIRECTION, BEHAVIOR, SCROLLDELAY, SCROLLAMOUNT, ALIGN, BGCOLOR, WIDTH, HEIGHT, LOOP, VSPACE, HSPACE

Sample:<MARQUEE DIRECTION=LEFT BEHAVIOR=SCROLLSCROLLDELAY=250 SCROLLAMOUNT=10>My flying text!.</MARQUEE>


6

Align={left, right, center, top, bottom}This specifies the alignment of text

outside the marquee.

Sample:

<MARQUEE WIDTH=200 HEIGHT=50 ALIGN=LEFT DIRECTION=LEFT>

Flying Text in a simple webpage!</MARQUEE>

Align={left, right, center, top, bottom}This specifies the alignment of text

outside the marquee.

Sample:

<MARQUEE WIDTH=200 HEIGHT=50 ALIGN=LEFT DIRECTION=LEFT>

Flying Text in a simple webpage!</MARQUEE>


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 theopposite side. BEHAVIOR=ALTERNATE bouncesthe marquee text from one side to the other.

Sample:

<MARQUEE DIRECTION=LEFT BEHAVIOR=ALTERNATE>GO BEARS! WIN WIN WIN!</MARQUEE>

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 theopposite side. BEHAVIOR=ALTERNATE bouncesthe marquee text from one side to the other.

Sample:

<MARQUEE DIRECTION=LEFT BEHAVIOR=ALTERNATE>GO BEARS! WIN WIN WIN!</MARQUEE>


8

BGCOLOR=“#RRGGBB” or “...”Specifies the background color of the marquee. Use a hexadecimal RGB color value or a color name.

Sample:

<MARQUEE BGCOLOR=“red” DIRECTION=LEFT>The bgcolor attribute!</MARQUEE>

BGCOLOR=“#RRGGBB” or “...”Specifies the background color of the marquee. Use a hexadecimal RGB color value or a color name.

Sample:

<MARQUEE BGCOLOR=“red” DIRECTION=LEFT>The bgcolor attribute!</MARQUEE>


9

DIRECTION={LEFT, RIGHT}Indicates the direction in which the marquee text scrolls.

Sample:<MARQUEE DIRECTION=LEFT>This text is flying toward the left.</MARQUEE>

DIRECTION={LEFT, RIGHT}Indicates the direction in which the marquee text scrolls.

Sample:<MARQUEE DIRECTION=LEFT>This text is flying toward the left.</MARQUEE>


10

HEIGHT=”n” WIDTH=“n”Specifies the vertical and horizontal dimension of the marquee (in pixels).

Sample:<MARQUEE WIDTH=300 HEIGHT=50>Testing width and height tags.</MARQUEE>

HEIGHT=”n” WIDTH=“n”Specifies the vertical and horizontal dimension of the marquee (in pixels).

Sample:<MARQUEE WIDTH=300 HEIGHT=50>Testing width and height tags.</MARQUEE>


11

HSPACE=”n” Specifies the size of the margins (in pixels) to the left and right of the marquee.

Sample:<MARQUEE DIRECTION=LEFT HSPACE=25>Check out our detailed product descriptions!</MARQUEE>

HSPACE=”n” Specifies the size of the margins (in pixels) to the left and right of the marquee.

Sample:<MARQUEE DIRECTION=LEFT HSPACE=25>Check out our detailed product descriptions!</MARQUEE>


12

VSPACE=”n”Specifies the size of the margins (in pixels) atthe top and bottom of the marquee.

Sample:<MARQUEE DIRECTION=LEFT VSPACE=25>This is room 315A, main building!</MARQUEE>

VSPACE=”n”Specifies the size of the margins (in pixels) atthe top and bottom of the marquee.

Sample:<MARQUEE DIRECTION=LEFT VSPACE=25>This is room 315A, main building!</MARQUEE>


13

LOOP={n, INFINITE}Controls the appearance of the marquee text.

Sample:<MARQUEE LOOP=5>I come five times, then I stop.</MARQUEE>

LOOP={n, INFINITE}Controls the appearance of the marquee text.

Sample:<MARQUEE LOOP=5>I come five times, then I stop.</MARQUEE>


14

SCROLLAMOUNT=”n”Indicates how far (in pixels) the marquee textshifts between redraws. Decrease this value for a smoother (but slower) scroll; increase it for a faster (but bumpier) scroll.

Sample:<MARQUEE SCROLLAMOUNT=10SCROLLDELAY=40>Plant a tree for Arbor Day!</MARQUEE>

SCROLLAMOUNT=”n”Indicates how far (in pixels) the marquee textshifts between redraws. Decrease this value for a smoother (but slower) scroll; increase it for a faster (but bumpier) scroll.

Sample:<MARQUEE SCROLLAMOUNT=10SCROLLDELAY=40>Plant a tree for Arbor Day!</MARQUEE>


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=RIGHTSCROLLDELAY=30>Study at RUPP’s CEC</MARQUEE>

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=RIGHTSCROLLDELAY=30>Study at RUPP’s CEC</MARQUEE>


16

WIDTH=”n”Specifies the horizontal dimension (in pixels)of the marquee.

Sample:<MARQUEE WIDTH=300>Go Bears!</MARQUEE>

WIDTH=”n”Specifies the horizontal dimension (in pixels)of the marquee.

Sample:<MARQUEE WIDTH=300>Go Bears!</MARQUEE>


17

This tag is used to draw horizontal lines (rules) in your document.This is useful for visually separating documentsections.

This tag is used to draw horizontal lines (rules) in your document.This is useful for visually separating documentsections.

Inserting <HR> tag!

Sample:<HR ALIGN=LEFT ALIGN=LEFT WIDTH=“60%” COLOR=“#RRGGBB” NOSHADE SIZE=10>

Sample:<HR ALIGN=LEFT ALIGN=LEFT WIDTH=“60%” COLOR=“#RRGGBB” NOSHADE SIZE=10>

Other AttributesThis tag also accepts the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, and onKeyUp attributes.

Comment: 

Indicates an author comment.

Sample:

 Another way is <comment> …</comment>

This way of using comment works in all browsers. If the browser is Netscape, you can use something like:

Sample:

<COMMENT>This document was created September 19, 1997</COMMENT>

18

19

<PRE>Contains preformatted plain text. This is useful for including computer program output or source code within your document. Sample:

Here’s the source code:<PRE WIDTH=200>#include <stdio.h>void main(){printf(“Hello World!\n”);}</PRE>

<PRE>Contains preformatted plain text. This is useful for including computer program output or source code within your document. Sample:

Here’s the source code:<PRE WIDTH=200>#include <stdio.h>void main(){printf(“Hello World!\n”);}</PRE>

Using <pre>…</pre> tag:

20

Other AttributesThis tag also accepts the lang, dir, onClick,onDblClick, onMouseDown, onMouseUp,onMouseOver, onMouseMove, onMouseOut,onKeyPress, onKeyDown, and onKeyUp attributes.

Other AttributesThis tag also accepts the lang, dir, onClick,onDblClick, onMouseDown, onMouseUp,onMouseOver, onMouseMove, onMouseOut,onKeyPress, onKeyDown, and onKeyUp attributes.

Using <pre>…</pre> tag:

21

Willing to put image in your page?<IMG> places an inline image in a document. You can use the attributes ISMAP= and USEMAP= with the <IMG> tag to implement image maps.

Putting Image: Tag <IMG>

22

SAMPLE:<img src=“image.jpg” alt=“this is a sample image>

SAMPLE:<img src=“image.jpg” alt=“this is a sample image>

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 <IMG>

Sample Page with Image Tag (<IMG>)

<HTML><HEAD><TITLE>PUTTING IMAGE</TITLE></HEAD><BODY><CENTER><IMG SRC=“image02.jpg” WIDTH=100 HEIGHT=300 ALT=“this image is taken in Japan” BORDER=2></CENTER><--! Comment: this image is aligned center in this page --></BODY></HTML>

24

Bgsound Tag EampleThe background sound tag for this page is:

<BGSOUND SRC="waitng2.wav“ LOOP="2">

If your browser supports this tag you should be listening to a wav file called waitng2.wav

Bgsound Tag EampleThe background sound tag for this page is:

<BGSOUND SRC="waitng2.wav“ LOOP="2">


Putting Sound using Different HTML tags

25

Embed Sound Tag ExampleVOLUME DEFAULT SET AT 50% <EMBED ALIGN="CENTER" SRC="cut1.mid" HEIGHT="60" WIDTH="145" AUTOSTART="FALSE" VOLUME="50%" MASTERSOUND >

</EMBED>

CONTROLS HIDDEN, AUTOSTART<EMBED SRC="cut1.mid" HIDDEN="TRUE" AUTOSTART="TRUE" MASTERSOUND></EMBED>

Embed Sound Tag ExampleVOLUME DEFAULT SET AT 50% <EMBED ALIGN="CENTER" SRC="cut1.mid" HEIGHT="60" WIDTH="145" AUTOSTART="FALSE" VOLUME="50%" MASTERSOUND >

</EMBED>

CONTROLS HIDDEN, AUTOSTART<EMBED SRC="cut1.mid" HIDDEN="TRUE" AUTOSTART="TRUE" MASTERSOUND></EMBED>


26

Combined Bgsound and Embed Tags:

<NOEMBED><BGSOUND SRC="waitng2.wav" LOOP="2"></NOEMBED>

Netscape ignores what is inside the <NOEMBED> tags. <EMBED SRC="waitng2.wav" HEIGHT="0" WIDTH="0" AUTOSTART="TRUE"></EMBED>

Combined Bgsound and Embed Tags:

<NOEMBED><BGSOUND SRC="waitng2.wav" LOOP="2"></NOEMBED>

Netscape ignores what is inside the <NOEMBED> tags. <EMBED SRC="waitng2.wav" HEIGHT="0" WIDTH="0" AUTOSTART="TRUE"></EMBED>


27

Sound Tag:

<SOUND SRC="waitng2.wav" LOOP="3" DELAY="3">


Sound Tag:

<SOUND SRC="waitng2.wav" LOOP="3" DELAY="3">



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

1 chapter 03: going further by tharith sriv. this chapter covers the following topics: flying texts...

Documents

n width

marquee text shifts

hspace sample

alignment of text

text fly

scrolling text message

tharith sriv slide

horizontal dimension