لغة HTML
لغة HTML

لغة HTML. كيفية تعلمها وتطبيقها لتحرير نص أو متصفح إنترنت

كيف تتعلم لغة HTML؟

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

تعلم أساسيات لغة HTML

1. افتح مستند لغة HTML.

يمكن استخدام معظم برامج تحرير النصوص ، بما في ذلك Notepad أو Notepad ++ لنظام التشغيل Windows و TextEdit لنظام التشغيل Mac و gedit لـ GNU / Linux لكتابة مستندات HTML. افتح مستندًا جديدًا واستخدم “ملف ← حفظ باسم” في القائمة العلوية لحفظه كـ “صفحة ويب” أو لتغيير امتداد الملف إلى “.html” بدلاً من “.doc” أو “.rtf” أو أي شيء آخر تمديد.
قد ترى تحذيرًا بأنه سيتم تغيير المستند الخاص بك إلى “نص عادي” بدلاً من “نص منسق” ، أو أن التنسيق الخاص والصور لن يتم حفظها بشكل صحيح. هذا جيد؛ مستندات HTML لا تستخدم هذه الخيارات.

2. عرض المستند الخاص بك مع مستعرض الإنترنت.

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

3. فهم علامات الترميز لغة HTML .

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

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

4. لااكتب علامة <html> الأولى الخاصة بك.

يبدأ كل مستند html بعلامة <html> وينتهي بعلامة </html>. هذا يخبر المتصفح أن كل شيء بين هذه العلامات موجود بتنسيق لغة HTML. أضف هذه العلامات إلى المستند الخاص بك:

  • في كثير من الأحيان ، تبدأ ملفات HTML بسطر <! DOCTYPE html> الذي يشير إلى أن الملف ككل يجب أن تقرأه المستعرضات كملف HTML. ليست هناك حاجة إليها ، ولكنها قد تساعد في حل مشكلات التوافق.
  • اكتب <html> في الجزء العلوي من المستند.
  • اضغط على Enter أو رجوع عدة مرات لمنح نفسك بعض المساحة ، ثم اكتب </html>
  • تذكر أن تكتب كل شيء آخر في هذا البرنامج التعليمي بين هاتين العلامتين.

5. املأ جزء <head> من المستند.

بين علامتي <html> و </html> ، اكتب علامة البداية <head> وعلامة النهاية </head>. امنح نفسك مساحة للكتابة بينهما. لن يتم عرض كل شيء بين علامات الرأس هذه في الواقع على الصفحة نفسها. جرب ما يلي وشاهد مكان ظهوره بدلاً من ذلك:

  • بين علامتي <head> و </head> ، اكتب <title> و </title>
  • و بين علامتي <title> و </title> .
  • احفظ المستند وافتحه في المستعرض (أو احفظ المستند ، ثم قم بتحديث صفحة المتصفح إذا كانت مفتوحة بالفعل). هل ترى ما كتبته في أعلى المتصفح ، فوق شريط العناوين؟

6. قم بإنشاء قسم <body>.

كل شيء آخر في مستند المبتدئين هذا سيظهر في قسم النص ، والذي يتم عرضه بالفعل على صفحة الويب. بعد علامة النهاية </head> ، ولكن قبل علامة </html> ، اكتب <body> و </body>. بالنسبة لبقية هذا البرنامج التعليمي ، سيتم وضع كل ما تكتبه بين علامات الجسم هذه. يجب أن يكون لديك الآن مستند يشبه هذا:

  • <html>.
  • <head>.
  • </title>.
  • </head>.
  • <الجسم>.
  • </body>.
  • </html>.

7. أضف نصًا بأنماط مختلفة مستند لغة HTML .

حان الوقت الآن لكتابة شيء يمكنك رؤيته بالفعل في متصفحك! سيظهر أي شيء تكتبه داخل علامات النص الأساسي في متصفحك بعد حفظ مستند لغة HTML وتحديث صفحة المتصفح. لا تكتب أي شيء برموز <أو> ، لأن متصفحك سيحاول تفسيره على أنه تعليمات HTML بدلاً من النص العادي. جرب كتابة Hello world! (أو أي شيء آخر تحبه) ، ثم أضف هذه العلامات الجديدة حوله وشاهد ما يحدث في كل مرة:

  • ستظهر كلمة <em> مرحبًا بالعالم! </ em> على شكل “نص بارز:” Hello world!
  • سيظهر كلمة <strong> Hello world! </strong> في شكل “نص قوي:” Hello world!
  • <s> أهلاً بالعالم! </ s> يتوسطه خط: أهلاً بالعالم!
  • بعدها ستظهر <sup> Hello world! </sup> بصيغة مرتفعة: Hello world!
  • <sub> أهلاً بالعالم! </ sub> ستظهر على هيئة نص منخفض: أهلاً بالعالم!
  • جرب مزيجًا مما يلي: كيف تبدو <em> <strong> Hello world! </strong> </em>؟

8. قسّم النص إلى فقرات.

إذا حاولت كتابة عدة أسطر من النص في مستند لغة HTML الخاص بك ، فقد تلاحظ أن فواصل الأسطر لا تظهر في متصفحك. يجب عليك ترميز هذه في نفسك:
<p> هذه فقرة منفصلة </ p>
هذه الجملة متبوعة بفاصل سطر <br> قبل أن تبدأ هذه الجملة.
هذه هي العلامة الأولى التي تراها ولا تحتاج إلى علامة نهاية! وتسمى هذه “العلامات الفارغة”.

قم بعمل عناوين لعرض أسماء الأقسام:

  • <h1> هذا نص الرأس </ h1>: العنوان الأكبر.
  • <h2> و نص العنوان </ h2> (رأس المستوى الثاني).
  • <h3> هذا نص العنوان </ h3> (رأس المستوى الثالث).
  • <h4> و هذا نص الرأس </ h4> (رأس المستوى الرابع).
  • <h5> هذا نص الرأس </ h5> (العنوان الأصغر).

9. تعلم كيفية عمل القوائم.

هناك عدة طرق مختلفة لكتابة القوائم على صفحة الويب الخاصة بك. جرب الأنواع التالية من الأكواد واعرف أيها تفضل. لاحظ أن زوجًا واحدًا من العلامات يتجول في القائمة بأكملها (مثل علامتي <ul> و </ul> لـ “قائمة غير مرتبة”) ، بينما العناصر الفردية في القائمة محاطة بزوج آخر من العلامات ، مثل <li> و </li>.

  • استخدم هذا الرمز لعمل قوائم ذات تعداد نقطي:
    <ul> <li> عنصر واحد </ li> <li> و عنصر آخر </ li> <li> أو عنصر آخر </ li> </ul>
  • أو هذا الكود لعمل قوائم مرقمة:
    <ol> <li> العنصر 1 </li> <li> و العنصر 2 </li> <li> أو العنصر 3 </li> </ol>
  • أو هذا الكود لعمل قائمة تحدد المصطلحات:
    <dl><dt> القهوة </ dt> <dd> – المشروبات الساخنة </ dd> <dt> لايت </ dt> <dd> – و المشروبات الباردة </ dd> </dl>

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

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

  • أدخل سطرًا بتنسيق HTML: <br> أو <hr>
  • أضف الصور: <img src = “your_image_url”>

11. ارتباط بأماكن أخرى على الصفحة.

يمكنك أيضًا استخدام هذا الرمز للارتباط بصفحات ومواقع ويب أخرى ، ولكن في الوقت الحالي ، نظرًا لأنه قد لا يكون لديك موقع ويب حتى الآن ، فسنركز على “نقاط الارتساء” أو الأماكن المحددة على الصفحة التي يمكنك الارتباط بها:
قم أولاً بعمل رابط باستخدام العلامة <a> في النقطة التي تريد الارتباط بها على الصفحة. أطلق عليه اسمًا وصفيًا وسهل التذكر:

  • <a name=”Tips”> هذا هو النص الذي تضع نقطة الارتساء حوله. </a>
    استخدم <href> للارتباط بهذه الروابط أو بصفحة ويب أخرى:
  • <a href=”url of webpage ، or name of anchor within this page”> اكتب النص أو الصورة التي سيتم عرضها كارتباط هنا. </a>
  • للارتباط بنقطة ارتساء على صفحة ويب مختلفة ، أضف علامة # بعد عنوان URL ، متبوعًا باسم المرساة. على سبيل المثال ، روابط المقالات الخاصة بالموقع

شارك المقالة
.......

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *