1 chapter 03: going further by tharith sriv. this chapter covers the following topics: flying texts...
Post on 14-Dec-2015
219 Views
Preview:
TRANSCRIPT
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>
Using <marquee>…</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>
Using <marquee>…</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>
Using <marquee>…</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>
Using <marquee>…</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>
Using <marquee>…</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>
Using <marquee>…</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>
Using <marquee>…</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>
Using <marquee>…</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>
Using <marquee>…</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>
Using <marquee>…</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>
Using <marquee>…</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>
Using <marquee>…</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:<!-- put your comment here --> <!-- your comment goes here -->
Indicates an author comment.
Sample:
<!-- this part is for image --> 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">
If your browser supports this tag you should be listening to a wav file called waitng2.wav
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>
Putting Sound using Different HTML tags
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>
Putting Sound using Different HTML tags
27
Sound Tag:
<SOUND SRC="waitng2.wav" LOOP="3" DELAY="3">
If your browser supports this tag you should be listening to a wav file called waitng2.wav
Sound Tag:
<SOUND SRC="waitng2.wav" LOOP="3" DELAY="3">
If your browser supports this tag you should be listening to a wav file called waitng2.wav
Putting Sound using Different HTML tags
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
top related