coa 102 internet application
course objectives: Design and implement a web page. p Recognize the scope of different internet applications. p Recognize the significance of legal, social, ethical and professional issues. p Work individually and /or as team member to develop internet applications. p Plan, define and execute, web site development activities p Explain good web site design practices. p
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 (W 3 C) ü How is the data travel through the internet Basic Type of Web Site Guideline to evaluate the value of the web Important abbreviations p ü ü ü ü ü
what is a computer p Computer: Electronic device operating under the control of instructions stored in its own memory. n Device capable of Performing computations p Making logical decisions. p n n Works billions of times faster than human beings Fastest supercomputers today p Perform hundreds of billions of additions per second
what is a computer p Computers perform three main operations: n n n Receive input( Data row Fact) Process it a according to predefined instructions. Produce output (information which is meaningful data). o Computer System The 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 unit q. Computer main Unit Processor Every computer divided into six units: Control Unit Instructions Data Information 1. Input Unit 2. Output Unit 3. Memory Unit 4. ALU (Arithmetic & Logical Unit) 5. Central Processing Unit (CPU) 6. Secondary storage unit Arithmetic Logic Unit (ALU) Input Devices Data Memory Instructions Data Information Storage Devices Information Output Devices
machine cycle p Machine Cycle Step 1. Fetch Obtain program instruction or data item from memory Memory Step 2. Decode Step 4. Store Translate instruction into commands Write result to memory Processor ALU Step 3. Execute Carry out command Control Unit
computer programs Called software n Programmers write instructions that comprise software in various programming languages Three general types of programming languages n p n n n Machine languages Assembly languages (Low Level Language) High-level languages
computer programs p Machine languages n n n “Natural language” of a particular computer Defined by hardware design of computer Generally consists of strings of numbers
computer programs p Assembly languages p is a low-level language for programming computers. n Represents elementary operations of computer n Translator programs called assemblers convert assembly-language to machine-language n Example: LOAD BASEPAY ADD OVERPAY STORE GROSSPAY
computer programs p High-level languages n n n 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 everyday English Example: gross. Pay = base. Pay + over. Time. Pay
network & internet q Network: Collection of computers and devices connected via communications devices and transmission media. q Internet: Worldwide collection of networks that connects million of businesses, government agencies, educational institution, and individuals.
history of the internet p ARPAnet n Implemented in late 1960’s by ARPA (Advanced Research Projects Agency of DOD) n Networked computer systems of a dozen universities and institutions with 56 KB communications lines n Grandparent of today’s Internet n Intended to allow computers to be shared n Became clear that key benefit was allowing fast communication between researchers – electronic-mail (email)
history of the internet p ARPA’s goals n n Allow multiple users to send and receive info at same time Network operated packet switching technique Digital data sent in small packages called packets p Packets contained data, address info, error-control info and sequencing info p Greatly reduced transmission costs of dedicated communications lines p n Network designed to be operated without centralized control p If portion of network fails, remaining portions still able to route packets
history of the internet p Transmission Control Protocol (TCP) n n n 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) p World Wide Web it is a collection of electronic documents also called the web n Allows computer users to locate and view multimediabased documents n Introduced in 1990 by Tim Berners-Lee
world wide web consortium (w 3 c) p W 3 C n n Founded in 1994 by Tim Berners-Lee p Devoted to developing non-proprietary and interoperable technologies for the World Wide Web and making the Web universally accessible Standardization p W 3 C Recommendations: technologies standardized by W 3 C § include Extensible Hyper. Text Markup Language (XHTML), Cascading Style Sheets (CSS) and the Extensible Markup Language (XML) p Document must pass through Working Draft, Candidate Recommendation and Proposed Recommendation phases before considered for W 3 C Recommendation p W 3 C homepage at www. w 3. 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 p URL: (Universal Resource Locator) Unique address for a Web page
top-level domain names
basic type of web site p p p p 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 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 p p p p Affiliation. Audience. Authority. Content. Currency. Design. Objectivity.
important abbreviations p p p p 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 p p p p 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
microsoft internet explorer 6 p OUT LINE • Introduction to the Internet Explorer 6 Web Browser Connecting to the 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 • • •
microsoft internet explorer 6 p Internet is an essential medium to communicating and interact with people wide world n Web Browsers p Software that allows users to view Web content § Microsoft Internet Explorer § Netscape Navigator § Others
microsoft internet explorer 6 q Connecting to the Internet n Computer hardware p Modem § Transmits data over phone lines § Converts data to audio tones and transmits the data over the phone line p Network card (NIC) § Connect to the internet through a network or high-speed connection § Cable modem § Digital Subscriber Line (DSL) p Internet Service Provider (ISP) n n n You have to register with an ISP connect computer to internet Commercial p p AOL (www. aol. com) du ( www. du. ae)
microsoft internet explorer 6 p Internet Service Provider (ISP), cont. n Considerations Cost p Bandwidth p § Amount of data transferred through communications medium in a fixed amount of time n Broadband connection Refer to high speed connection p Constantly connected p 100’s of kbps (kilo-bits per second) p DSL (Digital Subscriber Line) p § Uses existing phone lines § Requires DSL modem
microsoft internet explorer 6 n Broadband, cont. p Cable Modem § Use cable television lines § Requires cable modem p ISDN (Integrated Services Digital Network) § Uses digital or standard telephone lines § Requires a terminal adaptor n Dial-up connection Uses existing phone lines p Interferes with phone use p Must dial-up with modem. p Usually 56 kbps (kilo-bits per second) p
microsoft internet explorer 6 p Internet Connection Wizard n n 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
microsoft internet explorer 6 p Web browser n Program which displays Internet content p p n Microsoft Internet Explorer 6 Netscape 7. 1 URL (Universal Resource Locator) p Web page address § HTTP (hyper-text transfer protocol) § Protocol for transferring data over the Internet p n Type in Address field Hyperlinks p Graphical or textual elements § Click to link to another Web page § Loads new page into browser window
microsoft internet explorer 6 Address bar Forward Recent history Stop Refresh Back Go Pointer (over a hyperlink) Scroll bars
microsoft internet explorer 6 Interactive History window History date options Content window Site from folder Web site folder
microsoft internet explorer 6 p Web browser, cont. n Auto complete Completes Web address as it is being typed p Completes form information as it is being typed p n File options p Save Web page for off-line use § File > Save As p Save pictures from a Web site § Right click image § Choose Save Picture As…
microsoft internet explorer 6 Auto. Complete suggests possible URLs when given a partial address. Partial address URLs
microsoft internet explorer 6 Saving a picture from a Web site.
microsoft internet explorer 6 p Search engines n n Web sites that sort through by keywords and categories find Web sites and Web pages by entering words or phrases called search text. p p p n n p 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 n n n Do not maintain databases Aggregate results from multiple search engines Microsoft Network (www. msn. com) p Click Search button in toolbar
microsoft internet explorer 6 p Searching the Internet with IE 6 Search button New search Search window Toolbar Search words Search categories
microsoft internet explorer 6 p IE 6 built-in help feature n Help > Tour p Overview of IE 6 n Help > Contents and Index p Search for help on specific topic
microsoft internet explorer 6 IE 6 Help dialog. Categories Help menu
microsoft internet explorer 6 Keeping Track of Favorite Sites p Favorites p n n List organizes frequently-visited sites Add sites to list p n Favorites > Add to Favorites… Organize list p Favorites > Organize Favorites…
microsoft internet explorer 6 Favorites menu helps organize frequently visited Web sites. Favorites Add/Organize Favorites dialog Favorites window Site information
microsoft internet explorer 6 p E-mail (electronic mail) n n Delivers formatted messages over Internet E-mail address p n Username @ domainname Email Programs Outlook Express p other p n Free email accounts Hotmail (www. hotmail. com) p Yahoo! (mail. yahoo. com) p
microsoft internet explorer 6 p E-mail (electronic mail), cont. n n Post Office Protocol (POP) to retrieve e-mail from a remote server over a TCP/IP connection p p p n Internet Message Access Protocol (IMAP) p p p n Remote server Download to local client E-mail scattered 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) p Used to send e-mail
microsoft internet explorer 6 Outlook Express e-mail main screen. . Message toolbar items Mailboxes Message list Preview pane
microsoft internet explorer 6 p Instant Messaging n n n Communicate (“chat”) in real time Send audio, video and files Several popular services AOL Instant Messenger (www. aim. com) p Yahoo! Messenger (messenger. yahoo. com) p ICQ (web. icq. com) p MSN Messenger (messenger. msn. com) p n Trillian (www. trillian. cc) p Able to communicate with all of the above
microsoft internet explorer 6 p Instant Messaging, cont. n Some instant messaging tools designed for collaboration Net. Meeting p Windows Messenger p Include whiteboard feature to share drawings p n Screen name p n Unique identifier Buddy List p Maintains list of screen names
microsoft internet explorer 6 Buddy list and an instant message. Instant message Buddy list
microsoft internet explorer 6 Other Browsers p Alternatives to Internet Explorer and Netscape n Offer new/different features and layout engines p Mozilla (www. mozilla. org) § Uses Gecko layout engine, basis for Netscape 7. 1 p Opera (www. opera. com) § Lightweight p Amaya (www. w 3. org/Amaya) § Browser/editor § Demonstrates W 3 C standards n Each layout engine displays websites differently p Testing on multiple browsers important
Introduction to E-Commerce
introduction to e-commerce p Electronic Commerce (e-commerce) n The processing of buying and selling via the Internet n M-Commerce p Describes e-commerce conducted over a wireless device such as a cell phone or personal digital assistant (PDA).
introduction to e-commerce p Types of E-Commerce Business n business-to-consumer (B-to-C or B 2 C) e-commerce p n Consumer benefits of B 2 C p n Sale of products or services from a business to the general public a. Lower prices b. Wider choice. c. Better information, d. Convenience Business benefits of B 2 C p 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 p Consumer-to-Consumer (C-to-C or C 2 C) e. Commerce n This is where consumers purchase from each other. This is typically done through an online auction. The biggest C 2 C 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 p Business-to-Business (B-to-B or B 2 B) e-commerce n Sale and exchange of products and service between businesses via the web, or business that is conducted over the Internet Types of B 2 B e-commerce sites vendor B 2 B: Product supplier allows purchasing agents to use network to shop, submit request for quotes (RFQs), and purchase items brokering B 2 B Acts as middleman by negotiating contract of purchase and sale service B 2 B Uses network to provide one or more services to business infomediary B 2 B Provides specialized information about suppliers and other businesses
introduction to e-commerce vertical B 2 B e-commerce p E-commerce site specializing in a particular industry n Business-to-Employee (B-to-E or B 2 E) ecommerce n n n Use of intranet technology to handle activities that take place within a business. Increases profits by reducing expenses within a company. Also called Intrabusiness
introduction to e-commerce p Advantages of e-commerce n n n n n 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 p THE ELEMENTS OF E-COMMERCE An e-commerce business should be planned out carefully and necessary steps should be follow n 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. n 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 n 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. n 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. n 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. n 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-commerce p E-Business n 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. n The combination of a company’s policy, operations, technology, and ideology define the company e-business model.
introduction to e-commerce p E-Business Models n n n 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 p Storefront Model n n Model which combines transaction processing, security and information storage to allow merchants to sell their products on the web. To conduct storefront business model: p p 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 p Auction Model n n n 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 p Portal model n n 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 p Dynamic Pricing Models n Dynamic pricing sites enable the customers to name their prices for the product
introduction to e-commerce p Click- and - Mortar business n n n 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 p Difference between E-Commerce and E-Business n n n 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 p Real space n n p Our physical environment consisting of temporal and geographic boundaries In real space, we operate under a code of law and ethics Cyberspace n n 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 p Technology and the issue of privacy p p Internet a Self-regulated medium n p The Internet industry governs itself Many Internet companies collect users’ personal information n Privacy advocates argue that these efforts violate individuals’ privacy rights
legal issues: privacy on the internet n p 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 n Establishes a set of regulations concerning the management of consumer information p n 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 p Tracking Devices n n 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) p Click through advertisements ( billboards) : consumers can view the service or product by clicking on the advertisement. p Web bug : allow affiliates to gather consumer information. p
legal issues: privacy on the internet p Cookies n n 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 p 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 p Cookies can be beneficial to consumer n n n They record passwords for returning visit Keep track of shopping-cart materials Keep track of register preferences p p 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 p Network Advertising Initiative (NAI) n p p 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 p Keystroke cop n n n p 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 n Determining factors p p n Employee have a reasonable expectation of privacy Business have Legitimate business interests Reasons for surveillance p p p Slower transmission times Harassment suits Low productivity
legal issues: other areas of concern p Defamation is the act of injuring another’s reputation. Honor or good name through written or oral communication Defamation has two part n Slander p n Spoken defamation Libel Defamatory statements written or spoken in a context in which they have longevity and pervasiveness that exceed slander p Example : broadcasting is considered libelous even though it is spoken. p
legal issues: other areas of concern p Proving defamation To prove defamation a plaintiff must meet five requirements: n n n 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 p Copyright n n n 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 p Online Auctions n n Question of government regulation International regulation of auctions p n n Auctions are regulated by government on several levels Copyright infringement and auction aggregation services Shill bidding p Sellers bid for their own items to increase the bid price
cybercrime p p p 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 n p 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 n Web page is used as a gateway (the intermediary between one site and another) to another site
social issues p Online Communities n n n 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 p We learn about each other through conversation p
introduction to xhtml part 1
objectives p In this chapter, you will learn: n n n 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 p HTML stands for Hyper Text Markup Language. n 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 n HTML is the character-based method for describing and expressing the content. The content is pictures, text, sound and video clips.
html p p p 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 p p p p 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? p A text editor is required to write HTML document. n n 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: p Each HTML document has the same basic structure: n n <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 p Every Web page you create must include the <HTML>, <HEAD>, <TITLE>, and <BODY> tags.
extensible hypertext markup language n n n A markup language XHTML stands for Extensible Hypertext Markup Language Based on HTML p n n n Technology of the World Wide Web Consortium (W 3 C) 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 p XHTML documents n Source-code form n Text editor (e. g. Notepad, Wordpad, emacs, etc. ) n. html or. htm file-name extension n Web server p Stores XHTML documents n Web browser p Requests XHTML documents
first xhtml example p XHTML comments n Start with <!-- and end with --> n html element p head element § Head section § Title of the document § Style sheets and scripts p body element § Body section § Page’s content the browser displays n Start tag p attributes (provide additional information about an element) § name and value (separated by an equal sign) n End tag
1 <? xml version = "1. 0"? > 2 <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN" 3 "http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd"> 4 5 <!-- Fig. 4. 1: main. html --> 6 <!-- Our first Web page --> 7 8 9 10 11 <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome</title> </head> 12 13 14 15 16 <body> <p>Welcome to XHTML!</p> </body> </html>
w 3 c xhtml validation service free service by W 3 C that helps check the validity of Web documents p The act of checking a document against these constraints is called validation p Checking a document’s syntax p p URL that specifies the location of the file p Uploading a file to the site validator. w 3. org/file-upload. html
Six headers ( header elements) h 1 through h 6
linking p Hyperlink n References other sources such as XHTML documents and images n Both text and images can act as hyperlinks n Created using the a (anchor) element p Attribute href § Specifies the location of a linked resource p Link to e-mail addresses using mailto: URL
image p p p Three most popular formats n Graphics Interchange Format (GIF) n Joint Photographic Experts Group (JPEG) n Portable Network Graphics (PNG) n img element p src attribute § Specifies the location of the image file p width and height Pixels (“picture elements”) br element n Line break
special characters and more line breaks Some characters have a special meaning in HTML like ( “ < “) p A character entity has three parts: p n n 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; ) p Numeric character references (e. g. & ) p
special characters and more line breaks del n Strike-out text p sup n Superscript text p sub n Subscript text p <hr /> n Horizontal rule (horizontal line) p
html lists: p HTML supports ordered, unordered and definition lists. n Unordered list element ul p Creates a list in which each item begins with a bullet symbol (called a disc) p li (list item) § Entry in an unordered list
html lists: p Nested and Ordered Lists n Represent hierarchical relationships n Ordered lists (ol) p created using the OL element p Creates a list in which each item begins with a number
html lists: p <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. . . q </UL>
html lists: p Definition Lists n A definition list is not a list of items. n list of terms and explanation of the terms. n 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. n n <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. w 3. org/TR/xhtml 11 p www. xhtml. org p www. w 3 schools. com/xhtml/default. asp p validator. w 3. org p hotwired. lycos. com/webmonkey/00/50/index 2 a. html p wdvl. com/Authoring/Languages/XML/XHTML p www. w 3. org/TR/2001/REC-xhtml 11 -20010531 p
introduction to xhtml part 2
objectives p In this lesson, you will learn: n n n 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 Webpage 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 p Tables n p Forms n p Collect information from visitor Internal linking n p Present information Enhance Web page navigation Frames n Display multiple documents in the browser
basic xhtml tables p p Organize data into rows and columns table element n Attribute border p Specifies the table’s border width in pixels n Attribute summary p Describes the table’s contents n Attribute caption p Describes the table’s content and helps text-based browsers interpret table data n Head section (header cell, defined with a thead element) p Contains header information such as column names p tr element (defines an individual table row) p th element (defines the columns in the head section) n Foot section (defined with a tfoot element) n Table body (defined with a tbody element) n Data cells (defined with td element
xhtml tables and formatting p Element colgroup n p Groups and formats columns Element col n Attribute align p n Determines the alignment of text in the column Attribute span p p Determines how many columns the col element formats rowspan and colspan § Specify the number of rows or columns occupied by a cell n valign p Aligns data vertically p One of the four values: “top”, “middle”, “bottom”, “baseline”
basic xhtml forms p Element form n Attribute method Specifies how the form’s data is sent to Web server p method = “post” p § Appends form data to the browser request p method = “get” § Appends form data directly to the end of the URL n Attribute action p n Specifies the URL of a script on the Web server input p Specifies data to provide to the script that processes the form
more complex xhtml forms p p Element textarea n Inserts a multiline text box (text area) n Attribute rows p Specifies the number of rows n Attribute cols p Specifies the number columns n Input “password” p Inserts a password box with the specified size Element checkbox n Enable users to select from a set of options Element select n Provides a drop-down list of items Element option n Adds items to the drop-down list n Attribute selected p Specifies which item initially is displayed as the selected item
internal linking Mechanism that Enables the user to jump between locations in the same document p It is useful for long documents that contain many sections p n <a name=“………. . "> ……Tag Create internal hyperlink p To link this type of anchor inside the web page p n <a href=“#. . . . ”> p Internal link’s address start with a pound sign
meta elements p Specify information about a document n Attribute name p Identifies the type of meta element p “keywords” ( name = “keywords” ) § Provides search engines with a list of words that describe a page p “description” ( name = “description” ) § Provides a description of a site n Attribute content p Provides the information search engine use to catalog pages
frameset element p Allow browser display more than one document simultaneously n Element frameset p Attribute cols § Specifies the frameset’s column layout p Attribute rows § Specifies the number of rows and the size of each row p Element frame § Specifies the documents that will be loaded § Attribute src § Specifies URL of the page to display
frameset element <frame name = “main" src = "nav. html" /> p Attribute name identifies a frame, p n p <a href = "links. html" target = "main"> n p Load links. html in the frame whose name is “main” Target frame attribute linked document should display when the user clicks the link noframe elememts n To direct user to a noframeed version of your site
nested framesets p framesets within framesets
web resources p www. vbxml. com/xhtml/articles/xhtml_ta bles p www. webreference. com/xml/reference/x html
cascading style sheets™ (css)
introduction p Cascading Style Sheets (CSS) n Separation of structure from presentation n Allow you to specify the presentation of elements on the web page like (spacing, margins…. etc).
inline styles p Declare an individual element’s format n Attribute style n CSS property p Followed by a colon and a value <P style=”font-size: 20 pt ; color: #0000 ff”> ……………<em>……. </em>…………………. </p>
embedded style sheets p Embed an entire CSS document in an XHTML document’s head section n Property background-color p n Property font-family p n Specifies the background color Specifies the name of the font to use Property font-size p Specifies a 14 -point font
linking external style sheets p External style sheets n Can provide uniform look and feel to entire site n 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 n n n
styles. css
external. html
The : hover pseudo-class adds a special style to an element when you mouse over it. p 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: p
Example : n a: link {color: #FF 0000} /* unvisited link */ n a: visited {color: #00 FF 00} /* visited link */ n a: hover {color: #FF 00 FF} /* mouse over link */ n a: active {color: #0000 FF} /* selected link */ p Note: a: hover MUST come after a: link and a: visited in the CSS definition in order to be effective!! p Note: a: active MUST come after a: hover in the CSS definition in order to be effective!! p
p http: //www. w 3 schools. com/css/default. as p
javascript: introduction to scripting
javascript: introduction to scripting p p Java. Script is a scripting language introduced and licensed by Netscape. It is used as a platform between user and application, n e. g. to enable users to design visually attractive interactive web sites. Java. Script 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 p Client-side scripting n Enhances functionality and appearance n Makes pages more dynamic and interactive n Foundation for complex server-side scripting n Client-side scripting is often used for validation, interactivity, accessing the browser and enhancing a web Dynamic HTML and java applet. n 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 p Interactivity allows the user to make decisions like click buttons, play games. p Dynamic HTML and Java applets enhance a web appearance by providing functionality richer than HTML. p 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. p
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. p ASP provide several built-in objects to offer a programmer straightforward method for communication with web browsers. p n n 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) p HOW ACTIVE SERVER PAGES WORK n When a server receives a clients HTTP request, n the server loads the document (or page) requested by the client, all clients see the same content when requesting an HTML document; n the ASP processes the request and returns the result to the client normally in the form of an HTML.
multimedia & macromedia flash Multimedia n Use of different media in a computers program include text, graphic, audio, video and animation we called multimedia. p Macromedia Flash n 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. p
microsoft frontpage express p p 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 nonprogrammers, 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. Front. Page 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 "-//W 3 C//DTD XHTML 1. 0 Strict//EN“ "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>Printing a Line with Multiple Statements</title> <script type = "text/javascript"> window. alert( "Welcome ton. Myn. Web Site!" ); document. write( "<h 1 style = "color: magenta">" ); document. write( "Welcome to Java. Script " + "Programming!</h 1>" ); </script> </head><body></body> </html>
Скачать презентацию coa 102 internet application course objectives Design
cb9322fe2e5410bea3787f9e51bb379c.ppt