coa 102 internet application. course objectives: design and implement a web page. recognize the...

COA 102

Internet Application

Course Objectives: Design and implement a web page. Recognize the scope of different internet applications. Recognize the significance of legal, social, ethical

and professional issues. Work individually and /or as team member to develop

internet applications. Plan, define and execute, web site development

activities Explain good web site design practices.

Introduction to Computers and the Internet

Outline What Is a Computer? Computer Main Unit Machine Cycle Computer Programs Network and Internet History of the Internet World Wide Web (WWW) World Wide Web Consortium (W3C) How is the data travel through the internet Basic Type of Web Site

Guideline to evaluate the value of the web Important abbreviations

What Is a Computer Computer: Electronic device operating under the control of instructions

stored in its own memory.

Device capable of Performing computations Making logical decisions.

Works billions of times faster than human beings Fastest supercomputers today

Perform hundreds of billions of additions per second

What Is a Computer Computers perform three main operations:

Receive input( Data row Fact) Process it a according to predefined instructions. Produce output (information which is meaningful data). Computer SystemThe components of a computer system are:1. Hardware: Physical components like Screen, Cable, Keyboard,

System Box and printer. The hardware cannot do anything without software

2. Software: A set of instructions that tell the computer what to do and how to do it, such as: Word processing, Computer Games and Graphics Programs.

3. User: Are people who use the software on the computer to do some tasks.

Computer Main UnitProcessorProcessor

Control Control UnitUnit

Arithmetic Arithmetic Logic Unit (ALU)Logic Unit (ALU)

Arithmetic Arithmetic Logic Unit (ALU)Logic Unit (ALU)

InputInputDevicesDevices

StorageStorageDevicesDevices

OutputOutputDevicesDevicesMemoryMemoryDataData InformationInformation

InstructionsInstructionsDataData

InformatioInformationn

InstructionsInstructionsDataData

InformatioInformationn

Control Control UnitUnit

Computer main Unit

Every computer divided into six units:

1.Input Unit

2.Output Unit

3.Memory Unit

4.ALU (Arithmetic & Logical Unit)

5. Central Processing Unit (CPU)

6. Secondary storage unit

Machine Cycle Machine Cycle

Processor

Control Unit

Memory

ALU

Step 1. Fetch Obtain program instruction or data item from memory

Step 2. Decode Translate instruction into commands

Step 4. Store Write result to memory

Step 3. Execute Carry out command

Computer Programs Called software Programmers write instructions that comprise software in

various programming languages Three general types of programming languages

Machine languages Assembly languages (Low Level Language) High-level languages

Computer Programs Machine languages

“Natural language” of a particular computer Defined by hardware design of computer Generally consists of strings of numbers

Computer ProgramsAssembly languages is a low-level language for programming computers.

Represents elementary operations of computer Translator programs called assemblers convert assembly-language to

machine-language Example:

LOAD BASEPAY

ADD OVERPAY

STORE GROSSPAY

Computer Programs High-level languages

Developed as computer usage increased Single statements can be written to accomplish substantial

tasks Translator programs called compilers Allow programmers to write instructions almost like every-

day English Example:

grossPay = basePay + overTimePay

Network & Internet Network:Collection of computers and devices connected via communications

devices and transmission media.

Internet: Worldwide collection of networks that connects million of businesses,

government agencies, educational institution, and individuals.

History of the Internet

ARPAnet Implemented in late 1960’s by ARPA (Advanced Research

Projects Agency of DOD) Networked computer systems of a dozen universities and

institutions with 56KB communications lines Grandparent of today’s Internet Intended to allow computers to be shared Became clear that key benefit was allowing fast

communication between researchers – electronic-mail (email)

History of the Internet ARPA’s goals

Allow multiple users to send and receive info at same time Network operated packet switching technique

Digital data sent in small packages called packets Packets contained data, address info, error-control info and

sequencing info Greatly reduced transmission costs of dedicated communications

lines Network designed to be operated without centralized

control If portion of network fails, remaining portions still able to route

packets

History of the Internet Transmission Control Protocol (TCP)

Name of protocols for communicating over ARPAnet Internet standard that allows you to upload and download

files with other computers on the Internet Ensured that messages were properly routed and that they

arrived intact

World Wide Web (WWW) World Wide Web it is a collection of electronic documents

also called the web Allows computer users to locate and view multimedia-

based documents Introduced in 1990 by Tim Berners-Lee

World Wide Web Consortium (W3C) W3C

Founded in 1994 by Tim Berners-Lee Devoted to developing non-proprietary and interoperable

technologies for the World Wide Web and making the Web universally accessible

Standardization W3C Recommendations: technologies standardized by W3C

include Extensible HyperText Markup Language (XHTML), Cascading Style Sheets (CSS) and the Extensible Markup Language (XML)

Document must pass through Working Draft, Candidate Recommendation and Proposed Recommendation phases before considered for W3C Recommendation

W3C homepage at www.w3.org

How is the data travel through the internet • Action of requesting web page taken by the user.• Your request travel through the cable to the central

cable system• The central cable system send your request to your

ISP (Internet Service Provider)• ISP send your request to the destination server• The servers retrieve the requested page and send it

back through the internet backbone to your computer.

URL Structure URL: (Universal Resource Locator) Unique address for a

Web page

Top-Level Domain Names

Basic Type of Web Site Portal: A Web site that offers a variety of services from one,

convenient location, usually for free News: Contains newsworthy material Business/Marketing: Contains content that promotes products or

services Education: Offers avenues for formal and informal teaching

and learning Entertainment: Offers an interactive and engaging environment

featuring music, video, sports, games, and more Blog: Uses a regularly updated journal format to reflect the interests,

opinions, and personalities of the author and sometimes site visitors Wiki: Collaborative Web site that allows users to add to, modify, or

delete the Web site content via their Web browser Personal: Web page maintained by private individual

Guideline to evaluate the value of the web Affiliation. Audience. Authority. Content. Currency. Design. Objectivity.

Important abbreviations

web browsers: are a software programs that allow users to access the web, whether for business or for personal use, The two most popular web browsers are Microsoft internet explorer and Netscape’s communicator.

Domain Name: Text version of Internet protocol (IP) address URL: (Universal Resource Locator) Unique address for a Web page Hostname is the unique name by which a network-attached device,

The hostname is used to identify a particular host in various forms of electronic communication such as the World Wide Web

Home page: the first page the site present often provides connection to other web page.

Link: Built-in connection to another related Web page location

Downloading: The process of a computer receiving information Uploading: The process of a computer sending information

Important abbreviations Search engine: Program used to find Web sites and Web pages by

entering words or phrases called search text. FTP: File Transfer Protocol—Internet standard that allows you to

upload and download files with other computers on the Internet E-mail: The transmission of messages and files via a computer

network E-mail address: Unique name that consists of a user name and

domain name that identifies the user Chat: Real-time typed conversation that takes place on a computer Newsgroup: Online area where users discuss a particular subject Mailing list: Group of e-mail addresses given a single name Instant messaging (IM): A real-time Internet communications

service that notifies you when one or more people are online and allows you to exchange messages or files

Microsoft Internet Explorer 6


OUT LINE• Introduction to the Internet Explorer 6 Web Browser• Connecting to the Internet• Internet Explorer 6 Features• Searching the Internet• Online Help and Tutorials• Keeping Track of Favorite Sites• File Transfer Protocol (FTP)• Customizing Browser Settings• Electronic Mail• Instant Messaging• Other Web Browsers


Internet is an essential medium to communicating and interact with people wide world

Web Browsers Software that allows users to view Web content

Microsoft Internet Explorer Netscape Navigator Others

Microsoft Internet Explorer 6 Connecting to the Internet

Computer hardware Modem

Transmits data over phone lines Converts data to audio tones and transmits the data over the phone line

Network card (NIC) Connect to the internet through a network or high-speed connection

Cable modem Digital Subscriber Line (DSL)

Internet Service Provider (ISP) You have to register with an ISP ISP connect computer to internet Commercial

AOL (www.aol.com) du ( www.du.ae)


Internet Service Provider (ISP), cont. Considerations

Cost Bandwidth

Amount of data transferred through communications medium in a fixed amount of time

Broadband connection Refer to high speed connection Constantly connected 100’s of kbps (kilo-bits per second) DSL (Digital Subscriber Line)

Uses existing phone lines Requires DSL modem


Broadband, cont. Cable Modem

Use cable television lines Requires cable modem

ISDN (Integrated Services Digital Network) Uses digital or standard telephone lines Requires a terminal adaptor

Dial-up connection Uses existing phone lines Interferes with phone use Must dial-up with modem. Usually 56 kbps (kilo-bits per second)


Internet Connection Wizard Use this application to configure computer’s Internet connection. Start > Programs > Accessories > Communications > Internet Connection

Wizard

Specify what type of connection to use by clicking one of the option buttons

Tutorial button


Web browser Program which displays Internet content

Microsoft Internet Explorer 6 Netscape 7.1

URL (Universal Resource Locator) Web page address

HTTP (hyper-text transfer protocol) Protocol for transferring data over the Internet

Type in Address field Hyperlinks

Graphical or textual elements Click to link to another Web page Loads new page into browser window


Back

Recent history

Forward

Stop Refresh

Address bar

Go

Pointer (over a hyperlink)

Scroll bars


Interactive History window

History date options

Content window

Site from folder

Web site folder


Web browser, cont. Auto complete

Completes Web address as it is being typed Completes form information as it is being typed

File options Save Web page for off-line use

File > Save As Save pictures from a Web site

Right click image Choose Save Picture As…


AutoComplete suggests possible URLs when given a partial address.

Partial address

URLs


Saving a picture from a Web site.


Search engines Web sites that sort through by keywords and categories find Web sites and Web pages by entering words or phrases called

search text. Google (www.google.com) Yahoo! (www.yahoo.com) Altavista (www.altavista.com)

Store information in databases Returns list of sites as hyperlinks

Meta-search engines Do not maintain databases Aggregate results from multiple search engines Microsoft Network (www.msn.com)

Click Search button in toolbar


Searching the Internet with IE6New search

Search window

Search button

Toolbar

Search wordsSearch categories


IE 6 built-in help feature Help > Tour

Overview of IE 6 Help > Contents and Index

Search for help on specific topic


IE6 Help dialog. Help menu

Categories


Keeping Track of Favorite Sites Favorites

List organizes frequently-visited sites Add sites to list

Favorites > Add to Favorites…

Organize list Favorites > Organize Favorites…


Favorites menu helps organize frequently visited Web sites.

Add/Organize Favorites

Favorites

Favorites window

Site information

Organize Favorites dialog


E-mail (electronic mail) Delivers formatted messages over Internet E-mail address

Username @ domainname

Email Programs Outlook Express other

Free email accounts Hotmail (www.hotmail.com) Yahoo! (mail.yahoo.com)


E-mail (electronic mail), cont. Post Office Protocol (POP) to retrieve e-mail from a remote server over a TCP/IP connection

Remote server Download to local client E-mail scattered

Internet Message Access Protocol (IMAP) Manipulate messages directly on server allows a local client to access e-mail on a remote server Access all your e-mail from any machine

Simple Mail Transfer Protocol (SMTP) Used to send e-mail

Microsoft Internet Explorer 6Outlook Express e-mail main screen..

Message list

Preview pane

Mailboxes

Message toolbar items


Instant Messaging Communicate (“chat”) in real time Send audio, video and files Several popular services

AOL Instant Messenger (www.aim.com) Yahoo! Messenger (messenger.yahoo.com) ICQ (web.icq.com) MSN Messenger (messenger.msn.com)

Trillian (www.trillian.cc) Able to communicate with all of the above


Instant Messaging, cont. Some instant messaging tools designed for collaboration

NetMeeting Windows Messenger Include whiteboard feature to share drawings

Screen name Unique identifier

Buddy List Maintains list of screen names


Buddy list and an instant message.

Buddy list

Instant message


Alternatives to Internet Explorer and Netscape Offer new/different features and layout engines

Mozilla (www.mozilla.org) Uses Gecko layout engine, basis for Netscape 7.1

Opera (www.opera.com) Lightweight

Amaya (www.w3.org/Amaya) Browser/editor Demonstrates W3C standards

Each layout engine displays websites differently Testing on multiple browsers important

Other Browsers

Introductionto

E-Commerce

Introduction to E-Commerce Electronic Commerce (e-commerce)

The processing of buying and selling via the Internet

M-Commerce Describes e-commerce conducted over a wireless device such as a

cell phone or personal digital assistant (PDA).

Introduction to E-Commerce Types of E-Commerce Business

business-to-consumer (B-to-C or B2C) e-commerce Sale of products or services from a business to the general public

Consumer benefits of B2C a. Lower prices

b. Wider choice. c. Better information, d. Convenience

Business benefits of B2C a. Increased demand

b. A low-cost route to global reach c. Cost-reduction of promotion and sales. d. Reduced costs

Introduction to E-Commerce Consumer-to-Consumer (C-to-C or C2C) e-

Commerce This is where consumers purchase from each other. This is

typically done through an online auction. The biggest C2C website is www.ebay.com. On EBay a consumer can not only purchase items, but also put items up for sell. EBay is one of the most successful e-commerce websites online.

Introduction to E-Commerce Business-to-Business (B-to-B or B2B) e-commerce

Sale and exchange of products and service between businesses via the web, or business that is conducted over the Internet

Types of B2B e-commerce sitesvendor B2B:vendor B2B:Product supplier allows purchasing agents to use network to shop, submit request for quotes (RFQs), and purchase itemsbrokering B2BActs as middleman by negotiating contract of purchase and saleservice B2BUses network to provide one or more services to businessinfomediary B2BProvides specialized information about suppliers and other businesses

Introduction to E-Commerce

vertical B2B e-commerce E-commerce site specializing in a particular industry

Business-to-Employee (B-to-E or B2E) e-commerce

Use of intranet technology to handle activities that take place within a business.

Increases profits by reducing expenses withina company.

Also called Intrabusiness

Introduction to E-Commerce Advantages of e-commerce

Global market 24/7 Businesses have access to 459 million people with Internet access Customers can conduct price comparisons easily Feedback can be immediate Changing information can be available quickly FAQ (frequently asked questions) pages can provide easy access to

customer support Ability to gather customer information, analyze it, and react New and traditional approaches to generating revenue Manufacturers can buy and sell directly, avoiding the cost of the

middleman Distribution costs for information reduced or eliminated

Introduction to E-Commerce THE ELEMENTS OF E-COMMERCEAn e-commerce business should be planned out carefully and necessary steps

should be follow

1. Establish an Online Identity

The first step in creating an e-commerce website is to select the name of the site, The name should be short and easy to remember while also describing the business in which it represents.

2. Build the Site

The site user-friendly and easy to make a purchase, storefront should provide information about the business and its products or services.

Introduction to E-Commerce 3. Choose a Web Server

Web server determines if your site is available, website must have a secure server, one that prevents access to the system by unauthorized users. 4. Accept payments

The Internet payment processing system is very complicated; the easiest way to deal with the payment process is to choose a Web host that offers e-commerce software such as shopping carts. 5. Test your site

Make sure there are no broken links, incorrect information or grammatical and spelling errors. Errors will make you and your website look unprofessional and that is very bad for business. 6. Promote your site

Now that your website is ready to go-get the word out! Many of the Web hosting services register your website with search engines for you, but you can also do it yourself using a search engine submission service like www.submit-wizard.com. This service charges a small fee

Introduction to E-CommerceE-Business

An E-business is define as a company that has an online presence, E-business that has the ability to sell, trade, barter and transact over the web.

The combination of a company’s policy, operations, technology, and ideology define the company e-business model.

Introduction to E-Commerce E-Business Models

The e-Business model, like any business model, describes how a company functions; how it provides a product or service, how it generates revenue, and how it will create and adapt to new markets and technologies

Storefront Model Auction Model Dynamic Pricing Models Portal model Click- and - Mortar business

Introduction to E-Commerce Storefront Model

Model which combines transaction processing, security and information storage to allow merchants to sell their products on the web.

To conduct storefront business model: Merchants need to organize an online catalogue of products. Merchants take orders through their web sites. Accept payments in secure environments. Send merchandise to customers and manage customer data (such

as customer profile).

Introduction to E-Commerce Auction Model

Auction sites act as forums through which the internet users can log-on and assume the role of both bidder and seller, as the seller you are able to post an item you wish to sell the minimum price you require to sell your item and deadline to close the auction.

As a bidder you may search the site for availability of the item you are seeking ,view the current bidding activity and place a bid.

Auction site usually require a commission on sales, they do not involve themselves in payment or delivery.

Introduction to E-Commerce Portal model

Portal site give visitor the chance to find almost everything they looking for in one place, they often offer news, sport and weather as well as ability to search the web.

Portal linking consumers to online merchants, online shopping malls and auction site.

Introduction to E-Commerce Dynamic Pricing Models

Dynamic pricing sites enable the customers to name their prices for the product

Introduction to E-Commerce Click- and - Mortar business

Companies who wish to bring their businesses to the web must determine the level of cooperation and integration the two separate entities will share,

a company that can offer it is services both online and offline can add value to customer’s experience,

one of the major issues in e-commerce today is how to integrate the internet into offline businesses.

Introduction to E-Commerce Difference between E-Commerce and E-Business

In practice, e-business is more than just e-commerce. While e-business refers to more strategic focus with an emphasis on the functions that occurs using electronic capabilities, e-commerce is a subset of an overall e-business strategy

E-business involves business processes spanning the entire value chain: electronic purchasing and supply chain management, processing orders electronically, handling customer service, and cooperating with business partners. Special technical standards for e-business facilitate the exchange of data between companies.

E-business can be conducted using the Web, the Internet, intranets, extranets, or some combination of these.

Legal, Ethical &Social Issues;

The Differences between Real space & Cyberspace Real space

Our physical environment consisting of temporal and geographic boundaries

In real space, we operate under a code of law and ethics

Cyberspace The realm of digital transmission not limited by geography It is unique forum in which the code, or the languages of

programming govern

Legal Issues: Privacy on the Internet Difficulty of applying traditional law to the Internet Technology and the issue of privacy

Internet a Self-regulated medium The Internet industry governs itself

Many Internet companies collect users’ personal information Privacy advocates argue that these efforts violate

individuals’ privacy rights

Legal Issues: Privacy on the Internet

Online marketers and advertisers suggest that online companies can better serve their users by recording the likes and dislikes of online consumers

Financial Services Modernization Act of 1999 Establishes a set of regulations concerning the management

of consumer information Study online privacy

Example ,business must provide consumers with an opportunity to opt out of having their information shared with third parties.

Legal Issues: Privacy on the Internet Tracking Devices

Methods to keep track of the visitors behavior Used by online advertisers, online communities and online

businesses Some users consider having their actions recorded to be a

violation of their privacy Several tracking devices are used online

ID card: enables information to be sent to your computer from web site ( computer address needed only)

Click through advertisements ( billboards) : consumers can view the service or product by clicking on the advertisement.

Web bug : allow affiliates to gather consumer information.

Legal Issues: Privacy on the Internet Cookies

Cookies is a test file stored by a web site on individual’s personal computer, allows a site to track the action of its visitors

Cookies reactivate each time the computer revisits that site Cookies track

Length of stay at the site Purchases made on the site Site previously visited Site visited next

Legal Issues: Privacy on the Internet Cookies can be beneficial to consumer

They record passwords for returning visit Keep track of shopping-cart materials Keep track of register preferences

These advantages may be gained at the price of consumer privacy

Cookies help business by allowing them to address their target market with greater accuracy

Network Advertising Initiative Network Advertising Initiative (NAI)

Approved by the FTC (Federal Trade Commission) in July 1999 to support self regulation

NAI currently represents 90 percent of Web advertisers Determines the proper protocols for managing a Web user’s

personal information on the Internet Prohibits the collection of consumer data from medical and

financial sites Allows the combination of Web-collected data and personal

information

Employer and Employee Keystroke cop

Software provides an inexpensive, easy-to-use method of monitoring productivity and the abuse of company equipment

Registers each keystroke before it appears on the screen create tension between employers and employees

Company time and company equipment vs. the rights of employees Determining factors

Employee have a reasonable expectation of privacy Business have Legitimate business interests

Reasons for surveillance Slower transmission times Harassment suits Low productivity

Legal Issues: Other Areas of Concern Defamation

Defamation is the act of injuring another’s reputation. Honor or good name through written or oral communication

Defamation has two part Slander

Spoken defamation Libel

Defamatory statements written or spoken in a context in which they have longevity and pervasiveness that exceed slander

Example : broadcasting is considered libelous even though it is spoken.

Legal Issues: Other Areas of ConcernProving defamationTo prove defamation a plaintiff must meet five

requirements: The statement must have been published, spoken or

broadcast There must be identification of the individual (s) through

name or reasonable association The statement must be defamatory There must be fault There must be evidence of injury

Legal Issues: Other Areas of Concern Copyright

The protection given to the author of an original piece, including “literary, dramatic, musical, artistic and certain other intellectual works”

Whether the work has been published or not Protects only the expression or form of an idea and not the

idea itself Provides incentive to the creators of original material Guaranteed for the life of the author plus seventy years

Legal Issues: Other Areas of Concern Online Auctions

Question of government regulation International regulation of auctions

Auctions are regulated by government on several levels

Copyright infringement and auction aggregation services Shill bidding

Sellers bid for their own items to increase the bid price

Cybercrime Auctions, chat rooms and bulletin boards are among the most

popular forums for illegal activities Viruses, which often lead to denial of service or a loss of

stored information, are among the most common cyber crimes Stock scamps

Crimes in which individuals purchase stocks, then present false claims about the value of that stock in chat rooms or on bulletin boards to sell them back at a higher price

Web page hijacking Web page is used as a gateway (the intermediary between one site and

another) to another site

Social Issues Online Communities

Internet redefining our definitions of communities by allows larger and more diverse groups to communicate, share information and exchange opinions

Internet alters the ways people meet and interact Internet changed first impression

In cyberspace no need to notice a person’s appearance first unless they posted a picture

We learn about each other through conversation

Introduction to XHTML Part 1

Objectives In this chapter, you will learn:

To understand important components of HTML documents.

To understand important components of XHTML documents.

To use XHTML to create Web pages. To be able to add images to Web pages. To understand how to create and use hyperlinks to navigate

Web pages. To be able to mark up lists of information.

HTML HTML stands for Hyper Text Markup Language.

HTML is a language for describing how pages of text, graphics and other information are organized, formatted and linked together. It is a text markup system

HTML is the character-based method for describing and expressing the content. The content is pictures, text, sound and video clips.

HTML An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the

page An HTML file must have an .htm or.html file extension An HTML file can be created using a simple text editor. HTML is used to create web pages. HTML pages are the standard interface to the internet.

HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end

tag The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as

<B>

How to Create a Web Page?

A text editor is required to write HTML document. In Windows XP, start Notepad. Type the document in it. Save the file as "mypage.htm“ or “mypage.html”. Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your

browser.

Structure of an HTML document: Each HTML document has the same basic structure:

<HTML> - Indicates the star/end of the document <HEAD>- Indicates the star/end of the header <TITILE> - The document title displayed in the browser

caption bar <BODY>- Indicates the star/end of the body

Every Web page you create must include the <HTML>, <HEAD>, <TITLE>, and <BODY> tags.

Extensible Hypertext Markup Language

A markup language XHTML stands for Extensible Hypertext Markup

Language Based on HTML

Technology of the World Wide Web Consortium (W3C)

XHTML is aimed to replace HTML XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML

Editing XHTML XHTML documents

Source-code form Text editor (e.g. Notepad, Wordpad, emacs, etc.) .html or .htm file-name extension Web server

Stores XHTML documents Web browser

Requests XHTML documents

First XHTML Example XHTML comments

Start with  html element

head element Head section

Title of the document Style sheets and scripts

body element Body section

Page’s content the browser displays Start tag

attributes (provide additional information about an element) name and value (separated by an equal sign)

End tag

1 <?xml version = "1.0"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4

5 

6 

7

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

9 <head>

10 <title>Internet and WWW How to Program - Welcome</title>

11 </head>

12

13 <body>

14 <p>Welcome to XHTML!</p>

15 </body>

16 </html>

W3C XHTML Validation Service free service by W3C that helps check the validity of

Web documents The act of checking a document against these

constraints is called validation Checking a document’s syntax

URL that specifies the location of the file Uploading a file to the site

validator.w3.org/file-upload.html

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Headers</title>

11 </head>

12

13 <body>

14

15 <h1>Level 1 Header</h1>

16 <h2>Level 2 header</h2>





21

22 </body>

23 </html>

Six headers ( header elements)h1 through h6

Linking Hyperlink

References other sources such as XHTML documents and images

Both text and images can act as hyperlinks Created using the a (anchor) element

Attribute href Specifies the location of a linked resource

Link to e-mail addresses using mailto: URL

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Links</title>

11 </head>

12

13 <body>

14

15 <h1>Here are my favorite sites</h1>

16

17 <p><strong>Click a name to go to that page.</strong></p>

18

19 

20 <p><a href = "http://www.deitel.com">Deitel</a></p>

21

22 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>

23

24 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>

25

26 <p><a href = "http://www.usatoday.com">USA Today</a></p>

27

28 </body>

29 </html>

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Contact Page</title>

11 </head>

12

13 <body>

14

15 <p>

16 My email address is

17 <a href = "mailto:[email protected]">

18 [email protected]

19 </a>

20 . Click the address and your browser will

21 open an e-mail message and address it to me.

22 </p>

23 </body>

24 </html>

Image Three most popular formats

Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) img element

src attribute Specifies the location of the image file

width and height Pixels (“picture elements”) br element

Line break

4

5 

6 

7


9 <head>


11 </head>

12

13 <body>

14

15 <p>

16 <img src = "xmlhtp.jpg" height = "238" width = "183"

17 alt = "XML How to Program book cover" />

18 <img src = "jhtp.jpg" height = "238" width = "183"

19 alt = "Java How to Program book cover" />

20 </p>

21 </body>

22 </html>

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Navigation Bar

11 </title>

12 </head>

13

14 <body>

15

16 <p>

17 <a href = "links.html">

18 <img src = "buttons/links.jpg" width = "65"

19 height = "50" alt = "Links Page" />

20 </a><br />

21

22 <a href = "list.html">

23 <img src = "buttons/list.jpg" width = "65"

24 height = "50" alt = "List Example Page" />

25 </a><br />

26

27 <a href = "contact.html">

28 <img src = "buttons/contact.jpg" width = "65"

29 height = "50" alt = "Contact Page" />

30 </a><br />

31

32 <a href = "header.html">

33 <img src = "buttons/header.jpg" width = "65"

34 height = "50" alt = "Header Page" />

35 </a><br />

36

37 <a href = "table1.html">

38 <img src = "buttons/table.jpg" width = "65"

39 height = "50" alt = "Table Page" />

40 </a><br />

41

42 <a href = "form.html">

43 <img src = "buttons/form.jpg" width = "65"

44 height = "50" alt = "Feedback Form" />

45 </a><br />

46 </p>

47

48 </body>

49 </html>

Special Characters and More Line Breaks Some characters have a special meaning in HTML

like ( “ < “) A character entity has three parts:

An ampersand or “and sign” (&), An entity name or # and an entity number, and finally a semicolon (;). Ex: To display a less than sign (<) in an HTML document

we must write: & lt ; or < Character entity references (in the form &code;) Numeric character references (e.g. &)

Special Characters and More Line Breaks del

Strike-out text sup

Superscript text sub

Subscript text <hr />

Horizontal rule (horizontal line)

5 <head>

6 <title>Internet and WWW How to Program - Contact Page

7 </title>

8 </head>

9

10 <body>

11 <p>

12 Click

12 <a href = "mailto:[email protected]">here

13 </a> to open an e-mail message addressed to

14 [email protected].

15 </p>

16

17 <hr /> 

18

19 <p>All information on this site is <strong>©</strong>

20 Deitel <strong>&</strong> Associates, Inc. 2002.</p>

21 <p><del>You may download 3.14 x 10<sup>2</sup>

22 characters worth of information from this site.</del>

23 Only <sub>one</sub> download per hour is permitted.</p>

24

25 <p>Note: <strong>< ¼</strong> of the information

26 presented here is updated daily.</p>

27

28 </body>

HTML Lists: HTML supports ordered, unordered and

definition lists. Unordered list element ul

Creates a list in which each item begins with a bullet symbol (called a disc)

li (list item) Entry in an unordered list

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Links</title>

11 </head>

12

13 <body>

14

15 <h1>Here are my favorite sites</h1>

16

17 <p><strong>Click on a name to go to that page.</strong></p>

18

19 

20 <ul>

21

22 

23 <li><a href = "http://www.deitel.com">Deitel</a></li>

24

25 <li><a href = "http://www.w3.org">W3C</a></li>

26

27 <li><a href = "http://www.yahoo.com">Yahoo!</a></li>

28

29 <li><a href = "http://www.cnn.com">CNN</a></li>

30 </ul>

31 </body>

32 </html>

HTML Lists: Nested and Ordered Lists

Represent hierarchical relationships Ordered lists (ol)

created using the OL element Creates a list in which each item begins with a

number

HTML Lists: <UL>

<LI> ... Level one, number one... <OL>

<LI> ... Level two, number one... <LI> ... Level two, number two... <OL start="10">

<LI> ... Level three, number one... </OL> <LI> ... Level two, number three...

</OL> <LI> ... Level one, number two...

</UL>

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Lists</title>

11 </head>

12

13 <body>

14

15 <h1>The Best Features of the Internet</h1>

16

17 

18 <ul>

19 <li>You can meet new people from countries around

20 the world.</li>

21 <li>

22 You have access to new media as it becomes public:

23

24 

25 

26 

27 <ul>

28 <li>New games</li>

29 <li>

30 New applications

31

32 

33 <ol>

34 <li>For business</li>

35 <li>For pleasure</li>

36 </ol>

37 </li>

38

39 <li>Around the clock news</li>

40 <li>Search engines</li>

41 <li>Shopping</li>

42 <li>

43 Programming

44

45 

46 <ol>

47 <li>XML</li>

48 <li>Java</li>

49 <li>XHTML</li>

50 <li>Scripts</li>

51 <li>New languages</li>

52 </ol>

53

54 </li>

55

56 </ul> 

57 </li>

58

59 <li>Links</li>

60 <li>Keeping in touch with old friends</li>

61 <li>It is the technology of the future!</li>

62

63 </ul> 

64

65 </body>

66 </html>

HTML Lists: Definition Lists

A definition list is not a list of items. list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-

list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.

<dl> start of definition list<dt> definition-list term </dt>

<dd> definition-list definition </dd> <dt> definition-list term </dt>

<dd> definition-list definition </dd> </dl> end of definition list

Web Resources www.w3.org/TR/xhtml11 www.xhtml.org www.w3schools.com/xhtml/default.asp validator.w3.org hotwired.lycos.com/webmonkey/00/50/index2a.html wdvl.com/Authoring/Languages/XML/XHTML www.w3.org/TR/2001/REC-xhtml11-20010531

Introduction to XHTML Part 2

Objectives In this lesson, you will learn:

To be able to create tables with rows and columns of data. To be able to control table formatting. To be able to create and use forms. To be able to create and use image maps to aid in Web-

page navigation. To be able to make Web pages accessible to search engines

using meta elements. To be able to use the frameset element to display multiple

Web pages in a single browser window.

XHTML Tables

Present information

Forms Collect information from visitor

Internal linking Enhance Web page navigation

Frames Display multiple documents in the browser

Basic XHTML Tables Organize data into rows and columns table element

Attribute border Specifies the table’s border width in pixels

Attribute summary Describes the table’s contents

Attribute caption Describes the table’s content and helps text-based browsers interpret table

data Head section (header cell, defined with a thead element)

Contains header information such as column names tr element (defines an individual table row) th element (defines the columns in the head section)

Foot section (defined with a tfoot element) Table body (defined with a tbody element) Data cells (defined with td element

4

5 

6 

7


9 <head>

10 <title>A simple XHTML table</title>

11 </head>

12

13 <body>

14

15 

16 <table border = "1" width = "40%"

17 summary = "This table provides information about

18 the price of fruit">

19

20 

21 

22 <caption><strong>Price of Fruit</strong></caption>

23

24 

25 

26 <thead>

27 <tr> 

28 <th>Fruit</th> 

29 <th>Price</th>

30 </tr>

31 </thead>

32

33 

34 

35 <tfoot>

36 <tr>

37 <th>Total</th>

38 <th>$3.75</th>

39 </tr>

40 </tfoot>

41

42 

43 

44 <tbody>

45 <tr>

46 <td>Apple</td> 

47 <td>$0.25</td>

48 </tr>

49

50 <tr>

51 <td>Orange</td>

52 <td>$0.50</td>

53 </tr>

54

55 <tr>

56 <td>Banana</td>

57 <td>$1.00</td>

58 </tr>

59

60 <tr>

61 <td>Pineapple</td>

62 <td>$2.00</td>

63 </tr>

64 </tbody>

65

66 </table>

67

68 </body>

69 </html>

XHTML Tables and Formatting Element colgroup

Groups and formats columns Element col

Attribute align Determines the alignment of text in the column

Attribute span Determines how many columns the col element formats rowspan and colspan

Specify the number of rows or columns occupied by a cell valign

Aligns data vertically One of the four values: “top”, “middle”, “bottom”, “baseline”

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Tables</title>

11 </head>

12

13 <body>

14

15 <h1>Table Example Page</h1>

16

17 <table border = "1">

18 <caption>Here is a more complex sample table.</caption>

19

20 

21 

22 <colgroup>

23

24 

25 

26 <col align = "right" span = "1" />

27 </colgroup>

29 <thead>

30 

31 

32 <tr>

33 

34 <th rowspan = "2">

35 <img src = "camel.gif" width = "205" height = "167" alt = "Picture of a camel" />

36 </th>

37 

38 <th colspan = "4" valign = "top">

39 <h1>Camelid comparison</h1><br />

40 <p>Approximate as of 9/2002</p>

41 </th>

42 </tr>

43 </tr>

44

45 </tbody>

46

47 </table>

48

49 </body>

50 </html>

Basic XHTML Forms Element form

Attribute method Specifies how the form’s data is sent to Web server method = “post”

Appends form data to the browser request method = “get”

Appends form data directly to the end of the URL

Attribute action Specifies the URL of a script on the Web server

input Specifies data to provide to the script that processes the form

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Forms</title>

11 </head>

12

13 <body>

14

15 <h1>Feedback Form</h1>

16

17 <p>Please fill out this form to help

18 us improve our site.</p>

19

20 

21 

22 

23 <form method = "post" action = "/cgi-bin/formmail">

24

25 <p>

26 

27 

28 <input type = "hidden" name = "recipient"

29 value = "[email protected]" />

30 <input type = "hidden" name = "subject"

31 value = "Feedback Form" />

32 <input type = "hidden" name = "redirect"

33 value = "main.html" />

34 </p>

35 

36 <p><label>Name:

37 <input name = "name" type = "text" size = "25"maxlength = "30" />

38 </label></p>

39 <p>

40 

41 

42 

43 <input type = "submit" value ="Submit Your Entries" />

44 <input type = "reset" value ="Clear Your Entries" />

45 </p>

46 </form>

47 </body>

48 </html>

49

50

More Complex XHTML Forms Element textarea

Inserts a multiline text box (text area) Attribute rows

Specifies the number of rows Attribute cols

Specifies the number columns Input “password”

Inserts a password box with the specified size Element checkbox

Enable users to select from a set of options Element select

Provides a drop-down list of items Element option

Adds items to the drop-down list Attribute selected

Specifies which item initially is displayed as the selected item

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Forms</title>

11 </head>

12

13 <body>

14

15 <h1>Feedback Form</h1>

16

17 <p>Please fill out this form to help

18 us improve our site.</p>

19

20 <form method = "post" action = "/cgi-bin/formmail">

21

22 <p>

23 <input type = "hidden" name = "recipient"

24 value = "[email protected]" />

25 <input type = "hidden" name = "subject"

26 value = "Feedback Form" />

27 <input type = "hidden" name = "redirect"

28 value = "main.html" />

29 </p>

30

31 <p><label>Name:

32 <input name = "name" type = "text" size = "25" />

33 </label></p>

34

35 

36 <p><label>Comments:<br />

37 <textarea name = "comments" rows = "4" cols = "36">

38 Enter your comments here.

39 </textarea>

40 </label></p>

41

42 

43 

44 

45 <p><label>E-mail Address:

46 <input name = "email" type = "password"

47 size = "25" />

48 </label></p>

49

50 <p>

51 <strong>Things you liked:</strong><br />

52

53 <label>Site design

54 <input name = "thingsliked" type = "checkbox"

55 value = "Design" /></label>

56

57 <label>Links


59 value = "Links" /></label>

60

61 <label>Ease of use


63 value = "Ease" /></label>

64

65 <label>Images


67 value = "Images" /></label>

68

69 <label>Source code


71 value = "Code" /></label>

72 </p>

73

74 <p>

75 <input type = "submit" value =

76 "Submit Your Entries" />

77 <input type = "reset" value =

78 "Clear Your Entries" />

79 </p>

80

81 </form>

82

83 </body>

84 </html>

Internal Linking Mechanism that Enables the user to jump between

locations in the same document It is useful for long documents that contain many

sections <a name=“……….."> ……Tag

Create internal hyperlink To link this type of anchor inside the web page

<a href=“#.......”> Internal link’s address start with a pound sign

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - List</title> </head> <body>  <p> <a name="Z"></a></p> <h1> The Best Features of the Internet</h1>  <p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p> <ul> <li>You can meet people from countries </li> <li>You have access to new media as it becomes public: <ul> <li>New games</li> <li>New applications></li> <li>For Pleasure</li> <li>Links</li> </ul>  <h1 > <a name = "bugs">My 3 Favorite Bugs</h1></a> <p>  <a href = "#Z">Go to <em>Favorite Features</em> </a></p> <ol> <li>Fire Fly</li> </ol> </body> </html>

meta Elements Specify information about a document

Attribute name Identifies the type of meta element “keywords” ( name = “keywords” )

Provides search engines with a list of words that describe a page

“description” ( name = “description” ) Provides a description of a site

Attribute content Provides the information search engine use to catalog

pages

4

5 

6 

7


9 <head>


11

12 

13 

14 <meta name = "keywords" content = "Web page, design,

15 XHTML, tutorial, personal, help, index, form,

16 contact, feedback, list, links, frame, deitel" />

17

18 <meta name = "description" content = "This Web site will

19 help you learn the basics of XHTML and Web page design

20 through the use of interactive examples and

21 instruction." />

22

23 </head>

24

25 <body>

26

27 <h1>Welcome to Our Web Site!</h1>

28

29 <p>We have designed this site to teach about the wonders

30 of <strong><em>XHTML</em></strong>. <em>XHTML</em> is

31 better equipped than <em>HTML</em> to represent complex

32 data on the Internet. <em>XHTML</em> takes advantage of

33 XML’s strict syntax to ensure well-formedness. Soon you

34 will know about many of the great new features of

35 <em>XHTML.</em></p>

36

37 <p>Have Fun With the Site!</p>

38

39 </body>

40 </html>

frameset Element Allow browser display more than one document simultaneously

Element frameset Attribute cols

Specifies the frameset’s column layout Attribute rows

Specifies the number of rows and the size of each row Element frame

Specifies the documents that will be loaded Attribute src

Specifies URL of the page to display

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Main</title>

11 <meta name = "keywords" content = "Webpage, design,



14



17 through the use of interactive examples

18 and instruction." />

19

20 </head>

21

22 

23 <frameset cols = "110,*">

24

25 

26 

27 <frame name = "leftframe" src = "nav.html" />

28 <frame name = "main" src = "main.html" />

29

30 <noframes>

31 <body>

32 <p>This page uses frames, but your browser does not

33 support them.</p>

34

35 <p>Please, <a href = "nav.html">follow this link to

36 browse our site without frames</a>.</p>

37 </body>

38 </noframes>

39

40 </frameset>

41 </html>

frameset Element <frame name = “main" src = "nav.html" /> Attribute name identifies a frame,

Load links.html in the frame whose name is “main”

<a href = "links.html" target = "main"> Target frame attribute linked document should display

when the user clicks the link

noframe elememts To direct user to a noframeed version of your site

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4

5 

6 

7


9

10 <head>

11 <title>Internet and WWW How to Program - Navigation Bar

12 </title>

13 </head>

14

15 <body>

16

17 <p>

18 <a href = "links.html" target = "main">

19 <img src = "buttons/links.jpg" width = "65"

20 height = "50" alt = "Links Page" />

21 </a><br />

22

23 <a href = "list.html" target = "main">

24 <img src = "buttons/list.jpg" width = "65"

25 height = "50" alt = "List Example Page" />

26 </a><br />

27

28 <a href = "contact.html" target = "main">

29 <img src = "buttons/contact.jpg" width = "65"

30 height = "50" alt = "Contact Page" />

31 </a><br />

32

33 <a href = "header.html" target = "main">

34 <img src = "buttons/header.jpg" width = "65"

35 height = "50" alt = "Header Page" />

36 </a><br />

37

38 <a href = "table1.html" target = "main">

39 <img src = "buttons/table.jpg" width = "65"

40 height = "50" alt = "Table Page" />

41 </a><br />

42

43 <a href = "form.html" target = "main">

44 <img src = "buttons/form.jpg" width = "65"

45 height = "50" alt = "Feedback Form" />

46 </a><br />

47 </p>

48

49 </body>

50 </html>

Nested framesets framesets within framesets

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Main</title>

11

12 <meta name = "keywords" content = "Webpage, design,



15



18 through the use of interactive examples

19 and instruction." />

20

21 </head>

22

23 <frameset cols = "110,*">

24 <frame name = "leftframe" src = "nav.html" />

25

26 

27 

28 <frameset rows = "175,*">

29 <frame name = "picture" src = "picture.html" />

30 <frame name = "main" src = "main.html" />

31 </frameset>

32

33 <noframes>

34 <body>

35 <p>This page uses frames, but your browser does not

36 support them.</p>

37

38 <p>Please, <a href = "nav.html">follow this link to

39 browse our site without frames</a>.</p>

40 </body>

41 </noframes>

42

43 </frameset>

44 </html>

Web Resourceswww.vbxml.com/xhtml/articles/

xhtml_tables www.webreference.com/xml/reference/

xhtml.html

Cascading

Style Sheets™ (CSS)

Introduction Cascading Style Sheets (CSS)

Separation of structure from presentation

Allow you to specify the presentation of elements on the web page like (spacing, margins….etc).

Inline Styles Declare an individual element’s format

Attribute style CSS property

Followed by a colon and a value

<P style=”font-size:20pt ; color:#0000ff”>

……………<em>…….</em>………….

………………………………….</p>

4

5 

6 

7


9 <head>

10 <title>Inline Styles</title>

11 </head>

12

13 <body>

14

15 <p>This text does not have any style applied to it.</p>

16

17 

18 

19 

20 <p style = "font-size: 20pt">This text has the

21 <em>font-size</em> style applied to it, making it 20pt.

22 </p>

23

24 <p style = "font-size: 20pt; color: #0000ff">

25 This text has the <em>font-size</em> and

26 <em>color</em> styles applied to it, making it

27 20pt. and blue.</p>

28

29 </body>

30 </html>

Embedded Style Sheets Embed an entire CSS document in an XHTML

document’s head section Property background-color

Specifies the background color

Property font-family Specifies the name of the font to use

Property font-size Specifies a 14-point font

4

5 

6 

7


9 <head>

10 <title>Style Sheets</title>

11

12 

13 <style type = "text/css">

14

15 em { background-color: #8000ff;

16 color: white }

17

18 h1 { font-family: arial, sans-serif }

19

20 p { font-size: 14pt }

21

22 .special { color: blue }

23

24 </style>

25 </head>

26

27 <body>

28

29 

30 <h1 class = "special">Deitel & Associates, Inc.</h1>

31

32 <p>Deitel & Associates, Inc. is an internationally

33 recognized corporate training and publishing organization

34 specializing in programming languages, Internet/World

35 Wide Web technology and object technology education.

36 Deitel & Associates, Inc. is a member of the World Wide

37 Web Consortium. The company provides courses on Java,

38 C++, Visual Basic, C, Internet and World Wide Web

39 programming, and Object Technology.</p>

40

41 <h1>Clients</h1>

42 <p class = "special"> The company's clients include many

43 <em>Fortune 1000 companies</em>, government agencies,

44 branches of the military and business organizations.

45 Through its publishing partnership with Prentice Hall,

46 Deitel & Associates, Inc. publishes leading-edge

47 programming textbooks, professional books, interactive

48 CD-ROM-based multimedia Cyber Classrooms, satellite

49 courses and World Wide Web courses.</p>

50

51 </body>

52 </html>

Linking External Style Sheets External style sheets

Can provide uniform look and feel to entire site you can change the look of an entire Web site by changing

one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section. The rel attribute to specify the relationship between the

current document and another document. The type attribute specifies the type of the document The href attribute provides URL for the document

containing the style sheet

1 /* Fig. 6.4: styles.css */

2 /* An external stylesheet */

3

4 a { text-decoration: none }

5

6 a:hover { text-decoration: underline;

7 color: red;

8 background-color: #ccffcc }

9

10 li em { color: red;

11 font-weight: bold;

12 background-color: #ffffff }

13

14 ul { margin-left: 2cm }

15

16 ul ul { text-decoration: underline;

17 margin-left: .5cm }

styles.css

4

5 

6 

7


9 <head>

10 <title>Linking External Style Sheets</title>

11 <link rel = "stylesheet" type = "text/css"

12 href = "styles.css" />

13 </head>

14

15 <body>

16

17 <h1>Shopping list for <em>Monday</em>:</h1>

18 <ul>

19 <li>Milk</li>

20 <li>Bread

21 <ul>

22 <li>White bread</li>

23 <li>Rye bread</li>

24 <li>Whole wheat bread</li>

25 </ul>

external.html

26 </li>

27 <li>Rice</li>

28 <li>Potatoes</li>

29 <li>Pizza <em>with mushrooms</em></li>

30 </ul>

31

32 <p>

33 <a href = "http://www.food.com">Go to the Grocery store</a>

34 </p>

35

36 </body>

37 </html>

The :hover pseudo-class adds a special style to an element when you mouse over it.

A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser:

Example : a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

http://www.w3schools.com/css/default.asp

JavaScript: Introduction to Scripting

JavaScript: Introduction to Scripting JavaScript is a scripting language introduced and licensed by

Netscape. It is used as a platform between user and application,

e.g. to enable users to design visually attractive interactive web sites.

JavaScript is an easy-to-use programming language that can be embedded in the header of your web pages.

It can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, and create security passwords and more.

JavaScript: Introduction to Scripting Client-side scripting

Enhances functionality and appearance Makes pages more dynamic and interactive Foundation for complex server-side scripting Client-side scripting is often used for validation,

interactivity, accessing the browser and enhancing a web Dynamic HTML and java applet.

Validation reduces the number of requests the server receives and therefore reduces the amount of work the server must perform.

JavaScript: Introduction to Scripting Server-side scripting Interactivity allows the user to make decisions like

click buttons, play games. Dynamic HTML and Java applets enhance a web

appearance by providing functionality richer than HTML.

Server-side scripting uses information sent by the client, this information stored in the server’s memory and information from the internet to create web pages.

ASP (Active Server Page) ASP is a Microsoft technology for sending to the

client dynamic web content which includes HTML, DHTML, client-side scripts and java program.

ASP provide several built-in objects to offer a programmer straightforward method for communication with web browsers. ASP gathering data sent by an HTTP request and

distinguishing between users; ASP process the response to the client; ASP file has the

extension of .asp, ASP generate Dynamic Web content.

ASP (Active Server Page) HOW ACTIVE SERVER PAGES WORK

When a server receives a clients HTTP request, the server loads the document (or page)

requested by the client, all clients see the same content when requesting an HTML document;

the ASP processes the request and returns the result to the client normally in the form of an HTML.

Multimedia & Macromedia Flash Multimedia

Use of different media in a computers program include text, graphic, audio, video and animation we called multimedia.

Macromedia Flash Is an application for creating interactive, animated

movie, it could be any thing from a web-based manner advertisement to fully functional animated web side, flash movie can be embedded in web page.

Microsoft FrontPage Express To start making your own web pages, we need constant

attention, maintenance and updating. Many tools have appeared on market to help the web developer.

Many companies have written web design software for non-programmers, make it easier for a wider range of people to establish a presence in the world wide web.

It is useful for speeding up tasks such as coding large tables. FrontPage Express is one of this tools, this tools is a

WYSIWYG (What You See Is What You Get) display, and it is saves you the often amount of time that can be spent switching between browser and editor when writing HTML directly.

<?xml version = "1.0"?>

<!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>Printing a Line with Multiple Statements</title> <script type = "text/javascript"> window.alert( "Welcome to\nMy\nWeb Site!" ); document.write( "<h1 style = \"color: magenta\">" ); document.write( "Welcome to JavaScript " + "Programming!</h1>" ); </script> </head><body></body> </html>

coa 102 internet application. course objectives: design and implement a web page. recognize the...

Documents

computer system

computer computers

particular computer

computer usage

computer games

hardware design of computer

memory unit

input unit