SOLVED Google fonts not working on iphone or old browsers

SOLVED Google fonts not working on iphone or old browsers

Google fonts not working in IE7, IE8, IE9.
Google fonts not working on iphone with old os
Google fonts not display on iphone and old browsers
Google fonts loading issue in old browsers

Google web fonts provide the solution to display the fonts on your web-site without install that fonts at end user’s machine, before few years if we need to apply some fonts on the web-site then that font should be installed in the user’s machine otherwise its not display but now google fonts provide the solution for that and its very simple.

you just need to load google fonts using below lines and just change the font-family in query string, then you easily apply that fonts in your web-page.

 
<link href='http://fonts.googleapis.com/css?family=McLaren' rel='stylesheet' type='text/css'>

Recently, i am working on that and doing testing on the iphone then i knew that this font is not working, Its working perfect in my iphone which is iphone 5 but when i checked in my friend’s iphone then its not working. he is using iphone 4 with OS 4.2.2. Later on i checked in the IE7, IE8 and some other old browser then its not working in those browser as well. I am more frustrating when i see that its working in some apple products and some windows products because its working fine with my Macs as well.

After some research i solved the issue and when you know it that you surprise that its a silly things. Its solve in some apple products and browsers using the !important keyword as shown below.

 
.h1{font-family:'McLaren', cursive !important;}

if you are not able to resolve it using this then go to the http://www.fontsaddict.com/ and download fonts and upload it in your css folder and add below code in your css and then its works in all machines.

 
@font-face {
  font-family: 'McLaren';
  font-style: normal;
  font-weight: 400;
  src: url(McLaren-Regular.ttf);
}

print only content of the webpage or print content div only or just prints the content of a div not the entire window

print only content of the webpage or print content div only or just prints the content of a div not the entire window

Here is the solution of how to print content only of the webpage or how to print only content in html page.

How to print content div only, not the entire window?
Use javascript:window.print() but do not print header and footer.
print specific area of the webpage using window.print() command.
only print content from html page.

Now a days, many web-site offer the “print this page” link in their web-page somewhere in header or footer. Some people never use that link and think that its same as windows print command or ctrl + p command, which is totally wrong, if you want to print some specific area of your webpage or just content area of the webpage then how you print?

if you are a web developer and you need to develop this in your web-site where user use the print link of your web-page and its print only the content of the web-page rather then the full web-page as its print like windows print feature. Normally this links are useful to those who need to print more then 1 pages of your web-site, as they are not interested in the header and footer of your web-page, they need the content only.

Its very simple to develop this feature, you need to place the below link on your web-page

		  <a href="javascript:window.print();">Print this Page </a>

Now, you need to create print.css and include it in your web-page using below link, make sure that the media is “print” not “css”

 

I know there is a question in your mind that what we need to write in the print.css file. below is the sample of the print.css file which is very easy to understand and implement.

			@charset "utf-8";
			/* CSS Document */
 
			#header
			{
				display:none;
			}
 
			#top_topic_button
			{
				display:none;
			}
 
			#right_column
			{
				display:none;
			}
 
			#footer
			{
				display:none;
			}
 
			#bottom_bar
			{
				display:none;
			}
 
			#right_column_menu-topic
			{
				display:none;
			}
 
			#crumbs
			{
				display:none;
			}
 
			#general
			{
				display:none;
			}

Basics of Dynamic HTML

Basics of Dynamic HTML

When you make a dynamic web-site then you use the other language like php,asp, asp.net and jsp. when the dynamic page execute on the web-server then its make the pure html content and return it to browser then browser will display it on the web-page.

Once your dynamic code wrote in the page execute and its return the pure html code to browser then again if you need to run any dynamic code then you need to send request to the web-server. Dynamic HTML is the combination of HTML and a scripting language which we use as a scripting language e.g. VBScript, JavaScript.  using this scripting language you can give effects on the page like mouse-over, mouse click, mouse out, mouse hover etc…

when we use any scripting language and use function then we need to call it when user do any event on the web page, and the effects which is come when we call that function then its known as the dynamic html. so basically when web page is loaded and then anything change using the scripting language like VBScript and JavaScript then its knows as dynamic html.

different doctypes used in html

doctypes is one of the important thing of each web-page, when you define a doctypes in the webpage then its tell the browser about the rules of the markup language, and as per the rules browser render the content of the web page.

Document Type Definition (DTD) is one of the most important part in html, doctypes is not the html tags or html elements but its define in the starting of the html web-page, so when any html web-page start execution then its first search for the doctypes and refer the rules as per the doctypes. once its done then start rendering of the webpage content.

Below is the list of different types of doctypes

 
1) HTML 4.01 Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 
2) HTML 4.01 Transitional : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
3) HTML 4.01 Frameset : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

what is difference in different doctypes used in html

doctypes is one of the important thing of each web-page, when you define a doctypes in the webpage then its tell the browser about the rules of the markup language, and as per the rules browser render the content of the web page.

Document Type Definition (DTD) is one of the most important part in html, doctypes is not the html tags or html elements but its define in the starting of the html web-page, so when any html web-page start execution then its first search for the doctypes and refer the rules as per the doctypes. once its done then start rendering of the webpage content.

Below is the list of different types of doctypes

1) <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

2) <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

3)  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

how to create iframe in html?

How to create iframe in html?

html web page include the text content, images, links, tables, divs and many more. but we can not include the html page in the html web page, if you want to include the full html page inside another html page then it is possible using the iframe, iframe is used to include one html page in to another html page, you can include as many pages as you want, it means there is no limitation to use the iframe in web-page, you can use as many iframe as you want.

iframe Syntax:

<iframe src=”myurl”></iframe>

here myurl is the url of another web page which you want to show in the iframe. there is many property of iframe which you can set in the iframe tag, which is knows as name, id, width, height, border, padding, margin, background color, text color etc…

html table creation

html table creation
how to make table using html?

using html you can create a table which is used to format the data, table creation is very easy and simple. in html tables are created using the <html> and </html> tags. basically tables are divided in to rows and columns, rows are define in the <tr> and </tr> tags, while columns are define in the <td> and </td> tags.

table rows are not alone its come with the table column, i mean if you want to write any content then you can not write in the tr tags, you need to write content like text,images,forms,links,nested table inside the td tags. i shows example of one table which will clear you on table in html

Example:

<table border=”1″ width=”100%”>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 2</td>
<td>row 2, column 2</td>
</tr>
<tr>
<td>row 3, column 3</td>
<td>row 3, column 3</td>
</tr>
</table>

if you write above things in the html file and run that file in the browser then you get below output.

 

row 1, column 1 row 1, column 2
row 2, column 2 row 2, column 2
row 3, column 3 row 3, column 3

 

 

introduction of html and dhtml

what is html?

what is dhtml?

HTML is short name of Hyper text markup language

DHTML is short name of Dynamic hyper text markup language

html and dhtml is used to make a web-site, its also use to make a stand alone web-based application.

html is mark up language, we can not say that its a programming language as like php,asp,asp.net and jsp.

in html we use the tags and that markup tags are known as html tags

all html tags are define in the brackets, fro example <html></html>

all html tags come in the pair, pair of start element and end element, <html> is know as start element and </html> is known as end elements. we can say that its opening tag and closing tag.

Basic Example of html tags are as below.

<html></html>
<head></head>
<body></body>
<p></p>
<span></span>
<strong></strong>
<table></table>
<tr></tr>
<td></td>

character sets in html document

When we create any html page first we need to set the character set because browser need to know which character set used for the page to display the html page correctly.

world wide character set is ASCII character set, because its use alphabet in uppercase and lowercase, numeric numbers 0-9 and some special character. Now a day almost all new browser use ISO-8859-1 character set. If you want to change the character set then you need to define it in the <meta> tag.

Below is the list of the character set which is generally use in html page, you can use any character set as per your requirement.

Character set Description Covers
ISO-8859-1 Latin alphabet part 1 North America, Western Europe, Latin America, the Caribbean, Canada,
Africa
ISO-8859-2 Latin alphabet part 2 Eastern Europe
ISO-8859-3 Latin alphabet part 3 SE Europe, Esperanto, miscellaneous others
ISO-8859-4 Latin alphabet part 4 Scandinavia/Baltics (and others not in ISO-8859-1)
ISO-8859-5 Latin/Cyrillic part 5 The languages that are using a Cyrillic alphabet such as Bulgarian,
Belarusian, Russian and Macedonian
ISO-8859-6 Latin/Arabic part 6 The languages that are using the Arabic alphabet
ISO-8859-7 Latin/Greek part 7 The modern Greek language as well as mathematical symbols derived from
the Greek
ISO-8859-8 Latin/Hebrew part 8 The languages that are using the Hebrew alphabet
ISO-8859-9 Latin 5 part 9 The Turkish language. Same as ISO-8859-1 except Turkish characters
replace Icelandic ones
ISO-8859-10 Latin 6 Lappish, Nordic, Eskimo The Nordic languages
ISO-8859-15 Latin 9 (aka Latin 0) Similar to ISO 8859-1 but replaces some less common symbols with the
euro sign and some other missing characters
ISO-2022-JP Latin/Japanese part 1 The Japanese language
ISO-2022-JP-2 Latin/Japanese part 2 The Japanese language
ISO-2022-KR Latin/Korean part 1 The Korean language

There is one more character set named UTF-8 which is more useful, if you are using multiple language in your site then you should use UTF-8 character set.

UTF-8 : UTF8 character set is 4 bytes long. UTF-8 character set  can represent any language character in the unicode standard.

difference between margin and padding in html

What is the difference between padding and margins?

When new designer or programmer use the html and need to set margin and padding then its confuse. the reason behind that is they both like the same thing its apply white space around an image or object.

Well, i aware that padding leave the space inside the border, if you use image then its between the border and the actual image, if you use table then its incide the border and cell contents.  padding is apply completely around the contents or images, when you use padding, there is padding on the top, bottom, right and left sides.

While margins leave the space outside the border, if you use image then its apply outside the image border, its apply between the border and the other elements next to this object. as like the padding, the margin is apply completely around the contents or images, when you use margin, there are margins on the top, bottom, right, and left sides.

Example of Padding:

Example

Example of Margin:

Example

In the Above both example i use 10px for padding and margin, you can see the difference and easily understand it.