Beginners کے لئے درست HTML گائیڈ

15 مئی کو آخری بار اپ ڈیٹ کیا گیا

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

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

اور اگر آپ مواد کی ترتیب کا سامنا کر رہے ہیں تو درست نظر نہیں آتا، HTML علم آپ کو ٹریک پر واپس لے سکتا ہے.

بلاگرز اور غیر ٹیکچی آن لائن کاروباری مالکان کے لئے یہاں کچھ ایچ ٹی ایم ایل گائیڈ کا ہمارے کچھ ورژن موجود ہیں.

ایچ ٹی ایم ایل آج کے انٹرنیٹ کا ریبون ہے. لاکھوں ویب سائٹس نے ایک ساتھ انٹرنیٹ بنایا. ایچ ٹی ایم ایل جہاں ان تمام ویب سائٹس کی تعمیر کا بلاک ہے.

ابتدائی قواعد و ضوابط

1- HTML کیا ہے؟

ایچ ٹی ایم ایل کا خلاصہ ہے Hyper Tایکسٹینشن Markup Lگھبراہٹ یہ ویب براؤزر کے لئے مواد کو ٹیگ کرنے کے لئے معیاری زبان ہے.

ایچ ٹی ایم ایل کی نمائندگی کرتا ہے "عناصر". عناصر "ٹیگز" کے طور پر بھی جانا جاتا ہے.

2- ایچ ٹی ایم ایل کی ضرورت کیوں ہے؟

ویب براؤزر صرف اس ویب سائٹ کو پیش کرسکتے ہیں جب ان کی مدد کردہ زبان میں لکھا جاتا ہے. ایچ ٹی ایم ایل سب سے زیادہ عام مارک اپ زبان ہے اور ویب براؤزرز کو سب سے زیادہ قبولیت ہے.

لہذا آپ کو ایچ ٹی ایم ایل کی ضرورت ہے.

3- HTML کیس حساس ہے؟

ایچ ٹی ایم ایل کیس حساس نہیں ہے. لیکن بہترین طریقہ یہ ہے کہ ایچ ٹی ایم ایل مناسب مقدمات کے ساتھ لکھیں.

اپنی پہلی ایچ ٹی ایم ایل فائل بنانے کے لئے اقدامات

آپ اپنے کمپیوٹر پر نوٹ پیڈ کا استعمال کرتے ہوئے ایک بنیادی ایچ ٹی ایم ایل فائل بنا سکتے ہیں. لیکن کوڈز کی کئی لائنوں کو لکھنے کے لئے یہ دردناک ہوگا.

آپ کوڈ ایڈیٹر کی ضرورت ہے. ایک اچھا کوڈ ایڈیٹر اسے بڑے کوڈز لکھنے اور منظم کرنے میں آسان بنائے گا.

میں استعمال کرتے ہیں اور مشورہ دیتے ہیں نوٹ پیڈ + + (آزاد اور کھلی منبع) ویب زبانوں لکھنے کے لئے. آپ اس طرح کے دیگر ایڈیٹرز ہیں جو آپ استعمال کرسکتے ہیں شاندار متن, ایٹم وغیرہ شامل ہیں.

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

  1. کوڈ ایڈیٹر انسٹال کریں
  2. اسے کھولیں
  3. ایک نیا فائل بنائیں
  4. ایچ ٹی ایم ایل فائل کے طور پر اسے محفوظ کریں

آپ جانے کے لئے تیار ہیں!


اوپر جاؤ

1- ہیلو ورلڈ!

مندرجہ ذیل کوڈ کو اپنی نئی ایچ ٹی ایم ایل فائل میں کاپی اور پیسٹ کریں اور اسے محفوظ کریں. اب یہ آپ کے ویب براؤزر پر چلائیں.

کا کوڈ:

<! DOCTYPE HTML> <HTML> <سر> <عنوان> میرا پہلا ویب صفحہ </ عنوان> </ سر> <جسم> <p> ہیلو دنیا! </ p> </ body> </ html>

: پیداوار

مبارک ہو! آپ نے اپنی پہلی HTML فائل کو تشکیل دیا ہے. تمہیں اس وقت اس کو سمجھنے کی ضرورت نہیں ہے. ہم جلد ہی اس کا احاطہ کریں گے.

HTML ساخت کو سمجھنے

ہر HTML فائل میں ایک عام ننگی ڈھانچہ ہے. یہ سب کچھ شروع ہوتا ہے. اور کوڈ کے ہر بڑے صفحے کو اس ساخت میں آنے کے بعد آ جائے گا.

تو ہم اسے "ہیلو ورلڈ" کوڈ سے سمجھنے کی کوشش کرتے ہیں. مندرجہ ذیل عناصر ہر HTML فائل کے لئے لازمی حصوں ہیں.

  • <! DOCTYPE html> = یہ براؤزر کا اعلان ہے کہ یہ ایک HTML فائل ہے. آپ کو <HTML> ٹیگ سے پہلے اس کی وضاحت کرنا ضروری ہے.
  • <html> </ html> = یہ ایچ ٹی ایم ایل فائل کا جڑ عنصر ہے. آپ سب کچھ لکھتے ہیں <HTML> اور </ html> کے درمیان.
  • <سر> </ سر> = یہ براؤزر کے لئے میٹا معلومات کا حصہ ہے. اس ٹیگ کے اندر کوڈز کوئی بصری پیداوار نہیں ہیں.
  • <جسم> </ جسم> = یہ ایک ایسا حصہ ہے جسے ویب براؤزر ملتا ہے. ویب سائٹ پر جو آپ بالکل دیکھتے ہیں وہ <جسم> اور </ جسم> کے درمیان کوڈوں کا انجام دیتا ہے.


اوپر جاؤ

2- HTML ٹیگز

ایچ ٹی ایم ایل سینگ مختلف ٹیگ کے تعاون کا ہے. آپ کو یہ جاننا ہوگا کہ وہ کیسے کام کرتے ہیں. آپ کو یہ یقینی بنانا ہے کہ انہوں نے صحیح طریقے سے ان کا استعمال کیا ہے.

ایچ ٹی ایم ایل ٹیگ عام طور پر ایک افتتاحی اور بند ہونے والی ٹیگ ہے. افتتاحی ٹیگ میں کم سے کم (<) اور اس سے زیادہ (>) نشان سے گھرا مطلوبہ لفظ ہے. بند ہونے والی ٹیگ میں سب کچھ ہے لیکن اس سے بھی کم (<) نشان کے بعد ایک اضافی سلیش (/) ہے.

(2A) ہیڈ ٹیگز

تمام سر ٹیگ <head> اور </ head> کے درمیان چلتے ہیں. ان میں ویب براؤزر اور تلاش کے انجن کے لئے میٹا معلومات شامل ہیں. ان بنیادی طور پر کوئی بصری پیداوار نہیں ہے.

<عنوان> </ عنوان>

عنوان ٹیگ براؤزر ٹیب پر نظر آتا ہے جس میں ایک ویب صفحہ کا عنوان بیان کرتا ہے. یہ معلومات ویب پروگراموں اور تلاش کے انجن کے ذریعہ استعمال کیا جاتا ہے. آپ ایچ ٹی ایم ایل فائل میں سب سے زیادہ ایک عنوان حاصل کرسکتے ہیں.

کا کوڈ:

<عنوان> میرا پہلا ویب صفحہ </ title>
عنوان ٹیگ آپ کے براؤزر کے سب سے اوپر ظاہر ہوتا ہے.

<لنک>

لنک ٹیگ اپنے HTML پیج کو بیرونی وسائل کے ساتھ روابط رکھتا ہے. اس کا بنیادی استعمال CSS کے شیلیوں کے ساتھ HTML صفحہ سے منسلک ہے. یہ خود کو بند کرنے والی ٹیگ ہے اور اسے ختم کرنے کی ضرورت نہیں ہے </ link>. یہاں سے تعلق رکھنے والے فائل کے ساتھ تعلق رکھتا ہے اور اس کا مطلب ذریعہ ہے.

کا کوڈ:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<میٹا>

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

کا کوڈ:

<meta name = "description" content = "یہ مختصر وضاحت ہے کہ سرچ انجن دکھاتا ہے"

<سکرپٹ> </ اسکرپٹ>

اسکرپٹ ٹیگ ایک سرور سائڈ اسکرپٹ سمیت یا بیرونی سکرپٹ فائل کے لئے ایک لنک بنانے کے لئے استعمال کیا جاتا ہے. اس کے افتتاحی ٹیگ میں دو صفات ہوسکتے ہیں. ایک قسم ہے اور ایک اور ذریعہ (src) ہے.

کا کوڈ:

<سکرپٹ کی قسم = "متن / جاوا اسکرپٹ" src = "scripts.js"> </ script>

<noscript> </ noscript>

ویب براؤزر میں سکرپٹ معذور ہوجاتے ہیں تو نسکری ٹیگ کام کرتا ہے. یہ ان کے ساتھ مطابقت رکھتا ہے کہ وہ اپنے ویب براؤزرز میں سکرپٹ کی اجازت نہیں دیتا.

کا کوڈ:

<noscript> <p> افسوس! سکرپٹ معذور ہیں. </ p> </ noscript>

(2B) جسمانی ٹیگز

تمام جسم ٹیگ <جسم> اور </ جسم> کے درمیان چلتے ہیں. ان کے پاس بصری نتائج ہیں. یہ سب سے زیادہ کام کیا جاتا ہے. آپ کو اپنے مرکزی صفحے کے مواد کو تشکیل دینے کیلئے ان ٹیگ کا استعمال کرنا ہوگا.

<h1> </ h1> to <h6> </ h6>

یہ سرخی ٹیگ ہیں. سب سے اہم سرخی <h1> اور <h6> کے ساتھ کم از کم اہم کے ساتھ ٹیگ کیا جاتا ہے. آپ کو صحیح تنظیمی ڈھانچے میں استعمال کرنا چاہئے.

کا کوڈ:

<h1> یہ ایک H1 سرخی ہے </ h1> <h2> یہ ایک H2 سرخی ہے </ h2> <h3> یہ ایک h3 سرخی ہے </ h3> <h4> یہ ایک H4 سرخی ہے </ h4> <h5 > یہ ایک H5 سرخی ہے </ h5> <h6> یہ ایک H6 سرخی ہے </ h6>

: پیداوار

فارمیٹ فارمیٹنگ

ایک HTML فائل میں متن کئی فارمیٹنگ ٹیگ کا استعمال کرتے ہوئے فارمیٹیٹ کیا جا سکتا ہے. جب آپ اپنے مواد سے لفظ یا لائن کو اجاگر کرنا چاہتے ہیں تو یہ ضروری ہو گا.

کا کوڈ:

<p> آپ اپنے متن کو بہت سارے طریقے سے اجاگر کر سکتے ہیں. </ p> <p> آپ <strong> bold </ strong>، <u> زیر التواء </ u>، <em> اٹلی </ em>، <mark کرسکتے ہیں. > نشان </ mark>، <ذیلی> سبسکرپٹ </ sub>، <sup> سپرسک </ sup> اور زیادہ! </ p>

: پیداوار

<! ->>

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

: مثال کے طور پر

<! - <p> اس کے ارد گرد ان کے ارد گرد کسی بھی کوڈ کو تبصرہ کرسکتے ہیں </ p> ->

(2C) دیگر اہم HTML ٹیگز

<a> </a>

لنگر ایک انمول ٹیگ ہے جو تقریبا ہر جگہ استعمال ہوتا ہے. آپ کو کم سے کم ایک لنگر لنک کے بغیر کسی بھی ویب صفحہ آن لائن نہیں مل جائے گا.

ڈھانچہ ایک ہی ہے. اس کا ایک افتتاحی <a> اور اختتامی حصہ </a> ہے. متن آپ لنگر کرنا چاہتے ہیں <a> اور </a> کے درمیان جاتا ہے.

وہاں کچھ خاصیت موجود ہیں جو صارف کو اس پر کلک کرنے کے بعد کہاں کی جاتی ہے اور کس طرح کی جاتی ہے.

  • ahref = "" = یہ منزل کا لنک بیان کرتا ہے. یہ لنک ڈبل حوالہ جات کے درمیان جاتا ہے.
  • ہدف = "" = اس کی وضاحت کرتا ہے کہ آیا یو آر ایل براؤزر ٹیب میں یا اسی ٹیب میں کھل جائے گا. ہدف = "_ خالی" نئے ٹیب کے لئے ہے اور ہدف = "_ خود" اسی ٹیب میں کھولنے کے لئے ہے.
  • rel = "" = اس سے منسلک صفحے کے ساتھ موجودہ صفحہ کا تعلق بیان کرتا ہے. اگر آپ کو منسلک صفحہ پر اعتماد نہیں ہے تو، آپ rel = "nofollow" کی وضاحت کرسکتے ہیں.

کا کوڈ:

Google پر جانے کیلئے <p> <a target="_blank" href="https://www.google.com/"> یہاں کلک کریں </a>. یہ ایک نئے ٹیب میں کھل جائے گا. </ p> <p> <a target="_self" href="https://www.google.com/"> یہاں کلک کریں </a>. یہ بھی آپ کو Google پر لے جائے گا لیکن موجودہ ٹیب میں کھل جائے گا. </ p>

: پیداوار

<img />

تصویری ٹیگ ایک اور اہم ٹیگ ہے جس کے بغیر آپ بہت سارے تصویر پر مبنی ویب سائٹس کا تصور نہیں کر سکتے ہیں.

<img /> ایک خود اختتامی ٹیگ ہے. اسے روایتی بندش کی طرح ضرورت نہیں ہے </ img>. کچھ خصوصیات ہیں جو آپ کو جاننے کی ضرورت ہے کہ آپ صحیح طریقے سے استعمال کرسکتے ہیں.

  • src = "" = یہ تصویر کی ذریعہ لنک کی وضاحت کے لئے ہے. لنک کو دوہری حوالوں کے درمیان رکھو.
  • alt = "" = یہ متبادل متن کے لئے کھڑا ہے. جب آپ کی تصویر لوڈ نہیں ہو رہی ہے، تو یہ متن صارفین کو لاپتہ تصویر کے بارے میں ایک خیال دے گا.
  • چوڑائی = "" = یہ پکسلز میں ایک تصویر کی چوڑائی کی وضاحت کرتا ہے.
  • اونچائی = "" = یہ پکسلز میں ایک تصویر کی اونچائی کی وضاحت کرتا ہے.

: مثال کے طور پر

<p> اگست 2014 میں یہ Googleplex ہے. </ p> <p> اس تصویر میں 500 پکسلز کی چوڑائی اور 375 پکسلز کی اونچائی ہے. </ p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" اگست 2014 میں Google کے ہیڈکوارٹر "چوڑائی =" 500 "اونچائی =" 375 "/>

: پیداوار

تجاویز: ایک کلک قابل تصویر ڈالنا چاہتے ہیں؟ <a> ٹیگ کے ساتھ تصویر کوڈ لپیٹ کریں. دیکھو کہ یہ کس طرح جاتا ہے.

<ol> </ ol> یا <ul> </ ul>

فہرست ٹیگ اشیاء کی ایک فہرست بنانے کے لئے ہے. <ol> حکم دیا فہرستوں کے لئے کھڑا ہے (شمار ​​شدہ فہرست) اور <ul> غیر ترتیب شدہ فہرستوں کے لئے کھڑا ہے (بلٹ پوائنٹس).

<ol> یا <ul> کے اندر فہرست کی فہرست <li> </ li> کے ساتھ ٹیگ کیا جاتا ہے. لی فہرست کے لئے کھڑا ہے. آپ کے پاس <>> بہت زیادہ ہوسکتے ہیں جیسا کہ والدین <ol> یا <ul> ٹیگ کے اندر آپ چاہتے ہیں.

کا کوڈ:

<p> یہ ایک فہرست کی فہرست ہے: </ p> <ol> <li> آئٹم 1 </ li> <li> آئٹم 2 </ li> <li> آئٹم 3 </ li> </ ol> <p> یہ ایک غیر ترتیب شدہ فہرست ہے: </ p> <ul> <li> آئٹم 1 </ li> <li> آئٹم 2 </ li> <li> آئٹم 3 </ li> </ ul>

: پیداوار

<ٹیبل> </ ٹیبل>

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

<ٹیبل> </ ٹیبل> بیرونی والدین کا کوڈ ہے. اس ٹیگ میں، <tr> میز قطار کے لئے کھڑا ہے، <td> ٹیبل کالم کے لئے کھڑا ہے اور <th> ٹیبل ہیڈر کے لئے کھڑا ہے.

کا کوڈ:

<ٹیبل> <tr> <th> نام </ th> <th> عمر </ th> <th> پیشہ </ th> </ tr> <tr> <td> جو <td> 27 </ td> < TD> بزنس مین </ td> </ tr> <tr> <td> کیرول </ td> <td> 26 </ td> <td> نرس </ td> </ tr> <tr> <td> سیمون < / td> <td> 39 </ td> <td> پروفیسر </ td> </ tr> </ ٹیبل>

: پیداوار

نوٹ: سب سے پہلے <tr> کے اندر قیمتوں کے عنوانات ہیں. لہذا، ہم نے استعمال کیا جس میں بولڈ ٹیکسٹ اثر متن پر لاگو ہوتا ہے.

ٹیبل گروپنگ

ٹیبل گروپ ساز عناصر کا استعمال کرتے ہوئے آپ میز کی فعالیت کو بڑھا سکتے ہیں. ایسے وقت ہوتے ہیں جب آپ کو ایک سے زیادہ صفحات میں تقسیم ہونے والی بڑی میزیں بنانے کی ضرورت ہوتی ہے.

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

میز گروپنگ ٹیگ یہ ہیں:

  • <thead> </ thead> = ایک میز کے عنوانات ریپنگ کرنے کے لئے. یہ میز کے ہر تقسیم صفحے پر پرنٹ کرتا ہے.
  • <tbody> </ tbody> = ایک میز کے اہم اعداد و شمار کو ریپنگ کرنے کے لئے. آپ کی ضرورت ہوسکتی ہے آپ کے پاس بہت زیادہ <tbody> ہوسکتا ہے. A <tbody> ٹیگ کا مطلب ڈیٹا کا الگ گروپ ہے.
  • <tfoot> </ tfoot> = ایک میز کے فوٹر کی معلومات ریپنگ کرنے کے لئے. یہ میز کے ہر تقسیم صفحے پر پرنٹ کرتا ہے.

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

یہاں یہ ہے کہ ہم کس طرح <exadplified ٹیبل <<ad> <tbody> اور <tfoot>>

کا کوڈ:

<ٹیبل> <thead> <tr> <th> نام </ th> <th> عمر </ th> <th> پیشہ </ th> </ tr> </ thead> <tbody> <tr> <td> جان </ td> <td> 27 </ td> <td> تاجر </ td> </ tr> <tr> <td> کیرول </ td> <td> 26 </ td> <td> نرس </ td> </ tr> <tr> <td> سیمون </ td> <td> 39 </ td> <td> پروفیسر </ td> </ tr> </ tbody> <tfoot> <tr> <td> کل افراد: </ td> <td> 3 </ td> </ tr> </ tfoot> </ table>

: پیداوار

<فارم> </ فارم>

فارم کے عنصر ویب صفحات کے لئے انٹرایکٹو فارم بنانے کے لئے استعمال کیا جاتا ہے. ایچ ٹی ایم ایل کے فارم میں کئی مسلسل عناصر شامل ہیں. مثال کے طور پر: <لیبل>، <ان پٹ>، <ٹیکسٹیریا> وغیرہ.

فارم میں کارروائی کی خاصیت بہت اہم ہے. یہ معلومات کی پروسیسنگ کے لئے ایک سرور سائڈ یا تیسرے فریق پیج پر اشارہ کرتا ہے. پروسیسنگ کے لئے، آپ سب سے پہلے ایک طریقہ کی وضاحت کرنے کی ضرورت ہے.

آپ دو طریقوں میں سے کسی کا استعمال کرسکتے ہیں، حاصل کرسکتے ہیں یا پوسٹ کرسکتے ہیں. یو آر ایل کی شکل میں تمام معلومات بھیجیں جہاں پیغام پیغام کے جسم میں معلومات بھیجتا ہے.

فارم کے لئے ان پٹ کے بہت سے قسم ہیں. بہت بنیادی ان پٹ کی قسم متن ہے. یہ <ان پٹ کی قسم = "متن" کے طور پر لکھا جاتا ہے. اقسام بھی ریڈیو، چیک باکس، ای میل اور اسی طرح ہوسکتی ہیں. جمع کرانے کے بٹن کو بنانے کے لئے نیچے دیئے گئے ایک قسم کے ان پٹ کو ہونا چاہئے.

<لیبل> ٹیگ کو لیبل بنانے اور آدانوں کے ساتھ ان میں شامل کرنے کے لئے استعمال کیا جاتا ہے. ان پٹوں کے ساتھ لیبل کو ایسوسی ایٹنگ کی حکمرانی میں یہ ہے کہ لیبل اور id = "" ان پٹ کی خصوصیت = "" خصوصیت کے لئے ایک ہی قدر ہے.

کا کوڈ:

<form action = "#"> <label for = "firstname"> پہلا نام: </ لیبل> <ان پٹ کی قسم = "ٹیکسٹ" id = "firstname"> <br> <label for = "lastname"> آخری نام: </ label> <textarea id = "bio" rows = "10" cols = "" </ label> <ان پٹ کی قسم = "متن" id = "lastname"> <br> <label for = "bio"> مختصر بیو: 30 "پلیس ہولڈر =" اپنے بایو یہاں درج کریں ... "> </ textarea> <br> <لیبل> صنف: </ لیبل> <br> <لیبل کیلئے =" مرد "> مرد </ لیبل> <ان پٹ کی قسم = "ریڈیو" نام = "جنس" id = "male"> <br> <لیبل کے لئے = "خاتون"> خاتون </ لیبل> <ان پٹ کی قسم = "ریڈیو" نام = "صنفی" id = "خاتون"> <br > <ان پٹ کی قسم = "جمع کرائیں" قیمت = "جمع کرائیں"> <فارم>

: پیداوار

نوٹ: میں نے ایک خالی قیمت پر عمل کی نشاندہی کی ہے کیونکہ یہ معلومات پر عمل کرنے کے کسی بھی سرور سے منسلک نہیں تھا.


اوپر جاؤ

3- HTML خصوصیات

ایچ ٹی ایم ایل ٹیگ کے لئے ایک قسم کے نمونے خصوصیات ہیں. وہ ایچ ٹی ایم ایل ٹیگ میں نئے ترتیب شامل کرتے ہیں.

خصوصیت کا نام = "" کی حیثیت سے ایک خاص نظر آتا ہے اور افتتاحی HTML ٹیگ میں بیٹھتا ہے. خاصیت کی قیمت ڈبل قیمتوں کے درمیان جاتا ہے.

id = "" اور کلاس = ""

آئی ٹی اور کلاس HTML ٹیگ کی شناختی ہیں. مختلف ناموں کو شناختی کاروائیوں کے ذریعے مختلف ایچ ٹی ایم ایل کے عناصر کو نامزد کیا جاتا ہے. آپ ایک سے زیادہ عناصر کے لئے ایک کلاس شناخت کنندہ استعمال کرسکتے ہیں. لیکن آپ ایک سے زیادہ عناصر کے لئے ایک شناختی شناخت استعمال نہیں کر سکتے ہیں.

کا کوڈ:

<h1 class = "سرخی"> یہ اہم عنوان ہے </ h1>

href = ""

href ہائیپر ٹیکسٹ ریفرنس کے لئے ہے. وہ صارفین کو لنکس حوالہ دیتے ہیں. لنگر ٹیگ <a> صارفین کو ایک منزل یو آر ایل میں بھیجنے کیلئے استعمال کرتا ہے.

کا کوڈ:

<a href="https://www.google.com/"> Google </a>

src = ""

ایس ایس ایس ذریعہ کے لئے کھڑا ہے. یہ میڈیا یا وسائل کا ذریعہ ہے جسے آپ HTML فائل میں استعمال کررہے ہیں. ذریعہ یا تو مقامی یا تیسری پارٹی کے یو آر ایل ہوسکتا ہے.

کا کوڈ:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = ""

alt متبادل کے لئے کھڑا ہے. ایچ ٹی ایم ایل عنصر لوڈ نہیں کر سکتا جب یہ بیک اپ کا متن استعمال کرتا ہے.

کا کوڈ:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Google کا ہیڈکوارٹر" />

سٹائل = ""

طرز کی خصوصیت اکثر HTML ٹیگ میں استعمال ہوتی ہے. HTML کے ٹیگ کے اندر یہ سی ایس ایس کا کام کرتا ہے. آپ کے اسٹائل خصوصیات ڈبل قیمتوں کے درمیان چلتے ہیں.

کا کوڈ:

<h2 سٹائل = "رنگ: سرخ"> یہ ایک اور عنوان ہے </ h2>


اوپر جاؤ

4- کوڈ ڈسپلے: بلاک بمقابلہ ان لائن

کچھ عناصر ہمیشہ نئی لائن پر شروع کرتے ہیں اور مکمل دستیاب چوڑائی لے جاتے ہیں. یہ "بلاک" عناصر ہیں.

سابق: <div>، <p>، <h1> - <h6>، فارم وغیرہ.

کچھ عناصر صرف ضروری جگہ لے جاتے ہیں اور نئی لائن پر شروع نہیں کرتے ہیں. یہ "ان لائن" عناصر ہیں.

سابق: <a>، <span>، <br>، <strong>، <img> وغیرہ.

جب آپ سی ایس ایس کے شیلیوں کا استعمال کرتے ہیں تو آپ ان لائنوں سے بلاک عناصر کو مختلف کرنے کی ضرورت ہوگی. اس HTML گائیڈ میں، یہ بہت ضروری نہیں ہے.

کا کوڈ:

<! DOCTYPE HTML> <HTML> <سر> <عنوان> میرا پہلا ویب صفحہ </ عنوان> </ سر> <جسم> <h2> یہ ایک H2 سرخی ہے. اس کے پاس بلاک ڈسپلے ہے. </ h2> <h2> یہ ایک اور </ u> H2 سرخی ہے. یہاں درج ذیل ٹیگ میں ان لائن ڈسپلے ہے. </ h2> </ body> </ html>

: پیداوار


اوپر جاؤ

5- ایچ ٹی ایم ایل میں واحد اقتباس بمقابلہ ڈبل اقتباس

یہ سوال بہت واضح ہے. آپ HTML میں کیا استعمال کرنا چاہئے؟ سنگل اقتباس یا ڈبل ​​اقتباس؟ لوگ دونوں استعمال کرنے لگتے ہیں لیکن کون سا درست ہے؟

ایچ ٹی ایم ایل میں، ایک ہی اقتباس اور ڈبل حوالہ اسی میں ہے. ان کی پیداوار میں کوئی فرق نہیں ہے.

آپ اپنی مرضی کو پسند کرسکتے ہیں. لیکن کوڈوں کے ایک صفحے میں دونوں کو مل کر ایک خراب عمل سمجھا جاتا ہے. آپ کو ان میں سے کسی کے ساتھ مطمئن ہونا چاہئے.


اوپر جاؤ

6- Semantic ایچ ٹی ایم ایل بمقابلہ غیر semantic ایچ ٹی ایم ایل

Semantic HTML HTML کا تازہ ترین ورژن ہے جس میں HTML5 بھی کہا جاتا ہے. یہ غیر سیمنٹ HTML اور XHTML کے تیار کردہ ورژن ہے.

HTML5 بہتر کیوں ہے؟ پچھلے ورژن میں، ایچ ٹی ایم ایل کے عناصر کو شناخت / شناختی نام کے ذریعہ شناخت کیا گیا مثال کے طور پر: <div id = "مضمون"> </ div> ایک مضمون سمجھا جاتا تھا.

HTML5 میں، <آرٹیکل> </ آرٹیکل> ٹیگ کسی بھی ID / class identifier کے بغیر کسی مضمون کے طور پر خود کو نمائندگی کرتا ہے.

HTML5 کے لئے، اب تلاش کے انجن اور دیگر ویب ایپلی کیشنز کو ایک ویب صفحہ بہتر سمجھا جا سکتا ہے. سیمنٹیکل ویب سائٹس SEO کے لئے بہتر کرنے کے لئے ثابت کر چکے ہیں.

یہاں کچھ مشہور HTML5 ٹیگ کی ایک فہرست ہے:

  • <اہم> </ main> = یہ آپ کو اپنے ناظرین کو دکھانے کے لئے چاہتے ہیں کہ اہم مواد کو لپیٹ کرنے کے لئے ہے.
  • <ہیڈر> </ ہیڈر> = یہ عنوان یا مصنف میٹا جیسے مواد کے ہیڈر حصہ کو نشان زد کرنے کے لئے ہے.
  • <مضمون> </ مضمون> = یہ آپ کے ناظرین کے لئے ایک صارف کی وضاحت یا آزاد مواد کی وضاحت کرتا ہے.
  • <سیکشن> </ سیکشن> = یہ کسی بھی کوڈ جیسے ہیڈر، فوٹر یا سائڈبار گروپ کرسکتا ہے. آپ کہہ سکتے ہیں، یہ ایک ڈی وی ڈی کی شکل ہے.
  • <فوٹر> </ فوٹر> = یہ آپ کی فوٹر مواد، ڈس کلیمر یا کاپی رائٹ کا متن ہے.
  • <آڈیو> </ آڈیو> = یہ آپ کو کسی بھی پلگ ان کے مسئلے کے بغیر آڈیو فائلوں کو داخل کرنے کے قابل بناتا ہے.
  • <ویڈیو> </ ویڈیو> = <آڈیو> کی طرح، آپ کو بغیر کسی پلگ ان کے مسائل کے بغیر اس ٹیگ کا استعمال کرتے ہوئے ویڈیوز داخل کر سکتے ہیں.

ایک سادہ HTML5 ڈھانچہ اس طرح نظر آئے گا:

<! DOCTYPE HTML> <HTML> <سر> <میٹا چارسیٹ = "یو این ایف 8" /> <عنوان> میرا پہلا ویب صفحہ </ عنوان> </ سر> <جسم> <ہیڈر> <nav> <ul> < >> مینو 1 </ li> <li> مینو 2 </ li> </ ul> </ nav> </ header> <main> <مضمون> <ہیڈر> <h2> یہ مضمون کا عنوان ہے </ </ p> </ article> </ main> <footer> <p> کاپی رائٹ 2 جان دو </ p> </ p> </ p> </ head>> <p> مضمون کا مضمون یہاں جاتا ہے </ p> p> </ footer> </ body> </ html>


اوپر جاؤ

7- ایچ ٹی ایم ایل کی توثیق

زیادہ سے زیادہ ویب پروفیشنلز کو ختم کرنے کے بعد ان کے کوڈ کو درست بناتا ہے. ضابطہ اخلاق پڑھیں یہ تصویر ضابطہ اخلاق کے مطابق ہے.

اپنے کوڈوں کی توثیق کے لئے دو ممکنہ وجوہات ہیں:

  1. یہ آپ کو اپنے کوڈ کراس براؤزر اور کراس پلیٹ فارم مطابقت پذیر بنانے میں مدد ملے گی. کوڈ آپ کے موجودہ براؤزر میں کوئی غلطی نہیں دکھا سکتا ہے، لیکن یہ شاید کسی دوسرے میں ہو. کوڈ کی توثیق اس کو حل کرے گی.
  2. اگر آپ کے پاس غلطیاں موجود ہیں تو انجن اور دوسرے ویب پروگرامز آپ کے صفحے کو کرال کر روک سکتے ہیں. آپ توثیق کے ذریعے اس بات کی تصدیق کر سکتے ہیں کہ آپ کی کوئی بڑی غلطی نہیں ہے.

W3C Validator کوڈ کی توثیق کے لئے سب سے زیادہ مقبول سروس ہے. کوڈز کو درست کرنے کے لۓ ان کے کئی طریقے ہیں. آپ یا تو ایک فائل کو اپ لوڈ کرسکتے ہیں یا براہ راست کوڈ ان کے توثیقی انجن میں ان پٹ کو اپ لوڈ کرسکتے ہیں.


اوپر جاؤ

8- دیگر مددگار وسائل

ایچ ٹی ایم ایل ایک کبھی سیکھنا موضوع ہے. ایچ ٹی ایم ایل کے مزید اپ ڈیٹ ورژن جلد ہی آئیں گے. لہذا آپ کو اپ ڈیٹ رہنے اور مشق رکھنے کی ضرورت ہے. پریکٹس یہ ہے کہ Aces ایچ ٹی ایم ایل.

یہاں آپ کے لئے کچھ مددگار مددگار ہیں: