Articles by "HTML"
Showing posts with label HTML. Show all posts
Are you a web developer and want to implement tinymce on your website to make it easy during writing and posting of content to be viewed with some awesome formatting like text color,text size,tables,inserting image,paragraph without any coding,tinymce will do that for you.Today we are going to take a little tutor on how to install tinymce on your website automatically without any coding required.

In this tutorial we are going to be looking at how to install tinymce within a shortest period of time and get it running on your website.

Tinymce can be installed in two ways and we are taking them step by step.

The first one is running it on the cloud.Running tinymce on the cloud just copy and paste this code on your HTML head tags

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

  <script>tinymce.init({ selector:'textarea' });</script>

This is how is going to be placed on your HTML as shown below

<!DOCTYPE html>

<html>

<head>

  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

  <script>tinymce.init({ selector:'textarea' });</script>

</head>

<body>

  <textarea>Next, get a free TinyMCE Cloud API key!</textarea>

</body>

</html>


But if you want to run the script on your own website without the cloud method,then follow this procedures successfully.

Steps


1. Download the script  here
2. Extract the script to a folder
3. Create a javascript page and name it script.js and paste the below code there.

tinymce.init({

  selector: 'textarea',

  height: 500,

  theme: 'modern',

  plugins: [

    'advlist autolink lists link image charmap print preview hr anchor pagebreak',

    'searchreplace wordcount visualblocks visualchars code fullscreen',

    'insertdatetime media nonbreaking save table contextmenu directionality',

    'emoticons template paste textcolor colorpicker textpattern imagetools codesample'

  ],

  toolbar1: 'insertfile undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

  toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',

  image_advtab: true,

  templates: [

    { title: 'Test template 1', content: 'Test 1' },

    { title: 'Test template 2', content: 'Test 2' }

  ],

  content_css: [

    'css?family=Lato:300,300i,400,400i',

    'css/codepen.min.css'

  ]

 });


4.Now go to your HTML and search for <head> and place the below code after <head>
<head>

  <script src="installation path/tinymce.min.js"></script>

  <script src="script.js"></script>

</head>


After all this steps follow successfully,this functionality get the get the  tags <textarea> automatically with that you can be able to editable your items and give them better formatting.

Note:The installation path as mentioned earlier is the folder where the tinymce resides.Below is the demo of tinymce




Today we are looking at how to create a responsive table for your website.Are you hearing responsive for the first time,responsive is just an approach we employ in website design to make the web page page resizable to the device window.


In this instance if you have a web page in your website which window is large that when view on a smaller window,you can not see all the data represented,that when responsive now comes in.

Let proceed on designing a responsive table,just relax as we move step by step.
Steps To Create A Responsive Table

•    Create a CSS file for your table,for the tutorials we are going to create CSS file name style.css ,do not forget when creating a CSS file to add .css extension.Copy and Paste the below code to your editor and name it style.css


table {

    border-collapse: collapse;

    border-spacing: 0;

    width: 100%;

    border: 1px solid #ddd;

}



th, td {

    border: none;

    text-align: left;

    padding: 8px;

}



tr:nth-child(even){background-color: #f2f2f2}

div {

overflow-x:auto;

}



•    Next write the html for your table with the code as shown below,you can modify to suite your own project.


<div>

  <table>

    <tr>

      <th>First Name</th>

      <th>Last Name</th>

      <th>First Game</th>

      <th>Second Game</th>

      <th>Third Game</th>

      <th>Fourth Game</th>

      <th>Fifth Game</th>

      <th>Sixth Point</th>

      <th>Seventh Game</th>

      <th>Eighth Game</th>

      <th>Nineth Game</th>

      <th>Total Points</th>

    </tr>

    <tr>

      <td>Bernard</td>

      <td>Benedict</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>450</td>

    </tr>

    <tr>

      <td>Evelyn</td>

      <td>Macpherson</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>846</td>

    </tr>

    <tr>

      <td>Benson</td>

      <td>Benjamin</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>603</td>

    </tr>

  </table>

</div>


•    Here is the complete code for the responsive table as shown below.Copy and paste to your code editor modify to your own taste and save it with anyname.html

<!DOCTYPE html>

<html>

<head>

    <title>Responsive Table</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div>

  <table>

    <tr>

      <th>First Name</th>

      <th>Last Name</th>

      <th>First Game</th>

      <th>Second Game</th>

      <th>Third Game</th>

      <th>Fourth Game</th>

      <th>Fifth Game</th>

      <th>Sixth Point</th>

      <th>Seventh Game</th>

      <th>Eighth Game</th>

      <th>Nineth Game</th>

      <th>Total Points</th>

    </tr>

    <tr>

      <td>Bernard</td>

      <td>Benedict</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>50</td>

      <td>450</td>

    </tr>

    <tr>

      <td>Evelyn</td>

      <td>Macpherson</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>94</td>

      <td>846</td>

    </tr>

    <tr>

      <td>Benson</td>

      <td>Benjamin</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>67</td>

      <td>603</td>

    </tr>

  </table>

</div>

</body>

</html>


I believe this tutorial has been useful to you,please do not forget to share with a friend and also subscribe with us to get the latest updates.

Contact form as the name implies is a medium of interaction between a website owner and the viewer. The contact us form allow visitors to communicate with the site owner from the website. Using the contact us form, visitors can easily submit their query, views, opinions and suggestions to the site administrator about the website, service or product that is been provided by the site.



Contact us form is very crucial in website for easy communication between the viewer and the site owner.Through this medium the viewer send the administration email base on the services been offered and this medium also help the administrator to have quick response to this client.

In this tutorial we are taking a tour on how to create a basic contact us form using PHP,CSS and HTML in building this system. Contact us notify the admin via email whenever there is a request from client or suggestion.

This tutorial is divided into three parts the PHP part which serve as the engine per say,HTML which is just like the body and also the CSS which gives the HTML a beautiful layout.We are going to take it one step at a time,so relax as we move on.

Steps Involves in Creating A Simple Contact Us Form

Below are some of the steps which we are going to be undertaking.

1.    Create a Database if you have not done that and if you do not know how to create a database follow our tutorials on how to create a database here.

2.    Create the HTML page.In this section we are going to create a HTML page that will collect our values from our client and submit it to our website database and admin email account by adding the given below code to our HTML page of our website.

<h2>Basic PHP Contact Form</h2>
<div class="contactFrm">
    <?php if(!empty($statusMsg)){ ?>
        <p class="statusMsg <?php echo !empty($msgClass)?$msgClass:''; ?>"><?php echo $statusMsg; ?></p>
    <?php } ?>
    <form action="" method="post">
        <h4>Name</h4>
        <input type="text" name="name" placeholder="Your Name" required="">
        <h4>Email </h4>
        <input type="email" name="email" placeholder="email@example.com" required="">
        <h4>Subject</h4>
        <input type="text" name="subject" placeholder="Write subject" required="">
        <h4>Message</h4>
        <textarea name="message" placeholder="Write your message here" required=""> </textarea>
        <input type="submit" name="submit" value="Submit">
        <div class="clear"> </div>
    </form>
</div>


3.The Next step,is to create our PHP page that will help in posting this values to our database and and to admin email account by verifying the email, checking for blank input etc,escaping some variables before posting it to our database.Copy and Paste the below code to PHP page and save with .php extension.

<?php
$statusMsg = '';
$msgClass = '';
if(isset($_POST['submit'])){
    // Get the submitted form data
    $email = $_POST['email'];
    $name = $_POST['name'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
   
    // Check whether submitted data is not empty
    if(!empty($email) && !empty($name) && !empty($subject) && !empty($message)){
       
        if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
            $statusMsg = 'Please enter your valid email.';
            $msgClass = 'errordiv';
        }else{
            // Recipient email
            $toEmail = 'your_email@gmail.com';
            $emailSubject = 'Contact Request Submitted by '.$name;
            $htmlContent = '<h2>Contact Request Submitted</h2>
                <h4>Name</h4><p>'.$name.'</p>
                <h4>Email</h4><p>'.$email.'</p>
                <h4>Subject</h4><p>'.$subject.'</p>
                <h4>Message</h4><p>'.$message.'</p>';
           
            // Set content-type header for sending HTML email
            $headers = "MIME-Version: 1.0" . "\r\n";
            $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
           
            // Additional headers
            $headers .= 'From: '.$name.'<'.$email.'>'. "\r\n";
           
            // Send email
            if(mail($toEmail,$emailSubject,$htmlContent,$headers)){
                $statusMsg = 'Your contact request has been submitted successfully !';
                $msgClass = 'succdiv';
            }else{
                $statusMsg = 'Your contact request submission failed, please try again.';
                $msgClass = 'errordiv';
            }
        }
    }else{
        $statusMsg = 'Please fill all the fields.';
        $msgClass = 'errordiv';
    }
}
?>


4.Next the step is to beautify our HTML page with some CSS code.To do this copy and paste the below code in your stylesheet page and save as .css extension.

.contactFrm h4 {
    font-size: 1em;
    color: #252525;
    margin-bottom: 0.5em;
    font-weight: 300;
    letter-spacing: 5px;
}
.contactFrm input[type="text"], .contactFrm input[type="email"] {
    width: 92%;
    color: #9370DB;
    background: #fff;
    outline: none;
    font-size: 0.9em;
    padding: .7em 1em;
    border: 1px solid #9370DB;
    -webkit-appearance: none;
    display: block;
    margin-bottom: 1.2em;
}
.contactFrm textarea {
    resize: none;
    width: 93.5%;
    background: #fff;
    color: #9370DB;
    font-size: 0.9em;
    outline: none;
    padding: .6em 1em;
    border: 1px solid #9370DB;
    min-height: 10em;
    -webkit-appearance: none;
}
.contactFrm input[type="submit"] {
    outline: none;
    color: #FFFFFF;
    padding: 0.5em 0;
    font-size: 1em;
    margin: 1em 0 0 0;
    -webkit-appearance: none;
    background: #9370DB;
    transition: 0.5s all;
    border: 2px solid #795CB4;
    -webkit-transition: 0.5s all;
    transition: 0.5s all;
    -moz-transition: 0.5s all;
    width: 47%;
    cursor: pointer;
}
.contactFrm input[type="submit"]:hover {
    background: none;
    color: #9370DB;
}
p.statusMsg{font-size:18px;}
p.succdiv{color: #008000;}
p.errordiv{color:#E80000;}



I believe this tutorial has help you a lot in carrying out this simple project on your website,do not forget to share with a friend by clicking on the share button below and you can also subscribe to get the latest update delivered to your inbox by clicking here