Post on 18-Jan-2016
Bus119A
Web Page Design
John Wang, Diana Chou and Greg Windt
Presented By
• How many people have HTML experience ?
• How many people have their own Web Site ?
• Frames
• Graphics
• Audio/Video
Bus119A
HTML Basic Elements
Presented By John Wang
The Basic HTML Document Skeleton
Your basic document will look something like this:
<HTML>
<HEAD>
<TITLE>Bus 119A</TITLE>
</HEAD>
<BODY>
<H1>WebWorks HomePage</H1>
<P>This Paragraph will explain our Summary . . . </P>
<P>This Paragraph will teach the HTML Basics . . . </P>
<P>This Paragraph will discuss our slide show . . . </P>
</BODY>
</HTML>
<HTML>
<HEAD><!-- The TITLE is the name of the document in the title bar --><!-- and is also used as the default short cut link title--> <TITLE>WebWorks' Main Page </TITLE>
</HEAD>
<!-- WebWorks' Main Page -->
<!-- Body attribute definitions --><BODY Text="#000000" Bgcolor="skyblue" Link="#0000FF" Vlink="#800080" Alink="#FF0000">
<!-- Headlines--><H1>Welcome to WebWorks' Home Page</H1><H6>This page is under CONSTRUCTION.</H6>
This is regular text
<B>This is BOLD text</B><I>This is italic text</I>
<FONT Size=1>A</FONT><FONT Size=2>A</FONT><FONT Size=3>A</FONT><FONT Size=4>A</FONT><FONT Size=5>A</FONT><FONT Size=6>A</FONT><FONT Size=7>A</FONT><FONT Size=1 Color=Blue>This is font size 1 in blue</FONT><FONT Size=7 Color=Hotpink>This is font size 7 in HOT PINK</FONT>
Use the Big tag <BIG>to make things bigger</BIG> and the small tag <SMALL>to makethings teeny</SMALL>
Use subscripts and superscripts to create mathematicalexpressions like a<SUP>2</SUP>+b<SUP>2</SUP>=c<SUP>2</SUP>,or for chemical expressions like H<SUB>2</SUB>O
<STRIKE>This a strike through</STRIKE>
<U>This is underlined</u>
</BODY>
</HTML>
Bus119A
Text Formatting and Tables
Presented By Diana Chou
<HTML><HEAD>
<TITLE>Formatting & Tables</TITLE></HEAD>
<BODY Text="#000000" Bgcolor="skyblue" Link="#0000FF" Vlink="#800080" Alink="#FF0000">
<P><CENTER>This is regular text</CENTER></P>
<B>This is BOLD text</B><BR><I>This is Italic text</I>
<OL> <LI>First item </LI> <LI>Second item </LI></OL>
<UL> <LI>Point 1</LI> <LI>Point 2</LI></UL>
<TABLE Border="3" Cellpadding="15"><TH Align="center" Colspan="2"> Table </TH> <TR> <TD><A HREF="www.geocities.com">www.geocities.com</A></TD> <TD>Personal Page</TD> </TR> <TR> <TD><A HREF="www.tripod.com">www.tripod.com</A></TD> <TD Align="center">Personal Page</TD> </TR> <TR> <TD><A HREF="www.angelfire.com">www.angelfire.com</A></TD> <TD>Business or Personal Page</TD> </TR></TABLE>
</BODY></HTML>
Bus119A
Images, Links and Frames
Presented By Greg Windt
<HTML><HEAD>
<TITLE>Links & Images</TITLE></HEAD>
<BODY Text="#000000" Background="satin1.jpg" " Link="#0000FF" Vlink="#800080" Alink="#FF0000"><P><CENTER><A HREF="mailto:lode@1stfamily.com"><IMG Src="mailbox.gif" Border="0" Align="middle" Alt="email"> Email Webworks</A></P>
<HR Width="100%">
<P><A HREF="http://www.angelfire.com/ms/webworks"><IMG Src=lb_di.gif Border="0" Align="middle" Alt="home page">WebWorks</A><P><A HREF=“summary.html”><IMG Src=lb_di.gif Border=“0” Align=“middle” Alt=“summary”> Summary</A></CENTER></P>
</BODY></HTML>
<HTML><HEAD>
<TITLE>Frame</TITLE></HEAD>
<FONT Size=3 Face="Helvetica,Arial"> <FRAMESET Cols=“30%,*" Border=0 Frameborder=0 > <NOFRAMES>If you are viewing this, your browser does not support frame documents.Don't worry! We've thought ahead and built our site to be navigational with non-frame browsers.Here's the link to our <A HREF=noframes.html">Home Page</A></NOFRAMES> <FRAMES Src="greg.html" Name="nav" Scrolling=“auto”> <FRAMES Src="diana.html" Name="main" Scrolling=“auto”> </FRAMESET>
</HTML>
Bus119A
Presented By Greg Windt
Angelfire URL
http://www.angelfire.com/ms/webworks/index.html
Angelfire’s Images
<BODY Background = “/bg2/CLOUD.JPG”><IMG Src = “/images/animate/handbox.gif”>
Your Images
<BODY Background = “images/space01.gif”><IMG Src = “images/WEBWORKSLOGO.GIF”>
Powerpoint Slides
<A HREF="images/119aPresentation.ppt">Slides</a>