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
1)
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
Watch Video
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">
- <!-- Indicators -->
- <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>
- <!-- Wrapper for slides -->
- <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>
- <!-- Left and right controls -->
- <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 :-
- <!-- we are edited the form.html because of it -->
- <?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
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