Ministry of Higher Education Republic of Cameroon

ISLAPE, Yassa – Douala Peace – Work – Fatherland

Department of Computer Engineering Academic Year 2021/2022

INTODUCTION TO WEB PROGRAMMING

Level: HND1 By: METIEGAM FOTIE CARINE

Want to communicate with a friend across town, in another region, or even in another
country? Looking for a long-lost friend? Looking for travel or entertainment information?
Where do you start? For these and other information-related activities, most people use the
Internet and the Web. The Internet is like a highway that connects you to millions of other
people and organizations for the exchange of ideas and information. It has become an everyday tool
for all of us to use we need to know how to access these resources, effectively communicate
electronically, efficiently locate information, and to use Web utilities.

Contents
CHAPTER I: INTRODUCTION TO THE INTERNET ................................................................................. 3
I- Some terminologies ......................................................................................................................... 3
II- history and evolution of the internet ................................................................................................ 4
III- Requirements needed to connect to the internet .................................................................... 4
IV- INTERNET SERVICES ............................................................................................................... 4
1- The WWW .............................................................................................................................. 4
2- Instant Messaging: .................................................................................................................. 5
3- Online Social Networking ...................................................................................................... 5
4- Other services include:............................................................................................................. 5
V- Internet Protocols ........................................................................................................................... 5
a- "TCP/IP" ................................................................................................................................. 5
b- UDP and ICMP ....................................................................................................................... 5
VI- COMPUTER ADRESSES ............................................................................................................ 6
a- IP address breakdown .............................................................................................................. 6
b- Automatically assigned addresses ............................................................................................ 6
c- Getting an IP address ............................................................................................................... 7
Chapter 2: introduction to web technology ......................................................................... 8

Page | 1
 1. Introduction ..................................................................................................................................... 8
2. Web Architecture ............................................................................................................................ 8
2.1. Web browsers.......................................................................................................................... 8
2.2. Web servers ............................................................................................................................. 9
2.3. Application servers ................................................................................................................... 9
2.4. Database ................................................................................................................................... 9
3. Uniform Resource Locators (URL) .................................................................................................. 9
4. HTTP protocol ...............................................................................................................................10
CHAPTER 3: WEB PROGRAMMING .....................................................................................................11
1. Introduction to Web Programming..............................................................................................11
1.1 Importance of Web Programming .......................................................................................11
a. Full Design Control ....................................................................................................................11
b. Increasing Brand Awareness .......................................................................................................11
c. Saving Money on Advertising .........................................................................................................11
d. Saving Time on Asking Questions ..................................................................................................11
e. Confirming Your Credibility ...........................................................................................................11
f. Referral Programs and Discounts ....................................................................................................11
1.2 Overview of Web Programming Languages .............................................................................12
a) HTML/CSS ................................................................................................................................12
b) JavaScript...................................................................................................................................12
c) PHP ............................................................................................................................................12
d) SQL ...........................................................................................................................................12
e) Software used for Web Development..............................................................................................12
2 HYPERTEXT MARKUP LANGUAGE (HTML) ........................................................................................12
2.1 What is HTML? ........................................................................................................................12
2.1.2 HTML Tags and Comments ....................................................................................................13
2.1.3 HTML Attributes ....................................................................................................................13
2.1.4 Common HTML Tags ..............................................................................................................14
2.1.5 Links ......................................................................................................................................15
HTML Email links .........................................................................................................................17
Example .........................................................................................................................................26
Tutorials part 1: HTML .........................................................................................................33
Tutorials part 2: CSS ............................................................................................................39
Tutorials part 3: Javascript ............................................................................................50
Tutorials part 5: web project ..........................................................................................55
 CHAPTER I: INTRODUCTION TO THE INTERNET
Chapter objectives

It is expected that after going through this lesson, you would be able to

-Discuss the origins if the internet and web.

- Describe how to access the web using browsers.
- Describe search tools and search information on the web.
- Enumerate the services available on the web.

I- Some terminologies
Internet: The term Internet is the short form of the expression “Inter-connecting Network”. It can
be defined as the worldwide connection of computers and associated devices connected to each
other by communication facilities with the aim of sharing resources.
Browser: It is a computer application which gives us access to web pages. This software allows you to
explore (surf) the web by easily moving from one page to another. Ex : Mozilla Firefox, internet
explorer, Google chrome, Opera, UC browser etc.
URL (Uniform Resource Locator): it is the address of a web page on the internet. E.g
[Link] .
WWW (World Wide Web): The multimedia interface and services available on the internet.
ISP (Internet Service Provider): It is a company or organization that provides Internet access to user in
return for money. Some examples of ISP are: Camtel, Africom, MTN, Orange, Ringo, YooMee, Nextel,
Creolink, Vodafone etc
The internet server: an internet server is a computer(program) that offers servives to web page or file
reuest.
Web page: a web page is a hypertext file that is found in a website.
Website: it is a collection of webpages.
Homepage: is the first page presented when a browser loads. It is also the main page of a website that
provide general information about the website
Hypertext Transfer Protocol(HTTP) it is a set of rules that governs the transfert of web pages across
the internet
File transfer protocol(FTP) it is a protocol that helps in the downloading and uploading files over the
internet.
Download : it is a process of copying file on an internet server(web server) to a client computer.
Internet resource: It is anything that the Internet provides for users to consume (e.g.
information, program or services).
Internet literacy: It is the ability to explore, evaluate, and exploit Internet resources.
Cyberspace: it is a community that is made up of Internet users and Internet resources
Cybercafé: It is a business enterprise where Internet access is available for public.
Page | 3
A person or a computer that is connected to the Internet is said to be online.
Upload: it is a process of copying files from a client computer to a web server
II- history and evolution of the internet
The Internet was launched in 1969 when the United States funded a project that developed a national
computer network called Advanced Research Project Agency Network (ARPANET) which
operated on mainframe computers, and in 1980, the TCP/IP protocol was introduced. The
ARPANET grew beyond powers and in 1983, ARPANET split into groups; MILNET (handled the
military network) and ARPANET (handled the government, universities and other large organizations.
The Web was introduced in 1991 at the Center for European Nuclear Research (CERN) in Switzerland.
Prior to the Web, the Internet was all text but had no graphics, animations, sound, or video. The Web
made it possible to include these elements. text, but had no graphics, animations, sound, or video. The
Web made it possible to include these elements.
III- Requirements needed to connect to the internet
The basic requirements are a modem, a phone line, and a contract with an Internet Service
Provider (ISP) in addition to your computer:
1) Computer: Generally any computer purchased should have no problems in supporting
internet connectivity.
2) A phone line (or dial-up): As a phone line, you can use your ordinary telephone line at home if you
already own one.
3) A modem (modulator/demodulator): A modem is a hardware, which converts digital signals into
analog signals (i.e. modulation) that can be sent over an analog telephone lineand convert the analog
signal back into digital data (i.e. demodulation).
4) An Internet account. It is an account that can be opened with an Internet service Provider.
The process of going to an ISP and getting an access account is referred to as subscription.
IV- INTERNET SERVICES
Apart from just sending and receiving e-mails, there are many other things that can be done on the
Internet. The World Wide Web, the e-mail, live messenger and search tools are popular Internet services.
1- The WWW
The WWW or the Web is the user-friendly graphical interface to Internet resources. It is made of several
interconnected electronic documents (called Web documents) stored on Internet computers. These web
documents are all interconnected by means of pathways called hyperlinks or links. A document that
contains links to other text documents is called hypertext
E-mail: E-mail or electronic mail is the transmission of electronic messages over the Internet. All you
need to send and receive e-mail is an e-mail account, access to the Internet, and an e-mail program.
Two of the most widely used e-mail programs are Microsoft’s Outlook Express and Mozilla
Thunderbird. Example of email address: cbi@[Link] . cbi is the user name and [Link] is the
domain name (location address).
The e-mail has numerous advantages:
 Low cost: The cost of sending an e-mail is very low
 High-speed: An e-mail takes only a few seconds to reach a destination
 World-wide access: You can access or open your e-mail account from any computer in the world
that is connected to the Internet.
 Attachment: In addition to pure messages, an e-mail can also graphics, music, speech and video.
  Multiple destinations: A single e-mail message can be sent to several people at the same time.
2- Instant Messaging:
Instant messaging (IM) allows two or more people to contact each other via direct, live
communication. Popular IM applications include MSN Messenger, Yahoo Messenger and AOL
Messenger.
3- Online Social Networking
Online Social Networking has become very popular during the past few years. It is the use of a
dedicated Web site to communicate informally with other members of the site. These websites are
known as social sites. Some examples of online social networking website are: Facebook, Google+,
instagram, twitter, linked-in etc.
4- Other services include:
 VoIP (Voice over IP): This is a technology that allows voice conversations to be transmitted
over the Internet. The most known example of VoIP is Skype
 Online learning or E-learning: This is a form of education r training that occurs on
computer network such as the Internet.
 E-commerce: This is the buying or selling goods and services on the Internet.
 E-Banking: This is doing bank transactions over the internet.
V- Internet Protocols

In order for computers to communicate with one another, standard methods of information transfer and
processing have been devised these methods are called "protocols". Protocols are established by
international agreement and ensure that computers everywhere can talk to one another. There are a variety
of protocols for different kinds of information and functions. These are referred to as "protocols" and some
of the more common ones such as TCP, IP, UDP User Datagram Protocol, POP, SMTP, HTTP, and FTP

a- "TCP/IP"

In fact, the term "TCP/IP" is normally used to refer to a whole suite of protocols, each with different
functions. This suite of protocols is what carries out the basic operations of the Web. TCP/IP is also used
on many local area networks.

When information is sent over the Internet, it is generally broken up into smaller pieces or "packets". The
use of packets facilitates speedy transmission since different parts of a message can be sent by different
routes and then reassembled at the destination. TCP is the means for creating the packets, putting them
back together in the correct order at the end, and checking to make sure that no packets got lost in
transmission. If necessary, TCP will request that a packet be resent.

Internet Protocol (IP) is the method used to route information to the proper address. Every computer on the
Internet has to have its own unique address known as the IP address. Every packet sent will contain an IP
address showing where it is supposed to go. A packet may go through a number of computer routers before
arriving at its final destination and IP controls the process of getting everything to the designated computer.

b- UDP and ICMP

User Datagram Protocol (UDP). This protocol is used together with IP when small amounts of information
are involved.
Page | 5
VI- COMPUTER ADRESSES

an IP address is an address of a computer or other network device on a network using TCP/IP. For
example, the number "[Link]" is an example of such an address. .

There are five classes of available IP ranges: Class A, Class B, Class C, Class D and Class E, while only
A, B, and C are commonly used. Each class allows for a range of valid IP addresses. Below is a listing of
these addresses.

Class Address Range Supports

Class A [Link] to [Link] Supports 16 million hosts on each of 127 networks.
Class B [Link] to [Link] Supports 65,000 hosts on each of 16,000 networks.
Class C [Link] to [Link] Supports 254 hosts on each of 2 million networks.
Class D [Link] to [Link] Reserved for multicast groups.
Reserved for future use, or Research and Development
Class E [Link] to [Link]
Purposes.

Ranges 127.x.x.x are reserved for the loopback or localhost, for example, [Link] is the common
loopback address. Range [Link] broadcasts to all hosts on the local network.

a- IP address breakdown

Every IP address is broke down into four sets of octets that break down into binary to represent the actual
IP address. The below table is an example of the IP [Link]. If you are new to binary, we highly
recommend reading our binary and hexadecimal conversions section to get a better understanding of what
we're doing in the below charts.

IP: 255 255 255 255

Binary value: 11111111 11111111 11111111 11111111
Octet value: 8 8 8 8

If we were to break down the IP "[Link]", you would get the below value. In the below table, the
first row is the IP address, the second row is the binary values, and the third row shows how the binary
value equals the section of the IP address.

166 70 10 23
10100110 01000110 00001010 00010111
128+32+4+2=166 64+4+2=70 8+2=10 16+4+2+1=23
b- Automatically assigned addresses

There are several IP addresses that are automatically assigned when you setup a home network. These
default addresses are what allow your computer and other network devices to communicate and broadcast
information over your network. Below is the most commonly assigned network addresses in a home
network.
[Link] 0 is the automatically assigned network address.
[Link] 1 is the commonly used address used as the gateway.
[Link] 2 is also a commonly used address used for a gateway.
Addresses beyond 3 are assigned to computers and devices on the
[Link] - 254
network.
255 is automatically assigned on most networks as the broadcast
[Link]
address.

If you have ever connected to your home network, you should be familiar with the gateway address or
[Link], which is the address you use to connect to your home network router and change its settings.

c- Getting an IP address

Anyone who connects to the Internet is assigned an IP address by their Internet Service Provider (ISP) who
has registered a range of IP addresses. For example, lets assume your ISP is given 100 addresses,
[Link]-250. This means the ISP owns addresses [Link] to [Link] and can assign
any address in that range to its customers. So, all these addresses belong to your ISP address until they are
assigned to a customers computer. In the case of a dial-up connection, you are given a new IP address each
time you dial into your ISP. With most broadband Internet service providers because you are always
connected to the Internet your address rarely changes and will remain the same until the service provider
requires it to be changed.

Page | 7
 Chapter 2: introduction to web technology

1. Introduction
Documents and information, generally called web data, over the Internet, data are marked up in the
HTML language for presentation and interaction with people in web browsers. Each web server uses an IP
address or domain name as well as a port number for its identification. People use web browsers to send
data requests to web servers with the HTTP protocol. The web servers running on server computers either
retrieve the requested data from local disks or generate the data on-the-fly, mark up the data in HTML, and
send the resulting HTML files back to the web browsers to render. Apache, Tomcat and IIS are popular
web server programs, and IE and Firefox are popular web browsers.

2. Web Architecture
A typical web application involves four tiers web architecture:
 Web browsers on the client side for rendering data presentation coded in HTML,
 A web server program that generates data presentation,
 An application server program that computes business,
 A database server program that provides data persistency.
The three types of server programs may run on the same or different server machines.

2.1. Web browsers

Web browsers can run on most operating systems with limited hardware or software requirement.
They are the graphic user interface for the clients to interact with web applications.
The basic functions of a web browser include:
 Interpret HTML markup and present documents visually;
 Support hyperlinks in HTML documents so the clicking on such a hyperlink can lead to the
corresponding HTML file being downloaded from the same or another web server and presented;
 Use HTML form and the HTTP protocol to send requests and data to web applications and
download HTML documents;
  Maintain cookies deposited on client computers by a web application and send all cookies back to
a web site if they are deposited by the web application at that web site.
 Use plug-in applications to support extra functions like playing audio files.
Implement a web browser security policy. Any software component (applets, JavaScripts, ActiveX,
…) running inside a web browser normally cannot access local clients’ resources like files, and can only
communicate directly with applications on the web server from where it is downloaded.

2.2. Web servers

The web server is mainly for receiving document requests and data submission from web browsers
through the HTTP protocol on top of the Internet’s TCP/IP layer. The main function of the web server is
to feed HTML files to the web browsers. If the client is requesting a static existing file, it will be retrieved
on a server hard disk and sent back to the web browser right away. If the client needs customized HTML
pages like the client’s bank statement, a software component, needs to retrieve the client’s data from the
database and compose a response HTML file on-the-fly. Web servers work closely with web browsers.

2.3. Application servers

The application server is responsible for computing the business logics of the web application, like
carrying out a bank account fund transfer and computing the shortest route to drive from one city to another.
If the business logic is simple or the web application is only used by a small group of clients, the application
server is usually missing and business logics are computed in the web server extensions.

2.4. Database
A database is a collection of data that has been organized so that the information is easy to access,
process and displad in different ways.
The ability to design databases and associate applications is critical to the success of the modern
enterprise. Database design requires understanding both the operational and business requirements of an
organization as well as the ability to model and realize those requirements using a database. We will be
more focuss on small database at the client-side (using XML fdor example) than using database software
(Wamp for example) that is used for server side.
3. Uniform Resource Locators (URL)
A web server program runs multiple web applications (sites) hosted in different folders under the
web server program’s document root folder. A computer server may run multiple server programs
Page | 9
including web servers. Each server program on a computer server uses a port number (from 0 to 65535),
unique on the server machine. This number is its local identification (by default a web server uses port 80).
Each computer server has an IP address, as its unique identifier on the Internet. Domain names are used as
user-friendly identifications of server computers, and they are mapped to IP addresses by a Domain Name
Server (DNS). A Uniform Resource Locator (URL) is an address for uniquely identifying a web resource
(like a web page or a Java object) on the Internet, and it has the following general format:
[Link]
where:
 http is the protocol for accessing the resource (https and ftp are popular alternative protocols
standing for secure HTTP and File Transfer Protocol);
 application is a server-side folder containing all resources related to a web application;
 resource could be the name (alias or nickname) of an HTML or script/program file residing on a
server hard disk;
 and the optional query string passes user data to the web server.
An example URL is
[Link]
There is a special domain name “localhost” that is normally defined as an alias of local IP address
[Link]. Domain name “localhost” and IP address [Link] are for addressing a local computer, very
useful for testing web applications where the web browser and the web server are running on the same
computer.
Most computers are on the Internet as well as on a local area network (LAN), like home wireless
network, and they have an external IP address and a local IP address. To find out what is your computer’s
external IP address on the Internet, use a web browser to visit [Link] To find out what is
your local (home) IP address, on Windows, run “ipconfig” in a DOS window; and on Linux, run “sudo
ifconfig” in a terminal window.

4. HTTP protocol
Web browsers interact with web servers with a simple application-level protocol called HTTP
(HyperText Transfer Protocol), which runs on top of TCP/IP network connections. When people click on
the submit button of an HTML form or a hyperlink in a web browser, a TCP/IP virtual communication
channel is created from the browser to the web server specified in the URL; an HTTP GET or POST request
is sent through this channel to the destination web application, which retrieves data submitted by the
browser user and composes an HTML file; the HTML file is sent back to the web browser as an HTTP
response through the same TCP/IP channel; and then the TCP/IP channel is shut down.

CHAPTER 3: WEB PROGRAMMING

1. Introduction to Web Programming
Web programming refers to the writing, markup and coding involved in Web development,
which includes Web content, Web client and server scripting and network security. The most common
languages used for Web programming are XML, HTML, JavaScript, Perl 5 and PHP.

1.1 Importance of Web Programming

a. Full Design Control
Your company may change or adjust the range of products you provide, pricing policy (holiday
discounts, etc.) or even company structure, which you need to reflect on your page. Owning a website
allows much more detailed customizations, as compared to using a landing page.

b. Increasing Brand Awareness

Having a website allows adding a favicon to the page, creating RSS-feed to keep your audience
tuned on latest updates, using comments to gather valuable customer feedback and replying to it,
posting links to your site at forums and blogs. Many additional tools allow increasing brand awareness
and customer pool.

c. Saving Money on Advertising

Instead of paying for expensive offline and online ads, you can invest into SEO-promotion of your
own page, which brings lasting results, as the funds you spend to promote your own page are the funds
well spent. However, please do not mistake paid traffic Rudy Mendoza mentioned with investment into
high-quality content, responsive website design, market trends analysis and well-thought special offers.

d. Saving Time on Asking Questions

Whenever your customers need to know something about your business, having a contact form, a
live chat, an option to comment or a phone number is a step towards them, which increases a possibility
of sealing the deal.

e. Confirming Your Credibility

Everybody understands that building a professional website involves some serious investment, which
most likely means the company is not going to disappear the next day, so the customers are more prone
to order from you.

f. Referral Programs and Discounts

Having your own page allows implementing a referral program or issuing discounts to your
customers through the billing system. This is a feature free ad boards and social network groups cannot
provide.

Page | 11
 g. Your Website Works 24/7 Ticket system allows accepting and invoicing orders even if you aren’t
in the office, meaning that the website can earn money while you sleep.

1.2 Overview of Web Programming Languages

In order to better learn and master web development, there are some programing languages and
techniques you are required to know by heart. There are a series of languages you can learn to be able to
develop web applications and websites. Amongst them include :
a) HTML/CSS
Hand in hand with JavaScript is CSS and HTML – together they make up the holy trinity of front end
web development. HTML (Hyper Text Mark Up Language) is the language of web browsers – what
websites are made with. CSS (Cascading Style Sheets) makes them look cool and better than those awful
sites from the early days of the web.

b) JavaScript
A front end language used for creating and developing websites, desktop apps and games.
JavaScript runs on all browsers and can be worked with on programs that are not web based.

c) PHP
PHP stands for HyperText Pre-processing. It is an HTML-embedded scripting language used to form
dynamic web pages, fast. PHP makes it quick and easy to expand web apps and run websites that have
repeated server tasks (like refreshing news feeds).

d) SQL
For full stack and server side developers, SQL (Structured Query Language) is the cherry on the cake
of your developing toolkit. A vital part of web development, SQL makes obtaining specific data from
large, complex databases a breeze.

e) Software used for Web Development

 Notepad++ (an intelligent text order)
 JetBrains PHP Storm (an intelligent IDE for web development)
 Web browser (to display your work on a web page)

2 HYPERTEXT MARKUP LANGUAGE (HTML)

2.1 What is HTML?

• HTML is a markup language for describing web documents (web pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content
 2.1.1 HTML Page Syntax
A small HTML
document:
<html>

<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

</html>

Example Explained

• The text between <html> and </html> describes an HTML document

• The text between <head> and </head> provides information about the document
• The text between <title> and </title> provides a title for the document
• The text between <body> and </body> describes the visible page content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes paragraph
Using this description, a web browser can display a document with a heading and a paragraph.

2.1.2 HTML Tags and Comments

HTML tags are keywords (tag names) surrounded by angle brackets: <tagname>content</tagname>

• HTML tags normally come in pairs like <p> and </p>

• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a slash before the tag name
Comments in HTML are written with the <!--commented text --> and do not interfere in the execution
in the page.
2.1.3 HTML Attributes

An attribute is used to define the characteristics of an HTML element and is placed inside the element's
opening tag. All attributes are made up of two parts − a name and a value

• The name is the property you want to set. For example, the paragraph <p> element in the example
carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on
the page.
• The value is what you want the value of the property to be set and always put within quotations. The
below example shows three possible values of align attribute: left, center and right.

Page | 13
 <html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>

2.1.4 Common HTML Tags

The following table lists some of the most common HTML tags that you'll use to build your website.
After you've worked in HTML for a little while, these tags will become second nature to you.
Tag Name Code Example

<a> anchor <a href="[Link] Here</a>

<b> bold <b>Bold Type</b>

<body> body of document <body>All of the contents of your Web page.</body>

<br> line break Soft line break<br />Soft line break

<center> center <center>Center your content</center>

<font> font <font face="Times New Roman">Example</font>

<form> form <form action="[Link]

Name: <input name="Name" value=""size="10" />
</form>

<h1> heading 1 <h1>Heading 1 Example</h1>

<h2> heading 2 <h2>Heading 2 Example</h2>

<h3> heading 3 <h3>Heading 3 Example</h3>

<head> heading of <head>Contains elements describing the document</head>
document

<html> hypertext markup <html><head><meta><title>Title of your

language webpage</title></head><body>Webpage
contents</body></html>
<i> italic <i>Italic Type</i>
 <li> list item <ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<meta> meta <meta name="Description"content="Description of your site" />
<meta name="keywords" content="keywords describing your
site" />

<ol> ordered list <ol>

<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<p> paragraph <p> This creates a line break and a space between lines.</p>

<title> document title <title>Title of your webpage</title>

<ul> unordered list <ul>

<li>List item 1</li>
<li>List item 2</li>
</ul>
2.1.5 Links

A webpage can contain various links that take you directly to other pages and even specific parts of a
given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images.
Thus you can create hyperlinks using text or images available on a webpage.

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the
opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach
to the linked document. Following is the simple syntax to use <a> tag.
<a href ="Document URL" ... attributes-list>Link Text</a>

Page | 15
 <html>
<head>
<title>Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href="[Link] target = "">BBHS</a>
</body>

</html>

The target Attribute

We have used target attribute in our previous example. This attribute is used to specify the location
where linked document is opened. Following are the possible options −

_blank : Opens the linked document in a new window or tab.

_self : Opens the linked document in the same frame.
_parent : Opens the linked document in the parent frame.
_top : Opens the linked document in the full body of the window.
Targetframe : Opens the linked document in a named targetframe.

<html>
<head>
<title>Hyperlink Example</title>
<base href = "[Link]
</head>

<body>
<p>Click any of the following links</p>
<a href = "[Link]" target = "_blank">Opens in New</a> |
<a href = "[Link]" target = "_self">Opens in Self</a> |
<a href = "[Link]" target = "_parent">Opens in Parent</a> |
<a href = "[Link]" target = "_top">Opens in Body</a>
</body>
</html>
We have seen how to create hypertext link using text and we also learnt how to use images in our
webpages. Now, we will learn how to use images to create hyperlinks.

It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text
as shown below –
<html>
<head>
<title>Image Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "[Link] target = "_self">
<img src = "images/[Link]" alt = "BBHS LOGO" border = "0"/>
</a>
</body>
</html>

HTML Email links

HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag
as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of
using mailto instead of using http.
<a href = "mailto: abc@[Link]">Send
Email</a>

2.1.6 HTML Events

When users visit your website, they do things like click various links, bring mouse over text and images
etc. These are examples of what we call events in JavaScript and HTML terminologies.

We can write our event handlers using JavaScript or VBScript and can specify some actions to be taken
against these events. Though these are the events but they will be specified as attributes for the HTML
tags.

2.1.7 HTML and JavaScript

A script is a small piece of program that can add interactivity to your website. For example, a
script could generate a pop-up alert box message, or provide a dropdown menu. This script could be
written using JavaScript or VBScript.

You can write various small functions, called event handlers using any of the scripting language and
then you can trigger those functions using HTML attributes.

Now-a-days, only JavaScript and associated frameworks are being used by most of the web
developers, VBScript is not even supported by various major browsers.

Page | 17
 You can keep JavaScript code in a separate file and then include it wherever it's needed, or you can
define functionality inside HTML document itself. Let's see both the cases one by one with suitable
examples.

[Link] External JavaScript

If you are going to define a functionality which will be used in various HTML documents then
it's better to keep that functionality in a separate JavaScript file and then include that file in your HTML

documents. A JavaScript file will have extension as .js and it will be included in HTML files using <script>
tag.
Consider we define a small function using JavaScript in [Link] which has following code –
function HelloWorld() {
alert("Hello, World"); }

Now let's make use of the above external JavaScript file in our following HTML document –

<html>
<head>
<title>Javascript External Script</title>
<script src="[Link]" type = "text/javascript"/></script>
</head>

<body>
<input type = "button" onclick="HelloWorld();" name="ok" value="Click Me" />
</body>

</html>
[Link] Internal Script
You can write your script code directly into your HTML document. Usually we keep script code in
header of the document using <script> tag, otherwise there is no restriction and you can put your source
code anywhere in the document but inside <script> tag.

<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "[Link] />

<script type = "text/JavaScript">

function HelloWorld() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type="button" onclick="HelloWorld();" name="ok" value="Click Me" />
</body>

</html>
Note: You can also implement JavaScript events inside an HTML page and also define and call
functions both externally and internally. Read more about JavaScript.

2.1.8 HTML Forms

HTML Forms are required, when you want to collect some data from the site visitor. For
example, during user registration you would like to collect information such as name, email address,
credit card, etc. A form will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc. The back-end application will perform required
processing on the passed data based on defined business logic inside the application. Forms can also be
processed in the front-end using JavaScript, Ajax or jQuery (read more about Ajax and jQuery).
There are various form elements available like text fields, textarea fields, drop-down menus, radio
buttons, checkboxes, etc. The HTML <form> tag is used to create an HTML form and it has following
syntax −
<form action="Script OR URL" method="GET or POST" enctype=””>
form elements like input, textarea , file, radio, select
etc. </form>

Page | 19
 [Link] Form Attributes action - Backend script or file ready to process your passed data. If you want
the same file to process the script, allow the action empty. method - Method to be used to upload data.
The most frequently used are GET and POST methods.
enctype - You can use the enctype attribute to specify how the browser encodes the data before it sends
it to the server. mutlipart/form-data − This is used when you want to upload binary data in the form of
files like image, word file etc.
[Link].1 Differences between the GET and POST attributes
a) GET is used when you want to retrieve data from the URL while POST is used when you want to transmit data
via the HTTP.
b) POST is used to send sensitive information such as passwords, credit cards etc over the network while GET is
used to send non-sensitive data.
c) Data sent via the POST does not display on the URL while data transmitted via the GET displays on the URL.
d) GET requests remains in the browser history and can be accessed at any point in time while POST never does.
e) POST do not have request on data length while GET have restrictions on data length.
f) Using the BACK/RELOAD button on the GET method is harmless to the page while on the POST method, the
data is reloaded and resent to the server.

[Link] Form Controls

There are different types of form controls that you can use to collect data using HTML form
Text Input Controls, Checkboxes Controls, Radio Box Controls, Select Box Controls, File Select
boxes, Hidden Controls, Clickable Buttons, Submit and Reset Button.
Text Input Controls
There are three types of text input used on forms −
Single-line text input controls − This control is used for items that require only one line of user
input, such as search boxes or names. They are created using HTML <input> tag.

Password input controls − This is also a single-line text input but it masks the character as soon as a
user enters it. They are also created using HTMl <input> tag.

Multi-line text input controls − This is used when the user is required to give details that may be
longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes or names.
They are created using HTML <input> tag.

<form ...>
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>

Page | 21
Attribute
s

Following is the list of attributes for <input> tag for creating text field.
Type -
Indicates the type of input control and for text input control it will be set to text.
name -
Used to give a name to the control which is sent to the server and get the value.
Value -
This can be used to provide an initial value inside the control.
Size -
Allows to specify the width of the text-input control in terms of characters.
Maxlengt
h - Allows to specify the maximum number of characters a user can enter into the text box.

Password input controls - This is also a single-line text input but it masks the character as soon as a
user enters it. They are also created using HTML <input>tag but type attribute is set to password.

Web Programming 1 - HTML5 – Mr. Nyambi Blaise (679194380) Page 11 of 23

Example

Here is a basic example of a single-line password input used to take user password −

<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>

Attributes

Following is the list of attributes for <input> tag for creating password field.

type - Indicates the type of input control and for password input control it will be set to password.

name - Used to give a name to the control which is sent to the server to be recognized and get the

value. value - This can be used to provide an initial value inside the control. size - Allows to specify the

width of the text-input control in terms of characters. maxlength - Allows to specify the maximum

number of characters a user can enter into the text box.

Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single sentence. Multi-line input
controls are created using HTML <textarea> tag.

Example

Here is a basic example of a multi-line text input used to take item description −
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>

Attributes

Following is the list of attributes for <textarea> tag.

Rows - Indicates the number of rows of text area box.

Cols - Indicates the number of columns of text area box

Checkbox Control

Checkboxes are used when more than one option is required to be selected. They are also created using HTML
<input> tag but type attribute is set to checkbox..

Example
<form>
<input type = "checkbox" name = "maths" value = "on" checked> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
Attributes

Following is the list of attributes for <checkbox> tag.

Type- Indicates the type of input control and for checkbox input control it will be set to checkbox..

Checked - Set to checked if you want to select it by default.

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to radio.

Example

Here is example HTML code for a form with two radio buttons −

Page | 23
 <form>
<input type = "radio" name = "subject" value = "maths" checked> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>

Select Box Control

A select box, also called drop down box which provides option to list down various options in the form of drop
down list, from where a user can select one or more options.

Example

Here is example HTML code for a form with one drop down box

<form>
<select name = "subjects">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
This will produce the following result −

Attributes

Following is the list of important attributes of <option> tag − value - The

value that will be used if an option in the select box box is selected.

Selected - Specifies that this option should be the initially selected value when the page loads.

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known
as a file select box. This is also created using the <input> element but type attribute is set to file.

Example

Here is example HTML code for a form with one file upload box −
<form enctype=”mutlti-part”>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
Attributes

Following is the list of important attributes of file upload box −

Accept - Specifies the types of files that the server accepts.

Button Controls

There are various ways in HTML to create clickable buttons. You can also create a clickable button using
<input>tag by setting its type attribute to button. The type attribute can take the following values −

Submit - This creates a button that automatically submits a form.

Reset - This creates a button that automatically resets form controls to their initial values.

Button - This creates a button that is used to trigger a client-side script when the user clicks that button.

Image - This creates a clickable button but we can use an image as background of the button.

Example

Here is example HTML code for a form with three types of buttons −

<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/[Link]" />
</form>
2.1.9 HTML Fonts
Fonts play a very important role in making a website more user friendly and increasing content
readability. Font face and color depends entirely on the computer and browser that is being used to view
your page but you can use HTML <font> tag to add style, size, and color to the text on your website.
You can use a <basefont> tag to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts. To
change any of the font attributes at any time within your webpage, simply use the <font> tag. The text
that follows will remain changed until you close with the </font> tag. You can change one or all of the
font attributes within one <font> tag.
Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version
of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still
for learning purpose, this chapter will explain font and basefont tags in detail. Check CSS in section [Link]

[Link] Set Font Size

You can set content font size using size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>

Page | 25
[Link] Setting Font Face
You can set font face using face attribute but be aware that if the user viewing the page doesn't
have the font installed, they will not be able to see it. Instead user will see the default font face
applicable to the user's computer.
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
[Link] Setting Font Color
You can set any font color you like using color attribute. You can specify the color that you
want by either the color name or hexadecimal code for that color (read more about color hexadecimal
coodes).

<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
2.1.10 Bold, Italics and Underline
To use bold, italics or underline a text, use the following syntax.
Bold: <b> text here </b>
Italics : <i> text here </i>
Underline : <u> text here </u>

2.1.11 HTML Images

Images are very important to beautify as well as to depict many complex concepts in simple way on
your web page. This tutorial will take you through simple steps to use images in your web pages.

[Link] Insert an Image

You can insert any image in your web page by using <img> tag. Following is the simple syntax to use
this tag.
<img src="Image URL" ... attributes-list />
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no
closing tag.

Example

To try following example, let's keep our HTML file [Link] and image file [Link] in the same
directory
–
<body>
<p>Simple Image Insertion</p>
<img src="[Link]" alt = "My Image" />
</body>
 You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify
correct image file name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image
cannot be displayed.

[Link] Set Image Location

Usually we keep all the images in a separate directory. So let's keep HTML file [Link] in our
home directory and create a subdirectory images inside the home directory where we will keep our
image [Link].
Example : Assuming our image location is "image/[Link]", try the following example −

<body>
<p>Simple Image Insert</p>
<img src="images/[Link]" alt = "Test Image" />
</body>

[Link] Set Image Width/Height

You can set image width and height based on your requirement using width and height attributes.
You can specify width and height of the image in terms of either pixels or percentage of its actual size.

<body>
<p>Setting image width and height</p>
<img src="images/[Link]" alt="Test Image" width="150" height="100"/>
</body>

[Link] Set Image Border

By default, image will have a border around it, you can specify border thickness in terms of
pixels using border attribute. A thickness of 0 means, no border around the picture.

<body>
<p>Setting image Border</p>
<img src="images/[Link]" alt="Test Image" border="3"/>
</body>

[Link] Set Image Alignment

By default, image will align at the left side of the page, but you can use align attribute to set it in
the center or right.
<body>
<p>Setting image Alignment</p>
<img src="images/[Link]" alt="Test Image" border="3" align="right"/>
</body>

Page | 27
 2.1.12 HTML Lists
HTML offers web authors three ways for specifying lists of information. All lists must contain one
or more list elements. Lists may contain −

• <ul> − An unordered list. This will list items using plain bullets.
• <ol> − An ordered list. This will use different schemes of numbers to list your items.
• <dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.

[Link] HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list
is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

[Link].1 The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a
disc. Following are the possible options –

<ul type = "square">

<ul type = "disc">
<ul type = "circle">

<body>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

[Link] HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered
list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented
by one for each successive ordered list element tagged with <li>.
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
 2.1.13 HTML Marquee
An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically
down your webpage depending on the settings. This is created by using HTML <marquees> tag.
Note − The <marquee> tag deprecated in HTML5. Do not use this element, instead you can use
JavaScript and CSS to create such effects.

Example:
<marquee width="100%" direction=”” onmouseover=”[Link]()”
onmouseout=”[Link]()” behavior=”” ....more attributes>
One or more lines or text message or image
</marquee>

2.1.14 HTML with CSS & Classes

Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or
perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since
the consortium was founded in 1994.
Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various
attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given
HTML element. Each property has a name and a value, separated by a colon (:). Each property
declaration is separated by a semi-colon (;).
<body>
<p style="color:green; font-size:24px;" >Hello, World!</p>
</body>
You can use CSS in three ways in your HTML document −

• External Style Sheet − Define style sheet rules in a separate .css file and then include that file in your
HTML document using HTML <link> tag.
• Internal Style Sheet − Define style sheet rules in header section of the HTML document using <style>
tag.
• Inline Style Sheet − Define style sheet rules directly along-with the HTML elements using style
attribute.

Let's see all the three cases one by one with the help of suitable examples.

[Link] External Style Sheet

If you need to use your style sheet to various pages, then its always recommended to define a
common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will
be included in HTML files using <link> tag.

Example
Consider we define a style sheet file [Link] which has following rules −

Page | 29
.red {
color: red;
}
.thick
{
font-size:20px;
} .green {
color:green;
}
Above, we defined three CSS rules which will be applicable to three different classes defined for the
HTML tags. I suggest you should not bother about how these rules are being defined because you will
learn them while studying CSS. Now let's make use of the above external CSS file in our following
HTML document –
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>

<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">This is thick and green</p>
</body>

[Link] Internal Style Sheet

If you want to apply Style Sheet rules to a single document only, then you can include those
rules in header section of the HTML document using <style> tag.
Rules defined in internal style sheet overrides the rules defined in an external CSS file.
Example
Let's re-write above example once again, but here we will write style sheet rules in the same HTML
document using <style> tag −
<head>
<title>HTML Internal CSS</title>

<style type="text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>

<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">This is thick and green</p>
</body>

[Link] Inline Style Sheet

You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag.
This should be done only when you are interested to make a particular change in any HTML element
only. Rules defined inline with the element overrides the rules defined in an external CSS file as well as
the rules defined in <style> element.
Example: Let's re-write above example once again, but here we will write style sheet rules along with
the HTML elements using style attribute of those elements.
<body>
<p style="color:red;">This is red</p>
<p style="font-size:20px;">This is thick</p>
<p style="color:green;">This is green</p>
<p style="color:green;font-size:20px;">This is thick and green</p>
</body>

2.1.15 HTML Tables

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows
and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by
default.

Page | 31
Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not
need a border, then you can use border = "0".

<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
[Link] Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is
used to represent actual data cell. Normally you will put your top row as table heading as shown below,
otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered
and bold by default.
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Pierre</td>
<td>5000</td>
</tr>
<tr>
<td>Ingrid</td>
<td>7000</td>
</tr>
</table>
[Link] Other Table Attributes

There are so many attributes that can be used with the table tag.
ATTRIBUTE NAME CODE
Background Color or <table border="1" bgcolor="yellow" background=”image URL”>

Image
Height and Width <table border="1" width="400" height="150">

Align <table border="1" align="right">

2.1.16 HTML & Multimedia

Sometimes you need to add music or video into your web page. The easiest way to add video or
sound to your web site is to include the special HTML tag called <embed>. This tag causes the browser
 itself to include controls for the multimedia automatically provided browser supports <embed> tag and
given media type.
You can also include a <noembed> tag for the browsers which don't recognize the <embed> tag. You
could, for example, use <embed> to display a movie of your choice, and <noembed> to display a
single JPG image if browser does not support <embed> tag. Read more on how to embed multimedia
files in HTML.
<body>
<embed src = "[Link]" width="200" height = "200" >
<noembed><img src = "[Link]" alt = "Alternative Media" ></noembed>
</embed>
</body>

Tutorials part 1: HTML

Exercise 1:
1) Write a HTML program able to do nothing
2) Why is the program no displaying any message?

Exercise 2:
1) Using instructions given on the figure below, write a HTML program able to display on the screen

Page | 33
 (1): Element H1 (2): Elements H4, I (3): Element p
(4): Element p, I (5): Elements p, I, U
2) Give some comments on the use of the elements P, H1, H4
3) From this figure, compare the use of elements H1 and H4
4) Do you have such a case with Microsoft word?
5) What levels of Bloom taxonomy are we using so far in this exercise? Check the appropriate answer:
□Knowledge □Comprehension □Application □Analysis □Evaluation □Synthesis
6) Redo the same exercise and obtain exactly the same figure without using elements H and p but using
elements Big, and Br.
7) List the tags and the number of time used to replace element H1
8) List the tags and the number of time used to replace element H4
9) List the tags and the number of time used to replace element p
10) Is there any relation between this exercise and CSS? (Optional)
11) Check again the levels of Bloom taxonomy used for this exercise:
□Knowledge □Comprehension □Application □Analysis □Evaluation □Synthesis
Exercise 3:
1) Using elements strong, em (emphasis) and mark, do your best to have the figure below, using HTML:

2) From the above exercise, what can you remark as similarities between elements strong and em?
3) In a working website, why to we use strong element instead of element b for example?
4) In a working website, why to we use emphasis element instead of element I example?
5) Give the role of mark element
Exercise 4.
1) Using elements sub, sup, small, big, strike and blink, write a HTML program able to display on the
screen:
2) Complete the sentence below:
 Element sup helps ………………………………………………………………..…………………
 Element sub helps ………………………………………………………………..…………………
 Element small ………………………………………………………………..…………………
 Element strike ………………………………………………………………..…………………
 Element blink could: ………………………………………………………………..…………………
3) List at list 3 general remarks identified from this exercise.

Exercise 5:
A picture named [Link] is inserted on the folder D:/Programs, where the html file representing the
codes below, is also inserted. The program below helps to display a line and separate two pictures:
<HTML><Head>
<title> Insert a picture </title>
</Head>
<body>
<H5>The code img src="../Programs/[Link]" works with Mozilla Firefox, and with
Internet explorer</H5>
<img src="../Programs/[Link]" width="200" height="100">
<HR>
<H5>The code D:/Programs/[Link]" works with Internet explorer, not with Mozilla
Firefox </H5>
<img src="D:/Programs/[Link]" width="200" height="100">
</BODY>
</HTML>

The print-screen with Mozilla Firefox is:

Page | 35
The print-screen with Internet explorer is:

1) With the folder you have already created for this course, insert a *.jpg picture and retype this
program according that configuration.
2) What do we want you to know after this exercise?
3) List at least four browsers we can use for this exercise
4) Why are you using the browser(s) installed in your computer?
5) Will you maintain the same browsers and the version you have in your laptop during the
compilation of your end of cycle dissertations or projects? Why? What actions are you concretely
going to do?

Exercise 6:
Let us type the program below:
<HTML>
<Title> Input elements</title>
</Head><Body>
<table border="4" width="100%">
<tr>
<td colspan=5>A Simple text</B></I></Big></Big></center></td>
</tr><tr>
<td><input type="password" Value="Cancel"></td>
<td><input type="button" Value="Cancel"></td>
<td><input type="submit" Value="Submit"></td>
<td><input type="reset" Value="Reset"></td>
<td><input type="File"></td>
 </tr><tr>
<td colspan=2> <textarea Rows="3" cols="40"> You can fill any text here </textarea></td>
<td><center>1</center></td>
<td><center>2</center></td>
<td><center>3</center></td>
</tr> </table> </body> </html>

1) Display the result

2) List the tag to:
 To insert a button.
 To fill a text.
 To define a text area
 To insert a password
 To insert a password
 To insert a reset button
 To insert a submit button
3) List tags to
 Create a table
 Create a cell
 Create a column
4) List attributes to:
 Merge three columns
 Merge four rows
 Change the border of a table
 Change the width of a cell
 Change the height of a cell

Exercise 7:
1) Write a HTML program able to display the following figure:

2) If we fill and click on “=” sign what will happen? Why?

3) What remains for it to work properly with calculus? List language(s) we can use.

Exercise 8:
Write a program able to:
Page | 37
  Display a choice between « John », « Peter » and « Roger » with “radio” element.
 Display multiple selection “Lecturer”, “Student”, “Administration”
 Display a choice between « John », « Peter » and « Roger » with “select/option” element.
 Display a list of « John », « Peter » and « Roger » in order
 Display a list of « John », « Peter » and « Roger » without any order
The print-screen should look like:

Exercise 9:
Write a HTML program able to display audio or video:
<iframe src="../Elearning/dada.mp4" width="400" height="400" scrolling="yes">
</iframe>

Exercise 10:
Forms are the most used in web design. The best way for example of filling a database is the use of a
form. Write a program able to display the following figure:
Exercise 11:
Let us imagine that the files [Link], [Link] and [Link] are in the same folder as the file
containing the following program, named [Link].

<html>
<head>
<title> Using a element </title>
</head>
<body>
<ul>
<li><a href="[Link]"> create a test</a></li>
<li><a href="[Link] "> modify a test </a></li>
<li><a href="[Link] "> delete a test </a></li>
</ul>
</body>
</html>
1) Type this program
2) Run it and click successively on create a test; modify a test and delete a test.
3) What have you observe
4) What can you use for external link?

Tutorials part 2: CSS

Exercise 1:
Type the following HTML program, run it and answer all questions
<html>
<head>
<title> CSS </title>
<STYLE TYPE="Text/CSS">
P{font-size:24pt;
font-style:italic;
font-weight:Bold;
font-family: freestyle script;
}
</STYLE>
</head>
<body>
<P> CSS (Cascading Style Sheets) helps to automate the presentation of a document. It also helps
to the presentation
</P>
</body>
</html>
1) How can we insert CSS in a HTML file?
2) What are differences between element p (HTML of previous chapter) and element p (with CSS)?
Page | 39
Exercise 2: Color, line-height, line height, opacity properties
Type the program below and run it and explain the role of each tag with properties
<html>
<head>
<title> CSS </title>
<STYLE TYPE="Text/CSS">
P1{color:red;
line-height:48px;
opacity:0.25;}
P2{color:blue;
line-height:20px;
font-family:algerian;
}
</STYLE>
</head>
<body>
<P1>CSS (Cascading Style Sheets) helps to automate the presentation of a document. It also help
to the presentation CSS (Cascading Style Sheets) helps to automate the presentation of a document.
It also helps to the presentation</P1>
<BR/>
<P2>CSS (Cascading Style Sheets) helps to automate the presentation of a document. It also help
to the presentation CSS (Cascading Style Sheets) helps to automate the presentation of a document.
It also helps to the presentation</P2>
</body></html>

Exercise 3: Text properties

Type the program below and run it and explain the role of each tag with properties
<html>
<head>
<title> CSS </title>
<STYLE TYPE="Text/CSS">
P{text-align:right;
text-transform:uppercase;}
H1{text-align:justify;
font-size:14px;
text-transform:capitalize;}
H2{color:blue;
text-align:center;
font-size:16px;
text-shadow:1px 2px;}
</STYLE>
</head>
<body>
 <P>CSS (Cascading Style Sheets) helps to automate the presentation of a document. It also helps
to the presentation CSS (Cascading Style Sheets) helps to automate the presentation of a document.
It also helps to the presentation</P>
<BR/>
<H1>CSS (Cascading Style Sheets) helps to automate the presentation of a document. It also helps
to the presentation CSS (Cascading Style Sheets) helps to automate the presentation of a document.
It also helps to the presentation</H1>
<BR/>
<H2>CSS (Cascading Style Sheets) helps to automate the presentation of a document. It also helps
to the presentation CSS (Cascading Style Sheets) helps to automate the presentation of a document.
It also helps to the presentation</H2>
</body>
</html>

Exercise 4: Text decoration, text-indent, letter spacing, word spacing properties

Type the program below and run it and explain the role of each tag with properties
<html><head>
<title> CSS </title>
<STYLE TYPE="Text/CSS">
P{text-decoration:underline;
letter-spacing:18px;
color:red;
font-family:freestyle script;}
H1{text-decoration:overline;
word-spacing:20px;
font-family:freestyle script;}
H2{text-decoration:line-through;
text-indent:80px;
font-family:freestyle script;}
</STYLE>
</head>
<body>
<P>CSS (Cascading Style Sheets) helps to automate the presentation of a document.</P>
<H1>CSS (Cascading Style Sheets) helps to automate the presentation of a document.</H1>
<H2>CSS (Cascading Style Sheets) helps </H2>
</body></html>
Exercise 5: Background colour
Type the program below and run it and explain the role of each tag with properties:
<html>
<head>
<title> CSS </title>
<STYLE TYPE="Text/CSS">
P{font-size:20pt;
color:blue;

Page | 41
 text-align:justify;
line-height:1;
font-family:”Time new roman”;
text-indent:2em;}
H1{color:red;
font-family:arial;
text-align:center;}
H2{color:green;
font-family:algerian;
text-align:center;}
body {background-color: #e8eae8;
}
</STYLE>
</head>
<body>
<H2> This is Cascading Style Sheet program</H2>
<P>CSS (Cascading Style Sheets) helps to automate the presentation of a document. It also help
to the presentation of menus. CSS codes can be inserted in a HTML program, using the “Style”
tag, or in a file (*.css). </P>
<H1> Done by Dr. Dada</H1>
</body>
</html>
Exercise 6: Border, padding elements
Type the program below and run it and explain the role of each tag with properties:
<html>
<head>
<title> CSS </title>
<STYLE TYPE="Text/CSS">
P{font-size:20pt;
color:blue;
text-align:justify;
line-height:1;
font-family:”Time new roman”;
text-indent:2em;
box-shadow:8px 8px 8px 8px blue;}
H1{color:red;
font-family:arial;
text-align:center;
border-width:20px;
border-style:solid;
border-color:violet ;}

OL{color:green;
font-family:algerian;
text-align:center;}
body {background-color: #e8eae8;
padding-left:80px;
 }
</STYLE>
</head>
<body>
<H2> This is Cascading Style Sheet program</H2>
<P>CSS (Cascading Style Sheets) helps to automate the presentation of a document. It also helps
to the presentation of menus. CSS codes can be inserted in a HTML program, using the “Style”
tag, or in a file (*.css). </P>
<H1> Done by Dr. Dada</H1>
<OL> <LI> Lecturer</li>
<li> Student </li>
<li> Admin </li>
</OL>
</body>
</html>

Exercise 7: Type the program below and run it and explain the role of each tag with properties:
<html>
<head>
<title> CSS </title>
</head>
<body>
<P style="color:red; font-size=40px; font-family:arial;text-align:center">
This Cascading Style Sheet program</P>
<P style="color:blue; font-size=20px; font-family:arial;text-indent:2em;">CSS (Cascading Style
Sheets) helps to automate the presentation of a document. It also help to the presentation
of menus. CSS codes can be inserted in a HTML program, using the “Style” tag, or in a file (*.css).
</P>
<P style="color:red; font-size=60px; font-family:algerian;text-align:center">
Done by Dr. Dada</P>
</body>
</html>
1. Simulate and display what will be on the screen
2. List at least three differences between this program and the one of previous tutorial

Exercise 8: CSS in a file

The most recommended method for using CSS is to create a *.css file with all CSS codes. Then the
THML file will be just linked to that file.
1) Create an *.HTML file named for example [Link] by typing the codes:
<html>
<head>
<title>page connexion</title>
<link rel="stylesheet" type="text/css" href="[Link]"/>
</head>
<body>

Page | 43
 <P>CSS (Cascading Style Sheets) helps to automate the presentation of a document. It also
helps to the presentation of menus. </P>
</body>
</html>
2) Create a file named [Link], by typing the codes:
p{
color:red;
font-size:40px;
font-family:Times new roman;
text-align:justify;
text-indent:2em;
}
6) Run the html file and comment the results

Exercise 9: The use of class and id

1) Type “[Link]” program as:
<html>
<head>
<title>Use of class and id</title>
<link rel="stylesheet" type="text/css" href="[Link]"/>
</head>
<body>
<H1><center>The use of class and id </center></H1>
<P> The element P for example is called simple selector. </P>
<P class="paragraph_1">To apply different styles to two different elements
of the same paragraph, we should use the “class” and “id” attributes.
The attributes “Class” and “Id” are two HTML attributes that have been
created to be able to apply different styles to elements of the same type.</P>
<P id="paragraph_2">To introduce those two attributes, we should insert in the
opening tag, an HTML element. We then introduce the name of the attribute (class or Id)
and we should give a coherent value. This value should not contain special characters
(é, &, @...) and space</P>
</body> </html>
2) Type [Link] file as
p{
color:green;
font-size=30px;
font-family:algerian;
}
.paragraph_1{
color:blue;
font-size=30px;
font-family:arial;
text-align:justify;
}
#paragraph_2{
color:red;
 font-size=20px;
font-family:arial;
text-align:justify;
}
7) Comment the results obtained
Exercise 10: This is another example:
<html>
<head>
<title>page connexion</title>
<link rel="stylesheet" type="text/css" href="[Link]"/>
</head>
<body>
<p class=chapters>CHAPTER one: Introduction to CSS </P>
<p class=title1>1.1 Attributes</p>
<P>To introduce those two attributes, we should insert in the opening tag, an HTML element.
</P>
<p>It seems like we have use “class” and “id” attributes to do the same thing, but we should
know that “id” is used only once in the same web page. We can use “Id” attribute for example
for the logo. “class” attribute can be used the number of time, we want in any web page.</p>
<p class=title2> 1.1.1. The use of fonts</p>
<P id="paragraph_1">It also help to the presentation of menus. CSS codes can be inserted in a
HTML program, using the Style tag, or in a file (*.css). </P>
</body>
</html>
Create the CSS file so that the results displayed on the screen should be:

Page | 45
Exercise 11: The “div” and “span” elements

Up to now, we are applying the style to the hall paragraph, we can use “div” and “span” attributes to
modify styles in a single paragraph. “div” works like a container and inside a <div>…</div> we can
use “id”, “class” and “span” attributes.
1) Create “[Link]” file as:

<html>
<head>
<title>page connexion</title>
<link rel="stylesheet" type="text/css" href="[Link]"/>
</head>
<body>
<div class="container">
<P class="paragraph_1">CSS <span class="dady">(Cascading Style Sheets)</span> helps to automate
the presentation
of a document.</P>

<P id="paragraph_2">It also help to the presentation of menus. CSS codes can be inserted
in a HTML program, <span class="dady">using the Style tag,</span> or in a file (*.css). </P>
</div>
</body>
</html>

2) Create [Link] file as:

p{
color:green;
font-size=30px;
font-family:algerian;
text-align:justify;
}

.dady{
font-size=30px;
color:red;
font-family:algerian;
text-decoration:underline;
}

.paragraph_1{
text-indent:4em;
color:blue;
font-size=20px;
text-align:justify;
}
 #paragraph_2{
text-indent:70px;
color:green;
font-size=30px;
font-family:arial;
text-align:justify;
}
.container{
font-style:italic;
}

3) Run the html file and observe the results

Exercise 12: The formatting of menu

1) Create the html file as:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Configuring menus</title>
<link rel="stylesheet" type="text/css" href="[Link]" media="screen" />
</head>
<body>

<div id="menu">
<ul class="my_menu">
<li><a href="Home_page.php"><span class="l"></span><span
class="t">Home</span></a></li>

<li><a href="#"><span class="l"></span><span class="t">Students</span></a>

<ul>
<li><a href="create_student.php"> Create a student</a></li>
<li><a href="search_student.php">Search a student</a></li>
<li><a href="modify_student.php"> Modify a student </a></li>
<li><a href="delete_student.php"> delete a student</a></li>
<li><a href="display_student.php">Display a student</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

2) Create the CSS file as:

Page | 47
/**************** Menu codes ********************/
body{
background-color:#A1AAE1;}

#menu
{
border:solid 2px;
width: 700px;
height: 60px;
margin-top:40px;
padding-top:8px;
background-color:#e8eae8;
}

.my_menu li
{
margin:10px;
padding:0px;
display:block;
float:left;
position:relative;
z-index:5;
}

.my_menu ul
{
visibility: hidden;
position: absolute;
background: blue;
}

.my_menu li:hover>ul
{
visibility: visible;
top: 100%;
}

.my_menu a
{
position: relative;
display: block;
overflow: hidden;
height: 30px;
width:100px;
text-decoration: none;
}
.my_menu a .l
{
position: absolute;
height: 60px;
top: -4px;
left: 5px;
right: -1px;
z-index: -1;
background-color:#99CCFF;
text-transform:capitalize;
}
.my_menu a.t
{
margin-right: 20px;
margin-left: 20px;
font-weight:bold;
}
/**************** END of menu codes ********************/

/**************** Sub menu codes ********************/

.my_menu ul a
{
height: 20px;
width: 140px;
text-align: left;
overflow: hidden;
line-height: 20px;
background-color:#FFCCCC;
}
.my_menu ul li:hover>a
{
font-style:oblique;
}
/**************** End of submenu codes ****************/
3) Run and confirm the results below :

Page | 49
 Handout
SN Keyword Signification Value
1 Background Select a background Color
2 Border Create a border. Style, width, color
3 Box Shadow a box Shadow
Algerian
freestyle script
4 Font-family Assign a font type to a text
Times new roman
…
5 Color (font-color) Assign a colour to a text Color
6 Font-size Assign a size to a text In px
Assign a font style to a text (italic for
7 Font-style
example)
8 Font-weight Assign a weight to a text (bold for example)
Increase or decrease the space between normal
9 Letter-spacing
characters length
Increase or decrease the space between In px
10 Line-height
lines
11 Margin Select margins Left, right, top, button
12 Opacity Reduce in % of the opacity of letters In %
13 Text-indent Indents the first line of text in an element length % (em)
none
underline
14 Text-decoration Adds decoration to text overline
line-through
blink
none
Controls the letters in an capitalize
15 Text-transform
Element uppercase
lowercase
Left; right; center or
16 Text-align Aligns the text in an element
justify
17 Text-shadow Shadow a text
Increase or decrease the space between In Px
18 Word-spacing
words

Tutorials part 3: Javascript

Exercise 1: Write a javascript program able to calculate the square of the number 64. The browser should
display on the screen:
Exercise 2: We now want to enter any number from the screen. By using the prompt command, write a
javascript program able to display on the screen:

Exercise 3: Use the alert command to display the result as:

Page | 51
Exercise 4: Function with javascript

1) Type this program. It helps to read a data from the screen, display a message just to verify what we have
typed.

<html>
<head><Title> My first javascript program </title>
<script language="Javascript">
function control(form1) {
var tester=[Link];
alert("You have just typed:"+tester);
}
</script>
</head><body>
<form name='form1'>
<input type='test' Name='input' value=' '>
<br>
<input type='button' name='button' value='Controler' OnClick='control(form1)'>
</form></body>
</Html>
2) Run it and verify this result:
When you click on « Controler », you have now

Exercise 7: Write a javascript program able to read a number from a windows and display its square in
another windows as shown in the figure:

Exercise 8: Inserting calculus in a simple adder

Page | 53
Type a HTML/Javascrip program able to add the number 4 and 9 with onclick function.
<html>
<head>
<script language="javascript">
var a1,a2,a3,a4;
function verif1(){ [Link]=[Link]+"4";}
function verif2(){ [Link]=[Link]+"9";}

function verifplus(){
var X1;
a1=1;
X1=[Link];
X2=parseFloat(X1);
[Link]="";}
function verifequal(){
var Y1,Y2;
Y1=[Link];
Y2=parseFloat(Y1);
if (a1==1) {[Link]= X2+Y2;};
}
</script>
</head>
<body>
<div align=center>
<form name="Form1Name">
<table border="3" bgcolor="green" width="30%" height="50%" cellpadding="2" cellspacing="3">
<thead>
<Tr>
<Td colspan=5 align=center><B>Beginning adder</B></TD>
</Tr>
<td colspan=3><input type="texte" name="Input1Name" value="" size="45%"> </td><br>
</thead >
<tbody bgcolor="skyblue">
<tr>
<td> <input type="button" value=" 4 " onclick="verif1()"></td>
<td> <input type="button" value=" 9 " onclick="verif2()"></td>
<td> <input type="button" value=" + " onclick="verifplus()"></td>
<td> <input type="button" value=" = " onclick="verifequal()"></td>
</tr>
</tbody></table></form></div></body></html>
Exercise 9: A complete adder program.
From the exercise above, write the program for this complete adder

Exercise 10: A complete scientific calculator

Write now a program for a complete scientific calculator with more than 9 functions:

Tutorials part 5: web project

Design a web site with a Main homepage and three other WebPages having the characteristics:
1. The homepage has links to open the three other pages.
2. The first page contents a functioning scientific calculator
3. The second page contains
4. The third page contains

Page | 55