تعلم HTML متقدمة تعلم أساسيات HTML
إضافات أو تعديلات الوسوم يتم وضعها في الوسم نفسه، من أجل إضافة تعديلات " لمحتوى العنصر " بين الوسم الابتدائي والختامي. لا يتم إستخدامها بمفردها أبدًا. ويتم كتابتها بشكل name="value" حيث يكون name الاسم هو اسم الإضافة (على سبيل المثال " color ") والقيمة value تصف قيمة هذه الإضافة ( على سبيل المثال " red " )  بالتأكيد أنك رأيت تلك الإضافات من قبل، خاصة إذا كنت قد اتبعت الخطوات في قسم أساسيات HTML. فأمر <img> سيتخدم إضافة src . والمراسي anchors تستخدم الإضافة name ، والروابط تستخدم الإضافة "'href. هل تلاحظ كيف تستخدم تلك الإضافات الشكل name="value" ؟ صنع جدول أو رسم بياني يتطلب العديد من الوسوم والأوامر. استخدم الأوامر التالية للتجربة:   ابدأ بوسم الجدول Table حول محتويات الجدول كلها <table></table>  وسم الصف Row حول محتوى كل صف <tr>  رأس العمود في الصف الأول : <th>  الخلايا في الصفوف اللاحقة : <td>  هاهو مثال عن كيفية عمل تلك الأكواد مع بعضها البعض :<table><tr><th>الصف الأول : الشهر</th><th>الصف الثاني : الأموال المدخرة</th></tr><tr><td>يناير </td><td>$100</td></tr></table> تعلمنا في قسم أساسيات HTML وسم <head> ، الذي يتم وضعه في بداية كل ملف. بالإضافة إلى وسم <title> ، يمكن أيضًا أن يحتوى على الأنواع التالية من الوسوم :  العلامات الفوقية Meta Tags، التي تعمل على إمداد قدر من المعلومات حول صفحة الويب. يتم إستخدامها في المتصفحات عندما تعمل الروبوتات على تفقد الإنترنت وإدراج المواقع المختلفة. ومن أجل إظهار موقعك في نتائج البحث قم بإضافة وسم <meta> أو أكثر ( لا يوجد له وسم ختامي )، مع إلحاقه بإضافة الإسم name attribute و إضافة المحتوى content attribute ، على سبيل المثال <meta name="الوصف" content="قم بكتابة وصف الموقع هنا"> أو <meta name="علامات مفتاحية" content="اكتب قائمة بالعلامات المفتاحية الخاصة بالموقع، مع الفصل بين كل منها بفصلة comma "> وسوم <link> تستخدم لمشاركة ملفات أخرى في الصفحة. وتستخدم خاصة للربط مع ملفات CSS، التي يتم صنعها بواسطة نوع مختلف من الأكواد من أجل تغيير ألوان صفحة HTML ، وتوزيع النصوص والعديد من الإضافات الأخرى. وسوم <script> وتستخدم لربط الصفحة بملفات الجافا سكربت، التي تضيف إلى ملفات HTML بعض التواصل مع المستخدم. تفقد ملفات مصادر HTML للمواقع  تعد طريقة رائعة لتوسيع معرفتك. يمكنك أن تقوم بذلك عن طريق الضغط بالزر الأيمن للفأرة على صفحة الويب واختيار "View Source" أو "View Page Source" أو أي أوامر مشابهة. أو عن طريق الذهاب إلى قائمة View عرض في القائمة العليا للمتصفح واختيار نفس الأمر المذكور. حاول أن تكتشف ما تقوم به أوامر HTML الغريبة عليك، أو قم بالبحث عبر الإنترنت من أجل الوصول للمزيد من فرص المعرفة والتعلم. بالتأكيد لا تملك حق التعديل على المواقع الإلكترونية الخاصة بالآخرين، لكنك على الأقل تقدر على نسخ كود HTML في ملف خاص بك، ومواصلة اللعب والتعلم عليه لملاحظة الفرق الذي يحدث مع كل تغيير تقوم به. لاحظ أن عدم توفر ملف CSS المرتبط بالموقع، قد يمنعك من رؤية كل التنسيقات والألوان الخاصة بالموقع بطريقة صحيحة. هناك العديد من المصادر عبر الانترنت تتيح لك تعلم كل شيء حول HTML مثل موقع W3Schools أو  Codecademy.. يمكنك كذلك أن تبحث عن كتب أو دروس تعليمية عن HTML. لكن تأكد من أن تاريخ صدورها حديث، حيث تحدث العديد من التغييرات والإضافات على اللغة بمرور الوقت. يمكنك كذلك أن تسعى لتعلم CSS من أجل تحكم أفضل في مظهر صفحات الويب الخاصة بك. والخطوة الثالثة بعد إتقان CSS هي أن تتعلم الجافا سكربت Javascript. أغلب برامج تحرير النصوص مثل : Notepad أو Microsoft Word في الويندوز، أو TextEdit بالنسبة لأجهزة الماك، يمكن استخدامها في كتابة ملفات HTML. قم بفتح ملف جديد واستخدم قائمة "ملف File" ثم  Save As في أعلى القائمة من أجل حفظ الملف على هيئة صفحة ويب، أو من أجل تغيير امتداد الملف إلى ".html" أو ".htm" بدلًا من امتداد ملفات النصوص العادية مثل: ".doc" أو ".rtf"   قد تظهر لك رسالة تحذير تخبرك بأن الملف سيتغير إلى " نص عادي plain text " بدلًا من " نص غني rich text " أو أن بعض التنسيقات والصور لن يتم حفظها بطريقة سليمة. لا بأس من ذلك، فلملفات HTML لا تستخدم هذه الاختيارات على أي حال. لا يوجد فرق بين الإمتدادين .html و .htm . فكلا الامتدادين سيؤديان نفس الغرض قم بحفظ الملف الفارغ، ثم اذهب إلى مكان حفظه على جهاز الكمبيوتر واضغط عليه مرتين لفتحه. من المفترض أن يظهر لك صفحة ويب فارغة تمامًا. إذا لم يعمل بهذه الطريقة قم بسحب الملف إلى شريط العنوان URL في متصفحك. الصفحة خالية لأننا لم نكتب أي أكواد بعد، ومن خلال ما سنتعلمه في النقاط التالية، يمكنك في كل مرة أن تقوم بفتح الملف بواسطة المتصفح لمشاهدة التغييرات في كل مرة.  لاحظ أن ذلك لا يصنع موقعًا إلكترونيًا على الإنترنت. لن يقدر الآخرون بعد على زيارة صفحة الويب الخاصة بك، كما أنك لا تحتاج إلى إتصال بالانترنت من أجل اختبار أو مشاهدة الصفحات المبرمجة. كل ما تحتاجه هو المتصفح من أجل قراءة ملف HTML كأنه موقع إلكتروني عادي. لا تظهر تلك الوسوم في صفحة الويب مثل النصوص العادية. ولكن دورها الرئيسي هو القيام بإخبار متصفح الانترنت بكيفية إظهار صفحة الويب ومحتواها. "الوسم الإفتتاحي start tag" يحتوى على التعليمات. على سبيل المثال، قد يخبر متصفح الانترنت بإظهار النصوص بلون أو حجم معين. تحتاج أيضًا " الوسم الختامي end tag " لإخبار المتصفح بالحد الذي ينتهى عنده تطبيق الأمر. في المثال التالي، النص بين الوسم الافتتاحي والختامي سيكون عريضًا Bold. يتم كتابة كلا الوسمين في أقواس زاوية < > لكن يتم إضافة شرطة مائلة slash بعد القوس الأول في الوسم الختامي < />.   قم بكتابة الوسم الإفتتاحي بين قوسي زاوية: <يُكتب وسم البداية هنا>  قم بكتابة الوسم الختامي في قوسي زاوية، مع إضافة شرطة مائلة بعد القوس الأول: </يكتب وسم النهاية هنا >  واصل القراءة من أجل تعلم كيفية كتابة وسم وصفي توظيفي Functional Markup Tag. في الخطوة التالية كل ما تحتاج معرفته هو تذكر أن الشكل الأساسي يكون مكتوب : < >  و </ > في بعض المواد التعليمية للغة HTML يتم الإشارة إلى الوسوم بوصفها " عناصر " والنص بين الوسم/ العنصر الافتتاحي والوسم/العنصر الختامي يتم وصفه بـ " محتوى العنصر". يبدًا أي ملف HTML بوسم <html> وينتهى بوسم </html>. ويكون الهدف من هذا إخبار المتصفح بأن كل المذكور بين الوسمين مكتوب بلغة HTML. لذلك قم بإضافة هذين الوسمين إلى ملفك.   اكتب  <html> في بداية الملف. قم بالضغط على enter أو return عدة مرات لإضافة مساحة كبيرة لإستخدامها في كتابة بقية الأوامر. ثم اكتب </html>. تذكر دائمًا أن تكتب بقية الأكواد والأوامر المذكورة في الشرح التالي، في المساحة بين وسم html الابتدائي، ووسم html الختامي. في المسافة بين <html> و </html> قم بكتابة  <head> ابتدائي، و </head> ختامي. اترك لنفسك مساحة أيضًا للكتابة بينهما. كل المكتوب بينهما لن يظهر على صفحة الويب نفسها. جرب ما يلي، ولاحظ مكان ظهورها في المقابل:  في المسافة بين  <head>  و </head>؛ قم بكتابة  <title> و </title>  في المسافة بين  <title> و </title>، قم بكتابة " كيفية تعلم لغة HTML ". قم بحفظ الملف ثم فتحه بواسطة متصفح الانترنت ( أو قم بحفظه ثم اضغط refresh على صفحة المتصفح إذا كانت مازالت مفتوحة.) هل تلاحظ المكتوب في شريط المتصفح العلوي فوق شريط العنوان؟. بقية ما يلى من نقاط في هذا الملف التجريبي للمبتدئين سيتم كتابته في قسم body، أو جسد الصفحة، التي تظهر كل محتوياته بشكل طبيعي على صفحة الويب. بعد الوسم الختامي </head>، وقبل وسم  </html>  قم بكتابة  <body> و </body>. الآن من المفترض أن يكون لديك ملف مكتوب كما يلى (ومثل الصورة ) تمامًا. (تجنب نقاط الترقيم)   <html> <head> <title>How to Learn HTML - wikiHow</title> </head> <body> </body> </html> الآن حان وقت كتابة شيء تقدر على رؤيته في المتصفح مباشرة. كل ما ستقوم بكتابته في قسم 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> ماذا يظهر لك ؟ إذا كنت ترغب في كتابة خطوط متعددة في ملف HTML الخاص بك، فستلاحظ أن فواصل الأسطر لا تظهر في المتصفح. لذلك عليك كتابة أوامرها بنفسك:   <p> الوسم أو الأمر التالي يفصل بين السطور </p>  الوسم التالي يتم كتابته بعد الجملة المطلوب إضافة سطر فاصل بعدها <br>أو قبل الجملة في حالة الرغبة في إضافة سطر فاصل قبلهاالأمر التالي هو أول كود تستخدمه لا يحتاج إلى وسم ختامي . وتسمى هذه الوسوم بالأوسام الفارغة "empty tags." إضافة عناوين لعرض أسماء الأقسام:<h1>عنوان 1</h1>: العنوان من المستوى الأول <h2>عنوان 2</h2> (المستوى الثاني)<h3>عنوان 3</h3> (المستوى الثالث)<h4>عنوان 4</h4> (المستوى الرابع)<h5>عنوان 5 </h5> (العنوان الأصغر) هناك العديد من الطرق المختلفة لكتابة قائمة في صفحة الويب الخاصة بك. جرب الأكواد التالية لتحديد ما يناسبك منهم. لاحظ أن زوج واحد من الوسوم / العلامات يتم كتابته حول القائمة كلها ( مثل <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> الآن حان وقت تجربة إضافة بعض العناصر الآخرى جنبًا إلى جنب مع النصوص. جرب الأكواد التالية للقيام بذلك. سوف تحتاج استخدام خدمة استضافة إلكترونية للصور حتى تمتلك URL تقدر على ربطه بأمر إضافة الصورة.   لإضافة خط بلغة HTML استخدم : <br> أو <hr>  لإضافة صورة، استخدم  <img src="الرابط الخاص بالصورة"> يمكنك أن تستخدم ذلك الأمر أيضًا في ربط الصفحة بصفحات أخرى على الموقع، أو بمواقع أخرى تمامًا، لكن بما أنك لا تملك موقع إلكتروني كامل بعد، سوف نركز على " المرسي anchor " وهو ما يطلق على الانتقال بواسطة رابط تشعبي إلى مكان آخر في نفس الصفحة.   قم بصناعة المرسي بإستخدام الوسم <a> في المكان من الصفحة الذي ترغب في الإنتقال إليه . وقم بتسميته بإسم توصيفي يسهل عليك تذكره .:<a name="تعليمات ">هذا هو النص الذي سنبحر بالمرسي إليه </a>  استخدم الأمر  <href> للربط مع هذا المرسي أو الانتقال إلى صفحة أخرى أو موقع إلكتروني آخر :<a href="أدرج هنا رابط الصفحة الآخرى أو اسم - المرسي - الموجود في نفس الصفحة و المراد الإنتقال إليه بواسطة هذا الرابط ">واكتب هنا النص أو الصورة التي ستعمل على هيئة رابط الإنتقال</a>  لإضافة رابط مع مرسي موجود على صفحة ويب أخرى، قم بإضافة علامة # بعد الرابط، متبوعًا باسم المرسى. على سبيل المثال http://www.wikihow.com/Learn-HTML#Tips ينقلك مباشرة إلى قسم التعليمات والنصائح في صفحة تعلم HTML على موقع Wikihow.
تعلم إضافات الوسوم. جرب جداول HTML. تعلم أوامر قسم Head المختلفة. تفقد ملفات HTML المتاحة عبر المواقع. تعلم المزيد من تصميم الويب المتقدم من مصادر المعرفة المتاحة عبر الانترنت. قم بفتح ملف HTML. شاهد الملف بواسطة متصفح الانترنت. افهم أوسمة البيانات والتوصيف Markup Tags. اكتب وسم HTML الأول لك. تعبئة قسم <head> الخاص بالملف. صنع قسم <body>. إضافة النصوص بأنماط مختلفة. قم بتقسيم النص الخاص بك إلى فقرات. كيفية صنع قائمة في HTML. تجميل الصفحة عن طريق إضافة " فواصل أسطر " و " خطوط أفقية " و " بعض الصور ". الربط بين محتويات الصفحة.
https://www.wikihow.com/Learn-HTML https://www.wikihow.com/Learn-HTML
Learning More Advanced HTML Learning Basic HTML