Transcript Document
CIT 3353 -- Fall 2006
www.clt.astate.edu/jseydel/mis3353
Website Development &
Management
Getting to Know HTML Better
Instructor: John Seydel, Ph.D.
Student Objectives
Upon completion of this class meeting,
you should be able to:
Explain the major elements and attributes
used in XHTML and HTML
Create server-side include files for content
used in multiple pages
Feel comfortable working in a multiapplication web development environment
Homework and Grading So Far
Reading: Duckett Chapters 1-4
Exercises (available on your SuSE1 website):
Textbook
Chapter 1 – exercises 1 and 2
Chapter 3 – exercise 1
Chapter 4 – exercise 1
Other
index.html
exercises.html
File system structure as prescribed
Refer to Suzy Student site
Quizzes: Q1 and Q2
Other: A1 (email and questionnaire)
Some Things to Note
SuSE1
Serves essentially as the production server
Directories
public_html
This is your website
Your pages are viewable by anyone anywhere
Other directories
Unavailable through HTTP
Shouldn’t be needed for this class, however
Local directories: serves essentially as your
development server
Review of the Editing Process
Create (or edit) a page locally
Use NotePad or other editor
Save it using an appropriate filename and extension
Upload the page to SuSE1 (into correct directory)
Use your web browser to view the page on SuSE1
(refresh as appropriate)
Identify any changes needed
Make changes locally and save again
Upload again, refresh your browser, and view the
modified page
Repeat as needed
More On the <img /> Element
Let’s link the ASU logo to the AState
homepage . . .
Remember
It’s an empty element
Required attributes
src
alt
width
height
Will work with only the src attribute, but you
should use all the above
However, don’t use width and height to resize the
image display
Instead edit the image file to the size it needs to be
Consider using thumbnail images linked to full-sized files
Summary of Important HTML
Body Elements
What you’ll need to know (red indicates what you
should know already)
Hyperlinks: <a>
Objects:
<img />
<object> or <embed>
Lists: <ul>, <li>
Tables: <table>, <tr>, <td>
Text blocks: <p>, <div>
Display: <font>, <i> or <em>, <b> or <strong>, <center>
Forms: <form>, <input>, <select>, <option />
Miscellaneous: <br />, <hr />
Also, HTML entities, such as
Note these tags and their attributes in the source
code for the pages we’ve done already
Any questions (note chapter coverage)?
Making Things Simpler: ServerSide Includes
Locally, make 4 copies of index.html
index.php
header1.shtml
header2.shtml
styles1.shtml
Edit these files, save them, and post them to SuSE1
header1.shtml: remove all before <h1> and after </h1>
footer1.shtml: remove all before <hr /> and after last </p>
styles1.shtml: remove all before <style> and after </style>
index.php (first remove XML directive, for now)
Remove all
Insert: <?
Remove all
Insert: <?
Remove all
Insert: <?
between <style> and </style> inclusive
include("styles1.shtml"); ?>
between <h1> and </h1> inclusive
include("header1.shtml"); ?>
between <hr /> and last </p> inclusive
include("footer1.shtml"); ?>
Why Server-Side Includes?
Intro to server-side scripting (PHP)
Demonstrates efficient coding for repeated
elements
Nearly all your pages will be using the same
header, footer, and style rules
Therefore change once on the include files, and all
pages reflect the change
Consider CIT website (vs CoB)
Example: add a link home to each page
Note:
Won’t work with local (file:///) protocol or where
PHP is not installed on the server
Need to arrange for proper hosting
Summary of Today’s Objectives
Explain the major elements and attributes
used in XHTML and HTML
Create server-side include files for content
used in multiple pages
Feel comfortable working in a multi-application
web development environment
Some Tricks You Probably Know
Viewing source code of pages on the
Web
Capturing images
Standard images
Background images
Saving web pages locally
Other . . . ?
Miscellaneous Items
Return quizzes
What happens if no index.html exists?
Questions?
FTP
HTML
Other
Quiz Thursday: closed book exercise
using all markup covered so far (i.e., a
“preliminary exam”)
Homework Summary for
Thursday
Create PHP versions of
exercises.html
menu.html
xch01_1.html
xch01_2.html
xch03_1.html
xch04_1.html
Use same header, footer, and style includes (located
in webroot directory) for all files
styles1.shtml
header1.shtml
header2.shtml
Some problems will result, and we’ll discuss these on
Thursday
Appendix
Using SmartFTP
Enables transferring files between computers
Upload/download
Client to server / server to client
Assumes
Local files stored in My Documents
Server files stored in public_html
Process
Start by navigating through Start | Programs | SmartFTP | . . .
Open connection to server (enter values into textboxes)
Host: www.suse1.astate.edu
Login (lower case) : your last name plus hyphen plus first initial
Password (mixed case): first 4 characters of your first name plus $ last 3
digits of your student number
Port: 21
Open “Local Browser” and navigate to My Documents
Navigate server to public_html
Tile windows horizontally
Transfer files: select file or folder and then click on arrow button
Note the Document Hierarchy
<html>
<head>
<title>
<style>
<body>
<h1>
<h2>
<p>
...
<ul>
<hr />
<img />
<li>
<br />
...
...
Browser/Server Interaction