ویب سائٹ بنانے کا طریقہ: شروع کرنے والوں کے لیے۔

ویب سائٹ بنانے کا طریقہ: شروع کرنے والوں کے لیے۔

کیا آپ ہمیشہ ویب سائٹ بنانا چاہتے ہیں؟ ہوسکتا ہے کہ آپ نے ہمارے HTML میں سے کچھ پڑھا ہو ( ایچ ٹی ایم ایل کو سمجھنا ) اور CSS ٹیوٹوریل ، لیکن نہیں جانتے کہ ان زبانوں کو کسی بڑے پروجیکٹ پر کیسے استعمال کریں۔





آج میں شروع سے ایک مکمل ویب سائٹ بنانے کے عمل میں آپ کی رہنمائی کروں گا۔ پریشان نہ ہوں اگر یہ ایک مشکل کام لگتا ہے ، میں آپ کو ہر قدم پر اس کی رہنمائی کروں گا۔



آپ اس ویب سائٹ کو ایچ ٹی ایم ایل ، سی ایس ایس ، اور جاوا اسکرپٹ کا استعمال کرتے ہوئے jQuery (jQuery کے لیے گائیڈ) کے ٹچ کے ساتھ تیار کریں گے۔ آپ کچھ نہیں کریں گے۔ واقعی خون بہہ رہا ہے ، لہذا یہ کوڈ زیادہ تر جدید براؤزرز میں کافی حد تک کام کرنا چاہیے۔





اگر آپ کو کسی سی ایس ایس کا یقین نہیں ہے تو ، پر ایک نظر ڈالیں۔ سی ایس ایس گائیڈ۔ پر W3Schools.com .

ڈیزائن

اس ویب سائٹ کا ڈیزائن یہاں ہے۔ ایک اعلی ریزولوشن تصویر پر ایک نظر ڈالیں اگر آپ بہتر نظر چاہتے ہیں ، یا اس سے بھی بہتر ، مکمل پروجیکٹ یہاں سے ڈاؤن لوڈ کریں۔



میں نے یہ ویب سائٹ ایک خیالی کمپنی کے لیے بنائی ہے۔ اڈوب فوٹوشاپ 2017. اگر آپ دلچسپی رکھتے ہیں تو ، اس بات کو یقینی بنائیں کہ آپ .PSD فائل کو بنڈل ڈاؤن لوڈ سے پکڑیں۔ فوٹوشاپ فائل میں آپ کو جو کچھ ملتا ہے وہ یہ ہے:

پی ایس ڈی کے اندر ، آپ کو تمام تہوں کو گروپ ، نام اور رنگین کوڈڈ ملے گا:



چیزوں کو درست دکھانے کے لیے آپ کو چند فونٹس نصب کرنے کی ضرورت ہوگی۔ پہلا ہے۔ زبردست فونٹ۔ ، تمام شبیہیں کے لیے استعمال کیا جاتا ہے۔ باقی دو فونٹ ہیں۔ پی ٹی سیرف اور ہزارہا پرو (فوٹوشاپ کے ساتھ شامل)۔ اگر آپ کو اس بات کا یقین نہیں ہے کہ فونٹ کیسے انسٹال کیے جائیں تو ہماری گائیڈ پڑھیں۔

اگر آپ کے پاس نہیں ہے تو فکر نہ کریں۔ اڈوب فوٹوشاپ ، آپ کو آگے بڑھنے کی ضرورت نہیں ہے۔



ابتدائی کوڈ

اب جب کہ ڈیزائن واضح ہے ، آئیے کوڈنگ شروع کریں! اپنے پسندیدہ ٹیکسٹ ایڈیٹر میں ایک نئی فائل بنائیں (میں استعمال کر رہا ہوں۔ شاندار متن 3۔ ). اس کو بطور محفوظ کریں۔ index.html . آپ اسے اپنی پسند کی کوئی بھی چیز کہہ سکتے ہیں ، کئی صفحات کو انڈیکس کہلانے کی وجہ ویب سرورز کے کام کرنے کے طریقے کی وجہ سے ہے۔ سرورز کی اکثریت کے لیے ڈیفالٹ کنفیگریشن انڈیکس ڈاٹ ایچ ٹی ایم ایل پیج کی خدمت کرنا ہے اگر کوئی صفحہ متعین نہیں ہے۔

اگر آپ تفصیلات نہیں جاننا چاہتے ہیں تو ، ڈاؤن لوڈ سے مکمل کوڈ حاصل کریں۔

آپ کی ضرورت کا کوڈ یہ ہے:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


یہ کئی کام کرتا ہے:

  • کم از کم مطلوبہ HTML کی وضاحت کرتا ہے۔
  • 'شور میڈیا' کے صفحے کے عنوان کی وضاحت کرتا ہے
  • گوگل سی ڈی این (ایک سی ڈی این کیا ہے) پر میزبانی کی گئی jQuery پر مشتمل ہے۔
  • گوگل سی ڈی این پر میزبانی کردہ فونٹ پر مشتمل ہے۔
  • a کی وضاحت کرتا ہے۔ سٹائل اپنی سی ایس ایس لکھنے کے لیے ٹیگ کریں۔
  • a کی وضاحت کرتا ہے۔ سکرپٹ اپنی جاوا اسکرپٹ لکھنے کے لیے ٹیگ کریں۔

اپنی فائل کو دوبارہ محفوظ کریں اور اسے اپنے ویب براؤزر میں کھولیں۔ آپ شاید زیادہ محسوس نہیں کریں گے ، اور یہ یقینی طور پر ابھی تک کسی ویب سائٹ کی طرح نظر نہیں آئے گا۔

ملاحظہ کریں کہ صفحہ کا عنوان کیسا ہے۔ شور میڈیا۔ . اس کی وضاحت اندرونی متن سے ہوتی ہے۔ عنوان ٹیگ. یہ ہے کے اندر ہونا سر ٹیگز.

فائلوں کو ونڈوز سے لینکس میں منتقل کریں۔

ہیڈر۔

آئیے ہیڈر بنائیں۔ یہاں ایسا لگتا ہے:

آئیے سب سے اوپر اس چھوٹے سے سرمئی رنگ سے شروع کریں۔ یہ ہلکا سرمئی ہے جس کے نیچے ہلکا سا گہرا سرمئی ہے۔ یہاں ایک بند ہے:

اس HTML کو اندر شامل کریں۔ جسم اوپر ٹیگ:

جب آپ یہاں ہیں ، آئیے اس کو توڑ دیں۔ اے۔ div دوسری چیزیں ڈالنے کے لیے ایک کنٹینر کی طرح ہے۔ کچھ ٹیگز میں کیا جا سکتا ہے اس پر کچھ پابندیاں ہیں ، لیکن divs کافی عام چیزیں ہیں۔ اس کے پاس ایک ہے۔ آئی ڈی کی ٹاپ بار . یہ سی ایس ایس کے ساتھ اسٹائل کرنے کے لیے استعمال کیا جائے گا ، اور اگر ضرورت ہو تو جاوا اسکرپٹ سے اسے نشانہ بنائیں۔ اس بات کو یقینی بنائیں کہ آپ کے پاس صرف ایک خاص آئی ڈی والا عنصر ہے - وہ منفرد ہونا چاہیے۔ اگر آپ چاہتے ہیں کہ ایک سے زیادہ عناصر کا ایک ہی نام ہو تو a استعمال کریں۔ کلاس اس کے بجائے - یہ وہی ہے جس کے لئے وہ ڈیزائن کیا گیا ہے! یہ وہ سی ایس ایس ہے جس کی آپ کو سٹائل کرنے کی ضرورت ہے (اپنے اندر اوپر رکھیں۔ سٹائل ٹیگ):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

غور کریں کہ نام سے پہلے ہیش کا نشان (#، ہیش ٹیگ ، پاؤنڈ سائن) کیسے استعمال ہوتا ہے۔ اس کا مطلب یہ ہے کہ عنصر ایک ID ہے۔ اگر آپ کلاس استعمال کر رہے تھے تو آپ اس کے بجائے فل سٹاپ (.) استعمال کریں گے۔ کی html اور جسم ٹیگز میں ان کی پیڈنگ اور مارجن صفر پر سیٹ ہے۔ یہ کسی بھی ناپسندیدہ فاصلے کے مسائل کو روکتا ہے۔

لوگو اور نیوبار پر جانے کا وقت آگیا ہے۔ شروع کرنے سے پہلے ، آپ کو یہ مواد ڈالنے کے لیے ایک کنٹینر درکار ہے۔ آئیے اس کو ایک کلاس بنائیں (تاکہ آپ اسے بعد میں دوبارہ استعمال کر سکیں) ، اور جیسا کہ یہ ہے نہیں ایک ذمہ دار ویب سائٹ ، اسے 900 پکسلز چوڑا بنائیں۔

HTML:


سی ایس ایس:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

یہ بتانا مشکل ہوسکتا ہے کہ کیا ہو رہا ہے جب تک کہ آپ کوڈ ختم نہ کریں ، اس لیے (عارضی) رنگ کا پس منظر شامل کرنا مددگار ثابت ہوسکتا ہے کہ کیا ہو رہا ہے:

background: red;

اب لوگو بنانے کا وقت آگیا ہے۔ زبردست فونٹ۔ خود آئکن کے لیے ضروری ہے۔ زبردست فونٹ شبیہیں کا ایک مجموعہ ہے جو ایک ویکٹر فونٹ کے طور پر پیک کیا گیا ہے - زبردست! مذکورہ بالا ابتدائی کوڈ پہلے ہی فونٹ بہت اچھا سیٹ اپ کر چکا ہے ، لہذا یہ سب کچھ جانے کے لیے تیار ہے!

اس ایچ ٹی ایم ایل کو شامل کریں۔ اندر کی عام ریپر div:



سی ایس ایس:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

دوسرے فونٹس کے ڈیزائن سے مماثل نہ ہونے کی فکر نہ کریں - آپ اسے بعد میں صاف کریں گے۔ اگر آپ مختلف شبیہیں استعمال کرنا چاہتے ہیں تو ، پر جائیں۔ فونٹ بہت اچھے شبیہیں۔ صفحہ ، اور پھر تبدیل کریں۔ fa-volume-down اس آئیکن کے نام پر جسے آپ استعمال کرنا چاہتے ہیں۔

نیویگیشن بار کی طرف بڑھتے ہوئے ، آپ ایک غیر منظم فہرست استعمال کریں گے ( کی ) اس کے لیے۔ اس ایچ ٹی ایم ایل کو شامل کریں۔ کے بعد کی لوگو کنٹینر (لیکن اب بھی اندر عام ریپر ):

کی href دوسرے صفحات سے منسلک کرنے کے لیے استعمال کیا جاتا ہے۔ اس ٹیوٹوریل ویب سائٹ کے کوئی اور صفحات نہیں ہیں ، لیکن آپ یہاں نام اور فائل کا راستہ (اگر ضرورت ہو) ڈال سکتے ہیں ، جیسے جائزے. html . اس بات کو یقینی بنائیں کہ آپ اسے دونوں ڈبل قیمتوں کے اندر رکھیں۔

یہ ہے CSS:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

یہ سی ایس ایس ایک سے شروع ہوتا ہے۔ غیر منظم فہرست . اس کے بعد یہ بلٹ پوائنٹس کا استعمال کرتے ہوئے ہٹاتا ہے۔ فہرست طرز کی قسم: کوئی نہیں . لنکس تھوڑے فاصلے پر ہوتے ہیں ، اور جب آپ ان پر اپنے ماؤس کو گھماتے ہیں تو ایک رنگ دیا جاتا ہے۔ چھوٹا گرے ڈیوائڈر ہر عنصر پر دائیں بارڈر ہوتا ہے ، جسے پھر استعمال کرتے ہوئے آخری عنصر کے لیے ہٹا دیا جاتا ہے۔ آخری لنک کلاس یہاں ایسا لگتا ہے:

اس حصے کے لیے جو کچھ باقی ہے وہ سرخ افقی رنگ نمایاں ہے۔ کے بعد یہ HTML شامل کریں۔ عام ریپر :

اور یہاں سی ایس ایس ہے:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

یہ سب سے اوپر کا حصہ ہے۔ یہاں ایسا ہی لگتا ہے - ڈیزائن سے بالکل ملتا جلتا ہے؟

مرکزی مواد کا علاقہ۔

اب وقت آگیا ہے کہ مرکزی مواد کے علاقے پر جائیں-نام نہاد 'فولڈ کے اوپر'۔ یہاں یہ حصہ کیسا لگتا ہے:

یہ ایک بہت ہی آسان حصہ ہے ، بائیں کا کچھ متن دائیں طرف تصویر کے ساتھ۔ یہ علاقہ ہوگا۔ ڈھیلا تقریباir تیسرے حصے میں تقسیم کیا گیا۔ گولڈن ریشو، سنہری نسبت .

آپ کو اس حصے کے لیے نمونہ تصویر کی ضرورت ہوگی۔ یہ ڈاؤن لوڈ میں شامل ہے۔ یہ تصویر 670px چوڑی ہے ، اور ہمارے Panasonic Lumix DMC-G80/G85 جائزہ سے ہے۔

HTML شامل کریں۔ کے بعد کی ٹاپ کلر سپلیش عنصر:



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

ونڈوز 10 پر سسٹم ریسٹور کرنے کا طریقہ

Alternatively, check out our review of the Panasonic G80 shown on the right!






نوٹ کریں کہ کیسے عام ریپر عنصر واپس آ گیا ہے (یہ کلاسوں کے استعمال کی خوشی ہے)۔ آپ سوچ رہے ہوں گے کہ تصویر کیوں ( img ) ٹیگ بند نہیں ہوتا۔ یہ ایک سیلف کلوزنگ ٹیگ ہے۔ فارورڈ سلیش ( /> ) اس کی طرف اشارہ کرتا ہے ، کیونکہ ٹیگ کو بند کرنا ہمیشہ معنی نہیں رکھتا ہے۔

سی ایس ایس:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

یہاں سب سے اہم وصف یہ ہے۔ باکس سائزنگ: بارڈر باکس . یہ یقینی بناتا ہے کہ عناصر ہمیشہ 40 or یا 60 width چوڑائی کے ہوتے ہیں۔ پہلے سے طے شدہ (اس وصف کے بغیر) آپ کی مخصوص چوڑائی کے علاوہ کوئی پیڈنگ ، مارجن اور بارڈرز ہیں۔ تصویر کی کلاس ( نمایاں تصویر ) ایک زیادہ سے زیادہ چوڑائی کی 500px . اگر آپ صرف ایک طول و عرض (چوڑائی یا اونچائی) کی وضاحت کرتے ہیں ، اور دوسرے کو خالی چھوڑ دیتے ہیں ، سی ایس ایس تصویر کا سائز تبدیل کرے گا جبکہ اس کا پہلو تناسب برقرار رہے گا۔

اقتباس کا علاقہ۔

آئیے کوٹ ایریا بنائیں۔ یہ اس طرح لگتا ہے:

یہ ایک اور سادہ علاقہ ہے۔ اس میں سیاہ بھوری رنگ کا پس منظر ہے ، جس میں سفید مرکوز متن ہے۔

اس ایچ ٹی ایم ایل کو شامل کریں۔ کے بعد پچھلا عام ریپر :



makeuseof is the best website ever


Joe Coburn



اور پھر یہ CSS:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

یہاں بہت کچھ نہیں ہو رہا ہے۔ سائزنگ اہم ایڈجسٹمنٹ کی ضرورت ہے - فونٹ سائز ، فاصلہ ، اور اسی طرح۔ یہ ہے کہ اب پوری چیز کیسی دکھائی دیتی ہے - یہ ایک ویب سائٹ کی طرح نظر آنے لگی ہے!

آئیکن ایریا۔

آئیے دباتے رہیں - یہ تقریبا ختم ہوچکا ہے! یہاں اگلا علاقہ ہے جسے تخلیق کی ضرورت ہے:

یہ حصہ کئی کلاسوں کو استعمال کرے گا۔ مواد کے استثناء کے ساتھ تین شبیہیں زیادہ تر ایک جیسی ہیں ، لہذا آئی ڈی کے بجائے کلاسوں کا استعمال کرنا سمجھ میں آتا ہے۔ اس ایچ ٹی ایم ایل کو شامل کریں۔ کے بعد پچھلا اقتباس کا علاقہ :






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



یہ تین شبیہیں بھی ہیں۔ فونٹ-بہت اچھا . HTML ایک بار پھر استعمال کر رہا ہے۔ عام ریپر کلاس یہ ہے CSS:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

سی ایس ایس میں کچھ نئی چیزیں چل رہی ہیں۔ گول کونے بذریعہ سیٹ کیے جا رہے ہیں۔ بارڈر رداس: 200px . اس قدر کو اسی طرح سیٹ کرنا جیسے چوڑائی کا نتیجہ ایک مکمل دائرے میں ہوتا ہے۔ اگر آپ گول کونوں والے مربع کو زیادہ ترجیح دیتے ہیں تو آپ اسے کم کر سکتے ہیں۔ نوٹس کریں کہ کس طرح ہوور ایکشنز کو divs پر لاگو کیا جاتا ہے - یہ صرف لنکس تک محدود نہیں ہے۔ یہ سیکشن اب کیسا لگتا ہے:

آخری کام فوٹر ہے! یہ واقعی آسان ہے ، کیونکہ یہ صرف ایک سرمئی علاقہ ہے جس میں متن نہیں ہے۔ آئیکن ایریاز کے بعد اس ایچ ٹی ایم ایل کو شامل کریں ' عام ریپر :

یہ ہے CSS:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

دیکھیں - واقعی سادہ چیزیں۔

کچھ پیزا شامل کریں۔

بس ، کوڈنگ ہو گئی! آپ چیزوں کو بالکل ویسے ہی چھوڑ سکتے ہیں ، یہ ایک مکمل ویب پیج ہے۔ تاہم آپ نے محسوس کیا ہوگا کہ یہ نظر نہیں آتا۔ بالکل ڈیزائن کی طرح. اس کی بنیادی وجہ استعمال شدہ فونٹس ہیں۔ آئیے اس کو حل کریں۔

زیادہ تر عنوانات کے لیے استعمال ہونے والا فونٹ ہے۔ ہزاروں پرو۔ . یہ ساتھ آتا ہے۔ ایڈوب کلاؤڈ بنائیں ، لیکن یہ بطور ویب فونٹ دستیاب نہیں ہے۔ فی الحال ویب پیج پر استعمال ہونے والا فونٹ ہے۔ ہیلویٹیکا۔ . یہ ٹھیک لگ رہا ہے ، لہذا آپ اسے اسی طرح چھوڑ سکتے ہیں۔ پی ٹی سانز ویب فونٹ کے طور پر دستیاب ہے۔ تمام متن کے لیے استعمال ہونے والا فونٹ ہے۔ پی ٹی سیرف ، جو بطور ویب فونٹ دستیاب ہے۔

ویب فونٹس ایک سادہ عمل ہے۔ بالکل اسی طرح جیسے آپ کے کمپیوٹر پر ایک نیا فونٹ لوڈ ہوتا ہے ، ویب پیجز فونٹ کو ڈیمانڈ پر لوڈ کر سکتے ہیں۔ ایسا کرنے کے بہترین طریقوں میں سے ایک ہے۔ گوگل فونٹس۔ .

بہتر فونٹس میں تبدیل ہونے کے لیے یہ CSS شامل کریں:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

اب نئے فونٹس استعمال کرنے کے لیے اپنے HTML اور باڈی عناصر میں ترمیم کریں:

font-family: 'PT Serif', 'Helvetica', 'Arial';

غور کریں کہ h3 عنصر فہرست میں کیسے شامل نہیں ہے - یہ ڈیفالٹ ہو جائے گا۔ پی ٹی سیرف کے بجائے پی ٹی سانز .

خوبصورتی کے آخری حصے کے طور پر ، آئیے کچھ مختلف جاوا اسکرپٹ کو تین مختلف خصوصیات والی تصاویر کے ذریعے سکرول کرنے کے لیے استعمال کریں۔ تمہیں ضرورت پڑے گی تصویر_2۔ اور تصویر 3۔ اس حصے کے لیے ، اور پھر ، یہ اختیاری ہے۔ اس فیچر کے بغیر ویب سائٹ مکمل طور پر فعال ہے۔ یہ اس کی طرح نظر آئے گا (تیز رفتار):

تین نمایاں تصاویر شامل کرنے کے لیے اپنے HTML میں ترمیم کریں۔ غور کریں کہ ان میں سے دو کی سی ایس ایس کلاس کیسے ہے۔ پوشیدہ . ہر تصویر کو ایک ID دی گئی ہے تاکہ جاوا اسکرپٹ ان میں سے ہر ایک کو آزادانہ طور پر نشانہ بنا سکے۔





اضافی خصوصیات والی تصاویر کو چھپانے کے لیے CSS درکار ہے۔

.hidden {
display: none;
}

اب جب کہ ایچ ٹی ایم ایل اور سی ایس ایس کا خیال رکھا گیا ہے ، آئیے جاوا اسکرپٹ پر جائیں۔ اس حصے کے لیے دستاویز آبجیکٹ ماڈل (DOM) کو سمجھنا مفید ہے ، لیکن یہ ضرورت نہیں ہے۔

تلاش کریں سکرپٹ صفحے کے نیچے کا علاقہ:


/* JavaScript goes here, at the bottom of the page */

درج ذیل جاوا اسکرپٹ کو اندر شامل کریں۔ سکرپٹ ٹیگ:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

یہاں کچھ چیزیں ہو رہی ہیں۔ کوڈ اندر موجود ہے۔ $ (دستاویز). تیار () . اس کا مطلب ہے کہ یہ ایک بار جب آپ کا براؤزر صفحہ پیش کرنا ختم کر دے گا - یہ ایک اچھا عمل ہے۔ کی setInterval () فنکشن کال کرنے کے لیے استعمال ہوتا ہے۔ تبدیلی کی تصویر () ملی سیکنڈ (1000 ملی سیکنڈ = 1 سیکنڈ) میں پہلے سے طے شدہ وقفہ پر باقاعدگی سے کام کریں۔ یہ اس میں محفوظ ہے۔ وقت متغیر آپ سکرولنگ کو تیز یا سست کرنے کے لیے اسے بڑھا یا کم کر سکتے ہیں۔ آخر میں ، ایک سادہ کیس کا بیان مختلف تصاویر دکھانے کے لیے استعمال کیا جاتا ہے ، اور فی الحال دکھائی جانے والی تصویر پر نظر رکھتا ہے۔

کوڈنگ چیلنج۔

یہی ہے! امید ہے کہ آپ نے اس عمل کے دوران بہت کچھ سیکھا ہوگا۔ اگر آپ کسی چیلنج کو پسند کرتے ہیں ، اور اپنی نئی پائی جانے والی مہارت کو جانچنا چاہتے ہیں ، تو ان ترمیمات کو لاگو کرنے کی کوشش کیوں نہ کریں:

فوٹر شامل کریں: فوٹر میں کچھ متن شامل کریں (اشارہ: آپ دوبارہ استعمال کر سکتے ہیں عام ریپر اور ایک تہائی/دو تہائی کلاسز)۔

تصویر کی سکرولنگ کو بہتر بنائیں: تصویر کی تبدیلیوں کو متحرک کرنے کے لیے جاوا اسکرپٹ میں ترمیم کریں (اشارہ: jQuery کو دیکھیں۔ دھندلا اور متحرک ).

متعدد حوالوں کو نافذ کریں: کئی مختلف میں سے ایک کے درمیان تبدیل کرنے کے لیے قیمت درج کریں

سرور ترتیب دیں: ایک سرور ترتیب دیں اور ویب پیج اور سرور کے درمیان ڈیٹا بھیجیں (اشارہ: JSON اور ازگر کے لیے ہماری گائیڈ پڑھیں)۔

ایسے گیمز جن میں ڈیٹا کی ضرورت نہیں ہوتی۔

ایک بار جب آپ جاوا اسکرپٹ کو استعمال کرنے میں راحت محسوس کرتے ہیں یا اگر آپ کو روبی کے ساتھ کوئی تجربہ ہے تو ، آپ ایک مستحکم ویب سائٹ بنانے والے کے ساتھ گیٹسبی جے ایس یا جیکل جیسی ویب سائٹ بنانے میں اپنا ہاتھ آزما سکتے ہیں۔

بانٹیں بانٹیں ٹویٹ ای میل۔ اپنے ونڈوز 10 ڈیسک ٹاپ کی شکل اور احساس کو کیسے تبدیل کیا جائے۔

ونڈوز 10 کو بہتر بنانے کا طریقہ جاننا چاہتے ہیں؟ ونڈوز 10 کو اپنا بنانے کے لیے ان آسان تخصیصات کا استعمال کریں۔

اگلا پڑھیں۔ متعلقہ موضوعات۔
  • پروگرامنگ۔
  • ایچ ٹی ایم ایل
  • ویب ڈیزائن
  • سی ایس ایس
مصنف کے بارے میں جو کوبرن۔(136 مضامین شائع ہوئے)

جو یونیورسٹی آف لنکن یونیورسٹی سے کمپیوٹر سائنس میں گریجویٹ ہیں۔ وہ ایک پیشہ ور سافٹ وئیر ڈویلپر ہے ، اور جب وہ ڈرون نہیں اڑاتا یا موسیقی نہیں لکھتا ، تو وہ اکثر تصاویر لیتے یا ویڈیو بناتے ہوئے پایا جا سکتا ہے۔

جو کوبرن سے مزید۔

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔