Web Development

&
Python Programming
A
Industrial/Field Project Report
submitted
in partial fulfilment
for the award of the degree of
Bachelor of Technology
in department of Computer Science
with specialization in Computer Science

Submitted To : Submitted By :
Dr. Pratap Singh Patwal, ANKIT YADAV
HOD, CSE Roll no:21ELDCS060
LIET-Alwar

Department of Computer Science & Engineering

Laxmi Devi Institute of Engineering & Technology, Alwar
Bikaner Technical University [2021-22]
 Acknowledgement

We would like to first of all express our thanks to Dr. Rajesh Bhardwaj , Group Director of
LIET , for providing us such a great infrastructure and environment for our overall
development.
We express sincere thanks to Principal Dr. Manvijay Singh and Dr. Dwarka Prasad, the Vice
Principal of LIET, for his kind cooperation and extensible support toward the completion of
our seminar .
Words are inadequate in offering our thanks to Dr. Pratap Singh Patwal , HOD of CSE
Department , for consistent encouragement and support for shaping our seminar in the
presentable form. Also, for his support in providing technical requirement and fulfilling our
various other requirement for making our seminar success.
We would like to thanks our project co-ordinator Mr. Nitin Gandhi (Web Development) and
Mr. Deepak Yadav (Python Programming) , Asst. Prof. CSE Department for there support
and guiding us to make seminar successful. Without there support and measurement we
would not able to accomplished our goal.
We also like to express our thanks to all supporting CSE faculty members who have been a
constant source of encouragement for successful competition of the project.
Also our warm thanks to Laxmi Devi Institute Of Engineering And Technology , who provide
us this opportunity to carry out this prestigious seminar and enhance our learning in various
technical fields.

Ankit Yadav
(21ELDCS060)

1
 Candidate’s Declaration

I hereby declare that the Industrial/Field Project, which is being intern in the field, entitled
“Web development & Python Programming” in partial fulfilment for the award of Degree
of “Bachelor of Technology” in Department of Computer Science & Engineering with
Specialization in Computer Science Engineering , and submitted to the Department of
Computer Science & Engineering, Laxmi Devi Institute of Engineering & Technology, Alwar,
Bikaner Technical University is a record of my own Learning and internship carried under the
Guidance of Dr. Pratap Singh Patwal , HOD(CSE) : Laxmi Devi institute of Engineering &
Technology, Alwar.
I have not submitted the matter presented in this field work report anywhere for the award
of any other Degree.

Student Name: ANKIT YADAV

Branch: Computer Science
Roll no: 21ELDCS060
Laxmi Devi Institute of Engineering & Technology, Alwar

Counter Signed by
Guide Name: DR. Pratap Singh Patwal
Designation: HOD
Department: Computer Science & Engineering Department
Laxmi Devi Institute of Engineering & Technology, Alwar

2
 INDEX

Python Programming
Introduction
1.1 Python…………………………………………………………………………………………………….………….…6
1.2 Scripting Language……………………………………………………………………………………….…….6-7
1.3 Object Oriented Programming………………………………………………………………………….7-11
1.4 History of Python……………………………………………………………………………………………11-12

Downloading & Installing Python

2.1 Downloading & Installing python…………………………………………………………………………13-15
2.2 Running the python IDE……………………………………………………………………………………….15-16
2.3 Python code execution…………………………………………………………………………………………16-18

Data types of Python

3.1 Variables …………………………………………………………………………………………………………….19
3.2 String ………………………………………………………………………………………………………………….19
3.3 Tuple…………………………………………………………………………………………………………………..19
3.4 List ……………………………………………………………………………………………………………………..19

3.5 Dictionary……………………………………………………………………………………………………………20

3.6 Boolean………………………………………………………………………………………….……………………20

3.7 Sets……………………………………………………………………………………………………………………..20

3.8 Iteration………………………………………………………………………………………………………………20
3.9 Conditional Statements………………………………………………………………………….………20-23
3.10 Function…………………………………………………………………………………………………………24-25

3
Uses & Scope Of Python
6.1 What we can do with python ?..............................................................................26
6.2 Who uses Python today?..................................................................................26-27
6.3 Why Do people use Python?.................................................................................27

Web Development

HTML
1.1 What is HTML? ………………………………………………………………………………….………………29
1.2 Features of HTML Editor……………………………………………………………..……….………………29
1.3 HTML Skeleton…………………………………………………………………………….……..….………30-31
1.4 HTML Comments………………………………………………………………………….….…………………31
1.5 HTML Elements …………………………………………………………………………….…………..……31-32
1.5.1 Block level………………………………………………………………………………………………………….31-32
1.5.2 Inline Level………………………………………………………………………………………………………………32
1.6 Basic Tags……………………………………………………………………………………………………….33-37
1.6.1 Empty Tags…………………………………………………………………………………………………………33-36
1.6.2 Attributes……………………………………………………………………………………………………………….37

Cascading Style Sheets

2.1 CSS Pseudo Selectors……………………………………………………………………………………………..…..….39
2.2 CSS Box Model………………………………………………………………………………………………………….39-41
2.2.1 Content Area…………………………………………………………………………………………………………………….40
2.2.3 Padding Area……………………………………………………………………………………………………………………..40
2.2.4 Border Area…………………………………………………………………………………………………………........…….40
2.2.5 Margin Area. ………………………………………………………………………………………………………………..40-41

4
2.3 Position Properties……………………………………………………………………………..…………….………41-43
2.3.1 Static…………………………………………………………………………………………………….………………….….…….41
2.3.1 Relative……………………………………………………………………………………………………………………..….41-42
2.3.3 Absolute…………………………………………………………………………………………..………………………………..42
2.3.4 Fixed……………………………………………………………………………………………………..……………………………42
2.3.5 Sticky …………………………………………………………………………………………………….…………………………..42
2.4 Flexbox……………………………………………………………………………………………………….…………….43-45
2.4.1 Why Flexbox ? …………………………………………………………………………………………………………………..43
2.4.1 The Flex Model……………………………………………………………………………………………………………43-44
2.4.3 Direction…………………………………………………………………………………………………………….………….....44
2.4.4 Wrapping……………………………………………………………………………………………………………….………….44
2.4.5 Flex-Flow shorthand …………………………………………………………………………………………..……………..45
2.4.6 Ordering flex items…………………………………………………………………………………………………………….45
2.5 Grid Layout……………………………………………………………………………………………………………….46-47
2.5.1 What Is Grid Layout? …………………………………………………………………………………………………………46
2.5.2 Defining A Grid…………………………………………………………………………………………………………………..46
2.5.3 Gaps Between tracks………………………………………………………………………………………………………….46
2.5.4 Repeating Track Listings…………………………………………………………………………………………….….46-47
2.5.5 Line Base Placement…………………………………………………………………………………………………………..47

5
 Introduction

1.1 Python
Python is a high-level, general-purpose and a very popular programming language.
Python programming language (latest Python 3) is being used in web development,
Machine Learning applications, along with all cutting-edge technology in Software
Industry. Python Programming Language is very well suited for Beginners, also for
experienced programmers with other programming languages like C++ and Java.

This specially designed Python tutorial will help you learn Python Programming
Language in most efficient way, with the topics from basics to advanced (like Web-
scraping, Django, Deep-Learning, etc.) with examples.

Below are some facts about Python Programming Language:

1. Python is currently the most widely used multi-purpose, high-level programming

language.
2. Python allows programming in Object-Oriented and Procedural paradigms.
3. Python programs generally are smaller than other programming languages like
Java. Programmers have to type relatively less and indentation requirement of the
language, makes them readable all the time.
4. Python language is being used by almost all tech-giant companies like – Google,
Amazon, Facebook, Instagram, Dropbox, Uber… etc.
5. The biggest strength of Python is huge collection of standard library which can be
used for the following:

 Machine Learning
 GUI Applications (like Kivy, Tkinter, PyQt etc. )
 Web frameworks like Django (used by YouTube, Instagram, Dropbox)
 Image processing (like OpenCV, Pillow)
 Web scraping (like Scrapy, BeautifulSoup, Selenium)
 Test frameworks
 Multimedia
 Scientific computing
 Text processing and many more..

1.2 Scripting Language

Python is not just good for scripting it’s perfect for scripting.

6
  Easy entry: Python has a very simple and enjoyable syntax which makes it
relatively easy to learn compared to most other languages. Also there are vast free
resources to learn Python anytime anywhere.
 Rich libraries: Rich libraries means higher specialization and maturity for a
programming language. With so many great libraries you can focus on getting the
tasks done and not have to build everything from scratch. For instance, if you want
to create a GUI you don’t have to write a GUI library first, there are already great
options (tkinter, pysimplegui, pyqt, kivy etc.), if you want to work with images you
don’t have to write the whole thing from scratch there is already PIL, if you are
working on a mathematical model you don’t have to build the whole math
equations from ground up, you can use numpy and scipy etc. There is a library for
pretty much every significant field as of today.
 Community support: If you struggle or hit a bottleneck, there will be almost instant
free support thanks to the millions of coders and contributors in the Python
programming community.
 Language interoperability: Python can conveniently interact with other
programming languages, operating systems and existing software. This makes it
highly convenient for scripting.

1.2 Object Oriented Programming

In Python, object-oriented Programming (OOPs) is a programming paradigm that uses
objects and classes in programming. It aims to implement real-world entities like
inheritance, polymorphisms, encapsulation, etc. in the programming. The main concept of
OOPs is to bind the data and the functions that work on that together as a single unit so
that no other part of the code can access this data.

Main Concepts of Object-Oriented Programming (OOPs) :

 Class
 Objects
 Polymorphism
 Encapsulation
 Inheritance
 Data Abstraction

7
Class
A class is a collection of objects. A class contains the blueprints or the prototype from
which the objects are being created. It is a logical entity that contains some attributes and
methods.

To understand the need for creating a class let’s consider an example, let’s say you
wanted to track the number of dogs that may have different attributes like breed, age. If a
list is used, the first element could be the dog’s breed while the second element could
represent its age. Let’s suppose there are 100 different dogs, then how would you know
which element is supposed to be which? What if you wanted to add other properties to
these dogs? This lacks organization and it is the exact need for classes.

Example 1: Creating a class and object with class and instance attributes

8
Output

Objects
The object is an entity that has a state and behaviour associated with it. It may be any
real-world object like a mouse, keyboard, chair, table, pen, etc. Integers, strings, floating-
point numbers, even arrays, and dictionaries, are all objects. More specifically, any single
integer or any single string is an object. The number 12 is an object, the string “Hello,
world” is an object, a list is an object that can hold other objects, and so on. You’ve been
using objects all along and may not even realize it.

An object consists of :

 State: It is represented by the attributes of an object. It also reflects the properties

of an object.
 Behaviour: It is represented by the methods of an object. It also reflects the
response of an object to other objects.
 Identity: It gives a unique name to an object and enables one object to interact
with other objects.

Inheritance
Inheritance is the capability of one class to derive or inherit the properties from another
class. The class that derives properties is called the derived class or child class and the
class from which the properties are being derived is called the base class or parent class.
The benefits of inheritance are:

 It represents real-world relationships well.

 It provides the reusability of a code. We don’t have to write the same code again
and again. Also, it allows us to add more features to a class without modifying it.
 It is transitive in nature, which means that if class B inherits from another class A,
then all the subclasses of B would automatically inherit from class A.

9
Types of Inheritance –

 Single Inheritance:
Single-level inheritance enables a derived class to inherit characteristics from a
single-parent class.

 Multilevel Inheritance:
Multi-level inheritance enables a derived class to inherit properties from an
immediate parent class which in turn inherits properties from his parent class.

 Hierarchical Inheritance:
Hierarchical level inheritance enables more than one derived class to inherit
properties from a parent class.

 Multiple Inheritance:
Multiple level inheritance enables one derived class to inherit properties from
more than one base class.

Polymorphism
Polymorphism simply means having many forms. For example, we need to determine if
the given species of birds fly or not, using polymorphism we can do this using a single
function.

Encapsulation
Encapsulation is one of the fundamental concepts in object-oriented programming (OOP).
It describes the idea of wrapping data and the methods that work on data within one unit.
This puts restrictions on accessing variables and methods directly and can prevent the
accidental modification of data. To prevent accidental change, an object’s variable can
only be changed by an object’s method. Those types of variables are known as private
variables.

A class is an example of encapsulation as it encapsulates all the data that is member

functions, variables, etc.

10
Data Abstraction
It hides the unnecessary code details from the user. Also, when we do not want to give
out sensitive parts of our code implementation and this is where data abstraction came.

Data Abstraction in Python can be achieved through creating abstract classes.

1.4 History Of Python

Python is a widely-used general-purpose, high-level programming language. It was
initially designed by Guido van Rossum in 1991 and developed by Python Software
Foundation. It was mainly developed for emphasis on code readability, and its
syntax allows programmers to express concepts in fewer lines of code.

In the late 1980s, history was about to be written. It was that time when working
on Python started. Soon after that, Guido Van Rossum began doing its application-
based work in December of 1989 at Centrum Wiskunde & Informatica (CWI) which
is situated in the Netherlands. It was started firstly as a hobby project because he
was looking for an interesting project to keep him occupied during Christmas. The
programming language in which Python is said to have succeeded is ABC
Programming Language, which had interfacing with the Amoeba Operating System
and had the feature of exception handling. He had already helped to create ABC
earlier in his career and he had seen some issues with ABC but liked most of the
features. After that what he did was very clever. He had taken the syntax of ABC,
and some of its good features. It came with a lot of complaints too, so he fixed
those issues completely and had created a good scripting language that had
removed all the flaws. The inspiration for the name came from BBC’s TV Show –
‘Monty Python’s Flying Circus’, as he was a big fan of the TV show and also he
wanted a short, unique and slightly mysterious name for his invention and hence
he named it Python! He was the “Benevolent dictator for life” (BDFL) until he
stepped down from the position as the leader on 12th July 2018. For quite some

11
 time he used to work for Google, but currently, he is working at Dropbox.

The language was finally released in 1991. When it was released, it used a lot fewer codes
to express the concepts, when we compare it with Java, C++ & C. Its design philosophy
was quite good too. Its main objective is to provide code readability and advanced
developer productivity. When it was released it had more than enough capability to
provide classes with inheritance, several core data type exception handling and functions.

Following are the illustrations of different versions of Python along with the timeline.

12
Downloading & Installing Python

2.1 Downloading Python

Here we will be discussing how to get the answer to all questions related to installing
Python on Windows/Linux/macOS. Python was developed by Guido van Rossum in the
early 1990s and its latest version is 3.10.8, we can simply call it Python3. To understand
how to install Python You need to know What Python is and where it is actually installed
in your system. Let’s consider a few points:

 Python is a widely-used general-purpose, high-level programming language.

 Every Release of Python is open-source. Python releases have also been GPL-
compatible.
 Any version of Python can be downloaded from Python Software Foundation
website at python.org.
 Most the languages, notably Linux provides a package manager through which you
can directly install Python on your Operating System

In this Python tutorial on Installation and Setup, you’ll see how to install Python on
Windows, macOS, Linux, iOS, and Android.

How to install Python on Windows?

Since windows don’t come with Python preinstalled, it needs to be installed explicitly.
Here we will define step by step tutorial on How to install Python on Windows. Follow the
steps below :

Download Python Latest Version from python.org

Step 1: First and foremost step is to open a browser and type

https://www.python.org/downloads/windows/

Step 2: Underneath the Python Releases for Windows find the Latest Python 3 Release –
Python 3.10.5 (the latest stable release as of now is Python 3.10.5).

13
Step 3: On this page move to Files and click on Windows x86-64 executable installer for 64-bit or
Windows x86 executable installer for 32-bit.

Here we are providing the installation process of Python 3.10.4 on Windows

 Run the Python Installer for how to install python on windows downloads folder
 Make sure to mark Add Python 3.10 to PATH otherwise you will have to do it explicitly. It
will start installing python on windows.

After installation is complete click on Close. Bingo..!! Python is installed. Now go to windows and
type IDLE.

14
  This is Python Interpreter also called Python Shell. I printed Hello geeks, python is
working smoothly.
 The three greater than >>> sign is called Python command prompt, where we write
our program and with a single enter key, it will give result so instantly.

2.2 Running Python on IDE

By default, Python source files are treated as encoded in UTF-8. In that encoding,
characters of most languages in the world can be used simultaneously in string literals,
identifiers, and comments — although the standard library only uses ASCII characters for
identifiers, a convention that any portable code should follow. To display all these

15
characters properly, your editor must recognize that the file is UTF-8, and it must use a
font that supports all the characters in the file.

To declare an encoding other than the default one, a special comment line should be
added as the first line of the file. The syntax is as follows:

# -*- coding: encoding -*-

where encoding is one of the valid codecs supported by Python.

For example, to declare that Windows-1252 encoding is to be used, the first line of your
source code file should be:

# -*- coding: cp1252 -*-

One exception to the first line rule is when the source code starts with a UNIX “shebang”
line. In this case, the encoding declaration should be added as the second line of the file.
For example:

#!/usr/bin/env python3
# -*- coding: cp1252 -*-

2.3 Python Code Execution

Understanding the Execution of Python Program

This article aims at providing a detailed insight into the execution of the Python program. Let’s
consider the below example.

Output:

16
Suppose the above python program is saved as first.py. Here first is the name and .py is the
extension. The execution of the Python program involves 2 Steps:

 Compilation
 Interpreter

Compilation
The program is converted into byte code. Byte code is a fixed set of instructions that
represent arithmetic, comparison, memory operations, etc. It can run on any operating
system and hardware. The byte code instructions are created in the .pyc file. The .pyc file
is not explicitly created as Python handles it internally but it can be viewed with the
following command:

-m and py_compile represent module and module name respectively. This module is
responsible to generate .pyc file. The compiler creates a directory named __pycache__
where it stores the first.cpython-38.pyc file.

Interpreter
The next step involves converting the byte code (.pyc file) into machine code. This step is
necessary as the computer can understand only machine code (binary code). Python
Virtual Machine (PVM) first understands the operating system and processor in the
computer and then converts it into machine code. Further, these machine code
instructions are executed by processor and the results are displayed.

Execution of Python Program

However, the interpreter inside the PVM translates the program line by line thereby
consuming a lot of time. To overcome this, a compiler known as Just In Time (JIT) is added
17
to PVM. JIT compiler improves the execution speed of the Python program. This compiler
is not used in all Python environments like CPython which is standard Python software.

To execute the first.cpython-38.pyc we can use the following command:

To view the byte code of the file – first.py we can type the following command as :

The dis command is known as “disassembler” that displays the byte code in an
understandable format. The code represents 5 columns:

1. Line Number
2. offset position of byte code
3. name of byte code instruction
4. instruction’s argument
5. constants or names (in brackets)

18
 Data Types Of Python
3.1 Variables In Python
In many programming languages, variables are statically typed. That means a variable
is initially declared to have a specific data type, and any value assigned to it during its
lifetime must always have that type.

Variables in Python are not subject to this restriction. In Python, a variable may be
assigned a value of one type and then later re-assigned a value of a different type:

>>> var = 23.5

>>> print(var)
23.5

>>> var = "Now I'm a string"

>>> print(var)
Now I'm a string

3.2 Strings in Python:

A string is a sequence of characters that can be a combination of letters, numbers, and
special characters. It can be declared in python by using single quotes, double quotes,
or even triple quotes. These quotes are not a part of a string, they define only starting
and ending of the string. Strings are immutable, i.e., they cannot be changed. Each
element of the string can be accessed using indexing or slicing operations.

3.3 Lists in Python:

Lists are one of the most powerful data structures in python. Lists are sequenced data
types. In Python, an empty list is created using list() function. They are just like the
arrays declared in other languages. But the most powerful thing is that list need not be
always homogeneous. A single list can contain strings, integers, as well as other
objects. Lists can also be used for implementing stacks and queues. Lists are mutable,
i.e., they can be altered once declared. The elements of list can be accessed using
indexing and slicing operations.

3.4 Tuples in Python

A tuple is a sequence of immutable Python objects. Tuples are just like lists with the
exception that tuples cannot be changed once declared. Tuples are usually faster than
lists.

19
3.5 Dictionary in Python
In python, the dictionary is similar to hash or maps in other languages. It consists of
key-value pairs. The value can be accessed by a unique key in the dictionary. (Before
python 3.7 dictionary used to be unordered meant key-value pairs are not stored in
the order they are inputted into the dictionary but from python 3.7 they are stored in
order like the first element will be stored in the first position and the last at the last
position.)

3.6 Boolean in Python

Data type with one of the two built-in values, True or False. Boolean objects that are
equal to True are truthy (true), and those equal to False are falsie (false). But non-
Boolean objects can be evaluated in Boolean context as well and determined to be
true or false. It is denoted by the class bool.

3.7 Sets in Python

In Python, Set is an unordered collection of data type that is iterable, mutable and has
no duplicate elements. The order of elements in a set is undefined though it may
consist of various elements.

3.8 Iterations in Python:

Iterations or looping can be performed in python by ‘for’ and ‘while’ loops. Apart from
iterating upon a particular condition, we can also iterate on strings, lists, and tuples.

3.9 Conditional Statements in Python:

There come situations in real life when we need to make some decisions and based on
these decisions, we decide what should we do next. Similar situations arise in
programming also where we need to make some decisions and based on these
decisions we will execute the next block of code. Decision-making statements in
programming languages decide the direction of the flow of program execution.

 if statement :

if statement is the most simple decision-making statement. It is used to decide

whether a certain statement or block of statements will be executed or not i.e if a
certain condition is true then a block of statement is executed otherwise not.

if condition:
# Statements to execute if
# condition is true

20
Here, the condition after evaluation will be either true or false. if the statement
accepts boolean values – if the value is true then it will execute the block of
statements below it otherwise not. We can use condition with bracket ‘(‘ ‘)’ also.

 if-else :

The if statement alone tells us that if a condition is true it will execute a block of
statements and if the condition is false it won’t. But what if we want to do something
else if the condition is false. Here comes the else statement. We can use the else
statement with if statement to execute a block of code when the condition is false.

Syntax:

if (condition):
# Executes this block if
# condition is true
else:
# Executes this block if
# condition is false

21
 nested-if :

A nested if is an if statement that is the target of another if statement. Nested if

statements mean an if statement inside another if statement. Yes, Python allows us to
nest if statements within if statements. i.e, we can place an if statement inside
another if statement.

Syntax:

if (condition1):
# Executes when condition1 is true
if (condition2):
# Executes when condition2 is true
# if Block is end here
# if Block is end here

22
 if-elif-else ladder :

Here, a user can decide among multiple options. The if statements are executed from
the top down. As soon as one of the conditions controlling the if is true, the statement
associated with that if is executed, and the rest of the ladder is bypassed. If none of
the conditions is true, then the final else statement will be executed.

Syntax:

if (condition):
statement
elif (condition):
statement
.
.
else:
statement

23
3.10 Function:
Python Functions is a block of statements that return the specific task.

The idea is to put some commonly or repeatedly done tasks together and make a function
so that instead of writing the same code again and again for different inputs, we can do
the function calls to reuse code contained in it over and over again.

Syntax: Python Functions

Creating a Python Function :

We can create a Python function using the def keyword.

Calling a Python Function :

After creating a function we can call it by using the name of the function followed by
parenthesis containing parameters of that particular function.

24
Defining and calling a function with parameters :

If you have experience in C/C++ or Java then you must be thinking about the return type
of the function and data type of arguments. That is possible in Python as well (specifically
for Python 3.5 and above).

Syntax: Python Function with parameters

Arguments of a Python Function :

Arguments are the values passed inside the parenthesis of the function. A function can
have any number of arguments separated by a comma.

In this example, we will create a simple function to check whether the number passed as
an argument to the function is even or odd.

25
 Uses & Scope Of Python

6.1 What we can do with Python ?

Python is commonly used for developing websites and software, task automation, data
analysis, and data visualization. Since it’s relatively easy to learn, Python has been
adopted by many non-programmers such as accountants and scientists, for a variety of
everyday tasks, like organizing finances.

“Writing programs is a very creative and rewarding activity,” says University of Michigan
and Coursera instructor Charles R Severance in his book Python for Everybody. “You can
write programs for many reasons, ranging from making your living to solving a difficult
data analysis problem to having fun to helping someone else solve a problem.”

Some things include:

 Data analysis and machine learning

 Web development
 Automation or scripting
 Software testing and prototyping
 Everyday tasks

6.2 Who uses Python today ?

A wide range of financial institutions, tech companies, government agencies, and more
look for candidates who have a mastery of Python for roles within web and software
development and data science, among others.

Generally speaking, Python Developers (sometimes just referred to as Web Developers,

or, more precisely Back-End Developers) use Python to develop websites, applications,
games, and more.

Data Scientists use Python for computing large amounts of data and drawing from large
databases and libraries. It’s particularly useful for those who specialize in machine
learning as Python is able to access machine learning frameworks for those working with
AI.

Where Developers and Data Scientists go, however, Python will follow – and startups hire
a lot of both. Tech startups are drawn to how scalable the language is. Fintech startups
and traditional financial institutions alike rely on Python as part of their tech stack as well.

Python is used by Intel, IBM, NASA, Pixar, Netflix, Facebook, JP Morgan Chase, Spotify,
and a number of other massive companies. It’s one of the four main languages at Google,

26
while Google’s YouTube is largely written in Python. Same with Reddit, Pinterest, and
Instagram. The original BitTorrent client was also written in Python. And it is used as a
scripting language to control Maya, the industry standard 3D modeling and animation
tool.

Python is used heavily in academic research, particularly in bioinformatics, biology, and

mathematics. It is the standard introductory language for many university computer
science programs.

6.3 Why do people use Python ?

 It has a simple syntax that mimics natural language, so it’s easier to read and
understand. This makes it quicker to build projects, and faster to improve on them.

 It’s versatile. Python can be used for many different tasks, from web development
to machine learning.

 It’s beginner friendly, making it popular for entry-level coders.

 It’s open source, which means it’s free to use and distribute, even for commercial
purposes.

 Python’s archive of modules and libraries—bundles of code that third-party users

have created to expand Python’s capabilities—is vast and growing.

 Python has a large and active community that contributes to Python’s pool of
modules and libraries, and acts as a helpful resource for other programmers. The
vast support community means that if coders run into a stumbling block, finding a
solution is relatively easy; somebody is bound to have encountered the same
problem before.

27
 Web
Development

28
 HTML

1.1 What is HTML?

 HTML stands for Hyper Text Markup Language.

 Hyper Text: Link between web pages.
 Markup Language: Text between tags which defines structure.
 It is a language to create web pages
 HTML defines how the web page looks and how to display content with the help of
elements
 It forms or defines the structure of our Web Page.
 Need to save your file with .html extension.

1.2 Features of HTML Editor

 The learning curve is very easy (easy to modify)
 Create effective presentations
 Add links wherein we can add references
 Can display documents on platforms like Mac , Windows, Linux etc
 Add videos, graphics and audios making it more attractive.
 Case insensitive language

29
1.3 HTML Skeleton

1. <!DOCTYPE html>
Instruction to the browser about the HTML version.

2. <html>
Root element which acts as a container to hold all the code Browser should know that this a
HTML document Permitted content: One head tag followed by one body tag.

30
 3. <head>

Everything written here will never be displayed in the browser It contains general information
about the document Title, definitions of css and script sheets Metadata(information about the
document).

4. <body>
● Everything written here will be displayed in the browser
● Contains text, images, links which can be achieved through tags.
● Examples:
○ <p> This is our first paragraph. </p>
○ <ahref="http://www.google.com">GoTo Google</a>
○ <img src="photo.jpg">

1.4 HTML Comments

● Comments don’t render on the browser
● Helps to understand our code better and makes it readable.
● Helps to debug our code
● Three ways to comment: ○ Single line ○ Multiple line ○ Comment tag //Supported by IE

1.5 HTML Elements

● Elements are created using tags
● Elements are used to define semantics
● Can be nested and empty
Basic Structure
<p colour=”red”> This is our first Paragraph </p>

● Contains following things:

○ Start tag: <p>
○ Attributes: colour =”red”

31
 ○ End tag: </p> // optional
○ Content: This is our first Paragraph

1.5.1 Block Level :

○ Takes up full block or width and adds structure in the web page
○ Always starts from new line ○ Always end before the new line

○ Example :
■ <p >
■ <div>
■ <h1>
...
<h6>
■ <ol>
■ <ul>

1.5.2 Inline Level:

○ Takes up what is requires and adds meaning to the web page

○ Always starts from where the previous element ended

○ Example :
■ <span>
■ <strong>
■ <em>
■ <img>
■ <a>

1.6 Basic Tags

32
 ● Enclosed within <>
● Different tags render different meaning .
● <title> tag
○ Whatever is written this tag comes up in the web page’s tab ○ Defines the title of the page
○ Syntax: <title>Home </title>
● <p> tag
○ Defines the paragraph
○ Syntax:
<p> This is our first Paragraph </p>

1.6.1 Empty Tags

● <hr> tag
○ Stands for horizontal rule
○ Dividing the web page

● <br> tag
○ Stands for break line
○ Moving to next line

● <img> tag
○ To add images in the web page

● <h1> tag …… <h6>tag

○ Stands for heading tag
○ Defines heading of a page
○ h1 represents most important page in the page
○ h6 represents least important page in the page

● <strong> tag

33
○ Defines the text to be bold
○ Replaced <b>tag //HTML5

● <em> tag
○ Defines the text to be bold
○ Replaced <i>tag //HTML5

● <ol> tag
○ Stands for ordered list
○ To define series of events that take place in some order
○ Example making a tea (like a flow chart)
○ <ol>.........</ol>

● <ul> tag
○ Stands for unordered list
○ To define series of events that take place where order is not important.
○ Example your hobbies
○ <ul>.........</ul>

● <li> tag
○ Defines the list item
○ Used inside the ‘ol’ and ‘ul’ tag to define the events
○ <li>……….</li>

● <img> tag
○ Used to add images in a web page
○ Syntax: <img src=”url”> ○ Self closing tag.

● <div> and <span> tags

34
○ Both of these are used to group different tags ○ Acts like a container.
○ Effective while styling.
○ <div>.........</div>
○ <span>....</span>
○ Difference <div> is block level and <span> is inline level.

● <a> tags
○ Used to add links in a web page
○ <a href=”url”> Name of the link </a>

● <table> tag
○ Used to create a table on a web page
○ Need other tags for completing the creation of a table
■ <tr> : for marking the table row
■ <th> : for table header
■ <td> : for table column data
○ Everything is always enclosed within <tr>
■ <thead> : to keep all header data
■ <tbody> : to keep all body data

● <form> tag

○ Action attribute: It specifies the URL to send form data to :

○ Method attribute: specifies the type of HTTP request(GET or POST)
○ Example: <form action="/my-form-submitting-page" method="POST">

○ <input>: used to accept data from the user ○ Some types of inputs are:

● Text:

35
used to store text data. Syntax: type="text"
● Password:
used to enter a secure password. Syntax: type="password"
● Placeholder:
temporary text in input fields. It is generally accompanied by "text" and "password" attributes.
Syntax: placeholder="insert- text-here"
● Button:
used to include buttons in the form. Syntax: type="button" value="insert-text-here"
● Submit button:
For creating a submit button. All the data will get submitted when it is clicked. Syntax:
type="submit"
● Checkbox:
to provide the ability to check multiple options. Syntax: type="checkbox". To check options by
default, set it with the checked attribute.
● Radio Button:
allows one to choose a single option. Syntax: type="radio". Keep the name attribute of all the
options the same.
● <select>:
For every possible option to select, use an <option> tag<option>
● Text Areas:
multi-line plain-text editing control. Syntax: <textarea>. You can specify how large the text area is
by using the "rows" and "cols" attributes
● Labels:
add captions for individual items in a form. Syntax: <label>. A label can be used by placing the
control element inside the <label> element, or by using the "for" and "id" attributes.
● Validations ensure that users fill out forms in the correct format
e.g.:
a. required: The Boolean attribute which makes a field mandatory:
b. email: the browser will ensure that the field contains

36
1.6.2 Attributes

● Properties associated with each tag.

● <tag name=”value”></tag> is the structure.
● Global Attribute:
○ Title : Add extra information (hover)
○ Style: Add style information(font,background,colour,size)
● <img src=”url” width=”100”>
○ src is the attribute used in image tag to define path
○ Width is attribute used to define width in pixels
○ Alt i.e alternate text if image is not loaded
● <a href=”url”> Name of the link </a>
● href used to define path of the link.

Cascading Style Sheets (CSS)

 Driving problem behind CSS !!!

What font type and size does <h1>Introduction</h1> generate? Answer: Some default
from the browser (HTML tells what browser how) Early HTML - Override defaults with
attributes .
<table border="2" bordercolour="black">

 Style sheets were added to address this: Specify style to use rather than
browser default Not have to code styling on every element…………………….

37
 DRY principle: Don't Repeat Yourself

2.1 CSS Pseudo Selectors

38
  Hover
- Apply rule when mouse is over element
(e.g. tooltip)
p:hover, a:hover {
background-colour: yellow;
}

 a:link, a:visited
-Apply rule when link has been visited or not visited (link)

a:visited { a:link {
colour: blue; colour: green;
} }

2.2 CSS Box Model

When laying out a document, the browser's rendering engine represents each element as a
rectangular box according to the standard CSS basic box model. CSS determines the size,
position, and properties (colour, background, border size, etc.) of these boxes.

39
  Every box is composed of four parts (or areas), defined by their respective edges: the
content edge, padding edge, border edge, and margin edge.

2.2.1 Content area

The content area, bounded by the content edge, contains the "real" content of the
element, such as text, an image, or a video player. Its dimensions are the content
width (or content-box width) and the content height (or content-box height). It often
has a background colour or background image.

If the box-sizing property is set to content-box (default) and if the element is a block
element, the content area's size can be explicitly defined with the width, min-width,
max-width, height, min-height, and max-height properties.

2.2.2 Padding Area

The padding area, bounded by the padding edge, extends the content area to
include the element's padding. Its dimensions are the padding-box width and the
padding-box height.

The thickness of the padding is determined by the padding-top, padding-right, padding-

bottom, padding-left, and shorthand padding properties.

2.2.3 Border Area

The border area, bounded by the border edge, extends the padding area to include
the element's borders. Its dimensions are the border-box width and the border-box
height.

The thickness of the borders are determined by the border-width and shorthand border
properties. If the box-sizing property is set to border-box, the border area's size can be
explicitly defined with the width, min-width, max-width, height, min-height, and max-height
properties. When there is a background (background-colour or background-image) set on a
box, it extends to the outer edge of the border (i.e. extends underneath the border
in z-ordering). This default behavior can be altered with the background-clip CSS
property.

2.2.4 Margin Area

The margin area, bounded by the margin edge, extends the border area to include
an empty area used to separate the element from its neighbors. Its dimensions are
the margin-box width and the margin-box height.

40
 The size of the margin area is determined by the margin-top, margin-right, margin-bottom,
margin-left, and shorthand margin properties. When margin collapsing occurs, the
margin area is not clearly defined since margins are shared between boxes.

Finally, note that for non-replaced inline elements, the amount of space taken up
(the contribution to the height of the line) is determined by the line-height property,
even though the borders and padding are still displayed around the content.

2.3 Position Property

The position CSS property sets how an element is positioned in a document. The top, right,
bottom, and left properties determine the final location of positioned elements.

Syntax:
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

Values:

2.3.1 Static

The element is positioned according to the normal flow of the document. The top,
right, bottom, left, and z-index properties have no effect. This is the default value.

2.3.2 Relative

The element is positioned according to the normal flow of the document, and then
offset relative to itself based on the values of top, right, bottom, and left. The offset
does not affect the position of any other elements; thus, the space given for the
element in the page layout is the same as if position were static.

This value creates a new stacking context when the value of z-index is not auto. Its
effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is
undefined.

41
2.3.3 Absolute

The element is removed from the normal document flow, and no space is created for
the element in the page layout. It is positioned relative to its closest positioned
ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final
position is determined by the values of top, right, bottom, and left.

This value creates a new stacking context when the value of z-index is not auto. The
margins of absolutely positioned boxes do not collapse with other margins.

2.3.4 Fixed

The element is removed from the normal document flow, and no space is created for
the element in the page layout. It is positioned relative to the initial containing block
established by the viewport, except when one of its ancestors has a transform,
perspective, or filter property set to something other than none (see the CSS Transforms
Spec), or the will-change property is set to transform, in which case that ancestor
behaves as the containing block. (Note that there are browser inconsistencies with
perspective and filter contributing to containing block formation.) Its final position is
determined by the values of top, right, bottom, and left.

This value always creates a new stacking context. In printed documents, the element
is placed in the same position on every page.

2.3.5 Sticky

The element is positioned according to the normal flow of the document, and then
offset relative to its nearest scrolling ancestor and containing block (nearest block-
level ancestor), including table-related elements, based on the values of top, right,
bottom, and left. The offset does not affect the position of any other elements.

This value always creates a new stacking context. Note that a sticky element "sticks"
to its nearest ancestor that has a "scrolling mechanism" (created when overflow is
hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling
ancestor.

Description
Types of positioning

 A positioned element is an element whose computed position value is either relative,

absolute, fixed, or sticky. (In other words, it's anything except static.)
 A relatively positioned element is an element whose computed position value is relative. The
top and bottom properties specify the vertical offset from its normal position; the left and
right properties specify the horizontal offset.
 An absolutely positioned element is an element whose computed position value is absolute
or fixed. The top, right, bottom, and left properties specify offsets from the edges of the

42
 element's containing block. (The containing block is the ancestor relative to which the
element is positioned.) If the element has margins, they are added to the offset. The
element establishes a new block formatting context (BFC) for its contents.
 A stickily positioned element is an element whose computed position value is sticky. It's
treated as relatively positioned until its containing block crosses a specified threshold (such
as setting top to value other than auto) within its flow root (or the container it scrolls within),
at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

Most of the time, absolutely positioned elements that have height and width set to auto
are sized so as to fit their contents. However, non-replaced, absolutely positioned
elements can be made to fill the available vertical space by specifying both top and
bottom and leaving height unspecified (that is, auto). They can likewise be made to fill the
available horizontal space by specifying both left and right and leaving width as auto.

2.3 Flexbox
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex
(expand) to fill additional space or shrink to fit into smaller spaces. This article explains all the
fundamentals.

2.4.1 Why Flexbox?

For a long time, the only reliable cross-browser compatible tools available for
creating CSS layouts were features like floats and positioning. These work, but in
some ways they're also limiting and frustrating.

The following simple layout designs are either difficult or impossible to achieve with
such tools in any kind of convenient, flexible way:

 Vertically centring a block of content inside its parent.

 Making all the children of a container take up an equal amount of the available
width/height, regardless of how much width/height is available.
 Making all columns in a multiple-column layout adopt the same height even if they
contain a different amount of content.

As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier.
Let's dig in!

2.4.2 The flex model

When elements are laid out as flex items, they are laid out along two axes:

43
  The main axis is the axis running in the direction the flex items are laid out in (for
example, as rows across the page, or columns down the page.) The start and end of
this axis are called the main start and main end.
 The cross axis is the axis running perpendicular to the direction the flex items are laid
out in. The start and end of this axis are called the cross start and cross end.
 The parent element that has display: flex set on it (the <section> in our example) is
called the flex container.
 The items laid out as flexible boxes inside the flex container are called flex items (the
<article> elements in our example).

2.4.3 Direction

Flexbox provides a property called flex-direction that specifies which direction the
main axis runs (which direction the flexbox children are laid out in). By default this is
set to row, which causes them to be laid out in a row in the direction your browser's
default language works in (left to right, in the case of an English browser).

flex-direction: column;

2.4.4 Wrapping

One issue that arises when you have a fixed width or height in your layout is that
eventually your flexbox children will overflow their container, breaking the layout.

flex-wrap: wrap;

44
2.4.5 flex-flow shorthand

At this point it's worth noting that a shorthand exists for flex-direction and flex-wrap:
flex-flow. So, for example, you can replace

flex-direction: row;
flex-wrap: wrap;

with

flex-flow: row wrap;

2.4.6 Ordering flex items

Flexbox also has a feature for changing the layout order of flex items without
affecting the source order. This is another thing that is impossible to do with
traditional layout methods.

The code for this is simple. Try adding the following CSS to your button bar example
code:

button:first-child {
order: 1;
}

Refresh and you'll see that the "Smile" button has moved to the end of the main axis.
Let's talk about how this works in a bit more detail:

 By default, all flex items have an order value of 0.

 Flex items with higher specified order values will appear later in the display order
than items with lower order values.
 Flex items with the same order value will appear in their source order. So if you have
four items whose order values have been set as 2, 1, 1, and 0 respectively, their
display order would be 4th, 2nd, 3rd, then 1st.
 The 3rd item appears after the 2nd because it has the same order value and is after
it in the source order.

You can set negative order values to make items appear earlier than items whose
value is 0. For example, you could make the "Blush" button appear at the start of the
main axis using the following rule:

button:last-child {
order: -1;
}

2.5 Grid

45
 CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in
rows and columns. It has many features that make building complex layouts straightforward.
This article will explain all you need to know to get started with page layout.

2.5.1 What is grid layout?

A grid is a collection of horizontal and vertical lines creating a pattern against which
we can line up our design elements. They help us to create layouts in which our
elements won't jump around or change width as we move from page to page,
providing greater consistency on our websites.

A grid will typically have columns, rows, and then gaps between each row and
column. The gaps are commonly referred to as gutters.

2.5.2 Defining a grid

As a starting point, download and open the starting point file in your text editor and
browser (you can also see it live here). You will see an example with a container,
which has some child items. These display in normal flow by default, so the boxes
display one below the other. We'll be working with this file for the first part of this
lesson, making changes to see how its grid behaves.

To define a grid we use the grid value of the display property. As with Flexbox, this
enables Grid Layout; all of the direct children of the container become grid items.
Add this to the CSS inside your file:

.container {
display: grid;
}

2.5.3 Gaps between tracks

To create gaps between tracks we use the properties column-gap for gaps between
columns, row-gap for gaps between rows, and gap as a shorthand for both.

.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 20px;
}

2.5.4 Repeating track listings

You can repeat all or merely a section of your track listing using the CSS repeat()
function. Change your track listing to the following:

.container {
display: grid;

46
 grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

is 1fr which, as we already know, distributes space evenly between tracks.

2.5.5 Line-based placement

We now move on from creating a grid to placing things on the grid. Our grid always
has lines — these are numbered beginning with 1 and relate to the writing mode of
the document. For example, column line 1 in English (written left-to-right) would be
on the left-hand side of the grid and row line 1 at the top, while in Arabic (written
right-to-left), column line 1 would be on the right-hand side.

We can arrange things in accordance with these lines by specifying the start and end
line. We do this using the following properties:

 grid-column-start
 grid-column-end
 grid-row-start
 grid-row-end

These properties can all have a line number as their value. You can also use the
shorthand properties:

 grid-column
 grid-row

These let you specify the start and end lines at once, separated by a forward slash /.

47
 CONCLUSION
Web Development :
In today's Web development, a good page design is essential. A bad design will lead to the
loss of visitors and that can lead to a loss of business. In general, a good page layout has to
satisfy the basic elements of a good page design. This includes colour contrast, text
organization, font selection, style of a page, page size, graphics used, and consistency. In
order to create a well-designed page for a specific audience. The developer needs to
organized and analyse the users' statistics and the background of the users. Although it
can be hard to come up with a design that is well suited to all of the users, there will be a
design that is appropriate for most of the audience. The better the page design, the more
hits a page will get. That implies an increase in accessibility and a possible increase in
business.

Python Programming :
Understanding the syntax of Python is great and all, and Python by itself is indeed a great
language, but the fundamentals of Python aren't why Python is a successful language.
There are plenty of fun-to-write languages that are just like Python, such as Ruby, Julia,
even R. What makes Python the victor is the community and 3rd-party packages. While
we can do a lot with just an installation of Python and the standard library, we can do
infinitely more with all of the 3rd party libraries out here.

48