Mobile version | RSS Feed |
புதியவை
Loading...
Monday, January 23, 2012

HTML (மீசுட்டு மொழி) என்பது ஒரு கடல் அதனுடன் ஜாவாஸ்கிரிட் மற்றும் CSS (விழுத்தொடர் பாணித் தாள்கள்) என்ற பெருங்கடல்கள் சேர்ந்தால் சொல்லவா வேண்டும் பிரம்மாண்டம்தான். அதனால் தான் என்னவோ பிளாக்கர் மறுமொழிகளில் இதை முழுவதுமாகப் பயன்படுத்தும் படியில்லை(முன்புவொரு காலத்தில் இருந்தது ). மீண்டும் பிளாக்கர் கொண்டு வரும்வரை தற்போதைக்கு NCcode நீட்சி மூலம் பயன்படுத்தலாம். தற்போது CSS மற்றும் கொஞ்சம் ஜாவாஸ்கிரிட்டும் பயன்படுத்தும்படி மேம்படுத்தப்பட்டுள்ளது. முன்னமே இணைத்தவர்களுக்கு தானாகவே இந்த மேம்பாடு சேர்ந்துவிடும். புதியவர்கள் இங்கு சென்று இணைத்துக் கொள்ளலாம். இனி, இதை அப்படி பயன்படுத்தலாம் என்று பார்ப்போம்.


மேற்கூறிய CSS தொழிற்நுட்பத்தில் பல வடிவங்களில் மறுமொழியிடலாம். உதாரணத்திற்கு, தலைகீழாகவோ, கோணலாகவோ, சாய்ந்த எழுத்துக்களால் கருத்துச்சொல்லலாம்; நிழல் வடிவ எழுத்துகள் பல வண்ணங்களில் இடலாம்; படங்களை ஒளிபுகு(transparent) வடிவங்களில் இடலாம்; மற்றும் பல வகைகளில் இடலாம். CSS தொழிற்நுட்பம் தெரிந்தவர் நீங்கள் என்றால் அடித்து ஆடலாம், புதியவர் என்றால் படித்து ஆடலாம்.

HTML என்று சொல்லும் போது முன்னர் இருந்த வசதியான படங்கள்,வண்ணங்கள், ஓடும் எழுத்துக்கள் மற்றும் பல,. வசதிகளும் அப்படியே HTML வடிவங்களில் பயன்படுத்தலாம். அதாவது [im] என்றும் போடலாம் <img /> என்றும் போடலாம். புதியனவாக அட்டவணை(table), ஒழுங்கு(Alignment), வரிசை(list) போன்றவை முக்கிய மாற்றங்கள். இதுபோக சில ஜாவாஸ்கிரிட் உதாரணமாக மவுஸ் வரும்போது கலர் மாற்றம், alert பாக்ஸ் போன்றவைகளையும் சேர்க்கலாம்.

எப்படி பயன்படுத்துவது?
*அந்த தளத்தில் NCcode நீட்சி நிறுவவேண்டும்.
*[im],[ma]..போன்ற பிரத்தேக NCcodeகள் என்றால் அப்படியே மறுமொழிப் பெட்டியில் இட்டுவிடலாம்.
*HTML வடிவ கோடுகள் என்றால் கீழ்கண்ட வடிவமாற்றியின் மூலம் NCcode ஆக மாற்றி பிறகு மறுமொழிப் பெட்டியில் வெளியிடலாம்.

இந்த வடிவமாற்றியில் உங்கள் HTML வரிகளை இட்டு NCcode வரிகளாக மாற்றிக் கொள்ளலாம்.


HTML லிருந்து NCcode மாற்றி

Submit your HTML code and get converted NCcode.

சில சுவாரஸ்ய உதாரணங்கள்:

தலைகீழ், கோணல், சாய்ந்த எழுத்துகள்:
&#12296;div style="-moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);"&#12297;
வணக்கம் &#12296;/div&#12297;

நிழல் வடிவ எழுத்துகள்:
&#12296;span style="text-shadow: 5px 0px 7px #000;" &#12297;&#12296;b&#12297; வணக்கம் &#12296;/b&#12297;&#12296;/span&#12297;

ஒளிபுகு படங்கள்:
&#12296;img style="opacity:0.4;filter:alpha(opacity=40);" src="http://www.w3schools.com/css/klematis.jpg"&#12297;

மௌஸ் வரவு:
&#12296;div onMouseOver="this.style.color='Red'; this.style.cursor='hand';" onMouseOut="this.style.color='Green';" &#12297;check&#12296;/div&#12297;

மேலும் பல செய்யமுடியும். CSS வல்லவர்கள் விரிவாக விளக்கலாம்.


HTML க்கு நீங்கள் புதியவர் என்றால், freeonlinehtmleditor.com அல்லது ப்ளாக்கர் போன்ற எடிடர்களில் தட்டச்சிட்டு அதற்கிணையான HTML வடிவங்களைப் பெற்றுக் கொள்ளலாம்.
animator gif


மாதிரி பின்னூட்டங்கள் கீழே

13 comments:

நீச்சல்காரன் said...

〈div style="-moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);"〉
வணக்கம் 〈/div〉

நீச்சல்காரன் said...

〈span style="text-shadow: 5px 0px 7px #000;" 〉〈b〉 வணக்கம் 〈/b〉〈/span〉

நீச்சல்காரன் said...

〈font size='0.8em'〉░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓░░░░░░░░░░░░░░░░░░░▓░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░▓▓░░░░▓░░░▓▓▓░▓▓▓░▓▓▓▓▓░░░▓▓▓▓▓░░░░░▓▓▓▓▓░░░▓░░░░▓▓░░
░▓░░▓░░░▓░░▓░░░▓░░░▓░░▓░░░░░▓░░▓░░░░░░▓░░▓░░░░▓░░░▓░░▓░
▓░▓░░▓░░▓░▓▓░░▓░▓░▓░▓░▓░░░▓▓▓▓▓▓▓▓░░▓▓▓▓▓▓▓▓░░▓░░░▓░░▓░
▓░▓░░▓░░▓░▓░▓░▓░▓░▓░▓░▓░░░▓░░░░▓░░▓░▓░░░░▓░░▓░▓░░░▓░░▓░
░▓░░▓▓▓▓▓░░▓░░░▓░░░▓░░▓░░░░▓▓▓▓░░▓░░░▓▓▓▓░░▓░░▓▓▓▓▓▓▓▓░〈/font〉

நீச்சல்காரன் said...

〈div onMouseOver="this.style.color='Red'; this.style.cursor='hand';" onMouseOut="this.style.color='Green';" 〉எலி அண்ணா வணக்கம்〈/div〉

நீச்சல்காரன் said...

〈img style="opacity:0.4;filter:alpha(opacity=40);" src="http://www.w3schools.com/css/klematis.jpg"〉

wesmob said...

முழு HTML பயன்படுத்துவைத்தால் லோடிங் நேரம் அதிகமாகுமே ? ..

"என் ராஜபாட்டை"- ராஜா said...

thanks for your information

"என் ராஜபாட்டை"- ராஜா said...

==================================

மாணவர்களுக்காக : உதவித்தொகையுடன் படிக்கவேண்டுமா ?

♔ம.தி.சுதா♔ said...

நன்றி சகோ..

♔ம.தி.சுதா♔ said...

〈img style="opacity:0.4;filter:alpha(opacity=40);" src="https://lh3.googleusercontent.com/-Q4pk_bCOEyk/Tuj8WRLdb3I/AAAAAAAACaw/T1d7de3iF3E/s160/th_1111%252520copy.jpg"〉

நீச்சல்காரன் said...

புதிதாக சேர்க்கப்படும் இந்த ஸ்கிரிப்ட் வெறும் 1.71 KB மற்றும் கூகுளிலே host செய்யப்பட்டுள்ளதால் தரவிறங்க தாமதமாகாது.

சம்பத்குமார் said...

வணக்கம் நண்பரே வலைச்சரத்தில் தங்களின் பதிவினைப் பற்றிய ஓர் அறிமுகம் செய்து வைத்துள்ளேன்.நேரமிருக்கும்போது வாசிக்க அன்புடன் அழைக்கின்றேன்.
ப்ளாக்கர் டிப்ஸ் 2012

சந்திர வம்சம் said...

〈div style="-moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);"〉
வணக்கம் 〈/div〉