1_Introduction.pdf

Web Design Chapter One Introduction to Internet & World-Wide Web Information Technology Department Zanyar Ahmed [email protected] Contents Web (WWW) Web browsers Protocols Static and Dynamic Website Text editors Web programming Languages HTML Type of website Web Design 1 What is Web? Sir Tim B...

Web Design Chapter One Introduction to Internet & World-Wide Web Information Technology Department Zanyar Ahmed [email protected] Contents Web (WWW) Web browsers Protocols Static and Dynamic Website Text editors Web programming Languages HTML Type of website Web Design 1 What is Web? Sir Tim Berners invented WWW in 1989 which commonly known as the web The Web (World Wide Web) consists of information organized into Web pages containing text and graphic images. Web server: a system on the internet contains one or more web site Web site: a collection of one or more web pages Web pages: single disk file with a single file name Home pages: first page in website Web Design 2 Addressing on the Web – IP addressing Each computer on the internet does have a unique identification number, called an IP (Internet Protocol) address. The IP addressing system currently in use on the Internet uses a four-part number. Each part of the address is a number ranging from 0 to 255, and each part is separated from the previous part by period, For example, 106.29.242.17 Web Design 3 Domain Name Addressing Most web browsers do not use the IP address A domain name is a unique name associated with a specific IP address DNS (Domain Name System ) is a software. Domain Name Server. No other computer on the Internet has the same domain name. Web Design 4 HTTP The transfer protocol is the set of rules that the computers use to move files from one computer to another on the Internet. The most common transfer protocol used on the Internet is the Hypertext Transfer Protocol (HTTP). Two other protocols that you can use on the Internet are the File Transfer Protocol (FTP) and the Telnet Protocol Telnet Protocol: is a protocol that provides a command line interface for communication with a remote device or server, Web Design 5 Static Websites ❑Static websites are also known as flat or stationary websites. ❑They are loaded on the client’s browser as exactly they are stored on the web server. ❑ Such websites contain only static information. ❑User can only read the information but can’t do any modification or interact with the information. ❑Static websites are created using only HTML. ❑Static websites are only used when the information is no more required to be modified. 6 Static Web Sites Contents remain unchanged Consists of content such as text, images, videos and so on Static Web sites Focuses on content presentation Simple to design as it provides no interactivity 7 Static Websites 8 Dynamic Websites shows different information at different point of time. It is possible to change a portion of a web page without loading the entire web page. It has been made possible using Ajax technology. 9 Client-side dynamic web page It is processed using client side scripting such as javascript. And then passed in to Document Object Model (DOM). 10 Dynamic Web Sites Allows customization of content and its appearance in browser Data is always up-todate and reliable Dynamic Web Pages Generates content ondemand when user provides input Allows user interaction 11 Dynamic Websites 12 Structure of URL protocol pathname http://spu.edu.iq/en/about/aboutus.html Domain name filename http => Hypertext Transfer Protocol Web Design 13 Browsers A browser is a software program which interprets the HTML documents and displays it on the user’s screen Web Design 14 Layout of web page 1. Title bar – tells you the name of the web page 2. Menu bar – has commands for moving around the webpage, printing, etc 3. Tool bar – short cuts to commands. Each picture represents a command 4. Address bar – webpage address. If you want to go directly to a web page, you will need to know the address. Web Design 15 Client Servers Model Two processes (possibly networked): The client Sends requests to the server Blocks until reply is received The server Processes requests from clients Never blocks Can reply to several clients simultaneously Page request Server response Client running a Web Browser Web Design Server running Web Server Software (IIS, Apache, etc.) 16 Page Request Web Design 17 Web Text Editors There are various forms of HTML editors Web pages can be created and modified by using professional HTML editors. We believe using a simple text editor is a good way to learn HTML. Web Design 18 Web Development Languages HTML and CSS are the two most basic web development languages, and are used to build nearly all webpages on the Internet. Web Design 19 What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page Web Design 20 A categorization based on content 1- Search Engine. (Ex Google or Gig blast , Yahoo , MSN) 2- Information Web Sites. (Ex cricket scores , weather and stock data) 3- Personal Websites. (Ex Krista Gray , Steve jobs) 4- Social Networking. (Ex Facebook, Orkut, LinkedIn) 5- Small Business Websites. (Ex Piccsy , Aaron Porter) 6- Large Business Websites. (Ex Nest , NASA) 7- e-commerce Websites. (Ex ebay.com , amazon.com) 8- Educational Websites. (Ex Glogster, Animoto) 9- Blog. (Ex Content Management System (CMS)) 10-Portfolio. (Developmental (e.g. working) Reflective (e.g. learning) Representational (e.g. showcase)) 21 Summary The Web (WWW) Web servers Web browsers Protocols Text editors Web programming Languages HTML Type of website Web Design 22 End of this chapter