Presentation on theme: "George Mason University"— Presentation transcript:
1 George Mason University IT 207: Web ArchitecturesGeorge Mason University
2 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 StyleDescriptiontextHyperlink to outside sourcesCode excerptsCode coloring is based on using Notepad++ for Windows. Familiarize yourself with the color scheme of whatever text editor you choose.
4 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
5 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 clientHence, 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
6 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:StrictTransitionalFramesetThe <head> section contains content not displayed in the browser’s main bodyAll visible content is placed in the <body> sectionThe DOCTYPE specifies what tags are allowedHTML is used to “mark-up” or format contentCascading Style Sheets are meant to control styling
7 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?
8 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 tagAttributes are characteristics to format an element
9 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> </td> </table>Tables are created row by row, they cannot be made column by columnThe colspan attribute stretches a cell across multiple columns.What is the attribute to stretch a cell across multiple rows?
10 Validating XHTML Documents Unlike compiled languages such as Java, HTML will still display with errors.Validating HTML code checks for errorsUsing the Direct Input method, copy and paste your XHTML into the form and click “Check” to validate
11 Understanding the Validator ErrorExplanationno document type declarationThere is an error with the DOCTYPE in the beginning of the HTML documentend tag omittedFor container tags, the closing tag is missing. For empty tags, the forward slash is missingdocument type does not allow element hereThere 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 specifiedImage tags require the alt attribute. The alt attribute is a written description of the image used by screen readers for visual impairmentthere is no attributeSome attributes have been deprecated and are no longer valid. Style related attributes such as width and height are commonly deprecated.
12 Accessing Zeus/Helios Server STEPDescription1Go to download both OpenVPN and the VPN configuration zip file. Install OpenVPN and complete the directions for configuration on the website.2Go to https://itservices.gmu.edu/downloads/, download and install Secure Shell (Windows) or Cyberduck (OSX) depending on your operating system.3Open your file transfer client and enter the following information:Host: zeus.ite.gmu.eduUser: GMU user namePassword: GMU password4Double-click the folder “helios_html” shown on the right-hand side column.5Create the directory “IT207”. Double-click the IT207 folder to enter it.6Create the directories “lab1” through “lab10”, “examples”, “project”, “exam”
13 Publishing Your XHTML Page Log in using SSHzeus.ite.gmu.edu | Port 22 | GMU username | GMU passwordDrag/Drop file(s) into directoryKeep track of the directory usedEx: helios_html > IT207 > examplesSet permissions appropriatelyRequest file from web server on browserEx:From the root directory, include directories used and the file name
14 The Coding ProcessDo 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.CodeUploadTestDebug/Revise
15 Recap The web is built in a client/server architecture HTML is client-sidePHP is server-sideDatabases are server-sideWeb servers are organized by directoriesXHTML is a mark-up language used to describe contentValidating XHTML is the process of checking the code against the standards outlined in the document type definition