المحتوى

• لتخطو
• جزء 1 من 2: تعلم أساسيات HTML
• الجزء 2 من 2: تعلم HTML المتقدم
• نصائح
• تحذيرات
• الضرورات

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

لتخطو

جزء 1 من 2: تعلم أساسيات HTML

1. افتح مستند HTML. يمكن استخدام معظم برامج معالجة النصوص ، بما في ذلك Notepad أو Word for Windows و Text Editor for Mac ، لإنشاء مستندات HTML. افتح مستندًا جديدًا وحدد ملف ← حفظ باسم من القائمة العلوية لحفظ المستند كصفحة ويب ، أو قم بتغيير امتداد الملف من ".doc" أو ".rtf" أو أي شيء آخر إلى ".html" أو ".htm ".
   • قد ترى الآن تحذيرًا يفيد بأن المستند الخاص بك قد تم تغييره من تنسيق Rich Text Format (RTF) إلى تنسيق "نص عادي" ، وأن بعض خيارات التنسيق والصور لا يتم حفظها بشكل صحيح. يمكنك تجاهل هذا التحذير ؛ مستندات HTML لا تستخدم هذه الخيارات.
   • ملفات .html و. htm هي نفسها. كلاهما يعمل.
2. عرض المستند الخاص بك مع المستعرض. احفظ المستند الفارغ ، وأغلقه ، ثم انقر نقرًا مزدوجًا فوق المستند في الموقع الذي تم حفظه فيه لفتحه مرة أخرى. يجب الآن فتح المستند الخاص بك بواسطة المستعرض الخاص بك كصفحة ويب فارغة. إذا لم يفلح ذلك ، اسحب رمز الملف إلى شريط العنوان في متصفحك. في وقت لاحق ، إذا قمت بتحرير مستند HTML الخاص بك باتباع الخطوات الواردة في هذه المقالة ، فستستمر في الرجوع إلى المتصفح للتحقق من شكل التغييرات في الكود.
   • ملاحظة: صفحة الويب الخاصة بك ليست متصلة بالإنترنت بعد. الصفحة غير متاحة للآخرين ولا تحتاج إلى اتصال إنترنت فعال لاختبارها. ما عليك سوى استخدام متصفحك "لقراءة" مستند HTML كما لو كان موقعًا على الويب.
3. فهم ما هي "العلامات". العلامات غير مرئية في صفحة الويب النهائية ، كما هو الحال مع النص العادي. تخبر العلامات متصفحك بكيفية عرض الصفحة والمحتوى على الصفحة. تحتوي علامة البداية على تعليمات. على سبيل المثال ، يمكنه إخبار المتصفح بعرض النص بخط عريض. علامة النهاية مطلوبة لإخبار المتصفح بمكان تطبيق التعليمات: في هذا المثال ، يكون كل النص الموجود بين علامة البداية والنهاية غامقًا. يتم وضع علامات النهاية أيضًا داخل أقواس ، لكن الشرطة تتبع القوس الأول.
   • اكتب علامات البداية بين قوسين: هذا هو يوم البداية>
   • اكتب علامات النهاية بين قوسين ، لكن ضع شرطة مائلة بعد القوس الأول: /هذه هي العلامة الختامية>)
   • اقرأ لاحقًا في المقالة كيفية كتابة العلامات الوظيفية. في هذه الخطوة ، ما عليك سوى تذكر طريقة كتابة العلامات:> و />.
   • في دورات HTML الأخرى ، يُشار أيضًا إلى العلامات باسم "العناصر" ويُشار أيضًا إلى النص الموجود بين علامات الفتح والإغلاق باسم "محتوى العنصر".
4. اكتب أول علامة html>. يبدأ كل مستند HTML بامتداد أتش تي أم أل>علامة وينتهي ب / html>بطاقة شعار. هذا يخبر المتصفح أن كل شيء بين هذه العلامات مكتوب بلغة HTML. أضف هذه العلامات إلى المستند الخاص بك:
   • كتابة أتش تي أم أل> في الجزء العلوي من المستند الخاص بك.
   • اضغط على زر الإدخال أو الرجوع عدة مرات لمنح نفسك بعض المساحة ، ثم اكتب / html>
   • اتذكرك كل شىء في هذه المقالة بين هاتين العلامتين.
5. اجعل الرأس> جزءًا من المستند. بين العلامتين html> و / html> تكتب a رئيس>علامة البداية وأ / رئيس>-نهاية الوسم. اجعل بعض المسافة مرة أخرى بين هذه العلامات. لن يكون أي شيء مكتوب بين هذه العلامات مرئيًا على صفحة الويب نفسها. جرب الخطوات التالية وتحقق مما إذا كان يمكنك رؤية مكان ظهور المعلومات:
   • اكتب بين العلامتين> و / head>: العنوان> و / العنوان>
   • بين العنوان> و / العنوان> تكتب: كيف تتعلم HTML (بالصور) - wikiHow.
   • احفظ المستند وافتحه في مستعرض (أو احفظ المستند وقم بتحديث الصفحة على المستعرض إذا كانت الصفحة لا تزال مفتوحة). هل ترى ما كتبته للتو في أعلى الصفحة ، فوق شريط العنوان؟
6. إنشاء هيئة> قسم. يتم وضع كل شيء آخر في مستند المبتدئين هذا في القسم الأساسي> ، ويتم عرضه على صفحة الويب. بعد العلامة / الرأس> ، لكن أمام العلامة / html> تكتبها الجسم> و / الجسم>. كل ما نناقشه في هذه المقالة ، نضعه بين علامات الجسم. يجب أن يكون لديك الآن مستند يشبه هذا (بدون الرموز النقطية):
   • أتش تي أم أل>
   • رئيس>
   • title> Learn HTML - wikiHow / title>
   • / رئيس>
   • الجسم>
   • / الجسم>
   • / html>
7. أضف نصًا بأنماط مختلفة. حان الوقت الآن لبدء كتابة شيء سيكون مرئيًا بالفعل في المتصفح! سيكون كل ما تكتبه داخل علامات النص مرئيًا في المتصفح بعد حفظ التغييرات وتحديث الصفحة داخل المتصفح. كتابة ليس شيء مع العلامات و >لأن متصفحك سيفسر ذلك على أنه تعليمات HTML بدلاً من نص عادي. اكتب على سبيل المثال مرحبا بالعالم! (بالإنجليزية لـ "Hello world!" ، هذا هو النص القياسي العالمي كأول مثال في أي دورة برمجة بلغة برمجة معينة) أو أي شيء آخر ، وقم بوضع العلامات التالية قبل النص وبعده وانظر ماذا يحدث:
   • م> أهلاً بالعالم! / م> يبدو وكأنه نص مائل: مرحبا بالعالم!
   • قوي> أهلاً بالعالم! / قوي> يشبه النص الغامق: مرحبا بالعالم!
   • s> أهلاً بالعالم! يبدو كنص يتوسطه خط: مرحبا بالعالم!
   • sup> أهلاً بالعالم! / sup> يبدو مرتفعًا:
   • sub> أهلاً بالعالم! / sub> يشبه التسمية التوضيحية: _{مرحبا بالعالم!}
   • جرب التوليفات: كيف ترى م> قوي> أهلاً بالعالم! / قوي> / م> اخرج؟
8. قسّم النص إلى فقرات. إذا وضعت سطورًا مختلفة من النص في المستند الخاص بك ، فسترى أن جميع الأسطر موضوعة واحدة تلو الأخرى. يجب عليك برمجة أسطر جديدة وخطوط فارغة بنفسك:
   • p> هذا قسم منفصل. / p>
   • هذه الجملة في السطر الأول وهذه الجملة في السطر التالي.
     هذه هي العلامة الأولى التي نصادفها والتي لا تحتاج إلى علامة نهاية! نسمي هذه العلامة واحدة علامة فارغة.
   • أنشئ رؤوسًا لتوضيح أسماء الأقسام:
     h1> رأس / h1>: أكبر رأس ممكن
     h2> رأس / h2> (رأس المستوى 2)
     h3> رأس / h3> (رأس المستوى 3)
     h4> رأس / h4> (رأس المستوى 4)
     h5> رأس / h5> (أصغر رأس ممكن)
9. تعلم كيفية عمل القوائم. هناك عدة طرق لإنشاء قوائم على صفحة ويب. جرب الطرق التالية لمعرفة ما تفضله. لاحظ أنه يتم وضع زوج واحد من العلامات حول القائمة بأكملها (مثل علامات ul> و / ul> للقوائم غير المرتبة) وأنه يتم وضع زوج مختلف من العلامات حول كل عنصر في القائمة ، مثل li> و / li> .
   • استخدم الكود التالي لإنشاء قوائم ذات تعداد نقطي:
     ul> li> عنصر واحد / li> li> عنصر آخر / li> li> عنصر آخر / li> / ul>
   • أو هذا الكود لإنشاء قوائم مرقمة:
     ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
   • أو هذا الكود لإنشاء ما يسمى بقائمة التعريف:
     dl> dt> Coffee / dt> dd> - مشروب ساخن / dd> dt> حليب / dt> dd> - مشروب بارد / dd> / dl>
10. اجعل صفحتك أكثر جاذبية بخطوط وخطوط أفقية وصور جديدة. حان الوقت الآن لبدء إضافة أشياء أخرى إلى صفحتك. جرب العلامات التالية (يجب نشر الصورة عبر الإنترنت حتى يمكنك استخدام رابط للصورة):
    • أدخل خطًا: br> أو hr>
    • أدخل الصور: img src = "the_url_of_your_image">
11. أدخل روابط إلى أماكن أخرى على الصفحة. يمكنك أيضًا استخدام هذا الرمز للارتباط بصفحات ومواقع ويب أخرى ، ولكن نظرًا لعدم وجود موقع ويب حتى الآن ، فسنركز على "نقاط الارتساء" ، وهي أماكن محددة على الصفحة يمكنك الارتباط بها:
    • أولاً ، قم بإنشاء رابط باستخدام العلامة> في النقطة التي تريد الارتباط بها في الصفحة. امنح المرساة اسمًا واضحًا يسهل تذكره:
      
      a name = "Tips"> هذا هو النص الذي تضع المرساة حوله. / a>
    • استخدم العلامة href> للارتباط بالرابط الخاص بك أو بصفحة ويب أخرى:
      
      a href = "url لصفحة الويب أو اسم المرساة في هذه الصفحة"> اكتب النص أو الصورة الموضحة كرابط هنا. / أ>
    • للارتباط بنقطة ارتساء على صفحة أخرى ، أضف الحرف # بعد عنوان url متبوعًا باسم المرساة. على سبيل المثال ، سينقلك http://www.wikihow.com/HTML-leren#Tips مباشرة إلى قسم "النصائح" في هذه الصفحة.

الجزء 2 من 2: تعلم HTML المتقدم

1. تعرف على السمات. يتم وضع السمات داخل العلامة وتستخدم لإجراء تعديلات إضافية على "محتوى العنصر" بين علامة البداية والنهاية. إنهم لا يقفون وحدهم أبدًا. هي مكتوبة بالطريقة التالية: الاسم = "القيمة". اسم يمثل اسم السمة (على سبيل المثال ، "اللون") و القيمة يصف هذه الحالة بالذات (على سبيل المثال "أحمر").
   • إذا كنت قد بحثت عن كثب في الجزء السابق من هذه المقالة ، فقد واجهت سمات بالفعل. تستخدم العلامة img> السمة src، يستخدم المرساة السمة اسم والروابط تستخدم السمة href. يمكنك معرفة أنها كلها بالحجم ___='___’ للمتابعة.
2. جرب جداول HTML. لإنشاء جدول أو رسم بياني ، تحتاج إلى عدة علامات:
   • ابدأ بعلامات الجدول ("table" باللغة الإنجليزية) حول الجدول بأكمله:الجدول> / الجدول>
   • ضع العلامات حول محتوى كل صف: tr>
   • ضع رؤوس الأعمدة في الصف الأول: عشر>
   • ضع الخلايا في صفوف متتالية: td>
   • هذا مثال على كيفية تضافر كل هذا:
     
     table> tr> th> Column 1: الشهر / th> th> Column 2: الأموال المحفوظة / th> / tr> tr> td> January / td> td> € 100 / td> / tr> / table>
3. تعرف على العلامات الأخرى المستخدمة في قسم الرأس. لقد تعلمت بالفعل رأس العلامة> ، الذي تضعه في بداية كل مستند. بالإضافة إلى العنوان> العلامة ، قد تكون هناك علامات أخرى في قسم الرأس:
   • تستخدم العلامات الوصفية في الإنشاء البيانات الوصفية حول صفحة الويب. تستخدم محركات البحث هذه البيانات لتصنيف صفحات الويب. لجعل صفحتك مرئية لمحركات البحث ، يمكنك وضع علامة وصفية واحدة أو أكثر (علامات النهاية ليست ضرورية) ، يجب أن تحتوي كل علامة بالضبط على سمة اسم واحدة وسمة محتوى ، على سبيل المثال: meta name = "description" content = "ضعها هنا الوصف "> ؛ or meta name = "keywords" content = "اكتب قائمة بالكلمات الرئيسية هنا ، مفصولة دائمًا بفاصلة">
   • link> تستخدم العلامات لربط ملفات أخرى بالصفحة. تُستخدم عادةً لربط أوراق أنماط CSS بصفحات HTML ، ويتم إنشاء هذه الصفحات بنوع مختلف من التعليمات البرمجية وتستخدم لتحديد النمط العام للصفحة.
   • script> تُستخدم العلامات لربط ملفات جافا سكريبت بصفحة HTML. تسمح Javascript للصفحة بالتغيير إذا قام المستخدم بعمل شيء ما على الصفحة.
4. العب مع HTML من الصفحات الموجودة. يعد عرض الكود المصدري لصفحات الويب طريقة رائعة لتوسيع معرفتك بلغة HTML. انقر بزر الماوس الأيمن على الصفحة وحدد "عرض المصدر" أو "إظهار مصدر الصفحة" أو ما شابه. اكتشف ما تفعله علامة معينة لا تعرفها أو ابحث عبر الإنترنت عن الإجابة.
   • لا يمكنك تحرير مواقع الويب الخاصة بالآخرين ، ولكن يمكنك نسخ كود HTML إلى المستند الخاص بك والتلاعب به لمعرفة ما تفعله التعديلات المختلفة. ملاحظة: نظرًا لأن العديد من مواقع الويب تستخدم أوراق أنماط CSS ، فقد لا تتمكن من رؤية العديد من الألوان أو الأنماط الأخرى.
5. تعرف على معلومات حول HTML من خلال قراءة المزيد من المقالات المتعمقة. هناك العديد من الموارد على الإنترنت لإتقان المزيد من علامات HTML مثل W3Schools أو Codecademy. هناك أيضًا العديد من كتب HTML المتاحة ، ولكن تأكد من أنك تستخدم إصدارًا حديثًا حيث يتغير معيار HTML من وقت لآخر. بمجرد أن تتقن HTML إلى مستوى جيد ، يمكنك اللجوء إلى CSS لمزيد من التحكم في تصميم وأسلوب صفحة الويب الخاصة بك. بعد ذلك ، تكون الخطوة التالية عادةً جافا سكريبت.

نصائح

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

تحذيرات

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

الضرورات

• برنامج معالجة النصوص ، مثل Notepad (Windows) أو Text Editor (Mac).
• ورقة أو دفتر ملاحظات (اختياري)
• برنامج مصمم خصيصًا لكتابة HTML ، مثل Notepad ++ لنظام التشغيل Windows أو TextWrangler لنظام التشغيل Mac (اختياري)