HTML للمبتدئين:

الجدول الزمني لتقنيات الويب


2009

2005

2002

2000

1998

1997

1996

1994

1991

HTML5

أجاكس

تصميم صفحات الويب بدون أقراص

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

لغة البرمجة

Contents

المقدمة

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

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

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

ما هو HTML?

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

فئات فرعية مختلفة لنسب HTML

بعبارات بسيطة, يمثل HTML لغة الترميز القياسية لإنشاء صفحات الويب عبر الإنترنت. إنها اختصار لـ Hyper Text Markup Language ، وتتمثل وظيفتها الأساسية في إنشاء هيكل وتخطيط وعرض الصفحات المقصودة الفردية. على الرغم من أن متصفحات الويب لا تعرض لغة HTML مباشرة ، إلا أنها تلعب دورًا محوريًا في المساعدة على إنشاء موقع مرئي ويمكن الوصول إليه وسهل الاستخدام.

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

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


أين يتم استخدام HTML?

مواقع شعبية باستخدام HTML

أين يتم استخدام HTML

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

  • إنشاء عناصر قابلة للتخصيص داخل صفحة موجودة

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

  • إنشاء محتوى إضافي للبريد الإلكتروني

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

  • فهم مستندات التعليمات غير المتصلة المثبتة على جهاز الكمبيوتر الخاص بك

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

HTML و CSS
عرض HTML & CSS [Cheat Sheet]

هيكل صفحة HTML

</strong><br/> <strong>

محتوى الصفحة

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

مستندات HTML مطلوبة للبدء بإعلان نوع المستند (بشكل غير رسمي ، “نوع مستند”). في المستعرضات ، يساعد doctype في تحديد وضع العرض. لا يحدد HTML5 DTD ؛ لذلك ، في HTML5 يكون تعريف doctype أبسط وأقصر.


قبل أن تتمكن من إنشاء صفحة html ، تحتاج إلى الأساسيات في المكان.

عادة ، ستتكون الصفحة من ثلاثة عناصر هيكلية:

1. العنوان: يحتوي العنوان على محتوى ذي صلة بجميع الصفحات على موقعك ، مثل شعار أو اسم موقع ويب ونظام تنقل. يظهر الرأس في كل صفحة.

2. الجسم الرئيسي: هذا يشغل أكبر مساحة على صفحة ويب. يحتوي على محتوى خاص بالصفحة التي يتم عرضها.

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

إليك ما تبدو عليه هذه العناصر الهيكلية الأساسية عندما تجتمع معًا:


يمكنك وضع نص أو كود هنا ، مثل أ
كود تتبع جوجل تحليلات ل
مثال.

يذهب الجزء الرئيسي من صفحتك
هنا. املأه بالنص والصور!

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


يمكنك وضع نص أو كود هنا ، مثل أ
كود تتبع جوجل تحليلات ل
مثال.

العنوان الأول

مرحبا بكم في موقع الويب الخاص بي!

معلومات الاتصال يمكن أن تذهب هنا


علامات HTML

علامات HTML

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

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

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

,

,

,

,

أو

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

هناك 12 فئة من العلامات:


هذا هو العنوان 1

هذا هو العنوان 2

هذا هو العنوان 3

هذا البند 4

هذا هو البند 5

هذا هو البند 6

تقنيات علامات HTML الرائدة
المشاركة على الويب

0.27٪

HTML5
علامة قماش

0.29٪

HTML5
علامة الصوت

0.69٪

HTML5
علامة الفيديو

3.1٪

HTML5
علامة SVG

6.54٪

HTML5
تضمين علامة


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

هذا هو العنوان 1

هذا هو العنوان 2

هذا هو العنوان 3

هذا البند 4

هذا هو البند 5

هذا هو البند 6

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

علامات الفقرة

دعم الفيديو والصوت
انس أمر Flash Player ومشغلات الوسائط الأخرى التابعة لجهات خارجية ، اجعل مقاطع الفيديو والصوت متاحة حقًا باستخدام HTML5 الجديد

يتم تطبيق مبدأ مماثل لبدء علامات الفقرة ، والتي تم تصويرها من قبل

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

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

فقرتك الأولى

فقرتك الثانية

فقرتك الثالثة

استخدام علامة HTML5 Video من خلال مواقع الويب حول العالم

بلد
عدد المواقع

الولايات المتحدة الأمريكية

140،008

روسيا

87،508

ألمانيا

34،519

المملكة المتحدة

26609

فرنسا

25697

اليابان

23،578

تايوان

19798

أوكرانيا

19204

البرازيل

16773

الصين

16523

بقية العالم

265371

خارج تنسيق HTML ، سيؤدي هذا إلى تقسيم النص على النحو التالي في صفحة الويب النهائية:

فقرتك الأولى

فقرتك الثانية

فقرتك الثالثة

علامات فاصل الأسطر

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

جزء.

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

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

هنا مثال:

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

يمكنك أيضًا تطوير ألعاب باستخدام HTML5 بطاقة شعار. يوفر HTML5 طريقة رائعة ومناسبة للجوّال لتطوير لعبة تفاعلية ممتعة

صباح الخير

شكرا جزيلا لاستفسارك ، سوف نتصل بك إذا كنا بحاجة إلى أي شيء آخر.

تحياتي الحارة

السيد جونز

بمجرد تطبيقه ، سيؤدي هذا إلى تقسيم النص على النحو التالي:

صباح الخير,

شكرا جزيلا لاستفسارك ، سوف نتصل بك إذا كنا بحاجة إلى أي شيء آخر.

تحياتي الحارة

السيد جونز

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

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

خطوط أفقية

فئات موقع الويب حيث يتم استخدام علامة HTML5 Canvas

فئات موقع الويب حيث يتم استخدام علامة HTML5 Canvas

وبالمثل ، هناك علامات أخرى يمكن استخدامها داخل

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


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

فقرتك الأولى


فقرتك الثانية

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

فقرتك الأولى
________________________________________

فقرتك الثانية

فقرتك الأولى
_______________________

فقرتك الثانية

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

يوافق 78 ٪ من مطوري المحتوى على أن الهيكل مناسب لإنشاء تطبيقات الجوال ، ويقول 68 ٪ أنه مناسب لتصميم أي وجميع أنواع التطبيقات


علامات الصورة

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

بعض النصوص

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

 HTML5 Icon

عناصر HTML

عناصر أتش تي أم أل

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

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

تحديد عناصر HTML

لن تعمل HTML5 في أي مكان ، ومع اعتماد المزيد والمزيد من العناصر ، سيبدأ المزيد والمزيد من الشركات في التطوير في HTML5

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

أو

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

تتطابق جميع علامات الإغلاق مع علامات البدء بصرف النظر عن حقيقة أن الأولى تحتوي على شرطة مائلة للأمام قبل الأحرف ذات الصلة. حتى في مثال

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

تكرار الاستخدام لعناصر HTML المختلفة

اسم عنصر XHTML

رئيس
عنوان
لغة البرمجة
الجسم
أ
الفوقية
img
الطاولة
د
tr
ر
ص
النصي
الخط
شعبة
ب
حلقة الوصل
مركز
امتداد
شكل
إدخال
أسلوب
ساعة
قوي
أنا
hl
لي
نص
خريطة
منطقة
ul
تحديد
اختيار
ح 3
h2
الإطار
مجموعة إطارات
بارام
تضمين
م
ش
موضوع
الاقتباس
لا
الإطارات
الجسم
iframe
صغير
ح 4
يتمركز
الشمال





























0
10
20
30
40
50
60
70
80
90
100

استخدام عناصر HTML المتداخلة

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

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

نص غامق ومائل وتحته خط في HTML

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

جزء. باستخدام HTML ، ستقوم ببرمجة هذا على النحو التالي:

انا اريد هذه كلمة لتكون جريئة.


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

انا اريد هذه كلمة لتكون جريئة.

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

انا اريد هذه كلمة لتكون جريئة.

كما ترون ، تم ببساطة دمج علامات البداية والنهاية المائلة في

جزء. سيؤدي هذا الآن إلى تحويل المحتوى داخل العنصر بحيث يظهر على النحو التالي:

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

انا اريد هذه كلمة لتكون جريئة.

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

العنصر الذي يظهر على النحو التالي في HTML:

انا اريد هذه الكلمة التي سيتم تسطيرها.

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

ستجعل العناصر الدلالية الجديدة التي قدمها HTML5 من السهل جدًا قراءتها للمطورين الناشئين. بدلا من رؤية السطر بعد السطر

و العناصر ، علامات أكثر تحديدًا مثل

,

و

انا اريد هذه الكلمة التي سيتم تسطيرها.

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

سمات HTML

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


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

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

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

سمة “Lang”

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

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

الصفات المطلوبة, التي يحتاجها نوع عنصر معين لنوع العنصر ليعمل بشكل صحيح

سمات اختيارية, تُستخدم لتعديل الوظيفة الافتراضية لنوع العنصر

السمات القياسية, مدعومة بعدد كبير من أنواع العناصر

سمات الحدث, تستخدم للتسبب في أنواع العناصر لتحديد البرامج النصية ليتم تشغيلها في ظل ظروف معينة


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

سمة “المحاذاة”

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

هذا النص محاذاة إلى الوسط

أنواع التطبيقات التي تم إنشاؤها باستخدام HTML5

إنتاجية

54٪

خدمة

38٪

مستهلك

35٪

رفع الكرة

22٪

شبكات التواصل الاجتماعي

18٪

وسائل الترفيه

17٪

نمط الحياة

12٪

السفر

ألعاب

آخر

13٪

سيؤدي هذا إلى محاذاة الخاص بك

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

هذا النص محاذاة إلى الوسط

هذا النص محاذاة إلى الوسط

هذا النص محاذاة إلى الوسط

خاصية “Href”

يأتي HTML5 أيضًا مع عدد كبير من واجهات برمجة التطبيقات الرائعة التي تتيح لك بناء تجربة مستخدم أفضل وتطبيق ويب أكثر ديناميكية وديناميكية – إليك قائمة سريعة بواجهات برمجة التطبيقات الأصلية:

  • السحب والإفلات (DnD)
  • قاعدة بيانات التخزين دون اتصال
  • إدارة محفوظات المستعرض
  • تحرير الوثيقة
  • تشغيل مؤقت للوسائط

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

يتم تعريف روابط HTML مع التي تتضمن رابط الوجهة مع نص الرابط المرتبط الذي سيضم عنوان URL. انها ‘href ’ السمة التي تحدد عنوان الموقع ، ومع ذلك ، يتم تضمين هذا كجزء من علامة البداية. يتم ترميزه في HTML على النحو التالي:

جوجل

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

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


خاصية “اللون”

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

لوحة HTML5
عرض لوحة HTML5 [Cheat Sheet]

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

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

بمجرد تطبيقه ، سيظهر هذا العنصر على النحو التالي على موقع الويب الخاص بك:

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

مقارنة بالمتصفحات الأخرى ، يضمن كل تحديث لـ Google Chrome تضمين دعم HTML5. بالإضافة إلى ذلك ، أصبح مشغل YouTube الافتراضي الآن HTML5 ويتم الآن تحويل إعلانات فلاش من Google إلى HTML5


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

اختبر نفسك

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

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

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

العنوان الرئيسي

مرحبًا بكم في موقعنا الإلكتروني ، Example.com! نأمل أن تستمتع بقراءة المحتوى الخاص بنا ، ولا تتردد في التواصل معنا.

شكرا لزيارتكم!

أعرف أكثر.

استخدام HTML5 من قبل المطورين
(حسب المنطقة)

أمريكا الشمالية واللاتينية

70٪

امريكا الجنوبية

61٪

ASPAC

60٪

أستراليا

60٪

أوروبا

59٪

أفريقيا

50٪

________________________________________

الأسئلة:

  1. أكمل عنصر الرأس بعلامة الإغلاق الصحيحة.
  2. اجعل العنوان بالخط العريض.
  3. إدراج خط أفقي تحت الرأس.
  4. استخدم سمة اللون والظل ‘شكرا لزيارتكم’ بالأخضر
  5. إدراج هذا الارتباط التشعبي (https://www.w3schools.com/html/) في نص الإرساء “تعلم
    أكثر.”
  6. في رأس الصفحة ، استخدم الاسم =”تنسيق القيمة لمحاذاة الفقرات إلى اليسار


استنتاج

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

Liked Liked