Unit 1 – Web Concepts Instructor: Brent Presley. ASSIGNMENT Read Chapter 1 Complete lab 1 –...

Unit 1 – Web Concepts

Instructor: Brent Presley

ASSIGNMENT

• Read Chapter 1• Complete lab 1 – Installing Portable Apps

Murach’s JavaScript, C1

© 2009, Mike Murach & Associates, Inc.Slide 4

The architecture of a web application

Web Server

E-mail Server

Database ServerThe Internet

`

Client

`

Client



How a web server processes a static web page

`

Web browser Web server

HTTP request

HTTP response

XHTML file



A simple HTTP request GET / HTTP/1.1 Host: www.example.com

A simple HTTP response HTTP/1.1 200 OK Content-Type: text/html Content-Length: 136 Server: Apache/2.2.3 <html> <head> <title>Example Web Page</title> </head> <body> <p>This is a sample web page</p> </body> </html>



How a web server processes a dynamic web page

`


HTTP request

HTTP response

Application server

Application script

Database server



Web browsers Internet Explorer

Firefox

Safari

Opera

Chrome

Web servers Apache

IIS



Server-side scripting languages ASP.NET

JSP

PHP

ColdFusion

Ruby

Perl

Python



How JavaScript fits into this architecture

`


HTTP request

HTTP response

Application server

Application script

Database server

JavaScript

HTML

• Web pages are defined using HTML(Hypertext Markup Language) and now, XHTML Extensible HTML

• XHTML was created in 2001 to rein in different HTML standards and to incorporate XML.

• XHTML has been incorporated into the newest version of HTML: HTML 5– We’ll be using HTML 5 in this class. XHTML has been deprecated.

• HTML vs XHTML– Many pages on the internet contain ‘bad’ HTML. The code will work fine in most

browsers even though it is not well formed.– XHTML requires it to be well-formed

HTML

• HTML defines what text is displayed on a page, how it is displayed and what images are displayed on a web page

• HTML is pure text (no Word-like formatting)– Can read these in any text editor because it is just text

• HTML can be typed by hand, through Web Development programs– Microsoft Expression Web– Dreamweaver

• How to view the source code on a page– right click- view source

WHY LEARN HTML?• Some web techniques can only be created

using HTML– Inserting JavaScript

• HTML developed by other programs frequently needs tweaking

• In Web Data Mgt, we’ll be writing programs to create HTML

STORING THE HTML

• Once the HTML has been perfected, it is saved or sent to a web server that stores it in a location that is accessible by the Internet.

• An Internet user uses a web browser to request pages from a web server and to display those pages.

• A web browser contains the ability to convert the HTML instructions & javascript back into a graphical, functioning web page.– Internet Explorer, Google Chrome and Mozilla Firefox are the some of the

most popular browsers.

WEB SITE VS. WEB PAGE

• A collection of related web pages forms a web.• Each web page is stored in its own file. These files

are often organized into a folder.• A web is also referred to as a web site.• The main page of a web (site) should have a

special name: index.html or default.html.– Web browsers recognize this as a starting page when

they access a web site

URL

• Each individual web page is assigned a URLUniversal Resource Locator

• The URL is the web page’s address on the Internet.

• All pages have unique URLs• Most URLs start with the letters WWW, but this is

no longer the requirement it used to be.• www.mstc.edu• The index.html is implied

http://www.mstc.edu/

URL COMPONENTS

WEB SITE ELEMENTS

• The starting page for a web site should be named index.html

• Web sites normally have an images folder – This folder contains all the images used by the web site. – By storing only one copy of each image, the web site

can save space, especially if one image is used many times.

WEB SITE ELEMENTS

• Many web sites also have a _private folder – This folder can store pages, files or images that you don’t

want the Internet user to have direct access to.– This folder might be used to store a database used by the

web site.• Web sites are normally organized into folders of web pages,

just like a hard disk is organized.– can also contain files. Word files, Excel files, PowerPoint files, etc

can all be displayed by web browsers.

• Folder structure on my website. What page pulls up?? Index.html

WEB SITE ELEMENTS• index.html• Images folder• _private folder• Other folders• Files

– Html and others• Amazon.com

– Html, css, javascript

WEB PAGE ELEMENTS

• Text (formatted, different sizes)• Images (usually stored in a separate folder)

– Web pages can display three different kinds of images:• jpg. (high quality photos, millions of colors)• .gif (transparent, animated, 256 colors)• .png (portable network graphics)

• Hyperlinks (links to other web pages/sites)• Tables (used to organize page information)• JavaScript (mini-programs that run within your web

page)



The code for a web page <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mike's Bait and Tackle Shop</title> </head> <body> <h1>Mike's Bait and Tackle Shop</h1> <p>Welcome to Mike's Bait and Tackle Shop. We have all the gear you'll need to make your next fishing trip a great success!</p> <h2>New Products</h2> <ul> <li>Ultima 3000 Two-handed fly rod</li> <li>Phil's Faux Shrimp Fly - Size 6</li> <li>Titanium Open Back Fly Reel - Black</li> </ul> <p>Contact us by phone at 559-555-6624 to place your order today.</p> </body> </html>

The code for a web page that’s styled with CSS <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mike's Bait and Tackle Shop</title> <style type='text/css'> body { background-color: #333366; color: #FFFFFF; } h1 { color: #FFCC33; border-bottom: 3px solid #FF3333; } ul { list-style-type: square; } </style> </head>

EXAMPLES OF CSS

• http://www.creativebloq.com/web-design/examples-css-912710

• CSS handles the cool formatting and shading

http://www.creativebloq.com/web-design/examples-css-912710





Common uses of JavaScript Validate form data before it is sent to the server for processing.

Respond to user actions such as mouse clicks and key presses.

Create dynamic menus.

Create slide shows.

Animate elements in a web page.

Create timers, clocks, and calendars.

Change the style sheet that a web page uses.

Sort the data that’s in a table.

Control the web browser window.

Detect web browser plug-ins.

Open new web browser windows.

Change images when the user rolls the mouse over an image.

Embedded JavaScript in an XHTML document  <p>Contact us by phone at 559-555-6624 to place your order today.</p> <p>© <script type="text/javascript"> var today = new Date(); document.writeln( today.getFullYear() ); </script> Mike's Bait and Tackle Shop</p> </body> </html>

JAVASCRIPT EXAMPLES

• http://www.creativebloq.com/web-design/examples-of-javascript-1233964

• Javascript is what handles the ‘cool’ elements of a website– Changing content, interesting effects

http://www.creativebloq.com/web-design/examples-of-javascript-1233964




DOCUMENT OBJECT MODEL

• The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents.[1] The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).

DOM TREE FOR INDEX.HTML



The DOM (Document Object Model) for the page

html

bodyhead

title ph1 p h2 ul

lili li

text text text text text

text text text Nodes



The DOM event cycle

EventOccurs

ScriptExecutes

DOMModified

PageUpdated

PageLoaded



Terms rich Internet application (RIA)

AJAX (asynchronous JavaScript and XML)

XMLHttpRequest object

Extensible markup language (XML)

JavaScript object notation (JSON)



AJAX-enabled request and response cycle

ServerAJAX HTTP request:The browser requests updated information for a page.

Client

AJAX HTTP response:The server returns the requested information and the page is updated.

Web server

Web serverBrowser

Browser

VIEW PAGE SOURCE ON A PAGE

• Right click then “view source”

• “inspect element” will also work

• Developer tools F12

HOW THE INTERNET WORKS – SUMMARIZE WHAT WE’VE LEARNED• LearnCode.Academy• https://

www.youtube.com/watch?v=e4S8zfLdLgQ

https://www.youtube.com/watch?v=e4S8zfLdLgQ

https://www.youtube.com/watch?v=e4S8zfLdLgQ

ASSIGNMENTS

• In class assignment, work as a group of 3– View source, or inspect element on 5 pages. Find an

example of the following: HTML, CSS, JavaScript. – Copy/paste them into a document– Tell me what you think each component that you’ve

chosen is doing– submit the document on onedrive as a group

• Individual assignment – – Unit 1-5 – HTML and CSS (will decide due date later in

the semester)

Unit 1 – Web Concepts Instructor: Brent Presley. ASSIGNMENT Read Chapter 1 Complete lab 1 –...

Documents

Transcript of Unit 1 – Web Concepts Instructor: Brent Presley. ASSIGNMENT Read Chapter 1 Complete lab 1 –...