1 / 19

CS 120 Concepts of Computing

CS 120 Concepts of Computing. Introduction to Web Page/Site Development. What is a Web Page?. A document… w/ text, graphics, links, etc. described in a text file... using HTML tags to specify the layout of the elements on the page that can be displayed by a web browser.

akiva
Download Presentation

CS 120 Concepts of Computing

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. CS 120Concepts of Computing Introduction to Web Page/Site Development

  2. What is a Web Page? A document… • w/ text, graphics, links, etc. described in a text file... • using HTML tags to specify the layout of the elements on the page that can be displayed by a web browser.

  3. What is an HTML Tag? • Formatting instructions for page elements. • Beginning Tag: <name parameters> • Ending Tag: </name> • Parameters specify options parameter=“value” • Example: <font color=“#ff0000”>Hi!</font> More later …

  4. Paragraphs of text Formatted text Headings Lists Rules (horz. lines) Links (to pages, mail addresses, files) Background (color or pattern) Images / Graphics Image Maps Tables Frames Forms Sound Clips Video Clips Java Applets What’s on a web page?

  5. Paragraphs of text Formatted text Headings Lists Rules (horz. lines) Links (to pages, mail addresses, files) Background (color or pattern) Images / Graphics Image Maps Tables Frames Forms Sound Clips Video Clips Java Applets What’s on a web page? Items in yellow will be covered in this class.

  6. What is a web site? • A collection of related web pages. • 1st page = “Home Page” • note: This is NOT the browser’s home page! • index.htm or index.html

  7. Terminology • Web Server • Web Browser • HTTP • HTML • URL • http://server/folder-path/filename.htm • file:///folder-path/filename.htm • mailto:box@postoffice

  8. Tools for Creating Web Pages • Text Editor • Example: Notepad • Word Processor • HTML Editor • Example: EditPlus2 • Web Page Authoring Tool • Examples: Dreamweaver & Nvu • Other Programs that Generate Web Pages

  9. Before you begin……... • Collect Information • Determine the Site Organization

  10. Before you begin……... • Collect Information • Determine the Site Organization • Determine the File Organization

  11. Before you begin……... • Collect Information • Determine the Site Organization • Determine the File Organization • Collect Supporting Graphics • not part of the web page file • JPG, GIF, or PNG • file size? • location?

  12. File & Folder Naming Rules • Dependent on the server • No spaces • Use correct extensions • .htm or .html for web pages • .jpg or .gif for graphics • Special Filenames • default.htm– server default (don’t use) • index.htm– home page

  13. Web Page Layout Considerations • HTML is not WP or DTP • Can’t control page size • Limited font control (typeface & size) • Limited control of position of graphics • Why these limitations? • HTML is platform independent

  14. HTML Basics … a minimal page <HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <BODY BGCOLOR=“#FFFFFF”> <P>Have a <B>nice</B> day.</P> </BODY> </HTML>

  15. HTML Basics … a minimal page <HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <BODY BGCOLOR=“#FFFFFF”> <P>Have a <B>nice</B> day.</P> </BODY> </HTML>

  16. HTML Basics … a minimal page <HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <BODY BGCOLOR=“#FFFFFF”> <P>Have a <B>nice</B> day.</P> </BODY> </HTML>

  17. HTML Basics … a minimal page <HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <BODY BGCOLOR=“#FFFFFF”> <P>Have a <B>nice</B> day.</P> </BODY> </HTML>

  18. HTML Basics … a minimal page <HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <BODY BGCOLOR=“#FFFFFF”> <P>Have a <B>nice</B> day.</P> </BODY> </HTML>

  19. HTML Basics … a minimal page <HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <BODY BGCOLOR=“#FFFFFF”> <P>Have a <B>nice</B> day.</P> </BODY> </HTML>

More Related