Home-theater-designers
உங்கள் வலைத்தளம் அருமையாக இருக்க வேண்டும் என்று நீங்கள் விரும்புகிறீர்கள் --- ஆனால் உங்கள் வலை அபிவிருத்தி திறன்கள் குறைவு.
விரக்தியடைய வேண்டாம்! குளிர் விளைவுகளுடன் ஒரு ஆடம்பரமான தளத்தை உருவாக்க நீங்கள் CSS அல்லது PHP ஐ அறிந்திருக்க வேண்டியதில்லை. சில எளிய HTML குறிச்சொற்கள் மற்றும் நகலெடுத்து ஒட்டுவது எப்படி என்று தெரியும்.
சில சிறந்த HTML விளைவுகளுடன் நீங்கள் தொடங்குவதற்கு, இந்த இலவச HTML விளைவு குறியீடு வார்ப்புருக்களை நாங்கள் தொகுத்துள்ளோம். அவை உங்கள் தளத்தின் செயல்பாட்டையும் பயனர் அனுபவத்தையும் மேம்படுத்தும், அதே நேரத்தில் வங்கியை உடைக்காது. அவை பெரும்பாலும் HTML ஆக இருக்கும்போது இந்த குளிர் குறியீடுகளில் சில CSS மற்றும் PHP ஆகியவை இருக்கலாம்.
1. கூல் இடமாறு விளைவு HTML உடன்
இணைய விளம்பரங்களில் இணையதளங்களில் பயன்படுத்தப்படும் இடமாறு விளைவை நீங்கள் பார்த்திருக்கலாம். நீங்கள் ஒரு கட்டுரையை உருட்டும்போது, தி பின்னணி படம் உருட்ட தோன்றுகிறது வேறு வேகத்தில், அல்லது ஒரு விளம்பரம் தோன்றும்.
மாற்றாக, நீங்கள் தளத்தின் பல்வேறு பகுதிகளுக்குச் செல்லும்போது பின்னணிப் படம் மாறுகிறது. இது ஒரு சிறந்த விளைவு, இது உள்ளடக்கத்திற்கு காட்சி ஆழத்தை சேர்க்கிறது மற்றும் நீங்கள் இல்லாவிட்டாலும் சிறந்தது அடிப்படை HTML குறியீட்டை புரிந்து கொள்ளுங்கள் .
நீங்கள் விளைவுடன் விளையாடலாம் மற்றும் குறியீட்டை நகலெடுக்கலாம் W3Schools இலிருந்து எளிய இடமாறு ஸ்க்ரோலிங் விளைவு .
அதன் அதிநவீன பதிப்பில், இந்த விளைவு HTML, CSS மற்றும் JS ஆகியவற்றின் கலவையாகும்.
மேலே சென்று மேலே உள்ள குறியீடுகளைப் பெறுங்கள் CodePen இலிருந்து தலைப்பு/அடிக்குறி இடமாறு விளைவு .
2. உருட்டக்கூடிய HTML கருத்துப் பெட்டி குறியீடு
இது ஒரு எளிய ஆனால் பயனுள்ள HTML உறுப்பு, இது உரையின் நீண்ட துணுக்குகளை ஒரு சிறிய வடிவத்தில் பேக் செய்ய உதவுகிறது. இந்த வழியில் அது பக்கத்தின் முழு இடத்தையும் எடுக்காது.
உங்கள் தேவைகளுக்கு ஏற்றவாறு வண்ணப் பெட்டிகள் மற்றும் வண்ணப் பெட்டியின் அளவைக் கொண்டு விளையாடலாம்.
உள்ளீடு:
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :) நீங்கள் கொஞ்சம் ஆர்வமுள்ள ஒன்றை விரும்பினால், அதற்கான குறியீட்டையும் நீங்கள் பெறலாம் குவாக்கிட்டிலிருந்து தனிப்பயனாக்கக்கூடிய கருத்து பெட்டி .
அவை பல வார்ப்புருக்களை வழங்குகின்றன, ஆனால் உங்கள் தனிப்பயன் குறியீட்டை கைமுறையாக மாற்ற மற்றும் சோதிக்க (இயக்க) அவற்றின் எடிட்டரையும் பயன்படுத்தலாம்.
3. ஒரு குளிர் HTML தந்திரம்: சிறப்பம்சமாக உரை
ஒரு எளிய உடன்HTML டேக் உங்கள் உரை அல்லது படங்களுக்கு ஒரு டன் குளிர் விளைவுகளைச் சேர்க்கலாம். அவை அனைத்தும் உலாவிகளில் வேலை செய்யாது என்பதை நினைவில் கொள்க. இங்கு குறிப்பிடப்பட்டுள்ளவை கூகுள் குரோம், மைக்ரோசாப்ட் எட்ஜ் மற்றும் மொஸில்லா பயர்பாக்ஸில் வேலை செய்கின்றன.
இந்த HTML உரை விளைவு இடையே உள்ள உரையை முன்னிலைப்படுத்துகிறதுகுறிச்சொற்கள்.
உள்ளீடு:
Your highlighted text here.வெளியீடு டெமோ:
4. உரைக்கு பின்னணி படத்தை சேர்க்கவும்
அதேபோல், உங்கள் உரையின் நிறத்தை மாற்றலாம் அல்லது பின்னணிப் படத்தைச் சேர்க்கலாம். உரையின் எழுத்துரு அளவு பெரியதாக இருந்தால் இது நன்றாக இருக்கும்.
உள்ளீடு:
MakeUseOf presents...அதே விளைவை a இல் உரைக்கு பாணி மற்றும் எழுத்துரு கூறுகளை சேர்ப்பதன் மூலம் அடையலாம் குறிச்சொல்.
கேம் க்யூப் உடன் பின்னோக்கி இணக்கமாக உள்ளது
வெளியீடு டெமோ:
5. ஒரு தலைப்பு கருவி சேர்க்க பயனுள்ள HTML தந்திரம்
'கையாளப்பட்ட' உரை அல்லது படத்தின் மீது நீங்கள் சுட்டியுடன் உருட்டும்போது ஒரு தலைப்பு உதவிக்குறிப்பு வரும். படங்கள், இணைக்கப்பட்ட உரை அல்லது டெஸ்க்டாப் பயன்பாடுகளில் உள்ள மெனு உருப்படிகளில் இவை இணையதளங்களில் பயன்படுத்தப்படுவதை நீங்கள் பார்த்திருப்பீர்கள். உங்கள் வலைப்பக்கத்தில் எளிய உரைக்கு ஒரு உதவிக்குறிப்பைச் சேர்க்க இந்த HTML குறியீட்டைப் பயன்படுத்தவும்.
உள்ளீடு:
Move your mouse over me!வெளியீடு டெமோ:
6. இன்னும் சிறந்த HTML தந்திரங்கள்: உருட்டுதல் அல்லது வீழ்ச்சி உரை
கூகுளில் 'மார்க்யூ எச்டிஎம்எல்' என்று தேடும்போது, நீங்கள் ஒரு சிறிய ஈஸ்டர் முட்டையைக் கண்டுபிடிப்பீர்கள். மேலே உள்ள ஸ்க்ரோலிங் தேடல் முடிவு எண்ணிக்கையைப் பார்க்கவா? இப்போது காலாவதியான மார்க்யூ டேக் உருவாக்கிய விளைவு அது. இந்த ஒரு முறை குளிர்ச்சியான HTML உரை விளைவு விலக்கப்பட்டிருந்தாலும், பெரும்பாலான உலாவிகள் அதை ஆதரிக்கின்றன.
உள்ளீடு:
I wanna scroll with it, baby!வெளியீடு டெமோ:
உன்னால் முடியும் மேலும் பண்புகளை சேர்க்கவும் ஸ்க்ரோலிங் நடத்தை, பின்னணி நிறம், திசை, உயரம் மற்றும் பலவற்றைக் கட்டுப்படுத்த. இருப்பினும் கவனித்துக் கொள்ளுங்கள்; அதிகமாகப் பயன்படுத்தினால் இந்த விளைவுகள் மிகவும் எரிச்சலூட்டும்.
ஒரு குளிர் வீழ்ச்சி உரை விளைவு, மீண்டும் குவாக்கிட்டுக்குச் செல்லுங்கள் மேலும் அவர்களின் தனிப்பயனாக்கப்பட்ட மார்க்யூ குறியீட்டை நகலெடுக்கவும்.
7. HTML உடன் கூல் ஸ்விட்ச்மெனுவை உருவாக்கவும்
சிறந்த HTML தந்திரங்கள் மாறும் HTML விளைவுகள். இருப்பினும், அவை பெரும்பாலும் ஸ்கிரிப்ட் அடிப்படையிலானவை. மெனுவிற்கான ஒரு விளைவு இங்கே நீங்கள் மிகவும் மெல்லியதாக இருப்பதை ஒப்புக்கொள்வீர்கள்.
இது உங்கள் சராசரி HTML டேக்கை விட சற்று சிக்கலானது, ஏனெனில் இது ஸ்டைல் ஷீட் மற்றும் ஸ்கிரிப்ட்களுடன் வேலை செய்கிறது. நன்மை என்னவென்றால், நீங்கள் வேலை செய்ய CSS அல்லது ஸ்கிரிப்ட் கோப்பை பதிவேற்ற வேண்டியதில்லை. அதற்கு பதிலாக, உங்கள் வலைத்தளத்தின் பிரிவில் பின்வரும் குறியீட்டை ஒட்டவும்.
உள்ளீடு:
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu='yes' //'yes' or 'no'. Make sure each SPAN content contains an incrementing ID starting at 1 (id='sub1', id='sub2', etc)
var persisttype='sitewide' //enter 'sitewide' for menu to persist across site, 'local' for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('n')
document.write('.submenu{display: none;}n')
document.write('n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById('masterdiv').getElementsByTagName('span'); //DynamicDrive.com change
if(el.style.display != 'block'){ //DynamicDrive.com change
for (var i=0; i if (ar[i].className=='submenu') //DynamicDrive.com change
ar[i].style.display = 'none';
}
el.style.display = 'block';
}else{
el.style.display = 'none';
}
}
}function get_cookie(Name) {
var search = Name + '='
var returnvalue = '';
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=='yes'){
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!='')
document.getElementById(cookievalue).style.display='block'
}
}function savemenustate(){
var inc=1, blockid=''
while (document.getElementById('sub'+inc)){
if (document.getElementById('sub'+inc).style.display=='block'){
blockid='sub'+inc
break
}
inc++
}
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=(persisttype=='sitewide')? blockid+';path=/' : blockid
document.cookie=cookiename+'='+cookievalue
}if (window.addEventListener)
window.addEventListener('load', onloadfunction, false)
else if (window.attachEvent)
window.attachEvent('onload', onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=='yes' && document.getElementById)
window.onunload=savemenustate
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
வெளியீடு டெமோ:
துரதிர்ஷ்டவசமாக, இந்த விளைவை நாம் இங்கு நிரூபிக்க முடியாது. ஆனால் அசல் ஆதாரம், டைனமிக் டிரைவ் , இந்த மாறும் HTML விளைவின் செயல்பாட்டு நகலைக் கொண்டுள்ளது.
8. டேபிள்லைசருடன் ஒரு HTML விரிதாளைப் பெறுங்கள்
உங்கள் தளத்தில் ஒரு விரிதாளைக் காட்ட விரும்பினால், டேபிலைசரை அனுமதிக்கவும்! உங்கள் தரவை ஒரு HTML அட்டவணையாக மாற்றவும். எக்செல், கூகுள் டாக் அல்லது வேறு எந்த விரிதாளில் இருந்து மூல தரவை மாற்றி கருவியில் ஒட்டவும் tableizer.journalistopia.com . மாற்றியமைக்கவும் அட்டவணை விருப்பங்கள் , பின்னர் கிளிக் செய்யவும் அட்டவணைப்படுத்து HTML வெளியீட்டைப் பெற.
இது உங்கள் வலைத்தளத்திற்கான சிறந்த HTML குறியீடுகளில் ஒன்றாகும், இது அட்டவணைப்படுத்தவும்! அனைத்து கடின உழைப்பையும் செய்கிறது.
கிளிக் செய்யவும் HTML ஐ கிளிப்போர்டுக்கு நகலெடுக்கவும் HTML குறியீட்டை நகலெடுத்து உங்கள் இணையதளத்தில் சேர்க்க. பின்னணி-வண்ணங்களை மிகவும் குளிராக மாற்ற எடிட் செய்யுங்கள்.
இணைய விண்டோஸ் 7 உடன் இணைக்க முடியாது
இது உண்மையில் ஒரு HTML விளைவு அல்ல என்றாலும், இது மிகவும் எளிது.
உங்கள் தளத்திற்கான மேலும் சிறந்த HTML குறியீடுகள் மற்றும் விளைவுகள்
HTML, CSS மற்றும் JavaScript ஆகியவற்றின் சக்தி உங்கள் வலைத்தளத்தில் அதிர்ச்சியூட்டும் விளைவுகளுக்கு வரம்பற்ற விருப்பங்களை வழங்குகிறது. இன்னும் வேண்டும்?
- HTML குடீஸ் உங்களுக்கு சிறந்தது தருகிறதுகுறிச்சொல் யோசனைகள்.
- டைனமிக் டிரைவ் பல நம்பமுடியாத டைனமிக் HTML ஸ்கிரிப்ட்களைக் கொண்டுள்ளது.
- குவாக்கிட் சிறந்த HTML குறியீட்டை வழங்குகிறது.
உங்கள் வலைத்தளத்தை மேம்படுத்த நீங்கள் நகலெடுக்கக்கூடிய எட்டு சிறந்த HTML குறியீடுகளை நாங்கள் உங்களுக்குக் காட்டியுள்ளோம். வேறுபட்டாலும், அடிப்படை HTML குறியீட்டு நுட்பங்களை நீங்கள் அறிந்திருக்கும் வரை அவை அனைத்தும் செயல்படுத்த எளிதானது.
பகிர் பகிர் ட்வீட் மின்னஞ்சல் 17 எளிய HTML குறியீடு உதாரணங்கள் நீங்கள் 10 நிமிடங்களில் கற்றுக்கொள்ளலாம்அடிப்படை வலைப்பக்கத்தை உருவாக்க வேண்டுமா? இந்த HTML எடுத்துக்காட்டுகளைக் கற்றுக் கொள்ளுங்கள், அவற்றை உங்கள் உலாவியில் எப்படிப் பார்க்கிறார்கள் என்பதை அறிய உரை எடிட்டரில் முயற்சிக்கவும்.
அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்- நிரலாக்க
- HTML
- இணைய மேம்பாடு
- வெப்மாஸ்டர் கருவிகள்
பாதுகாப்பு, லினக்ஸ், DIY, புரோகிராமிங் மற்றும் டெக் விளக்கமளிக்கப்பட்ட துணை ஆசிரியர், மற்றும் உண்மையில் பயனுள்ள பாட்காஸ்ட் தயாரிப்பாளர், டெஸ்க்டாப் மற்றும் மென்பொருள் ஆதரவில் விரிவான அனுபவத்துடன். லினக்ஸ் ஃபார்மேட் பத்திரிகையின் பங்களிப்பாளரான கிறிஸ்டியன் ஒரு ராஸ்பெர்ரி பை டிங்கரர், லெகோ காதலர் மற்றும் ரெட்ரோ கேமிங் ரசிகர்.
கிறிஸ்டியன் காவ்லியிடமிருந்து மேலும்எங்கள் செய்திமடலுக்கு குழுசேரவும்
தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!
குழுசேர இங்கே சொடுக்கவும்