Web development intership Presentation.pptx

SRI VENKATESWARA COLLEGE OF ENGINEERING
&TECHNOLOGY(AUTONOMOUS)

WEB DEVELOPMENT
presented by:--
B.ANIL
20781A0517

Introduction to web development
 What is 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: It refers to websites, web
pages or anything thatover the
internet.
 Development: Building the
application from scratch.

 HTML(hyper text markup language)
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for
 creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the how to display the content
 HTML elements label pieces of cobrowserntent such as "this is a
heading", "this is a paragraph", "this is a link", etc.
 What Is HTML Used For?
 HTML, or Hypertext Markup Language, is used to create web pages. Site authors use
HTML to format text as titles and headings, to arrange graphics on a webpage, to link to
different pages within a website, and to link to different websites

Web server and client diagram to run in html

Here are the rules that you should follow
in order to have seamless HTML syntax:
 Every HTML document starts with
 the Doctype declaration – <!DOCTYPE html>
 The HTML document itself begins
 with <html> and ends with </html>.
• The main content of the document is placed under the
<body> and </body> enclosed tag.
•Then eventually comes the subheading,
 section heading, paragraph, and so on
• The <br> tag is used to insert line breaks in the text. It
applies as a line division without changing
 What is an HTML Element?
 An HTML element is defined by a start tag, some content, and an end tag:
 <tagname> Content goes here... </tagname>
 The HTML element is everything from the start tag to the end tag:
 <h1>My First Heading</h1>
 <p>My first paragraph.</p>

Different types of html tags :
 Every tag in HTML perform different tasks.
 If you have used an open tag <tag>, then you must use a close
 tag </tag> (except some tags)
 Syntax :
 <tag> content </tag>
 HTML Meta Tags
 DOCTYPE, title, link, meta and style
 All HTML tags must enclosed within < > these brackets.
 HTML Text Tags
 <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>,
 <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>
 HTML Image and Object Tags
 <img>, <area>, <map>, <param> and <object>
 HTML List Tags

<html>
<head>
<tittle>example of Header-levels
</title>
<head>
<Body>
<h6>JavaTpoint</h6>
<h5> JavaTpoint</h5>
<h4>JavaTpoint</h4>
<h3>JavaTpoint</h3 >
<h2>JavaTpoint</h2>
<h1>JavaTpoint</h1>
</Body>
</Html>
 This example creates a web page which helps in understanding how to define all header
levels.
Sample code

Output :
 JavaTpoint
 JavaTpoint
 JavaTpoint
 JavaTpoint
 JavaTpoint
JavaTpoint

Css(cascading style sheets)
 What is css:
 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 SYNTAX:
 Selector – h1 Declaration – {color:blue;font size:12px;}
 Color is propery and blueis value.
 Font_size is property and 12px is value.

Why css need ?
 CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML
pages.
 Easy Maintenance: To make a global change simply change the style, and all
elements in all the webpages will be updated automatically.
 Search Engines: CSS is considered a clean coding technique, which means search
engines won’t have to struggle to “read” its content.
 Superior styles to HTML: CSS has a much wider array of attributes than HTML, so
you can give a far better look to
 your HTML page in comparison to HTML attributes.
 Offline Browsing: CSS can store web applications locally with the help of an
offline cache. Using this we can view offline websites.

CSS Selector :
 1.CSS Element Selector 2.CSS Id Selector
 3.CSS Class Selector 4.CSS Universal Selector 5.CSS Group Selector
 CSS Background properties There are several different types of
1.background-color
 2.background-image
 3.background-repeat
 4.background-attachment
 5.background-position
 selectors in CSS.

Example for background-color
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 h2{
 background-color: pink;
 }
 P{
 Background-color:orange;
 }
 </style>
 </head>
 <body>
 <h2>This is My first presentation.</h2>
 <p> web development is one of the
 trending programming language</p>
 </body></html>

CSS Border :
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style: none;}
p.dotted{border-style: dotted;}
p.dashed{borderstyle: dashed;}
p.solid {border-style: solid;}
p.double{borderstyle: double;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>

<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border</p>
</body>
</html>

Java script
 JavaScript (js) is a light-weight object-oriented programming language which is used
by several websites for scripting the webpages. It is an interpreted, full-fledged
programming language that enables dynamic interactivity on websites when applied
to an HTML document. It was introduced in the year 1995 for adding programs to the
webpages in the Netscape Navigator browser. Since then, it has been adopted by all
other graphical web browsers.
 Application of JavaScript :
 JavaScript is used to create interactive websites. It is mainly used for:
• Client-side validation,
• Dynamic drop-down menus,
• Displaying date and time,
 Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog
box and prompt dialog box),
•Displaying clocks etc.
 Intoduction:

The script tag takes two important attributes −
Language
Type
So your JavaScript segment will look like −
 Syntax :
<script ...> JavaScript code </script>
 JavaScript Variables :
 In a programming language, variables are used to store data
values. JavaScript uses the keywords var, let and const to
declare variables. An equal sign is used to assign values to
variables.

Example of variables:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>
<p id="demo"></p>
<script> let x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Output:
In this example, x is defined as a variable. Then,
x is assigned the value of 6: 6

JavaScript Operators :
 arithmetic operators ( + - * / )
 assignment operator ( = )
 Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>JavaScript uses arithmetic operators to compute values (just like
algebra).</p>
<p>In JavaScript the = operator is used to assign values to variables.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
document.getElementById("demo").innerHTML = x + y;
</script>
</body>

Output:
 JavaScript uses arithmetic operators to compute values (just like algebra).
 110
 In JavaScript the = operator is used to assign values to variables.
 11

What is PHP?
 PHP stands for Hypertext Processor
 PHP is the sever- side scripiting language,like ASP
 PHP is used for designing of web page.embedded in html
 PHP script are executed on the sever
 PHP is a open source software
 PHP supported many databases(my sql,oracle,generic odbc etc)
 Variables:
 A variable in php is the name of the memory location that holds
data.A variable is declared using $(dollor)sign followed by variable name

 Declaration and initialization of variable
in PHP
declaration:
$variable name;
initialization:
$variable name=value;
DATA TYPES:
bool:A value thatas either true or false
int:A whole number value
float:a numeric value with decimal
string : A series of characters
LOOPS:
for loop
while
do while

 PROJECT:
 This portfolio might contain some very important information of yours like:
 About us section
 ProjectsYour achievements
 Your contact details
 You can even add other details too in your portfolio and can make
it more beautiful.
 PROGRAM:
 Project Description:Design a Portfolio website

<html>
<head>
<h1>Protofilo</h1>
<style>
nav { width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #5317b3;
z-index: 99;
}
.nav__content
{ max-width: var(--max-width);
margin: auto;
padding: 1.5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo a {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);

transition: 0.3s;
color: white;}
transition: 0.3s;
color: white;}
nav .logo a:hover {
color: var(--primary-color-dark);
}
nav .checkbox
{
display: none;
}
nav input { display: none;
}
nav .checkbox i
{
font-size: 2rem;
color: var(--primary-color);
cursor: pointer;
}
ul { display: flex;
align-items: center;
gap: 1rem; list-style: none;
transition: left 0.3s;
}

ul li{
: 0.5rem 1rem;
border: 2px solid transparent;
text-decoration: none;
font-weight: 600;
color: var(--text-dark);
color: var(--text-dark);
transition: 0.3s;
color:white;
}
ul li a:hover
{
border-top-color: var(--secondary-color);
border-bottom-color: var(--secondary-color);
color: var(--secondary-color);
a}
.image { display: grid;
place-items: center;
}
.image { grid-area: 1/1/2/2;
}
.image img { width:50px;
height:50px;
border-radius: 80%;

}
.box{ background-color: gray;
}
.box1{ color:#5317b3;
background-color: aliceblue;
}
.box2{ color:rgb(38, 81, 156);
background-color:whitesmoke;
float:center;
font-size: large;
}
footer { text-align: center;
padding: 15px;
background-color: #24acac;
color: #dcd3d3;
}
</style>
</head>
<body>
<h1 text align="center">L.Jayasudha</h1><table border="2" width= 1450px>
<tr><td></td></tr></table><nav>
<div class="nav__content">

<div class="logo"><a href="#">al.Jayasudha</a></div>
<label for="check" class="checkbox">
<i class="ri-menu-line"></i>
</label>
<input type="checkbox" name="check" id="check" />
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</li>
<li class="nav-item ">
<a class="nav-link" href="#skills">skills</a>
</li>
<a class="nav-link" href="#projects">projects</a>
</li>
<a class="nav-link" href="#Resume">Resume</a>
</li> <li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>x
</li>

</ul>
</nav>
<section id="Home"><center>
<div class="container mt-4 pt-4">
<div class="row mt-4">
<div class="col-lg-4">
<img src="jaya.jpg" class= "imageAboutPage" alt="" >
</center>
<p>I am excited to continue my education and pursue a career in software
development, where I can contribute to solving real-world problems with cutting-edge
technologies.With a strong interest and passion for python, I am pursuing my Bachelor
of Technology degree from Sri venkateswara college of engineering and technology ,
where I am learning programming, algorithms, and data science skills.</p>

<section id="about">
<center>
<div class="container mt-4 pt-4">
<h1 class="text-center">About</h1>
<img src="jaya.jpg" class= "imageAboutPage" alt="" height=500px width=250px>
</center>

<p>Currently, I am working as a internship at CodSoft, a full stack developer intern at Bharat
Intern, and a web development and designing intern at Oasis Infobyte, where I am applying my
skills and knowledge to develop innovative and user-friendly solutions for various clients and
projects.I enjoy working in a team environment and collaborating with other developers,
designers, and stakeholders. I am excited to continue my education and pursue a career in
software development, where I can contribute to solving real-world problems with cutting-edge
technologies.</p>
</div>
</div>
</div>
</section>

<center>
<section class="skills" id="skills">
<div class="box">
<h2>Skills</h2>
<div class="container">
<div class="card">
<div class="face face1">
<div class="content">
<img src="web.jpg">
<h3>HTML,CSS,JS</h3>
</div>
</div>
</div>
<div class="card">
<img src="sql.jpg">
<h3>sql</h3>
</div>
</div>
</div>
<div class="card">
<img src="python.jpg">

<h3>python</h3>
</div>
</div>
</div>
</section>
</center>

<br>
<div class="box1">
<section id="projects">
<div class="container mt-3 contactContent">
<center>
<h1 class="text-center">projects </h1>
<img src="cloud.jpg" alt="">
<p>I done my projects in course of cloud computing ,verzeo banglore</p>
<img src="data.jpg" alt="">
<p> I done my internship in course of data science and machine
learning,upskillcampus</p>
<img src="html.jpg" alt=""><p>I done my projects in course of webdevelopment in
bharatintern </p>
</center>
</div>
</section>
</div>
<div class="box2

"><section id="Resume">
<center>
<h1 class="text-center">Resume </h1>
<p>This is my resume click here to see<a href=“jaya
resume.pdf">Resume</a></p>
</div>
</center>
</div>
</section>
<center><div class="box">
<section id="contact">
<h1 class="text-center">Contact</h1>
</div>

<form>
<div> <input type="text" class="form-control form-control-lg" placeholder="Enter Your
Name">
</div>
<br>
<div> <input type="email" class="form-control mt-3" placeholder=" Enter your Email">
</div> <br>

<div>
<input type="password" class="form-control mt-3" placeholder=" Ente your password">
</div>
<br>
<div>
<input type="password" class="form-co ntrol mt-3" placeholder=" confirm password">
</div>
<br>
<div class="mb-3 mt-3">
<div>
<textarea class="form-control" rows="5" id="comment" name="text" placeholder="Enter
Your Message"></textarea>
</div>
</div>
</form>
<button type="button" class="btn btn-success mt-3">Contact Me</button>
</div>
</div>
</center>
</section>
<footer>
<small align="center"> Copyright © Sravya All Rights Reserved </small>
</body>
</html>

Conclusion
 In a nutshell, this internship has been an excellent and rewarding experience. I can
conclude that there have been a lot I’ve learnt from my work ,Needless to say, the
technical aspects of the work I’ve done are not flawless and could be improved
provided enough time. As someone with no prior experience with Node.js whatsoever
I believe my time spent in research and discovering it was well worth it and
contributed to finding an acceptable solution to build a fully functional web service.
Two main things that I’ve learned the importance of are time-management skills and
self-motivation.


Web development intership Presentation.pptx

Recommended

Recommended

More Related Content

Similar to Web development intership Presentation.pptx

Similar to Web development intership Presentation.pptx (20)

Recently uploaded

Recently uploaded (20)

Web development intership Presentation.pptx