Website Development & Management Creating Web Pages CIT Fall Instructor: John Seydel, Ph.D.
Student Objectives Upon completion of this class meeting, you should be able to: Identify the parts of a URL Contrast local and remote display of web pages Create web pages that include Paragraphs and line breaks Bullet lists Multiple levels of headings Images Links (internal, external, and ) Background images Style rules Compare and contrast XHTML and HTML
First, Some Questions and Comments Any troubles? Finding things at the website Completing the questionnaire Finding the textbooks Other... ? Some suggestions Read the text and work along with it Examples Experiment with features Learning programming: modify existing code Start ASAP on exercises; don’t wait until day of class Now some questions for you: Quiz #1Quiz #1
Now: Anatomy of a URL Example: Protocol Assumed is http Others: mailto, ftp, file (i.e., local resource),... Location of the computer (corresponds to IP) Domain Domain name Machine Port (not part of IP); 80 is standard for http Location on the computer Folder Subfolders File & extension (.htm,.asp,.html,.php,... ) Bookmark (anchor)
Review: Browser/Server Interaction
The “Local” (file://) Protocol Sends page directly to the browser No server processing involved Works only for static pages Okay to use initially but should be avoided if possible Creates trouble A bad habit not to develop Until Tuesday, however, we have no choice Demonstration Note: this is not the same as local loopback
XHTML By Example Create the basic markup involved in any web page Then create some content For the title, e.g.: “Home Page for Suzy Student” For the body, e.g.: “Suzy Student” View periodically in browser Easiest way is to double-click icon in My Documents Better to upload to a server
Review of Markup Syntax There’s a logic to markuplogic Define document structure: Overall container Main portions: and Describe document content: Elements are either: Standard elements (e.g., paragraph) Content More content... Empty elements (e.g., image) Examples: see Suzy Student’s pages
Note the Document Hierarchy
More about Document Hierarchy Similar to an object model Generally inheritance applies Helps when specifying style rules Provides guidelines for overlapping tags and elements Speaking of guidelines...
Some Guidelines for Source Code Use lowercase for tags & attributes Quote attribute values Use relative references for resources on same server Always use closing tags Nest elements properly; close in reverse order of opening Use indentation consistently and to make code readable No more than 80 characters per line of code; break long tags into multiple lines, typically one per attribute Avoid deprecated elements, e.g.,,, Use no spaces in file names Treat all URLs and other resource names as if case- sensitive
HTML in Suzy Student’s Page Main element contains which contains and others... which is where the content is Within the element which shows what will appear in the browser title bar which defines appearance variations from defaults Within the element Headings and Image Hyperlink List which contains Others:,, Don’t forget the closing tags
So, What’s This About XHTML? Recall that XHTML is just HTML formatted to meet XML specifications Follows rules given above for markup Case Quotes Deprecated elements Nesting elements Separates stylistic aspects from markup Includes DTD declaration and namespace <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" " >
Summary of Today’s Objectives Identify the parts of a URL Contrast local and remote display of web pages Create web pages that include Paragraphs and line breaks Bullet lists Multiple levels of headings Images Links (internal, external, and ) Background images Style rules Compare and contrast XHTML and HTML
Some Tricks You Probably Know Viewing source code of pages on the Web Capturing images Other... ?
Assignment for Next Time Duckett text: Read Chapters 2-4 Work Chapter 1 exercises Personal web pages: Create your own version of Suzy Student’s page Add an Exercises.html page Use exact same format and markup as in Suzy’s pages
Appendix
Input / Processing / Output Input (data)Output HTML file (text) Browser &/or Server (Program code: VB, Java,... ) Web page(s) Process/Program Rich: includes programming, markup, pointers to files,...