LESSON 1
INTRODUCTION TO THE
World Wide Web
AND ITS STRUCTURE
internet
The internet is a worldwide collection of computer networks that
link together millions of computers used by businesses, the
government, educational institutions, organizations and individuals
using modems, telephone lines, televisions cables and other
communication devices and media.
internet timeline
1960 - The USA creates the Advanced Research Projects Agency
(ARPA) with the mission of becoming the leading force in
science and new technologies.
1962 - J.C.R. Licklider of MIT proposes the concept of a
"Galactic Network". For the first time ideas about a global
network of computers are introduced. J.C.R. Licklider is
later chosen to head ARPA's research efforts.
1962 - Paul Baran, a member of RAND Corporation, determines a
way for the Air Force to control bombers and missiles in case
of a nuclear event. His results call for a decentralized
network comprised of packet switches.
1967 - Donald Davies first demonstrated packet switching in 1967
at the National Physics Laboratory (NPL) in UK, which
became a testbed for UK research for almost two decades.
ARPA contracts out work to BBN. BBN is called upon to
build the first switch.
1969 - ARPANET created - BBN creates the first switched
network by linking four different nodes in California and
Utah; one at the University of Utah; one at the University of
California at Santa Barbara; one at Stanford and one at the
University of California at Los Angeles.
1972 - ARPA to DARPA (Defense Advanced Research Projects
Agency).
Network Control Protocol (NCP) is introduced to allow
computers running on the same network to communicate with
each other.
1973 - Vinton Cerf begin to develop TCP/IP to allow computers on
different networks to communicate with each other.
1974 - Kahn and Cerf refer to the system as the internet for the
first time.
intranet
A computer network for sharing information, collaboration tools,
operational systems and other computing services within an
organization, usually to the exclusion of access by outsiders. The
term is used in contrast to public networks, but uses most of the
same technology based on Internet Protocol Suite.
1976 - Elizabeth II sends out an email on March 26 from the
Royal Signals and Radar Establishment (RSRE) in Malvern.
1979 - IBM introduces BITNET to work on emails and listserv
systems.
1981 - The National Science Foundation releases CSNET 56 to allow
computers to network without being connected to government
networks.
1983 - TCP/IP becomes the standard for internet protocol.
Domain Name System introduced to allow domain names to
automatically be assigned an IP Number.
1989 - ARPANET ceases to exist.
1990 - A hypertext system is created and implemented by Tim
Berners-Lee while working for CERN.
1991 - The National Science Foundation (NSF) creates the National
Research and Education Network (NREN).
1993 - The first web browser, Mosaic was created by NCSA and
was later becomes Netscape browser which is the most
popular browser in mid 1990's
1994 - Internet ordering system created by Pizza Hut.
Internet bank opened: First Virtual
1995 - Release of the web browser: Internet Explorer, Netscape
Navigator and Opera.
1996 - Internet Service Providers begin appearing such as Sprint
and MCI.
Nokia releases first cellphone with internet access.
2001 - Blackberry releases first internet cellphone in the U.S.
 internet timeline
2002 - Release of Mozilla Firefox as web browser. 2005 - YouTube launches
2003 - Release of Safari as web browser. 2008 - Google Chrome as web browser released by Google.

world wide web

WWW is one of the services that use the internet. It is a
client
collection of interlinked information that is stored on the computers
all around the world. It is part of the internet that supports
multimedia and consists of collection of linked documents.
Software program of computer that request information from
another software program on another computer.
Tim Berners-Lee server
Director of the WWW Consortium (W3C). Software program of computer that interacts with client
software in a client server environment.

web technologies
These are the tools and techniques that are utilized in the process of communication between different types of devices over the internet.
Some of the technologies used most often by both beginners and experts in the industry.
Web Browsers Protocols
Browsers make it possible for us to view all the resources that are Predefined rules that must be followed by everyone communicating
part of the World Wide Web. They are based on a client-server over the web.
architecture.
LIST OF COMMON WEB CONTROLS

examples: HyperText Transfer Protocols (HTTP)

Opera, Mozilla Firefox, Google Chrome and Safari.
Defines how client requests and how servers respond to client
request.
client: browser
server: combination of software and hardware that receives the Transmission Control Protocol (TCP)
client's request and sends the requested resource to the client.
Establishes a connection between two devices on the web and
Programming Languages and manages the delivery of data packets.
Frameworks Internet Protocol (IP)
These are the most basic component of website creation. Transfers data packets between two devices on the web.
In order to code a website, you need to be familiar with a few TCP/IP
programming concepts, some languages and their syntax and good IDE. These two web technologies often work together.
examples: JAVA, JS, VUE, NODE, FLASK, PYTHON, RUBY, User Datagram Protocol (UDP)
ANGULAR
Establishes connection between two devices on the web.
Databases File Transfer Protocol (FTP)
Used at the backend to store data required or collected by websites. Transfers files between client and server
Most websites have their own databases associated with them. Simple Mail Transfer Protocol (SMTP)
Sends email messages to the server.
All the data that is exchanged on the web needs to be stored
somewhere.
 web technologies
LIST OF COMMON WEB CONTROLS Graphics, Audio visual and other
multimedia elements
Post Office Protocol (POP)
Graphical elements are a key feature of any webpage. They
Fetches email messages from the server. contribute to the beautification of a page but can also be used to
Simple Object Access Protocol (SOAP) convey important points in a better manner than text does.
Sends XML messages via HTTP.
examples:
Canvas, SVG and webGL

principles of effective web design

color and imagery don't break the grid
DON'T OVERUSE color, USE 2 OR 3 COLORS for one site.
USE COMPLIMENTARY COLOR SCHEME
Images aren't space fillers. All the images you use should provide
VALUE and offer a greater insight of the written content.
DO NOT OVERDO using images.
fonts to use
Keep the end user in mind. Large fonts could result in increased
loading times.
In terms of color, keep the number of different fonts to a minimum
. DOWN.
BODY TEXT= SANS SERIF ; HEADLINES= SERIF
Don't try to fix or improve on something that is broken.
The GRID SYSTEM is familiar and comfortable and there is
NO NEED TO REARRANGE layout of text on a page.
the F pattern
Readers use a quickened version of the F pattern to scan titles,
headlines and images to determine if it's worth their time to read the
whole piece. You need to ensure that the layout of your sites content
pays attention to the F pattern.
F pattern means reading from LEFT-TO-RIGHT and from UP-TO-

things to consider IN WEB DESIGNING web creation

SUPPORT TOOLS FOR

create the goal or purpose of the website
identify the primary target audience
plan the content of the website
plan and organize the site structure
plan the web pages details
planning and designing navigation scheme
planning and gathering your resources
INTERFACE DESIGN APPS AND PROTOTYPING TOOLS
help designers envision how website willbehave before they're launched
PHOTO EDITING AND GRAPHIC DESIGN TOOLS
allow designers manipulate images and create graphics
CODE LIBRARIES, DEVELOPMENT ENVIRONMENTS, AND HOSTING SERVICES
allow developers to launch their websites and share them in the world.

structures of web designing

linear structure This structure is designed to present the website one at a time.
USEFUL FOR TUTORIAL SITES AND HISTORICAL INFORMATION
 hierarchical structure random structure
USES A TREE LIKE PRESENTATION This structure presents its resources and information in ANY ORDER.

Includes several categories that are connected to the home page and This kind of structure is commonly used by small web sites or sites
under each category may contain subcategories containing a few web pages

importance of website
communication webpages can communicate positively or negatively
If the website communicates value and trustworthiness, visitors will
bookmark it for future references.
entertainment people go to the web daily for entertainment
Web can offer unique capability of multimedia experiences such as music,
videos, sports, chats and on going episodes.
business conducting business online offers range possibilities
E-commerce is the conducting of business activities online. If you want to
promote a product or service, you must consider creating a website.
education web offers new avenues for formal and informal teaching
The web offers exciting and challenging ways of teaching therefore it can
enhance traditional teaching methods.

website url
TYPES OF

1. eCommerce Website UNIFORM RESOURCE LOCATOR

2. Business Website
3. Entertainment Website URL represents an address of a certain file on the TCP/IP network and
4. Portfolio Website leads user to a file on any computer connected to the Internet anywhere in
5. Media Website the world.
6. Brochure Website
7.
8.
9.
Nonprofit Website
Educational Website
Infopreneur Website
domain name
10. Personal Website A domain name is an identification string that defines a realm of
11. Web Portal administrative autonomy, authority or control within the Internet. It is used
12. Wiki/Community Forum Website in various networking contexts and for application-specific naming and
addressing purposes.

common domain names

.ph .org .com .io .edu
.gov .co .net .us .ru

significant names
Joseph Carl Robnett Licklider Vinton Gray Cerf
FOUNDER OF ARPANET FATHER OF INTERNET

Raymond Samuel Tomlinson Robert Elliot Kahn

FATHER OF EMAIL FOUNDER OF TCP/IP

Tim Berners-Lee
FATHER OF WORLD WIDE WEB

-end-
 LESSON 2
introduction to HTML
html different features OF HTML 5
HTML or Hyper Text Markup Language is the standard markup
language for creating webpages. It describes the structure of a easy character encoding
webpage. It also consists of a series of elements. capable of handling incorrect
syntax
new graphic elements
enrich semantic content

html elements
drag and drop
uses sql database to store data
offline
new multimedia features
Commonly represented by tags that tells the browser how to display geo-location services
the content. However, browsers do not display html tags, but use web storage facility
them to render the content of the page. easy doctype declaration

html tags
html elements
Tags that are element names surrounded by angle brackets. <!DOCTYPE html>
Normally come IN PAIRS. defines this document to be HTML 5

<head> </head> <html>

First Tag: START/OPENING TAG; root element of an HTML page
<head>
<head>

Second Tag: END/CLOSING TAG contains meta information

</head>
</head> <title>
End tag is written like start tag but with a FORWARD SLASH specifies title for the document
inserted before the tag name
<body>
contains the visible page content

html 5 <h1>
defines a large heading
HTML is the fifth and current version of HTML. It has improved
the markup available for documents and has introduced: <p>

Applications programming interfaces (API) and; defines a paragraph

Document Object Model (DOM).

Advantages of html 5 removed elements
FROM HTML 5
All browsers supported
More device friendly REMOVED USE INSTEAD
<acronym> <abbr>
Easy to use and implement <applet> <object>
Integration with CSS, JavaScript can <basefont> css
help build beautiful websites <big> css
<center> css
Disdvantages of html 5 <dir>
<font>
<frame>
<ul>
css

Long codes have to be written which is <frameset>

time consuming. <noframes>
Only modern browsers support it <isindex>
<strike> css, <s> or <del>
<tt> css

added elements
FROM HTML 5

ADDED ELEMENTS USES

<article> to present an article

<aside> to describe main object of the webpage in a shorter way
<figcaption> to set a caption to the figure element
<header> contains section heading such as navigation
<footer> used to define a footer in HTML
<main> delineates the main content of the body
<mark> define marked text
<nav> declare navigational section
<section> demarcates a thematic grouping of content
<details> used for content initially hidden but could be displayed
<summary> define a summary for the element
<time> display human-readable date/time
<bdi> refers to bi-directional isolation; used when a user generated text with
an unknown directions.
<wbr> word break opportunity; used to define the position within the text
which is treated as a line break
<datalist> used to provide autocomplete feature
<keygen> used to specify key-pair generator field in form
<output> used to present the result of a calculation
<progress> used to represent the progress of a task
<svg> scalable vector graphics
<canvas> used to draw graphics on web page
<audio> defines the music or audio content
<embed> defines containers for external applications
<source> defines source for <video> and <audio>
<track> defines tracks for <video> and <audio>
<video> defines video content

-end-
 LESSON 3
html elements
html element LIST OF HTML ATTRIBUTES

href attribute
An HTML element usually consists of a start tag and an end tag HTML links are defined with the <a> tag.
EXAMPLE:
<a href="https://www.w3schools.com"> This is a link </a>

kinds of html src attribute

elements
HTML images are defined with the <img> tag
EXAMPLE:
<img src="img_girl.jpg">
width and height attribute
empty element HTML images also have width and height attributes. Expressed in
pixels in default
EXAMPLE:
An HTML element with no content and do not have end tags. <img src="img_girl.jpg" width="500" height="600">
example: alt attribute
<br> This attribute specifies an alternative text to be used.
an element that indicates line break EXAMPLE:
<img src="img_girl.jpg" alt="Girl with a jacket">
nested element style attribute
This attribute is used to specify the styling of an element.
An HTML element containing elements. EXAMPLE:
<p style="color:red"> This is a red paragraph. </p>
example:
<!doctype html> lang attribute
<html> Language of the document can be declared in the <html> tag.
<body> EXAMPLE:
<h1> First Heading </h1> <html lang="en-US"> </html>
<p> First Paragraph </p>
</body> title attribute
</html> This attribute is added to the <p> element.
EXAMPLE:
explanation: <p title="I'm a tooltip"> This is a paragraph </p>
Inside the <html> element is <body> element.
Inside the <body> element is two other HTML elements:
<h1> and <p> rules in attributes
html attributes any attributes can be written with
uppercase or lowercase.
lowercase.
html 5 does not require quotes around
attribute values, but w3c recommends
An HTML attributes provide additional information about the quotes in html to avoid errors.
errors.
element. double quotes around the attribute values
are the most common in html, but single
Usually come in name/value pairs like: name="value" quotes can also be used.
used.

-end-
 LESSON 4
creating an html document
html headings DISPLAY
Large or small screens, and resized windows will create
different results.
HTML headings are defined with the <h1> to <h6> tags. With HTML, you cannot change the output by adding extra
spaces or extra lines in your HTML code.
<H1> The browser will remove any extra spaces and extra lines
defines the most important heading when the page is displayed
<H6>
defines the least important heading END TAG
Most browsers will display HTML correctly even if you forget
example: the end tag
<H1> THIS IS HEADING 1 </H1> Dropping the end tag can produce unexpected results or
errors.

html paragraphs line breaks

HTML paragraphs are defined with the <p> tag. The HTML <br> element defines a line break. Use this element
if you want a line break without starting a new paragraph. This
example: tag is an empty tag.
<P> THIS IS A PARAGRAPH </P>
pre-element
html images The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width
HTML headings are defined with the <img> tag. font, and it preserves both spaces and line breaks.

formatting elements
example:
<img src="koala.jpg"
alt="salazar.com"
width="104" height="142"> DESIGNED TO DISPLAY
SPECIAL TYPES OF TEXT
The source file (src), alternative text (alt), width, and <b> <i>
height are provided as attributes:
bold text italic text
html lists <strong> <em>

HTML lists are defined with the: important text emphasized text
<ul> or <ol> tags, followed by <li>
<mark> <del>
example: default result:
<ul> Coffee marked text delete text
<li> Coffee Tea
<li> Tea Milk <small> <ins>
<li> Milk
</ul> small text inserted text
<ol> 1. Coffee
<li> Coffee 2. Tea <sub> <sup>
<li> Tea 3. Milk
<li> Milk subscript text superscript text
</ol>
abbreviations background images
The HTML <abbr> element defines an abbreviation or an acronym To add a background image on an HTML element, you can use the
style attribute
example:
<p> the <abbr title="World Health example:
Organization"> who </abbr> was <div style="background-image:
founded in 1948 </p> url('img_girl.jpg');">

address background image on a page

The HTML <address> element defines contact information If you want the entire page to have a background image, then you
(author/owner) of a document or an article. This tag is usually must specify the background image on the <body> element
displayed in italic. Most browsers will add a line break before
and after the element. example:
<body style="background-image:
example: url('img_girl.jpg');">
<address>
Written by John Doe. <br>
Visit us at: <br> background repeat
Example.com <br>
Box 564, Disneyland <br> If the background image is smaller than the element, the image
USA <br> will repeat itself, horizontally and vertically, until it has reach the
</address> end of the element. The background-image property will try to fill
the div element with images until it has reach the end.
work title example:
<body style="background-image:
The HTML <cite> element defines the title of a work. This tag is url('img_girl.jpg'); background-repeat:
usually displayed in italic. no repeat;">

example:
<p> <cite> the scream </cite> background cover
by edvard munch. painted in 1893.
</p> If you want the background image cover the entire element, you
can set the background-size property to cover. Also, to make
sure the entire element is always covered, set the background-
bi-directional override attachment property to fixed. The image will cover the entire
element, with no stretching, the image will keep its original
The HTML <bdo> element defines bi-directional override. This proportions.
tag is used to override the current text direction.
example:
example: <body style="background-image:
<bdo dir="rtl"> this text will be url('img_girl.jpg'); background-repeat:
written from right to left </bdo> no-repeat; background-attachment:
fixed; background-size: cover;">
comment tags background stretch
Comment tags are used to insert comments in the HTML source
code. You can add comments to your HTML source by using the The background image will stretch to fit the entire image in the
following syntax: <!-- write your comments here--> element, by setting the background-size property to 100% 100%:
Comments are not displayed by the browser, but they can help
place notifications and reminders in your HTML example:
<body style="background-image:
example: url('img_girl.jpg'); background-repeat:
<!-- this is a comment--> no-repeat; background-attachment:
fixed; background-size: 100% 100%;">
 videos on html
video autoplay
The HTML <video> element embed a video in a web page. To start a video automatically use the autoplay attribute. The
autoplay attribute does not work in mobile devices like iPhon.e
example:
<video width="320" height="240" example:
controls> <source src="movie.mp4" <video width="320" height="240"
type="video/mp4"> <source autoplay> <source src="movie.mp4"
src="movie.ogg" type="video/ogg"> type="video/mp4"> <source
Your browser does not support src="movie.ogg" type="video/ogg">
the video tag. </video> Your browser does not support the
video tag. </video>
The controls attribute adds video controls such as play,
pause, and volume. The autoplay attribute enables autoplay feature.
The <source> element allows you to specify alternative The <source> element allows you to specify alternative video files
video files which the browser may choose from. which the browser may choose from.

audio on the web

audio
To play an audio file in HTML, use the <audio> element. The controls attribute adds video controls such as play,
pause, and volume.
example:
<audio controls> <source The <source> element allows you to specify alternative video
src="horse.ogg" type="audio/ogg"> files which the browser may choose from.
<source src="horse.mp3"
type="audio/mpeg"> The text between the <audio> and </audio> tags will only be
Your browser does not support the displayed in browsers that do not support the <audio>
audio element. </audio> element.

media types
HTML VIDEO HTML AUDIO

MP4 MP3
video/mp4 audio/mpeg

WebM OGG
video/webm audio/ogg

OGG WAV
video/ogg audio/wav

-end-
 LESSON 5
working with images and tables
working with images images on another server
Images can improve the design and the appearance of a web page. Some web sites store their images on image servers. Actually, you
can access images from any web address in the world.
images syntax example:
<img
In HTML, images are defined with the <img> tag. empty tag src="https://raquelsalazar.com/
images/rsalazar_green.jpg"
example: alt="rsalazar.com">
<IMG SRC="URL">

alt attribute images as a link

To use an image as a link, put the <img> tag inside the <a> tag.
The alt attribute provides an alternate text for an image,
example:
example: <a href="default.asp">
<IMG SRC="IMG_CHANIA.JPG" <img src="smiley.gif" alt="HTML
ALT="FLOWERS IN CHANIA"> tutorial"
image size style="width:42px;height:42px;bor
der:0;">
</a>
You can use the width and height attributes. The width and height
attributes always defines the width and height of the image in
pixels.
example:
working with tables
<img src="img_girl.jpg" An HTML table is defined with the <table> tag.
alt="Girl in a jacket"

table elements
width="500" height="600">

images in another folder

<tr> <th> <td>
It is common to store images in a sub-folder. You must then
include the folder name in the src attribute: table row table header table data/cell

example:

table attributes
<img src="/images/html5.gif"
alt="HTML5 Icon"
style="width:128px;height:128px;">

animated images colspan rowspan

To make a cell To make a cell

HTML allows animated GIFs. span more than span more than
one column. one row,
example:
<img src="programming.gif"
alt="Computer Man"
style="width:48px;height:48px;">