مثالهای HTML
- صفحه قبل HTML5 SSE
- صفحه بعدی آزمون HTML
ایچ تی ایمل بنیادی ٹیگ مثال
- ایک سادا ایچ تی ایمل فائل
- یہ مثال ایک بہت سادا ایچ تی ایمل فائل ہے، جس میں ممکنہ طور پر کمترین ایچ تی ایمل ٹیگ استعمال کئے گئے ہیں۔ یہ آپ کو دکھاتا ہے کہ بodi عناصر میں کس طرح کا متن براہ راست ناظرین کو دکھایا جاتا ہے。
- سادہ پاراگراف
- یہ مثال، پاراگراف عناصر میں کس طرح کا متن براہ راست ناظرین کو دکھایا جاتا ہے، دکھاتا ہے。
- بہت سے پاراگراف
- یہ مثال، پاراگراف عناصر کے کچھ طبیعی رفتار کو دکھاتا ہے。
- شاعری کا مسئلہ
- یہ مثال، ایچ تی ایمل فارمیٹنگ کے کچھ معاملات کو دکھاتا ہے。
- ختم کردنی
- یہ مثال، ایچ تی ایمل میں ختم کردنی کا استعمال دکھاتا ہے。
- عناوین
- یہ نمائش دیتا ہے کہ کس طرح HTML دستاویز میں عناوین کا نشان دینا جاتا ہے۔
- مرکز میں تیار کردہ عناوین
- یہ نمائش دیتا ہے کہ کس طرح مرکز میں تیار کردہ عناوین کو نمائش دی جاتی ہے۔
- کورس
- یہ نمائش دیتا ہے کہ کس طرح کسی کورس کو داخل کردا جاتا ہے۔
- پوشیدہ تبصرہ
- یہ نمائش دیتا ہے کہ کس طرح HTML کے سورس کو میں کچھ کا ذکر کردا جاتا ہے۔
- پس منظر رنگ
- یہ نمائش دیتا ہے کہ کس طرح HTML پیج کو پس منظر رنگ میں ڈالایا جاتا ہے۔
HTML تکسٹ فرمت مثال
- تекст فرمت
- یہ نمائش دیتا ہے کہ کس طرح ایک HTML دستاویز میں متن کو فرمت کیا جاتا ہے۔
- پیش فرمت متن
- یہ نمائش دیتا ہے کہ کس طرح pre ٹیگ کا استعمال کیا جاتا ہے تاکہ خالی سطر اور خالی جگہ کو کنٹرول کیا جاسکے۔
- "کمپیوٹر آؤٹ پٹرن" ٹیگ
- یہ نمائش دیتا ہے کہ مختلف "کمپیوٹر آؤٹ پٹرن" ٹیگ کا نمائش دیتا ہے۔
- سرکار
- یہ نمائش دیتا ہے کہ کس طرح HTML دستاویز میں ایک سرکار کو لکھا جاتا ہے۔
- کوتا اور ابتدائی حروف کی بندوبست
- کوتا اور ابتدائی حروف کی بندوبست
- کلمات کی جانب کا بندوبست
- یہ نمائش دیتا ہے کہ کس طرح کلمات کی جانب کا بندوبست بدلایا جاتا ہے۔
- بلاک کی بندوبست
- کوتا کی بندوبست کی بندوبست
- حذف شدہ اور داخل کردہ متن کا اثر
- یہ مثال نمائش دیتا ہے کہ کس طرح حذف شدہ متن اور داخل کردہ متن کو علامت کیا جاتا ہے۔
HTML لنک مثال
- سوپر لنک قائم کرنا
- یہ نمائش دیتا ہے کہ کس طرح HTML دستاویز میں لنک قائم کیا جاتا ہے۔
- تصویر کو لنک کے طور پر استعمال کرنا
- یہ نمائش دیتا ہے کہ کس طرح تصویر کو لنک کے طور پر استعمال کیا جاتا ہے۔
- لنک کو نئی براوزر ونڈو میں کھولنا
- یہ نمائش دیتا ہے کہ کس طرح ایک پیج کو نئی ونڈو میں کھولنا، جس سے مواصلاتی نے اپنے سائٹ سے باہر نکلنا نہیں پڑتا۔
- ایک ہی پیج کے مختلف حصوں تک لنک کیا جانا
- یہ نمائش دیتا ہے کہ کس طرح لنک کا استعمال کیا جاتا ہے تاکہ دستاویز کا دوسرے حصے تک پہنچا جاسکے۔
- فریم ورک سے باہر نکلنا
- یہ نمائش دیتا ہے کہ کس طرح فریم ورک سے باہر نکل سکتا ہے، اگر آپ کا پیج فریم ورک میں قائم ہوا ہوا ہو۔
- ایمیل لنک کا قیام
- یہ نمائش دیتا ہے کہ کس طرح ایمیل تک لنک کیا جاتا ہے۔ (یہ مثال صرف ایمیل کلینٹ پروگرام نصب کئے جانے کے بعد کام کرتا ہے۔)
- ایمیل لنک کا قیام 2
- یہ مثال نمائش دیتا ہے کہ کس طرح پیپر لنک کا استعمال کیا جاتا ہے۔
HTML فریم ورک مثال
- عمودی فریم ورک
- یہ نمائش دیتا ہے: کس طرح تین مختلف دستاویزات سے ایک عمودی فریم ورک بنایا جاتا ہے۔
- افقی فریم ورک
- یہ نمائش دیتا ہے: کس طرح تین مختلف دستاویزات سے ایک افقی فریم ورک بنایا جاتا ہے۔
- کس طرح <noframes> ٹیگ کا استعمال کیا جاتا ہے؟
- یہ نمائش دیتا ہے: کس طرح <noframes> ٹیگ کا استعمال کیا جاتا ہے۔
- میکس فریم ورک کا ساختار
- یہ مثال نمائش دیتا ہے کہ کس طرح تین دستاویزات کا فریم ورک بنایا جاتا ہے، نیز ان کو سطر اور ستون میں کیسے میکس کیا جاتا ہے۔
- noresize="noresize" پرپرٹی والا فریم ورک کا ساختار
- یہ مثال نمائش دیتا ہے کہ noresize پرپرٹی کا استعمال کس طرح کیا جاتا ہے۔ اس مثال میں فریم ورک کو کوئی بھی انداز میں بجھایا نہیں جاسکتا۔ فریم ورک کے درمیان کی سیمنار پر ماوس کو لگایا جا سکتا ہے، آپ کو متبادل نہیں مل جائیگا کہ سیمنار کو موٹا جاسکتا ہے۔
- ناویگیشن فریم ورک
- یہ مثال نمائش دیتا ہے کہ کس طرح ناویگیشن فریم ورک بنایا جاتا ہے۔ ناویگیشن فریم ورک میں ایک لنک لیسٹ شامل ہوتا ہے جو دوسرے فریم ورک کو نشان میزانی دیتا ہے۔ فائل "contents.htm" میں تین لنکس شامل ہیں۔
- 内联框架
- 本例演示如何创建内联框架（HTML 页中的框架）。
- 跳转至框架内的一个指定的节
- 本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 进行标识。
- 使用框架导航跳转至指定的节
- 本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
HTML ٹیبل مثال
- ٹیبل
- اس مثال میں کیسے HTML ڈاکومنٹ میں ٹیبل بنایا جاسکتا ہے، یہ دکھایا گیا ہے。
- ٹیبل فریم
- اس مثال میں مختلف اقسام کا فریم کا نمونہ دکھایا گیا ہے。
- بغیر فریم کا ٹیبل
- اس مثال میں کیسے بغیر فریم کا ٹیبل کا نمونہ دکھایا گیا ہے。
- ٹیبل میں عنوان (Heading)
- اس مثال میں کیسے سلولوں کو دکھایا جاسکتا ہے، یہ دکھایا گیا ہے。
- خالی سلول
- اس مثال میں خالی سلولوں کو کیسے ' & nbsp; ' کے ذریعہ ہینڈل کیا جاسکتا ہے، یہ دکھایا گیا ہے。
- عنوان والی سلول
- اس مثال میں عنوان (caption) والی سلول کا نمونہ دکھایا گیا ہے。
- کرون یا کالن کرون کی سلولوں
- اس مثال میں کیسے کرون یا کالن کرون کی سلولوں کی تعریف کی جاسکتی ہے، یہ دکھایا گیا ہے。
- ٹیبل کے اندر لبل
- مختلف عناصر کے اندر عناصر کا دکھانا کیسے کیا جاتا ہے، یہ دکھایا گیا ہے。
- سلولوں کی کنٹنٹ کی کنارے (Cell padding)
- سلولوں کی کنٹنٹ اور سلولوں کی کیرنل کے درمیان خالی جگہ بنانے کیسے کیا جاتا ہے، یہ دکھایا گیا ہے。
- سلولوں کی فاصلہ (Cell spacing)
- سلولوں کے درمیان کی فاصلہ کا استعمال کیسے کیا جاتا ہے، یہ دکھایا گیا ہے。
- ٹیبل میں پس منظر رنگ یا پس منظر تصویر شامل کیا جاسکتا ہے
- ٹیبل میں پس منظر شامل کیا جاسکتا ہے
- سلولوں میں پس منظر رنگ یا پس منظر تصویر شامل کیا جاسکتا ہے
- اس مثال میں کیسے سلولوں میں پس منظر رنگ یا پس منظر تصویر شامل کیا جاسکتا ہے، یہ دکھایا گیا ہے。
- ٹیبل سلولوں میں تھیم کیں
- اس مثال میں 'align' پرزنٹیج کا استعمال کیسے کیا جاتا ہے، تاکہ ٹیبل کی سلولوں کی تھیم کیں کیں، تاکہ ایک خوبصورت ٹیبل بنایا جاسکے، یہ دکھایا گیا ہے。
- فریم (frame) پرزنٹیج
- اس مثال میں 'frame' پرزنٹیج کا استعمال کیسے کیا جاتا ہے، تاکہ ٹیبل کے اطراف کا فریم کنٹرول کیا جاسکے، یہ دکھایا گیا ہے。
HTML فہرست مثال
- غیر مرتب فہرست
- اس مثال میں غیر مرتب فہرست کا نمونہ دکھایا گیا ہے。
- مرتب فہرست
- اس مثال میں مرتب فہرست کا نمونہ دکھایا گیا ہے。
- مختلف اقسام کی غیر مرتب فہرست
- اس مثال میں ایک غیر مرتب فہرست کا نمونہ دکھایا گیا ہے。
- مختلف اقسام کی مرتب فہرست
- اس مثال میں مختلف اقسام کی مرتب فہرست کا نمونہ دکھایا گیا ہے。
- مستحکم فہرست
- اس مثال میں مستحکم فہرست کا کس طرح مستحکم فہرست میں مستحکم فہرست بنا سکتا ہے، یہ دکھایا گیا ہے。
- مستحکم فہرست 2
- اس مثال میں مزید پیچیدہ مستحکم فہرست کا نمونہ دکھایا گیا ہے。
- معین فہرست
- اس مثال میں ایک معین فہرست کا نمونہ دکھایا گیا ہے。
HTML فرم اور انٹری مثال
- متن فیلڈ (Text fields)
- ایچ تی ایمل میں متن فیلڈ بنانا، جس میں کاربر متن لکھ سکتا ہے، متن فیلڈ میں لکھنے کی تعداد کو محدود نہیں کیا جاتا ہے。
- پاسورڈ فیلڈ
- ایچ تی ایمل میں پاسورڈ فیلڈ بنانا
- چیک بکشن
- ایچ تی ایمل میں سادہ چیک بکشن بنانا، جس میں کاربر چیک بکشن کو منتخب یا منسوخ کرسکتا ہے。
- رادیو بکشن
- ایچ تی ایمل میں سادہ رادیو بکشن بنانا
- ایچ تی ایمل میں سادہ درجہ بندی فیلڈ بنانا، جو ایک انتخابی فیلڈ ہے。
- سادہ درجہ بندی فیلڈ
- ایچ تی ایمل میں ایک سادہ درجہ بندی فیلڈ بنانا، جو ایک انتخابی فیلڈ ہے، جو انتخابی فیلڈ ہے。
- ایک اور درجہ بندی فیلڈ
- متن فیلڈ (Textarea)
- اس مثال میں دکھایا گیا ہے کہ کیسے ایک متن فیلڈ (ملاحظات: متن فیلڈ ایک کثیر رکنی متن ورودی کنٹرول ہے) بنایا جاتا ہے، جس میں کاربر متن لکھ سکتا ہے، متن فیلڈ میں لکھنے کی تعداد کو محدود نہیں کیا جاتا ہے。
- بٹن بنانا
- اس مثال میں دکھایا گیا ہے کہ کیسے بٹن بنائے جاتے ہیں، جس میں بٹن پر لکچر کو خودکار طور پر تخصیص کیا جاسکتا ہے。
- اعداد کے اطراف میں فیلڈسٹ
- اس مثال میں دکھایا گیا ہے کہ کیسے اعداد کے اطراف میں ایک عنوان والا فیلڈسٹ کا استعمال کیا جاتا ہے。
فرم مثال
- انٹر فیلڈ اور توثیق کلک والا فرم
- اس مثال میں دکھایا گیا ہے کہ کیسے ویب پیج میں فرم لگایا جاتا ہے، جس میں دو انٹر فیلڈ اور ایک توثیق کلک شامل ہیں。
- چیک بکشن والا فرم
- اس فرم میں دو چیک بکشن اور ایک توثیق کلک شامل ہیں。
- رادیو بکشن والا فرم
- اس فرم میں دو رادیو بکشن اور ایک توثیق کلک شامل ہیں。
- فرم کے ذریعے ای میل بھیجنا
- اس مثال میں دکھایا گیا ہے کہ کیسے فرم کے ذریعے ای میل بھیجایا جاتا ہے。
ایچ تی ایمل تصویر مثال
- تصویر داخل کرنا
- ویب پیج میں تصویر دکھانا
- مختلف مقامات سے تصویر داخل کرنا
- اس مثال میں دکھایا گیا ہے کہ کیسے دیگر فولدر یا سروسرو کی تصاویر ویب پیج میں دکھائی جاتی ہیں。
- پس منظر تصویر
- اس مثال میں دکھایا گیا ہے کہ کیسے ویب پیج میں پس منظر تصویر لگایا جاتا ہے。
- تصویر کو رکھنا
- اس مثال میں دکھایا گیا ہے کہ کیسے تصویر کو لکچر میں کیسے رکھا جاتا ہے。
- تصویر کو لگایا جاتا ہے
- اس مثال میں دکھایا گیا ہے کہ کیسے تصویر کو پاراگراف کے سمت چپ یا دکھ میں لگایا جاتا ہے。
- تصویر کی سائز بدلنا
- اس مثال میں دکھایا گیا ہے کہ کیسے تصویر کو مختلف سائز میں رکھا جاتا ہے。
- تصویر میں رپلیس ٹیکسٹ دکھانا
- اس مثال میں دکھایا گیا ہے کہ کیسے تصویر کو مختلف سائز میں رکھا جاتا ہے، جب کیسے تصویر لوڈ نہیں ہوتا تو رپلیس ٹیکسٹ پراپریٹی کا استعمال کیا جاتا ہے تاکہ پڑھنے والوں کو گمشدہ معلومات بتائی جاسکیں، یہ ویب پیج کی تمام تصاویر میں رپلیس ٹیکسٹ پراپریٹی لگانا اچھی عادت ہے。
- تصویر لینک بنانا
- اس مثال میں دکھایا گیا ہے کہ کیسے تصویر کو لینک کے طور پر استعمال کیا جاتا ہے。
- تصویر نقصان بنانا
- اس مثال میں دکھایا گیا ہے کہ کیسے ایک تصویر کو نقصان میں تبدیل کیا جاتا ہے جس میں کلک سے پائیدار علاقے ہیں، جس میں سے ہر ایک ایک ہیرو لینک ہیں。
- تصویر کو تصویر نقصان میں تبدیل کرنا
- اس مثال میں دکھایا گیا ہے کہ کیسے ایک عام تصویر کو تصویر نقصان میں تبدیل کیا جاتا ہے。
ایچ تی ایمل پس منظر مثال
- کم از کم کم کا پس منظر اور رنگ
- ایک پس منظر اور لکچر کی رنگ کا اچھا کم از کم مثال، جس سے ویب پیج میں لکچر پڑھنا آسان ہو جاتا ہے。
- ناکام کی رنگ اور پس منظر کا کم از کم
- مثالی از ترکیب رنگ پسزمینه و نوشتار که خوانایی متون صفحه را کاهش میدهد.
- تصویر پسزمینه خوانا
- مثالی از تصاویر پسزمینه و رنگ نوشتار که باعث خوانایی متون صفحه میشود.
- تصویر پسزمینه خوانا 2
- مثالی از تصاویر پسزمینه و رنگ نوشتار که باعث خوانایی متون صفحه میشود.
- تصویر پسزمینه ناخوانا
- مثالی از تصاویر پسزمینه و رنگ نوشتار که باعث خوانایی متون صفحه نمیشود.
مثال استایل HTML (style)
- استایلهای HTML
- این مثال نشان میدهد که چگونه میتوان از اطلاعات استایل اضافه شده به بخش <head> برای فرمتدهی HTML استفاده کرد.
- لینک بدون زیرخط
- این مثال نشان میدهد که چگونه میتوان از ویژگی استایل برای ایجاد یک لینک بدون زیرخط استفاده کرد.
- لینک به یک استایل خارجی
- این مثال نشان میدهد که چگونه میتوان از برچسب <link> برای لینک به یک استایل خارجی استفاده کرد.
مثال سربرگ HTML (head)
- عنوان مستند
- اطلاعات عنوان موجود در سربرگ در پنجره مرورگر نمایش داده نمیشود.
- یک target، تمام لینکها
- این مثال نشان میدهد که چگونه میتوان از برچسب base برای باز کردن تمام برچسبهای موجود در صفحه در یک پنجره جدید استفاده کرد.
مثال HTML متا (meta)
- توصیف مستند
- اطلاعات موجود در عنصر Meta میتواند مستند HTML را توصیف کند.
- کلمات کلیدی سند
- اطلاعات موجود در عنصر Meta میتواند کلمات کلیدی سند را توصیف کند.
- هدایت
- این مثال نشان میدهد که چگونه کاربر را در صورت تغییر آدرس وبسایت به یک آدرس دیگر هدایت میکند.
مثال HTML اسکریپت (Script)
- یک اسکریپت اضافه کنید
- این مثال نشان میدهد که چگونه میتوان اسکریپت را به یک مستند HTML اضافه کرد.
- اجرای اسکریپت در مرورگرهایی که از اسکریپت پشتیبانی نمیکنند
- این مثال نشان میدهد که چگونه میتوان با مرورگرهایی که از اسکریپت پشتیبانی نمیکنند، مقابله کرد.
- صفحه قبل HTML5 SSE
- صفحه بعدی آزمون HTML
