1 / 28

Introduction to HTML Basics and Web Design Elements in Bus 119A Course

This page provides foundational knowledge for students enrolled in Bus 119A, covering essential HTML elements, web design, text formatting, and the utilization of graphics, links, and frames. Key topics include the structure of an HTML document, the use of tags for headings, paragraphs, and lists, as well as dynamic elements like audio and video. Students will learn important techniques for creating and organizing web content, ensuring a solid understanding of web design that prepares them for developing their own sites.

ziven
Télécharger la présentation

Introduction to HTML Basics and Web Design Elements in Bus 119A Course

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Bus119A Web Page Design Presented By John Wang, Diana Chou and Greg Windt

  2. How many people have HTML experience ? • How many people have their own Web Site ? • Frames • Graphics • Audio/Video

  3. Bus119A HTML Basic Elements Presented By John Wang

  4. 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>

  5. <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">

  6. <!-- 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>

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

  8. Bus119A Text Formatting and Tables Presented By Diana Chou

  9. <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>

  10. <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>

  11. Bus119A Images, Links and Frames Presented By Greg Windt

  12. <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>

  13. <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>

  14. Bus119A Presented By Greg Windt

  15. 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>

More Related