إذا كنت مبتدءا ولديك شغف في إنشاء مواقع الويب أو كنت مالك موقع وتريد تطوير موقعك فأفضل كورس لتبدأ في تعلم لغة html هو هذا المقال.
ففي هذا المقال ستتعلم أساسيات لغة html خطوة بخطوة، فهو يحتوي على تفاصيل شاملة، فستعرف بعد هذا المقال كيف تخطط صفحات الويب بلغة html، وكيفية إضافة النصوص والصور والمرفقات الأخرى، والإضافات الرائعة الأخري كيفية إضافة الجداول والعناوين وكذلك تنسيق الصفحة.
 |
| Hyper Text Markup Language |
بعد هذا الشرح ستصبح قادرا على إنشاء صفحة ويب كاملة بلغة html، لذا تابع القراءة.
ما هي لغة html ؟
من المهم جدا أن تعرف ما هي لغة html؛ حتي تعرف ما ستستفيده من تعلمك لهذه اللغة.
لغة html هي لغة برمجية خاصة بإنشاء المواقع الإلكترونية، وتستخدم لغة html في إنشاء وتعديل معظم المواقع الإلكترونية الموجودة على الإنترنت.
وهناك لغة أخري تسمي ب css، وهي مسئولة عن تنسيق صفحات الويب وجعلها جذابة ورائعة، ولكن في هذا المقال سنقوم بشرح لغة html، وسنشرح لغة css في مقال آخر.
لقد تم إنشاء لغة html بواسطة Tim Berners-Lee و Robert Cailliau وبعض الأشخاص الآخرين، وقد تم إنشاء لغة html في عام 1989، ولغة html هي اختصار لHyper Text Markup Language.
لغة html هي ليست لغة برمجة ولكنها لغة خاصة بتصميم وبناء صفحات الويب.
أفضل المحررات الخاصة بلغة html
- Sublime Text 3: هذا المحرر رائع جدا للغة html.
- Komodo Edit: يدعم محرر Komodo Edit لغة html.
- Notepad ++: من أشهر المحررات الخاصة بلغة html، ويمكنك من كتابة أكواد نظيفة واحترافية.
- visual studio code: من أفضل المحررات الخاصة بلغة html وأكثرهم استخداما.
كيف تنشأ أول صفحة ويب باستخدام لغة HTML
في البداية عليك أن تفتح محرر HTML الخاص بك وبعدها ابدأ في كتابة الأكواد، بعدها ستحتاج لإضافة بعض الأكواد الخاصة بلغة HTML مع مراعاة كتابة الأكواد تحت بعضها.
- <!DOCTYPE html> يجب عليك أولا وضع هذا الكود في بداية الملف الخاص بك؛ حتي تكون اللغة المستخدمة هي HTML 5.
- بعدها اكتب <html> فهو العنصر الأساسي الذي يحمل كل ما يخص صفحة الويب.
- بعدها يوجد عنصر <head> وهو الخاص برأس الصفحة فهو يحتوي على أكواد Meta Tag والأشياء الأخري المصممة لمحركات البحث.
- بعدها يوجد عنصر <body> وهو الخاص بالمحتوي المرئي للصفحة.
إضافة عناوين للصفحة الخاصة بك
في لغة html العناوين كالتالي:
- <h1>.
- <h2>.
- <h3>.
- <h4>.
- <h5>.
- <h6>.
لإنشاء العناوين في الصفحة عليك بإضافة الوسم الخاص بالعناوين في بداية ونهاية العنوان الخاص بك، سأوضح لك بمثال:
<h1>Welcome to at3lmonline</h1>
وكذلك في إضافة العناوين الأخرى أيضا.
إضافة نص للصفحة الخاصة بك
لإضافة نص داخل الصفحة الخاصة بك عليك باستخدام <p>
<p>at3lmonline is an educational website for everyone</p>
وكذلك لإضافة النصوص الأخري.
بعض العناصر المهمة الأخري الخاصة بالنصوص
- <b> وهي تعنى Bold والغرض منها هو كتابة المعلومات الهامة بخط غامق.
- <i> وهي تعني Italic والغرض منها هو الإشارة لنص.
- <em> وهي تعني Emphasised Text والغرض منها هو استخدامها في التسميات الخاصة بالصور.
- <strong> وهي تعني Strong والغرض منها هو كتابة النصوص المهمة بخط عريض.
- <small> وهي تعني Small Text والغرض منها تصغير النص.
- <strike> وهي تعني Striked Out Text والغرض منه هو وضع خط بالعرض على النص.
- <mark> وهي تعني Marked Text والغرض منه هو تغيير لون خلفية النص.
- <ins> وهي تعني Inserted Text والغرض منه هو وضع سطر تحت النص.
- <sub> وتعني Subscript Text والغرض منه هو اختيار أسلوب عرض مطبعي.
- <sup> وتعني Superscript Text والغرض منها هو اختيار أسلوب عرض مطبعي آخر.
- <u> وتعني Underlined Text والغرض منه هو وضع خط تحت النص أو الروابط.
اقرأ أيضا شرح لغة بايثون للمبتدئين.
إضافة روابط للصفحة الخاصة بك
لإضافة روابط داخل الصفحة الخاصة بك عليك باستخدام <a>
مثال: <a href="url">Link text</a>
مكان url ضع الرابط الخاص بك.
وبدلا من Link text ضع اسم الرابط الذي وضعته.
إضافة صور للصفحة الخاصة بك
لإضافة الصور داخل الصفحة بتنسيق html عليك باستخدام <img> فهي تحتوي على خصائص الصورة كالارتفاع والعرض والنص البديل للصورة.
مثال <img src="yourimage.png" alt="Describe the image" height="X" width="X">
مكان yourimage.png ضع رابط الصورة.
مكان Describe the image ضع وصف للصورة "النص البديل".
مكان X الخاص ب height ضع ارتفاع الصورة.
مكان X الخاص ب width ضع عرض الصورة.
إضافة قائمة في لغة html
يوجد نوعان لإضافة قائمة داخل الصفحة الخاصة بك، مثل:
إضافة قائمة مرتبة في لغة html
لإضافة قائمة نقطية مرتبة استخدم <ol> وقم بإضافة <li> و <li/> داخلها.
مثال:
<ol>
<li>Examble1</li>
<li>Examble2 </li>
<li>Examble3 </li>
<ol/>
ضع مكان Examble1,2,3 عناصر القائمة التي ترغب في وضعها.
إضافة قائمة غير مرتبة في لغة html
لإضافة قائمة غير مرتبة في صفحة الويب الخاصة بك استخدم <ul> وقم بإضافة <li> و <li/> داخلها.
مثال:
<ul>
<li>Examble1 </li>
<li>Examble2 </li>
<li>Examble3 </li>
</ul>
ننصحك بقراءة أفضل الطرق للربح من البرمجة.
إضافة جدول بواسطة لغة html
لإنشاء جدول عليك باستخدام <table> ولإنشاء صفوف داخل الجدول استخدم <tr> ولإنشاء خلايا الجدول استخدم <td>.
<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2 </td>
<tr/>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<tr/>
</table>
Row وتعني الصف.
Column وتعني العمود.
إغلاق صفحة html
لقد انتهيت الآن من إنشاء صفحة الويب، ولكن ينقصك إغلاق الصفحة وذلك عن طريق:
<body/>
<html/>
أنت الآن تستطيع إنشاء صفحة ويب باستخدام لغة html وما كان هذا المقال إلا لشرح أساسيات لغة html ولكن في المقالات القادمة سنتعمق أكثر في لغة html وفي لغات البرمجة الأخرى.