1. CS 121 Concepts of Computing II 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:  Ending Tag:  Parameters specify options parameter=“value”  Example: Hi! More later …

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

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

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 Example: Dreamweaver  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 Page Title Have a nice day.

15. HTML Basics … a minimal page Page Title Have a nice day.

16. HTML Basics … a minimal page Page Title Have a nice day.

17. HTML Basics … a minimal page Page Title Have a nice day.

18. HTML Basics … a minimal page Page Title Have a nice day.

19. HTML Basics … a minimal page Page Title Have a nice day.