بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
السلام عليكم ورحمة الله وبركاته
تصنيف العناصر بين block و inline
أنظر الصورة التالية:
العناصر h2 و p تعتبر من النوع block لأنها احتلت السطر كاملا بما فيه الفراغ الموجود أمامها ، ولم تسمح لعناصر أخرى بأن تحتل ذلك الفراغ ، حتى وإن كانت عناصر من نفس العلامة فكل واحدة تأخذ حيزها كاملا.
العنصر a على عكس العناصر السابقة هو من النوع inline ، فهو يحتل فقط الحيز الذي يظهر فيه ، ويترك الفراغ الباقي لأي عنصر آخرمن نفس العلامة أو أخرى.
هام جدا:
1-العنصر من النوع block قد يحتوي على عناصر من نفس النوع أو من النوع inline أو كلا النوعين.
2-العنصر من النوع inline لا يحتوي سوى على عناصر من نفس نوعه، بمعنى لا تضع أبدا عنصر block داخل inline .
إتجاه الصفحة
الإفتراضي في إتجاه صفحة html على نافذة المتصفح هو من اليسار إلى اليمين ، ولتغييره وجعله ملائما للغة العربية نذهب إلى العلامة html ونضيف لها الخاصية dir وهي اختصار لكلمة direction وضع لها القيمة rtl اختصارright to left .
وهذا طبقناه بالفعل في المثال الماضي ، عد إلى الصورة الماضية ، وكما تلاحظ الإتجاه تغير عكس الأمثلة التي رأيناها في الدرس الماضي.
العلامة br والعلامة hr
علامتان فرديتان من النوع block ، تستخدم الأولى للرجوع إلى السطر أو ترك فراغ أفقي بين العناصر ، وتستخدم الثانية لتسطير خط فاصل بين عنصر وآخر، أنظر الصورة:
نفس المثال السابق مع إضافة العلامتين hr و br ، والنتيجة:
ويزداد الفراغ الخطي كما تلاحظ بتكرار العلامة br .
علامة الصورة img
هي علامة فردية من النوع inline ، ولاستخدامها سنضع صورة أولا في المجلد الذي نشتغل عليه الذي يتواجد به ملف html حتى تسهل الإشارة إلى مسار الصورة ، وسنتعرض لاحقا للمسارات المركبة .
نضع للعلامة img خاصية مهمة جدا وضرورية لظهور الصورة ، وهي src وتأخذ قيمة مسار الصورة واسمها وامتدادها ، وفي مثالنا هذا فقط اسم الصورة وامتدادها لأنها في نفس المكان مع ملف html ، أنظر الصورة:
والنتيجة:
كما ترى الصورة ظهرت بأبعادها الإفتراضية 800px عرضا 600px ارتفاعا، ويمكننا التحكم في العرض باستخدام الخاصية width وإعطائها قيمة رقمية بدون كتابة px ، كما يمكننا التحكم في الإرتفاع باستخدام الخاصية height وإعطائها قيمة.
ومن الخصائص التي تستخدم مع الصورة ، خاصية title وتأخذ قيمة أي عنوان تريده أن يظهر في ظل مؤشر الماوس عند مروره على الصورة ، والخاصية alt وتأخذ كقيمة أي نص تريده أن يظهر في حال لم تظهر الصورة لدى المستخدم لأسباب متعلقة بصبيب الأنترنت، أنظر الصورة:
الألوان في html
تتم الإشارة إلى اللون في html بطرق متعددة ، أهمها:
الطريقة 1 : يكتب إسم اللون باللغة الإنجليزية red ، white ، green
الطريقة 2 : نكتب الرمز # ونتبعه بستة رموز عبارة عن أرقام أو حروف أو كلاهما ، وهذا النظام يسمى ب Hexadecimal مثلا: cccccc# ترمز للون الرمادي الفاتح ، ويمكن اختصارها إلى ccc# .
الطريقة 3 : استخدام نظام rgb ، وهو اختصار ل red ,green,blue ، واللون يعتمد على مقدار كل لون من هذه الألوان من 0 إلى 255 ،مثال (255,0,0)rgb ترمز للون الأحمر.
الطريقة 4 : نظام rgba وهو نفس نظام rgb مع إضافة نسبة الشفافية opacity ، مثلا: (255,0,0,0.5)rgb
ويفضل استخدام الطريقة الأولى والثانية لاجتناب مشاكل بعض المتصفحات مثل internet explorer الذي لا يطبق نظام rgb في نسخه الأقل من 9 .
ويمكنك الحصول على أكواد الألوان بكل سهولة من برنامج الفوتوشوب أو البحث في غوغل بكتابة colors html ستجد عدة مواقع تقدم الخدمة مجانا بحيث يمكنك اختيار اللون الذي تريد وتنسخ كوده وتستخدمه حيث تريد.
دمتم في رعاية الله.