محمدسمسمة
28-09-09, 04:37 PM
تنويه
قبل ان ابدأ بشرح درس جديد حبيت ان انوه على ان الاستفادة القصوى من الدرس لن تتم الا بعد التطبيق اكثر من مرة ومش لازم تحفظ الاكواد يكفى ان تحتفظ بها فى المفكرة حتى تستطيع الرجوع اليها عشان لو احتجت اى كود متحتس انسخ كل كود وحطه فى المفكرة وتحت منه وظيفة الكود الكل جاهز ....نبدأ على بركة الله
الدرس الاول والثانى من الدورة (http://www.3deeel.com/vb/thread96570.html)
الدرس الثالث ...
قبل ما اكتب أي حاجة…
متنفذش أي حاجة من الكلام ده عملي الا لما تخلص قراءة الموضوع كله للاخر خالص ..
ابقي ارجع اقراه مرة تانية ونفذه عملي وانت بتقراها…وان شاء الله في المرة التانية وبالتفيذ العملي كل حاجة هتبقي سهلة اوي..
اتفقنا ان الصفحة اللي هكتبها بلغة الي html بتنقسم الي جزاين: head و body
وقلنا ان ده مش هيظهر في الموقع بعد منخلص..يعني دي بس تقسيمة بعملها وانا بكتب الموقع او بصممه..انما في الاخر اللي هيظهر بس هو الموجود داخل البودي
ناخد بعض الاوامر اللي هتساعدنا في عمل موقع بسيط المرة دي…
وهنبدا الاول بالهيد:
انا قلت ان الهيد بيتكتب فيه العنوان وكمان شوية حاجات …
هناخد دلوقتي ازاي بنكتب العنوان..والحاجات التانية دي هنبقي ناخدها اخر حاجة خالص ان شاء الله لانها ملهاش اهمية دلوقتي خالص ومش هتتفهم الا في الاخر….
-الامر اللي بيفهم البراوزر (المتصفح لو فاكرين) اني بكتب عنوان
<title>………………….</title> وطبعا لازم يكون مكتوب في الهيد مش في البودي.
<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head> ….قبل مندخل في اوامر البودي……
كده لاحظنا من الامر اللي فات ده طريقة اغلاق الامر…
بقفل الامر لما اخلص كل اللي انا عايز اكتبه فيه…يعني انا فتحت الهيد وفتحت جواها ال title ولما خلصت كتابة قفلت ال title الاول وبعدين قفلت الهيد
وهيه دي طريقة الاغلاق:- اخر حاجة بتتقفل الاول ..وبعدين اللي قبلها وهكذا لغاية منوصل لاول حاجة…كالتالي:
<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head>
كده خدنا من اوامر الهيد ازاي نحط عنوان للصفحة وبقية اوامر الهيد قلنا في الاخر ان شاء الله…
جرب كده تعمل العنوان ده هتلاقيه بقي مكتوب فوق خالص في السطر الازرق اعلي حاجة في الصفحة…
البودي…
الاول ناخد الصيغة العامة لاي امر في ال html
هيزيد عليها حاجة بسيطة عن اللي عرفناه قبل كده…
أي أمر بيتكتب بالصورة دي:
>خصائصه الامر < ايه التخريف ده؟؟؟
عشان اوضح الكلام ده هناخد الامر <body> مثال…
احنا قلنا ان انا لما بكتب <body> كده عرفته أني هكتب كلام في البودي…
طب لو انا عايز حاجات معينة او خصائص عامة تظهر في البودي كله زي مثلا لون الخلفية او لون الكلام وكده ة يعني…؟؟
دي بكتبهاله جنب البودي داخل علامة ال < >
طبعا مش أي خصائص بمزاجك ولا بتكتبها بالشكل اللي يعجبك…
الخصائص اللي بتكتبها مع كل امر متحددة ومتحدد الطريقة الي هتكتبها بيها…
يبقي احنا أي امر هناخده ان شاء الله هناخد الاول اسم الأمر وبعدين الخصائص بتاعته…
الامر <html> ملوش خصائص..
وكذلك الامر <head>
وايضا ال <title>
الامر <body> خصائصه:
عشان احدد لون الخلفية ..بكتب بالمنظر ده:
<body bgcolor="black"> قبل ماقول بقية خصائص البودي هوضح من الشكل اللي فات شوية حاجات…
body ده اسم الامر…
bgcolor دي اختصار لbackgroundcolor ودي واحدة من الخواص بتاعته …
واسمها attribute للامر ده…
كل امر له عدة attributes كل واحد منها بينفذ خاصية من الخواص بتاعة الامر ده….
وطبعا انا مش لازم كل ماكتب امر اكتب كل خواصه….هكتب منها بس اللي انا عايزه…
ولو مش عايز اكتبها خالص عادي ممكن اكتب بس اسم الامر هينفذه من غير أي خصائص
تاني حاجة بص كده علي ال attribute ده انا كتبته ازاي
bgcolor="...." وده شكل أي attribute في الدنيا ..
بكتب اسمه وبعدين علامة = وبعدين بفتح "…" ودي shift مع حرف ال ط
وبكتب فيها قيمة او كلمة علي حسب ال attribute ده …..القيمة او الكلمة دي سمها بشكل عام ال value
يبقي الصيغة العامة لاي امر :
<command name attribute="value" attribute="value" attribute="value">
……………
</comandname> طبعا مش بالشكل ده…بنكتب اسامي ال attributes وقيمة ال values بس ده الشكل العام
…وكمثال..
<body bgcolor="red"> نرجع للبودي…
خدنا كده من ال attributes بتاعته :
bgcolor
ملحوظة: وانت بتكتب أي attribute متعملشي أي مسافة في وسطه يعني مش بالشكل ده :- bg color …
لا بتبقي كلها علي بعضها كلمة واحدة bgcolor وده في كل ال attributes…
بس بنفصل بين أي attribute واللي بعده بمسافة وكذلك بين الامر وال attribute بمسافة…
<body bgcolor="red"> او أي لون يعجبك يعني….انا طولت شوية وانا بتكلم عن ال attribute ده عشان بس كنت بوضح فيه بعض المفاهيم…
..بس الباقي ان شاء الله هنقول الامر وبعدين الattribute وبعدين ال value علطول ان شاء الله
تاني attribute في البودي:
عشان احدد لون الكلام …بنستخدم الاتربيوت text
<body bgcolor="black" text="white"> او أي لون…
كده يطلع لون الخلفية اسود واي كلام هكتبه في البودي هيطلع لونه ابيض..
فاضل كمان اتنين attributes في البودي… بس بلاش دلوقتي…بعدين ان شاء الله عشان هما مترتبين علي شوية حاجاة في البودي لازم نعرفها الاول ……
كده خلاص المرة دي…يلا اطلع اقرا الكلام تاني ونفذ بقي……ومستني النتايج…
ملحوظة: وانت بتنفذ ..لما تجرب امر منهم وبعدين تعمل rename وتشوف النتيجة…
وبعدين لو عايز تجرب امر تاني هتعمل ايه؟؟
مش معقول كل مرة هتطلع تعيد نفس الموضوع من الاول تاني عشان تجربه…
انت جرب اول حاجة وبعد متعملها وتعملrename وتشوف النتيجة ..
الصفحة اللي ظهرت فيها النتيجة دي……اقف في أي حتة فيها واضغط كليك يمين واختار منها
view source
هتلاقي الصفحة دي لسة مفتوحة وفتحلك فوقها صفحة ال notepad الي انت كنت عاملها ….
غير فيها زي ميعجبك واكتب أي امر جديد… وبعدين اقفلها وقولله save
…كل ده والصفحة اللي فيها النتيجة هتلاقيها لسة مفتوحة متقفلتش…بس الكلام فيها هتلاقيه متغيرش خالص……
اعمل فيها refresh من فوق خالص هتلاقي التعديلات اللي انت عملتها ظهرت فيها ..
وكده بقي كل متحب تزود اي أمر أو تكون كتبت أمر ملقتش نتيجته ظهرت… ده معناه انك كاتب حاجة غلط في الامر ده…قد يكون غلط في ال spelling مثلا تعمل الطريقة دي وتبص عليه تشوف ايه الغلط فيه وتعدله …وتعمل save
وبعدين refresh
وتشوف النتيجة….
يارب يكون الدرس مش صعب ودمه مش تقيل
وياريت ياجماعة اللي يلاقي الموضوع مشي معاه سهل من غير مشاكل يجرب كمان مرتين او تلاتة عشان ايده تاخد علي الكلام ده ويبقي بالنسبة له سهل مفيهوش أي مشاكل…
واللي يلاقي فيه صعوبة يخلي عنده اصرار علي التعلم..يعدي الكلمة الصعبة ويجرب يعمل الباقي وفي الاخر يبقي يبص عليها..ولو معرفش يسال في الكلمة الغامضة بالنسبة له….
عشان تجرب كل الكلام اللي انا قلته دلوقتي…
<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head>
<body bgcolor="black" text="white">
واكتب هنا الي يعجبك
</body>
</html>ياريت يكون فى تفاعل مع الدرس واسئلة كتيير
الدرس الرابع
برده كالعادة…اقرا كله الاول من غير متنفذ حاجة
..وبعدين اقبرا مرة تانية وجرب تنفذ وانت بتقرا في المرة دي..
اتفقنا ان صيغة أي امر كالتالي:
<command name attribute="value" attribute="value">وخدنا امر البودي واتنين من الاتربيوتس بتوعه….:textوbgcolor
طب لو انا عايز احط صورة تكون خلفية الموقع؟؟؟
يعني صورة عندي علي الكمبيوتر وعايز احطها خلفية للموقع بتاعي….
الاول نتفق علي حاجة مع بعض…
خلي شغلك كله في فولدر خاص بيه لاسباب هنعرفها دلوقتي ان شاء الله..
يعني قبل متعمل أي موقع او أي صفحة افتح new folder وسميه زي متحب وتدخل جواه وتفتح بقي صفحة ال notepad وتكمل شغلك…عشان ننظم الشغل شوية والسبب هيتعرف حالا ان شاء الله….
لما انا بحب احط صورة في الخلفية بجيب الصورة دي واحطها في نفس الفولدر ده ..يعني جنب صفحة ال ntepad
وبعدين وانا بكتب في صفحة ال notepad بقولله في عندك صورة جنبك حطهالي في الخلفية…
يبقي عرفنا ليه بنعمل الشغل كله في فولدر مخصوص …وايضا لاننا كمان أي صوت او فيديو او فلاش او أي حاجة هنحطها في الموقع هتتحط بنفس الطريقة..هنحطها جنبه في نفس الفولدر ونقولله واحنا بنكتب في حاجة معينة عندك جنبك حطهالي هنا في الموقع….
بالنسبة لصورة الخلفية دي بقي…
ليها اتربيوت بيتحط في البودي..
<body text="black" background="the name of the pictrue">وهنا شوية ملاحطات….
انا مكتبتش ال bgcolor هنا وانا قاصد …واحنا قلنا ان ده طبيعي …مش لازم اكتب كل الاتربيوتس..بكتب بس اللي انا محتاجه..وممكن مكتبش ولا اتربيوت خالص…
والملاحظة التانية…ان انا لو كنت كتبتها هنا ..ايه اللي كان هيحصل…لما اكتبله لون الخلفية واكتبله صورة يحطها في الخفية هو هنا هيعمل ايه؟؟
مش يحط اللون خالص ..هياخد بس الصورة ويحطها ويطنش اللون خالص….وعشان كده انا مكتبتوش وريحت دماغي….
الملاحظة التالتة….ان وضع صورة في الخلفية ممكن يعجبك دلوقتي انما في التطبيق العملي مفيش حد خالص بيعمل موقع ويحط صورة في الخلفية والسبب: ان الصورة بتبقي فيها حتت غامقة وحتت فاتحة وده هيؤدي الي ان بعض الكلام ممكن ميظهرش…يعني لو انا عامل الكلام كله لونه ازرق..والصورة فيها حتة سودة…يبقي الكلام المكتوب في الحتة دي مش هيبان…
الملاحظة الرابعة…… ازاي بكتب اسم الصورة؟؟؟؟
لنفرض ان عندي صورة عايز احطها في الخلفية اسمها مثلا 3deeel.jbg
بكتبه كده
<body background="3deeel.jbg">وطبعا لازم اكون حاطط الصورة جنبها في نفس الفولدر….
وفي طريقة ممكن محطهاش جنبه ومن أي مكان عالجهاز اخليه يحطها بس رخمة وطويلة ..فخلينا في السهل احسن ..وكمان ده يخلي الشغل منظم …
يبقي أي حاجة هنحتاجها هنحطها في نفس الفولدر ..أي صورة ..فيديو..فلاش..او أي حاجة…
فاضل ملاحظة كمنا ابقوا فكروني اقولهالكم بعدين ان شاء الله عشان هيه حلوة ..بس بلاش اتقل عليكوا دلوقتي…
وكده خدنا 3 اتربيوتس للبودي وفاضل واحد هناخده بعدين ان شاء الله…
ندخل بقي في الشغل جوه البودي….
احنا قلنا اننا ممكن احط في الموقع بتاعي صور وصوت وفيديو وفلاشات وكلام (data)
هنمسك واحدة واحدة ونعرف ازاي نحطها وازاي نلعب فيها زي ماحنا عايزين…
بس قبل مناخد دول في شوية اوامر عامة بتتحط في بداية البودي بتسهل علينا كتير….
اول حاجة..المشكلة اللي قابلت حضراتكم كلكوا…وهيه ان الكلام اللي بتكتبوه كله بيظهر ورا بعضه …
نعرف الاول ايه سببها وبعدين نعرف ازاي نحلها…
سببها ان البراوزر وهو بيترجم المكتوب مبيفهمش ان انت عملت enter او سبت مسافة …
يعني انت لو كتبت كلام وضغطت مسافة وقعدت ضاغط عليها شهر وبعدين كتبت كلام تاني ..هيطلعك كله ورا بعضه ومش هيعبرك …
وبرده لو عملت 100 enter هيطلعه كله جنب بعضه ولا هيعبرك..
بمعني تاني هو اكتر حاجة بيفهمها في المسافات والانترات مقدار مسافة واحدة بس ايا كنت المسافات والانترات المكتوبة في السورس اللي حضرتك كاتبه…
طب حل المشكلة دي ايه؟؟؟؟
هيه ليها حلين..واحد رخم اوييييييي وملوش لازمة والتاني سهل اويييييييييييييبس انا هقول الاتنين عشان عشان تبقوا عارفين كل حاجة ولسبب تاني كمان هتعرفوه بعدين ان شاء الله…
الحل الرخم:
باستخدام الامر<br>
الامر ده معناه enter
هو اول مبيشوفه بيفهم ان انت قصدك تقولله اعمل انتر هنا …يعني انا لو حتي كتبت كلام في سطر واحد كله وفي النص كاتب<br> هيكتب كل واحد منهم في سطر….
وعلي فكرة الامر ده مش بيتقفل…ليه؟؟؟فكر شوية كده وانت تفهم بعقلك..احنا قلنا اننا بنقفل الاوامر ليه؟؟عشان نعرفه نهاية تنفيذه للامر ده فين…يعني لو اسم صورة ببدا اكتب الصورة وبعدين اقفل بيعرف ان خلاص اسم الصورة خلص..
انما هنا هو هينزل سطر وخلاص..هقولله يقف علي ايه بقي…يعني مش محتاج يتقفل…وطبعا ممكن اكتبه مرتين يسيب سطرين فاضيين وهكذا ..زي محضرتك تحب….
طيب مشكلة المسافات…
بنكتب كده بالظبط
 بيفهم اننا كده بقولله سيب مسافةولو كتبتها مرتين يعني بقولله سيب مسافتين…
ودي غريبة شوية في انها مبتقفلش وكمان مبنحطهاش بين علامة اكبر من واصغر من …بتتكتب زي ماهي كده وهو بيفهم ان انا قصدي اقولله سيب مسافة…
والعلامة الغريبة اللي فيها دي shif مع رقم 7
وكده المشكلتين دول اتحلوا بس حل رخممممم اويييييييي ومقرف…مش معقول كل ماحب اعمل مسافة هكتب المنظر الغشيم ده وكل ماحب انزل سطر اكتب <br> …
الحل السهل…
الامر <pre>
بكتبه في اول البودي واقفله في اخره …هو بيخلي البراوزر يفهم المسافات والانترات المكتوبة كلها زي محضرتك كاتبها في السورس…بالمنظر ده:
<html>
<head>
……………………
</head>
<body>
<pre>………………
……..
</pre>
</body>
</html>وتريح دماغك وتكتب كل حاجة هتظهر زي مانت كاتبها من غير br ولا زفت…
كده خدنا من الاوامر العامة اللي هنحطها في بداية البودي الامر <pre>
تاني امر بنحتاج نحطه في البداية…
الامر <blockquote>
ده بيخلي منظر الصفحة احلي….عن طريق ان هو بيسيب مسافات في الجنبين…يمين وشمال….يعني متلاقيش الكلام بادئ كده لازق في حرف الصفحة علي اليمين والشمال…بيسيب مسافة صغيرة كده عشان يبقي شكلها كويس….
طبعا انت ممكن تقعد تعملها لوحدك فغي بداية كل سطر تسيب مسافة..بس الامر ده يريحك…واكتب عادي من اول السطر وهو هيسيب مسافة في كل السطور وكلها اد بعضها يبقي شكلها احلي..
وطبعا ممكن تكتبه مرتين لو عايز تضاعف المسافة المتروكة….وبرده بيتقفل في اخر الصفحة….
<html>
<head>
……………………
</head>
<body>
<pre>
<blockquote>
………………
……..
</blockquote>
</pre>
</body>
</html>دول كانوا امرين بنكتبهم في الاول يسهلولنا الشغل جوه …
نبدا نتكلم عن الكلام اللي هنكتبه في الصفحة…
وازاي نلعب فيه براحتنا…
وده ان شاء الله هحطه بالليل لاني عارف ان الدرس ده علي اد مفيه كلام كتير …بس سهل اوي والعملي اللي فيه قليل جداااااااااااااااا……بس اعذروني خد مني وقت كتير اوي تحضير وكتابة …فان شاء الله هكمل بالليل ان شاء الله…
وعلي ماجهزه…عايز من حضراتكم حاجة….
انتوا شايفين كده كل درس بيبقي طوييييييل والخلاصة بتاعته حاجات قليلة اوي …امرين او تلاتة….
وده عشان انا ببقي محتاج اشرحلكم شوية حاجات قبل ماكتب الاوامر دي…
فبما ان حضراتكم خلاص فهمتوا الشرح ..يبقي كل اللي انتوا محتاجينه الاوامر والباقي خلاص اتفهم…
يبقي كل واحد يجيب ورقة ويكتب فيها الاوامر بس …بالطريقة اللي تريحه…
عشان لما تيجي تعمل موقع بعد كده تفتح الورقة دي قدامك.وتشوف اللي انت عايز تعمله ..تشوف ايه الامر اللي بينفذه وتنقله علطول….يعني هتنقل فيها شوية الاوامر المكتوبة عندك وكل درس بعد ماكتبه وحضرتك تفهمه كويس ان شاء الله تبقي تنقل منه شوية الاوامر الموجودة فيه….
وربنا يوفقكم
وكده اللي خدناه المرة دي لو اتفهم كويس هتلاقيه سهل جدااااااااااااااا…
مستنى التفاعل والاسئلة ويار يت كل واحد يطبق الشرح واللى يقف قصاده حاجة على طول يسال ميكسفش
قبل ان ابدأ بشرح درس جديد حبيت ان انوه على ان الاستفادة القصوى من الدرس لن تتم الا بعد التطبيق اكثر من مرة ومش لازم تحفظ الاكواد يكفى ان تحتفظ بها فى المفكرة حتى تستطيع الرجوع اليها عشان لو احتجت اى كود متحتس انسخ كل كود وحطه فى المفكرة وتحت منه وظيفة الكود الكل جاهز ....نبدأ على بركة الله
الدرس الاول والثانى من الدورة (http://www.3deeel.com/vb/thread96570.html)
الدرس الثالث ...
قبل ما اكتب أي حاجة…
متنفذش أي حاجة من الكلام ده عملي الا لما تخلص قراءة الموضوع كله للاخر خالص ..
ابقي ارجع اقراه مرة تانية ونفذه عملي وانت بتقراها…وان شاء الله في المرة التانية وبالتفيذ العملي كل حاجة هتبقي سهلة اوي..
اتفقنا ان الصفحة اللي هكتبها بلغة الي html بتنقسم الي جزاين: head و body
وقلنا ان ده مش هيظهر في الموقع بعد منخلص..يعني دي بس تقسيمة بعملها وانا بكتب الموقع او بصممه..انما في الاخر اللي هيظهر بس هو الموجود داخل البودي
ناخد بعض الاوامر اللي هتساعدنا في عمل موقع بسيط المرة دي…
وهنبدا الاول بالهيد:
انا قلت ان الهيد بيتكتب فيه العنوان وكمان شوية حاجات …
هناخد دلوقتي ازاي بنكتب العنوان..والحاجات التانية دي هنبقي ناخدها اخر حاجة خالص ان شاء الله لانها ملهاش اهمية دلوقتي خالص ومش هتتفهم الا في الاخر….
-الامر اللي بيفهم البراوزر (المتصفح لو فاكرين) اني بكتب عنوان
<title>………………….</title> وطبعا لازم يكون مكتوب في الهيد مش في البودي.
<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head> ….قبل مندخل في اوامر البودي……
كده لاحظنا من الامر اللي فات ده طريقة اغلاق الامر…
بقفل الامر لما اخلص كل اللي انا عايز اكتبه فيه…يعني انا فتحت الهيد وفتحت جواها ال title ولما خلصت كتابة قفلت ال title الاول وبعدين قفلت الهيد
وهيه دي طريقة الاغلاق:- اخر حاجة بتتقفل الاول ..وبعدين اللي قبلها وهكذا لغاية منوصل لاول حاجة…كالتالي:
<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head>
كده خدنا من اوامر الهيد ازاي نحط عنوان للصفحة وبقية اوامر الهيد قلنا في الاخر ان شاء الله…
جرب كده تعمل العنوان ده هتلاقيه بقي مكتوب فوق خالص في السطر الازرق اعلي حاجة في الصفحة…
البودي…
الاول ناخد الصيغة العامة لاي امر في ال html
هيزيد عليها حاجة بسيطة عن اللي عرفناه قبل كده…
أي أمر بيتكتب بالصورة دي:
>خصائصه الامر < ايه التخريف ده؟؟؟
عشان اوضح الكلام ده هناخد الامر <body> مثال…
احنا قلنا ان انا لما بكتب <body> كده عرفته أني هكتب كلام في البودي…
طب لو انا عايز حاجات معينة او خصائص عامة تظهر في البودي كله زي مثلا لون الخلفية او لون الكلام وكده ة يعني…؟؟
دي بكتبهاله جنب البودي داخل علامة ال < >
طبعا مش أي خصائص بمزاجك ولا بتكتبها بالشكل اللي يعجبك…
الخصائص اللي بتكتبها مع كل امر متحددة ومتحدد الطريقة الي هتكتبها بيها…
يبقي احنا أي امر هناخده ان شاء الله هناخد الاول اسم الأمر وبعدين الخصائص بتاعته…
الامر <html> ملوش خصائص..
وكذلك الامر <head>
وايضا ال <title>
الامر <body> خصائصه:
عشان احدد لون الخلفية ..بكتب بالمنظر ده:
<body bgcolor="black"> قبل ماقول بقية خصائص البودي هوضح من الشكل اللي فات شوية حاجات…
body ده اسم الامر…
bgcolor دي اختصار لbackgroundcolor ودي واحدة من الخواص بتاعته …
واسمها attribute للامر ده…
كل امر له عدة attributes كل واحد منها بينفذ خاصية من الخواص بتاعة الامر ده….
وطبعا انا مش لازم كل ماكتب امر اكتب كل خواصه….هكتب منها بس اللي انا عايزه…
ولو مش عايز اكتبها خالص عادي ممكن اكتب بس اسم الامر هينفذه من غير أي خصائص
تاني حاجة بص كده علي ال attribute ده انا كتبته ازاي
bgcolor="...." وده شكل أي attribute في الدنيا ..
بكتب اسمه وبعدين علامة = وبعدين بفتح "…" ودي shift مع حرف ال ط
وبكتب فيها قيمة او كلمة علي حسب ال attribute ده …..القيمة او الكلمة دي سمها بشكل عام ال value
يبقي الصيغة العامة لاي امر :
<command name attribute="value" attribute="value" attribute="value">
……………
</comandname> طبعا مش بالشكل ده…بنكتب اسامي ال attributes وقيمة ال values بس ده الشكل العام
…وكمثال..
<body bgcolor="red"> نرجع للبودي…
خدنا كده من ال attributes بتاعته :
bgcolor
ملحوظة: وانت بتكتب أي attribute متعملشي أي مسافة في وسطه يعني مش بالشكل ده :- bg color …
لا بتبقي كلها علي بعضها كلمة واحدة bgcolor وده في كل ال attributes…
بس بنفصل بين أي attribute واللي بعده بمسافة وكذلك بين الامر وال attribute بمسافة…
<body bgcolor="red"> او أي لون يعجبك يعني….انا طولت شوية وانا بتكلم عن ال attribute ده عشان بس كنت بوضح فيه بعض المفاهيم…
..بس الباقي ان شاء الله هنقول الامر وبعدين الattribute وبعدين ال value علطول ان شاء الله
تاني attribute في البودي:
عشان احدد لون الكلام …بنستخدم الاتربيوت text
<body bgcolor="black" text="white"> او أي لون…
كده يطلع لون الخلفية اسود واي كلام هكتبه في البودي هيطلع لونه ابيض..
فاضل كمان اتنين attributes في البودي… بس بلاش دلوقتي…بعدين ان شاء الله عشان هما مترتبين علي شوية حاجاة في البودي لازم نعرفها الاول ……
كده خلاص المرة دي…يلا اطلع اقرا الكلام تاني ونفذ بقي……ومستني النتايج…
ملحوظة: وانت بتنفذ ..لما تجرب امر منهم وبعدين تعمل rename وتشوف النتيجة…
وبعدين لو عايز تجرب امر تاني هتعمل ايه؟؟
مش معقول كل مرة هتطلع تعيد نفس الموضوع من الاول تاني عشان تجربه…
انت جرب اول حاجة وبعد متعملها وتعملrename وتشوف النتيجة ..
الصفحة اللي ظهرت فيها النتيجة دي……اقف في أي حتة فيها واضغط كليك يمين واختار منها
view source
هتلاقي الصفحة دي لسة مفتوحة وفتحلك فوقها صفحة ال notepad الي انت كنت عاملها ….
غير فيها زي ميعجبك واكتب أي امر جديد… وبعدين اقفلها وقولله save
…كل ده والصفحة اللي فيها النتيجة هتلاقيها لسة مفتوحة متقفلتش…بس الكلام فيها هتلاقيه متغيرش خالص……
اعمل فيها refresh من فوق خالص هتلاقي التعديلات اللي انت عملتها ظهرت فيها ..
وكده بقي كل متحب تزود اي أمر أو تكون كتبت أمر ملقتش نتيجته ظهرت… ده معناه انك كاتب حاجة غلط في الامر ده…قد يكون غلط في ال spelling مثلا تعمل الطريقة دي وتبص عليه تشوف ايه الغلط فيه وتعدله …وتعمل save
وبعدين refresh
وتشوف النتيجة….
يارب يكون الدرس مش صعب ودمه مش تقيل
وياريت ياجماعة اللي يلاقي الموضوع مشي معاه سهل من غير مشاكل يجرب كمان مرتين او تلاتة عشان ايده تاخد علي الكلام ده ويبقي بالنسبة له سهل مفيهوش أي مشاكل…
واللي يلاقي فيه صعوبة يخلي عنده اصرار علي التعلم..يعدي الكلمة الصعبة ويجرب يعمل الباقي وفي الاخر يبقي يبص عليها..ولو معرفش يسال في الكلمة الغامضة بالنسبة له….
عشان تجرب كل الكلام اللي انا قلته دلوقتي…
<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head>
<body bgcolor="black" text="white">
واكتب هنا الي يعجبك
</body>
</html>ياريت يكون فى تفاعل مع الدرس واسئلة كتيير
الدرس الرابع
برده كالعادة…اقرا كله الاول من غير متنفذ حاجة
..وبعدين اقبرا مرة تانية وجرب تنفذ وانت بتقرا في المرة دي..
اتفقنا ان صيغة أي امر كالتالي:
<command name attribute="value" attribute="value">وخدنا امر البودي واتنين من الاتربيوتس بتوعه….:textوbgcolor
طب لو انا عايز احط صورة تكون خلفية الموقع؟؟؟
يعني صورة عندي علي الكمبيوتر وعايز احطها خلفية للموقع بتاعي….
الاول نتفق علي حاجة مع بعض…
خلي شغلك كله في فولدر خاص بيه لاسباب هنعرفها دلوقتي ان شاء الله..
يعني قبل متعمل أي موقع او أي صفحة افتح new folder وسميه زي متحب وتدخل جواه وتفتح بقي صفحة ال notepad وتكمل شغلك…عشان ننظم الشغل شوية والسبب هيتعرف حالا ان شاء الله….
لما انا بحب احط صورة في الخلفية بجيب الصورة دي واحطها في نفس الفولدر ده ..يعني جنب صفحة ال ntepad
وبعدين وانا بكتب في صفحة ال notepad بقولله في عندك صورة جنبك حطهالي في الخلفية…
يبقي عرفنا ليه بنعمل الشغل كله في فولدر مخصوص …وايضا لاننا كمان أي صوت او فيديو او فلاش او أي حاجة هنحطها في الموقع هتتحط بنفس الطريقة..هنحطها جنبه في نفس الفولدر ونقولله واحنا بنكتب في حاجة معينة عندك جنبك حطهالي هنا في الموقع….
بالنسبة لصورة الخلفية دي بقي…
ليها اتربيوت بيتحط في البودي..
<body text="black" background="the name of the pictrue">وهنا شوية ملاحطات….
انا مكتبتش ال bgcolor هنا وانا قاصد …واحنا قلنا ان ده طبيعي …مش لازم اكتب كل الاتربيوتس..بكتب بس اللي انا محتاجه..وممكن مكتبش ولا اتربيوت خالص…
والملاحظة التانية…ان انا لو كنت كتبتها هنا ..ايه اللي كان هيحصل…لما اكتبله لون الخلفية واكتبله صورة يحطها في الخفية هو هنا هيعمل ايه؟؟
مش يحط اللون خالص ..هياخد بس الصورة ويحطها ويطنش اللون خالص….وعشان كده انا مكتبتوش وريحت دماغي….
الملاحظة التالتة….ان وضع صورة في الخلفية ممكن يعجبك دلوقتي انما في التطبيق العملي مفيش حد خالص بيعمل موقع ويحط صورة في الخلفية والسبب: ان الصورة بتبقي فيها حتت غامقة وحتت فاتحة وده هيؤدي الي ان بعض الكلام ممكن ميظهرش…يعني لو انا عامل الكلام كله لونه ازرق..والصورة فيها حتة سودة…يبقي الكلام المكتوب في الحتة دي مش هيبان…
الملاحظة الرابعة…… ازاي بكتب اسم الصورة؟؟؟؟
لنفرض ان عندي صورة عايز احطها في الخلفية اسمها مثلا 3deeel.jbg
بكتبه كده
<body background="3deeel.jbg">وطبعا لازم اكون حاطط الصورة جنبها في نفس الفولدر….
وفي طريقة ممكن محطهاش جنبه ومن أي مكان عالجهاز اخليه يحطها بس رخمة وطويلة ..فخلينا في السهل احسن ..وكمان ده يخلي الشغل منظم …
يبقي أي حاجة هنحتاجها هنحطها في نفس الفولدر ..أي صورة ..فيديو..فلاش..او أي حاجة…
فاضل ملاحظة كمنا ابقوا فكروني اقولهالكم بعدين ان شاء الله عشان هيه حلوة ..بس بلاش اتقل عليكوا دلوقتي…
وكده خدنا 3 اتربيوتس للبودي وفاضل واحد هناخده بعدين ان شاء الله…
ندخل بقي في الشغل جوه البودي….
احنا قلنا اننا ممكن احط في الموقع بتاعي صور وصوت وفيديو وفلاشات وكلام (data)
هنمسك واحدة واحدة ونعرف ازاي نحطها وازاي نلعب فيها زي ماحنا عايزين…
بس قبل مناخد دول في شوية اوامر عامة بتتحط في بداية البودي بتسهل علينا كتير….
اول حاجة..المشكلة اللي قابلت حضراتكم كلكوا…وهيه ان الكلام اللي بتكتبوه كله بيظهر ورا بعضه …
نعرف الاول ايه سببها وبعدين نعرف ازاي نحلها…
سببها ان البراوزر وهو بيترجم المكتوب مبيفهمش ان انت عملت enter او سبت مسافة …
يعني انت لو كتبت كلام وضغطت مسافة وقعدت ضاغط عليها شهر وبعدين كتبت كلام تاني ..هيطلعك كله ورا بعضه ومش هيعبرك …
وبرده لو عملت 100 enter هيطلعه كله جنب بعضه ولا هيعبرك..
بمعني تاني هو اكتر حاجة بيفهمها في المسافات والانترات مقدار مسافة واحدة بس ايا كنت المسافات والانترات المكتوبة في السورس اللي حضرتك كاتبه…
طب حل المشكلة دي ايه؟؟؟؟
هيه ليها حلين..واحد رخم اوييييييي وملوش لازمة والتاني سهل اويييييييييييييبس انا هقول الاتنين عشان عشان تبقوا عارفين كل حاجة ولسبب تاني كمان هتعرفوه بعدين ان شاء الله…
الحل الرخم:
باستخدام الامر<br>
الامر ده معناه enter
هو اول مبيشوفه بيفهم ان انت قصدك تقولله اعمل انتر هنا …يعني انا لو حتي كتبت كلام في سطر واحد كله وفي النص كاتب<br> هيكتب كل واحد منهم في سطر….
وعلي فكرة الامر ده مش بيتقفل…ليه؟؟؟فكر شوية كده وانت تفهم بعقلك..احنا قلنا اننا بنقفل الاوامر ليه؟؟عشان نعرفه نهاية تنفيذه للامر ده فين…يعني لو اسم صورة ببدا اكتب الصورة وبعدين اقفل بيعرف ان خلاص اسم الصورة خلص..
انما هنا هو هينزل سطر وخلاص..هقولله يقف علي ايه بقي…يعني مش محتاج يتقفل…وطبعا ممكن اكتبه مرتين يسيب سطرين فاضيين وهكذا ..زي محضرتك تحب….
طيب مشكلة المسافات…
بنكتب كده بالظبط
 بيفهم اننا كده بقولله سيب مسافةولو كتبتها مرتين يعني بقولله سيب مسافتين…
ودي غريبة شوية في انها مبتقفلش وكمان مبنحطهاش بين علامة اكبر من واصغر من …بتتكتب زي ماهي كده وهو بيفهم ان انا قصدي اقولله سيب مسافة…
والعلامة الغريبة اللي فيها دي shif مع رقم 7
وكده المشكلتين دول اتحلوا بس حل رخممممم اويييييييي ومقرف…مش معقول كل ماحب اعمل مسافة هكتب المنظر الغشيم ده وكل ماحب انزل سطر اكتب <br> …
الحل السهل…
الامر <pre>
بكتبه في اول البودي واقفله في اخره …هو بيخلي البراوزر يفهم المسافات والانترات المكتوبة كلها زي محضرتك كاتبها في السورس…بالمنظر ده:
<html>
<head>
……………………
</head>
<body>
<pre>………………
……..
</pre>
</body>
</html>وتريح دماغك وتكتب كل حاجة هتظهر زي مانت كاتبها من غير br ولا زفت…
كده خدنا من الاوامر العامة اللي هنحطها في بداية البودي الامر <pre>
تاني امر بنحتاج نحطه في البداية…
الامر <blockquote>
ده بيخلي منظر الصفحة احلي….عن طريق ان هو بيسيب مسافات في الجنبين…يمين وشمال….يعني متلاقيش الكلام بادئ كده لازق في حرف الصفحة علي اليمين والشمال…بيسيب مسافة صغيرة كده عشان يبقي شكلها كويس….
طبعا انت ممكن تقعد تعملها لوحدك فغي بداية كل سطر تسيب مسافة..بس الامر ده يريحك…واكتب عادي من اول السطر وهو هيسيب مسافة في كل السطور وكلها اد بعضها يبقي شكلها احلي..
وطبعا ممكن تكتبه مرتين لو عايز تضاعف المسافة المتروكة….وبرده بيتقفل في اخر الصفحة….
<html>
<head>
……………………
</head>
<body>
<pre>
<blockquote>
………………
……..
</blockquote>
</pre>
</body>
</html>دول كانوا امرين بنكتبهم في الاول يسهلولنا الشغل جوه …
نبدا نتكلم عن الكلام اللي هنكتبه في الصفحة…
وازاي نلعب فيه براحتنا…
وده ان شاء الله هحطه بالليل لاني عارف ان الدرس ده علي اد مفيه كلام كتير …بس سهل اوي والعملي اللي فيه قليل جداااااااااااااااا……بس اعذروني خد مني وقت كتير اوي تحضير وكتابة …فان شاء الله هكمل بالليل ان شاء الله…
وعلي ماجهزه…عايز من حضراتكم حاجة….
انتوا شايفين كده كل درس بيبقي طوييييييل والخلاصة بتاعته حاجات قليلة اوي …امرين او تلاتة….
وده عشان انا ببقي محتاج اشرحلكم شوية حاجات قبل ماكتب الاوامر دي…
فبما ان حضراتكم خلاص فهمتوا الشرح ..يبقي كل اللي انتوا محتاجينه الاوامر والباقي خلاص اتفهم…
يبقي كل واحد يجيب ورقة ويكتب فيها الاوامر بس …بالطريقة اللي تريحه…
عشان لما تيجي تعمل موقع بعد كده تفتح الورقة دي قدامك.وتشوف اللي انت عايز تعمله ..تشوف ايه الامر اللي بينفذه وتنقله علطول….يعني هتنقل فيها شوية الاوامر المكتوبة عندك وكل درس بعد ماكتبه وحضرتك تفهمه كويس ان شاء الله تبقي تنقل منه شوية الاوامر الموجودة فيه….
وربنا يوفقكم
وكده اللي خدناه المرة دي لو اتفهم كويس هتلاقيه سهل جدااااااااااااااا…
مستنى التفاعل والاسئلة ويار يت كل واحد يطبق الشرح واللى يقف قصاده حاجة على طول يسال ميكسفش