CS 195 Web Development I

Report as inappropriate Your report has been received

Shared by: IO87wH

Tags

Stats

views:: 1
posted:: 1/31/2013
language:: English
pages:: 19

Public Domain

Document Sample

							       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.
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 …
What’s on a web page?
 Paragraphs of text       Images / Graphics
 Formatted text           Image Maps
 Headings                 Tables
 Lists
                           Frames
 Rules (horz. lines)
                           Forms
 Links (to pages, mail
  addresses, files)        Sound Clips

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

 Background (color           Video Clips
  or pattern)                 Java Applets

        Items in yellow will be covered in this class.
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
Terminology
 Web Server
 Web Browser
 HTTP
 HTML
 URL
  •   http://server/folder-path/filename.htm
  •   file:///folder-path/filename.htm
  •   mailto:box@postoffice
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
Before you begin……...
        Information
 Collect
 Determine the Site Organization
Before you begin……...
        Information
 Collect
 Determine the Site Organization
 Determine the File Organization
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?
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
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
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>
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>
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>
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>
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>
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>