Creating Web Pages
Download
Report
Transcript Creating Web Pages
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, . . .