REVIEWER WORLD WIDE WEB (WWW)
ITELECT / MS. IMAGE / V ➢ The web, sometimes known as the
World Wide Web (WWW), is an
WHAT IS INTERNET?
Internet-based service. While the
➢ The Internet is a global network of Internet encompasses all
interconnected computers that communication networks and
communicate through standardized technologies, WWW is a collection
protocols. It serves as the backbone of interconnected documents and
for digital communication, enabling multimedia content accessible
devices worldwide to exchange through the Internet using web
data. Internet is the world’s largest browsers.
computer network consisting of
What Makes the Web Work?
millions of interconnected
computers located in hundreds of ➢ Protocols are set of standards used
countries. to access resources via the Web
➢ A URL (Uniform Resource Locator)
➢ It’s an infrastructure that provides is an address for a website or
services to applications. If a document on the internet. For
person is sending a message to instance:
another person, this message is https://www.csta.com/about
divided into small units called
HTTP (Hypertext Transfer Protocol)
packets.
➢ HTTP serves as the fundamental
How data is transmitted?
protocol for the transmission of
➢ Using the Internet Protocol (IP) and web data.
Transport Control Protocol (TCP),
HTTPS (Hypertext Transfer Protocol
data is divided into packets and
Secure)
transmitted over the internet.
➢ HTTPS is the secure variant of
How information is displayed on a
HTTP, guaranteeing that sent data
device?
is encrypted and safeguarded
➢ A Domain Name System (DNS) against interception.
query is executed by the browser to
WEB DEVELOPMENT
determine the IP address of the
website when a user visits a ➢ Refers to the process of creating
webpage. and maintaining websites. It
includes a variety of operations
including coding, design, and
providing a consistent user HyperText Markup Language (HTML)
experience.
➢ HTML is the backbone of web
Front-End Development: The visual development.
and interactive aspects of a website ➢ HTML is the standard markup
are developed using technologies language for making webpages
such as HTML, CSS, and JavaScript. and describes the structure of a
Back-End Development: Responsible webpage.
for server-side operations, databases, ➢ HTML is composed of a sequence
and application logic. of elements. HTML elements label
Full-Stack Development: includes material, such as "this is a
both front-end and back-end heading", "this is a paragraph", and
development. "this is a link". They instruct the
browser on how to display the
STATIC AND DYNAMIC WEB PAGES
information
✓ Static web pages display the
HTML5 is the latest version of HTML,
same content to all users.
introducing new elements and APIs
✓ Dynamic web pages can change
(Application Programming Interfaces). It
based on the user or the time.
includes <video> and <audio> and
TYPES OF WEBSITES elements for embedding media directly in
1. Business Websites the page and more.
2. Blogs Basic Structure of an HTML
Document
3. E-Commerce Websites
• <!DOCTYPE html> - declaration
4. Portfolios
defines that this document is an
5. Event Websites HTML5 document.
• <html> - element is the root
6. Online Forums
element of an HTML page.
7. Personal Websites • <head> - element contains meta
information about the HTML page.
8. Membership Websites
• <title> - element specifies a title for
9. Informational Websites the HTML page (which is shown in
the browser's title bar or in the
page's tab)
• <body> - element defines the • Preserve Formatting:
document's body and is a container <pre></pre>
for all the visible contents, such as
HTML TEXT FORMATTING
headings, paragraphs, images,
hyperlinks, tables, lists, etc. Two general ways to apply text formatting:
• <h1> - element defines a large Physical Style Formatting
heading.
1. Bold (<B>)
• <p> - element defines a paragraph
2. Italic (<I>)
e.g., code:
3. Monospaced typewriter font (<TT>)
4. Underline (<U>)
5. Strikethrough (<S>)
6. Bigger print than the surrounding text
(<BIG>)
7. Smaller print (<SMALL>)
8. Subscript (<SUB>)
Outcome: 9. Superscript (<SUP>)
HTML - BASIC TAGS
• Heading Text Tag:
<h1></h1>…<h6></h6> Output:
• Paragraph Tag:
<p></p<
• Line Break Tag:
<br/> or <br>
• Center Content:
<center></center>
• Horizontal Lines:
<hr/>
➢ Logical Style Formatting HTML – LISTS
- Emphasis (<EM>)
- Strong emphasis (<STRONG>)
- Citation (<CITE>)
HTML – FONT FORMATTING
• Attributes
HTML – HYPERLINK
Kinds of hyperlink:
• Text
<a href = “document url”> link text</a>
HTML – IMAGES <img>
• Image
This also called pictures, graphics, icons,
clip art, etc. <a href="Document URL“><img
src=“image path”> </a>
Major graphic file formats
JPEG- (Joint Photographic Experts • Email
Group)
<a href=mailto:
[email protected]>E-
TIFF- (Tagged Image File Format)
mail Us</a>
PNG- (Portable Network Graphics)
GIF- (Graphic Interchange Format) HTML -TABLES
BMP - (Bit Mapped)
The HTML tables are created using:
<table> - tag
<tr> - tag is used to create table rows
<td> - tag is used to create data cells
<th> - tag is used to create table
heading.
<caption> - will serve as a title or
explanation for the table and it shows up
at the top of the table.
HTML – TABLES Span Tag
e.g.,
THE <div> ELEMENT
The <div> tag is a non-semantic container
used for styling and layout purposes. The
groups content together.
<div lass=”box”>
This is a div box. THE <section> TAG
</div> ➢ The tag is a semantic HTML element
Five containers that group together a set used to group related content
of elements: together. It helps in organizing a
webpage into meaningful parts,
• Header improving readability and SEO.
• Left side navigation <section>
• Content <h2>Section Title</h2>
• Right side navigation <p>This is some content inside a
• Footer section.</p>
Attributes of the <div> tag: </section>
NON-SEMANTIC ELEMENTS
➢ Used to create structure and
presentation for web pages. They
don't provide any information about
the content of the web page. They are
used to define sections of a web page
and apply styles to the content
Cascading Style Sheets (CSS)
introduction of media types for
➢ Cascading Style Sheets (CSS) is a
different devices.
language for stylesheets that
➢ CSS2.1 (2011) This version focused
describes the layout and
on clarifying and improving the CSS2
presentation of an HTML or XML
specification, providing greater
page. The Cascading Style Sheets
stability and browser compatibility.
(CSS) allows programmers to
improve the visual appeal of
➢ CSS3 (ongoing) CSS3 is not a single
websites by customizing elements
monolithic release but a collection of
like layout, color, font, and spacing.
modular specifications introduced
HTML and CSS have a symbiotic gradually. These modules cover
relationship. While HTML defines the various aspects of web design, such
structure and content of a web page, as animations, gradients, and
CSS provides the styling and flexible box layouts.
presentation.
➢ CSS4 (in development) CSS4 is the
➢ In 1994, Håkon Wium Lie, a
future of CSS, aiming to further
Norwegian web pioneer, and Bert
enhance web design capabilities,
Bos, a Dutch programmer, proposed
including responsive design, variable
the first CSS specification. Their
fonts, and improved grid systems.
vision was to separate content
(HTML) from presentation (CSS),
thus simplifying web development CHARACTERISTICS OF CSS
and making it more flexible.
Cross-Browser Compatibility
HISTORY OF CSS
• Modern CSS is designed to work across
➢ CSS1 (1996) The first official CSS multiple browsers.
specification, CSS1, was introduced
• Developers can use CSS resets or
in 1996. It allowed for basic stylings,
frameworks to ensure consistency.
such as changing text colors, fonts,
and backgrounds, but was limited in Responsive Design
terms of layout control. • CSS enables responsive design
through techniques like media queries,
➢ CSS2 (1998) CSS2, released in 1998, flexible grids, and relative units (e.g., %,
introduced an excessive amount of em, rem).
new features, including positioning,
improved control over layout, and the
Customizable and Reusable
• CSS allows styles to be reused across External CSS
multiple pages, reducing redundancy
Saved in a separate .css file and linked to
and improving efficiency.
the HTML document using a <link> tag.
Extensibility This type is centralized, reusable, and
efficient but requires an additional file,
• New CSS modules and features are
increasing load time if not optimized.
continuously introduced, ensuring
compatibility with modern web For example:
development trends.
<head>
TYPES OF CSS
<link rel="stylesheet" href="styles.css">
CSS can be applied to HTML documents in
</head>
three main ways: Inline CSS Applied
directly to a HTML element using the style
attribute. Quick to apply for small
adjustments but difficult to maintain and
lacks reusability.
For Example:
<h1 style=”color:blue; font-size:
24px;”>Hello, World!</h1>
Internal (Embedded) CSS Written within
a section of a HTML document. Useful for
styling a single document but it is not
reusable across multiple pages.
For Example:
<head>
<style>
h1 {color: green; font-size: 28px;}
</style>
</head>
(AN: EXTRAS!)
MISSION AND VISION OF TERESA
Mission: Develop a diverse learners for
global citizenship and leadership by
sustaining holistic academic excellence
for the maximum fulfillment of human
potential amidst ever evolving society.
Vision: A recognized leader in proving
multidisciplinary and inclusive quality
education for uplifting society in a
collaborative global environment.
