HTML للمبتدئين: تعلم كيفية كود HTML اليوم

إفشاء: يساعدك دعمك في الحفاظ على تشغيل الموقع! نحصل على رسوم إحالة لبعض الخدمات التي نوصي بها في هذه الصفحة.


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

في هذا الدليل ، نغطي الأساسيات بطريقة (نأمل) سهلة الفهم ، مثالية للمبتدئين المطلقين. ومع ذلك ، نحن لا نتوقف عند الأساسيات – حتى مشرفو المواقع المخضرمون سيجدون نصائح مفيدة لتوسيع معرفتك العملية بـ HTML. سوف نتعمق في XHTML و DHTML وأحدث الأشياء في HTML5.

HTML للمبتدئين

Contents

نبذة تاريخية عن HTML 1-4

تم اختراع HTML بواسطة Tim Berners-Lee في أواخر الثمانينيات وأوائل التسعينات. كان أول إصدار “عام” في عام 1991. وقد استند إلى لغة ترميزية سابقة ، SGML (لغة الترميز العامة الموحدة).

كان الابتكار الرئيسي لـ HTML هو استخدامه للارتباط التشعبي. لقد اعتدنا على ذلك الآن لدرجة أنه من الصعب فهم مدى ثورية هذه الفكرة في ذلك الوقت.

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

تبنى IETF HTML كمعيار ونشر أول اقتراح HTML في عام 1993. HTML 2.0 ، تم إصدار أول مواصفات رسمية كاملة في عام 1995. بحلول عام 1997 ، كان W3C قد تولى الإشراف على المعيار ، وتم إصدار HTML 3.2.

تم إصدار HTML 4.0 في نهاية عام 1997 ، ومرة ​​أخرى في العام التالي مع بعض التحديثات. هذا الإصدار من المعيار ، مع اختلافاته الثلاثة (صارمة ، انتقالية ، ومجموعة إطارات) حدد HTML معظم العقد المقبل.

كان الإصدار الساري أثناء صعود أكثر الخصائص شهرة على الويب: Wikipedia ، Google ، Facebook ، WordPress ، Myspace ، AOL. إذا تعلمت كيفية بناء صفحات الويب قبل عام 2008 ، فمن المؤكد أنك تعلمت هذا الإصدار.

إلى جانب HTML 4.0 كان مشروع ذو صلة يسمى XHTML. تم إصدار هذا لأول مرة في عامي 2000 و 2001 ، كتطبيق قائم على XML لـ HTML 4.0. نظرًا لأن XML يحتوي على بنية أكثر صرامة من HTML ، ويمكن التحقق منه بسهولة من خلال محلل XML ، فقد كان يعتقد أن تقديم XHTML سيجبر مؤلفي محتوى الويب على إنشاء مستندات أكثر دقة.

بالنسبة للجزء الأكبر ، لم يحدث هذا. من الناحية العملية ، ساهمت XHTML – جنبًا إلى جنب مع ثلاثة أنواع من HTML4 ، والتنوع الكبير في عرض المتصفح – في الارتباك العام بشأن ما كان وما لم يكن HTML “القياسي”.

أحد التأثيرات الملحوظة لـ XHTML هي فكرة أنه يجب عليك “إغلاق” العلامات الفارغة بشرطة مائلة. إذا كنت معتادًا على الكتابة
بدلا من مجرد
, يمكنك شكر XHTML – كان من متطلبات بناء XML أنه يجب إغلاق جميع العلامات.

HTML عام

HTML عام

ابدأ القراءة أدناه ، أو استخدم التنقل الموجود على اليسار للانتقال إلى موضوع معين.

أساسيات HTML

يقدم هذا القسم HTML ، اللغة المستخدمة في تأليف صفحات الويب ، ويقدم خلفية صغيرة عن تاريخها وسبب استخدامها.

ما هو HTML?

HTML هي لغة ترميز النص التشعبي ، وهو تنسيق لإنشاء المستندات وصفحات الويب. تم اختراعه أصلاً في أوائل التسعينات من قبل تيم بيرنرز لي ، واستند إلى لغة ترميزية سابقة تسمى SGML (لغة الترميز المعممة القياسية) ، والتي كانت تستند إلى تنسيق سابق يسمى GML (لغة الترميز المعممة) تم تطويره في IBM في الستينات.

يتكون HTML في المقام الأول من أزواج متطابقة من العلامات بين قوسين تحيط بالنص ذو المعنى البشري (مثل هذا). توفر العلامات معنى وسياقًا وتعرض معلومات للنص الذي تحيط به.

ما هي لغة الترميز?

تخيل أي مستند نصي قرأته في أي وقت مضى: موقع ويب ، كتاب ، PDF ، مستند Word ، نشرة الكنيسة. يوجد النص بالطبع – ولكن هناك شيء آخر: كيف يتم عرض النص. بعض الكلمات أكبر أو أصغر ، وبعضها مائل أو غامق ، وبعضها بلون مختلف أو خط مختلف.

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

لذا ، على سبيل المثال ، إذا كنت تريد أن تجعل بعض النص غامقًا أو مائلًا ، فقد تفعل شيئًا كهذا:

أريد أن أجعل [ابدأ بالخط العريض] هذه الكلمات بالخط العريض [إنهاء بالخط العريض] و [البدء بخط مائل] هذه الكلمات الأخرى مائلة [نهاية الخط المائل].

والتي ، نظريًا ، يجب أن تنتج شيئًا مثل:

أريد أن أصنع هذه الكلمات الجريئة وهذه الكلمات الأخرى مائلة.

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

يحتوي المثال أعلاه على العديد من المشاكل معه ، وقد توصل مخترعو HTML (و SGML و GML) إلى شيء مشابه ، ولكن أفضل بكثير:

  • غالبًا ما يتم استخدام الأقواس المربعة في النص ، لذا فإن حجزها لاستخدامها في العلامات قد يسبب مشاكل. بدلاً من ذلك ، يستخدم HTML أقواس الزاوية: < و >.
  • الكتابة البداية والنهاية مرارا وتكرارا مملة للغاية. يبسط HTML هذا باستخدام اسم العلامة نفسه كإعلان “بدء”. يتم استخدام اسم العلامة مع الشرطة المائلة (/) كعلامة النهاية.
  • بدلاً من الكلمات الكاملة “جريئة” و “مائلة” ، تستخدم HTML الاختصارات لجعلها أسرع في الكتابة وأقل إزعاجًا للقراءة.

لذلك ، مع أخذ هذه الأشياء في الاعتبار ، سيبدو المثال أعلاه كما يلي:

أريد أن أصنع هذه الكلمات الجريئة و هذه الكلمات الأخرى مائلة.

أريد أن أصنع هذه الكلمات الجريئة وهذه الكلمات الأخرى مائلة.

في الآونة الأخيرة ، كان هناك تحرك بعيدًا عن الإعلان صراحةً عن التفاصيل المطبعية (مثل بالخط العريض ومائل) وبدلاً من ذلك استخدم الترميز لنقل المعنى وليس المظهر فقط. لذلك ، فإن و لم يعد يوصى باستخدام العلامات. بدلاً من ذلك ، العلامات المفضلة و (التأكيد). لذا في الوثائق المعاصرة ، ستكون الجملة أعلاه:

أريد أن أصنع تبرز هذه الكلمات والتأكيد على هذه الكلمات.

أريد أن أصنع تبرز هذه الكلمات والتأكيد على هذه الكلمات.

HTML ، في جوهره ، ليس أكثر تعقيدًا من مجموعة من علامات الترميز المحددة.

ما هو النص التشعبي?

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

كان المفهوم “المفرط” للربط الداخلي والخارجي ثوريًا للغاية في طريقة تنظيم المحتوى على الإنترنت بحيث تظهر الكلمة في عدد من الأماكن:

  • HTML هي “لغة ترميز النص التشعبي”
  • http: // يرمز إلى “بروتوكول نقل النص التشعبي
  • يسمى الارتباط من صفحة إلى أخرى “ارتباط تشعبي” ، وتسمى سمة البيانات التي تحدد المكان الذي يشير إليه الارتباط بـ “مرجع تشعبي”.

أين وكيف يتم استخدام HTML?

يتم استخدام HTML لجميع صفحات الويب تقريبًا. تستخدم صفحة الويب التي تقرأها الآن HTML. إنها اللغة الافتراضية لمواقع الويب.

يمكن استخدامه أيضًا لأنواع أخرى من المستندات ، مثل الكتب الإلكترونية.

يتم تقديم مستندات HTML بواسطة متصفح الويب (التطبيق الذي تستخدمه لقراءة هذه الصفحة). يخفي عرض HTML جميع العلامات ، ويغير عرض بقية المحتوى بناءً على ما تقول هذه العلامات أنه يجب أن يبدو.

هل أحتاج إلى تعلم HTML لتشغيل موقع الويب الخاص بي?

ما لم تكن تخطط لتصبح مطور ويب ، وإنشاء صفحات من الصفر ، لا تحتاج إلى معرفة جميع التفاصيل المعقدة لـ HTML.

إذا كنت تستخدم فقط نظامًا أساسيًا للتدوين أو أداة إنشاء المواقع أو نظام إدارة المحتوى (CMS) الذي تم إعداده بواسطة شخص آخر ، فقد تتمكن من الوصول إليه دون معرفة أي HTML – فهناك محررات “رسومية” متاحة تجعل إضافة المحتوى إلى مدونة مشابهة للكتابة في Microsoft Word أو البريد الإلكتروني.

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

بالإضافة إلى ذلك ، هناك تفاصيل حول كيفية هيكلة مستندات HTML التي لها تأثير على أشياء مثل تحسين محركات البحث (SEO) وتجميع البيانات. إذا كنت مهتمًا بالبقاء على علم بكيفية ظهور موقعك على الويب للزوار من غير البشر ، فإن فهم HTML هو مهارة مهمة.

وبالمثل ، فإن إمكانية الوصول إلى موقع الويب – القدرة على التنقل عبر موقع ويب بنجاح من قبل الأشخاص الذين يعانون من إعاقات بصرية أو إعاقات أخرى – تعتبر من الاعتبارات المتزايدة الأهمية. يعتمد المكفوفون على قارئات الشاشة المحوسبة لترجمة مواقع الويب إلى صوت ، كما أن جودة وهيكل مستند HTML الأساسي لهما تأثير كبير على قدرة قارئ الشاشة على العمل بشكل صحيح.

في الغالب ، HTML هي اللغة الأساسية المشتركة للإنترنت المعاصر. إذا كنت ترغب في فهم كيفية عمل العالم ، فمن الجيد أن يكون لديك على الأقل بعض الإلمام بـ HTML.

خلاصة القول في HTML

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

عناصر HTML والعلامات

يلقي هذا القسم نظرة فاحصة على العلامات ، وهي اللبنات الأساسية لـ HTML. ويغطي كيفية عملهم ، وبعض الاستثناءات من طريقة عملهم العادية ، ومناقشة موجزة حول سمات العلامات.

هيكل العلامات

بشكل عام ، تحيط أزواج العلامات المطابقة بقسم النص الذي تؤثر فيه. يُطلق على زوجين من العلامات المطابقة ، إلى جانب المحتوى الذي يرفقونه ، “عنصر”.

يبدأ هذا العنصر وينتهي بـ "قوي" بطاقة شعار.

يمكن أن تحتوي علامة الافتتاح على سمات إضافية توفر مزيدًا من المعلومات حول محتويات العلامة وكيفية عرضها. تتم كتابة هذه السمات كأزواج من الاسم والقيمة ، مفصولة بعلامة يساوي (=) ، مع وضع القيمة بين علامتي اقتباس.

href ="http://example.com">هذا رابط. العلامة هي "أ" إلى عن على "مرساة," والسمة href (مرجع تشعبي) تحدد المكان الذي يشير إليه الرابط.

لا تظهر علامات قليلة في أزواج متطابقة ، لأنها تُستخدم لإدراج شيء ما ، بدلاً من وصف النص. تسمى هذه العلامات “فارغة” أو “باطلة” ، وأكثرها شيوعًا هي تلك المستخدمة لإدخال صورة. تُستخدم سمة src لتحديد عنوان URL للصورة.

src ="images / html-for-للمبتدئين-التعلم إلى التعليمات البرمجية-html-today.png" />

لاحظ عدم وجود علامة إغلاق ، وبالتالي لا يوجد نص مغلق. الخط المائل قبل قوس الزاوية النهائي (/> ) “للإغلاق الذاتي” للعلامة. هذا ليس مطلوبًا تمامًا ، ولكنه تذكير جيد بأن كل ما يلي لن يتم إرفاقه. (مطلوب في XHTML ، والذي سيتم مناقشته لاحقًا في هذه المقالة.)

هناك العديد من العلامات الفارغة الأخرى. اثنان إلى حد ما إلى الأمام وشائع.

  • إدراج فاصل أسطر.
  • إدراج فاصل قاعدة (خط) أفقي.

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

rel ="ورقة الأنماط" اكتب ="نص / المغلق" href ="theme.css" />

name ="وصف" المحتوى ="عنوان هذه الصفحة." />

بالإضافة إلى ذلك ، يمكن أن تكون العلامة (التي تُستخدم لإضافة جافا سكريبت إلى الصفحة) فارغة ، ولكن لا يجب أن تكون.

(سيتم توفير مزيد من المعلومات حول وعلامات في وقت لاحق في هذا الدليل.)

مستوى الكتلة مقابل المضمنة

باستثناء العلامات التي توفر معلومات حول المستند نفسه ، تنقسم علامات HTML إلى فئتين ، الحظر والمضمون.

عناصر الكتلة

تمثل عناصر الكتلة كتلًا مستطيلة من المحتوى. لديهم فاصل أسطر ضمني قبل وبعد. تتضمن عناصر الحظر محتوى مقطعي مثل الفقرات (

) والأقسام () والعناوين (

,

, إلخ).

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

هذا div.

ومع ذلك ، لا يتم ذلك دائمًا ، خاصةً مع العناوين الرئيسية:

هذا هو عنوان الصفحة

هذا قسم رئيسي

بعض المحتوى في فقرة.

يمكن أن تتداخل عناصر مستوى الكتلة ، ولكن لا يمكن أن تحتوي بعض عناصر مستوى الكتلة على عناصر أخرى على مستوى الكتلة:

عنوان المقال

الفقرة الأولى من المقالة.

لا يمكن أن تحتوي الفقرات والعناوين على عناصر أخرى على مستوى الكتلة.

العناصر المضمنة

العناصر المضمنة هي العناصر المستخدمة داخل النص. بالخط العريض ( ) ، والمائل () ، والروابط () كلها عناصر مضمنة.

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

صنف ="نص خاص">هذا النص خاص.

(انظر القسم على CSS للحصول على معلومات حول كيفية جعل class ="نص خاص" عرض بتنسيق خاص.)

في وقت ما لا معنى له

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

ومع ذلك فهي في الواقع عناصر مضمنة. والسبب في ذلك في الغالب هو تأخر من فترة أقل تعقيدًا من تصميم الويب ، ولكنهم عالقون الآن. يمكن تجنب الآثار الغريبة لهذا بسهولة ، ولكن من الجيد أن تعرف. (راجع القسم الخاص بالصور وأيضًا القسم الموجود على CSS.)

هناك قضايا أخرى غريبة مثل هذه ، وسيتم تغطيتها لاحقًا في هذا الدليل عند ظهورها.

المزيد عن السمات

يمكن أن تتضمن كل علامة عنصر تقريبًا السمات. تحتوي العديد من العناصر على مجموعة محددة من السمات التي تدعمها (مثل و السمة src =) ، ولكن هناك العديد من العناصر المدعومة عالميًا من قبل جميع أنواع العناصر.

هناك نوعان مهمان من السمات هما class و id.

href ="http://example.com" صنف ="رابط المثال" معرف ="رابط 27">لعلامة الارتساء هذه ثلاث سمات.

سمات الصف

تُستخدم سمات الفصل لوضع علامة على عنصر أو أكثر على أنه ينتمي إلى “فئة” أو مجموعة معينة – يمكن استخدامها لعرضها بنفس الطريقة.

على سبيل المثال ، من الشائع استخدام قائمة غير مرتبة (

    ) كقائمة ، ولجعل عنصر القائمة (
  • ) والتي تشير إلى الصفحة الحالية تبدو مختلفة عن جميع الروابط الأخرى في نفس القائمة.

    صنف ="قائمة طعام">
    صنف ="عنصر القائمة">
    href ="/الصفحة الرئيسية">الصفحة الرئيسية

  • صنف ="العنصر الحالي">
    href ="/حول">حول

    صنف ="عنصر القائمة">
    href ="/اتصل">اتصل

يمكن أن يحتوي العنصر على أكثر من فئة واحدة. يتم فصل فئات متعددة بمسافات داخل عنصر الفصل.

صنف ="أول حرف إسقاط">
هذه هي الفقرة الأولى ، وهي أيضًا جزء من فئة الأحرف الاستهلالية.

نظرًا لفصل الصفوف بمسافة ، فقد لا تتضمن الفئات مسافات في أسمائها.

في CSS و JavaScript واللغات الأخرى ، يتم تمييز فئة العنصر بنقطة قبل الاسم.

/ * CSS * /

.أول {
الون الاخضر؛
}}

رمز CSS أعلاه يعني أنه داخل أي عنصر يحتوي على فئة من الدرجة الأولى ، يجب أن يظهر لون النص باللون الأخضر.

سمة المعرف

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

معرف ="عنوان الصفحة">هذا هو عنوان الصفحة

تستخدم معرفات أقل في كثير من الأحيان للتأثير على العرض ، وغالبا ما تستخدم لأغراض وظيفية.

يمكن استخدام المعرفات للربط الداخلي للمستند ، مثل جدول المحتويات في مقالة ويكيبيديا.

  1. href ="# مقدمة">مقدمة
  2. href ="#history_of_topic">تاريخ الموضوع

معرف ="مقدمة" صنف ="مقطع الرأس">المقدمة

نص القسم التمهيدي.

معرف ="history_of_topic" صنف ="مقطع الرأس">

بعض التاريخ حول هذا الموضوع.

لاحظ أن الروابط إلى الأقسام تتضمن اسم العلامة ، مسبوقًا بعلامة التجزئة أو الجنيه (#). هذه هي الطريقة القياسية للإشارة إلى معرف عنصر:

/ * CSS * /

#intro {
حجم الخط: 14 بكسل ؛
}}

سمات أخرى

تحتوي كل علامة HTML على مجموعة خاصة بها من السمات المتاحة المتعلقة بالغرض المحدد لها. على سبيل المثال ، تتضمن العلامة ، التي تحدد ارتباط تشعبي ، سمة href (مرجع تشعبي) ، والتي تحدد عنوان URL الذي يتم ربطه بـ.

ستتم تغطية هذه السمات بمزيد من التفصيل حيث ننظر إلى كل علامة على حدة في الأقسام اللاحقة.

هناك أيضًا عدد من السمات “العامة” – السمات التي يمكن أن يمتلكها أي عنصر. كما سيتم تناولها بمزيد من التفصيل في وقت لاحق ، حيث تصبح استخداماتها أكثر صلة.

علامات التعليق

النقطة الأخيرة التي يجب تغطيتها في علامات HTML الأساسية هي التعليق. تبدأ التعليقات بقوس زاوية ، تليها علامة تعجب وشرطتان. وتنتهي بشرطتين وقوس زاوية إغلاق.

قد تكون التعليقات متعددة الأسطر.

متى يجب استخدام

و

ال

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

العنصر في أي صفحة.

من الأفضل وضع عنوان موقعك في صفحتك الرئيسية وصفحة فهرس المدونة

العلامة وعناوين المقالات في فهرس المدونة بالداخل

العلامات.

ومع ذلك ، في صفحة مقالة واحدة ، يجب أن يكون عنوان المنشور أو المقالة نفسها داخل

العلامة ، مع عنوان الموقع في

او حتى

بطاقة شعار.

وبالمثل في صفحة الأرشيف المستندة إلى الفئة أو المستندة إلى العلامات ، من الأفضل عادةً وضع الفئة أو اسم العلامة داخل

بطاقة شعار.
تنظيم هرمي

من الجيد (بشكل معتدل) تحسين محركات البحث ، وجيد جدًا للقراء ، لتقسيم المقالات إلى أقسام منطقية واستخدام علامات العناوين المناسبة داخل محتوى المقالة. يجب استخدام علامات العناوين بطريقة هرمية – إذا كان

يتبع

العلامة ، يجب أن يكون رأس قسم تابع.

ترجمات

يجب أن يكون العنوان ذو العنوان الفرعي ليس استخدام علامتي رأس مختلفتين:

بدلاً من ذلك ، ضع العنوان بالكامل والعنوان الفرعي في علامة عنوان واحدة واستخدم علامة أخرى لتحديد العلاقة:

العنوان الرئيسي لهذه المادة:
العنوان الفرعي لنفس المقالة

العنوان الرئيسي لهذه المادة: صنف ="الترجمة">العنوان الفرعي لنفس المقالة

العناوين الرئيسية على الحاجيات

تحتاج أقسام الشريط الجانبي أو عناصر واجهة المستخدم إلى عناوين ، ولكنها ليست ذات صلة بشكل عام من وجهة نظر المحتوى (SEO). يستخدم معظم المصممين المطلعين

علامات لهذا الغرض ، والاحتفاظ

,

, و

للمحتوى المتعلق بالكلمات الرئيسية.
 

المشاركات الاخيرة

  • href ="#">عنوان الوظيفة
  • href ="#">عنوان الوظيفة
  • href ="#">عنوان الوظيفة

أرشيف

  • href ="#">يونيو 2015
  • href ="#">مايو 2015
  • href ="#">أبريل 2015

ومع ذلك ، إذا كان لديك بانتظام العديد من الأقسام الفرعية في محتوى صفحتك التي تحتاج إلى استخدامها

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

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

في الماضي ، كانت علامات الارتساء فقط ( ) يمكن استخدامها كهدف لرابط ، ولكن لم يعد الأمر كذلك – يمكن أن يصبح أي عنصر هدفًا لرابط خاص بموقع الصفحة.

المرشح الطبيعي لهذه الروابط هو علامات العنوان ، لأنها تستخدم لتحديد بداية الأقسام.

كل ما يلزم لجعل هذا العمل هو إضافة فريدة هوية شخصية السمة إلى عنصر الرأس. الروابط إلى هذا القسم هي ببساطة عنوان URL للصفحة ، مُلحق بعلامة التجزئة ( # ) والمعرف.




 معرف ="بعض العناوين">بعض العناوين في منتصف الصفحة
href ="http://example.com/page#some-headline">انقر هنا للذهاب الى هناك.
  • إنها سيئة.
  • هذا خطأ.
  • إنه غير مدعوم.
  • قائمة مرتبة

    القوائم المرتبة هي قوائم مرقمة أو مكتوبة. العنصر الخارجي هو

      , و ال
    1. يتم استخدام العلامة مرة أخرى لكل عنصر.

      1. اجمع الملابس الداخلية.
      2. ???
      3. الربح.
      1. اجمع الملابس الداخلية.
      2. ???
      3. الربح.

      ال

        يدعم العنصر العديد من السمات التي تغير كيفية ترقيم القائمة.

        يمكن استخدام سمة النوع لتغيير الأرقام العربية الافتراضية (1 ، 2 ، 3) إلى أحرف أو أرقام رومانية (حروف كبيرة أو صغيرة).

        اكتب ="أنا">
      1. الرقم الروماني الصغير 1.
      2. الرقم الروماني الصغير 2.
      3. الرقم الروماني الصغير 3.
      1. الرقم الروماني الصغير 1.
      2. الرقم الروماني الصغير 2.
      3. الرقم الروماني الصغير 3.

      خيارات الكتابة هي:

      • 1 - الأرقام العربية (1 ، 2 ، 3) - هذا هو الافتراضي.
      • أ - حروف كبيرة (أ ، ب ، ج)
      • أ - أحرف صغيرة (أ ، ب ، ج)
      • I - الأرقام الرومانية كابيتال (الأول والثاني والثالث)
      • i - الأرقام الرومانية الصغيرة (i ، ii ، iii)

      يمكن استخدام السمة start لبدء ترقيم القائمة على رقم غير 1. يمكن استخدام هذا للأرقام أو لأنواع أخرى.

      بدء ="10">
    2. شوكولاتة
    3. فانيلا
    4. زيت المحرك
    اكتب ="أنا" بدء ="8">
  • Telesphorus
  • Hyginus
  • بيوس
  • Anicetus
    1. شوكولاتة
    2. فانيلا
    3. زيت المحرك
    1. Telesphorus
    2. Hyginus
    3. بيوس
    4. Anicetus

    أخيرًا ، يمكن استخدام السمة المعكوسة لترقيم عناصر القائمة بترتيب عكسي. يمكن دمج هذا مع أي من السمات الأخرى (أو كليهما).

    خارج بوابة البداية!

    بدء ="-3">
  • انتظرها.
  • انتظرها.
  • انتظرها.
  • اذهب!
  • أهم عشرة أسباب

    بدء ="10" معكوس>
  • لان.
  • وهكذا.
  • QED
  • إلخ.
  • خارج بوابة البداية!

    1. انتظرها.
    2. انتظرها.
    3. انتظرها.
    4. اذهب!

    أهم عشرة أسباب

    1. لان.
    2. وهكذا.
    3. QED
    4. إلخ.

    أشياء يجب ملاحظتها بشأن هذين المثالين:

    1. يمكن أن تكون سمة البداية سالبة.
    2. حتى إذا تم عكس القائمة ، فإن قيمة البداية هي أول رقم القائمة.
    3. لا تحتاج السمة المعكوسة إلى تحديد قيمة. هذا لأنه يحتوي على قيمتين محتملتين فقط: صحيح (موجود) أو خطأ (غائب).
    4. لا تحتاج قائمة العشرة الأوائل (أو العد التنازلي المماثل) إلى تحديد سمة البداية إذا كانت تنتهي برقم 1 ، والذي سيكون دائمًا آخر رقم في قائمة معكوسة ما لم يتم تحديد خلاف ذلك. لم يحتوي المثال أعلاه في الواقع على عشرة عناصر ، لذلك كان من الضروري التحديد.
    5. السلوك الافتراضي هو زيادة الرقم لكل عنصر قائمة ناجح. لذلك ، إذا كنت تريد "العد التنازلي" من رقم سالب ، يجب عليك ليس تتضمن السمة العكسية.
    قوائم الوصف / التعريف

    قوائم الوصف (أو قوائم "التعريف" ، كما يطلق عليها بشكل شائع) تختلف قليلاً عن القوائم المرتبة وغير المرتبة. يتم استخدامها لتوفير قائمة بالمصطلحات مع الأوصاف ، كما هو الحال في المسرد.

    يتم تغليف القائمة بأكملها في العلامة. يتم تمييز كل مصطلح في القائمة بعلامة ("مصطلح التعريف") ، ويتبع كل مصطلح عنصر واحد أو أكثر ("وصف التعريف").

    أنواع القوائم

    قائمة مرتبة قائمة مرقمة بالعناصر. قائمة غير مرتبة قائمة بالعناصر ذات التعداد النقطي. قائمة التعريفات قائمة المصطلحات مع التعريفات المرتبطة بها. يمكن أن يحتوي كل مصطلح على وصف تعريف واحد أو أكثر.

    أنواع القوائم

    قائمة مرتبة قائمة مرقمة بالعناصر. قائمة غير مرتبة قائمة بالعناصر ذات التعداد النقطي. قائمة التعريفات قائمة المصطلحات مع التعريفات المرتبطة بها. يمكن أن يحتوي كل مصطلح على وصف تعريف واحد أو أكثر.

    الاستخدام الواضح لقائمة الوصف هو معجم أو قاموس ، ولكن هذا ليس الاستخدام القياسي الوحيد.

    قائمة الأسماء: مع معلومات الاتصال في الوصف. قائمة عناوين المسار الصوتي: مع معلومات المسار التفصيلية في الوصف. قائمة عروض المنتجات: مع معلومات حول المنتجات في الوصف. قائمة الإحصائيات: مع اسم الإحصاء كمصطلح وقيمة الإحصاء في الوصف

    في أي وقت لديك قائمة بالعناصر التي يتطلب كل منها مزيدًا من التفاصيل ، تعد قائمة الوصف فكرة جيدة.

    قوائم التعريفات أقوى بكثير مما قد تدركه بالفعل لأن العلامة - الوصف - يمكن أن تحتوي على أي عناصر أخرى: الفقرات والصور والقوائم الأخرى. هذا يعني أن قائمة الوصف يمكن أن تكون نظام ترميز غني بالمحتوى عندما يكون لديك عناصر فردية يحتاج كل منها إلى تفاصيل إضافية من أي نوع.

    هناك أيضًا استخدام واحد خارج الجدار لقوائم الوصف ، وهو أمر مثير للجدل إلى حد ما. تم تضمينه كمثال في مواصفات HTML4 ، ولكن تمت إزالته لـ HTML5: حوار يشبه البرنامج النصي.

    قارئ ما هو كيان HTML المفضل لديك? مؤلف مضحك يجب عليك أن تسأل! إنها قائمة الوصف. قارئ هل حقا؟ ما هو عظيم في ذلك? مؤلف إنه مرن بشكل غريب.

    هذا سيبدو سيئا

    1. البند الأول
    2. البند الثاني
      1. البند الفرعي أ.
      2. البند الفرعي B.
        1. البند الفرعي الفرعي i.
        2. البند الفرعي الثاني.
        3. البند الفرعي الفرعي iii.
      3. البند الفرعي C.
    3. البند الثالث

    هيريس كيف عليك أن تفعل ذلك

    1. البند الأول
    2. البند الثاني
      1. البند الفرعي أ.
      2. البند الفرعي B.
        1. البند الفرعي الفرعي i.
        2. البند الفرعي الثاني.
          1. إلى أسفل في التسلسل الهرمي.
          2. هل يحتاج أي شخص إلى العديد من مستويات القائمة?
            1. هذا هو الحصول على سخيفة.
        3. البند الفرعي الفرعي iii.
      3. البند الفرعي C.
    3. البند الثالث

    يمكن أن تجمع القوائم المتداخلة أنواع القوائم.

    هذه قائمة مرتبة:
    1. كيك.
    2. فطائر.
    3. الكعكة هي كذبة.
    هذه قائمة غير مرتبة ، تسرد أنواع القوائم:
    • قوائم مرتبة
    • قوائم غير مرتبة
    • قوائم الوصف
    هذه قائمة غير مرتبة متداخلة داخل قائمة مرتبة ، وهي داخل قائمة الوصف هذه:
    1. العنصر الأول.
    2. العنصر الثاني.
    3. العنصر الثالث ، وهو القائمة المتداخلة.
      • سكين
      • فرع
      • ملعقة
      • شوكة
      • عيدان تناول الطعام
    4. هذا العنصر الرابع هنا فقط لتأطير القائمة المتداخلة بشكل أفضل.
    هذه قائمة مرتبة:
    1. كيك.
    2. فطائر.
    3. الكعكة هي كذبة.
    هذه قائمة غير مرتبة ، تسرد أنواع القوائم:
    • قوائم مرتبة
    • قوائم غير مرتبة
    • قوائم الوصف
    هذه قائمة غير مرتبة متداخلة داخل قائمة مرتبة ، وهي داخل قائمة الوصف هذه:
    1. العنصر الأول.
    2. العنصر الثاني.
    3. العنصر الثالث ، وهو القائمة المتداخلة.
      • سكين
      • فرع
      • ملعقة
      • شوكة
      • عيدان تناول الطعام
    4. هذا العنصر الرابع هنا فقط لتأطير القائمة المتداخلة بشكل أفضل.

    وتجدر الإشارة إلى أنه لا يمكن تداخل القوائم داخل عناصر الفقرة (

    ). وذلك لأن جميع القوائم هي عناصر على مستوى الكتلة ، والفقرات (التي هي كتل أيضًا) يمكن أن تحتوي فقط على عناصر على مستوى الامتداد.

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

    منع الاقتباسات والاقتباسات المضمنة

    إذا كنت تقتبس شخصًا أو شيء ما ، فاستخدم أحد عنصري اقتباس HTML.

    كتلة الاقتباس

    الاقتباس الأكثر شيوعًا. هذا بسبب الاصطلاح المطبعي العادي:

    • يتم عرض علامات الاقتباس (علامات اقتباس متعددة أو مقتطفات) بطريقة خاصة (عادةً ما تكون مسافة بادئة وأحيانًا مائلة),
    • في حين أن علامات الاقتباس المضمنة يتم تمييزها ببساطة بـ punciation.
    أن أكون أو لا أكون ، هذا هو السؤال.

    أن أكون أو لا أكون ، هذا هو السؤال.

    يمكن استخدام علامات الاقتباس للكتل الكبيرة من المواد المقتبسة ، سواء كانت تلك المادة مقتطفًا من عمل أدبي أو أغنية أو مشاركة مدونة أخرى أو رسالة بريد إلكتروني تستجيب لها.

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

    استشهد ="http://www.gutenberg.org/ebooks/2265"> أن أكون أو لا أكون ، هذا هو السؤال.
    - هاملت ، وليم شكسبير

    أن أكون أو لا أكون ، هذا هو السؤال.
    - هاملت ، وليم شكسبير

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

    يمكن تحديد الاقتباس في نهاية الاقتباس بشكل أفضل إذا تم وضعه داخل عنصر ، وإذا كان الاقتباس نفسه مرتبطًا بمواد المصدر. سيؤدي ذلك إلى جعل السمة cite داخل العلامة زائدة عن الحاجة ، لذا قم بإزالتها. أخيرًا ، أضف علامة فقرة جيدًا وأزل شرطة em (-) ، بحيث يتم تضمين المعلومات فقط - وليس عرض التفاصيل -.

    استشهد ="http://www.gutenberg.org/ebooks/2265">

    أن أكون أو لا أكون ، هذا هو السؤال.

    href ="http://www.gutenberg.org/ebooks/2265">هاملت ، وليم شكسبير

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

    اقتباس مضمن

    عنصر الاقتباس الأقل استخدامًا هو الاقتباس المضمّن, .

    خطي المفضل في قرية هو عندما يقول ، استشهد ="http://www.gutenberg.org/ebooks/2265"> أن أكون أو لا أكون ، هذا هو السؤال.

    خطي المفضل في قرية هو عندما يقول ، "أكون أو لا أكون ، هذا هو السؤال.

    لا يتم استخدام هذا غالبًا لأنه توجد بالفعل طريقة جيدة تمامًا لإظهار أنك قد اقتبست شيئًا - باستخدام علامات الاقتباس.

    ومع ذلك ، فإن استخدام العلامة بدلاً من علامات الاقتباس البسيطة له مزايا قليلة.

    • يمكن تغيير عرض علامات الاقتباس عبر CSS ، وهو أمر مفيد للتدويل ، حيث لا تستخدم جميع البلدان نفس الرموز لعلامات الاقتباس.
    • حقيقة أن النص اقتباس من مصدر آخر واضح دلالة ، في حين يمكن استخدام علامات الاقتباس لأسباب أخرى:
      • "اقتباسات مخيفة" البلاغية
      • ذكر كلمة أو صياغة
      • الإبلاغ عن محادثة حقيقية ليس لها نص مصدر
    • فرصة لتضمين إسناد استشاري يربط بالمصدر الأصلي للاقتباس.

    الارتباطات التشعبية

    واحدة من أهم العلامات في HTML هي علامة الارتساء () ، التي تحدد الارتباط التشعبي. إن القدرة على ربط المستندات بشبكة من الاتصالات هي جوهر الويب ، وتعريف "النص التشعبي".

    يُطلق على العنصر "مرساة" لأنه يُستخدم لربط عنوان URL مرتبط ببعض النصوص المحددة على الصفحة. (هذا على النقيض من العلامة ، التي تربط الوثيقة بأكملها ، وليس قسمًا معينًا من النص.)

    يُسمى النص الموجود داخل العنصر "نص الرابط" ، ويتم تحديد عنوان URL المرتبط في سمة href.

    href ="http://example.com">هذا رابط لموقع example.com هذا رابط لموقع example.com

    إلى جانب href ، تحتوي العلامة على العديد من السمات المهمة.

    • الهدف يحدد النافذة (أو علامة التبويب المستعرض) لفتح الارتباط فيها. الافتراضي هو نفس النافذة. إذا كنت تريد فتح علامة تبويب جديدة تعيين الهدف ="_فارغ".
    • يعين العنوان تلميح الأدوات أو نص التمرير فوق الارتباط. يتم عرض هذا في نافذة منبثقة صغيرة عند تحريك المستخدم فوق نص الرابط. من المفيد تقديم بعض المعلومات الإضافية حول ما ينوي المستخدم النقر عليه.
    • تقارير rel حول العلاقة بين المستند المرتبط والمستند الحالي. له عدة قيم محتملة:
      • بديل - يحتوي المستند المرتبط على نفس محتوى المستند الحالي ، ولكن بتنسيق بديل. يستخدم في أغلب الأحيان لربط خلاصات RSS.
      • المؤلف - المستند المرتبط هو الصفحة الرئيسية لملف تعريف مؤلف المستند أو المقالة الحالية.
      • إشارة مرجعية - ارتباط بنقطة معينة في المستند (مثل عند إنشاء جدول محتويات على الصفحة).
      • مساعدة - يوفر المستند المرتبط وثائق مساعدة للمستند الحالي.
      • الترخيص - المستند المرتبط هو نص الترخيص للمستند الحالي.
      • التالي - المستند المرتبط هو الجزء التالي في سلسلة مقسمة إلى صفحات. ستقوم بعض المتصفحات بجلب محتويات المستند المرتبط مسبقًا لتسريع العرض عندما ينقر عليه المستخدم أخيرًا.
      • nofollow - المستند المرتبط هو غير معتمد بواسطة مؤلف المستند الحالي. تستخدم لمنع إعطاء تحسين محركات البحث للصفحة المرتبطة. غالبًا ما تضيف أنظمة التعليق هذا إلى الروابط التي يدخلها المستخدم بشكل افتراضي.
      • noreferrer - يُستخدم لمنع إرسال معلومات المُحيل في رأس طلب HTTP عندما ينقر المستخدم على الرابط. عادة ، سيحدد طلب HTTP من أين يأتي المستخدم (الصفحة الحالية). وهذا يتطلب أن يقوم عميل المتصفح بحذف تلك المعلومات.
      • الجلب المسبق - على غرار التالي ، ولكن دون الإشارة إلى علاقة تسلسلية فعلية. يتطلب هذا أن يجلب المتصفح محتويات الصفحة المرتبطة قبل أن ينقر عليها المستخدم ، بحيث يبدو الانتقال إلى الصفحة التالية فوريًا.
      • prev - عكس التالي ، تحدد هذه القيمة أن المستند المرتبط هو الصفحة السابقة في سلسلة مُرقمة. قد تقوم بعض المتصفحات بجلب المحتويات مسبقًا.
      • البحث - توفر الصفحة المرتبطة واجهة مخصصة للبحث في المستند الحالي والمستندات ذات الصلة.
      • علامة - توفر الوثيقة المرتبطة سياقًا لموضوع الصفحة الحالية.

    لا يستخدم منشئو مواقع الويب غير التقنية السمة rel بشكل كبير ، وهي طريقة رائعة لجلب المعلومات الثرية الدلالية إلى الترميز بطريقة يمكن لمحركات البحث والمجمعين وقراء الشاشة فهمها.

    على سبيل المثال: تستخدم Google rel ="مؤلف" رابط (إذا كان مرتبطًا بملف شخصي في Google+) لعرض روابط لمحتوى آخر بواسطة نفس المؤلف في نتائج البحث. - يتضمن بحث الصور من Google القدرة على البحث عن طريق الترخيص للعثور على محتوى Creative Commons المرخص لإعادة استخدامه. تعتمد هذه الميزة ، جزئيًا ، على rel ="رخصة" السمة المستخدمة في روابط المشاع الإبداعي والتراخيص المفتوحة الأخرى. تستخدم العديد من محركات البحث ومواقع تجميع الأخبار نص الرابط والصفحة المرجعية في rel ="بطاقة شعار" رابط لتحديد موضوع صفحة معينة.

    يمكن أيضًا استخدام علامة rel في Microformats ، وهي طرق بسيطة لتضمين معلومات دلالية إضافية ضمن سمات HTML الحالية (عادةً rel و class).

    على سبيل المثال ، يقترح تنسيق XFN Microformat استخدام السمة rel عند الربط بالصفحة الرئيسية أو صفحات الملف الشخصي للأشخاص الذين تربطك بهم علاقة.

    سأقضي الشهر القادم عطلة نهاية أسبوع كاملة في مؤتمر مع href ="http://example.com/kami-profile" rel ="زميل عمل">كامي. المؤتمر بالقرب من مسقط رأسي ، لذلك آمل أن أتمكن من تناول الغداء مع href ="http://example.com/dave-profile" rel ="الأبوين">والدي.

    هناك العديد من تنسيقات Microformats الإضافية التي تستخدم علامة rel ، بالإضافة إلى طرق أخرى لتضمين هذا النوع من المعلومات الدلالية في ترميز موقعك على الويب. سيتم تغطية هذه في القسم على HTML الدلالية.

    زخرفة النص

    هناك عدد من العلامات البسيطة التي يتم استخدامها لترميز النص الأساسي داخل فقرة أو عنصر آخر.

    بالخط العريض

    هناك علامتان يمكن استخدامه لصنع النص بالخط العريض.

    • ينصح باستخدامه لوضع علامة على نص "هام". يتسبب في عرض النص الملفوف بالخط العريض ولكنه يحمل أيضًا معنى دلالة (أن النص نفسه مهم إلى حد ما).
    • ببساطة يجر النص دون اقتراح أي معنى دلالة معينة.
    مائل

    مثل بالخط العريض, هناك طريقتان لعرض النص بخط مائل.

    • يقترح أن النص المغلف "تم التأكيد عليه" بطريقة أو بأخرى.
    • هو ببساطة مائل ، مع عدم وجود معنى دلالة محددة مرفقة.
    تسطير

    على الرغم من أنها أصبحت أقل شيوعًا مؤخرًا ، إلا أن عرض النص القياسي للارتباطات التشعبية () هو تسطيرها. وبالتالي, تسطير غير مرتبط لا تستخدم في كثير من الأحيان. هناك ، على الرغم من ذلك ، علامات الترميز لذلك.

    • هي العلامة العامة لتسطير النص. حالة الاستخدام التي قدمتها المواصفات تؤكد الكلمات التي بها أخطاء إملائية. تريد منك مواصفات HTML5 أيضًا معرفة أن العناصر الأخرى تكون عادةً أكثر ملاءمة ، ولا تستخدم هذا إذا كان يمكن اعتباره خطأً على أنه رابط.
    • يعني النص الذي تم إدراجه ، ويستخدم عادةً بالاقتران مع العلامة ، لإظهار التغييرات التي تم إجراؤها على النص.

    يبدأ العرض الساعة 7:00 مساءا 8:00 مساءا.

    يبدأ العرض الساعة 7:00 مساءا 8:00 مساءا

    عبر الخط

    هناك عنصران يميزان النص الذي سيتم تمييزه من خلاله. لكل منها معنى مختلف قليلاً.

    • للنص الذي يجب فهمه على أنه محذوف أو تم تغييره ، ويتم استخدامه مع العلامة كما هو موضح أعلاه.
    • يُستخدم للنص الذي لم يعد صحيحًا أو لم يعد ذا صلة.

    هناك أيضًا علامة كانت متاحة في HTML4.

    في حين أن وصف المواصفات واختلافًا طفيفًا من الناحية النظرية ، لم يتوصل الخبراء إلى أي اتفاق على التفاصيل العملية للفرق ، أو المواقف التي تتطلب تحديدًا أحدها بدلاً من الآخر.

    كود المصدر والنص غير المعالج

    هناك عنصران يستخدمان لعرض النص أو الرمز الذي لا تريد أن يتم عرضه بواسطة المتصفح ، ولكن ببساطة عرض "الخام" على المستخدم.

    • - يستخدم لكتل ​​الكود أو النص غير المعالج.
    • - يستخدم عندما تحتاج إلى تضمين كلمة أو عبارة قصيرة من التعليمات البرمجية مضمنة مع النص الخاص بك.

    كلاهما يتم عرضهما بخط أحادي المسافة (عادةً Courier) افتراضيًا ، ويحافظان على المسافة البيضاء ، ولا يعرضان أي علامات.

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

    تحجيم النص

    يمكنك جعل النص أكبر أو أصغر بشكل تعسفي باستخدام عنصرين لا معنى لهما:

    الاستخدام الأكثر شيوعًا لعناصر التحجيم هو وضع العنوان الفرعي لصفحة أو مقالة في عنصر متداخل داخل علامة العنوان.

    العنصر العام

    إذا كنت بحاجة إلى ترميز طول نص معين لأغراض دلالية أو نمطية ، ولكن لا معنى لأي من العلامات الموجودة ، يمكنك استخدام العنصر العام ، إلى جانب سمة class (وبعض CSS) لإنشاء التأثير المطلوب.

    لست متأكدًا من سبب عدم وجود علامة تهكم. ربما ليس هناك حاجة فقط لأن class ="سخرية">النغمة سهلة القراءة على الإنترنت.

    / * CSS * / .سخرية { اللون البنفسجي؛ نمط الخط: مائل }}

    .سخرية {
    اللون البنفسجي؛
    نمط الخط: مائل
    }}

    لست متأكدا لماذا لا يوجد علامة ساخرة. ربما ليست هناك حاجة فقط لأن النغمة سهلة القراءة على الإنترنت.

    فواصل

    يوفر HTML علامتين للإضافة في الفصل داخل النص.


    • إدراج فاصل أسطر
    • إدراج خط أفقي

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

    تكون فواصل الأسطر مفيدة بشكل خاص عندما تحتاج إلى وجود فواصل خطية صلبة ولكن مع حلول أخرى - مثل الحلول المتعددة

    العلامات لا معنى لها. من الأمثلة الجيدة على ذلك كلمات وعناوين الشعر أو الأغاني.

    الورود حمراء
    زهرة البنفسج لونها أزرق
    القافية صعبة
    HTML5 رائع.

    123 ش.
    فورت وورث ، تكساس 76148

    الورود حمراء
    زهرة البنفسج لونها أزرق
    القافية صعبة
    HTML5 رائع.

    123 ش.
    فورت وورث ، تكساس 76148

    هذا أسهل مما يبدو

    قد يبدو كل هذا معقدًا ، ولكنه ليس كذلك حقًا. يسهل تذكر معظم العلامات التي تحتاج إليها بشكل منتظم: العناوين والفقرات والقائمة غير المرتبة. لا تحتاج إلى حفظ جميع الخيارات أو المعاني المختلفة وراء كل منها. فقط حاول أن تضع في اعتبارك أن أي عنصر مطبعي عادي (مثل عنوان أو قائمة أو فقرة أو رابط) ربما يحتوي على علامة HTML موجودة لإنجازها. إذا كنت تضع ذلك في الاعتبار ، يمكنك الكتابة دون التركيز على هذه الأشياء ثم البحث عن العناصر المحددة التي لا يمكنك تذكرها.

    حاول ألا تتورط بالخيارات أيضًا. الشيء المهم هو أن ترميزك له معنى قدر الإمكان ، دون أن يكون معقدًا للغاية. إذا لم تتمكن من تحديد أي من الخيارين أو أكثر هو الأفضل ، اسأل أيهما أكثر فائدة. إذا كنت غير قادر على معرفة ذلك ، اسأل أيهما أبسط. إذا كنت لا تزال غير قادر على اتخاذ القرار ، فما عليك سوى اختيار واحدة - إذا بدت متشابهة ، فربما لن يكون هناك فرق كبير في كيفية عملها.

    HTML الهيكلي

    يشرح هذا القسم الهيكل العام لمستند HTML ، بما في ذلك أنواع المعلومات الموجودة في و. كما يوضح كيفية تنظيم الأقسام المختلفة لصفحة الويب النموذجية. سيكون هناك المزيد من المعلومات في قسم HTML5 أدناه.

    هيكل مستند HTML الأساسي

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

    يجب أن يبدأ المستند بتعريف DOCTYPE. هناك العديد من معايير HTML (والمعايير ذات الصلة) المختلفة التي تم استخدامها على مر السنين ، وبالتالي من المهم تحديد نوع المستند (أي معيار HTML) الذي يستخدمه المستند.

    في الغالب ، اليوم ، DOCTYPE الصحيح هو html ببساطة. لذلك يجب أن يبدأ مستند HTML بـ:

    لغة البرمجة>

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

    بعد إعلان DOCTYPE ، تكون علامة الافتتاح هي العلامة. سيكون إغلاق العلامة هو السطر الأخير من المستند.

    داخل علامة HTML ، يمكنك تحديد لغة المستند (في هذه الحالة ، الإنجليزية).

    لغة البرمجة> لانج ="en"> . . . . .

    يوجد داخل العلامة قسمان ، و. يحتوي الجسم على كل المحتوى المرئي ، بينما يحتوي الرأس على معلومات حول المستند نفسه. لا يوجد شيء خارج هذين القسمين.

    لغة البرمجة> لانج ="en"> . . . . . .

    هذا هو الهيكل الأساسي لكل مستند HTML. كل شيء إضافي في الأساس.

    محتويات ال

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

    البيانات الوصفية

    يتم استخدام العلامة عدة مرات في لتحديد بيانات التعريف المختلفة (بيانات حول المستند).

    العلامات الوصفية هي علامات فارغة ، لا تتطلب علامة إغلاق. يمكنك إنهاءها بخط مائل للإغلاق الذاتي (/>) ، لكن هذا ليس مطلوبًا (وبعض الأشخاص لا يشجعونه على وجه التحديد).

    ترميز الأحرف

    هناك العديد من الطرق الشائعة المختلفة لترميز الأحرف (الأحرف والأرقام وعلامات الترقيم) في ذاكرة الكمبيوتر. إذا لم تحدد أيًا منها تستخدم ، فقد يخرب متصفح الويب ويعرض بعض الأحرف الخاطئة.

    معظم الوقت ، في هذه الأيام ، تريد تحديد مجموعة أحرف UTF-8.

    (لا يحتوي الترميز الشائع الآخر - ASCII - على جميع الأحرف الموسعة مثل الشرطات em والاقتباسات المتعرجة. إذا رأيت من أي وقت مضى خللًا غريبًا في النوع حيث تم استبدال علامات الاقتباس أو الفواصل العليا بأحرف عشوائية على ما يبدو ، فهذا بسبب كتابة المستند في UTF-8 ولكن يتم عرضه باستخدام ASCII - مما يعني أن شخصًا ما لم يحدد مجموعة الأحرف الصحيحة في المستند.)

    محارف ="utf-8">
    الوصف والمؤلف والكلمات الرئيسية

    يتم أيضًا نقل المعلومات الأساسية حول المستند - من كتبه وما يدور حوله - من خلال العلامات. لكل منهما سمتان: اسم العلامة ومحتوى العلامة.

    name ="وصف" المحتوى ="صفحة عن HTML."> name ="الكلمات الدالة" المحتوى ="HTML والعلامات والبيانات الوصفية"> name ="مؤلف" المحتوى ="آدم مايكل وود">

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

    (إذا كنت تستخدم نظام إدارة المحتوى ، فعادة ما يتم عرض العلامات والأوصاف التي تكتبها في شاشة المحرر في العلامات الوصفية هذه.)

    عنوان

    تظهر العلامة في الرأس ، وعادة لا تحتوي على أي سمات. يرفق العنوان.

    هذا هو عنوان الصفحة.

    يجب أن يكون العنوان دقيقًا ، وإذا أمكن ، يتطابق مع العنوان المرئي على الصفحة (عادة ما يكون في

    أو

    علامة العنوان) في الجسم. عادةً ما يتم عرض محتويات العنوان في علامة التبويب أعلى نافذة المتصفح.

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

    يمكن لمستند HTML تحديد عنوان واحد فقط.

    روابط CSS

    أوراق الأنماط المكتوبة بلغة CSS (ورقة الأنماط المتتالية) هي مستندات منفصلة توفر معلومات حول كيفية عرض صفحة في مستعرض. يتم تضمين كافة المعلومات حول الأحجام والألوان والموضع والخطوط في ورقة الأنماط. إن الاحتفاظ بهذه التفاصيل منفصلة عن مستند HTML الرئيسي يجعل من السهل تغييرها دون التأثير على محتوى المستند نفسه.

    يتم ربط أوراق أنماط CSS بداخل مستند HTML ، باستخدام العلامة. تحدد السمة href عنوان URL لملف ورقة الأنماط ، بينما تحدد السمة rel أن الرابط هو رابط ورقة أنماط (هناك أنواع أخرى من الروابط).

    href ="/css/style.css" rel ="ورقة الأنماط">
    معلومات RSS

    RSS - ملخص الموقع الغني ، أو Really Simple Syndication - هو وسيلة لتوفير موجز لتحديثات الموقع (مثل مشاركات المدونة الجديدة) للمشتركين ، بحيث يتم إعلامهم بالمحتوى الجديد عند نشره ويمكنهم قراءة ذلك المحتوى من RSS القارئ دون الحاجة إلى زيارة موقعك.

    إذا كنت تستخدم نظام إدارة المحتوى ، فسيقوم بشكل عام بإنشاء موجز RSS لك ، وهو مستند XML متوفر على عنوان URL الخاص به. يجب ربط عنوان URL هذا من صفحة الفهرس الرئيسية لمدوناتك ، بحيث يمكن لقراء RSS ومتصفحات الويب العثور عليه بسهولة.

    rel ="البديل" اكتب ="تطبيق / rss + xml" العنوان ="RSS" href ="/feed.xml" />

    rel ="البديل" السمة تعني أن عنوان URL المرتبط يحتوي على نفس المحتوى (قائمة تدوينات المدونة) ، ولكن بتنسيق بديل. تحدد السمة type نوع التنسيق (RSS).

    معلومات اخرى

    كثيرًا من التفاصيل الإضافية حول المستند تظهر بشكل متكرر في. سيتم تناولها بمزيد من التفصيل لاحقًا في الأقسام ذات الصلة.

    روابط جافا سكريبت

    من الممكن الارتباط بملفات JS من داخل الرأس ، وهذه ممارسة شائعة. ومع ذلك ، فمن الأفضل بشكل عام وضعها في نهاية المستند إن أمكن.

    مثال على مستند HTML مع إكمال العنصر

    لغة البرمجة> لانج ="en"> محارف ="utf-8"> name ="وصف" المحتوى ="صفحة عن HTML."> name ="الكلمات الدالة" المحتوى ="HTML والعلامات والبيانات الوصفية"> name ="مؤلف" المحتوى ="آدم مايكل وود"> href ="/css/style.css" rel ="ورقة الأنماط"> دليل HTML rel ="البديل" اكتب ="تطبيق / rss + xml" العنوان ="RSS" href ="/feed.xml" /> . . . .

    محتويات ال

    العلامة هي الجزء الرئيسي من مستند HML ، وقد تحتوي على جميع أنواع الأشياء.

    عادة ، يمكن تقسيم بنية نص HTML إلى عدة أقسام ، من المحتمل أن يحتوي كل منها على قسم فرعي واحد أو أكثر:

    • العنوان
      • الشعار / العلامة التجارية / عنوان الموقع
      • الملاحة الرئيسية
      • شريط البحث
    • المحتوى الرئيسي
      • مقال أو أكثر
      • عنوان المقال
      • محتوى المقالة
      • بيانات تعريف المقالة (المؤلف ، العلامات ، تاريخ النشر)
    • الشريط الجانبي (الأشرطة)
      • الحاجيات
      • التنقل الثانوي (المحفوظات حسب التاريخ أو الفئة أو العلامة)
    • تذييل
      • معلومات حقوق النشر / الترخيص
      • التنقل العالي
      • معلومات الاتصال
      • العنوان / الهاتف
      • روابط اجتماعية

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

    العنصر

    العنصر هو العنصر الأكثر شيوعًا على مستوى الكتلة لهيكلة صفحة الويب. تم استخدام هذا مرة واحدة لكل قسم وأقسام فرعية من محتويات الصفحة.

    نتج عن ذلك الكثير من العلامات المتداخلة.

    صنف ="العنوان"> صنف ="شعار"> صنف ="main-nav"> صنف ="شريط البحث"> صنف ="محتوى الصفحة"> صنف ="الأساسية"> صنف ="مقالة - سلعة"> صنف ="عنوان المقالة">

    عنوان المقال

    صنف ="المادة الفوقية"> صنف ="محتوى المقالة">

    مقالة - سلعة.

    المحتوى.

    صنف ="تذييل المقالة"> صنف ="تعليقات"> صنف ="الشريط الجانبي"> صنف ="تذييل"> صنف ="رخصة"> صنف ="معلومات الاتصال">

    بفضل مجموعة موسعة من العلامات الهيكلية في أحدث معيار HTML (HTML5) ، يمكن أن يصبح هذا أسهل للقراءة أكثر فائدة لمحركات البحث والأنظمة الأخرى التي تستخرج المعلومات من صفحتك (مثل قارئات الشاشة للمكفوفين).

    جداول HTML

    يغطي هذا القسم جداول HTML ، بما في ذلك كل ما تحتاج إلى معرفته حول كيفية ترميز حالات الاستخدام المختلفة. يتم تغطية جميع عناصر الجدول والسمات الرئيسية ، بما في ذلك رؤوس الجدول وتذييله ونصه وأعمدته. يقدم هذا القسم اقتراحات ملموسة للتعامل مع بعض الصعوبات المضمنة في ترميز الجدول ويتطرق إلى ممارسات العالم الحقيقي.

    ما هي الجداول?

    الجدول في HTML هو طريقة لتقديم "البيانات المجدولة" - وهي المعلومات التي يمكن تمثيلها في جدول بيانات. الجداول في HTML هي جدولين الأبعاد مع الصفوف والأعمدة.

    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41

    تأتي البيانات المجدولة بأشكال عديدة. أسهل طريقة لمعرفة ما إذا كان يجب أن يكون هناك شيء ما في جدول ، بخلاف بنية مختلفة مثل قائمة التعريفات ، هي أن تسأل نفسك ، "هل هذا منطقي كجدول بيانات؟"

    إذا كانت البيانات منطقية كجدول بيانات ، فهي مرشح جيد للجدول.

    بناء الجدول

    النحو الأساسي

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

    العنصر ، صف الجدول ( ) ، وخلية الجدول ( ) في الوقت.

    ) جزء.

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

    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    رؤوس الجدول: الخيار 1

    غالبًا ما يكون من المرغوب فيه وضع الرؤوس في أعلى الجدول. طريقة واحدة للقيام بذلك هي استبدال خلايا الجدول العادية ( ) مع خلايا رأس الجدول ().

    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41

    فائدة هذا النهج هو أنه لا يؤثر على الصف بأكمله ، فقط تلك الخلايا التي تم تعيينها كعناوين. هذا هو - إنها فائدة إذا كان هذا ما تريد أن يحدث.

    رؤوس الجدول (والجسم): الخيار 2

    الطريقة الأخرى لعمل رؤوس الجدول هي لف الصف الأول بأكمله (أو عدة صفوف ، حتى) في عنصر رأس الجدول ().

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

    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41

    ويتيح القيام بذلك تصميم صف الرأس بالكامل.

    thead { لون الخلفية: أسود ؛ اللون الابيض؛ وزن الخط: غامق ؛ }}

    # thead-example thead {
    لون الخلفية: أسود ؛
    اللون الابيض؛
    وزن الخط: غامق ؛
    }}

    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41

    ولعل الأمر الأكثر إثارة للاهتمام هو أن هذا يسمح أيضًا بتصميم هيكل الطاولة دون التأثير على الرأس.

    tbody tr: nth-child (odd) { لون الخلفية: #eee ؛ }} tbody tr: nth-child (even) { لون الخلفية: #fff؛ }}

    # tbody-example thead {
    لون الخلفية: أسود ؛
    اللون الابيض؛
    وزن الخط: غامق ؛
    }}
    # tbody-example tbody tr: nth-child (odd) {
    لون الخلفية: #eee ؛
    }}
    # tbody-example tbody tr: nth-child (even) {
    لون الخلفية: #fff؛
    }}

    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    تذييل الجدول

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

    thead { لون الخلفية: أسود ؛ اللون الابيض؛ وزن الخط: غامق ؛ }} tbody tr: nth-child (odd) { لون الخلفية: #eee ؛ }} tbody tr: nth-child (even) { لون الخلفية: #fff؛ }} تفوت { لون الخلفية: # 222222 ؛ اللون الابيض؛ نمط الخط: مائل }} الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    متوسط ​​العمر 34.67

    # tfoot-example thead {
    لون الخلفية: أسود ؛
    اللون الابيض؛
    وزن الخط: غامق ؛
    }}
    # tfoot-example tbody tr: nth-child (odd) {
    لون الخلفية: #eee ؛
    }}
    # tfoot-example tbody tr: nth-child (even) {
    لون الخلفية: #fff؛
    }}

    # tfoot-example tfoot {
    لون الخلفية: # 222222 ؛
    اللون الابيض؛
    نمط الخط: مائل
    }}

    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    متوسط ​​العمر 34.67
    أعمدة الجدول

    تحتاج في بعض الأحيان إلى تصميم عمود جدول. يمكن تحقيق ذلك (إلى حد ما) باستخدام ترميز الأعمدة.

    تعمل الأعمدة بشكل غريب قليلاً في HTML. نظرًا لأن الجداول مكتوبة على شكل سلسلة من الصفوف ، يتم تعريف الأعمدة كتراكب ثانوي على الجدول.

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

    النمط ="لون الخلفية: سماوي ؛"> النمط ="لون الخلفية: أصفر ؛"> النمط ="لون الخلفية: أحمر ؛"> الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    متوسط ​​العمر 34.67
    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    متوسط ​​العمر 34.67

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

    تمتد ="2" النمط ="لون الخلفية: سماوي ؛"> النمط ="لون الخلفية: أصفر ؛"> الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    متوسط ​​العمر 34.67
    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    متوسط ​​العمر 34.67

    هناك مشاكل في استخدام الترميز ، للأسف:

    • يدعم الأنماط المتعلقة بالخلفية والعرض والحدود والرؤية فقط. هذا يعني أنه لا يمكنك ، على سبيل المثال ، تصميم العمود الأول من الجدول في بالخط العريض.
    • نظرًا لأنه ليس عنصرًا رئيسيًا ولا عنصرًا فرعيًا في أي من أقسام الجدول (الرأس والجسم والتذييل) ، لا يمكنك استهداف عمود معين داخل القسم.
    • علاوة على ذلك ، فإن أقسام الجدول وصفوف الجدول أكثر تحديدًا من العنصر ، لذا فإن الأنماط المطبقة على الأقسام ستتجاوز أي نمط يطبق على

    بسبب هذه المشاكل ، لها فائدة محدودة لتصفيف الجدول.

    هناك حلان مشتركان لهذا: سمات الصف ومحددات nth-child.

    لاستخدام سمات الفئة ، ما عليك سوى تطبيق فئة العمود الخاصة بكل منها عنصر (و / أو).

    صنف ="عمود 1">الاسم الاول صنف ="عمود 2">الكنية صنف ="عمود 3">عمر صنف ="عمود 1">يوحنا صنف ="عمود 2">حداد صنف ="عمود 3">31 صنف ="عمود 1">جين صنف ="عمود 2">أبيض صنف ="عمود 3">32 صنف ="عمود 1">تيري صنف ="عمود 2">جونز صنف ="عمود 3">41 صنف ="عمود 1"> صنف ="عمود 2">متوسط ​​العمر صنف ="عمود 3">34.67

    بالطبع ، هذا يضيف الكثير من الترميز الذي ليس مطلوبًا بشكل صارم. أفضل طريقة هي استخدام: child-child و nth-child و: last-child CSS selectors.

    على سبيل المثال ، ماذا لو أردنا أن يكون عمود الاسم الأول غامقًا ، وأن يتم عرض الأعمار بخط أحمر وأحادي المسافة - جنبًا إلى جنب مع أنماط الرأس والتذييل الأخرى التي تم تحديدها سابقًا?

    thead { لون الخلفية: أسود ؛ اللون الابيض؛ وزن الخط: غامق ؛ }} tbody tr: nth-child (odd) { لون الخلفية: #eee ؛ }} tbody tr: nth-child (even) { لون الخلفية: #fff؛ }} تفوت { لون الخلفية: # 222222 ؛ اللون الابيض؛ نمط الخط: مائل }} td: الطفل الأول { وزن الخط: غامق ؛ }} td: الطفل الأخير { عائلة الخطوط: monospace؛ لون احمر؛ الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    متوسط ​​العمر 34.67

    # pseudocolumns- مثال thead {
    لون الخلفية: أسود ؛
    اللون الابيض؛
    وزن الخط: غامق ؛
    }}
    # pseudocolumns-example tbody tr: nth-child (odd) {
    لون الخلفية: #eee ؛
    }}
    # pseudocolumns-example tbody tr: nth-child (even) {
    لون الخلفية: #fff؛
    }}

    # pseudocolumns-example tfoot {
    لون الخلفية: # 222222 ؛
    اللون الابيض؛
    نمط الخط: مائل
    }}

    # pseudocolumns-example td: الطفل الأول {
    وزن الخط: غامق ؛
    }}

    # pseudocolumns-example td: آخر طفل {
    عائلة الخطوط: monospace؛
    اللون: # a20000 ؛
    }}

    # pseudocolumns-example tfoot td: آخر طفل {
    اللون: # ff3e3e ؛
    }}

    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    متوسط ​​العمر 34.67
    كسر الشبكة: rowspan و colspan

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

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

    colspan ="2"> متوسط ​​العمر: 34.67

    # colspan-example thead {
    لون الخلفية: أسود ؛
    اللون الابيض؛
    وزن الخط: غامق ؛
    }}
    # colspan-example tbody tr: nth-child (odd) {
    لون الخلفية: #eee ؛
    }}
    # colspan-example tbody tr: nth-child (even) {
    لون الخلفية: #fff؛
    }}

    # colspan-example تفوت {
    لون الخلفية: # 222222 ؛
    اللون الابيض؛
    نمط الخط: مائل
    }}

    الاسم الاول الكنية عمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41
    متوسط ​​العمر 34.67

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

    الاسم الاول الكنية عمر الفوج الصفوف ="2">أوريغون تريل جيل colspan ="2">متوسط ​​العمر
    يوحنا حداد 31
    جين أبيض 32
    تيري جونز 41 الجيل العاشر
    34.67

    # rowspan- مثال thead {
    لون الخلفية: أسود ؛
    اللون الابيض؛
    وزن الخط: غامق ؛
    }}
    # rowspan-example tbody tr: nth-child (odd) {
    لون الخلفية: #eee ؛
    }}
    # rowspan-example tbody tr: nth-child (even) {
    لون الخلفية: #fff؛
    }}

    # rowspan-example tfoot {
    لون الخلفية: # 222222 ؛
    اللون الابيض؛
    نمط الخط: مائل
    }}

    الاسم الاول الكنية عمر الفوج
    يوحنا حداد 31 أوريغون تريل جيل
    جين أبيض 32
    تيري جونز 41 الجيل العاشر
    متوسط ​​العمر 34.67

    ما هي الجداول لا?

    لا ينبغي حقا أن يقال ، ولكن:

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

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

    كانت هذه فكرة سيئة لعدد من الأسباب ، حتى ذلك الحين: جعلت المستند المصدر غير قابل للقراءة تقريبًا ، وكسر دلالات تمامًا ، وجعل من المستحيل تقريبًا إعادة تصميم الصفحة دون إعادة ترميزها بالكامل.

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

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

    حالة حافة الطاولة - ترجمات جنبًا إلى جنب

    أحد الاستخدامات غير المتعلقة بالبيانات للجداول الشائعة إلى حد ما هو الترجمة جنبًا إلى جنب. تأمل المقتطف التالي من Dantes The Divine Comedy.

    # فتح جحيم {
    الحد: لا شيء ؛
    تباعد الحدود: 10 بكسل ؛
    }}

    Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    chà © la diritta عبر عصر smarrita.
    في منتصف رحلة حياتنا
    وجدت نفسي في غابة مظلمة,
    لأن المسار المباشر قد فقد.
    أخي كوانت عصر حقبة è كوسا دورا
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    آه أنا! كم هو صعب القول
    ما كان هذا الغابة وحشية وخشنة وقاسية,
    وهو ما يجدد الخوف.
    Tant è amara che poco è più morte؛
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    لذا المر ، الموت أكثر بقليل.
    ولكن من الجيد أن تعامل هناك,
    سوف أتحدث عن الأشياء الأخرى التي رأيتها هناك.

    هذه ، بالطبع ، مجرد طاولة ذات تصميم صغير:

    # فتح جحيم { الحد: لا شيء ؛ تباعد الحدود: 10 بكسل ؛ }} معرف ="فتح الجحيم"> Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    chà © la diritta عبر عصر smarrita.
    في منتصف رحلة حياتنا
    وجدت نفسي في غابة مظلمة,
    لأن المسار المباشر قد فقد.
    أخي كوانت عصر حقبة è كوسا دورا
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    آه أنا! كم هو صعب القول
    ما كان هذا الغابة وحشية وخشنة وقاسية,
    وهو ما يجدد الخوف.
    Tant è amara che poco è più morte؛
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    لذا المر ، الموت أكثر بقليل.
    ولكن من الجيد أن تعامل هناك,
    سوف أتحدث عن الأشياء الأخرى التي رأيتها هناك.

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

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

    خذ بعين الاعتبار HTML التالية:

    معرف ="كانتو -1"> صنف ="إيطالي"> معرف ="- 1" صنف ="ص 1"> Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    chà © la diritta عبر عصر smarrita.
    معرف ="ص -2" صنف ="ص 2"> أخي كوانت عصر حقبة è كوسا دورا
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    معرف ="- 3" صنف ="ص 3"> Tant è amara che poco è più morte؛
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    صنف ="الإنجليزية"> معرف ="en-1" صنف ="ص 1"> في منتصف رحلة حياتنا
    وجدت نفسي في غابة مظلمة,
    لأن المسار المباشر قد فقد.
    معرف ="en-2" صنف ="ص 2"> آه أنا! كم هو صعب القول
    ما كان هذا الغابة وحشية وخشنة وقاسية,
    وهو ما يجدد الخوف.
    معرف ="en-3" صنف ="ص 3"> لذا المر ، الموت أكثر بقليل.
    ولكن من الجيد أن تعامل هناك,
    سوف أتحدث عن الأشياء الأخرى التي رأيتها هناك.

    باستخدام CSS لتعويم اللغتين بجوار بعضهما البعض ، و JS للتأكد من أن كل زوج من الفقرات (en-1 و it-2 ، إلخ) هو نفس الارتفاع ، يمكن إنشاء نفس التأثير دون الرجوع إلى الجدول- تخطيط قائم.

    مزايا:

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

    سلبيات:

    • يتطلب جافا سكريبت
    • يجب تعريف كل فقرة في الترميز.

    طاولات في العالم الحقيقي

    الأنماط الافتراضية للجداول غير جذابة حقًا ، وبالتالي نادرًا ما يتم استخدامها. توفر معظم إطارات واجهة المستخدم الأمامية (مثل Bootstrap و Skeleton) تصميمًا افتراضيًا محسنًا للغاية للجدول.

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

    الجداول قوية

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

    نماذج HTML

    يغطي هذا القسم نماذج HTML بالتفصيل. يتم تغطية كل مجموعة متنوعة من عناصر النموذج وواجهة إدخال المستخدم ، جنبًا إلى جنب مع نصائح لتنظيم النماذج وتصميمها.

    أساسيات النموذج

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

    قد يبدو المثال الأساسي جدًا:

    حتى في هذا النموذج البسيط ، يمكننا أن نرى أن هناك فرصة للمستخدم لإدخال البيانات (الاسم الأول واسم العائلة) وإرسال تلك البيانات إلى خادم.

    يمكن أن تصبح النماذج معقدة للغاية ، وهناك العديد من أنواع الإدخال المثيرة للاهتمام المتاحة الآن بفضل HTML5 ، ولكن بغض النظر عن مدى تعقيدها ، فإن قلب نموذج HTML هو نفسه: سلسلة من عناصر إدخال المستخدم جنبًا إلى جنب مع طريقة لإرسال المدخلات إلى الخادم.

    كيف يعمل النموذج

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

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

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

    ما يحدث مع البيانات المطلوبة هو موضوع البرمجة النصية من جانب الخادم (PHP ، Ruby ، ​​وما إلى ذلك) ، لذلك لا تقلق بشأن ذلك.

    طلبات HTTP وطرق النموذج

    يمكن أن ترسل النماذج نوعين مختلفين من الطلبات:

    • بريد
    • احصل على

    هذان النوعان من الطلبات لهما معانٍ مختلفة ، مما يجعلهما يتصرفان بشكل مختلف ولذلك يجب استخدامهما في مواقف مختلفة.

    __ الفرق الدلالي بين POST و GET

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

    POST ليس طلبًا للحصول على شيء ما ، بل طلب لإرسال شيء ما أو إرساله. يمكنك التفكير في نشر رسالة أو نشر الكفالة أو نشر علامة.

    الاختلاف الفني

    عند استخدام طلب GET ، يتم تضمين معلمات الإدخال في URL.

    http://example.com/search؟term=thing+i+am+searaching+for

    باستخدام طلب POST ، لا يتم تضمين معلمات الإدخال في عنوان URL ، ولكن يتم إرسالها بدلاً من ذلك في نص الطلب.

    الفرق هنا منطقي بناءً على معنى كل نوع من أنواع الطلبات:

    • طلب GET يطلب موردًا محددًا ، محددًا بواسطة عنوان URL. لذلك ، يجب تضمين تفاصيل هذا الطلب في عنوان URL ، لأن تلك التفاصيل تحدد المورد الذي يطلبه الطلب بالفعل.
    • يرسل طلب POST رسالة إلى عنوان معين. يتم تحديد العنوان في عنوان URL ، ويتم تحديد الرسالة في نص الطلب.
    متى تستخدم POST و GET في النماذج

    إذا تم استخدام نموذج لطلب بيانات ومعلومات - مثل نموذج بحث - وليس الغرض منه في الأساس إضافة محتوى أو تحريره ، فمن الأفضل استخدام GETrequest.

    مؤشرات أخرى GET هي الاختيار الصحيح:

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

    إذا تم استخدام نموذج لإرسال معلومات ، فمن المرجح أن يكون POST هو الخيار الصحيح.

    مؤشرات أخرى على أن POST هو الخيار الصحيح:

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

    بالإضافة إلى ذلك ، هناك سببان لاستخدام POST ، حتى إذا كان طلب GET أكثر منطقية لأسباب أخرى:

    • لأسباب أمنية ، يفضل عدم وضع معلمات الإدخال في عنوان URL.
    • يتجاوز طول عنوان URL باستخدام طلب GET 2000 حرف.
    مكان تعريف POST أو GET

    يرسل كل نموذج معلومات إلى الخادم باستخدام GET أو نوع طلب POST. يتم تعريف ذلك بسمة الأسلوب في العنصر.

    الطريقة ="احصل على"> الطريقة ="بريد">

    الطريقة الافتراضية هي GET ، والتي أدت إلى استخدام العديد من التعسف في استخدام GET عندما يكون POST هو الخيار الصحيح. لا تعتمد على الافتراضي - استخدم الطريقة الصحيحة لحالتك.

    إجراء النموذج - عنوان URL المطلوب

    يحصل النموذج إما على مورد (محدد بواسطة عنوان URL) أو ينشر معلومات إلى مورد (محدد بواسطة عنوان URL).

    يتم تعريف عنوان URL للمورد من خلال سمة الإجراء في نموذج.

    العمل ="search.php" الطريقة ="احصل على"> العمل ="edit-post.php" الطريقة ="بريد">

    كما هو الحال مع سمات href و src ، يمكن أن يكون عنوان URL نسبيًا (action ="search.php") أو مطلق (action ="http://example.com/search.php").

    إذا تم حذف سمة الإجراء ، فسيكون عنوان URL الافتراضي هو الصفحة الحالية. (سيؤدي ذلك إلى إعادة تحميل الصفحة في الظروف العادية.

    سمات أخرى

    تنطبق السمات التالية على العنصر:

    • Accept-charset - لتحديد مجموعة الأحرف المستخدمة لإرسال بيانات النموذج. الإعداد الافتراضي هو نفس مجموعة أحرف المستندات ، لذلك لا يلزم ذلك عادةً.
    • الإجراء - عنوان URL المستهدف لإرسال النموذج. شرح أعلاه.
    • الإكمال التلقائي - لتمكين الإكمال التلقائي في المتصفحات المدعومة. القيم قيد التشغيل أو الإيقاف. القيمة الافتراضية قيد التشغيل. من الممكن تجاوز هذا الإعداد على عناصر النموذج الفردية.
    • enctype - تحدد كيفية تشفير بيانات النموذج. ينطبق هذا على نماذج POST فقط. القيم هي:
      • application / x-www-form-urlencoded - يتم ترميز جميع الأحرف قبل إرسالها. يتم تحويل المسافات إلى رموز + ، ويتم تحويل الأحرف الخاصة إلى قيم ASCII HEX. هذا هو الافتراضي.
      • تعدد الأجزاء / بيانات النموذج - لا يتم ترميز الأحرف. هذا مطلوب إذا كنت تستخدم برنامج تحميل ملف في النموذج الخاص بك.
      • نص / عادي - يتم تحويل المسافات إلى رموز + ، ولكن لا يتم ترميز الأحرف الخاصة.
    • طريقة - GET أو POST
    • name - اسم النموذج. عادة ما يكون من الجيد تضمين أحدها ، ولا يوجد أي سبب يمنع من أن يكون نفس المعرّف.
    • novalidate - تحديد أنه لا ينبغي التحقق من صحة بيانات النموذج تلقائيًا عند إرسالها. هذه السمة لا تقبل أي قيمة. (كن حذرا مع هذا.)
    • target - تعادل السمة الهدف على روابط الارتساء () ، تحدد هذه السمة مكان عرض الاستجابة من النموذج.
      • _self - لفتح الاستجابة في نفس النافذة. هذا هو الافتراضي.
      • _blank - لفتح الاستجابة في نافذة أو علامة تبويب جديدة.
      • _parent - لفتح الاستجابة في النافذة أو الإطار الرئيسيين للنماذج.
      • _top - يفتح الاستجابة في كامل النافذة.
      • Framename - يمكنك أيضًا تحديد اسم إطار لفتح الاستجابة فيه ، إذا كنت قد فتحت سابقًا إطارات وأسمتها في الصفحة.

    باستخدام عناصر النموذج

    أسماء العناصر

    عندما يتم إرسال نموذج إلى الخادم ، فإن الطلب - سواء كان POST أو GET - يحتوي على البيانات التي أدخلها المستخدم في النموذج. يتم إرسال هذه البيانات في شكل سلسلة من أزواج القيمة الرئيسية.

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

    العمل ="" الطريقة ="بريد"> ل ="الاسم الاول">الاسم الاول اكتب ="نص" name ="الاسم الاول" معرف ="الاسم الاول"> ل ="الاسم الاول">الكنية اكتب ="نص" name ="الكنية" معرف ="الكنية"> اكتب ="إرسال">
    تسميات العناصر

    العنصر مهم للغاية ، لأنه يحدد التسمية لأي عنصر شكل.

    لا يحب بعض المصممين استخدام تسميات النماذج لأنهم يفضلون وضع نص التسميات في عنصر الإدخال.

    العمل ="" الطريقة ="بريد"> اكتب ="نص" name ="الاسم الاول" العنصر النائب ="الاسم الاول"> اكتب ="نص" name ="الكنية" العنصر النائب ="الكنية"> اكتب ="إرسال">

    في حين أن هذا قد يبدو أفضل لتصميمك ، فهناك مشكلتان خطيرتان لقابلية الاستخدام:

    • يتم استخدام التسميات من قبل برامج قراءة الشاشة لإخبار المستخدمين المكفوفين عن الحقول.
    • لا تدعم جميع المتصفحات خاصية “العنصر النائب”.

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

    كما أنه من الشائع للأسف أن يشمل الناس العنصر ، ولكن لا تستخدمه بشكل صحيح.

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

     ل ="الاسم الاول">الاسم الاول
     اكتب ="نص" name ="الاسم الاول" معرف ="الاسم الاول">

    يخدم هذا غرضين:

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

    بالإضافة إلى استخدام إلى عن على السمة ، يمكن ربط التسمية بإدخال عن طريق تضمين الإدخال داخل جزء.

    
    
    اللون

    أحمر

    أزرق

    أخضر

    تحديد القيم الافتراضية

    ال القيمة تتوافق السمة مع القيمة الحالية لعنصر إدخال النموذج. بتضمين قيمة لـ القيمة, يمكنك تعيين حالة (بداية) افتراضية لأي عنصر نموذج.

     العمل ="" الطريقة ="بريد">
     ل ="الاسم الاول">الاسم الاول
     اكتب ="نص" name ="الاسم الاول" معرف ="الاسم الاول"القيمة="يوحنا">
     ل ="الكنية">الكنية
     اكتب ="نص" name ="الكنية" معرف ="الكنية" القيمة ="حداد">
     اكتب ="إرسال">
    

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

    في المثال أعلاه (اسم شخص) ، قد تكون فكرة سيئة استخدام قيم “John Smith” كعنصر نائب أو تلميح للمستخدم – قد يقوم المستخدم بإرسال هذا إلى الخادم. ومع ذلك ، إذا كانت هذه (على سبيل المثال) صفحة ملف تعريف ، حيث يمكن للمستخدمين تحديث معلوماتهم الخاصة أو اتركه كما هو, ثم استخدام القيمة بهذه الطريقة أمر منطقي.

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

    تعطيل العناصر

    يمكن تعطيل معظم العناصر عن طريق إضافة معاق ينسب إليهم. لا يمكن النقر على العناصر المعطلة أو تحريرها.

     العمل ="" الطريقة ="بريد">
     ل ="الاسم الاول">الاسم الاول
     اكتب ="نص" name ="الاسم الاول" القيمة ="يوحنا" معرف ="الاسم الاول">
     ل ="الكنية">الكنية
     اكتب ="نص" name ="الكنية" القيمة ="حداد" معرف ="الكنية" معاق>
     اكتب ="إرسال">
    

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

    ال جزء

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

    يتم تحديد أنواع مختلفة من عناصر التحكم في الإدخال بواسطة نوع صفة على جزء.

    أكتب نصا

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

    اكتب ="نص">

    ال قائمة يمكن استخدام السمة لتحديد قائمة بالقيم المحددة مسبقًا للإدخال.

    اكتب ="نص" قائمة ="خيارات"> معرف ="خيارات"> القيمة ="أحمر"> القيمة ="أخضر"> القيمة ="أزرق">
    النوع: إرسال

    ثاني أهم نوع من المدخلات هو إرسال الإدخال ، الذي يحدد زر إرسال النماذج.

     اكتب ="إرسال">

    النص الافتراضي على زر الإرسال هو “إرسال”. يمكن تغيير هذا مع القيمة ينسب.

    name ="بحث"> اكتب ="إرسال" القيمة ="بحث">

    نوع إدخال آخر يخلق واجهة مستخدم رسومية مماثلة مثل إرسال اكتب ال زر نوع. ومع ذلك ، لا تستخدم زر لتقديم النموذج العام. (لن تعمل.) ولا تستخدم إرسال زر للأزرار العامة داخل نموذج – سيعمل بطريقة خاطئة.

    أكتب كلمة المرور

    إذا كنت تريد إخفاء الأحرف التي تم إدخالها في إدخال النص ، استخدم كلمه السر نوع.

    ل ="اسم المستخدم">اسم المستخدم
    name ="اسم المستخدم" اكتب ="نص" معرف ="اسم المستخدم">

    ل ="كلمه السر">كلمه السر
    اكتب ="كلمه السر" name ="كلمه السر" معرف ="كلمه السر">

    اكتب ="إرسال" القيمة ="تسجيل الدخول">
    أنواع إدخال النص مع التحقق

    تقوم عدة أنواع من المدخلات بإنشاء نفس واجهة المستخدم الرسومية – مربع لكتابة النص فيه – ولكنها تخلق شروطًا مختلفة للتحقق من صحة الإدخال.

    على سبيل المثال ، البريد الإلكتروني اكتب الشيكات للتأكد من أن البيانات التي تم إدخالها تتوافق مع تنسيق عنوان البريد الإلكتروني القياسي (بعض النصوص ، متبوعة بـ @ تسجيل ، متبوعًا بنص يشمل نقطة واحدة على الأقل).

    هذه الأنواع هي:

    • البريد الإلكتروني
    • رقم – يقبل الحقل الأرقام فقط.
    • هاتف – رقم هاتف. (التحقق من صحة أرقام الهاتف غير مدعوم على نطاق واسع في المتصفحات.)
    • عنوان url – يقبل فقط عناوين URL جيدة التكوين.

    يتم التحقق من هذه القيم عند تقديم النموذج ، ما لم يكن نوفاليدات يتم تحديد السمة في النموذج أو فورمالوفيليدات يتم تحديد السمة على العناصر الفردية.

    أنواع مع محددات التاريخ أو الوقت

    تنشئ العديد من أنواع الإدخال عناصر واجهة مستخدم منبثقة لتحديد تاريخ و / أو وقت من التقويم. عناصر واجهة المستخدم هذه تعتمد على المستعرض وغير مدعومة عالميًا.

    هذه الأنواع هي:

    • تاريخ
    • التاريخ والوقت
    • datetime-local
    • شهر
    • زمن
    • أسبوع
    ل ="تاريخ">مثال لإدخال التاريخ
    اكتب ="تاريخ" name ="تاريخ" معرف ="تاريخ">

    ل ="تاريخ">مثال على إدخال التاريخ والوقت
    اكتب ="تاريخ" name ="تاريخ" معرف ="تاريخ">

    ل ="datetime-local"> مثال Datetime Local
    اكتب ="datetime-local" name ="datetime-local" معرف ="datetime-local">

    ل ="شهر">مثال على إدخال الشهر
    اكتب ="شهر" name ="شهر" معرف ="شهر">

    ل ="زمن">مثال على إدخال الوقت
    اكتب ="زمن" name ="زمن" معرف ="زمن">

    ل ="أسبوع">مثال على إدخال الأسبوع
    اكتب ="أسبوع" name ="أسبوع" معرف ="أسبوع">

    النوع: راديو

    أزرار الاختيار هي نوع من إدخال النموذج حيث يمكن اختيار عنصر واحد فقط في مجموعة.

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

    السمة التي تربط عدة أزرار اختيار في مجموعة هي اسم ينسب.

    اكتب ="مذياع" name ="شكل" القيمة ="ميدان"> ميدان
    اكتب ="مذياع" name ="شكل" القيمة ="دائرة"> دائرة
    اكتب ="مذياع" name ="شكل" القيمة ="مثلث"> مثلث
    اكتب ="مذياع" name ="اللون" القيمة ="أحمر"> أحمر
    اكتب ="مذياع" name ="اللون" القيمة ="أزرق"> أزرق
    اكتب ="مذياع" name ="اللون" القيمة ="أخضر"> أخضر
    شكل



    اللون



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

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

    
    
    اكتب ="مذياع" name ="شكل" القيمة ="ميدان"> ميدان
    اكتب ="مذياع" name ="شكل" القيمة ="دائرة"> دائرة
    اكتب ="مذياع" name ="شكل" القيمة ="مثلث"> مثلث
    اكتب ="مذياع" name ="اللون" القيمة ="أحمر"> أحمر
    اكتب ="مذياع" name ="اللون" القيمة ="أزرق"> أزرق
    اكتب ="مذياع" name ="اللون" القيمة ="أخضر"> أخضر
    شكل

    ميدان

    دائرة

    مثلث

    اللون

    أحمر

    أزرق

    أخضر

    لاحظ أنه منذ عنصر يلتف العنصر إلى عن على و هوية شخصية السمات غير مطلوبة.

    النوع: خانة اختيار

    يمكن استخدام نوع إدخال مربع الاختيار لتحديد أحد نوعين من عناصر التحكم في الإدخال (يشبه كلاهما مربعات الاختيار).

    النوع الأول هو مفتاح واحد قد يكون له عدة قيم (تسمى أحيانًا التحديد المتعدد). النوع الثاني هو مفتاح منطقي (TRUE / FALSE).

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

    الألوان التي أحبها
    اكتب ="مربع اختيار" name ="اللون" القيمة ="أزرق"> أزرق
    اكتب ="مربع اختيار" name ="اللون" القيمة ="أخضر"> أخضر
    اكتب ="مربع اختيار" name ="اللون" القيمة ="الأصفر"> الأصفر
    اكتب ="مربع اختيار" name ="اللون" القيمة ="أحمر"> أحمر
    الألوان التي أحبها

    الألوان

    أزرق

    أخضر

    الأصفر

    أحمر

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

    http://example.com؟color=blue&color=green&color=yellow&color=red

    يمكنك أيضًا استخدام مربعات الاختيار بشكل فردي لتمثيل القيم المنطقية (TRUE / FALSE).

    اكتب ="مربع اختيار" name ="أصعب" القيمة ="صحيح"> بالنقر هنا ، أنت تقر بأنك توافق على شروط الخدمة.

    بالنقر هنا ، أنت تقر بأنك توافق على شروط الخدمة.

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

    في كلتا الحالتين ، إذا لم يتم تحديد مربعات ، فإن اسم لم يتم إرسال المفتاح في الطلب.

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

    النوع: زر

    يمكن إنشاء زر في نموذج باستخدام نوع الإدخال زر. بخلاف أنواع الإدخال الأخرى ، لا يحمل هذا معنى محددًا داخل نموذج ، وعادة ما يستخدم فقط لتشغيل بعض إجراءات JavaScript.

     اكتب ="زر" القيمة ="تسمية الزر" عند النقر ="تنبيه (" أنا زر!) "">
    النوع: اللون

    الجديد في HTML5 – والمعتمد فقط في بعض المتصفحات – هو نوع إدخال اختيار الألوان.

    في المتصفحات التي تدعمه ، يؤدي النقر فوق هذا العنصر إلى عرض واجهة مستخدم رسومية لتحديد لون. القيمة المقدمة إلى الخادم هي قيمة ألوان سداسية HTML / CSS (على سبيل المثال. أبيض = #ffffff).

    ل ="اللون المفضل">ما هو لونك المفضل?
    اكتب ="اللون" name ="اللون المفضل" معرف ="اللون المفضل">

    النوع: المدى

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

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

    
    
    ل ="فهم الشكل">ما مدى فهمك للأشكال?

    لا على الاطلاق.
    اكتب ="نطاق" name ="فهم الشكل" معرف ="فهم الشكل" دقيقة ="0" ماكس"100"> ممتاز.

    لا على الاطلاق.

    ممتاز.

    النوع: صورة

    ال صورة الإدخال يحل محل إرسال الزر ، مما يسمح لك باستخدام الصورة كزر.

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

    اكتب ="صورة" src ="example.jpg">
    النوع: ملف

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

    اكتب ="ملف" name ="تحميل الملف">

    يمكنك تحديد الملفات المقبولة من قبل إدخال الملف باستخدام قبول والتي تتيح لك تحديد إما قائمة ملحقات أو قائمة أنواع MIME.

    
    
    
    اكتب ="ملف" name ="برنامج تحميل محدود الإضافة" قبول =".png، .gif، .jpg، .jpeg">
    اكتب ="ملف" name ="برنامج تحميل مايم المحدود" قبول ="image، image / png، image / gif، image / jpg، image / jpeg">

    دعم المستعرض لملحق الملفات ليس عالميًا ، لذا من المحتمل أن تكون قائمة نوع MIME هي أفضل طريقة للذهاب. (راجع قائمة أنواع MIME للحصول على التفاصيل.)

    حتى لو كنت تستخدم قبول السمة للحد من امتدادات الملفات التي يمكن تحميلها من خلال النموذج ، من المهم التحقق من نوع الملف ومحتويات الملف على الخادم. لسببين على الأقل:

    • يمكن لمستخدم ضار (أو مهمَّل) تسمية ملف بامتداد خاطئ. ال قبول القيد على رافع الملفات ينظر فقط إلى الامتداد ، وليس تنسيق الملف الفعلي ، لذلك ليس هناك ما يضمن أن الملف من النوع الصحيح.
    • من الممكن تجاوز النموذج وإرسال طلب مباشرة إلى الخادم. (لهذا السبب يجب التحقق من صحة جميع المدخلات على الخادم.)
    النوع: مخفي

    يمكنك تعيين غير مرئي إدخال العنصر ، الذي سيتم تضمين قيمته عند إرسال النموذج ، باستخدام نوع مخفي.

     اكتب ="مخفي" name ="القيمة المخفية" القيمة ="">

    الاستخدام الأكثر شيوعًا للإدخال المخفي هو كحامل لقيمة تم إنشاؤها في مكان آخر على الصفحة ، عادةً من خلال JavaScript. يتسبب تفاعل المستخدم على الصفحة في تعيين قيمة إلى الإدخال المخفي ، والذي يتم تضمينه بعد ذلك في إرسال النموذج.

    سمات

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

    • قبول – يعرف قائمة أنواع الملفات ، إما عن طريق التمديد أو حسب نوع MIME. تستخدم فقط مع اكتب = "ملف".
    • بديل – يعرف نص بديل. تستخدم فقط مع اكتب = "صورة".
    • الإكمال التلقائي – تحديد ما إذا كان يجب إكمال حقل الإدخال تلقائيًا. القيم هي على أو إيقاف. يتجاوز مستوى النموذج الإكمال التلقائي ينسب. ينطبق فقط على المدخلات النصية.
    • ضبط تلقائي للصورة – يحدد أن يجب أن يكون في التركيز عند تحميل الصفحة. لا قيمة مطلوبة. يجب استخدامه مرة واحدة فقط في المستند.
    • التحقق – يضع أ مذياع أو خانة الاختيار الإدخال إلى الحالة المحددة.
    • معاق – يعطل جزء. لا ترسل العناصر المعطلة قيمتها عند إرسال النموذج. لا قيمة مطلوبة.
    • شكل – يحدد أ
      التي ينتمي ، للاستخدام عند العنصر خارج جزء. القيمة هي هوية شخصية من النموذج المستهدف. هذه السمة غير مدعومة عالميًا.
    • تشكيل – يحدد عنوان URL لإرسال النموذج إليه. يتجاوز عمل صفة
      نفسها ، أو استبدالها. يستخدم هذا فقط على إرسال أو صورة أنواع. السبب الوحيد لاستخدام هذا بدلاً من النماذج عمل السمة هي إذا كان النموذج يتطلب أزرار إرسال متعددة مع إجراءات مختلفة.
    • الشكل – يحدد ترميز الأحرف للبيانات المقدمة. يتجاوز enctype صفة
      جزء. يستخدم هذا فقط على إرسال و صورة أنواع. القيم:
      • application / x-www-form-urlencoded
      • بيانات متعددة الأجزاء / النماذج
      • نص عادي
    • Formmethod – تحدد الطريقة (احصل على أو بريد) من تقديم النموذج. يتجاوز طريقة صفة
      جزء. يستخدم هذا فقط على إرسال و صورة أنواع.
    • فورمالوفيليدات – يحدد أنه لا ينبغي التحقق من صحة بيانات النموذج قبل التقديم. يتجاوز نوفاليدات صفة
      جزء. يستخدم هذا فقط على إرسال و صورة أنواع. لا تتطلب هذه السمة قيمة.
    • الاستهداف – تحديد سياق المتصفح الذي سيتم عرض الاستجابة فيه. يتجاوز استهداف صفة
      جزء. يستخدم هذا فقط على إرسال و صورة أنواع. القيم:
      • _ فارغ
      • _الذات
      • _الأبوين
      • _أعلى
      • اسم الإطار
    • ارتفاع – يحدد الارتفاع بالبكسل صورة إدخال. سيكون من الأفضل استخدام CSS لتحديد ذلك.
    • قائمة – يحدد هوية شخصية أ عنصر يحتوي على خيارات محددة مسبقًا. تستخدم فقط مع المدخلات القائمة على النص.
    • ماكس – يحدد أقصى قيمة لرقم أو إدخال مستند إلى التاريخ.
    • الحد الاقصى للطول – يحدد الحد الأقصى لعدد الأحرف في إدخال النص.
    • دقيقة – يحدد الحد الأدنى لقيمة الرقم أو الإدخال المستند إلى التاريخ.
    • مضاعف – يحدد أنه يمكن للمستخدم إدخال أكثر من قيمة واحدة. يستعمل مع البريد الإلكتروني و ملف أنواع المدخلات. لا تتطلب هذه السمة قيمة.
    • اسم – يحدد اسم المدخلات. تُستخدم كمفتاح في زوج قيم مفتاح يمثل المدخلات عند إرسال النموذج. فريد اسم يجب توفيره لجميع عناصر النموذج.
    • نمط – يحدد تعبيرًا عاديًا ليتم استخدامه للتحقق من قيمة المدخلات النصية.
    • عنصر نائب – تحديد نص العنصر النائب أو نص “المساعد” لإدخال مستند إلى النص.
    • يقرأ فقط – يحدد أنه لا يمكن تحرير المدخلات من قبل المستخدم. مماثلة في السلوك معاق السمة ، باستثناء المدخلات للقراءة فقط فعل إرسال قيمتها إلى الخادم عند تقديم النموذج. غالبًا ما يتم استخدامه مع JavaScript لضمان عدم قدرة المستخدم على تحرير قيمة حتى يتم استيفاء شروط معينة ، أو لا يمكنه القيمة بعد استيفاء شروط معينة. لا تتطلب هذه السمة قيمة.
    • مطلوب – يحدد أن يجب أن يكون لها قيمة ، أو لن يتم تقديم النموذج. لا تتطلب هذه السمة قيمة.
    • بحجم – يحدد عرض عنصر الإدخال النصي بالأحرف. عادةً ما يكون استخدام CSS أفضل طريقة لتحقيق ذلك.
    • src – يحدد عنوان URL لصورة صورة إدخال.
    • خطوة – يحدد الفاصل الزمني بين المدخلات الصالحة في الإدخال القائم على الرقم.
    • نوع – يحدد نوع ال جزء. الافتراضي هو نص. لا يتم دعم جميع القيم الممكنة في جميع المتصفحات. القيم:
      • زر
      • خانة الاختيار
      • اللون
      • تاريخ
      • التاريخ والوقت
      • datetime-local
      • البريد الإلكتروني
      • ملف
      • مخفي
      • صورة
      • شهر
      • رقم
      • كلمه السر
      • مذياع
      • نطاق
      • إعادة تعيين
      • بحث
      • إرسال
      • هاتف
      • نص
      • زمن
      • عنوان url
      • أسبوع
    • القيمة – تحدد قيمة البداية للمدخلات.
    • عرض – يحدد عرض بالبكسل صورة إدخال. عادةً ما يكون استخدام CSS أفضل طريقة لتحقيق ذلك.

    منطقة النص

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

    # textarea-example textarea {
    ارتفاع: 6em ؛
    العرض: 30em ؛
    }}

    سيتم عرض أي نص داخل العنصر في منطقة النص.


    ل ="msg">رسالتك:

    name ="msg" معرف ="msg">هذا النص داخل عنصر textarea. سيشاهده المستخدم. إذا لم يغيره المستخدم ، فسيتم تقديمه مع النموذج.

    # textarea-text-example textarea {
    ارتفاع: 6em ؛
    العرض: 30em ؛
    }}

    رسالتك:

    سمات هي:

    • ضبط تلقائي للصورة - يحدد أنه يجب التركيز عند تحميل الصفحة. يجب استخدامه مرة واحدة فقط على المستند. لا تتطلب هذه السمة قيمة.
    • cols - يحدد عرض منطقة النص بالأحرف. يتم تحقيق ذلك بشكل أفضل مع CSS.
    • معطل - يعطل. لا ترسل عناصر النموذج المعطلة قيمتها إلى الخادم عند إرسال النموذج. لا تتطلب هذه السمة قيمة.
    • شكل - يحدد معرف a الذي ينتمي إليه ، للاستخدام غير موجود داخل العنصر. غير مدعوم في جميع المتصفحات.
    • maxlength - يحدد الحد الأقصى لعدد الأحرف المسموح به في .
    • name - يحدد اسم ، ويعمل كمفتاح لزوج القيمة المفتاح الذي يمثل طلب التقديم في النموذج. يجب أن تتضمن جميع عناصر النموذج اسمًا فريدًا.
    • عنصر نائب - يحدد نصًا نائبًا أو نصًا مساعدًا لعرضه قبل أن يكتبه المستخدم.
    • للقراءة فقط - تحدد أنه لا يمكن للمستخدم تحرير إدخال. مشابه في السلوك للسمة المعطلة ، باستثناء العناصر للقراءة فقط ترسل قيمتها إلى الخادم عند إرسال النموذج. غالبًا ما يتم استخدامه مع JavaScript لضمان عدم قدرة المستخدم على تحرير قيمة حتى يتم استيفاء شروط معينة ، أو لا يمكنه القيمة بعد استيفاء شروط معينة. لا تتطلب هذه السمة قيمة.
    • مطلوب - يحدد أنه يجب أن يكون له قيمة ، وإلا فلن يتم تقديم النموذج. لا تتطلب هذه السمة قيمة.
    • الصفوف - تحدد ارتفاع ، في أسطر النص. في بعض الحالات ، يفضل استخدام CSS (على سبيل المثال عندما يكون العدد الفعلي للخطوط مرتبطًا) ، ولكن لتحديد الارتفاع ، يكون CSS عادةً خيارًا أفضل.
    • التفاف - يحدد ما إذا كان الإدخال يجب أن يلتف بجد (أدخل حرف فاصل أسطر في كل فاصل سطر) أو التفاف ناعم (أدخل حرف فاصل سطر فقط حيث يحدد المستخدم فاصل السطر). القيم ناعمة أو صلبة.

    حدد (القائمة المنسدلة)

    لتعريف محدد منسدل ، استخدم العنصر مع العناصر الفرعية.

    ل ="اللون المفضل">ما هو لونك المفضل?
    name ="اللون المفضل" معرف ="اللون المفضل">
    القيمة ="أحمر">أحمر
    القيمة ="أزرق">أزرق
    القيمة ="أخضر">أخضر
    القيمة ="الأصفر">الأصفر

    ما هو لونك المفضل?
    أحمر
    أزرق
    أخضر
    الأصفر

    يمكن تجميع الخيارات معًا وإعطاء تسميات على مستوى المجموعة مع العنصر.

    ل ="اللون المفضل">ما هو لونك المفضل?
    name ="اللون المفضل" معرف ="اللون المفضل">
    التسمية ="الألوان الأساسية">
    القيمة ="أحمر">أحمر
    القيمة ="أزرق">أزرق
    القيمة ="الأصفر">الأصفر

    التسمية ="ألوان ثانوية">
    القيمة ="أخضر">أخضر
    القيمة ="البرتقالي">البرتقالي
    القيمة ="أرجواني">أرجواني

    التسمية ="في الواقع ليس الألوان">
    القيمة ="أسود">أسود
    القيمة ="أبيض">أبيض
    القيمة ="اللون الرمادي">اللون الرمادي

    ما هو لونك المفضل?
    أحمر
    أزرق
    الأصفر

    أخضر
    البرتقالي
    أرجواني

    أسود
    أبيض
    اللون الرمادي

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

    سمات العنصر:

    • ضبط تلقائي للصورة - يحدد أنه يجب أن يكون العنصر في التركيز عند تحميل الصفحة. يجب استخدامه مرة واحدة فقط على المستند. لا تتطلب هذه السمة قيمة.
    • معطل - يعطل العنصر. لا ترسل العناصر المعطلة القيمة إلى الخادم عند إرسال النموذج. لا تتطلب هذه السمة قيمة.
    • شكل - يحدد معرف العنصر الذي ينتمي إليه هذا العنصر ، للاستخدام ثم لا يتم تضمين العنصر داخل. غير مدعوم في جميع المتصفحات.
    • متعددة - تحدد أنه يجوز للمستخدم تحديد أكثر من واحد. يتم إرسال تحديدات متعددة كأزواج قيمة مفتاح متعددة. لا تتطلب هذه السمة قيمة.
    • name - اسم العنصر ، الذي يعمل كمفتاح في زوج قيم المفتاح الذي يمثل العنصر عند إرسال النموذج إلى الخادم.
    • مطلوب - يحدد أن العنصر يجب أن يحتوي على قيمة محددة ، وإلا فلن يتم إرسال النموذج. لا تتطلب هذه السمة قيمة.
    • الحجم - يحدد عدد الخيارات المرئية. القيمة الافتراضية هي 1.

    سمة العناصر هي:

    • معطل - يحدد أنه لا يمكن تحديده.
    • label - تحدد تسمية العنصر الذي يحل محل محتويات العنصر في الشاشة المنسدلة.
    • selected - تحدد أنه يجب الاختيار المسبق عند تحميل الصفحة.
    • value - تحدد القيمة المرسلة إلى الخادم.

    تنظيم نموذج

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

    معلومات شخصية
    ل ="الاسم الاول">الاسم الاول
    name ="الاسم الاول" معرف ="الاسم الاول">

    ل ="الكنية">الكنية
    name ="الكنية" معرف ="الكنية">

    ل ="تاريخ الميلاد">تاريخ الميلاد
    name ="تاريخ الميلاد" معرف ="تاريخ الميلاد">

    الاشياء المفضلة
    ل ="اللون المفضل">اللون المفضل
    name ="اللون المفضل" معرف ="اللون المفضل">
    التسمية ="الألوان الأساسية">
    القيمة ="أحمر">أحمر
    القيمة ="أزرق">أزرق
    القيمة ="الأصفر">الأصفر

    التسمية ="ألوان ثانوية">
    القيمة ="أخضر">أخضر
    القيمة ="البرتقالي">البرتقالي
    القيمة ="أرجواني">أرجواني

    التسمية ="في الواقع ليس الألوان">
    القيمة ="أسود">أسود
    القيمة ="أبيض">أبيض
    القيمة ="اللون الرمادي">اللون الرمادي

    ل ="الشكل المفضل">الشكل المفضل
    name ="الشكل المفضل">
    القيمة ="مثلث">مثلث
    القيمة ="ميدان">ميدان
    القيمة ="دائرة">دائرة

    اكتب ="إرسال">

    نماذج التصميم

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

    هذا يسبب مشكلتين:

    • تبدو العديد من عناصر النموذج سيئة بشكل فردي.
      • على سبيل المثال - أزرار الراديو وخانات الاختيار لا تتوافق عادةً بشكل صحيح مع ملصقاتها الخاصة.
    • عناصر النموذج لا تبدو جيدة معًا.
      • على سبيل المثال - لن يصطف العنصر والقائمة المنسدلة على نفس السطر مع بعضهما البعض بشكل صحيح.

    وهذا يمكن أن يكون محبطا للغاية.

    يتم التعامل مع بعض المشكلات - مثل الارتفاع الرأسي والتباعد ، في بعض عمليات إعادة تعيين CSS الأكثر شيوعًا ، ولكن ليس جميعها.

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

    نظرًا لصعوبات تصميم النموذج ، غالبًا ما يكون من الجيد استخدام أنماط النموذج من إطار أمامي شائع.

    HTML و CSS - مقدمة موجزة

    يقدم هذا القسم لغة تصميم صفحات الويب - CSS - ويشرح كيفية تفاعلها مع HTML. على الرغم من أن هذا ليس دليلاً كاملاً للموضوع ، إلا أنه يوفر نظرة مفاهيمية متعمقة إلى حد ما في تصميم الموقع. تشمل الموضوعات التي يتم تناولها CSS الهيكلي ، و "نموذج الصندوق" ، وتصميم النص ، والطباعة ، والرسوم المتحركة ، والتصميم سريع الاستجابة ، واستخدام إطارات الواجهة الأمامية.

    ما هو CSS?

    تشير CSS إلى أوراق الأنماط المتتالية. إنها لغة تستخدم لتحديد كيفية عرض مستند HTML على الصفحة.

    يطلق عليها "ورقة الأنماط" ، في إشارة إلى فكرة أن المستند يجب أن يحتوي على كل المحتوى ، والمحتوى فقط ، وأن مستند أو ورقة منفصلة يجب أن تحتوي على معلومات حول الأنماط.

    يطلق عليه "المتتالية" لأن الأنماط المتعلقة بعرض النص "تتالي" من العناصر الرئيسية إلى العناصر الفرعية. على سبيل المثال ، إذا كانت CSS لفقرة (

    ) يعيّن لون النص إلى اللون الأزرق ، ثم يمتد نطاق غامق ( ) أو النص المائل () داخل تلك الفقرة باللون الأزرق أيضًا ، ما لم يغيرها إعلان نمط جديد.

    كيف يعمل CSS - نظرة عامة أساسية

    كيفية تضمين CSS في مستند

    يمكن تضمين CSS داخل عنصر في مستند ، أو في ملفات css منفصلة (تسمى "أوراق الأنماط") ، والتي يتم ربطها من مستند HTML ، داخل الرأس.

    rel ="ورقة الأنماط" اكتب ="نص / المغلق" href ="theme.css">

    ص {
    عائلة الخطوط: جورجيا, "تايمز الرومانية الجديدة", الرقيق.
    }}

    يمكنك الارتباط بأوراق أنماط متعددة في مستند واحد ، وتضمين أكثر من علامة واحدة.

    من الأفضل دائمًا تضمين CSS عبر ورقة أنماط مرتبطة بدلاً من تضمين عنصر في الصفحة. هناك حالات محددة تكون فيها الأنماط المضمنة منطقية (البريد الإلكتروني ، على سبيل المثال) ولكن القاعدة العامة هي - إذا كان بإمكانك الربط بورقة أنماط ، فيجب عليك.

    إعلانات النمط

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

    [منتقي] {
    [قيمة السمة]؛
    [قيمة السمة]؛
    }}

    / * التعليقات هنا * /

    هذا هو:

    • محدد أو معرف عنصر يحدد ما يتم تصميمه. وتشمل هذه ما يلي (هناك المزيد):
      • اسم نوع العنصر: a ، p ، dl ، إلخ. هذا يطبق أنماطًا على جميع عناصر هذا النوع.
      • معرف فئة - اسم فئة مسبوقة بنقطة (.).
      • معرف معرف - اسم معرف مسبوق بعلامة التجزئة (#).
      • أحد العناصر المذكورة أعلاه ، بالإضافة إلى بعض محددات التخصص الأخرى ، مثل فئة زائفة مثل: hover.
    • قوس مجعد افتتاحي ، يشير إلى بداية قواعد النمط فيما يتعلق بالعنصر المحدد.
    • قواعد النمط يتم التعبير عنها كأزواج قيمة السمة مرتبطة بعلامات النقطتين وتنتهي بنصف النقطتين.
    • قوس إغلاق متعرج يشير إلى نهاية قواعد النمط لهذا العنصر.

    فمثلا:

    لغة البرمجة {
    اللون: # 222222 ؛ / * لون النص - رمادي داكن جدًا * /
    عائلة الخطوط: جورجيا, "تايمز الرومانية الجديدة", Garamond ، serif.
    حجم الخط: 14 بكسل ؛
    ارتفاع الخط: 22 بكسل ؛
    }}

    / * هذا تعليق. * /

    #logo {/ * النمط حسب معرف العنصر * /
    اللون: # B20000 ؛
    خط العائلة: "Helvetica Neue", Helvetica ، Arial ، sans-serif ؛
    }}

    .القطعة {/ * النمط حسب فئة العنصر. * /
    العرض: 100٪ ؛
    الحد: أسود صلب 2 بكسل ؛
    الحشو: 22 بكسل 11 بكسل ؛
    }}

    أ {
    اللون: # 008AE6 ؛
    }}

    أ: تحوم {
    اللون: # 006EB8 ؛
    زخرفة النص: تسطير ؛
    }}

    شجرة الوثيقة

    يعتقد الكثير من الناس ببساطة أن مستند HTML هو بنية خطية: أولاً ، ثم ، ثم ثم ، ثم .

    ومع ذلك ، فإن مستند HTML هو شجرة حقًا:

    • لغة البرمجة
      • رئيس
      • عنوان
      • ميتا
      • الجسم
      • العنوان
        • H1
        • التنقل
      • الأساسية
        • ص
          • أ
          • أ
          • قوي
        • رأ
          • لي
          • لي
          • لي
            • أ
      • جانبا
        • الجزء
        • الجزء
        • الجزء
      • تذييل

    يتم دمج كل عنصر داخل عنصر آخر.

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

    لكن الأنماط الأخرى تؤثر على محتويات العنصر - أنماط مثل لون النص ولون الخلفية وحجم الخط والتباعد. ويقال أن هذه الأنماط "تتالي" أسفل شجرة المستندات. تتأثر جميع المحتويات ، بما في ذلك العناصر الأخرى ، ما لم يتجاوزها إعلان نمط مختلف في نقطة أكثر تحديدًا.

    خذ بعين الاعتبار المثال التالي:

    href ="">مرساة داخل العنوان

    href ="">

    `العنوان داخل مرساة

    أ {
    لون أزرق؛
    }}

    h1 {
    الون الاخضر؛
    }}

    والتي ستكون باللون الأزرق والتي ستكون خضراء?

    في هذه الحالة ، سيكون الخط الأول (مرساة داخل العنوان) باللون الأزرق ، بينما سيكون الخط الآخر باللون الأخضر.

    لماذا ا?

    في المثال الأول ،

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

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

    محددات CSS

    يبدأ كل إعلان CSS محدد. يمكن أن يكون هذا نوعًا من العنصر أو فئة ومعرفًا أو عددًا من الأشياء الأخرى.

    هناك طريقة لاستهداف أي عنصر في المستند - ليس فقط حسب الفئة والمعرف ، ولكن حسب الموقع في المستند أو السياق أو السمات الأخرى.

    يمكن أيضًا دمج إعلانات المحددات. فمثلا:

    #container div {
    }}

    يؤدي ذلك إلى تحديد جميع العناصر الموجودة داخل عنصر #container.

    فيما يلي بعض أهم المحددات وتنسيقات المحددات.

    • * - يحدد جميع العناصر.
    • element-name - لتحديد جميع العناصر من نوع معين.
    • .class-name - لتحديد العناصر حسب اسم الفئة.
    • #id - تحديد العناصر حسب المعرّف.
    • element-name.class-name - لتحديد عناصر من نوع معين تطابق اسم الفئة.
    • selector1 ، selector2 - المحددات مفصولة بفواصل تتطابق مع جميع العناصر المشار إليها إما select11 أو selector2.
    • selector1 selector2 - محدد واحد يتبع محددًا آخر ، بمساحة فقط ، يحدد جميع العناصر المطابقة لـ select2 ، والتي توجد داخل عنصر مطابق للمحدد 1.
    • الاختيار 1>selector2 - تحديد جميع العناصر المطابقة لـ selector 2 وهي عناصر فرعية مباشرة للمحدد 1.
    • [سمة] - يحدد اسم السمة داخل الأقواس المربعة جميع العناصر التي لها هذه السمة مهما كانت قيمتها.
    • [سمة = قيمة] - لتحديد العناصر التي تحتوي على زوج قيمة سمة معين.
    • [سمة ~ = سلسلة] - تحديد العناصر التي تحتوي فيها قيمة السمات المحددة على السلسلة المشار إليها.
    • selector: first-child - لتحديد العناصر التي تعد الطفل الأول لعناصرها الرئيسية. يمكن استخدام هذا كصفحة رئيسية: الطفل الأول (على سبيل المثال) لتصميم نمط الفقرة الافتتاحية على الصفحة.
    • selector :: الحرف الأول - يحدد الحرف الأول من العنصر المطابق. يمكن استخدامه لإنشاء تأثيرات إسقاط.
    • selector :: السطر الأول - لتحديد السطر الأول من النص في عنصر المطابقة.
    • الإدخال: التركيز - تصميم مدخلات النموذج عندما يكون التركيز.
    • a: hover، a: active، a: زار - روابط أنماط الأنماط في نقاط مختلفة في دورة التفاعل الخاصة بهم.

    هناك الكثير بالإضافة إلى هذه.

    CSS وبنية الصفحة - نموذج الصندوق

    إن نموذج CSS Box هو شرح للطريقة التي يعرض بها CSS ويضع العناصر على مستوى الكتلة.

    ما هي عناصر الكتلة؟?

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

    هناك عدد من العناصر التي تكون على مستوى الكتلة بشكل افتراضي:

    • - معلومات للتواصل.
    • - محتوى المادة.
    • - المحتوى جانبا.
    • - مشغل الصوت.
    • - الاقتباس الطويل ("كتلة").
    • - رسم قماش.
    • - وصف التعريف.
    • - قسم الوثائق.
    • - قائمة التعريفات.
    • - تسمية مجموعة الميدان.
    • - شرح الشكل.
    • - وسائط (عادة صورة) مع تسمية توضيحية.
    • - تذييل القسم أو الصفحة.
    • - نموذج الإدخال.
    • ,

      ,

      ,

      ,

      ,
      - عناوين.

    • - رأس القسم أو الصفحة.
    • - قاعدة أفقية (خط فاصل).
    • - يحتوي على المحتوى المركزي الفريد لهذا المستند.
    • - يحتوي على روابط تنقل.
    • - محتوى للاستخدام إذا كانت البرمجة النصية غير مدعومة أو متوقفة.
      1. - قائمة مرتبة.
      2. - إخراج النموذج.
      3. - فقرة.

      4. - نص منسق مسبقا.
      5. - قسم صفحة الويب.
      6. - الطاولة.
      7. - تذييل الجدول.
        • - قائمة غير مرتبة.
        • - مشغل فديوهات.

        يمكنك أيضًا التسبب في تصرف أي عنصر مثل عنصر مستوى الكتلة من خلال تعيينه لعرض النمط: block؛.

        العرض والارتفاع

        بشكل افتراضي ، يكون عرض عنصر مستوى الكتلة 100٪ من عنصر مستوى الكتلة الذي يحتوي عليه ، بما في ذلك أي هوامش أو حدود أو حشو. (أي أن العناصر بأكملها ، بما في ذلك الهامش ، والحد ، والحشو ، ستناسب داخل الحاوية.)

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

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

        الشيء الغريب في تحديد العرض (والارتفاع ، لكنك لا تفعل ذلك كثيرًا) هو أن العرض الذي تحدده لن يكون العرض الكلي للعنصر.

        الهوامش والحدود والحشو

        بالإضافة إلى محتوى العنصر ، يتم تحديد العرض الإجمالي والارتفاع الكلي من خلال ثلاث سمات أخرى:

        • الهامش - المنطقة المحيطة بالعنصر.
        • حد - خط حول محيط العنصر.
        • الحشو - مسافة داخل محيط العنصر.

        تغطي أي تعريفات خلفية (مثل الخلفية أو لون الخلفية أو صورة الخلفية) منطقة المحتوى والمساحة والحدود. لا يعرض الهامش الخلفية.

        .حقل {
        العرض: 100٪ ؛
        لون الخلفية: # 66FF33 ؛ /* ليمون اخضر*/
        }}
        .في داخل {
        العرض: 100 بكسل ؛
        الهامش: 25 ​​بكسل ؛
        الحد: متقطع 15 بكسل أسود ؛
        المساحة المتروكة: 25 بكسل ؛
        لون الخلفية: # 90acff ؛
        اللون: # 002346 ؛
        وزن الخط: غامق ؛
        }}

        صنف ="حقل">
        صنف ="في داخل">
        هذا بعض النص في الداخل. لاحظ أنه بعيد عن الحافة الداخلية. هذا بسبب الحشو.

        # margin-padding-border .field {
        العرض: 100٪ ؛
        لون الخلفية: # 66FF33 ؛ /* ليمون اخضر*/
        }}
        # margin-padding-border. داخل {
        العرض: 100 بكسل ؛
        الهامش: 25 ​​بكسل ؛
        الحد: متقطع 15 بكسل أسود ؛
        المساحة المتروكة: 25 بكسل ؛
        لون الخلفية: # 90acff ؛
        اللون: # 002346 ؛
        وزن الخط: غامق ؛
        }}

        هذا بعض النص في الداخل. لاحظ أنه بعيد عن الحافة الداخلية. هذا بسبب الحشو.

        ملاحظة: تتم إضافة الهامش والحدود والحشو إلى العرض المعلن بواسطة CSS. - يتم تحديد الارتفاع من خلال المحتوى. - الهامش من الداخل يدفعه بعيدًا عن الجانب الأيسر من الحقل ، لكن الشيء نفسه لا ينطبق على الأعلى والأسفل. هذا غريب من CSS. لدفع العنصر الداخلي بعيدًا عن الجزء العلوي من الحاوية ، يمكنك إضافة الحشو إلى العنصر المحتوي. - يؤثر الهامش على يسار ويمين العنصر على علاقته بالعنصر الأصلي وعناصر الأشقاء. - يؤثر الهامش في أعلى وأسفل العنصر على علاقته بعناصر الأخوة فقط. - يملأ لون الخلفية مساحة المحتوى والمساحة والحدود ، ولكن ليس الهامش.

        نظرًا لأن العرض الإجمالي يتضمن العرض المعلن وأيضًا عرض أي هوامش وحدود ومساحة ، فإن الإعلان التالي لا يعمل:

        div {
        العرض: 100٪ ؛
        الهامش: 5 بكسل ؛
        الحشو: 15 بكسل ؛
        }}

        إذا فعلت شيئًا كهذا ، فستجد أن التوسيع يتجاوز الجانب الأيمن للعنصر الذي يحتويه بمقدار 40 بكسل.

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

        div {
        الهامش: 5 بكسل ؛
        الحشو: 15 بكسل ؛
        }}

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

        العناصر العائمة

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

        #حاوية {
        العرض: 400 بكسل ؛
        لون الخلفية: #eeeeee؛
        الحشو: 20 بكسل ؛
        }}
        #container div {/ * يستهدف جميع divs التي تعد عناصر تابعة لـ #container. * /
        الارتفاع: 50 بكسل ؛
        }}
        #red {
        لون الخلفية: أحمر ؛
        }}
        #أزرق {
        لون الخلفية: أزرق ؛
        }}
        #أخضر {
        لون الخلفية: أخضر ؛
        }}

        معرف ="حاوية">
        معرف ="أحمر">
        معرف ="أزرق">
        معرف ="أخضر">

        # div-stack .container {
        العرض: 400 بكسل ؛
        لون الخلفية: #eeeeee؛
        الحشو: 20 بكسل ؛
        }}
        # div-stack .container div {
        الارتفاع: 50 بكسل ؛
        }}
        # div-stack .red {
        لون الخلفية: أحمر ؛
        }}
        # div-stack .blue {
        لون الخلفية: أزرق ؛
        }}
        # div-stack .green {
        لون الخلفية: أخضر ؛
        }}

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

        #حاوية {
        العرض: 400 بكسل ؛
        لون الخلفية: #eeeeee؛
        الحشو: 20 بكسل ؛
        }}
        #container div {
        الارتفاع: 50 بكسل ؛
        العرض: 50 بكسل ؛
        }}
        #red {
        لون الخلفية: أحمر ؛
        }}
        #أزرق {
        لون الخلفية: أزرق ؛
        }}
        #أخضر {
        لون الخلفية: أخضر ؛
        }}

        معرف ="حاوية">
        معرف ="أحمر">
        معرف ="أزرق">
        معرف ="أخضر">

        # حاويات div-stack-skinny. {
        العرض: 400 بكسل ؛
        لون الخلفية: #eeeeee؛
        الحشو: 20 بكسل ؛
        }}
        # div-stack-skinny .container div {/ * يستهدف جميع divs التي تعد عناصر تابعة لـ #container. * /
        الارتفاع: 50 بكسل ؛
        }}
        # div-stack-skinny .red {
        لون الخلفية: أحمر ؛
        }}
        # div-stack-skinny .blue {
        لون الخلفية: أزرق ؛
        }}
        # div-stack-skinny .green {
        لون الخلفية: أخضر ؛
        }}

        من أجل السماح لهم بالجلوس بجانب كل منهم ، يجب السماح لهم "بالطفو". في CSS ، يعني "تعويم" السماح لعناصر أخرى من المستند بالتدفق حول العنصر العائم. يمكن تحريك عنصر الكتلة إلى اليسار أو اليمين أو المركز (المركز غير معتاد). إذا تم تعيين العديد من عناصر الأشقاء على الطفو ، فسوف تصطف بجانب بعضها البعض ، مفصولة بهوامشها.

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

        #حاوية {
        العرض: 400 بكسل ؛
        لون الخلفية: #eeeeee؛
        الحشو: 20 بكسل ؛
        }}
        #container div {
        الارتفاع: 50 بكسل ؛
        العرض: 50 بكسل ؛
        تعويم: اليسار؛
        }}
        #red {
        لون الخلفية: أحمر ؛
        }}
        #أزرق {
        لون الخلفية: أزرق ؛
        }}
        #أخضر {
        لون الخلفية: أخضر ؛
        }}

        معرف ="حاوية">
        معرف ="أحمر">
        معرف ="أزرق">
        معرف ="أخضر">

        # حاويات div-float. {
        العرض: 400 بكسل ؛
        لون الخلفية: #eeeeee؛
        الحشو: 20 بكسل ؛
        }}
        # div-float .container div {/ * يستهدف جميع divs التي تعد عناصر تابعة لـ #container. * /
        الارتفاع: 50 بكسل ؛
        }}
        # div-float .red {
        لون الخلفية: أحمر ؛
        }}
        # div-float .blue {
        لون الخلفية: أزرق ؛
        }}
        # div-float .green {
        لون الخلفية: أخضر ؛
        }}

        تنويه:

        • أول كتلة ملونة (#red) في الجانب الأيسر من الحاوية ، متبوعة بـ # أزرق و # أخضر.
        • ليس لديهم هامش ، لذا فهم بجانب بعضهم البعض مباشرة.
        • الحشو الموجود داخل الحاوية # يدفع الكتل للأسفل وبعيدًا عن الزاوية اليسرى العليا.

        ولكن - أوه لا - ما الذي يحدث للعنصر #container؟ لماذا تتدلى الكتل الملونة منه?

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

        • إعلان ارتفاعه إذا كان يحتوي على واحد (لا يحتوي هذا واحد) أو محتواه غير العائم إذا لم يكن له ارتفاع معلن (في هذه الحالة ، فإنه لا يحتوي أيضًا على أي)
        • الحشو الرأسي (أعلى وأسفل)
        • الحدود العمودية (أعلى وأسفل)
        • الهامش الرأسي (أعلى وأسفل)

        الارتفاع الداخلي للعنصر #container في هذه الحالة هو صفر ، والارتفاع الإجمالي هو 2x فقط حجم حشوها.

        هذه مشكلة مزعجة للغاية وشائعة جدًا. الحل (القليل من الاختراق) يسمى حل clearfix. هناك العديد من الخيارات لكيفية تنفيذ هذا الإجراء ، ولكن بالنسبة إلى أمثلةنا ، سنستخدم أبسط واحد ، بإضافة الفائض: auto إلى #container. هذه لا يعمل في جميع المتصفحات أو في جميع السياقات ، لكنها ستعمل بشكل جيد بما فيه الكفاية في معظم المتصفحات بحيث تكون مناسبة لأمثلةنا هنا.

        هنا نتيجة إضافة clearfix.

        #حاوية {
        العرض: 400 بكسل ؛
        لون الخلفية: #eeeeee؛
        الحشو: 20 بكسل ؛
        تجاوز: السيارات ؛
        }}
        #container div {
        الارتفاع: 50 بكسل ؛
        العرض: 50 بكسل ؛
        تعويم: اليسار؛
        }}
        #red {
        لون الخلفية: أحمر ؛
        }}
        #أزرق {
        لون الخلفية: أزرق ؛
        }}
        #أخضر {
        لون الخلفية: أخضر ؛
        }}

        معرف ="حاوية">
        معرف ="أحمر">
        معرف ="أزرق">
        معرف ="أخضر">

        # div-float-fix .container {
        العرض: 400 بكسل ؛
        لون الخلفية: #eeeeee؛
        الحشو: 20 بكسل ؛
        }}
        # div-float-fix .container div {/ * تستهدف جميع divs التي تعد عناصر تابعة لـ #container. * /
        الارتفاع: 50 بكسل ؛
        }}
        # div-float-fix .red {
        لون الخلفية: أحمر ؛
        }}
        # div-float-fix .blue {
        لون الخلفية: أزرق ؛
        }}
        # div-float-fix .green {
        لون الخلفية: أخضر ؛
        }}

        الآن ، إذا أضفنا بعض الهوامش ، والحشو ، والمحتوى ، وألوان أقل روعة ، يمكنك أن ترى كيف يمكن تحويل هذه الفكرة الأساسية إلى محتوى قياسي + تخطيط الشريط الجانبي.

        #حاوية {
        لون الخلفية: #eeeeee؛
        تجاوز: السيارات ؛
        الحشو: 20 بكسل ؛
        العرض: 600 بكسل ؛
        }}

        الأساسية {
        تعويم: اليسار؛
        لون الخلفية: #efefef ؛
        العرض: 300 بكسل ؛
        الحشو: 15 بكسل ؛
        الهامش الأيمن: 20 بكسل ؛
        }}

        جانبا {
        تعويم: اليسار؛
        لون الخلفية: #dedede ؛
        الحشو: 15 بكسل ؛
        العرض: 220 بكسل ؛
        }}

        معرف ="حاوية">

        لوريم إيبسوم

        Lorem ipsum dolor sit amet، consectetur adipiscing elit. Curabitur pretium، mi eu elementum ullamcorper، dui justo egestas turpis، sed auctor turpis tellus eget augue. Quisque vel malesuada erat. الدهليز غير المشعرات والزواحف.

        في arcu metus، finibus id dolor a، interdum lacinia lectus. الدهليز تولد neque مثل ما قبل tincidunt sodales. فعالية Quisque من scelerisque turpis. Donec Commodo ، diam id الناتجة sodales ، justo quam posuere libero ، non fringilla ante dui id tortor. تأثير فعال في بيلينتيسك إبس.

        أرشيف

        • مايو 2015
        • أبريل 2015
        • مارس 2015
        • فبراير 2015
        • يناير 2015

        # simple-sidebar. حاوية {
        لون الخلفية: #eeeeee؛
        تجاوز: السيارات ؛
        الحشو: 20 بكسل ؛
        العرض: 600 بكسل ؛
        }}

        # simple-sidebar main {الرئيسية)
        تعويم: اليسار؛
        لون الخلفية: #efefef ؛
        العرض: 300 بكسل ؛
        الحشو: 15 بكسل ؛
        الهامش الأيمن: 20 بكسل ؛
        }}

        # جانب جانبي بسيط {
        تعويم: اليسار؛
        لون الخلفية: #dedede ؛
        الحشو: 15 بكسل ؛
        العرض: 220 بكسل ؛
        }}

        لوريم إيبسوم

        Lorem ipsum dolor sit amet، consectetur adipiscing elit. Curabitur pretium، mi eu elementum ullamcorper، dui justo egestas turpis، sed auctor turpis tellus eget augue. Quisque vel malesuada erat. الدهليز غير المشعرات والزواحف.

        في arcu metus، finibus id dolor a، interdum lacinia lectus. الدهليز تولد neque مثل ما قبل tincidunt sodales. فعالية Quisque من scelerisque turpis. Donec Commodo ، diam id الناتجة sodales ، justo quam posuere libero ، non fringilla ante dui id tortor. تأثير فعال في بيلينتيسك إبس.

        أرشيف

        • مايو 2015
        • أبريل 2015
        • مارس 2015
        • فبراير 2015
        • يناير 2015

        #### __إضافي

        س__

        في عالم مثالي ، سيكون لكل عنصر في مستند HTML أهمية دلالة ، ولا يرتبط إلا بمحتوى المستند ، ولا يتم إضافته أبدًا لدعم الأنماط التقديمية فقط.

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

        تتبع معظم المدونات - ربما معظم مواقع الويب - نمطًا نموذجيًا:

        • قسم الرأس الذي يمتد على عرض الصفحة
        • منطقة المحتوى المركزية مقسمة إلى عمودين:
          • 2/3 من عرض المحتوى الأساسي
          • 1/3 من عرض الشريط الجانبي للأداة
        • قسم التذييل يمتد عرض الصفحة.

        سيكون الترميز المثالي لبنية المستند هذه:

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

        لذلك ، يبدو هيكل الترميز الأكثر شيوعًا لتخطيط مدونة نموذجي كما يلي:

        معرف ="حاوية">

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

        CSS لتصميم النص

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

        الشلال

        عند التفكير في تصميم النص في CSS ، من المهم بشكل خاص تذكر الجزء المتتالي من أوراق الأنماط المتتالية.

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

        المعنى العملي لهذا هو أنه يجب عليك بناء ورقة الأنماط الخاصة بك من العام إلى المحدد. يجب عليك عادةً تعيين خط أساسي واحد في ، والذي يغطي معظم المحتوى الخاص بك ، ثم تعيين أي خطوط تنحرف عن ذلك (مثل القوائم أو الأزرار) في نقطة معينة حيث تكون مختلفة.

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

        الأنماط

        إعلانات النمط الأكثر ارتباطًا بتصميم النص والطباعة هي:

        font-family: تحديد الخط (الخطوط) المطلوب استخدامه. : أفضل الممارسات هي الإعلان عن قائمة بالخط ، بدءًا بالخط المفضل لديك وسلسلة من الاحتياطات ، وتنتهي بأسرة خط عامة. : يجب أن يتم التفاف أسماء الخطوط التي تتضمن مسافات بين علامات اقتباس. : عائلة الخطوط: Garamond ، جورجيا, "تايمز الرومانية الجديدة", الرقيق.

        حجم الخط: تحديد حجم النص. : يمكن أن يكون حجمًا بالبكسل (14 بكسل) ، أو ems مطبعيًا استنادًا إلى حجم نص الوالدين (1em) ، أو نسبة مئوية بناءً على حجم نص الوالدين (115٪) ، أو اسم وصفي للحجم (صغير ، أو متوسط ​​، أو كبير) ، أو واصف مقارن بناءً على حجم نص الوالدين (أصغر ، أكبر). : حجم الخط: 14 بكسل ؛

        ارتفاع السطر: يحدد ارتفاع سطر من النص. : يجب أن يكون هذا عادةً أكبر من حجم الخط. عادةً ما يتم توسيط سطر النص داخل ارتفاع الخط. : يمكن تحديد ارتفاع الخط بالبكسل أو ems أو النسب المئوية. يمكن أيضًا تعيينه كمضاعف لحجم الخط ؛ يتم ذلك عن طريق حذف لاحقة الوحدات. : ارتفاع الخط: 1.4 ؛

        الهامش السفلي: يساهم الهامش الموجود أسفل الفقرات والعناوين والقوائم والعناصر المطبعية الأخرى في سهولة القراءة بشكل عام. : يجب تعيين هذه السمة على كل عنصر متأثر ، وليس في المستند أو القسم. : عادةً ما يؤدي تعيين أسفل الهامش إلى ارتفاع الخط إلى إنشاء أفضل النتائج. : الهامش السفلي: 1.4em ؛

        اللون: اللون الافتراضي للنص هو الأسود. قد ترغب في تغيير هذا إلى شيء أقل صرامة. : اللون: # 111111 ؛ : أيضًا ، تحتوي الروابط على مجموعة من الألوان الافتراضية للإشارة إلى ما إذا كانت قد تمت زيارتها أم لا ، ولون يشير إلى حالتها النشطة. : عادةً ما يكون لون الارتباط الافتراضي غير مرغوب فيه بشكل خاص. لتغيير اللون لحالات مختلفة من علامة الارتساء استخدم: a: link (افتراضي) و a: hover و a: زار و a: active. : a: hover {color: # 3399FF؛ }}

        الخط: وزن الخط هو الخاصية التي تتحكم في ما إذا كان النص غامق أو عادي. : وفقًا للمواصفات ، يمكنك استخدام قيمة رقمية لضبط الوزن بدقة كبيرة. ومع ذلك ، هذا ليس مدعومًا جيدًا من قبل معظم الخطوط أو المتصفحات ، وهي ليست ممارسة شائعة. : الاستخدام الأكثر شيوعًا لوزن الخط هو ببساطة تحديد الخط الغامق. : قوي {font-weight: bold؛ }}

        نمط الخط: يُستخدم نمط الخط للإشارة إلى نوع مائل. : القيم ذات الصلة طبيعية ومائلة. (نادرًا ما يتم استخدام الخيار الثالث المائل.: em {font-style: italic؛}

        زخرفة النص: يستخدم هذا لإضافة سطر إلى مدى النص: فوق (خط علوي - نادرًا ما يستخدم) ، من خلال (خط - مستخدم للنص المحذوف) ، أو تحت (خط سفلي - يستخدم للروابط وأحيانًا للعناوين) . : a {text-decoration: underline؛ }}

        تحويل النص: تسمح لك هذه الخاصية بالتحكم في تكبير نص. : القيم ذات الصلة هي: الكتابة بالأحرف الكبيرة (حالة العنوان) والأحرف الكبيرة (ALL CAPS) والأحرف الصغيرة (كلها أحرف صغيرة). : h3 {text-convert: uppercase؛ }}

        font-variant: يُستخدم هذا لتحديد الأحرف الصغيرة. يقوم بتعيين كافة الأحرف الصغيرة في المحتوى إلى أحرف كبيرة بحجم خط أصغر. : h1 {font-variant: small-caps؛ }}

        @ font-face: هذه ليست خاصية مخصصة لعنصر ، ولكنها تعمل كمحدد في مستند CSS. يتم استخدامه لتعريف عائلة خط جديدة. يسمح هذا للمصممين بتحديد أي خط يرغبون فيه ، بدلاً من الاعتماد فقط على خطوط النظام لأجهزة الكمبيوتر العميلة. : تحدد خاصية عائلة الخط اسم الخط الجديد (لاستخدامه في خاصية عائلة الخط للعناصر الأخرى) ، وتحدد خاصية src ملف الخط. : لا يتم دعم جميع تنسيقات ملفات الخطوط في جميع المتصفحات. أكثر التنسيقات المدعومة على نطاق واسع هي TTF و OTF و WOFF (ولكن ليس WOFF2). : إذا كانت أشكال الخط (غامق ، مائل) تتطلب ملفات خط منفصلة ، يمكن تعيين عدة تعريفات @ font-face ، لكل منها خاصية src مختلفة ، ومع خصائص إضافية تحدد سياقها (على سبيل المثال - وزن الخط: غامق) ؛): @ font-face {font-family: myNewFont؛ src: url (myNewFont.woff؛}

        نصائح الطباعة

        طباعة الويب صعبة. العرض الافتراضي للنص في معظم المتصفحات غير جذاب حقًا ، والحصول على نص يبدو جيدًا وقابلًا للقراءة هو مشكلة غير تافهة.

        إذا كنت تقوم بتصميم طباعة مواقع ، فضع النصائح التالية في الاعتبار.

        • استخدم صفحة نصية تتضمن جميع الأنماط المطبعية الممكنة. ينسى العديد من مصممي الطباعة على الويب قوائم الوصف () والاقتباسات () والعناوين التالية

          (

          ,

          ,
          ) ، وأنماط أخرى نادرا ما تستخدم. ومع ذلك ، على الرغم من أنها نادرا ما تستخدم ، فإنها تستخدم. تأكد من تضمين القوائم المتداخلة والصور مع التسميات التوضيحية أو بدونها ، ونماذج الشفرة أيضًا (إذا كنت تكتب عن التكنولوجيا).
        • لاحظ كيف تتفاعل هوامش العناصر مع بعضها ومع سياقها. على سبيل المثال ، من الشائع وضع هامش أعلى على العناوين الرئيسية. قد يكون هذا منطقيًا في بعض السياقات ، ولكن إذا كان العنصر الأول في a ، فقد لا يبدو هذا صحيحًا. وبالمثل ، قد ينتهي عنوان مقطعي بعد فقرة بتكرار مسافة سطر ، مما يخلق فاصل مرئي أكثر من المطلوب.
        • استخدم قيمة ارتفاع السطر كقاعدة مقياس للحفاظ على نص الصفحات بإيقاع ثابت. الخطوط الأكبر من ارتفاع الخط العام (العناوين ، على سبيل المثال) يجب تعيين ارتفاع الخط على مضاعف القيمة العالمية. استخدم أيضًا قيمة ارتفاع الخط لهوامش أسفل العناصر ولأقسام التثبيت (ذات المسافة البادئة).
        • من الشائع تحديد فقرات مع فاصل أسطر مزدوج (يتم إنجازه مع تعيين هامش سفلي على نفس قيمة ارتفاع السطر). من الشائع أيضًا عدم وضع مسافة بادئة للفقرات.
        • تميل القوائم إلى الظهور بشكل أفضل في (الهامش الأيسر) حول نفس مسافة ارتفاع الخط (أو متعددة منها).
        • قوائم الوصف لها نمط افتراضي سيء بالفعل. إنها تبدو بشكل عام بشكل أفضل مع القائمة الكاملة التي يتم وضعها ، والخط الغامق ، والابتعاد أكثر.
        • من الشائع جدًا تعيين حجم الخط الأساسي للصفحة إلى 12 بكسل ، ولكن هذا ليس قابلاً للقراءة للغاية. ضع في الاعتبار 14 بكسل أو حتى 16 بكسل كحجم خط أساسي عام (اعتمادًا على مجموعة الخطوط الخاصة بك).
        • من الشائع جدًا ترك لون الخط أسود (الافتراضي) ، ولكن عادةً ما يكون اللون الرمادي الداكن أكثر جاذبية وقراءة.
        • كانت الروابط () زرقاء بشكل افتراضي في كل متصفح تقريبًا منذ بداية الإنترنت. حتى إذا كنت ترغب في تغيير لون الروابط لتناسب علامتك التجارية (ويجب عليك) ، فمن المحتمل أن يكون لونًا أزرق. أيضًا ، كن حذرًا بشأن استخدام النص الأزرق في أماكن أخرى ، فقد يشير ذلك إلى أنه يجب أن يتمكن المستخدمون من النقر فوق النص.
        • وبالمثل ، فإن النص الذي تحته خط هو إشارة شبه عالمية أن شيئًا ما قابل للنقر. تغيير هذه الاتفاقية على مسؤوليتك الخاصة.
        • كان من النصائح الشائعة تجنب خطوط serif على الويب ، واستخدام خطوط sans serif فقط. كانت هذه نصيحة جيدة لأن خطوط serif لا يتم عرضها أيضًا في الشاشات منخفضة الدقة. ومع ذلك ، لم يعد هذا مصدر قلق لمعظم الناس. يمكن أن يجعل استخدام خط serif (مثل جورجيا أو Times أو Garamond) النص أكثر قابلية للقراءة.
        • بشكل عام ، لا تريد أكثر من ثلاثة خطوط على الصفحة:
          • خط المحتوى ، الذي يمكن أن يكون serif أو sans.
          • خط القائمة وخط التنقل ، والذي يجب أن يكون عادةً بدون sif serif ، وقد يكون هو نفسه خط المحتوى الخاص بك.
          • خط لعينات التعليمات البرمجية (إذا قمت بهذا النوع من الأشياء) ، والذي يجب أن يكون خطًا أحادي المسافة مثل Courier أو Console.
        • "مقياس" النص هو عدد الأحرف لكل سطر. يصبح قياس أكثر من 80 حرفًا غير قابل للقراءة. سيضع معظم الخبراء المقياس المثالي على حوالي 65 حرفًا في كل سطر. هذه وظيفة عرض منطقة المحتوى وحجم الخط الخاص بك.
        • إذا كنت تستخدم @ font-face لاستيراد الخط الخاص بك إلى صفحة ، فتأكد من اختبار كيفية ظهور هذا على متصفحات متعددة. بعض المستعرضات تجعل بعض الخطوط سيئة. تأكد أيضًا من تضمين الخطوط الاحتياطية في إعلانات عائلة الخط - لا يمكنك دائمًا الاعتماد على @ font-face للعمل في كل موقف.

        الرسوم المتحركة CSS

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

        الإطارات الرئيسية

        يتم تعريف الرسوم المتحركة باستخدام محدد CSS يسمىkeyframes. يحتوي تعريفkeyframes على اسم ومجموعة من قواعد النمط لنقاط مختلفة (إطارات رئيسية) في الرسم المتحرك.

        keyframes colorChange {
        من عند {
        لون الخلفية: أحمر ؛
        }}
        إلى {
        لون الخلفية: أزرق ؛
        }}
        }}

        في المثال أعلاه ، تتسبب الرسوم المتحركة "colorChange" في تغيير عنصر الخلفية من اللون الأحمر إلى الأزرق.

        يمكن تحريك أكثر من لون. سيؤدي استخدام قواعد keyframes لتعيين المواضع إلى انتقال العنصر المتأثر من مكان إلى آخر.

        keyframes moveLeft {
        من عند {
        الموقف: قريب ؛
        اليسار: 100px ؛
        إلى {
        الموقف: قريب ؛
        اليسار: 0px ؛
        }}
        }}

        يمكن أيضًا تحديد رسم متحرك متعدد النقاط باستخدام النسب المئوية.

        keyframes moveAround {
        0٪ {
        أعلى: 0 بكسل ؛
        اليسار: 0px ؛
        }}
        25٪ {
        أعلى: 0 بكسل ؛
        اليسار: 50 بكسل ؛
        }}
        50٪ {
        أعلى: 50 بكسل ؛
        اليسار: 50 بكسل ؛
        }}
        75٪ {
        أعلى: 50 بكسل ؛
        اليسار: 0px ؛
        }}
        100٪ {
        أعلى: 0 بكسل ؛
        اليسار: 0px ؛
        }}
        }}

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

        تعيين الرسوم المتحركة للعناصر

        يتم تعريف الرسوم المتحركة بشكل منفصل عن العناصر التي ستؤثر عليها. يتم تعريف الرسوم المتحركة في إعلاناتkeyframes كما هو موضح أعلاه ، ثم يتم تطبيقها على العناصر.

        يتم تطبيق الرسوم المتحركة على العناصر باستخدام اسم keyframe وفترة زمنية يجب أن تستمر فيها الرسوم المتحركة. يمكن أن تؤثر السمات الأخرى على الرسوم المتحركة أيضًا.

        keyframes colorChange {
        من عند {
        لون الخلفية: أحمر ؛
        }}
        إلى {
        لون الخلفية: أزرق ؛
        }}
        }}

        .تغيير اللون {
        العرض: 100 بكسل ؛
        الارتفاع: 100 بكسل ؛
        اسم الرسوم المتحركة: colorChange ؛
        مدة الرسوم المتحركة: 5 ث؛
        }}

        keyframes colorChange {
        من عند {
        لون الخلفية: أحمر ؛
        }}
        إلى {
        لون الخلفية: أزرق ؛
        }}
        }}

        @ -webkit-keyframes colorChange {
        من عند {
        لون الخلفية: أحمر ؛
        }}
        إلى {
        لون الخلفية: أزرق ؛
        }}
        }}

        # color-change-demo .color-change {
        العرض: 100 بكسل ؛
        الارتفاع: 100 بكسل ؛
        اسم الرسوم المتحركة: colorChange ؛
        مدة الرسوم المتحركة: 5 ث؛
        -webkit-animation-name: colorChange؛
        -webkit-animation-Duration: 5s؛
        }}

        إذا لم تقم بتعيين مدة الرسوم المتحركة ، فلن يتم تشغيل الرسوم المتحركة ، لأن القيمة الافتراضية هي 0.

        يمكن أيضًا تعيين العديد من خصائص الرسوم المتحركة الأخرى:

        • animation-delay - لتحديد التأخير لبدء الرسوم المتحركة. القيمة الافتراضية هي 0 ، مما يعني أن الرسوم المتحركة سيتم تشغيلها على الفور. يُلاحظ عادةً في ثوانٍ (ثوانٍ) ، ولكن يمكن أيضًا ملاحظته بالمللي ثانية (مللي ثانية).
        • animation-direction - تحدد ما إذا كان يجب تشغيل الرسوم المتحركة كالمعتاد (الافتراضي) ، في الاتجاه المعاكس ، أو التبديل بين الأمام في الاتجاه المعاكس. تعمل القيمة البديلة فقط إذا كان عدد الرسوم المتحركة والتكرار أعلى من 1.
        • animation-fill-mode - لتحديد ما إذا كان يجب أن تؤثر الأنماط من الرسوم المتحركة على العنصر عند عدم تشغيل الرسوم المتحركة (عند الانتهاء ، أو عند وجود تأخير) وكيفية ذلك..
          • عادي - الافتراضي. لا تؤثر أنماط الرسوم المتحركة على العنصر عندما لا يكون العنصر قيد التشغيل.
          • إلى الأمام - يتم تطبيق نمط الإطار الرئيسي الأخير (إلى أو 100٪ إذا لم يتم تشغيل الصورة المتحركة في الاتجاه المعاكس) على العنصر.
          • للخلف - يتم تطبيق نمط الإطار الرئيسي الأول (من أو 0٪ إذا لم يتم تشغيل الصورة المتحركة في الاتجاه المعاكس) على العنصر.
        • animation-iteration-count - يحدد عدد مرات تشغيل الرسوم المتحركة.
        • animation-timing-function - تحدد منحنى سرعة الرسوم المتحركة:
          • سهولة - تبدأ الرسوم المتحركة ببطء ، وتسرع ، ثم تنتهي ببطء.
          • سهولة - تبدأ الرسوم المتحركة ببطء ، وتتسارع وتنتهي بأقصى سرعة.
          • سهولة - تبدأ الرسوم المتحركة بأقصى سرعة ، ولكنها تتباطأ عند نهايتها.
          • خطي - تعمل الرسوم المتحركة بأقصى سرعة من البداية إلى النهاية.
        دعم المتصفح للرسوم المتحركة

        معظم المتصفحات الرئيسية تدعم الرسوم المتحركة CSS ، ولكن هناك غريبًا غريبًا مع المتصفحات التي تستخدم نظام عرض WebKit (Safari و Chrome و Opera).

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

        / * هذا لمتصفحات غير webkit. * /
        keyframes moveLeft {
        من عند {
        الموقف: قريب ؛
        اليسار: 100px ؛
        إلى {
        الموقف: قريب ؛
        اليسار: 0px ؛
        }}
        }}

        / * هذا لمتصفحات الويب: Chrome و Safari و Opera. * /
        @ -webkit-keyframes moveLeft {
        من عند {
        الموقف: قريب ؛
        اليسار: 100px ؛
        إلى {
        الموقف: قريب ؛
        اليسار: 0px ؛
        }}
        }}

        #animationSupportDemo {
        animation-name: moveLeft ؛
        مدة الرسوم المتحركة: 4s؛
        -webkit-animation-name: moveLeft ؛ / * Chrome و Safari و Opera. * /
        -webkit-animation-Duration: 4s؛ / * Chrome و Safari و Opera. * /
        }}

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

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

        متى تستخدم الرسوم المتحركة CSS

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

        أفضل استخدام للرسوم المتحركة CSS لتوفير تحسينات تصميم خفية للصفحة. بعض الأمثلة: ملء أشرطة الرسم البياني - سحب علامة تبويب لأسفل عند التمرير - تحريك العناصر أثناء قيام المستخدم بالتمرير لأسفل صفحة - تغييرات بطيئة ودقيقة في لون الخلفية - أزرار "الارتداد" لتشجيع النقر

        الجمع بين الرسوم المتحركة CSS وجافا سكريبت

        تبدأ الرسوم المتحركة لـ CSS على الفور ، أو بعد مهلة محددة. ومع ذلك ، إذا كنت تريد تشغيل رسم متحرك CSS عند وقوع حدث ما ، فيمكنك تعيين الرسم المتحرك على "متوقف مؤقتًا" في CSS ، ثم إلغاء إيقافه مؤقتًا باستخدام Javascript في وقت لاحق. يتم إيقاف الرسوم المتحركة مؤقتًا باستخدام حالة الرسوم المتحركة - سمة - الحركة.

        .تم إيقاف الرسوم المتحركة {
        اسم الرسوم المتحركة: مثال
        مدة الرسوم المتحركة: 5 ث؛
        الرسوم المتحركة - حالة اللعب: متوقف مؤقتًا ؛
        -webkit-animation-name: example؛
        -webkit-animation-Duration: 5s؛
        -webkit-animation-play-state: متوقف مؤقتًا ؛
        }}

        قيمة حالة تشغيل الرسوم المتحركة عند عدم الإيقاف المؤقت قيد التشغيل. يمكن معالجة ذلك في جافا سكريبت:

        [element] .style.animationPlayState = "ادارة"

        CSS في العالم الحقيقي

        في العالم الحقيقي لتطوير الويب وتصميمه ، يجلس عدد قليل جدًا من المطورين مع مستند HTML وملف CSS فارغ ويبدأون في تحديد الأنماط من البداية. (على الرغم من أن القيام بذلك يمكن أن يكون أمرًا ممتعًا بالتأكيد.)

        هناك عدد من "أفضل الممارسات" النموذجية التي يتبعها مصممو CSS عادةً لجعل عملهم أسهل وأكثر تناسقًا.

        إعادة تعيين CSS

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

        "إعادة تعيين CSS" هي مجموعة من الأنماط التي يمكن وضعها في ورقة أنماط CSS قبل الإعلان عن أي أنماط أخرى. يوفر استياء CSS قاعدة مشتركة لإضافة أنماط عبر جميع المتصفحات.

        تُستخدم عمليات إعادة تعيين CSS أيضًا لتعيين أنماط العرض الافتراضية لعناصر HTML5 التي قد لا تحتوي على شاشات افتراضية في المتصفحات القديمة - عناصر مثل و .

        هناك العديد من قوالب إعادة تعيين CSS الشائعة. الأكثر شهرة هو الذي أنشأه إريك ماير.

        / * http://meyerweb.com/eric/tools/css/reset/
        الإصدار 2.0 | 20110126
        الترخيص: لا يوجد (المجال العام)
        * /

        أتش تي أم أل ، الجسم ، div ، تمتد ، بريمج ، كائن ، iframe,
        h1، h2، h3، h4، h5، h6، p، blockquote، pre,
        أ، أبر، اختصار، عنوان، كبير، استشهد، رمز,
        del ، dfn ، em ، img ، ins ، kbd ، q ، s ، samp,
        صغير ، إضراب ، قوي ، فرعي ، sup ، tt ، var,
        ب ، ش ، ط ، المركز,
        دل ، دت ، دد ، رأ ، أول ، لي,
        مجموعة الحقول ، والشكل ، والتسمية ، والأسطورة,
        جدول ، عنوان ، tbody ، tfoot ، thead ، tr ، th ، td,
        المادة جانبا ، قماش ، التفاصيل ، تضمين,
        الشكل ، الرسم البياني ، التذييل ، الرأس ، المجموعة,
        القائمة ، التنقل ، الإخراج ، روبي ، القسم ، الملخص,
        الوقت ، علامة ، صوت ، فيديو {
        الهامش: 0 ؛
        حشوة: 0 ؛
        الحد: 0 ؛
        حجم الخط: 100٪ ؛
        الخط: يرث ؛
        محاذاة رأسية: خط الأساس ؛
        }}
        / * إعادة تعيين دور عرض HTML5 للمتصفحات الأقدم * /
        المادة جانبا ، التفاصيل ، الشكل ، الشكل,
        تذييل ، رأس ، مجموعة ، قائمة ، تنقل ، قسم {
        العرض محجوب؛
        }}
        الجسم {
        ارتفاع الخط: 1 ؛
        }}
        ol ، ul {
        نمط القائمة: لا شيء ؛
        }}
        اقتباس ، q {
        يقتبس: لا شيء ؛
        }}
        علامة اقتباس: قبل ، علامة اقتباس: بعد,
        س: قبل ، س: بعد {
        المحتوى: ''؛
        المحتوى: لا يوجد.
        }}
        الطاولة {
        انهيار الحدود: الانهيار ؛
        تباعد الحدود: 0 ؛
        }}

        معالجات CSS الأولية

        تخيل أنك تحدد مجموعة من الألوان لتصميم موقع الويب الخاص بك وترغب في استخدامها في أماكن مختلفة طوال CSS.

        إذا قمت بتطبيق نفس اللون على العناوين الثانوية التي تقوم بها على إشعار حقوق النشر (وما إلى ذلك) ، فسينتهي بك الأمر بتكرار إعلان اللون في عدة أماكن مختلفة.

        ماذا يحدث عندما تريد تغييره?

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

        CSS هي لغة تعريفية - تتطلب تحديد كل خاصية وقيمة فردية ، ولا توجد متغيرات أو وظائف أو حسابات لتسهيل الأمور.

        بنفس الطريقة التي تجعل PHP (ولغات أخرى) من السهل إخراج HTML دون الحاجة إلى تكرار المحتوى في كل صفحة ، تسمح لك معالجات CSS المسبقة بتضمين المتغيرات والوظيفة وبنى البرمجة الأخرى في أوراق الأنماط.

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

        أشهر معالجين CSS هما: أقل - يستخدمه Twitter Bootstrap - Sass - يستخدمه Ruby on Rails و Jekyll والعديد من أدوات التطوير الأخرى المستندة إلى Ruby.

        بشكل عام ، يكتب المطورون أوراق الأنماط الخاصة بهم في Less أو Sass ثم يجمعونها في CSS قبل إطلاق الموقع. هناك أيضًا مترجمون من جانب العميل (في المتصفح) مكتوب بلغة جافا سكريبت ، ولكن هذه تستخدم الكثير من الموارد وعادة ما تكون سيئة في التطوير.

        من غير المعتاد في هذه المرحلة أن لا يستخدم مطور الويب المحترف أقل أو ساس.

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

        الرسم المتجاوب

        كان هناك وقت عندما كنت متأكدًا تمامًا أنك تعرف نوع الشاشة التي سيشاهدها زوار موقعك على الويب: شاشة سطح مكتب بأحد الأحجام الافتراضية.

        تلك الأيام ولت منذ فترة طويلة.

        قد يشاهد المستخدمون موقعك على أي من عدد من الأجهزة وأحجام الشاشة: الهاتف المحمول ، والأجهزة اللوحية المصغرة ، والأجهزة اللوحية ، وأجهزة الكمبيوتر المحمولة ، وأجهزة الكمبيوتر المكتبية ، وأجهزة التلفزيون.

        يكاد يكون من المستحيل استهداف كل هذه الأحجام المختلفة للشاشة بشكل فردي ، ولا يمكنك تجاهلها ببساطة.

        قد تعتقد أنه من المرجح أن يتم عرض الخصائص الديمغرافية لمواقعك على سطح المكتب ، ولكن من غير المحتمل أن يكون ذلك صحيحًا في أي موقف. تأتي أكثر من 60٪ من زيارات الإنترنت من الأجهزة المحمولة. إن امتلاك موقع ويب به تجربة جوال سيئة سيكون أمرًا سيئًا لعملك.

        ما هو أكثر من ذلك ، بدأت Google في تغيير نتائج البحث بناءً على ما إذا كانت المواقع محسنة لأجهزة الجوال أم لا. بشكل متزايد ، إذا كنت لا تبدو جيدًا في الجوّال ، فلن يراك أحد على أي حال.

        الحل لهذه المشكلة هو التصميم المستجيب.

        التصميم المتجاوب هو نهج لتصميم الموقع - فلسفة - وليس أداة أو برنامج. إنها طريقة لتنظيم ترميز الصفحة و CSS بحيث تتم إعادة تكوين عناصر الصفحات بشكل مناسب في نوافذ ذات أحجام مختلفة.

        الركائز الثلاث لتصميم الويب سريع الاستجابة هي:

        الشبكات المرنة: تتضمن الشبكات المرنة تقسيم شبكات الصفحات على أساس النسب المئوية ، بدلاً من وحدات البكسل المطلقة. على سبيل المثال ، قد يكون لديك عمود محتوى رئيسي يمتد على 70٪ من الشاشة وعمود الشريط الجانبي يمتد على 30٪. مع زيادة حجم الشاشة أو نقصانها ، تتوسع الشبكة أيضًا أو تتقلص.

        صور مرنة: يجب ألا تكون الصور أعرض من الشاشة التي يتم عرضها عليها ، مما يعني أنه يجب ألا تكون أبدًا أعرض من عنصر الشبكة الذي يحتوي عليها. أسهل حل لذلك هو ضبط الحد الأقصى للعرض على الصور بنسبة 100٪. img {الحد الأقصى للعرض: 100٪ ؛ }}

        استعلامات الوسائط: استعلامات الوسائط أكثر تعقيدًا بعض الشيء. إنها تسمح لـ CSS باستهداف أنواع وأحجام شاشة معينة ، معلنةً القواعد التي تنطبق فقط في ظروف معينة. باستخدام استعلامات الوسائط ، يمكنك جعل المحتوى الرئيسي الخاص بك والشريط الجانبي يظهران جنبًا إلى جنب على الشاشات الكبيرة ، وجعلها تتكدس فوق بعضها البعض عموديًا على الشاشات الأصغر. يمكن أيضًا استخدام استعلامات الوسائط لإخفاء أو عرض عناصر معينة قد تكون مفيدة إلى حد ما في سياقات مختلفة ، وكذلك تغيير أشياء مثل أحجام الخطوط أو حتى تبديل الصور المختلفة.

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

        لهذا السبب ، ولأسباب أخرى ، لا يحاول العديد من المصممين الذين يعملون اليوم حل هذه المشاكل بأنفسهم ولكنهم يختارون استخدام إطار أمامي.

        أطر الواجهة الأمامية

        هناك الكثير من الأشياء التي يجب التفكير فيها عند ترميز CSS لتصميم موقع ، ولم تتطرق هذه المقدمة القصيرة إلا إلى جزء صغير منها.

        • الحصول على بنية شبكة مستجيبة للعمل في كل متصفح وجهاز.
        • تصميم استعلامات الوسائط المناسبة وتحديد نقاط التوقف المثلى لعرض الشاشة.
        • طباعة جميلة وسهلة القراءة.
        • جعل الأشكال تبدو لائقة إلى حد ما ، ناهيك عن كونها جميلة وسهلة الاستخدام.
        • طاولات تصفيف لتبدو وكأنها لم تبدأ منذ 1997.
        • تدهور رشيق للمتصفحات القديمة.
        • تذكر استخدام قواعد التصميم المكررة لميزات معينة - على الويب (والتأكد من كتابة نفس القاعدة بنفس الطريقة في كل مرة).
        • الحصول على CSS وجافا سكريبت للتفاعل بالطريقة الصحيحة.

        العديد من هذه المشكلات عبارة عن مهام ترميز "مرجعية" بسيطة تستغرق وقتًا بعيدًا عن ترميز التصميمات والميزات الجديدة ، والعديد منها معقد للغاية بحيث لا يمكن المخاطرة بـ "الترميز اليدوي" في كل مشروع. لا أحد يريد أن يقضي 50٪ أو أكثر من وقت التطوير في تصحيح الشفرة التأسيسية - يرغب المطورون في التطوير.

        لهذه الأسباب ، واتباعًا للاتجاه المماثل في تطوير كود التطبيق ، يتجه المزيد والمزيد من المطورين إلى أطر العمل الأمامية.

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

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

        فيما يلي بعض إطارات عمل الواجهة الأمامية الأكثر شيوعًا المستخدمة حاليًا:

        • Bootstrap - من فريق التطوير في Twitter ، تم تصميم Bootstrap لتسريع النموذج الأولي وتطوير تطبيقات الويب. يوفر شكلًا ممتازًا وواجهة تفاعلية وتصميمًا جريئًا ومميزًا. يشكو العديد من الأشخاص من أنه يخلق ترميزًا منتفخًا (يفعل) ، لأنه يتم تشجيع المستخدمين عديمي الخبرة على إضافة فئات أنماط إلى HTML. ومع ذلك ، فإنه يوفر أداة رائعة للنماذج الأولية السريعة لأي تطبيق ويب يستند إلى النموذج.
        • Pure.css - مجموعة أدوات معيارية من أجزاء إطار CSS التي يمكن استخدامها بشكل فردي أو ككل.
        • Foundation - يعتبر الكثيرون أن المؤسسة هي "أحدث إطار أمامي متجاوب وأكثر تقدمًا في العالم" ، على أنها مثل Bootstrap للأشخاص الذين يهتمون بالترميز الجيد.
        • الهيكل العظمي - الهيكل العظمي عبارة عن إطار CSS "بسيط للغاية" يوفر شبكة متجاوبة ، وطباعة نظيفة ، وتصميمًا بسيطًا بشكل عام. الغرض منه أن يكون "نقطة بداية ، وليس إطار عمل".

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

        إن CSS Frameworks - مثل أطر تطوير البرامج - هي الطريق إلى الأمام لتصميم الويب المعقد وتطويره. ليس هناك أي معنى في إعادة اختراع العجلة ، أو إعادة تسجيل نفس الحل ، مع كل مشروع جديد.

        لا يزال - لتحقيق أقصى استفادة من إطار عمل CSS ، عليك أن تفهم كيف تعمل CSS وكيف تتفاعل مع HTML.

        CSS هو جزء أساسي من HTML

        CSS - أوراق الأنماط المتتالية - هي لغة التصميم والعرض المرئي على الويب. إن مستند HTML هو مجرد مجموعة من عقد المحتوى ، لكن CSS تخبر المستعرض بكيفية تقديم هذا المحتوى إلى المستخدم.

        كما هو الحال مع HTML ، هناك جوانب هيكلية لـ CSS والجوانب على مستوى النص. يمكن أيضًا استخدام CSS لإنشاء رسوم متحركة ديناميكية وتخطيطات متجاوبة.

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

        إن صعوبة وتعب التأكد من أن تصميم الموقع يمكن أن يعمل في العديد من الإعدادات المختلفة ، وأن يتم التعامل مع العدد الكبير من المصالح المتنافسة ، قد دفع معظم المطورين إلى اعتماد أطر CSS.

        مثل إطار تطوير التطبيقات ، توفر أطر CSS (أو "الواجهة الأمامية") نقطة انطلاق لتطوير تصميم موقع جديد. وهي توفر الهيكل والتوجيه والرأي حول كيفية تخطيط الصفحة.

        يمكن لأطر CSS أن تجعل من الممكن لأي شخص تقريبًا إنشاء مواقع ويب مستجيبة وفعالة ، ولكن فقط شخص لديه عمق فهمه الخاص لـ CSS و HTML سيكون قادرًا على تحقيق أقصى استفادة من واحد.

        جافا سكريبت و HTML

        يقدم هذا القسم لغة جافا سكريبت Javascript ، لغة البرمجة النصية المدمجة في معظم متصفحات الويب الحديثة. ينصب التركيز على كيفية عمل جافا سكريبت مع HTML والمتصفح ، إلى جانب بعض النصائح العملية للبدء في استخدام JavaScript كمطور. تشمل الموضوعات التي يتم تناولها نموذج كائن المستند ومكتبات JavaScript وإطارات عمل تطبيقات JavaScript. هذا القسم ليس تعليمي جافا سكريبت.

        ما هو JavaScript

        JavaScript هي لغة برمجة مضمنة في (تقريبًا) كل متصفح ويب. يتم استخدامه لإضافة التفاعل الديناميكي والبرمجة النصية لصفحات الويب. (يمكن أيضًا استخدامه من جانب الخادم ، جنبًا إلى جنب مع أدوات مثل Node.js ، ولكن هذا ليس هو التركيز هنا.)

        JavaScript هي لغة برمجة كاملة الميزات ، لذلك كل شيء ممكن. ومع ذلك ، فهو موجه خصيصًا لاحتياجات التفاعل مع مستندات HTML ومعالجتها.

        ECMAScript

        إذا كنت تعمل مع جافا سكريبت على الإطلاق ، فستظهر عبر الاسم الغريب جدًا "ECMAScript". هذا هو الاسم "الرسمي" لـ JavaScriipt.

        يتم الحفاظ على المواصفات القياسية للغة من قبل منظمة تسمى Ecma ، والتي كانت في السابق جمعية مصنعي الكمبيوتر الأوروبية. ومنذ ذلك الحين قاموا بتغيير اسمهم إلى مجرد "Ecma" ، والذي لم يعد اختصارًا لأي شيء.

        يقوم كل متصفح ويب بتطبيق معيار ECMAScript بشكل مختلف قليلاً (وتذهب Microsoft إلى حد استدعاء تطبيق JScript بدلاً من Javascript). لذا سيستخدم بعض الأشخاص "ECMAscript" للإشارة تحديدًا إلى الشكل القياسي للغة ، وليس إلى أي لهجات أو مشتقات مضمنة في متصفحات الويب.

        جافا سكريبت وجافا

        فقط لذلك ليس هناك أي لبس - ليس لجافا سكريبت علاقة حقيقية بجافا. كانت Java هي اللغة الجديدة والعصرية عندما تم تطوير JavaScript لأول مرة ، وكانت الفكرة الأصلية هي أن JavaScript سيكون مبنيًا على Java - ومن هنا الاسم. ومع ذلك ، لم يتم اعتماد جافا سكريبت على جافا على الإطلاق ، وهناك بالفعل القليل جدًا من أوجه التشابه بين اللغتين بصرف النظر عن الاسم.

        طراز كائن المستند

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

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

        DOM هو API (واجهة برمجة التطبيقات) التي يتفاعل بها كود Javascript مع مستند HTML. عندما يتم تقديم مستند بواسطة مستعرض ، لا يعرض المستعرض لك شفرة المصدر مع بعض قواعد الأنماط الإضافية المرفقة. لقد قرأ المتصفح شفرة المصدر وأنشأ طريقة عرض تستند إليها. تم تحويل كل عنصر في المستند إلى كائن (بمعنى البرمجة) مع سمات وطرق يمكن الوصول إليها بواسطة جافا سكريبت.

        تتضمن سمات كائن DOM السمات المعلنة (والقابلة للإعلان) لعنصر HTML (مثل الفئة والمعرف والاسم) ونمط CSS للعنصر ومحتوى العنصر نفسه. تتضمن الأساليب المرتبطة بكل كائن DOM وظائف لتغيير أي من هذه السمات.

        صفحة الويب المقدمة في المستعرض هي عرض مباشر لنموذج كائن المستند. هذا يعني أنه إذا تغير DOM على أي حال (على سبيل المثال - يتم تغيير سمات أي عنصر) فإن العرض سيتغير أيضًا. يسمح ذلك لـ JavaScript بتحديث محتوى صفحة الويب أو تغييره دون الحاجة إلى تحديث الصفحة أو إعادة تحميلها.

        تحتوي JavaScript أيضًا على واجهات برمجة تطبيقات لمعظم وظائف المتصفح ، لذا يمكنها (على سبيل المثال) قراءة الحالة الحالية للمستند ، وتشغيل التحديثات ، والحصول على عرض نافذة المتصفح ، وتغيير حجم نافذة المتصفح.

        باستخدام جافا سكريبت

        هذا ليس تعليمي جافا سكريبت. يحاول هذا القسم فقط توفير بعض السياق المفيد لمطوري HTML الذين يتعاملون مع JavaScript.

        بما في ذلك JavaScript في الصفحة

        مثل CSS ، يمكن تضمين جافا سكريبت في صفحة الويب بطريقتين - النصوص المدمجة والموارد المرتبطة.

        لتضمين برنامج نصي ، ما عليك سوى تضمين رمز JavaScript بين العلامات.

        دالة changeColor (toChange، newColor) {
        document.getElementbyId (toChange) .style.backgroundColor = newColor؛
        }}
        </النصي>

        لتضمين ملف JavaScript منفصل في مستند HTML ، اربطه بالعنصر.

        اكتب ="نص / جافا سكريبت" src ="app.js">

        يتم وضع عنوان URL (النسبي أو المحدد بالكامل) لملف JavaScript في سمة src. لا يلزم وجود سمة النوع بشكل صارم في HTML5 ، ولكن من الجيد تضمين كل من التوافق الأمامي والخلفي (المحتمل). بالإضافة إلى ذلك ، إذا كانت هناك عناصر متعددة على الصفحة ، فليس من السيء منحها كل سمات معرف فريدة.

        من الأفضل عمومًا تضمين جافا سكريبت كملف منفصل ، بدلاً من تضمينه في الصفحة. وهذا يجعل الوظيفة (JS) منفصلة عن المحتوى (HTML). ومع ذلك ، هناك استثناءات عملية لهذه السياسة العامة. على سبيل المثال ، من الممارسات المعتادة تضمين شفرة التتبع (مثل مقتطف JS المقدم من Google Analytics) مباشرة على الصفحة.

        مكان وضع جافا سكريبت

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

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

        ومع ذلك ، نظرًا لأنه تم تعليق تحميل الصفحة بينما يتم جلب ملفات JavaScript وتحليلها ، فإن وضع العلامات في الموقع كان أمرًا مستهجنًا بشكل تقليدي. النصيحة النموذجية هي وضعهم كعنصر آخر داخل ، بعد .

        لا تزال هذه نصيحة جيدة. ومع ذلك ، هناك الآن تحول إلى نصيحة odl: هناك الآن طريقة لوضع العناصر في المستند دون التسبب في إبطاء عرض الصفحة. اعتبارًا من HTML5 ، تتضمن العلامة سمة تسمى غير متزامنة. إذا أضفت السمة غير المتزامنة إلى علامة البرنامج النصي ، فلن تتوقف الصفحة عن العرض ، وسيتم تحليل ملف JS وتنفيذه بشكل غير متزامن (أي في سلسلة محادثات منفصلة).

        اكتب ="نص / جافا سكريبت" src ="app.js" غير متزامن>

        سيؤدي ذلك إلى تسريع عملية تحميل وعرض الصفحة ككل. ومع ذلك ، قد لا يزال التحميل والتحليل غير المتزامنين يسببان بعض المشاكل. إذا كان اتصال البيانات بطيئًا أو إذا كان كمبيوتر العملاء منخفض الطاقة بشكل خاص ، فقد يستمر في إبطاء عرض الصفحة.

        إذا كنت مهتمًا بشكل خاص بالضغط على أي عدم كفاءة في الاتصالات البطيئة والأجهزة منخفضة الطاقة ، فقد يكون من المنطقي وضع علاماتك في أسفل المستند.

        JSON

        مجموعة فرعية من JavaScript ، والتي تم التطرق إليها في أقسام HTML الدلالية ، هي JSON - JavaScript Object Notation.

        JavaScript هي لغة موجهة للكائنات ، مما يعني (من بين أشياء أخرى) أنه يمكن ترميز الكائنات الفردية (بالمعنى الحقيقي للكلمة) في كائنات البيانات (بالمعنى البرمجي للكلمة). على سبيل المثال ، يمكن ترميز مشاركة مدونة (كائن "العالم الحقيقي") ككائن JavaScript:

        {
        "عنوان" : "لوريم إيبسوم وكل ذلك الجاز",
        "مؤلف" : "آدم وود",
        "المحتوى" :
        'Lorem ipsum dolor sit amet، consectetur adipiscing elitiscing. سيد موريس metus ، euismod non sodales eu ، molestie congue nibh. Nunc euكرمiss est. Donec non est a sapien rutrum imperdiet. السُرْحَةُ السُّرِّيَّةُ المِثْقَبِيَّةُ السُّلِّيَّة Aliquam يتردد orci eget libero blandit semper. Aenean malesuada risus nec volutpat dapibus. يجلس ألكام في غير محله. تعليق في faucibus erat. Proin quis facilisis nisl. Vivamus sit amet enim elit. Aliquam nisl sapien، sagittis vitae nisi nec، vulputate efficiencyur urna. ',
        }}

        كما رأينا مع الترميز الدلالي ، يمكن استخدام JSON لتشفير البيانات حول محتوى الصفحة ، للاستهلاك كواجهة برمجة ترميز الدلالية. هذا مفيد لفهرسة Googles.

        يوجد أيضًا استخدام مهم آخر لـ JSON - AJAX.

        أجاكس

        AJAX هو نمط تصميم (وليس تقنية محددة) يتم من خلاله تقديم طلبات HTTP غير المتزامنة بواسطة JavaScript ، مما يسمح بملء البيانات الجديدة على صفحة الويب دون الحاجة إلى إعادة تحميل الصفحة.

        كانت AJAX في الأصل تعني "JavaScript و XML غير متزامنين" ، لأن لغة نقل البيانات الأكثر شيوعًا لهذا النوع من التصميم كانت في الأصل XML. ومع ذلك ، أصبحت JSON هي اللغة الأكثر شيوعًا لأنها أخف وزناً ومرنة وأصلية في JavaScript وأسهل في القراءة. (لسوء الحظ ، "AJAJ" ليس جذابًا جدًا ، لذا فقد توقف الاسم القديم.)

        نمط AJAX ليس له أي معنى في معظم الصفحات ، ولكن في تطبيقات الويب (مثل البريد الإلكتروني ، على سبيل المثال) ، يمكن أن يحدث فرقًا كبيرًا في العالم.

        يُطلق على AJAX اسم "JavaScript غير متزامن" لأن كود JS يقوم بإجراء مكالمات إلى الخادم في أوقات أخرى غير تحميل الصفحة (وهو عندما يقوم المستعرض عادةً بإجراء مكالمات إلى الخادم). بناءً على إجراءات المستخدم أو الوقت المنقضي ، سيرسل تطبيق ويب بنمط AJAX طلبًا إلى الخادم دون إعادة تحميل الصفحة. ثم يتم استخدام البيانات من تلك الاستجابة لتحديث DOM (وبالتالي ، العرض للمستخدم) دون إعادة التحميل.

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

        JSON هو تنسيق بيانات مثالي لهذا النوع من حالات الاستخدام لأنه أصلي في JavaScript. على عكس XML ، الذي يجب تحليله في جافا سكريبت من أجل متصفح "لفهمه" ، JSON هو بالفعل في اللغة الهدف.

        بالإضافة إلى ذلك ، نظرًا لأن JSON يمكن أن يكون المحتوى الوحيد لملف JavaScript (والذي يمكن أن يكون له أي مجال له URL URL الخاص به) ، يمكن استخدام JSON لتجنب صعوبات قفل المصدر المشترك. عادةً ، تمنع متصفحات الويب مواقع الويب من تقديم الطلبات إلى البيانات وتلقيها من نطاقات أخرى بخلاف نطاق المستند الأساسي. ومع ذلك ، يتم التعامل مع JavaScript (مثل CSS والصور) كمورد منفصل يمكن أن يأتي من أي مكان. من خلال تنفيذ JSON لنمط AJAX ، يمكن "إخفاء" الطلب عبر المصدر باعتباره تضمينًا للمورد.

        جافا سكريبت في العالم الحقيقي

        مسج

        يمكن أن تكون بنية JavaScript مطولة قليلاً (ومنتجة) في بعض الأحيان ، ويتطلب عدد من العمليات الشائعة جدًا وفرة من رمز "boilerplate".

        لهذا السبب ، يستخدم جميع مطوري JS تقريبًا مكتبة JavaScript تسمى JQuery. يوفر JQuery واجهات برمجة تطبيقات موجزة لعدد من حالات الاستخدام الشائعة ، مثل اجتياز المستندات ، ومعالجة DOM ، و AJAX.

        تحتوي معظم لغات البرمجة على "مكتبة قياسية" ، وهي مجموعة أساسية من ملحقات اللغة التي تعمل على أتمتة أو تجريد الأشياء الأكثر شيوعًا التي يحتاج المبرمجون إلى إجرائها في اللغة. ليس لدى JavaScript مكتبة قياسية رسمية. على الرغم من وجود مشاريع منافسة أخرى ، مع قواعد مطورين مخصصة (مثل Closure و Prototype) ، فإن JQuery - بالنسبة لكثير من الناس - مكتبة JavaScript القياسية.

        فيما يلي مثال قصير جدًا على كيفية تسريع JQuery للتطوير. افترض أنك تريد تغيير سمة عنصر.

        // ال "نقي" طريقة جافا سكريبت.

        document.getElementById ("إلى التغيير") .setAttribute ("عنوان","نص عنوان جديد") ؛

        // طريقة JQuery.

        $. ("#toChange") .attr ("عنوان","نص عنوان جديد") ؛

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

        مكتبات جافا سكريبت الأمامية

        يستخدم الكثير من مصممي الويب المحترمين ، الذين لديهم فهم جيد لـ HTML و CSS ، تحسينات JavaScript GUI دون أن يصبحوا مبرمجين JavaScript.

        هذا ممكن لأن هناك عددًا من مكتبات واجهة مستخدم جافا سكريبت (مثل JQuery UI) وأطر عمل الواجهة الأمامية (مثل Bootstrap) التي توفر واجهة برمجة تطبيقات HTML سهلة نسبيًا.

        API (كما ذكر أعلاه) في واجهة برمجة التطبيقات. أي طريقة للوصول إلى وظيفة جزء من البرنامج من خارج هذا البرنامج. في سياق و HTML API لميزات JavaScript ، هذا يعني طريقة سهلة لتضمين ميزات JavaScript في HTML ببساطة عن طريق إضافة أشياء إلى الترميز (عادةً فئات خاصة).

        يمكن أن يوفر استكشاف مجموعة ميزات مكتبات واجهة مستخدم جافا سكريبت للمطورين المبتدئين (وليس البادئين) الكثير من الأفكار السهلة لتحسين تفاعل الموقع ، والأدوات اللازمة لتنفيذ هذه الأفكار. (تذكر فقط اختيار واحدة والالتزام بها في مشروع ما - حاول ألا تخلط وتطابق مكتبات واجهة مستخدم مختلفة. والنتائج هي الفوضى البصرية والارتباك في التصميم.)

        أطر تطبيقات JavaScript الأمامية

        منفصلة عن أطر التصميم الأمامية (مثل Bootstrap) التي تمت مناقشتها في القسم السابق على CSS ، إطار التطبيق الأمامي هو تطبيق برنامج هيكل عظمي ، والذي يعمل كنقطة انطلاق ليس للتصميم المرئي ولكن للوظيفة الفعلية لل التطبيق على شبكة الإنترنت.

        توفر أطر تطبيقات جافا سكريبت مثل Backbone.js و Angular قالبًا منظمًا لتطبيق الويب ، وأتمتة عدد من المهام الشائعة وتوفير بنية تصميم.

        تطبق معظم أطر تطبيقات JS نمط التصميم MVC أو وحدة تحكم عرض النموذج. يعمل هذا النمط على النحو التالي:

        • يعالج النموذج البيانات
        • تعرض طريقة العرض البيانات
        • يقوم جهاز التحكم بتوصيل البيانات الموجودة في النموذج مع العرض ، ويعالج منطق التطبيق

        يطبق كل إطار عمل JS هذا التنسيق بشكل مختلف ، ولكن جميعهم تقريبًا يفعلون نسخة من هذا.

        إذا كنت ستحاول إنشاء تطبيق JavaScript ، فإن محاولة البناء من الصفر دائمًا ما تكون فكرة رهيبة. يضمن استخدام إطار العمل أن يكون تطبيقك مبنيًا على أساس معماري متين ، ويوفر ساعات لا حصر لها ستُنفق على خلاف ذلك في ترميز الوظائف العامة ذات المستوى المنخفض.

        كما هو الحال مع معظم تطوير البرامج ، فإن كونك مطورًا جيدًا لجافا سكريبت لا يتعلق فقط بمعرفة كيفية ترميز جافا سكريبت - إنه يتعلق بمعرفة المكتبات والأطر الأكثر ملاءمة لأنواع مختلفة من التطبيقات ، والقدرة على استخدامها مع قدر من الطلاقة.

        جافا سكريبت أقوى وأكثر فائدة من أي وقت مضى

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

        HTML مقابل كل شيء

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

        HTML كبديل

        HTML هي اللغة الافتراضية للويب ، ولكنها تستخدم أيضًا كمنصة لأنواع أخرى من التصميم والمحتوى.

        كتب الكترونية

        المعيار الأكثر شيوعًا مفتوح المصدر للكتب الإلكترونية ، تنسيق .epub - والذي يمكن استخدامه على جميع أجهزة القراءة الإلكترونية تقريبًا باستثناء Amazon Kindle - هو في الواقع تنسيق مستند إلى HTML. الأقسام الفردية ، والأقسام مثل جداول المحتويات والفهارس ، هي ملفات HTML فردية. يتم ضغط جميع ملفات المحتوى ، جنبًا إلى جنب مع الأصول مثل الصور وملفات CSS ، في ملف واحد وتعطي امتداد ملف .epub. من نواح كثيرة ، يشبه كتاب .epub موقع ويب يحتوي على العديد من الصفحات.

        يفضل Amazon Kindle دائمًا تنسيق ملف خاص. استخدم الجيل الأول من Kindles .mobi ، وبعد ذلك شكل مرتبط يسمى .azw. كانت هذه أكثر تعقيدًا من تنسيق .epub ، ولم تستند إلى HTML.

        ومع ذلك ، يستخدم أحدث إصدار من Kindles تنسيق .azw3 الجديد ، الذي يعتمد على HTML5. بينما كان من الممكن دائمًا إنشاء كتب إلكترونية Kindle من HTML عبر برنامج تحويل ، أصبحت HTML الآن لغة التأليف الأساسية لمحتوى الكتاب الإلكتروني.

        تطبيقات الموبايل

        تستخدم منصتا الجوال الأكثر شيوعًا - Android و iPhone - لغات برمجة مختلفة تمامًا لتطوير التطبيقات. عادةً ما يتم تطوير تطبيق Android في Java ، بينما يستخدم iOS Objective C واللغة الجديدة Swift.

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

        تم إنشاء بعض الحلول المختلفة لهذه المشكلة ، ولكن الأكثر إثارة للاهتمام هو استخدام HTML (إلى جانب JavaScript و CSS).

        تسمح أدوات مثل PhoneGap للمطورين بإنشاء تطبيق مرة واحدة باللغات القائمة على المتصفح (HTML و JS و CSS) ثم حزمها في تطبيقات لأنظمة تشغيل مختلفة. يلف برنامج PhoneGap التطبيق المستند إلى المستعرض إلى "متصفح لا يحتوي على كروم" - إطار عرض على نمط المستعرض يعرض الملفات فقط داخل دليل التطبيقات ولا يوفر التنقل الذي يواجه المستخدم. يمكن القيام بذلك لأي نظام تشغيل مدعوم ، مما يسمح ببناء التطبيقات مرة واحدة ونشرها في كل مكان.

        أصبحت لغة HTML لغة عالمية.

        بدائل HTML

        على الرغم من أن HTML هي اللغة الأصلية للويب ومنصة قوية للتشغيل المتبادل ، إلا أن هناك بعض التقنيات البديلة التي ترفض الابتعاد.

        فلاش

        Flash هو نظام أساسي لبرامج الوسائط المتعددة يمكن تشغيله في معظم متصفحات الويب باستخدام مكون إضافي.

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

        سرعان ما أصبحت هذه المواقع مملة ومزعجة ، لكن التكنولوجيا معلقة على غير العادة (يكتب الناس ما اعتادوا على كتابته) وخوفًا من دعم المواقع والتطبيقات المكتوبة بلغة HTML5 و JavaScript في جميع المتصفحات. ظل Internet Explorer 6 قيد الاستخدام المكثف لسنوات بعد ظهور متصفحات أفضل ومتوافقة مع المعايير ، لذلك استمر الناس في دفع المواقع المستندة إلى Flash.

        بالنسبة للجزء الأكبر ، تلاشى هذا الاتجاه. يستخدم الفلاش الآن في الغالب لألعاب الفيديو المكتبية والمحمولة ، وقد تم تقليص استخدامه على الويب في الغالب بين الحشود الذكية.

        لسوء الحظ ، فإن الشركات الصغيرة غير التقنية (خاصة الكنائس والمؤسسات غير الربحية المجتمعية) متأخرة دائمًا في اتجاهات التكنولوجيا لعدة سنوات ، ولا يزال العديد منها يريد تضمين عناصر فلاش (مثل "مقدمة فلاش") في موقعه على الويب. هذا دائمًا ما يكون خطأ.

        • الاستخدام الأكثر شيوعًا لبرنامج Flash على مواقع الويب غير التفاعلية هو "مقدمة فلاش" ، وهو أمر مزعج للغاية للمستخدمين. لا أحد يريد الانتظار ومشاهدة العرض المسبق الترفيهي قبل العثور على الأشياء التي يبحثون عنها على موقعك. لا تفعل هذا أبدًا.
        • يعتقد بعض الأشخاص أنه من الجيد وضع المحتوى والقوائم في تطبيق Flash ، حتى يتمكنوا من إنشاء تأثيرات رائعة مثل عناصر القائمة المضيئة أو علامات التبويب المتدحرجة. هذه فكرة سيئة:
          • يهتم الأشخاص بالمحتوى الخاص بك ، وليس بتأثيراتك الخاصة. اجعل المحتوى الخاص بك سهل القراءة وسهل التنقل. لن يبقى أحد على موقعك لفترة أطول أو يوصي به لأصدقائه لأنهم أحبوا الطريقة التي تم بها فتح المحتوى الخاص بك مثل التمرير عند النقر فوق زر القائمة الطائرة.
          • يؤدي وضع المحتوى في Flash ، بدلاً من HTML ، إلى إخفائه من محركات البحث ، مما يجعل موقعك غير مرئي بشكل فعال لـ Google.
          • يعني وضع المحتوى في Flash أن أي عرض معين للمحتوى الخاص بك هو في الواقع حالة محددة في تطبيق قيد التشغيل ، وليس عنوان URL قابل للمشاركة. وهذا يجعل من الصعب جدًا على المستخدمين وضع إشارة مرجعية على المحتوى الخاص بك أو مشاركته.
          • لا يمكن الوصول إلى المحتوى والتنقل في تطبيق Flash لقراء الشاشة ، مما يجعل موقعك غير متاح للأشخاص ذوي الإعاقات البصرية.
          • يمكن إنشاء معظم التأثيرات التي قد ترغب في إنشائها في Flash بسهولة أكبر في JavaScript و CSS ، دون إنشاء أي من هذه المشكلات.
        بي دي إف

        PDF - تنسيق المستندات المحمولة - هو تنسيق رائع عبر الأنظمة الأساسية للمستندات التي تركز على الطباعة.

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

        كل الأشياء التي تجعل ملفات PDF خيارًا جيدًا لأشياء مثل الموسيقى الورقية والكتب المطبوعة تجعلها خيارًا رهيبًا للمحتوى عبر الإنترنت.

        ومع ذلك ، يواصل العديد من الأشخاص والمنظمات (خاصةً الشركات الصغيرة غير التقنية وغير الربحية) نشر ملفات PDF على الويب. نمط واسع الانتشار من السلوك هو إنشاء كتيبات تركز على الطباعة والتي يتم توفيرها بعد ذلك على موقع ويب ، بينما لا يتلقى أحد في الواقع نسخة مطبوعة.

        أي شخص يريد أن يرى المعلومات في كتيبك لا يريد أن يرى ملف PDF. إنهم يريدون محتواك ، ويجب أن تقدم في التنسيق المناسب للوسيط - في حالة المتصفحات ، فإن هذه الوسيلة هي HTML.

        أحد الاستخدامات الفاضحة بشكل خاص لملفات PDF حيث يكون HTML هو الخيار الأفضل هو النماذج القابلة للتعبئة. تنشئ العديد من المؤسسات نماذج PDF يمكن ملؤها داخل قارئ PDF ثم إرسالها عبر البريد الإلكتروني. يمكن للمرء أن يتصور بعض السكرتير المرهق بنسخ هذه النماذج في أي نظام قاعدة بيانات يستخدمه المكتب داخليًا.

        سيكون الحل الأكثر منطقية هو نموذج HTML عبر الإنترنت ، والذي ينشر البيانات مباشرة في تطبيق قاعدة البيانات. هذا سيوفر العمل ويقلل الأخطاء. مع HTTPS ، سيكون أكثر أمانًا من إرسال نماذج PDF بالبريد الإلكتروني.

        انتصارات HTML

        أصبحت لغة HTML اللغة العالمية للويب ، بالإضافة إلى التقنيات ذات الصلة مثل الكتب الإلكترونية وتطبيقات الهاتف المحمول.

        في بعض الحالات ، يعد HTML خيارًا من بين عدة خيارات ، حيث يوفر مجموعة من المزايا والعيوب تمامًا مثل أي خيار تقني آخر. في حالات أخرى ، ليس HTML هو الفائز الواضح فحسب ، بل هو الخيار المعقول الوحيد.

        XHTML و XHTML5

        XHTML

        XHTML تعني لغة ترميز النص التشعبي eXtensible. إنه في الأساس تطبيق XML لـ HTML. عندما تم تطويره لأول مرة ، كانت بنية HTML (الإصدار 4) فضفاضة. جعل XHTML HTML منظم للغاية. كان يُنظر إليه منذ فترة طويلة على أنه مستقبل الترميز للويب. لكن HTML5 تجاوزته إلى حد كبير. ومع ذلك ، يتم استخدامه على نطاق واسع.

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

        التاريخ

        في عام 1998 ، نشر W3C مسودة عمل بعنوان إعادة صياغة HTML في XML. كانت هذه اللغة الجديدة مبنية على HTML 4 ، لكنها تلتزم بقواعد بناء الجملة الأكثر صرامة في XML. في فبراير 1999 تغير اسم المواصفات إلى XHTML 1.0: لغة ترميز النص التشعبي eXtensible. وأخيرًا ، في يناير 2000 ، أصبحت XHTML توصية W3C الرسمية.

        تم نشر الإصدار التالي من XHTML ، XHTML 1.1 في مايو 2001 ، والذي كان لا يزال يعتمد على قواعد صارمة ولكنه سمح بالتخصيصات والتغييرات الطفيفة. بدأ XHTML 2.0 كمسودة عاملة ولكن تم التخلي عنه في 2009 لصالح HTML5 و XHTML5.

        مبادئ XHTML الأساسية

        في حين أن XHTML مطابق تقريبًا لـ HTML ، فقد قدم مجموعة جديدة من القواعد التي كان من المفترض أن تضمن أن جميع الشفرات صالحة وصحيحة. كانت هذه القواعد:

        • يجب أن تكون جميع العناصر وأسماء السمات صغيرة.
        • يجب كتابة جميع العناصر الفارغة باستخدام علامة العنصر الفارغ الخاصة في XML.
        • يجب أن تكون جميع علامات النهاية موجودة ولا توجد علامات نهاية اختيارية.
        • يجب أن تحتوي عناصر HTML على عنصر رأس واحد ، متبوعًا بعنصر أساسي واحد أو عنصر مجموعة إطارات واحد.
        • يجب أن يحتوي كل رأس على عنوان واحد.

        إلى جانب القواعد المذكورة أعلاه ، قدمت XHTML في البداية ثلاثة تعريفات رسمية لأنواع المستندات (DTD) تتوافق مع الإصدارات الثلاثة المختلفة من HTML 4.01:

        • XHTML 1.0 صارم هو XML المعادل لـ HTML 4.01 الصارم ، ويتضمن العناصر والسمات التي لم يتم وضع علامة إهمالها في مواصفات HTML 4.01. اعتبارًا من نوفمبر 2015 ، XHTML 1.0 Strict هو نوع المستند المستخدم للصفحة الرئيسية لموقع ويب World Wide Web Consortium.
        • XHTML 1.0 انتقالي هو مكافئ XML لـ HTML 4.01 Transitional ، ويتضمن العناصر التقديمية (مثل المركز والخط والضرب) المستثناة من الإصدار الصارم.
        • مجموعة إطارات XHTML 1.0 هو مكافئ XML لمجموعة HTML 4.01 Frames ، ويسمح بتعريف مستندات مجموعة الإطارات - وهي ميزة ويب شائعة في أواخر التسعينيات.

        مثال

        كانت الإصدارات الأولى من HTML منظمة بشكل فضفاض وكان من الشائع جدًا العثور على صفحات ويب ذات ممارسات ترميز سيئة. تبدو صفحة الويب المناسبة في XHTML كما يلي:

        صفحتي الأولى على الويب

        مرحبا بالعالم!

        أنا صفحة ويب بسيطة للغاية ولكنها تعمل بكامل طاقتها مع كود XHTML صالح!

        الموارد على الانترنت

        على الرغم من أن XHTML يبدو أنه تجاوزه HTML5 ، لا يزال هناك الكثير من الموارد عبر الإنترنت التي يمكن أن تساعدك على فهم XHTML بشكل أفضل. من المواصفات الأساسية إلى أوراق الغش إلى المدققين إلى البرامج التعليمية ، ستساعدك الروابط المدرجة أدناه في أي أسئلة تتعلق بـ XHTML.

        مرجع

        • المواصفات الرسمية لـ XHTML: الموقع الرسمي الذي يشرح قرار تطوير XHTML ويوفر المزيد من الموارد حول تطويره.
        • XHTML 1.0: الإصدار الثاني المنقح من مسودة العمل لإعادة صياغة HTML 4 في XML 1.0
        • مواصفات XHTML الأساسية: توفر نوع مستند XHTML يمكن مشاركته عبر الأجهزة مثل سطح المكتب والتلفزيون والهواتف المحمولة.
        • XHTML: حل Clean Code: يوفر نظرة عامة مفصلة XHTML تركز على الاختلافات بين HTML والمعايير الجديدة.
        • لماذا التبديل إلى XHTML: يوفر حجة مقنعة للتبديل إلى XHTML من أجل ضبط سير العمل وإنتاج رمز أنظف.

        أدوات

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

        • خدمة مدقق HTML / XHTML: يتحقق مدقق W3C من مستندات HTML و XHTML للتأكد من مطابقتها للمواصفات الرسمية.
        • HTML Tidy: يساعدك على تنظيف ملفات HTML تلقائيًا ومطابقتها للمواصفات القياسية. تم تطويره في الأصل من قبل Dave Ragget من W3C وهو الآن مشروع مفتوح المصدر في SourceForge.

        دروس

        إذا كنت تريد التعمق في تطوير XHTML ، فينبغي أن تساعدك هذه البرامج التعليمية على المضي قدمًا.

        • شرح XHTML: يعطي نظرة عامة على كيفية ظهور XHTML ويشرح جميع التغييرات التي حدثت ، تليها أمثلة التعليمات البرمجية ، نظرة عامة على DTD ، وأفضل ممارسات الترميز.
        • XHTML Web Design for Beginners: يستكشف كتل الإنشاء المتقدمة لـ XHTML ، بما في ذلك التعليقات والنصوص والمزيد.
        • برنامج XHTML التعليمي: برنامج تعليمي موجز للغاية يغطي المفاهيم الأساسية لـ XHTML بطريقة موجزة.
        • نماذج HTML / XHTML يمكن الوصول إليها: برنامج تعليمي على مستوى المبتدئين يغطي فقط ما تحتاج إلى معرفته.
        • Beginning HTML (XHTML): فيديو تعليمي مناسب للمبتدئين لتعلم أساسيات XHTML.
        • منهجيات اختبار البرمجيات: مقدمة لأساليب وأدوات اختبار البرمجيات ذات الاهتمام العام لمطوري HTML.

        كتب

        نظرًا لأن XHTML متصل بـ HTML ، فإن العديد من الكتب تناقش هاتين اللغتين معًا. ستجد كتبًا موجهة للمبتدئين تمامًا بالإضافة إلى الكتب الموجهة لأولئك الذين لديهم بالفعل بعض تجربة الترميز ويرغبون في توسيع معرفتهم.

        • HTML و XHTML و CSS: دليل QuickStart المرئي (2006) بواسطة إليزابيث كاسترو: يشرح جميع أساسيات HTML و XHTML بلغة مناسبة للمبتدئين. يحتوي الكتاب على الكثير من الأمثلة المرئية ويتضمن موقعًا مصاحبًا بمواد إضافية وأمثلة وتحديثات والمزيد.
        • HTML و XHTML و CSS For Dummies (2011) بواسطة Tittel و Noble: مرجع تمهيدي لـ HTML و XHTML و CSS يعلمك كيفية إنشاء مستندات XHTML وتطبيق هذه المبادئ على CMS الشائعة مثل WordPress و Drupal والتصميم للجوال الأجهزة.
        • بدء برمجة الويب باستخدام HTML و XHTML و CSS (2011) بواسطة Jon Duckett: يعلمك كيفية كتابة صفحات الويب باستخدام HTML و XHTML و CSS. يتبع المبادئ المستندة إلى المعايير ، ولكنه يعلم أيضًا طرق القراء حول المشكلات التي من المحتمل أن يواجهوها باستخدام HTML (X).

        XHTML اليوم

        لم يعد تطوير XHTML منذ إنشائه وصيانته نشطًا. كان السبب الرئيسي لسقوطها من النعمة هو معالجة الأخطاء الصارمة للغاية التي تسببت في توقف صفحات الويب عن العرض عند مواجهة خطأ. أدى ذلك إلى إنشاء Web Technology Hypertext Application Technology Group (WHATWG) التي بدأت العمل على HTML5. لقد ساهموا في حل مجموعة عمل XHTML 2.0 في نهاية المطاف.

        اليوم ، كل عمل W3C يركز على HTML5 وصيغة XHTML ، والمعروفة باسم XHTML5.1 ، والتي يتم تعريفها جنبًا إلى جنب مع HTML5 في مسودة HTML5.

        على الرغم من تجاوز XHTML بواسطة HTML5 ، فإن معرفة التاريخ وراءه بالإضافة إلى ممارسات الترميز ذات الصلة تضع أساسًا قويًا للمستقبل. ستضعك الموارد أعلاه على المسار الصحيح لتعلم رمز صالح.

        HTML5

        HTML5

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

        التاريخ والمقدمة

        لقد راجعنا تاريخ HTML أثناء انتقاله من الإصدارات 1 إلى 4. ولكن تاريخ HTML5 أكثر إثارة للاهتمام وأهمية.

        الطريق إلى HTML 5

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

        كانت مستندات HTML التي تم إنشاؤها لمتصفح واحد غير قابلة للاستخدام تقريبًا في غيرها ، خاصة إذا كانت صفحات HTML تحتوي على عناصر تفاعلية مثل عناصر التحكم في النموذج.

        مع استقرار HTML 4.0 و XHTML ، دفعت حركة معايير الويب صانعي المتصفح إلى اعتماد معايير مفتوحة ، بحيث تكون صفحات الويب متوافقة مع أي متصفح.

        كان هذا العمل ناجحًا إلى حد كبير ، لكن اتجاهين دفعا حدود HTML ، مهددًا مبادئ الانفتاح والتشغيل البيني بالكامل..

        الأول هو العادات السيئة الجماعية لاستهداف المتصفح "وضع المراوغات". بعد سنوات عديدة من الاضطرار إلى تعديل التصميمات لمتصفحات محددة ، واصل العديد من المصممين الترميز بهذه الطريقة.

        والثاني هو رغبة متزايدة في المحتوى التفاعلي الثري الذي لم يكن مدعومًا في HTML. هذا أدى إلى استخدام الفلاش على نطاق واسع.

        في عام 2004 ، قدمت موزيلا وأوبرا W3C ورقة موقف تدافع عما سيصبح لاحقًا HTML5. سوف يدعم التكرار الجديد للغة وظائف تفاعلية جديدة ووسائط غنية ، بينما يكون متوافقًا إلى الوراء مع متصفحات الويب المتوافقة مع المعايير.

        كانت هذه النقطة الأخيرة حاسمة - كان على الإصدار الجديد أن يتحلل برشاقة ويحتوي على HTML 4.0 صالح كمجموعة فرعية ؛ وبخلاف ذلك ، سيصبح مجرد نوع آخر مربك لنظام بيئي مزدحم بالفعل.

        بدأ WHATWG العمل على HTML5 على الفور تقريبًا ، وتم نشر المسودة العامة الأولى في عام 2008. بدأ مصنعو المتصفحون في تنفيذ أجزاء من المعيار تجريبيًا ، والتي استمرت في التطور.

        تم إصدار "توصية المرشح" المستقرة في عام 2012 ، وتم إصدار توصية W3C المستقرة تمامًا في عام 2014. وبحلول ذلك الوقت ، كانت جميع المتصفحات الرئيسية تدعم الأجزاء الأكثر أهمية في المعيار.

        يحتوي معيار HTML5 الآن على مسارين للتطور الموازي. W3C لديه دورة إطلاق مستقرة مع أرقام إصدارات متزايدة - سلسلة من "اللقطات". تحافظ WHATWG على "مستوى معيشة" متطور مع ميزات جديدة تضاف باستمرار.

        ما الجديد في HTML5?

        هناك الكثير من الميزات الجديدة في HTML5 ، بما في ذلك طبيعة المواصفات نفسها. كان HTML 4.0 ، في جوهره ، مخزونًا لعلامات الترميز المتاحة. يتضمن HTML5 ذلك ، ولكن هذا ليس سوى جزء واحد من النظام البيئي المعياري للتقنيات القائمة على المتصفح المحددة في المعيار.

        وضع علامة على

        تقع التغييرات في ترميز HTML5 بشكل عام في فئات قليلة.

        دلالات

        الترميز الدلالي يعني الترميز الذي يحمل معنى. على سبيل المثال ، كان عنصر تخطيط الصفحة الرئيسي الوحيد في HTML 4.0 هو. يمكن أن يكون أي شيء: رأس وتذييل وعمود وشريط جانبي وقائمة. في HTML5 ، تمت إضافة عدد من عناصر تخطيط الصفحة الدلالية:

        • .

        تتضمن العناصر الدلالية الأخرى المضافة في HTML5 ما يلي:

        • والتي تستخدم في الرسوم التوضيحية والرسوم البيانية ؛
        • الذي يحدد النص المميز أو المميز ؛
        • الذي يحدد التاريخ والوقت.

        HTML5 يوضح ذلك أيضًا وينبغي تفضيله على و .

        الوسائط المتعددة

        تمت إضافة عناصر جديدة إلى HTML5 لدعم الوسائط:

        • .

        تسمح العناصر والعناصر بالتشغيل الأصلي للوسائط بدون جافا سكريبت أو Flash أو التضمين من أي نوع - الأمر بسيط مثل تضمين صورة. يعمل العنصر مع JavaScript لإنشاء رسومات على الصفحة بطريقة برمجية.

        يحتوي HTML5 أيضًا على دعم صريح لرسومات المتجهات القابلة للتحجيم (SVG).

        تفاعلية

        يحتوي HTML5 على عدد من عناصر النموذج الجديدة وأنواع الإدخال التي تساعد في دعم اللغة كنظام أساسي للتطبيق. وتشمل هذه:

        • .

        تشمل أنواع الإدخال الآن: اللون والتاريخ ووقت التاريخ والتاريخ المحلي والبريد الإلكتروني والشهر والرقم والنطاق والبحث والتليفون والوقت وعنوان url والأسبوع.

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

        • محتوى قابل للتعديل
        • قائمة السياق
        • البيانات-*
        • قابل للسحب
        • منطقة الإسقاط
        • التدقيق الإملائي.
        قواعد Lexing والتحليل

        بصرف النظر عن التغييرات التي تطرأ على كتالوج العناصر المتاحة ، فإن ترميز HTML5 يخضع لمجموعة أكثر صرامة وأكثر تحديدًا من قواعد lexing والتحليل. لم تعد نسخة من XML أو SGML ، ولكنها لغة ترميز محددة بالكامل في حد ذاتها.

        من المتوقع أن تفشل أخطاء البنية أو الترميز ذي الصيغة السيئة باستمرار ، مما يوفر سلوكًا مشابهًا عبر المتصفحات المتوافقة.

        المتصفح وواجهات برمجة تطبيقات DOM

        يحدد HTML5 عددًا من واجهات برمجة تطبيقات JavaScript للتفاعل مع DOM (نموذج كائن المستند - المحتوى على الصفحة) ومع المتصفح. وتشمل هذه:

        • لوحة الرسم البياني المذكورة أعلاه لعرض الرسومات في الصفحة.
        • توقيت تشغيل الوسائط ، للاستخدام مع و .
        • التحقق من حالة متصل / غير متصل.
        • نوع MIME وتسجيل معالج البروتوكول ، مما يسمح للمستعرض بتحديد موقع ويب كطريقة افتراضية للتعامل مع نوع ملف معين أو بروتوكول اتصالات. على سبيل المثال ، السماح لتطبيق بريد الويب بالتعامل مع روابط mailto:.
        • البيانات الجزئية ، التي تسمح بتداخل البيانات الوصفية الدلالية كسمات.
        • المراسلة عبر المستندات ، والتي تسمح بصفحتين من مصدري مجال مختلفين ، تفتح في سياقين مختلفين للمتصفح ، للتواصل مع بعضها البعض.
        • تخزين الويب ، وهو مخزن بيانات زوجي مستمر ذو قيمة مفتاح مشابه لملفات تعريف الارتباط ، ولكنه أسهل في الاستخدام وبسعة تخزين أكبر.

        نجاح HTML5

        يمكن الحكم على نجاح HTML5 في حالتين:

        • مدى نجاح المواصفات في تحقيق أهدافها
        • مدى انتشار اعتماده.

        في كلا الحالتين ، كانت HTML5 ناجحة للغاية.

        كانت أهداف HTML5 هي:

        • إمكانية التشغيل التفاعلي للمتصفح
        • تقليل أو القضاء على الحاجة إلى المكونات الإضافية
        • التوافق مع المعايير الحالية.

        وقد تم تحقيق هذه إلى حد كبير. تقاربت محركات التقديم وتطبيقات جافا سكريبت في المتصفحات الرئيسية إلى درجة أن زيارة صفحة الويب ستنتج تجربة متسقة عبر جميع المتصفحات.

        أدى دعم الوسائط المتعددة ، وتخزين المستعرض ، والميزات الأخرى التي تركز على التطبيق إلى القضاء على الحاجة إلى Flash وأدى إلى انفجار في تطبيقات الويب HTML5 الأصلية.

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

        كان التبني سريعًا ، حتى قبل أن يصبح المعيار رسميًا. حتى كتابة هذه السطور ، تستخدم غالبية 10 ملايين موقع ويب HTML5. علاوة على ذلك ، يتم إنتاج معظم محتوى الويب الجديد بتنسيق HTML5.

        والأكثر إثارة هو استخدام HTML5 خارج المتصفح. قامت منصات مثل Electron لسطح المكتب و Phonegap للجوال بتحويل HTML5 (باستخدام CSS3 و JavaScript) إلى لغة تطبيق أصلية.

        موارد HTML5 العامة

        • توصية HTML5 W3C و WHATWG HTML Living Standard هما المصدران الرسميان اللذان يحددان HTML5.
        • يقدم W3C سلسلة من الدورات التدريبية على HTML5:
          • مقدمة HTML5
          • HTML5 الجزء الأول: أساسيات تشفير HTML5 وأفضل الممارسات
          • HTML5 الجزء الثاني: التقنيات المتقدمة لتصميم تطبيقات HTML5
        • تقدم Mozilla Developer Network مرجع HTML5 شاملًا.

        HTML5 هو المستقبل

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

        مورد الصوت والفيديو

        قبل ظهور HTML5 ، لم يكن تضمين الصوت والفيديو في صفحات الويب واضحًا. تتطلب التقنيات المختلفة وأنواع MIME مكونات إضافية مختلفة.

        أيضًا ، يجب أحيانًا تضمين الوسائط باستخدام إطارات iframe. هذا ليس مثاليًا لأنه تقنية يستخدمها المتسللون أيضًا لتضمين شفرة ضارة.

        يقدم HTML5 علامات جديدة تسهل إدارة الوسائط ، ويرجع ذلك أساسًا إلى أنها تقدم معايير يمكن استخدامها عمليًا على أي موقع. كما هو الحال مع جميع علامات HTML5 ، يلزم توخي الحذر ، حيث قد لا تتوافق العلامات مع المتصفحات القديمة.

        لتضمين صوت أو فيديو ، يمكنك استخدام العناصر الجديدة في HTML5. إليك مثال:

        يرجى ترقية المتصفح الخاص بك.

        أدناه ، قمنا بتجزئة كل عنصر بسماته.

        تضمين الفيديو

        يقدم HTML5 عنصرًا جديدًا ، يلغي الحاجة إلى المكونات الإضافية للمتصفح.

        بين علامتي الفتح والإغلاق للعنصر ، يمكنك تحديد نص بديل. يتم عرض هذا فقط إذا كان المستعرض لا يدعم العنصر.

        سمات العنصر

        داخل العنصر ، يمكنك تحديد سمات متنوعة:

        عرض ارتفاع

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

        يجب تحديد عرض الفيديو وارتفاعه بالبكسل.

        ضوابط

        تطلب سمة عناصر التحكم من المتصفح عرض زر تشغيل / إيقاف مؤقت ومنزلق التحكم في مستوى الصوت. لعرض الفيديو بدون عناصر تحكم ، احذف السمة.

        تشغيل تلقائي

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

        على الأجهزة المحمولة ، يتم تجاهل سمة التشغيل التلقائي.

        تضمين الصوت

        لتضمين الصوت ، استخدم العنصر. إنه مشابه جدًا للعنصر.

        بين علامتي الفتح والإغلاق للعنصر ، يمكنك تحديد نص بديل. يتم عرض هذا فقط إذا كان المتصفح لا يدعم العنصر.

        سمات العنصر

        داخل العنصر ، يمكنك تحديد سمات متنوعة:

        عقدة

        تخبر السمة loop المتصفح بإعادة تشغيل المسار الصوتي من البداية بمجرد انتهاء تشغيله.

        ضوابط

        تطلب سمة عناصر التحكم من المستعرض عرض نفس زر التشغيل / الإيقاف المؤقت وشريط تمرير التحكم في مستوى الصوت كما هو الحال مع علامة الفيديو. ما عليك سوى حذف السمة لعرض الصوت بدون عناصر تحكم.

        تشغيل تلقائي

        ستفرض سمة التشغيل التلقائي بدء تشغيل الصوت تلقائيًا. لتضمين الصوت بدون تشغيل تلقائي ، ما عليك سوى حذف السمة.

        صامت

        ستقوم السمة المكتومة بكتم الصوت عند تحميل الصوت.

        التحميل المسبق

        تتيح لك سمة التحميل المسبق تحميل الصوت قبل محتوى الصفحة. القيم المقبولة هي تلقائية أو بيانات وصفية أو لا شيء.

        العنصر

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

        فمثلا:

        متصفحك الحالي لا يدعم تشغيل الفيديو.

        سمات العنصر

        يحتوي على السمات التالية:

        src

        تحدد السمة src مسار المصدر واسم الملف لملف الفيديو أو الصوت.

        نوع

        نوع MIME للملف.

        للفيديو ، القيم المقبولة هي video / mp4 ، video / webm ، و video / ogg. بالنسبة إلى الصوت ، القيم المقبولة هي audio / mpeg و audio / wav و audio / ogg.

        بينما تدعم المتصفحات الحديثة من الناحية النظرية العنصر نفسه ، قد يعاني البعض من بعض أنواع MIME.

        للحصول على أفضل فرصة للتوافق بين المتصفحات ، يوصى بنوع MIME video / mp4 للفيديو ، ونوع MIME audio / mpeg هو الأفضل للصوت. يمكنك تحديد عناصر متعددة إذا كنت تريد تقديم نسخة ogg وإصدار mp4 من الفيديو نفسه ، على سبيل المثال.

        العنصر

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

        يمكنك تحديد أكثر من مسار لكل عنصر فيديو أو عنصر صوت. على سبيل المثال ، قد ترغب في إضافة عناصر للغات مختلفة:

        سمات العنصر

        يحتوي العنصر على السمات التالية:

        src

        مسار المصدر واسم الملف للملف النصي.

        طيب القلب

        على غرار سمة النوع ، تحدد سمة النوع طبيعة الملف. يمكنك استخدام التسميات التوضيحية أو الفصول أو الأوصاف أو البيانات الوصفية أو الترجمة.

        srclang

        تتيح لك السمة srclang تحديد لغة الملف النصي. استخدم رمز اللغة المناسب.

        إفتراضي

        استخدم السمة الافتراضية لتحديد الخيار الافتراضي الذي يجب أن يكون.

        ضع الكلمة المناسبة

        يعطي النص اسم المسار.

        موارد الصوت والفيديو

        • قامت Mozilla بتطوير هذا الدليل الممتاز ، باستخدام HTML5 Audio and Video. سوف يأخذك من الاستخدام البسيط إلى المتقدم.
        • قامت Apple بنشر إرشادات محددة للمطورين. هذه قراءة جديرة بالاهتمام إذا كنت تقوم بالتطوير لنظام iOS أو Safari.
        • لدى Microsoft إرشادات خاصة بها للصوت والفيديو بتنسيق HTML5 في Internet Explorer.

        ذاكرة التخزين المؤقت للتطبيق

        لم يغير HTML5 فقط بنية الترميز. كما حدد عددًا من التقنيات القائمة على المتصفح ، بما في ذلك العديد من التقنيات المتعلقة باستخدام تطبيقات الويب دون اتصال بالإنترنت.

        Application Cache (أو "AppCache") هي ميزة تسمح للمطورين بتحديد الموارد التي سيتم جلبها مسبقًا وتخزينها محليًا.

        يتم الإعلان عن هذه الموارد في ملف بيان ذاكرة التخزين المؤقت ، المرتبط من رأس صفحة الويب. يمكن استخدام هذا لتصميم تطبيق ويب يعمل دون اتصال بالإنترنت ، أو ببساطة لتسريع تجربة المستخدم.

        AppCache هي ميزة لها الكثير من الإمكانات ، خاصة في سياق تطبيقات الويب ذات الصفحة الواحدة. لسوء الحظ ، تحتوي الميزة أيضًا على الكثير من المشاكل ، وهي في طور الإيقاف وإزالتها من المعيار.

        ومع ذلك ، فإن AppCache لا يزال قابلاً للاستخدام والطريقة الوحيدة لتحقيق تأثيرات معينة.

        لمساعدتك في التعامل مع هذا الارتباك ، قمنا بتجميع أفضل البرامج التعليمية والموارد على ذاكرة التخزين المؤقت للتطبيق ، والتي تستكشف الموضوع من مجموعة متنوعة من الزوايا.

        دروس مخبأ التطبيق

        • يعد دليل المبتدئين لاستخدام ذاكرة التخزين المؤقت للتطبيق أحد أفضل البرامج التعليمية التمهيدية حول هذا الموضوع.
        • استخدام ذاكرة التخزين المؤقت للتطبيق هو برنامج تعليمي تقني يركز على المطور من Mozilla Developer Network.
        • دعونا نأخذ هذا دون اتصال هو شرح سردي مفصل لكيفية استخدام AppCache.
        • يغطي استخدام ذاكرة التخزين المؤقت للتطبيق HTML5 في Mobile Web Apps الاستخدام العام لـ AppCache ويستكشف المشكلات الخاصة عند استخدامه عند تطوير تطبيقات الويب HTML5 لمتصفحات الجوال.
        • باستخدام HTML 5 Application Cache لتطبيقات الصفحة الواحدة تفاصيل استخدام AppCache في سياق تطبيق Ember.js.
        • البرنامج التعليمي: كيفية إنشاء تطبيق ويب HTML5 غير متصل يستخدم مثال قارئ RSS لشرح كيفية إنشاء تطبيق ويب يعمل دون اتصال. من المهم بشكل خاص هنا الطريقة التي يتم بها استخدام AppCache بالتنسيق مع العديد من متاجر بيانات HTML الأخرى مثل ملفات تعريف الارتباط والتخزين المحلي و WebSQL.
        • بناء قائمة مهام بسيطة عبر المتصفح دون اتصال مع IndexedDB و WebSQL يستكشف بناء تطبيق قائمة المهام التي تعمل دون اتصال والتي تعمل في متصفحات متعددة مع دعم متنوع لميزات تخزين البيانات في وضع عدم الاتصال. يتم استخدام ذاكرة التخزين المؤقت للتطبيق مع IndexedDB و WebSQL.
        • إنشاء تطبيق دون اتصال باستخدام HTML5 App Cache تفاصيل استخدام AppCache ، بما في ذلك إرشادات خطوة بخطوة حول كيفية إنشاء بيان وتفاصيل حول استخدام .htaccess لتقديم ملف البيان بشكل صحيح على Apache.
        • يستكشف إنشاء تطبيقات HTML5 غير المتصلة بالإنترنت التفاصيل الدقيقة للعديد من طرق تخزين البيانات المحلية ، بما في ذلك AppCache.
        • إن إضافة ذاكرة التخزين المؤقت لتطبيق HTML5 لتسريع تطبيق الويب الخاص بك في 5 دقائق هو برنامج تعليمي قصير سيجعلك تستخدم AppCache بسرعة. ينصب التركيز في هذا البرنامج التعليمي على استخدام التخزين المؤقت لتسريع تجربة موقع الويب عبر الإنترنت ، وليس على توفير تجربة تطبيق دون اتصال.
        • تشغيل تطبيقات الويب الخاصة بك دون اتصال مع HTML5 AppCache يغطي بيان ذاكرة التخزين المؤقت وأيضًا واجهة برمجة تطبيقات JavaScript ، مع تفصيل الأحداث والإجراءات المتعلقة بالذاكرة المؤقتة.
        • ما هو ذاكرة التخزين المؤقت للتطبيق؟ يقدم لمحة عامة عالية المستوى عن AppCache.
        • إنشاء تطبيق HTML5 غير متصل باستخدام ذاكرة التخزين المؤقت للتطبيق ، وتخزين الويب ، و ASP.NET MVC يوفر نظرة تفصيلية على كيفية عمل AppCache بالفعل ، مع تغطية كاملة حول تنظيم ملف البيان بشكل صحيح. بعد هذا الشرح العام ، يستمر البرنامج التعليمي لإظهار كيفية إدارة هذه العملية في تطبيق ASP.NET.

        مواد تعليمية إضافية عن ذاكرة التخزين المؤقت للتطبيق

        • أفضل الممارسات لتطبيق ويب أسرع مع لمسات HTML5 فقط على ذاكرة التخزين المؤقت للتطبيق في قسم واحد ، ولكنها مفيدة جدًا في فهم كيفية استخدام ذاكرة التخزين المؤقت للتطبيق كجزء من استراتيجية أداء أكبر.
        • تلميحات عند استخدام Application Cache هي قائمة بأفضل الممارسات للتعامل مع بعض المشكلات الشائعة في AppCache.
        • يوضح حذف ذاكرة التخزين المؤقت لتطبيق HTML كيفية حذف تخزين ذاكرة التخزين المؤقت للتطبيق المحلي في العديد من المتصفحات. هذا مفيد بشكل خاص أثناء التطوير والاختبار المحليين ، عندما تتغير ملفات مشروعك بشكل أسرع من تحديث AppCache لها.
        • الأخطاء الشائعة التي يجب تجنبها عند استخدام ذاكرة التخزين المؤقت للتطبيق HTML5 تغطي عددًا من المشكلات الأكثر شيوعًا في AppCache ، وتشرح كيفية التغلب عليها.
        • تطبيق ذاكرة التخزين المؤقت هو Douchebag أمر مضحك ، ولكن كل دقيقة للغاية ، صرخة حول صعوبات العمل مع تطبيق ذاكرة التخزين المؤقت. كان هذا المقال كلاسيكيًا فوريًا بين مطوري الواجهة الأمامية وهو بالتأكيد مطلوب للقراءة لأي شخص مهتم بـ AppCache.

        مرجع ذاكرة التخزين المؤقت للتطبيق

        • هل يمكنني استخدام ذاكرة التخزين المؤقت للتطبيق؟ يمنحك لمحة سريعة عن المتصفحات التي تدعم AppCache.

        أدوات للعمل مع ذاكرة التخزين المؤقت للتطبيق

        • Cache Manifest Validator هي أداة عبر الإنترنت للتحقق من صحة ملفات AppCache Manifest.
        • GWT AppCache Support Library هي وحدة لـ Google Web Toolkit تعمل تلقائيًا على إنشاء ملفات بيان Appcache.
        • Appcache-Manifest عبارة عن أداة Node.js لتوليد ملفات بيان ذاكرة التخزين المؤقت للتطبيق من سطر الأوامر. تتضمن الأداة تجزئة MD5 لملفات البيان ، مما يضمن تغيير الملفات المحدثة تلقائيًا للبيان ، مما يتسبب في إبطال ذاكرة التخزين المؤقت المناسبة على العميل.
        • CacheMan هو تطبيق سطح مكتب يتعامل مع جيل Cache Manifest.

        المضي قدما مع ذاكرة التخزين المؤقت للتطبيق

        هل يجب أن تتعلم كيفية استخدام ذاكرة التخزين المؤقت للتطبيق؟ إذا كنت مطورًا أماميًا يعمل على تطبيقات الويب - نعم تمامًا. ولكنك تحتاج أيضًا إلى معرفة ما سيحدث وكيف تتطور سعة تخزين المتصفح في وضع عدم الاتصال.

        البديل المقصود لـ AppCache هو عمال الخدمة. يمكنك بالفعل استخدام عمال الخدمة في بعض المتصفحات ، وهناك أدوات رائعة لتنفيذها بسهولة. من ناحية أخرى ، لم تقرر بعض المتصفحات حتى ما إذا كانت ستقوم بتنفيذ هذه الميزة أو متى.

        فماذا يجب أن تفعل في تطبيقات الويب الخاصة بك?

        الآن ، استخدم AppCache ، ولكن استعد لعمال الخدمة.

        الألعاب والرسومات والرسوم المتحركة

        تعد الرسومات المتجهة القابلة للتحجيم (SVG) وعنصر لوحة HTML5 أداتين قويتين لإنشاء الرسومات والرسوم المتحركة وحتى الألعاب القائمة على المتصفح. بينما يمكن استخدام كل من هذه التقنيات لبعض الأغراض نفسها ، إلا أنها تعمل بطرق مختلفة بشكل أساسي.

        • عنصر لوحة الرسم هو مساحة نقطية حيث يمكنك رسم الصور النقطية ومعالجتها على أساس كل بكسل على حدة..
        • إن SVG هو رمز يصف رسم متجه مستقل عن الدقة.

        يمكن إنشاء كل من عناصر اللوحة القماشية و SVGs برمجيًا باستخدام البرمجة النصية ومصممة للاستجابة لمدخلات المستخدم. ونتيجة لذلك ، يمكن استخدام SVGs وعناصر اللوحة لإنشاء رسومات ثابتة ورسوم متحركة تفاعلية.

        SVG مقابل Canvas

        أولاً ، SVG ليس جزءًا من مواصفات HTML5 بينما اللوحة القماشية. SVG هي لغة تستخدم لوصف الرسومات ثنائية الأبعاد. إنه معيار ويب مستقل يمكن تضمينه في مستندات HTML و XML.

        عند تضمينه في مستند HTML ، يستخدم SVG بناء جملة يطابق بناء جملة HTML5 ، مما يؤدي بالبعض إلى افتراض أن SVG هو عنصر HTML بشكل غير صحيح.

        يتم عرض عناصر قماش SVG و HTML5 بشكل مختلف تمامًا عن طريق المتصفحات:

        • يتم تقديم عناصر قماش "على الطاير". وهذا يعني أن عناصر لوحة الرسم يتم رسمها في الوقت الفعلي أثناء معالجتها بواسطة المتصفح.
        • لا يتم رسم SVG على الفور. عندما يصادف متصفح SVG ، فإنه يقوم أولاً بإنشاء DOM لـ SVG ثم يعرض DOM.

        قد يبدو هذا اختلافًا طفيفًا ، لكنه ليس كذلك. هذا يعني أن المتصفح لا يحتاج إلى إنشاء DOM عندما يواجه لوحة ، ولكن يجب أن يفعل ذلك عندما يتم تقديم SVG.

        بالنسبة للرسوم المتحركة البسيطة ، فإن الفرق لا يكاد يذكر. ومع ذلك ، تتطلب الرسوم المتحركة القماشية المعقدة بشكل استثنائي موارد متصفح أقل بكثير من SVGs.

        من ناحية أخرى ، إذا كنت تريد إجراء تغيير صغير على SVG ، فيمكنك اجتياز DOM وإجراء التغيير ، بينما يجب إعادة رسم عنصر لوحة الرسم بالكامل لإجراء أي تغيير.

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

        متى تستخدم SVGs و اللوحات

        كل هذا يستدعي السؤال: متى يجب استخدام كل من SVG وعناصر اللوحات القماشية؟ في حين أن هناك بعض التقاطع في تطبيق هذه الأدوات ، بشكل عام ، اتبع هذه الإرشادات:

        • استخدم SVGs للحصول على رسوم متحركة ورسومات مثالية للبكسل يجب أن تبدو حادة على الأجهزة من أي حجم.
        • استخدم SVGs إذا كنت بحاجة إلى تجنب استخدام JavaScript أو إذا كانت إمكانية الوصول إلى محتوى الرسوم المتحركة أمرًا بالغ الأهمية.
        • استخدم لوحة HTML5 لإنشاء رسوم متحركة وألعاب معقدة تتضمن قدرًا كبيرًا من مدخلات المستخدم.

        إذا كنت تريد معرفة المزيد حول استخدام SVGs ، فألق نظرة على مقالتنا التي تقارن SVGs و SWFs التي تتضمن قائمة بموارد SVG. لمعرفة المزيد حول عنصر لوحة HTML5 ، تابع القراءة.

        موارد قماش

        هيا لنبدأ مع الأساسيات:

        • برنامج Mozilla Developer Network Canvas التعليمي: يبدأ هذا البرنامج التعليمي بالاستخدام الأساسي وينتقل لتغطية أشكال الرسم والنص واستخدام الصور وإنشاء التحولات والرسوم المتحركة ومعالجة البكسل والمزيد. في نهاية هذا البرنامج التعليمي ، ستكون قد قمت بإنشاء رسوم متحركة متقدمة ، وبانوراما بانورامية مستمرة ، وتطبيق منتقي الألوان.
        • Dev.Opera HTML5 Canvas - الأساسيات: تغطي هذه المقدمة الشاملة للقماش تقنيات الرسم والعمل مع الصور والمعالجة القائمة على البكسل بالإضافة إلى النص والظلال والتدرجات.
        • W3Schools Canvas Tutorial: تعلم أساسيات الرسم والعمل مع الإحداثيات والتدرجات ورسم النص والعمل مع الصور. ثم طبِّق ما تعلمته من خلال إنشاء ساعة قماشية. أخيرًا ، ضع كل ذلك معًا وقم بإنشاء بعض ألعاب HTML5 الأساسية المختلفة.
        • Eloquent JavaScript ، الفصل 16: الرسم على القماش: تم تصميم هذا النص لتعليم مبرمجي JavaScript ، وليس فقط تعليم مطوري الويب الحيل البسيطة. هذا الكتاب الإلكتروني التفاعلي بأكمله هو منجم ذهب ، ولكن إذا كان تركيزك ينصب بشكل مباشر على تعلم كيفية العمل مع عنصر اللوحة ، فإن الفصل 16 سيوفر أساسًا ثابتًا لكيفية تفاعل JavaScript وعنصر HTML HTML.

        مع فهم قوي لأساسيات اللوحة ، ستحتاج إلى الانتقال إلى التقنيات المتقدمة:

        • Creative JS 31 Days of Canvas Tutorials: إتقان عنصر اللوحة القماشية في الشهر (أكثر أو أقل). أكمل هذه السلسلة وستتعلم العديد من تقنيات الرسوم المتحركة القماشية المتقدمة.
        • دراسة حالة HTML5 Rocks: Building Racer: ألق نظرة على دراسة الحالة هذه وستتعرف على كيفية عمل المهندسين المحترفين في Google مع جافا سكريبت واللوحة القماشية.

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

        • CSS-Tricks Learning Canvas: لعبة صنع الثعبان: تشتهر CSS-Tricks بتوفير دروس ومقالات ممتازة من الناحية الفنية. اتبع على طول هذا البرنامج التعليمي وأنتج لعبة ثعبان ممتعة بينما تتعلم في نفس الوقت كيفية العمل مع قماش من مهندس أمامي في Twitter.
        • دليل HTML5 Rocks No Tears لألعاب HTML5: سيرشدك هذا البرنامج التعليمي خطوة بخطوة خلال عملية بناء لعبة بسيطة لغزو الفضاء.
        • Envato Tuts + إنشاء لغز مبادلة بلاط HTML5 قماش: تعلم كيفية استخدام قماش وجافا سكريبت لبناء أحجية تبديل البلاط في هذا البرنامج التعليمي. ستكون النتيجة تطبيقًا بسيطًا بصعوبة قابلة للتعديل يمكنك استخدامها مع أي صورة.
        • Dev.Opera إنشاء ألعاب Pseudo 3D باستخدام HTML 5 Canvas و Raycasting: سيوضح لك هذا البرنامج التعليمي كيفية إنشاء خريطة لعبة ثلاثية الأبعاد زائفة باستخدام HTML5 واللوحة القماشية بأسلوب اللعبة الأسطورية في التسعينيات Wolfenstein 3D. في حين أن هذا البرنامج التعليمي لن ينتج لعبة إطلاق نار ثلاثية الأبعاد وظيفية ثلاثية الأبعاد ، ستتعلم كيفية إنشاء خريطة ثلاثية الأبعاد قابلة للملاحة كاملة مع الدعائم والحراس.

        لا توجد طريقة أفضل لتطوير إتقان موضوع ما من العمل من خلال نص أو نصين متعمقين. فيما يلي ثلاثة من أفضل نصوص HTML5 المتاحة اليوم:

        • HTML5 Canvas (2013) بواسطة Fulton و Fulton: تعلم كيفية إنشاء تطبيقات ويب وسائط متعددة تفاعلية باستخدام Canvas و JavaScript. يغطي هذا النص رسومات بسيطة ثنائية الأبعاد ، واستخدام الخوارزميات لتطوير الحركة القائمة على الرياضيات ، واستخدام الفيديو والصور ، مما يجعل تطبيقات اللوحات القماشية تستجيب ، والمزيد.
        • رسومات جافا سكريبت فائقة الشحن: باستخدام لوحة HTML5 و jQuery والمزيد (2011) بواسطة Raffaele Cecco: سيساعدك هذا النص المتقدم على إتقان لوحة HTML5 ويتضمن تقنيات متقدمة مثل اكتشاف التصادم ومعالجة الكائنات والتمرير السلس وأدوات Google لتصور البيانات.
        • لوحة HTML5 الأساسية: الرسومات ، والرسوم المتحركة ، وتطوير الألعاب (2011) من تأليف ديفيد جيري: هذا ليس نصًا للمبتدئين. تم تصميمه ليقرأه المطورين ذوي الخبرة الذين لديهم فهم متوسط ​​المستوى لجافا سكريبت. في حين أن هذا النص يغطي أساسيات اللوحات القماشية ، إلا أنه ينصب على الموضوعات المتقدمة مثل تطوير الألعاب وعناصر التحكم في التطبيقات المخصصة وتطبيق الفيزياء على ألعاب HTML5 وتطوير تطبيقات الجوال.

        العناصر التفاعلية

        أضاف HTML5 بعض السمات لتسهيل إنشاء صفحات الويب التفاعلية.

        التفاصيل والعلامات الموجزة

        باستخدام HTML5 ، من الممكن إنشاء قوائم يمكن توسيعها وطيها من خلال العلامات. على الرغم من أن القوائم ذات التعداد النقطي يمكن إنشاؤها مثل الإصدارات السابقة من HTML باستخدام

          و
        • هذه العلامات ثابتة ولا يمكن طيها.
          جزء

          لتوفير نقطة بداية للقائمة ، يجب أن يبدأ المطورون بالعنصر. يعمل هذا العنصر بشكل مشابه لـ

            بطاقة شعار. يوضح المثال التالي طريقة لبدء مقطع التعليمات البرمجية بهذه العلامة:

            ...

            لا تكفي إضافة علامات التفاصيل لإكمال القائمة. يجب إضافة علامات الملخص أيضًا.

            جزء

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

            يمكن تحديد محتوى علامة التلخيص بأي عنصر HTML بما في ذلك

            أو

              . فيما يلي مثال بسيط على استخدام العلامات والعلامات:

              تسمية القائمة

              معلومات التفاصيل هنا...

              من الممكن أيضًا تضمين العلامات والعلامات داخل مجموعة أخرى. سيؤدي هذا إلى إنشاء قائمة قابلة للطي / قابلة للتوسيع داخل قائمة أخرى.

              فيما يلي مثال لقائمة ضمن قائمة أخرى باستخدام العلامات والعلامات:

              قائمة العناصر

              البند 1

              البند 2

              البند 3

              البند أ

              البند ب

              البند 4

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

              ستحتوي علامة الملخص على السؤال بينما سيتم ملء المحتوى القابل للطي بالإجابة.

              القائمة وعلامات Menuitem

              أثناء تصفح الويب ، يمكن للمستخدمين الوصول إلى قائمة المتصفح بنقرة زر الماوس الأيمن. تختلف عناصر القائمة التي تظهر من متصفح لآخر. مع بعض علامات HTML5 الجديدة ، من الممكن تخصيص القائمة لإضافة إجراءات إضافية يمكن للمستخدمين اتخاذها.

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

              العلامات التي تجعل هذا ممكنًا هي والعلامات. نظرًا لأن هذه علامات تجريبية ، فهي غير مدعومة على نطاق واسع. Firefox هو المتصفح الرئيسي الوحيد الذي يدعمهم حاليًا.

              جزء

              في أي وقت يجب إضافة عنصر قائمة ، يجب أن تبدأ سلسلة العناصر بالعلامة. انتهت هذه السلسلة بعلامة الإغلاق, .

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

              ...

              في هذه الحالة ، ستظهر عناصر القائمة المخصصة عندما ينقر المستخدم بزر الماوس الأيمن على زر "tmpDiv". مثل معظم علامات HTML5 ، تحتوي علامة القائمة أيضًا على سمات تسمى التسمية والنوع.

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

              جزء

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

              تتضمن سمات علامة menuitem التسمية والرمز ونقرة واحدة.

              تحدد التسمية النص الذي سيراه المستخدم لعنصر القائمة عند تنشيط القائمة من المستعرض. يمكن للمطورين تحديد الرمز المستخدم لعنصر القائمة الذي سيظهر على يسار النص. تتحكم سمة onclick في الإجراءات التي يتم اتخاذها عند تنشيط عنصر القائمة من قبل المستخدم.

              الإجراءات التي تتخذها سمة onclick يمكن أن تنفذ شفرة جافا سكريبت. على سبيل المثال ، يمكن للمستخدمين رؤية مربع تنبيه. فيما يلي مثال على كيفية إعداد علامة menuitem التي ستعرض نافذة منبثقة تقول "مرحبًا":

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

              السحب والإسقاط الأصلي

              قبل HTLM5 ، كان على المطورين استخدام مكتبات JavaScript مثل jQuery UI أو Dojo لإضافة الرسوم المتحركة السحب والإفلات إلى مواقع الويب والتطبيقات.

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

              اللبنات

              من أجل بناء تفاعل السحب والإفلات ، سيحتاج ترميز HTML الخاص بك إلى تضمين ثلاثة أنواع من العناصر:

              • عنصر مصدر: العنصر الذي سيتم سحبه ، يتم تعيينه على هذا النحو من خلال سمة HTML5 draggable ="صحيح".
              • عنصر مستهدف: العنصر الذي سيتم فيه إسقاط العنصر المسحوب ، ويسمى على هذا النحو بسمة HTML5 droppable ="صحيح".
              • حمولة: البيانات التي سيتم نقلها عند إسقاط عنصر تم سحبه.

              سحب وإسقاط أحداث API

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

              • يتم إطلاق حدث السحب عند تحديد كائن قابل للسحب.
              • يتم إطلاق حدث أداة السحب عندما يدخل مؤشر الماوس كائنًا يمكن إسقاطه أثناء تحديد كائن قابل للسحب.
              • يتم إطلاق حدث السحب في كل مرة يتحرك فيها الماوس أثناء تحديد كائن قابل للسحب ويكون مؤشر الماوس فوق كائن يمكن إسقاطه.
              • يتم تشغيل حدث السحب عندما يتم تحديد كائن قابل للسحب ويترك مؤشر الماوس كائنًا يمكن إسقاطه.
              • يتم إطلاق حدث السحب عندما يتم إلغاء تحديد كائن قابل للسحب عن طريق تحرير زر الماوس أو مغادرة نافذة المتصفح.
              • يتم إطلاق حدث الإسقاط عندما يتم إسقاط كائن قابل للسحب على كائن يمكن إسقاطه.
              • يتم استخدام كائن dataTransfer للاحتفاظ بالبيانات المسحوبة.

              مثال السحب والإسقاط

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

              المقالة التي شكلت مصدر إلهام لهذا المثال هي HTML5 Rocks: Native HTML5 Drag and Drop.

              لنبدأ بـ HTML

              تطبيق DnD المفضل
              HTML51
              مسج UI2
              دوجو 3

              لقد أنشأنا ثلاثة divs ، يحتوي كل منها على جزء من النص المتعلق بتنفيذ السحب والإسقاط بشكل مختلف. لقد تقدمنا ​​أيضًا ورتبنا الثلاثة في ترتيب افتراضي مع تفضيل معين 1 و 2 و 3.

              أعطيت كل شعبة سمة droppable ="صحيح" وقابل للسحب ="صحيح" لتعكس حقيقة أننا سنجعل الثلاثة قابلين للتبديل مع بعضهم البعض.

              يتيح إضافة بعض التصميم الأساسي.

              #مربعات {
              محاذاة النص: مركز ؛
              العرض: 100٪ ؛
              العرض الأقصى: 658 بكسل ؛
              الهامش: 0 تلقائي
              الهامش: 0 تلقائي
              font-family: "Source Sans Pro" و FreeSans و Arimo,"Droid Sans",Helvetica ، Arial ، sans-serif ؛
              تجاوز: السيارات ؛
              }}
              .العنوان {
              العرض محجوب؛
              حجم الخط: 1.25em ؛
              الحشو: 10 بكسل ؛
              }}
              .صندوق {
              لون الخلفية: # bcd5e0 ؛
              الحد: 2 بكسل صلب #aaa ؛
              الهامش: 10 بكسل ؛
              المؤشر: الخطوة ؛
              تجاوز: السيارات ؛
              }}
              .box .dnd-tech {
              حجم الخط: 1em ؛
              عرض: كتلة مضمنة ؛
              المساحة المتروكة: 10 بكسل 0 ؛
              }}
              .box .position {
              حجم الخط: 1em ؛
              تعويم: اليسار؛
              الحشو: 10 بكسل ؛
              الحد الأيمن: 2 بكسل صلب #aaa ؛
              اللون: #fff ؛
              لون الخلفية: # 0a5194 ؛
              }}

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

              قم بالسحب والإفلات

              دعنا ننشئ بعض الأنماط التي سيتم تطبيقها على العناصر القابلة للسحب والقابلة للسحب أثناء سحبها وإسقاطها.

              .box.dragged {
              التعتيم: .5 ؛
              }}
              .box.over {
              الحد: 2 بكسل متقطع # 222 ؛
              التعتيم: .5 ؛
              }}

              إلى جافا سكريبت. دعنا نبدأ بإنشاء الوظائف التي ستتعامل مع إضافة وإزالة الفئات المسحوبة والفوقية بناءً على نشاط المستخدم.

              دالة dragStartHandler (e) {
              this.classList.add ("تم السحب") ؛
              }}

              وظيفة السحبEnterHandler (e) {
              this.classList.add ('over') ؛
              }}

              دالة dragLeaveHandler (e) {
              this.classList.remove ('over') ؛
              }}

              الدالة dragEndHandler (e) {
              [] .forEach.call (الصناديق ، الوظيفة (الصندوق) {
              box.classList.remove ('over'، 'dragged') ؛
              }) ؛
              }}
              var boxes = document.querySelectorAll ('# boxes .box') ؛

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

              ستضيف الوظيفة الأولى ، dragStartHandler ، الفئة المسحوبة إلى العنصر المسحوب.

              ستضيف الوظيفتان التاليتان الطبقة الزائدة وإزالتها من العناصر القابلة للتخطي مع مرور عنصر مسحوب عليها.

              تتكرر الوظيفة النهائية من خلال جميع المربعات وتزيل الطبقات التي تم سحبها.

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

              دالة dragOverHandler (e) {
              if (e.preventDefault) {
              e.preventDefault () ؛
              }}
              عودة كاذبة؛
              }}

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

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

              الدالة dragStartHandler (e) {
              this.classList.add ("تم السحب") ؛

              dragData = هذا ؛
              e.dataTransfer.setData ('text / html'، this.firstElementChild.innerHTML) ؛
              }}

              الدالة dropHandler (e) {
              if (e.stopPropagation) {
              e.stopPropagation () ؛
              }}
              if (dragData! = this) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML؛
              this.firstElementChild.innerHTML = e.dataTransfer.getData ('text / html')؛
              }}
              عودة كاذبة؛
              }}

              لقد رأينا بالفعل وظيفة dragStartHandler ، لكننا أضفنا الآن خطين. الأول ، يعين الصندوق المسحوب إلى متغير السحب.

              يستخدم الثاني أسلوب setData للكائن dataTransfer لتعيين HTML الداخلي للعنصر الفرعي الأول للمربع المحدد (عنصر الاسم) إلى كائن dataTransfer.

              توقف وظيفة dropHandler أولاً السلوك الافتراضي للمتصفح. بعد ذلك ، يتحقق للتأكد من أن الكائن المسحوب ليس أيضًا الكائن القابل للتخطي. إذا لم يكن الأمر كذلك ، فإن الخطين التاليين يبدأان ويتبادلان أسماء المربعات القابلة للسحب والقابلة للسحب.

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

              [] .forEach.call (الصناديق ، الوظيفة (الصندوق) {
              box.addEventListener ('dragstart'، dragStartHandler، false) ؛
              box.addEventListener ('dragenter'، dragEnterHandler، false) ؛
              box.addEventListener ('dragover' ، dragOverHandler ، false) ؛
              box.addEventListener ("dragleave" ، dragLeaveHandler ، false) ؛
              box.addEventListener ('drop' ، dropHandler ، false) ؛
              box.addEventListener ('dragend'، dragEndHandler، false) ؛
              }) ؛

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

              #مربعات {
              محاذاة النص: مركز ؛
              العرض: 100٪ ؛
              العرض الأقصى: 658 بكسل ؛
              الهامش: 0 تلقائي
              font-family: "Source Sans Pro" و FreeSans و Arimo و "Droid Sans" و Helvetica و Arial و sans-serif ؛
              تجاوز: السيارات ؛
              }}
              .العنوان {
              العرض محجوب؛
              حجم الخط: 1.25em ؛
              الحشو: 10 بكسل ؛
              }}
              .صندوق {
              لون الخلفية: # bcd5e0 ؛
              الحد: 2 بكسل صلب #aaa ؛
              الهامش: 10 بكسل ؛
              المؤشر: الخطوة ؛
              تجاوز: السيارات ؛
              }}
              .box .dnd-tech {
              حجم الخط: 1em ؛
              عرض: كتلة مضمنة ؛
              المساحة المتروكة: 10 بكسل 0 ؛
              }}
              .box .position {
              حجم الخط: 1em ؛
              تعويم: اليسار؛
              الحشو: 10 بكسل ؛
              الحد الأيمن: 2 بكسل صلب #aaa ؛
              اللون: #fff ؛
              لون الخلفية: # 0a5194 ؛
              }}
              .box.dragged {
              التعتيم: .5 ؛
              }}
              .box.over {
              الحد: 2 بكسل متقطع # 222 ؛
              التعتيم: .5 ؛
              }}

              تطبيق DnD المفضل

              HTML51
              مسج UI2
              دوجو 3

              دالة dragStartHandler (e) {
              this.classList.add ("تم السحب") ؛

              dragData = هذا ؛
              e.dataTransfer.setData ("text / html"، this.firstElementChild.innerHTML) ؛

              }}

              وظيفة السحبEnterHandler (e) {
              this.classList.add ("over") ؛
              }}

              دالة dragLeaveHandler (e) {
              this.classList.remove ("over") ؛
              }}

              دالة dragOverHandler (e) {
              if (e.preventDefault) {
              e.preventDefault () ؛
              }}
              عودة كاذبة؛
              }}

              الدالة dropHandler (e) {
              if (e.stopPropagation) {
              e.stopPropagation () ؛
              }}
              if (dragData! = this) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML؛
              this.firstElementChild.innerHTML = e.dataTransfer.getData ("text / html") ؛
              }}
              عودة كاذبة؛
              }}

              الدالة dragEndHandler (e) {
              [] .forEach.call (الصناديق ، الوظيفة (الصندوق) {
              box.classList.remove ("انتهى" ، "سحب") ؛
              }) ؛
              }}

              var boxes = document.querySelectorAll ("# boxes .box") ؛
              [] .forEach.call (الصناديق ، الوظيفة (الصندوق) {
              box.addEventListener ("dragstart" ، dragStartHandler ، false) ؛
              box.addEventListener ("dragenter" ، dragEnterHandler ، false) ؛
              box.addEventListener ("dragover" ، dragOverHandler ، false) ؛
              box.addEventListener ("dragleave" ، dragLeaveHandler ، false) ؛
              box.addEventListener ("drop"، dropHandler، false) ؛
              box.addEventListener ("dragend" ، dragEndHandler ، false) ؛
              }) ؛

              ماذا تنتظر?

              يضيف HTML5 دعم المتصفح الأصلي للعناصر القابلة للسحب والقابلة للتخطي. يتضمن تنفيذ وظيفة السحب والإفلات معالجة ستة أحداث سحب وإفلات مختلفة وكائن بيانات واحد باستخدام JavaScript.

              Iframe

              في الأساس ، إن iframe هو عنصر HTML الذي ينشئ نافذة متصفح صغيرة متداخلة داخل صفحة ويب يمكنك من خلالها تحميل أي مستند HTML.

              ما هي إطارات iframe المستخدمة ل?

              أحد الاستخدامات الأكثر شيوعًا لإطارات iframe على الويب الحديث هو تضمين بث الوسائط على صفحة ويب. تستخدم مواقع بث الوسائط مثل Spotify و Vimeo و YouTube إطارات iframe للسماح بتضمين محتواها في مواقع ويب أخرى.

              على سبيل المثال ، انتقل إلى YouTube وافتح أي فيديو وانقر بزر الماوس الأيمن على الفيديو وحدد نسخ كود التضمين. عند القيام بذلك ، سيتم نسخ الرمز الذي يبدو كهذا إلى الحافظة الخاصة بك:

              أضف هذا الرمز من الشفرة إلى صفحة ويب وسيتم استخدام iframe لتحميل فيديو YouTube المستضاف على عنوان URL المشار إليه بواسطة سمة src.

              دفق الوسائط ليست الشيء الوحيد المناسب لإطارات iframe. طريقة أخرى لاستخدام إطارات iframe هي عزل المحتوى عن باقي صفحة الويب. فيما يلي مثالان:

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

              HTML 4.01 Iframe

              تم تقديم عنصر iframe في HTML 4.01 ويتضمن أربع سمات أساسية:

              • src: تحدد عنوان URL لمستند HTML المراد تقديمه في iframe.
              • العرض والارتفاع: يشير إلى حجم iframe بالبكسل.
              • الاسم: يسمح باستهداف إطار iframe بواسطة عنصر أو نموذج أو زر أو عناصر إدخال.

              تضمنت HTML 4.01 أيضًا مجموعة من السمات الإضافية ذات الأهمية الثانوية. ومع ذلك ، تم إهمال العديد من هذه أو إزالتها بالكامل في HTML5.

              تمت إزالة سمات Iframe بواسطة HTML5

              كانت أكبر مجموعة من السمات المحذوفة هي تلك التي عالجت العوامل التي يتم التعامل معها بشكل أفضل مع CSS.

              • تم تجاهل سمة المحاذاة لصالح استخدام خصائص CSS العائمة والعرضية والهامش للتحكم في تخطيط iframe.
              • تم إهمال سمة فرام حدود الحدود لصالح حدود CSS.
              • تم تجاهل سمات الهامش وعرض الهامش لصالح حشو CSS.
              • تم تجاهل سمة التمرير لصالح تطبيق overflow: hidden؛ لإخفاء أشرطة تمرير iframe.

              عانت سمة أخرى ، longdesc ، من سوء الاستخدام على نطاق واسع. ونتيجة لذلك ، فقد عفا عليه الزمن الآن.

              تمت إضافة سمات Iframe بواسطة HTML5

              أضاف HTML5 سمتين جديدتين إلى عنصر iframe: sandbox و srcdoc.

              تُستخدم سمة sandbox للحد من إمكانات محتوى iframe.

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

              على سبيل المثال ، sandbox ="أشكال السماح" سيسمح بتقديم النماذج في iframe. تتضمن القيم الإضافية لهذه السمة ، على سبيل المثال لا الحصر ، allow-popups و allow-same-origin و allow-scripts و allow-top-navigation.

              يمكن استخدام السمة srcdoc لتحديد HTML لتقديمه في iframe. على سبيل المثال ، الكود التالي سيعرض صورة في iframe:

              موارد Iframe

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

              البيانات الجزئية

              عندما تزور مراجعات الاستضافة الخاصة بنا ، قد ترى شيئًا مثل "752 تعليقًا" وتقييم مضيف "4 من 5 نجوم". بشكل غريزي ، أنت تدرك أنه تم دمج 752 تعليقًا من المستخدمين لإنشاء تصنيف مضيف مجمع لـ 4 من أصل 5 نجوم.

              ومع ذلك ، فإن محركات البحث ليست ذكية تمامًا مثلك ، وهنا تأتي البيانات الجزئية.

              البيانات الجزئية هي مجموعة من سمات HTML التي تمت إضافتها كجزء من مواصفات HTML5 لتوفير تصنيفات قابلة للقراءة آليًا لأنواع معينة من المحتوى. يسمح استخدام هذه العلامات لمحركات البحث بفهم محتوى موقعك وفهرسته بشكل أفضل وإنتاج نتائج بحث أفضل.

              أساسيات البيانات الجزئية

              تتكون البيانات الجزئية من أزواج قيمة الاسم ذات الصلة مجمعة معًا في عنصر واحد. دعونا نلقي نظرة على مثال معمم.

              نبدأ بعنصر ، مثل موقع ويب. بمجرد أن نعرف أننا نتعامل مع موقع ويب ، هناك العديد من أزواج قيمة الاسم التي قد نربطها بهذا الموقع ، مثل عنوان URL أو اسم موقع الويب أو الوصف.

              لإنشاء عنصر بيانات microdata ، سنبدأ بإنشاء عنصر أصل يحتوي على جميع البيانات الجزئية لموقع الويب. ثم سنقوم بإدراج البيانات الجزئية في العناصر الفرعية ووضع علامات عليها باستخدام علامات البيانات الجزئية المناسبة.

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

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

              ترميز البيانات الجزئية

              هناك أربع سمات للبيانات الجزئية تشكل جزءًا من مواصفات HTML5:

              • itemscope هي السمة التي تنشئ عنصرًا جديدًا.
              • يتم إضافة نوع العنصر إلى جانب نطاق العناصر لتحديد نوع العنصر الذي يتم إنشاؤه. في معظم الحالات ، يتم استخدام نوع عنصر schema.org.
              • يضاف itemprop إلى كل عنصر يحتوي على خاصية من النوع.
              • يُضاف itemref إلى عنصر itemscope ويرتبط العناصر التي لا ترتبط مباشرة بنسل عنصر منظار items مع العنصر.

              دعنا نضيف كل هذه السمات إلى تصنيف مضيف ويب خيالي حتى تتمكن من رؤيتها جميعًا في العمل.

              استضافة سوبر لينكس

              مصنف:
              4 من أصل 5 نجوم بواسطة
              423 مراجعة حقيقية للمستخدم.

              استعراض المستخدم المميز

              هذا مضيف عظيم! أنا أحبهم!
              5 من أصل 5 نجوم!

              ينشئ الرمز أعلاه عنصرًا يحتوي على عدد من أزواج قيمة الاسم:

              • أولاً ، أنشأنا عنصر شركة.
              • تم تعيين اسم العنصر على Super Linux Hosting.
              • تم تعيين عنوان URL الخاص بالعنصر على http://superlinuxhosting.com
              • المراجعة المجمعة للعنصر عبارة عن عنصر متداخل يحتوي على زوجين من قيم الاسم: قيمة تصنيف 4 خارج 5 نجوم وعدد مراجعة 423.
              • أخيرًا ، عن طريق السمة itemref المضافة إلى العنصر الأول ، فإن زوج القيمة الاسم الأخير هو مراجعة تتضمن قيمة زوجي قيمة الاسم: وصف وتصنيف 5 من 5 نجوم.

              مع وجود البيانات الجزئية ، ستقوم Google ومحركات البحث الأخرى بفهرسة المعلومات والتعرف على شركة Super Linux Hosting والتقييم الكلي المرتبط والمراجعة الفردية.

              موارد البيانات الجزئية

              إذا كنت ترغب في معرفة المزيد عن البيانات الجزئية ، فهناك مكانان يجب عليك الذهاب إليهما:

              • بدء استخدام Schema.org يعد استخدام البيانات الجزئية مقدمة سهلة المتابعة لهذا الموضوع. بالإضافة إلى ذلك ، ستحتاج إلى الاحتفاظ بقائمة جميع أنواع عناصر schema.org في متناول اليد.
              • HTML: معيار المعيشة ، القسم 5 البيانات الجزئية هو نظرة تقنية على البيانات الجزئية. إذا كنت تريد تعلم استخدام البيانات الجزئية للتطبيقات المخصصة بخلاف schema.org ، فهذه هي الموارد التي تبحث عنها.

              السمات العالمية

              يمكن إضافة السمات إلى أي عنصر HTML لتعديل الوظيفة أو السلوك الافتراضي للعنصر. تتم إضافتها عن طريق تسمية السمة ثم تحديد قيمة السمة داخل العلامة الافتتاحية للعنصر ، مثل هذا:

              المحتوى

              لا يمكن تطبيق معظم السمات إلا على أنواع معينة من العناصر. ومع ذلك ، يمكن استخدام السمات الأخرى ، المشار إليها باسم السمات العامة ، مع أي عنصر HTML. تحدد مواصفات HTML5 السمات العامة التالية:

              • مفتاح الوصول: يعين اختصار لوحة مفاتيح لعنصر.
              • class: يضيف اسم فئة للسماح باستهداف عنصر باستخدام Cascading Style Sheets (CSS) للتصميم أو برنامج JavaScript.
              • contenteditable: يجعل عنصرًا قابلاً للتعديل بواسطة زائر موقع الويب.
              • contextmenu: يربط خيار قائمة سياق مخصص بعنصر.
              • data- *: سمة بيانات مخصصة يمكن استخدامها للاحتفاظ بمعلومات خاصة بالصفحة لاستخدام التحديد ضمن أوراق CSS أو برامج JavaScript.
              • دير: يعين الاتجاه إلى المحتوى النصي للعنصر.
              • قابل للسحب: يسمح بسحب عنصر باستخدام دعم HTML5 الأصلي لأحداث السحب والإفلات.
              • منطقة الإسقاط: تحدد الإجراء الذي يجب أن يتم عند إسقاط عنصر تم سحبه. تشمل الخيارات النسخ والربط والتحريك.
              • مخفي: يستخدم لإخفاء عنصر حتى يتم عرضه. تتم إزالة السمة باستخدام JavaScript عندما يكون ذلك مناسبًا للقيام بذلك.
              • id: يقوم بتعيين معرف فريد لعنصر.
              • lang: تحدد لغة المحتوى في العنصر المرتبط.
              • التدقيق الإملائي: يحدد ما إذا كان يجب فحص إدخال المستخدم للتهجئة.
              • النمط: يسمح بإرفاق أنماط CSS مباشرة بعنصر HTML.
              • tabindex: يحدد الموضع في فهرس علامات التبويب الذي يجب أن يظهر فيه العنصر.
              • العنوان: يضيف نصًا يتم عرضه كنص أداة عندما يمرر الزائر الماوس فوق العنصر.
              • ترجمة: تُستخدم لمنع ترجمة المستعرض للمحتوى النصي لعناصر HTML محددة.

              معالجات الأحداث

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

              تتضمن القائمة أدناه جميع سمات معالج الأحداث متبوعة بوصف للحدث الذي يقوم بتشغيل المعالج.

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

              • onabort: تم إحباط تحميل عنصر.
              • onfocus و onblur: عنصر تلقى التركيز أو فقده.
              • oncancel: رفض المستخدمون عنصر حوار.
              • oncanplay و oncanplaythrough: قام عنصر وسائط بتنزيل بيانات كافية لبدء التشغيل أو لإكمال التشغيل دون تخزين مؤقت.
              • عند التغيير: تغيرت قيمة عنصر النموذج ، مثل عنصر إدخال أو عنصر نص.
              • onclick و ondblclick: تم النقر على عنصر أو النقر عليه نقرًا مزدوجًا.
              • onclose: حدث واحد من عدة أحداث قريبة مختلفة.
              • oncontextmenu: تم فتح قائمة السياق عن طريق النقر بزر الماوس الأيمن على العنصر.
              • oncopy و oncut و onpaste: تم قص العنصر المستهدف أو نسخه أو لصقه.
              • oncuechange: قام مسار نصي مرتبط بمورد وسائط بتغيير الإشارات المعروضة حاليًا.
              • ondrag ، ondragend ، ondragenter ، ondragexit ، ondragleave ، ondragover ، ondragstart ، ondrop: يتم التعامل مع عنصر قابل للسحب باستخدام HTML5 السحب والإفلات API.
              • ondurationchange: تم تغيير سمة المدة لعنصر وسائط.
              • onemptied: أصبح عنصر الوسائط فارغًا.
              • onended: تم الوصول إلى نهاية عنصر الوسائط.
              • onerror: فشل تحميل المورد.
              • oninput: تغيرت قيمة عنصر الإدخال أو المحتوى القابل للتعديل.
              • oninvalid: فشل العنصر المرسل في التحقق من الصحة.
              • onkeydown و onkeypress و onkeyup: حدث حدث صحفي لمفتاح لوحة المفاتيح.
              • onload ، onloadeddata ، onloadedmetadata ، onloadstart: إما أن المورد بأكمله أو الجزء المحدد من المورد قد أكمل التحميل.
              • onmousedown و onmouseenter و onmouseleave و onmousemove و onmouseout و onmouseover و onmouseup: حدث تفاعل قائم على الماوس بين المستخدم والعنصر.
              • في عجلة واحدة: تم تدوير زر عجلة الماوس.
              • onplay and onplaying: بدأ تشغيل عنصر وسائط أو تم إيقافه مؤقتًا (إما عن قصد أو أثناء انتظار بيانات إضافية) وهو جاهز لاستئناف التشغيل.
              • onpause: تم إيقاف تشغيل الوسائط مؤقتًا.
              • onprogress: بدأت عملية وهي قيد التقدم.
              • عند التغيير: تغير معدل تشغيل الوسائط.
              • onreset: تمت إعادة تعيين عنصر نموذج.
              • عند تغيير الحجم: تم تغيير حجم إطار عرض المستند.
              • onscroll: تم تمرير إطار العرض أو العنصر.
              • onseeked and onkingking: تم استخدام ميزة البحث عن عنصر وسائط أو قيد الاستخدام.
              • عند الاختيار: تم تحديد بعض محتويات العنصر.
              • onshow: تم تشغيل قائمة السياق بينما يحتوي العنصر محل التركيز على سمة contextmenu.
              • عند التثبيت: تأخر استرداد الوسائط أو توقف بشكل غير متوقع.
              • onsubmit: تم إرسال عنصر نموذج.
              • onsuspend: تم تعليق تحميل عنصر وسائط.
              • ontimeupdate: تم تحديث سمة الوقت الحالي لعنصر وسائط.
              • ontoggle: تم فتح أو إغلاق عنصر تفاصيل.
              • onvolumechange: تم تغيير حجم تشغيل عنصر الوسائط.
              • قيد الانتظار: توقف التشغيل أثناء انتظار تنزيل المزيد من البيانات.

              عناصر DOM

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

              يسمى هذا النموذج ، الذي تم إنشاؤه والاحتفاظ به محليًا في ذاكرة المستعرض ، طراز كائن المستند (DOM). داخل DOM ، يوجد كل عنصر HTML كعقدة مفردة ، ويشكل مجموع العقد DOM.

              الوصول إلى DOM

              من أجل برمجة لغات البرمجة مثل JavaScript للتفاعل مع DOM ، يجب أن تكون كل عقدة قابلة للاستدعاء باستخدام سمات وأساليب موحدة مستقلة عن اللغة.

              يتم تعريف هذه السمات والأحداث باستخدام لغة تعريف الواجهة (IDL) وتعرض سمات وأحداث IDL هذه عقد DOM للنصوص البرمجية المكتوبة بأي لغة برمجة ، على الرغم من أن JavaScript هي الأكثر شيوعًا.

              والنتيجة هي نظام يأخذ عنصر HTML (على سبيل المثال:

              بعض النصوص

              ) وإنشاء عقدة DOM تحتوي على كل تلك المعلومات (على سبيل المثال: عقدة p بقيمة بعض النص وسمات IDL className ="نص أساسي" والعنوان ="مثال").

              يمكن بعد ذلك استخدام لغات البرمجة النصية للتعامل مع عُقد DOM عن طريق الرجوع إلى سمات IDL للعقدة.

              سمات وطرق IDL الأساسية

              تحدد مواصفات HTML5 واجهة HTMLElement وتسرد عددًا من سمات IDL والأساليب التي تنطبق على جميع عناصر HTML.

              كل عقدة DOM فردية ترث كل سمات وطرق IDL هذه وقد تتوسع اختياريًا على واجهة HTMLElement بإضافة سمات وطرق إضافية.

              واجهة HTMLElement

              تنطبق واجهة HTMLElement على جميع عقد DOM ويمكن تقسيمها إلى ثلاث مجموعات: سمات البيانات الوصفية وتفاعلات المستخدم ومعالجات الأحداث العالمية.

              تتضمن سمات البيانات الوصفية ما يلي:

              • يتم تعيين سمة IDL للعنوان بواسطة سمة HTML للعنوان.
              • يتم تعيين سمة lang IDL بواسطة سمة lang HTML ويتم استخدامها لتحديد لغة المحتوى المتداخل داخل عقدة DOM. إذا لم يتم تقديم سمة lang ، فسيتم تضمين اللغة المعينة لأقرب عقدة رئيسية.
              • تُستخدم سمة الترجمة لمنع ترجمة العميل لمحتوى صفحة الويب. السمة الافتراضية للترجمة = نعم على مستوى المستند ويجب تعيينها يدويًا على الترجمة = لا لأية عُقد لا يجب ترجمتها.
              • تحدد السمة dir اتجاه النص المتضمن. السمة ليس لها قيمة افتراضية.
              • سمة مجموعة البيانات IDL هي تمثيل DOM للقراءة فقط لبيانات سمة البيانات المخصصة - *. عند إضافة سمات البيانات المخصصة إلى عنصر HTML ، على سبيل المثال data-postId ="6057", يتم تجميع سمات البيانات هذه في سمة IDL لمجموعة بيانات واحدة وتعيينها لعقدة DOM الناتجة.

              تتضمن تفاعلات المستخدم:

              • السمة المخفية هي قيمة منطقية تحدد ما إذا كانت عقدة DOM مرئية أم لا.
              • يحاكي الحدث click () تفاعل مستخدم النقر بالماوس.
              • تحدد السمة tabIndex الترتيب الذي ستظهر به عقدة DOM في فهرس علامات التبويب.
              • يحاكي حدث focus () تفاعل المستخدم الذي يتم التركيز على عقدة DOM المستهدفة فيه.
              • تُستخدم طريقة التمويه () لإلغاء تركيز عقدة DOM المستهدفة.
              • يتم تعيين سمة accessKey IDL من خلال سمة عنصر HTML لمفتاح الوصول وتعيين اختصار لوحة مفاتيح للعقدة المستهدفة.
              • تعد سمة keyKeyLabel IDL تمثيلاً للقراءة فقط لمفتاح الوصول المعين.
              • يتم تعيين سمة contentEditable IDL بواسطة سمة عنصر HTML القابل للتحرير وتحدد ما إذا كان يمكن للمستخدمين تحرير العقدة الهدف.
              • سمة isContentEditable IDL هي قيمة منطقية للقراءة فقط تشير إلى ما إذا كانت العقدة الهدف قابلة للتحرير.
              • تعد سمة التدقيق الإملائي IDL قيمة منطقية تحدد ما إذا كان يجب التحقق من محتوى عقدة DOM ، وعادة ما تكون عقدة إدخال ، من أجل التهجئة الصحيحة.

              يبلغ طول قائمة معالجات الأحداث العالمية خمسين مشاركة. تعتبر معالجات الأحداث العشرة التالية بعضًا من أهم معالجات الأحداث العالمية الأكثر استخدامًا:

              • عند النقر
              • مركز
              • onkeypress
              • على الحمل
              • onmouseenter
              • onmouseleave
              • على الفأرة فوق
              • onscroll
              • عند الاختيار
              • عند تقديم.

              نماذج

              كانت النماذج منذ فترة طويلة جزءًا من مواصفات HTML. ومع ذلك ، يتم توسيع وظائف نموذج HTML5 بشكل كبير مع السمات الجديدة لعناصر الإدخال والنموذج وأنواع الإدخال الجديدة وحتى بعض العناصر الجديدة تمامًا.

              أساسيات نموذج HTML

              عند إنشاء نموذج HTML ، يجب أن تبدأ بشكل عام بعلامة النموذج:

              بين هذه العلامات ، ستدمج مجموعة متنوعة من الحقول لقبول البيانات وإرسالها. أهم عناصر النموذج هي:

              • عنصر الإدخال ، الذي يتم تعيينه افتراضيًا في حقل النص القياسي. ومع ذلك ، باستخدام سمة النوع ، قد يتم تنسيق عناصر الإدخال لقبول كلمات المرور ، وإعادة تعيين جميع حقول النموذج ، وعرض أزرار الاختيار أو مربعات الاختيار ، وإنشاء الأزرار ، وإرسال محتويات النموذج.
              • عنصر textarea ، الذي يُستخدم لإنشاء مناطق إدخال نص للإجابات المكتوبة بشكل طويل.
              • عنصر التحديد ، الذي يُستخدم مع عنصر الخيار لإنشاء قوائم منسدلة. يقوم عنصر التحديد بإنشاء القائمة ويمثل كل خيار متداخل داخل عنصر التحديد خيارًا آخر متاحًا في القائمة.
              • عنصر الزر المستخدم لإنشاء أزرار النموذج.

              تحسينات نموذج HTML5

              قدم HTML5 العديد من أنواع المدخلات الجديدة ، وسمات المدخلات والنماذج ، وثلاثة عناصر جديدة للنموذج. دعنا نغطي كل واحد على حدة.

              أنواع عناصر الإدخال الجديدة:

              • يحدد نوع إدخال اللون حقلاً يجب أن يقبل لونًا وستقوم بعض المتصفحات بإنشاء منتقي الألوان عندما يكون الحقل قيد التركيز.
              • قدم HTML5 ستة أنواع جديدة من مدخلات الوقت والتاريخ ، كل منها سيولد محدد بيانات في المتصفحات المدعومة:
                • التاريخ: حدد التاريخ الذي يتضمن اليوم والشهر والسنة.
                • التاريخ والوقت: حدد التاريخ والوقت مع معلومات المنطقة الزمنية.
                • datetime-local: حدد التاريخ والوقت ، ولكن احذف معلومات المنطقة الزمنية.
                • الوقت: اختر الوقت.
                • الأسبوع: حدد أسبوعًا وسنة.
                • الشهر: حدد الشهر والسنة.
              • يتم استخدام نوع إدخال البريد الإلكتروني لتحديد الحقل الذي يجب أن يقبل عنوان البريد الإلكتروني. ستقوم المتصفحات المدعومة أيضًا بالتحقق من صحة الإدخال الأساسي للتأكد من كتابة عنوان بريد إلكتروني.
              • قدم HTML5 نوعين جديدين من المدخلات الموجهة للأرقام: الرقم والنطاق. يسمح الرقم بإدخال أي رقم ، مع مراعاة قيود الحد الأدنى والحد الأقصى للقيمة. ينشئ النطاق شريط تمرير ، مقيدًا بالقيم الدنيا والقصوى ، مما يسمح للمستخدم بتحديد قيمة داخل النطاق المحدد للقيم المقبولة.
              • يتم استخدام نوع إدخال البحث لتحديد مطالبة البحث.
              • يُستخدم نوع إدخال الهاتف لتحديد الحقل الذي يجب أن يقبل رقم الهاتف. ستقوم المتصفحات المدعومة بالتحقق من صحة الإدخال الأساسي للتأكد من إدخال رقم هاتف.
              • يحدد نوع إدخال عنوان url حقلاً يجب أن يقبل عنوان url. ستقوم المتصفحات المدعومة بالتحقق الأساسي ، وقد تعرض الأجهزة المحمولة المدعومة زرًا لطباعة .com.

              سمات عنصر الإدخال الجديدة:

              • الإكمال التلقائي: لتشغيل الإكمال التلقائي أو إيقاف تشغيله لعنصر الإدخال. إذا تم تشغيله ، فسيتم سحب قيم الإكمال التلقائي من إدخالات النموذج المحفوظة.
              • ضبط تلقائي للصورة: يحدد عنصر الإدخال الذي سيتم التركيز عليه تلقائيًا عند تحميل الصفحة.
              • النموذج: يستخدم معرفًا مخصصًا لنموذج لتوصيل عنصر إدخال غير متداخل داخل النموذج مع النموذج.
              • formaction: يتم تعيينه إلى حقل إرسال لتجاوز سلوك النموذج الافتراضي من خلال توفير عنوان URL بديل لمعالجة النموذج.
              • formenctype: يضاف إلى حقل إرسال لتحديد نوع التشفير لتطبيقه على البيانات المقدمة باستخدام طريقة النشر.
              • formmethod: تمت إضافته إلى حقل إرسال لتحديد طريقة HTTP أو النشر أو الحصول ، والتي يجب استخدامها لإرسال النموذج.
              • formnovalidate: يُستخدم مع حقل الإرسال لمنع التحقق من صحة المتصفح لبيانات النموذج.
              • الاستمارة: تمت إضافتها إلى حقل إرسال لإخبار المتصفح بعرض استجابة النموذج إما في النافذة الحالية أو في نافذة جديدة.
              • الطول والعرض: يستخدم لتحديد حجم النوع ="صورة" زر إرسال النموذج.
              • min and max: تُستخدم جنبًا إلى جنب مع رقم أو نطاق أو نوع إدخال موجه للوقت لتعيين قيمة الحد الأدنى والحد الأقصى التي يجب أن تقع القيمة المحددة بين.
              • متعددة: تستخدم مع نوع إدخال الملف أو البريد الإلكتروني للسماح للمستخدم بإضافة قيم متعددة.
              • النمط: يُستخدم لتعريف تعبير عادي لاستخدامه للتحقق من صحة البيانات المدخلة في حقل بريد إلكتروني أو كلمة مرور أو بحث أو هاتف أو نص أو عنوان url.
              • العنصر النائب: يعين نص العنصر النائب لعنصر الإدخال الذي ستتم إزالته عندما يتم التركيز على العنصر.
              • مطلوب: يحدد العنصر الذي يجب ملؤه قبل تقديم النموذج.
              • الخطوة: تُستخدم جنبًا إلى جنب مع الرقم ، أو النطاق ، أو نوع الإدخال الموجه للتاريخ لتحديد الخطوات التي يمكن عندها تحديد القيم. على سبيل المثال ، إضافة الخطوة ="10" إلى إدخال عدد يقتصر على القيم بين الحد الأدنى 0 والحد الأقصى 30 سيسمح بتقديم 0 أو 10 أو 20 أو 30.

              سمات عنصر النموذج الجديد:

              • الإكمال التلقائي: لتشغيل الإكمال التلقائي أو إيقاف تشغيله لنموذج كامل. لا يزال من الممكن التحكم في الإكمال التلقائي على أساس كل إدخال باستخدام نفس السمة على عناصر الإدخال الفردية.
              • novalidate: لإيقاف التحقق من المتصفح لإرسال نموذج.

              عناصر النموذج الجديدة:

              يقوم العنصر الحفاز بإنشاء قائمة منسدلة بالاقتراحات المحددة مسبقًا لعنصر الإدخال. لاحظ أن هذا العنصر لا يحدد حقل الإدخال بهذه القيم. وبدلاً من ذلك ، فإنها تعمل فقط كاقتراحات.

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

              يقوم عنصر الإخراج بإنشاء عنصر نائب لعرض نتيجة العملية ، مثل الحساب. لاحظ أن الإخراج لا يؤدي في الواقع أي حسابات - ستظل بحاجة إلى القيام بذلك باستخدام JavaScript أو برنامج من جانب الخادم - فهو يوفر ببساطة مكانًا لعرض النتيجة. فمثلا:

              الصيغة: y = mx + b

              المنحدر (م):

              قيمة س:

              التقاطع Y (ب):

              قيمة ص:

              إذا قمنا بعد ذلك بكتابة lineformula () في جافا سكريبت لمعالجة الحساب وإلقاء نظرة بلمسة على CSS ، فيمكننا إنتاج حاسبة JavaScript البسيطة والوظيفية التالية:

              دالة الشكل () {
              var y = 0 ؛
              var m = document.getElementById ("m"). value؛
              var x = document.getElementById (“x”). value؛
              var b = document.getElementById ("b"). value؛
              ص = + م * + س + + ب ؛
              document.getElementById (“y”). value = y؛
              }}

              # مثال - نموذج {
              العرض: 100٪ ؛
              الحد الأقصى للعرض: 400 بكسل ؛
              الهامش: 0 تلقائي
              الحد: 1 بكسل صلب #bbb ؛
              لون الخلفية: #eee ؛
              }}
              # example-form p input ، # example-form p output {{
              تعويم: يمين
              العرض: 100 بكسل ؛
              }}
              # example-form ص {
              تجاوز: السيارات ؛
              الحشو: 10 بكسل ؛
              الهامش: 0 ؛
              }}
              # example-form p: not (: last-child) {
              الحد السفلي: 1 بكسل صلب #bbb ؛
              }}

              الصيغة: y = mx + b

              المنحدر (م):

              قيمة س:

              التقاطع Y (ب):

              قيمة ص:

              تمت إضافة عنصر keygen أيضًا في HTML5 كطريقة لمصادقة المستخدمين. تم تصميم العنصر لإنشاء زوج مفاتيح عام - خاص يمكن استخدامه لضمان عرض نتائج إرسال النموذج فقط للمستخدم المناسب. ومع ذلك ، فإن العنصر مقسّم الآن للإزالة من مواصفات HTML5 ولا يجب استخدامه.

              العناصر الدلالية

              تم تصميم العديد من عناصر HTML لإضافة معنى دلالة إلى محتوى صفحة الويب. ما يعنيه هذا هو أن بعض عناصر HTML تنطوي على معنى محدد فيما يتعلق بمحتويات العنصر.

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

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

              لماذا يهم دلالات

              الدلالات مهمة لأربعة أسباب رئيسية على الأقل:

              • الدلالات تعزز إمكانية الوصول. التقنيات المساعدة تكون أكثر قدرة على نقل معنى صفحة الويب عندما يوفر تحديد عناصر HTML أدلة حول معنى محتوى الصفحة.
              • الدلالات تجعل المحتوى أكثر قابلية للاكتشاف. تكون محركات البحث أكثر قدرة على فهم محتوى صفحة الويب وفهرسته عند استخدام عناصر HTML وفقًا للغرض الدلالي المناسب لها.
              • العناصر الدلالية نعمة للتدويل. تم إدخال عناصر دلالية جديدة روبي وبيدي في HTML5 للتعرف بشكل أفضل على حقيقة أن أقل من 15 ٪ من العالم يتكون من متحدثين باللغة الإنجليزية.
              • تعمل الدلالات على تحسين قابلية التشغيل البيني من خلال تسهيل فهم المطورين والتطبيقات لمحتويات صفحة الويب والتفاعل معها.

              مع استمرار المسيرة نحو إنترنت كل شيء (IOE) بلا هوادة ، تزداد أهمية الدلالات أهمية متزايدة.

              يزداد استخدام الدلالات المناسبة ، في HTML وفي أشكال البرمجة الأخرى للويب ، أهمية أكبر مع تكاثر عدد وتنوع الأجهزة المتصلة بالإنترنت.

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

              إن الحصول على الدلالات الصحيحة هو المفتاح لضمان بقاء البيانات في متناول الجميع بمرور الوقت.

              دلالات في HTML قبل HTML5

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

              تم تحديد القوائم للمتصفح على أنها إما مرتبة أو غير مرتبة بطبيعتها باستخدام علامتي ol و ul. وبالمثل ، هناك قائمة واسعة من عناصر ما قبل HTML5 التي يمكن استخدامها داخل النص لإضافة معنى دلالة:

              • علامات em وعلامات قوية تعني التأكيد و تأكيد قوي.
              • تُستخدم علامات s و del و ins لتحديد المعلومات التي لم تعد قابلة للتطبيق أو تم استبدالها بمعلومات محدثة.
              • يتم استخدام علامات الاقتباس والاستشهاد لتحديد الاقتباسات والأعمال الإبداعية.
              • تُستخدم علامتا abbr و dfn لربط التعليقات التفسيرية بمصطلح يحتاج إلى تعريف.
              • يتم استخدام عناصر التعليمات البرمجية و samp و kbd و var لتحديد أنواع معينة من النص: رمز البرمجة ، ونموذج إخراج برنامج الكمبيوتر ، وإدخال لوحة المفاتيح ، ومتغيرات الصيغة على التوالي.
              • تحدد عناصر sup و sub المحتوى الذي يجب أن يظهر إما كنص منخفض أو مرتفع.

              في حين أن الكثير من عناصر HTML التي سبقت HTML5 تحمل معنى دلالة ، كان هناك عيب رئيسي في اللغة التي تناولها HTML5: نقص العناصر الدلالية الهيكلية.

              بنية مستند HTML قبل HTML5

              قبل HTML5 ، كان عنصر div هو الحاوية الأساسية المستخدمة لإضافة بنية إلى مستند صفحة الويب. كان ولا يزال من الشائع جدًا رؤية صفحات الويب التي تم إنشاؤها باستخدام divs وإنتاج هيكل مستند يبدو كالتالي:

              لا يستخدم هذا النهج لبناء بنية الصفحة مع عنصر div - وهي ممارسة يشار إليها باسم divitis - عناصر HTML نفسها للدلالة على أي معنى لبنية الصفحة. قبل HTML5 ، يمكن مسامحة المطورين لهذا النوع من الممارسة.

              ومع ذلك ، مع توفر العناصر الدلالية الهيكلية الجديدة في HTML5 ، هناك طريقة أفضل.

              العناصر الدلالية الهيكلية في HTML5

              قدم HTML5 العناصر التالية لاستخدامها بدلاً من حساء div المبين في المثال أعلاه. توفر هذه العناصر بنية للمستند بينما تتضمن في نفس الوقت معنى محددًا للأجزاء المختلفة من المستند:

              • تم تصميم العنصر الرئيسي لاحتواء المحتويات الأساسية لصفحة الويب. إذا أعاد أحد مواقع الويب استخدام نفس الرأس والتذييل عبر جميع الصفحات ، فسيتم حذفها عادةً من العنصر الرئيسي بينما قد يتم تضمين كل محتوى صفحة الويب الأخرى بشكل صحيح داخل العنصر الرئيسي.
              • يحتوي عنصر الرأس على محتويات تمهيدية حول صفحة ويب بأكملها أو قسم من صفحة الويب. من المناسب استخدامه للاحتفاظ بالرأس الذي يظهر في كل صفحة من موقع الويب وأيضًا استخدامه للاحتفاظ بالعنوان والمعلومات التمهيدية الأخرى في الجزء العلوي من المقالة أو قسم الصفحة.
              • تم تصميم عنصر التذييل لاحتواء معلومات تلخيصية عن العنصر الأصلي. يمكن استخدامه لاحتواء تذييل صفحة ويب يظهر على كل صفحة من موقع الويب وكذلك داخل مقال يحتوي على معلومات ملخص المقالة ، مثل التأليف والموضوعات وتاريخ النشر وتعليقات المستخدم.
              • يتم استخدام عنصر القسم لتجميع المحتوى المرتبط بالموضوع معًا ويبدأ عادةً بعنصر عنوان. على سبيل المثال ، في المدونة ، قد يكون الجزء الأساسي من الصفحة مقطعًا واحدًا بينما قد يشغل الشريط الجانبي قسمًا ثانيًا.
              • يتم استخدام عنصر التنقل لتحديد مجموعة روابط التنقل. عادةً ، تقتصر عناصر التنقل على عناصر التنقل التي يمكن إعادة استخدامها على مستوى الموقع ، مثل تلك التي تظهر في رؤوس صفحات الويب وتذييلاتها وأشرطةها الجانبية.
              • يتم استخدام عنصر المقالة لتجميع محتوى منطقي كوحدة مستقلة منفصلة عن صفحة الويب ، مثل منشور مدونة أو مقالة إخبارية. يمكن أن تحتوي المقالات على عناصر رأس وتذييل وقسم وعناصر جانباً.
              • يتم استخدام العنصر الجانبي لتحديد المعلومات التي يجب فهمها بصرف النظر عن التدفق الأساسي للمحتوى في العنصر الرئيسي.

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

              إذا قمنا بإعادة النظر في تخطيط div-soup وقمنا بمراجعته لتنفيذ هذه العلامات الجديدة ، فإننا نحصل على شيء يبدو كالتالي:

              العناصر الدلالية النصية في HTML5

              بالإضافة إلى العناصر الهيكلية التي تناولناها ، قدم HTML5 أيضًا عددًا من العناصر التي تتضمن أنواعًا محددة من المعنى إلى أجزاء من المحتوى النصي. دعنا نلقي نظرة عليهم:

              • يتم استخدام عنصر العنوان لتحديد معلومات العنوان المتعلقة بمؤلف أو مالك صفحة ويب أو مقال.
              • يتم استخدام عناصر الشكل والرسوم التوضيحية لتحديد المحتوى المرئي المرتبط بمحتوى صفحة الويب والتعليق عليه - مثل الرسم البياني أو الرسم التخطيطي أو الرسم التوضيحي - ولكن لا يلزم ظهوره مضمّنًا مع محتوى المستند.
              • يتم استخدام علامة العلامة لتحديد النص الذي له معنى محدد في السياق الحالي. على سبيل المثال ، يمكن استخدامه لتحديد كل ظهور لمصطلح بحث في صفحة تعرض نتائج البحث.
              • يعرّف عنصر الوقت جزءًا صغيرًا من النص على أنه يمثل نقطة زمنية محددة. يمكن استخدام السمة datetime لإضافة نسخة قابلة للقراءة آليًا للنقطة المحددة في الوقت المحدد إلى علامة الوقت.
              • يُستخدم عنصر bdi لعكس اتجاه اتجاه جزء من المحتوى للغات التي تتبع نمطًا من اليمين إلى اليسار.
              • تُستخدم عناصر الياقوت ، و rp ، و rt لتوفير مساعدات النطق ، أو الياقوت ، لبعض حروف اللغة الآسيوية..

              HTML ديناميكي

              HTML ديناميكي

              عندما تفكر في صفحة الويب الحديثة ، فإنك عادة لا تتصور موقع ويب ثابتًا. بفضل ظهور لغات البرمجة النصية مثل JavaScript و PHP ، فإن مواقع الويب التي نراها اليوم أكثر تفاعلية وديناميكية من سابقاتها.

              على الرغم من وجود مجموعة متنوعة من الأساليب لإنشاء صفحة ويب ديناميكية ، فهناك تقنية معينة ربما تكون على دراية بها ، على الرغم من أنك ربما لم تسمع كثيرًا عن: DHTML.

              اسم "DHTML" هو تسمية خاطئة قليلاً. بخلاف لغة الترميز HTML التي تستمد منها اسمها ، Dynamic Hypertext Markup Language هي في الواقع مصطلح يصف عددًا من التقنيات واللغات المستخدمة جنبًا إلى جنب لإنشاء مواقع ديناميكية.

              هذه هي العناصر الرئيسية الأربعة لـ DHTML:

              • لغة البرمجة: لغة الترميز المستخدمة لإنشاء صفحات وتطبيقات ثابتة.
              • CSS: اللغة المستخدمة للإملاء من خلال ورقة أنماط عرض صفحة.
              • جافا سكريبت: لغة البرمجة المستخدمة لتطوير العناصر التفاعلية على الصفحة.
              • دوم: واجهة البرمجة التي يمكن من خلالها تغيير رمز الصفحة.

              إذا كنت مهتمًا بمعرفة المزيد حول DHTML ، تتضمن قائمة الموارد التالية المواد المرجعية والأدلة التفصيلية والأدوات لمساعدتك على إنشاء صفحات ويب ديناميكية باستخدام DHTML.

              كتب

              على الرغم من أن مواقع الويب دائمًا ما تكون قاعدة صلبة رائعة للبدء منها ، فلا يمكنك أن تخطئ في الاستثمار في بعض موارد جانب الطاولة لتوجيهك عبر معلومات DHTML والخروج منها.

              • جافا سكريبت: الدليل النهائي (2006) بقلم ديفيد فلاناغان: هذا هو دليل الذهاب لتعلم جافا سكريبت بالإضافة إلى مادة مرجعية ممتازة لجميع المسائل المتعلقة بـ DHTML.
              • التصور التفاعلي للبيانات للويب: مقدمة للتصميم باستخدام D3 (2013) سكوت موراي: بمجرد أن تتعامل مع أساسيات DHTML ، استخدم هذا الدليل المفصل خطوة بخطوة لتعلم أساسيات تصميم المحتوى الديناميكي.
              • البرمجة النصية لـ DOM: تصميم الويب باستخدام JavaScript ونموذج كائن المستند (2010) بواسطة Keith and Sambells: المورد المثالي عندما تريد فهمًا أفضل لـ DOM والممارسة مع تطبيقات العالم الحقيقي.
              • الرسوم المتحركة على شبكة الإنترنت باستخدام جافا سكريبت: تطوير & تصميم (2015) من جوليان شابيرو: إذا كنت تتطلع إلى إتقان الرسوم المتحركة من خلال DHTML ، فراجع هذا.

              أدوات

              تهدف مساهمات الجهات الخارجية إلى DHTML إلى مساعدة المطورين على كتابة تعليمات برمجية أنظف وتصحيح الأخطاء بسهولة واستخدام نصوص مكتوبة مسبقًا لتعزيز جهودهم.

              • محرك ديناميكي: هذا الموقع مخصص لتزويد المطورين بنصوص JavaScript (وغيرها من DHTML) المجانية.
              • سلع DHTML: مورد آخر عبر الإنترنت يوفر نصوص DHTML (وأياكس) المجانية.
              • JavaScript Kit Scripts: مورد مجاني آخر للعثور على نصوص JavaScript للمساعدة في إنشاء مجموعة متنوعة من تأثيرات التصميم والرسوم المتحركة.

              الأدلة والبرامج التعليمية عبر الإنترنت

              هل تريد دليلًا خطوة بخطوة للتعرف على HTML و CSS و JavaScript و DOM؟ أو ربما تفضل بعض التدريب العملي؟ ستغطي الأدلة التالية جميع قواعدك.

              • خريطة طريق تطوير الويب للمبتدئين: دليل "Learn to Code" هذا هو المكان المثالي لبدء العمل مع DHTML لأنه سيأخذك من أساسيات HTML (الفصل 1) على طول الطريق من خلال JavaScript و jQuery (الفصل 5).
              • دروس W3Schools DHTML: تقدم W3Schools مجموعة متنوعة من الدروس حول DHTML ، مقسمة حسب لغات البرمجة الثلاث المختلفة.
              • دروس موزيلا لتقنيات الويب: تمتلك شبكة مطوري موزيلا أحد الأدلة الأكثر شمولاً (والمنظمة جيدًا) المتاحة على لغات البرمجة المختلفة المتضمنة في DHTML.
              • QcTutorials DHTML التعليمي: هل تبحث عن نهج بسيط ومباشر لتعلم DHTML؟ تابع هذا البرنامج التعليمي ثم احتفظ بأمثلة DHTML و HTML DOM في متناول اليد للرجوع إليها في المستقبل.
              • دليل المبتدئين إلى دروس DHTML: مقدمة لـ DHTML والتي تتضمن عددًا من البرامج التعليمية لمساعدتك على البدء.
              • مطور الويب والبرامج التعليمية لـ CSS: هناك الكثير الذي يمكنك تعلمه بشأن CSS ، لذلك لا تقصر نفسك على الأساسيات فقط. يتضمن هذا المورد مجموعة متنوعة من دروس CSS بناءً على احتياجات موقع الويب الخاص بك.
              • دروس جافا سكريبت: دليل آخر من مجموعة جافا سكريبت ، يركز هذا البرنامج فقط بشكل خاص على المهام المتعلقة بـ JavaScript.
              • CSS Reference: استخدم هذا المورد البسيط كدليل مرجعي سريع عند كتابة CSS.
              • مرجع DOM: تعرف على المزيد حول كائنات DOM المختلفة هنا.

              اذهب للعمل!

              إذا كنت تخطط لإنشاء محتوى ديناميكي لموقعك على الويب ، فمن المهم أن يكون لديك فهم قوي لكيفية عمل كل عنصر وكيف يلعبون جميعًا معًا تحت مظلة DHTML.

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

              تأليف HTML جيد واستخدام أدوات التحقق

              .رمز المصدر span.kw
              .رمز المصدر
              .رمز المصدر span.dv
              .رمز المصدر
              .رمز المصدر
              .رمز المصدر
              .رمز المصدر
              .مصدر الشفرة span.co
              .رمز المصدر
              .رمز المصدر
              .رمز المصدر span.fu
              .رمز المصدر span.re
              .رمز المصدر span.er

              تأليف HTML جيد واستخدام أدوات التحقق

              لقد تطرقنا إلى موضوع إنشاء HTML جيد ، ولكننا سنتعمق هنا. كما سنناقش المصادقين وكيفية استخدامها.

              الجزء 1 - تأليف HTML جيد

              إن معرفة جميع قواعد القواعد الصحيحة لا تجعلك كاتبًا جيدًا ، ومعرفة كل وظيفة وبنية لغة لا تجعلك مبرمجًا جيدًا. هناك شيء آخر مطلوب - أسلوب جيد.

              كتابة HTML بنفس الطريقة. قد تعرف خصوصيات وعموميات كل عنصر ترميز ، ولا تزال تضع مستندات قذرة يصعب قراءتها وتصميمها. ولكن لا يجب أن يكون هذا هو الحال - يمكنك تعلم كيفية كتابة HTML جيد وحسن التصميم.

              لماذا تهتم ب HTML جيد?

              نظرًا لأن HTML لا يُقصد أن يراها المستخدمون النهائيون والجمهور عبر الإنترنت ، فقد تسأل:

              • ما الفرق الذي يحدثه?
              • لماذا تقلق بشأن الترميز?

              الإجابة على هذا السؤال هي الخطوة الأولى نحو نمط HTML جيد: التفكير في من تكتب HTML له.

              هناك عدد قليل من "الجماهير" لـ HTML الخاص بك:

              • المصمم / المطور الحالي الذي عليه كتابة CSS
              • مطورو ومصممو المستقبل الذين قد يحتاجون إلى إعادة تصميم موقع الويب الخاص بك
              • جوجل ومحركات البحث الأخرى
              • Facebook ومواقع التواصل الاجتماعي الأخرى التي تنشر مقتطفات من الصفحة
              • قراء RSS
              • قارئات الشاشة لضعاف البصر
              • المستخدمون العاديون ، في النهاية.

              كل هذه الجماهير المختلفة - بعضها فقط من البشر - لها احتياجات مختلفة ، وكلها مخدومة بشكل جيد بواسطة HTML جيد ، وأسلوب جيد.

              بنية وثيقة جيدة

              أهم جانب في نمط HTML هو بناء المستند بشكل صحيح.

              يجب أن يبدو الهيكل العام كما يلي:

              لغة البرمجة>

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




              عنوان الموقع

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

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

              لاحظ أنك قد لا تحتاج إلى كل عنصر محدد هنا. على سبيل المثال: قد لا ترغب في وضع العنصر في مكانك ولا يتضمن تفاصيل البيانات الوصفية في الجزء العلوي من المقالة - بسيطة

              أو

              العلامة ، بنفس "مستوى" محتوى المقالة على ما يرام.

              لمزيد من التفاصيل حول هيكلة المستند بشكل صحيح ، راجع قسم HTML الهيكلي في هذه المقالة.

              ترتيب العناصر الرئيسية الخاصة بك

              يجب أن يكون المحتوى المرتبط بالمحتوى في وقت مبكر. عندما يحاول مستشار تحسين محركات البحث اكتشاف ما يجري في كيفية عرض Google أو Facebook لصفحاتك ، لا تجعلها تصنف من خلال عشرات روابط CSS ورمز JavaScript عشوائي.

              حتى إذا كان شريط التنقل عالقًا في أعلى نافذتك ، وكان العنوان الرئيسي للموقع أسفله ، فضع عنوان موقعك الرئيسي في

              أو

              العلامة ، ووضع ذلك أولاً في الداخل. ضع قائمة التنقل بعد العنوان.

              يجب أن يكون العنصر العنصر الأول بعد. حتى إذا كان لديك شريط جانبي يساري ، استخدم CSS لتحريكه إلى الجانب الأيسر ؛ لا تضع قبل المحتوى الرئيسي الخاص بك.

              يجب أن تكون الصفحة عنصر المحتوى الأخير داخل. يجب ألا يكون هناك عناصر HTML مرئية بعد .

              ضع أكبر قدر ممكن من جافا سكريبت بعد علامة الإغلاق. ضع جافا سكريبت فقط في حالة وجوب وجودها لسبب ما (لا يوجد عادةً).

              جعل الترميز الهيكلي أسهل للقراءة

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

              واحدة من أكثر الأشياء المفيدة التي يمكنك القيام بها هي مسافة بادئة التعليمات البرمجية الخاصة بك. النظر في المثالان:

              صنف ="رأس الصاري">

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

              صنف ="شريط التنقل">
              صنف ="main-nav">

              • عنصر القائمة
              • عنصر القائمة
              • عنصر القائمة
                • عنصر القائمة
                • عنصر القائمة
                • عنصر القائمة
              • عنصر القائمة

              صنف ="رأس الصاري">

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

              صنف ="شريط التنقل">
              صنف ="main-nav">

              • عنصر القائمة
              • عنصر القائمة
              • عنصر القائمة
                • عنصر القائمة
                • عنصر القائمة
                • عنصر القائمة
              • عنصر القائمة

              الثاني أسهل في القراءة ، أليس كذلك؟ هذا مفيد جدًا للمصممين والمطورين الذين يحاولون فهم المستند الخاص بك.

              تأكد من أنك متسق مع كيفية المسافة البادئة - مسافة واحدة ، مسافتان ، علامة تبويب. ما تختاره لا يهم كثيرًا ، لكن الشيء المهم هو الحفاظ على اتساقها.

              ولكن ماذا عن HTML المولد?

              يتم إنشاء معظم HTML على الإنترنت اليوم بواسطة نظام إدارة محتوى واحد أو آخر. لا يمكنك دائمًا جعل عمل مسافة بادئة للتعليمة البرمجية بالطريقة التي تريدها - خاصة إذا كان الرمز الذي يولد HTML منتشرًا عبر العديد من ملفات السمات والمكونات الإضافية المختلفة.

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

              صنف ="رأس الصاري">

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

              صنف ="شريط التنقل">
              صنف ="main-nav">

              • عنصر القائمة
              • عنصر القائمة
              • عنصر القائمة
                • عنصر القائمة
                • عنصر القائمة
                • عنصر القائمة
              • عنصر القائمة



              صنف ="تعليقات">
              صنف ="تعليق" معرف ="التعليق 39874693029">


              صنف ="عنصر الشريط الجانبي" معرف ="نموذج الاشتراك">


              صنف ="عنصر الشريط الجانبي" معرف ="أرشيف">

              كقاعدة عامة - إذا لم تكن علامة فتح وإغلاق العنصر على نفس السطر ، وكان العنصر يتطلب فئة أو معرف ، فمن الأفضل التعليق على علامة الإغلاق.

              فئات وهويات ذات مغزى

              بادئ ذي بدء - اجعل صفات الصف والمعرف متسقة وسهلة القراءة من خلال:

              • باستخدام أحرف صغيرة فقط
              • فصل الكلمة مع الواصلات.

              بعد ذلك ، تأكد من أن أسماء فصولك ومعرفاتهم لها معنى دلالي واضح وليست كلها حول التصميم والعرض.

              أسماء فئة وهوية جيدة:

              • قائمة التنقل
              • مشاركة مدونة
              • القطعة الشريط الجانبي
              • التعليق التعريفي.

              أسماء الفئات والمعرفات غير صالحة:

              • صندوق أخضر
              • الشريط الجانبي الأيسر
              • تلاشي في بانر.

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

              لا بأس إذا لم تتمكن من المساعدة. فقط تأكد من أنك تبقي الأمور عامة. ليس هناك ما هو أسوأ من إعادة التصميم التي تُنشئ CSS على النحو التالي:

              .صندوق أخضر
              لون الخلفية: أزرق ؛
              }}

              استخدم عناصر المحتوى بحكمة

              ضمن القسم الرئيسي من مقالتك أو أي محتوى آخر ، استخدم علامات المحتوى المقطعية لتنظيم المستند بشكل صحيح.

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

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

              • استخدم علامات العنوان (

                ,

                ,

                ,

                ) لقسم العنوان والأقسام الفرعية.

              • تأكد من أن التسلسل الهرمي للعناوين يشكل مخططًا معقولاً. لا تضع
                بعد

                بدون

                و

                تدخل. تأكد من أن المحتوى الخاص بك له بنية عقلانية ومفهومة.

              • إذا كنت تستخدم لترميز رؤوس الأقسام ، هناك خطأ ما.

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

              معرف ="عنوان القسم">عنوان القسم

              ...

              href ="# عنوان القسم">هذا يرتبط بهذا الموقع.

              أخيرًا ، لا تسيء استخدام القاعدة الأفقية (). إذا كنت تستخدم الأقسام والعناوين بشكل مناسب ، فلا يوجد أي سبب تقريبًا لذلك.

              الروابط

              السمة الوحيدة المطلوبة لعلامة الارتساء هي عنوان URL للمستند المرتبط.

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

              مشكلة أخرى في الروابط هي نص الرابط - النص الفعلي الذي ينقر عليه المستخدم (أو ينقر عليه ، أو يحدده) من أجل اتباع الرابط.

              حاول تجنب انقر هنا إذا أمكن. في بعض الأحيان يكون ذلك أمرًا لا مفر منه ، ولكن كلما كان ذلك ممكنًا ، يجب أن تحاول جعل نص الرابط ذا معنى. هذا مفيد لقرائك وكذلك للمستند الذي ترتبط به (والذي قد يكون خاصتك).

              تعرف على المزيد حول HTML بواسطة href ="">انقر هنا.

              نحن نقدم الكثير من href ="">معلومات حول HTML.

              صور

              الصورة مطلوبة فقط للحصول على عنصر src - عنوان URL للصورة. ولكن يمكن أن يساعد تضمين عنوان ونص بديل.

              • يمكن لقراء الشاشة للمكفوفين قراءة الوصف لمستخدم لا يمكنه رؤية الصورة
              • يمكن لمحركات البحث فهرسة الصورة ولديها فكرة عن ماهية الصورة.
              التعاريف والاقتباسات والمختصرات

              هناك العديد من عناصر الترميز المفيدة للغاية التي لا يتم استخدامها مطلقًا.

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

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

              تعرف على المزيد ورعاية أكثر

              إن كتابة HTML الجيد هي مسألة:

              • تعلم حفنة من المبادئ الأساسية
              • الاهتمام بما يكفي المحتوى الخاص بك وموقعك على متابعتهم.

              يمكننا فقط مساعدتك في الجزء التعليمي. يجب عليك اتخاذ قرار الرعاية.

              يمكن تلخيص معظم نصيحتنا في جملة واحدة:

              تأكد من أن HTML الخاص بك ينقل بوضوح ما تريد توصيله.

              الجزء 2: مدقق HTML

              مع ظهور متصفحات الويب الحديثة والمستندة إلى المعايير و HTML ، كان هناك اهتمام متزايد بالتحقق - التأكد من أن شفرة المصدر لموقع الويب خالية من الأخطاء وتتوافق مع المواصفات ذات الصلة.

              هذا شيء جيد بالطبع - الويب هو مكان أفضل بشكل عام عندما تتبع مواقع الويب "القواعد". ولكن التركيز المفرط على التحقق من الصحة يمكن أن يؤدي إلى نتائج عكسية.

              إليك ما تحتاج إلى معرفته.

              ما هو التحقق من صحة HTML?

              يعني التحقق فقط التحقق لمعرفة ما إذا كان رمز مصدر صفحة الويب يتوافق مع مواصفات اللغة التي حددها W3C. يتم إجراء هذا الفحص بواسطة أداة برمجية تسمى مدقق HTML.

              هذا مماثل للتدقيق اللغوي - التأكد من أن جميع الكلمات مكتوبة بشكل صحيح وأن القواعد التقليدية لعلامات الترقيم والقواعد يتم اتباعها.

              توضح مواصفات لغة الترميز (بتفاصيل شديدة ، أحيانًا) كيف سيتم استخدام كل عنصر HTML ، وما يمكن أن تكون سماته المحتملة ، وكيف ترتبط بالعناصر الأخرى في الصفحة.

              القول بأن مستند HTML صحيح يعني فقط أنه يتبع كل واحد من هذه القواعد.

              ما هو التحقق من صحة HTML لا?

              لا يخبرك HTML في الواقع ما إذا كان موقع الويب الخاص بك جيدًا ، أو يبدو بالطريقة التي تعتقد أنه ينبغي ، أو سيساعدك على تحقيق أهدافك التسويقية. يخبرك فقط إذا كان الترميز الخاص بك يتوافق مع المواصفات.

              هذا يشبه إلى حد ما الفرق بين التحرير والتدقيق - التحقق مثل التدقيق اللغوي.

              كما أن التحقق من صحة HTML يتعلق فقط بـ HTML - وليس CSS أو JavaScript أو PHP الأساسي. كما أنه لا علاقة له بأشياء مثل النماذج التي تعمل بشكل صحيح (التحقق من صحة النموذج مختلف تمامًا).

              لماذا تهتم بالتحقق من الصحة?

              يمكن أن يساعدك تشغيل HTML الخاص بك من خلال مدقق في اكتشاف الأخطاء التي يمكن أن تتسلل إلى HTML الخاص بك من مجموعة متنوعة من السبل.

              أخطاء إملائية بسيطة

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

              عدم تطابق إصدار

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

              على سبيل المثال ، علامة HTML جديدة في HTML5 - لم تكن موجودة في مواصفات HTML 4.0. هذا يعني أنه إذا كنت تقوم بالتحقق من صحة هذه المواصفات ، وقمت بتضمينها ، فلن تكون صالحة. ستحصل على خطأ.

              مثال آخر على شيء تغير هو طريقة إغلاق العناصر الفارغة.

              علامة الصورة ( ) هو عنصر خالٍ - ليس له محتوى ، فقط سمات (الصورة نفسها هي سمة تشير إلى ملف الصورة ، وليس محتوى عنصر). في الماضي ، كان يجب إغلاق العناصر الفارغة ، لذلك سترى هذا:

              src ="http://example.com/some_image" بديل ="بعض الصور" />

              الآن ، في مواصفات HTML5 ، هذا غير مفضل ، وستبدو الصورة نفسها كما يلي:

              src ="http://example.com/some_image" بديل ="بعض الصور" >

              التحقق من الصحة مهم لعدد من الأسباب:

              • كانت هناك العديد من المواصفات المختلفة على مر السنين
              • في بعض الأحيان مواصفات متعددة نشطة في نفس الوقت
              • طور المبرمجون عادات بناءً على طرق مختلفة للقيام بالأشياء.
              رمز من جانب الخادم غير صالح

              تستخدم معظم مواقع الويب اليوم بعض أنظمة إدارة المحتوى الأساسية أو البرمجة النصية من جانب الخادم لإنشاء HTML. هذا يضيف طبقة من التعقيد التي يمكن أن تؤدي إلى أخطاء إضافية.

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

              قد يكون من الصعب أيضًا رؤية مستند HTML بالكامل عند العمل على نصوص ديناميكية من جانب الخادم - غالبًا ما ينتشر قالب صفحة واحدة عبر عدد من الملفات المختلفة.

              تضمين رمز تالف

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

              ببساطة لا تعرف مواصفات HTML

              هناك الكثير من التفاصيل الدقيقة لمواصفات HTML - أشياء قد لا يعرفها الكثير من المطورين المبتدئين والمتوسطين.

              هل تعلم أنه لا يمكنك وضع قائمة (