jrn 436 // spring 2013
DESCRIPTION
JRN 436 // Spring 2013. The Client-Server Model Browsers Language Types The W3C and Html History Html Page Structure. Lesson 01 // Course Introduction. The Client-Server Model. Used for making spread sheets + basic word processing Information stored in HD of computer - PowerPoint PPT PresentationTRANSCRIPT
JRN 436 // Spring 2013
Lesson 01 // Course Introduction
1. The Client-Server Model2. Browsers3. Language Types4. The W3C and Html History5. Html Page Structure
1. The Client-Server Model
• Used for making spread sheets + basic word processing• Information stored in HD of computer• No connectivity to the outside world
Then the World Wide Web was launched in 1991.
• www collection of computers geographically spread-out, connected to a server (s) via the internet.• www allowed users in different locations to view information on websites via web browsers.
CLIENTWhoever is asking• Laptop• Ipad• Blackberry• Iphone• Etc
SERVERWhoever is responding• Some computer or server somewhere
The Client-Server Model
CLIENT sends request for info
SERVER responds to that request
• web 2.0 site allows users to interact and collaborate with each other in social media dialogue as creators of user-generated content.
Web-based email Social-networking sites
Blogs, wikis, video sharing sites etc
2. Browsers
Firefox
Opera
Chrome
Internet Explorer
Safari
Note We can refer to a website like StatCounter to see the popularity of these different browsers, and how each is changing over time. http://gs.statcounter.com/#browser-US-monthly-201007-201107
2. Language Types
Client Side Languages(Display data)
• Html• CSS• JavaScript• jQuery• ActionScript• Flex• Flash
CSL’s are directly involved with final visual/display on the screen
Server Side Languages(Produce data)
• PHP• Ruby• Java• Perl• Etc
SSL’s typically interact with a database on the server
SERVER
CSL• Html• CSS• JavaScript• jQuery• ActionScript• Flex• Flash
SSL• PHP• Ruby• Java• Perl• Etc
Database• MySQL• PostgreSQL
CLIENT
StorageData AccessDisplay
Client Side Languages(Display data)
• Html• CSS• JavaScript• jQuery• ActionScript• Flex• Flash
CSL’s are directly involved with final visual/display on the screen
Server Side Languages(Produce data)
• PHP• Ruby• Java• Perl• Etc
SSL’s typically interact with a database on the server
STATIC: Content (Html) & presentation (CSS) created with these markup languages don’t animate.
DYNAMIC: Provide interactivity, animation, create calculators, validate forms… in real time (without going back to the server).
Let’s give an example:
We’re on an airline reservation website and we inquire about available dates and prices from Detroit to San Diego for January 2012.
CLIENT sends request for info
SERVER responds to that request
The server side languages:•do the heavy-duty functionality & computing•they provide the data of availabilities
The client side languages:•display the data given by the ssls in rows, columns, blues, reds etc.•hence csls do the easy part of the job, that’s why we refer to the client as the Thin Client.Response Displayed
4. The W3C and Html History
World Wide Web Consortiumhttp://www.w3.org/
Html Hypertext Markup Language was announced in 1991 and updated over the years. Different versions were Html 2.0, 3.2, 4.0. Html 4.01 was the latest version that appeared in 1999.
Html5 Is the fifth revision of Html and is still under development.
Html Html 2.0 Html 3.2 Html 4.0 Html 4.01
Xml Xhtml 1.0
Html 5
Xhtml 1.1
http://validator.w3.org/
5. Html Page Structure
<!DOCTYPE HTML><html>
<head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html;
charset=utf-8”><link href="style1.css" rel="stylesheet" type="text/css”>
</head><body></body>
</html>
Basic Requirements of a Web Page
A doctype
An <html> tag
A <head> tag
A <title> tag
A <body> tag
These make up the basic skeleton of a web page.
Below is how these requirements look like when they’re combined in a basic web page.
Doctype (short for Document Type Declaration) is absolutely the first item on a web page.
<!DOCTYPE HTML>
Its job is to specify which version of Html the browser should expect to see by associating the web page with a Document Type Definition (DTD). In turn, the browser uses this information to decide how it should render items on the screen.<!DOCTYPE HTML><html>
<head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html;
charset=utf-8”><link href="style1.css" rel="stylesheet" type="text/css”>
</head><body></body>
</html>
The Html Element An Html document is built using elements, where elements are like bricks holding the web page together.
<html></html>
The Html element is the outermost container of a web page. There are 2 major sections in the Html element: the head and the body.
<!DOCTYPE HTML><html>
<head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html;
charset=utf-8”><link href="style1.css" rel="stylesheet" type="text/css”>
</head><body></body>
</html>
The Head Element Contains information about the page, but no information that will be displayed on the page itself.
<head><title>Untitled Document</title><meta http-equiv="Content-Type”
content=“text/html; charset=utf-8”></head>
The Title Element Will tell the browser what to display in its title bar.The Meta Element Provides additional information about the page such as the content type and character set.<!DOCTYPE HTML><html>
<head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html;
charset=utf-8”><link href="style1.css" rel="stylesheet" type="text/css”>
</head><body></body>
</html>
The Body Element Contains almost everything that you see on the screen, such as headings, paragraphs, images, navigations, footers etc.
<body></body>
<!DOCTYPE HTML><html>
<head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html;
charset=utf-8”><link href="style1.css" rel="stylesheet" type="text/css”>
</head><body></body>
</html>