MLuin

Create WIFI Hotspot Using CMD in Windows PC

2016-02-01T22:18:00.000+06:00

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.

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.

Determine the Number of IP Subnets and Hosts

2016-01-29T01:08:00.001+06:00

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.

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.

HTML5 Tutorial-2: Incorporating Flexible Box Model

2015-12-30T20:30:00.000+06:00

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:

How to Turn PC into a Server

2015-12-21T14:33:00.002+06:00

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.

HTML5 Tutorial-1: Setting up HTML5 body, CSS3 selector, Styling

2015-12-16T19:51:00.001+06:00

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">
Copyright Luin 2015
</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:

Basics of HTML

2015-11-25T01:45:00.000+06:00

Paragraph Writing

To write or create a paragraph you have use tag <p> with its opening tag and closing tag, and the paragraph should be between the <body></body> tag. For example-

<html>

<head><title>The first page</title>

</head>

<body>

<p>This is my first paragraph</p>

<p>This is my second paragraph</p>

</body>

</html>

The result should be like this-

If you want to give break in single line of text in a paragraph then you have to use the tag <br/>. Use this <br/> tag to give break between lines. For example-

<html>

<head><title>The first page</title>

</head>

<body>

<p>This is my first paragraph</p>

<p>This is my second paragraph</p>

<p>This is <br/>a break of line</p>

</body>

</html>

Result:

Formatting Text

Now we came to the very important part. This part is all about text styling. So bare with me, write the codes as shown below and check-

</head>

<body>

<p>This is my paragraph</p>

<p><i>This is italic text</i></p>

<p><small>This is small text</small></p>

<p><strong>This is strong text</strong></p>

<p><inserted>This is inserted text</inserted></p>

<p><sup>This is superscripted text</sup></p>

<p><sub>This is subscripted text</sub></p>

<p><del>This is deleted text</del></p>

</body>

</html>

The result will be-

Heading Styles

According to the importance HTML possess six levels of headings. They are-

<html>

<head><title>The first page</title>

</head>

<body>

<h1>Heading one</h1>

<h2>Heading two</h2>

<h3>Heading three</h3>

<h4>Heading four</h4>

<h5>Heading five</h5>

<h6>Heading six</h6>

</body>

</html>

Result:

Line Creation

Use <hr/> tag to create a horizontal line in the page.

<html>

<head><title>The first page</title>

</head>

<body>

<p>This is first paragraph</p>

<hr/>

<p>This is second paragraph</p>

</body>

</html>

The result:

Include Comments Between Codes

It is necessary to write comments between the codes to let the second person understand your codes. Browser won't display this comment. So, to write this comment use the following method-

For example-

<html>

<head><title>The first page</title>

</head>

<body>

<p>This is first paragraph</p>

<hr/>

<p>This is second paragraph</p>

</body>

</html>

HTML Attributes

Additional information are provided by attributes to the function to get modified. The attribute sits in the opening tag to direct the line of code how it should get modified. For example if we want to bring a line at the center of the page then we should use align attribute and value as center.

<p align="center">This line is aligned to center</p>

Result:

Now come to the attributes of measurements part. If you want to modify the pixels of a line then use the attribute as width and value as px or %.

<hr width="80px"/>

<hr width="80%"/>

For example:

<html>

<head><title>The first page</title>

</head>

<body>

<p>This is first paragraph</p>

<hr width="80px"/>

<p>This is second paragraph</p>

</body>

</html>

You can place multiple attributes in the same element like-

<html>

<head><title>The first page</title>

</head>

<body>

<p align="center">This is first paragraph<hr width="80px"/></p>

</body>

</html>

Result:

Insert Image

For inserting an image you have to use <img> tag. Here you have to use src attribute which is used to define the image url, and you also have to have alt value of that image.

<img src="image url" alt="The image name"/>

For example:

<html>

<head><title>The first page</title>

</head>

<body>

<img src="http://example.com/facebookicon.png" alt="Facebook icon"/>

</body>

</html>

You can also specify the height and width of the image using the attributes height and width. Such as-

<img src="image url" height="250px" width="100px" alt="The image name"/>

There is a option to give border around the image by using the attribute border.

<img src="image url" height="250px" width="100px" border="1px black" alt="The image name"/>

Insert Links

Links are defined in HTML by <a> tag. Inside the opening <a> tag you have to insert href attribute to define the specific link. There is another attribute which is target, this attribute specifies whether the link open in new window or current window. If you want to open the link in new window then use _blank value. Example-

<a href="https://mluin.blogspot.com" target="_blank">MLuin's Tech Knowledge</a>

Insert List

If you want to order your list then you have to use the tag <ol> and for each list item use the <li> tag. Example-

<html>

<head><title>The first page</title>

</head>

<body>

<ol>

<li>Sunday</li>

<li>Monday</li>

<li>Tuesday</li>

</ol>

</body>

</html>

Result:

Now if you want to create an unordered list then you have to use the <ul></ul> tag instead of <ol></ol> tag.

Result:

Table Creation

Tables are defined by the tag <table>. There should be row and column in the table. So the row is defined by the tag <tr> and the column is defined by the tag <td>. Example-

<body>
<table>
<tr>
<td>Black</td>
<td>Yellow</td>
<td>Green</td>
</tr>
</table>
</body>

Now to give border in the table use the tag attribute border. Example-

<table border="2">
<tr>
<td>Black</td>
<td>Yellow</td>
<td>Green</td>
</tr>
</table>

Result:

If you want to color your boxes then use the attribute bgcolor. Example-
<table border="2">
<tr>
<td bgcolor="silver">Black</td>
<td bgcolor="yellow">Yellow</td>
<td bgcolor="green">Green</td>
</tr>
</table>

Result:

Create Form

Usually forms are used to collect the user information. So to create a form you have to use <form> tag. At the same time use action attribute to point to the web page that will load after they submit the form. Example-

<body>

<from action="https://mluin.blogspot.com"></form>

</body>

There are two important attribute called method and name in the form. The attribute method has two types of value, one is GET which means when form is submitted the data will be visible and another one is POST which is used to make the data invisible after submission for any security purpose. Example-

<form action="url" method="GET">

<form action="url" method="POST">

Inside the form there should be filde for Name and Password. So to include them use <input> element and use type and name as attribute. For example-

<body>

<form>

<input type="text" name="username"/>Name

<br/>

<input type="password" name="password"/>Password

</form>

</body>

Result:

If you want to allow your users to choice only one value then you can change your input type to radio. Example-

<form>

<input type="radio" name="gender" value="male"/>Male

<br/>

<input type="radio" name="gender" value="female"/>Female

</form>

Result:

You can use checkbox instead of radio for allowing user to select more than one option. Example-

<form>

<input type="checkbox" name="gender" value="1"/>Male

<br/>

<input type="checkbox" name="gender" value="2"/>Female

</form>

Result:

Now your form is ready to submit. Create a submit button like below-

<input type="submit" value="Submit"/>

Result:

HTML Colors

Hexadecimal values are used to express HTML colors. There are 16 values 0 to F where 0 represents the lowest value and F represents highest.

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

Colors are displayed in combination of RGB ie, red, green and blue. Hashtag symbol(#) is used to write hex values.There are almost 16 million combinations of RGB.

Basic Overview of HTML

2015-11-24T16:00:00.001+06:00

What is HTML?

The full form of HTML is Hyper Text Markup Language. Markup language doesn't need any script to perform function it uses tags for identifying any content. For example- <p>I am a sentence</p>. Here '<p>' is opening tag and '</p>' is closing tag.

The <html> Tag

There are several versions of HTML but the basics are same. The opening tag is <html> and the closing tag is </html>. Example-

<html>

----------

</html>

The <head> Tag

Your document should posses a head portion which contains some non visible element that helps the page to work. To set head in your document write like this-

<html>

<head>..</head>

</html>

The <body> Tag

There is no document possible without body. So, to define body you should write like this-

<html>

<body>..</body>

</html>

Create Your HTML Page

You can use any kinds of notepad to write HTML as they are simple text files, but I prefer code editor notepad like Notepad++ as they help you to organize your codes very easily. Open your notepad and write the following things-

<html>

<body>This is my first text line</body>

</html>

Now save the file as .htm or .html file format. Example- Newpage.html

Then open the file in a web browser. You should see your page like this-

Use <title> Tag

You should have a title in your page. So, add title by following manner-

<html>

<head><title>The first page</title>

</head>

<body>This is my first text line</body>

</html>

This will give you the following result-

Congratulation! You have learnt how to create a basic HTML page. For advanced learning click h e r e .

HTML5 Structure at a Glance

2015-11-24T00:22:00.000+06:00

<html>
<!DOCTYPE HTML>
<head>
<title>Mohammad Luin</title>
</head>
<body bgcolor="#FFFFFF">
<h1><font color="#000099">Heading one with color Blue</font></h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
<hr width="700px"/>

<article>
<h3 align="center">WELCOME!</h3><br/>
<section>
<h4 align="center">This is a section Head</h4><br/>
<p align="center">The is a test article for the test Heading</p><br/>
</section>
<aside>
<p>This is a aside text</p>
</aside>
</article>

<ol>
<li>Black</li>
<li>Blue</li>
<li>Green</li>
</ol>

<ul>
<li>Black</li>
<li>Blue</li>
<li>Green</li>
</ul>
<p align="center">This text is aligned to center<br/><hr width="100%" align="center"/></p>

<p><b>This is a bold text example</b></p>
<p><big>This is a big text example</big></p>
<p><i>This is an italic text example</i></p>
<p><small> This is a small text example</small></p>
<p><sub>This is a subscripted text example</sub></p>
<p><sup>This is a superscripted text example</sup></p>
<p><ins>This is an intserted text example</ins></p>
<p><del>This is a deleted text example</del></p>

<img src="neg_fox.jpg" hight="100px" width="100px" border="1px black" alt=""/>
<img src="image.svg" alt="" hight="300"><br/>
<svg width="2000" hight="2000">
<circle cx="80" cy"80" r="50" fill="green"/>
<rect width="300" hight="100" x="20" y="20" fill="yellow"/>
</svg><br/>
<svg width="500" hight="500">
<path d="M0 0 L0 100 L100 100 L100 0 Z"/>
</svg>

<a href="http://mluin.blogspot.com" target="_blank">mLuin's Tech Knowledge</a>

<table align="center" border="3">
<tr>
<td bgcolor="red">RED</td>
<td bgcolor="yellow">YELLOW</td>
<td bgcolor="green">GREEN</td>
</tr>
<tr>
<td>Stop</td>
<td colspan="2">Wait & Go</td>
</tr>
</table>

<form>
<lable>Your name</lable>
<input id="user" name="username" type="text"/>
</form><br/>

<form>
<lable for="email">Your email address</lable>
<input type="text" name="email" placeholder="example@gmail.com"/>
</form><br/>

<form>
<lable for="email">Your email address</lable>
<input type="text" name="email" autofocus/>
</form><br/>

<form autocomplete="off">
<lable for="email">Your email address:</lable>
<input name="Email" type="text" required/>
<input type="submit" value="Submit"/>
</form>
<form action="http://mluin.blogspot.com" method="GET/POST">

<input type="text" name="username"/>Username<br/>
<input type="password" name="password"/>Password<br/>

<input type="radio" name="gender" value="male"/>Male<br/>
<input type="radio" name="gender" value="female"/>Female<br/>

<input type="checkbox" name="gender" value="1"/>Male<br/>
<input type="checkbox" name="gender" value="2"/>Female<br/>

<input type="submit" value="Submit"/>
</form>

<audio src="image.mp3" controls>
Your browser doesnt support audio files
</audio>
<audio controls autoplay loop>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Audio elements not supported by your browser
</audio><br/>

<video controls autoplay loop>
<source src="video.mp4" type="video/mpeg">
<source src="video.ogg" type="video/ogg">
Audio elements not supported by your browser
</video>
<br/>

<progress min="0" max="100" value="35"></progress><br/>

<input id="mysearch" name="searchitem" type="search"/><br/>

<form>
<input id="car" type="text" list="colors"/>
<datalist id="colors">
<option value="RED">
<option value="YELLOW">
<option value="GREEN">
</datalist>
</form></br>
<svg width="100" hight="100">
<line x1="50" y1="0" x2=>
</body>
</html>

Notice:

To see the effect or meaning of each line of these codes copy codes from 1 to 164 and paste it in a notepad and save the file as .html file, then open the file in your browser.

How to Add Sitemap to Blogger

2015-11-23T12:43:00.000+06:00

The Sitemap XML file is just like a directory of your blog's pages. As you know your blog is always getting crawled by search engines but sometimes it does miss to crawl some of your pages. If you use XML Sitemap for your blog then the missing chances of crawling almost gets zero. So, it is better if you have a Sitemap for your blog. Follow the below mentioned steps to add Sitemap to your blog.

Steps:

1. Go to Sitemap Generator site to generate your blog's Sitemap.

2. Enter your blog's URL in the empty box and press on Generate Sitemap button.

3. It will then automatically generate your blog's sitemap like this-

4. Copy the whole XML file and go to Blogger's settings page.

5. Click on Search preferences and edit the Custom robots.txt as shown below( paste your copied XML file in the box) and save it.

6. You are done.

Create a Rollover Image Effect on Blogger

2015-11-19T17:18:00.000+06:00

Rollover image effect means the image will change upon the sense of touch on it. If you give this effect to any image on your blog then the image will change on mouseover. You can give this kinds of effect anywhere in your blog. You can apply this to your social icons on your blog or in any image inside your blog post like this( place your mouse cursor on the image to see demo effect)-

Steps:

1. If you want to add this type of image effect on the sidebar of your blog then go the Layout page of your blog and add a HTML/JavaScript gadget.

2. Paste the following codes in the gadget after editing the necessary portions. You can also resize your image according to your sweet will.

For example:

3. Save your gadget. You are done.

Notice:

If you want to add this image effect inside your blog post then put the codes in the HTML section.

How to Add Multiple Widget on Blogger Header

2015-11-16T20:26:00.001+06:00

If your template doesn't support you to add multiple widget on Blogger header then you can follow the steps to enable multiple widget support on Blogger header.

Steps:

1. Go to your template page and backup your template so that if anything goes wrong then you can restore your template.

2. Now, click on Edit HTML.

3.a) Press ctrl+F to open search box. Then copy-paste the following code and search-

<b:section class='header' id='header' maxwidgets='1'

3.b) You should find your existing codes like this-

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

4.a) Replace the codes with the following codes-

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'> <b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

For example-

4.b) Remember that you are changing only the values of maxwidgets='4' and showaddelement='yes'.

5. Now, save the template and you are done.

How to Open Port 80 in Windows PC

2015-11-16T13:05:00.000+06:00

The way to open Port 80 in windows PC has been shown below. Follow the steps to open Port 80.

Steps:

1. At first open your Control Panel.

2. Click on Windows Firewall.

3. In new window from the left panel click on Advanced settings.

4.a) In this new window you will find left panel where you will find an option saying Inbound Rule, click on that.

4.b) Now, from the right panel click on New Rule.

5.a) Now from the new window select rule- Port and click on Next.

5.b) Select Specific local port and mention port- 80 and rule should be apply to TCP.

5.c) Select Allow the connection and click on Next.

5.d) Check boxes when does rule apply.

5.e) Name your settings and click on Finish. Your are done.

How to Enable HTTPS in Blogger

2015-11-16T00:07:00.000+06:00

Recently Google has rolled out first version of HTTPS support for Blogspot. This is a security function which makes information of blog authors and visitors secure from getting stolen or tracked by bad actors. It also helps visitors to land on the correct website and aren't getting redirected to malicious website. There is a noticeable thing that is HTTPS support is only available for Blogspot domains like example.blogspot.com. So, if you are willing to enable HTTPS in your blog then follow the steps-

Steps:

1.a) At first go to your dashboard and select the blog in which you want to enable HTTPS.

1.b) Then press on Settings.

2. In the General settings page select Yes from HTTPS Settings option. You are done.

How to Add Social Media Icon in Blogger Sidebar

2015-11-14T13:02:00.001+06:00

If you want to connect with people by using social media icons in your blog then this post might be helpful for you. There are lots of customized social media icons are available online. You can collect those icons for free. Upload the icons on Flickr or in some social media like this to collect your icon url. Now, you have to follow some few steps to add social media icons to your blogger sidebar which I have shown below.

Steps:

1. At first go to your Blogger's Layout page.

2. Click on Add a Gadget and add HTML/JavaScript gadget.

3. Now paste the following codes inside that gadget-

For example-

4. If you wish to keep icons side by side then place the codes side by side I mean paste your new code just after </a>. For example-

5. Now save the gadget and you are ready to show your icons.

How to Auto Shutdown PC

2015-11-04T19:09:00.001+06:00

It is very obvious that sometimes we need to auto shutdown our pc. If you are looking for an easy solution to do this then follow my steps. I have shown here a very few steps to do it. This process won't take more than 2-3minutes. I think it will work on your computer.

Steps:

1. At first open your Notepad.

2a. Type the codes inside the notepad as the picture tells you.

2b. The numerical values here indicates seconds. Convert your minutes, hours into seconds. Suppose, you want to shutdown your pc after 1 Hour then your numerical value will be 3600.

3. Save the note as .bat format. You can give it a name like timer.bat or shutdown.bat

4. Execute the .bat file. You are done.

Create Facebook Like Box

2015-11-04T02:12:00.000+06:00

Follow a few simple steps to create Facebook like box for your blog.

Steps:

1. At first collect your Facebook page URL. Copy your Page link from the URL bar.

2. Visit this link to create your Facebook like box- https://developers.facebook.com/docs/plugins/page-plugin

3. Paste your Facebook page link in the Facebook Page URL section, and edit Width and Height according to your demand.

4. Press on the button 'Get Code'.

5. Copy codes from the upper box and go to the Edit HTML of your blog and paste codes right after the opening <body> tag.

6. Copy codes from the bottom box and go to your Blog's Layout page and press on 'Add a Gadget'.

7. Add 'HTML/JavaScript' gadget.

8. Now paste the code inside that gadget and save it. You are done.

How to Embed Presentation Slides in A Blog

2015-09-22T17:28:00.003+06:00

I have shown the procedure of embedding presentation slides in a Blog below. Follow the steps that I have shown in the 1:10 minutes video tutorial, I hope you will also be able to embed slides in your blog.

MySQL: The WHERE Statement

2015-06-15T18:00:00.003+06:00

Select a row from a specific column by giving a condition-
SELECT name, address FROM customers WHERE id=54
Select all the row accept a specific row from a column-
SELECT name, address FROM customers WHERE id !=54
Select rows by implementing different condition-
SELECT name, address FROM customers WHERE id <54
Select rows between two specific rows by using statement BETWEEN-
SELECT name, state FROM customers WHERE id BETWEEN 20 AND 30

Notice:

Use WHERE statement when will got select a specific row from a column.
If you want to select all rows accept a specific row then use != sign.
You can use different conditional sign like <, =<, >, =>, = according to your query.
If you want to find data between two conditions then then use the statement BETWEEN and use the statement AND between the two conditions.

MySQL: Advanced Filtering with AND, OR

2015-06-15T18:00:00.002+06:00

For multiple conditions the use of statement AND-
SELECT name, state, city FROM customers WHERE state='CA' AND city='Hollywood'
For multiple conditions the use of statement OR-
SELECT name, state, city FROM customers WHERE state='CA' OR city='Hollywood'
Use statement AND, OR in the same query-
SELECT name, state, city FROM customers WHERE id=2 OR id=5 AND state='CA'
Make query true for all conditions in the same order-
SELECT name, state, city FROM customers WHERE (id=2 OR id=5) AND state='CA'

Notice:

We will use statement AND when we want all the test should be true for the query.
We will use statement OR when we want any one of the test should be true for the query.
We can use AND, OR in the same query.
We can use parentheses in the query if we want a portion of the query should be true.

MySQL: Subqueries

2015-06-15T18:00:00.001+06:00

This is some kinds of sorting. If want to find out some portion of your information according to a order then follow the examples-
SELECT name, cost FROM items WHERE cost>(250) ORDER BY cost DESC

ELECT name, cost FROM items WHERE cost>( SELECT cost, AVG(cost) FROM items ) ORDER BY cost DESC

Notice:

For subqueries input the new query inside the bracket () as shown in the example above.
Here the statement DESC is descending, it is used to make an order.

MySQL: Functions

2015-06-15T18:00:00.000+06:00

If you want want to create a custom column which will hold the upper case letters and everything then use the character function UPPER -
SELECT name, UPPER(name) FROM customers
There are different kinds of function in MySQL like UPPER, one of them is SQRT which is numeric function -
SELECT cost, SQRT(cost) FROM items
Use AVG function to find out average of your data -
SELECT cost, AVG(cost) FROM items
Use SUM function to sum your data -
SELECT SUM(bids) FROM items

Notice:

UPPER function is used to generate upper values or characters.
SQRT-Square root, AVG-Average, SUM-Summation are numeric functions who are used to calculate desired informations/data.

MySQL: Create Custom Columns

2015-06-15T17:59:00.001+06:00

Creating a custom column use the keyword CONCAT -
SELECT CONCAT(city,',',state) FROM customers
Give name to the new custom column -
SELECT CONCAT(city,',',state) AS new_info FROM customers

Notice:

Full form of CONCAT is Concatenation; it takes a list of items and combine those items in a single place.
When you will go to name a new custom column if there is more than one name inside the parenthesis then use ,',', marks between the existing column names like I showed in the example.
For giving name to the new custom column use statement AS before the name.

MySQL: IN, NOT IN Statements

2015-06-15T17:59:00.000+06:00

If you want to find a specific information from different sources/places from database then you can use the statement IN like this-
SELECT name, state FROM customers WHERE state IN('CA','NY','NC')
If you want to find a specific information form different sources accept a few sources the then use statement NOT IN like this-
SELECT name, state FROM customers WHERE state NOT IN('CA','NY','NC')
For the same conditions as mentioned above if you want to order your result according to a specific manner then use ORDER BY statement like this-
SELECT name, state FROM customers WHERE state IN('CA','NY','NC') ORDER BY state

Notice:

Sometimes we have to use OR statement several times to find out informations form different rows/columns, but we can use IN once instead of using OR several times.
We can use NOT IN to skip some columns/rows.
To order your result use statement ORDER BY.

Create A Contact Form For Your Blog

2015-06-08T02:04:00.003+06:00

A good blog should have a Contact Us option in it so that readers can contact with the owner of the blog. This option helps to tighten the relationship between the blog and its reader. If you are blogging in Blogger then you might face a challenge to add a nice looking Contact Us form in blog. Blogger has a Contact widget but that doesn't look better, and you can't customize that. So, I am going to show you how to create a Contact Us form in Blogger with customizing option by the help of Google Form. From my point of view Google form is safe and secure. You can also use other 3rd party form in your blog. I have shown here how to create Google form. Just follow my steps and you will be able to create a Contact Us form.

Steps:

Step 1: Go to Google Drive and sign in with your gmail account info.

Step 2: After login click on New option.

Step 3: Click on Google Forms.

Step 4: Now a form will appear. In this form change the title of form Untitled form with your desired title e.g.-Contact Us. Change the Question title, and check the Required question field. After that click on Add option below Done to add another row of the form.

Step 5: In this new row do what I have done here. Then add another row.

Step 6: In this new row create a message box the way I have done here. Then add another row.

Step 7: This row is optional. If you want to add Human verification then follow what I have done here.

Step 8: There is a Confirmation page below the form which you can edit according to your choice.

Step 9: If you want to edit questions, change theme, view responses, and view the live form then clicking on the below options you can do that.

Step 10: Now if you click on Send form then a new window will appear. In this window you will find the link of your form which you can add to your blog as a Contact menus. You can also embed this form to your blog.

Add HTML Meta Tag in Blogger

2015-06-05T18:37:00.002+06:00

Meta tags are very important for any blog or website. Google bots read Meta tags and send information to Google search engine to show your website in Search Engine's result page. Follow the steps below to add Meta tags in your blog-

Steps:

1. Go to the Dashboard of your blog.

2. Go to Template.

3. Click on Edit HTML.

4. Use the key Ctrl-F to search for <head>.

5. Copy the following codes and edit the content parts according to your blog-

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='YOUR BLOG DESCRIPTION' name='description'/>
</b:if>
<meta content='YOUR BLOG KEYWORDS' name='keywords'/>
<meta content='MR. XY' name='Author'/>
<meta content='YOUR EMAIL ADDRESS' name='Email'/>
<meta content='All' name='Robots'/>
<meta content='index, follow' name='robots'/>
<meta content='index, follow' name='GOOGLEBOT'/>
<meta content='index, follow' name='yahooBOT'/>

6. Past the codes just after the <head>.

7. Save the Template and wait for six to seven days to get result. If you want quick result then go to Google webmasters tools and crawl your website.