Archive | html

നിങ്ങൾക്കും ഒരു വെബ്സൈറ്റ് വേണ്ടേ?

Posted on 28 July 2013 by rajesh

chayilyam - About Theyyam - a Ritual Art of North Keralaഇന്റെർനെറ്റിന്റെ ലോകത്തേക്ക് എത്തിയപ്പോൾ തന്നെ മനസ്സിൽ തങ്ങിയ ഒരു മോഹമായിരുന്നു സ്വന്തമായി ഒരു വെബ്സൈറ്റുണ്ടാക്കുക എന്നത്. 1998 ഇൽ ആണ് ആദ്യമായി ഒരു മെയിൽ ഐഡി യാഹുവിൽ ഉണ്ടാക്കുന്നത്. Continue Reading

Tags:        

Comments (4)

New Markup Elements for HTML5

Posted on 14 June 2011 by rajesh

New Markup Elements

New elements for better structure:

Tag Description
For external content, like text from a news-article, blog, forum, or any
other content from an external source
For content aside from the content it is placed in. The aside content should
be related to the surrounding content
A button, or a radiobutton, or a checkbox
For describing details about a document, or parts of a document
A caption, or summary, inside the details element
For grouping a section of
stand-alone content, could be a video
The caption of the figure section
For a footer of a document or section, could include the name of the author, the
date of the document, contact information, or copyright information
For an introduction of a document or section, could include navigation
For a section of headings, using

to

, where the largest is the main
heading of the section, and the others are sub-headings
For text that should be highlighted
For a measurement, used only if the maximum and minimum values are known
For a section of navigation
The state of a work in progress
For ruby annotation (Chinese notes or characters)
For explanation of the ruby annotation
What to show browsers that do not support the ruby element
For a section in a document. Such as chapters, headers, footers, or any
other sections of the document
For defining a time or a date, or both
Word break. For defining a line-break opportunity.

New Media Elements

HTML5 provides a new standard for media content:

Tag Description
For multimedia content, sounds, music or other audio streams
For video content, such as a movie clip or other video streams
For media resources for media elements, defined inside video or audio
elements
For embedded content, such as a plug-in

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag Description
For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more functionality:

Tag Description
A list of options for input values
Generate keys to authenticate users
For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element’s type attribute has many new values, for
better input control before sending it to the server:

Type Description
tel The input value is of type telephone number
search The input field is a search field
url The input value is a URL
email The input value is one or more email addresses
datetime The input value is a date and/or time
date The input value is a date
month The input value is a month
week The input value is a week
time The input value is of type time
datetime-local The input value is a local date/time
number The input value is a number
range The input value is a number in a given range
color The input value is a hexadecimal color, like #FF8800

Tags:

Comments (0)

HTML5

Posted on 25 March 2011 by rajesh

നെറ്റിലൂടെയുള്ള ആശയവിനിമയത്തിനു ചുക്കാന്‍ പിടിക്കുന്ന വളരെ ലളിതമായ ഒരു കമ്പ്യൂട്ടര്‍ ഭാഷയാണ് HTML. ഈ അടുത്ത് ഇറങ്ങിയ HTML5 ആണ് HTML -ന്റെ പരിഷ്കരിച്ച അവസ്സന പതിപ്പ്. ഒരുപാട് പുതിയ ടാഗുകളും എപിഐ കളും ഉള്‍ക്കൊള്ളിച്ചുകൊണ്ട് വളരേ നൂതനമായൊരു ബ്രൗസിംങ് അനുഭവം പ്രദാനം ചെയ്യാന്‍ HTML5 നു കഴിയും എന്നു വേണം കരുതാന്‍. HTML 4.01, XHTML 1.0 , DOM Level 2 HTML ഇവയ്ക്കു ശേഷം ഇറങ്ങിയ അടുത്ത വെബ്‌സ്റ്റാന്‍‌ഡേര്‍ഡായിട്ടാണ്‌ HTML5 ഇറങ്ങിയിരിക്കുന്നത്. Flash, Silverlight, Java തുടങ്ങിയ RIA Technologies നെ കുറിച്ചുള്ള വേവലാതി ഇനി വേണ്ട. ഇവ സപ്പോര്‍‌ഡ് ചെയ്യാനുതകുന്ന ടാഗുകളും അതിനു വേണ്ട എപിഐ കളും HTML5 നോടൊപ്പം കൂട്ടിച്ചേര്‍ത്തിരിക്കുന്നു. ഔദ്യോഗികമായി ഇതു പുറത്തിറങ്ങിയെങ്കിലും HTML5 സ്റ്റാന്‍ഡേഡൈസേഷന്‍ വരും വര്‍ഷങ്ങളിലും തുടരും. എല്ലാ ബ്രൗസറുകളും HTML5 ലെ എല്ലാ ടാഗുകളെയും സപ്പോര്‍ട്ട് ചെയ്‌തു തുടങ്ങിയിട്ടില്ല. എങ്കിലും മോസില്ല, ഗൂഗിള്‍ ക്രോം എന്നിവയില്‍ HTML5 ശക്തി വളരേ പ്രകടമായി കാണാവുന്നതാണ്. ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ എന്ന മൈക്രോസോഫ്‌റ്റ് ബ്രൗസറിന്റെ പരിഷ്‌കരിച്ച പതിപ്പായ ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ 9 – ഇല്‍ ആണ് HTML5 ന്റെ പ്രകടനം താരതമ്യേന വളരേ കുറവാണ്.

Tags:      

Comments (0)

ജിമെയില്‍ html സിഗ്‌നേച്ചര്‍

Posted on 17 August 2010 by rajesh

How to create Gmail Signatureയാഹുമെയിലില്‍ html signature കൊടുക്കാനുള്ള സൗകര്യം മുമ്പുതന്നെ ഉണ്ട്. ഏതെങ്കിലും html editor-ല്‍ ഒരു കുഞ്ഞു സിഗ്‌നേച്ചറുണ്ടാക്കി കോപ്പി എടുത്ത് അവിടെ പേസ്റ്റ് ചെയ്താല്‍ മതിയാവും. എന്നാല്‍ ജിമെയില്‍ പോലുള്ള പല മെയില്‍ സര്‍‌വീസുകളിലും ആ ഒരു സൗകര്യം നിലവില്ലില്ല. html ഉപയോഗിച്ച് അത്യാവശ്യം കളികള്‍ കളിക്കുന്നവരെ നിരാശരാക്കുന്ന ഒരു കാര്യമാണത്. എന്നാല്‍ വൈസ്‌സ്റ്റാമ്പെന്ന ഒരു മോസില്ല ആഡ്‌ഓണ്‍ ഉപയോഗിച്ച് നമുക്കിത് ഭംഗിയായി ചെയ്യാവുന്നതാണ്‌. എന്റെ ജീമെയില്‍ കിട്ടിയ പലരും, അതിലെ സിഗ്നേച്ചര്‍ കണ്ടിട്ട് അതെങ്ങനെ ഉണ്ടാക്കിയെന്നു ചോദിക്കുകയുണ്ടായി. (ദാ ഇവിടെ ഉണ്ട് ആ സിഗ്നേച്ചര്‍!)അന്നേ തോന്നിയ ഒരാശയമായിരുന്നു, ജിമെയില്‍ സിഗ്നേച്ചറിനെ കുറിച്ചൊരു പോസ്റ്റ്. ഇതു കൊണ്ട് ജീമെയിലില്‍ മാത്രമല്ല, മറ്റു പല മെയില്‍സര്‍‌വീസുകളിലും നമുക്ക് സിഗ്നേച്ചര്‍ ഉണ്ടാക്കാവുന്നതാണ്.

സിഗ്നേച്ചര്‍

മെയിലിനു കീഴെ അല്പം ഭംഗിയില്‍ പേരും അഡ്രസ്സും ഫോണ്‍ നമ്പറും അതുപോലെ അത്യാവശ്യം ചിലകാര്യങ്ങളും html കോഡുപയോഗിച്ച് എഴുതുക എന്നേ സിഗ്നേച്ചര്‍ എന്നതുകൊണ്ട് ഇവിടെ അര്‍‌ത്ഥമാക്കുന്നുള്ളൂ. അതിനായ് വേണമെങ്കില്‍ ഇമേജുകളും ഉപയോഗിക്കാം. പിന്നീട് മെയില്‍ കം‌മ്പോസുചെയ്യുമ്പോള്‍ അതു താഴെ അറ്റാച്ച്‌ഡായി വരുന്നതു കാണാം. ഇമേജുകള്‍ ഉപയോഗിക്കുന്നവര്‍, ആ ഇമേജുകള്‍ ഓണ്‍ലൈനില്‍ എന്നും സൂക്ഷിക്കാന്‍ ഒരിടം(പിക്കാസ വെബ്‌ആര്‍ബം, നിങ്ങളുടെ വെബ്‌സ്പേസ്, ഇതുപോലെ ഏതെങ്കിലും ഒന്ന്) കണ്ടെത്തുകയും അവിടെ ആ ഇമേജുകള്‍ ആദ്യം തന്നെ സൂക്ഷിക്കേണ്ടതുമാണ്‌.

ഡൗണ്‍ലോഡുചെയ്യുക

മോസില്ലയില്‍ ഈ ആഡ്‌ഓണ്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്യുക. ഇതു ഡൗണ്‍‌ലോഡ് ചെയ്തശേഷം തുറന്നു വെച്ച മോസില്ല ബ്രൗസറിലേക്ക് ഡ്രാഗ്‌ ചെയ്തുകൊണ്ടിട്ടാല്‍ മതി. അപ്പോള്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്യാനുള്ള ഓപ്‌ഷന്‍ കിട്ടും. സാധാരണ ആഡ്‌ഓണ്‍‌സ് ഇന്‍സ്‌റ്റാള്‍ ചെയ്യുന്നതുപോലെ തന്നെയാണ്‌. ആഡ്‌ഓണ്‍ ഇന്‍സ്റ്റാള്‍ ചെയ്തു കഴിഞ്ഞാന്‍ ബ്രൗസര്‍‌ ഒന്നു റീസ്റ്റാര്‍‌ട്ട് ചെയ്യാന്‍ പറയും. ഇതിനായി ബ്രൗസര്‍‌ ക്ലോസ്‌ ചെയ്ത ശേഷം വീണ്ടും ഓപ്പണ്‍‌ ചെയ്താല്‍ മതിയാവും. ഇനി മോസില്ലയുടെ മുകളിലെ മെനുവില്‍ ടൂള്‍‌സ് ക്ലിക്ക് ചെയ്ത് അതിലെ ആഡ്‌ഓണ്‍‌സ് (Add-Ons) ക്ലിക്ക് ചെയ്യുക. ആഡ്‌ഓണ്‍‌സിന്റെ ഒരു വിന്‍‌ഡോ ഓപ്പണ്‍‌ ചെയ്തു വരുന്നതു കാണാം. അതില്‍ എക്‌സ്റ്റന്‍‌ഷന്‍‌സ് ‍‌(extensions) എന്നൊരു ടാബുണ്ടാവും. അതു ക്ലിക്കുചെയ്ത് താഴെ വൈസ്‌സ്റ്റാമ്പ് എന്നൊരു എക്‌സ്റ്റന്‍‌ഷന്‍ കൂട്ടിച്ചേര്‍‌ത്തിട്ടുണ്ടോ എന്നു നോക്കുക: ചിത്രം നോക്കിയാല്‍ കൂടുതല്‍‌ മനസിലാവും.Mail Signature

ഇതില്‍ വന്നാല്‍ നിങ്ങളുടെ ആഡ്‌ഓണ്‍ കൃത്യമായിതന്നെ ഇന്‍സ്‌റ്റാള്‍‌ഡ് ആണെന്നര്‍‌ത്ഥം.

സിഗ്നേച്ചര്‍‌ ഉണ്ടാക്കുക

വളരെ ശ്രദ്ധിച്ചുചെയ്യേണ്ട ഒരു കാര്യമാണിത്. നിങ്ങള്‍ക്ക് ഏതെങ്കിലും html എഡിറ്റര്‍ ഉപയോഗിച്ച് നല്ലൊരു സിഗ്നേച്ചര്‍ ഉണ്ടാക്കാവുന്നതാണ്‌. (ഞാന്‍ ഉപയോഗിക്കുന്നത് അഡോബിന്റെ ഡ്രീം‌വീവറാണ്‌) സ്റ്റൈല്‍‌സ് ഒക്കെ ഇന്‍ലൈന്‍‌ ആയിത്തന്നെ കൊടുക്കണം. ഇമേജുകള്‍ ഉപയോഗിക്കുന്നുണ്ടെങ്കില്‍ മുകളില്‍ പറഞ്ഞത് ഓര്‍‌മ്മയുണ്ടല്ലോ അവ ഓണ്‍‌ലൈനില്‍ എന്നും ഉണ്ടാവുന്ന വിധം ഏതെങ്കിലും ഒരു സെര്‍‌വറില്‍ വേണം സൂക്ഷിക്കാന്‍. ഇനി ഇതൊന്നുമറിയാത്തവര്‍ക്ക് ഞാന്‍ ഉപയോഗിക്കുന്ന സിഗ്നേച്ചറിന്റെ കോഡുതരാം, അതിലെ കണ്ടറ്റുപാര്‍‌ട്ടില്‍ നിങ്ങള്‍ക്കു വേണ്ടുന്ന മാറ്റങ്ങള്‍ വരുത്തിയാല്‍ മതി. അതില്‍ കാണുന്ന ഇമേജ്‌സ് ഒക്കെ ഓണ്‍‌ലൈനില്‍ തന്നെ ഉള്ളതിനാല്‍ അതിനേകുറിച്ചും വേവലാതി വേണ്ട.

എന്റെ സിഗ്നേച്ചറിന്റെ കോഡ്.

<div style=”padding: 5px 5px 5px 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border-top: 1px solid rgb(238, 238, 238); border-bottom: 1px solid rgb(238, 238, 238); -moz-border-radius: 3px 3px 3px 3px; height: 110px; margin: 0pt;”> <img style=”width: 70px; height: 70px; float: left; border: medium none;” src=”http://chayilyam.com/signature/rajesh-k-odayanchal.png”>

<div style=”font-family: Arial,Helvetica,sans-serif; font-size: 16px; color: rgb(187, 187, 187); font-weight: bold; margin-bottom: 3px;”>Rajesh K</div>

<div style=”font-size: 12px; color: rgb(136, 136, 136); line-height: 15px;”><span style=”font-size: 12px; color: rgb(0, 51, 102); padding-right: 5px; margin-top: 2px;”>Tel:</span>+91 – 9980591900</div>

<div style=”font-size: 12px; color: rgb(136, 136, 136); line-height: 15px;”><span style=”font-size: 12px; color: rgb(0, 51, 102); padding-right: 5px; margin-top: 2px;”>Email:</span><a href=”#” style=”font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: rgb(91, 153, 254); text-decoration: none;”>rajeshodayanchal@gmail.com</a></div>

<div style=”font-size: 12px; color: rgb(136, 136, 136); line-height: 15px; margin-bottom: 9px;”><span style=”font-size: 12px; color: rgb(0, 51, 102); padding-right: 5px; margin-top: 2px;”>Website:</span><a href=”http://chayilyam.com” target=”_blank” style=”font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: rgb(91, 153, 254); text-decoration: none;”>http://chayilyam.com</a></div>

<div style=”display: block; float: left;”>

<ul style=”margin: 0pt; padding: 0pt; list-style: none outside none; width: auto;”>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My LinkedIn Profile” href=”http://in.linkedin.com/in/rajeshodayanchal”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/linkedin.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Twitter Account” href=”http://www.twitter.com/odayanchal/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/twitter.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Facebook Account” href=”http://www.facebook.com/#%21/odayanchal”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/facebook.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Orkut Profile” href=”http://www.orkut.co.in/Main#Profile?uid=2307759227150664180″><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/orkut.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Delicious Bookmarks” href=”http://delicious.com/rajeshodayanchal/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/delicious.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Stumbled Sites” href=”http://www.stumbleupon.com/stumbler/rajeshodayanchal/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/stumble.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Youtube Videos” href=”http://www.youtube.com/user/rajeshodayanchal”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/youtube.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Picasa Web albums” href=”http://picasaweb.google.com/rajeshodayanchal/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/picasa.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Flickr Web albums” href=”http://www.flickr.com/photos/90118566@N00/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/flickr.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Myspace Account” href=”http://www.myspace.com/328788045″><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/myspace.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Google Profile” href=”http://www.google.com/profiles/rajeshodayanchal”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/google.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Yahoo Profile” href=”http://profiles.yahoo.com/u/LX5WYYFN6J3ZWSY2DPB257GRUE”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/yahoo.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My WordPress Account” href=”http://en.wordpress.com/odayanchal/#my-blogs”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/wordpress.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My Blog” href=”http://www.moorkhan.blogspot.com/”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/blog.png”></a> </li>

<li style=”float: left; list-style: none outside none; display: inline; width: 32px; margin: 0pt; padding: 0pt; outline: medium none; border: medium none;”><a style=”height: 32px; width: 32px; display: block;” target=”_blank” title=”My RSS Feeds” href=”http://feeds.feedburner.com/Chayilyam”><img style=”margin: 0pt; padding: 0pt; border: medium none; outline: medium none; text-decoration: none;” src=”http://chayilyam.com/signature/rss.png”></a> </li>

</ul>

</div>

</div>

ഈ കോഡിന്റെ പ്രിവ്യു ഇവിടെ കൊടുത്തിരിക്കുന്നു. ഈ കോഡ് ഇതുപോലെ കോപ്പി എടുക്കുക.

ഈ കോഡില്‍ തിരുത്തലുകള്‍ വരുത്താന്‍ പ്രയാസം തോന്നിയതായി പലരു പറഞ്ഞതിനാല്‍ കോഡ് എഡിറ്റിംങിനെ കുറിച്ച് അല്പം കൂടി വിശദമായി ഇവിടെ കൊടുത്തിരിക്കുന്നു. (click here >> ). അതുകൂടി കാണുക.
  • ഒരു നോട്പാഡില്‍ അതു പേസ്റ്റ്‌ ചെയ്യുക – ഒരു html എഡിറ്റാറാണെങ്കില്‍ വളരേ നല്ലത്.
  • പേര്‍, നമ്പര്‍ എന്നിവ മാറ്റുക,
  • സോഷ്യല്‍‌ നെറ്റ്‌വര്‍ക്കിലെ നിങ്ങളുടെ പ്രൊഫൈല്‍ ലിങ്ക് കണ്ടുപിടിച്ച് വളരെ ശ്രദ്ധാപൂര്‍‌വം മാറ്റുക,
  • ഇനി ഇവിടെ കൊടുത്തിരിക്കുന്ന സോഷ്യല്‍ നെറ്റ്വര്‍ക്ക് ലിങ്കില്‍ ഏതെങ്കിലും ഒന്നില്‍ നിങ്ങള്‍ക്ക്‌ പ്രൊഫൈല്‍ ഇല്ലെന്നു കരുതുക. അതപ്പോള്‍ ഒഴിവാക്കേണ്ടതാണല്ലോ. അതിന് ആ ലിങ്ക് ഉള്‍പ്പെട്ട <li> ടാഗ് ( <li> style=”float:…. മുതല്‍ </li> വരെ ഉള്ള ഭാഗം) എടുത്തു കളഞ്ഞാല്‍ മതി.
  • ഇതില്‍ ഇല്ലാത്തൊരു ലിങ്ക് കൂട്ടിച്ചേര്‍ക്കാന്‍ അല്പം പാടാണ്‌.

ഇനി ചെയ്യേണ്ടത്

ഇനി, മോസില്ല ഓപ്പണ്‍ ചെയ്യുക. നേരത്തേ പറഞ്ഞ ആഡോണ്‍‌ എടുക്കക ( click: tools -> Add-ons then Extensions) അതില്‍ Options എന്നൊരു ബട്ടണ്‍‌ ഇടതുവശത്തുണ്ടാവും അതു ക്ലിക്ക്‌ ചെയ്യുക. ഇപ്പോള്‍ വരുന്ന വിന്‍‌ഡോ ഒന്നു നന്നായി നോക്കുക. അതില്‍ Choose your Signature: എന്നുണ്ട്; Your Details: എന്നൊരു സെക്‌ഷന്‍ ഉണ്ട് – അതില്‍ തന്നെ HTML എന്നൊരു ബട്ടണ്‍‌ ഉണ്ട്. അതില്‍ ക്ലിക്ക്‌ ചെയ്താല്‍‌ വിഷ്വല്‍‌ (Visual) എന്നായി അതിന്റെ പേരു മാറുന്നതു കാണാം. അതിനു താഴെ വലിയൊരു ടെക്‌സ്‌റ്റ്ബോക്‌സും കാണാം. HTML എന്നു പേരുള്ള ബട്ടണ്‍‌ ക്ലിക്ക് ചെയ്താല്‍‌ വരുന്ന ഈ ബോക്‌സില്‍‌ നമ്മള്‍ നേരത്തേ നോട്‌പാഡില്‍ തയ്യാറാക്കി വെച്ചിരിക്കുന്ന html code പേസ്റ്റ് ചെയ്താല്‍‌ മതി. ഇനി വേണമെങ്കില്‍ ഏറ്റവും താഴെ ഉള്ള Preview എന്ന ബട്ടണ്‍‌ ക്ലിക്ക് ചെയ്താല്‍ അതെങ്ങനെ വരുമെന്നു കാണാനുമാവും. ഇനി എല്ലാം OK കൊടുത്തു ക്ലോസ്‌ ചെയ്യുക.

ഇനി നിങ്ങളുടെ ജിമെയില്‍ ഓപ്പണ്‍‌ ചെയ്യുക. അവിടെ സെറ്റിം‌ങ്‌സില്‍‌ ജെനറല്‍‌ പാര്‍‌ട്ടില്‍ താഴെ സിഗ്നേച്ചര്‍ എന്ന ഭാഗം നോക്കുക. അവിടെ താഴെ കാണുന്നതു പോലെ വന്നു കാണും.
My Gmail Signature
അത്യാവശ്യം വേണ്ട എഡിറ്റിംങുകള്‍ ഇവിടേയും നടത്താം. രണ്ട് സിഗ്നേച്ചര്‍ വന്നിട്ടുണ്ടെങ്കില്‍ ഒന്ന് ഇവിടെവെച്ചു തന്നെ ഡിലീറ്റ് ചെയ്തേക്ക്. സിഗ്നേച്ചര്‍ ബോക്സില്‍ സിഗ്നേച്ചര്‍ വന്നു കഴിഞ്ഞാല്‍‌ വീണ്ടും മോസില്ലയുടെ ടൂള്‍സില്‍‌ ആഡോണ്‍‌സില്‍ പോയി ആ ആഡോണിനെ എടുക്കുക. അതിനി വേണ്ട. അതവിടെ കിടന്നാല്‍ മെയില്‍ സിഗ്നേച്ചറില്‍ ഇനി രണ്ട് സിഗ്നേച്ചര്‍ വനുകൊണ്ടിരിക്കും. അവിടെ നിന്നു തന്നെ Uninstall ചെയ്തു കളഞ്ഞേക്ക്… അല്ലെങ്കില്‍ ഡിസേബിള്‍ ചെയ്തു വെച്ചേക്ക്. (ഡൗണ്‍ലോഡുചെയ്യുക എന്ന മുകളിലെ ഹെഡിം‌ങിനു കീഴിലുള്ള ചിത്രം നോക്കുക. uninstall ചെയ്യാനും disable ചെയ്യാനും ഉള്ള ബട്ടണുകള്‍ കാണാവുന്നതാണ്‌.)

വളരെ എളുപ്പമാണിത്. കോഡ് എഡിറ്റുചെയ്യുമ്പോള്‍ നല്ല ശ്രദ്ധ വേണം. എന്റെ ജീമെയില്‍ സിഗ്നേച്ചറിന്റെ ഗുട്ടന്‍‌സ് പിടികിട്ടിക്കാണുമെന്നു കരുതുന്നു. സ്വന്തമായി ഇതിനുവേണ്ട കോഡ് എഴുതുമ്പോള്‍ ശ്രദ്ധിക്കേണ്ട കാര്യം അതിന്റെ സ്റ്റൈല്‍‌ ഇന്‍ലൈനായി തന്നെ എഴുതണം എന്നതാണ്‌. പുതിയൊരു സിഗ്നേച്ചര്‍‌ ഉണ്ടാക്കി തരണമെന്ന് ആരും പറഞ്ഞേക്കരുത് :) പലര്‍ക്കും പല ഐഡിയ ആണല്ലോ ശ്രമിച്ചു നോക്കുക. വിജയിച്ചാല്‍ ഒരു മെയില്‍ എനിക്കും അയക്കാന്‍ മറക്കരുത്!

Tags:            

Comments (0)

Dynamic Font Technology

Posted on 27 July 2010 by rajesh

Dynamic Font TechnologiesWhen designing a logo or other material for your website, most people will probably know about the importance of factors such as colours, space, shapes and design. Sure, designing a logo is about all these things and a visually easily recognisesable logo is a must.

However, choosing the right font for your materials like logo, page content is equally as important. In fact many incredibly successful products are almost synonymous with a certain kind of font. Think about Coca Cola’s curved font or IBM’s clear cut letters or any other famous company’s logo. Those fonts have become visually ingrained in peoples conception of the brand. Choosing the right font type for your logo is not just about recognisability, its also about choosing a font that communicates the right message to the general public. It has to do with congruently.

What is Font?

Font is a design for a set of characters. A font is the combination of typeface and other qualities, such as size, pitch, and spacing. For example, Times Roman is a typeface that defines the shape of each character. Within Times Roman, however, there are many fonts to choose from – different sizes, italic, bold, and so on.

The height of characters in a font is measured in points, each point being approximately 1/72 inch. The width is measured by pitch, which refers to how many characters can fit in an inch. Common pitch values are 10 and 12. A font is said to be fixed pitch if every character has the same width. If the widths vary depending on the shape of the character, it is called a proportional font.

Dynamic Font

Typography plays a very important role in Web Design. Current Web Design trends involves variety of fonts to ensure a good user experience. Obviously these are not-standard system fonts in many cases. Well, Image Replacement has always been a good solution but not for a site with too many elements or even sites with dynamic content. One of the sweetest things to come out of the HTML 3.0 specification was the ability to use the font of your choice on your Web pages. This ability to use “dynamic fonts,” or fonts which are downloaded from the server to your browser, has enabled developers to create and use fonts on their pages which create a whole new look from the same old text. So that you can see that this is just inline text, drag your mouse across the text. You can cut and paste it just like any other text on the page. Dynamic fonts can be used for seamless viewing of the contents (web pages) when the corresponding font in which the content has been created is not present on clients machine. The Dynamic fonts are placed on the server on which the web pages are hosted. They travel to the client machine in a manner transparent to the user. They remain in the cache of the users machine till the time he is viewing a particular webpage and are rendered back the browser once the user exits out of the website.

Here is a clean list of popular Dynamic Image Replacement solutions that will help you solve various font related issues.

Google Font API

The world of web typography is advancing with leaps and bounds. Already we have the options of SiFR, Cufon, Typekit, @font-face, etc and now, Google has introduced their own custom font service under the Google Font API. Let’s take a look at what the Google Font API is and how you can use it in your own web designs. The Google Font API is basically a shortcut to manually using the CSS3 @font-face property. When you insert the Google code in your website, the Font API returns a stylesheet including an @font-face rule for your chosen font. Google will do all the hard work in getting the font to work in non-CSS3 browsers such as Internet Explorer.

The Google Font API is one of the most easy to use custom web font solutions out there. With just a line of code you’re ready to import a range of custom fonts from the Google Font Direcory.

  • The Google Font API works like a charm in most browsers.
  • The Google Font Directory includes a range of tasteful and stylish fonts to choose from, as well as a selection of more decorative options.
  • All fonts are released under an Open Source license, so the Google Font API can be used in both your commercial and personal projects.
  • Text rendered using the Google Font API is still selectable, which is one drawback with some solutions like SiFR.
  • The Google Font API doesn’t rely on Javascript, so the customised fonts still show if the user has Javascript disabled.
  • Because the fonts are rendered with good old CSS, any additional styling such as the CSS3 text-shadow property can be added.

Drawbacks of Google Font API

Despite having a few nice options in the Font Directory, the choice is fairly limited. However you can tie the Google Font API with Typekit using Javascript and the WebFont loader to open up further font options.

Most browsers will load the rest of the page before rendering the font. This may leave a blank space, or the fallback option until the page has been completely downloaded.

It’s not supported on mobile browsers such as the iPhone, iPod or iPad webkit browser or Android.

Example of Google Font API

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers. I used Reenie Beanie font from google font directory to write this paragraph

Click here to find Google Font Directory! There you can find the code for implementing google dynamic font. enjoy!!

Tags:                

Comments (2)

The Complete CSS Tags

Posted on 06 February 2009 by rajesh

Text and Fonts

font

Colours and Backgrounds

The Box Model – dimensions, padding, margin and borders

Positioning and Display

Lists

Tables

Generated Content

Paged Media

Misc.

The Whole Shebang

Tags:

Comments (0)

ANSI character set and equivalent Unicode and HTML characters

Posted on 04 June 2008 by rajesh

The characters that appear in the first column of the following table are generated from Unicode numeric character references, and so they should appear correctly in any Web browser that supports Unicode and that has suitable fonts available, regardless of the operating system.

Character ANSI
Number
Unicode
Number
ANSI
Hex
Unicode
Hex
HTML 4.0
Entity
Unicode Name Unicode Range
‘ ‘ 32 32 0x20 U+0020 space Basic Latin
! 33 33 0x21 U+0021 exclamation mark Basic Latin
34 34 0x22 U+0022 " quotation mark Basic Latin
# 35 35 0x23 U+0023 number sign Basic Latin
$ 36 36 0x24 U+0024 dollar sign Basic Latin
% 37 37 0x25 U+0025 percent sign Basic Latin
& 38 38 0x26 U+0026 & ampersand Basic Latin
39 39 0x27 U+0027 apostrophe Basic Latin
( 40 40 0x28 U+0028 left parenthesis Basic Latin
) 41 41 0x29 U+0029 right parenthesis Basic Latin
* 42 42 0x2A U+002A asterisk Basic Latin
+ 43 43 0x2B U+002B plus sign Basic Latin
, 44 44 0x2C U+002C comma Basic Latin
- 45 45 0x2D U+002D hyphen-minus Basic Latin
. 46 46 0x2E U+002E full stop Basic Latin
/ 47 47 0x2F U+002F solidus Basic Latin
0 48 48 0x30 U+0030 digit zero Basic Latin
1 49 49 0x31 U+0031 digit one Basic Latin
2 50 50 0x32 U+0032 digit two Basic Latin
3 51 51 0x33 U+0033 digit three Basic Latin
4 52 52 0x34 U+0034 digit four Basic Latin
5 53 53 0x35 U+0035 digit five Basic Latin
6 54 54 0x36 U+0036 digit six Basic Latin
7 55 55 0x37 U+0037 digit seven Basic Latin
8 56 56 0x38 U+0038 digit eight Basic Latin
9 57 57 0x39 U+0039 digit nine Basic Latin
: 58 58 0x3A U+003A colon Basic Latin
; 59 59 0x3B U+003B semicolon Basic Latin
< 60 60 0x3C U+003C < less-than sign Basic Latin
= 61 61 0x3D U+003D equals sign Basic Latin
> 62 62 0x3E U+003E > greater-than sign Basic Latin
? 63 63 0x3F U+003F question mark Basic Latin
@ 64 64 0x40 U+0040 commercial at Basic Latin
A 65 65 0x41 U+0041 Latin capital letter A Basic Latin
B 66 66 0x42 U+0042 Latin capital letter B Basic Latin
C 67 67 0x43 U+0043 Latin capital letter C Basic Latin
D 68 68 0x44 U+0044 Latin capital letter D Basic Latin
E 69 69 0x45 U+0045 Latin capital letter E Basic Latin
F 70 70 0x46 U+0046 Latin capital letter F Basic Latin
G 71 71 0x47 U+0047 Latin capital letter G Basic Latin
H 72 72 0x48 U+0048 Latin capital letter H Basic Latin
I 73 73 0x49 U+0049 Latin capital letter I Basic Latin
J 74 74 0x4A U+004A Latin capital letter J Basic Latin
K 75 75 0x4B U+004B Latin capital letter K Basic Latin
L 76 76 0x4C U+004C Latin capital letter L Basic Latin
M 77 77 0x4D U+004D Latin capital letter M Basic Latin
N 78 78 0x4E U+004E Latin capital letter N Basic Latin
O 79 79 0x4F U+004F Latin capital letter O Basic Latin
P 80 80 0x50 U+0050 Latin capital letter P Basic Latin
Q 81 81 0x51 U+0051 Latin capital letter Q Basic Latin
R 82 82 0x52 U+0052 Latin capital letter R Basic Latin
S 83 83 0x53 U+0053 Latin capital letter S Basic Latin
T 84 84 0x54 U+0054 Latin capital letter T Basic Latin
U 85 85 0x55 U+0055 Latin capital letter U Basic Latin
V 86 86 0x56 U+0056 Latin capital letter V Basic Latin
W 87 87 0x57 U+0057 Latin capital letter W Basic Latin
X 88 88 0x58 U+0058 Latin capital letter X Basic Latin
Y 89 89 0x59 U+0059 Latin capital letter Y Basic Latin
Z 90 90 0x5A U+005A Latin capital letter Z Basic Latin
[ 91 91 0x5B U+005B left square bracket Basic Latin
92 92 0x5C U+005C reverse solidus Basic Latin
] 93 93 0x5D U+005D right square bracket Basic Latin
^ 94 94 0x5E U+005E circumflex accent Basic Latin
_ 95 95 0x5F U+005F low line Basic Latin
` 96 96 0x60 U+0060 grave accent Basic Latin
a 97 97 0x61 U+0061 Latin small letter a Basic Latin
b 98 98 0x62 U+0062 Latin small letter b Basic Latin
c 99 99 0x63 U+0063 Latin small letter c Basic Latin
d 100 100 0x64 U+0064 Latin small letter d Basic Latin
e 101 101 0x65 U+0065 Latin small letter e Basic Latin
f 102 102 0x66 U+0066 Latin small letter f Basic Latin
g 103 103 0x67 U+0067 Latin small letter g Basic Latin
h 104 104 0x68 U+0068 Latin small letter h Basic Latin
i 105 105 0x69 U+0069 Latin small letter i Basic Latin
j 106 106 0x6A U+006A Latin small letter j Basic Latin
k 107 107 0x6B U+006B Latin small letter k Basic Latin
l 108 108 0x6C U+006C Latin small letter l Basic Latin
m 109 109 0x6D U+006D Latin small letter m Basic Latin
n 110 110 0x6E U+006E Latin small letter n Basic Latin
o 111 111 0x6F U+006F Latin small letter o Basic Latin
p 112 112 0x70 U+0070 Latin small letter p Basic Latin
q 113 113 0x71 U+0071 Latin small letter q Basic Latin
r 114 114 0x72 U+0072 Latin small letter r Basic Latin
s 115 115 0x73 U+0073 Latin small letter s Basic Latin
t 116 116 0x74 U+0074 Latin small letter t Basic Latin
u 117 117 0x75 U+0075 Latin small letter u Basic Latin
v 118 118 0x76 U+0076 Latin small letter v Basic Latin
w 119 119 0x77 U+0077 Latin small letter w Basic Latin
x 120 120 0x78 U+0078 Latin small letter x Basic Latin
y 121 121 0x79 U+0079 Latin small letter y Basic Latin
z 122 122 0x7A U+007A Latin small letter z Basic Latin
{ 123 123 0x7B U+007B left curly bracket Basic Latin
| 124 124 0x7C U+007C vertical line Basic Latin
} 125 125 0x7D U+007D right curly bracket Basic Latin
~ 126 126 0x7E U+007E tilde Basic Latin
127 127 0x7F U+007F (not used)
128 8364 0x80 U+20AC euro sign Currency Symbols
129 129 0x81 U+0081 (not used)
130 8218 0x82 U+201A single low-9 quotation mark General Punctuation
ƒ 131 402 0x83 U+0192 ƒ Latin small letter f with hook Latin Extended-B
132 8222 0x84 U+201E double low-9 quotation mark General Punctuation
133 8230 0x85 U+2026 horizontal ellipsis General Punctuation
134 8224 0x86 U+2020 dagger General Punctuation
135 8225 0x87 U+2021 double dagger General Punctuation
ˆ 136 710 0x88 U+02C6 ˆ modifier letter circumflex accent Spacing Modifier Letters
137 8240 0x89 U+2030 per mille sign General Punctuation
Š 138 352 0x8A U+0160 Š Latin capital letter S with caron Latin Extended-A
139 8249 0x8B U+2039 single left-pointing angle quotation mark General Punctuation
Π140 338 0x8C U+0152 ΠLatin capital ligature OE Latin Extended-A
141 141 0x8D U+008D (not used)
Ž 142 381 0x8E U+017D Latin capital letter Z with caron Latin Extended-A
143 143 0x8F U+008F (not used)
144 144 0x90 U+0090 (not used)
145 8216 0x91 U+2018 left single quotation mark General Punctuation
146 8217 0x92 U+2019 right single quotation mark General Punctuation
147 8220 0x93 U+201C left double quotation mark General Punctuation
148 8221 0x94 U+201D right double quotation mark General Punctuation
149 8226 0x95 U+2022 bullet General Punctuation
150 8211 0x96 U+2013 en dash General Punctuation
151 8212 0x97 U+2014 em dash General Punctuation
˜ 152 732 0x98 U+02DC ˜ small tilde Spacing Modifier Letters
153 8482 0x99 U+2122 trade mark sign Letterlike Symbols
š 154 353 0x9A U+0161 š Latin small letter s with caron Latin Extended-A
155 8250 0x9B U+203A single right-pointing angle quotation mark General Punctuation
œ 156 339 0x9C U+0153 œ Latin small ligature oe Latin Extended-A
157 157 0x9D U+009D (not used)
ž 158 382 0x9E U+017E Latin small letter z with caron Latin Extended-A
Ÿ 159 376 0x9F U+0178 Ÿ Latin capital letter Y with diaeresis Latin Extended-A
160 160 0xA0 U+00A0   no-break space Latin-1 Supplement
¡ 161 161 0xA1 U+00A1 ¡ inverted exclamation mark Latin-1 Supplement
¢ 162 162 0xA2 U+00A2 ¢ cent sign Latin-1 Supplement
£ 163 163 0xA3 U+00A3 £ pound sign Latin-1 Supplement
¤ 164 164 0xA4 U+00A4 ¤ currency sign Latin-1 Supplement
¥ 165 165 0xA5 U+00A5 ¥ yen sign Latin-1 Supplement
¦ 166 166 0xA6 U+00A6 ¦ broken bar Latin-1 Supplement
§ 167 167 0xA7 U+00A7 § section sign Latin-1 Supplement
¨ 168 168 0xA8 U+00A8 ¨ diaeresis Latin-1 Supplement
© 169 169 0xA9 U+00A9 © copyright sign Latin-1 Supplement
ª 170 170 0xAA U+00AA ª feminine ordinal indicator Latin-1 Supplement
« 171 171 0xAB U+00AB « left-pointing double angle quotation mark Latin-1 Supplement
¬ 172 172 0xAC U+00AC ¬ not sign Latin-1 Supplement
­ 173 173 0xAD U+00AD ­ soft hyphen Latin-1 Supplement
® 174 174 0xAE U+00AE ® registered sign Latin-1 Supplement
¯ 175 175 0xAF U+00AF ¯ macron Latin-1 Supplement
° 176 176 0xB0 U+00B0 ° degree sign Latin-1 Supplement
± 177 177 0xB1 U+00B1 ± plus-minus sign Latin-1 Supplement
² 178 178 0xB2 U+00B2 ² superscript two Latin-1 Supplement
³ 179 179 0xB3 U+00B3 ³ superscript three Latin-1 Supplement
´ 180 180 0xB4 U+00B4 ´ acute accent Latin-1 Supplement
µ 181 181 0xB5 U+00B5 µ micro sign Latin-1 Supplement
182 182 0xB6 U+00B6 pilcrow sign Latin-1 Supplement
· 183 183 0xB7 U+00B7 · middle dot Latin-1 Supplement
¸ 184 184 0xB8 U+00B8 ¸ cedilla Latin-1 Supplement
¹ 185 185 0xB9 U+00B9 ¹ superscript one Latin-1 Supplement
º 186 186 0xBA U+00BA º masculine ordinal indicator Latin-1 Supplement
» 187 187 0xBB U+00BB » right-pointing double angle quotation mark Latin-1 Supplement
¼ 188 188 0xBC U+00BC ¼ vulgar fraction one quarter Latin-1 Supplement
½ 189 189 0xBD U+00BD ½ vulgar fraction one half Latin-1 Supplement
¾ 190 190 0xBE U+00BE ¾ vulgar fraction three quarters Latin-1 Supplement
¿ 191 191 0xBF U+00BF ¿ inverted question mark Latin-1 Supplement
À 192 192 0xC0 U+00C0 À Latin capital letter A with grave Latin-1 Supplement
Á 193 193 0xC1 U+00C1 Á Latin capital letter A with acute Latin-1 Supplement
 194 194 0xC2 U+00C2  Latin capital letter A with circumflex Latin-1 Supplement
à 195 195 0xC3 U+00C3 à Latin capital letter A with tilde Latin-1 Supplement
Ä 196 196 0xC4 U+00C4 Ä Latin capital letter A with diaeresis Latin-1 Supplement
Å 197 197 0xC5 U+00C5 Å Latin capital letter A with ring above Latin-1 Supplement
Æ 198 198 0xC6 U+00C6 Æ Latin capital letter AE Latin-1 Supplement
Ç 199 199 0xC7 U+00C7 Ç Latin capital letter C with cedilla Latin-1 Supplement
È 200 200 0xC8 U+00C8 È Latin capital letter E with grave Latin-1 Supplement
É 201 201 0xC9 U+00C9 É Latin capital letter E with acute Latin-1 Supplement
Ê 202 202 0xCA U+00CA Ê Latin capital letter E with circumflex Latin-1 Supplement
Ë 203 203 0xCB U+00CB Ë Latin capital letter E with diaeresis Latin-1 Supplement
Ì 204 204 0xCC U+00CC Ì Latin capital letter I with grave Latin-1 Supplement
Í 205 205 0xCD U+00CD Í Latin capital letter I with acute Latin-1 Supplement
Î 206 206 0xCE U+00CE Î Latin capital letter I with circumflex Latin-1 Supplement
Ï 207 207 0xCF U+00CF Ï Latin capital letter I with diaeresis Latin-1 Supplement
Ð 208 208 0xD0 U+00D0 Ð Latin capital letter Eth Latin-1 Supplement
Ñ 209 209 0xD1 U+00D1 Ñ Latin capital letter N with tilde Latin-1 Supplement
Ò 210 210 0xD2 U+00D2 Ò Latin capital letter O with grave Latin-1 Supplement
Ó 211 211 0xD3 U+00D3 Ó Latin capital letter O with acute Latin-1 Supplement
Ô 212 212 0xD4 U+00D4 Ô Latin capital letter O with circumflex Latin-1 Supplement
Õ 213 213 0xD5 U+00D5 Õ Latin capital letter O with tilde Latin-1 Supplement
Ö 214 214 0xD6 U+00D6 Ö Latin capital letter O with diaeresis Latin-1 Supplement
× 215 215 0xD7 U+00D7 × multiplication sign Latin-1 Supplement
Ø 216 216 0xD8 U+00D8 Ø Latin capital letter O with stroke Latin-1 Supplement
Ù 217 217 0xD9 U+00D9 Ù Latin capital letter U with grave Latin-1 Supplement
Ú 218 218 0xDA U+00DA Ú Latin capital letter U with acute Latin-1 Supplement
Û 219 219 0xDB U+00DB Û Latin capital letter U with circumflex Latin-1 Supplement
Ü 220 220 0xDC U+00DC Ü Latin capital letter U with diaeresis Latin-1 Supplement
Ý 221 221 0xDD U+00DD Ý Latin capital letter Y with acute Latin-1 Supplement
Þ 222 222 0xDE U+00DE Þ Latin capital letter Thorn Latin-1 Supplement
ß 223 223 0xDF U+00DF ß Latin small letter sharp s Latin-1 Supplement
à 224 224 0xE0 U+00E0 à Latin small letter a with grave Latin-1 Supplement
á 225 225 0xE1 U+00E1 á Latin small letter a with acute Latin-1 Supplement
â 226 226 0xE2 U+00E2 â Latin small letter a with circumflex Latin-1 Supplement
ã 227 227 0xE3 U+00E3 ã Latin small letter a with tilde Latin-1 Supplement
ä 228 228 0xE4 U+00E4 ä Latin small letter a with diaeresis Latin-1 Supplement
å 229 229 0xE5 U+00E5 å Latin small letter a with ring above Latin-1 Supplement
æ 230 230 0xE6 U+00E6 æ Latin small letter ae Latin-1 Supplement
ç 231 231 0xE7 U+00E7 ç Latin small letter c with cedilla Latin-1 Supplement
è 232 232 0xE8 U+00E8 è Latin small letter e with grave Latin-1 Supplement
é 233 233 0xE9 U+00E9 é Latin small letter e with acute Latin-1 Supplement
ê 234 234 0xEA U+00EA ê Latin small letter e with circumflex Latin-1 Supplement
ë 235 235 0xEB U+00EB ë Latin small letter e with diaeresis Latin-1 Supplement
ì 236 236 0xEC U+00EC ì Latin small letter i with grave Latin-1 Supplement
í 237 237 0xED U+00ED í Latin small letter i with acute Latin-1 Supplement
î 238 238 0xEE U+00EE î Latin small letter i with circumflex Latin-1 Supplement
ï 239 239 0xEF U+00EF ï Latin small letter i with diaeresis Latin-1 Supplement
ð 240 240 0xF0 U+00F0 ð Latin small letter eth Latin-1 Supplement
ñ 241 241 0xF1 U+00F1 ñ Latin small letter n with tilde Latin-1 Supplement
ò 242 242 0xF2 U+00F2 ò Latin small letter o with grave Latin-1 Supplement
ó 243 243 0xF3 U+00F3 ó Latin small letter o with acute Latin-1 Supplement
ô 244 244 0xF4 U+00F4 ô Latin small letter o with circumflex Latin-1 Supplement
õ 245 245 0xF5 U+00F5 õ Latin small letter o with tilde Latin-1 Supplement
ö 246 246 0xF6 U+00F6 ö Latin small letter o with diaeresis Latin-1 Supplement
÷ 247 247 0xF7 U+00F7 ÷ division sign Latin-1 Supplement
ø 248 248 0xF8 U+00F8 ø Latin small letter o with stroke Latin-1 Supplement
ù 249 249 0xF9 U+00F9 ù Latin small letter u with grave Latin-1 Supplement
ú 250 250 0xFA U+00FA ú Latin small letter u with acute Latin-1 Supplement
û 251 251 0xFB U+00FB û Latin small letter with circumflex Latin-1 Supplement
ü 252 252 0xFC U+00FC ü Latin small letter u with diaeresis Latin-1 Supplement
ý 253 253 0xFD U+00FD ý Latin small letter y with acute Latin-1 Supplement
þ 254 254 0xFE U+00FE þ Latin small letter thorn Latin-1 Supplement
ÿ 255 255 0xFF U+00FF ÿ Latin small letter y with diaeresis Latin-1 Supplement

Tags:    

Comments (0)

Universal selector

Posted on 15 May 2008 by rajesh

The universal selector, written “*”, matches the name of any element type. It matches any single element in the document tree.

If the universal selector is not the only component of a simple selector, the “*” may be omitted. For example:

* *[LANG=fr] and [LANG=fr] are equivalent.
* *.warning and .warning are equivalent.
* *#myid and #myid are equivalent.

Tags:    

Comments (0)

Font Size Conversion Chart

Posted on 27 April 2008 by rajesh

Font Size Conversion Chart
Points Pixels Ems Percent Keyword Default sans-serif
6pt 8px 0.5em 50% CSS Tricks
7pt 9px 0.55em 55% CSS Tricks
7.5pt 10px 0.625em 62.5% x-small CSS Tricks
8pt 11px 0.7em 70% CSS Tricks
9pt 12px 0.75em 75% CSS Tricks
10pt 13px 0.8em 80% small CSS Tricks
10.5pt 14px 0.875em 87.5% CSS Tricks
11pt 15px 0.95em 95% CSS Tricks
12pt 16px 1em 100% medium CSS Tricks
13pt 17px 1.05em 105% CSS Tricks
13.5pt 18px 1.125em 112.5% large CSS Tricks
14pt 19px 1.2em 120% CSS Tricks
14.5pt 20px 1.25em 125% CSS Tricks
15pt 21px 1.3em 130% CSS Tricks
16pt 22px 1.4em 140% CSS Tricks
17pt 23px 1.45em 145% CSS Tricks
18pt 24px 1.5em 150% x-large CSS Tricks
20pt 26px 1.6em 160% CSS Tricks
22pt 29px 1.8em 180% CSS Tricks
24pt 32px 2em 200% xx-large CSS Tricks
26pt 35px 2.2em 220% CSS Tricks
27pt 36px 2.25em 225% CSS Tricks
28pt 37px 2.3em 230% CSS Tricks
29pt 38px 2.35em 235% CSS Tricks
30pt 40px 2.45em 245% CSS Tricks
32pt 42px 2.55em 255% CSS Tricks
34pt 45px 2.75em 275% CSS Tricks
36pt 48px 3em 300% CSS Tricks

There is a good online PX to EM conversion calculator available. You can also use this calculator.

Tags:    

Comments (0)

Grouping

Posted on 15 April 2008 by rajesh

When several selectors share the same declarations, they may be grouped into a comma-separated list.

Example(s):

In this example, we condense three rules with identical declarations into one. Thus,

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

is equivalent to:

H1, H2, H3 { font-family: sans-serif }

CSS offers other “shorthand” mechanisms as well, including multiple declarations and shorthand properties.

Tags:      

Comments (0)

Advertise Here

Friday 31st of October 2014 5:21:40 AM


Interactive quizzes - Malayalam and English
Advertise Here

ചായില്യം ഫെയ്സ്ബുക്കിൽ - chayilyam on facebook
chayilyam