الدرس الرابع : كيفية كتابة العنوان ... وبعض الوسوم

من طرف **Admin** الأربعاء فبراير 28, 2018 6:08 pm

الدرس الرابع ...

قبل ما أكتب أي حاجة …

ما تنفذش أي حاجة من الكلام ده عملي إلا لما تخلص قراءة الموضوع كله للآخر خالص ..

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

اتفقنا أن الصفحة اللي هكتبها بلغة الـ html بتنقسم الي جزئين: head و body

وقلنا أن ده مش هيظهر في الموقع بعد منخلص .. يعني دي بس تقسيمة بعملها وأنا بكتب الموقع أو بصممه ..

إنما في الآخر اللي هيظهر بس هو الموجود داخل الـ body نأخد بعض الأوامر اللي هتساعدنا في عمل موقع بسيط المرة دي …

وهنبدأ الأول بالـ head :

أنا قُلت إن الـ head بيتكتب فيه العنوان وكمان شوية حاجات …

هناخد دلوقتي إزاي بنكتب العنوان .. والحاجات التانية دي هنبقي ناخدها آخر حاجة خالص إن شاء الله لأنها ملهاش أهمية دلوقتي خالص ومش هتتفهم إلا في الآخر ..

-الامر اللي بيفهم المتصفح إني بكتب عنوان

الكود:: <title>…………………</title>

وطبعا لازم يكون مكتوب في الـ head مش في الـ body ..

الكود:: <html> <head> <title>بسم الله الرحمن الرحيم</title> </head>

قبل مدخل في أوامر الـ body …

كده لاحظنا من الأمر اللي فات ده طريقة إغلاق الأمر …

بقفل الأمر لما أخلص كل اللي أنا عايز أكتبه فيه … يعني أنا فتحت الـ head وفتحت جواها الـ title ولما خلصت كتابة قفلت الـ title الأول وبعدين قفلت الـ head

وهيه دي طريقة الإغلاق :- آخر حاجة بتتقفل الأول .. وبعدين اللي قبلها وهكذا لغاية منوصل لأول حاجة … كالتالي :

الكود:: <html> <head> <title>………</title> </head> <body>………</body> </html>

كده خدنا من أوامر الـ head إازاي نحط عنوان للصفحة وبقية أوامر الـ head قلنا في الآخر إن شاء الله …

جرب كده تعمل العنوان ده هتلاقيه بقي مكتوب فوق خالص في السطر الأزرق أعلي حاجة في الصفحة أو هيظهر فى التاب فوق على حسب المتصفح المستخدم …

بالنسبة للـ body …

الأول نأخذ الصيغة العامة لأي أمر في ال html

هيزيد عليها حاجة بسيطة عن اللي عرفناه قبل كده …

أي أمر بيتكتب بالصورة دي :

< خصائص الأمر>

ايه التخريف ده ؟
عشان أوضح الكلام ده هناخد الامر مثال …

احنا قلنا أن انا لما بكتب كده عرفته إني هكتب كلام في البودي …

طب لو انا عايز حاجات معينة او خصائص عامة تظهر في البودي كله زي مثلا لون الخلفية او لون الكلام وكده يعني … ؟

دي بكتبهاله جنب البودي داخل علامة ال < >

طبعا مش أي خصائص بمزاجك ولا بتكتبها بالشكل اللي يعجبك …

الخصائص اللي بتكتبها مع كل امر متحددة ومتحدد الطريقة الي هتكتبها بيها …

يبقي احنا أي امر هناخده إن شاء الله هناخد الأول إسم الأمر وبعدين الخصائص بتاعته …

الامر

الكود:: <html>

ملوش خصائص ..

وكذلك الامر

الكود:: <head>

وايضا ال

الكود:: <title>

الامر

الكود:: <body>

خصائصه :

عشان احدد لون الخلفية .. بكتبه بالمنظر ده :

كود HTML:

الكود:: <body bgcolor="black">

قبل ماقول بقية خصائص البودي هوضح من الشكل اللي فات شوية حاجات …

body ده اسم الامر …

bgcolor دي اختصار لـ backgroundcolor ودي واحدة من الخواص بتاعته …

واسمها attribute للأمر ده …

كل أمر له عدة attributes كل واحد منها بينفذ خاصية من الخواص بتاعة الأمر ده ….

وطبعا أنا مش لازم كل ماكتب أمر اكتب كل خواصه …. هكتب منها بس اللي انا عايزه بس …

ولو مش عايز اكتبها خالص عادي ممكن اكتب بس اسم الامر هينفذه من غير أي خصائص

تاني حاجة بص كده علي ال attribute ده انا كتبته ازاي

كود HTML:

الكود:: bgcolor="...."

وده شكل أي attribute في الدنيا ..

بكتب اسمه وبعدين علامة = وبعدين بفتح "…" ودي shift مع حرف الـ ط

وبكتب فيها قيمة او كلمة علي حسب ال attribute ده …..القيمة او الكلمة دي اسمها بشكل عام ال value

يبقي الصيغة العامة لاي امر :

كود HTML:

الكود:: <command name attribute="value" attribute="value" attribute="value">...</comandname>

طبعا مش بالشكل ده … بنكتب اسامي ال attributes وقيمة ال values بس ده الشكل العام

كمثال..

كود HTML:

الكود:: <body bgcolor="red">

نرجع للـ body …

خدنا كده من ال attributes بتاعته : bgcolor

ملحوظة: وانت بتكتب أي attribute متعملش أي مسافة في وسطه يعني مش بالشكل ده :- bg color ××× بهذه الطريقة لن يعمل ..

لا بتبقي كلها علي بعضها كلمة واحدة bgcolor وده في كل ال attributes …

بس بنفصل بين أي attribute واللي بعده بمسافة وكذلك بين الامر وال attribute بمسافة …

كود HTML:

الكود:: <body bgcolor="red">

او أي لون يعجبك يعني …. انا طولت شوية وانا بتكلم عن ال attribute ده عشان بس كنت بوضح فيه بعض المفاهيم …

بس الباقي إن شاء الله هنقول الأمر وبعدين الـ attribute وبعدين الـ value علي طول إن شاء الله

تاني attribute في الـ body :

عشان احدد لون الكلام …بنستخدم text

كود HTML:

الكود:: <body bgcolor="black" text="white">

او أي لون …

كده يطلع لون الخلفية اسود واي كلام هكتبه هيطلع لونه ابيض ..

فاضل كمان اتنين attributes في الـ body … بس بلاش دلوقتي … بعدين إن شاء الله عشان هما مترتبين علي شوية حاجات في الـ body لازم نعرفها الاول ……

كده خلاص المرة دي … يلا اطلع اقرأ الكلام تاني ونفذ بقي …… ومستني النتايج …

ملحوظة: وانت بتنفذ .. لما تجرب أمر منهم وبعدين تعمل rename وتشوف النتيجة …

وبعدين لو عايز تجرب امر تاني هتعمل ايه ؟

مش معقول كل مرة هتطلع تعيد نفس الموضوع من الاول تاني عشان تجربه …

انت جرب اول حاجة وبعد متعملها وتعمل rename وتشوف النتيجة ..

الصفحة اللي ظهرت فيها النتيجة دي……اقف في أي حتة فيها واضغط كليك يمين واختار منها view source

هتلاقي الصفحة دي لسة مفتوحة وفتحلك فوقها صفحة ال notepad الي انت كنت عاملها ….

غير فيها زي ميعجبك واكتب أي أمر جديد … وبعدين اقفلها وقوله save

كل ده والصفحة اللي فيها النتيجة هتلاقيها لسة مفتوحة متقفلتش … بس الكلام فيها هتلاقيه متغيرش خالص ……

اعمل فيها refresh من فوق خالص هتلاقي التعديلات اللي انت عملتها ظهرت فيها ..

وكده بقي كل متحب تزود اي أمر أو تكون كتبت أمر ملقتش نتيجته ظهرت … ده معناه انك كاتب حاجة غلط في الامر ده …

قد يكون غلط في ال spelling مثلا تعمل الطريقة دي وتبص عليه تشوف ايه الغلط فيه وتعدله … وتعمل save

وبعدين refresh وتشوف النتيجة ….

يارب يكون الدرس مش صعب ودمه مش ثقيل

وياريت ياجماعة اللي يلاقي الموضوع ماشي معاه سهل من غير مشاكل يجرب كمان مرتين او تلاتة عشان ايده تاخد علي الكلام ده ويبقي بالنسبة له سهل مفيهوش أي مشاكل …

واللي يلاقي فيه صعوبة يخلي عنده اصرار علي التعلم .. يعدي الكلمة الصعبة ويجرب يعمل الباقي وفي الاخر يبقي يبص عليها .. ولو معرفش يسأل في الكلمة الغامضة بالنسبة له ….

عشان تجرب كل الكلام اللي انا قولته دلوقتي …

كود HTML:

الكود:: <html> <head> <title>بسم الله الرحمن الرحيم</title> </head> <body bgcolor="black" text="white">واكتب هنا الي يعجبك</body> </html>

وكده اللي خدناه المرة دي لو اتفهم كويس هتلاقيه قليل جداً …
______________________________________________

معلومة :-

اول معلموا اللغة دي كانت صيغة الاوامر لازم تتكتب بالصورة اللي انا كاتبها من غير اي خطا

ولو حدث اي خطا كان الامر مش بيتنفذ ..

وده كان بيسبب مشاكل كتير اوي لان اي حد بيعمل موقع كبير .. لو غلط في نصه غلط بسيط ... مش بيلاقي الامر اتنفذ وده يتطلب منه انه يراجع الموضوع كله عشان يلاقي الخطأ ده ..

فهما عشان يحلو المشكلة دي .. كل مبينزلوا نسخة احدث من الانترنت اكسبلورر بيحاولوا يخلوها لو كان الخطا بسيط في الكتابة تفهمه برده وتنفذه ...

يعني حضرتك جرب كده تعمل نفس اللي انت عملته واكتب كله من غير ما تكتب في الاول

الكود:: <html>

هتلاقيه نفذه طبيعي برده ..

بس مينفعش نعتمد علي كده لان احنا لما نعمل موقع عايزين اي حد يفتحه ايا كانت نسخة البراوزر عنده يتشاف بنفس المنظر ... ده اولا..

ثانيا في انواع من البراوزرز مختلفة عن بعضها... يعني ممكن انا اكون مش عندي انترنت اكسبلورر .. شغال برنامج تاني زيه اسمه netscape اكيد التطور فيهم مش زي بعضه ..

يعني ممكن اغلط حاجة ألاقي الانترنت اكسبلورر يفهمها والتاني ميفمهاش .. والموقع اللي بعمله لازم كله يشوفه بنفس المنظر ايا كان البراوزر عنده ...

وده عموما بالنسبة لاي حاجة لو لقيتها عندك بتعدي واستسهلتها .. مش هتلاقي عندك اي مشاكل بس لما تنزلي الموقع علي النت هيبقي في مشاكل كتير اوي بالنسبة للمتصفحين ..

انما لو كل حاجة مكتوبة صح ..ايا كان نوع البراوزر هيفهمها .. يبقي نخلينا في الأضمن أحسن ...

وكمان حاجة بقي خاصة بموضوع الاقواس ده ..

هيه دي من احدي التطورات في النسخة اللي عندك ..لو انت كتبت من غير اقواس في اي اتربيوت هيفهمه ..

بس هتقابلك مشكلة ..

ان في بعض الاتربيوت هناخدها هنضطر نكتب فيها كلام كتير في مسافات بينه ...

وانا قلت قبل كده ان البراوزر اول مبيلاقي مسافة بيعرف ان الاتربيوت خلص وهيدخل علي اللي بعده..

لو حضرتك كاتب كله بين اقواس .. خلاص هيعرف ان كله اتربيوت واحد ..

انما لو كاتبها من غير اقواس مش هيفهم حاجة خالص وهيعتبر كل كلمة منهم اتربيوت بغض النظر عن اذا كان فاهمه ولا لأ .....

يبقي نخلينا في الصح افضل .....

وإلى اللقاء فى الدرس القادم

منتدي عاشق ايجيبت

الدرس الرابع : كيفية كتابة العنوان ... وبعض الوسوم

الدرس الرابع : كيفية كتابة العنوان ... وبعض الوسوم

تواصل معنا

المبيعات

الدعم الفني

التواصل المباشر

صفحة الفيسبوك

موبايل / واتساب