Web Development Introduction

Introduction to Web Development

• Tim Berners-Lee created the World Wide Web (WWW) in 1990-1991 at CERN in Geneva, Switzerland.
• The original purpose of the WWW was to provide easy access to cross-referenced documents on the CERN computer network.
• Hypertext linking makes opening other Web pages fast.

Web Page Basics

• A document on the Web is called a Web page.
• A Web page is identified through a unique Uniform Resource Locator (URL).
• URLs are also referred to as Web addresses.
• URLs are a type of Uniform Resource Identifier (URI).
• A Web site is the location on the Internet of the Web pages and related files.
• Web pages are displayed using a program called a Web browser.
• A Web server is a computer that delivers Web pages.
• The most popular Web server software is Apache HTTP Server (Apache).
• The second most popular Web server is Microsoft Internet Information Services (IIS) for Windows.

HTML (Hypertext Markup Language)

• Web pages are created with HTML.
• Web pages are commonly referred to as HTML pages or HTML documents.
• A markup language is a set of characters or symbols defining a document's logical structure.
• HTML is based on Standard Generalized Markup Language (SGML).
• HTML defines elements in a document independent of how they appear.
• HTML has evolved into a language that defines how elements should appear in a Web browser.
• Understanding HTML is critical for web application development along with server programming.

Basic HTML Syntax

• HTML documents are text documents containing formatting instructions as tags.
• HTML tags include formatting commands (boldface or italic) and controls for user input (option buttons or checkboxes).
• Tags are enclosed in brackets (< >) and consist of an opening and a closing tag.
• HTML tutorials can be found at htmldog.com and w3schools.com.

Web Communication Protocols

• A Web page is identified by a unique URL.
• Each URL consists of a protocol (usually HTTP) and the domain name of a Web server, or its Internet Protocol address.
• Hypertext Transfer Protocol (HTTP) manages the hypertext links used to navigate the Web.
• A host is a computer system being accessed by a remote computer.
• A domain name is a unique address for identifying a computer such as a Web server.
• The domain identifier indicates the type of organization (.biz, .com, .edu, .org).
• An Internet Protocol, or IP address, is another way to identify computers/devices connected to the Internet.
• An IP address is a series of four groups of numbers separated by periods.
• Each Internet domain name has a unique IP address associated with it.
• HTTP is a component of Transmission Control Protocol/Internet Protocol (TCP/IP).
• Hypertext Transfer Protocol Secure (HTTPS) provides secure Internet connections for transactions needing security and privacy.

Publishing Your Web Site

• Web hosting options include Hostinger, Hostgator, BlueHost, and GoDaddy.
• Web hosting allows publication of a Web site for public access.
• Internet access types include cable modem, DSL, satellite, dial-up modem, and ISP.
• An Internet Service Provider (ISP) provides Internet access and other services like e-mail.
• ISP advantages for hosting a Web site include fast Internet via fiber-optics, large Web servers, and expertise.
• A domain name is a unique address identifying a computer or Web server on the Internet.

Domain Names

• In Google's US domain name, 'google.com': '.com' is the TLD (most general), and 'google' is the 2LD (most specific).
• In Google UK's domain name, 'google.co.uk': '.com' is the TLD, '.co'* is the 2LD, and 'google' is the 3LD (most specific).

Domain Name Registration

• Select a domain name similar to your business name or describing your Web site.
• Domain names cannot be already in use or trademarked.
• Contact a domain name registrar to check availability and register.
• Domain names are stored in a master database maintained by InterNIC.
• Domain names can be registered for a specific timeframe for a fee.
• Many hosting sites provide registration service.
• Post domain name registration, notify your ISP of the information.

File Transfer Protocol (FTP)

• FTP is a TCP/IP protocol used to transfer files across the Internet.
• FTP transfers files between an FTP client and an FTP server.
• FTP allows you to transfer Web page files to the Web server.
• ISPs provide a username and password to log onto the FTP site to upload files to the FTP server.
• FTP clients include Firefox, Internet Explorer, and WinScp.
• Use your browser to log on to an FTP server and upload files.

Well-Formed Web Pages

• HTML became an Internet standard in 1993 with version 1.0.
• The current version of HTML (4.01) was released in 1999.
• HTML 4.01 is the last version of HTML, replaced by extensible hypertext markup language (XHTML).
• HTML is not suitable for user agents besides Web browsers.

XHTML Document Type Definitions (DTDs)

• A well-formed document should include a declaration, , , and elements.
• A document type definition (DTD) defines elements/attributes for use in a document and rules for their inclusion.

Relating BOM and DOM

• Loading an HTML page into a browser window makes it a Document object, part of BOM.
• BOM is a superset of DOM, possessing objects, methods, and properties not in the DOM structure.

Writing Well-Formed Documents

• Include a declaration and the , , and elements.
• All XHTML documents must use as the root element.
• XHTML is case sensitive.
• All XHTML elements must have a closing tag.
• Attribute values must appear within quotation marks.
• Empty elements must be closed.
• XHTML elements must be properly nested.
• Nesting refers to how elements are placed inside other elements.

Cascading Style Sheets (CSS)

• A single piece of CSS formatting information, like text alignment, is a style.
• Cascading allows Web pages to use CSS info from many sources.
• Cascading: a style applied to a parent element applies to all children elements within; setting the body text to "blue" applies the color to all text elements.
• CSS styles consist of two parts separated by a colon.
• The 'property' refers to a specific CSS style.
• The 'value' determines the style's visual characteristics.
• A CSS property and its value is a declaration or style declaration.

CSS: Style options

• Inline Style: addition of style information to a single element in a document.
• Internal Style Sheets: Create styles that apply to the entire document.
• External Style Sheets: text documents that are used by multiple documents

Web Development and the Webmaster

• Web development, or Web programming, is software application design for a Web site.
• A Webmaster maintains the Web site, monitors traffic, hardware/software maintenance and implements Web page design, authoring, and development

Client/Server Architecture

• Server (“back end”): database from which a client requests information, fulfills information requests by managing or serving the client, and manages data storage.
• A two-tier system has a client that is responsible for the presentation layer and the user interface and a server handles the data storage and processing.
• Client (“front end”): Interface that presents to the user, captures information from user and sends to server.

Advantages of Two-Tier Architecture

• Simple to implement and manage.
• Requires fewer hardware resources, making it cost-effective for smaller applications.
• Achieves faster data retrieval with fewer layers.

Limitations of Two-Tier Architecture

• Scaling is difficult because all processing is done on the server.
• Security is limited to server-client communication.

Three-Tier System Details

• The client tier, a Web browser, provides the user interface.
• The processing tier handles interaction between the Web browser client and data storage.
• The processing tier performs processing or calculations for the client tier, as well as information return to the tier.

JavaScript & Client-Side Scripting

• JavaScript is a client-side scripting language. It allows Web page authors to develop interactive Web pages/sites.
• JavaScript is used by Firefox and Internet Explorer.
• Client-side scripting runs on a local Web browser rather than on a Web server.
• JavaScript can turn static Web pages into games or calculators, change Web page contents after rendering, plus create visual effects like animation, and control the Web browser window itself.

Server-Side Scripting and PHP

• Server-side scripting: scripting language executed from a Web server.
• Hypertext Preprocessor (PHP) is a server-side scripting language used to develop interactive Web sites that is easy to learn, includes object-oriented programming capabilities, and Supports many types of databases (MySQL, Oracle, Sybase, ODBC-compliant).
• PHP is an open-source programming language, meaning the source code can be freely used and modified.
• PHP is unable to access or manipulate a Web browser like JavaScript can.
• PHP exists and executes solely on a Web server, for various types of processing or accessing databases.
• Use client-side scripting to handle user interface and light processing and use server-side scripting for intensive calculations and data storage.

Summary Points

• Tim Berners-Lee created the World Wide Web in 1990-1991.
• TCP/IP (Transmission Control Protocol/Internet Protocol) is a large collection of communication protocols.
• Document Type Definition (DTD) defines elements and attributes used in a document.
• CSS are W3C standards for managing Web page design and formatting.
• A client and a server form a two-tier system.
• A three-tier client/server system consists of the client tier, processing tier, and the data storage tier.
• JavaScript is a client-side language for creating interactive Web pages.
• PHP is a sever-side language for developing interactive Web sites.
• Open source is software with freely-used and modified source code.