Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS

HTML Introduction
• HTML stands for Hyper Text Markup Language.
• HTML describes the structure of Web pages using
markup.
• HTML elements are represented by tags.
• Browsers do not display the HTML tags, but use them
to render the content of the page.

HTML Editors
• Web pages can be created and modified by using
professional HTML editors.
• We believe using a simple text editor is a good way
to learn HTML.
• There are Many HTML Editors .
like Notepad , Notepad++.

Save and Run HTML Page
• Windows 8 or later:
Open the Start Screen (the window symbol at the
bottom left on your screen). Type Notepad.
• Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
• Save the file on your computer. Select File > Save as
in the Notepad menu.
• Name the file "index.htm“ or index.html
• Double click on the file and Run.

HTML Structure
<html>
<head>
</head>
<body>
Hello World
</body>
</html>

HTML Elements
• An HTML element usually consists of a start tag and
end tag, with the content inserted in between:
<tagname>Content</tagname>
• The HTML element is everything from the start tag to
the end tag:
<p>My first paragraph.</p>
<b>Hello World</b>

HTML Elements
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML Headings
• Headings are defined with the <h1> to <h6> tags.
<h1>This is heading 1</h1>

HTML Paragraphs
• The HTML <p> element defines a paragraph:
• Example :
<p>paragraph-1</p>
<p>paragraph-2</p>
<p>paragraph-3</p>
<p>paragraph-4</p>

HTML Links
• The href attribute specifies the destination address
(https://www.google.com/) of the link.
• Clicking on the link text will send you to the specified
address.
<a href=“http://www.google.com">Google</a>

HTML Links
Local Links
A local link (link to the same web site) is
specified with a relative URL (without
http://www....)
<a href=“home.html">Home Page</a>

HTML Images
• In HTML, images are defined with the <img> tag.
• The <img> tag is empty, it contains attributes only,
and does not have a closing tag.
• The src attribute specifies the URL (web address) of
the image:
<img src="url" alt="some_text">

HTML Images
• The alt attribute provides an alternate text for
an image, if the user for some reason cannot
view it (because of slow connection, an error
in the src attribute, or if the user uses a screen
reader).
• If a browser cannot find an image, it will
display the value of the alt attribute.

HTML Tables
• An HTML table is defined with the <table> tag.
• Each table row is defined with the <tr> tag. A
table header is defined with the <th> tag. By
default, table headings are bold and centered.
A table data/cell is defined with the <td> tag.

HTML Tables
First Name Last Name Age
First Name 1 Last Name 1 50

HTML Table Border
• HTML Table - Adding a Border
• If you do not specify a border for the table, it will be
displayed without borders.
• A border is set using the CSS border property:
<table border=“1”>
</table>

HTML Lists
Unordered HTML List
• An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
• The list items will be marked with bullets
(small black circles) by default:

Unordered List
Value Description
disc
Sets the list item marker to
a bullet (default)
circle
a circle
square
a square
none
The list items will not be
marked

HTML Lists
Ordered HTML List
• An ordered list starts with the <ol> tag. Each
list item starts with the <li> tag.
• The list items will be marked with numbers by
default:

Ordered Lists
Type Description
type="1" The list items will be numbered with
numbers (default)
type="A" The list items will be numbered with
uppercase letters
type="a" The list items will be numbered with
lowercase letters
type="I" The list items will be numbered with
uppercase roman numbers
type="i" The list items will be numbered with
lowercase roman numbers

HTML File Paths
• A file path describes the location of a file in a
web site's folder structure.
• File paths are used when linking to external
files like:
– Web pages
– Images
– Style sheets
– JavaScript

The HTML <head> Element
• The <head> element is a container for
metadata (data about data) and is placed
between the <html> tag and the <body> tag.
• HTML metadata is data about the HTML
document. Metadata is not displayed.
• Metadata typically define the document title,
character set, styles, links, scripts, and other
meta information.

The HTML <title> Element
The <title> element:
• Defines a title in the browser tab.
• Provides a title for the page when it is added
to Bookmark.
• Displays a title for the page in search engine
results.

The HTML <meta> Element
• <meta charset="UTF-8">
• <meta name="description" content=“Web
Design Services in Ahmedabad">
• <meta name="keywords" content="HTML,
CSS, XML, JavaScript">
• <meta name="author" content=“name">

HTML Form Elements
 <input>
• The <input> element is the most important
form element.
• The <input> element can be displayed in
several ways, depending on the type attribute

HTML Form Elements
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio">
Defines a radio button (for selecting one
of many choices)
<input type=“checkbox”> For Selecting Many Choices
<input type=“file”> Browse File From Device.
<input type="submit">
Defines a submit button (for submitting
the form)

HTML Form Elements
 <select>
• The <select> element defines a drop-down list:
– The <option> elements defines an option that can
be selected.
– By default, the first item in the drop-down list is
selected.

HTML Form Elements
 <textarea>
• The <textarea> element defines a multi-line
input field (a text area):
– The rows attribute specifies the visible number of
lines in a text area.
– The cols attribute specifies the visible width of a
text area.

HTML Input Attributes
 value Attribute
• The value attribute specifies the initial value
for an input field:
Syntax:
<input type="text" name="firstname"
value=“demo">

 readonly Attribute
• The readonly attribute specifies that the input
field is read only (cannot be changed):
Syntax:
value=“hello" readonly>

 disabled Attribute
• The disabled attribute specifies that the input
field is disabled.
Syntax:
value=“hello" disabled>

 maxlength Attribute
• The maxlength attribute specifies the
maximum allowed length for the input field.
Syntax:
<input type="text" name="firstname“
maxlength="10">

 Height and Width Attribute
<input type="image" src="img_submit.gif"
width="48" height="48">

The form action Attribute
• The form action attribute specifies the URL of
a file that will process the input control when
the form is submitted.
• The form action attribute is used with
type="submit" and type="image".
Syntax:
<form action=“index2.html">
</form>

The form method Attribute
• The form method attribute defines the HTTP
method for sending form-data to the action
URL.
<form action=“index.html" method="get">
</form>

The pattern Attribute
• The pattern attribute specifies a regular
expression that the <input> element's value is
checked against.
• The pattern attribute works with the following
input types: text, Url , email, and password.
<input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter
country code">

The placeholder Attribute
• The hint is displayed in the input field before
the user enters a value.
Syntax:
<input type="text" name="fname"
placeholder="First name">

The required Attribute
• The required attribute specifies that an input
field must be filled out before submitting the
form.
Syntax:
Username: <input type="text"
name="usrname" required>

The “step” attribute
• Example:
– if step="3", legal numbers could be -3, 0, 3, 6, etc.
• Syntax:
<input type="number" name="points"
step="3">

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.

Types of CSS
• CSS can be added to HTML elements in 3 ways:
– Inline - by using the style attribute in HTML elements.
– Internal - by using a <style> element in the <head>
section.
– External - by using an external CSS file.
• The most common way to add CSS, is to keep the
styles in separate CSS files. However, here we will
use inline and internal styling, because this is
easier to demonstrate, and easier for you to try it
yourself.

Inline CSS
Example:
• An inline CSS is used to apply a unique style to
a single HTML element.
• An inline CSS uses the style attribute of an
HTML element.
<h1 style="color:blue;">This is a Blue
Heading</h1>

Internal CSS
• An internal CSS is used to define a style for a
single HTML page.
• An internal CSS is defined in the <head>
section of an HTML page, within a <style>
element:

External CSS
• An external style sheet is used to define the
style for many HTML pages.
• With an external style sheet, you can change
the look of an entire web site, by changing
one file!
• To use an external style sheet, add a link to it
in the <head> section of the HTML page:

CSS Colors
Colors set by using color names:
Color Name
Red
Green
Blue
Orange
Yellow
Cyan
Black

CSS Properties
Background Color
body {
background-color: green;
}
Background Image
body {
background-image: url("paper.gif");
}

CSS Properties
Background Image – no repeat
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Border
p{
border:1px solid black;
}

CSS Properties
 CSS Margins
• The CSS margin properties are used to
generate space around elements.
• The margin properties set the size of the white
space outside the border.
• With CSS, you have full control over the
margins. There are CSS properties for setting
the margin for each side of an element (top,
right, bottom, and left).

CSS Properties
 Margin - Individual Sides
• CSS has properties for specifying the margin for
each side of an element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

CSS Properties
 Margin - Shorthand Property
• o shorten the code, it is possible to specify all
the margin properties in one property.
• The margin property is a shorthand property
for the following individual margin properties:
p {
margin: 100px 150px 100px 80px;
}

CSS Properties
 Margin auto Property
p
{
margin:0 auto;
}

CSS Properties
 CSS Padding
• The CSS padding properties are used to generate space
around content.
 Padding - Individual Sides
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

CSS Properties
 Setting height and width
• The height and width properties are used to
set the height and width of an element.
• The height and width can be set to auto (this
is default. Means that the browser calculates
the height and width), or be specified in
length values, like px, cm, etc., or in percent
(%) of the containing block.

CSS Properties
 Text Color
• The color property is used to set the color of
the text.
body {
color: blue;
}

CSS Properties
 Text Alignment
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
div {
text-align: justify;
}

CSS Properties
 Text Decoration
h1 {
text-decoration: overline;
}
h3 {
text-decoration: underline;
}
h1 {
text-shadow: 3px 2px red;
}

CSS Properties
 Text Transformation
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}

CSS Properties
 Text Shadow
• The text-shadow property adds shadow to text.
• The following example specifies the position of the
horizontal shadow (3px), the position of the vertical
shadow (2px) and the color of the shadow (red):
h1 {
text-shadow: 3px 2px red;
}

CSS Properties
• Links can be styled with any CSS property.
a {
color:blue;
}

CSS Properties
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

CSS Properties
 CSS Forms
input {
width: 100%;
}
 Individual input field
• input[type=text] - will only select text fields
• input[type=password] - will only select
password fields

CSS Properties
 Bordered Inputs
• Use the border property to change the border
size and color, and use the border-radius
property to add rounded corners:
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}

CSS Properties
 Colored Inputs
• Use the background-color property to add a
background color to the input, and the color
property to change the text color:
input[type=text]
{
background-color: blue;
color: white;
}

CSS Properties
 Focused Inputs
• input[type=text]:focus
{
background-color:blue;
}
• input[type=text]:focus
{
border: 3px solid #555;
}

CSS Properties
 Input with icon/image
input[type=text]
{
background-image: url('searchicon.png');
}

JavaScript
• JavaScript is the programming language of HTML
and the Web.
• JavaScript is easy to learn.
• JavaScript is Case Sensitive
Why Study JavaScript?
• JavaScript is one of the 3 languages all web
developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages

JavaScript
 The <script> Tag
• In HTML, JavaScript code must be inserted
between <script> and </script> tag
<script>
document.getElementById("demo").innerHT
ML = "My First JavaScript";
</script>

JavaScript
 JavaScript Can Change HTML Content
• One of many JavaScript HTML methods is
getElementById().
• This example uses the method to "find" an
HTML element (with id="demo") and changes
the element content (innerHTML) to "Hello
JavaScript":

JavaScript
 JavaScript Variables
• In a programming language, variables are
used to store data values.
• JavaScript uses the var keyword to declare
variables.
Example:
var x;
x = 6;

Operators -JavaScript
Arithmetic Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement

Operators-JavaScript
Assignment Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

Comparison Operator Description
== equal to
=== equal value and equal type
!= not equal
> greater than
< less than
>= greater than or equal to
<= less than or equal to

JavaScript
 For Loop
for(i=1;i<=10;i++)
{
document.getElementById("demo").innerHTML+=i;
}
 While Loop
var i=1;
while(i<=10)
{
document.getElementById("demo").innerHTML+=i;
i++;
}

 JavaScript String Operators
The + operator can also be used to add (concatenate) strings.
txt1 = “hello";
txt2 = “world";
txt3 = txt1 + " " + txt2;

Logical Operators Description
&& logical and
|| logical or

Bootstrap
• Bootstrap is the most popular HTML, CSS, and
JavaScript framework for developing
responsive, mobile-first web sites.
• Bootstrap is completely free to download and
use!
• Bootstrap is open source. It's hosted,
developed, and maintained on GitHub.

Bootstrap
 Containers
<div class="container"> ... </div>
<div class="container-fluid"> ... </div>
 Grid options
1 Row=12 Column
.col-xs Use for Extra small Devices(Mobile).
.col-sm use for small Devices(Tablet).
.col-md Use for Medium Devices(Desktop).
.col-lg Use for Large Devices(Desktop).

Bootstrap
 Headings
<h1>h1. Bootstrap heading</h1>

Bootstrap
 Headings
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h4>h4. Bootstrap heading
<small>Secondary text</small></h4>

Bootstrap
 Alignment classes
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

Bootstrap
 Transformation classes
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased
text.</p>
<p class="text-capitalize">Capitalized text.</p>

Bootstrap
 Tables
<table class=“table”>
<tr>
<td>Username</td>
<td>Password</td>
</tr>
</table>

Bootstrap
 Table Bordered
<table class=“table table-bordered”>
<tr>
<td>Username</td>
<td>Password</td>
</tr>
</table>

Bootstrap
 Table Hover
<table class=“table table-hover”>
<tr>
<td>Username</td>
<td>Password</td>
</tr>

Bootstrap
 Responsive Table
<div class=“table-responsive”>
<table class=“table”>
<tr>
<td>username</td>
<td>password</td>
</tr>
</table>
</div>

Bootstrap
Class Description
.active
Applies the hover color to a particular row
or cell
.success Indicates a successful or positive action
.info
Indicates a neutral informative change or
action
.warning
Indicates a warning that might need
attention
.danger
Indicates a dangerous or potentially
negative action

Bootstrap
 Button
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Bootstrap
 Text Color Classes
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Bootstrap
 Background Color Classes
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Bootstrap
 Form Control
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control">
</div>
<label>Gender</label>
<label class="radio-inline"><input type="radio">Male</label>
<label class="radio-inline"><input type="radio">Female</label>
</div>
<label>Education</label>
<label class="checkbox-inline"><input type="checkbox">Male</label>
<label class="checkbox-inline"><input type="checkbox">Female</label>
</div>

Bootstrap
 Responsive images
<img src="..." class="img-responsive"
alt="Responsive image">
 Image shapes
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

JSON
 JSON - Introduction
• JSON: JavaScript Object Notation.
• JSON is a syntax for storing and exchanging
data.
• JSON is text.

JSON
 JSON Data - A Name and a Value
• JSON data is written as name/value pairs.
• A name/value pair consists of a field name (in
double quotes), followed by a colon, followed
by a value:

JSON
 Data Types
 JSON Strings
– Strings in JSON must be written in double quotes.
Example:
{ "name":"John" }

JSON
 Data Types
 JSON Numbers
– Numbers in JSON must be an integer or a floating
point.
Example:
{ "age":30 }

JSON Objects
Syntax:
Example
{ "name":"John", "age":30, "car":null }

JSON
 Accessing Object Values
• We can access the object values by using dot
(.) notation.
Example:
myObj = { "name":"John", "age":30, "car":null };
x = myObj.name;

JSON
 Arrays
Example:
[ "Ford", "BMW", "Fiat" ]
 Accessing Array Values
• You access the array values by using the index number:
Example:
x = myObj.cars[0];

JSON For Loop
Syntax:
var x;
var z="";
x={"username":["two","three"],"password":"admin@123"};
for(i=0;i<x.username.length;i++)
{
z+=x.username[i]+"<br>";
}
document.getElementById("demo").innerHTML=z;

JSON
 JSON.parse()
Syntax:
JSON.parse('{ "name":"John", "age":30,"city":"New
York"}');

AngularJS
• AngularJS extends HTML with new attributes.
• AngularJS is perfect for Single Page Applications (SPAs).
• AngularJS is easy to learn.
• AngularJS is a JavaScript framework. It is a library
written in JavaScript.
• AngularJS is distributed as a JavaScript file, and can be
added to a web page with a script tag:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.
6.4/angular.min.js"></script>

AngularJS
• AngularJS starts automatically when the web page has
loaded.
• The ng-app directive defines an AngularJS application.
• The ng-model directive binds the value of HTML
controls (input, select, textarea) to application data.
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

AngularJS
 ng-model
Example:
<div ng-app="">
<input type="text" ng-model="user">
{{user}}
</div>

AngularJS
 ng-init
Syntax:
<div ng-app="">
<input type="text"
ng-init="user=‘admin'; pass='admin@123'">
{{user}}
</div>

AngularJS
 AngularJS Objects
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
 AngularJS Arrays
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>

AngularJS
 ng-repeat
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>
</div>

Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS

In this document

More Related Content

What's hot

Similar to Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS

More from Deepak Upadhyay

Recently uploaded

Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS