Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Monday, July 7, 2014

Top Ten Google Fonts For Web designing

  5:04 AM   , ,   Edit
At the moment there are several ways to use non-system fonts on a website. We will focus on the two least complicated, least expensive systems, Google Web Fonts and the @font-face rule. Fear not, we have not ruled out other paid methods such as Typekit, Fonts.com Web Fonts, Fontdeck, Webtype, WebINK or Fontspring for future posts as they certainly offer high quality typefaces and deserve to be considered. It’s important to be aware that web fonts can generate inadequate visualizations on operating systems which have subpixel rendering turned off in the case of Windows XP. They can also be represented differently depending on the browser used to visualize them. The aim of this post is to facilitate the choice of a series of fonts (out of the hundreds available) whose technical and visual characteristics make them more readable and compatible with a wide variety of devices, browsers and operating systems.
Basically, there are two implementation models:

Web font embedding services

Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. GWF is free to use, does not require you to have an account, and has no limit on traffic or domains unlike Typekit. Typekit sets the cost of the service according to the number of domains in which the font is used, or the site’s monthly traffic. One of the most valued characteristics of GWF is the option to download a desktop version of the fonts for use in the project design phase.
Implementation
It really is quick and simple:
1. Choose a font. You can add it to your collection or use “quick-use” to generate the code and options for that font.
2. Copy and paste the code generated into your <Head>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
  </head>
3. The font is now accessible in your CSS code
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
Here you can consult a extended manual for styles, script subsets, and using multiple fonts.

Top recommended fonts from Google Web Fonts

You will find many unfavorable reviews about the quality of GWF’s fonts and the amateur nature of many typefaces. We must remember that Google Web Fonts is a collaborative open source project, but many people think still there should be a higher level of quality control.
  • Open Sans
    Open Sans
  • Josefin Slab
    Josefin Slab
  • Arvo
    Arvo
  • Lato
    Lato
  • Vollkorn
    Vollkorn
  • Abril Fatface
    Abril Fatface
  • Ubuntu
    Ubuntu
  • PT Sans + PT Serif
    PT Sans + PT Serif
  • Old Standard TT
    Old Standard TT
  • Droid Sans
    Droid Sans
 

Embedding fonts using the @font-face rule

Fonts are hosted on the user’s server independently of external services. @font-face was a deprecated CSS2 rule that has been re-introduced in CSS3 specifications and is supported by almost all modern browsers. A web font is a customized font which is supported by different browers and comes in formats such as TTF, WOFF, EOT and SVG. There are many fonts available for @font-face embedding, but we are going to bring you a selection of the web fonts available on FONT SQUIRREL which are free to use and include prepackaged @font-face kits with the required formats, CSS and HTML code. Font Squirrel also offers the fantastic “@Font-Face Generator” tool, which can convert your desktop font into the appropriate format so you can use it as a web font. Implementation of web fonts with the @font-face rule.
1. Select your favorite font from Font Squirrel.
 2. Download the @font-face kit and test the sample code in stylesheet.css and demo.html files. All the font formats must be uploaded to your server.
     @font-face {
         font-family: 'ChunkFiveRegular';
         src: url('Chunkfive-webfont.eot');
         src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('Chunkfive-webfont.woff') format('woff'),
         url('Chunkfive-webfont.ttf') format('truetype'),
         url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
         font-weight: normal;
         font-style: normal;
}



Friday, June 6, 2014

How to get Values From Query String Using Jquery

  4:48 AM   ,   Edit
<head>
<title>jQuery Get Current Page Url Parameter values</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
var name = GetParameterValues('username');
var id = GetParameterValues('userid');
$('#spn_UserName').html('<strong>' + name + '</strong>');
$('#spn_UserId').html('<strong>' + id + '</strong>');
});
function GetParameterValues(param) {
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split('=');
if (urlparam[0] == param) {
return urlparam[1];
}
}
}
</script>
</head>
<body>
<a href="?username=sandeep&userid=23">click here</a>
<form id="form1" runat="server" action="">
<div>
<p>UserName: <span id="spn_UserName"></span></p>
<p>UserId: <span id="spn_UserId"></span></p>
</div>
</form>
</body>
</html>

text this code on your browser

Wednesday, June 4, 2014

HOW TO CREATE A SYUDENT TESTIMONIAL USING HTML

  12:36 AM      Edit
<style>
#marquee{
width:560px;
padding-right:20px;
padding-left:20px;
height:200px;
border:1px solid red
background:#fff;
}
#marquee marquee table td img{
width:90px
}
#marquee marquee table td{
height:80px;
border:1px solid #333;
}
#marquee marquee table td p{
padding:4px;
text-align:justify;
}
</style>
<div id="marquee">
<marquee scrollamount=2 direction=up>
<table width=560 border=0>
<tr>
<td valign=top><img src="http://iphoneappsdevelopmentinchandigarh.in/college/wp-content/uploads/2014/05/download-1.jpg"></td>
<td valign=top><p>"Taylors is not only professional in teaching international students, but the school is also good at taking care of students.</p><a href=""></a></td>
</tr>
<tr>
<td valign=top><img src="http://iphoneappsdevelopmentinchandigarh.in/college/wp-content/uploads/2014/05/download-1.jpg" width=60></td>
<td valign=top><p>I like this school. There are services and the teachers are qualified to teach. When you have problems, the staff is passionate. In addition, you can learn a lot of knowledge from these teachers. Choosing this school is a good decision. </p><a href=""></a></td>
</tr>
<tr>
<td valign=top><img src="http://iphoneappsdevelopmentinchandigarh.in/college/wp-content/uploads/2014/05/download-1.jpg"></td>
<td valign=top><p>c</p><a href=""></a></td>
</tr>
<tr>
<td valign=top><img src="http://iphoneappsdevelopmentinchandigarh.in/college/wp-content/uploads/2014/05/download-1.jpg"></td>
<td valign=top><p>Taylors is not only professional in teaching international students, but the school is also good at taking care of students.</p><a href=""></a></td>
</tr>
<tr>
<td valign=top><img src="http://iphoneappsdevelopmentinchandigarh.in/college/wp-content/uploads/2014/05/download-1.jpg"></td>
<td valign=top><p>I like this school. There are services and the teachers are qualified to teach. When you have problems, the staff is passionate. In addition, you can learn a lot of knowledge from these teachers. Choosing this school is a good decision. </p><a href=""></a></td>
</tr>
<tr>
<td valign=top><img src="http://iphoneappsdevelopmentinchandigarh.in/college/wp-content/uploads/2014/05/download-1.jpg"></td>
<td valign=top><p>Taylors is not only professional in teaching international students, but the school is also good at taking care of students.</p><a href=""></a></td>
</tr>

</table>
</marquee>
</div>

"Taylors is not only professional in teaching international students, but the school is also good at taking care of students.
I like this school. There are services and the teachers are qualified to teach. When you have problems, the staff is passionate. In addition, you can learn a lot of knowledge from these teachers. Choosing this school is a good decision.
c
Taylors is not only professional in teaching international students, but the school is also good at taking care of students.
I like this school. There are services and the teachers are qualified to teach. When you have problems, the staff is passionate. In addition, you can learn a lot of knowledge from these teachers. Choosing this school is a good decision.
Taylors is not only professional in teaching international students, but the school is also good at taking care of students.

Saturday, May 17, 2014

How to display Recent post of your blogger to your website

  2:46 AM   , ,   Edit

<div id="bop">
<marquee direction=up scrollamount='3'>
<script style="text/javascript" src="https://sites.google.com/site/projectdigitaltomato/blogger/js/rpost-english.js"></script>
<script style="text/javascript">var numposts =5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://bookofprogrammer.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</marquee>
</div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>

#rpdr, #rpdr a {color:#808080;}
#bop { border-bottom:1px #cccccc dotted; margin-top:-10px;font-size:14px; width:300px;}
.mtrpw a {font-weight:bold;color:#003366; text-decoration:none;font-style:italic; }
.mtrpwsumm {height:40px;width:280px;margin-bottom:20px;}
</style>

Wednesday, April 9, 2014

How to Fetch Data from RSS Using PHP

  1:41 AM   , , , ,   Edit

<style>
#data{
width:400px;

}
#data h2{
width:100%;
color:#1266ae;
padding:5px;
}
#data p{
border:1px solid #c6c6c6;
padding:5px;
}
#data p img{
width:100%;
}
</style>
<?php
// create a new DOMDocument object
$dom = new DOMDocument();
  //load a remote xml file
  $result = $dom->load("http://blog.lettersandlight.org/rss");
  //did the load work?
  if ($result) {
    //get an array of the items in the rss
    $items = $dom->getElementsByTagName('item');
    //loop through the array
    foreach($items as $item){
      //get the title of the current item
      $title = $item->getElementsByTagName('title')->item(0)->nodeValue;
      //get the description of the current item
      $desc = $item->getElementsByTagName('description')->item(0)->nodeValue;
      //output some of the collected data
 echo("<div id='data'>");
      echo "<h2> $title</h2><br>";
      echo "<p>$desc</p>";
 echo("</div>");
    }
  } else {
    echo "there was a problem reading the rss feed, bummer\n";
  }
?>

Monday, April 7, 2014

javascript code for mobile number verification

  11:58 PM   ,   Edit
function phonenumber(inputtxt)
{
  var phoneno = /^\d{10}$/;
  if(inputtxt.value.match(phoneno))
        {
      return true;
        }
      else
        {
        alert("Not a valid Phone Number");
        return false;
        }
}

<form name="gqform">
<input type="text" name="phone" onblur="phonenumber(document.gqform.phone)" required/>
</form>

Thursday, March 27, 2014

Beutifull Contact Us Form for Website with code

  5:05 AM      Edit


Source Code For this contact Form
  
<style>

body{
background:url(images/body_bg.png);
}
#contact_form{
width:310px;

}
.close{
background:url('images/cross.png') NO-REPEAT;
position:relative;
z-index:100;
top:7px;
left:95%;

width:310px;
height:20PX;
}
.table{
width:300px;                                                                              /*cross.png */
background:orange;
padding:10px;                                                                          /*tick.gif*/
border-radius:3px;
}                                                                                                 /*button_cancel.png   download this images places in                                                                                                                               images folder*/ 
.table td {
padding:3px;
font-family:geneva;
}
.table td input{
height:28px;
margin:3px;
width:200px;
border-radius:3px;
border:none;
box-shadow:4px 1x 2px 14x #000 inset;
background:#fff;
}
.table td textarea{
height:80px;
margin:3px;
width:200px;
border-radius:3px;
border:none;
box-shadow:4px 1x 2px 14x #000 inset;
}
.table td input:valid{
background:url('tick.gif')#fff no-repeat;
background-position:right center; 
}
.table td input:focus{
background:url('button_cancel.png')#fff no-repeat;
background-position:right center; 
}
</style>
<body>
<div id="contact_form">
<div class="close"></div>
<div style="clear:both">
</div>
<table class="table">
<form>
<tr><td></td><td valign=top></td></tr>
<tr><td valign=top><label for="name">Name </label></td><td valign=top><input type="text" id="name"name="name" required></td></tr>
<tr><td valign=top><label for="name">Mobile</label></td> <td valign=top><input type="text" id="name"name="name" required></td></tr>
<tr><td valign=top><label for="name">Email </label></td><td valign=top><input type="email" id="name"name="name" required></td></tr>
<tr><td valign=top><label for="name">Address </label></td><td valign=top><input type="text" id="name"name="name" required></td></tr>
<tr><td valign=top><label for="name">Message </label></td><td valign=top><textarea></textarea></td></tr>
<tr><td valign=top></td><td valign=top><input type="submit" name="submit" value="Submit" style="width:120px; height:40px;background:rgb(245, 219, 170)"></td></tr>
</form>
</table>
</div>

Saturday, March 1, 2014

How TO display Student Result Using Javascript

  2:44 AM   ,   Edit

Source Code Of The Program
<html>
<head>
<script>
function mks()

{

var name1=document.form.name.value;
var roll1=document.form.roll.value;
var sc1=document.form.sc.value;
var math1=document.form.math.value;
var eng1=document.form.eng.value;

var marks=eval(parseInt(sc1)+parseInt(math1)+parseInt(eng1));
var per=eval((marks*100)/300);


/*document.getElementById('result').innerHTML="Name"+name1+"<br>Roll"+roll1+"<br>Science"+sc1+"<br>Math"+math1+"<br>English"+eng1+'<br>Marks Obtain'+marks+'<br>Percentage'+per;*/


//location.href='http://google.com';
document.getElementById('result').innerHTML='name:'+name1+"<br> Roll"+roll1+"<br>marks: "+marks+"<br>Percentage"+per;
}
</script>
</head>
<body>
<form name='form'>
name: <input type='text' name='name'><br>
Roll: <input type='text' name='roll'><br>
Science: <input type='text' name='sc'><br>
Math: <input type='text'name='math'><br>
English: <input type='text' name='eng'><br>

</form>
<div style="background:red; height:30px; width:80px;" onclick='javascript:mks()'>submit</div>
<div id='result'></div>
</body>
</html>





name:
Roll:
Science:
Math:
English:
submit

Monday, February 24, 2014

How to use a Autocomplete in Website Using Jquery

  3:58 AM   , ,   Edit
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>






<script>




  $(function() {




    var availableTags = [




      "ActionScript",




      "AppleScript",




      "Asp",




      "BASIC",




      "C",




      "C++",




      "Clojure",




      "COBOL",




      "ColdFusion",




      "Erlang",




      "Fortran",




      "Groovy",




      "Haskell",




      "Java",




      "JavaScript",




      "Lisp",




      "Perl",




      "PHP",




      "Python",




      "Ruby",




      "Scala",




      "Scheme"




    ];




    $( "#tags" ).autocomplete({




      source: availableTags




    });




  });




  </script>




<div class="ui-widget">





  <label for="tags">Tags: </label>




  <input id="tags">




</div>



Subscribe to: Posts (Atom)