Website Development & Management Going Live with Web Pages (b) CIT Fall Instructor: John Seydel, Ph.D.
Student Objectives Upon completion of this class meeting, you should be able to: Access your website through HTTP and through FTP Compare and contrast XHTML and HTML Understand the basic concepts behind style rules Explain the major elements and attributes used in XHTML and HTML
Miscellaneous Items Let’s start with a short quizquiz Should take 5-10 minutes Don’t forget to put your name in the upper right portion Use a pencil (and eraser) Return quizzes / explain grading FTP issues: firewalls, other... ? File system and naming instructions Use directory structure provided Locally On SuSE1 File names for exercises; note the format: xch04_1.html pch07_3.html Quiz next Thursday: closed book exercise using all markup covered so far (i.e., a “preliminary exam”)
Overview 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
Let’s Experiment Applications needed: SmartFTP (connect to SuSE1) SmartFTP Internet Explorer (navigate to your website) NotePad Login to your SuSE1 account Note the predefined file system structure of your website Copy either The entire public_html directory to your local machine The entire contents of public_html to your local webroot directory (e.g., htdocs) Use NotePad to open index.html In case you foul up, replacement files are available on SuSE1 UserID = cit3353 Password = FunStuff06 Edit index.html as instructed...
Convert from HTML to X HTML Recall that XHTML is just HTML formatted to meet XML specifications Follows rules for markup Case Quotes Deprecated elements Nesting elements Separates stylistic aspects from markup Includes DTD declaration & namespace (add these now):namespace <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" " >
Now, Play with the Style Rules First, comment out that section Precede the tag with <!-- Follow the tag with --> Save Upload the file and refresh your browser Now, uncomment the style section Change the font-family to Comic Sans MS Save, upload, and refresh
Style Rules Customize HTML tag definitions Create custom look/theme More control over how pages look Provide information on formatting Can be Embedded: within... tags External: separate file; use tag Inline: as attributes within HTML tags Cascading Style Sheets (CSS): concept incorporates cascading levels of precedence
Working with Style Rules Typically there are two parts to a style rule Selector (e.g., body, h1, table, a:link) Declaration (e.g., align:center, font-size: 28px) Example: body {background-color:teal} Typical format selector { attribute:value; attribute:value } Note the examples in Suzy Student’s pages We’ll do more with style rules in a few weeks
Let’s Look at References to Other Files Where? Hyperlinks Images (inline or background) Objects (e.g., Flash movies) And other places also, but beyond our scope Absolute referencing: resources on another server Relative referencing Preferred Need to specify relative to calling document In same folder (./filename or just filename) In higher level folder (../filename or../../filename or... ) In lower level folder (./foldername/filename or just foldername/filename) In sibling folder (../foldername/filename)
About the 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 Let’s link the ASU logo to the AState homepage...
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 you’ve done already
Summary of Today’s Objectives Access your website through HTTP and through FTP Compare and contrast XHTML and HTML Understand the basic concepts behind style rules Explain the major elements and attributes used in XHTML and HTML
Homework Summary for Tuesday Work exercise 1 from Chapter 3 Work exercise 1 from Chapter 4 Post work to SuSE1 Should be in /exercises directory Need to add links on exercises.html Start preparing for quiz exercise
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
Browser/Server Interaction