WEB PROGRAMMING 1

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
COURSE PLAN
I. Internet and its services
II. Operation of the Web
III. Addressing of Web documents
IV. HTML
V. CSS
VI. Java script

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
 I- Internet and its services

a- Definition
Internet is a global network of interconnected networks that enables
communication and information sharing between billions of computers and
other digital devices.
The Internet is not a single network, but a collection of smaller networks that
communicate with each other. The Internet uses protocols like TCP/IP to enable
different devices to understand each other.
In the early days, the internet was called ARPANET. The ARPANET
(Advanced Research Projects Agency Network) project was initiated in the
1960s by the American Defense Advanced Research Projects Agency (ARPA).
The aim was to create an attack-resistant communications network, enabling
researchers from different institutions to share information. ARPANET later
became INTERNET.
The Internet is accessible from almost anywhere in the world, provided you
have an Internet connection.
Internet offers a multitude of services, such as the World Wide Web, e-mail, file
transfer, voice over IP and more.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
 b- Components of the Internet
The main components of the Internet:
 Computers: These are the devices that are connected to the Internet and
enable access to online services.
 Servers: These are powerful computers that store the data and applications
accessed via the Internet.
 Routers: These devices direct data from one network to another.
 Cables: Submarine and terrestrial cables connect the various networks.

c- Internet services
The Internet offers a multitude of different services that have revolutionized the
way we live and work.
The Internet is more than just a communications network; it's a platform that
hosts a multitude of services. These services have transformed the way we
communicate, work, entertain ourselves and access information. Here are a few
of the most important:
 The World Wide Web (WWW): This is probably the best-known
service. It is a graphical interface providing access to documents

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
 interconnected by hypertext links. This includes web pages,
websites and web applications.

 Electronic mail (e-mail): One of the first services to enjoy runaway

success, e-mail lets you exchange text messages, files and images
around the world.

 Instant Messaging: Apps like WhatsApp and Messenger for real-

time text, voice, and video communication.

 Video Conferencing: Tools like Zoom and Microsoft Teams for

virtual meetings and collaboration.

 Search Engines: Google, Bing, and others to find information on

any topic.
 Online Encyclopedias: Wikipedia for general knowledge.
 News Websites: For up-to-date news and current events.
 Online Shopping: Amazon, eBay, and other online stores for
buying products.
 Digital Payments: Services like PayPal and Venmo for making
online payments.

II- Operation of the web

THE WEB WWW (also called as Web) is a large scale, online store of
information. It is a system of creating, organizing, and linking of documents.
Information is stored on WWW as a collection of documents that are
interconnected with each other via links. The interconnected documents may be
located on one or more than one computer, worldwide, thus, the name world
wide web. The features of WWW and terms linked to WWW are given below:
 The documents on web are created in hypertext format. Hypertext
facilitates linking of documents.

 The language used to create a hypertext format document is HyperText

Markup Language (HTML). HTML allows the designer of the document
to include text, pictures, video, images, sound, graphics, movies etc., and
also to link contents on the same document or different documents using a
hyperlink.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
  The hypertext format document is transferred on the Web using
HyperText Transfer Protocol (HTTP).

 A single hypertext document is called a Web page.  A group of related

web pages is called a Web site. A web site displays related information on
a specific topic.
The web was created by Tim Berners-Lee.

a- Web fundamentals
There are some basics things that we need to know about the web before digging
in the depths.
1- Client/server architecture
Like most Internet services, the Web is based on a client/server architecture: to
obtain a Web page, the client requests it from the server that holds it.
Both client and server are software programs, and can be installed on any
machine.
The client software is called a browser, such as Firefox or Chrome.
A web browser is an application used for accessing websites.

A browser displaying static web page

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
 2- URL: logical addressing
Available documents are located on the Web by a logical address, Uniform
Resource Locator.
URL syntax is standardized; for example, let's break down :
https://www.gnu.org/gnu/linux-and-gnu.fr.html
- the protocol is https ;
- the machine's Internet domain name is www.gnu.org, the prefix www being
the usual name of the public folder on a Web server;
- gnu/linux-and-gnu.fr.html is the path to the resource on the server: the file
linux-andgnu.fr.html, which is located in the gnu folder itself, in the public
folder www.
3- HTTP : The protocol
During a Web exchange, the client and server communicate according to the
rules laid down by a standardized protocol, the HyperText Transfer Protocol
(HTTP).
So a protocol is a set of rules used to exchange data on the web.

4- HTML: The language

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
 Example: Structure of a simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained

 The <!DOCTYPE html> declaration defines that this document is an

HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

5- Static web page

A static web page is a web page that displays the same content to every visitor,
regardless of who they are or when they visit.
Static pages are created using HTML, CSS, and sometimes JavaScript. These
files are saved on a web server.
Characteristics of Static Web Pages
 Fixed Content: The content doesn't change dynamically.
 Simple Structure: They are relatively straightforward to create and
maintain.
 Faster Loading Times: Since the content is pre-rendered, they load
quickly.
 Higher Security: Fewer vulnerabilities compared to dynamic websites.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
Limitations of Static Web Pages
 Lack of Interactivity: They cannot provide real-time updates or
personalized content.
 Difficult to Manage Large-Scale Websites: Managing a large number of
static pages can be time-consuming.
 Limited Functionality: They are not suitable for complex applications that
require user input and dynamic content generation.

6- dynamic web page

Dynamic Web Pages: A World of Interactivity
Dynamic web pages are the opposite of static web pages. They can change their
content based on user input, server-side scripts, or real-time data. This makes
them much more interactive and engaging.
A user interacts with the page, such as clicking a button, submitting a form, or
simply navigating to a different page.

Characteristics of Dynamic Web Pages

 Interactive Content: Users can interact with the page and influence its
behavior.
 Personalized Experience: Content can be tailored to individual users.
 Real-Time Updates: Information can be updated instantly, such as stock
prices or news feeds.
 Complex Functionality: Dynamic pages can handle complex tasks like
online shopping, social networking, and online gaming.

Technologies Used for Dynamic Web Pages

 Server-Side Scripting Languages: PHP, Python, Ruby, Node.js
 Databases: MySQL, PostgreSQL, MongoDB
 Frameworks: Laravel, Django, Ruby on Rails, Express.js
 Front-End Teschnologies: HTML, CSS, JavaScript

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
Addressing Web Documents: A Deep Dive into URLs

Understanding URLs

A URL (Uniform Resource Locator) is the address of a resource on the internet. It's like a
physical address for a website or a specific page within a website.

Basic Structure of a URL

A typical URL consists of the following components:

1. Protocol: This specifies the method used to access the resource. The most common protocol
is HTTP (Hypertext Transfer Protocol).
2. Domain Name: This identifies the specific website or server where the resource is located.
3. Domain Name System (DNS): This system translates human-readable domain names into
machine-readable IP addresses.
4. Path: This specifies the location of the resource within the server's file system.
5. Query String: Optional parameters that can be added to the URL to customize the request.
6. Fragment Identifier: Optional identifier used to specify a specific part of a document.

Example:

https://www.example.com/products/laptops/macbook-
pro?color=silver#technical-specs

 Protocol: https (Hypertext Transfer Protocol Secure)

 Domain Name: www.example.com
 Path: /products/laptops/macbook-pro
 Query String: ?color=silver
 Fragment Identifier: #technical-specs

How URLs Work

1. User enters URL: You type a URL into your browser's address bar.
2. DNS Lookup: The browser queries a DNS server to resolve the domain name into an IP
address.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
 3. HTTP Request: The browser sends an HTTP request to the server at the IP address.
4. Server Processing: The server processes the request, locates the requested resource, and
generates an HTTP response.
5. Response Transmission: The server sends the response back to the browser.
6. Browser Rendering: The browser interprets the HTML, CSS, and JavaScript in the response
and displays the web page.

Types of URLs

 Absolute URLs: These specify the complete address of a resource, including the protocol,
domain name, and path.
 Relative URLs: These specify the location of a resource relative to the current page. They are
often used to link to other pages within the same website.

Importance of URL Structure

 User Experience: Well-structured URLs can improve user experience by making websites
easier to navigate and remember.
 Search Engine Optimization (SEO): Search engines use URLs as a ranking factor, so using
descriptive keywords in URLs can help improve search engine visibility.
 Website Organization: URLs can help organize website content and make it easier to
manage.

By understanding the components and functions of URLs, you can better navigate the web
and create user-friendly websites.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
HTML5

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
Definition
HTML stands for HyperText Markup Language. It's the standard language
for creating web pages and web applications.
HTML uses tags to structure and present content on a webpage. These tags tell
the web browser how to display text, images, and other elements. For example, a
<p> tag defines a paragraph, while a <h1> tag defines a heading.
In HTML, tags are keywords enclosed in angle brackets (<>) that define the
structure and content of a web page. They tell the web browser how to display
the content.

Tags are categorized into two main types: paired tags, defined by a start tag and
an end tag, and empty tags, which are self-closing.

Paired Tags

Paired tags, also known as container tags, come in a set of two: an opening tag
and a closing tag. The opening tag signifies the start of a specific element, and
the closing tag marks its end. The content of the element resides between these
two tags.

<p> is the opening tag

</p> is the closing tag
The text "This is a paragraph." is the content enclosed within the tags.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
Common Paired Tags:

 <html>: Defines the root of an HTML document

 <head>: Contains metadata about the document
 <title>: Specifies the title of the document
 <body>: Contains the visible content of the document
 <h1> to <h6>: Define headings of different levels
 <p>: Defines a paragraph
 <a>: Defines a hyperlink

Empty Tags

Empty tags, also called self-closing tags or singular tags, stand alone. They don't
have a closing tag because they don't enclose any content. They typically
represent elements that add specific formatting or structure to the document.

Example:

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
Empty Tags

An attribute is a name-value pair assigned to an element to supply

supplemental information.

The <img> tag is used to embed an image in a web page.

The src and alt attributes are associated with this tag.
The src attribute specifies the source of the image, which is typically a URL
pointing to the image file.
The alt attribute provides alternative text that is displayed if the image fails to
load or if a user has a screen reader.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
  The <meta charset="utf-8"> tag is crucial for declaring the character
encoding used within your HTML document.

 By including the <meta charset="utf-8"> tag in the <head> section of

your HTML document, you ensure that the browser correctly interprets
the characters used in your content, such as letters, numbers, and symbols
from various languages.

Text Editors and Browsers: Essential Tools for HTML

A text editor is a software application that allows you to create and modify text
files. In HTML, it serves as a canvas where you write your code. This code, once
interpreted by a browser, becomes the web page that you see on the screen.

Features of a good HTML text editor:

 Syntax highlighting: Different elements of the HTML code (tags, attributes) are
displayed in distinct colors to make reading and identifying errors easier.
 Autocompletion: The editor suggests tags and attributes automatically, speeding up
typing.
 Search and replace function: Allows you to quickly find and replace text in your
code.
 Project management: For organizing multiple HTML files and their associated
resources.

Popular text editor examples:

 Notepad++: A classic for Windows, free and highly customizable.

 Sublime Text: A powerful and fast editor, but paid.
 Visual Studio Code: A free and open-source editor developed by Microsoft, very
complete and customizable.
 Atom: An open-source editor developed by GitHub, designed to be modular and
extensible.
 Brackets: An editor specifically designed for web development, with many features
related to HTML, CSS, and JavaScript.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
Browser: Your Showcase

A web browser is a software application that interprets HTML code and displays the result
on the screen. It's thanks to the browser that you can view the webpage you created.

Most popular browsers:

 Google Chrome: The most used browser in the world, known for its speed and many
features.
 Mozilla Firefox: An open-source browser, highly customizable and privacy-oriented.
 Safari: The default browser on Apple devices (Mac, iPhone, iPad).
 Microsoft Edge: The default browser on Windows, which has evolved a lot in recent
years.

In summary:

 The text editor is your creation tool, where you write the HTML code.
 The browser is your visualization tool, where you see the result of your code.

To create a webpage, you will need both:

1. You write your HTML code in a text editor.

2. You save this file (for example, index.html).
3. You open this file with your browser to see the result.

Each time you modify your HTML code, you will need to reload the page in your
browser to see the changes.

LOGO OG TEXT EDITOR

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
LOGO OF BROWSER

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
THE ELEMENT OF AN HTML DOCUMENT

HTML Heading Elements

HTML heading elements are used to define headings in a document. They are defined by the
<h1> to <h6> tags. The <h1> tag defines the most important heading, and <h6> defines the
least important heading.

Syntax:

HTML Paragraph Element

The <p> element in HTML is used to define a paragraph. It is one of the most basic building
blocks of web pages.

HTML Links

In HTML, links are created using the <a> tag. This tag allows you to create clickable links to
other web pages, documents, or specific sections within the same page.

Basic Syntax:

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
 href attribute: Specifies the address of the linked resource.
 Link Text: The visible text that the user clicks on.

Types of Links:

1. Internal Links: Links to other pages within the same website.

2- External Links: Links to pages on other websites.

3- Email Links: Links that open an email client.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
4-Download Links: Links to downloadable files.

5- Anchor Links: Links to specific sections within the same page.

HTML Lists

HTML provides two types of lists: unordered and ordered lists.

Unordered Lists

Unordered lists are used to display a list of items without any specific order. They are often
used for lists of related items, such as a list of ingredients or a list of steps in a process.

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com
Ordered Lists

Ordered lists are used to display a list of items in a specific order. They are often used for lists
of steps or instructions.

Syntax:

Example:

COURSE FACILITATOR : TIOSSOCK NBONOU BOREL

nbonouborel@gmail.com