Simplified Computer Science Department: March 2016

Creating a website from ready-made software's

There are 5 steps in creating a website
1) By a Domain --from Godaddy ,Bigrock etc etc. ( I suggest Godaddy)

2) Chose your Hosting--Godaddy,Wordpress,Hostinger etc etc. (I suggest free hosting from hostinger)

3) If not buying a hosting from wordpress then install wordpress in cloud of your hosting and there only set a username and password for your wordpress account .
watch a video given below

4)Link your hosting server (gernally called as name server) to your domain account
watch a video given below

5) Wait for 2-3 hours your website will be activated .Just check your activation at
www.xyz.com/wp-admin.Now enter your wordpress username and pass that you have set while installing wordpress in your hosting

Creating a website from Scratch

Here i can help you by giving my scratch material rest is your dedication and creativity

Software you are required to install

1)notepad ++

2)wamp server-if ur pc is 64 bit

xampp server-if ut pc is 32 bit . Little difficult to get

3)Bootstrap libraries--which should be present in the same folder where you are creating your html and css file.i will tell about these two files in future text.

The Things you Should Know

Html

it is the basic language that you have learnt in your 10th class .

Given are the basic codes that you can type and check. Now you will also ask why should i learn html as now there is a time of html 5 . Now my friend as far as i reseached i get html 5 is nothing but the html only with only one major difference which is that in html you need to install many plugins to interact video and audio's with your html page .but html5 only makes linking these video's and audio's with the simple <video> and <audio> tags with many other cool functionalities also.

<html>
<head>
<title>form</title>
<body>
<form>
<h1 align="center">welcome to simplified theory survey</h1>
<img src ="
C:\Users\Himanshu\Desktop\simplified theory.PNG" alt="sorry for inconvinence" height="250" width="200">
<p>what is your name?</p>
<input type="text" name="name"><br>
<p>what is your gender?</p>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
<br>
<p>which language do u know?</p> <--!check boxes are for multiple select-->
<h3><u><i>which language do u know?</u></i></h3>
<input type="checkbox" name="language" value="java">java<br>
<input type="checkbox" name="language" value="c">c<br>
<br>
<input type="submit" name="Submit" value="submit"><br>
<a href="link.html">click here to open link</a>
</body>
</head>
</html>

Must change image link before using this code

Now what is the css file

CSS is a file that is the kind of facial Makeup for your html file.i.e u can have a beutiful borders and Some More Cool Graphical Sort of things with your css file.

The given below file is excercise1.html file

<html>
<head>
<title>Excercise 1</title>
<link
rel="stylesheet"
href="excercise3.css"
type="text/css"
media="all"
/>
<body>
<h1>welcome to Excercise 1 page</h1>
<h2>welcome to Excercise 1 page</h2>
<h3>welcome to Excercise 1 page</h3>
<ul>
<li>thankyou</li>
<ol type="a">
<li> this is a no.1</li>
<li> this is a no.2</li>
</ol>
<li>welcome</li>
</ul>
<table border="1">
<tr>
<td><a href="link.html">click here</a>
</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<a href="link.html">click here</a>
</body>
</head>
</html>

In above code .This code i.e

<link
rel="stylesheet"
href="excercise3.css"
type="text/css"
media="all"
/>

is linking your that html file with the css file "excercise3.css" . which is as follow

body
{
background-color:pink;
border-style:solid;
border-width:5px;
padding-top:50px;
padding-right:20px;
padding-left:30px;
background-image:url("file:///C:/Users/Himanshu/Desktop/simplified%20theory.PNG");
}
li
{
font-family:"Times New Romon";
font-size:25px;
margin-left:100px;
color:red
}

Now see in this css file you are giving property of all material under body tag some features like

You are saying that background color should be pink,border style should be solid and etc etc.In that exercise1.html code .u also has link.html file .the code of this file is provided below

<html>
<head>
<title>link.html</title>
<body>
<h1>Welcome to link.html</h1>
<br>
<img src="
C:\Users\Himanshu\Desktop\simplified theory.PNG" alt="sorry for inconvinence" height="250" width="200">
</body>
</head>
</html>

In above code alt will be dispayed if image will not displayed. And that height and width is specified for the image that we want to get displayed.

Now Let us discuss about bootstrap

As far as i have make out bootstrap is the name of library which facilates a kind of more new features to your html file beside css file.like table hover .table stripped etc.
One more new thing you will find in a below bootstrap code is concept of class and div .learn about in detail from the video provided below

Now let us finally let see the simple example of bootstrap library

<html>
<head>
<title>bootstrapuse </title>
<link
rel="stylesheet"
href="bootstrap.css"
type="text/css"
media="all"
/>
<link
rel="stylesheet"
href="bootstrap.min.css"
type="text/css"
media="all"
/>
<link
rel="stylesheet"
href="bootstrap-theme.css"
type="text/css"
media="all"
/>
<link
rel="stylesheet"
href="bootstrap-theme.min"
type="text/css"
media="all"
/>
</head>
<body>
<div class="container">
<div class="col-lg-6">
<h2>col1</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-6">
<h2>col2</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-12">
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col1</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col2</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col3</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col4</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col5</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-3">
<h2>col6</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-2">
<h2>col7</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-2">
<h2>col8</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-2">
<h2>col7</h2>
<p>hgdweyjfdguerfb</p>
</div>
<div class="col-lg-2">
<h2>col8</h2>
<p>hgdweyjfdguerfb</p>
</div>
</div>
</body>
</html>

Now here the output of the above code will something like as follow

The above code was just to make out the understanding of class,div and the New kind of font and graphics featured by bootstrap library that you can find by analyzing about output.

Now if want to master you should now only work on 2 major projects which are shown an taught through video given in the last of every project.

1.collapse Navigation Bar

It will look like

Code:

<html>
<head>
<title>Google</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>

To Know it's made watch Video given below:-

And

2nd Project is the Sliding Bar

It will look like

Code

<html>
<head>
<title>Exercise</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img
{
width: 40%;
margin: auto;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="Cat" width="200" height="200">
</div>
<div class="item">
<img src="2.jpg" alt="Cat" width="200" height="200">
</div>
<div class="item">
<img src="3.jpg" alt="Cat" width="200" height="200">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>

Video

Now Let us learn what is PHP

Till Now whatever u have studied was the part of Website Designing .i.e that stuff will make you capable to draw how your website should look..

But what about a adding a feature like adding calculator feature and other kind of feature for your website for that you need a programming langauage. PHP and java script are that programming languages only.

Watch below 2.15 minutes of video to make out better what i have just expalined

Now let us discuss the basic code of php's

suppose you have created a form html file as earlier but now you also want to see what you have entered in your field. for that you need a two files one of html and other that of php

the given file is formecho.html

<html>
<body>
<form action="formecho.php" method="POST">
email:<input type="text" name="email">
phn num:<input type="text" name="phn">
<input type="submit" name="button" value="submit">
</form>
</body>
</html>

and there is also one php file along with it which is named as phpecho.php for simplicity

and its code is as follow :-

<?php
if(isset($_POST["button"]))
{
$email=$_POST["email"];
$phn=$_POST["phn"];
echo $email;
echo '<br>';
echo $phn;
INSERT INTO `students`(`id`, `name`) VALUES ('$phn','$email')
}
?>

Now here <? lab lab ! ?> is the syntax of php file and

$ is used to intiallize variable like here email ,phn

and

echo is a keyword that is use to display the variable

and INSERT command is the sql command which will be used in order to put this data in your database. and obviously this database needs an server and for that only we have dowloaded an ofline server XAMPP in case you have 32-bit processor and WAMP in case you have 64-bit processor.How to use this server and run above code i will tells soon . One more thing i want to tell that while you will run your code in 32-bit PC .there you may have chances that you might not run some of the programs in your ofline server XAMP but surely if your approch is correct than u will run them your practical server i.e your hosting.

Now let us discuss How to use this server and run above code

To use above server followuing commands will be used like

1)localhost/formecho.php to run your php code

2)localhost/phpmyadmin to create your data base

How to create phpmyadmin database for that 2-3 min video given below

the above video is for XAMP similar steps is for WAMP also.

I have written one code for fetching data from wamp server .you can have a look at it.in the below code the beauty is that i have used both php as well as html code in same file named as "fetchingdatafrombackend.php".the code is here-->

<?php
error_reporting(E_ERROR);
include "connect_to_mysql.php";
$sql= mysql_query("SELECT * from students");
while($row=mysql_fetch_array($sql))
{
$name=$row["name"];
$stream=$row["stream"];
$view .='
<tr>
<td>'.$name.'</td>
<td>'.$stream.'</td>
</tr>
';
}
?>
<html>
<head>
<title>Data from backend</title>
</head>
<body>
<h1>DATA from backend</h1>
<table border="1">
<tr>
<td>Name</td>
<td>Stream</td>
<td>id</td>
</tr>
<?php echo $view;?>
</table>
</body>
</html>

Now what is javascript

i also not know much about it but know when u open your google chrome-->right click-->inspect and go to console that is a command window of java script. Must type 2+3 there and see the magic you will find 5 as your output....

Learn Javascript and Must share your own short blog like mine in comment section

Beside above i have also done lot more research on creating more sexy websites.

For that you can

1) Google WebDeveloper tool

2) Gdrive and Google also have its free hosting if you are into coding then you can check Google Cloud

Watch Video

To test your above webpages you can use

1) Github

2) you can also get free domain with .tk extension at dot.tk website

There are also following smart ways to Host your Website

Google Cloud Storage: How to Host a Static Website
Google Drive: How to host a web page on Google Drive
AWS (S3): Static Web Hosting With Amazon S3

Simplified Computer Science Department

Pages

Saturday 26 March 2016

How to Create a Website with or without from scratch?

Creating a website from ready-made software's

Creating a website from Scratch

this is bold red