STUDY GUIDE FOR MODULE NO. 1 1.2.

Protocols
Introduction to Internet and Web Development
 A protocol is a set of rules that defines
1.1. What is internet and associated key how a client workstation can
terms? communicate with a server
 A server is the host computer that
 The Internet is a worldwide collection stores resources and files for websites
of computers linked together for use by  Hypertext Transfer Protocol (HTTP)
organizations, and individuals using is a set of rules for exchanging text,
communications devices and media graphics, audio, video, and other
 A node is any device, such as a multimedia files on the web
computer, tablet, or smartphone,  File Transfer Protocol (FTP) is used
connected to a network to exchange files from one computer to
 A network is a collection of two or more another over the Internet
computers linked together to share -This protocol does not provide a way to
resources and information view a webpage
 The Internet of Things describes the  Transmission Control
ever-growing number of devices Protocol/Internet Protocol (TCP/IP)
connecting to a network, including is a pair of protocols used to transfer
televisions and appliances. data efficiently over the Internet by
 Data lines that connect networks allow properly routing it to its destination
data to move from one computer to  Internet Protocol (IP) ensures data is
another sent to the correct location
 The Internet backbone is a collection  The Domain Name System (DNS)
of high-speed data lines that connect associates an IP address with a domain
major computer systems located around name
the world 1.3. Web Browsers
 An Internet Service Provider (ISP) is
a company that has a permanent  A web browser is a program that
connection to the Internet backbone interprets and displays Web pages and
 The World Wide Web, also called the enables you to view and interact with a
web, is the service that provides access Web page
to information stored on web servers – Microsoft Internet Explorer,
 The web consists of a collection of linked Mozilla Firefox, Google Chrome,
files known as webpages and Apple Safari
 A website is a related collection of  A Uniform Resource Locator (URL) is
webpages created and maintained by a the address of a document or other file
person, company, educational accessible on the Internet
institution, or other organization – http://www.cengagebrain.com/
 A home page is the first document shop/index.html
users see when they access a website  A domain is an area of the Internet a
 A hyperlink, commonly called a link, is particular organization or person
an element that connects one webpage manages.
to another webpage on the same server
or to any other web server in the world
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 1.6.2 Site Map
electronic commerce (e-commerce),  A site map is a planning tool that lists or
which is the buying and selling of goods displays all the pages on a website and
and services on the Internet indicates how they are related to each
 Educational institutions use a Learning other
Management System (LMS) to -It shows the structure of a website
simplify course management
– An LMS is a web-based software
application designed to facilitate  A linear website structure connects
online learning webpages in a straight line

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  In a variation of a linear website
audience structure, each page can include a link
o Knowing their general to the home page of the website
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  A hierarchical website connects
on the page that is webpages in a treelike structure
intentionally left blank
 Passive white space is the
space between content areas
- Helps a user focus on
one part of the page
  A webbed website structure has 1.7.4 Color
no set organization  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
1.7 Use of Graphics, navigation tools,
 A web designer should create
typography, color and accessibility
pages for viewing by a diverse
audience, including people with
1.7.1 Graphics
physical impairments and global
 Graphics add visual appeal to a
users
webpage and enhance the
 The World Wide Web Consortium
visitor’s perception of the
(W3C) develops and maintains
products and services
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

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
1.7.3 Typography
1.8 Technologies Related to HTML
 The use of effective typography,
or fonts and font styles, enhances
 XML — The W3C introduced XML
the visual appeal of a website
(Extensible Markup Language) in
 Typography also should promote
1998 to exchange and transport data
the purpose and goal of the
 XHTML — (Extensible Hypertext
website
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 languages, including HTML, CSS,
Language) JavaScript, PHP, Java, C#, and Visual
– It is the most recent version of Basic
HTML  Programmer’s Notepad is a free,
– It introduces several new open-source text editor used to create
elements such as header, nav, webpages, and files in several markup,
main, and footer to better scripting, and programming languages
define the areas of a webpage as well
– They are known as semantic  Sublime is a cross-platform text editor
HTML elements because they  TextWrangler is a free, open-source
provide meaning about the text editor. It is used to create files in
content of the tags many formats, including HTML and CSS
– It provides a more flexible  WYSIWYG Editors – Stands for What
approach to web development You See Is What You Get
1.9 Understanding the Role of Other Web – These editors provide a graphical
Programming Languages user interface to design a
webpage
 JavaScript — It is a popular client- – It allows to drag HTML elements
side scripting language used to create onto the page while the editor
interactivity within a web browser writes the code
– The web pages that contain  Adobe Dreamweaver is a popular
JavaScript are named with WYSIWYG editor
an .htm or .html extension  Microsoft Expression Web 4 is a
 jQuery — It is a library of JavaScript WYSIWYG webpage editor from
programs designed for easy integration Microsoft
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