HTML5 کے ساتھ شروع کریں۔

HTML5 کے ساتھ شروع کریں۔
یہ گائیڈ مفت پی ڈی ایف کے طور پر ڈاؤنلوڈ کرنے کے لیے دستیاب ہے۔ اس فائل کو ابھی ڈاؤن لوڈ کریں۔ . بلا جھجھک اس کو کاپی کریں اور اپنے دوستوں اور کنبہ کے ساتھ شئیر کریں۔

فہرست کا خانہ

§1. تعارف





§2 – سیمنٹک مارک اپ۔



-3 – فارم





§4 - درمیانی۔

§5 – CSS3 تبدیلی اور حرکت پذیری۔



-6 – صرف کافی جاوا اسکرپٹ۔

§7 تخلیقی کینوس۔



§8 اگلا کہاں؟

1. تعارف

آپ نے اس کے بارے میں سنا ہے: HTML5۔ ہر کوئی اسے استعمال کر رہا ہے۔ اسے انٹرنیٹ کے نجات دہندہ کے طور پر پیش کیا جا رہا ہے ، جس سے لوگوں کو فلیش اور شاک ویو کا سہارا لیے بغیر امیر ، دل چسپ ویب صفحات بنانے کی اجازت ملتی ہے۔



لیکن یہ اصل میں کیا ہے؟

ٹھیک ہے ، اس کا جواب دینا آسان نہیں ہے۔ اس HTML5 ٹیوٹوریل میں ، ہم کچھ جوابات دینے کی کوشش کریں گے۔ ایچ ٹی ایم ایل 5 چیزوں کے واقعی متنوع گروپ کو بیان کرنے کے لیے استعمال کیا جاتا ہے۔ یہ ویب صفحات لکھنے کا ایک معیار ہے۔ یہ APIs کا مجموعہ ہے۔ یہ ویب صفحات میں تعامل کو شامل کرنے کا ایک نیا طریقہ ہے۔

HTML5 وہ سب کچھ اور بہت کچھ ہے۔ تو یہ کتاب کس کے بارے میں ہے؟

اس HTML5 ٹیوٹوریل میں ، میں یہ فرض کرنے جا رہا ہوں کہ آپ نے کسی وقت HTML اور CSS کو چھو لیا ہے۔ شاید آپ نے اپنا ورڈپریس تھیم بنایا ہو ، یا اس دن میں مائی اسپیس لے آؤٹ میں ترمیم کی ہو۔ شاید آپ نے MakeUseOf کی اپنی XHTML گائیڈ پڑھی ہے۔ نکتہ یہ ہے کہ ، میں یہ فرض کر رہا ہوں کہ آپ ایک ویب پیج کے ارد گرد اپنا راستہ جانتے ہیں اور جو ہم اس گائیڈ میں بحث کرتے ہیں وہ آپ کے لیے زیادہ اجنبی نہیں ہوگا۔

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

آپ HTML5 کیوں سیکھنا چاہتے ہیں؟

یہ ایک منصفانہ سوال ہے۔ اسمارٹ فونز اور ایپس کی دنیا میں ، کیا ویب صفحات کو پروگرام کرنا سیکھنا واقعی ضروری ہے؟

ٹھیک ہے ، اس پر یقین کریں یا نہیں ، ایچ ٹی ایم ایل 5 ٹیکنالوجیز کا استعمال کرتے ہوئے اسمارٹ فون ایپلی کیشنز لکھنا واقعی عام ہے۔ کچھ عرصہ پہلے تک ، اینڈرائیڈ کے لیے فیس بک ایپ HTML5 ، CSS اور جاوا اسکرپٹ کا استعمال کرتے ہوئے لکھی گئی تھی۔

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

نئے فائر فاکس OS اسمارٹ فون بھی مکمل طور پر HTML5 ایپس پر چلتے ہیں۔ آج کے اسمارٹ فون آب و ہوا میں HTML5 کا عملی علم ضروری ہے۔

اس کے علاوہ ، HTML5 سیکھنا آپ کے کیریئر کے لیے اچھا ہے۔ مجھ پر یقین نہیں کرتے؟ بے شک. com کے مطابق ، ایچ ٹی ایم ایل 5 ڈویلپر کی اوسط سالانہ تنخواہ $ 89،000 ہے۔ زیادہ سے زیادہ کمپنیاں ایچ ٹی ایم ایل 5 ٹیکنالوجیز استعمال کرنے کے لیے اپنی ویب سائٹس تبدیل کرنے کے ساتھ ، ڈویلپرز جو ایچ ٹی ایم ایل 5 اسٹیک کو جانتے ہیں کی تلاش میں ہیں - اب پہلے سے کہیں زیادہ۔

1.1 ضروریات

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

ٹیگز زیادہ مشکل نہیں ہیں ، اور آپ کسی سورس کوڈ میں اپنے ہاتھوں کو گندا کرنے سے نہیں ڈرتے۔

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

اگر آپ اوپر سر کو نوچ رہے ہیں تو پریشان نہ ہوں۔ HTML اور CSS کے بارے میں ایک بہترین چیز یہ ہے کہ یہ واقعی ، واقعی آسان ہے۔ در حقیقت ، MakeUseOf کے پاس ایک ناقابل یقین XHTML گائیڈ ہے جو آپ کو تیزی سے تیز رفتار تک پہنچائے گی۔

اس گائیڈ کو پڑھنے کے بعد ، آپ مندرجہ ذیل مضامین پر بھی نظر ڈالنا چاہتے ہیں۔

آپ کو ایک جدید ٹیکسٹ ایڈیٹر اور براؤزر کی بھی ضرورت ہوگی۔ انٹرنیٹ ایکسپلورر کا کوئی بھی ورژن جو IE 9 سے پرانا ہے اور سفاری ، کروم اور فائر فاکس کے کچھ پرانے ورژن بہت سی خصوصیات کے ساتھ جدوجہد کریں گے جو HTML5 کا حصہ ہیں اور آپ کو اس گائیڈ پر عمل کرنے سے روک سکتے ہیں۔

نتیجے کے طور پر ، آپ کو ایک جدید براؤزر ڈاؤن لوڈ کرنے کی ترغیب دی جاتی ہے۔ میں گوگل کروم کی سفارش کرتا ہوں ، اور میں اسے ہر مثال میں استعمال کروں گا۔

اس سے آگے ، آپ سب کو سیکھنے کی خواہش ہے۔ اوہ ، اور ایک ٹیکسٹ ایڈیٹر۔

1.2 ویب ڈویلپمنٹ کے لیے ٹیکسٹ ایڈیٹرز۔

آپ کا ٹیکسٹ ایڈیٹر وہی ہے جسے آپ اپنا کوڈ لکھنے کے لیے استعمال کریں گے۔ آپ سوچ رہے ہوں گے کہ ٹیکسٹ ایڈیٹر کیا ہے؟

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

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

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

میک پر ، صورتحال قدرے مختلف ہے۔ OS X چار مختلف ٹیکسٹ ایڈیٹرز کے ساتھ آتا ہے۔ یہ ویم ، ایماکس ، پیکو اور نانو کہلاتے ہیں۔ تاہم ، نوٹ پیڈ کے برعکس ، یہ سب ٹرمینل میں کام کرتے ہیں۔

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

لینکس پر ، ڈیفالٹ ٹیکسٹ ایڈیٹر تقسیم کے درمیان مختلف ہوتا ہے۔ اوبنٹو پر ، یہ ممکنہ طور پر Gedit ہے ، جو کہ ایک خوشگوار ٹیکسٹ ایڈیٹر ہے جو نوٹ پیڈ سے زیادہ مختلف نہیں ہے۔

تاہم ، اس کورس میں ہم تین مختلف ٹولز کا استعمال کرتے ہوئے اپنا کوڈ لکھ رہے ہوں گے۔

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

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

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

2. سیمنٹ مارک اپ۔

اس باب میں ، آپ سیمنٹ مارک اپ کے بارے میں سیکھیں گے ، اور اپنے کوڈ کو اس کے مواد پر مبنی کیسے ترتیب دیں گے۔

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

اس نے کام کیا ، لیکن بہتری کی گنجائش موجود تھی۔ ٹیگز کے ساتھ مسئلہ یہ تھا کہ یہ سیمنٹک نہیں تھا۔ Div کا اصل میں کوئی مطلب نہیں ہے۔

HTML5 میں سیمنٹ مارک اپ ایک نئی خصوصیت ہے۔ یہ نئے ٹیگز لاتا ہے ، جو 'div' ٹیگ کی طرح کام کرتے ہیں ، لیکن ایک صفحے کے عام حصوں کو ٹیگ کرنے کے لیے ہیں۔

تو ، وہ کیسے کام کرتے ہیں؟ درج ذیل کوڈ پر غور کریں۔

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

کسی بھی ویب سائٹ سے محفوظ ویڈیوز ڈاؤن لوڈ کرنے کا طریقہ

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

جب آپ اس کے بارے میں سوچتے ہیں تو بہت سی ویب سائٹس ان کنونشنز کی پیروی کرتی ہیں۔ زیادہ تر ویب سائٹس کا ایک حصہ ہوتا ہے جو نیویگیشن کے لیے مخصوص ہوتا ہے۔ ان کے پاس عموما content مواد ہوتا ہے۔ ان کے پاس ہیڈر کا امکان زیادہ ہے۔

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

تو ، اس کوڈ کو یاد رکھیں جو ہمارے پاس پہلے تھا؟ آئیے اسے کچھ سیمنٹک مارک اپ کے ساتھ دیکھیں۔

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

تو ، آئیے کچھ اور معنی خیز مارک اپ ٹیگز دیکھیں۔

2.1 سیکشن

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

2.2 آرٹیکل

آرٹیکل ٹیگ اس کی طرح استعمال کیا جاتا ہے like مشمولات جیسے کہ بلاگ پوسٹ یا ایک خبر۔ یہ مواد باقی بلاگ سے علیحدہ ہونے کے قابل ہونا چاہیے اور پھر بھی ہم آہنگ ہونا چاہیے۔

2.3 ایک طرف

یہ ٹیگ اس مواد کے لیے مخصوص ہے جو متعلقہ ہے ، لیکن ویب پیج کا لازمی حصہ نہیں ہے۔ یہ حقائق کا ایک مجموعہ ہوسکتا ہے جو کسی خبر کی کہانی سے متعلق ہو ، یا کسی بلاگ پر کسی صارف کی سوانح حیات۔

2.4 ہیڈر

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

2.5 نیوی

یہ عنصر آپ کی ویب سائٹ کے نیویگیشن حصے کے لیے مخصوص ہے۔ اس میں دوسری ویب سائٹس کے لنکس یا ویب سائٹ کے دوسرے صفحات شامل ہوں گے۔ MakeUseOf کے تناظر میں ، یہ اس صفحے کا حصہ ہوسکتا ہے جو ہیڈر کے نیچے ہے۔

یہ ٹیگ صفحے کے نیچے والے حصے کے لیے محفوظ ہے۔ یہاں ، آپ کچھ رابطے کی تفصیلات ، حق اشاعت کی معلومات ، ایک نقشہ یا کچھ لنک اپنے 'میرے بارے میں' صفحے پر ڈال سکتے ہیں۔

2.7 اپنے آپ کو جانچیں۔

  • سیمنٹک مارک اپ کیا ہے ، اور یہ کس کے لیے استعمال ہوتا ہے؟
  • میں ایک ویب پیج بنا رہا ہوں اور میں اپنے بارے میں ایک سوانح پر مشتمل ایک سیمنٹک ٹیگ استعمال کرنا چاہتا ہوں۔ میں کون سا استعمال کروں؟

3. فارم

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

فارم بڑے پیمانے پر اہم ہیں۔ وہ ان چیزوں کی بنیاد ہیں جو ہم انٹرنیٹ پر کرتے ہیں۔ ہر بار جب آپ اپنے پسندیدہ سوشل نیٹ ورک پر اسٹیٹس اپ ڈیٹ بناتے ہیں ، ایمیزون سے کچھ خریدتے ہیں ، یا ای میل بھیجتے ہیں ، آپ نے شاید HTML فارم استعمال کیا ہے۔

جو آپ شاید نہیں جانتے تھے وہ یہ ہے کہ ہم نے فارم بنانے کا طریقہ HTML5 میں یکسر تبدیل کر دیا ہے۔ یہ بھی نمایاں طور پر بہتر ہے۔ اس باب میں ، ہم کچھ ٹھنڈی چیزیں دیکھیں گے جو آپ اب کر سکتے ہیں ، صرف سادہ پرانے مارک اپ کے ساتھ۔

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

دوم ، آپ اس بات کو یقینی بناسکتے ہیں کہ آپ کے صارفین صرف مخصوص قسم کی معلومات آپ کے فارم میں جمع کراسکتے ہیں۔ تو ، فرض کریں کہ آپ کو اپنی میلنگ لسٹ کے لیے ایک ویب سائٹ مل گئی ہے اور آپ صرف یہ چاہتے ہیں کہ لوگ اصل ای میل پتے جمع کر سکیں۔ آپ ایسا کر سکتے ہیں ، صرف HTML5 استعمال کرکے۔ یہ واقعی ناقابل یقین حد تک طاقتور ہے۔

تیسرا ، آپ مخصوص فارمز کو پلیس ہولڈر دے کر اپنے فارم بہتر بنا سکتے ہیں۔ یہ انہیں نمایاں طور پر زیادہ بدیہی بنا دے گا ، کیونکہ آپ اپنے صارفین کو ایک مثال دکھا سکتے ہیں کہ آپ کسی فارم کے لیے کیا توقع کر رہے ہیں۔

3.1 فارم کو بہتر بنانا

تو ، آئیے ایک فارم کو دیکھیں اور دیکھیں کہ ہم اسے کیسے بہتر بنا سکتے ہیں۔

یہ فارم کافی بنیادی ہے۔ یہ ایک نام ، ایک ای میل اور ایک پسندیدہ رنگ لیتا ہے ، اور پھر صارف کو اسے جمع کرنے کی اجازت دیتا ہے۔ اس میں اس بات کی کوئی توثیق نہیں ہے کہ اس میں کون سی معلومات رکھی گئی ہے ، اور کچھ خالی فیلڈز کے ساتھ اس فارم کو جمع کرنے سے صارفین کو کوئی چیز نہیں روک رہی ہے۔ چلو یہ سب بدل دیتے ہیں۔

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

3.2 ان پٹ کی اقسام اور نمونے

ان پٹ کی دوسری اقسام ہیں ، جن کی آپ ضرورت کرسکتے ہیں۔ ان میں ٹیلی فون نمبر ، ویب ایڈریس ، سرچ فارم ، اور یہاں تک کہ رنگ چننے والے بھی شامل ہیں! چونکہ HTML5 مسلسل ترقی کر رہا ہے ، اس کی وجہ یہ ہے کہ جلد ہی ہم مستقبل قریب میں مزید ان پٹ اقسام کی وضاحت کر سکیں گے۔

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

ہم اپنے فیلڈ میں ایک ای میل کی مثال بھی فراہم کرنا چاہتے ہیں ، لہذا صارف کو اس میں کوئی ابہام نہیں ہے کہ اسے کیا جمع کرانا ہے۔ یہ کرنا واقعی آسان ہے۔ صرف ایک مثال ای میل ایڈریس کے ساتھ 'پلیس ہولڈر' کی ایک نئی صفت بنائیں۔

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

ان غلطیوں کے پیغامات کے بارے میں واقعی ناقابل یقین بات یہ ہے کہ صارف کو انہیں لکھنے یا انہیں بنانے کے لیے کوئی کوڈ لکھنے کی ضرورت نہیں ہے۔ آپ صرف ایک فیلڈ کو تبدیل کرتے ہیں تاکہ اسے مطلوبہ بنایا جا سکے ، اور یہ صرف کام کرتا ہے۔ اس کے ساتھ ، ان کو اپنی مرضی کے مطابق کرنا ممکن ہے ، اگر آپ چاہیں۔

یہ HTML5 میں فارمز کی طاقت کا ناقابل یقین حد تک مختصر تعارف تھا۔ اگر آپ مزید پڑھنا چاہتے ہیں تو میرا مشورہ ہے کہ آپ ان لنکس پر جائیں۔

مزید پڑھنے:

  • سی ایس ایس ٹرکس - آئیے سیمنٹک مارک اپ لکھتے ہیں۔
  • ایچ ٹی ایم ایل 5 ڈاکٹر - آئیے سیمنٹکس کے بارے میں بات کرتے ہیں۔

3.3 اپنے آپ کو جانچیں۔

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

  • نام۔
  • ای میل اڈریس
  • فون نمبر
  • الرجی۔

یقینی بنائیں کہ نام ، ای میل اور فون نمبر فیلڈز لازمی ہیں ، اور یہ کہ ای میل اور فون نمبر فیلڈز 'ای میل' اور 'ٹیلی' ان پٹ اقسام کے ساتھ سیٹ کیے گئے ہیں۔ الرجی فیلڈ کے لیے ایک پلیس ہولڈر بنائیں جس کی قیمت 'جرگ ، انڈے ، کیچ' ہو۔

فارم کے ساتھ کھیلو۔ مطلوبہ فیلڈز خالی کے طور پر جمع کرنے کی کوشش کریں ، اور فون نمبر فیلڈ میں غیر عددی حروف داخل کرنے کی کوشش کریں۔ ای میل فیلڈ میں ، کوئی ایسی چیز داخل کریں جو ای میل پتہ نہ ہو۔ کیا ہوتا ہے؟

4. اوسط

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

یہ مثالی نہیں تھا۔ سب سے پہلے ، ان میں سے کسی بھی فریم ورک نے موبائل آلات پر اتنا اچھا کام نہیں کیا۔ وہ صرف اسمارٹ فونز اور ٹیبلٹس کی جدید دنیا کے لیے لیس نہیں تھے۔

100 ونڈوز 10 پر ہارڈ ڈرائیو

اس کے علاوہ ، وہ ملکیتی شکلیں تھیں۔ اس کے نتیجے میں ، لینکس اور او ایس ایکس کے صارفین دوسرے درجے کا تجربہ حاصل کر سکتے ہیں یا انہیں میڈیا سروسز استعمال کرنے سے بھی روکا جا سکتا ہے ، کیونکہ یہ ان کے پلیٹ فارم کے لیے دستیاب نہیں تھا۔

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

4.1 ایچ ٹی ایم ایل 5 ویڈیو اور آڈیو کو کیسے شاندار بناتا ہے۔

ایچ ٹی ایم ایل 5 نے ویب ڈویلپرز کو اپنے ویب پیجز میں کوڈ کی چند لائنوں کے ساتھ ویڈیو اور آڈیو شامل کرنے کی اجازت دے کر اسے تبدیل کر دیا۔ یہ موبائل آلات پر ایک ٹریٹ کام کرتا ہے اور ہر جدید ویب براؤزر پر کام کرتا ہے۔

اس کے نتیجے میں ، یوٹیوب ، ویمیو اور نیٹ فلکس جیسی بڑی کمپنیاں HTML5 انقلاب سے فائدہ اٹھا رہی ہیں۔ آپ ان میں شامل کیوں نہیں ہوتے؟

4.2 تمام کوڈیکس کے بارے میں

اس باب میں ، آپ HTML5 کی طاقت کو اپنے ویب صفحات میں آڈیو اور ویڈیو کو شامل کرنے کا طریقہ سیکھنے جا رہے ہیں۔

سب سے پہلے ، مجھے ایک انتباہ کے ساتھ شروع کرنا پڑے گا۔ جب کہ آپ ہر جدید ویب براؤزر میں HTML5 ویڈیو استعمال کر سکتے ہیں ، یہ ہر ویب براؤزر میں ایک جیسا کام نہیں کرتا ہے۔ ہر براؤزر کے استعمال کردہ کوڈیکس مختلف ہوتے ہیں۔ انٹرنیٹ ایکسپلورر میں ، آپ MP4 ویڈیو استعمال کرنے تک محدود ہیں۔ کروم تھوڑا زیادہ فراخ ہے اور آپ کو WebM ، MP4 اور Ogg Theora ویڈیو استعمال کرنے کی اجازت دیتا ہے۔ اوپیرا تھوڑا زیادہ پابند ہے اور صرف آپ کو تھیورا اور ویب ایم ویڈیو استعمال کرنے کی اجازت دیتا ہے۔

نتیجے کے طور پر ، آپ اپنے ویب پیج میں ویڈیو داخل کرنے کے طریقے سے تھوڑا سا ہوشیار بن گئے ہیں۔ تو ، آئیے دیکھتے ہیں کہ یہ کیسے کام کرتا ہے۔

4.3 ویڈیو کے ساتھ شروع ہو رہا ہے۔

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

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

اگلی چیز جو ہم کرنا چاہتے ہیں وہ ہے فال بیک۔ اس کا کیا مطلب ہے؟ تو ، فرض کریں کہ آپ وہاں سے ایک پرانے ، کم خوفناک براؤزر استعمال کر رہے ہیں۔ ان میں سے بہت سے پرانے براؤزر HTML5 ویڈیو کو سپورٹ نہیں کرتے اور اس وجہ سے HTML5 ویڈیو نہیں چلا سکتے۔ آپ انہیں ایک پیغام چھوڑنا چاہتے ہیں جو انہیں بتاتا ہے کہ وہ اپنے براؤزر کو اپ گریڈ کرنا چاہتے ہیں اور جب تک وہ ایسا نہیں کرتے ، وہ آپ کا ویڈیو نہیں دیکھ سکیں گے۔

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

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

میرا صفحہ اب میرے ویب براؤزر میں کھولنے کے لیے تیار ہے۔ میں نے ایک ایسی فلم سے منسلک کیا ہے جو واقعی ، واقعی بڑی ہے اور نتیجے کے طور پر ، جب کھولی جاتی ہے تو صرف پوسٹر دیکھ سکتا ہے۔

4.4 آڈیو شامل کرنا۔

آڈیو کو آپ کے ویب پیج میں اس انداز میں داخل کیا جا سکتا ہے جو بہت یاد دلاتا ہے کہ ہم نے اپنے پیج میں ویڈیو کیسے داخل کی۔

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

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

آخر میں ، آپ پرانے براؤزرز کے لیے فال بیک بنا سکتے ہیں۔ یہ اسی انداز میں کیا گیا ہے جس میں آپ نے اپنے ویڈیو کے لیے فال بیک بنایا تھا۔

حتمی نتیجہ کچھ اس طرح لگتا ہے۔

جب آپ اسے اپنے ویب براؤزر میں کھولتے ہیں ، تو اسے کچھ اس طرح نظر آنا چاہیے۔

4.5 اپنے آپ کو جانچیں۔

  • آپ کے ویڈیو ٹیگز میں پوسٹر لگانے کا کیا مقصد ہے؟
  • آپ انٹرنیٹ ایکسپلورر میں کون سے کوڈیکس استعمال نہیں کر سکتے؟
  • اگر میں کچھ آڈیو کو روکنے کی صلاحیت چاہتا ہوں تو ، آپ اپنے 'آڈیو' ٹیگ میں کونسا وصف شامل کریں گے؟

مزید پڑھنے:

5. CSS3 تبدیلی اور حرکت پذیری۔

سی ایس ایس روایتی طور پر ویب پیج کی ترتیب اور ڈیزائن کو سنبھالنے کے لیے استعمال کیا جاتا تھا۔ یہ اب بھی درست ہے ، لیکن اس کی تازہ ترین تکرار میں اس نے عناصر اور تصاویر کی حرکت پذیری اور تبدیلیوں کو سنبھالنے کی صلاحیت حاصل کرلی ہے۔

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

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

پہلے ، codepen.io پر جائیں اور ایک نیا قلم بنائیں۔ ہم اس باب کی مدت کے لیے اسے اپنے کام کی جگہ کے طور پر استعمال کرنے جا رہے ہیں۔

ہم سادہ شروع کرنے جا رہے ہیں اور ایک سادہ تصویری ٹرانسفارم بنانے جا رہے ہیں جو ایک تصویر کو 3 ڈگری گھماتے ہوئے گھماتا ہے۔ سب سے پہلے ، ایک div ٹیگ بنائیں اور اسے ایک ID دیں۔ نیچے دی گئی مثال میں ، میں نے اسے 'muo' کی شناخت دی ہے۔

5.1 سی ایس ایس ہوور اثرات

اس div میں ، اپنی پسند کی تصویر شامل کریں۔ میں نے MakeUseOf کے لیے لوگو کی ایک کاپی شامل کی ہے۔

اس کے بعد آپ کو سٹائل شیٹ کے کچھ اصول لکھنے ہوں گے۔ نیچے دی گئی مثال میں ، میں نے تصویر کو کچھ جگہ دینے کے لیے اوپر اور بائیں مارجن بنایا ہے۔ میں نے ایک متجسس نظر آنے والی اسٹائل شیٹ قاعدہ بھی شامل کیا ہے جو '#muo: hover' سے شروع ہوتا ہے۔ وہ کیا ہے؟

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

'#muo: hover' اصول کے اندر ، ہمارے پاس ایک لائن ہے جو کہتی ہے کہ '-webkit-transform: rotate (3deg)'۔ جیسا کہ مجھے یقین ہے کہ آپ نے اندازہ لگا لیا ہے ، یہ براؤزر کو بتا رہا ہے کہ وہ div عنصر کو تین ڈگری سے گھمائے۔

تاہم ، یہ قابل غور ہے کہ یہ ٹیگ صرف کروم اور سفاری میں کام کرتا ہے۔ اگر آپ چاہتے ہیں کہ آپ کا کوڈ فائر فاکس یا انٹرنیٹ ایکسپلورر 9 اور اس سے اوپر میں کام کرے ، تو آپ اپنی سی ایس ایس فائل کو تبدیل کرنے کے لیے مندرجہ ذیل لائنوں کو شامل کرنا چاہتے ہیں۔

اب ، جب آپ تصویر پر گھومتے ہیں ، تو یہ اس طرح لگتا ہے:

5.2 تصاویر کا سائز تبدیل کرنے کے لیے CSS3 کا استعمال۔

تو ، وہاں کیوں رکیں؟ کیا آپ جانتے ہیں کہ آپ تصویر کو وسعت دینے یا سکڑانے کے لیے 'ٹرانسفارم' طریقہ بھی استعمال کر سکتے ہیں۔ آئیے درج ذیل لائنوں کو شامل کرنے کے لیے اپنی سی ایس ایس فائل کو تبدیل کریں۔

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

جیسا کہ آپ کوڈ سے دیکھ سکتے ہیں ، میں MakeUseOf div لوگو کے سائز میں 50 فیصد اضافہ کرنے جا رہا ہوں۔ آپ اس کام کو اس پر منڈلاتے ہوئے جانچ سکتے ہیں۔ آپ دیکھیں گے کہ اب 'MakeUseOf' لوگو نمایاں طور پر زیادہ پھیلا ہوا ہے۔

یہ CSS3 تبدیلیوں کا انتہائی نرم تعارف تھا۔ CSS3 واقعی بہت نیا ہونے کے باوجود ، اب آپ دیکھ سکتے ہیں کہ آپ اس کے ساتھ بہت دلچسپ ہیرا پھیری کر سکتے ہیں۔

5.3 اپنے آپ کو جانچیں۔

  • منڈلاتے وقت ہم کسی عنصر پر اسٹائل کیسے لگاتے ہیں؟
  • آپ CSS3 کا استعمال کرتے ہوئے تصویر کو کیسے گھماتے ہیں؟
  • آپ CSS3 کا استعمال کرتے ہوئے تصویر کو کیسے پیمانہ کرتے ہیں؟
  • اگر آپ اپنا ٹرانسفارم طریقہ 'ترجمہ (50px ، 50px)' پاس کرتے ہیں تو کیا ہوتا ہے؟

مزید پڑھنے:

HTML5 راکس - پریزنٹیشن۔

6. بس کافی جاوا اسکرپٹ

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

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

6.1 کنسول تک رسائی

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

یہ روایتی ہے کہ کوئی بھی ابھرتا ہوا ڈویلپر جو پہلا پروگرام لکھتا ہے وہ 'ہیلو ورلڈ' پروگرام ہے۔ یہ ایک سادہ پروگرام ہے جو 'ہیلو ورلڈ' کے جملے کو پرنٹ کرتا ہے ، اور بہت کچھ نہیں۔ اپنے کنسول میں ٹائپ کریں 'console.log (' Hello world! ')؛.

6.2 آپ کا پہلا پروگرام

تو ، ہم نے بالکل کیا کیا؟ سب سے پہلے ، ہم نے کچھ کہا جسے 'console.log' کہا جاتا ہے۔ یہ تھوڑا سا کوڈ ہے جو کمپیوٹر میں بنایا گیا ہے جو آپ اسے جو کچھ بتاتے ہیں اسے آسانی سے پرنٹ کرتا ہے۔ اس کے بعد ہم نے اس کے ساتھ کچھ قوسین منسلک کیے ، اور ڈبل حوالوں میں شامل کیا 'ہیلو ورلڈ'۔ اسے 'پاسنگ آرگمنٹس' کہا جاتا ہے ، اور جس قسم کی دلیل ہم نے پاس کی ہے اسے سٹرنگ کہا جاتا ہے۔ جب بھی آپ کچھ کرنا چاہتے ہیں جس میں حروف اور خاص حروف شامل ہوں ، آپ کو صرف ایک حوالہ استعمال کرنا ہوگا۔ تاہم ، اگر آپ نمبروں کا استعمال کرتے ہوئے کچھ کرنا چاہتے ہیں تو ، آپ کو عام طور پر قیمت درج کرنے کی ضرورت نہیں ہے ، جیسا کہ ذیل میں دیکھا گیا ہے۔

6.3 جاوا اسکرپٹ میں متغیرات

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

نوٹ کریں کہ میں نے کس طرح حوالوں کا استعمال کرتے ہوئے کنسول ڈاٹ لاگ کو 'ہیلو' نہیں دیا۔ اس کی وجہ یہ ہے کہ میں 'ہیلو' کے مواد کو کنسول پر پرنٹ کرنا چاہتا تھا نہ کہ 'ہیلو'۔

6.4 افعال کیا کرتے ہیں

بار بار کوڈ کے اسی حصے کو دوبارہ لکھنا تھوڑا سا تکلیف دہ ہوسکتا ہے ، لہذا اسی وجہ سے ہم افعال لکھتے ہیں۔ افعال آپ کے خیال سے کہیں زیادہ آسان ہیں۔ وہ سب کوڈ کے ٹکڑے ہیں جو ہم ایک ہی کوڈ کو دوبارہ لکھنے کے بغیر دوبارہ استعمال کرسکتے ہیں۔ ذیل میں ، ہم نے 'sup' نامی ایک فنکشن بنایا ہے اور اسے قوسین کا استعمال کرتے ہوئے ایک دلیل دے رہے ہیں جو پھر اسکرین پر لاگ ان ہوتا ہے۔ ہم کنسول کو 'sup' ('ہیلو ورلڈ!') sending 'بھیج کر' sup 'کہتے ہیں۔

6.5 لوپ کے ساتھ ایکشن کو دہرانا۔

فرض کریں کہ آپ ایک ہی وقت میں ایک ہی عمل کرنا چاہتے تھے۔ یہی وجہ ہے کہ ہم 'for' لوپ استعمال کریں گے۔ وہ سب سے پہلے خوفناک نظر آتے ہیں ، لیکن ایک بار جب آپ ان کو سمجھ لیں تو کرنا اتنا آسان ہے۔ آپ 'for ()' لکھ کر آغاز کرتے ہیں۔

ان قوسین میں ، ہم ایک ایسا متغیر بنانا چاہتے ہیں جو شمار کرے کہ ہم نے کتنی بار ایکشن کیا ہے۔ تو ، ہمیں کچھ ملتا ہے جو اس طرح لگتا ہے 'for (var i = 0؛)'۔

اس کے بعد ہم یہ دیکھنا چاہتے ہیں کہ میں نے کوئی شرط پوری نہیں کی۔ تو ، اس معاملے میں ، ہم دیکھنا چاہتے ہیں کہ یہ 10 سے کم ہے۔<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

اگر میں 10 سے کم ہوں تو ہم اسے ایک کرکے شامل کرنا چاہتے ہیں اور پھر کچھ کرنا چاہتے ہیں۔ تو ، ہم 'i = i + 1' ڈالتے ہیں۔ ہمارا لوپ تقریبا finished ختم ہو چکا ہے: 'for (var i = 0؛ i<10; i = i + 1)'. Note how the last part does not have a semicolon.

اس کے بعد ، ہم ایکشن کرنا چاہتے ہیں۔ لہذا ، آخری قوسین کے بعد ، ہم کچھ گھوبگھرالی منحنی خطوط وحدانی لکھتے ہیں اور ان کے درمیان ہم کنسول کرنے جا رہے ہیں۔ یہ ایک کاؤنٹر بنائے گا جو نو تک شمار کرتا ہے۔

آخری دو پروگرامنگ تعمیرات جنہیں ہم دیکھنے جا رہے ہیں وہ ہیں 'اگر' بیانات اور 'جبکہ' لوپس۔

6.6 اگر بیانات۔

ایک 'اگر' بیان ایک عمل کرتا ہے اگر ایک مخصوص معیار پر پورا اترتا ہے۔ وہ تعمیر میں لوپس کی طرح ہیں ، اور مندرجہ ذیل کام کرتے ہیں۔ فرض کریں کہ آپ کے پاس 'چیزبرگرز' نامی ایک متغیر ہے اور آپ دیکھنا چاہتے ہیں کہ اس کی قیمت 'سوادج' ہے یا نہیں۔ اگر ایسا ہوتا ہے تو ، آپ 'یم ، چیزبرگر' کو اسکرین پر لاگ ان کرنا چاہتے ہیں۔ ایسا کرنے کے لیے آپ کچھ اس طرح لکھیں گے۔

نوٹ کریں کہ میں نے 'if (cheeseburgers ==' tasty ')' کیسے لکھا۔ آپ مساوات کو چیک کرنے کے لیے ڈبل یا ٹرپل مساوات کا استعمال کرتے ہیں اور ایک ویلیو تفویض کرنے کے لیے سنگل برابر ہوتے ہیں۔

6.7 جبکہ لوپس۔

آخر میں ، ایک 'جبکہ' لوپ ایک کارروائی کو انجام دیتا ہے جب کہ ایک معیار پورا ہوتا ہے۔ لہذا ، تصور کریں کہ آپ 'یم ، چیزبرگر' لاگ ان کرنا چاہتے ہیں جبکہ پنیر برگر برابر سوادج ہیں۔ ایسا کرنے کے لیے ، آپ درج ذیل لکھیں گے۔

یہ قابل غور ہے کہ یہ ایک لامحدود لوپ میں داخل ہو جائے گا ، اور آپ کو ایسی قدر پر کوئی عمل کرنے سے گریز کرنا چاہیے جس میں تبدیلی کا امکان نہ ہو۔ اس سے آپ کا براؤزر لاک ہو سکتا ہے ، یا آپ کا کوڈ کام نہیں کر سکتا۔

جیسا کہ میں نے پہلے ذکر کیا ، یہ جاوا اسکرپٹ میں پروگرامنگ تعمیرات کا ایک بہت ہی مختصر تعارف تھا۔ آپ کو اس دلچسپ کے بارے میں مزید پڑھنے کی ترغیب دی جاتی ہے ، اگرچہ بہت بڑا موضوع ہے۔

6.8 اپنے آپ کو آزمائیں۔

  • میں 30 سے ​​گننا چاہتا ہوں۔ ایک 'کے لیے' لوپ لکھیں جو ایسا کرے گا۔
  • میں 'makeuseof' نامی ایک متغیر بنانا چاہتا ہوں اور اسے 'زبردست' کی قیمت دینا چاہتا ہوں۔ یہ کیسے کیا جاتا ہے؟
  • میں ایک فنکشن بنانا چاہتا ہوں جو کہے جانے پر 'MakeUseOf Is Awesome' پرنٹ کرے۔ وہ فنکشن لکھیں۔

مزید پڑھنے:

7. تخلیقی کینوس۔

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

یہ بات قابل غور ہے کہ کینوس صرف جدید ویب براؤزرز پر کام کرتا ہے۔ اگر آپ IE ، کروم یا فائر فاکس کا پرانا ورژن استعمال کر رہے ہیں ، تو آپ اس باب کو فالو نہیں کر پائیں گے۔ اگر ایسا ہے تو ، آپ کو گوگل کروم کا تازہ ترین ورژن ڈاؤن لوڈ کرنے پر غور کرنا چاہیے ، جو کہ ویب براؤزر تھا جس میں میں نے یہ ٹیوٹوریل بنایا تھا۔

7.1 کینوس سے شروعات کرنا۔

سب سے پہلے ، آپ کو اپنا ویب براؤزر کھولنے اور codepen.io پر جانے کی ضرورت ہوگی۔ ایک نیا قلم بنائیں۔

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

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

ہم ایک متغیر بنانے جا رہے ہیں (میں نے اسے 'ڈیمو' کہا) ، اور پھر کینوس عنصر کو منتخب کریں اور اس متغیر کو تفویض کریں۔ ایسا کرنے کے لیے ، آپ document.getElementByID () استعمال کرتے ہیں اور جس عنصر کو آپ منتخب کرنا چاہتے ہیں اس کی شناخت میں داخل ہوتے ہیں۔

ہمارے اسکرپٹ کی دوسری لائن ایک اور متغیر بناتی ہے جسے 'سیاق و سباق' کہا جاتا ہے اور پھر اس پر 'demo.getContext (' 2d ')' کہا جاتا ہے۔ اس نے براؤزر کو بتایا کہ ہم 2 ڈی امیج پر کام کریں گے ، پھر اسکرین کی طرف متوجہ ہونے کے لیے ضروری افعال کو پاس کریں گے۔

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

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

7.2 شکلیں اور متن

آئیے اپنی چوتھی لائن کو حذف کریں ، اور اسے ایک ایسی جگہ سے تبدیل کریں جو ہمارے آئتاکار کو اوپر بائیں کونے میں رکھتا ہے اور اسے ہمارے کینوس کی لمبائی کے لیے پھیلا دیتا ہے۔

پہلے دو دلائل اس بات کی وضاحت کرتے ہیں کہ ہم شکل کے x اور y محور کو کہاں رکھنا چاہتے ہیں۔ آئیے اب ان دونوں کو '0' پر سیٹ کریں۔ تیسری دلیل شکل کی چوڑائی سے مراد ہے۔ آئیے اسے '200' پر سیٹ کریں ، اور پھر چوتھی دلیل کو '50' پر چھوڑ دیں۔ اب آپ کے پاس کچھ ایسا ہونا چاہیے جو تھوڑا سا اس طرح دکھائی دے۔

یہ ایک عمدہ آغاز ہے ، لیکن اس میں MakeUseOf کا بالکل ذکر نہیں ہے۔ تو ، ہم کچھ متن شامل کرنے جا رہے ہیں۔ آئیے ایک متغیر بنائیں جس میں 'makeuseof' ہو ، اور ہم اس متغیر کو 'MakeUseOf' کہتے ہیں۔

اس کے بعد ہم ایک اور سیاق و سباق متغیر بنانا چاہتے ہیں۔ اسے ایک 'سیاق و سباق 2' پر کال کریں ، اور یقینی بنائیں کہ یہ 2d ہے۔ یہ وہی ہے جسے ہم اپنا متن لکھنے کے لیے استعمال کریں گے۔

ہم چاہتے ہیں کہ ہمارا متن نیلے رنگ کا ہو اور ہمارے سرخ مربع کو اوورلے کیا جائے۔ لہذا ، پہلے کی طرح ، ہم اسے 'بلیو' کا فل اسٹائل دینا چاہتے ہیں۔ اب ، ہم اپنے متن کی خصوصیات کو منتخب کرنے جا رہے ہیں۔ ہم چاہتے ہیں کہ یہ 20px بڑا ہو ، بولڈ فارمیٹ ہو اور Arial فونٹ استعمال ہو۔ ہم فونٹ کو سیاق و سباق 2 پر کال کرتے ہیں اور اسے 'بولڈ 20px ایریل' کی قیمت تفویض کرتے ہیں۔

چونکہ ہم چاہتے ہیں کہ یہ متن ہمارے پچھلے ریڈ باکس کو اوورلے کرے ، ہمیں سیاق و سباق پر 'ٹیکسٹ بیس لائن' پر کال کرنے کی ضرورت ہے اور اسے اوپر کی قیمت دینا ہے۔ ایک بار جب یہ مکمل ہو گیا ، ہم سیاق و سباق 2 پر 'فل ٹیکسٹ' کو کال کرتے ہیں اور اسے متغیر کرتے ہیں جس میں ہمارے متن اور x اور y کوآرڈینیٹ ہوتے ہیں جس میں ہم اپنا متن رکھنا چاہتے ہیں۔ ہمارے کوڈ کا حتمی نتیجہ کچھ اس طرح ہے۔

کوڈ کے ذریعہ تیار کردہ تصویر اس طرح دکھائی دیتی ہے۔

7.3 کینوس پر ایک لفظ۔

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

مقامی ایڈمن پاس ورڈ ونڈوز 7 کو ری سیٹ کرنا۔

7.4 اپنے آپ کو جانچیں۔

  • اپنی بنائی ہوئی تصویر میں درج ذیل نعرہ شامل کریں: 'اب تک کی بہترین ٹیک سائٹ!'
  • ایک 'کے لیے' لوپ بنائیں جو دس تکرار پر چلتا ہے۔ دیکھیں کہ کیا آپ اپنی ڈرائنگ کو کینوس کے نیچے لے جا سکتے ہیں ، ایک وقت میں ایک پکسل۔
  • ایک فنکشن میں اپنی ڈرائنگ لپیٹیں۔ اگر آپ اسے کال نہیں کرتے تو کیا ہوتا ہے؟

مزید پڑھنے:

8. آگے کہاں؟

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

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

بانٹیں بانٹیں ٹویٹ ای میل۔ کیا یہ ونڈوز 11 کو اپ گریڈ کرنے کے قابل ہے؟

ونڈوز کو دوبارہ ڈیزائن کیا گیا ہے۔ لیکن کیا یہ آپ کو ونڈوز 10 سے ونڈوز 11 میں منتقل کرنے پر راضی کرنے کے لیے کافی ہے؟

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

میتھیو ہیوز انگلینڈ کے لیورپول سے ایک سافٹ ویئر ڈویلپر اور مصنف ہیں۔ وہ شاذ و نادر ہی پایا جاتا ہے جب اس کے ہاتھ میں مضبوط کالی کافی کا کپ ہوتا ہے اور وہ اپنے میک بک پرو اور اپنے کیمرے کو بالکل پسند کرتا ہے۔ آپ اس کا بلاگ http://www.matthewhughes.co.uk پر پڑھ سکتے ہیں اورmatthewhughes پر ٹویٹر پر اس کی پیروی کر سکتے ہیں۔

میتھیو ہیوز سے مزید

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

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

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