Shreyansh_patni web developer

A
TRAINING PRESENTATION
ON
WEBSITE DESIGNING
Session-(2021-2022)
Submitted by:
Shreyansh Patni
(PCE19EC064)
3rd Year
Submitted to:
Dr. Payal Bansal
(Professor)
Department of Electronics and Communication
Poornima College of Engineering

Contents
Training Platform
Training Description
Project
Conclusion
Future Scope
Technology

TRAINING PLATFORM :
INTERNSHIP STUDIO
• Internship Studio is a platform developed to
help students build their profiles by providing
them the right exposure to develop the
required skills in the respective domain.
• Internship Studio is an online training and
internship platform founded on the principle
that students interested in any field should
not be required to have any sort of
prerequisite knowledge in order to start their
journey in that particular field.

WHY INTERNSHIP STUDIO?
• It encourage students to work on projects &
learn from the professionals.
• Infuses a learning spirit through the best of
best mentorship.
• Fills the gap between bookish knowledge and
practical knowledge by providing training +
internship.
• Internship Studio provides an industry
exposure within your domestic vicinity.

INTRODUCTION TO WEB DESIGNING
• Web design refers to the design of websites that
are displayed on the internet.
• Web design is the process of planning,
conceptualizing, and arranging content online.
• It’s the process of planning and building the
elements of website, from structure and layout
to images, colors, fonts and graphics.
• Web design also includes web apps, mobile apps,
and user interface design.
• A web designer works on the appearance,
layout, and, in some cases, content of a

WHAT IS HTML?
 HTML stands for Hyper Text Markup Language.
 HTML is a markup language
 A markup language is a set of markup tags.
 The tags describe document content
 HTML documents contain HTML Tags and Plain Text.
 HTML documents are also called Web Pages.

HTML TAGS
.
 HTML tags are keywords (tag names) surrounded by Angle
Brackets like <HTML>.
 HTML tags come in pairs like <p> and </p>.
 The first tag in a pair is the START TAG, the second tag is the END
TAG.
 The end tag is written like the start tag, with a slash before the
tag name.
 Start and end tags are also called opening and closing tags.
EXAMPLE:

BASIC HTML PAGE STRUCTURE
An HTML Document is mainly divided into two parts:
• HEAD: This contains the information about the HTML
document. For Example, Title of the page, version of
HTML, Meta Data etc.
• BODY: This contains everything you want to display on
the Web Page.

HTML TAGS
Html headings are defined with the <h1> to <h6> tags.
<h1> this is a heading</h1>
Html paragraphs are defined with the <p> tag.
<p>this is a paragrapgh.</p>
Html links are defined with the <a> tag.
<ahref=http://espsolutions.com>this is a link</a>
Html images are defined with the <img> tag.
<img src=“espelogo.jpg” alt=“espsolutions.com” width=“105”
height=“105>
Html uses tags like <b> and <i> for formatting output, like bold or italic text.
<b>this text is bold</b>, <i>this text is italic</i>

HTML ATTRIBUTES
 Html elements can have ATTRIBUTES
 Attributes provide Additional Information about an element
 Attributes are always specefid in theSTART TAG.
 Attributes come in name/value pairs like: name=“value”.
<IMG SRC =“ESPELOGO.JPG” WIDTH =“105” HEIGHT=“105”>
NAME VALUE NAME VALUE NAME VALUE

HTML LIST:EXAMPLE
UNORDERED LIST:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ORDERED LIST:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

 CSS stands for cascading style sheets.
 Styles define how to display html elements.
 Styles were added to html 4.0 to solve a problem.
 External style sheets can save a lot of work.
 External style sheets are stored in CSS files.
 A CSS file allows to separate web sites HTML content from it’s style.
WHAT IS CSS?
CSS SYNTAX
A CSS rule has two main parts: a selector, and one or more declarations:

THE ELEMENT SELECTOR
 The element selector selects the element based on the element name.
EXAMPLE:
p {
text-align: center;
color: red;
}
THE ID SELECTOR
 The id selector uses the id attribute of an html tag to find the specific element.
 An id should be unique within a page, so you should use the id selector when you want to find a single,
unique element.
 It is a defined with a “#”.

.
EXAMPLE:
<p id=“para1”> hi </p>
#para1
{
text-align: center;
color: red;
}
THE CLASS SELECTOR
 The class selector is used to specify a style for a group of elements.
 The class selector finds elements with the specific class.
 The class selector uses the html class attribute, and is defined with a “ . ”
EXAMPLE:
 Html elements with class = “center”
.center{
text-align : center;
color: red;
}

THREE WAYS TO INSERT CSS
 There are three ways of inserting a style sheet:
• External Style Sheet
• Internal style sheet
• Inline style
EXTERNAL STYLE SHEET
 An external style sheet is ideal when the style is applied to many pages. With an external style sheet,
one can change the look of an entire website by changing just one file.
EXAMPLE:
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”
</head>

 An internal style sheet should be used when a single document has a unique style . You
define internal styles in the head section of an html page, inside the <style> tag, like this:
<head>
<style>
body{
background-color:linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
INTERNAL STYLE SHEET

An inline style loses many of the advantages of a style sheet (by mixing
content with presentation).
This method should be used sparingly.
To use inline styles, add the style attribute to the relevant tag. The style
attribute can contain any CSS property.
EXAMPLE:
<h1 style=“color:blue;margin-left:30px;”>this is a heding.<h1>
INLINE STYLES

THE CSS BOX MODEL
 All html elements can be considered as boxes . In CSS, the term “box model” is used
when talking about design and layout
 The box model allows to place a border around elements and space elements in
relation to other elements
 The Image below illustrates the box model:

.
WHAT IS JAVASCRIPT?
 JavaScript is a Scripting Language.
 JavaScript is among the most powerful and
flexible programming languages of the web.
 A Scripting language is a lightweight
programming language.
 JavaScript is programming code that can be
inserted into HTML pages.
 JavaScript inserted into HTML pages, can be
executed by all modern web browsers.
 It powers the dynamic behavior on most
websites

HOW TO USE JAVASCRIPT?
The<script>Tag:
 To insert a JavaScript into an HTML page, use the <script> tag.
 The <script> and </script> tells where JavaScript starts and ends.
<script>
alert(“My first JavaScript”)
</script>
JavaScriptin<body>:
<html>
<body>
<script>
document.write(<h1>“Thisisaheading”</h1>)
</script>
</body>
</html>

PROJECT
E-COMMERCE WEBSITE DESIGN
Goals of the Project:
 To design a website with basic pages/features which are
necessary for an e-commerce website with the help of
HTML, CSS and JavaScript
 The website should be responsive, i.e. an approach to
web design that makes web pages render well on a
variety of devices and window or screen sizes from
minimum to maximum display size.

PROJECT: https://inernship-finalproject.shreyansh2105.repl.co/
PROGRAMMING IN repl.it

FUTURE SCOPE
 With the knowledge I have gained by my training in website designing, I am confident
that in the future I can design a website more effectively by adding more and
different actions using HTML, CSS and JavaScript.
 Currently, the IT industry is overflowing with opportunities for website designing in
India as well as abroad. Using your vivid, creative imagination and the never ending
demand for websites are the reasons to opt web designing as a career path.
 Importance of web designing is increasing because of growth of other business
sectors where web designers can be engaged in various other fields, some of which
are mentioned below-
• Printers
• Design Studios
• Marketing Firms
• Publishing Houses
• Advertising Agencies
• Educational Institutes

CONCLUSION
• I came to know about the web
designing and web development.
• I came to know about the difference
between the work of web designer
and web developer.
• I have learnt about the basic
concepts of HTML, CSS and
JavaScript.
• I have learnt about the Bootstrap and
its features.
• I have also learnt how to design a
basic website using the skills of
HTML, CSS and JavaScript.

Shreyansh_patni web developer

More Related Content

Similar to Shreyansh_patni web developer

Recently uploaded

Shreyansh_patni web developer