دليل HTML الأساسي للدمى

آخر تحديث في 05 أكتوبر 2020


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

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

كود HTML.
أكواد HTML.

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

في ما يلي بعض إصداراتنا من دليل HTML للمدونين وأصحاب الأنشطة التجارية عبر الإنترنت.

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

قبل أن نبدأ ...

1. ما هو HTML؟

HTML هو اختصار لـ Hyper Tتحويلة MArkupe Language. إنها اللغة القياسية لوضع علامات على محتويات متصفحات الويب.

يتم تمثيل HTML بواسطة "العناصر". تُعرف العناصر أيضًا باسم "العلامات".

2. لماذا هناك حاجة إلى HTML؟

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

لهذا السبب تحتاج HTML.

3. هل لغة HTML حساسة لحالة الأحرف؟

HTML ليست حساسة لحالة الأحرف. لكن أفضل الممارسات هي كتابة HTML مع الحالات المناسبة.

خطوات لإنشاء ملف HTML الأول الخاص بك

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

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

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

هنا هو ما عليك القيام به:

  1. قم بتثبيت محرر التعليمات البرمجية
  2. افتحه
  3. قم بإنشاء ملف جديد
  4. احفظه كملف .html

انت جاهز للذهاب!

مثال على محرر التعليمات البرمجية Atom
محرر الكود - Atom

1. أهلاً بالعالم!

انسخ الشفرة التالية والصقها في ملف HTML الجديد واحفظه. الآن قم بتشغيله على متصفح الويب الخاص بك.

رمز:

أول صفحة ويب مرحبا بالعالم!

الإخراج:

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

فهم بنية HTML

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

لذلك دعونا نحاول فهمها من خلال "Hello World!" الشفرة. العناصر التالية هي الأجزاء الإلزامية لكل ملف HTML.

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

2. علامات HTML

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

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

(2a) علامات الرأس

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

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

رمز:

أول صفحة ويب
علامة العنوان - نماذج HTML
تظهر علامة العنوان أعلى المتصفح الخاص بك.

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

رمز:

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

رمز:

<meta name="description" content="This is the short description that search engines show"

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

رمز:

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

رمز:

واحسرتاه! البرامج النصية معطلة.

(2b) علامات الجسم

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

إلى

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

رمز:

هذا عنوان h1 هذا عنوان h1 هذا عنوان h1 هذا عنوان h2 هذا عنوان h2 هذا عنوان h2

الإخراج:

تنسيق العلامات

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

رمز:

يمكنك تمييز النص الخاص بك بعدة طرق. يمكنك بالخط العريض والتسطير والمائل علامة ، منخفض ، مرتفع والمزيد!

الإخراج:

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

على سبيل المثال:

You can comment out any code by surrounding them in this way -->

(2c) علامات HTML أخرى مهمة

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

الهيكل هو نفسه. لها جزء افتتاحي وإغلاق . ينتقل النص الذي تريد تثبيته بين و .

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

  • ahref = "" = يعرف الرابط الوجهة. يذهب الرابط بين علامات الاقتباس المزدوجة.
  • الهدف = "" = يحدد ما إذا كان عنوان URL سيتم فتحه في علامة تبويب متصفح جديدة أو في علامة التبويب نفسها. الهدف = "_ blank" لعلامة التبويب الجديدة والهدف = "_ self" للفتح في نفس علامة التبويب.
  • rel = "“ = تحدد علاقة الصفحة الحالية بالصفحة المرتبطة. إذا كنت لا تثق في الصفحة المرتبطة ، يمكنك تحديد rel = ”nofollow”.

رمز:

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

الإخراج:

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

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

  • src = "" = هذا لتعريف الرابط المصدر للصورة. ضع الرابط الصحيح بين علامات الاقتباس المزدوجة.
  • alt = "" = انها تقف على النص البديل. عندما لا يتم تحميل صورتك ، سيعطي هذا النص للمستخدمين فكرة حول الصورة المفقودة.
  • العرض = "" = يعرّف عرض الصورة بالبكسل.
  • الارتفاع = "" = يعرّف ارتفاع الصورة بالبكسل.

على سبيل المثال:

هذا هو Googleplex في أغسطس 2014. يبلغ عرض هذه الصورة 500 بكسل وارتفاعها 375 بكسل.

الإخراج:

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

أو

علامة القائمة هي لإنشاء قائمة بالعناصر. لتقف على قوائم مرتبة (قائمة مرقمة) و تعني القوائم غير المرتبة (النقاط).

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

رمز:

هذه قائمة مرتبة: البند 1 البند 2 البند 3 هذه قائمة غير مرتبة: البند 1 البند 2 البند 3

الإخراج:

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

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

رمز:

اسم عمر مهنة جو 27 رجل اعمال كارول 26 ممرضة سيمون 39 دكتور جامعى

الإخراج:

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

تجميع الجدول

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

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

علامات تصنيف الجدول هي:

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

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

إليك كيف يمكننا تجميع جدولنا النموذجي في و و :

رمز:

اسم عمر مهنة يوحنا 27 رجل اعمال كارول 26 ممرضة سيمون 39 دكتور جامعى إجمالي الأشخاص: 3

الإخراج:

يستخدم عنصر النموذج لإنشاء نماذج تفاعلية لصفحات الويب. يحتوي نموذج HTML على عدة عناصر متتالية. على سبيل المثال:، و إلخ

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

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

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

يتم استخدام العلامة لإنشاء ملصقات وربطها بالمدخلات. قاعدة إقران التسميات مع المدخلات هي أن لها نفس القيمة في سمة الإدخال = ”” من التسمية والمعرف = ”” سمة الإدخال.

رمز:

الاسم الاول: الكنية: السيرة الذاتية القصيرة: جنس: الذكر أنثى

الإخراج:

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

3. سمات HTML

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

تشبه السمة attributename = ”” وتوجد في علامة HTML الافتتاحية. تنتقل قيمة السمة بين علامات الاقتباس المزدوجة.

معرف = "" والفئة = ""

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

رمز:

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

href = ""

href هي اختصار لـ Hypertext Reference. يوجهون المستخدمين إلى الروابط المرجعية. تستخدم علامة الارتساء href لإرسال المستخدمين إلى عنوان URL المقصود.

رمز:

جوجل

src = ””

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

رمز:

alt = "”

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

رمز:

النمط = ""

يتم استخدام سمة النمط في علامات HTML. يقوم بعمل CSS ضمن علامة HTML. تذهب خصائص التصميم بين علامات الاقتباس المزدوجة.

رمز:

هذا عنوان آخر

4. عرض الكود: Block vs Inline

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

مثال: ، ، - ، شكل إلخ.

بعض العناصر تشغل المساحة المطلوبة فقط ولا تبدأ في سطر جديد. هذه عناصر "مضمنة".

على سبيل المثال: ، ، و و إلخ

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

رمز:

أول صفحة ويب هذا عنوان H2. لديها عرض بلوك. هذا عنوان آخر H2. هنا علامة التسطير لها عرض مضمّن.

الإخراج:

5. اقتباس مزدوج مقابل اقتباس مفرد في HTML

هذا السؤال واضح جدا. ما الذي يجب عليك استخدامه في HTML؟ اقتباس واحد أو اقتباس مزدوج؟ يبدو أن الناس يستخدمون كلاهما ولكن أيهما صحيح؟

في HTML ، الاقتباس الفردي والاقتباس المزدوج متماثلان. أنها لا تحدث أي فرق في الإخراج.

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

6. HTML الدلالية مقابل HTML غير الدلالية

HTML الدلالي هو أحدث إصدار من HTML ، والذي يسمى أيضًا HTML5. هذه هي النسخة المطورة من HTML و XHTML غير الدلالي.

لماذا يعتبر HTML5 أفضل؟ في الإصدارات السابقة ، تم تحديد عناصر HTML من خلال أسماء المعرف / الفئة. فمثلا: كان يعتبر مقالا.

في HTML5 ، تمثل العلامة نفسها كمقال دون الحاجة إلى أي معرف / معرف فئة.

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

في ما يلي قائمة ببعض علامات HTML5 الشائعة:

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

ستظهر بنية HTML5 بسيطة كالتالي:

أول صفحة ويب القائمة 8 القائمة 1 هذا هو عنوان المقال بقلم جون دو محتوى المقال يذهب هنا حقوق الطبع والنشر 2 John Doe

7. التحقق من صحة HTML

يقوم معظم محترفي الويب بالتحقق من شفرتهم بعد الانتهاء منها. لماذا من الضروري التحقق من صحة الرمز عندما يعمل بشكل جيد؟

هناك سببان محتملان للتحقق من رموزك:

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

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

8. مصادر أخرى مفيدة

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

في ما يلي بعض الموارد المفيدة لك: