FM-AA-CIA-15 Rev.

0 10-July-2020

Study Guide in WD101 Web Development Module No.1

STUDY GUIDE FOR MODULE NO. 1

Introduction to Internet and Web Development

MODULE OVERVIEW

This module provides the fundamentals of the internet and web development. You will learn the
basic of the technical infrastructure of the web and the difference between the Internet and the
web. It also provides a simplified view of what happens when you view a web page in a web
browser on your computer or mobile phone. Lastly, it talks about how to build and design a
website.

MODULE LEARNING OBJECTIVES

At the end of this module, students are expected to:

1. Define the Internet and associated key terms
2. Recognize Internet protocols
3. Discuss web browsers and identify their main features
4. Describe the types and purposes of websites
5. Plan a website for a target audience
6. Define a wireframe and a site map.
7. Explain how websites use graphics, navigation tools, typography, and color.
8. Design for accessibility and multiplatform display
9. Define Technologies Related to HTML
10. Recognize HTML Versions and Web.
11. Identify Web Authoring Tools.

LEARNING CONTENTS (Introduction to the Internet and Web Development)

1.1. What is internet and associated key terms?

 The Internet is a worldwide collection of computers linked together for use by

organizations, and individuals using communications devices and media
 A node is any device, such as a computer, tablet, or smartphone, connected to a
network
 A network is a collection of two or more computers linked together to share resources
and information
 The Internet of Things describes the ever-growing number of devices connecting to a
network, including televisions and appliances.
 Data lines that connect networks allow data to move from one computer to another
 The Internet backbone is a collection of high-speed data lines that connect major
computer systems located around the world
 An Internet Service Provider (ISP) is a company that has a permanent connection to
the Internet backbone
 The World Wide Web, also called the web, is the service that provides access to
information stored on web servers
 The web consists of a collection of linked files known as webpages
 A website is a related collection of webpages created and maintained by a person,
company, educational institution, or other organization
 A home page is the first document users see when they access a website
 A hyperlink, commonly called a link, is an element that connects one webpage to
another webpage on the same server or to any other web server in the world

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

1.2. Protocols

 A protocol is a set of rules that defines how a client workstation can communicate with
a server
 A server is the host computer that stores resources and files for websites
 Hypertext Transfer Protocol (HTTP) is a set of rules for exchanging text, graphics,
audio, video, and other multimedia files on the web
 File Transfer Protocol (FTP) is used to exchange files from one computer to another
over the Internet
-This protocol does not provide a way to view a webpage
 Transmission Control Protocol/Internet Protocol (TCP/IP) is a pair of protocols
used to transfer data efficiently over the Internet by properly routing it to its destination
 Internet Protocol (IP) ensures data is sent to the correct location
 The Domain Name System (DNS) associates an IP address with a domain name

1.3. Web Browsers

 A web browser is a program that interprets and displays Web pages and enables you to
view and interact with a Web page
– Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, and Apple Safari
 A Uniform Resource Locator (URL) is the address of a document or other file
accessible on the Internet
– http://www.cengagebrain.com/shop/index.html
 A domain is an area of the Internet a particular organization or person manages.

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

1.4. Types of Websites

 An Internet site is another term for a website that is generally available to anyone with
an Internet connection
 An intranet is a private network that uses Internet technologies to share company
information among employees
 An extranet is a private network that uses Internet technologies to share business
information with select corporate partners or key customers
 Many company websites also support electronic commerce (e-commerce), which is
the buying and selling of goods and services on the Internet
 Educational institutions use a Learning Management System (LMS) to simplify course
management
– An LMS is a web-based software application designed to facilitate online learning

1.5 Planning/ Building a Website

 Purpose of the website — The purpose of a commercial business website is related to the
goal of selling products or services
 Target Audience — The people who use the website are known as the target audience
o Knowing their general demographic background will help to design a website
appropriate for them
 Multiplatform Display —A responsive design of a website must be created that provides
an optimal viewing experience across a range of devices

1.6 Wireframe and Site Map

1.6.1 Wireframe
 A wireframe is a simple, visual guide that clearly identifies the location of
main webpage elements
 Active white space is an area on the page that is intentionally left blank
 Passive white space is the space between content areas
- Helps a user focus on one part of the page

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

1.6.2 Site Map

 A site map is a planning tool that lists or displays all the pages on a
website and indicates how they are related to each other
-It shows the structure of a website

 A linear website structure connects webpages in a straight line

 In a variation of a linear website structure, each page can include a link to the
home page of the website

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

 A hierarchical website connects webpages in a treelike structure

 A webbed website structure has no set organization

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

1.7 Use of Graphics, navigation tools, typography, color and accessibility

1.7.1 Graphics
 Graphics add visual appeal to a webpage and enhance the visitor’s perception of
the products and services

1.7.2 Navigation
 The navigation of a website should be clear and concise
 Each webpage should have a designated navigation area with links to other pages
in the site
 The navigation area should be prominent and easy to use

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

1.7.3 Typography
 The use of effective typography, or fonts and font styles, enhances the visual
appeal of a website
 Typography also should promote the purpose and goal of the website

1.7.4 Color
 The combination of colors contributes to the appeal and legibility of the website
 Aim to strike a balance among the background color, text color, and the color
that represents a brand
 Colors convey meanings

1.7.4 Accessibility
 A web designer should create pages for viewing by a diverse audience, including
people with physical impairments and global users
 The World Wide Web Consortium (W3C) develops and maintains web standards,
language specifications, and accessibility recommendations.

Navigation, typography, color, and accessibility are the basic web page design criteria to
consider when developing a website. A sophisticated website requires additional design
considerations and research of the business, its competition, and a complete business analysis

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

1.8 Technologies Related to HTML

 XML — The W3C introduced XML (Extensible Markup Language) in 1998 to

exchange and transport data
 XHTML — (Extensible Hypertext Markup language) is a rewritten version of HTML
using XML and was developed in 2000 and is accepted on mobile device platforms
 DHTML — DHTML (Dynamic Hypertext Markup Language) is a term that refers to a
combination of web technologies
 HTML — HTML (Hypertext Markup Language)
– It is the most recent version of HTML
– It introduces several new elements such as header, nav, main, and footer to
better define the areas of a webpage
– They are known as semantic HTML elements because they provide meaning
about the content of the tags
– It provides a more flexible approach to web development

1.9 Understanding the Role of Other Web Programming Languages

 JavaScript — It is a popular client-side scripting language used to create

interactivity within a web browser
– The web pages that contain JavaScript are named with an .htm or .html
extension
 jQuery — It is a library of JavaScript programs designed for easy integration onto a
webpage
– It makes it easy for web developers to add JavaScript to a webpage

• PHP (Hypertext Preprocessor) — It is an open-source server-side scripting language

used for common tasks such as writing to or querying a database located on a central
server
– Pages that contain PHP scripts must have file names that end with the file
extension .php
• ASP (Active Server Pages) — is a server-side scripting technology
– Pages that contain ASP scripts must have file names that end with the file
extension .asp

1.10 Web Authoring Tools

 Webpages can be created using HTML with a simple text editor, such as Notepad,
Notepad++, Sublime, Programmer’s Notepad, TextEdit, and TextWrangler
 A text editor is a program that allows one to enter, change, save, and print text, which
includes HTML tags
 An HTML editor is a program that provides basic text-editing functions, and advanced
features such as color-coding for various HTML tags, menus to insert HTML tags, and a
spelling checker
 HTML is platform independent
 Notepad++ is a free, open-source text editor. It is used to create files in several
markup, scripting, and programming languages, including HTML, CSS, JavaScript, PHP,
Java, C#, and Visual Basic
 Programmer’s Notepad is a free, open-source text editor used to create webpages,
and files in several markup, scripting, and programming languages as well
 Sublime is a cross-platform text editor
 TextWrangler is a free, open-source text editor. It is used to create files in many
formats, including HTML and CSS

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in WD101 Web Development Module No.1

 WYSIWYG Editors – Stands for What You See Is What You Get
– These editors provide a graphical user interface to design a webpage
– It allows to drag HTML elements onto the page while the editor writes the code
 Adobe Dreamweaver is a popular WYSIWYG editor
 Microsoft Expression Web 4 is a WYSIWYG webpage editor from Microsoft

LEARNING ACTIVITY 1

Home-based Activity:

1. Decide as a whole class on what text editor to be used.

2. Download and install the agreed text editor.
3. Explore and familiarized with the features of the text editor (install plugins and etc.)
ACTIVITY

SUMMARY

In this module, you explored the fundamentals of the internet and the web development.
You’ve learned the following:

1. Internet and associated key terms

2. Internet protocols
3. Web browsers and identify their main features
4. Types and purposes of websites
5. Plan a website for a target audience
6. Wireframe and site map.
7. How websites use graphics, navigation tools, typography, and color.
8. Design for accessibility and multiplatform display
9. Technologies Related to HTML
10. HTML Versions and Web.
11. Web Authoring Tools.

REFERENCES

Web Design with HTML and CSS3: Introductory. 8th Edition

Minnick J. | Lisa Friedrichsen (2016)

Online learning materials

tutorialrepublic.com/php-tutorial

php.net

tutorialrepublic.com/php-examples.php

PANGASINAN STATE UNIVERSITY PAGE \* MERGEFORMAT 15