ایچ ٹی ایم ایل کا مطلب ہائپر ٹیکسٹ مارک اپ لینگویج ہے۔ یہ ایک خاص زبان ہے جو ویب صفحات بنانے کے لیے استعمال ہوتی ہے۔ جب آپ کسی ویب سائٹ پر جاتے ہیں، تو کمپیوٹر آپ کو الفاظ، تصاویر اور لنکس دکھانے کے لیے HTML پڑھتا ہے۔ ایچ ٹی ایم ایل کو کسی ویب سائٹ کے بلڈنگ بلاکس کے طور پر سوچیں۔ جس طرح آپ گھر یا کار بنانے کے لیے Lego کے ٹکڑے استعمال کرتے ہیں، اسی طرح ہم ویب صفحہ بنانے کے لیے HTML ٹیگ استعمال کرتے ہیں۔
ایچ ٹی ایم ایل وہ کوڈ ہے جو کمپیوٹر کو بتاتا ہے کہ ویب پیج پر ٹیکسٹ، تصاویر، ویڈیوز اور لنکس کیسے ڈسپلے کیے جائیں۔ یہ کسی دوست کو ہدایات دینے کے مترادف ہے جو آپ کے لیے تصویر بنا رہا ہے۔ HTML ویب صفحہ کے کسی حصے کے آغاز اور اختتام کو نشان زد کرنے کے لیے زاویہ بریکٹ کے اندر الفاظ استعمال کرتا ہے، جنہیں ٹیگ کہتے ہیں۔
آپ جو بھی ویب سائٹ دیکھتے ہیں وہ کسی نہ کسی طریقے سے HTML کا استعمال کرتی ہے۔ ایچ ٹی ایم ایل کے بغیر، آپ کے دیکھنے کے لیے کوئی ویب صفحات نہیں ہوں گے۔ ایچ ٹی ایم ایل مواد کو ترتیب دینے میں مدد کرتا ہے اور کمپیوٹر کو بتاتا ہے کہ صفحہ کیسے ظاہر کیا جائے۔ ویب ڈویلپمنٹ میں یہ سب سے پہلی چیز ہے جو کوئی سیکھتا ہے کیونکہ یہ انٹرنیٹ کو کام کرتا ہے!
ایک HTML دستاویز کی ایک خاص ساخت ہوتی ہے۔ یہ <code><!DOCTYPE html></code> نامی اعلان سے شروع ہوتا ہے جو کمپیوٹر کو بتاتا ہے کہ صفحہ HTML استعمال کرتا ہے۔ پھر دستاویز کو دو اہم حصوں میں تقسیم کیا گیا ہے: سر اور جسم۔
ایک بہت ہی آسان HTML دستاویز اس طرح نظر آتی ہے:
<code><!DOCTYPE html>
<html>
<head>
<title>میرا پہلا ویب صفحہ</title>
</head>
<body>
<p>ہیلو، دنیا!</p>
</body>
</html> </code>
اس مثال میں، <head> سیکشن صفحہ کا عنوان دیتا ہے، اور <body> سیکشن وہ جگہ ہے جہاں آپ اسکرین پر ظاہر ہونے والا مواد ڈالتے ہیں۔
HTML ویب صفحہ کے مختلف حصوں کو نشان زد کرنے کے لیے ٹیگ استعمال کرتا ہے۔ ٹیگ زاویہ بریکٹ کے اندر ایک لفظ ہے۔ مثال کے طور پر، <code><p></code> کمپیوٹر کو بتاتا ہے کہ مندرجہ ذیل پیراگراف ہے۔ جب آپ پیراگراف کو ختم کرتے ہیں، تو اختتام کی نشاندہی کرنے کے لیے آپ اختتامی ٹیگ، <code></p></code> استعمال کرتے ہیں۔
HTML میں ایک عنصر ایک افتتاحی ٹیگ، کچھ مواد، اور ایک اختتامی ٹیگ پر مشتمل ہوتا ہے۔ مثال کے طور پر:
<code><p>یہ ایک پیراگراف ہے۔</p></code>
ہر ٹیگ ویب براؤزر کو ہدایت دیتا ہے کہ مواد کو کیسے ڈسپلے کیا جائے۔
HTML میں بہت سے ٹیگ ہیں۔ کچھ سب سے زیادہ عام ہیں:
اوصاف HTML عنصر کے بارے میں اضافی معلومات فراہم کرتے ہیں۔ وہ ٹیگ کے زاویہ بریکٹ کے اندر افتتاحی ٹیگ میں شامل کیے جاتے ہیں۔ سب سے عام اوصاف src اور alt ہیں جو امیج ٹیگ کے ساتھ استعمال ہوتے ہیں۔
مثال کے طور پر، ایک تصویر شامل کرنے کے لیے، آپ لکھ سکتے ہیں:
<code><img src="picture.jpg" alt="ایک اچھی تصویر"></code>
یہاں، src براؤزر کو بتاتا ہے کہ امیج فائل کہاں ہے، اور alt تصویر کی تفصیل فراہم کرتا ہے اگر اسے ڈسپلے نہیں کیا جا سکتا ہے۔
HTML دستاویز کو دو حصوں میں تقسیم کیا گیا ہے:
لنکس آپ کو ایک صفحے سے دوسرے صفحے پر جانے کی اجازت دیتے ہیں۔ HTML میں، ہم <a> ٹیگ کا استعمال کرتے ہوئے لنکس بناتے ہیں۔ ٹیگ کے اندر کی صفت href براؤزر کو لنک کی منزل بتاتی ہے۔
مثال کے طور پر:
<code><a href="https://www.example.com">Example.com ملاحظہ کریں</a></code>
جب آپ اس لنک پر کلک کریں گے تو آپ کا براؤزر ویب سائٹ example.com کو کھول دے گا۔
تصاویر ویب صفحہ کو روشن کرتی ہیں اور اسے مزید دلچسپ بناتی ہیں۔ تصویر شامل کرنے کے لیے، آپ <img> ٹیگ استعمال کرتے ہیں۔ یاد رکھیں، <img> ٹیگ میں بند ہونے والا ٹیگ نہیں ہوتا ہے۔
یہاں یہ ہے کہ آپ تصویر کیسے شامل کریں:
<code><img src="sunflower.jpg" alt="ایک روشن سورج مکھی"></code>
یہ کوڈ براؤزر کو سورج مکھی کی تصویر دکھانے کے لیے کہتا ہے۔ src وصف تصویر کے مقام کی طرف اشارہ کرتا ہے، اور alt وصف تصویر کی تفصیل فراہم کرتا ہے۔
فہرستیں معلومات کو صاف ستھرا شکل میں ترتیب دیتی ہیں۔ HTML میں فہرستوں کی دو اہم اقسام ہیں:
یہاں ایک غیر ترتیب شدہ فہرست کی ایک مثال ہے:
<code><ul>
<li>ایپل</li>
<li>کیلا</li>
<li>چیری</li>
</ul></code>
اور یہاں ترتیب دی گئی فہرست کی ایک مثال ہے:
<code><ol>
<li>پہلے</li>
<li>دوسرا</li>
<li>تیسرا</li>
</ol></code>
میزیں قطاروں اور کالموں میں معلومات کو ظاہر کرنے میں مدد کرتی ہیں۔ جب آپ کو ڈیٹا کا موازنہ کرنے یا گرڈ میں آئٹمز کی فہرست بنانے کی ضرورت ہوتی ہے تو وہ مفید ہوتے ہیں۔
یہاں ایک HTML ٹیبل کی ایک سادہ مثال ہے:
<code><table border="1">
<tr>
<th>نام</th>
<th>عمر</th>
</tr>
<tr>
<td>ایلس</td>
<td>10</td>
</tr>
</table> </code>
اس ٹیبل میں، <tr> ٹیبل کی قطار کی وضاحت کرتا ہے، <th> ٹیبل ہیڈر (بولڈ ٹیکسٹ) کے لیے استعمال ہوتا ہے، اور <td> ٹیبل ڈیٹا (خلیات) کے لیے استعمال ہوتا ہے۔
ایچ ٹی ایم ایل آپ کو ملٹی میڈیا جیسے آواز اور ویڈیو شامل کرنے دیتا ہے۔ <آڈیو> ٹیگ کے ساتھ، آپ آواز کی فائلیں شامل کر سکتے ہیں۔ <video> ٹیگ کے ساتھ، آپ اپنے ویب صفحہ میں ویڈیو پلیئرز کو ایمبیڈ کر سکتے ہیں۔
یہاں ایک ویڈیو ایمبیڈ کوڈ کی ایک مثال ہے:
<code><video width="320" height="240" controls>
<ذریعہ src="movie.mp4" type="video/mp4">
</video> </code>
یہ کوڈ ایک ویڈیو پلیئر بناتا ہے جس میں چلانے، روکنے یا والیوم کو تبدیل کرنے کے بٹن ہوتے ہیں۔ کنٹرول کا وصف براؤزر کو یہ بٹن دکھانے کے لیے کہتا ہے۔
انٹرنیٹ پر ہر ویب سائٹ ایچ ٹی ایم ایل کے ساتھ بنائی گئی ہے۔ تصور کریں کہ آپ اپنے اسکول کی ویب سائٹ، ایک تفریحی گیم سائٹ، یا کوئی آن لائن کہانی پڑھ رہے ہیں۔ HTML متن، تصاویر اور دیگر مواد کو ترتیب دینے کے لیے پردے کے پیچھے کام کر رہا ہے تاکہ آپ انہیں واضح طور پر دیکھ سکیں۔
مثال کے طور پر، جب آپ اپنے پسندیدہ کارٹون کردار کی تصویر آن لائن دیکھتے ہیں یا کسی دلچسپ موضوع کے بارے میں مزید پڑھنے کے لیے کسی لنک پر کلک کرتے ہیں، تو HTML اس کام کے لیے موجود ہوتا ہے۔
آئیے ایک سادہ پروجیکٹ کو دیکھتے ہیں۔ تصور کریں کہ آپ اپنے پسندیدہ جانور، جیسے بلی کے بارے میں ایک چھوٹا سا ویب صفحہ بنانا چاہتے ہیں۔ آپ ایک عنوان، بلیوں کے بارے میں ایک پیراگراف، ایک تصویر، اور یہاں تک کہ تفریحی بلی کے حقائق والی ویب سائٹ کا لنک بھی شامل کر سکتے ہیں۔
آپ کا HTML کوڈ اس طرح نظر آ سکتا ہے:
<code><!DOCTYPE html>
<html>
<head>
<title>میرا پسندیدہ جانور</title>
</head>
<body>
<h1>بلیوں کے بارے میں سب کچھ</h1>
<p>بلیاں چنچل اور نرم ہوتی ہیں۔ وہ سونا اور چیخنا پسند کرتے ہیں۔ بہت سے لوگ بلیوں کو پالتو جانور کے طور پر رکھنا پسند کرتے ہیں۔</p>
<img src="cat.jpg" alt="ایک پیاری بلی">
<a href="https://www.catfacts.com">بلیوں کے بارے میں مزید جانیں</a>
</body>
</html> </code>
یہ پروجیکٹ عنوانات، پیراگراف، تصاویر، اور لنکس کا استعمال کرتا ہے۔ یہ دکھاتا ہے کہ کس طرح HTML کو کئی حصوں کے ساتھ ایک مکمل ویب صفحہ بنانے کے لیے استعمال کیا جاتا ہے۔
جبکہ ایچ ٹی ایم ایل ایک ویب صفحہ کی ساخت بناتا ہے، وہاں دیگر ٹولز موجود ہیں جو ویب سائٹس کو تفریحی انداز میں دیکھتے اور برتاؤ کرتے ہیں۔
اگرچہ آج ہم HTML کے بارے میں سیکھ رہے ہیں، CSS اور JavaScript کے بارے میں جاننا ہمیں یہ سمجھنے میں مدد کرتا ہے کہ ویب سائٹس کیسے بنتی ہیں۔
جیسا کہ آپ ایچ ٹی ایم ایل کو دریافت کریں گے، آپ کو بہت سے دوسرے ٹیگ ملیں گے۔ جاننے کے لیے یہاں کچھ اور ہیں:
یہ ٹیگز آپ کو اس بات پر مزید کنٹرول دیتے ہیں کہ آپ کا مواد ویب صفحہ پر کیسے ظاہر ہوتا ہے۔
ایچ ٹی ایم ایل پہلی بار بننے کے بعد سے بہت بدل گیا ہے۔ وقت کے ساتھ ساتھ بہت سے نئے ٹیگ اور فیچرز شامل کیے گئے ہیں۔ HTML کا ہر نیا ورژن پیچیدہ اور خوبصورت ویب سائٹس بنانا آسان بناتا ہے۔ آج کل، HTML جدید ویب سائٹس بنانے کے لیے CSS اور JavaScript کے ساتھ مل کر کام کرتا ہے جو استعمال کرنے میں مزے دار اور اچھی لگتی ہیں۔
اس ارتقاء کا مطلب ہے کہ HTML سیکھنے میں آسان اور سادہ ویب صفحات سے لے کر پیچیدہ ویب ایپلیکیشنز تک ہر چیز بنانے کے لیے کافی طاقتور ہے۔
اگرچہ HTML سیکھنا تفریحی ہے، لیکن انٹرنیٹ پر محفوظ رہنا ہمیشہ ضروری ہے۔ جب آپ ویب سائٹس پر جاتے ہیں یا آن لائن مواد کو دریافت کرتے ہیں، تو یاد رکھیں کہ اگر آپ کو کسی چیز کے بارے میں یقین نہ ہو تو ہمیشہ کسی بالغ سے مدد طلب کریں۔ آپ کی حفاظت سب سے پہلے آتی ہے، اور HTML سیکھنا ہمیشہ ایک تفریحی اور محفوظ تجربہ ہونا چاہیے۔
آئیے کچھ اہم اصطلاحات دیکھیں جو آپ نے آج سیکھی ہیں:
HTML کو حقیقی دنیا کی بہت سی ترتیبات میں استعمال کیا جاتا ہے۔ یہاں کچھ مثالیں ہیں:
یہ مثالیں ظاہر کرتی ہیں کہ کس طرح HTML روزمرہ کی زندگی کے بہت سے حصوں میں ایک بہت مفید ٹول ہے۔
آج، ہم نے سیکھا کہ ہائپر ٹیکسٹ مارک اپ لینگویج کے لیے HTML مختصر ہے۔ یہ ویب صفحات بنانے کے لیے استعمال ہونے والی بنیادی زبان ہے۔ یاد رکھنے کے لیے اہم نکات یہ ہیں:
HTML ہر ویب سائٹ کی بنیاد ہے جسے آپ انٹرنیٹ پر دیکھتے ہیں۔ ٹیگز اور انتساب جیسے سادہ بلڈنگ بلاکس کے ساتھ، آپ تفریحی اور انٹرایکٹو صفحات بنا سکتے ہیں۔ جیسا کہ آپ سیکھتے رہیں گے، آپ دیکھیں گے کہ کس طرح HTML ویب صفحات کو زندہ کرنے میں مدد کرتا ہے، جس سے انٹرنیٹ کو دریافت کرنے کے لیے ایک مفید اور دلچسپ جگہ بنتی ہے۔
