Create Fancy Tables Using css.

Tuner: Md Farhad Hossen Posted on 10/21/2015 12:41:00 AM 1 comment

Use this code for create fancy table.
Create a file and paste this code. File name must contain .html format.

<!DOCTYPE html> <html> <head> <style> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #customers td, #customers th { font-size:1em; border:1px solid #98bf21; padding:3px 7px 2px 7px; } #customers th { font-size:1.1em; text-align:left; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #customers tr.alt td { color:#000000; background-color:#EAF2D3; } </style> </head> <body> <table id="customers"><tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr class="alt"> <td>Berglunds snabbköp</td> <td>Christina Berglund</td> <td>Sweden</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr class="alt"> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr class="alt"> <td>Königlich Essen</td> <td>Philip Cramer</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr class="alt"> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>Simon Crowther</td> <td>UK</td> </tr> <tr class="alt"> <td>Paris spécialités</td> <td>Marie Bertrand</td> <td>France</td> </tr> </table></body> </html>

Output

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
North/South	Simon Crowther	UK
Paris spécialités	Marie Bertrand	France

Category: Css, Web Development

Set the color of the borders by css

Tuner: Md Farhad Hossen Posted on 10/15/2015 06:53:00 PM 5 comments

Hello everybody, how are you? Today I have come with the tutorial about how can you add color in the css border. Some days Ago, I have write a tutorial about making css border. You can view it here.

Set the style of the border by css

In that tutorial we will learn to create deferent css border and in this tutorial we will learn how to set color in border. Okey, now create a file with name border-color.html and paste this code in the file and save the file.

See the code and you will see that, first we create deferent css class for deferent color and then we use it with paragraph- <p> tag.

Now see the output of this code.

One-colored border!

Two-colored border!

Three-colored border!

Four-colored border!

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Category: Css, Web Development

Make your own php image resizer tools.

Tuner: Md Farhad Hossen Posted on 10/13/2015 11:35:00 PM 3 comments

Today I am going to share a new php script, by which you can resize your image without croping image. You may know that php is a strong programing language, by using it, you can solve your any problem. Now, Let's start our tutorial.

1st, Create 3 file and 2 folder for this.

3 files

resize.php - the main file of resize image.
index.php - for use resize.php
style.css - The file for design (css)

2 folders

uploads - The folder for your uploaded photo which will be resize
images - The folder for save your resized images.

Open your created resize.php file with any notepad like
notepad++ and paste this code to the file.

<?php
class SimpleImage {
 
   var $image;
   var $image_type;
 
   function load($filename) {
 
      $image_info = getimagesize($filename);
      $this->image_type = $image_info[2];<br />
      if( $this->image_type == IMAGETYPE_JPEG ) {<br />
 <br />
         $this->image = imagecreatefromjpeg($filename);<br />
      } elseif( $this->image_type == IMAGETYPE_GIF ) {<br />
 <br />
         $this->image = imagecreatefromgif($filename);<br />
      } elseif( $this->image_type == IMAGETYPE_PNG ) {<br />
 <br />
         $this->image = imagecreatefrompng($filename);<br />
      }<br />
   }<br />
   function save($filename, $image_type=IMAGETYPE_PNG, $compression=75, $permissions=null) {<br />
 <br />
      if( $image_type == IMAGETYPE_JPEG ) {<br />
         imagejpeg($this->image,$filename,$compression);<br />
      } elseif( $image_type == IMAGETYPE_GIF ) {<br />
 <br />
         imagegif($this->image,$filename);<br />
      } elseif( $image_type == IMAGETYPE_PNG ) {<br />
 <br />
         imagepng($this->image,$filename);<br />
      }<br />
      if( $permissions != null) {<br />
 <br />
         chmod($filename,$permissions);<br />
      }<br />
      <br />
      <br />
  <br />
   }<br />
   function output($image_type=IMAGETYPE_JPEG) {<br />
 <br />
      if( $image_type == IMAGETYPE_JPEG ) {<br />
         imagejpeg($this->image);<br />
      } elseif( $image_type == IMAGETYPE_GIF ) {<br />
 <br />
         imagegif($this->image);<br />
      } elseif( $image_type == IMAGETYPE_PNG ) {<br />
 <br />
         imagepng($this->image);<br />
      }<br />
   }<br />
   function getWidth() {<br />
 <br />
      return imagesx($this->image);<br />
   }<br />
   function getHeight() {<br />
 <br />
      return imagesy($this->image);<br />
   }<br />
   function resizeToHeight($height) {<br />
 <br />
      $ratio = $height / $this->getHeight();<br />
      $width = $this->getWidth() * $ratio;<br />
      $this->resize($width,$height);<br />
   }<br />
 <br />
   function resizeToWidth($width) {<br />
      $ratio = $width / $this->getWidth();<br />
      $height = $this->getheight() * $ratio;<br />
      $this->resize($width,$height);<br />
   }<br />
 <br />
   function scale($scale) {<br />
      $width = $this->getWidth() * $scale/100;<br />
      $height = $this->getheight() * $scale/100;<br />
      $this->resize($width,$height);<br />
   }<br />
 <br />
   function resize($width,$height) {<br />
      $new_image = imagecreatetruecolor($width, $height);<br />
      imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());<br />
      $this->image = $new_image;<br />
   }      <br />
 <br />
}<br />
?>

Save this file by CTRL+S.

Now Open your index.php and paste this code and save the file.

<html><br />
    <head><br />
    <link rel="stylesheet" type="text/css" href="style.css"><br />
        <script type='text/javascript'>
            var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
            function Validate(oForm) {
                var arrInputs = oForm.getElementsByTagName("input");
                for (var i = 0; i < arrInputs.length; i++) {
                    var oInput = arrInputs[i];
                    if (oInput.type == "file") {
                        var sFileName = oInput.value;
                        if (sFileName.length > 0) {
                            var blnValid = false;
                            for (var j = 0; j < _validFileExtensions.length; j++) {
                                var sCurExtension = _validFileExtensions[j];
                                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                                    blnValid = true;
                                    break;
                                }
                            }
                            
                            if (!blnValid) {
                                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                                return false;
                            }
                        }
                    }
                }
              
                return true;
            }
            
            function chk()
            {
                var sds = document.getElementById('dum');
                if(sds == null){alert("You are not allowed to remove the copyright tag");
                document.getElementById("search").style.visibility="hidden";
                }
            }
            window.onload=chk;
        </script>
    </head>
    <body>
            <div class='resp_code' align='center' id='search'>
                <form name=fform enctype="multipart/form-data" method=POST action="index.php" class='frms noborders' onsubmit='return Validate(this);'>
                    <h3>Upload your Image <= 500 KB below:</h3>
                    <input type=file name="userfile" size=40 accept="image/*" required="required"><br /> 
                          <label>Width:</label>  <input name="max_width_box" type="text" id="max_width_box" value="300" size="4" style='width:15%;'>  
                                    
                          <label>Height:</label>  <input name="max_height_box" type="text" id="max_height_box" value="300" size="4" style='width:15%;'><br>
                        <input type="submit" name="submit" value="Upload image" />
                        <span id='dumdiv' align='center' style='font-size: 10px;color: #dadada;'>
                        <a id='dum' style='padding-right:0px; text-decoration:none;color: green;text-align:center;' href='https://www.ftwebbd.blogspot.com'>© Ft Web BD</a>
                      </span>
                        <input type="hidden" name="max_file_size" value="500000">
                </form>           
<?php
error_reporting(0);
  if(isset($_POST[max_file_size]))
  {  
  $uploaddir = 'uploads/';
  $filename=$_FILES['userfile']['name'];
  $uploadfile = $uploaddir.basename($_FILES['userfile']['tmp_name']);
  if(move_uploaded_file($_FILES['userfile']['tmp_name'],$uploadfile))
  {
  $x=basename($_FILES['userfile']['tmp_name']);
  $aa = 'uploads/'.$x;
  $t=basename($_FILES['userfile']['type']); 
   include('image-resize.php');  
   $widthim = $_POST['max_width_box'];
   $heightim = $_POST['max_height_box'];
   $tmp_name = $x.".".$t;
   $image = new SimpleImage();
   $image->load($aa);
   $image->resize($widthim,$heightim);
   $image->save("images/$x");
   echo "<img src='images/$x'/>";
  }
  else
  {      
  ?>
   <script language=javascript> 
   alert("Upload ONLY IMAGES <= 500 KB");
   </script>
   <?php
  }
  }
  ?>
            </div>    </body>
</html>

Our job tutorial complete. But is the script looking ugly? No problem, Paste this css code in your created style.css

body,td,th {
 font-family: Arial, Helvetica, sans-serif;
 color: #333333;
 font-size: 12px;
}

.upload_message_success {
 padding:4px;
 background-color:#009900;
 border:1px solid #006600;
 color:#FFFFFF;
 margin-top:10px;
 margin-bottom:10px;
}

.upload_message_error {
 padding:4px;
 background-color:#CE0000;
 border:1px solid #990000;
 color:#FFFFFF;
 margin-top:10px;
 margin-bottom:10px;
}
.frms
{
margin:0 auto;
padding:10px;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
-o-border-radius:.3em;
font-family:Tahoma, Geneva, sans-serif;
color:#333;
font-size:.9em;
line-height:1.2em;
}
.frms label {font-size: 1em;
}
.frms input[type="text"],[type="file"]
{
width:99%;
background:#fff;
border:#ddd 1px solid;
border-radius:.35em;
-moz-border-radius:.35em;
-webkit-border-radius:.35em;
-o-border-radius:.35em;
padding:0 .5%;
margin-top:5px;
margin-bottom:15px;
height:35px;
}
.frms input:hover,textarea:hover,select:hover
{
box-shadow:#dae1e5 0px 0px 5px;
-moz-box-shadow:#dae1e5 0px 0px 5px;
-webkit-box-shadow:#dae1e5 0px 0px 5px;
-o-box-shadow:#dae1e5 0px 0px 5px;
}
.frms input:focus,textarea:focus,select:focus
{
-webkit-box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
-moz-box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
border:#9d9983 1px solid;
}

.resp_code
{
margin:5px 10px 10px 300px;
padding:10px 20px 10px 20px;
font:normal 1em/1.3em Tahoma, Geneva, sans-serif;
color:#333;
background:#f8f8f8;
border:#ddd 1px solid;
border-radius:.25em;
overflow:auto;width:50%;
}
.frms input[type="submit"]
{
 padding:7px 14px;
 font-weight:bold;
 color:#fff;
 cursor:pointer;
 border-radius:.3em;
 -moz-border-radius:.2em;
 -webkit-border-radius:.2em;
 -o-border-radius:.2em;
 margin:10px 0;
 border:none;
}
.frms input[type="submit"]
{
 background:#75ab22;
 border-bottom:#629826 3px solid;
 text-shadow:#396e12 1px 1px 0px;
}
@media screen and (max-width: 480px)
{
.resp_code
{width:auto !important;margin:0px !important;
}
}

It is optional, Now my tutorial is complete.

Note: Remove breaking tag from the code, otherwise it returns a false result.

If you found a little bite of help then don't forget to share this post and promote us.
Thanks for reading and staying with us.

Category: PHP, Web Development

How to create captcha image by php

Tuner: Md Farhad Hossen Posted on 10/12/2015 01:05:00 PM 11 comments

Hello guys, how are you? May god keep better you at this moment. However, We see the captcha varification in many website.

You can create it using php very easily. I have added the php code which will create a captcha image. Let's view the code

Save this code with name "captcha.php". Now run this code in your server. What's you seeing. A box with some text. Now it's time to create the form for use this captcha system.

Create a new file name "index.php" or any name. Paste this code to the file.

Now create another file name "validate.php". This file will use to check the code entered in the form if right or wrong.

Now run the index.php file or other which you create to save the form code.

Now hits bellow share button to share this post with your friends.

Category: PHP, Web Development

[CSS] Set the style of the borders

Tuner: Md Farhad Hossen Posted on 10/08/2015 12:13:00 PM 4 comments

You can add deferent borders in text. Just follow the tutorial. paste this code to your html file and see your output.

Output

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

Category: Css, Web Development

Check your website speed

Tuner: Md Farhad Hossen Posted on 10/07/2015 12:44:00 PM 2 comments

Hi, buddy.
I just tested http://ftwebbd.blogspot.com with the Full
Page Test in Pingdom Tools.

This specific test was done on October 7 at 12:18:45 from Dallas, Texas, USA. The web page took 449 mili second to
load, used 46 requests, and weighed in at 738.9 kB.

The Google Page Speed performance grade for this web page is 89/100 (excellent).

There’s a ton of more information you can check out here: http://fpt.pingdom.com#!/cqg2Nl/http://
ftwebbd.blogspot.com

I think it shows that the web page is fast as lightning. Cheers!

I think you will not believe this messege so I added the screenshot. I have checked this from my mobile phone.

This is my website's (Ft Web BD) page speed checker email. There are too many tools in internet to check your website speed. We know that, website speed is a good factor for google ranks and any other rank. So check your website speed everyday and work to increase speed if it's slow. Check this tutorial to increase your website speed.

8 Tips for Improving Your Site Speed

Today I am going to share you a tools that is the best tool for speed check. This is Pingdom. It's very simple to use. Go to pingdom and paste your website link in the box and hit Test. Now you you see your website speed. You can share it to your Twitter, Facebook and Email. Now enjoy.

Category: Web Development

Some tips of youtube

Tuner: Md Farhad Hossen Posted on 10/06/2015 12:45:00 PM Leave a comment

I have decided to make a short
post about Some tips to youtube. If you have any tips that should be added to the list, leave in the comment box. These tips are based on my personal experience after over doing YouTube every day for over one years.

Don’t let anyone tell you, you are too late to the game. It’s not true.

Watch Tutorial by other YouTubers and read up on the topic. Learn how to edit your videos.

Always try to improve your commentary.

Play what you enjoy; switch it up with smaller, less popular games.

Don’t spam your link in comments (or anywhere).

Don’t do a sub for sub or anything similarly stupid.

Don’t obsess so much over sound insulation and hardware before you got your commentary down.

Treat every other YouTuber with respect. Treat your viewers with respect. A happy viewer is worth those few seconds you spend replying to him.

Try something different – don’t always do what everyone else is doing.

Don’t take mean comments to heart.

Don’t ignore constructive criticism, you will need it to grow.

Don’t take it personal if a YouTuber does not want to collab with you. We are busy people and less social than you might think.

Don’t get into fights in the comments, be the bigger person. Delete insulting comments and ignore.

Remember: People subscribe for you. If they sub for a game, they are not here to stay anyway.

Help other people that want to start YouTube or anything in life.

Don’t expect the same enthusiasm from your friends that don’t do YouTube – they will probably not get it.

Find a group online to have other YouTubers to chat with and grow.

Watch your video after recording and ask yourself “What can I do better next time?”.

Learn how to make engaging thumbnails.

Don’t be lazy: Write your descriptions and tags.

Be consistent and upload on a schedule. If you can’t keep to the schedule, do less – but stay consistent.

Don’t expect anyone to give you shout outs, they won’t help anyway if your content isn’t good.

Use Social Media to your advantage. Don’t just auto-post your videos there – engage with your audience.

Expect to spend a LOT of time on your new hobby.

Unless you are very, very good or have a very unique idea, don’t try to do a Mine craft-focused channel.

Growth in the beginning is slow, don’t get discouraged. It can take years, but you can do it!

Never buy subscribers, Twitter followers or any of that. It will just hurt you.

Don’t overexert yourself too often – it will burn you out. Get some sleep instead.

You should not expect any money from YouTube in the beginning. It takes time.

Don’t even think about going full-time unless you already make money.

That's all I know. If you know anything out of this tips, then you can drop it in comments. Thanks for reading.

Category: Tips and Tricks, Youtube

Ft Web BD

Create Fancy Tables Using css.

Set the color of the borders by css

Make your own php image resizer tools.

3 files

2 folders

How to create captcha image by php

[CSS] Set the style of the borders

Check your website speed

Some tips of youtube

Popular Posts

Post Category

Blog Statistics