280 likes | 397 Views
Bus119A. Web Page Design. Presented By. John Wang, Diana Chou and Greg Windt. 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
E N D
Bus119A Web Page Design Presented By John Wang, Diana Chou and Greg Windt
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 make things teeny</SMALL> Use subscripts and superscripts to create mathematical expressions 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>