தெரிந்த தளம் தெரியாத விஷயங்கள்..

                                                           HTML அறிவோம்...(4)

இது கடந்த சில பதிவுகளின் தொடர்ச்சி.

எனவே கடந்தப் பதிவுகளை நீங்கள் காண விரும்பினால்........

இன்றைய பதிவில், நகரும் உங்களது வார்த்தைகளை Button -களை பயன்படுத்தி, எவ்வாறு "control" செய்வது என்பது பற்றிப் பார்க்கலாம்.

அதற்கு முன், Text button -களை உருவாக்குவது எப்படி என்பது பற்றிப் பார்க்கலாம்.

TEXT BUTTON -களை உருவாகுவது மிக எளிது.

உங்களது button -க்கு நீங்கள் தேர்வு செய்கின்ற பெயருக்கு முன்னும் பின்னும் button என்பதை சேர்க்க வேண்டும்.

நான் ஏற்கனவே கடந்த பதிவுகளில் கூறியபடி, நீங்கள் உருவாக்கும் HTML code ஆனது < > இந்த இரு அடையாளங்களுக்கு மத்தியில் ஆரம்பத்திலும்,

முடியும் வரிகள் < >இந்த இரு அடையாளங்களுக்கு மத்தியில் / இந்த குறியீட்டுடன் அமைய வேண்டும்.

எனவே ஒரு text Button -ஐ உருவாக்க சரியான code ஆனது,

<button>உங்களது வார்த்தை</button>

என்பதாகும்.

இதற்கான பிரதிபலிப்பு



இது Button -க்குரிய செயல் என்பதால், type="button" என்பதை உடன் இணைக்க வேண்டும்.

எடுத்துக்காட்டு

<button type="button" >உங்களது வார்த்தை</button>


இதற்கான பிரதிபலிப்பு




இந்த Button -ஐ நீங்கள் நகர்த்த விரும்பினால்,

எடுத்துக்காட்டு

<marquee><button type="button">உங்களது வார்த்தை</button></marquee>

இதற்கான பிரதிபலிப்பு





Button -க்குள் உங்களது வார்த்தையை நீங்கள் நகர்த்த விரும்பினால்,

எடுத்துக்காட்டு


<button type="button" ><marquee>உங்களது வார்த்தை</marquee></button>

இதற்கான பிரதிபலிப்பு



இனி, இது போன்ற button -ஐ பயன்படுத்தி, நகரும் உங்களது வார்த்தைகளை எவ்வாறு கட்டுப்படுத்துவது எனபது பற்றிப் பார்ப்போம்.


உங்களது நகரும் வார்த்தையானது கீழ்கண்டவாறு இருக்கும் போது,

எடுத்துக்காட்டு

<marquee behavior="scroll">உங்களது வார்த்தை</marquee>

இதற்கான பிரதிபலிப்பு

உங்களது வார்த்தை

உங்களது வார்த்தையை control செய்கின்ற button ஆனது செய்ய வேண்டிய செயலை கீழ்க் கண்டவாறு குறிப்பிட வேண்டும்.

click செய்யப் படும்போது element ஆனது, stop செயலைப் புரிய வேண்டும்.

இதை ஆங்கிலத்தில் அதற்குரிய HTML code -ஆக எழுத்தும் போது,

onclick="document.getElement.stop();"

இங்கே stop என்பது Button அழுத்தப்படும் போது, செயல் நிறுத்தப்படவேண்டும் என்பதைக் குறிக்கிறது.

இது Button -க்குரிய செயல் என்பதால், type="button" என்பதை உடன் இணைக்க வேண்டும். Button -க்கு நீங்கள் வைக்கும் பெயரைக் குறிப்பிட value="Button பெயர்" என்பதை இணைக்க வேண்டும்.

எனவே,

onclick="document.getElement.stop();" type="button" value="Button பெயர்"

உங்களது வார்த்தையின் நகர்விற்கு நாம் கொடுக்கும் INPUT இது என்பதால்,

input onclick="document.getElement.stop();" type="button" value="Button பெயர்"

இவை அனைத்தையும் HTML code -ற்கான அடைப்புக் குறியீடிற்குள் இட வேண்டும்.

<input onclick="document.getElement.stop();" type="button" value="Button பெயர்" />

இங்கே உங்களது வார்த்தையை control செய்ய, உங்களது நகரும் வார்த்தைக்கும், உங்களது வார்த்தையை control செய்கின்ற Button -க்கும் இடையே ஒரு தொடர்பை ஏற்படுத்த வேண்டியது அவசியமாகிறது.

இதற்காக id -ஐ பயன்படுத்தலாம்.

உங்களது நகரும் வார்த்தையானது..


<marquee behavior="scroll" id="ikito">உங்களது வார்த்தை</marquee>

உங்களது Button -ஆனது..

<input onclick="document.getElementById('ikito').stop();" type="button" value="Button பெயர்" />

இங்கே உங்களது நகரும் வார்த்தைக்கும், Button -க்கும் இடையேயான தொடர்பை id="ikito" என்பது ஏற்படுத்துகிறது.

நீங்கள் விரும்பினால், உங்களது id -யின் பெயரை மாற்றி அமைக்கலாம்.

இப்போது மேற்கண்ட code -களை பயன்படுத்த,

எடுத்துக்காட்டு

<marquee behavior="scroll" id="ikito">உங்களது வார்த்தை</marquee>
<input onclick="document.getElementById('ikito').stop();" type="button" value="Button பெயர்" />

இதற்கான பிரதிபலிப்பு

உங்களது வார்த்தை


மேற்காணும் button -ஐ click செய்துப் பாருங்கள்.
உங்களது பட்டன் அழுத்தப் படுகின்ற போது, நகரும் உங்களது வார்த்தையானது நின்று விடும்.

நிறுத்தப் படுகின்ற உங்களது வார்த்தையை மீண்டும் நகர வைக்க..

stop என்பதற்கு பதிலாக start என எழுதப் பட்ட code -ஐ உடன் இணைக்க வேண்டும்.

எடுத்துக்காட்டு

<input onclick="document.getElementById('tamil').start();" type="button" value="Button பெயர்" />

இப்போது முயற்சித்துப் பாருங்கள்.

உங்களது வார்த்தை



இவ்வற்றை scrolling மட்டுமல்லாது, Bouncing, Jumping போன்ற அனைத்து செயல்களிலும் பயன்படுத்தமுடியும்.

முயற்சசித்துப்பாருங்கள்.....


இவை சாத்தியமாகுமா என தோன்றுகிறதா?

நமது தளத்தின் வலது புறம் கொடுக்கப்பட்டுள்ள HTML code Tester -ல் உங்களது code -களை இட்டுப் பாருங்கள்.

உங்களது code -களுக்கு விடை அதன் கீழ்ப் புறம் பிரதிபலிக்கும்..

இதற்கான தொடர்ச்சியை அடுத்து வரும் பதிவில், பார்க்கலாம். நன்றி...
இது உங்களுக்கு பிடித்திருக்கிறதா?