ایچ تی ایم ال مثال
- صفحه قبلی SSE HTML5
- صفحه بعدی ایچ تی ایم ال معائنہ
ایچ تی ایمل بنیادی ٹیگ مثال
- ایک سادا ایچ تی ایمل فائل
- یہ مثال بہت سادا ایچ تی ایمل فائل ہے، جس میں ممکنہ طور پر کمترین ایچ تی ایمل ٹیگ استعمال کی گئی ہے۔ یہ آپ کو دکھاتا ہے کہ بodi عناصر میں کس طرح کا متن براہ راست نگرانی میں آتا ہے۔
- سادہ پاراگراف
- یہ مثال دکھاتا ہے کہ پاراگراف عناصر میں کس طرح کا متن براہ راست نگرانی میں آتا ہے۔
- بہت سے پاراگراف
- یہ مثال، پاراگراف عناصر کے کچھ طبیعی رفتار کو دکھاتا ہے۔
- شاعری کا مسئلہ
- یہ مثال، ایچ تی ایمل فارمیٹنگ کے کچھ معاملات کو دکھاتا ہے۔
- فاصلہ لگانا
- یہ مثال، ایچ تی ایمل میں فاصلے لگانے کا استعمال دکھاتا ہے۔
- سرلیک
- یہ نمائش دیتا ہے کس طرح HTML دستاویز میں سرلیک کو نمائش دینا جاتا ہے
- مراکز کی ترتیب والی سرلیک
- یہ نمائش دیتا ہے کس طرح ایک مراکز کی ترتیب والی سرلیک کو نمائش دینا جاتا ہے
- پلائنٹ لائن
- یہ نمائش دیتا ہے کس طرح ایک پلائنٹ لائن کو داخل کردیا جاتا ہے
- میسر
- یہ نمائش دیتا ہے کس طرح HTML سورس کو میسر کیا جاتا ہے
- پس منظر رنگ
- یہ نمائش دیتا ہے کس طرح HTML پیج کو پس منظر رنگ سے پورا کیا جاتا ہے
HTML تکسٹ فرمت مثال
- تекст فرمت
- یہ نمائش دیتا ہے کس طرح HTML فائل میں متن کو فرمت کیا جاتا ہے
- پیش فرمت متن
- یہ نمائش دیتا ہے کس طرح pre تیگ کو استعمال کرکے خالی سطر اور خالی مسافات کو کنٹرول کیا جاتا ہے
- "کمپیوٹر کی اخراج" تیگ
- یہ نمائش دیتا ہے کس طرح مختلف "کمپیوٹر کی اخراج" تیگ کا نمائش دینا جاتا ہے
- ایسائی
- یہ نمائش دیتا ہے کس طرح HTML فائل میں ایک ایسا ایسائی بنایا جاتا ہے
- اختصار اور حروف کی کوتاهی
- کس طرح اختصار یا حروف کی کوتاهی کو نمائش دینا جاتا ہے
- کلمات کی رخ
- یہ نمائش دیتا ہے کس طرح کلمات کی رخ کو تبدیل کیا جاتا ہے
- بلاک نقل
- کس طرح مختلف طول کی نقل کو نمائش دینا جاتا ہے
- حذف شدہ اثر اور داخل کردہ اثر
- یہ مثال نمائش دیتا ہے کس طرح حذف شدہ متن اور داخل کردہ متن کو نشان دینا جاتا ہے۔
HTML لنک مثال
- سوپر لنک بنانا
- یہ نمائش دیتا ہے کس طرح HTML دستاویز میں لنک بنایا جاتا ہے۔
- تصویر کو لنک کے طور پر استعمال کیا جاتا ہے
- یہ نمائش دیتا ہے کس طرح تصویر کو لنک کے طور پر استعمال کیا جاتا ہے۔
- لنک کو نئی براؤزر ونڈو میں کھولنا
- یہ نمائش دیتا ہے کس طرح ایک پیج کو نئی ونڈو میں کھولنا، جس سے مراٹور کو اپنے سائٹ سے نکلنا نہیں پڑتا۔
- ایک ہی پیج کے مختلف حصوں تک لنک
- یہ نمائش دیتا ہے کس طرح لنک کو دستاویز کا دوسرے حصے تک لیندا جاتا ہے
- فریم ورک سے باہر نکلنا
- یہ نمائش دیتا ہے کس طرح فریم ورک سے باہر نکلنا، اگر آپ کا پیج فریم ورک میں قفل ہوا ہو۔
- پی ایمل لنک بنانا
- یہ نمائش دیتا ہے کس طرح پی ایمل تک لنک کیا جاتا ہے۔ (یہ مثال پی ایمل کلائنٹ پروگرام نصب کئے جانے کے بعد کام کرتا ہے۔)
- پی ایمل لنک بنانا 2
- یہ نمائش دیتا ہے کہ کس طرح پی ایمل لنکات کو مزید پیچیدہ بنایا جاتا ہے۔
HTML فریم ورک مثال
- عمودی فریم ورک
- یہ نمائش دیتا ہے: کس طرح تین مختلف دستاویزات سے ایک عمودی فریم ورک بنایا جاتا ہے۔
- افقی فریم ورک
- یہ نمائش دیتا ہے: کس طرح تین مختلف دستاویزات سے ایک افقی فریم ورک بنایا جاتا ہے۔
- کس طرح <noframes> تیگ استعمال کیا جاتا ہے
- یہ نمائش دیتا ہے: کس طرح <noframes> تیگ استعمال کیا جاتا ہے۔
- مزیدار فریم ورک کا کھاتما
- یہ مثال نمائش دیتا ہے کہ کس طرح تین دستاویزات کا فریم ورک بنایا جاتا ہے اور ان کو سطر اور سطر میں مشترک کیا جاتا ہے۔
- noresize="noresize" پراپریٹی والا فریم ورک کا کھاتما
- یہ مثال noresize پراپریٹی کا نمائش دیتا ہے۔ اس مثال میں فریم ورک کا سائز کو تبدیل نہیں کیا جاسکتا۔ فریم ورک کی بینی میں فریم ورک پر موس کو تھپا دیئے اور آپ کو دکھائی دے گا کہ فریم ورک کو نہیں موٹایا جاسکتا۔
- ناویگیشن فریم ورک
- یہ مثال نمائش دیتا ہے کہ کس طرح ناویگیشن فریم ورک بنایا جاتا ہے۔ ناویگیشن فریم ورک میں ایک لنک لسٹ شامل ہوتا ہے جو دوسرے فریم ورک کو نشان میں لائے گا۔ فائل "contents.htm" میں تین لنک شامل ہیں。
- ان لینک فریموار (فریموار داخلی HTML صفحات)
- 本例演示如何创建内联框架（HTML 页中的框架）。
- 跳转至框架内的一个指定的节
- 本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C10"> 进行标识。
- 使用框架导航跳转至指定的节
- 本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
HTML 表格实例
- 表格
- 这个例子演示如何在 HTML 文档中创建表格。
- 表格边框
- 本例演示各种类型的表格边框。
- 没有边框的表格
- 本例演示一个没有边框的表格。
- 表格中的表头(Heading)
- 本例演示如何显示表格表头。
- 空单元格
- 本例展示如何使用 " " 处理没有内容的单元格。
- 带有标题的表格
- 本例演示一个带标题 (caption) 的表格
- 跨行或跨列的表格单元格
- 本例演示如何定义跨行或跨列的表格单元格。
- 表格内的标签
- 本例演示如何显示在不同的元素内显示元素。
- 单元格边距(Cell padding)
- 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
- 单元格间距(Cell spacing)
- 本例演示如何使用 Cell spacing 增加单元格之间的距离。
- 向表格添加背景颜色或背景图像
- 本例演示如何向表格添加背景。
- 向表格单元添加背景颜色或者背景图像
- 本例演示如何向一个或者更多表格单元添加背景。
- 在表格单元中排列内容
- 本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
- 框架(frame)属性
- 本例演示如何使用 "frame" 属性来控制围绕表格的边框。
HTML 列表实例
HTML 表单与输入实例
- 文本域(Text fields)
- 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
- 密码域
- 本例演示如何创建 HTML 的密码域。
- 复选框
- 本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
- 单选按钮
- 本例演示如何在 HTML 中创建单选按钮。
- 简单的下拉列表
- 本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
- 另一个下拉列表
- 本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。）
- 文本域(Textarea)
- 本例演示如何创建一个文本域（多行文本输入控件）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。
- 创建按钮
- 本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
- Fieldset around data
- 本例演示如何在数据周围绘制一个带标题的框。
表单实例
- 带有输入框和确认按钮的表单
- 本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
- 带有复选框的表单
- 此表单包含两个复选框和一个确认按钮。
- 带有单选按钮的表单
- 此表单包含两个单选框和一个确认按钮。
- 从表单发送电子邮件
- 此例演示如何从表单发送电子邮件。
HTML 图像实例
- 插入图像
- 本例演示如何在网页中显示图像。
- 从不同的位置插入图片
- 本例演示如何将其他文件夹或服务器的图片显示到网页中。
- 背景图片
- 本例演示如何向 HTML 页面添加背景图片。
- 排列图片
- 本例演示如何在文字中排列图像。
- 浮动图像
- 本例演示如何使图片浮动至段落的左边或右边。
- 调整图像尺寸
- 本例演示如何将图片调整到不同的尺寸。
- 为图片显示替换文本
- 本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
- تصویر لنک بنانا
- اس مثال میں دکھایا گیا ہے کہ کس طرح ایک تصویر کو لنک کے طور پر استعمال کیا جاتا ہے。
- تصویر نقصان بنانا
- اس مثال میں دکھایا گیا ہے کہ کس طرح ایک تصویر کو کچھ کلیک کریئر والا نقصان بنایا جاتا ہے جس میں ہر علاقہ ایک ہیپر لنک ہوتا ہے。
- تصویر کو تصویر نقصان میں بنانا
- اس مثال میں دکھایا گیا ہے کہ کس طرح ایک عام تصویر کو تصویر نقصان میں بنایا جاتا ہے。
ایچ تی ایمل پس منظر مثال
- ملازمت کردہ پس منظر اور رنگ
- ایک پس منظر رنگ اور لسانی رنگ کا اچھا ملازمت، جس سے ویب پیج میں لسانی چھپنا آسان ہوتا ہے。
- ناکامپلیمنٹ بیک گراؤنڈ اور رنگ
- مثالی که نشان میدهد چگونه ترکیب رنگ پسزمینه و نوشتاری باعث میشود که متن صفحه سختتر خوانده شود.
- تصویر پسزمینه خوب با رنگهای نوشتاری
- مثالی که نشان میدهد چگونه تصاویر پسزمینه و رنگهای نوشتاری باعث میشوند که متن صفحه راحتتر خوانده شود.
- تصویر پسزمینه خوب 2 با رنگهای نوشتاری
- مثالی دیگر که نشان میدهد چگونه تصاویر پسزمینه و رنگهای نوشتاری باعث میشوند که متن صفحه راحتتر خوانده شود.
- تصویر پسزمینه بد با رنگهای نوشتاری
- مثالی که نشان میدهد چگونه تصاویر پسزمینه و رنگهای نوشتاری باعث میشوند که متن صفحه سادهتر خوانده نشود.
مثال استایل (style) HTML
- استایل در HTML
- این مثال نشان میدهد که چگونه میتوانید از اطلاعات استایل اضافه شده به بخش <head> برای فرمتدهی HTML استفاده کنید.
- لینک بدون خط زیر
- این مثال نشان میدهد که چگونه میتوانید از属性 استایل برای ایجاد یک لینک بدون خط زیر استفاده کنید.
- لینک به یک فایل استایل خارجی
- این مثال نشان میدهد که چگونه میتوانید از تگ <link> برای لینک به یک فایل استایل خارجی استفاده کنید.
مثال سربرگ (head) HTML
- عنوان مستند
- اطلاعات عنوان موجود در سربرگ داخلی در پنجره مرورگر نمایش داده نمیشود.
- یک هدف، تمام لینکها
- این مثال نشان میدهد که چگونه میتوانید از تگ base برای باز کردن تمام برچسبهای موجود در صفحه در یک پنجره جدید استفاده کنید.
مثال عنصر متا (meta) HTML
- توصیف مستند
- اطلاعات موجود در عنصر Meta میتواند مستند HTML را توصیف کند.
- کلمات کلیدی مستند
- اطلاعات موجود در عنصر Meta میتواند کلمات کلیدی مستند را توصیف کند.
- هدایت
- این مثال نشان میدهد که چگونه کاربر را در صورت تغییر آدرس وبگاه به آدرس دیگری هدایت کنید.
مثال اسکریپت (Script) HTML
- اضافه کردن یک اسکریپت
- این مثال نشان میدهد که چگونه میتوانید اسکریپت را به مستند HTML اضافه کنید.
- اجرای در مرورگرهایی که از اسکریپت پشتیبانی نمیکنند
- این مثال نشان میدهد که چگونه میتوانید مرورگرهایی که از اسکریپت پشتیبانی نمیکنند، مدیریت کنید.
- صفحه قبلی SSE HTML5
- صفحه بعدی ایچ تی ایم ال معائنہ
