Scribd
Upload
61 views

LESSON 8 The World Wide Web

This document provides an overview of developing a personal portfolio website. It discusses key topics like HTML, CSS, client-server architecture, and development tools. The sample project involves building a portfolio site to showcase skills and projects. Steps include creating an HTML structure, applying CSS styling, populating content, adding interactive elements, testing across browsers, and deploying the finished site. The class demonstration will walk through the project process and address common challenges.

Uploaded by

Mary Jane Pagay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

LESSON 8 The World Wide Web

This document provides an overview of developing a personal portfolio website. It discusses key topics like HTML, CSS, client-server architecture, and development tools. The sample project involves building a portfolio site to showcase skills and projects. Steps include creating an HTML structure, applying CSS styling, populating content, adding interactive elements, testing across browsers, and deploying the finished site. The class demonstration will walk through the project process and address common challenges.

Uploaded by

Mary Jane Pagay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Bato Institute of Science And Technology, Inc.

Dolho, Bato, Letyte

EMPOWERMENT TECHNOLOGIES
Name: ______________________________________________

Lesson 8: The World Wide Web basic webpage, defining its structure and
content.

I. Introduction to the World Wide Web


B. Cascading Style Sheets (CSS)
A. Definition
1. Introduction to CSS for styling web
pages: CSS (Cascading Style Sheets) is a
1. The World Wide Web (WWW) as a global
styling language used to enhance the visual
information space: The World Wide Web,
presentation of HTML documents.
often referred to as the WWW or simply the
2. Applying styles to enhance the visual
web, is a vast network of interconnected
appeal of a webpage: CSS allows
digital documents and resources accessible
designers to control layout, colors, fonts,
via the internet. It serves as a global
and other visual aspects, improving the
information space, allowing users to
overall aesthetics of a webpage.
navigate through web pages and websites
using hyperlinks.
C. Client-Server Architecture
2. Understanding the key components: web
pages, websites, hyperlinks, browsers,
1. Understanding how web browsers
and servers:
interact with web servers: The client-
• Web Pages: Individual documents on
server architecture involves web browsers
the web containing text, multimedia,
(clients) requesting and receiving
and other elements.
information from web servers.
• Websites: Collections of related web
2. Overview of HTTP and HTTPS protocols:
pages under a common domain or
HTTP (Hypertext Transfer Protocol) and
subdomain.
HTTPS (HTTP Secure) are protocols
• Hyperlinks: Interactive elements
governing data communication between
connecting web pages and
clients and servers, with HTTPS adding a
facilitating navigation.
layer of security through encryption.
• Browsers: Applications enabling users
to access and view web pages. III. Web Development Tools
• Servers: Computers storing and
delivering web content to users upon A. Text Editors
request.
1. Introduction to popular text editors for
II. Essential Concepts web development (e.g., Visual Studio
Code, Sublime Text): Text editors are
A. HyperText Markup Language (HTML)
essential tools for writing and editing code
in various programming languages.
1. Basic structure and elements of HTML:
2. Hands-on practice with a chosen text
HTML (HyperText Markup Language) is the
editor: Students will gain practical
standard markup language used to create
experience by using a selected text editor to
the structure of web pages. It consists of
write and edit HTML, CSS, and other code.
elements represented by tags, defining
various parts of a webpage such as
B. Web Browsers
headings, paragraphs, images, and links.
2. Creating a simple webpage using HTML:
1. Overview of popular browsers and their
By combining HTML tags, users can create a
developer tools: Various browsers (e.g.,
Bato Institute of Science And Technology, Inc.
Dolho, Bato, Letyte

EMPOWERMENT TECHNOLOGIES
Name: ______________________________________________

Chrome, Firefox) offer developer tools for developer tools to identify and fix any
debugging, inspecting elements, and issues.
optimizing webpages. 6. Deployment: Choose a platform for
2. Debugging and inspecting elements in a hosting the portfolio website (e.g., GitHub
webpage: Developers can use browser Pages, Netlify) and deploy the website to
tools to identify and address issues within make it accessible on the web.
the structure and styling of a webpage.
V. Class Demonstration
IV. Sample Project: Personal Portfolio Website
• Walkthrough of the sample project steps:
A. Project Overview Step-by-step demonstration of building a
personal portfolio website.
1. Purpose: Create a personal portfolio • Address common challenges and
website to showcase skills, projects, and troubleshooting: Discussion of common
achievements. issues students may encounter and
2. Importance of an online presence for guidance on resolving them.
professional development: A personal • Encourage students to personalize their
portfolio establishes a professional online portfolios during class: Emphasize the
presence, aiding in career advancement and importance of customization to reflect
networking. individual skills and creativity in their
portfolio projects.
B. Steps to Build the Portfolio Website

1. HTML Structure: Create an HTML file with Reference


sections for Introduction, Skills, Projects, • https://www.w3.org/History/1989/proposal.
and Contact. Add appropriate HTML tags to html
structure the content. • https://www.w3.org/
2. CSS Styling: Link a CSS file to the HTML file • https://webfoundation.org/
and apply styles to enhance the visual • https://web30.web.cern.ch/
appeal of the portfolio.
3. Content Population: Insert personal
information, skills, and project details into
the HTML file. Utilize images and
multimedia to make the portfolio visually
engaging.
4. Interactive Elements: Incorporate
hyperlinks to navigate between sections and
include a contact form or links to social
Prepared by:
media profiles.
5. Testing: Test the website on different
Mary Jane Pagay – Cierva, LPT
browsers to ensure compatibility. Use
Instructor

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy