أساسيات لغة HTML | الدرس الأول (مقدمة)

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
  

نبدأ بإذن الله تعالى في شرح أساسيات لغة html للمبتدئين في مجموعة من الدروس على شكل مقالات مع إمكانية تحميل ملفات الأكواد ، سنبدأ إن شاء الله بتعلم اللغة بشكل عام وفي نهاية الدورة سنتعرض لبعض ماجاءت به html5 الإصدار الأخير للغة الذي بدأت الإصدارات الأخيرة للمتصفحات في دعم بعض خصائصه.

وينصح دائما بالنسبة للمبتدئين أن يبدؤوا بالدورات البسيطة قبل الدخول في الدورات الإحترافية ، سواء لتعلم لغة html أو css أو لغات البرمجة ، فوفقا لتجربتي أثناء تعلمي فقد لاحظت وجود ثلاث مستويات تعليمية في هذا المجال ، لأن علوم الويب هي كبيرة جدا وليست بسيطة كما يصورها البعض ، والمرء يحتاج إلى تعليم وتدريب مع الصبر والهمة لمدة سنتين على الأقل حتى يصل إلى المستوى الإحترافي ، وهذه العلوم تتجدد دائما ، أعاننا الله وإياكم لنصل إلى المستوى المطلوب.

مقدمة عن مواقع الويب

البنية الأساسية لصفحات الويب تتكون من ثلاث طبقات:

1ـ طبقة المحتوى (Content): ويبنى بلغة html ، وهذه الطبقة هي التي تظهر محتوى الصفحة من نصوص وروابط وحقول وما إلى ذلك.

2ـ طبقة التنسيق(Presentation): وتنسق بلغة css ، وهذه الطبقة تتحكم في شكل ظهور طبقة المحتوى ، مثل تموضع العناصر والألوان وجمالية النصوص وما شاكل.

3ـ طبقة التفاعل(Behavior): والمسؤول عنها لغة JavaScript ، ولغات أخرى مثل php وهذه الطبقة تتحكم في الأحداث التي تقع في الصفحة بمجرد ضغط المستخدم علي رابط أو إرسال بيانات الحقول بعد ملئها ، وجعل الموقع ديناميكيا متجددا على مدار اليوم.

وطبعا ما يهمنا في هذه الدورة هو الطبقة الأولى html ، ونترك الباقي لدورات قادمة إن شاء الله.

ماهي لغة html ؟

هي اختصار لجملة HyperText Markup Language  ، وهي لغة علامات Tags جمع علامة Tag ، البعض يسميه علامة وآخرون وسم وهناك من يسميه سمة ، نحن طيلة الدورة سنصطلح عليه بالعلامة أو العنصر.

كل عنصر أو علامة أو وسم له وظيفة معينة يقوم بها في ملف html ، وتختلف هذه الوظائف باختلاف العلامة.وسيتضح هذا لك في الأمثلة التطبيقية .

html element

html object

html tag

html node

هذه كلها تسميات مختلفة لعنصر واحد هو علامة أو عنصر html ، لذا لا تقلق إذا صادفتك إحدى هذه التسميات في مقالة أجنبية أو موقع .

ماذا نحتاج لتعلم لغة html؟

نحتاج إلى محرر نصوص عادي ، وليكن ++Notpad  في البداية فهو أفضل للمبتدئين ، فهو محرر ملون ويساعد على التعلم ، وإن كنت لا تتوفر عليه فبإمكانك كتابة إسمه في بحث غوغل وتحميله من الموقع الرسمي وهو مجاني.

افتح ملف notpad وانقل فيه الكود التالي الواضح في الصورة ، وسأشرحه لاحقا.

 من القائمة Language إخترلغة html ومن قائمة Encodage إختر utf-8 ثم بعد ذلك قم بحفظ الملف بامتداد html ، كما في الصورة التالية:

 قم بحفظه أولا ثم اكتب فيه الأكواد وإضغط على save ، أو العكس كما تريد، إحفظه في مجلد على سطح المكتب ،ففي هذا المجلد سنضع الصور لسهولة الوصول إليها وذلك في حينه.

يمكنك الآن الضغط مرتين على أيقونة ملف index.html p المتصفح تلقائيا وستلاحظ الصفحة فارغة لأننا لم نضف إليها أي محتوى بعد.

صيغة كتابة علامات html :

سنرمز لعلامة html ب tag لتسهيل معرفة صيغة الكتابة ، وهناك نوعان من علامات html :

1- علامات زوجية : تفتح بجزء من العلامة وتغلق بالجزء الثاني والمحتوى في الوسط كالتالي:<tag/>المحتوى<tag> من اليسار إلى اليمين.

2- علامات فردية : تفتح وتغلق في نفس العلامة والمحتوى يتحدد داخل العلامة بخصائص وقيم سنصل إليها فيما بعد ، كالتالي: </tag>.

صيغة كتابة الخصائص والقيم:

تكتب الخصائص والقيم داخل العلامة ، وسنرمز للخاصية ب attr والقيمة ب value وذلك حتى نوضح صيغة كتابتها في الصورة التالية:

أحببت في هذه المقدمة أن أكتفي بالشرح النظري ، وابتداءا من الدرس القادم إن شاء الله

سيتضح كل شيء مع الأمثلة العملية.

في الدرس القادم سنشرح الكود الذي كتبناه في ملف html وسنضيف له علامة ترميز اللغة العربية ، وبعد ذلك نشرح علامات النصوص.

دمتم في رعاية الله.