IT1144 - Lecture 03 wp.pdf

Fundamentals of Web Programming IT-1144 University of Vavuniya Contents Introduction to the Web Development Web browser Introducing web technologies Links and navigation Forms and tables Formatting What is a Web Browser? A web browser (commonly referred to as a browse...

Fundamentals of Web Programming IT-1144 University of Vavuniya Contents Introduction to the Web Development Web browser Introducing web technologies Links and navigation Forms and tables Formatting What is a Web Browser? A web browser (commonly referred to as a browser) is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. Web Browser Applications Functionalities of Web Browser To present the web resources by requesting it from the server and displaying it in the browser window. The resource is usually an HTML document, but may also be a PDF, image. The location of the resource is specified by the user using a URI (Uniform Resource Identifier). The way the browser interprets and displays HTML files is specified in the HTML and CSS specifications. These specifications are maintained by the W3C (World Wide Web Consortium) organization Browser Components 1. The user interface: includes the address bar, back/forward button, bookmarking menu, etc. 2. The browser engine: marshals actions between the UI and the rendering engine. 3. The rendering engine : responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen. 4. Networking: for network calls such as HTTP requests, using different implementations for different platform behind a platform- independent interface 5. UI backend: used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods. 6. JavaScript interpreter: Used to parse and execute JavaScript code. 7. Data storage: This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem. History “WorldWideWeb” - first web browser created by Tim Berners Lee in 1990. 1993 - “Mosaic” It had the feature of adding images and an innovative graphical interface. 1994, Marc Andreessen - “Netscape Navigator” In 1995, “Internet Explorer” was launched by Microsoft. In 2002, “Mozilla Firefox” was introduced. In 2003 Apple launched “Safari”. This browser is commonly used in Apple devices only and not popular with other devices 2008, Google released “Chrome” - one of the most commonly used web browsers across the world BASIC PARTS OF Web Browser Address Bar Title Bar Menu Bar Status Bar Display Window Scroll Bars ADDRESS BAR This bar at the top of your browser window and its purpose is to show you the whole URL or web site address  Back button: usually an arrow pointing to the left navigates to the most recently previously viewed page Forward button: an arrow pointing to the right navigates forward, to the page you were viewing before you clicked Back. Refresh button: Reloads the current page to see up to date content. Bookmark button: Usually shaped like a star Saves a link to the current page so that you can find it again later. Menu button: three dots stacked on top of each other provides a way to do most of the things you can do from the main Menu Bar Menu button TITLE BAR This bar at the absolute top of your browser and in will be the colour blue for the major browsers. The purpose of the Title bar is to display the title of the web page that you are currently viewing  New Tab Button: Opens a new page in the same window when selected. This option allows for many websites to be open but contained within one main window frame. MENU BAR A menu bar is positioned at the top of the browser window. We can access various menus for quick access files  STATUS BAR The bar at the very bottom of your browser window. It basically tells you what you are doing at the moment. Mainly, it shows you load speed and the URL address of whatever your mouse is hovering over DISPLAY WINDOWS The Display window is the space in which you view this website right now. SCROLL BAR The Scroll bars, usually located to the right of the Display Window, allows you to “scroll” (move down or up the web page) so you can view information that is below or above what is currently in the Display Window Customize  Extensions Google Chrome extensions are programs that can be installed into Chrome in order to change the browser's functionality. They are created using web technology like HTML, CSS, JavaScript, etc. This includes adding new features to Chrome or modifying the existing behavior of the program itself to make it more convenient for the user. Examples: Blocking ads from being displayed Adding to do lists or notes to Chrome Password management Protect your privacy and making web browsing more secure. Internet cookies A cookie is just one or more pieces of information stored as text strings on your machine. A Web server sends you a cookie and the browser stores it. The browser then returns the cookie to the server the next time the page is referenced. When you visit a website, the site may place a cookie on your web browser so it can recognize your device in the future. The most common use of a cookie is to store a user ID. For example, the cookie might containing the following string: ID=96352398 Mobile Browsers A mobile browser also called a micro browser, mini browser is a web browser designed for use on a mobile device such as a mobile phone or PDA. Mobile browsers are optimized so as to display Web content most effectively for small screens on portable devices. Mobile browser software must be small and efficient to accommodate the low memory capacity and low-bandwidth of wireless handheld devices. Examples Android Browser: The default browser for all Android devices. Chrome: Default browser on Google devices. Safari: iPhone default browser. Internet Explorer Mobile: Standard browser on Windows phones. Opera Mobile: Installable mobile browser for smartphones and PDAs. Amazon Silk: Default browser on the Kindle Fire and Amazon Fire Phones. BlackBerry Browser: Default browser on BlackBerry devices. S60 Webbrowser: Standard browser on S60 and Symbian platforms (Nokia). WebOS: Mobile browser and operating system for different devices such as smart TV, smart watches or tablets. Exercises What is the difference between a web browser and a search engine? Write short notes on “Internet Cookies”. What is Plugins and Extensions in Web browser. Differentiate Plugins and Extensions List down the features used by the web browser.