Computer Programming 1

Quarter 1 – Module 1: Basic

Web Concepts
 I. Objectives
• Understand basic web technologies.
• Discover the history of the Internet and World Wide Web.
• Learn the common means of accessing the web.
• Identify the kinds of web browsers and elements.
• Learn the basic Design principles, web contents and planning.

II. Discussion
Basic Web Concept
Web Design Terminology

• URL (Uniform Resource Locator): The address of a web page.

• HTTP/HTTPS (HyperText Transfer Protocol): The protocol used for transferring web
pages.
• HTML (HyperText Markup Language): The standard language for creating web
pages.
• CSS (Cascading Style Sheets): Used for styling the appearance of web pages.
• JavaScript: A programming language used to make web pages interactive.
• Typography: The style and appearance of text on a web page, including font choices,
sizes, and spacing.
• Color Scheme: The combination of colors used throughout a website, which can
influence the site's mood and usability.
• White Space (Negative Space): The empty space around elements on a web page,
used to create a clean and organized look.
• Network – is defined as several computers connected together with purpose of
sharing resources including data, information and hardware.
• Internet – is a worldwide collection of computers interconnected to one another
either wired or wireless including all computers that we use at home, in schools,
offices and many other places.
• World Wide Web (WWW) or simply called Web – is a collection of resources and
information interconnected via internet.
• Web page – is a formatted page within a web site that may contain text, graphics,
video and multimedia. This page can be viewed and explored on the internet by the
use of a program called web browser.
• Home page – is usually the first web page of a web site which usually provides
information about the web site, its purpose and contents. Usually, the other pages
have links on this page to be able to navigate to them.
 History of the Internet
DARPA and ARPA:
The agency was initially known as ARPA (Advanced Research
Projects Agency) when it was formed in 1958. It was later
renamed DARPA (Defense Advanced Research Projects
Agency) and then back to ARPA for a brief period, and now it's
DARPA again. The agency's focus was on advancing
technology, including for military applications.

J.C.R. Licklider:
Licklider was a key figure in early computer science and networking. In
1962, he was instrumental in conceptualizing an "Intergalactic
Computer Network," which would eventually influence the
development of ARPANET.

ARPANET and Packet Switching:

ARPANET, which became operational in 1969, was the first network to implement packet
switching, a method where data is broken into packets that travel across the network
independently and are reassembled at the destination. The first four nodes of ARPANET
were connected in 1969 at UCLA, Stanford Research Institute (SRI), University of California,
Santa Barbara, and the University of Utah. ARPANET initially connected government and
academic institutions. Over time, it expanded to include more nodes and host computers,
laying the groundwork for the modern internet.
Development of TCP/IP:
Vinton Cerf and Robert E. Kahn developed the Transmission Control Protocol/Internet
Protocol (TCP/IP) suite in the 1970s, which became the standard networking protocol on
ARPANET and remains fundamental to internet communications today. In the late 1980s
and early 1990s, ARPANET was decommissioned as newer networks emerged. The National
Science Foundation Network (NSFNET) played a significant role in expanding internet access
to educational and research institutions. NSFNET's backbone was eventually replaced by
commercial networks, marking the commercialization of the internet.
Role of ICANN:
The Internet Corporation for Assigned Names and Numbers (ICANN) manages the global
domain name system (DNS) and IP address allocation, ensuring the internet's stability and
interoperability.
 Recognition and Awards:
In 2001, Vinton Cerf, Robert E. Kahn, Leonard Kleinrock, and Lawrence Roberts received the
Draper Prize from the National Academy of Engineering for their contributions to the
development of the internet.

History of World Wide Web

Tim Berners-Lee: Sir Tim Berners-Lee, an English engineer and computer
scientist, is credited with inventing the World Wide Web in 1989. While
he worked at CERN (the European Organization for Nuclear Research),
he proposed a project that would allow researchers to share information
over a hypertext system. In 1989, Berners-Lee proposed the idea of a
global hypertext project, which became known as the World Wide Web.
He developed the first web browser and editor called "WorldWideWeb"
(later renamed "Nexus") and the first web server, CERN (European
Organization for Nuclear Research (from the French "Conseil Européen pour la Recherche
Nucléaire")) httpd (Hypertext Transfer Protocol daemon).
World Wide Web Consortium (W3C):
Tim Berners-Lee founded the World Wide Web Consortium (W3C) in 1994 at the
Massachusetts Institute of Technology (MIT). The W3C is an international community that
develops open standards to ensure the long-term growth of the Web. It is supported by a
number of organizations and companies interested in improving and standardizing web
technologies. The W3C aims to make the Web accessible to everyone, regardless of
hardware, software, network infrastructure, language, culture, geographical location, or
physical or mental ability. The consortium develops standards for web technologies,
including HTML, XHTML, CSS, XML, and many others, with the principle that these standards
should be freely available without the need for royalties or patents.

Common Devices for Accessing the Web

Desktop Computers
• Typically used at home or work.
• Offers a full browsing experience with large screens and
powerful hardware.

Laptops
• Portable computers that provide similar capabilities to
desktops.
• Common for both personal and professional use, offering
flexibility in accessing the web from different locations.
 Smartphones
• Mobile devices that offer web access on the go.
• Equipped with mobile browsers and often use mobile data or
Wi-Fi for internet access.

Tablets
• Larger than smartphones but still portable.
• Offer a good balance between screen size and portability,
often used for media consumption and light browsing.

Smart TVs
• Internet-enabled televisions that allow users to browse the
web and stream content directly on the TV screen.

Wearable Devices
• Devices like smartwatches can access certain web services and
notifications, though they offer limited browsing capabilities.

Kinds of Web Browsers and Their Elements

Web Browsers - Web browsers are software applications that enable users to access,
retrieve, and view information on the World Wide Web. Here are some of the most popular
web browsers:

Google Chrome
• Developed by Google
• Known for speed, simplicity, and a large extension library

Mozilla Firefox
• Developed by the Mozilla Foundation
• Emphasizes privacy, customization, and open-source development

Microsoft Edge
• Developed by Microsoft
• Built on the Chromium engine (like Chrome), integrates well with Windows
and Microsoft services
 Safari
• Developed by Apple
• Optimized for Apple devices, focusing on speed and energy efficiency

Opera
• Known for its unique features like a built-in VPN and ad blocker

Brave
• Focuses on privacy and security, blocks ads and trackers by default

Common Elements of Web Browsers:

Address Bar - Also known as the URL bar, where users enter website addresses.

Navigation Buttons:
Back - Returns to the previous page.
Forward - Moves to the next page (after going back).
Refresh/Reload - Reloads the current page.
Home - Takes the user to the browser’s home page.

Tabs - Allow users to open multiple web pages in a single browser window, each tab
representing a different page.
Bookmarks - Users can save links to frequently visited websites for easy access.
History - A record of all the websites visited over a period, allowing users to revisit them
easily.
Extensions/Add-ons - Small software programs that enhance browser functionality (e.g., ad
blockers, password managers).
Settings/Preferences - Allows users to customize browser behavior and appearance,
manage privacy settings, and more.
Search Bar - Some browsers combine the address bar and search bar, allowing users to
enter either a web address or a search query.

Basic Design Principles, Web Contents, and Planning

Design Principles
Usability - Websites should be easy to navigate, with intuitive layouts and clear instructions.
Usability ensures that users can find what they're looking for quickly and efficiently.

Accessibility - Websites should be usable by people with disabilities, including those who
rely on screen readers, keyboard navigation, or other assistive technologies. This involves
using proper HTML tags, providing alt text for images, and ensuring sufficient color contrast.
Responsive Design - A responsive website adapts its layout and content based on the user's
device screen size and orientation. This ensures a good user experience across desktops,
tablets, and smartphones.

Visual Hierarchy - The arrangement of elements on a page to guide users' attention to the
most important information first. This is achieved through the use of size, color, contrast,
and spacing.

Consistency - Maintaining a consistent look and feel across all pages of a website, including
fonts, colors, and navigation, helps users understand and navigate the site more easily.

Loading Speed - Faster loading times improve user experience and are a factor in search
engine ranking. This can be achieved by optimizing images, using efficient code, and
leveraging browser caching.
Web Contents:

Text - Should be clear, concise, and well-organized. Use headings, bullet points, and short
paragraphs to enhance readability.

Images - Relevant and high-quality images can enhance the visual appeal of a website.
Always include alt text for accessibility and SEO.

Videos - Can be used for tutorials, introductions, or enhancing content. Ensure videos are
accessible with captions and descriptions.

Links - Hyperlinks allow users to navigate between pages. Ensure links are descriptive and
lead to relevant, working destinations.

Forms - Used to collect user input, such as contact information or survey responses. Forms
should be easy to use and secure.

Planning a Website

1. Define Purpose and Goals - Determine the main objective of the website. Is it
informational, e-commerce, a blog, etc.?
2. Identify Target Audience - Understand who the website is for, including their needs,
preferences, and typical browsing habits.
3. Content Planning - Decide what content will be included, how it will be structured, and
how often it will be updated. This includes text, images, videos, and interactive
elements.
4. Site Structure and Navigation - Plan the website's architecture, including the hierarchy
of pages and the navigation menu. This helps users find information quickly and easily.
5. Wireframing and Prototyping - Create a basic layout (wireframe) of the website’s
design. This can include the placement of key elements like headers, navigation, content
areas, and footers.
6. Choosing a Domain and Hosting - Select a domain name that reflects the site's purpose
and is easy to remember. Choose a reliable hosting provider to ensure the site is
accessible and secure.
7. SEO and Analytics - Plan for search engine optimization (SEO) to improve the site's
visibility in search engines. Set up analytics tools to track site performance and user
behavior.
8. Testing and Launch - Test the website for functionality, usability, and compatibility
across different devices and browsers. Once everything is in order, launch the site and
promote it through various channels.

References:
http://www.yahoo.com
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fwww.keionline.org
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fwww.britannica.com
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fwww.internethalloffame.org
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fwww.magzter.com
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fwww.nytimes.com
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fwww.nytimes.com
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fcommons.wikimedia.org
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fwww.techradar.com
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fwww.maketheswitch.ph
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fwww.frontiersin.org
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fen.wikipedia.org
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fapps.microsoft.com
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fen.m.wikipedia.org
https://play.google.com/store/apps/details?id=com.brave.browser&hl=en_US
https://www.google.com/url?sa=i&url=https%3A%2F%2Fround-lake.dustinice.workers.dev%3A443%2Fhttps%2Fen.wikipedia.org
III. Pratice Exercise (10 pts.)
Directions: Read each question carefully before choosing an answer. Select the best answer
from the provided options.

1. What is the difference between the internet and the World Wide Web?
a) The internet is a global network of computers, while the World Wide Web is a collection
of websites and resources.
b) The World Wide Web is a global network of computers, while the internet is a collection
of websites and resources.
c) The internet and the World Wide Web are the same thing.
d) The World Wide Web is a communication protocol, while the internet is a web browser.

2. What does URL stand for?

a) Uniform Resource Locator b) Universal Resource Locator
c) Uniform Retrieval Link d) Universal Retrieval Link

3. Which of the following is NOT a common web browser?

a) Google Chrome b) Mozilla Firefox
c) Microsoft Edge d) JavaScript

4. What is the primary purpose of CSS in web design?

a) To structure the content of a web page b) To style and layout web pages
c) To make web pages interactive d) To create hyperlinks

5. Which of these protocols is used to secure data transmission on the web?

a) HTTP b) FTP
c) HTTPS d) SMTP

6. What is a responsive web design?

a) A design that automatically updates based on new data
b) A design that adjusts layout and content based on the screen size and device
c) A design that only works on mobile devices
d) A design that includes interactive elements like buttons and forms

7. Which of the following is a correct HTML tag for creating a hyperlink?

a) <a href="https://www.example.com">Link</a>
b) <link href="https://www.example.com">Link</link>
c) <hyperlink url="https://www.example.com">Link</hyperlink>
d) <url href="https://www.example.com">Link</url>

8. What is a wireframe in web design?

a) A high-fidelity visual representation of a web page
b) A basic outline or sketch of a website's layout
c) A programming tool for web development
d) A type of browser extension

9. What is the purpose of using JavaScript in web development?

a) To define the structure of a web page
b) To style the appearance of a web page
c) To add interactivity and dynamic content to web pages
d) To optimize images for faster loading

10. Which of the following best describes accessibility in web design?

a) Ensuring a website is optimized for search engines
b) Making a website easy to navigate and use
c) Designing websites that are usable by people with disabilities
d) Creating websites with appealing visual designs

10. C C 5.
9. C B 4.
8. B D 3.
7. A A 2.
6. B A 1.

Answer Key: