ACTIVITY 1-WEB PROGRAMMING 2022-2023
ACTIVITY 1-WEB PROGRAMMING
CHAPTER 1
1.1Introduction to Web development & Web Script
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. The word Web
Development is made up of two words, that is:
• Web: It refers to websites, web pages or anything that works over the internet
• Development: Building the application from scratch.
A web script is a programming language that employs a high-level construct to interpret and
execute one command at a time. In general, scripting languages are easier to learn and faster
to code in than more structured and compiled languages such as C and C++.
Web development tools allow developers to work with a variety of web technologies,
including HTML, CSS, JavaScript and other components that are handled by the web
browser. Due to increasing demand from web browsers to do more, popular web browsers
have included more popular web browsers have included more features geared for
developers.
1.2Classification of Web development
Web Development can be classified into two ways:
• Frontend Development.
• Backend Development.
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.
Department of ECE, SJBIT Page | 1
ACTIVITY 1-WEB PROGRAMMING 2022-2023
HTML:
• HTML stands for Hyper Text Markup Language. It is used to design the frontend
portion of web pages using markup language. It acts as a skeleton for a website since it
is used to make the structure of a website. HTML elements tell the browser how to display
the content. The sole purpose of a web browser is to read HTML documents which are saved
using the extension ‘.html’ and display them correctly. A browser does not display the
HTML tags but uses them to determine how to display the document.
CSS:
• Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. It is used to style our
website. CSS saves a lot of work by controlling the layout of multiple web pages all at once.
External stylesheets are stored in CSS files to save the files using an ‘extension.css’. With an
external stylesheet file, we can change the look of an entire website by changing just one
file.
JavaScript:
• JavaScript is a scripting language used to provide a dynamic behavior to our
website. JavaScript can change HTML content. It can change HTML attribute values and
also HTML Styles (CSS). JavaScript can hide or show HTML elements.
The extension used to save JavaScript files is ‘JS’.
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.
Department of ECE, SJBIT Page | 2
ACTIVITY 1-WEB PROGRAMMING 2022-2023
1.3HTML
An HTML element is set off from other text in a document by "tags", which consist of the
element name surrounded by "<" and ">". The name of an element inside a tag is case
insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the
<title> tag can be written as <Title>,
<TITLE>, or in any other way. However, the convention and recommended practice is to
write tags in lowercase.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image" />
</body> </html>
DOCTYPE <html> — doctype. It is a required preamble. In the mists of time, when HTML
was young (around 1991/92), doctypes were meant to act as links to a set of rules that the
HTML page had to follow to be considered good HTML, which could mean automatic error
checking and other useful things. However, these days, they don't do much and are basically
just needed to make sure your document behaves correctly.
That's all you need to know for now.
<html></html> — the<html> element. This element wraps all the content on the entire page
and is sometimes known as the root element. It also includes the language attribute, setting
the primary language of the document.
Department of ECE, SJBIT Page | 3
ACTIVITY 1-WEB PROGRAMMING 2022-2023
• <head></head> — the <head> element. This element acts as a container for all the
stuff you want to include on the HTML page that isn’t the content you are showing to your
page's viewers. This includes things like keywords and a page description that you want to
appear in search results, CSS to style our content, character set declarations, and more.
• <meta charset="utf-8"> — This element sets the character set your document should
use to UTF8 which includes most characters from the vast majority of written languages.
Essentially, it can now handle any textual content you might put on it. There is no reason not
to set this, and it can help avoid some problems later on.
• <metaname = "viewport content="width=device-width"> —This viewport
element ensures the page renders at the width of viewport, preventing mobile browsers
from rendering pages wider than the viewport and then shrinking them down.
• <title></title> — the <title> element. This sets the title of your page, which is the
title that appears in the browser tab the page is loaded in. It is also used to describe the page
when you bookmark/favorite it.
<body></body> — the <title> element. This contains all the content that you want to show
to web users when they visit your page, whether that's text, images, videos, games.,etc.
1.4 CSS
The basic goal of the Cascading Stylesheet (CSS) language is to allow a browser engine to paint
elements of the page with specific its basic building features, like colors, positioning, or
decorations. The CSS syntax reflects this goal and blocks are:
The property, which is an Identifier, that is a human-readable name, that defines which feature is
considered.
The value which describes how the feature must be handled by the engine. Each property has a set
of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the
browser engine. strong {background-color: red; borderradius:3px}
Department of ECE, SJBIT Page | 4
ACTIVITY 1-WEB PROGRAMMING 2022-2023
Figure 1.4 CSS declaration block.
Figure 2.1 shows a list of semicolon-separated declarations, without the initial and closing
braces, can be put inside an HTML style attribute.
body {width: 600px; margin: 0 auto, background- color: #ff9500; padding: 0 20px
20px 20px; border:5px solid black.
There are several declarations for the <body> element.
• width: 600px; This forces the body to always be 600 pixels wide.
• margin: 0 auto; When you set two values on a property like margin or padding, the
first value affects the element’s top and bottom side (setting it to 0 in this case); the second
value affects the left and right side.
• background-color: #FF9500; This sets the element's background color.
• padding: 0 20px 20px 20px; This sets four values for padding. The goal is to put
some space around the content.
border: 5px solid black; This sets values for the width, style and color of the border.
Department of ECE, SJBIT Page | 5
ACTIVITY 1-WEB PROGRAMMING 2022-2023
1.5 Flowchart :
Figure 1.5 Basic HTML Flowchart.
Department of ECE, SJBIT Page | 6
ACTIVITY 1-WEB PROGRAMMING 2022-2023
1.6Output Screenshots
1.6.1Index page:
Figure 1.6.1 Index page of the website.
Department of ECE, SJBIT Page | 7
ACTIVITY 1-WEB PROGRAMMING 2022-2023
1.6.2 Home page:
Figure 1.6.2 Home page of the website.
Figure 2.3 and Figure 2.4 shows the home page of the colleges website with three basic
components required in the header of the website.
1.6.3 About page:
Figure 1.6.3 About page of the website.
Figure 1.6.3 shows the about page of the colleges website with information about college
and the department.
Department of ECE, SJBIT Page | 8
ACTIVITY 1-WEB PROGRAMMING 2022-2023
1.6.4 Registration Form page:
Figure 1.6.4.1 Registration Form page of the website (1)
Figure 1.6.4.2 Registration Form page of the website (2)
Figure 1.6.4.1 and Figure 1.6.4.2 shows the registration form page of the college
website with information about the college’s Courses provided.
Department of ECE, SJBIT Page | 9
ACTIVITY 1-WEB PROGRAMMING 2022-2023
1.6.5 Kingfisher Airlines page:
Figure 1.6.5 Kingfisher Airlines page of the website.
Figure 2.8 shows the Kingfisher Airlines booking page of the Airlines website
with information about the Bookings.
Department of ECE, SJBIT Page | 10
ACTIVITY 1-WEB PROGRAMMING 2022-2023
2.1 REFLECTION NOTES:
During the process of learning HTML and CSS languages, I learnt how to write a code in
Markup Language which essentially manipulates display space on the internet. After learning
a few concepts on HTML and CSS we were asked to form a group and do mini project.
During the project I learnt how to apply the basic tags and create websites which looked as
per the specifications. Alongside improving my own knowledge on HTML and CSS through
the collaboration with my teammates, I learnt new things and most of all I learnt how to co-
operate with my teammates and get the job on our hands done. During the M.S.Word ,
M.S.Excel and PowerPoint training successions I learnt many new tools and concepts which I
would fail to explore before. Such new tools and tabs made me realize the potential of having
advanced knowledge in these applications. And later while preparing this report, I applied all
that I know how I learnt things over the course of the internship.
Department of ECE, SJBIT Page | 11
