MLuin

If you are using windows PC and if you want to create Wi-Fi hotspot in your PC then hopefully this tutorial will be helpful for you. Just follow the steps that I have shown below to create a hotspot network.

Create WIFI Hotspot Using CMD in Windows PC

Step 01:
Open CMD( Command Prompt) in administrator mode.

Step 02:
Inside the command prompt type- netsh wlan show drivers and press enter to check whether you have necessary drivers in your PC to create hotspot. If it shows- Hosted network supported: Yes then you are ready to go.

Step 03:
Type in the CMD the following command and press enter.
netsh wlan set hostednetwork mode=allow ssid=HotspotName key=Password

Notice: In this command just change the ssid and key value ie, name your hotspot and give a tight password.

You are done here creating a Wi-Fi hotspot environment. Now to start and stop the hotspot follow the below steps-

#Start Hotspot: Open CMD in administrator mode and type-
netsh wlan start hostednetwork

#Stop Hotspot: Open CMD in administrator mode and type-
netsh wlan stop hostednetwork

If you want to save your time from writing CMD commands again and again then create a CMD command .bat file on your Desktop and run that when it is necessary. Write the below codes in your .bat file and execute on demand-
C:\Windows\System32\cmd.exe /c Your_Command
Example: C:\Windows\System32\cmd.exe /c netsh wlan start hostednetwork

If you don't know how to create .bat file then visit this link.

Before calculating the total number of host and subnets of a certain IP address you have to have a clear idea about the IP classes. By looking at the first four bits of IP address you can determine the class of address.

Class A- It begins with 0xxx, or 1 to 126 decimal.
Class B- It begins with 10xx, or 128 to 191 decimal.
Class C- It begins with 110x, or 192 to 223 decimal.
Class D- It begins with 1110, or 224 to 239 decimal.
Class E- It begins with 1111, or 240 to 254 decimal.

Determine the Number of IP Subnets and Hosts

Every IP address has two parts- Network and Host. For different classes the network and host parts-

Class A- Network.Host.Host.Host
Class B- Network.Network.Host.Host
Class C- Network.Network.Network.Host
Class D- Network.Network.Network.Network

For this tutorial we will use the following IP address:

162.190.107.127

255.255.255.224

Step 01:

Determine the class of address using the first octet of the IP address.

162.190.107.127 = Class B

255.255.255.224

Step 02:

Now, determine the host and network octets.

Network.Network.Host.Host = Class B

162.190.107.127

255.255.255.224

Step 03:

Find out which bits are set to one in the host octets. Notice, if no bits are set to one then there is no subset.

162.190.107.127

255.255.255.224 = xxxxxxxx.xxxxxxxx.11111111.11100000

Step 04:

Assume 'X' denotes the total number of ones. Then we will use this formula '(2^X)-2' to find out number of usable subnets. Example-

11111111.11100000 = 11 ones.

(2^11)-2= 2048-2= 2046 subnets in total for use.

Step 05:

Assume 'Y' denotes the total number of zeros. Then we will use this formula '(2^Y)-2' to find out number of usable hosts. Example-

11111111.11100000 = 5 zeros.

(2^5)-2= 32-2= 30 host address for use.

Welcome to My HTML5 Tutorial-2!

If you have already studied my HTML5 Tutorial-1 then this tutorial is nothing complex. We will use the codes from the previous tutorial to continue our HTML5 tutorial. In this tutorial I have add a new <div> tag to incorporate flexible box model. This flexible box model will give your website a kind of elastic property. Flexible box model is supported by most the latest featured browsers like Google Chrome and Microsoft Edge. For this flexible box model your website will get some flexibility to get the shape of your current window and it will shrink and enlarge its shape towards your defined direction.

tutorial.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Luin's Website</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Luin's HTML5 Tutorial</h1>
</header>
<nav id="top_menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id="new_div">
<section id="main_section">
<article>
<header>
<h2>The First Article</h2>
</header>
This is the very first article of my website. This article is just a demo of articles I am going to post in future.
<footer>
Written by-Mohammad Luin | Date-15/12/15
</footer>
</article>
<article>
<header>
<h2>The Second Article</h2>
</header>
This is the very second article of my website. This article is just a demo of articles I am going to post in future.
<footer>
Written by-Mohammad Luin | Date-15/12/15
</footer>
</article>
</section>
<aside id="recent_post">
<h2>Recent Posts</h2>
The First Article <br/>
The Second Article
</aside>
</div>
<footer id="the_footer">
Copyright Luin 2015
</footer>
</div>
</body>
</html>

Description:

20. Introducing new <div> tag for creating flexible box.

46. Closing the new <div> tag.

main.css

margin: 0px;

padding: 0px;

}

h1{

font: bold 20px Tahoma;

}

h2{

font: bold 14px Tahoma;

}

header, section, footer, aside, article ,nav, hgroup{

display: block;

}

body{

width: 100%;

display: -webkit-box; /* You have to alter display type to "-webkit-box" to insert body within the flexible box */

-webkit-box-pack: center; /* Use this property to pack your boxes in the center of the website */

}

#big_wrapper{

max-width: 1000px;

margin: 20px 0px;

display: -webkit-box; /* Display type to insert flexible boxes */

-webkit-box-orient: vertical; /* This property indicates where and how the block elements will be placed in times of window enlargement and shrinking */

-webkit-box-flex: 1; /* This property means the box is flexible and if we would use '0' instead of '1' then it would be fixed */

}

#top_header{

background: yellow;

border: solid 3px black;

padding: 20px;

}

#top_menu{

border: red;

background: blue;

color: white;

}

#top_menu li{

display: inline-block;

list-style: none;

padding: 5px;

font: bold 14px Tahoma;

}

#new_div{

display: -webkit-box; /* Display type to insert flexible boxes */

-webkit-box-orient: horizontal; /* Elements within this box will be placed horizontally */

}

#main_section{

border: 1px solid red;

-webkit-box-flex: 1; /* This property means the box is flexible and if we would use '0' instead of '1' then it would be fixed */

margin:20px;

padding: 20px;

}

article{

background: #B6B3B2; /* Background color of each article */

border: 1px solid red; /* Article border size and color */

padding: 20px;

margin-bottom: 15px;

}

#recent_post{

border: 1px solid red;

width: 220px;

margin: 20px 0px;

padding: 20px;

background: #66CCCC;

}

#the_footer{

text-align: center;

padding: 20px;

border-top: 2px solid green;

}

Result:

If you are looking for a way to practice MySql query creating a database for free then this post hopefully be helpful for you. You can create database in your own PC by creating server. It is very simple to turn a computer into a server. There are several way to do it but I will show you the most simple one. I will show you how to create a portable server by the help of XAMPP software. This software is totally free. By the help of this software you can create MySql server and you can practice MySql in your own PC. Here I have shown a few steps of the overall process and for your simplicity I have attached a sample SQL table which you can collect for your database.

Steps:

1. At first you have to download and install the suitable version of XAMPP for your PC from here.

2. After completing the installation run the programme. The UI should look like this-

3. Now, click on start button of Apache and MySql. Result-

4. Minimize the XAMPP window and open your browser and type- http://localhost and hit enter.

5. To create a MySql database click on phpMyAdmin tab. From the left panel click on new to create a new database.

6. Now from the right panel give a name to your database and select the Collation as- utf8mb4_unicode_ci then press Create. Example-

7. Your new database is created and ready to create a table. To create a table click on new under the name of your database.

8. In the new window create number of columns as required, name them, select their type, set length and set a primary key for your table. An example is shown below-

9. Now, click on Save button at the below right corner. Then a new will appear where you will find your newly created table structure. Now, if you have any sql file import that or insert your table data clicking on Insert tab.

10. From the new window insert as many data as you want and press go. Example-

11. Every time you want to add data go to insert tab. You are done creating a database. Now you can practice MySql query going to the SQL tab.

Notice:

Some of you might face a problem after installing XAMPP. You might see an error notification like this-

In this case, press on Windows+R button and write- services.msc, run that. From the new window look for World Wide Web Publishing Service. Stop that service from running and close your XAMPP.

Now, re-open the XAMPP. I hope there won't be any problem now.

Welcome to My HTML5 Tutorial-1!

Index: Creating a Basic Template | Setting up The Body | Styling The Website Layout

Before jumping into the deep I would like to suggest you to go through my post on Basics of HTML for the better understanding of this tutorial. We will use the below sample HTML5 website codes for this "HTML5 Tutorial-1". Before going to the description I would like to suggest you to open two new tabs in your notepad or two files naming html5.html and main.css, and keep them in the same directory. Do not copy-paste the whole file/codes at the beginning that I have mentioned below. I have described each part of html5.html and main.css below, understand them first and then write those codes in your notepad part by part for execution.

html5.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Luin's Website</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Luin's HTML5 Tutorial</h1>
</header> <nav id="top_menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section id="main_section">
<article>
<header>
<h2>The First Article<h2>
</header>
This is the very first article of my website. This article is just a demo of articles I am going to post in future.
<footer>
Written by-Mohammad Luin | Date-15/12/15
</footer>
<header>
<h2>The Second Article<h2>
</header>
This is the very second article of my website. This article is just a demo of articles I am going to post in future.
<footer> Written by-Mohammad Luin | Date-15/12/15
</footer>
</article>
</section>
<aside id="recent_post">
<h2>Recent Posts</h2>
The First Article <br/> The Second Article
</aside>
<footer id="the_footer"> Copyright Luin 2015 </footer>
</div>
</body>
</html>

main.css

*{
margin: 0px; padding: 0px;
}
h1{
font: bold 20px Tahoma;
}
h2{
font: bold 14px Tahoma;
}
header, section, nav, footer, aside, article, hgroup{
display: block;
}
body{
text-align: center;
}
#big_wrapper{
border: 1px solid black; width: 1000px; margin: 20px auto; text-align: left;
}
#top_header{
background: yellow; border: 1px; padding: 20px;
}
#top_menu{
background: blue; color: white;
}
#top_menu li{
display: inline-block; list-style: none; padding: 5px; font: bold 14px Tahoma;
}

Creating a Basic Template

html5.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Luin's Website</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div>
<header ></header>
<nav></nav>
<section></section>
<aside></aside>
<footer></footer>
</div>
</body>
</html>

Description:
1. HTML5 must start with this tag to let browsers know that this is a HTML5 website.
2. You have to define the language of your website using lang attribute.
3. Every website possess <head> portion. This head portion contains title of the website, css styles, scripts. The elements that remain inside the head remain hidden ie, the users cannot see only the developer can see.
8. <body> is the website's visual portion. It contains texts, images, paragraphs and all the visual elements that a user can see.

4. Meta character set for the website.
5. Title of the website.
6. Here link is the reference to outside file. The rel attribute here means relative which defines how it is related with the website. The file main.css is our seperate css file where we will write css codes for the website.
10. to 14. are different parts of body.
10. This is header of your website where the logo and the title, sub title will stay.
11. This is your website's navigation tag. You need it create navigation bar.
12. Contents of a website goes to the section.
13. <aside> tag is the sidebar of your blog. It holds the contents that you want to keep in the left-side or right-side of your blog.

Setting up The Body

html5.html

<body>
<div>
<header>
<h1>Welcome to My Website!</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<article>
<header>
<h5>About HTML5</h5>
</header>
HTML means Hyper Text Markup Language. We use this language to develop website.
<footer>
Writer: Mohammad Luin | Date:14-12-15
</footer>
</article>
</section>
<aside>
<h4>Updates</h4>
Luin has bought a new car.
</aside>
<footer>Copyright Luin 2015</footer>
</div>
</body>

Description:

4. Our title, subtitle goes to header. Here <h1> is the header tag.

7. Unordered list.

8. to 10. are lists of navigation tab.

13. All the important stuffs like articles goes in between the <section> tag.

14. This is the article tag where your will articles will go.

16. This is the header of your article.

18. This is your article.

19. This is the footer of your article. This section will contain who wrote the article and when.

25. You aside contains will go in between the <aside> tag.

28. This is the footer of your website.

main.css

margin: 0px;

padding: 0px;

}

h1{

font: bold 20px Tahoma; /* Styling the header text */

}

h2{

font: bold 14px Tahoma; /* Styling the header text */

}

header, section, nav, footer, aside, article, hgroup{

display: block; /* Display type for all sections of body */

}

body{

text-align: center; /* Placement of websites body */

}

#big_wrapper{

border: 1px solid black;

width: 1000px; /* Total width of the website */

margin: 20px auto;

text-align: left;

}

#top_header{

background: yellow;

border: 1px;

padding: 20px;

}

#top_menu{

background: blue;

color: white;

}

#top_menu li{

display: inline-block;

list-style: none;

padding: 5px;

font: bold 14px Tahoma;

}

Result:

Styling The Website Layout

Now, we will work with both the tab html5.html and main.css to give our website a nice look. To give different look to different parts of website you have to set unique id for each part of your website's body. For example-

html5.html

<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Luin's HTML5 Tutorial</h1>
</header>
<nav id="top_menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section id="main_section">
<article>
<header>
<h2>The First Article<h2>
</header>
This is the very first article of my website. This article is just a demo of articles I am going to post in future.
<footer>
Written by-Mohammad Luin | Date-15/12/15
</footer>
</article>
<article>
<header>
<h2>The Second Article<h2>
</header>
This is the very second article of my website. This article is just a demo of articles I am going to post in future.
<footer>
Written by-Mohammad Luin | Date-15/12/15
</footer>
</article>
</section>
<aside id="recent_post">
<h2>Recent Posts</h2>
The First Article <br/>
The Second Article
</aside>
<footer id="the_footer">
</footer>
</div>
</body>

The "id" that we have set for each section is needed for css styling. Now, go to your main.css tab and write the below codes.

main.css

margin: 0px;

padding: 0px;

}

h1{

font: bold 20px Tahoma; /* Styling the header text */

}

h2{

font: bold 14px Tahoma; /* Styling the header text */

}

header, section, nav, footer, aside, article, hgroup{

display: block; /* Display type for all sections of body */

}

body{

text-align: center; /* Placement of websites body */

}

#big_wrapper{

border: 1px solid black;

width: 1000px; /* Total width of the website */

margin: 20px auto; /* Here 'auto' means 20px in both left and right side */

text-align: left; /* All text contents will be placed at left side */

}

#top_header{

background: yellow;

border: 1px;

padding: 20px;

}

#top_menu{

background: blue;

color: white;

}

#top_menu li{

display: inline-block;

list-style: none;

padding: 5px;

font: bold 14px Tahoma; /* Using the font type Tahoma */

}

#main_section{

float: left;

width: 660px;

margin: 30px; /* Total 720px utilized out of 1000px, 280px left to use */

}

#recent_post{

float: left;

width: 220px;

margin: 20px 0px;

padding: 30px;

background: #66CCCC;

}

#the_footer{

clear: both; /*This command let the footer place itself free ie, neither in left or nor in right */

text-align: center; /* Place the footer in the center of website */

padding: 20px;

border-top: 2px solid black;

background: green;

}

article{

background: #B6B3B2; /* Background color of each article */

border: 1px solid red; /* Article border size and color */

padding: 20px;

margin-bottom: 15px;

}

Result:

MLuin

Welcome to My HTML5 Tutorial-2!

Result:

Steps:

Notice:

Welcome to My HTML5 Tutorial-1!

Creating a Basic Template

Setting up The Body

Styling The Website Layout

Featured Post

How to Add Sitemap to Blogger

Popular Posts

Recent Posts

About Me

Blog Archive

Newsletter

Subscribe Our Newsletter