Technology Peaks Performance! ...... Emphasizing use of HTML and JavaScript to create optimal email letterheads with this marquee feature,  Dark Navy Trebuchet 9 point font on Ivory background, table formatted, embedding images, logos, music, audio, even video, all in a form easily printed ...  An application of 'Rich Media' to optimize email communication ....  Class project.  More information, contact  me,  Joseph@Auciello.Net.   Out .....

 
 

Week 05 Project

 

Week 05: Ensure the previous activities had closure, especially, creating at least 3 different objects (such as WordArt, Images, Text,  Marquee,  Video, etc) are saved to a web page and uploaded, and covering:  The Font Tag, and Hexadecimal Colors • Blinking Text • Font Tags .

Coming up:  Hover buttons,  scrolling tables,  slide shows, etc, with the goal of producing a dynamic, visual webpage, oriented to business.

Week04:  Important to create webpage in format below, modify it,  and  upload it to the web. Text Alignment, and Lists .. Text Alignment Options .. • Default Alignment • Center • Nesting Tags
• Lists • Blockquote

Week03:  1.   Continue building and posting webpage examples (shown below)

Week02.  Required topics: Basic Tags. • Basic HTML Tags • What Goes into the Head? • Break Tags • Headings

Objective:  upload an html file, like below, to a website, with the same characteristics as the example below.

Show the html code for the web page.

 

 

 

 
 
 
    
   

 

 

 
 
 

 

 

 

http://auciello.tripod.com/757-index-master/html-cindy-index-99.html

  Has Word Art, Background Image, Image, Scrolling Text (or Marquee),  Animated Images (Gifs), Bulleted Links, Mailto: Link  -- Build on this model.
 
   
 
 
 
 
 
 
 
 
 
 

 

 

 

 

 

 

<!—  I saved-as this website as an html file, and opened it in FRONTPAGE ..

       Has been tested.  It works.  Use it for a model to build on! and learn HTML. -->

<!-- HTML code from Cindy Liu’s Home Page
Objective: go thru it, format, organize it, test it, improve it, perfect it,
Use it for a model.
-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0027)http://clovejoe.tripod.com/ -->

<!-- begin comment
CIS 757 WEB PAGE BUILDING PROF. AUCIELLO
index.html follows: this is the main page that calls all other pages on your web site.
insert your own picture, and name. -->
<HTML>
<HEAD>
<TITLE>Cindy's Home Page</TITLE>
</HEAD>

<BODY text=red aLink=orange link=orange bgColor=yellow
background=flower.gif onload=Scrollon()>
<NOSCRIPT ><IMG height=1 alt=dot src="ot_noscript.gif" width=150>
</NOSCRIPT>
<STYLE type=text/css>
#tb {MARGIN-BOTTOM: 10px; WIDTH: 800px}
#tb TD {FONT-SIZE: 10px; COLOR: #333; FONT-FAMILY: verdana}
#tb TD A {FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #666}
#top100 A:link {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #00f}
#top100 A:visited {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #00f}
#top100 A:active {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #00f}
</STYLE>

<STYLE type=text/css>
LI A:hover { BACKGROUND: #f0c2b3 }
</STYLE>

<DIV style="WIDTH: 100%" align=center>

<TABLE cellSpacing=0 cellPadding=0 width=775 border=0>
<TBODY>
<TR>
<TD width="775">
<TABLE cellPadding=0 width=750 border=0>
<TBODY>
<TR>
<TD vAlign=top>
<IMG height=120 src="cname.jpg" width=750 border=0>
</TD>
</TR>
</TD>
</TR>
</TBODY>
</TABLE>

<SCRIPT language=JavaScript>
var ss1= " ( . . . .Starting ... . . . . . . . . . . . . . . . Hello! My name is Cindy. I came from Taiwan, Taipei. Taiwan is a small island next to China. I live in a capitl city, Taipei. Taipei looks and feels like Downtown L.A. I have been in United State about 2 years. I love my country a lot, but I also like California especially the weather. I wish I can travel to other states next few years. My family stays in Taiwan. I visit then once a year. Most of time I talk to them on the phone. Tiwan is a very beautifull place. You should go check it out when you have time. )"

var ScrollString = ss1;
// var speed = document.box.boxtext2.value;
// document.write (speed);
var jsspeed = 0; // initialized.
function Scrollon()
{ jsspeed = document.box.boxtext2.value;
document.box.boxtext1.value = jsspeed + " | " + ScrollString;
ScrollString= ScrollString.substring(1,ScrollString.length) + ScrollString.charAt(0);
// decrease timeout value (50) to speed up, increase to slow down
timer = setTimeout("Scrollon()",jsspeed) ;
}
</SCRIPT>

<FONT color=#cc00ff size="3">
<br>
<style="FONT: 14pt sanp itc"><B>
<FORM name=box onsubmit='Scrollon("0")'>
<CENTER>
<INPUT style="FONT-SIZE: 15pt" size=65 name=boxtext1>
</CENTER>Enter Speed:
<INPUT style="FONT-SIZE: 15pt" size=6 value=70 name=boxtext2>
(increase to slow down)

<IMG src="monkey.gif" width="32" height="32">
<IMG src="welcome.gif" width="213" height="38">
</FORM>

<TABLE width="90%">
<TBODY>
</TBODY>
</TABLE>

<TABLE cellPadding=10 width=768 border=1>
<TBODY>
<TR>
<TD vAlign=top width="460">
<CENTER>
<IMG height=380 src="cindy.jpg" width=460 border=0> </CENTER><BR>

<FONT face="Snap ITC" color=#ff0066 size=4><B>
<CENTER><B<I>CINDY LIU<I></CENTER><BR>
<CENTER>HOME PAGE</CENTER>
</I>
</B><I><BR></I>
</FONT>

<FONT face="Snap ITC" color=blue size=3><B>
<IMG src="max.gif" width="32" height="32"> </B>
</FONT>

<FONT color=#cc00ff size="3">
<FONT face="Snap ITC" color=blue size=3><B>
<B><B<I>

<OBJECT>
<EMBED SRC="bad.mid" AUTOSTART="FALSE" LOOP="FALSE"
MASTERSOUND CONTROLS=SMALLCONSOLE
HEIGHT=25 WIDTH=140>
</OBJECT>

</B></B></FONT>
</FONT>
</TD>

<TD vAlign=top width="256"><FONT face="Snap ITC">
<CENTER><H1><I>ABOUT ME<I></H1>
</CENTER>
</FONT>

<CENTER><IMG src="show1.gif" width="41" height="32"></CENTER>
<P>&nbsp;</I></I>
<FONT face="Snap ITC" color=blue><UL>
<LI><b>
<A href="http://clovejoe.tripod.com/cindy.mpg">
<SPAN class=small>
<i>
<font color="#000000">Cindy's Video</font><font color="#000000" size="2">
(not working)</font></i><font color="#000000" size="2">.</font>
</SPAN>
</A>
</b>
</FONT><I><FONT face="Snap ITC" size=2>
</FONT><FONT face="Snap ITC" color=blue>
<LI><b>
<A href="http://clovejoe.tripod.com/art.htm">
<SPAN class=small>
<font color="#000000">Art and Music</font>
</SPAN>
</A>
</b>
</FONT><b>
<FONT face="Snap ITC" color=#000000>
</FONT></b><I><FONT face="Snap ITC" size=2>
</FONT><FONT face="Snap ITC" color=blue>
<LI><b>
<A href="http://clovejoe.tripod.com/career.htm">
<SPAN class=small>
<font color="#000000">Career</font>
</SPAN>
</A>
</b>
</FONT><b>
<FONT face="Snap ITC" color=#000000>
</FONT></b><I><FONT face="Snap ITC" size=2>
</FONT><FONT face="Snap ITC" color=blue>
<LI><b>
<A href="http://clovejoe.tripod.com/hobbie.htm">
<SPAN class=small>
<font color="#000000">Hobbies</font>
</SPAN>
</A>
</b>
</FONT><b>
<FONT face="Snap ITC" color=#000000>
</FONT></b><I><FONT face="Snap ITC" size=2>
</FONT><FONT face="Snap ITC" color=blue>
<LI><b>
<A href="http://clovejoe.tripod.com/likes.htm">
<SPAN class=small>
<font color="#000000">Likes</font>
</SPAN>
</A>
</b>
</FONT><b>
<FONT face="Snap ITC" color=#000000>
</FONT></b><I><FONT face="Snap ITC" size=2>
</FONT><FONT face="Snap ITC" color=blue>
<LI><b>
<A href="http://clovejoe.tripod.com/codes.htm">
<SPAN class=small>
<font color="#000000">Color Codes</font>
</SPAN>
</A>
</b>
</FONT><b>
<FONT face="Snap ITC" color=#000000>
</FONT></b><I><FONT face="Snap ITC" size=2>
</FONT><FONT face="Snap ITC" color=blue>
<LI><b>
<A href="http://clovejoe.tripod.com/14.htm">
<SPAN class=small>
<font color="#000000">Color and Sound</font>
</SPAN>
</A>
</b>
</FONT><b>
<FONT face="Snap ITC" color=#000000>
</FONT></b><I><FONT face="Snap ITC" size=2>
</FONT><FONT face="Snap ITC" color=blue>
<LI><b>
<A href="http://clovejoe.tripod.com/757.htm">
<SPAN class=small>
<font color="#000000">Melissa Virus</font>
</SPAN>
</A>
</b>
</FONT><b>
<FONT face="Snap ITC" color=#000000>
</FONT></b><I><FONT face="Snap ITC" size=2>
</FONT><FONT face="Snap ITC" color=blue>
<LI><b>
<A href="http://clovejoe.tripod.com/glass.htm">
<SPAN class=small>
<font color="#000000">Glass Box</font>
</SPAN>
</A>
</b>
</FONT><b>
<FONT face="Snap ITC" color=#000000>
</FONT></b><I><FONT face="Snap ITC" size=2>
</FONT><FONT face="Snap ITC" color=blue>
<LI><b>
<A href="http://clovejoe.tripod.com/hello.htm">
<SPAN class=small>
<font color="#000000">Hello World</font>
</SPAN>
</A>
</b>
</FONT><b>
<FONT face="Snap ITC" color=#000000>
</FONT></b><I><FONT face="Snap ITC" size=2>
</FONT><FONT face="Snap ITC" color=blue>
</UL>
</FONT></I></TD></TR>
<TR>
<TD vAlign=top width="716" colspan="2">
<font face="Trebuchet MS" size="2">
<b><font color="#000000">Has Scrolling Banner (JavaScript), WordArt,
Animated Gifs, Highlighting Links, Cascading Style Sheets, &nbsp; Background&nbsp;
Music, Video.</font></b></font><p><b>
<font face="Trebuchet MS" size="2" color="#000000">Optimization:&nbsp; Add
Slide Show (configurable speed);&nbsp; color balancing, encryption,&nbsp;
MouseOver sounds.</font></b><p><b>
<font face="Trebuchet MS" size="2" color="#000000">Build your Home Page
based on the Shawnte and Cindy Model Pages.</font></b></TD>
</TR>
</TBODY>
</TABLE></B></FONT>
</BODY>
</HTML>