Home-theater-designers
آپ چاہتے ہیں کہ آپ کی ویب سائٹ خوفناک نظر آئے --- لیکن آپ کی ویب ڈویلپمنٹ کی مہارت کا فقدان ہے۔
مایوس نہ ہوں! ٹھنڈے اثرات کے ساتھ فینسی سائٹ بنانے کے لیے آپ کو CSS یا PHP جاننے کی ضرورت نہیں ہے۔ کچھ سادہ ایچ ٹی ایم ایل ٹیگز اور کاپی اور پیسٹ کرنے کا طریقہ جاننا۔
آپ کو کچھ ٹھنڈے ایچ ٹی ایم ایل اثرات کے ساتھ شروع کرنے کے لیے ، ہم نے یہ مفت ایچ ٹی ایم ایل ایفیکٹ کوڈ ٹیمپلیٹس مرتب کیے ہیں۔ وہ آپ کی سائٹ کی فعالیت اور صارف کے تجربے میں اضافہ کریں گے ، جبکہ بینک کو نہیں توڑیں گے۔ اگرچہ وہ زیادہ تر HTML ہیں ان ٹھنڈے کوڈز میں کچھ CSS اور PHP بھی ہو سکتے ہیں۔
1. ایچ ٹی ایم ایل کے ساتھ ٹھنڈا پیرالیکس اثر۔
آپ نے شاید آن لائن اشتہارات والی ویب سائٹس پر استعمال ہونے والے پیرالیکس اثر کو دیکھا ہوگا۔ جیسا کہ آپ کسی مضمون کو نیچے سکرول کرتے ہیں ، پس منظر کی تصویر سکرول کرتی دکھائی دیتی ہے۔ ایک مختلف رفتار سے ، یا ایک اشتہار ظاہر ہوتا ہے۔
متبادل کے طور پر ، شاید پس منظر کی تصویر بدل جائے جب آپ سائٹ کے مختلف حصوں پر جائیں۔ یہ ایک عمدہ اثر ہے جو مواد میں بصری گہرائی اور مثالی کو شامل کرتا ہے چاہے آپ ایسا نہ کریں۔ بنیادی HTML کوڈ کو سمجھیں۔ .
آپ اثر کے ساتھ کھیل سکتے ہیں اور a کے لیے کوڈ کاپی کر سکتے ہیں۔ W3Schools سے سادہ پیرالیکس سکرولنگ اثر۔ .
اس کے انتہائی نفیس ورژن میں ، یہ اثر HTML ، CSS اور JS کا مجموعہ ہے۔
آگے بڑھیں اور مذکورہ بالا کوڈز لائیں۔ کوڈر پین سے ہیڈر/فوٹر پیرالیکس اثر۔ .
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! :) اگر آپ تھوڑا سا فینسیئر چاہتے ہیں تو آپ کوڈ بھی لے سکتے ہیں۔ Quackit سے ایک حسب ضرورت تبصرہ خانہ۔ .
وہ کئی ٹیمپلیٹس پیش کرتے ہیں ، لیکن آپ ان کے ایڈیٹر کو دستی طور پر تبدیل کرنے اور اپنے کسٹم کوڈ کو جانچنے (چلانے) کے لیے بھی استعمال کر سکتے ہیں۔
3. ایک عمدہ HTML چال: نمایاں متن۔
ایک سادہ کے ساتھ۔ایچ ٹی ایم ایل ٹیگ آپ اپنے متن یا تصاویر میں ٹن ٹھنڈے اثرات شامل کر سکتے ہیں۔ نوٹ کریں کہ یہ سب براؤزرز میں کام نہیں کرتے ہیں۔ جن کا یہاں ذکر کیا گیا ہے وہ گوگل کروم ، مائیکروسافٹ ایج ، اور موزیلا فائر فاکس میں کام کرتے ہیں۔
یہ HTML ٹیکسٹ اثر متن کے درمیان متن کو نمایاں کرتا ہے۔ٹیگز.
ان پٹ:
Your highlighted text here.آؤٹ پٹ ڈیمو:
4. متن میں پس منظر کی تصویر شامل کریں۔
اسی طرح ، آپ اپنے متن کا رنگ تبدیل کرسکتے ہیں یا پس منظر کی تصویر شامل کرسکتے ہیں۔ اگر متن کا فونٹ سائز بڑا ہو تو یہ بہت اچھا لگتا ہے۔
ان پٹ:
MakeUseOf presents...ایک ہی اثر متن میں سٹائل اور فونٹ عناصر کو شامل کرکے حاصل کیا جاتا ہے۔ ٹیگ.
نیا ای میل ایڈریس بنانے کا طریقہ
آؤٹ پٹ ڈیمو:
5. ٹائٹل ٹول ٹپ شامل کرنے کے لیے مفید HTML ٹرک۔
ایک عنوان ٹول ٹپ سامنے آتا ہے جب آپ ماؤس کے ساتھ 'ہیرا پھیری' متن یا تصویر کے ٹکڑے پر سکرول کرتے ہیں۔ آپ نے ان کو ویب سائٹس پر تصاویر ، منسلک متن ، یا ڈیسک ٹاپ ایپس میں مینو آئٹمز پر استعمال کرتے ہوئے دیکھا ہوگا۔ اپنے ویب پیج پر سادہ متن میں ٹول ٹپ شامل کرنے کے لیے اس ایچ ٹی ایم ایل کوڈ کا استعمال کریں۔
ان پٹ:
Move your mouse over me!آؤٹ پٹ ڈیمو:
6. اب تک کی بہترین ایچ ٹی ایم ایل ٹرکس: سکرولنگ یا فالنگ ٹیکسٹ۔
جب آپ گوگل پر 'marquee html' تلاش کرتے ہیں تو آپ کو تھوڑا سا ایسٹر انڈا دریافت ہوگا۔ سکرولنگ سرچ رزلٹ کا شمار سب سے اوپر دیکھیں؟ یہ ایک ایسا اثر ہے جو اب فرسودہ مارکی ٹیگ نے بنایا ہے۔ اگرچہ یہ ایک بار ٹھنڈا ایچ ٹی ایم ایل ٹیکسٹ اثر ختم کر دیا گیا ہے ، زیادہ تر براؤزر اب بھی اس کی حمایت کرتے ہیں۔
ان پٹ:
I wanna scroll with it, baby!آؤٹ پٹ ڈیمو:
آپ کر سکتے ہیں۔ مزید صفات شامل کریں سکرولنگ رویے ، پس منظر کا رنگ ، سمت ، اونچائی اور بہت کچھ کنٹرول کرنے کے لیے۔ تاہم ، خیال رکھیں؛ اگر زیادہ استعمال کیا جائے تو یہ اثرات کافی پریشان کن ہو سکتے ہیں۔
ٹھنڈا گرنے والے ٹیکسٹ اثر کے لیے ، دوبارہ Quackit کی طرف جائیں۔ اور ان کے انتہائی حسب ضرورت مارکی کوڈ کو کاپی کریں۔
7. ایچ ٹی ایم ایل کے ساتھ ٹھنڈا سوئچ مینیو بنائیں۔
بہترین 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 کوڈز اور اثرات۔
ایچ ٹی ایم ایل ، سی ایس ایس ، اور جاوا اسکرپٹ کی طاقت آپ کی ویب سائٹ پر شاندار اثرات کے لیے ممکنہ طور پر لامحدود اختیارات پیش کرتی ہے۔ زیادہ چاہتے ہیں؟
- ایچ ٹی ایم ایل سامان آپ کو بہت اچھا دیتا ہےٹیگ خیالات.
- متحرک ڈرائیو بہت سے ناقابل یقین متحرک HTML سکرپٹ ہیں۔
- کوئیکٹ۔ ٹھنڈا HTML کوڈ پیش کرتا ہے۔
ہم نے آپ کو آٹھ ٹھنڈے ایچ ٹی ایم ایل کوڈز دکھائے ہیں جنہیں آپ اپنی ویب سائٹ کو بڑھانے کے لیے کاپی کر سکتے ہیں۔ مختلف ہونے کے باوجود ، جب تک آپ بنیادی ایچ ٹی ایم ایل کوڈنگ کی تکنیک جانتے ہیں ، ان پر عمل درآمد کرنا آسان ہے۔
بانٹیں بانٹیں ٹویٹ ای میل۔ 17 سادہ HTML کوڈ کی مثالیں جو آپ 10 منٹ میں سیکھ سکتے ہیں۔ایک بنیادی ویب پیج بنانا چاہتے ہیں؟ یہ ایچ ٹی ایم ایل مثالیں سیکھیں اور انہیں ٹیکسٹ ایڈیٹر میں آزمائیں تاکہ دیکھیں کہ وہ آپ کے براؤزر میں کیسے نظر آتی ہیں۔
اگلا پڑھیں۔ متعلقہ موضوعات۔- پروگرامنگ۔
- ایچ ٹی ایم ایل
- ویب سازی
- ویب ماسٹر ٹولز۔
ڈپٹی ایڈیٹر برائے سیکیورٹی ، لینکس ، DIY ، پروگرامنگ ، اور ٹیک وضاحت ، اور واقعی مفید پوڈ کاسٹ پروڈیوسر ، ڈیسک ٹاپ اور سافٹ ویئر سپورٹ میں وسیع تجربے کے ساتھ۔ لینکس فارمیٹ میگزین میں شراکت دار ، کرسچن ایک راسبیری پائی ٹنکرر ، لیگو پریمی اور ریٹرو گیمنگ فین ہے۔
کرسچن کاولی سے مزیدہماری نیوز لیٹر کو سبسکرائب کریں
ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!
سبسکرائب کرنے کے لیے یہاں کلک کریں۔