مثال HTML

مثال على علامات أساسية HTML

ملف HTML بسيط

هذا المثال هو ملف HTML بسيط يستخدم أقل عدد ممكن من علامات HTML. ويوضح كيف يتم عرض محتوى عنصر الجسم من قبل المتصفح.

فقرة بسيطة

هذا المثال يوضح كيف يتم عرض النص في عنصر الفقرة من قبل المتصفح.

المزيد من الفقرات

هذا المثال يوضح بعض السلوكيات الافتراضية للعناصر الفقاعية.

مشكلة الشعر

هذا المثال يوضح بعض المشاكل في تنسيق HTML.

التقطيع

هذا المثال يوضح استخدام التقطيع في مستندات HTML.

العلامات العنوانية

هذا المثال يوضح كيفية عرض علامات العناوين في مستند HTML.

العنوان المنسق

هذا المثال يوضح عنوان منسوq.

الخط الأفقي

هذا المثال يوضح كيفية إدراج خط أفقي.

التعليقات المخفية

هذا المثال يوضح كيفية إدراج تعليقات مخفية في ملف HTML.

لون الخلفية

هذا المثال يوضح كيفية إضافة لون الخلفية إلى صفحة HTML.

توضيح الأمثلة

مثال على تنسيق النص في HTML

تنسيق النص

هذا المثال يوضح كيفية تنسيق النص في ملف HTML.

نص مسبق

هذا المثال يوضح كيفية التحكم في السطور الفارغة والفضاءات باستخدام علامة pre.

علامات "إخراج الحاسوب"

هذا المثال يوضح تأثير علامات "إخراج الحاسوب" المختلفة.

العناوين

هذا المثال يوضح كيفية كتابة العناوين في ملف HTML.

الاختصارات والاختصارات الأحرف الأولى

هذا المثال يوضح كيفية تحقيق اختصارات أو اختصارات الأحرف الأولى.

اتجاه النص

هذا المثال يوضح كيفية تغيير اتجاه النص.

الاقتباسات

هذا المثال يوضح كيفية تحقيق اقتباسات طولها مختلفة.

أثر النص المزال والنص المضمن

هذا المثال يوضح كيفية وضع علامة على النص المزال والنص المضمن.

توضيح الأمثلة

مثال على رابط HTML

إنشاء رابط

هذا المثال يوضح كيفية إنشاء روابط في مستند HTML.

استخدام الصور كروابط

هذا المثال يوضح كيفية استخدام الصور كروابط.

فتح الروابط في نافذة متصفح جديدة

فتح الصفحة في نافذة متصفح جديدة، مما يتيح للزائرين البقاء على موقعك.

الروابط إلى مواقع مختلفة في نفس الصفحة

هذا المثال يوضح كيفية الانتقال إلى جزء آخر من المستند باستخدام رابط.

الخروج من الإطار

هذا المثال يوضح كيفية الخروج من الإطار إذا كانت الصفحة محكومة بالإطار.

إنشاء رابط بريد إلكتروني

هذا المثال يوضح كيفية ربط البريد الإلكتروني. (لا يمكن تشغيل هذا المثال إلا بعد تثبيت برنامج العميل البريدي.)

إنشاء رابط بريد إلكتروني 2

هذا المثال يوضح كيفية إنشاء رابط بريد إلكتروني معقد.

توضيح الأمثلة

مثال على إطار HTML

إطار عمودي

هذا المثال يوضح كيفية إنشاء إطار عمودي باستخدام ثلاثة مستندات مختلفة.

إطار أفقي

هذا المثال يوضح كيفية إنشاء إطار أفقي باستخدام ثلاثة مستندات مختلفة.

كيفية استخدام علامة <noframes>

هذا المثال يوضح كيفية استخدام علامة <noframes>.

هيكل إطار مختلط

هذا المثال يوضح كيفية إنشاء هيكل إطار يحتوي على ثلاثة مستندات، ويجمع بينهم في الصف والعمود.

هيكل الإطار يحتوي على خاصية noresize="noresize"

هذا المثال يوضح خاصية noresize. في هذا المثال، الإطار غير قابل للتشكيل. عند سحب الفأرة فوق حواف الإطارات، ستجد أن الحواف غير قابلة للتحرك.

إطار التوجيه

هذا المثال يوضح كيفية إنشاء إطار التوجيه. يحتوي إطار التوجيه على قائمة من الروابط تهدف إلى إطار ثانٍ. يحتوي ملف "contents.htm" على ثلاثة روابط.

إطار داخلي

يظهر هذا المثال كيفية إنشاء إطار داخلي (إطار في صفحة HTML).

التنقل إلى فقرة محددة داخل إطار

يظهر هذا المثال جدولين. واحد من الإطارات يحتوي على رابط يشير إلى فقرة محددة في ملف آخر. يتم تحديد الفقرة المحددة في ملف "link.htm" باستخدام <a name="C10">.

التنقل إلى الفقرة المحددة باستخدام إطار التصفح

يظهر هذا المثال جدولين. الجدول الأيسر يحتوي على قائمة من الروابط، وتلك الروابط تشير إلى الجدول الثاني كهدف. يعرض الجدول الثاني الوثيقة المرتبطة.

توضيح الأمثلة

مثال على جدول HTML

جدول

هذا المثال يظهر كيفية إنشاء جدول في وثيقة HTML.

حواف الجدول

يظهر هذا المثال أنواع مختلفة من حواف الجدول.

جدول بدون حواف

يظهر هذا المثال جدولاً بدون حواف.

رأس الجدول في الجدول

يظهر هذا المثال كيفية عرض رأس الجدول.

خلية فارغة

يظهر هذا المثال كيفية معالجة خلايا الجدول التي لا تحتوي على محتوى.

جدول يحتوي على عنوان

يظهر هذا المثال جدولاً يحتوي على عنوان (caption).

خلايا جدول متداخلة أو ممتدة

يظهر هذا المثال كيفية تعريف خلايا الجدول المتداخلة أو الممتدة.

العلامات داخل الجدول

يظهر هذا المثال كيفية عرض العناصر داخل عناصر مختلفة.

مساحة الخلية (Cell padding)

يظهر هذا المثال كيفية استخدام مساحة الخلية (Cell padding) لإنشاء فجوة بين محتوى الخلية والحواف.

مسافة الخلية (Cell spacing)

يظهر هذا المثال كيفية استخدام مسافة الخلية (Cell spacing) لزيادة المسافة بين الخلايا.

إضافة لون الخلفية أو صورة الخلفية إلى جدول

إضافة لون الخلفية أو صورة الخلفية إلى جدول

إضافة لون الخلفية أو صورة الخلفية إلى جدول

إضافة لون الخلفية أو صورة الخلفية إلى خلية الجدول

ترتيب المحتوى في خلية الجدول

يظهر هذا المثال كيفية استخدام خاصية "align" لترتيب محتوى الخلايا لإنشاء جدول جميل.

خصائص الجهاز (frame)

يظهر هذا المثال كيفية استخدام خاصية "frame" لتحكم في الحواف حول الجدول.

توضيح الأمثلة

مثال على قائمة HTML

قائمة غير مرتبة

هذا المثال يظهر قائمة غير مرتبة.

قائمة مرتبة

هذا المثال يظهر قائمة مرتبة.

أنواع مختلفة من القوائم غير المرتبة

هذا المثال يظهر قائمة غير مرتبة.

أنواع مختلفة من القوائم المرتبة

هذا المثال يظهر أنواع مختلفة من القوائم المرتبة.

قائمة متداخلة

هذا المثال يظهر كيفية تداخل القوائم.

قائمة متداخلة 2

هذا المثال يظهر قائمة متداخلة معقدة.

قائمة معينة

هذا المثال يظهر قائمة معينة.

توضيح الأمثلة

مثال على نموذج HTML ومدخل

مجال نصي (Text fields)

هذا المثال يوضح كيفية إنشاء مجال نصي في صفحة HTML. يمكن للمستخدم كتابة النص في مجال النصي.

مجال كلمة المرور

هذا المثال يوضح كيفية إنشاء مجال كلمة المرور في HTML.

مربعات تیک

هذا المثال يوضح كيفية إنشاء مربعات تیک في HTML. يمكن للمستخدم اختيار أو إلغاء اختيار مربعات التیک.

مربعات اختيارية

هذا المثال يوضح كيفية إنشاء مربعات اختيارية في HTML.

قائمة منسدلة بسيطة

هذا المثال يوضح كيفية إنشاء قائمة منسدلة بسيطة في صفحة HTML. قائمة منسدلة هي قائمة اختيارية.

قائمة منسدلة أخرى

مثال آخر على قائمة منسدلة تحتوي على قيمة مسبقة.

مجال نصي (Textarea)

هذا المثال يوضح كيفية إنشاء مجال نصي (مجال إدخال نصي متعدد السطور). يمكن للمستخدم كتابة النص في مجال النصي. لا يوجد تحديد للعدد الكبير من الأحرف في مجال النصي.

إنشاء زر

هذا المثال يوضح كيفية إنشاء زر. يمكنك تخصيص النص على الزر.

مربعات حول البيانات

هذا المثال يوضح كيفية رسم مربع مكتوب بعنوان حول البيانات.

مثال على نموذج

نموذج يحتوي على مجالات إدخال ومسؤول تأكيد

هذا المثال يوضح كيفية إضافة نموذج إلى الصفحة. هذا النموذج يحتوي على مجالين للإدخال ومسؤول تأكيد.

نموذج يحتوي على مربعات تیک

هذا النموذج يحتوي على مربعات تیک اثنتين ومسؤول تأكيد.

نموذج يحتوي على مربعات اختيارية

هذا النموذج يحتوي على مربعات اختيارية اثنتين ومسؤول تأكيد.

إرسال بريد إلكتروني من النموذج

هذا المثال يوضح كيفية إرسال بريد إلكتروني عبر نموذج.

توضيح الأمثلة

مثال على صورة HTML

إدراج صورة

هذا المثال يوضح كيفية عرض صورة في صفحة الويب.

إدراج صورة من موقع مختلف

هذا المثال يوضح كيفية عرض صورة من موقع مختلف أو خادم آخر في صفحة الويب.

صورة خلفية

هذا المثال يوضح كيفية إضافة صورة خلفية إلى صفحة HTML.

ترتيب الصورة

هذا المثال يوضح كيفية ترتيب الصورة في النص.

إسقاط الصورة

هذا المثال يوضح كيفية إسقاط الصورة إلى يسار أو يمين الفقرة.

ضبط حجم الصورة

هذا المثال يوضح كيفية ضبط حجم الصورة إلى حجم مختلف.

عرض نص بديل للصورة

هذا المثال يوضح كيفية عرض نص بديل للصورة. عندما لا يمكن تحميل الصورة في المتصفح، تُخبر النص البديل القراء عن المعلومات المفقودة. من الجيد إضافة نص بديل لكل صورة في الصفحة.

صنع رابط صورة

هذا المثال يوضح كيفية استخدام الصورة كرابط.

إنشاء خريطة صورة

هذا المثال يوضح كيفية إنشاء خريطة صورة تحتوي على مناطق قابلة للنقر. كل منطقة هي رابط.

تحويل الصورة إلى خريطة صورة

هذا المثال يوضح كيفية تحويل صورة عادية إلى خريطة صورة.

توضيح الأمثلة

مثال على الخلفية HTML

تداخل جيد للخلفية والألوان

مثال جيد على التداخل بين لون الخلفية والنص، مما يجعل النص في الصفحة سهل القراءة.

تداخل غير جيد للخلفية والألوان

مثال يوضح كيفية جعل نص الصفحة صعب القراءة بسبب التكوين غير المناسب لللون الخلفي والنصي.

صورة خلفية مناسبة لتحسين الوصول

مثال يوضح كيفية جعل نص الصفحة قابل للقراءة بسبب الصورة الخلفية واللون النصي.

صورة خلفية مناسبة لتحسين الوصول 2

مثال آخر يوضح كيفية جعل نص الصفحة قابل للقراءة بسبب الصورة الخلفية واللون النصي.

صورة خلفية غير مناسبة لتحسين الوصول

مثال يوضح كيفية جعل نص الصفحة غير قابل للقراءة بسبب الصورة الخلفية واللون النصي.

توضيح الأمثلة

مثال لـ HTML نمط (style)

نمط في HTML

هذا المثال يوضح كيفية استخدام معلومات النمط المضافة إلى جزء head لتشكيل HTML.

رابط بدون خط أسفل

هذا المثال يوضح كيفية استخدام خاصية style لإنشاء رابط بدون خط أسفل.

ربط جدول استyles خارجي

هذا المثال يوضح كيفية ربط علامة <link> إلى جدول استyles خارجي.

توضيح الأمثلة

مثال لـ HTML رأس (head)

عنوان الوثيقة

المعلومات في العنوان داخل العنصر head لن تظهر في نافذة المتصفح.

هدف واحد، جميع الروابط

هذا المثال يوضح كيفية استخدام علامة base لفتح جميع العلامات في نافذة جديدة.

توضيح الأمثلة

مثال لـ HTML معلومات متعلقة بالموقع (meta)

وصف الوثيقة

المعلومات في عنصر Meta يمكن أن تصف وثيقة HTML.

كلمات المفتاحية للوثيقة

المعلومات في عنصر Meta يمكن أن تصف الكلمات المفتاحية للوثيقة.

إعادة التوجيه

هذا المثال يوضح كيفية إعادة توجيه المستخدم إلى عنوان آخر عند تغيير عنوان URL.

توضيح الأمثلة

مثال لـ HTML سكربت (Script)

إدراج قطعة سكربت

هذا المثال يوضح كيفية إدراج سكربت في وثيقة HTML.

تشغيل في المتصفحات التي لا تدعم السكربت

هذا المثال يوضح كيفية التعامل مع المتصفحات التي لا تدعم السكربت.

توضيح الأمثلة