Web Development Overview

Unit I: An Overview of the Web

• This unit provides an overview of the web.
• The unit topics include the internet and the world wide web (www), types of websites, web development life cycle (WDLC), web development languages and tools needed for creating web pages.

Intended Learning Outcomes

• Define websites and explain the purpose and characteristics of each type of website.
• List and define key terms such as Internet, World Wide Web, Web Browsers, URLs, Web Servers, and Internet Service Providers.
• Enumerate the phases of the Web Development Life Cycle (WDLC).
• Explain the role of HTML in structuring content and CSS in styling web pages.
• List common tools used for web development like code editors, browsers, and validation tools.

The Internet

• The Internet is a massive network of networks and a networking infrastructure.
• It connects millions of computers globally, forming a network where any computer can communicate with others as long as they're both connected.
• Information travels via languages called Protocols.
• The internet is a global network that allows for the seamless exchange of information.
• In 1969, the first message was transmitted over ARPANET, which laid the foundation for today's global network.

Internet Service Providers (ISPs)

• ISPs are critical entities providing users access to the Internet and maintain a permanent connection to the Internet backbone.
• The Internet backbone is a central, high-capacity network infrastructure that connects various regional networks.
• Several major ISPs offer diverse broadband solutions, including PLDT, GLOBE, SKY BROADBAND, EASTERN TELECOM, and CONVERGE ICT

World Wide Web

• The World Wide Web (Web) accesses information over the Internet.
• It is an information-sharing model built on the internet using the HTTP protocol to transmit data.
• Web services using HTTP allow applications to communicate to exchange business logic and use the web to share information.
• While often used interchangeably, the terms Internet and World Wide Web aren't synonymous; they are related but separate.

Website Categories

• Internet: A global network accessible to anyone with an internet connection. Open to everyone to publicly share information, services, or resources
• Intranet: A private network designed for internal use within an organization. Restricted to authorized members of the organization, it facilitates communication, collaboration, and data sharing
• Extranet: A private network with limited access to external users partners, vendors, etc. Restricted to specific external and internal users with proper credentials, it enables collaboration with external stakeholders securely.

Common Website Types

• Personal Websites
• Business Websites
• E-commerce Websites
• Educational Websites
• Portfolio Websites
• Blog Websites
• News and Media Websites
• Community and Forum Websites
• Nonprofit Websites
• Entertainment Websites

Web Browsers

• A Web Browser (Browser) is software used to locate, retrieve, and display content on the World Wide Web, including web pages, images, videos, and other files.
• Using the client/server model, the browser (client) runs on a computer and contacts the web server to request information which it then displays.
• Popular web browsers are Mozilla Firefox, Google Chrome, Opera Browser, Microsoft Edge, Safari Browser and Maxthon Browser.

Uniform Resource Locator (URL)

• A Uniform Resource Locator (URL) addresses specific resources on the internet.
• It references web pages, files, or services, guiding users and web browsers to the desired location.
• A URL is composed of the Protocol, Domain Name, Path, Query String, and Fragment Identifier.

URL Components

• Protocol: Specifies the method used to access the resource; common protocols are http:// and https://, with the latter ensuring data encryption.
• Domain Name: Indicates the server's address where the resource is hosted, including the website's name and a domain suffix like .com, .org, or .edu; for example, www.google.com is a domain name.
• Path: Specifies the exact location of the resource within the server, often including directories and file names. For example, /about-us points to a specific page on the website.
• Query String: Passes additional information or parameters to the server, often for search queries or dynamic content
• Fragment Identifier: Identifies a specific section within a web page, indicated by a #; for example, #section2 jumps to a particular part of the page.

Domain Extensions

• .com for Commercial Site
• .gov for Government Site
• .edu for Educational Institution Site
• .net for Network Site
• .org for Organizational Site
• .biz for Business Site
• .mil for Military Site

Web Servers

• Web Servers are computers that store and serve web pages to users upon request.
• Each server is identified by an IP address and often a domain name (e.g., Google.com).

Web Development Life Cycle

• The Web Development Life Cycle is a systematic process of developing web pages, ensuring to meet user needs and function effectively.
• The Phases are Planning, Analysis, Design, Testing, Implementation, Publishing and Maintenance.

Web Development Languages

• Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
• Cascading Style Sheets (CSS) is a style sheet language that describes the presentation of a document written in a markup language like HTML

Applying CSS to a Web Page

• CSS can be applied to a Web page via Inline CSS, Internal CSS, External CSS, and CSS Frameworks.
• Inline CSS applies style to a particular HTML Tag using the style attribute
• It is the least recommended styling method because of the difficulty it brings in managing larger websites.
• However, useful for testing and previewing changes
• Internal CSS applies style to a particular HTML Tag using the style attribute
• It is the least recommended styling method because of the difficulty it brings in managing larger websites.
• However, useful for testing and previewing changes

Tools for Creating Web Pages

• A Text Editor edits plain text; Microsoft Notepad is readily available.
• A Source Code Editor is designed for editing source code, examples are Sublime Text and Notepad++.
• Code Editors: Tools like Visual Studio Code, Sublime Text, or Atom provide environments for writing and editing code,Syntax highlighting and code completion.
• Web Browsers: Essential for testing and viewing web pages during development. Chrome and Firefox offer developer tools for debugging and analyzing web performance.
• Version Control Systems (e.g., Git): Track changes in code, manage versions, and collaborate on projects.
• Graphic Design Tools (e.g., Adobe Photoshop, Canva): Help in creating visual elements like logos, images, and layouts for web pages.
• Validation Tools (e.g., W3C Validator): Check code for adherence to web standards, ensuring compatibility and accessibility.

Activity 1 Directions

• Submit a single document with screenshots of the tasks performed and the output produced.
• Visit at least six different websites from these categories: informational, educational, e-commerce, social networking, portfolio, and blog.
• Create a table that includes the name of each website, its URL, its website type, a brief description of its purpose, and the target audience.