بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
السلام عليكم ورحمة الله وبركاته
نبدأ بإذن الله تعالى في شرح أساسيات لغة html
للمبتدئين في مجموعة من الدروس على شكل مقالات مع إمكانية تحميل ملفات الأكواد ، سنبدأ إن شاء الله بتعلم اللغة بشكل عام وفي نهاية الدورة سنتعرض لبعض ماجاءت به html5 الإصدار الأخير للغة الذي بدأت الإصدارات الأخيرة للمتصفحات في دعم بعض خصائصه.
مقدمة عن مواقع الويب
البنية الأساسية لصفحات الويب تتكون من ثلاث طبقات:
1ـ طبقة المحتوى (Content): ويبنى بلغة html ، وهذه الطبقة هي التي تظهر محتوى الصفحة من نصوص وروابط وحقول وما إلى ذلك.
2ـ طبقة التنسيق(Presentation): وتنسق بلغة css ، وهذه الطبقة تتحكم في شكل ظهور طبقة المحتوى ، مثل تموضع العناصر والألوان وجمالية النصوص وما شاكل.
3ـ طبقة التفاعل(Behavior): والمسؤول عنها لغة JavaScript ، ولغات أخرى مثل php وهذه الطبقة تتحكم في الأحداث التي تقع في الصفحة بمجرد ضغط المستخدم علي رابط أو إرسال بيانات الحقول بعد ملئها ، وجعل الموقع ديناميكيا متجددا على مدار اليوم.
وطبعا ما يهمنا في هذه الدورة هو الطبقة الأولى html ، ونترك الباقي لدورات قادمة إن شاء الله.
ما هي HTML ؟
إ َن HTML هي اختصار abbreviation الحروف الاولى من الجملة Markup Text Hyper
ٔ Language و التي تعني بترجمة غير حرفية )لغة وصفية صفحات الويب(
, و هي ليست لغة
برمجَّية, ّلا بل هي لغة وصفية Language Markup ,أل َّف HTML تستخدم مجموعة من الوسوم Tags لوصف صفحة الويب.
كل عنصر أو علامة أو وسم له وظيفة معينة يقوم بها في ملف html ، وتختلف هذه الوظائف باختلاف العلامة.وسيتضح هذا لك في الأمثلة التطبيقية .
ماذا احتاج لتعلم لغة html؟ وما البرنامج اللازم
كل ما تحتاجه لكي تبدأ في تعلمم كتابة مستندات HTML هو محرر نصوص مثل (Notepad , sublime text 3)
وافضل sublime text 3 لتحميل البرنامج عبر الرابط التالي اضغط هنا
المثال الاول في لغة HTML
سنقوم بكتابة أول صفحة HTML معاً باتباع الخطوات التالية:
نقوم أول بفتح أحد محررات النصوص و ليكن المفكرة Notepad او sublime text 3 علي سبيل المثال و نكتب
الشيفرة التالية:
قم بحفظ الملف أولا ثم اكتب فيه الأكواد وإضغط على save ، أو العكس كما تريد، إحفظه في مجلد على سطح المكتب ،ففي هذا المجلد سنضع الصور لسهولة الوصول إليها وذلك في حينه.
يمكنك الآن الضغط مرتين على أيقونة ملف index.html وسيفتح المتصفح تلقائيا وستلاحظ الصفحة فارغة لأننا لم نضف إليها أي محتوى بعد.
عناصر html :
تعتبر عناصر HTML كل شيء من بداية الوسم وحتى نهايته
تركيب عناصر HTML
- -جميع عناصر HTML تبدأ بــ بداية الوسم
- -جميع عناصر HTML تنتهي بــ نهاية الوسم
- -ان محتوى العنصر هو كل شيء بين تلك الوسوم
- -بعض عناصر HTML تحتوي على "empty content" أي "محتوى فارغ"
- -يتم اغلاق العناصر الفارغة في بداية الوسم
- -تحتوي أغلب وسوم HTML على "attribute" أي "لاحقة"
عناصر HTML الفارغة
ان عناصر HTML التي لاتحتوي على محتوى تسمى عناصر فارغة
ان الوسم <br> يعتبر فارغ لأنه لايحتاج الى نهاية وسم لأن <br> يعرف سطر جديد.
صيغة كتابة علامات html :
سنرمز لعلامة html ب tag لتسهيل معرفة صيغة الكتابة ، وهناك نوعان من علامات html :
1- علامات زوجية : تفتح بجزء من العلامة وتغلق بالجزء الثاني والمحتوى في الوسط كالتالي:<tag/>المحتوى<tag> من اليسار إلى اليمين.
2- علامات فردية : تفتح وتغلق في نفس العلامة والمحتوى يتحدد داخل العلامة بخصائص وقيم سنصل إليها فيما بعد ، كالتالي: </tag>.
2- علامات فردية : تفتح وتغلق في نفس العلامة والمحتوى يتحدد داخل العلامة بخصائص وقيم سنصل إليها فيما بعد ، كالتالي: </tag>.
أحببت في هذه المقدمة أن أكتفي بالشرح النظري ، وابتداءا من الدرس القادم إن شاء الله
في الدرس القادم سنشرح الكود الذي كتبناه في ملف html وسنضيف له علامة ترميز اللغة العربية ، وبعد ذلك نشرح علامات النصوص.
سيتضح كل شيء مع الأمثلة العملية.