فاصلة
  • HTML
  • ?
    : ترتيب الدرس
  • 17
    عدد الدروس
  • ?
    أخر تحديث

اساسيات لغة HTML

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

  • الأوامر الرئيسية <html>
  • أنشاء رابط عن طريق العنصر <a>
  • أضافة صورة عن طريق العنصر <img>
  • أضافة عناوين عن طريق الوسوم <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • أضافة فقرات عن طريق العنصر <p>
  • قائمة مرتبة <ol> وقائمة غير مرتبة <ul>

كل هذة الأوامر سهلة وبسيطة جداً ويمكنك تعلمها في اقل من 20 دقيقة ,وكل ما نريده منك الأن هو قلم وورقة بيضاء وحاسوبك الذي ستنفذ علية التجربة ,والأن سوف نبدأ شرح الأساسيات بالترتيب المذكور في الأعلي.


الأوامر الرئيسية <html>

الأوامر الرئيسية هي بعض الأسطر الثابتة التي نكتب بداخلها محتوي موقع الويب ,وهي تسمي الأوامر الثابتة لأنها لا تتغير أبداً ,ويجب كتابتها دئماً قبل بداية العمل علي المشروع الخاص بك . لأنها مثل الحاوية التي تحمل بيانات موقعك .

كل سطر من الأسطر التالية لة وظيفة خاصة يقوم بها , والسطر الأول وهو  DOCTYPE html  : وهو السطر المسؤول عند إعلام المتصفح بتشغيل أخر أصدار من اللغة وهو الأصدار  html 5.0 ,والسطر الثاني هو الوسم <html> وهو وسم رئيسي يحتوي علي البنية الفرعية للموقع الخاص بة. وما بين الوسم يوجد الوسم head يحمل بيانات الموقع والوسم body لتصميم محتوي وجسم الموقع

<!DOCTYPE html>
<html>
<
head>
هنا بيانات الموقع
<
/head>
<body>
هنا محتوي جسم الموقع
<body/>
<html/>


أنشاء رابط

الروابط هي روح مواقع الويب, لأنها تقوم بالمهمة الأكبر وهي تحويل مستخدم الانترنت من مكان الي الأخر ,وهي سبب وجودك هنا ايضاً ,وعالم الانترنت مجرد روابط تحولنا من مكان الي اخر عن طريق الضغط عليها, وعلي قدر أهمية الروابط,  لكن طريقة انشائها في الموقع سهل جداً ,عن طريق وسم واحد فقد وهو الوسم <a> المسؤول عن أنشاء الروابط في الموقع .

<a></a>

الخاصية href

الوسم <a> لا يعمل بشكل منفرد, ويجب اضافة خاصية بداخلة تسمي href وهي الخاصية المسؤولة عن تحديد العنوان الذي سيتم تحويلنا إلية عند الضغط علي الرابط, والأن يمكنك أنشاء رابط يقوم بتحويلك إلى موقع محدد عند الضغط علية,  سوف يكون الأمر كالتالي

<a href="faslaa.com">رابط</a>


الصور Images

الصور من الأشياء الهامة جداً في أي موقع ويب ,والتعامل معها في لغة HTML يكون عن طريق وسم <img> وهو الوسم المسؤول عن أختيار صورة من الجهاز الخاص بك ووضعها في موقع الويب .

<img>

الخاصية src

وسم  <img> لا يعمل إلا بخاصية تقوم بأختيار الصورة من الجهاز الخاص بك وأضافتها إلي الموقع, وهي الخاصية src المسؤولة عن اختيار الصورة , وعند استدعاء الصورة, يجب أن تكتب نوع الصورة مع الأسم مثل  imgname.jpg ,في حالة إن الأمتداد غير صحيح أو أن اسم الصورة غير صحيح لن يتم اضافتها إلى الموقع, والأن تعرفنا علي الصور بشكل مبدئي إلي حين الوصول إلي الدرس الخاص بالصور لشرحها بالتفصيل .

<img src="imgname.jpg">


العناوين Heading

العناوين في لغة HTML هي عبارة عن نصوص ولكن بشكل كبير نسبياً ,وكما نعرف بأن العناوين دائماً تكون أكبر من حجم النصوص في المحتوي نفسة ,وان نظرت الي محتوي الموقع هذا سوف تجد العناوين أكبر حجماً من النصوص ,ويوجد 6 مقاسات للعناوين في لغة HTML يتم ترتيبها ترتيباً تنازلياً من حيث الحجم يكون أكبر حجم هو المقاس H1 واصغر حجم هو المقاس H6

<h1></h1>


اضافة نصوص في الموقع

النصوص هي المحتوي الطبيعي للموقع ,والوسم المسؤول عن اضافة النصوص في الموقع هو الوسم <p> ,أختصاراً لــ Pharagraph ,وتعني فقرة .وتعريف الفقرة : هي جملة من كلام أو جزء من موضوع, ولأضافة الفقرات الي الموقع يتم كتابة الفقرة بين وسم البداية ووسم النهاية  <p> </p>

<p>فقرة</p>

والأن تعرفنا علي الفقرات بشكل مبدئي الي حين الوصول إلي الدرس الخاص بها لشرحها بالتفصيل . 


القوائم Lists

القائمة هي لائحة بأسماء أشخاص او أشياء يتم كتابتها بشكل مرتب بجانب بعضاها أو فوق بعضها, ويوجد نوعين من القوائم في لغة HTML ,النوع الأول هي القوائم المرتبة عن طريق الأرقام او الحروف, والنوع الثاني قوائم غير مرتبة .

القوائم المرتبة

القوائم المرتبة هي القوائم االتي تبدأ بحرف او تبدأ برقم ويتم ترقيم كل بند في القائمة برقم او حرف تدريجياً ,ولنفترض بأنة لديك قائمة أسماء ["أحمد","محمد","خالد","إبراهيم"] وتريد اضافتها الي الموقع الخاص بك علي شكل قائمة مرتبة سوف يكون الأمر كالتالي .

<ol></ol>

القائمة لن تظهر إلا في حالة اضافة بنود ,ويتم اضافة البندود عن طريق الوسم <li>

<ol>
<
li>البند الأول</li>
<
/ol>

الأدوات أساسيات العناصر خصائص العناوين الفقرات الأنماط التنسيق التعليقات الألوان الروابط الصور الجداول القوائم الترتيب النماذج الميتا تاج