Sumago Infotect
Uploaded by
sunnygaikwad4747Sumago Infotect
Uploaded by
sunnygaikwad4747IMPLANT TRAINING
2024
SUMAGO INFOTECH PVT.LTD , NASHIK
CONTENT
• Introduction of html
• Introduction of css
• Introduction of java-script
• Study of python
• Study of django
Introduction to web technologies
HTML to create the document structure and content.
CSS to control is visual aspect
Javascript for interactivity
Tools
• What do we need to start:
• a good web-browser (Chrome or Firefox)
• a good text editor like:
• VS Code (cross platform)
• Notepad++ (win)
HTML
• HTML means Hyper Text Markup Language.
• The HTML allow us to define the structure of a document or a website.
• HTML is NOT a programming language, it’s a markup language, which means its purpose is
to give structure to the content of the website, not to define an algorithm.
• It is a series of nested tags (it is a subset of XML) that contain all the website information
(like texts, images and videos). Here is an example of tags:
• <title>This is a title</title>
• The HTML defines the page structure. A website can have several HTMLs to different pages.
Html syntax
<HTML>
<HEAD>
<TITLE> TITLE_NAME</TITLE>
</HEAD>
<BODY>
<P> PARAGRAPH WRITING</P>
</BODY>
</HTML>
HTML : main tags
HTML Tag Syntax Description
Defines a division or section in an HTML
<div> <div>...</div>
document.
<p> <p>...</p> Defines a paragraph.
<a> <a href="...">...</a> Defines a hyperlink.
<img> <img src="..." alt="..."> Embeds an image.
<ul> <ul><li>...</li></ul> Defines an unordered list.
<ol> <ol><li>...</li></ol> Defines an ordered list.
<li> <li>...</li> Defines a list item.
<table> <table>...</table> Defines a table.
<tr> <tr>...</tr> Defines a table row.
<th> <th>...</th> Defines a table header cell.
<td> <td>...</td> Defines a table data cell.
HTML : main tags
HTML Tag Syntax Description
<form> <form>...</form> Defines an HTML form for user input.
<input> <input type="..."> Defines an input control within a form.
<button> <button>...</button> Defines a clickable button.
<h1>–<h6> <h1>...</h1> Define headings of different levels.
<span> <span>...</span> Defines a generic inline container.
<label> <label for="...">...</label> Defines a label for an input element.
Embeds an inline frame for external
<iframe> <iframe src="..."></iframe>
content.
form> <form>...</form> Defines an HTML form for user input.
<input> <input type="..."> Defines an input control within a form.
<button> <button>...</button> Defines a clickable button.
<h1>–<h6> <h1>...</h1> Define headings of different levels.
CSS
• CSS is the language we use to style a Web page.
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
• CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.
CSS example:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
CSS fields :
• Color: #FF0000; red; rgba(255,00,100,1.0); //different ways to specify colors
• Background-color: red;
• Background-image: url('file.Png’);
• Font: 18px 'tahoma’;
• Border: 2px solid black;
• Border-top: 2px solid red;
• Border-radius: 2px; //to remove corners and make them more round
• Margin: 10px; //distance from the border to the outer elements
• Padding: 2px; //distance from the border to the inner elements
• Width: 100%; 300px; 1.3em; //many different ways to specify distances
• Height: 200px;
• Text-align: center;
• Box-shadow: 3px 3px 5px black;
• Cursor: pointer;
• Display: inline-block;
• Overflow: hidden;
Box Model
• It is important to note that by default any width and height specified to an element will
not take into account its margin, so a div with width 100px and margin 10px will
measure 120px on the screen, not 100px.
• This could be a problem breaking your layout.
• You can change this behaviour changing the box model of the element so the width uses
the outmost border:
div { box-sizing: border; }
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
Box Model Example
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Javascript
• A regular programming language, easy to start, hard to master.
• Allows to give some interactivity to the elements on the web.
• Syntax similar to C or Java but with no types.
• You can change the content of the HTML or the CSS applied to an element.
• You can even send or retrieve information from the internet to update the content of the web without
reloading the page.
• JavaScript is a versatile, lightweight scripting language widely used in web development.
• It can be utilized for both client-side and server-side development, making it essential for modern web
applications. Known as the scripting language for web pages, JavaScript supports variables, data types,
operators, conditional statements, loops, functions, arrays, and objects.
Example of a website
Variables in JS
Variables name Description
oldest keywords to declare a variable and var can be
Var
updated and redeclared.
block-scoped, can’t be accessible out the particular block,
let
and let can be updated but not redeclared
const block scope, neither be updated nor redeclared.
Keywords in js
Keyword Description
var Declares a variable
let Declares a block variable
const Declares a block constant
if Marks a block of statements to be executed on a condition
switch Marks a block of statements to be executed in different cases
for Marks a block of statements to be executed in a loop
function Declares a function
return Exits a function
try Implements error handling to a block of statements
Functions in js
A JavaScript function is a block of code designed to perform a particular task. It encapsulates
a set of instructions that can be reused throughout a program. Functions can take parameters,
execute statements, and return values, enabling code organization, modularity, and reusability in
JavaScript programming.
EXAMPLE :
function myFunction(g1, g2)
{
return g1 / g2;
}
const value = myFunction(8, 2); // Calling the function
console.log(value);
Example of js
<!DOCTYPE html>
<html lang="en"> <body>
<h1>Welcome to My Simple JavaScript Example</h1>
<head> <button id="myButton">Click Me!</button>
<meta charset="UTF-8">
<script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // JavaScript function to be executed when the button is clicked
<title>Simple JavaScript Example</title> function showAlert() {
alert('Hello, this is an alert from JavaScript!');
<style> }
body {
// Adding event listener to the button
font-family: Arial, sans-serif; document.getElementById('myButton').addEventListener('click', showAlert);
</script>
text-align: center;
</body>
padding: 50px; </html>
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
Python
What is Python?
• Python is a popular programming language. It was created by Guido van Rossum, and released in 1991.
It is used for:
• web development (server-side),
• software development,
• mathematics,
• system scripting.
What can Python do?
• Python can be used on a server to create web applications.
• Python can be used alongside software to create workflows.
• Python can connect to database systems. It can also read and modify files.
• Python can be used to handle big data and perform complex mathematics.
• Python can be used for rapid prototyping, or for production-ready software development.
Python features
High level language
Robust
Secure
Easy to use
Interpreted
Simple and open source
Object oriented language
Gui programming support
Large community support
Easy to debug
Dynamically typed language
Python Applications
Web & internet development
Games & 3D games
Software development
Testing automation
Image processing
Artificial intelligence
Software development
Game development
Web development
Data analysis and visualization
Machine learning
Networking
Python variables
• A variable can have a short name (like x and y) or a more descriptive name (age, carname,
total_volume). Rules for Python variables:A variable name must start with a letter or the
underscore character
• A variable name cannot start with a number
• A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9,
and _ )
• Variable names are case-sensitive (age, Age and AGE are three different variables)
• A variable name cannot be any of the Python keywords.
Example:
myvar="John"
my_var="John"
_my_var="John"
myVar="John"
MYVAR="John"
myvar2 = "John"
DJANGO fRAMEWORK
• Django is a high-level Python framework. It is free and open-source, written in Python itself,
and follows the model-view-template architectural pattern.
• We can use it to develop quality web applications faster and easier. Since developing for the
web needs a set of similar components, you can use a framework.
• This way, you don't have to reinvent the wheel. These tasks include authentication, forms,
uploading files, management panels, and so.
FEATURES
• 1. Rapid Development
• 2. Secure
• 3. Scalable
• 4. Fully loaded
• 5. Versatile
• 6. Open Source
CONTROL FLOW
• 1.The user sends a URL request for a resource to
Django.
• 2.Django framework then searches for the URL
resource.
• 3. If the URL path links up to a View, then that
particular View is called.
• 4. The View will then interact with the Model and
retrieve the appropriate data from the database.
• 5. The View then renders back an appropriate
template along with the retrieved data to the user .
INSTALLATION OF DJANGO
Steps to Install Django and Set Up a Virtual Environment
1.Install Python 5.Project creation
get install python Django-admin startproject
projectname
2.Install pip 6.app creation in Project
get install – python pip py manage.py startapp appname
3.create virtual environment 7. To run project
pip install virtualenv py manage.py runserver
4.Installing Django 8.To make migrations
pip install Django py manage.py makemigrations
MVT ARCHITECTURE
• Models: Just like the Model in MVC, here as well it has the
same functionality of providing the interface for the data stored
in the database.
• Views:-In Django, Views act as a link between the Model data
and the Templates. It sees the user request, retrieves appropriate
data from the database, then renders back the template along
with retrieved data.
• Templates:- Just like View in MVC, Django usesemplates in
its framework. Templates are responsible for che entire User
Interface completely. It handles all the static parts of the
webpage along with the HTML, which che users visiting the
webpage will perceive.
DJANGO TEMPLATE LANGUAGE
• Django's template engine offers a mini-language to define the user-facing layer of the
application.
• A variable looks like this: {{variable}}. -
