Week 12-13 Web Basics PDF

WEEK 12-13 WEB BASICS CC101 - INTRODUCTION TO COMPUTING  At the end of the session, the students should be able to: 1. Understand the basic structure of the Internet, web pages and website. 2. Describe markup langu...

WEEK 12-13 WEB BASICS CC101 - INTRODUCTION TO COMPUTING  At the end of the session, the students should be able to: 1. Understand the basic structure of the Internet, web pages and website. 2. Describe markup languages such as HTML and XML 3. Identify the difference between HTML and XML. 2 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS The Internet The internet is a globally connected network system that uses TCP/IP to transmit data via various types of media. The internet is a network of global exchanges – including private, public, business, academic and government networks – connected by guided, wireless and fiber-optic technologies. 3 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS The Internet Internet Protocol (IP): The internet’s primary component and communications backbone. Because the internet is comprised of hardware and software layers, the IP communication standard is used to address schemes and identify unique connected devices. Prominent IP versions used for communications include Internet Protocol version 4 (IPv4) and Internet Protocol version 6 (IPv6). 4 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS The World Wide Web The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages that can be accessed over the Internet. The World Wide Web was originally designed in 1991 by Tim Berners-Lee 5 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS The World Wide Web The World Wide Web is what most people think of as the Internet. It is all the Web pages, pictures, videos and other online content that can be accessed via a Web browser. The Internet, in contrast, is the underlying network connection that allows us to send email and access the World Wide Web. The early Web was a collection of text-based sites hosted by organizations that were technically gifted enough to set up a Web server and learn HTML. 6 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS As a communication medium, the Web consists of these major components Networks—The local-area and wide-area networks connecting computers world-wide forming the Internet. Clients—Web browsers that enable end-users to access the Web. Servers—Constantly running programs that serve up information to the Web. 7 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Documents—Web pages, mostly coded in HTML, that supply information on the Web. Protocols—The Hyper Text Transfer Protocol HTTP that Web clients and servers use to talk to one another and the TCP/IP (Transmission Control Protocol) on which HTTP depends. 8 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS What the Internet Offers? Communications: The internet is the most cost-effective communications method in the world, in which the following services are instantly available: Email Web-enabled audio/video conferencing services Online movies and gaming Data transfer/file-sharing, often through File Transfer Protocol (FTP) Instant messaging Internet forums Social networking Online shopping Financial services 9 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Internet Connections There are many ways a personal electronic device can connect to the internet. They all use different hardware and each has a range of connection speeds. As technology changes, faster internet connections are needed to handle those changes. I thought it would be interesting to list some of the different types of internet connections that are available for home and personal use, paired with their average speeds. 10 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Internet Connections Wireless connection Mobile connection Hotspots Dial-up Broadband DSL Satellite 11 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Web Browser The First Web Browser: The first web browser was called World Wide Web and later changed its name to Nexus. Created by Sir Tim Berners-Lee, it was released in 1990 and gave people a basic way to view web pages. Before the first popular graphical browser, Mosaic, was released in 1992, the internet was text-based, bland, and couldn't be used without technical know-how. 12 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Web Browser Modern internet browsers have many helpful features. Tabbed browsing, for example, helps you open up many web pages in individual tabs, instead of needing a resource-intensive separate window for each page. Most browsers are available for free download. The five most popular internet browsers today include: Mozilla Firefox Google Chrome Apple Safari Opera Internet Explorer 13 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS What is URL? A uniform resource locator (URL) is the address of a resource on the Internet. A URL indicates the location of a resource as well as the protocol used to access it. A URL contains the following information: 14 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Components of a Website A website is a collection of Web pages accessible through a single domain. Websites can serve many different purposes, and therefore they can have many different design styles. Regardless of the purpose or design, most websites share a common architecture. 15 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Here are some of the components that hold a website together: Front End Elements - People often describe the website as having a front end and back end The navigation structure - This is not the same as the sitemap, though that might represent it. The navigation structure is the order of the pages, the collection of what links to what. 16 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS The page layout. This is the way things appear on the page. Is the navigation menu on the top or along the side? Are there images above the text area? Tables? Logo. A good website has a unifying graphic around which it is built. The graphic represents your company, your organization. 17 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Images. Photos, graphics, navigation bars, lines and flourishes, animations can all be placed on a website to bring it to life. Contents. Few websites exist just to be looked at. The internet began as a method of sharing information. 18 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Graphic Design. Many of the elements described, such as the logo, the navigation menus, the layout, images, etc., fall under the general category of graphic design. Back End elements. Some websites are entirely static. They are the same every time you visit. You never give them information, there are no polls, bulletin boards, or referral forms. 19 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Content Management System. This is the ability to update your website without having to directly edit the html. E-Commerce - Purchasing items from the internet has begun more and more common. The internet allows small merchants to reach a world-wide audience, while other retailers are able to maintain huge inventories of immense variety. 20 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Shopping Cart. If you have one or two products, it’s fine if visitors click a couple times, fill out information, and purchase the product. Site Search. Among all the information on the Web, somebody found yours with a simple search and a couple clicks. 21 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Blog feature. Blogs are much in the news these days. Blogs can be done independently, or as part of your website. Image-rotation. Presenting new images each time someone visits your page gives it a sense of life. 22 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Multi-media. Some websites call for more than just text and images. Security. All kinds of information can be found hidden on websites. Trade secrets, proprietary programming, client credit card numbers, and every imaginable piece of personal 23 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Parts of a Website Aside from content, web design is also a major factor in user engagement. Hence, a good and functional web design could boost your online visibility. (Source: Forbes) A website is composed of essential parts that help engage users to navigate and learn more about the products and services of the company. 24 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS 1. Header/Banner The header or banner is located on top of a website. It includes the logo of the company, the publisher, or owner of the website. This automatically informs website visitors what the website is about. 25 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS 2. Navigation Bar The navigation bar/menu tab allows the visitors to check other pages of the website. It appears in all pages within a website for more convenient navigation. 26 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS 3. Sidebar Some websites do not use this part anymore. They say it is an added distraction to some users, especially if the sidebar displays ads, Twitter feed, etc. 27 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS 4. Content The quality of a website’s content usually dictates the value of your website. You can find different types of content in a website. 28 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS 5. Footer They say the footer is as important as the header. Of course, the users will reach the footer if they were engaged with the website’s content. 29 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Languages of the Web Hypertext A Web browser communicates with a Web server through an efficient Hypertext Transfer Protocol (HTTP) designed to work with hypertext and hypermedia documents that may contain regular text, images, audio, and video. Native Web pages are written in the Hypertext Markup Language (HTML) and saved usually in files with the.html (or.htm) name suffix The most common programming languages on the Web include HyperText Markup Language, XML, JavaScript, Cascading Style Sheets and PHP: Hypertext Preprocessor. 30 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS HTML HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript). 31 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS XML Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. \ The design goals of XML emphasize simplicity, generality, and usability across the Internet. It is a textual data format with strong support via Unicode for different human languages. 32 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Difference Between HTML and XML XML and HTML are the markup languages defined for the distinct purposes and have several differences. The prior difference is that in XML there are provisions for defining new elements while HTML doesn’t provide a specification to define new element and it uses predefined tags. XML can be used to build markup languages while HTML itself is a markup language. 33 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS Web Hosting Web Hosting is a service to store and serve ready-made files and programs so they are accessible on the Web. Hence, publishing on the Web involves 1. designing and constructing the pages and writing the programs for a website 2. placing the completed website with a hosting service Colleges and universities host personal and educational sites for students and faculty without charge. Web hosting companies provides the service for a fee. 34 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS 10 Characteristics of a Good Website Functional A website is designed to serve a purpose, usually to solve a problem. For example, a job board has a purpose where employers can post jobs and job seekers can find and apply for jobs. Easiness A website should be easy to use and navigate. 35 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS 10 Characteristics of a Good Website Relevant Content You do not want to put content on a website that is not relevant to the users. You do not want to put car details on a job board. Modern You want to make sure your website is using current trends and technologies. You do not want to build a website that does not support today’s needs. 36 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS 10 Characteristics of a Good Website Performance and Speed Does your website load fast enough to show visitors what they are looking for? Your website can’t be slow when presenting content to its visitors. Reliable Is your website reliable? If I apply for a job, does your website send me on-time notifications and messages to keep me posted with the updates? 37 CC101 - INTRODUCTION TO COMPUTING WEEK 12-13 WEB BASICS 10 Characteristics of a Good Website Scalable Do you have sufficient infrastructure to support your website and its visitors? A website should be able to scale to a number of potential visitors. Secure Security is a major concern to today’s web visitors. You need to make sure that your website follows industry standards and guidelines. 38 CC101 - INTRODUCTION TO COMPUTING 39