TECH INN SOLUTIONS

WEB DEVELOPMENT

HTML

ROOBA AHMAD

Starting date

25-08-18 1899 -19

Languages In this section
1:- html 2:- Css 3:- bootstrap 4:- JavaScript languages are:
5:- jquery 6:- php 7:- MySQL 8:- laravel
☺ HTML
9:- code igniter 10:- c++ 11:- JSP 12:-python ☺ CSS
13:- data structures 14:- Java Console Based Application ☺ Bootstr
15:- Angular js 16:- object oriented programming ap
17:-Asp.Net 18:- Java Swing Applications ☺ JavaScr
19:- Android development ipt
Gujranwala
 HTML
HTML-> Hypertext Markup Language

There are 6 headings used in HTML as h1, h2, h3, h4, h5, h6.

H1 has the largest font size.

What is tag?
Anything that is enclosed in < > is called tag. They are used to show data
on the page. There are two types of tags:

Inner closed tag: <img/>

Outer closed tag: <b></b>

What is attributes?
Attributes provide additional information related to the tag.

For example : <img height="200" width="34">

Height and width are attributes.

What is the difference between div and p?

Both are same but p gives as margin from the top of the page. But div
didn’t.

Span: span is write different line in one line.

What are comments?

We can write comments but compiler will not execute them.

There are different types of comments like single, double, multiline

comments.

By pressing ctrl + shift + / we can add comments in editor.

What is Editor?
Software where we can write a piece of code to execute is called editor.

We can use sublime text for the editing. Sublime text contains different
languages like c++, PHP, java, JavaScript, etc.

Xamp is use to compile PHP language. Without this we can compile CSS,
JavaScript, html etc.

Install sublime>> install package control from tool>> command palette.

Then install Emmet

Important tags:

Tag Use Attribute

Video Use to add video Control, autoplay
audio Use to add a audio Control, autoplay
Pre To show data beautiful
Textarea To enter large data like address
Iframe For link of video Control, autoplay
Hr To add a line
Label use to click text like genders
Select is use for drop down menu to select
Options Use for options
Tags for font style:

Tags Uses
<i> Use to make word in italic
<sup> To superscripted the word
<b> Use to bold a word sentence or paragraph.
<mark> To highlight a word
<del> To remove or delete text.
<u> To underline text
<sub> To subscript a word
<br> Use to break line
<img src="" alt=""> alt* agr pic na show ho to iska likha a jata hai

List: Three are two types of list.

 Ordered list: <ol> Types

 123… by default
 abc…, ABC...
 I,ii,iii…..,I,II,III,….
 none
 Unordered list:<ul>
 Disc by default
 Circle
 Square
 None

How to write?
<ul type=”circle”></ul>

Agr Kisi cheez ko zyada bar likhna ho to li*5 and press tab

Also ul>li*5 etc...., as u want.

Font:

Font is a tag also has three attributes.

 Size >> any no with px

 Face>> font style or writing
 Color

TABLE
Tags of table:

Table, Thead, tbody, tr, th, td

Attributes:
Border: use for thickness in px

Cell padding: use for the internal space of a cell.

Cell spacing: use for the outer space of a cell.

Colspan: use to break Column.

Rowspan: use to break row.

What is lorem?

Lorem is a dummy paragraph. Developers use it while making websites.

FORMS
Why we use forms?
Forms are us to extract data from user or client. We use input tag to enter
data.

Use:

<input type=" " name=" " value=" " id=" " placeholder=" "
autofocus=" " required=" " class="" disabled>

Attributes of input tag:

Type of data
☺ Text
☺ Number
☺ Radio
 ☺ Submit
☺ Password
☺ Date
☺ Checkbox
☺ File
☺ Multiple[] use to select multiple files
☺ Range
☺ Hidden used for hidden text

Attributes Use
Name must unique related to input field
Checked add check for automatically like for any 1 gender
Class editing in Css
Id Must unique relate to input field use in js.
Value to show anything like enter name better to use in future
placeholder use placeholder instead of value
autofocus directly cursor ko focus krwata hai
Required must enter data
Title cursor k sath ata hai
Min minimum no k liye
Max maximum no k liye
Download Use to download file or picture.
disabled title To disable a button or anything
Value Use to enter value automatically

What is label tag?

Label tag is use to click on the text or data in the label filed for example in
gender if you click on male word and it is between the label function then it
will click on it.

Why we use action tag in forms?

Action tag is use to send user to another page.
 Box modeling
Css started
Css stand for: Cascading style sheet

Use it with Css external file or can also use it with style tag in html file. Use
for editing.

For example to add border, background color or any pic.

How to attach a Css file?

<link rel="stylesheet" type="text/Css" href="*"> *= file

name with ext.

Brackets []:
It is a SW that helps to show editing on the right side of the sublime. But
sublime is the best option. Brackets are just to understand the working.

Block:
If two different lines are written in different lines but after on screen it will
show only one line. But inline and inline-block write on different lines. Block
pori line py border deta hai.

Inline and Inline-block:

Inline-block mn jitna data ho us py margin and border automatically deta
hai.

Inline padding ni deta top py or margin to and bottom sy allow ni krti.

How to add border in Css?

*{border:*’px *’’ *’’’ ;}

* Tag name h1, p, div or etc. *’ thickness of the border

*’’ style that is compulsory to write *’’’ color name or code started with #

Different style of border:

1) dotted 2) double 3) solid
4) Dashed 5) groove 6) outset
7) Inset 8) ridge 9) hidden
10) None

Background:
Body {background: URL (*); background-size: cover ;}

* file name with extension

For small pictures we use no repeat after name of the pic at the place of
cover we can use:

(100vw, 100vh)

Some styles and their uses in Css

Styles Uses
Margin margin is used for the margin outside the thing
Padding padding is use for inside the image

Border-radius Use to round the corner.

:hover Used when cursor move on it and it change its

appearance.
Text decoration Use to remove underline text

Transition Helps to show mouse color slowly

 Bootstrap
Bootstrap helps to do work in large amount but in less code.it helps to edit
and make it beautiful. It is a library file.

How to link it with html?

Search js cdn, Css cdn, jquery cdn and add it after title. With sequence

1) Css -> 2) js -> 3) jquery.

Meta: Meta browser ko understand krany mn help krta hai use it when site
should be responsive or to show data on mobile screen or on different
screens.

How to use Meta tag?

<meta name="viewport" content="width=device-width, initial-
scale=1">

Colors: Bootstrap has some fixed beautiful colors.

1) Primary 2) danger 3)success

4) info 5) warning

Buttons: Agr kisi anchor mn class k sath btn lgaya jay to button ki trha
show krta hai but uska background color ni deta btn-primary or primary ki
jgha py koi or color name likhny sy us color ka background a jay ga. btn-lg
lgany sy button large hota hai or block sy pori line py a jay ga.

&nbsp: use to give space.

Table:
<table class="table table-bordered table-hover"> helps to show
stylish

<div class="container"> both helps to show data in center with

<div class="jumbotron"> grey background

Form: Yeh built in hian inko aisy hi likhty hain.

<table class="table” class="form-control" > helps to show stylish

<nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<a class="nav navbar-brand" href="#">FIRST WEBSITE</a>

For menu bar: <ul class=" nav navbar-nav">

Active: use active to show open menu.

To show-: this line three times using anchor we can show buttons.

<button class=" navbar-toggle" data-toggle="collapse" data-

target="#mynavbar">

<span class="icon-bar"></span> write it 3 times

</button>

Glyph icons: jo choti pic lgi hoti hai home ya YouTube wghera py lgi hoti
hain wo glyph icons khlati hain founded from font awesome site.

Columns: it has 12 columns. Jesy k tech inn ki site py courses hain. Is k

liye div ki class mn container then next div mn row and then

<div class="col-lg-4 col-md-6" > lg, xl, md, fm, xxl for devices

4 or 6 ki jagha py koi bhi number likh skty hain depend on your choice
between 1 to 12.it have 6 devices:

1) Lg 2)xlg 3)md

4) fm 5) xxl 6) xl

Images: Three shapes in class ="img-rounded".

  Img-rounded 2) img-circle 3)img-thumbnail

JavaScript
Introduction: data type->Var
Extension is (.js).it is like cpp. Netscape is a company who invented
JavaScript in 1991.firstly it is considered as small language.it started to use
mostly in 1997 and onwards. Netscape navigator (is a browser) used in
previous years before 2000. JavaScript was made to speed up Netscape
navigator. In 2012 it started to use as a scripting language. and now 2015
to onwards Google buys JavaScript. JS is known as event driven language.

Frame works:
It has different frame works.

1) JavaScript core 2) JavaScript jquery

3) angular js 4) node.js

Uses:
☺ Integrates the rules of cpp into our webpages.
☺ To make webpages dynamic and interactive.
☺ To resolve html bugs.

How to attach JS with html?

<script src="*"></script> * file name

How to print data?

 Alert (); Appear as an alert box.
 document. Write(); appear in page
 console.log(); appear in console as inspect
 document.getElementById().innerHTML""; use to change data

Method 4 for example:

agr h1 hai or us mn hello likha hai or h1 ki heading bhi hai to ye file se
element lyga jiski id bhi to usko change krwa dyga.

Differentiate between web application and website?

Website Web application

It requires any browser for work. It doesn’t require browser for work.
A website use to read only. Application is use to enter data.

Basics of input:
By form:

By prompt:

+ sign has three functions in JS.

 Use for concatenation

 Use as sum sign
 Use as stream extraction operator

Conversion string to int we use parseInt(x);

Functions:
Functions are same as cpp.in cpp we write void but in js we use function
keyword before the function name.

Array:
method: Var x= []; or may be any type of data

Indexing:
[2, 3, 4, 5, 6]

Is mn array khali bhi bna I jaskti hai or indexing bhi kijaskti hai ya data bhi
diya jaskta hai.is mn locations bhi bnti hain jo k 0 sy start hoti hain q k array
ka index 0 sy start hota hai. x.length is use for all to show total no of
indexes in array.

Examples of array:
Example 1:

2d arrays:
var data = ["rehan"," Feisal”, Umar", ["Sami", "Nouman",
"Ahsan"] [true, false, 0.12]];

so to print Nouman we will write.

Console.log ([3] [1]);

Example 2:

var data = ["rehan"," Feisal”, Umar", ["Sami”, Nouman",

"Ahsan", [2.12, 3.24, 4.56]], [true, false, 0.12]];

to print 4.56 we will write:

Console.log ([3] [3] [2]);

Data locations:
Var data = ["rehan"," Feisal”, Umar"];

Var data [3] = "Asad"; it will add Asad on the 4th index in array

Array full print krany py data mn Charon names add ho jaingy

Push method:
This method is use to add any element in array after the last one. Even we
don’t need to remember the locations to enter new element.

Example:

Var data = ["rehan"," Feisal”, Umar"];

 data. Push ("Ali");

data. Push ("Saad");

console.log (data);

it will print all the names including Ali and Saad.

Pop method:

This method is used to remove the last element from array. It returns
another copy of the removed element.

Example:

var data = ["rehan"," Feisal”, Umar"];

data.pop ();

console.log (data);

it will print rehan and Feisal in array.

If you want the copy of the popped element then use:

Var x= data.pop ();

TEST:
var data = ["rehan"," Feisal", "Umar", "Sami", "Nouman"];

var x =data.pop ();

var x = data.pop ();

data [0] =x;

for (var i = 0; i < data.length; i++) {

console.log (data[i]);

console.log ("popped element is "+ x);

Write output of the program.

Output:

Sami

Feisal

Umar

popped element is Sami

Splice method:
var data = ["rehan"," Feisal", "Umar", "Sami", "Nouman"];

data. Splice (1, 2); 1st value is location and 2nd no of element splice

Output:

[" Feisal", "Umar"]

Difference between splice and pop?

Splice Pop
Print simple in characters Prints in array
Example “Ali” Example [“Ali”]
Data khin sy bhi remove kr skty hain Remove only last element
Split method:
Use to convert names into array. Array.split (“,”);

var data = "rehan"," Feisal", "Umar", "Sami", "Nouman";

Output:

["rehan"," Feisal", "Umar", "Sami", "and Nouman"];

test
Question 1:
Var x = [2, 3, 4, 5, 6, 7, 8, 9, 10];

Var y=x.splice (1, 3);

y=x.splice (0, 2);

console.log(y);

output:

[2, 6]

Question 2:

var x = [2, 3, 4, 5, 6, 7, 8, 9, 10];

var p= x.pop (); x= [2, 3, 4, 5, 6, 7, 8, 9];

var j= x.splice(0,3); j=[2,3,4]; x=[5,6,7,8,9];

j.push (p); j= [2, 3, 4, 10]; x= [5, 6, 7, 8, 9];

x.push (j); x= [5, 6, 7, 8, 9, [2, 3, 4, 10]];

console.log(x);

Output:

x= [5, 6, 7, 8, 9, [2, 3, 4, 10]];