HTML هي لغة ترميز تستخدم لإنشاء صفحات ويب وتعتبر الهيكل الرئيسي للموقع. فهي لغة بسيطة نسبيًا يمكن تعلمها بسهولة، ولكنها توفر قوة كافية لإنشاء صفحات ويب جذابة .
الغرض الأساسي منها هو تحديد بنية صفحة الويب. فتقوم بتعريف عناصر الصفحة، مثل العناوين والفقرات والصور والروابط. كما تحدد كيفية عرض هذه العناصر على الشاشة.
يعد تعلم HTML مهارة أساسية لأي شخص يرغب في إنشاء مواقع ويب. فهو يوفر الأساس الذي يمكنك من بناء مواقع الويب الخاصة بك.
في هذا الدليل، سنتعلم كل ما تحتاج لمعرفته حول HTML. سنبدأ بمقدمة عن تعريف HTML وشرح الغرض منها. ثم سنشرح أهمية تعلمها للمبتدئين. وأخيرًا، سنتعرف على المحتوى الذي سيتم تغطيته في الدليل.
ما هي HTML؟
هي اختصار لـ Hypertext Markup Language. وهي لغة ترميز تستخدم لإنشاء صفحات الويب و لوصف بنية صفحة الويب ومحتوياتها، مثل العناوين والقوائم والصور والنصوص.
لماذا يجب أن تتعلم HTML؟
هناك العديد من الأسباب التي تجعلك ترغب في تعلم HTML، بما في ذلك:
- إنشاء مواقع الويب: هي لغة أساسية لأي شخص يرغب في إنشاء مواقع ويب.
- تعلم البرمجة: هي لغة برمجة بسيطة وسهلة التعلم، ومقدمة جيدة للغات البرمجة الأخرى.
- الحصول على وظيفة في مجال تكنولوجيا المعلومات: أصبحت HTML مهارة أساسية مطلوبة في العديد من وظائف تكنولوجيا المعلومات.
ما الذي ستتعلمه في هذا الدليل؟
في هذا الدليل، ستتعلم أساسيات HTML، بما في ذلك:
- العناصرالأساسية: مثل العناوين والقوائم والصور والنصوص.
- استخدام العلامات المتقدمة: مثل الجداول والنماذج والروابط.
- تنسيق النص والعناصر: باستخدام علامات الترقيم والألوان والأحجام وأنماط الخط.
- الارتباط بين الصفحات: باستخدام الروابط الداخلية والخارجية.
- إضافة CSS إلى صفحة HTML: باستخدام CSS لتنسيق صفحتك HTML.
سيزودك هذا الدليل بالأساسيات التي تحتاجها لإنشاء مواقع ويب بسيطة وفعالة.
إنشاء صفحة HTML بسيطة
ما هي العناصر الأساسية؟
هي علامات تشير إلى كيفية عرض النص والمحتوى الآخر على صفحة الويب. تتكون عناصر HTML من وسم بداية ووسم نهاية.
مثال:
<h1>عنوان الصفحة</h1>
هذا الرمز يخلق عنوانًا في الصفحة. يشير وسم البداية <h1> إلى أن هذا عنصر عنوان، ويشير وسم النهاية </h1> إلى نهاية العنصر.
كيفية إنشاء عنوان في HTML
لإنشاء عنوان في HTML، استخدم وسم <h1> أو <h2> أو <h3> أو <h4> أو <h5> أو <h6>. يشير كل وسم إلى مستوى مختلف من العناوين.
مثال:
<h1>عنوان الصفحة</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان فرعي فرعي</h3>
كيفية إضافة نص إلى الصفحة
لإضافة نص إلى صفحة HTML، استخدم وسم <p>. يشير وسم <p> إلى فقرة.
مثال:
<p>هذا هو نص فقرة.</p>
كيفية إنشاء قائمة في HTML
لإنشاء قائمة في HTML، استخدم وسم <ul> أو <ol>. يشير وسم <ul> إلى قائمة غير مرتبة، ويشير وسم <ol> إلى قائمة مرتبة.
مثال:
<ul>
<li>العنصر 1</li>
<li>العنصر 2</li>
<li>العنصر 3</li>
</ul>
كيفية إنشاء صورة في HTML
لإنشاء صورة في HTML، استخدم وسم <img>. يشير وسم <img> إلى صورة. يجب عليك أيضًا تحديد عنوان الصورة وموقعها على الويب.
مثال
<img src="image.jpg" alt="عنوان الصورة">
هذا الرمز ينشئ صورة بعنوان "عنوان الصورة". يقع الملف المسمى image.jpg في نفس مجلد المشروع مثل ملف HTML.
مثال على صفحة HTML بسيطة
إليك مثال على صفحة HTML بسيطة:
<!DOCTYPE html> <html> <head> <title>عنوان الصفحة</title> </head> <body> <h1>عنوان الصفحة</h1> <p>هذا هو نص فقرة.</p> <ul> <li>العنصر 1</li> <li>العنصر 2</li> <li>العنصر 3</li> </ul> <img src="image.jpg" alt="عنوان الصورة"> </body> </html>
عند حفظ هذا الملف باسم index.html وفتحه في متصفح ويب، سترى صفحة الويب التالية:
استخدام علامات HTML المتقدمة
كيفية إنشاء جدول في HTML
لإنشاء جدول في HTML، استخدم وسم <table>. يشير وسم <table> إلى جدول.
مثال:
<table> <tr> <th>العنوان</th> <th>المحتوى</th> </tr> <tr> <td>العنصر 1</td> <td>محتوى العنصر 1</td> </tr> <tr> <td>العنصر 2</td> <td>محتوى العنصر 2</td> </tr> </table>
هذا الرمز ينشئ جدولًا يحتوي على صفين وعمودين. يحتوي السطر الأول على عنوانين للخلايا، ويحتوي السطران الثانيان على محتويات الخلايا.
كيفية إنشاء نموذج في HTML
لإنشاء نموذج في HTML، استخدم وسم <form>. يشير وسم <form> إلى نموذج.
مثال:
<form action="process.php"> <input type="text" name="name"> <input type="submit" value="إرسال"> </form>
هذا الرمز ينشئ نموذجًا يحتوي على حقل نصي وزر إرسال. سيتم إرسال البيانات من الحقل النصي إلى الملف المسمى process.php عند النقر فوق الزر إرسال.
كيفية إنشاء رابط في HTML
لإنشاء رابط في HTML، استخدم وسم <a>. يشير وسم <a> إلى ارتباط.
مثال:
<a href="https://www.example.com">عنوان الصفحة</a>
هذا الرمز ينشئ رابطًا إلى الصفحة المقصودة. سيؤدي النقر فوق هذا الرابط إلى فتح الصفحة المقصودة في المتصفح.
كيفية إنشاء صورة مصغرة في HTML
لإنشاء صورة مصغرة في HTML، استخدم وسم <img> مع الخاصية width و height.
مثال:
<img src="image.jpg" width="100" height="100" alt="عنوان الصورة">
هذا الرمز ينشئ صورة مصغرة بعرض 100 بكسل وارتفاع 100 بكسل.
أمثلة على صفحات HTML المتقدمة
إليك بعض الأمثلة على صفحات HTML المتقدمة:
<!DOCTYPE html> <html> <head> <title>عنوان الصفحة</title> </head> <body> <a href="https://www.example.com">عنوان الصفحة</a> </body> </html>
صفحة تحتوي على صورة مصغرة:
<!DOCTYPE html> <html> <head> <title>عنوان الصفحة</title> </head> <body> <img src="image.jpg" width="100" height="100" alt="عنوان الصورة"> </body> </html>
تنسيق النص والعناصر في HTML
كيفية استخدام علامات الترقيم في HTML
يمكن استخدام علامات الترقيم في HTML لتنسيق النص وتنظيمه. على سبيل المثال، يمكن استخدام علامات الترقيم لإنشاء قوائم أو لتمييز النص كاقتباس أو عنوان.
فيما يلي بعض الأمثلة على استخدام علامات الترقيم في HTML:
- إنشاء قائمة:
<ul><li>العنصر 1</li><li>العنصر 2</li><li>العنصر 3</li></ul>
سينشئ هذا الرمز قائمة غير مرتبة.
- تمييز النص كاقتباس:
<blockquote>
هذا هو اقتباس.
</blockquote>
سينشئ هذا الرمز اقتباسًا.
- تمييز النص كعنوان:
<h1>عنوان الصفحة</h1>
سينشئ هذا الرمز عنوانًا للصفحة.
كيفية استخدام ألوان النص في HTML
يمكن استخدام ألوان النص في HTML لتغيير لون النص. يمكن تحديد لون النص باستخدام الخاصية color.
فيما يلي مثال على استخدام لون النص في HTML:
<p style="color:red;">هذا النص أحمر.</p>
سيجعل هذا النص باللون الأحمر.
كيفية استخدام أحجام النص في HTML
يمكن استخدام أحجام النص في HTML لتغيير حجم النص. يمكن تحديد حجم النص باستخدام الخاصية font-size.
فيما يلي مثال على استخدام حجم النص في HTML:
<p style="font-size:20px;">هذا النص بحجم 20 بكسل.</p>
سيجعل هذا النص بحجم 20 بكسل.
كيفية استخدام أنماط الخط في HTML
يمكن استخدام أنماط الخط في HTML لتغيير شكل النص. يمكن تحديد نمط الخط باستخدام الخاصية font-style.
فيما يلي بعض الأمثلة على استخدام أنماط الخط في HTML:
نص غامق:
<p style="font-weight:bold;">هذا النص غامق.</p>
سيجعل هذا النص غامقًا.
نص مائل:
<p style="font-style:italic;">هذا النص مائل.</p>
سيجعل هذا النص مائلًا.
نص تسطير:
<p style="text-decoration:underline;">هذا النص مُسطر.</p>
سيجعل هذا النص مُسطرًا.
بالإضافة إلى هذه الخصائص، هناك العديد من الخصائص الأخرى التي يمكن استخدامها لتنسيق النص والعناصر في HTML. لمزيد من المعلومات، يمكنك الرجوع إلى دليل HTML: https://www.w3schools.com/html/.
الارتباط بين صفحات HTML
كيفية إنشاء روابط داخلية في HTML
يمكن استخدام الروابط الداخلية لربط صفحات HTML ببعضها البعض. يمكن استخدام الروابط الداخلية لإنشاء تنقل على موقع الويب أو لتوفير وصول سريع إلى محتوى آخر.
لإنشاء رابط داخلي في HTML، استخدم وسم <a>. يجب أن يحتوي وسم <a> على الخاصية href والتي تحدد عنوان الصفحة المراد ربطها.
فيما يلي مثال على إنشاء رابط داخلي في HTML:
<a href="about.html">حول</a>
سيخلق هذا الرابط ارتباطًا بالصفحة المسماة "about.html".
كيفية إنشاء روابط خارجية في HTML
يمكن استخدام الروابط الخارجية لربط صفحات HTML بصفحات على مواقع ويب أخرى. يمكن استخدام الروابط الخارجية لتوفير الوصول إلى المعلومات من مصادر أخرى أو لإنشاء روابط تشعبية.
لإنشاء رابط خارجي في HTML، استخدم وسم <a>. يجب أن يحتوي وسم <a> على الخاصية href والتي تحدد عنوان الصفحة المراد ربطها.
فيما يلي مثال على إنشاء رابط خارجي في HTML:
<a href="https://www.w3schools.com/">W3Schools</a>
سيخلق هذا الرابط ارتباطًا بموقع الويب W3Schools.
أمثلة على استخدام الروابط الداخلية والخارجية في HTML
إليك بعض الأمثلة على استخدام الروابط الداخلية والخارجية في HTML:
صفحة رئيسية تحتوي على روابط إلى صفحات أخرى على الموقع:
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<h1>عنوان الصفحة</h1>
<a href="about.html">حول</a>
<a href="contact.html">اتصل بنا</a>
</body>
</html>
صفحة تحتوي على رابط إلى مستند PDF:
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<h1>عنوان الصفحة</h1>
<a href="document.pdf">تحميل المستند</a>
</body>
</html>
صفحة تحتوي على رابط إلى موقع ويب آخر:
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<h1>عنوان الصفحة</h1>
<a href="https://www.w3schools.com/">W3Schools</a>
</body>
</html>
هذه مجرد أمثلة قليلة، وهناك العديد من الطرق الأخرى لاستخدام الروابط الداخلية والخارجية في HTML.
إضافة CSS إلى صفحتك HTML
ما هي CSS؟
CSS هي اختصار لـ Cascading Style Sheets. وهي لغة تنسيق تستخدم لتنسيق صفحات الويب. يمكن استخدام CSS لتغيير مظهر عناصر HTML، مثل حجم النص ولونه وموقعه.
كيفية استخدام CSS لتنسيق صفحتك HTML
لإضافة CSS إلى صفحتك HTML، يمكنك تضمينها في قسم <head> من صفحتك. يمكن تضمين CSS إما كتعليمات داخلية أو كملف خارجي.
التعليمات الداخلية
لإضافة CSS كتعليمات داخلية، استخدم وسم <style>. يجب أن يحتوي وسم <style> على مجموعة من التعليمات التي تحدد كيفية تنسيق عناصر HTML.
فيما يلي مثال على استخدام التعليمات الداخلية لإضافة CSS إلى صفحة HTML:
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
<style>
h1 {
color: red;
font-size: 20px;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>عنوان الصفحة</h1>
<p>هذا هو النص.</p>
</body>
</html>
سيؤدي هذا الكود إلى إنشاء عنوان الصفحة باللون الأحمر وحجم 20 بكسل، وإنشاء النص باللون الأزرق وحجم 16 بكسل.
الملفات الخارجية
لإضافة CSS كملف خارجي، قم بإنشاء ملف نصي باسم style.css. ثم، أضف التعليمات التي تحدد كيفية تنسيق عناصر HTML إلى الملف.
فيما يلي مثال على ملف style.css:
h1 {
color: red;
font-size: 20px;
}
p {
color: blue;
font-size: 16px;
}
ثم، أضف العنصر التالي إلى قسم <head> من صفحتك HTML:
<link rel="stylesheet" href="style.css">
سيؤدي هذا الكود إلى تضمين ملف style.css في صفحتك HTML.
أمثلة على استخدام CSS
إليك بعض الأمثلة على استخدام CSS لتنسيق صفحتك HTML:
تغيير لون النص:
h1 {
color: red;
}
سيؤدي هذا الكود إلى تغيير لون عنوان الصفحة إلى الأحمر.
تغيير حجم النص:
h1 {
font-size: 20px;
}
سيؤدي هذا الكود إلى تغيير حجم عنوان الصفحة إلى 20 بكسل.
تغيير الخط:
h1 {
font-family: Arial;
}
سيؤدي هذا الكود إلى تغيير خط عنوان الصفحة إلى Arial.
تغيير المسافة بين الأسطر:
p {
line-height: 2;
}
سيؤدي هذا الكود إلى زيادة المسافة بين الأسطر في الفقرات.
- تغيير محاذاة النص:
p{ text-align: center; }
سيؤدي هذا الكود إلى محاذاة النص في الفقرات في المنتصف.
هذه مجرد أمثلة قليلة، وهناك العديد من الطرق الأخرى لاستخدام CSS لتنسيق صفحتك HTML.
أستنتاج
تعلم HTML هو مهارة أساسية لأي شخص يرغب في إنشاء مواقع ويب. يمكن أن يساعدك HTML في إنشاء صفحات ويب جذابة ووظيفية.
فيما يلي بعض الموارد الإضافية المتاحة لتعلم HTML:
- الدورات التدريبية عبر الإنترنت: هناك العديد من الدورات التدريبية عبر الإنترنت المتاحة لتعلم HTML. تقدم هذه الدورات التدريبية مجموعة متنوعة من المستويات والأسعار، لذلك يمكنك العثور على الدورة التدريبية المناسبة لمستوى خبرتك.
- كتب تعليمية: هناك العديد من الكتب التعليمية المتاحة لتعلم HTML. تقدم هذه الكتب شرحًا مفصلًا لعناصر وخصائص HTML.
- مواقع الويب التعليمية: هناك العديد من مواقع الويب التعليمية المتاحة لتعلم HTML. تقدم هذه المواقع دروسًا وتدريبات واختبارات لمساعدةك على تعلم HTML.
- مجتمعات الويب: هناك العديد من مجتمعات الويب المتاحة للمطورين المهتمين بتعلم HTML. يمكن أن تكون هذه المجتمعات مصدرًا رائعًا للدعم والمساعدة.
من خلال استثمار الوقت والجهد في تعلم HTML، يمكنك اكتساب مهارة قيمة ستساعدك في إنشاء مواقع ويب رائعة.
