مثال HTML

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

ملف HTML بسيط

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

الكتلة البسيطة

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

كتلة النص المزيدية

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

مشكلة الشعر

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

الطي

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

العلامات العنوان

هذا المثال يوضح كيفية عرض علامات العناوين في مستند 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.

روابط بدون شرطة

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

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

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

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

مثال لـ HTML العنوان (head)

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

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

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

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

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

مثال لـ HTML عنصر المعلومات (meta)

وصف الوثيقة

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

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

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

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

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

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

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

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

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

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

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

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