دليلك الشامل حول لغة HTML تعلم لغة html من الصفر وحتى الاحتراف
 |
تعلم لغة html من الصفر وحتى الاحتراف |
من منا لم يسمع يوماً من الأيام عن مواقع الويب والصفحات الإلكترونية انت الان تقرأ هذه المقالة في أحد صفحات الويب هل تساءلت يوماً عم كيفية بناء هذه الصفحات وكيف يتم تكوينها وبنائها حسناً يتم بناء كل هذه الصفحات التي تراها في كل مكان في الانترنت عن طريق مجموعة لغات كثيرة لكن تعد لغة البرمجة HTML هي اللغة الأساسية في بناء المواقع فهي الهيكل الأساسي وفي هذه المقالة سوف نقوم بشرح هذه اللغة واهم مميزاتها وكيف يمكنك تعلمها ❤️
لغة ترميز النص التشعبي أو HTML هي لغة الترميز القياسية للمستندات المصممة ليتم عرضها في مستعرض ويب. يمكن مساعدته من خلال تقنيات مثل أوراق الأنماط المتتالية (CSS) ولغات البرمجة النصية مثل جافا سكريبت.
ما هو HTML
HTML ، اختصار للغة ترميز النص التشعبي ، هي اللغة الأساسية لشبكة الويب العالمية. تم تصميمها في الأصل كلغة لوصف الوثائق العلمية دلاليا ، وقد تكيفت لوصف البنية الأساسية لصفحات الويب والتطبيقات عبر الإنترنت. على سبيل المثال، يمكن استخدام HTML لتحديد أي جزء من المستند هو عنوان، وهو قائمة، والذي هو صورة. يمكن استخدامه أيضا لربط كلمة أو تضمين صورة أو خط مائل أو المزيد.
تم نشر HTML لأول مرة بواسطة Tim Berners-Lee في عام 1989 ، ويستخدم الآن 94٪ من جميع مواقع الويب ، وربما جميع المواقع التي تزورها. ولكن ما هو بالضبط؟
كما ذكرنا أعلاه ، فإن HTML هي اختصار لعبارة "Hypertext Markup Language". دعنا نقسم هذا كلمة بكلمة لفهم أفضل لما تعنيه HTML في الواقع.
النص التشعبي" هو نص يحتوي على إشارات لنصوص أو صفحات أخرى، والتي تُعرف أيضًا بالروابط التشعبية. تسمح لك الروابط التشعبية بالانتقال إلى أي مكان على الإنترنت بنقرة واحدة باستخدام الماوس. بدلاً من قراءة صفحة الويب بالتسلسل الخطي الذي حدده المؤلف، كما في المطبوعات، يمكننا استخدام الروابط التشعبية للانتقال إلى قسم آخر من نفس الصفحة، أو إلى صفحة مختلفة ضمن نفس الموقع، أو حتى إلى موقع ويب جديد تمامًا. على سبيل المثال، قد يكون هناك رابط تشعبي يعيد القراء إلى أعلى هذه التدوينة. كما يمكن للروابط التشعبية أن تفتح ملف PDF، أو رسالة بريد إلكتروني، أو وسائط متعددة، مثل ملف فيديو أو صوتي.
أدى ربط المعلومات معًا بهذه الطريقة إلى إحداث ثورة في الويب. معًا ، يتيح HTML والإنترنت لأي شخص الوصول إلى جميع أنواع المعلومات حول العالم ، بأي ترتيب يريده.
يشير "الترميز" إلى كيفية "ترميز" HTML للصفحة بالتعليقات التوضيحية داخل ملف HTML. لا يتم عرض هذه التعليقات التوضيحية على صفحة الويب نفسها - فهي تعمل من وراء الكواليس لإخبار المستعرضات بكيفية عرض المستند للزوار. سنتعلم المزيد عن هذا الترميز قريبًا.
"اللغة" هي أبسط جزء من الاختصار لفهمه. مثل أي لغة ، يتكون HTML من بناء جملة وأبجدية فريدة. لكن أي نوع من اللغة هذه بالضبط؟ دعنا نتناول هذا السؤال أدناه.
هل HTML لغة برمجة؟
سواء كانت HTML لغة برمجة من الناحية الفنية أم لا، يظل هذا موضوع نقاش مستمر بين مطوري الويب والخبراء. لنلقِ نظرة على كيفية انقسام نتائج محركات البحث حول هذا الموضوع:
بينما يعتبر الأغلبية HTML كلغة ترميز وليست لغة برمجة، يجادل البعض بأن الأمرين ليسا متنافرين.
لفهم هذا التمييز، يجب أن ندرك تعريف لغة البرمجة. تتمتع جميع لغات البرمجة بغرض وظيفي - يجب أن "تؤدي شيئًا ما"، سواء كان ذلك تقييم التعبيرات، أو إعلان المتغيرات، أو تعديل البيانات. هذه اللغات لا توجه أجهزة الكمبيوتر فحسب في ما يجب فعله، بل في كيفية فعله. تُعد جافا سكريبت أكثر لغات البرمجة استخدامًا على نطاق واسع في تطوير الويب، وتشمل لغات البرمجة الشائعة الأخرى Python و Java و C/C++.
HTML، من جهة أخرى، لا تقوم "بفعل" أي شيء بالفعل. إنها توفر ببساطة المحتوى الذي تحتاج المتصفحات لعرضه. لا يهم HTML كيف يقوم المتصفح بعرض المحتوى، طالما أنه يتم عرضه. بمعنى آخر، لـ HTML غرض هيكلي وليس وظيفي.
ومع ذلك، يستخدم بعض المطورين هذا المنطق للادعاء بأن HTML هي لغة برمجة - إنها لغة برمجة تقريرية. وفقًا للبروفيسور ديفيد برايلسفورد من جامعة نوتنغهام، على سبيل المثال، اللغات التقريرية محدودة أكثر من اللغات الأخرى لأنها تطلب شيئًا ولا تهتم بكيفية تحققه، ولكن هذا لا يجعلها أقل من لغات البرمجة.
بالرغم من أن هذه نقطة نقاش مثيرة للاهتمام وغنية بالتفاصيل، إلا أنه من غير المحتمل أن تؤثر على كيفية استخدامك لـ HTML في الترميز. مع الأخذ في الاعتبار ذلك، دعونا نتطرق إلى الغرض من استخدام HTML.
ما هي استخدامات HTML ؟
يستخدم HTML في المقام الأول لإنشاء صفحات الويب. نظرا لأنه مفتوح المصدر ومدعوم من قبل جميع المتصفحات الحديثة ، فإن HTML مجاني للاستخدام ويضمن عرض النص والصور والعناصر الأخرى المقصودة. بدون HTML ، ستكون جميع صفحات الويب عبارة عن ملفات نصية عادية
باستخدام HTML ، لا يمكنك تنسيق المستندات باستخدام العناوين والفقرات والقوائم والعناصر الأخرى فحسب ، بل يمكنك أيضا تضمين الصور ومقاطع الفيديو والملفات الصوتية والوسائط المتعددة الأخرى عبر الارتباطات التشعبية. ويمكنك الارتباط بصفحات ويب أخرى على نفس موقع الويب أو من موقع آخر. يتيح ذلك للزوار التنقل بسهولة في موقع الويب الخاص بك والانتقال بين مواقع الويب المخزنة على خوادم الويب المختلفة.
حتى بعد إضافة العناوين والصور والارتباطات التشعبية ، سيظل لديك صفحة ويب أساسية للغاية - وهذا حسب التصميم. من المفترض أن ينشئ HTML قاعدة بسيطة يمكن من خلالها إضافة أوراق الأنماط المتتالية (CSS) وجافا سكريبت (JS). باستخدام CSS ، يمكنك تخصيص التصميم والتخطيطات الخاصة بك ، وتغيير اللون والخط ومحاذاة العناصر. باستخدام JS و JS ، يمكنك إضافة وظائف ديناميكية مثل النوافذ المنبثقة وأشرطة تمرير الصور.
يستخدم HTML لإنشاء أشياء أخرى غير صفحات الويب أيضا. يمكنك استخدامه من أجل:
- إنشاء جداول لتنظيم البيانات
- إنشاء نماذج لجمع معلومات المستخدم أو معالجة المعاملات أو إجراء الحجوزات أو تقديم طلب
- إنشاء رسائل بريد إلكتروني باستخدام HTML
سواء كنت ترغب في إنشاء صفحات ويب أو جداول أو نماذج أو رسائل بريد إلكتروني ، فستحتاج إلى معرفة كيفية كتابة HTML. دعونا نفصل العملية أدناه.
كيفية كتابة HTML
كما ذكرنا ، HTML هو مجرد نص عادي مشروح مع الترميز. بتعبير أدق ، يتكون هذا الترميز من علامات وسمات. لمساعدتك في تصور بناء الجملة هذا، إليك رسم:
دعونا نلقي نظرة فاحصة على كل مكون من مكونات عنصر HTML أدناه.
علامات HTML
يتم تعيين عناصر HTML بواسطة العلامات. تحتوي معظم العناصر على علامة فتح وإغلاق. تسبق علامات التمييز الافتتاحية النص وتحتوي على اسم العنصر المرفق بين قوسين "<" و ">". علامات تمييز الإغلاق مطابقة لفتح علامات التمييز، باستثناء شرطة مائلة للخلف تسبق اسم العنصر.
لنفترض أنك تريد إضافة فقرة إلى صفحة الويب الخاصة بك ، ونص الفقرة هو "هذه فقرة". ستقوم بلفه بعلامات فقرة HTML: <p></p>. لذلك ، سيبدو HTML كما يلي:
<p>This is a paragraph.</p>
معا ، هذه الأشياء الثلاثة هي كل ما تحتاجه لجعل عنصر فقرة في HTML.
معظم عناصر HTML هي نفسها: علامة فتح ، علامة إغلاق ، ومحتوى بينهما. تحتوي بعض عناصر HTML ، مثل <br> (فواصل) ، على علامة فتح فقط - تسمى هذه العلامات الفارغة.
أسماء العناصر غير حساسة لحالة الأحرف. بمعنى أنه يمكن كتابتها بأحرف كبيرة أو صغيرة أو مزيج من الاثنين. على سبيل المثال، يمكن أيضا كتابة علامة <p> ك <P>. ومع ذلك ، يعتبر من أفضل الممارسات كتابة الاسم دائما بأحرف صغيرة.
سمات HTML
في حين أن جميع عناصر HTML تحتاج إلى علامات ، إلا أن بعضها فقط يحتاج إلى سمات. توفر السمة معلومات إضافية حول عنصر HTML، ويمكن أن تكون هذه المعلومات ضرورية أو غير ضرورية.
على سبيل المثال، يجب أن يكون لعنصر الصورة دائما سمة مصدر تكون قيمتها عنوان URL للصورة أو مسار الملف. خلاف ذلك ، لن يعرف المتصفح الصورة التي يجب تقديمها. وينطبق الشيء نفسه على عنصر الربط ، الذي يستخدم لإنشاء ارتباطات تشعبية - يجب أن يحتوي على سمة href تحدد قيمتها وجهة الرابط. خلاف ذلك ، إذا نقر الزائر على عنصر الربط ، فلن يرسله المتصفح إلى أي مكان.
السمات الأخرى ليست ضرورية لتضمينها ولكنها تعتبر ممارسة جيدة. على سبيل المثال، يمكن للمستعرض عرض صورة بدون السمة alt، التي تحتوي على نص بديل للصورة. ولكن ، قد يواجه القارئ الذي يعاني من إعاقات بصرية صعوبة في فهم ما تنقله الصورة دون وصف نصي بديل.
الآن بعد أن فهمنا أهمية السمات ، دعنا نتأكد من أننا نفهم كيفية العثور عليها وكتابتها. يتم العثور دائما على سمة في العلامة الافتتاحية لعنصر HTML وتحتوي على بناء الجملة: name="value".
تحتوي العديد من العناصر على مجموعة خاصة بها من السمات التي تؤثر على كيفية عرض المحتوى على الصفحة. يمكن كتابة السمات بأي ترتيب داخل علامة الافتتاح. ومع ذلك، لا يمكنك وضع مثيلات متعددة من نفس السمة داخل نفس علامة HTML.
قبل أن نتعرف على كيفية إنشاء ملف HTML ، دعنا نلقي نظرة على الأدوات التي ستحتاج إليها.
كيفية استخدام HTML
لبدء استخدام HTML ، تحتاج إلى محرر نصوص مثل Notepad ++ أو SublimeText او VS Code. نظرا لأن ملف HTML بتنسيق نص قياسي ، سيعمل أي محرر نصوص أساسي. ولكن من أجل هذا العرض التوضيحي وبما أن VS Code يعمل مع Mac و Windows ، فسوف نسير خلال العملية باستخدام هذا المحرر.
الخطوة 1: قم بتنزيل أحدث إصدار من VS Code.
انتقل إلى صفحة تنزيل النص السامي وانقر على نظام التشغيل الخاص بك. سيتم تنزيل ملف مضغوط.
الخطوة 2: افتح صفحة.
افتح الملف المضغوط وانقر على نص سامي في مجلد التنزيلات. سيتم فتح المحرر تلقائيا.
الخطوة 3: إضافة HTML.
قم بأنشاء ملف نص جديد في مجلد وقم باختيار الاسم الذي تريد بشرط ان يكون الامتداد للملف HTML مثال: SWED.html
.png)
قم بفتح الملف الجديد الذي قمة بكتابته باستخدام برنامج VS Code
انسخ HTML أدناه والصقه في المحرر. سنشرح ما يعنيه كل عنصر من هذه العناصر في القسم التالي.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
.png)
الخطوة 4: حفظ ملف HTML.
قم بحفظ الملف عن طريق ضغط catrl+s
الخطوة 5: عرض ملف HTML في متصفحك.
الآن يمكنك فتح ملف HTML في متصفحك. يمكنك إما النقر نقرا مزدوجا فوق الملف أو النقر بزر الماوس الأيمن واختيار فتح أو سحبه وإفلاته في نافذة متصفح مفتوحة. سيبدو الأمر كما يلي:
.png)
تهانينا قمت ببناء اول كود لك باستخدام لغة البرمجة.
الآن بعد أن عرفت كيفية استخدام محرر HTML ، دعنا نلقي نظرة على كيفية كتابة الشفرة الفعلية.
كيفية إنشاء ملف HTML
لإنشاء موقع ويب باستخدام HTML ، تحتاج إلى إنشاء ملف HTML أولا. سيحتوي هذا الملف على جميع HTML لصفحة الويب الخاصة بك ، وسيتم تحميله إلى خادم الويب الخاص بك. بهذه الطريقة ، عندما يبحث الزائر عن موقع الويب الخاص بك ، سيرسل الخادم ملف HTML إلى متصفح الزائر ، وسيقوم المتصفح بعرض الصفحة وفقا لذلك.
أدناه سنتجول في العملية خطوة بخطوة حتى تتمكن من إنشاء ملف HTML لمشروع الويب الخاص بك. سنقوم بإنشاء أبسط ملف HTML ممكن حتى يتمكن المبتدئون من المتابعة.
الخطوة 1: أضف <! DOCTYPE html > .
للبدء ، تحتاج إلى الإعلان عن نوع المستند ك HTML. للقيام بذلك ، أضف الرمز الخاص <! DOCTYPE html > في السطر الأول من الملف. تكمن اهمية هذا الرمز بمثابة الاسم التعريفي لملفك فوجود هذا الرمز يخبر المتصفح ان هذا الملف عبارة عن ملف HTML
الخطوة 2: إضافة عنصر <html>.
بعد ذلك ، ستحتاج إلى تعريف العنصر الجذر للمستند. نظرا لأن هذا العنصر يشير إلى اللغة التي ستكتب بها ، فسيكون دائما <html> في مستند HTML5.
في السطر الموجود أسفل إعلان DOCTYPE، أضف علامة فتح <html>. أسفل ذلك ، أضف علامة < / html > الختامية.
<html>
</html>
الخطوة 3: إضافة سمة لغة.
ضمن العلامة الافتتاحية لعنصر html ، يجب عليك أيضا تضمين سمة lang (اللغة). سيساعد ذلك قارئات الشاشة على تحديد اللغة التي يوجد بها المستند ، مما يجعل موقع الويب الخاص بك أكثر سهولة. بدون سمة اللغة، ستكون برامج قراءة الشاشة افتراضية للغة نظام التشغيل، مما قد يؤدي إلى سوء نطق العنوان والمحتويات الأخرى على الصفحة.
نظرا لأننا نكتب هذا المنشور باللغة الإنجليزية ، فسنقوم بتعيين قيمة سمة lang للملف إلى "en".
<html lang=”en”>
</html>
الخطوة 4: إضافة قسم الرأس والجسم.
يتكون مستند HTML من جزأين: قسم الرأس وقسم النص. يحتوي الرأس {head} على معلومات وصفية حول الصفحة بالإضافة إلى أي CSS داخلي. لا يعرض المتصفح هذه المعلومات للقراء. يحتوي قسم النص الأساسي {body} على جميع المعلومات التي ستكون مرئية على الواجهة الأمامية، مثل الفقرات والصور والروابط. لإنشاء هذه الأقسام، أضف علامة <رأس></رأس> ثم علامة <جسم></نص> بين <html> و </html> في المستند.
<html lang=”en”>
<head>
</head>
<body>
</body>
</html>
الخطوة 5: أضف عنوانا في قسم الرأس.
في قسم الرأس، ستحتاج إلى تسمية المستند. اكتب اسما (سنذهب مع "صفحة HTML الخاصة بي" في هذا المثال) ثم لفها في علامات <العنوان></العنوان>.
<head>
<title>My HTML Page</title>
</head>
الخطوة 6: أضف علامات <نمط> وأي CSS داخلي في قسم الرأس.
سأضيف أيضا علامات <نمط>< / نمط> داخل قسم الرأس. بين هذه العلامات ، يمكنك إضافة أي CSS داخلي تستخدمه لتصميم HTML الخاص بك. بدلا من إنشاء بعض قواعد CSS ، سأضيف تعليقا في CSS كعنصر نائب. يمكنك إضافة ثناء في HTML أيضا لأي شيء لا تريد أن يقدمه المتصفح.
ملاحظة: في العديد من مستندات HTML، لن ترى علامات النمط أو أي CSS. هذا يعني على الأرجح أن الصفحة تستخدم ورقة أنماط خارجية ، وهي طريقة شائعة لإضافة CSS إلى HTML. في حالة ورقة أنماط خارجية، سترى رابطا في القسم الرئيسي من المستند.
<head>
<title>My HTML Page</title>
<link rel="stylesheet" href="style.css"> <!-- This link is only necessary if you’re using an external stylesheet -->
<style>
/* These style tags are only necessary if you’re adding internal CSS */
</style>
</head>
الخطوة 7: إضافة عناصر HTML في قسم النص.
في قسم النص الأساسي ، دعنا نضيف الآن عنوانا وفقرة. ستكتب اسم العنوان وتلفه بعلامات <h1></h1>، وتكتب الفقرة وتلفها في علامات تمييز <p></p>.
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
أخيرا ، من الممارسات الشائعة وضع مسافة بادئة لعناصر HTML المتداخلة. على الرغم من أن هذا لا يحدث فرقا في معالجة المتصفح للملف ، إلا أن المسافة البادئة تصور بنية المستند وتسهل قراءته.
مثال HTML
فيما يلي مثال على ملف HTML أساسي يمكن لأي مبتدئ إنشاؤه. فهو يجمع بين التعليمات البرمجية المكتوبة في الخطوات المذكورة أعلاه.
<html lang=”en”>
<head>
<title>My HTML Page</title>
<link rel="stylesheet" href="style.css"> <!-- This link is only necessary if you’re using an external stylesheet -->
<style>
/* These style tags are only necessary if you’re adding internal CSS */
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
فيما يلي كيف سيبدو على الواجهة الأمامية. لاحظ أنه يتم عرض العنوان والفقرة فقط من قسم النص.
كما ترون ، هذا ملف HTML هيكلي. لملئه ، نحتاج إلى إلقاء نظرة على بعض عناصر HTML الأكثر شيوعا. لقد لاحظنا بالفعل عنصرين ، <h1> و <p>. دعونا نلقي نظرة فاحصة على هذه العناصر وغيرها أدناه.
عناصر HTML الشائعة
يتكون الإصدار الأول من HTML من 18 علامة فقط. منذ ذلك الحين ، تم إصدار أربعة إصدارات مع إضافة عشرات العلامات في كل إصدار. في أحدث إصدار ، HTML5 ، هناك علامات HTML 110.
عادة ما تظهر عناصر HTML بأحرف صغيرة، مع علامة بداية وعلامة نهاية وبعض المحتوى في المنتصف. ومع ذلك ، هناك عناصر مثل <br> التي لا تحتوي على محتوى أو علامة نهاية. وتسمى هذه العناصر الفارغة.
سنراجع أدناه العناصر الأكثر شيوعا وعلاماتها.
1. الفقرة (<p>)
يمثل عنصر فقرة HTML فقرة. من خلال وضع علامات <p></p> حول النص، ستجعل هذا النص يبدأ في سطر جديد.
فيما يلي مثال على فقرتين:
2. صورة (<img>)
يقوم عنصر صورة HTML بتضمين صورة في المستند. يتطلب سمة src (مصدر) لعرضها بشكل صحيح. يجب أيضا تضمين سمة alt في حالة عدم تحميل الصورة بشكل صحيح أو إصابة القارئ بضعف البصر.
في ما يلي مثال على صورة ذات سمة source و alt:
3. العناوين (<h1>-<h6>)
تمثل عناصر عنوان HTML مستويات مختلفة من عناوين الأقسام. <h1> هو أعلى مستوى للقسم وأبرزه ، في حين أن <h6> هو الأدنى وبالتالي الأقل بروزا.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
4. الشعبة (< الشعبة >)
عنصر تقسيم محتوى HTML (div) هو حاوية عامة على مستوى الكتلة ل "محتوى التدفق". محتوى التدفق هو فئة من عناصر HTML التي تحتوي على نص أو محتوى مضمن. تعتبر عناصر الربط واقتباس الكتلة والعنوان محتوى تدفق.
في النهاية الخلفية ، تساعد عناصر div في تنظيم التعليمات البرمجية في أقسام محددة بوضوح. في الواجهة الأمامية ، يضيفون فواصل أسطر قبل وبعد محتواهم. وإلا، فإنها لا تؤثر على محتوى الصفحة أو تخطيطها ما لم تكن مصممة باستخدام CSS.
في ما يلي مثال على div ملفوفة حول صورة:
<div> <img src="URL to the HubSpot sprocket logo" alt="the HubSpot sprocket logo"/> </div>
هنا ، تبدو الصورة كما كانت بدون عنصر غلاف div. ذلك لأنه لم يتم إعطاء أي معلومات نمط لعنصر div هذا. لتغيير مظهر الحاوية وبالتالي الصورة داخل تلك الحاوية، ستحتاج إلى إضافة معلومات النمط.
لنفترض ، على سبيل المثال ، أنك تريد توسيط الصورة. ثم يمكنك استخدام التعليمة البرمجية التالية لتوسيط الصورة أفقيا على الصفحة:
<h2>How to Center an Image with the Text Align Property</h2>
<div style="text-align: center;">
<img src="https://assets.codepen.io/6093409/sprocket.svg" alt="the HubSpot sprocket logo"/>
</div>5. (<Span >)
عنصر امتداد HTML هو حاوية مضمنة عامة ل "محتوى الصياغة". يشير محتوى الصياغة إلى النص وأي ترميز يحتوي عليه، مثل علامات <abbr> وعلامات <الصوت>.
لا تمثل علامات Span بطبيعتها أي شيء ، ولكنها تستخدم لتجميع محتوى الصياغة لسببين. الأول هو تطبيق معلومات النمط على جزء معين من النص. على سبيل المثال، إذا كنت تقوم بإنشاء أحرف كبيرة، يمكنك التفاف الحرف الأول من الفقرات الافتتاحية لكل قسم من أقسام مقالتك في علامات علامات امتداد.
<p><span style="font-size:36px;">T</span>his is dummy text. This is more dummy text.</p>السبب الثاني لاستخدام علامات الامتداد هو تجميع العناصر التي تشترك بالفعل في قيم السمات. على سبيل المثال ، ربما لديك موقع ويب للمتحدثين باللغة الإنجليزية الذين يتعلمون الفرنسية. يتم تعيين اللغة الافتراضية إلى الإنجليزية ولكن في عدة صفحات، قد يكون لديك جدول يحتوي على مصطلحات فرنسية في العمود الأول وترجماتها الإنجليزية في العمود الثاني. في هذه الحالة، يمكنك التفاف المصطلحات الفرنسية في علامات الامتداد مع تعيين سمة اللغة إلى "fr".
6. مرساة (<a>)
يقوم عنصر ربط HTML بإنشاء ارتباط تشعبي. يتطلب عنصر الربط سمة href ، والتي تحدد وجهة الرابط. يمكن أن تكون الوجهة قسما آخر على نفس صفحة الويب أو صفحة ويب أخرى على نفس الموقع ، أو مواقع ويب وملفات وعناوين بريد إلكتروني خارجية.
في ما يلي مثال على ارتباط متداخل في فقرة:
<p><a href="default.asp">This is a link</a> that appears within a paragraph.</p>7. قائمة غير مرتبة (<ul>)
يتم استخدام عنصر قائمة HTML غير المرتبة لتجميع العناصر عندما لا يكون الترتيب مهما. قوائم التسوق ، على سبيل المثال ، لا تحتاج إلى اتباع طلب معين. يجب تعريف عناصر القائمة بواسطة علامة <li> ثم لفها في عنصر <ul>.
في ما يلي مثال على قائمة غير مرتبة. حاول إضافة بعض عناصر القائمة بنفسك وشاهد كيف تتغير القائمة.
<h1>Ingredients for Street Corn</h1><ul> <li>Jalapeno</li> <li>Bag of frozen corn</li> <li>Cotija cheese</li> <li>Mayo</li> <li>Chili powder</li> <li>Cilantro</li> <li>Lime</li></ul>8. قائمة مرتبة (<ol>)
يتم استخدام عنصر القائمة بترتيب HTML لتجميع العناصر عندما يكون الترتيب مهما. الوصفات ، على سبيل المثال ، يجب أن تتبع ترتيبا معينا. يجب تعريف الخطوات بواسطة علامة <li> ثم لفها في العنصر <ol>.
ستبدأ القائمة المرتبة بالرقم 1 بشكل افتراضي. إذا كنت ترغب في البدء برقم آخر، فما عليك سوى إضافة سمة "ابدأ" وتعيين القيمة إلى الرقم الذي تريده.
في ما يلي مثال على قائمة مرتبة تبدأ من 1. حاول إضافة خطوات في أجزاء مختلفة من القائمة:
<h1>How to Make Street Corn</h1><ol> <li>Chop the jalapeno.</li> <li>Add jalapeno and frozen corn to skillet.</li> <li>Cook until charred, then let cool for 5 minutes.</li> <li>Combine cotija cheese, mayo, chili powder, cilantro, and lime in bowl with corn and jalapeno.</li></ol>9. التركيز (<م>)
يؤكد عنصر تركيز HTML على النص الذي يحتوي عليه. عادة ما تعرض المتصفحات النص بخط مائل.
في ما يلي مثال على التركيز الملفوف حول فقرة والمتداخل داخل فقرة:
<p>This paragraph is normal.</p><p><em>This paragraph is important!</em></p><p>This <em>word</em> within the paragraph is important!</p>10. تحديد (strong<>)
يشير عنصر HTML القوي إلى أن النص الذي يحتوي عليه له أهمية كبيرة أو إلحاح. عادة ما تعرض المتصفحات النص بخط غامق. فيما يلي مثال على العنصر القوي:
<p>This paragraph is normal.</p><p><strong>This paragraph is important!</strong></p><p>This <strong>word</strong> within the paragraph is important!</p>11. التعليق التوضيحي غير المفصلي (<u>)
يشير عنصر التعليق التوضيحي غير المفصلي إلى النص على أنه يحتوي على شكل من أشكال التعليقات التوضيحية غير النصية. على سبيل المثال، يمكنك استخدام هذا العنصر لإضافة تعليقات توضيحية على الأخطاء الإملائية.
<p>Because this <u>wrd</u> is misspelled, we've underlined it.</p>إذا كنت ترغب في تسطير النص لأي غرض آخر غير تمثيل تعليق توضيحي غير نصي، فاستخدم عنصر HTML آخر أو خاصية CSS أخرى. على سبيل المثال، إذا كنت ترغب في تسطير النص للزخرفة، فستستخدم خاصية زخرفة نص CSS وتضبطها على "تسطير" بدلا من ذلك. إذا كنت ترغب في وضع خط تحت عنوان كتاب ، فستستخدم عنصر الاستشهاد.
12. جدول (<table>)
ينشئ عنصر <table> جدولا لتنظيم المحتوى بطريقة يسهل قراءتها في لمحة. يتطلب ثلاثة عناصر HTML أخرى: علامات <tr> و <th> و <td>.
- علامة <tr> لتعريف صف جدول.
- علامة <th> لتعريف رأس الجدول.
- علامة <td> لتعريف بيانات الجدول (أي خلايا الجدول).
في ما يلي مثال على جدول:
<table border="1">
<tr> <th>Name</th> <th>Job Title</th> <th>Email address</th> </tr> <tr> <td>sam mas</td> <td>ali master</td> <td>example@company.com</td> </tr> <tr> <td>John Smith</td> <td>Marketing Manager</td> <td>example2@company.com</td> </tr> <tr> <td>mohmad ahlhag</td> <td>CEO</td> <td>example2@company.com</td> </tr> </table>13. القاعدة الأفقية (<hr>)
يحدد عنصر القاعدة الأفقية خطا أفقيا عبر صفحة ويب. يمكن استخدامه لوضع علامة على أي تغيير موضوعي ، مثل المشهد التالي في مسرحية ، أو قسم جديد من مقال ، أو ختام مقال.
فيما يلي مثال أعيد إنشاؤه من The Atlantic لقاعدة أفقية تشير إلى نهاية مقال وبداية السيرة الذاتية للمؤلف:
<p>Improvement may be slow. But experts think human interaction will, eventually, return to the pre-pandemic status quo. The rise in disorder may simply be the unsavory side of a uniquely difficult time—one in which many people were tested, and some failed. “There have been periods where the entire nation is challenged,” Insel said, “and you see both things: people who do heroic things, and people who do some very defensive, protective, and oftentimes ridiculous things.”</p> <hr> <p><em>Olga Khazan is a staff writer at The Atlantic and the author of Weird: The Power of Being an Outsider in an Insider World.</em></p>
14. اختار
يحدد عنصر التحديد قائمة منسدلة من الخيارات، والتي يمكن للمستخدم من خلالها تحديد خيار واحد (أو عدة خيارات إذا سمح بذلك). عادة ما يستخدم عنصر التحديد في نماذج HTML لجمع عمليات إرسال المستخدم. من الأفضل تحديد خيار واحد من بين العديد من الخيارات مع زيادة المساحة على صفحة الويب.
<label for="dog-names">Choose a dog name:</label> <select name="dog-names" id="dog-names"> <option value="rigatoni">Rigatoni</option> <option value="dave">Dave</option> <option value="pumpernickel">Pumpernickel</option> <option value="reeses">Reeses</option> </select>15. قسم
عنصر المقطع هو عنصر HTML دلالي يمثل أقساما مستقلة من المحتوى ذي الصلة في صفحة ويب. على سبيل المثال، يمكن استخدام عنصر مقطع لتجميع معلومات جهة الاتصال.
في المثال أدناه، يتم استخدام عناصر القسم لتقسيم صفحة الويب إلى قسمين "حول" و"جهة اتصال".
<h1>Homepage</h1> <section> <h2>About Us</h2> <p>Lollipop123 is an independent magazine that celebrates the writing of teens. We publish original work about the exciting and sometimes unpleasant phases of childhood. Originally created in 2015, the magazine collects stories, essays, and interviews about growing up. </p> </section> <section> <h2>Contact Us</h2> <p>To be a contributor for future projects, please say hello@lollipop123.com. </p> </section>16. فاصل الأسطر (<br>)
ينشئ عنصر فاصل الأسطر فاصل أسطر حيث يتم وضعه. هذا يعني أنه يمكنك إضافته أينما تريد أن ينتهي النص في السطر الحالي ويستأنف في السطر التالي. يمكن استخدام هذا العنصر لعرض القصائد أو كلمات الأغاني أو أشكال أخرى من المحتوى يكون فيها تقسيم الأسطر مهما.
فيما يلي مثال على عنوان تم تقديمه بطريقتين: واحدة باستخدام عناصر فاصل الأسطر والأخرى باستخدام عناصر الفقرة.
<p>Anna Fitzgerald<br> 11378 Fake Street<br> City, State 00000</p> <p>Anna Fitzgerald</p> <p>11378 Fake Street</p> <p>City, State 00000</p>سمات HTML الشائعة
تقوم السمات بتعديل عناصر HTML بطرق مختلفة. يمكنهم تغيير مظهر العنصر أو تطبيق معرفات فريدة بحيث يمكن استهداف العناصر بواسطة CSS أو توفير المعلومات اللازمة للقراء أو قارئات الشاشة.
عادة ما تظهر السمات بأحرف صغيرة وكأزواج من الأسماء/القيم، مع قيمها في علامات اقتباس.
أدناه سنلقي نظرة على السمات الأكثر شيوعا.
1. سمة النمط
تحتوي سمة النمط على CSS مضمنة. سيتجاوز CSS هذا أي أنماط تم تعيينها في القسم الرئيسي من المستند أو في ورقة أنماط خارجية. سيتم تطبيقه فقط على عنصر HTML الذي يحتوي على سمة النمط في علامته الافتتاحية.
في ما يلي مثال على السمة في HTML:
<p>This paragraph will be black by default. </p>
<p style="color: #800000">This paragraph will be maroon. </p>
2. سمة ID
يتم استخدام سمة ID لتحديد عنصر واحد في ملف HTML. وهذا يعني أنه لا ينبغي تكرار قيمة سمة ID داخل نفس الملف. باستخدام هذه القيمة الفريدة ، يمكنك استهداف عنصر واحد باستخدام CSS داخلي أو خارجي.
في ما يلي مثال على السمة في HTML:
<h1 id=”decorative”>Title in Fancy Typography</h1>
3. سمة الفئة
يتم استخدام سمة class (فئة) لتحديد مجموعة من العناصر تحت نفس الاسم وتخصيص تلك المجموعة، مما يؤدي إلى إنشاء مجموعة جديدة من العناصر بشكل فعال.
على سبيل المثال ، يتم تصنيف جميع أزرار Bootstrap بفئة .btn بحيث يكون لها نفس النمط الأساسي: خط 14px ، متوسط الحجم ، حواف مستديرة ، إلخ.
في ما يلي مثال على السمة في HTML:
<button class="btn" type="submit">Button</button>
4. سمة اللغة
كما ذكرنا ، تشير سمة اللغة إلى قارئات الشاشة إلى اللغة الأساسية لصفحة الويب ومتى يحتاجون إلى التبديل إلى لغة أخرى. هذه تفاصيل صغيرة يمكن أن تجعل المحتوى الخاص بك أكثر سهولة لجميع القراء ، بغض النظر عن المنطقة التي ينتمون إليها أو اللغة التي يتحدثون بها.
على الرغم من أن هذه السمة مضمنة بشكل شائع في عنصر HTML ، إلا أنه يمكن استخدامها أيضا مع الفقرة و div و span وعناصر أخرى.
في ما يلي مثال على السمة في HTML:
<p lang="fr">Cette phrase est en français</p>
<p lang="es">Esta frase es en español.</p>
5. سمة Href
تحتوي سمة href على وجهة رابط. يجب دائما تضمين هذه السمة مع عنصر ربط.
في ما يلي مثال على سمة href في HTML:
<a href="https://www.hubspot.com">go to HubSpot.com</a>
6. سمة المصدر
تماما كما يحتاج عنصر الربط إلى سمة href ، تحتاج الصورة إلى سمة مصدر. يحتوي هذا على المسار إلى ملف الصورة أو عنوان URL الخاص به.
فيما يلي مثالان على السمة في HTML:
<img src="images/pineapple.png">
<img src="https://cdn.pixabay.com/photo/2015/07/30/11/05/pineapple-867245_960_720.jpg">
7. السمة Alt
توفر السمة alt معلومات وصفية حول عنصر HTML. هذا مهم للقراء الذين يعانون من إعاقات بصرية ولجميع القراء في حالة عدم تحميل العنصر. في هذه الحالة ، سيظل القراء قادرين على جمع ما كان من المفترض أن ينقله العنصر. مثل السمة source، ستجد غالبا السمة alt مع عنصر الصورة.
في ما يلي مثال على السمة في HTML:
<img src="https://cdn.pixabay.com/photo/2015/07/30/11/05/pineapple-867245_960_720.jpg" alt="Pineapple in grass">
8. السمة data-*
يتم استخدام السمة data-* لتخزين البيانات المخصصة الخاصة بالصفحة أو التطبيق. يمكنك استخدام هذه البيانات المخزنة في جافا سكريبت الخاصة بالمستند لإنشاء تجربة أكثر ديناميكية للمستخدم.
يمكن أن تكون العلامة النجمية في السمة data-* أي قيمة.
في ما يلي مثال على السمة في HTML من W3Schools:
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
يمكنني بعد ذلك استخدام هذه البيانات في جافا سكريبت لتشغيل رسالة منبثقة توفر المزيد من المعلومات حول كل عنصر من عناصر القائمة. لنفترض ، على سبيل المثال ، أن زائرا نقر على كلمة "البومة". ثم سيظهر مربع منبثق يقول "البومة طائر" ، كما هو موضح في لقطة الشاشة أدناه.
كيف تتعلم HTML:
في هذه المقالة قمنا بشرح الاساسيات فقط لكن أذا كنت تعلم اكثر عمقاً فستحتاج الى الذهاب الى مراجع أكبر وأكثر بكثير من هذه من افضل هذه المصادر:
هناك المئات من الموارد المتاحة لتعلم HTML للمبتدئين أو المطورين الأكثر تقدما. اعتمادا على أسلوب التعلم الخاص بك ، قد تفضل قراءة مشاركات المدونة أو مشاهدة مقاطع الفيديو التعليمية أو أخذ دورات تدريبية عبر الإنترنت أو تنزيل كتاب إلكتروني أو استخدام مزيج من كل هذه الموارد.
فيما يلي سنتناول مثالا واحدا على الأقل لكل نوع من أنواع المحتوى هذه. بهذه الطريقة ، بغض النظر عن نوع المتعلم الذي أنت عليه ، يمكنك العثور على مورد يساعدك على تعلم هذه اللغة.
1. دليل المبتدئين إلى HTML و CSS للمسوقين
إذا كنت قد بدأت للتو في تعلم البرمجة ، فقد تم تصميم هذا الكتاب الإلكتروني المجاني لتعليم HTML للمبتدئين. سيشرح ما هو HTML و CSS ، وكيف يختلفان ، وكيفية البدء إذا كنت جديدا تماما على تطوير الويب. كما يوحي العنوان ، تم تصميم هذا الدليل خصيصا للمسوقين الذين يحتاجون إلى أن يكونوا قادرين على إجراء إصلاحات سريعة لمواقعهم على الويب ومدوناتهم وصفحاتهم المقصودة.
2. Codeacdemy
جرب فصل HTML للتعلم في Codeacdemy. ستبدأ هذه الدورة التدريبية عبر الإنترنت بالبنية الأساسية وعناصر HTML. يمكنك بعد ذلك اختبار معرفتك من خلال بناء عناصر ومشاريع أكثر تعقيدا ، بما في ذلك جداول ونماذج HTML ، من الصفر.
على الرغم من أنه يمكنك إكمال معظم الدورة التدريبية مجانا ، إلا أن هناك ميزات احترافية مثل الاختبارات والمشاريع التي سيتعين عليك دفعها لإلغاء قفلها.
3. HTML البرنامج التعليمي من قبل W3Schools
في بعض الأحيان عليك أن تتعلم عن طريق العمل. W3Schools HTML البرنامج التعليمي يركز على هذا المفهوم بالضبط. باستخدام محرر التعليمات البرمجية عبر الإنترنت ، يمكنك البدء بالعظام العارية لمستند HTML وممارسة كتابة HTML من الصفر ، أو يمكنك البدء بأمثلة أكثر تفصيلا وتحريرها. يمكنك أيضا إكمال التمارين والاختبارات لكل موضوع تغطيه.
4 . تعلم HTML
مثل W3Schools ، تعلم HTML هو برنامج تعليمي تفاعلي مجاني. ومع ذلك ، بدلا من محاولة أن تكون المورد الأكثر شمولا على HTML ، يقدم Learn HTML دليلا قصيرا خطوة بخطوة لإنشاء صفحة ويب. في كل خطوة ، يمكنك اختبار ما إذا كنت قد فهمت الدرس من خلال إكمال تمرين في محرر التعليمات البرمجية عبر الإنترنت. إذا كانت التعليمات البرمجية الخاصة بك تتطابق مع الإخراج المتوقع ، فستتلقى رسالة نجاح وستتم دعوتك للانتقال إلى الدرس التالي.
5. HTML تعليمي للمبتدئين بواسطة HTML
أنشأ HTML Dog برنامجا تعليميا للمبتدئين بتنسيق HTML لأولئك الذين ليس لديهم أي معرفة سابقة على الإطلاق ب HTML أو CSS. يبدأ بنظرة عامة على ماهية HTML وما يتكون منه (العلامات والعناصر والسمات). ثم يتجول في كيفية إنشاء ملف HTML مع العناوين والفقرات والعناوين والعناصر الأخرى. في النهاية ، ستكون قد مشيت على الرغم من كيفية إنشاء ملف HTML كامل.
يشبه هذا W3Schools و Learn HTML - ولكنه يدعوك إلى إنشاء ملف HTML في المحرر الذي تختاره ، بدلا من المحرر المدمج. يوصي على وجه التحديد المفكرة.
ما هو رايك في المحتوى ؟
هل لديك اي سؤال أخر؟