The following section contains references to latest HTML5, CSS3 and more…
The following section contains a complete list of standard tags belonging to the HTML5 and XHTML 1.0 specifications. All the tags are ordered alphabetically.
The following section contains a complete list of visual properties belonging to the CSS3 specifications. All the properties are ordered alphabetically.
ഇന്റെർനെറ്റിന്റെ ലോകത്തേക്ക് എത്തിയപ്പോൾ തന്നെ മനസ്സിൽ തങ്ങിയ ഒരു മോഹമായിരുന്നു സ്വന്തമായി ഒരു വെബ്സൈറ്റുണ്ടാക്കുക എന്നത്. 1998 ഇൽ ആണ് ആദ്യമായി ഒരു മെയിൽ ഐഡി യാഹുവിൽ ഉണ്ടാക്കുന്നത്. (more…)
CSS3 introduce 3 new selectors for the sub-string or matching attributes. they are [att^=val], [att$=val] and [att*=val]. these selectors coming under Sub-string Matching Attribute Selectors section.
This is the “begins with” selector. This selector allows for the selection of elements where a specified attribute begins with a specified string. example:
<pre>a[alt~=”Kerala”] { color:#00aa00; font-size:14px; border:1px solid #00aa00; padding:3px 10px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; margin:2px; background:#afa }</pre>
<code>a[alt~=”Karnataka”] { color:#0000aa; font-size:14px; border:1px solid #0000aa; padding:3px 10px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; margin:2px; background:#aaf }</code>
#linearBg2 { background-color: #fddfa4; background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #fddfa4); }
#linearBg1 { background-color: #ec800b; background-repeat: repeat-y; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4); }
#even-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.75, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); }
#arbitrary-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.95, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); }
#radial-center { background-color: #2F2727; background-image: url(images/radial_bg.png); background-position: center center; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can’t specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(circle, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }
Warning: Not Consistent Among Browsers
#radial-position { background-color: #2F2727; background-position: 80% 20%; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }
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
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. |
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 uses JavaScript to make drawings on a web page.
| Tag | Description |
|---|---|
| For making graphics with a script |
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 |
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 |
| 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 |
നെറ്റിലൂടെയുള്ള ആശയവിനിമയത്തിനു ചുക്കാന് പിടിക്കുന്ന വളരെ ലളിതമായ ഒരു കമ്പ്യൂട്ടര് ഭാഷയാണ് 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 ന്റെ പ്രകടനം താരതമ്യേന വളരേ കുറവാണ്.
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.
| 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.
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.
താഴെ കാണുന്ന വാട്സാപ്പ് ഐക്കൺ ക്ലിക്ക് ചെയ്യുകയോ ഈ മെയിൽ ഐഡിയിലേക്ക് മെയിൽ അയക്കുകയോ ചെയ്യുക.
രാജേഷ് ഒടയഞ്ചാൽ
