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

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

طريقة 1

طريقة 1 من 2:

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

تنزيل المقال

1
قم بفتح ملف HTML. أغلب برامج تحرير النصوص مثل : Notepad أو Microsoft Word في الويندوز، أو TextEdit بالنسبة لأجهزة الماك، يمكن استخدامها في كتابة ملفات HTML. قم بفتح ملف جديد واستخدم قائمة "ملف File" ثم Save As في أعلى القائمة من أجل حفظ الملف على هيئة صفحة ويب، أو من أجل تغيير امتداد الملف إلى ".html" أو ".htm" بدلًا من امتداد ملفات النصوص العادية مثل: ".doc" أو ".rtf"
- قد تظهر لك رسالة تحذير تخبرك بأن الملف سيتغير إلى " نص عادي plain text " بدلًا من " نص غني rich text " أو أن بعض التنسيقات والصور لن يتم حفظها بطريقة سليمة. لا بأس من ذلك، فلملفات HTML لا تستخدم هذه الاختيارات على أي حال.
2
شاهد الملف بواسطة متصفح الانترنت. قم بحفظ الملف الفارغ، ثم اذهب إلى مكان حفظه على جهاز الكمبيوتر واضغط عليه مرتين لفتحه. من المفترض أن يظهر لك صفحة ويب فارغة تمامًا. إذا لم يعمل بهذه الطريقة قم بسحب الملف إلى شريط العنوان URL في متصفحك. الصفحة خالية لأننا لم نكتب أي أكواد بعد، ومن خلال ما سنتعلمه في النقاط التالية، يمكنك في كل مرة أن تقوم بفتح الملف بواسطة المتصفح لمشاهدة التغييرات في كل مرة.
- لاحظ أن ذلك لا يصنع موقعًا إلكترونيًا على الإنترنت. لن يقدر الآخرون بعد على زيارة صفحة الويب الخاصة بك، كما أنك لا تحتاج إلى إتصال بالانترنت من أجل اختبار أو مشاهدة الصفحات المبرمجة. كل ما تحتاجه هو المتصفح من أجل قراءة ملف HTML كأنه موقع إلكتروني عادي.
3
افهم أوسمة البيانات والتوصيف Markup Tags. لا تظهر تلك الوسوم في صفحة الويب مثل النصوص العادية. ولكن دورها الرئيسي هو القيام بإخبار متصفح الانترنت بكيفية إظهار صفحة الويب ومحتواها. "الوسم الإفتتاحي start tag" يحتوى على التعليمات. على سبيل المثال، قد يخبر متصفح الانترنت بإظهار النصوص بلون أو حجم معين. تحتاج أيضًا " الوسم الختامي end tag " لإخبار المتصفح بالحد الذي ينتهى عنده تطبيق الأمر. في المثال التالي، النص بين الوسم الافتتاحي والختامي سيكون عريضًا Bold. يتم كتابة كلا الوسمين في أقواس زاوية < > لكن يتم إضافة شرطة مائلة slash بعد القوس الأول في الوسم الختامي < />.
- قم بكتابة الوسم الإفتتاحي بين قوسي زاوية: <يُكتب وسم البداية هنا>
- قم بكتابة الوسم الختامي في قوسي زاوية، مع إضافة شرطة مائلة بعد القوس الأول: </يكتب وسم النهاية هنا >
- واصل القراءة من أجل تعلم كيفية كتابة وسم وصفي توظيفي Functional Markup Tag. في الخطوة التالية كل ما تحتاج معرفته هو تذكر أن الشكل الأساسي يكون مكتوب : < > و </ >
- في بعض المواد التعليمية للغة HTML يتم الإشارة إلى الوسوم بوصفها " عناصر " والنص بين الوسم/ العنصر الافتتاحي والوسم/العنصر الختامي يتم وصفه بـ " محتوى العنصر".
4
اكتب وسم HTML الأول لك. يبدًا أي ملف HTML بوسم <html> وينتهى بوسم </html>. ويكون الهدف من هذا إخبار المتصفح بأن كل المذكور بين الوسمين مكتوب بلغة HTML. لذلك قم بإضافة هذين الوسمين إلى ملفك.
- غالبًا ما تبدأ ملفات HTML بسطر <!DOCTYPE html> الذي يشير للمتصفحات إلى أنه يجب قراءة الملف كله كملف HTML. ليست هناك حاجة إلى ذلك السطر، ولكنه قد يساعد في حل مشكلات التوافق.
- اكتب <html> في بداية الملف.
- قم بالضغط على enter أو return عدة مرات لإضافة مساحة كبيرة لإستخدامها في كتابة بقية الأوامر. ثم اكتب </html>.
- تذكر دائمًا أن تكتب بقية الأكواد والأوامر المذكورة في الشرح التالي، في المساحة بين وسم html الابتدائي، ووسم html الختامي.
5
تعبئة قسم <head> الخاص بالملف. في المسافة بين <html> و </html> قم بكتابة <head> ابتدائي، و </head> ختامي. اترك لنفسك مساحة أيضًا للكتابة بينهما. كل المكتوب بينهما لن يظهر على صفحة الويب نفسها. جرب ما يلي، ولاحظ مكان ظهورها في المقابل:
- في المسافة بين <head> و </head>؛ قم بكتابة <title> و </title>
- في المسافة بين <title> و </title>، قم بكتابة " كيفية تعلم لغة HTML ".
- قم بحفظ الملف ثم فتحه بواسطة متصفح الانترنت ( أو قم بحفظه ثم اضغط refresh على صفحة المتصفح إذا كانت مازالت مفتوحة.) هل تلاحظ المكتوب في شريط المتصفح العلوي فوق شريط العنوان؟.
بقية ما يلى من نقاط في هذا الملف التجريبي للمبتدئين سيتم كتابته في قسم body، أو جسد الصفحة، التي تظهر كل محتوياته بشكل طبيعي على صفحة الويب. بعد الوسم الختامي </head>، وقبل وسم </html> قم بكتابة <body> و </body>. الآن من المفترض أن يكون لديك ملف مكتوب كما يلي:
<html> <head> <title>How to Learn HTML - How.com.vn</title> </head> <body> </body> </html>
7
إضافة النصوص بأنماط مختلفة. الآن حان وقت كتابة شيء تقدر على رؤيته في المتصفح مباشرة. كل ما ستقوم بكتابته في قسم body بين الوسم الإفتتاحي والوسم الختامي له سوف يظهر بمجرد حفظك لملف HTML وإعادة تحميل الصفحة بواسطة المتصفح. لا تكتب أي شيء بين أقواس الزاوية < أو >. حيث سيفهمها المتصفح بوصفها تعليمات وأوامر ضمن لغة HTML وليست نصوص تلقائية من المفترض ظهورها في صفحة الويب. جرب كتابة Hello world! أو أي شيء آخر ، وأضف حوله الأكواد والأوامر التالية، وراقب ما يحدث:
- <em>Hello world!</em> سيظهره كنص مائل مؤكد Hello world!
- <strong>Hello world!</strong>سيظهر النص بحجم عريض Hello world!
- <s>Hello world!</s> سيظهر النص مشطوبًا ~~Hello world!~~
- <sup>Hello world!</sup> سيظهر النص كحرف فوقي ^{Hello world!}
- <sub>Hello world!</sub> سيظهر النص كحرف سفلي _{Hello world!}
- جرب مزيج من تلك الأوامر: <em><strong>Hello world!</strong></em> ماذا يظهر لك ؟
8
قم بتقسيم النص الخاص بك إلى فقرات. إذا كنت ترغب في كتابة خطوط متعددة في ملف HTML الخاص بك، فستلاحظ أن فواصل الأسطر لا تظهر في المتصفح. لذلك عليك كتابة أوامرها بنفسك:
- <p> الوسم أو الأمر التالي يفصل بين السطور </p>
- الوسم التالي يتم كتابته بعد الجملة المطلوب إضافة سطر فاصل بعدها <br>أو قبل الجملة في حالة الرغبة في إضافة سطر فاصل قبلها
  الأمر التالي هو أول كود تستخدمه لا يحتاج إلى وسم ختامي . وتسمى هذه الوسوم بالأوسام الفارغة "empty tags."
- إضافة عناوين لعرض أسماء الأقسام:
  <h1>عنوان 1</h1>: العنوان من المستوى الأول
  <h2>عنوان 2</h2> (المستوى الثاني)
  <h3>عنوان 3</h3> (المستوى الثالث)
  <h4>عنوان 4</h4> (المستوى الرابع)
  <h5>عنوان 5 </h5> (العنوان الأصغر)
9
كيفية صنع قائمة في HTML. هناك العديد من الطرق المختلفة لكتابة قائمة في صفحة الويب الخاصة بك. جرب الأكواد التالية لتحديد ما يناسبك منهم. لاحظ أن زوج واحد من الوسوم / العلامات يتم كتابته حول القائمة كلها ( مثل <ul> و </ul> الخاص بصناعة القوائم الغير مرقمة ) بينما العناصر الفردية في القائمة تكون محاطة بزوج من الوسوم مثل <li> و </li>
- استخدم الكود التالي لصناعة قائمة نقطية :
  <ul><li>العنصر الأول </li><li>العنصر الثاني </li><li>العنصر الثالث </li></ul>
- أو هذا الكود للقائمة المرقمة :
  <ol><li>العنصر الأول </li><li>العنصر الثاني </li><li>العنصر الثالث </li></ol>
- أو هذا الكود لصناعة قائمة تعريفات :
  <dl><dt>القهوة </dt><dd>-مشروب ساخن </dd><dt>الحليب </dt><dd>- مشروب بارد</dd></dl>
10
تجميل الصفحة عن طريق إضافة " فواصل أسطر " و " خطوط أفقية " و " بعض الصور ". الآن حان وقت تجربة إضافة بعض العناصر الآخرى جنبًا إلى جنب مع النصوص. جرب الأكواد التالية للقيام بذلك. سوف تحتاج استخدام خدمة استضافة إلكترونية للصور حتى تمتلك URL تقدر على ربطه بأمر إضافة الصورة.
- لإضافة خط بلغة HTML استخدم : <br> أو <hr>
- لإضافة صورة، استخدم <img src="الرابط الخاص بالصورة">
11
الربط بين محتويات الصفحة. يمكنك أن تستخدم ذلك الأمر أيضًا في ربط الصفحة بصفحات أخرى على الموقع، أو بمواقع أخرى تمامًا، لكن بما أنك لا تملك موقع إلكتروني كامل بعد، سوف نركز على " المرسي anchor " وهو ما يطلق على الانتقال بواسطة رابط تشعبي إلى مكان آخر في نفس الصفحة.
- قم بصناعة المرسي بإستخدام الوسم <a> في المكان من الصفحة الذي ترغب في الإنتقال إليه . وقم بتسميته بإسم توصيفي يسهل عليك تذكره .:
  
  <a name="تعليمات ">هذا هو النص الذي سنبحر بالمرسي إليه </a>
- استخدم الأمر <href> للربط مع هذا المرسي أو الانتقال إلى صفحة أخرى أو موقع إلكتروني آخر :
  
  <a href="أدرج هنا رابط الصفحة الآخرى أو اسم - المرسي - الموجود في نفس الصفحة و المراد الإنتقال إليه بواسطة هذا الرابط ">واكتب هنا النص أو الصورة التي ستعمل على هيئة رابط الإنتقال</a>
- لإضافة رابط مع مرسي موجود على صفحة ويب أخرى، قم بإضافة علامة # بعد الرابط، متبوعًا باسم المرسى. على سبيل المثال http://www.wikihow.com/Learn-HTML#Tips ينقلك مباشرة إلى قسم التعليمات والنصائح في صفحة تعلم HTML على موقع Wikihow.

طريقة 2

طريقة 2 من 2:

تعلم HTML متقدمة

تنزيل المقال

1
تعلم إضافات الوسوم. إضافات أو تعديلات الوسوم يتم وضعها في الوسم نفسه، من أجل إضافة تعديلات " لمحتوى العنصر " بين الوسم الابتدائي والختامي. لا يتم إستخدامها بمفردها أبدًا. ويتم كتابتها بشكل name="value" حيث يكون name الاسم هو اسم الإضافة (على سبيل المثال " color ") والقيمة value تصف قيمة هذه الإضافة ( على سبيل المثال " red " )
- بالتأكيد أنك رأيت تلك الإضافات من قبل، خاصة إذا كنت قد اتبعت الخطوات في قسم أساسيات HTML. فأمر <img> سيتخدم إضافة src . والمراسي anchors تستخدم الإضافة name ، والروابط تستخدم الإضافة "'href. هل تلاحظ كيف تستخدم تلك الإضافات الشكل name="value" ؟
2
جرب جداول HTML. صنع جدول أو رسم بياني يتطلب العديد من الوسوم والأوامر. استخدم الأوامر التالية للتجربة:
- ابدأ بوسم الجدول Table حول محتويات الجدول كلها <table></table>
- وسم الصف Row حول محتوى كل صف <tr>
- رأس العمود في الصف الأول : <th>
- الخلايا في الصفوف اللاحقة : <td>
- هاهو مثال عن كيفية عمل تلك الأكواد مع بعضها البعض :
  
  <table><tr><th>الصف الأول : الشهر</th><th>الصف الثاني : الأموال المدخرة</th></tr><tr><td>يناير </td><td>$100</td></tr></table>
3
تعلم أوامر قسم Head المختلفة. تعلمنا في قسم أساسيات HTML وسم <head> ، الذي يتم وضعه في بداية كل ملف. بالإضافة إلى وسم <title> ، يمكن أيضًا أن يحتوى على الأنواع التالية من الوسوم :
- العلامات الفوقية Meta Tags، التي تعمل على إمداد قدر من المعلومات حول صفحة الويب. يتم إستخدامها في المتصفحات عندما تعمل الروبوتات على تفقد الإنترنت وإدراج المواقع المختلفة. ومن أجل إظهار موقعك في نتائج البحث قم بإضافة وسم <meta> أو أكثر ( لا يوجد له وسم ختامي )، مع إلحاقه بإضافة الإسم name attribute و إضافة المحتوى content attribute ، على سبيل المثال <meta name="الوصف" content="قم بكتابة وصف الموقع هنا"> أو <meta name="علامات مفتاحية" content="اكتب قائمة بالعلامات المفتاحية الخاصة بالموقع، مع الفصل بين كل منها بفصلة comma ">
- وسوم <link> تستخدم لمشاركة ملفات أخرى في الصفحة. وتستخدم خاصة للربط مع ملفات CSS، التي يتم صنعها بواسطة نوع مختلف من الأكواد من أجل تغيير ألوان صفحة HTML ، وتوزيع النصوص والعديد من الإضافات الأخرى.
- وسوم <script> وتستخدم لربط الصفحة بملفات الجافا سكربت، التي تضيف إلى ملفات HTML بعض التواصل مع المستخدم.
4
تفقد ملفات HTML المتاحة عبر المواقع. تفقد ملفات مصادر HTML للمواقع تعد طريقة رائعة لتوسيع معرفتك. يمكنك أن تقوم بذلك عن طريق الضغط بالزر الأيمن للفأرة على صفحة الويب واختيار "View Source" أو "View Page Source" أو أي أوامر مشابهة. أو عن طريق الذهاب إلى قائمة View عرض في القائمة العليا للمتصفح واختيار نفس الأمر المذكور. حاول أن تكتشف ما تقوم به أوامر HTML الغريبة عليك، أو قم بالبحث عبر الإنترنت من أجل الوصول للمزيد من فرص المعرفة والتعلم.
- بالتأكيد لا تملك حق التعديل على المواقع الإلكترونية الخاصة بالآخرين، لكنك على الأقل تقدر على نسخ كود HTML في ملف خاص بك، ومواصلة اللعب والتعلم عليه لملاحظة الفرق الذي يحدث مع كل تغيير تقوم به. لاحظ أن عدم توفر ملف CSS المرتبط بالموقع، قد يمنعك من رؤية كل التنسيقات والألوان الخاصة بالموقع بطريقة صحيحة.
تعلم المزيد من تصميم الويب المتقدم من مصادر المعرفة المتاحة عبر الانترنت. هناك العديد من المصادر عبر الانترنت تتيح لك تعلم كل شيء حول HTML مثل موقع W3Schools أو Codecademy.. يمكنك كذلك أن تبحث عن كتب أو دروس تعليمية عن HTML. لكن تأكد من أن تاريخ صدورها حديث، حيث تحدث العديد من التغييرات والإضافات على اللغة بمرور الوقت. يمكنك كذلك أن تسعى لتعلم CSS من أجل تحكم أفضل في مظهر صفحات الويب الخاصة بك. والخطوة الثالثة بعد إتقان CSS هي أن تتعلم الجافا سكربت Javascript.

أفكار مفيدة

يمكنك أن تجد صفحة ويب بسيطة عبر الإنترنت، وتبدأ في اللعب والتعلم من خلال تفقد وتغيير الكود المستخدم بها. جرب تغيير أماكن بعض النصوص، وتغيير خط الكتابة، وإضافة الصور وكل ما يخطر على بالك.
يمكنك أن تدون كل الأكواد في دفتر خاص بك، حتى إذا احتجت في أي وقت لتذكر تلك الأكواد تصل إليها تفتح دفترك وتراجع كل ما ترغب به. يمكنك كذلك أن تقوم بطباعة هذا الدرس عبر ويكي هاو للإبقاء عليه كمرجع دائم بين يديك.
صناعة ملفات التغذية الرجعية RSS و لغة XML أصبحا أمرين شائعين في المواقع هذه الأيام. قد يظهر أنه من الصعب قراءة وفهم الكود الخاص بهم ، خاصة عند مشاهدته في ملف HTML، لكن لكل منهما تأثيرهم الهام والضروري على صفحات الويب.
أثناء كتابة الكود، تأكد من أنك تكتبه بشكل منظم يجعل من السهل عليك وعلى الآخرين فهمه وتتبعه. استخدم <!-- Insert comment here --&gt ، لإضافة التعليقات بينهما ، وهي لا تظهر في صفحة الويب ولكن تظهر في الكود.
برنامج Notepad++ مجاني ورائع مخصص لكتابة ملفات HTML ، يؤدي نفس دور محرر النصوص العادي لكنه يضيف لك إمكانة مشاهدة وإختبار الكود مباشرة عبر المتصفح. (كما أنه يسمح بغالبية لغات البرمجة مثل HTML و CSS و python و Javascript وغيرهم )
أوامر التوصيف في HTML ليست حساسة تجاه الحروف الكبيرة أو الصغيرة. لكن إستخدامها بالحروف الصغيرة ( كما هي مستخدمة في هذا الدرس) هو الأمر الأمثل وكذلك المتوافق مع ملفات XHTML ^{[١]Xمصدر بحثي}

تحذيرات

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