Website Development & Management

Getting to Know HTML Better

CIT 3353 -- Fall 2006www.clt.astate.edu/jseydel/mis3353

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 multi-

application web development environment

Homework and Grading So Far

Reading: Duckett Chapters 1-4Exercises (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 siteQuizzes: Q1 and Q2Other: A1 (email and questionnaire)

Some Things to NoteSuSE1 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 neededMake changes locally and save againUpload again, refresh your browser, and view the modified pageRepeat 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 &nbsp;Note these tags and their attributes in the source code for the pages we’ve done alreadyAny questions (note chapter coverage)?

Making Things Simpler: Server-Side 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 between <style> and </style> inclusive Insert: <? include("styles1.shtml"); ?> Remove all between <h1> and </h1> inclusive Insert: <? include("header1.shtml"); ?> Remove all between <hr /> and last </p> inclusive Insert: <? 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 WebCapturing images Standard images Background images

Saving web pages locallyOther . . . ?

Miscellaneous Items

Return quizzesWhat 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 SmartFTPEnables 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> <body>

<title> <style> <h1> <h2> <p>

<img />

. . . <ul>

<li>

. . .

<hr /> . . .

<br />

Browser/Server Interaction