PenPocketNote

Monday, 4 November 2019

SEO introduction

What is SEO?

SEO(Search Engine Optimization ) is a technique that helps to bring the Website on top.
Seo depends on the Keyword .

Keyword: User Type Some word in google that word Called Keyword

Keyword

SEO Use

More Traffic on Website.
Easy way to show Bussines to brands.

SEO Process

Strategy: Target the Keyword which one we want to bring top.
Analysis: Analysis with Competitor Website
Completion: Site Structure recommendations like meta tag, loading Time, Keywords.
Submission: Site Link Submission, or link Directory Submission
Link Building: link relevant site blog and article Submission, Backlink Submission

Type of SEO

Black Hat SEO: This SEO does not Follow all rules, it is unethical SEO, so that it takes quick time to grow the ranking.
White Hat SEO: This SEO Follow all rules, it is ethical and Organic SEO, so that it takes time to grow the ranking.
Gray Hat SEO: Combination of white and black SEO.

On-Page Optimization:

Keyword Analysis
Competition website Analysis
Tag Optimization
URL

Thursday, 24 October 2019

Diwali Greetings using Html and Css

<!Doctype html>
<html>
<head>
<title> Diwali Celibration</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />
<style>
*{
margin:0px;
padding:0px;
}
body{
background:#000;
}
.main{
width:100%;
height:100vh'
}
.main h1{
text-align:center;
color:red;
}
.main hr{
width:30%;
height:5px;
background:red;
position:absolute;
left:35%;
top:15%;
border:none;
}
.diwali{
display:flex;
display-direction:row;
align-items:center;
justify-content:center;
text-align:center;
width:100%;
height:350px;
}

.content-note{
color: #ffff57eb;
font-size:22px;
}

</style>

</head>
<body>
<div class="main">
<br> <br>
<h1 class="animated bounce infinite slow"> ।।..आप सभी को दिवाली 2019 की हार्दिक शुभकामनाएं..।। </h1>
<hr>
<div>
<br/>
</div>
<div class="diwali">

<div class="content-note">
<h2>सुख समृधि आपको मिले इस दीवाली पर,<br/>
दुख से मुक्ति मिले इस दीवाली पर,<br/>
माँ लक्ष्मी का आशीर्वाद हो आपके साथ <br/>
और लाखों खुशिया मिले इस दीवाली पर.<br/>
! शुभ दीवाली ! </h2>
<p style="text-align:right"> Rajashree Tripathy</p>
</div>

<div class="right-side" >
<img src="image/ro1.gif" class="rocket1" width="100px;">
</div>
</div>
</div>
</body>
</html>

Thursday, 10 October 2019

Count Timmer use in Java Script

Count timer

<!Doctype html>
<html>
<head>
<title> Count timer </title>
<style>
*{
margin:0px;
padding:0px;
}
div{
width:100%;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background-image:linear-gradient(#db68e2,#1cd6ff);
}
p{
height: 100px;
width: 700px;
background-image: linear-gradient(#9C27B0,#9C27B0);
color: #f3f3f7;
text-align: center;
font-size: 80px;
}
h1{
color:#fff;
font-family:cursive;
}
</style>
</head>
<body>
<div>
<h1> Count Down Start for New Year</h1>
<p id="time"></p>
</div>
<script>

var date = new Date("jan 1,2020 12:00:00").getTime();
var x = setInterval(function(){
var current = new Date().getTime();
var rest = date - current;
var days = Math.floor(rest / (1000*60*60*24));
var hours = Math.floor((rest % (1000*60*60*24)) / (1000*60*60));
var min = Math.floor((rest % (1000*60*60)) / (1000*60));
var sec = Math.floor((rest % (1000*60)) / 1000);
document.getElementById("time").innerHTML = days+"d," + hours+"h:,"+min+"m:,"+sec+"s"
},1000);
</script>
</body>
</html>

Friday, 27 September 2019

Rain Effect in CSS

Take a look at how to make a raindrops on Background, using HTML and CSS.

Rain effect

Source Code:

<!Doctype html>
<html>
<head>
<title> Rain Effect</title>
<style>
*{
margin:0px;
padding:0px;
}
.maindiv{
width:100%;
height:100vh;
background-image:url("bg.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
}
.main{
height:100vh;
background-image:url("rain.png");
animation:main .4s linear infinite;
}
@keyframes main{
from{
background-position:0% 0%;
}
to{
background-position: 40% 100%;
}
</style>
</head>
<body>
<div class="maindiv">
<div class="main">
</div>
</div>

</body>

Thursday, 26 September 2019

Zoom Effect in CSS

There are many different ways we can add a special effects to the web pages and one of them is adding a Zoom Effect on Images when user hovers over the images. That means Image on mouse hover then the Zoom effect Will come .

Zoom Effect in CSS

so here we are using transform: scale(1.5);

<!Doctype html>
<html>
<head>
<title> Zoom Effect </title>
<style>
body{
height: 100vh;
display:flex;
justify-content:center;
align-items:center;
background: #5d6e73;
}
div{
height : 300px;
width:500px;
border: 10px solid #fff;
overflow:hidden;
}
img{
height:100%;
width:100%;
transition: all 1s;
}
img:hover{
transform: scale(1.5);
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
</div>
</body>

</html>

Thursday, 11 July 2019

How to add txt file in a folder using node js

var fs = require('fs');
fs.writeFileSync('notes.txt',Hello Iam Rajashree);

Go to cmd prompt < node app.js

Click notes.txt file you View the output in notes.txt

Append a message in notes.txt

var fs = require('fs');

fs.appendFileSync('notes.txt', '|| 'Thanks for Watching ');

Out put

Tuesday, 2 July 2019

How to Create server in node js

step1: Create one folder nodeserver > install package.json
step2: Create new file index.js ==> in index.js type the following code

const http = require('http');
const hostname ="localhost"';
const port = 3000;
const server = http.createServer((req,res) => {
console.log(req.headers);
res.statusCode = 200;
res.setHeader('Content-Type','text/html');
res.end('<html><body><h1> Server Connect </h1></body></html>');

});
server.listen(port,hostname,() ==> {
console.log(`server running at http://${hostname}:${port}');
});