CS 195 Web Development I

Download Report

Transcript CS 195 Web Development I 

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
 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?
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

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……...
 Collect
Information
 Determine the Site Organization
Before you begin……...
 Collect
Information
 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>