بسم الله الرحمن الرحيم
الحمد لله والصلام والسلام على رسول الله صلى الله عليه وسلم
الدرس الثالث :
بدأنا الدرس السابق وعرفنا كيفية الكتابه داخل الصفحه والتعديل على الخط وأضافة صور
طيب اليوم حابب أقول كيف انسق الكلام ده وندخل فى المفيد على طول وهو كيف تعمل جدول للموقع بتاعك وتبدأ بالفعل تبقى مصمم بhtml
ناخد الكود ونشرحه وبعدين ناخد تطبيق عليه
ده الكود
<tr>
<td>Your Data </td>
</tr>
<tr>
<td>Your Data </td>
</tr>
<tr>
<td>Your Data </td>
</tr>
</table>
<table>
طيب أخدنا الكود ونبدأ الان بتعريفه كلمه كلمه
<table>
تعنى جدول وهو ده راس الجدول اللى انت هتشتغل عليه
<tr>
وتعنى Table Row يعنى صف
<td>
تعنى Table Data يعنى عمود
فالكود الأول معناه ان انا عملت جدول به 3 صفوف وعمود واحد
طب تسأل سؤال قولت 3 صفوف وفهمناها عشان فى 3 tr
لكن ... قولت عمود واحد وهو فى 3 td
اقولك ان انا قسمت الصفحه بالعرض ل3 طبقات layers
وقسمتها طوليا وقولت ان داخل كل صف ضع عمود واحد وهتبقى النتيجه فى الاخر ان طلعلنا عود واحد من جميع الصفوف
دلوقتى بعد ما خلصنا الشرح نبدأ بتحليل صفحة الانترنت
صفحة الانترنت تتكون من عدة صفوف نأخد على سبيل المثال Header , Navigation , Main ,Footer
Header : هى رأس الصفحه فمثلا فى موقع الفريق العربى أنظر الى رأس الصفحه المكتوب فيها الفريق العربى للبرمجه هذا هو الهيدر
Navigation : هو اللى بيتكتب فيه مثلا اى شريط كلام بيتحرك marquee او شويه صور بتتحرك او ثابته او بتتغير او عناوين الاقسام مثلا
هنا مثلا فى الموقع اللى مكتوب فيها باالزرق الرئيسية | المنتديات | اعضاء | بحث | نصرة الرسول | رفع الصور | المدونة | محتوياتي | قواعد المشاركة ألخ ...
دى بنسميها nav
Main : دى اللى انت بتكتب فيها المواضيع وبتبدى تظهر لك وكده فمثلا المكان اللى انت بتشاهد منه الموضوع حاليا أسمة Main
Footer : مش معناها قدم ولكن نهاية الصفحه ودى بتكتب فيها Copy Right Reserved ,powered by .....
طيب فى شىء مهم جدا الا وهو الفوتو شوب ولازم تكون تعرف على الاقل كيف تتعامل معاه تقدر تحمل البرنامج من هنا
والبرنامج معاه ملف بيفعله
نحاول بس نستخدم البرنامج مؤقتا فى تغيير حجم الصور بالحجم اللى إحنا محتاجينه
لو ما تعرفش شىء عن ماهو مسار الصوره قبل ما نبدأ فى التطبيق هو انك بتقول للجهاز الصوره فين فلو فى فولدر مع ملفك index.html مثلا جنب الملف ده فى فولدر أسمه images وجواه الصور بتاعتك ومنها صوره اسمها 1.jpg مثلا وانت عايز تحد مسارها تكتب
<img src='images/1.jpg'>
كتبت اسم الفولدر وبعده / وبعدين اسم الصوره
طب لو الفولدر ده بره أرجعله كيف؟؟؟
<img src='../images/1.jpg'>
(..) :معناها أرجع خطوه
وتقدر ترجع على قد ما أنت عايز وتكتب المسار اللى يعجبك
نبدأ ان شاء الله بتصميم أول صفحه بإستخدام html
حمل الصفحه من المرفقات2nd-pro.rar
عايزك تشوف الصفحه بدائيه بحته
هى الصور دى كانت عندى عملت منها الصفحه دى عشان أوريلك كيف أقدر أعمل من أى حاجه صفحه
نبدأ نعرف اللى هو الكود اللى جواها وأنا عملت بيه إيه وأيه الجديد
<head>
<title>
example
</title>
</head>
<body bgcolor='yellow' >
<center>
<table border='0' width='1000' height='1548'>
<tr width='900' height='382'>
<td >
<img src='images/header.jpg'>
</td>
</tr>
<tr width='900' height='52'>
<td>
<img src='images/nav.jpg'>
</td>
</tr>
<tr width='900' height='1067'>
<td>
<img src='images/main.jpg'>
</td>
</tr>
<tr width='1000' height='42'>
<td>
<img src='images/footer.jpg'>
</td>
</tr>
</table>
</body>
</center>
</html>
<html>
ده الكود اللى هتلاقيه عند بعد ماتحملها
طيب انا كتبت فى البدايه الكود العادى لصفحة الهتمل البدائيه وأبتديت أكتب جوه ال body
</table>
<table border='5' width='1000' height='1548'>
border :يعنى الاطار وعطيته"5" بيكسل عشان يورينى أطار الجدول اللى انا بعمله وفى الاخر بعدل على الكود وبخليه "0" عشان مش هنحتاجه تانى
width: يعنى عرض الصفحه اخترت 100 لان الصور انا كنت عملها 1000
height : يعنى الارتفاع واخترت 1548 لأ الصور مجموع أطوالها 1548
فى حاجه ملاحظ ان الصور بعيده عن بعضها
طب إيه الحل؟؟؟ :blush:
بص ياسيدى
<table width='1000' height='1548' cellspacing='0' cellpadinng='0'>
حاول تشوف إيه الفرق
ااااااه انا ضفتcellspacing&&cellpadiding
cellspacing :هى المسافات الفارغه بين الخلايا يعنى الصفوف والاعمده
cellpadding :يعنى المسافات البادئه
هنخليهم "0" لان أحنا عايزين الخلايا ملتصقه مع بعضها البعض عدلها وتعالى نكمل
الكلام ده مش هنحتاجه قدام لاننا هنستخدم ال css
طيب فى ال body
<body bgcolor='yellow'>
bgcolor :تعنى backgound color اللى هى خلفية الصفحه الbody اللى انت شغال عليه ياباشا
عملت 4 من
<tr>
واعطيت كل واحد width & height
بس ده كل الشغل اللى حصل أرجو انك تحاول تعمل زيه وترفعه وان شاء الله الدرس القادم نشرح الروابط والكلام إزاى ننسقه جوه الجدول الدرس القادم إن شاء الله
وصلى اللهم وسلم على سيدنا محمد وعلى اّله وسلم تسليما كثيرا.