بسم الله الرحمن الرحيم :
السلام عليكم ورحمة الله تعالى وبركاتة .
شرح لتصميم صفحة ويب قياسية باستخدام HTML + CSS :
اولاً :حتى نبني هذه الصفحة يجب ان يكون لدينا ملفين
index.html و style.css .
قم بانشاء الملفات السابقة من خلال المفكرة في ويندوز او برنامج محرر النصوص Gedit في لينكس .
ثانياً :سوف نقسم الصفحة الى ثلاث اقسام هي :Header, Content , Footer .
في ملف ال Index.html اكتب الاسطر التالية لبناء الصنادقين السايقة :
كود HTML:
<html>
<link rel="stylesheet" href="style.css" type="text/css"/>
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>
-في الكود السابق قمنا اولا باستدعاء الملف style.css الذي يحتوي على خصائص التاغز الموجودة في الصفحة html .عن طريق link و href .
وايضاً قمنا بانشاء ثلاث صناديق باستخدام التاغ Div وقمنا بتعريف باعطاء كل صندوق اسم له ليميزه عن الصناديق الاخرى .فعندما تنادي على| زيد| فأنت لا تقصد ابدا |عبيد| ولو تشابهت الاسماء . قمنا بذلك عن طريق التاغ id .
الان سنضع في الصندوق الاول header اسم الموقع و اختصار للخدمات التي يقدمها :
كود HTML:
<div id="content">
<h2>موقعي الشخصي الاول </h2>
<p>خدماتي: الدعوة الى ديني , والى حب نبيي محمد صلى الله عليه وسلم </p>
</div>
في الكود السابق قمنا في الكتابة داخل الصندوق header .ستظهر المعلومات التي قمنا بكتابتها في هذا الصندوق فقط ..
عند اعطاء خصائص للتاغ h2 في الملف style سيأثر بذلك ما بداخل هذا التاغ فقط ...
من الممكن ان يكون هناك اكثر من تاغ h2 في الصفحة؟ اذا ستتأثر كلها بالخصائص المكتوبة في الملف style , الا اذا اردت ان تعطيها اسماً خاصاً بها عن طريق التاغ ....... تذكر لوحدك !!
في الصندوق Content سنقوم بانشاء صندوقين .... الاول بأسم menu والثاني باسم con .قم بانشاء الصناديق لوحدك .
من الممكن انشاء ما تريد من الصناديق داخل اي صندوق.
في الصندوق Menu سنعمل قائمة رئيسية بالتاغ ul و li :
كود HTML:
<h2>القائمة الرئيسية</h2>
<ul>
<li>الاسلام</li>
<li>حب الله</li>
<li>حب النبي </li>
<li>حب الدعوة الى الاسلام</li>
</ul>
في الصندوق المسمى con سنكتب معلومات عامه :
كود HTML:
<h2>الاقصى في خطر </h2><br>
<p>بسم الله الرحمن الرحيم :
الاقصى مسرى النبي محمد صلى الله علية وسلم وثالث الحرمين وهو من المساجد التي تشد اليها الرحال ..
ومع هذه الاهميه الكبرى له ... الا انه ما يزال منذ اكثر من 61 عام مدنس من قبل انجس اهل الارض واكثرهم عداوة للمسلمين ..... اليهود .
لكن وعد ربنا نافذ باذنه تعالى فسنقاتلهم ونغلبهم وتعود ارضنا الينا ...
</p>
في الصندوق الثالث footer سنقوم بكتاية معلومات عن حقوق الموقع .
كود HTML:
<div id="footer">
<p>جميع الحقوق محفوظة لكل مسلم ..2009</p>
</div>
انتهينا من الملف index.html. الان قم بكتابة الاكواد السابقة ولا تعتمد ابدا ً على القص واللصق , فلن تتعلم حتى تكتب وتخطئ ثم تكتب وتنجح ..
غداً اكمل بالملف الذي سيظهر ابداعك ...
اقبل اي تصويب فانا بشر اصيب واخطأ...
تذكر : اذكر ربك الذي رباك وجميع العالمين بنعمه ..