Chapter 4:

Introduction to Web programming

BY
Mujahid Jemal (MSc)
Lecturer at Department of Electrical &Electronics Technology
and ATTC Registrar
e-mail : [email protected]

28-Jul-23 1
 Outline

 Introduction

 HTML

28-Jul-23 2
 Introduction
• Web Technology refers to the various tools and techniques that

are utilized in the process of communication between different

types of devices over the Internet.

• A web browser is used to access web pages.

• Web browsers can be defined as programs that display text,

data, pictures, animation, and video on the Internet.

28-Jul-23 3
 Web Technology can be classified into the following sections:
World Wide Web (WWW):
• The World Wide Web is based on several different technologies:
Web browsers, Hypertext Markup Language (HTML), and Hypertext
Transfer Protocol (HTTP).
Web Browser:
• The web browser is an application software to explore www (World
Wide Web).
• It provides an interface between the server and the client and requests
to the server for web documents and services.
Web Server:
• Web server is a program which processes the network requests of the
users and serves them with files that create web pages.
• This exchange takes place using Hypertext Transfer Protocol (HTTP).

28-Jul-23 4
Web Pages:
A webpage is a digital document that is linked to the World Wide Web and
accessible by anyone connected to the internet has a web browser.
Web Development:
• Web development refers to the building, creating, and maintaining of
websites.
• It includes aspects such as web design, web publishing, web programming,
and database management.
• It is the creation of an application that works over the internet i.e. websites.
 Web Development can be classified into two ways:
• Frontend Development: The part of a website that the user interacts
directly is termed as front end. It is also referred to as the ‘client side’ of the
application.

28-Jul-23 5
Backend Development:
• Backend is the server side of a website.
• It is the part of the website that users cannot see and interact.
• It is the portion of software that does not come in direct
contact with the users.
• It is used to store and arrange data.

28-Jul-23 6
Frontend Languages:
The front-end portion is built by using some languages which are discussed below:

HTML:

• HTML stands for Hypertext Markup Language.

• It is used to design the front-end portion of web pages using a markup language.

• HTML is the combination of Hypertext and Markup language.

• Hypertext defines the link between the web pages.

• The markup language is used to define the text documentation within the tag which defines
the structure of web pages.

28-Jul-23 7
CSS:
• Cascading Style Sheets referred to as CSS is a simply designed
language intended to simplify the process of making web
pages presentable.

• CSS allows you to apply styles to web pages.

• More importantly, CSS enables you to do this independent of

the HTML that makes up each web page.

28-Jul-23 8
JavaScript:
• JavaScript is a famous scripting language used to create
magic on the sites to make the site interactive for the user.

• It is used to enhancing the functionality of a website to

running cool games and web-based software.

28-Jul-23 9
AJAX:

• Ajax is an acronym for Asynchronous JavaScript and XML.

• It is used to communicate with the server without refreshing

the web page and thus increasing the user experience and
better performance.

• There are many other languages through which one can do

front-end development depending upon the framework

28-Jul-23 10
Backend Languages:
• The back end portion is built by using some languages which
are discussed below:

PHP:

• PHP is a server-side scripting language designed specifically

for web development.

• Since PHP code executed on the server-side, so it is called a

server-side scripting language.

28-Jul-23 11
Node.js:
• Node.js is an open-source and cross-platform runtime
environment for executing JavaScript code outside a browser.
• You need to remember that NodeJS is not a framework, and
it’s not a programming language.
• Most people are confused and understand it’s a framework or
a programming language.
• We often use Node.js for building back-end services like Web
App or Mobile App.
• It’s used in production by large companies such as Paypal,
Uber, Netflix, Wallmart, and so on.

28-Jul-23 12
Python:

• Python is a programming language that lets you work

quickly and integrate systems more efficiently.

Ruby:

• Ruby is a dynamic, reflective, object-oriented, general-

purpose programming language.

28-Jul-23 13
Java:
• Java is one of the most popular and widely used programming languages and
platforms.
JavaScript:
• JavaScript can be used as both (front end and back end) programming.
Golang:
• Golang is a procedural and statically typed programming language
having the syntax similar to C programming language.
• Sometimes it is termed as Go Programming Language.
C#:
• C# is a general-purpose, modern and object-oriented programming language
pronounced as “C sharp”.
DBMS:
The software which is used to manage database is called Database Management
System (DBMS).

28-Jul-23 14
 HTML
• HTML stands for HyperText Markup Language.

• It is used to design web pages using a markup language.

• HTML is a combination of Hypertext and Markup language.

• Hypertext defines the link between web pages.

• A markup language is used to define the text document within

the tag which defines the structure of web pages.

28-Jul-23 15
• This language is used to explain (make notes for the computer) text
so that a machine can understand it and manipulate text accordingly.

• Most markup languages (e.g. HTML) are human-readable.

• The language uses tags to define what manipulation has to be done

on the text.

• HTML is a markup language used by the browser to manipulate text,

images, and other content, in order to display it in the required
format.

28-Jul-23 16
• HTML was created by Tim Berners-Lee in 1991.

• The first-ever version of HTML was HTML 1.0, but the first
standard version was HTML 2.0, published in 1995.

28-Jul-23 17
Advantages:
• HTML is used to build websites.
• It is supported by all browsers.
• It can be integrated with other languages like CSS, JavaScript,
etc.
Disadvantages:
• HTML can only create static web pages. For dynamic web
pages, other languages have to be used.
• A large amount of code has to be written to create a simple
web page.
• The security feature is not good.
28-Jul-23 18
Elements and Tags:
• HTML uses predefined tags and elements which tell the
browser how to properly display the content.
• A tag is a keyword enclosed by angle brackets(Example: <I> )
• There are opening and closing tags for many but not all tags;
• The affected text is between the two tags
• The opening and closing tags use the same command except the
closing tag contains and additional forward slash /

28-Jul-23 19
• Remember to include closing tags.

• If omitted, the browser applies the effect of the opening tag

until the end of the page.

• The <html> tag in HTML is used to define the root of HTML.

• The <html> tag tells the browser that it is an HTML document.

28-Jul-23 20
• It is the second outer container for everything that appears in
an HTML document followed by the <!DOCTYPE> tag.
• The <html> tag requires a starting and end tag.
Syntax:
<html> HTML Contents... </html>
• An HTML element is a collection of start and end tags with the
content inserted in between them.
Syntax:
<tagname > Contents... </tagname>

28-Jul-23 21
HTML Element:
The HTML element consists of 3 parts:
i. Opening tag:
• It is used to tell the browser where the content material starts.
ii. Closing tag:
• It is used to tell the browser where the content material ends.
iii. Content:
• It is the actual content material inside the opening and closing tag.
• Combining all these 3 parts results in an overall
HTML Element.

28-Jul-23 22
 HTML page structure:
• The basic structure of an HTML page is laid out below.
• It contains the essential building-block elements (i.e. doctype
declaration, HTML, head, title, and body elements) upon
which all web pages are created.

28-Jul-23 23
• Basic HTML Document: Below mentioned are the basic
HTML tags that divide the whole document into various parts
like head, body, etc.
• Every HTML document begins with a HTML document tag.
Although this is not mandatory, it is a good convention to start
the document with this below-mentioned tag.
<!DOCTYPE html>

28-Jul-23 24
<html> :
• Every HTML code must be enclosed between basic HTML tags. It
begins with <html> and ends with </html> tag.
<head>:
• The head tag comes next which contains all the header information
of the web page or documents like the title of the page and other
miscellaneous information.
• This information is enclosed within the head tag which opens
with <head> and ends with </head>.

28-Jul-23 25
<title>:

• We can mention the title of a web page using the <title> tag.
This is header information and hence is mentioned within the
header tags.

• The tag begins with <title> and ends with </title>.

28-Jul-23 26
<body>:
• Next step is the most important of all the tags we have learned
so far.
• The body tag contains the actual body of the page which will
be visible to all the users.
• This opens with <body> and ends with </body>.
• All content enclosed within this tag will be shown on the web
page be it writings or images or audio or videos or even links.

28-Jul-23 27
 HTML Editors
• HTML text editors are used to create and modify web pages.
HTML codes can be written in any text editor including the
notepad.
• One just needs to write HTML in any text editor and save the
file with an extension “.html” or “.htm”.
• Some of the popular HTML text editors are given below:
 Notepad
 Notepad++
 Sublime Text 3

28-Jul-23 28
 HTML Comments
• The comment tag ( <!-- Comment--> ) is used to insert
comments in the HTML code.
• It is a good practice of coding, so that coder and the reader
can get help to understand the code.
• It is useful to understand steps of the complex code.
• The comment tag is helpful while the debugging of codes.

28-Jul-23 29
• It is a simple piece of code that is wiped off (ignore) by
web browsers i.e. , not displayed by the browser.
• It helps the coder and reader to understand the piece of
code used for especially in complex source code.
Syntax:
• <!-- Comments here -->
• Types of HTML Comments: There are three types of
comments in HTML which are:
 Single-line comment
 Multi-lines comment
 Using <comment> tag

28-Jul-23 30
Single-line comment: Single line comment is given inside the (
<!– comment –> ) tag.
Multi-line comment: Multiple lines can be given by the syntax
(<!– –>), Basically it’s the same as we used in single line
comment, difference is half part of the comment (” –> “), is
appended where the intended comment line ends.

28-Jul-23 31
Example: This example illustrates the HTML basic structure
<!DOCTYPE html>
<html>

<head>
<!-- Information about the page -->
<!--This is the comment tag-->

<title>OOP</title>
</head>

<body>
<!--Contents of the webpage-->
</body>

</html>

28-Jul-23 32
HTML Headings:
• These tags help us to give headings to the content of a
webpage.
• These tags are mainly written inside the body tag.
• HTML provides us with six heading tags from <h1> to <h6>.
Every tag displays the heading in a different style and font
size.
 Most HTML heading tag that we use :-
• Heading 1
• Heading 2
• Heading 3

28-Jul-23 33
Example: This example illustrates the use of 6 heading tags from <h1> to <h6> in HTML.
<!DOCTYPE html>
<html>

<head>
<title>Object Oriented Programming</title>
</head>

<body>
<h1>Hello Object Oriented Programming</h1>
<h2>Hello Object Oriented Programming</h2>
<h3>Hello Object Oriented Programming</h3>
<h4>Hello Object Oriented Programming</h4>
<h5>Hello Object Oriented Programming</h5>
<h6>Hello Object Oriented Programming</h6>
</body>

</html>

28-Jul-23 34
Output:

28-Jul-23 35
HTML Paragraph:
These tags help us to write paragraph
statements on a webpage.
They start with the <p> tag and ends
with </p>.
HTML Break: – These tags are used for inserting
a single line type break. It does not have any
closing tag. In HTML the break tag is written
as <br>.
28-Jul-23 36
Example: This example illustrates the use of the <p> tag for writing a paragraph statement in HTML.

<!DOCTYPE html>
<html>

<head>
<title>OOP</title>
</head>

<body>
<h1>Hello Object Oriented Programming</h1>

<p> A Computer Science portal for OOP<br>

A Computer Science portal for OOP<br>
A Computer Science portal for OOP<br>
</p>
</body>

</html>

28-Jul-23 37
28-Jul-23 38
HTML Horizontal Line:
• The <hr> tag is used to break the page into various parts,
creating horizontal margins with help of a horizontal line
running from the left to right-hand side of the page.
• This is also an empty tag and doesn’t take any additional
statements.

28-Jul-23 39
 Example:
This example illustrates the use of the <hr> tag for the horizontal line in HTML.
<!DOCTYPE html>
<html>
<head>
<title>OOP</title>
</head>

<body>
<h1>Hello Object Oriented Programming</h1>
<p>
A Computer Science portal for OOP<br>
A Computer Science portal for OOP<br>

</p>

28-Jul-23 40
 <hr>
<p>
A Computer Science portal for OOP<br>
A Computer Science portal for OOP<br>
</p>
<hr>
<p>
A Computer Science portal for OOP<br>
A Computer Science portal for OOP<br>

</p>
<hr>
</body>

</html>

28-Jul-23 41
28-Jul-23 42
HTML Images:
• The image tag is used to insert an image into our web page.
The source of the image to be inserted is put inside the <img
src=”source_of_image“> tag.
• Image can be inserted in the image tag in two formats: –
• If the image is in the same folder, then we can just write the
name of the image and the format as the path.
• If the image is in another folder, then we do need to mention
the path of the image and the image name as well as the format
of the image.

28-Jul-23 43
Example: This example illustrates the use of the <img> tag for inserting the images in HTML.

<!DOCTYPE html>
<html>

<head>
<title>Education</title>
</head>

<body>
<img src=
http://elearning.mfmattc.edu.et/pluginfile.php/2/course/section/1/bannerattc.jpg">

</body>

</html>

28-Jul-23 44
 Output:

28-Jul-23 45
 HTML Text Formatting
• HTML facilitates the ability for formatting text just like we do
in MS Word or any text editing software.
Making text Bold or Strong:
• We can make the text bold using the <b> tag.
• The tag uses both opening and closing tags.
• The text that needs to be made bold must be within <b> and
</b> tag.
• We can also use the <strong> tag to make the text strong, with
added semantic importance.
• It also opens with <strong> and ends with </strong> tag.

28-Jul-23 46
The below example describes the formatting of the text to normal, bold, & strong.

<!DOCTYPE html>

• <html>

• <head>

• <title>Bold Text</title>

• </head>

• <body>

• <!--Normal text-->

• <p>Hello Students</p>

28-Jul-23 47
• <!--Text in Bold-->
• <p>
• <b>Hello Students</b>
• </p>
• <!--Text in Strong-->
• <p>
<strong>Hello Students</strong>
</p>
</body>
• </html>

28-Jul-23 48
Output:

28-Jul-23 49
Making text Italic or emphasize:

• The <i> tag is used to italicise the text.

• It opens with <i> and ends with </i> tag.

28-Jul-23 50
The below example describes the formatting of the text to Italic
<!DOCTYPE html>
<html>
<head>
<title>Italic</title>
</head>
<body>
<!--Normal text-->
<p>Hello Students</p>
<!--Text in Italics-->
<p>
<i>Hello Students</i>
</p>
</body>
</html>

28-Jul-23 51
Output:

28-Jul-23 52
 Summary
What is HTML?

• HTML, otherwise known as HyperText Markup Language, is

the language used to create Web pages

• Using HTML, you can create a Web page with text, graphics,
sound, and video.

28-Jul-23 53
What is Tags?
• The essence of HTML programming is tags
• A tag is a keyword enclosed by angle brackets (Example: <I> )
• There are opening and closing tags for many but not all tags;
The affected text is between the two tags
• The opening and closing tags use the same command except
the closing tag contains and additional forward slash /
• Whenever you have HTML tags within other HTML tags, you
must close the nearest tag first
Example:
<H1> <I> The Nation </I> </H1>

28-Jul-23 54
 Structure of a Web Page
• All Web pages share a <HTML>
<HEAD>
common structure <TITLE> Example </TITLE>
• All Web pages should </HEAD>
contain a pair of <BODY>
This is where you would include
<HTML>, <HEAD>, the text and images on your Web
<TITLE>, and page.
</BODY>
<BODY> tags </HTML>

28-Jul-23 55
 The <TITLE> Tag
• Choose the title of your Web page carefully; The title of a Web
page determines its ranking in certain search engines

• The title will also appear on Favorite lists, History lists, and
Bookmark lists to identify your page

28-Jul-23 56
 Text Formatting Tags
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line

28-Jul-23 57
28-Jul-23 58