George Mason University IT 207: Web Architectures George Mason University
Legend Icon Description Text Style Description text Important Information. Covers key concepts and basic comprehension. Discussion Topic. Think about the proposed question and discuss it with others. Extended Discovery. Modify the existing code to practice programming and consider other real-world implementations. Be Careful. Advice to avoid common pitfalls. Text Style Description text Hyperlink to outside sources Code excerpts Code coloring is based on using Notepad++ for Windows. Familiarize yourself with the color scheme of whatever text editor you choose.
Overview Web Architectures XHTML Review Web Publishing
Client/Server Architecture How do IP addresses and the Domain Name System (DNS) fit into web architectures? Accessing a webpage is the process of requesting file(s) from a server and the server sending the appropriate file(s) Explain where XHTML, CSS, PHP, MySQL are handled
Dynamic Web Page Architecture HTML is interpreted by the client (the web browser). PHP is interpreted on the server into HTML, which is sent to the client Hence, HTML is client-side and PHP is server-side. Figure 1-3: How dynamic web pages are processed, Murach's PHP and MySQL. Databases are a service on web servers. The use of databases is a server-side functionality
XHTML Review 3 DOCTYPES: Strict Transitional Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Webpage Title</title> </head> <body> <h1>Hello World</h1> </body> </html> 3 DOCTYPES: Strict Transitional Frameset The <head> section contains content not displayed in the browser’s main body All visible content is placed in the <body> section The DOCTYPE specifies what tags are allowed HTML is used to “mark-up” or format content Cascading Style Sheets are meant to control styling
XHTML DOCTYPE Strict Transitional Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Strict the preferred DOCTYPE for the course. Why is strict preferred over transitional?
XHTML Review Container tags have opening and closing tags <hr /> is an empty tag. It has no closing tag. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Webpage Title</title> </head> <body> <h1>Hello World</h1> <hr /> <p>Welcome to my webpage. Click <a href="http://www.gmu.edu">here</a> to visit my school.</p> </body> </html> HTML tags are made up of an element and attribute(s). The element is the name of the tag Attributes are characteristics to format an element
XHTML Review <table border="1" cellpadding="5"> <tr> <th colspan="3">Information</th> </tr> <th>Name</th> <th>Age</th> <th>Contact Method</th> <td>John Doe</td> <td>25</td> <td>Email</td> </table> Tables are created row by row, they cannot be made column by column The colspan attribute stretches a cell across multiple columns. What is the attribute to stretch a cell across multiple rows?
Validating XHTML Documents Unlike compiled languages such as Java, HTML will still display with errors. Validating HTML code checks for errors http://validator.w3.org/#validate_by_input Using the Direct Input method, copy and paste your XHTML into the form and click “Check” to validate
Understanding the Validator Error Explanation no document type declaration There is an error with the DOCTYPE in the beginning of the HTML document end tag omitted For container tags, the closing tag is missing. For empty tags, the forward slash is missing document type does not allow element here There are two types of elements: block level and inline level. Inline elements such as <a> or <img> must be inside a block level element such as <p> or <h1> required attribute “alt” not specified Image tags require the alt attribute. The alt attribute is a written description of the image used by screen readers for visual impairment there is no attribute Some attributes have been deprecated and are no longer valid. Style related attributes such as width and height are commonly deprecated.
Accessing Zeus/Helios Server STEP Description 1 Go to http://labs.ite.gmu.edu/index.php/Services/VPN, download both OpenVPN and the VPN configuration zip file. Install OpenVPN and complete the directions for configuration on the website. 2 Go to https://itservices.gmu.edu/downloads/, download and install Secure Shell (Windows) or Cyberduck (OSX) depending on your operating system. 3 Open your file transfer client and enter the following information: Host: zeus.ite.gmu.edu User: GMU user name Password: GMU email password 4 Double-click the folder “helios_html” shown on the right-hand side column. 5 Create the directory “IT207”. Double-click the IT207 folder to enter it. 6 Create the directories “lab1” through “lab10”, “examples”, “project”, “exam”
Publishing Your XHTML Page Log in using SSH zeus.ite.gmu.edu | Port 22 | GMU username | GMU email password Drag/Drop file(s) into directory Keep track of the directory used Ex: helios_html > IT207 > examples Set permissions appropriately Request file from web server on browser http://helios.ite.gmu.edu/~username/ Ex: http://helios.ite.gmu.edu/~jdoe/IT207/examples/index.html From the root directory, include directories used and the file name
The Coding Process Do not write large sections of code without checking. Work in small sections and check frequently. The smaller the section, the sooner mistakes are identified and the easier it is to find the location of the mistake. Code Upload Test Debug/Revise
Recap The web is built in a client/server architecture HTML is client-side PHP is server-side Databases are server-side Web servers are organized by directories XHTML is a mark-up language used to describe content Validating XHTML is the process of checking the code against the standards outlined in the document type definition