منتدى روضة القرآن - واجب الدرس السادس طريقه مختلفه

منتدى روضة القرآن (http://rawdatelquran.com/vb/index.php)

- تطبيقات الطالبات (http://rawdatelquran.com/vb/forumdisplay.php?f=333)

- - واجب الدرس السادس طريقه مختلفه (http://rawdatelquran.com/vb/showthread.php?t=13971)

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

حياكن الله اخواتي
انا حاولت في عمل الواجب وحبيت اشارككم الطريقه يارب تكون بسيطه
في البدايه الحل خليط ما بين 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;

}

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

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

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

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

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