Introduction to Web Technologies PDF

# **MODULE 1** ## Introduction to Web Technologies ### **SUBTOPIC 1** ## The Internet versus the World Wide Web **OBJECTIVES** At the end of this subtopic, you should be able to: 1. Understand the underlying concepts of Web Technologies 2. Differentiate how the Internet and World Wide Web work....

# **MODULE 1** ## Introduction to Web Technologies ### **SUBTOPIC 1** ## The Internet versus the World Wide Web **OBJECTIVES** At the end of this subtopic, you should be able to: 1. Understand the underlying concepts of Web Technologies 2. Differentiate how the Internet and World Wide Web work. 3. Familiarize various computer languages used in the web. The image shows 4 different aspects of the web: * Entertainment - a man watching TV. * Knowledge Source - a tablet displaying a news site. * Finance - a mobile phone displaying a mobile banking login screen. * Ecommerce - a laptop with a shopping cart and a shopping button, along with a backspace key. ### **ABOUT THE** ## **INTERNET** Once and for all, what it really is? A global computer network providing a variety of information and communication facilities, consisting of interconnected networks using standardized communication protocols. Internet addresses are in the form **nnn.nnn.nnn.nnn** where **nnn** must be a number from 0 - 255. This address is known as an **IP address**. The diagram illustrates two PCs connected to the Internet: a computer with IP address 1.2.3.4 and another computer with IP address 5.6.7.8. ### **THE WORLD WIDE WEB** ## **TRIPLE "W"** Internet and Web isn't the same. The World Wide Web (www), often called the "Web", is one of the most commonly used services on the internet. The World Wide Web is a way of accessing information over the medium of the internet. The Web uses the **HTTP**, only one of the languages spoken over the Internet, to transmit data. Hypertext Transfer Protocol is an application-layer protocol for transmitting documents, such as HTML, allowing computers on the world wide web to communicate with one another. The image shows a diagram with two computers: a web server sending an HTTP request, and a client browser receiving an HTTP response. Simple Mail Transfer Protocol Server takes care of delivering emails from one server to another server. When you send an email, it is delivered to its recipient by a SMTP Server. The image shows a hand pointing at a laptop screen which has many emails in it. Tim Berners-Lee, a British scientist at CERN, invented the World Wide Web (WWW) in 1989. The web was originally conceived and developed to meet the demand for automatic information-sharing between scientists in universities around the world. The first website is located at **http://info.cern.ch/**. The image shows a close-up of Tim Berners-Lee. ### **SUBTOPIC 2** ## How the Web Works? **OBJECTIVES** At the end of this subtopic, you should be able to: 1. Determine how the web works using terminologies such as web browser, web server, web page, website, URL, and HTML. 2. Compare the field of web design and web development. **https://www** The image shows a picture of a computer monitor displaying a Facebook page, with links to the website in the address bar. ### **THE WORLD WIDE WEB** ## **TRIPLE "W"** How does the web works? #### **WEBPAGE** It is a document that serves as a storage of Web information. The image shows a generic company website. #### **WEBSITE** It is a collection of web pages linked together to have a common goal. The image shows two generic websites: a company site and a blog. #### **WEB BROWSER** A software application for presenting and traversing information on the Web. The image shows the logos for different web browsers including Chrome, Firefox, and Internet Explorer. #### **WEB SERVER** A computer that serves as storage of the web pages or the website. The image shows a server rack. The table below describes some of the most common web server products and their vendors. | Product | Vendor | |---|---| | Apache | Apache | | IIS | Microsoft | | NGINX | NGINX Inc. | | GWS | Google Web Server | The image shows a diagram of different web hosting types: * Shared hosting - one server, with multiple websites. * Dedicated hosting - one server, with one website. * VPS hosting - multiple servers, with one website. #### **URL** Uniform Resource Locator. A reference used to specify addresses on the World Wide Web. The image shows a computer monitor displaying a generic browser. #### **EXAMPLE URL** **https://manuelgarcia.info/feu/it0043.html** The **http** is the standard method used to transport Web pages over the internet. This part of the web address is commonly known as the domain name. This part of the web address is known as the **Top-level domain (TLD)**. This is a subdirectory or subfolder within your website stored in a server. This is the webpage or HTML document that contains the information. #### **HTML** The standard language for creating web pages and web applications. The image shows code snippets in HTML 5. The image shows a comparison of static and dynamic websites. * Static website - only HTML and CSS code. * Dynamic website - HTML, CSS, and another language such as PHP or MySQL. ### **MUST-LEARN DEVELOPMENT** ## **LANGUAGES** One web language won't be enough. Before we dive into the list of web languages, it's important to briefly touch upon a few concepts that are fundamental in developing an understanding of web development. The web development process can be broken up into two parts: * **FRONT-END** * **BACK-END** The image shows a person typing code on a laptop. #### **WEB FUNDAMENTALS** When it comes to basics, it doesn't get more basic than HTML5 and CSS3 - both can be found on the client-side of nearly all web pages on the internet. The image shows the logos for HTML 5 and CSS 3. #### **CLIENT-SIDE SCRIPTING** JavaScript is currently the de facto client-side scripting language for bringing interactivity to the world of web development. The image shows a robot wearing a hat with Javascript tips written on it. The image shows a button for Javascript and another button for Javascript Frameworks. #### **SERVER-SIDE SCRIPTING** This simply refers to the code that runs behind the scenes on the server that hosts those files and is responsible for everything that makes a website tick. The image shows a stork carrying a garbage bag with PHP written on it. The image shows a button for PHP and a button for Ruby. #### **QUERY LANGUAGE** Lastly, if you're looking into backend development then query language is a must-learn language as it handles all data from back-end to front-end. The image shows a dolphin holding a sign with MySQL written on it. The image shows a button for MySQL and a button for Oracle. ## **REFERENCES** 1. The Internet Book: Everything You Need to Know about Computer Networking and How the Internet Works - *Douglas Comer* 2. Discovering Computers 2008 - *Gary B. Shelly* The image shows a stack of books.