Scribd
Upload
10 views

WebDevelopment.pptx

Uploaded by

pushpendarsingh5809
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

WebDevelopment.pptx

Uploaded by

pushpendarsingh5809
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Fundamentals of Web

Submitted To: Development Submitted By:


With Pushpendar Singh
2300270120124
HTML5, CSS CS - 3
Objectives :
At the end of this module, you will be able to:
 Importance of Web Development

 Web Designer Vs. Web Developer

 Front-end and Back-end Web Development

 HTML, CSS and JavaScript - An Overview

pment
Importance of Web Development
The Internet is ubiquitous
Accessible through mobile and desktop
Customers/users need to find you/your business
Builds trust in your organization and improves your reputation
Your website is your first round-the-clock sales person!
The Website
Creates first impression of your business
Create it to suit the needs of your target audience
Reflects your expertise and reputation
Can bring business from any part of the world!
Call to Action – Encourage the users to give you business
You need Web Development skills to create a
Website!
Web Designer Vs. Web Developer
A Web Designer
Designs the look and feel of a website (creative side of website)
Decides the layout, fonts, color, images and overall branding
Creates the visual mock-up of the website
Rarely does the development of a website!
A Right-brained (Creative) Person
A Web Developer
Brings the website mock-up to life on the Internet (development side of website)
Develops the website and hosts on a web server
Has Web Development Skills: HTML, CSS, JavaScript, React.js, Node.js
A Left-brained (Logical) Person
Gain Web Development skills to become a Web Developer!
Front End and Back End Web Development
Front End Web Development
Defined components on the page with HTML
Make them look pleasing with CSS
Enable interactivity with JavaScript
Enhance productivity with use of frameworks
Back End Web Development
Create the page components and content dynamically on the web server
Send the HTML + CSS + JavaScript to web browser (used by a human
user)
Generate pages by programming in Java, JavaScript, PHP, Perl, Python,
Ruby
Aim to achieve fast response times to end users
Front End Web Development is the focus of this webinar!
HTML, CSS, and JavaScript – An
Overview :
HTML
Hypertext Markup Language
Structure of Page

JavaScript
Interactivity with User
Dynamic Updates in a Web
Page

CSS
Cascading Style Sheets
Presentation/Styling

t
A Simple HTML5
Page
Save the following code in a test.html
file :
<!DOCTYPE html>
<html>
<head>
<title>This is My First Website </title>
</head>
<body>
<p>Welcome to HTML5, CSS3 and JavaScript!</p>
</body>
</html>

t
Hosting a Web
Site
A Web Site
Serves one or more HTML Pages
Default Page: index.html, index.php
Served / Hosted by a Web Server
HTTP Web Server
https, apache2, Ngnix - Internet Information Server (Microsoft’s)
Web Application Server
Visual Studio Code (Microsoft) , Sublime Text, Atom
Technologies
HTML, HTTP, TCP/IP Protocols
Operating Systems: Linux, Windows, MacOS
HTML
Page
HTML (Web) Page / Document
User Interface for the Web (site or application)
A plain text file – human readable
Transported on HTTP - HyperText Transfer Protocol
Page Types
Static – ready-made pages with fixed page content
File Extension: .html, .htm
Dynamic – generated on the fly with varying page
content
Generated on the Web Server
Interspersed with JavaScript, PHP, JSP, ASP
File Extensions: .js, .php, .jsp, .asp, .aspx
CSS -
Introduction
Cascading Style Sheet
Describes the look and formatting of a page
Used for Changing Presentation and Styling
Can apply to a mark-up language
HTML, XHTML, XML, SVG
Separates Content from Presentation
Properties (Attributes) Styled
Layout, Font (Typography), Color,
Background
Box Properties: Border, Margin, Padding
Lists, Tables

.
CSS Syntax :
Style Selector
The HTML elements to which the Style rule should be
applied
It is a match expression
Specified as:
Element’s tag name
h1, p, label - case insensitive
Value of Element’s attribute
id, class - Case Sensitive
Element’s placement in the Document tree
Child element is nested within Parent
A Sibling element is at the same nesting level
CSS Syntax :
CSS Declaration Block
List of Declarations
Enclosed in curly braces { . . . }
Declaration
property : value(s) ;
property and value(s) are pre-defined
Property name is unique
Property value – Specified in multiple formats
keywords (words) or mnemonics (in combination with some symbols like: #,
/)
numerical, hexadecimal, or a combination
some values may have units of measure
Thank Y o u ! !

You might also like