HTML الدرس السابع فى

Blocks

-وهى عبارة عن تاجيى <div> and <span>والمهم هو تاج </div> <div> حيث ان هذا التاج مهم جدا فى لغة (HTML) حيث تستخدمة فى تنظيم موقعك فمن المعروف ان اى موقع يكون مقسم الى اربع اجزاء وهما:
(header,footer,sidebar,content) حيث يتم وضع كل جزء من الاجزاء الاربعة فى

تاج </div> <div> منفصل والمثال التالى يشرح بالتفصيل كيفية تصميم موقع باستخدام هذا التاج.

<!DOCTYPE html>
<html>
<body>
<div id=”container” style=”width:500px”>
<“div id=”header” style=”background-color:#FFA500″>
<h1 style=”margin-bottom:0;”>Main Title of Your Web Page</h1>
</div>
<div id=”menu” style=”background-color:#FFD700;height:200px;width:100px;float:lef”>
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript<br>
</div>
<div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left”>
Content </div>
<div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”
Copyright © W3S4arb>
</div>
</div>
</body>
</html>

وتظهر بصفحة الويب كالتالى:

Main Title of Your Web Page

Content

جرب بنفسك المثال السابق ولاحظ ان هناك مجموعة من(attributes)الخاصة بتاج <div>واليك شرحها:

استخدامها

attributes

وبة تضع اسم مخصص للتاج لتمييز التاجات عن بعضها

id

وبة يتم ضبط حجم الخط والالوان وغيرة للتاج

style

لضبط العرض والطول وتقاس بوحدة البكسل(px)

width,height

تستخدم لضبط لون الخلفية للتاج ويمكن ان تغير لون الخلفية عن طريق كتابة اسم اللون فمثلا الاحمر تكتب red او بطريقة الاكواد كما مسنخدم فى المثال والاكواد يمكن ان تحصل عليها من الانترنت

background-color

اى عمل تباعد من الاسفل بين التاج والتاج الذى يلية وسندرسها اكثر فى كورس css

margin-bottom

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: