2440 211 interactive web programming
Download
1 / 37

Introduction to the Internet the Web - PowerPoint PPT Presentation


  • 185 Views
  • Updated On :

2440: 211 Interactive Web Programming. Introduction to the Internet & the World Wide Web. World Wide Web. Also called the Web Origins started at the European Laboratory for Particle Physics (CERN) in Geneva, Switzerland By Tim Berners-Lee In 1990/91. Web Terminologies.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Introduction to the Internet the Web' - LionelDale


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
2440 211 interactive web programming l.jpg

2440: 211 Interactive Web Programming

Introduction to the Internet

& the World Wide Web


World wide web l.jpg
World Wide Web

  • Also called the Web

  • Origins started at the European Laboratory for Particle Physics (CERN) in Geneva, Switzerland

    • By Tim Berners-Lee

    • In 1990/91

Introduction to Web Design


Web terminologies l.jpg
Web Terminologies

  • Link (hyperlink or hypertextlink) – text, graphic, or other Web elements that connects to additional data on the Web

  • Web Page – a document on the Web

  • Uniform Resource Locator (URL) - a unique address used to identify documents on the Web

  • Web Browser – software for displaying Web pages

    • E.g. Mosaic, Navigator, Internet Explorer, Mozilla, Opera

  • Web server – makes Web pages available to the Web

  • HyperText Transfer Protocol (HTTP) – program used to help transfer files over the Web

  • HyperText Markup Language (HTML) – the language used to define the structure and content of Web pages

Introduction to Web Design


Slide4 l.jpg
HTML

  • HTML (HyperText Markup Language)

  • Used to be the heart of every Web page

  • A derivative of SGML (Standard Generalized Markup Language)

    • SGML is an international standard for representing text in an electronic form for exchanging documents independently

  • The World Wide Web Consortium (W3C) decided to discontinue HTML, as of October 2001

    • W3C is the Web standards committee

Introduction to Web Design


Slide5 l.jpg
XML

  • XML (eXtensible Markup Language)

  • A set of guidelines for delimiting text through a system of tags

  • Follows rigid guidelines

Introduction to Web Design


Xhtml l.jpg
XHTML

  • eXtensible HyperText Markup Language

  • Slowly replacing HTML

  • Combines the strict rules and syntax guidelines of XML (eXtensible Markup Language) with HTML

Introduction to Web Design


Versions of html xhtml l.jpg
Versions of HTML & XHTML

Introduction to Web Design


Html page format l.jpg
HTML Page Format

  • HTML pages follow a basic structure as follows

Introduction to Web Design


Xhtml page format l.jpg
XHTML Page Format

  • XHTML pages follow a basic structure as follows

Introduction to Web Design


Xhtml page format10 l.jpg
XHTML Page Format…

  • Below are the explanations to the XHTML page structure

    • XML declaration – identifies document as XHTML document

    • Document Type Definition (DTD) – URL points to a file that outlines the available elements, attributes, and usage

    • Name Space – URL points to a files that gives detailed information about the particular XML vocabulary (XHTML)

Introduction to Web Design


Slide11 l.jpg
DTDs

  • Transitional – supports many of the presentational features of HTML, including the deprecated elements and attributes

    • Best used for older documents with deprecated features

  • Frameset – used for documents containing frames, and also supports deprecated elements and attributes

  • Strict – does not allow any presentational features or deprecated HTML elements and attributes

    • Does not support frames or inline frames

    • Best used for documents that need to strictly conform to the latest standards

Introduction to Web Design


Creating valid xhtml documents l.jpg
Creating Valid XHTML Documents

The DTD used depends on the content of the document and the needs of your users

To support old browsers, use the transitional DTD

To support old browsers in a framed Web site, use the frameset DTD

To support more current browsers and to weed out any use of deprecated features, use the strict DTD

Introduction to Web Design


Creating a valid document l.jpg
Creating a Valid Document

  • Elements not allowed under the strict DTD:

    • applet - iframe

    • basefont - isindex

    • center - menu

    • dir - noframes

    • font - s

    • frame - strike

    • frameset - u

Introduction to Web Design


Attributes prohibited in the strict dtd l.jpg
Attributes Prohibited in the Strict DTD

Introduction to Web Design


Required xhtml attributes l.jpg
Required XHTML Attributes

Introduction to Web Design


Inserting the doctype declaration l.jpg
Inserting the DOCTYPE Declaration

  • The DOCTYPE declaration tells XML parsers what DTD is associated with the document

    <!DOCTYPE root type “id” “url”>

Introduction to Web Design


The xhtml namespace l.jpg
The XHTML Namespace

  • A namespace is a unique identifier for elements and attributes originating from a particular document type (like XHTML or MathML)

  • Two types of namespaces:

    • Default: applied to a root element and any element within it

    • <root xmlns=“namespace”>

Introduction to Web Design

New Perspectives on HTML and XHTML, Comprehensive

17


The xhtml namespace18 l.jpg
The XHTML Namespace

  • Local: applies to only select elements

    • Each element in the local namespace is marked by a prefix attached to the element name

    • xmlns: prefix=“namespace”

    • Identify any element belonging to that namespace by modifying the element name in the tag:

      • prefix:element

Introduction to Web Design


Setting the xhtml namespace l.jpg
Setting the XHTML Namespace

  • To set XHTML as the default namespace for a document, add the xmlns attribute to the html element with the following value:

    • <html xmlns=http://www.w3.org/1999/xhtml>

Introduction to Web Design

New Perspectives on HTML and XHTML, Comprehensive

19


Using style sheets and xhtml l.jpg
Using Style Sheets and XHTML

  • Parsed character data (PCDATA) is text parsed by a browser or parser

  • Unparsed character data (CDATA) is text not processed by the browser or parser

    • A CDATA section marks a block of text as CDATA so that parsers ignore any text within it

Introduction to Web Design

New Perspectives on HTML and XHTML, Comprehensive

20


Html vs xhtml l.jpg
HTML vs. XHTML

  • Some major differences between HTML and XHTML include the following:

    • All element attributes names are in lowercases

      • E.g. <p> instead of <P>

    • All attribute values must be contained within single or double quotes

      • E.g. <body bgcolor=“#ffffff”> instead of <body bgcolor=#ffffff>

    • All nonempty elements must have a closing tag

      • E.g. <p>XHTML</p> instead of <p>HTML

    • All empty tags should be written with a space and a / symbol at the end of the tag

      • E.g. <br /> instead of <br>

Introduction to Web Design


Html vs xhtml22 l.jpg
HTML vs. XHTML

Introduction to Web Design


Creating a well formed document l.jpg
Creating a Well-Formed Document

  • XHTML documents must also include a single root element that contains all other elements

    • For XHTML, that root element is the html element

  • Attribute minimization is when some attributes lack attribute values

    • XHTML doesn’t allow attribute minimization

Introduction to Web Design


File naming conventions l.jpg
File-Naming Conventions

  • XHTML is much more restrictive

  • The following restrictions relate to file-naming conventions:

    • Do not use spaces

    • Avoid capital letters

    • Avoid illegal characters

Introduction to Web Design


Attribute minimization in html and xhtml l.jpg
Attribute minimization in HTML and XHTML

Introduction to Web Design


Slide26 l.jpg
CSS

  • CSS (Cascading Style Sheet)

  • Used for many different purposes

  • Used mainly to separate presentation from the structure of a page

    • Presentation – “looks” of a page

    • Structure – “meaning” of a page’s content

Introduction to Web Design


Css versions l.jpg
CSS Versions

  • CSS1 (1996) – introduced styles for:

    • Fonts

    • Text

    • Color

    • Background

    • Block-level elements

  • CSS2 (1998) – added support for:

    • Positioning

    • Visual formatting

    • Media types

    • Interfaces

  • CSS3 (still in development)

Introduction to Web Design


Dhtml l.jpg
DHTML

  • DHTML (Dynamic HTML)

  • A collection of different technologies including:

    • XHTML

    • JavaScript

      • DOM (Document Object Model)

    • CSS

Introduction to Web Design


Javascript l.jpg
JavaScript

  • Developed by Netscape in 1996

  • Has become almost as popular as HTML

  • Has nothing to do with the Java Programming Language

    • But Netscape licensed the name from Sun Microsystems in hopes of increasing acceptance of the new scripting protocol

Introduction to Web Design


Web application l.jpg
Web Application

  • Web site that delivers dynamic data

  • Other names include:

    • Data-driven

    • Database-driven

    • Dynamic sites

  • Involves tools like:

    • Database

    • Server-side scripting – such as like Active Server Pages (ASP), Java Server Pages (JSP), ASP.NET, ColdFusion, PHP, etc

Introduction to Web Design


Javascript31 l.jpg
JavaScript

  • A client-side scripting language

    • Language that runs (interpreted) on a local Web browser

    • An interpreter executes the language with a scripting engine

  • Enables interactivity on Web pages

  • Developed by Netscape in 1996

  • First introduced in the Netscape Navigator browser as LiveScript

  • Different from the Java programming language

  • Microsoft developed a version of JavaScript called JScript for its Internet Explorer browser

  • European Computer Manufacturers Association (ECMA) – developed a standard called ECMAScript to avoid the differences in commands between JavaScript and Jscript

    • Some Jscript commands cannot be executed on the Navigator browser

    • Some JavaScript commands cannot be executed on the Internet Explorer browser

Introduction to Web Design


Javascript vs java l.jpg
JavaScript vs. Java

  • Below is a comparison between JavaScript and Java

Introduction to Web Design


Versions of javascript l.jpg
Versions of JavaScript

  • JavaScript 1.0 (1995)

  • JavaScript 1.1 (1996)

  • JavaScript 1.2 (1997)

  • JavaScript 1.3 (1998)

  • JavaScript 1.5 (2001)

    • Both JScript 5.5 and JavaScript 1.5 conform to ECMAScript 3

    • Web browsers still refer to ECMAScript as JavaScript

Introduction to Web Design


Web application34 l.jpg
Web Application

  • Web site that delivers dynamic data

  • Uses resources like:

    • Client-side scripting

    • Server-side scripting

    • Databases

Introduction to Web Design


Client side scripting l.jpg
Client-Side Scripting

  • Scripting language that runs on a local Web browser

    • Examples

      • JavaScript – by Netscape

      • JScript – by Microsoft Corporation

      • ECMAScript – standards by ECMA

      • VBScript – by Microsoft Corporation

Introduction to Web Design


Server side scripting l.jpg
Server-Side Scripting

  • Scripting language that executes on a Web server

    • Examples:

      • Active Server Pages (ASP) – uses JavaScript or VBScript

      • ASP.NET – uses C# or Visual Basic

      • Java Server Pages – uses Java

      • PHP: HyperText Preprocessor (PHP) – syntax borrowed from C, Java & Perl

      • ColdFusion

      • Common Gateway Interface (CGI) – mostly with Perl

      • Perl – has features from C, BASIC, etc

Introduction to Web Design


Databases l.jpg
Databases

  • A collection of information about related entities

    • Entity (relation or table) – a set of records

    • Record (tuple or row) – a collection of fields

    • Field (attribute or column) – a property or characteristic of an entity

    • Relationship – an association between entities

  • Defined and manipulated using the Structured Query Language (SQL) on DataBase Management Systems (DBMS)

    • SQL – the universal language for database definition, and management

    • DBMS – the software for managing databases

Introduction to Web Design


ad