Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Creating Web Pages
Document related concepts
Transcript
CIT 3353 -- Fall 2006 www.clt.astate.edu/jseydel/mis3353 Website Development & Management Creating Web Pages 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 email) 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 #1 Now: Anatomy of a URL Example: http://www.clt.astate.edu:80/jseydel/mis3353/syll3353.htm#text 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 http://localhost http://127.0.0.1 XHTML By Example Create the basic markup involved in any web page <html> </html> <head> <title> </title> </head> <body> </body> 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 markup Define document structure: Overall container<html> Main portions: <head> and <body> Describe document content: <title> Elements are either: Standard elements (e.g., paragraph) <tag attr1=“...” attr2=“...” . . .> Content More content ... </tag> Empty elements (e.g., image) <tag attr1=“...” attr2=“...” . . . /> Examples: see Suzy Student’s pages Note the Document Hierarchy <html> <head> <title> <style> <body> <h1> <h2> <p> ... <ul> <hr /> <img /> <li> <br /> ... ... 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., <font>, <i>, <b> Use no spaces in file names Treat all URLs and other resource names as if casesensitive HTML in Suzy Student’s Page Main element <html> contains <head> which contains <title> and others . . . <body> which is where the content is Within the <head> element <title> which shows what will appear in the browser title bar <style> which defines appearance variations from defaults Within the <body> element Headings <h1> and <h2> Image <img /> Hyperlink <a> List <ul> which contains <li> Others: <br />, <p>, <hr /> 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 <?xml version="1.0" ?> <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml"> 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 email) 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 (Program code: VB, Java, . . . ) Input (data) Process/Program Output HTML file (text) Browser &/or Server Web page(s) Rich: includes programming, markup, pointers to files, . . .
