Documente Academic
Documente Profesional
Documente Cultură
WEB DEVELOPMENT
BY
B.KANISHKAR
17104057
III-CSE-A
CONTENTS
• Introduction
• HTML
• CSS
• Bootstrap
• JavaScript
2
10-10-2019
INTRODUCTION
• A webpage consists of 2 basic components :
1. HTML
2. CSS
3. javaScript
• For back end or server side we have many options to choose. For example
1. Node. Js
2. PHP
• For database we can use:
1. Mysql
2. Mango DB
4
10-10-2019
STRUCTURE OF HTML
<!DOCTYPE html>
<html>
<head>
<title>First Web Page</title>
</head>
<body> <p>Hello world!</p> </body>
</html>
OUTPUT
6
10-10-2019
HEADER TAGS
8
10-10-2019
Example: text a
<p>text a</p>
<p>text b</p> text b
<br>text c
<br>text d text c
text d
Unordered lists:
<UL>
<LI>Item One •Item One
<LI>Item Two •Item Two
<LI>Item Three
•Item Three
<LI>Item Four
•Item Four
</UL>
10
10-10-2019
type="i/I/a/A/1" (default)
i = i. Item One I = I. Item One a = a. Item One A = A. Item One 1 = 1.Item One
ii. Item Two II. Item Two b. Item Two B. Item Two 2. Item Two
iii. Item Three III. Item Three c. Item Three C. Item Three 3. Item Three
iv. Item Four IV. Item Four d. Item Four D. Item Four 4. Item Four
11
Links
The anchor tag <A> is used to link one document to another or from one part of a document to another part of the
same document.
Basic Links:
<A HREF="http://www.stanford.edu/">Stanford University</A>
Inter-document Links:
<A HREF="#spot">Point to 'spot' in this document</A>
Email links:
<A HREF="mailto:someone@somehost.com">Email someone@somehost.com</A>
12
10-10-2019
13
CSS TAGS
• Align-content : Specifies the alignment between the line a flexible container when the item do not use
all available spaces.
• Background-color : Specifies the background color of an element.
• Background-image : Specifies one or more background images for an elements.
• Background-size : Specifies the size of the background images.
• Font : This is used to set the font-style, font-family etc…
• Text-align : Specifies the horizontal alignment of a text.
14
10-10-2019
15
16
10-10-2019
BOOTSTRAP
• Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation and other
interface components. Wikipedia
• Original author(s): Mark Otto, Jacob Thornton
• License: MIT License (Apache License 2.0 prior to 3.1.0)
• Stable release: 4.3.1 / February 13, 2019; 6 months ago
• Initial release date: 19 August 2011
• Platform: Web platform
• Written in: HTML, Cascading Style Sheets, Less(v3), Sass(v4), JavaScript
17
SETTING UP BOOTSTRAP
Copy-paste the stylesheets <link> into your <head> before all other stylesheets to load our CSS.
18
10-10-2019
19
20
10-10-2019
21
JAVASCRIPT
• JavaScript, often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the ECMAScript
specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-
class functions.
• First appeared: December 4, 1995; 23 years ago
• Stable release: ECMAScript 2018 / June 2018; 1 year ago
• Preview release: ECMAScript 2019
• Typing discipline: Dynamic, duck
• Developer: Netscape Communications Corporation, Mozilla Foundation, Ecma International
• Designed by: Brendan Eich
22
10-10-2019
WHY JAVASCRIPT ?
23
24
10-10-2019
JAVASCRIPT SYNTAX
JavaScript syntax is the set of rules, how JavaScript programs are constructed:
var x, y, z; // How to declare variables
x = 5; y = 6; // How to assign values
z = x + y; // How to compute values
</body>
</html>
25
26
10-10-2019
27
28
10-10-2019
29
THANK YOU
30