Weitere ähnliche Inhalte
Ähnlich wie Web development (20)
Kürzlich hochgeladen (20)
Web development
- 3. ©Garvit Baleshwar
TABLE OF CONTENT
◼ Introduction to Web Development
◼ Types of Web Developer
◼ Introduction to HTML
◼ Terms in HTML
◼ Introduction to CSS
◼ CSS Syntax
◼ Types of CSS
◼ Introduction to JavaScript(JS)
◼ JavaScript Syntax
◼ Projects
3
- 4. ©Garvit Baleshwar
INTRODUCTION TO WEB DEVELOPMENT
◼ Web development is the work involved in developing a Web
site for the Internet
◼ Web development can range from developing a simple single static
page of plain text to complex Web-based Internet
applications (Web apps)
◼ It usually refers to the main non-design aspects of building Web
sites: writing markup and coding
◼ It refers to building, creating, and an maintaining websites
4
- 5. ©Garvit Baleshwar
TYPES OF WEB DEVELOPER
◼ Back-End Developer
The back-end is where the website’s core structure is designed.
These developers are experts in programming and using
complex software languages like Java, SQL and C#
◼ Front-End Developer
This is also known as client-side development. It’s more
connected to web design than back-end development because it
involves using HTML, CSS, and JavaScript to create things the
user can see
◼ Full Stack Developer
A full stack web developer is a person who can develop both
client and server software. They are working with both the
front and back ends of a website or application
5
- 6. ©Garvit Baleshwar
INTRODUCTION TO HTML
◼ Hypertext Markup Language is the standard markup language
for documents designed to be displayed in a web browser.
◼ Extension .html or .htm
◼ Developed in 1997
◼ HTML describes the structure of a Web page
◼ HTML consists of a series of elements
◼ HTML elements tell the browser how to display the content
6
- 7. ©Garvit Baleshwar
TERMS IN HTML
◼ Tags
◼ HTML makes use of various tags to format the content
◼ These tags are enclosed within angle braces
<Tag Name>
◼ Except few tags, most of the tags have their corresponding
closing tags.
E.g.
<html> </html>
<body> </body>
<p> </p>
<title> </title>
<br>
7
- 8. ©Garvit Baleshwar
HTML ELEMENT & ATTRIBUTES
Elements
● An HTML element is defined by a start tag,
some content, and an end tag
● <tagname>Content goes here...</tagname>
E.g.
<h1>My First Heading</h1>
<p>My first paragraph</p>
Attributes
● All HTML elements can have attributes
● Attributes provide additional information about
elements
● Attributes are always specified in the start tag
E.g.
<p align = "left">This is left aligned</p>
<img src="img_car.jpg">
<p style="color:red;">This is a red paragraph.</p> 8
- 10. ©Garvit Baleshwar
INTRODUCTION TO 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 style sheets are stored in CSS files
◼ Extension .css
◼ (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web
documents.
10
- 11. ©Garvit Baleshwar
CSS SYNTAX
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated by
a colon.
E.g.
p {
color: red;
text-align: center;
} 11
- 12. ©Garvit Baleshwar
TYPES OF CSS
Inline CSS
◼ Inline CSS is used to apply a unique style to a single HTML element.
◼ It is applied by using the style attribute inside HTML elements
Internal or Embedded CSS
◼ This CSS style is an effective method of styling a single page
◼ It is applied by using a <style> element in the <head> section
External CSS
◼ With external CSS, web pages are linked to an external .css file, which
can be created by any text editor
◼ This CSS type is a more efficient method, especially for styling a large
website
◼ It is applied by using a <link> element to link to an external CSS file
12
- 14. ©Garvit Baleshwar
Introduction
• JavaScript is used to program the behavior of web pages
• JavaScript code is inserted
between <script> and </script> tags
• Scripts can be placed in the <body>, or in the <head> section
of an HTML page, or in both.
• JavaScript is a case-sensitive language
• File extension .js, .mjs
JavaScript Functions
• A JavaScript function is a block of JavaScript code, that can
be executed when "called" for
• JavaScript function is placed in the <head> section and in
<title> section of an HTML page
JAVA SCRIPT
14
- 16. ©Garvit Baleshwar
JAVASCRIPT SYNTAX
The JavaScript syntax defines two types of
values:
◼Fixed values
Fixed values are called Literals
◼Variable values
Variable values are called Variables
Variables
◼Variables are used to store data values.
◼JavaScript uses the var keyword to declare variables
◼An equal sign is used to assign values to variables
16
