اشترك ليصلك جديدنا
ليصلك جديد التصاميم المجانية والمدفوعة، ومقالات التسويق الإلكتروني،
اشترك معنا باضافة بريدك الإلكتروني، وكذلك واتساب (اختياري).
الدرس السابع: العنصر Div (HTML div)
جميع دروس CSS
الدرس الاول: مقدمة حول CSSالدرس الثاني: كيف نكتب كود CSS
الدرس الثالث: محرر Adobe Dreamweaver
الدرس الرابع: طريقة تطبيق لغة CSS
الدرس الخامس: المحددات CSS Selectors
الدرس السادس: الألوان CSS Colors
الدرس السابع: العنصر HTML div
الدرس الثامن: الخلفيات CSS Backgrounds
الدرس التاسع: حدود العناصر CSS Borders
الدرس العاشر: الحدود المدورة CSS Rounded Borders
الدرس الحادي عشر: الهوامش CSS Margins
الدرس الثاني عشر: الهوامش الداخلية CSS Padding
الدرس الثالث عشر: الطول والعرض CSS Height and Width
الدرس الرابع عشر: النصوص CSS Text
الدرس الخامس عشر: الخطوط CSS Fonts
الدرس السادس عشر: القوائم HTML Lists
الدرس السابع عشر: الروابط CSS Links
الدرس الثامن عشر: الاتجاهات CSS directions
الدرس التاسع عشر: الجداول CSS Tables
ماهو div
كيف يتم استخدام عنصر div
طريقة عمل div
ماهو div
هو عبارة عن قسم او بلوك في صفحة الويب، ويتم تنسيقه بواسطة CSS.
كيف يتم استخدام عنصر div
يستخدم div لعمل التقسيمات داخل صفحة الويب على هيئة مربعات أو مستطيلات (متفاوتة المقاسات) حسب المقاس الذي تقوم بتطبيقه عليه وتكمن أهميته أيضا لاحتواء عناصر التصميم من بيانات نصية أو صور أو غيرها في صفحة الويب.
أدناه صورة افتراضية لهيكل صفحة ويب تم تقسيم محتواها بواسطة div وسيكون بداخل التقسيمات محتوى معين:
من الصورة أعلاه يتبين أن تصميم صفحة الويب سيتضمن 4 تقسيمات وكل تقسيم له مكانه ومقاسه المحدد كي يستوعب المحتوى الذي سيتم اضافته له.
طريقة عمل div
الصورة العامة لعمل تقسيم div هي كالتالي:
<div> Her any content </div>
مثال (9) (المثال للتوضيح غير ضروري التطبيق)
سنقوم بعمل div ويكون عرضه يساوي 70% من صفحة الويب أو الشاشة التي يتقوم بفتح صفحة الويب، والطول يساوي 600 بيكسل، وأيضا ستكون الخلفية باللون الأخضر الفاتح.
الخطوات:
- نقوم بفتح Dreamweaver.
- من أعلى النافذة نختار File ثم New ثم نختار HTML ثم زر Create
- نحفظ صفحة الويب باسم html
- سنقوم بإضافة الكود التالي لصفحة الويب html
داخل صفحة الويب:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Hello this is DIV Example </title>
</head>
<body>
<div style="width: 70%; height: 600px; background-color: aquamarine; ">
<h3>Hello .. this is my first DIV code </h3>
</div>
</body>
</html>النتيجة:
