واجب الدرس السادس طريقه مختلفه

حياكن الله اخواتي
انا حاولت في عمل الواجب وحبيت اشارككم الطريقه يارب تكون بسيطه
في البدايه الحل خليط ما بين cssوhtml
جزء css سهل ان شاء الله








ان شاء الله هتناوله بالشرح خطوه خطوه بس الكهربا عندي بتقطع فكل شويه هكتب شويه

كود بلغة HTML

<div id="Header"> <div id="right"><img src="../../My Documents/Unnamed Site 3/normal_eyelash_ps012thulth13.jpg" width="151" height="79" /></div> <div id="left"><img src="../../My Documents/Unnamed Site 3/ABES58.jpg" width="202" height="80" /></div> <h1><strong>منتدي روضة القرأن النسائي</strong></h1> </div>

اولا نفهم كل نقطه يتم وضع الHtml زي ما كنا نضعها سابقا عادي جدا
في البدايه نقوم بعمل كود header للراس الصفحه
<div id="Header"></div>
داخل هذ الكود نقوم بالتقسيم كمانريد ووضع ما نريد
قسمته الي 3 اجزاء جزء يمين حدد حجمه ووضعت صوره
وجزء شمال قسمت مساحته وضعت صوره

كود بلغة HTML

<div id="right"><img src="../../My Documents/Unnamed Site 3/normal_eyelash_ps012thulth13.jpg" width="151" height="79" /></div> <div id="left"><img src="../../My Documents/Unnamed Site 3/ABES58.jpg" width="202" height="80" /></div>

ووضعت الكتابه في المنتصف

كود بلغة HTML

<h1><strong>منتدي روضة القرأن النسائي</strong></h1>

وده كده جزء الهيدر ولكن ليس هذا الجزء فقط هذا الجزء لا يظهر الكلام مرتب منظم للتنظيم جزء css

كود بلغة HTML

<style type="text/css"> #Header { background-color: #060;لون الخلفيه تكتبي اي رقم للون background-image: url(../../My%20Documents/Unnamed%20Site%203/7hob.com1366666474458.jpg);اذا الخلفيه صوره تضعيها كصوره height: 100px;طول الهيدر width: 800px;عرض الهيدر margin-top: auto;تنسيق الاعلي margin-right: 50px;المسافه التي تترك من اليمين margin-bottom:50;المسافه التي تترك من اسفل margin-left: 0px;المسافه التي تترك من الجمب اليسار border: medium double #03C; عرض الاطار } #left { float: left;الجزء الشمال للهيدر height:80px;ارتفاعه width: 200px;عرضه border: medium double #039;الاطار المحدد له } #right { float: right;الجزء اليمين height: 80px;ارتفاعه width: 150px;عرضه margin-right: 0px; اليمينالمسافه المتروكه من margin-left: 0px; border-top-width: medium;الاطار المحدد من كل جمب ممكن ان يعمل كطريقه الاطار في اليسار لا يوجد فرق border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: double; border-right-style: double; border-bottom-style: double; border-left-style: double; }

ثانيا نضع الhtml للbody

كود بلغة HTML

div id="body"> كود البودي <blockquote>كود لوضع الساعه واليوم يمكن ان تضعيه او لا كما تحبي استبدليه باي كتابه مما تعلمناها <p><!-- #BeginDate format:IS1a -->2014-12-01 7:26 PM<!-- #EndDate --></p> </blockquote> <img src="../../My Documents/Unnamed Site 3/h.jpeg" width="474" height="177" alt="معمل" /></div> كود لصوره كما تعلمنا

وطبعا كل html له صديق في css للتنسيق

كود بلغة HTML

} #body { background-color: #39F; لون الخلفيه letter-spacing: normal; المسافات بين الحروف text-align: center; محاذاه النص في المنتصف word-spacing: normal; height: 600px;ارتفاع البودي width: 800px; عرضه margin-top: auto;المحاذاه من اعلي margin-right: 0px; margin-bottom: auto; margin-left: 0px; border: thick double #006; حجم الاطار list-style-type: circle; } body,td,th { اذا وضعتي اليوم والتاريخ فهذا تنسيقه font-family: Arial, Helvetica, sans-serif; اسم الخط font-size: larger;حجمه الخط font-weight: bold;خط سميك } body { margin-left: 20px; الصوره مبتعهده من كل جهة 20 margin-top: 20px; margin-right: 20px; margin-bottom: 20px; }

كود الخاتمه بتاعت حقوق الطبع

كود بلغة HTML

<div id="footer">حقوق الطبع محفوظه</div>

زي ما اتفقنا كل حاجه هنعملها هنسقها في css

كود بلغة HTML

#footer { background-color: #0FF; لون الخلفيه text-align: center;المحاذاه للنص word-spacing: normal;مسافه السطر white-space: normal; display: table; height: 60px;ارتفاع الفوتر width: 800px;عرض الفوتر margin-right: 0px; margin-left: 0px; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: double; border-right-style: double; border-bottom-style: double; border-left-style: double; }

يمكن ان تقللي من التنسيقات التي لا تحتوي ارقام وتزيليها وتري العمل ان لم يتاثر فلا داعي لها يارب يكون الشرح كده سهل وتكونوا استفدتو

ما شاء الله لا قوة إلا بالله
الله يبارك فيك حبيبتى
حقاً شرح أستاذة ربى يرفع قدرك
وينفع بك الإسلام والمسلمين
تستحقى أجمل تقييم
أسعدك البارى فى الدارين حبيبتى ....

بارك الله فيك امي نورتين بمرورك يارب يكون الشرح مفهوم وسهل