UNIT I:

BASICS OF
WEB PAGE
AND HTML
 LESSON 1:

THE INTERNET
BASICS
Types of Connections
SLOW FASTER INTERNET
INTERNET Digital Subscriber
Line (DSL)
Dial up Cable Modem
Service Satellite
Integrated Services
Digital Network
(ISDN)
Types of Connections
Internet Service Provider (ISP)
These are the companies that
help you connect to the
Internet.
 Connection Speeds
Plays an important role in a user’s
experience because slower internet
connections result in slower file transfers
and Web page viewing.
 Different Connection
Speeds
DIAL UP SERVICES = 56 kilobits per second (kbps)
ISDN Connections = 64 kbps to 128 kbps
DSL Connections = 3 megabits per second (mbps)
Cable Modems = 6 mbps.
Note: A Web page that takes about 20 seconds to
download via dialup can take less than a second
using cable modem.
The World Wide Web
This is a giant collection of
documents, or pages, stored on
computers around the globe.
Commonly called the Web. This
presents text, images, audio, and
video.
The World Wide Web
Web Pages
These are stored on servers, which are
internet-connected computers running
software that allow them to serve up
information to other computers.
 Web Browser
This is a software that allows you to interact
with Web pages. When you type a URL or
click a link in a Web browser, the browser
retrieves the appropriate page from a server
on the Internet and displays the page.
 Web Browser
3 Most Popular Browser
Microsoft Internet
Explorer
Mozilla Firefox
Apple Safari
 Communication
Standard
The internet infrastructure relies on a
variety of protocols that dictate how
computers and network talk to each
other.
 Communication Standard
Protocols
Transmission Control Protocol/Internet
Protocol (TCP/IP) - This is a set of rules
that control how internet messages flow
between computers.
 Communication Standard
Protocols
Hypertext Transfer Protocol (HTTP)-
This is a set of rules that determine how
browsers should request Web pages and
how server computers should deliver
them.
 URL and Links
Every page n the Web has a unique address
called Uniform Resource Locator (URL). Every
link on a Web page is associated with a URL
that leads to another page on the Internet.
Users can jump from one Web page to another
by clicking links.
 LESSON 2:

INTRODUCING
HTML
 HTML Tags
These tags determine how page content is organized
and formatted. Tags consist of words or
abbreviations surrounded by angle brackets, < >.
Tags can be written using uppercase or lowercase
letters.
 Rendering HTML
When a browser displays a Web page, it retrieves the
HTML file for that page on a server, analyzes HTML
tags to determine how the content should be
formatted, and renders the page. The HTML tags tell
the browser what images, video, audio, and other
content need to be downloaded and integrated into
the page.
 HTML Standards
The World Wide Web Consortium, or W3C, is the
primary group guiding the evolution of the HTML
language. This group is made up of hundreds of
companies and organizations including Web
industry leaders such as Microsoft, Apple, and
Google.
 HTML Versions
The most recent version is HTML 5.0 which
includes rules for using more than 90 HTML
tags. It is a much improve version compared to
the previous versions. It provides better
support for multimedia, scripting, and style
sheets.
 HTML Versions
Support for style sheets allows the Web
developers to apply more precise formatting
to Web pages. It allows developers to separate
complex styling information from the rest of
the HTML.
 XHTML
Extensible HyperText Markup Language (XHTML)
is an alternative language for coding Web pages
that conforms to the stricter standards of
XHTML. All tags must be closed, tag names and
attributes must be coded in lowercase, and
attributes values for tags must be surrounded
by quotes.
 LESSON 3:

EXPLORING WEB
BROWSERS
 Browser
Discrepancies
Note: Write a clean, well-
informed HTML code and test
your pages to different browsers
as you work.
 Finding a Browser
Computer operating systems come with a Web
browser already installed. You just need to find that
browser by searching the name or by clicking the
start button.
 LESSON 4:

EXPLORING HTML
EDITORS
 Simple Text Editors
Microsoft Windows have
built-in notepads. Simple
text editors offer no-frills
word processing and are
often the best choice when
you are learning to write
HTML.
 HTML Editors
These are programs dedicated
for writing HTML code and
managing Web pages. These
programs can shield you from
having to write HTML code by
offering graphical environment
for building Web.
 HTML Editors
DREAMWEAVER MICROSOFT
EXPRESSION
 Word Processing
Programs
When using word processing
programs it is important to select
HTML as the file type when you
save a document, and the
program automatically adds the
appropriate HTML tags.
 LESSON 5:

UNDERSTANDING
HTML SYNTAX
 Writing HTML
HTML TAGS
These tags determine how page content is organized
and formatted. Tags consist of words or
abbreviations surrounded by angle brackets, < >.
Tags can be written using uppercase or lowercase
letters.
 Writing HTML
HTML TAGS
You can type tag names in uppercase to distinguish
the code from other text.
Example: This HTML code creates paragraph in your
page.
Pink = start tag Blue = end tag
<P>Hello, world!</P>
 Tags Structure
Structural HTML tags identify different parts of your HTML
document.
Example:
<BODY>and</BODY>
These tags surround the main body content that appears in the browser
window.

<P>and</P>
These tags indicate paragraph tags.

Pink = start tag NOTE: Blue = end tag

<IMG>
This tag indicates image and this is a stand alone tag
which means there is no end tag.
 Attributes and Values
You can assign specific attributes to each HTML tag to
customize its behavior.
Example:
<P ALIGN=“center”</P>
This code is used to indicate centered paragraph.
<P ALIGN=“left”</P>
This code is used to indicate paragraph on the left side..
Note: Attributes always go inside the opening
HTML tag, it is good form to put it inside a
quotation mark.
 Entities
You can add special characters to a page, such as
copyright symbol or a fraction, by using special codes.
These represent characters not readily available on the
keyboard.
Example:
&copy;
This code adds a copyright symbol to your page.
Note: All entities are preceded by an
ampersand (&) and followed by a semicolon (;)
 Avoiding Syntax/Rule
Errors
Always proofread your code before saving it.
Note:
Always make sure your tags have brackets.
Keep in mind the different html tags and always
make sure you added a start tag and end tag.
 LESSON 6:

VIEWING HTML
CODE IN A
BROWSER
 View HTML Code in a
Browser
STEP 1
Open a Web
page in your
browser
window.
 View HTML Code in a
Browser
STEP 2
Right-click
on the page.
Select and
click View
Page
Source.
 View HTML Code in a
Browser
A Notepad
window appears
displaying the
HTML source
code for the
page.
 View HTML Code in a
Browser
STEP 3
Click the
Close Button
( ) when
finished. The
window
closes.
 Save the Source Code
1. In the Notepad window that displays the spice
code, click File.
2. Click Save As.
The Save As dialog box appears.
3. Click the drop down box to navigate where you
want to store the page.
4. Type the name for the page. HTML pages should
have an .html or .htm file extension.
5. Click Save. Notepad saves the page.
 LESSON 7:

PLANNING A WEB
SITE
Know your Audience
Understand who your website is for.
Identify their needs, preferences,
and behaviors. This helps tailor the
design, content, and functionality to
engage and satisfy your target users
effectively.
 Plan a Home Page
Design the home page to be the central
hub of your site. It should provide a
clear overview of what your site offers,
with easy navigation to key sections.
The home page is often the first
impression users get, so it should be
welcoming and informative.
 Gathering Content
Collect and organize the text, images,
videos, and other media that will populate
your site. Ensure that the content is
relevant, high-quality, and aligned with your
audience’s interests and needs. Good
content is crucial for engaging users and
supporting your site's goals.
Hierarchical Structure
Develop a clear and logical site structure.
Create a hierarchy that organizes your
content into categories and
subcategories. This makes it easier for
users to navigate your site and find
information quickly, and it helps search
engines understand and index your
content.
 Linear Structure
Organize your website content in a
straightforward, sequential manner where
users navigate from one page to the next in
a set order. This is useful for sites with a
clear, step-by-step process, such as online
courses or product purchasing flows. Each
page naturally leads to the next, guiding
users through a linear path.
 Site Map
Create a visual representation of your
website's structure, showing how different
pages and sections are connected. A site map
outlines the hierarchy and relationships
between pages, helping to ensure a logical and
user-friendly navigation system. It’s a valuable
tool for both planning and communicating the
site’s layout.
Kindly answer UNIT
TEST on page 13