Tuesday 30 July 2013

HTML contact page form


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
   background: #f2f2f2;
   color: #262626;
   font-family: Arial, san-serif;
}
#contact-form {
   background-color: #cb3d55;
   width: 465px;
   padding: 20px;
   margin: 50px auto;
   border-radius: 12px;  
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;
}
 
#contact-form input, 
#contact-form select, 
#contact-form textarea, 
#contact-form label {
   font-size: 15px;
   margin-bottom: 2px;
   font-family: Arial, san-serif;
}
 
#contact-form input, 
#contact-form select, 
#contact-form textarea {
   width: 450px;
    height: 29px;
  margin: 0;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
   margin: 2px 0 25px 0;
   padding: 5px;
}
#contact-form input:hover, 
#contact-form select:hover, 
#contact-form textarea:hover { border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
 
#contact-form input:focus, 
#contact-form select:focus, 
#contact-form textarea:focus {
   outline: none;
  border: 1px solid #4d90fe;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);

}
 
#contact-form textarea {
   height: 150px; 
}

#contact-form #submit {
   width: 450px; 
   color: #0000;
   border: none;
   background-color: #f6f6f6;
}
 
#contact-form #submit:hover {
   background-color: #c33754;
   color: #ffffff;
}
input:required, textarea:required {
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   -o-box-shadow: none;
}

#contact-form .required {
   font-weight:bold;
   color: #E5E6E7;    
}
#failure, #success {
   color: #6EA070;
   display:none;
}


</style>
  
</head>

<body>
        <div id="contact-form">
   <h1>Get In Touch!</h1>
   <h2>Use this contact form below to get in touch.</h2>
   <p id="failure">Opss.. something went wrong.</p>
   <p id="success">Thank you, your message was sent successfully.</p>
   <form method="post" action="emailForm.php" name="">
      <label for="name">Name: <span class="required">*</span></label>
      <input type="text" id="name" name="name" value="" placeholder="Your name" required autofocus />
        
      <label for="email">Email Address: <span class="required">*</span></label>
      <input type="email" id="email" name="email" value="" placeholder="your@email.com" required />
        
      <label for="website">Website: </label>
      <input type="web" id="webstie" name="website" value="" />
        
      <label for="subject">Subject: </label>
      <select id="subject" name="subject"> 
         <option value="hello">I just want to say hello =]</option>
                  <option value="general">General</option> 
      </select>
        
      <label for="message">Message: <span class="required">*</span></label>
      <textarea id="message" name="message" placeholder="Please, Write your message here." required></textarea>
         
      <input type="submit" value="Submit" id="submit" />
   </form>
</div>
   
</body>
</html>





What is use of HTML Forms and how to create HTML form ?

HTML Forms are one of the main points of interaction between a user and a web site or Site owner.
HTML forms are used to pass data to a server.  HTML form's   input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
A web form on a web page allows a user to enter data that is sent to a server for processing as per user requirement.

example:-


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
form {
   
    margin: 0 auto; width: 400px; padding: 20px 25px 15px;
     border: 1px solid #e5e5e5;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
     border-radius: 10px;font-family:Arial, Helvetica, sans-serif; font-size:14px;
     background-color:#f1f1f1;
}
form div + div {
    margin-top: 1em;
}
label {
  
    display: inline-block;
    width: 90px;
    text-align: right;
}
input, textarea {
   
    font: 1em sans-serif;font-size: 15px;
          width: 300px;
    height: 29px;
  margin: 0;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

input:hover, textarea:hover {border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

input:focus, textarea:focus {
    
    outline: none;
  border: 1px solid #4d90fe;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
textarea {
   
    vertical-align: top;  
    height: 5em;   
    resize: vertical;
}
.button {
       padding-left: 90px; /* same size as the label elements */
}

button {
        margin-left: .5em;
}

</style>
   
</head>

<body>
             <form action="sendpage.php" method="post" name="contact_form">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="mail">Mobile</label>
        <input type="number" id="mobile" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
   
    <div class="button">
        <button type="submit">Submit </button>
    </div>
</form>
</body>
</html>




What is HTML <script> Tag ?

 HTML <script> tag is used to define a client-side script, such as a JavaScript, j-uery .
It's uses for  image manipulation, form validation, and dynamic changes of content.

Example
<script>
document.write("Hello Friend!")
</script>

we can also use external JavaScrip file on HTML page through this tag

example 

<script type="text/javascript" src="extrnl_avascript.js"></script>

Some important HTML color name and color Hex value :-



Color Name        HEX value
Black                   #000000
Blue                     #0000FF
Green                   #008000
Red                      #FF0000
Gold                    #FFD700
Yellow                 #FFFF00
White                  #FFFFFF
Cyan                   #00FFFF
Maroon               #800000

What is the difference between "b" and "strong" tag ?



Old browsers don't know <strong>  they simply ignore it. But <b>  works , The <strong> tag is a phrase tag. whereas The <b> tag is a font-style tags.

Monday 29 July 2013

Basic layout structure with html5 new elements:-




 
Use this  inside head tag

<style type="text/css">

body {
    width: 940px;
    margin: 0 auto;
    font: 10pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
    background-color: #fafafa;
}
/*html5 semantics tags */
article, aside, figure, footer, header, hgroup, menu, nav, section
{ display: block; }

/* light css reset */
* { margin : 0; padding : 0; }
h2, h3, h4, h5, p, ul, ol  { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}

/* =page level container */
#pageContainer {
    margin: 0px auto 0px auto;
    width: 960px;
}

#pageHeader {
    width:960px;
    height:120px;
    color:#0099CC;
    background-color: #000;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-color: #ba3051;
}
.logo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 52px;
    color: #FFF;
    padding-top: 20px;
    font-weight: 700;
    padding-left: 20px;
}
#pageNav {
    width: 960px;
    height: 50px;
    background-color: #999;
    background-color:#eaeaea;
}
#pageNav ul {
    margin: 0px;
    padding: 0px;
}
#pageNav ul li {
    float: left;
    list-style-type: none;
    display: inline;
    padding-top: 10px;
    padding-right: 50px;
    padding-left: 10px;
}
#pageNav ul li a {
    color: #000;
    text-decoration: none;
    font-family: Verdana, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}
#pageSection {
    background-color: #f2f2f2;
    height: 300px;
    width: 660px;
    float: right;
}
#pageAside {
    width: 300px;
    height: 300px;
    background-color: #eaeaea;
    float: left;
}
#contentContainer {
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    min-height: 500px;
}


#pageFooter {
    width: 960px;
    background-color: #c33754;
    height: 100px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
.clearfix {clear:both; }

</style>


use this code inside body tag

<body>

<div id="pageContainer">
        <header id="pageHeader"><div class="logo">Justeffects.com</div></header>
         <div class="clearfix"></div>
          <nav id="pageNav">               
            <ul>
                       <li><a href="">Home </a></li>
                        <li><a href="">About</a></li>
                 <li><a href="">Our blog</a></li>
                                <li><a href="">Contact</a></li>
            </ul>
          </nav>

          <section id="pageSection">
          <header class="sectionHeader" style="padding:10px 0 0 10px;"><h3>Lorem ipsum dolor met</h3></header>
                <article class="sectionArticle" style="padding:10px 0 0 28px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</article>
                <footer class="sectionFooter" style="padding:10px 0 0 28px;">Integer et urna ut</footer>
            </section>

             <aside id="pageAside"><article>
                    <hgroup>
                        <h3>sidebar title</h3>
                    </hgroup>
              <p>
                        Some Text Here
              </p>
            </article></aside>
        </div>
        <div class="clearfix"></div>
        <footer id="pageFooter"><div style="padding: 20px 0px 0px 50px; font-size:12px;">© 2013 All Rights Reserved </div></footer>
    </div>
</body>

How to use responsive background-images in html5?



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>responsive background images</title>
<style type="text/css">
   div.wrapp {
                max-width: 800px;
                             }
             
              figure.wrappundr {
                padding-top: 56.25%;  /* 450px/800px = 0.5625 */
             
                background-image: url(body_bg.png);
                background-size: cover;
                -moz-background-size: cover;  /* Firefox 3.6 */
                background-position: center;  /* Internet Explorer 7/8 */
              }
     
    </style>   
</head>

<body>
         <div class="wrapp">
                <figure class="wrappundr"></figure>
              </div>
</body>
</html>

Saturday 27 July 2013

What new New Features add in html-5?



Some of the most interesting new features add in  HTML5

    The <canvas> element for 2D drawing
    The <video> and <audio> elements for media playback
    Support for local storage
    New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
    New form controls, like calendar, date, time, email, url, search

How to use Font, Size, and Style in your HTML page through Canvas tag in html5 ?



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
      }
    </style>
</head>

<body>
     <canvas id="myCanvas" width="600" height="300"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.font = 'bold 40px Calibri';
      context.fillText('JUSTEFFECTS.com!', 150, 100);
    </script>
</body>
</html>
How to Drew  Circle in your HTML page  through Canvas tag in html5 ?


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
      }
    </style>
</head>

<body>
     <canvas id="myCanvas" width="600" height="300"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 100;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = '#acacdd';
      context.fill();
      context.lineWidth = 6;
      context.strokeStyle = '#000000';
      context.stroke();
    </script>
</body>
</html>
How to Drew   Line in Your HTML page Via Canvas tag in html5 ?

-<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
      }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="700" height="300"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(100, 400);
      context.lineTo(450, 50);
      context.stroke();
    </script>
</body>
</html>

How to create  Linear Gradient in your html page Via   Canvas tag in html5

-<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
</head>

<body>
     <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
      var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
      // light blue
      grd.addColorStop(0, '#8ED6FF');  
      // dark blue
      grd.addColorStop(1, '#004CB3');
      context.fillStyle = grd;
      context.fill();
    </script>
</body>
</html>
How to use image in your HTML page via canvas tag in html-5 ?

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 69, 50);
      };
      imageObj.src = 'imagename.jpg';
    </script>
  </body>
</html>

What is the big difference between HTML and HTML5?


HTML-5 is advance version of HTML . but some difference between HTML and HTML-5. HTML create only static web pages but HTML-5 create static and dynamic both website.
HTML5 does support  media like video and audio tags

example of HTML-5  basic code:-.



<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>...</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

Thursday 25 July 2013

How to use YouTube Video in our HTML page ?

 
Example - Via  iFrame

<iframe width="420" height="320" src="http://youtu.be/o-u-OYz2qaU" frameborder="0" allowfullscreen></iframe>


Example -Via  Embedded

<object width="720" height="420">
                    <param name="movie" value="http://youtu.be/o-u-OYz2qaU">
                    </param>
                    <param name="allowFullScreen" value="true">
                    </param>
                    <param name="allowscriptaccess" value="always">
                    </param>
                    <param name="wmode" value="transparent">
                    </param>
                    <embed wmode="transparent"  src="http://youtu.be/o-u-OYz2qaU" type="application/x-shockwave-flash" width="720" height="420" allowscriptaccess="always" allowfullscreen="true"></embed>
                </object>
what is css  property  Display:none or visibility:hidden ? 

visibility:hidden It's hides an element, but it will still take  same space as before. The element will be hidden, but still affect the layout.

example:  <!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>

<body>
<h1>Justeffects.com</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>www.justeffects.com</p>
</body>
</html>

 Display:none: It's hides an element, and it will not take up any space. The element will be hidden  from page permanently.


example:

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {display:none;}
</style>
</head>

<body>
<h1>justeffects</h1>
<h1 class="hidden">this is hidden text</h1>
<p>You can Notice that the hidden text does not take  space.</p>
</body>

</html>

Wednesday 24 July 2013

Who is the father of adobe Photoshop?

ans:-  Thomas Knoll
* what is html5 and how to use it easily?

HTML5 is the newest and upgradted version of html 4, html5 add New Elements,New Attributes,  it's Full CSS3  Supported .

It's supported all major browsers like (Chrome, Safari, Firefox, Opera, IE). HTML5 works with CSS3, html5 new features should be based on HTML, CSS, DOM, and javaScript.
-No need for external plugins (like Flash)
-Error handling should be easier than in previous versions.
-Scripting has to be replaced by more markup.

HTML5 also includes new elements for drawing graphics,  adding media content, better page structure, better form handling, and lots more

example:-

<canvas> Element

       <canvas>- Used to draw graphics like line sqire cirle ect, animation via scripting (JavaScript,)

*  New Media Elements

  <audio>     For use mp3
  <video>     For  video or movie like mp4, vob, mpg, flv
   <embed>     Its use for coll an external application (a plug-in)



 New elements for better page layout structure:

<article>     use for an article
<aside>     use for  aside from the page content
<footer>     Use  footer continer
<header>     use  a header section like header continer
<nav>             Use  navigation links
<section>     use  section continer
<time>             Use  date/time on web page
<wbr>             use line-break

Some tag's are removed from html5:-

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>


Basic layout structure with html5 new elements:-

use inside head tag


<style type="text/css">

body {
    width: 940px;
    margin: 0 auto;
    font: 10pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
    background-color: #fafafa;
}
/*html5 semantics tags */
article, aside, figure, footer, header, hgroup, menu, nav, section
{ display: block; }

/* light css reset */
* { margin : 0; padding : 0; }
h2, h3, h4, h5, p, ul, ol  { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}

/* =page level container */
#pageContainer {
    margin: 0px auto 0px auto;
    width: 960px;
}

#pageHeader {
    width:960px;
    height:120px;
    color:#0099CC;
    background-color: #000;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-color: #ba3051;
}
.logo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 52px;
    color: #FFF;
    padding-top: 20px;
    font-weight: 700;
    padding-left: 20px;
}
#pageNav {
    width: 960px;
    height: 50px;
    background-color: #999;
    background-color:#eaeaea;
}
#pageNav ul {
    margin: 0px;
    padding: 0px;
}
#pageNav ul li {
    float: left;
    list-style-type: none;
    display: inline;
    padding-top: 10px;
    padding-right: 50px;
    padding-left: 10px;
}
#pageNav ul li a {
    color: #000;
    text-decoration: none;
    font-family: Verdana, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}
#pageSection {
    background-color: #f2f2f2;
    height: 300px;
    width: 660px;
    float: right;
}
#pageAside {
    width: 300px;
    height: 300px;
    background-color: #eaeaea;
    float: left;
}
#contentContainer {
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    min-height: 500px;
}


#pageFooter {
    width: 960px;
    background-color: #c33754;
    height: 100px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}


.clearfix {clear:both; }

</style>



use this code inside body tag

<body>

<div id="pageContainer">
        <header id="pageHeader"><div class="logo">Justeffects.com</div></header>
         <div class="clearfix"></div>
          <nav id="pageNav">               
            <ul>
                       <li><a href="">Home </a></li>
                        <li><a href="">About</a></li>
                 <li><a href="">Our blog</a></li>
                                <li><a href="">Contact</a></li>
            </ul>
          </nav>

          <section id="pageSection">
          <header class="sectionHeader" style="padding:10px 0 0 10px;"><h3>Lorem ipsum dolor met</h3></header>
                <article class="sectionArticle" style="padding:10px 0 0 28px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</article>
                <footer class="sectionFooter" style="padding:10px 0 0 28px;">Integer et urna ut</footer>
            </section>

             <aside id="pageAside"><article>
                    <hgroup>
                        <h3>sidebar title</h3>
                    </hgroup>
              <p>
                        Some Text Here
              </p>
            </article></aside>
        </div>
        <div class="clearfix"></div>
        <footer id="pageFooter"><div style="padding: 20px 0px 0px 50px; font-size:12px;">© 2013 All Rights Reserved </div></footer>
    </div>



</body>


Thanks 


Tuesday 23 July 2013

How to use bullet list in HTML page ?

 example

    <ul>
    <li>First item
    <li>Second item
    <li>Third item
    </ul>

hi friends plz like this page 



https://www.facebook.com/JustEffects


You can generate contact us form through this URL self

http://www.123contactform.com/

How to create HTML Reset button ?

<form action="index.php" name="reset">
 Enter your name: <input type="text" name="your_name"><br />
 <input type="reset" value="Reset Form" name="submit">
</form>
How to create  Submit button in HTML form ?

<form action="index.php">
 <input type="submit" value="Submit Form" name="submit">
</form>
How to create HTML Input type  Password Field ?

form action="index.php">
 Enter your password: <input type="password" name="password">
</form>

Hoe to make HTML Check box fields in html ?

<form action="index.php">
 <input type="checkbox" name="friut" value="Mango" />Mango<br />
 <input type="checkbox" name="friut" value="Orange" /> Orange<br />
 <input type="checkbox" name="friut" value="banana" />Banana<br />
 <input type="checkbox" name="friut" value="Tomato" /> Tomato<br />
</form>

HTML Radio Buttons

 

<form action="index.php">
 <input type="radio" name="color" value="red" /> Red<br />
 <input type="radio" name="color" value="white" /> White<br />
 <input type="radio" name="color" value="blue" /> Blue<br />
 <input type="radio" name="color" value="green" /> Green<br />
</form>

 

How to make an HTML form

One of the most useful pages of any website is the HTML contact form page. No website should be without a contact or feedback form. 

example:-

<form name="htmlform" method="post" action="html_form_send.php">
<table width="450px">
</tr>
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>

<tr>
 <td valign="top"">
  <label for="last_name">Password *</label>
 </td>
 <td valign="top">
  <input  type="password" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="email" name="email" maxlength="80" size="30">
 </td>

</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="telephone">Gender</label>
 </td>
 <td valign="top"><input type="radio" name="sex" value="male">Male<input type="radio" name="sex" value="female">Female</td>
</tr>
<tr>
 <td valign="top">
  <label for="telephone">Hobbies</label>
 </td>
 <td valign="top"><input type="checkbox" name="vehicle" value="Bike">music<input type="checkbox" name="vehicle" value="Car">cricket </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>

</tr>
<tr>
 <td valign="top">
  <label for="comments">Attached Resume *</label>
 </td>
 <td valign="top"><input type="file"></td>

</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit"> <input name="Reset" type="reset" value="Reset">
 </td>
</tr>
</table>
</form>


Monday 22 July 2013

What is the difference between Span and Div ?

What is the difference between Span and div ?

A div is a block-level element whereas a span is an inline element.

example :


<div id="wrapp">
    <p>This is <span class="wrapp_heading">justeffects</span></p>
</div>
what is cellspacing ?
 
cellspacing  controls the space between table cells.

or  The amount of space i.e. number of pixels, between cells in a table.

Example:

 <table width="500" border="1" cellspacing="10" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table> 

(Q) correct CSS syntax?

-body:color=yellow
-{body;color:blue}
-{body:color=black(body}
-body { height: 100%; width: 400px; }

ANSWER - body { height: 100%; width: 400px; }

what is DOM ?

-Document object model
-Data object model
-Data oriented modely

-Document Oriented model

ANSWER - Document object model

What is TABLE Tag ,  and how to use it on html page ?

example :-

Its define the structure of webpage.
A table is divided into rows , and each row is divided into data cells . td stands for table data.


<table width="500" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
What is IMAGE Tag in HTML ?

You can insert images on web page through this tag.

Example:- <img src="image.jpg" style="display:block;" width="" height="" border="0" alt="" title="">
What is css ?

Cascading Style Sheets (CSS) is a style sheet language used to formatting layout content and mange web pages. you can   be used to define text styles, table sizes, layout width, height  and more.
ex:-
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Untitled Document</title>

<body style="background-color:#black">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>




</body>
</html>

Sunday 21 July 2013

What is HEAD  Tag ?

HEAD is  HTML tag where you can place information about the document. You must use the title element within the head element and also meta, style, script,favicon,  base and link  can also be used.


The following elements can use inside the <head> element:

<title> (this element is required in the head section)
    <style>
    <base>
    <link>
    <meta>
    <script>
    <noscript>


What is HTML Paragraphs ?

Paragraphs are defined with the <p> tag.

Example

<p>This is a paragraph</p>
<p>This is 1st another paragraph</p>

What is HTML Attributes ?



HTML attributes are modifiers of HTML elements.
Attributes provide additional information about HTML elements.
An attribute is used to define the characteristics of an element and is placed inside the element's opening tag.
How many types heading in  html ?

Ans:-
 

<h1> to <h6>

Example:-

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
<h7>This is a heading</h7>

Saturday 20 July 2013

Salman khan 




How to make Responsive  html layout



 


Funny Images




What is cell padding?

ANSWER - Space between cell boundy to cell contents.

lets see your visitor’s journey from beginning to end and understand how they experienced your site

use this website :-   http://feedjit.com/

Post : Web Designer 

Experience : 2 year to 5 years

Salary : 15k to 25k
Interview Date : 20.07.2013

Interview Time : 11am to 3pm

contact No:-

Ms. Anju Srivastava : 9818082498

Friday 19 July 2013

How to fixed font line height in newsletter for Hotmail?

use this code inside head tag

<style type="text/css">
table td {
    border-collapse:collapse;
}
body {
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none;
}
.ExternalClass * {
    line-height:100%;
}
</style>
(Q) What is web a application?

A web application is any application that uses a web browser as a client. The application can be as simple as a message board or a guest sign-in book on a website, or as complex as a word processor or a spreadsheet.
What is HTML DOCTYPE?

The doctype declaration should be the very first thing in an HTML document, before the html tag.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.

(Q) - Which HTML attribute is used to define inline styles?

-font
-class
-styles
-style

ANSWER - style

What is the difference between XML and HTML?

-HTML is used for exchanging data, XML is not.
-HTML can have user defined tags, XML cannot

XML stands for EXtensible Markup Language

HTML stand for Hyper text  Markup Language

HTML is not case-sensitive where as XML is case-sensitive.

XML was designed to transport and store data, with focus on what data is
HTML was designed to display data, with focus on how data looks  

XML describes the data where as HTML only defines the data.

HTML has it own predefined tags while what makes XML flexible is that custom tags can be defined and the tags are invented by the author of the XML document.

HTML is not strict if the user does not use the closing tags 

but XML makes it mandatory for the user the close each tag that has been used.

by:- facebook.com/justeffects/

What is the tag for an inline frame?

-Iframe
How do make a link one page to another web page?

<a href="http://www.justeffects.com" target="blank ">plz visit</a>
How to fixed background image  in html ?

<BODY BACKGROUND="bg.gif" BGCOLOR="#000000"  BGPROPERTIES="FIXED" TEXT="#C0C0C0" >
* D-HTML is the combination of HTML and JavaScript *

What is HTML Block Elements

Block level elements normally start (and end) with a new line when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>

 

Thursday 18 July 2013

* Important question for interview *

/ Tell me about a project or challenge that didn't go well, and how you handled it ? /
(Q) How to use background images in input box ?

<style type="text/css">
input
{
    background-image:url(roundedimages.jpg); width: 196px; height: 39px;
    padding: 0 0 0 5px;
    color:#000000;
    }
</style>

 <input type="text" value="test" />
(Q) How to create rounded input box without using java-script and images. ?

-
<style type="text/css">
input
{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #CCCCCC;
    height:28px;
    width:250px;
}
</style>

<body>
 <input type="text" value="test" />

</body>
Beautiful Google background form 

css:-

form{background-image:url(http://google.com.au/intl/en_au/images/logo.gif);
text-align:center;
background-repeat:no-repeat;
padding:10px;
height:88px;
width:258px;
font-family:Tahoma;
font-size:14px;
color:#000000;


html:-
<form id="form1" name="form1" method="post" action="">
<strong>Your Form </strong><br />
<br />
<input type="text" name="textfield" id="textfield" />
    <label> <br />
    <input type="submit" name="button" id="button" value="Submit" />
    </label>

</form>
* How many types of list in html ?

There two types of list


UNORDERED LIST
<ul>
<li>hi</li>

<li>about </li>
<li>services</li>
</ul>


ORDERED LIST
<ol>
<li>hi</li>

<li>about </li>
<li>services</li></ol>
 Blink text

<blink>text you type text</blink>

*WHAT IS HTML5 ?

HTML5 will be the new standard for HTML.

In HTML5 there is only one <!doctype> declaration  it is very simple,

 Include Some of the most interesting new features in HTML5:   

  • The <canvas> element for 2D drawing
  • The <video> and <audio> elements for media playback
  • Support for local storage
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  • New form controls, like calendar, date, time, email, url, search

 

 

Hi frnds.

this is our facebook page https://www.facebook.com/JustEffects/    plz  join with us and lern to   html,css
thanks & regards.
www.justeffects.com

* Hi guys this is the best way to generate box shadow css code from these URL *

some exe:-

<div class="box effect1">
<h3>Effect 1</h3>
</div>
 
css:-
 .box h3{
 text-align:center;
 position:relative;
 top:80px;
}
.box {
 width:70%;
 height:200px;
 background:#FFF;
 margin:40px auto;
}
/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
 -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
         box-shadow: 0 10px 6px -6px #777;
} 

http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

http://westciv.com/tools/boxshadows/

http://silviarebelo.com/demos/boxgenerator/

(Q) How to make Border radius in css ?

-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
 
and You can also Generate BORDER RADIUS CODE AS U, 
through this url go:- 
 
 
http://border-radius.com/ 


 

* HTML-5 Audio and Video Supported *

exm:-  for Audio

<audio controls="controls">
    <source src="01.mp3" type="audio/mp3" />
    <source src="02.ogg" type="audio/ogg" />
    Welcome you
</audio>
 
exm:-  for Video
 
<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.webm" type="video/webm" />
    www.justeffects.com
</video> 

Hi frnds.

this is our facebook page https://www.facebook.com/JustEffects/    plz  join with us

thanks & regards.
www.justeffects.com
* Here simple example of HTML-5 *

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <header>
        <hgroup>
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
            <li><a href="#">Menu Option 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article. 
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.   
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>
        <figure>
            <img width="85" height="85" 
                src="images.jpg" 
                alt="Jennifer Marsman" />
            <figcaption>JustEffects</figcaption>
        </figure>
    </aside>
    <footer>Footer - Copyright 2013</footer>
</body>
</html>