اساسيات لغة البرمجة HTML
HTML.
نضعه في أول الملف دائماً حتى يعلم المتصفح أننا نستخدم الإصدار الخامس من لغةنضعه بهدف كتابة كل الكود بداخله.
نضع في كل الأشياء التي لن يراها المستخدم بداخل الصفحة.
تضع فيه كل الأشياء التي سيراها المستخدم بداخل الصفحة.
سوف تتعلمها عبر المثلة التالية :
هي بشكل عام, أي شيء يتم إضافته في الصفحة يقال له وسم ( Tag ) و يوجد نوعين من الوسوم:
- وسوم زوجية و يقصد بها أن الوسم يمكن أن يوضع فيه وسوم أخرى مثلهذا الوسم .
وسوم فردية و هذه تعني أن الوسم لا يمكن وضع وسم آخر فيه مثل الوسم ياتي على هذا الشكل .
لا تقلق ستتعلم كيف تستخدم جميع الوسوم الفردية و الزوجية لاحقاً و لكننا نعلمك عن هذه الأمور من الآن تجهيزاً لها. تابع القراءة لتتعلم اكثر
ماهي التعليقات في HTML
التعليق ( Comment )هو عبارة عن وسم خاص يمكنك وضعه في أي مكان تريد في الصفحة بهدف كتابة ملاحظات تساعدك في الشرح أو لتذكر سبب استخدام الوسوم في حال أردت مستقبلاً مراجعة كود الصفحة و التعديل عليه. كثير من المبرمجين يستخدمونه حتى يستطيعون معرفة الكود عند قراءته مرة اخرى.
لوضع تعليق إستخدم الوسم
و أكتب النص بداخله كالتالي.انظر هنا
- <!DOCTYPE html>
- <html>
- <head>
- </head>
- <body>
- <--هذا التعليق لا يظهر امام المستخدم -->
- </body>
- </html</html>
خصائص وسوم HTML
أغلب الوسوم التي تضيفها في الكود يمكن إضافة خصائص لها على الشكل التالي.
element: يقصد بها إسم الوسم.
attribute: يقصد بها الخاصيّة التي يملكها الوسم بالأساس و لكننا ننوي تحديد قيمتها.
value: يقصد بها القيمة التي سنضعها في الخاصيّة و دائماً يجب وضعها بين .
كمثال بسيط, عند إضافة صورة في الصفحة نستخدم الوسم
و بداخله نحدد مسار الصورة التي سيتم عرضها بواسطة الخاصية كالتالي.مثال
- <!DOCTYPE html>
- <html>
- <head>
- </head>
- <body>
- <img src="رابط الصورة">
- </body>
- </html>
طريقة وضع عنوان للملف
في حال أردت وضع عنوان للملف حتى يظهر في المتصفح بدلاً من إسم الملف نفسه, قم بوضعه بداخل
في القسم كالتالي.مثال
- <!DOCTYPE html>
- <html>
- <head>
- <title>عنوان الصفحة</title>
- </head>
- <body>
- </body>
- </html>
طريقة وضع أيقونة للملف
في العادة الصورة التي يتم وضعها كأيقونة للصفحة يكون إسمها .
و حجمها و لكن تستطيع وضع مسار أي صورة لديك بشرط أن يكون لها الحجم المذكور. لوضع أيقونة بجانب عنوان الصفحة يجب أن تضع السطر التالي كما هو في القسم مع وضع مسار الصورة التي تريد عرضها مكان الكلمة- <link rel="icon" type="image/x-icon" href="icon-path">
في المثال التالي قمنا بوضع أيقونة موقع هرمش نفسها بجانب عنوان الصفحة.
مثال
<!DOCTYPE html>
- <html>
- <head>
- <title>عنوان الصفحة</title>
- <link rel="icon" type="image/x-icon" href="رابط الصورة">
- </head>
- <body>
- </body>
- </html>
أمثلة على الأشياء التي يمكن إضافتها في القسم
في صفحة الويب و بالتحديد في القسم
الذي يراه المستخدم يمكنك إضافة الكثير من الأشياء مثل الصور, القوائم, الأزرار و أي شيء يخطر في بالك.ستتعرف لاحقاً في الدورة على جميع الأشياء التي يمكنك إضافتها في الصفحة و سنطلعك الآن على بعضها.
ملاحظة: نتمنى منك التركيز على طريقة ترتيب الكود و ليس طريقة عمله.
مثال
- <!DOCTYPE html>
- <html>
- <head>
- </head>
- <body>
- <center>
- <h2>هناتكتب عنوان الفقرة</h2>
- </center>
- <p>هنا تكتب نص الفقرة</p>
- <img src="هنا تكتب رابط الصورة">
- <!-- هنا قمنا بإضافة سطرين فارغين لإبعاد الصورة عما سنعرضه بعدها -->
- <br><br>
- <!-- هنا قمنا بعرض عنوان أصغر من العنوان الأول -->
- <h3>HTML usage</h3>
- <!-- هنا قمنا بعرض قائمة -->
- <ul>
- <li> الاول العنوان</li>
- <li>العنوان الثاني</li>
- <li>العنوان الثالث</li>
- </ul>
- </body>
- </html>
طريقة كتابة أسماء الوسوم لا تؤثر في HTML
سواء قمت بكتابة إسم الوسم بأحرف صغيرة ( Small Letters ) أو بأحرف كبيرة ( Capital Letters ) فإن ذلك لا يسبب أي مشكلة.
مثال
- مااجمل حينما تكتب اول صفحة الويب خاصتك حينها تشعر بقمة السعاده...
- اتمنى لك التوفيق والتجاح
تعليقات: (0) إضافة تعليق