Website Development & Management Getting to Know HTML Better CIT Fall 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-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 siteSuzy Student site Quizzes: Q1 and Q2 Other: A1 ( 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 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: Objects:   or Lists:, Tables:,, Text blocks:, Display:, or, or, Forms:,,, Miscellaneous:, 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: 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 and after footer1.shtml: remove all before and after last styles1.shtml: remove all before and after index.php (first remove XML directive, for now)  Remove all between and inclusive  Insert:  Remove all between and inclusive  Insert:  Remove all between and last inclusive  Insert:

Why Server-Side Includes? Intro to server-side scripting (PHP)server-side scripting 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:  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

Browser/Server Interaction