HTML5 محتوى مضمن

يمكن أن يؤدي تضمين المحتوى في مستند HTML إلى جعل صفحتك أكثر ثراءً.

باستخدام عناصر IMG يمكن تضمينها في صور في مستندات HTML.

1) SRC: أظهر عنوان URL للصورة ؛

2) ALT: نص المعدات ؛

3) الارتفاع: ارتفاع الصورة ؛

4) العرض: عرض الصورة ؛

5) USEMAP: حدد الصورة على أنها رسم خرائط صورة للعميل ؛

6) ISMAP: يتم تعريف الصورة على أنها رسم خرائط صورة الخادم.

ما يلي على وجه التحديد يقدم تشغيل الصورة.

يمكن تضمين الصورة بخصائص SRC و ALT.

 <img src = triathlon.png <img src = triathlon.png </a>

وبهذه الطريقة ، بعد النقر فوق الصورة ، سيتم تنقل المتصفح إلى عنوان URL المحدد بواسطة خاصية HREF للعنصر الأصل A. سمة ISMAP لعنصر IMG تنشئ مخطط استجابة قسم الخادم:

 <a href = otherpage.html> <img src = triathlon.png </a>

وبهذه الطريقة ، سيتم إرفاق موضع الصورة بعنوان URL.

http: //bjpowernode/listings/otherpage.html؟

يعني مخطط الاستجابة لقسم الخادم عادة أن الخادم يستجيب للنقرات المختلفة للمستخدم على الصورة على الصورة.

يدعم مخطط استجابة قسم العميل المستخدم للتنقل إلى عنوان URL مختلف من خلال النقر على مناطق مختلفة من مخطط معين. عناصر المنطقة.

يتمثل دور عناصر الخريطة في تحديد عنصر خريطة العميل. عادة ما تحتوي عناصر الخريطة على سمات:

1) ID: يجب أن تحدد الشعار الفريد لتسمية الخريطة ؛

2) الاسم: اختياري ، الاسم.

يعرّف عنصر المنطقة المنطقة الموجودة في رسم خرائط الصورة ، والتي تتداخل دائمًا في عنصر الخريطة. تنقسم سمات عنصر المنطقة إلى فئتين.

1) HREF: عنوان URL الذي يجب تحميل المتصفح بعد النقر فوق هذه المنطقة ؛

2) ALT: محتوى الاستبدال ، السمات المقابلة لعنصر IMG ؛

3) الهدف: عرض سياق تصفح عنوان URL ، والسمات المقابلة للعنصر الأساسي ؛

4) REL: صف العلاقة بين المستند الحالي والمستند الهدف ، والسمات المقابلة لعنصر الارتباط ؛

5) الوسائط: سمات متوسطة ، مقابلة لعنصر النمط ؛

6) Hreflang: لغة المستند المستهدف ؛

7) النوع: نوع MIME من المستند المستهدف.

تحتوي الفئة الثانية على سمات: سمات الشكل والمنسق ، والتي يتم استخدامها للإشارة إلى كل منطقة صورة يمكن للمستخدمين النقر فوقها. قيمة سمة الشكل كما يلي:

1) المستقيم: يمثل مساحة مستطيلة. يجب أن تتكون سمة التنسيقات المقابلة من أربع فصل عدد صحيح (A ، B ، C ، D) مفصولة بفاصلة: A يمثل الجانب الأيسر من الحافة اليسرى ومستطيل الصورة ؛ من المستطيل.

2) الدائرة: تمثل منطقة دائرية. يجب أن تتكون سمات التنسيقات من ثلاثة أعداد محددة مفصولة بواسطة الفاصلة (A ، B ، C): تمثل A المسافة من الحافة اليسرى إلى القلب المستدير ؛

3) بولي: يمثل مضلعًا. يجب أن تحتوي سمات التنسيقات على ستة أعداد محددة على الأقل مفصولة بفاصلة ، كل زوج من الأرقام يمثل أحد قمة المضلع ؛

4) الافتراضي: المنطقة الافتراضية ، والتي تغطي الصورة بأكملها. ليست هناك حاجة لتوفير قيمة التنسيق.

ما يلي مثال:

 <p> <img src = triathlon.png Usemap =#mymap <map name = mymap> <rea href = swimpage.html form = rect coords = 3،5،68،62 ml mlan = rest = 70،5،330،62 <rea href = otherpage.html mape = الافتراضي </map>

يحدد البرنامج النصي أعلاه أنه إذا نقر المستخدم على جزء من الصورة ، فسيتم تنقل المتصفح إلى Swimpage.html

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

1) SRC: عنوان URL للوثيقة المعروضة في iframe ؛

2) SRCDOC: يحدد محتوى HTML للصفحة المعروضة في الصفحات المعروضة في iframe ؛

3) الاسم: يمكن استخدام اسم iframe في هدف السياق والعناصر الأخرى (مثل النموذج ، والزر ، والإدخال ، والقاعدة).

4) العرض: تحديد عرض iframe ؛

5) الارتفاع: قياسي ارتفاع iFrame ؛

6) صندوق الرمل: الحد الإضافي للمحتوى في iframe ، تشمل قيمة الدعم:

----: تطبيق جميع القيود أدناه ؛

--- السماح-الأسماء: السماح لمحتوى iframe يعتبر نفس المصدر مثل بقية المستند ؛

--- السماح بالمواد المطلقة: السماح للرابط إلى سياق التصفح على المستوى الأعلى ، بحيث يمكنك استبدال المستند الحالي بأكمله بمستند آخر ، أو إنشاء ملصق ونافذة جديدة ؛

7) سلس: تم توجيه المتصفح لعرض محتوى IFRAME مثل المكون العام لمستند HTML الرئيسي ؛ استخدام هذه السمة على النحو التالي (معظم متصفحات هذه السمة لم يتم دعمها بعد):

 <iframe src = demo_iframe.htm seamless> </frame>

فيما يلي مثال كامل على iframe:

 <Header> <H1> الأشياء التي أحبها </h1> <v> <ul> <li> <a href = fruits.html target = myframe> ثمار ilike </a> </li> <li> <a href = الأنشطة. html target = myframe> الأنشطة ilike </a> </li></ul> </vic> </quest

تُستخدم عناصر الكائن وعناصر التضمين لتوسيع قدرة المتصفح وإضافة دعم المكونات.

يعرّف عنصر التضمين المحتوى المضمن ، فإن سمات الدعم هي كما يلي:

1) الارتفاع: اضبط ارتفاع المحتوى المدمج ؛

2) SRC: عنوان URL للمحتوى ؛

3) النوع: تحديد نوع MIME للمحتوى المضمن بحيث يعرف المتصفح كيفية التعامل معه ؛

4) العرض: اضبط عرض المحتوى المدمج.

سيتم اعتبار أي سمات أخرى تقوم بتطبيقها معلمة من المكونات أو المحتوى. انظر إلى المثال أدناه:

 <inmbed src = http://www.youtube.com/v/qza60hca9s؟

يتم استخدام سمة leftfullscreen أعلاه لتعيين ما إذا كنت تريد تمكين وظيفة عرض الشاشة ملء الشاشة.

تُستخدم عناصر الكائن أيضًا لتحديد كائن مضمن ، مثل: الصور ، الصوت ، الفيديو ، PDF ، فلاش ، إلخ. يمكن أن تحتوي عناصر الكائنات على محتوى احتياطي ، يتم عرضه عندما لا يتوفر المحتوى المحدد.

 <عرض الكائن = 560 الارتفاع = 349 بيانات = http: // titan/myiimaginaryfile> <param name = leftfulscreen value = true/> </b> لا يمكننا عرض المحتوى </كائن>

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

عنصر التقدم يمثل شريط التقدم. تشمل سمات الدعم:

1) الحد الأقصى: يشير إلى الحد الأقصى لقيمة المهمة ؛

2) القيمة: تحديد التقدم الحالي ، بين قيم سمات 0 و MAX ؛

3) النموذج: واحد أو أكثر من النماذج التي تنتمي.

عندما يتم حذف سمة MAX ، يكون النطاق من 0 إلى 1 ، وتستخدم سمة القيمة أرقام نقطة عائمة لتمثيل التقدم ، مثل 0.3 يشير إلى 30 ٪.

 <progress id = myProgress value = 10 max = 100> </rovess> <p> <button type = button value = 30> 30 ٪ </button> <button type = button = 60> 60 ٪ </butt on> < نوع الزر = Value = 90> 90 ٪ </putive> </p> <script> var buttons = document.getElementsBytagname ('button') ؛ .Length ؛

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

يعرض عنصر العداد قيمة معينة ضمن نطاق معين. تشمل سمات الدعم:

1) دقيقة وحد أقصى: حدد نطاق النطاق فقط ، يمكنك استخدام النقاط العائمة ؛

2) منخفضة: حدد نطاق منخفض القيمة ، تعتبر الملكية تحتها منخفضة للغاية ؛

3) مرتفع: حدد نطاق القيمة العالية ، تعتبر جميع القيم أعلاه عالية جدًا ؛

4) الأمثل: تحديد أفضل قيمة ؛

5) القيمة: يجب ، القيمة الحالية للقياس ؛

6) النموذج: واحد أو أكثر من النماذج التي تنتمي.

 <meter id = mymeter value = 90 min = 10 max = 100 low = 40 high = 80optimum = 60> </meter> <p> <button type = 30> 30 ٪ </button> utton value = 60> 60 ٪ < /button> <button type = value = 90> 90 ٪ </button> </p> <script> var buttons = document.getElementsByTagname) ؛ = 0 ؛

عندما تكون قيمة عنصر العداد منخفضًا جدًا وعالي جدًا ، وأفضل قيمة ، سيقدمها المتصفح بطرق مختلفة