تعلم تصميم المواقع ... من الصفر ..

قبل ان نبدا في الحديث عن تصميم المواقع هناك بعض المعلومات والمفاهيم التي لابد ان نفهمها جيدا ..

يجب ان يعلم كل متعمق في هذا الموضوع اولا ما معني كلمة server وكلمة browser...
دعوني ابدا من الوراء قليلا للتوضيح
ما هو مفهوم شبكة الانترنت بالمعني العلمي؟؟؟

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

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

كل هذه المشاكل كان لابد لها من حل....
من هنا ظهرت كلمة ال server كحل لكل هذه المشاكل....فما معناها؟؟
المعني الحرفي لكلمة server يعني خادم...."خادم الانترنت"
فهو عبارة عن اجهزة بامكانيات عالية تحتمل عدد كبير جدا من المتصفحين في نفس الوقت وتتحمل ان تظل تعمل دائما بلا انقطاع...
فانا لو عندي معلومات اقوم بوضعها علي هذا السيرفر بدلا من تركها علي جهازي فتحل كل المشاكل لسابق ذكرها بالاضافة الي ان هذا السيرفر متصل بكل الاجهزة في منظقته فتصبح كل هذه الاجهزة متصلة ببعضها البعض عن طريقة...
ففي كل منطقة يوجد سيرفرات خاصة بها تربط اجهزتها ببعض ويكون شبكة بينها .....ولكن ماذا اذا اردت تحميل معلومات من علي سيرفر اخر؟؟
ولذلك فان كل السيرفرات متصلة ببعضها البعض في شبكة كبيرة تعرف بشبكة الشبكات وهذا هو الانترنت
"شبكة الشبكات"
..
كيف نطلب معلومات من السيرفر او نستقبل منه معلومات؟؟؟
يوجد بكل جهاز برنامج متصفح للانترنت "browser” اشهرها وافضلها الانترنت اكسبلورر...فهو عبارة عن برنامج مجهز لارسال واستقبال بيانات من السيرفر.....

الدرس الثاني


ما هي لغة ال HTML ؟؟ولماذا نتعلمها؟؟
----------

بسم الله الرحمن الرحيم...

عشان اوضحلكم معني لغة ال HTML اسمحولي اقوللكم مثال بسيط ..

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

نفس الحال بالنسبة لل BROWSER..
اللي هو صفحة الانترنت اكسبلورر اللي فاتحة قدامك....هي في البداية بتقتح بيضة"فاضية"...
الكلام والمعلومات اللي فيها بتظهر ازاي؟؟؟
ذكرنا قبل كده ان السيرفر بيقوم بارسال المعلومات إلي جهازك فيستقبلها البراوزر...
فبما ان ال BROWSER هو اللي بيستقبل المعلومات يبقي السيرفر لازم يبعتله المعلومات دي باللغة اللي هو بيفهما عشان يظهلرها قدامنا...لو بعتله نفس الكلام باي اسلوب تاني مش هيعبره
فالBrowser زيه زي اي انسان ليه لغات بيفهمها ولو قلتله اي حاجة باللغات دي بينفذها فورا....بس هو احسن من الانسان في ان هو بيفهم لغات كتير...وكمان لو قلتله اي حاجة وفهمها بينفذها علطول

اول وابسط لغة من اللغات اللي بيفهمها البراوزر هي لغة ال HTML ...
وهناك لغات اخري كثيرة اكثر تطور من ال HTML بس الاساس هو ال HTML زي الإنجليزي بالنسبة للشخص الأمريكي...
ولا يوجد اي موقع يخلو من لغة ال HTML ..بالرغم من انها اقل اللغات تطورا...
وفي برامج حاليا بتغني عن لغة ال HTML وبتقوم بكل وظائفها بصورة اسهل ومنها " FRONT PAGE ,DREAMWEAVER"....ولكن...
اللي ناوي ياخد HTML ويقف علي كده يبقي احسنله يدرس البرامج دي لانها اسهل منه...انما اللي عايز يحترف ويبقي فاهم هو بيعمل ايه اولا...وكمان عايز يتقدم ويدرس لغات تانية بعد كده ويكمل في الطريق يبقي لازم يعرف HTML الاول......

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

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

الاول نعرف ايه معني الكلمة دي وليه سموها كده..
مش معقول اول ماخترعوا اللغة دي قالوا نسميها html؟؟؟ …….أكيد في سبب
HTML اختصار لهذه الجملة:
hyper text markup Language
يعني لغة تقدر بيها تحط علي الانترنت texts بكميات كبيرة (hyper) بس الاسم ده كان لانها في بداية ماخترعوها كانت بس لوضع texts مش اكتر ..انما دلوقتي تطورت كتير وممكن نحط texts وصور وفيديو واوديو وفلاشات وكل حاجة…
بس لما تطورت اللغة الاسم متغيرش فضل زي ماهو……

نبدأ بقي نعرف ازاي نعرف البراوزر المعلومات باللغة دي …
إحنا قلنا ان دي لغة البراوزر وده يترتب عليه إن أنا لو جيت علي أي فايل عندي علي الجهاز وعملت له rename وغيرت امتداده خليته .html يتحول البرنامج اللبيشغله الي الانترنت اكسبلورر…بمعني:
انا عندي فايل اسمه مثلا : mostafa.txt وعليه كلام مكتوب"بأي محرر كتابة زي ال notepad"
لو انا قلتله rename وخليت اسمه mostafa.html هتلاقي شكله اتحول الي صفحة انترنت اكسبلورر واللي هيفتحه هو الانترنت اكسبلورر..
لان انا كده قلتله ان الكلام اللي عندك هنا مكتوب بلغة HTML فالجهاز هيحوله تلقائيا الي البرنامج اللي بيفهم اللغة دي وهو يتعامل معاه..اذا لقاه فعلا باللغة دي هيفهمه ..اذا لقاه مش بيها مش هيفهم فيه حاجة …

اقصد اقول من الكلام اللي فات ان اللي احنا بنعمله عشان نكتب صفحة بالاتش تي ام ال بنفتح صفحة أي محرر كتابي زي النوتباد مثلا ونكتب فيها الكلام اللي احنا عاوزينه باللغة اللي هنتعلمها وبعدين نحول امتداده الي .html هيروح البراوزر فاتحه وقاريه….
ان شاء الله الكلام ده هيوضح اكتر بعدين…

الجملة الأخيرة دي ليا عليها تعليقين:

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

التعليق التاني انهم عملولنا حاجة بسيطة للتلخيص ..بدل متخلي الامتداد .html ممكن تخليه .htm بس من غير حرف ال" l " هتقول ايه بقي... عالم فاضية ..ال يعني الحرف ده هو اللي فارق معاهم اوي… :smile:
خلاصة كل اللي فات..
اقف في أي حتة فاضية في الشاشة واضغط كليك يمين..
واختار new واختارمنها text doccument …
هيفتحلك صفحة تكتب فيها الموضوع بتاع سيادتك..
ازاي بقي بتكبتب الموضوع بتاع سيادتك.؟؟؟؟
ناخد دلوقتي نبذة بسيطة عن الشكل لعام اللي بتكون عليه اللغة دي…
اللغة دي عبارة عن عدة اوامر كل امر بينفذ حاجة…اوعي تقلق وتقول هو انا هقعد احفظ اوامر بقي..انت مش هتحفظ حاجة خالص..انت بس هتكتب الاوامر دي عندك في ورقة وكل متحب تعمل حاجة تبص في الورقة دي تشوف ايه الامر اللي بيعملها وتكتبه…
يعني مثلا لو انا بعمل موقع بسيط اوي فيه شوية كلام وصورة جنبه بس كده…
هقولله الامر اللي بيفهمه اني هحط صورة…وبعدين احطها ..
وعشان احط الكلام مش محتاج أي امر… يعني هو بيفهم أي حاجة مكتوبة علي انها كلام مالم يذكر غير ذلك..
يعني هو بيمشي يترجم الكلام المكتوب وينقله في صفحة الموقع زي ماهو مكتوب بالظبط كلام عادي…
لو لقي في طريقه امر بيقولله اعمل حاجة معينة خلاص بيبطل ينقل الكلام المكتوب ويدا ينفذ اللي الأمر ده …

طيب دلوقتي احنا هنكتبله الكلام وهنكتبله الاوامر…ازاي هيعرف ان ده كلام عادي عايزه يظهر ون ده امر بحطه لتنفيذ شئ معين؟؟؟
للتفريق بين الكلام والاوامر بنحط الامر بين علامة اكبر من واصغر من <…….>
هو اول ميشوف العلامتين دول بيعرف ان المكتوب في وسطهم امر هينفذه ….
..في حاجة عايز اقولها ولو موضحتش اوي دلوقتي مش مشكلة…إن شاء الله لما نعرف أوامر هتوضح اكتر إن شاء الله…
انا لما اقولله امر واكتبه مبين < > مثلا بقولله يغير لون الكلام ..يبقي لازم اقولله فين اخره…منا لو سبتهاله كده هيغير لون الكلام ف الصفحة كله لان انا مقلتلوش وقف ...
بقولله كده ازاي؟؟؟
بكتب نفس الامر بس بالمنظر ده

كود</ >

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

طيب المنظر العام للصفحة؟؟؟
احنا عرفنا ان في لغات كتير بيفهمها البراوزر يبقي اول حاجة لازم اعرفهاله ان انا بكتب بلغة ال HTML ..يبقي في عندنا أمر بيتكتب في اول الصفحة بيعرفه ان انا بكتب HTML
الامر ده صيغته :
<html>
طيب مش احنا قلنا أي امر لازم يتقفل بعد منخلص كل اللي هنعمله بيه؟؟؟؟
يبقي الامر ده بيتقفل فين؟؟؟؟؟؟
بيتقفل اخر حاجة خالص في الصفحة بعد منكتب كل للي احنا عاوزينه في النص بالمنظر ده:

كود<html>
…………….
…………….
</html>

طيب بعد معرفته اني هكتب HTML نعرف بقي شكل صفحة ال HTML عموما دلوقتي….

بتتقسم صفحة ال HTML الي جزاين
head و body
ال head بكتب فيه شوية كلام مش هيظهر في الصفحة زي عنوان الصفحة مثلا وشوية حاجات تانية كده هنعرفها في وقتها ان شاء الله
ال body بكتب فيه الكلام اللي هيظهر في الصفحة …فلازم اعرفها انا بكتب head ولا body ازاي؟؟
برده في امر بيفهمه الكلام ده…وكل واحد منهم امره بنفس اسمه….
يعني لما احب اعرفه اني هكتب head الامر شكله كده:

كود<head>…………………</head>

لما احب اعرفه اني هكتب body الامر شكله كده

كود<body>…………….</body>

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

يبقي الملخص الشكل العام:

هتفتح صفحة notepad
وتكتب فيها


كود<html>
<head>……………………
.........
</head>
<body>………………
…………
</body>
</html>

ان شاء الله المرة الجاية هناخد الاوامر اللي موجودة بين الكلام ده….
عشان تجربوا الكلام ده اكتبوا نفس المنظر العام الللي انا كاتبه واكتبوا مبين ال body وإغلاقها أي كلام يعجبكم "بياناتك مثلا"
وبعدين اقفل الصفحة وقولله save واطلع قولله rename وغير امتدادها خليها .html وبعدين افتحها…
هتلاقي الكلام اللي أنت كتبته ظهر والأوامر طبعا مش ظاهرة..هو بس فهم منها هو هيعمل ايه…
وعلي فكرة هتقابلكم مشكلة هتجننكوا في الكلام اللي هيظهر مش هقوللكوا دلوقتي هيه ايه..هبقي اقوللكوا في وقتها…خليها تجننكوا شوية..

يلا ربنا معاكوا..
و أي استفسار أو مشكل أنا في الخدمة يا شباب…

__________________________________________________ __________________________________________________ ____________________________
بعد هذا الدرس ورد تساؤل من الكثير انه لا يوجد عندهم امتداد للملف notebad وبالتالى عند قيامهم بتغير الامتداد يظل الملف notebad دون تغيير .....

والاحاجابة علي هذا السؤال .....
فى حاله مافيش امتداد يبقى فى خاصية فى الويندوز معمولة اسمها "hide the extension" يعني هو مش بيكتب امتداد اي برنامج خالص بس هو عارفه في نفسه...معني الكلام ده ان اي حاجة مكتوبة وظاهرة تععتبر من الاسم..حتي لو خليتيها .htm هيعتبرها برده جزء من الاسم انما الامتداد هو مخبيه زي ماهو .txt ...
ازاي نلغي الخاصية دي؟؟؟؟
اعمل الخطوات دي....
افتح my computer
واختار منها من فوق خالص علي الشمال view واختار منها اخر اختيار folder options
هيتفحلك نافذة تختار منها من فوق view
هيطلعلك اختيارات كتييييييييير...
بص فيهم كويس هتلاقي عندك منهم الاختيار ده:
hide file extention for known file types
اتاكد انه مش متعلم جنبه.....
لو لقيته متعلم جنبه الغي العلامة دي واعمل ok واطلع هتلاقي المشكلة دي راحت خالص ان شاء الله....
تقدر بقي دلوقتي تغير الامتداد براحتك

اتفقنا ان الصفحة اللي هكتبها بلغة الي HTML بتنقسم الي جزاين: head و body
وقلنا ان ده مش هيظهر في الموقع بعد منخلص..يعني دي بس تقسيمة بعملها وانا بكتب الموقع او بصممه..انما في الاخر اللي هيظهر بس هو الموجود داخل البودي
ناخد بعض الاوامر اللي هتساعدنا في عمل موقع بسيط المرة دي…
وهنبدا الاول بالهيد:
انا قلت ان الهيد بيتكتب فيه العنوان وكمان شوية حاجات …
هناخد دلوقتي ازاي بنكتب العنوان..والحاجات التانية دي هنبقي ناخدها اخر حاجة خالص ان شاء الله لانها ملهاش اهمية دلوقتي خالص ومش هتتفهم الا في الاخر….
-الامر اللي بيفهم البراوزر اني بكتب عنوان

كود<title>………………….</title>وطبعا لازم يكون مكتوب في الهيد مش في البودي..
كود<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head>
….قبل مندخل في اوامر البودي……
كده لاحظنا من الامر اللي فات ده طريقة اغلاق الامر…
بقفل الامر لما اخلص كل اللي انا عايز اكتبه فيه…يعني انا فتحت الهيد وفتحت جواها ال title ولما خلصت كتابة قفلت ال title الاول وبعدين قفلت الهيد
وهيه دي طريقة الاغلاق:- اخر حاجة بتتقفل الاول ..وبعدين اللي قبلها وهكذا لغاية منوصل لاول حاجة…كالتالي:
كود<html>
<head>
<title>
……….
</title>
</head>
<body>
………..
</body>
</html>
كده خدنا من اوامر الهيد ازاي نحط عنوان للصفحة وبقية اوامر الهيد قلنا في الاخر ان شاء الله…
جرب كده تعمل العنوان ده هتلاقيه بقي مكتوب فوق خالص في السطر الازرق اعلي حاجة في الصفحة…
البودي…
الاول ناخد الصيغة العامة لاي امر في ال HTML
هيزيد عليها حاجة بسيطة عن اللي عرفناه قبل كده…
أي أمر بيتكتب بالصورة دي:
كود>خصائصه الامر <ايه التخريف ده؟؟؟
عشان اوضح الكلام ده هناخد الامر <body> مثال…
احنا قلنا ان انا لما بكتب <body> كده عرفته أني هكتب كلام في البودي…
طب لو انا عايز حاجات معينة او خصائص عامة تظهر في البودي كله زي مثلا لون الخلفية او لون الكلام وكده ة يعني…؟؟
دي بكتبهاله جنب البودي داخل علامة ال < >
طبعا مش أي خصائص بمزاجك ولا بتكتبها بالشكل اللي يعجبك…
الخصائص اللي بتكتبها مع كل امر متحددة ومتحدد الطريقة الي هتكتبها بيها…
يبقي احنا أي امر هناخده ان شاء الله هناخد الاول اسم الأمر وبعدين الخصائص بتاعته…
الامر <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">

نرجع للبودي…
خدنا كده من ال attributes بتاعته :
bgcolor
ملحوظة: وانت بتكتب أي attribute متعملشي أي مسافة في وسطه يعني مش بالشكل ده :- bg color …
لا بتبقي كلها علي بعضها كلمة واحدة bgcolor وده في كل ال attributes…
بس بنفصل بين أي attribute واللي بعده بمسافة وكذلك بين الامر وال attribute بمسافة…
كود HTML:
كود<body bgcolor="red">
او أي لون يعجبك يعني….انا طولت شوية وانا بتكلم عن ال attribute ده عشان بس كنت بوضح فيه بعض المفاهيم…
..بس الباقي ان شاء الله هنقول الامر وبعدين الattribute وبعدين ال value علطول ان شاء الله
تاني attribute في البودي:
عشان احدد لون الكلام …بنستخدم الاتربيوت text
كود HTML:
كود<body bgcolor="black" text="white">
او أي لون…
كده يطلع لون الخلفية اسود واي كلام هكتبه في البودي هيطلع لونه ابيض..
فاضل كمان اتنين attributes في البودي… بس بلاش دلوقتي…بعدين ان شاء الله عشان هما مترتبين علي شوية حاجاة في البودي لازم نعرفها الاول ……
كده خلاص المرة دي…يلا اطلع اقرا الكلام تاني ونفذ بقي……ومستني النتايج…
ملحوظة: وانت بتنفذ ..لما تجرب امر منهم وبعدين تعمل rename وتشوف النتيجة…
وبعدين لو عايز تجرب امر تاني هتعمل ايه؟؟
مش معقول كل مرة هتطلع تعيد نفس الموضوع من الاول تاني عشان تجربه…
انت جرب اول حاجة وبعد متعملها وتعملrename وتشوف النتيجة ..
الصفحة اللي ظهرت فيها النتيجة دي……اقف في أي حتة فيها واضغط كليك يمين واختار منها
view source
هتلاقي الصفحة دي لسة مفتوحة وفتحلك فوقها صفحة ال notepad الي انت كنت عاملها ….
غير فيها زي ميعجبك واكتب أي امر جديد… وبعدين اقفلها وقولله save
…كل ده والصفحة اللي فيها النتيجة هتلاقيها لسة مفتوحة متقفلتش…بس الكلام فيها هتلاقيه متغيرش خالص……
اعمل فيها refresh من فوق خالص هتلاقي التعديلات اللي انت عملتها ظهرت فيها ..
وكده بقي كل متحب تزود اي أمر أو تكون كتبت أمر ملقتش نتيجته ظهرت… ده معناه انك كاتب حاجة غلط في الامر ده…قد يكون غلط في ال spelling مثلا تعمل الطريقة دي وتبص عليه تشوف ايه الغلط فيه وتعدله …وتعمل save
وبعدين refresh
وتشوف النتيجة….
يارب يكون الدرس مش صعب ودمه مش تقيل
وياريت ياجماعة اللي يلاقي الموضوع مشي معاه سهل من غير مشاكل يجرب كمان مرتين او تلاتة عشان ايده تاخد علي الكلام ده ويبقي بالنسبة له سهل مفيهوش أي مشاكل…
واللي يلاقي فيه صعوبة يخلي عنده اصرار علي التعلم..يعدي الكلمة الصعبة ويجرب يعمل الباقي وفي الاخر يبقي يبص عليها..ولو معرفش يسال في الكلمة الغامضة بالنسبة له….
عشان تجرب كل الكلام اللي انا قلته دلوقتي…
كود HTML:
كود<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head>
<body bgcolor="black" text="white">
واكتب هنا الي يعجبك
</body>
</html>وكده اللي خدناه المرة دي لو اتفهم كويس هتلاقيه قليل جدااااااااااااااا…


______________________________________________



تعليق على سؤال


هما اول معلموا اللغة دي كانت صيغة الاوامر لازم تتكتب بالصورة اللي انا كاتبها من غير اي خطا
ولو حدث اي خطا كان الامر مش بيتنفذ..
وده كان بيسبب مشاكل كتير اوي لان اي حد بيعمل موقع كبير ..لو غلط في نصه غلط بسيط ...مش بيلاقي الامر اتنفذ وده يتطلب منه انه يراجع الموضوع كله عشان يلاقي الخطأ ده..
فهخما عشان يحلو المشكلة دي ..كل مبينزلوا نسخة احدث من الانترنت اكسبلورر بيحاولوا يخلوها لو كان الخطا بسيط في الكتابة تفهمه برده وتنفذه...
يعني حضرتك جربي كده تعملي نفس اللي انتي عملتيه واكتبي كله من غير متاكتبيس في الاو <html>
هتلاقيه نفذه طبيعي برده..
بس مينفعش نعتمد علي كده لان احنا لما نعمل موقع عايزين اي حد يفتحه ايا كانت نسخة البراوزر عنده يتشاف بنفس المنظر...
ده اولا..
ثانيا في انواع من البراوزرز مختلفة عن بعضها...يعني ممكن انا اكون مش عندي انترنت اكسبلورر..شغالل برنامج تاني زيه اسمه netscaope اكيد التطور فيهم مش زي بعضه ..يعني ممكن اغلط حاجة ألاقي الانترنت اكسبلورر يفهمها والتاني ميقمهاش ..والموةقع اللي بعمله لازم كله يشوفه بنفس المنظر ايا كان البراوزر عنده...
وده عموةما بالنسبة لاي حاجة لو لقيتيها عندك بتعدي واستسهلتيها ..مش هتلاقي عندك اي مشاكل بس لما تنزلي الموقع علي النت هيبقي في مشاكل كتير اوي بالنسبة للمتصفحين..
انما لو كل حاجة مكتوبة صح ..ايا كان نوع البراوزر هيفهمها..يبقي نخلينا في الأضمن أحسن...

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

اتفقنا ان صيغة أي امر كالتالي:

كود<command name attribute="value" attribute="value">

وخدنا امر البودي واتنين من الاتربيوتس بتوعه….:textوbgcolor
طب لو انا عايز احط صورة تكون خلفية الموقع؟؟؟
يعني صورة عندي علي الكمبيوتر وعايز احطها خلفية للموقع بتاعي….
الاول نتفق علي حاجة مع بعض…
خلي شغلك كله في فولدر خاص بيه لاسباب هنعرفها دلوقتي ان شاء الله..
يعني قبل متعمل أي موقع او أي صفحة افتح new folder وسميه زي متحب وتدخل جواه وتفتح بقي صفحة ال notepad وتكمل شغلك…عشان ننظم الشغل شوية والسبب هيتعرف حالا ان شاء الله….
لما انا بحب احط صورة في الخلفية بجيب الصورة دي واحطها في نفس الفولدر ده ..يعني جنب صفحة ال ntepad
وبعدين وانا بكتب في صفحة ال notepad بقولله في عندك صورة جنبك حطهالي في الخلفية…
يبقي عرفنا ليه بنعمل الشغل كله في فولدر مخصوص …وايضا لاننا كمان أي صوت او فيديو او فلاش او أي حاجة هنحطها في الموقع هتتحط بنفس الطريقة..هنحطها جنبه في نفس الفولدر ونقولله واحنا بنكتب في حاجة معينة عندك جنبك حطهالي هنا في الموقع….
بالنسبة لصورة الخلفية دي بقي…
ليها اتربيوت بيتحط في البودي..

كود<body text="black" background="the name of the pictrue">

وهنا شوية ملاحطات….
انا مكتبتش ال bgcolor هنا وانا قاصد …واحنا قلنا ان ده طبيعي …مش لازم اكتب كل الاتربيوتس..بكتب بس اللي انا محتاجه..وممكن مكتبش ولا اتربيوت خالص…
والملاحظة التانية…ان انا لو كنت كتبتها هنا ..ايه اللي كان هيحصل…لما اكتبله لون الخلفية واكتبله صورة يحطها في الخفية هو هنا هيعمل ايه؟؟
مش يحط اللون خالص ..هياخد بس الصورة ويحطها ويطنش اللون خالص….وعشان كده انا مكتبتوش وريحت دماغي….
الملاحظة التالتة….ان وضع صورة في الخلفية ممكن يعجبك دلوقتي انما في التطبيق العملي مفيش حد خالص بيعمل موقع ويحط صورة في الخلفية والسبب: ان الصورة بتبقي فيها حتت غامقة وحتت فاتحة وده هيؤدي الي ان بعض الكلام ممكن ميظهرش…يعني لو انا عامل الكلام كله لونه ازرق..والصورة فيها حتة سودة…يبقي الكلام المكتوب في الحتة دي مش هيبان…
الملاحظة الرابعة…… ازاي بكتب اسم الصورة؟؟؟؟
لنفرض ان عندي صورة عايز احطها في الخلفية اسمها مثلا egypt.jbg
بكتبه كده

كود<body background="egypt.jbg">

وطبعا لازم اكون حاطط الصورة جنبها في نفس الفولدر….
وفي طريقة ممكن محطهاش جنبه ومن أي مكان عالجهاز اخليه يحطها بس رخمة وطويلة ..فخلينا في السهل احسن ..وكمان ده يخلي الشغل منظم …
يبقي أي حاجة هنحتاجها هنحطها في نفس الفولدر ..أي صورة ..فيديو..فلاش..او أي حاجة…
فاضل ملاحظة كمنا ابقوا فكروني اقولهالكم بعدين ان شاء الله عشان هيه حلوة ..بس بلاش اتقل عليكوا دلوقتي…
وكده خدنا 3 اتربيوتس للبودي وفاضل واحد هناخده بعدين ان شاء الله…
ندخل بقي في الشغل جوه البودي….
احنا قلنا اننا ممكن احط في الموقع بتاعي صور وصوت وفيديو وفلاشات وكلام (data)
هنمسك واحدة واحدة ونعرف ازاي نحطها وازاي نلعب فيها زي ماحنا عايزين…
بس قبل مناخد دول في شوية اوامر عامة بتتحط في بداية البودي بتسهل علينا كتير….
اول حاجة..المشكلة اللي قابلت حضراتكم كلكوا…وهيه ان الكلام اللي بتكتبوه كله بيظهر ورا بعضه …
نعرف الاول ايه سببها وبعدين نعرف ازاي نحلها…
سببها ان البراوزر وهو بيترجم المكتوب مبيفهمش ان انت عملت enter او سبت مسافة …
يعني انت لو كتبت كلام وضغطت مسافة وقعدت ضاغط عليها شهر وبعدين كتبت كلام تاني ..هيطلعك كله ورا بعضه ومش هيعبرك …
وبرده لو عملت 100 enter هيطلعه كله جنب بعضه ولا هيعبرك..
بمعني تاني هو اكتر حاجة بيفهمها في المسافات والانترات مقدار مسافة واحدة بس ايا كنت المسافات والانترات المكتوبة في السورس اللي حضرتك كاتبه…
طب حل المشكلة دي ايه؟؟؟؟
هيه ليها حلين..واحد رخم اوييييييي وملوش لازمة والتاني سهل اويييييييييييييبس انا هقول الاتنين عشان عشان تبقوا عارفين كل حاجة ولسبب تاني كمان هتعرفوه بعدين ان شاء الله…
الحل الرخم:
باستخدام الامر<br>
الامر ده معناه enter
هو اول مبيشوفه بيفهم ان انت قصدك تقولله اعمل انتر هنا …يعني انا لو حتي كتبت كلام في سطر واحد كله وفي النص كاتب<br> هيكتب كل واحد منهم في سطر….
وعلي فكرة الامر ده مش بيتقفل…ليه؟؟؟فكر شوية كده وانت تفهم بعقلك..احنا قلنا اننا بنقفل الاوامر ليه؟؟عشان نعرفه نهاية تنفيذه للامر ده فين…يعني لو اسم صورة ببدا اكتب الصورة وبعدين اقفل بيعرف ان خلاص اسم الصورة خلص..
انما هنا هو هينزل سطر وخلاص..هقولله يقف علي ايه بقي…يعني مش محتاج يتقفل…وطبعا ممكن اكتبه مرتين يسيب سطرين فاضيين وهكذا ..زي محضرتك تحب….
طيب مشكلة المسافات…
بنكتب كده بالظبط
كود&nbsp
بيفهم اننا كده بقولله سيب مسافةولو كتبتها مرتين يعني بقولله سيب مسافتين…
ودي غريبة شوية في انها مبتقفلش وكمان مبنحطهاش بين علامة اكبر من واصغر من …بتتكتب زي ماهي كده وهو بيفهم ان انا قصدي اقولله سيب مسافة…
والعلامة الغريبة اللي فيها دي 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>

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

المرة دي بقي جرب تنفذ علطول وانت بتقرا...مش محتاج تقراه مرة الاول..لان مفيش معلومات جديد\ة تقريبا..كلها اوامر وبس...
قلنا اننا ممكن نحط كلام-صور………
وهنبدا بالكلام (data):
قلنا كمان ان الكلام عشان احطه مش محتاج أي امر… يعني هكتب الكلام وخلاص وهو هيظهر طبيعي زي مانا كاتبه …
طيب..لو انا عايز احدد صفات معينة في بعض الكلام…؟؟؟ زي اللون او الحجم او نوع الخط ..
احنا خدنا قبل كده ازاي نحدد اللون بس وخلاص..وكان لون عام لكل الكلام في الصفحة….
ناخد بقي الطريقة الخاصة واللي تقدر بيها تغير صفات كلمة معينة بس او شوية كلمات او فقرة معينة…
باستخدام الامر <font>
الامر ده بيعرفه ان انا هقولله حاجة ينفذها علي الكلام الجاي…
وبما انكم دلوقتي فاهمين يعني ايه امر ويعني ايه اتربيوت وفاليو…انا هكتب صيغة الامر كلها علي بعضها…


كود<font color=" " size=" " face="name of the font">

طبعا مش لازم بنفس الترتيب ده…أي ترتيب ينفع عادي….
Size-ــــــــــــ بتكت فيها حجم الكلمة يكون اد ايه ..وعندك من 1 الي 7 ..اكتب اللي يعجبك منهم وجرب وشوف..
Color مش محتاج اتكلم عليها
Faceـــــــــــــ بتكتب فيها نوع الخط اللي انت عايزه يكون ايه…
ودي ممكن تعرفها من الوورد..بتلاقي موجود فيه خطوط كتير…تجربها وتشوف الخط اللي يعجبك منهم وانسخه واعملله paste هنا او انقله….


كود<font size="4" color="red" face="times new roman">
………………………
</font>

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


كود<basefont size=" " color=" " face="name of the font">
ده هينفذ الكلام الي فيه علي الصفحة كلها….
وبما انه هيتنفذ علي الصفحة كلها يبقي مش محتاج انه يتقفل…
طب سؤال…
لو انا عملت كده


كود<basefont color= "red">

وجيت علي شوية كلام في نص الصفحة وكتبت كده


كود<font color="blue">

ايه اللي هيحصل؟؟؟
هتلاقي كل كلام الصفحة بقي احمر ماعدا اللي انا قلتله عليه ازرق هيبقي ازرق..
معني الكلام ده ان الاوامر العامة بتتنفذ علي الصفحة كلها مالم يذكر غير ذلك…
في بقي بعض الاوامر غير الامر <font> بتتحكم في الكلام برده …
في بعضها قد تجده مش مهم اوي بس انا هقول كل حاجة…
لو انا عايز اكتب عنوان … او شوية عناوين..يعني:
انا بكتب مثلا موضوع كبير له عنوان رئيسي…وتحته عناوين فرعية..وكل عنوان فرعي تحته شوية عناوين متفرعة منه….
طبعا عشان المنظر يبقي كويس عايز العنوان الكبير خالص يبقي حجمه كبير عن الكلام والعناوين الفرعية برده اكبر من بقية الكلام بس اقل حجما من العنوان الرئيس وهكذا…
انا ممكن اتحكم في الكلام ده عن طريق الامر font size بس هتبقي متعبة اوي لو العناوين كانت كتيرة…
فهما سهلولك الموضوع ده…
عنوان يعني head
الامر بتاعه اسمه

كود<h1>
<h2>
<h3>

يعني انا وانا بكتب العنوان الكبير اوي في الصفحة هكتبه كده


كود<h1>بسم الله الرحمن الرحيم</h1>

العناون الفرعية منه


كود<h2>html</h2>

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

كود<b>…………….</b>

بيخلي الخط تقيل شوية “bold”

كود<I>……………….</i>

بيخلي الخط مائل “italic”


كود<u>……………….</u>

بيحط خط تحت الكلام

كود<strike>…………..</strike>

بيحط خط في وسط الكلام


كود<big>………………</big>

بيخلي الكلام يكبر شوية


كود<tt>………….</tt>

عشان نفهم دي بتعمل ايه:
اكتب عندك في صفحة ال notepad الاتي:
iiiii ودوس انتر وبعدين اكتب mmmmm
وشوف المنظر…دول خمسة I ودول خمسة m بس هتلاقيهم شكلها مش حلو ومش متساويين عشان حرف الاي صغير والام كبير…
الامر <tt> تكتبه قبلهم وتقفله بعدهم يظبطهملك ويطلعلهملك اد بعض….
جرب وشوف…

كود<center>………….</center>

بيخلي الكلام يبقي في النص…

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

كود<font color="red" size="4">
<center><b><I><u><strike>
بسم الله الرحمن الرحيم
</strike></u></i></b></center></font>

هتتنفذ كده كل الاوامر دي علي الكلمة دي…
وهكذا بقي..اعمل تداخل بين كل الاوامر…
يبقي كده الموضوع محتاج ابداعاتكم…
انت عرفت ان كل امر بيعمل ايه…وانت بقي تفكر وتدخلهم مع بعض عشان تطلع منظر حلو يعبر عن ابداعاتك في الاخر…وربنا يوفقكم…
الاوامر كتيرة المرة دي …بس مفيش معلومات جديدة..كله كلام سهل اوي……
يارب تشوفوهم وتجربوهم بسرعة عشان اكتب لدرس اللي عليه الدور..لان لسه ال data فاضل فيها شوية حاجات
ويارب يكون الكلام واضح

لو انا عايز اكتب كلمة وكلمة تانية فوقها بسنة صغيرة…
يعني مثلا رقم اس رقم تاني..وممكن تعملها برده علي الكلام عادي مش الارقام بس…
انا عايز اكتبy اس x ….معلش انا كاتبها كده لان مفيش امكانية هنا أي اكتبها بالشكل بتاعها ..بس البراوزر بيدعم اني اكتبها بالشكل السليم بتاعها…
بكتب بالمنظر ده:
y<sup>x
وبعدين بقفله..
sup دي اختصار ل super يعني انا قلتله x خليها سوبر شوية ..يعني فوق..
ونفس الحكاية لو عايزها تحت شوية بالامر <sub>
y<sub>x
وبعدين بقفله

الامر <p>
ده امر مهم…وله شوية اتربيوتس مفيدة…
لو انا كتبته لوحده كده من غير أي اتربيوتس خالص…بيعمل 2 انتر…وده لانه حرف ال p ده اختصار لكلمة paragraph فانا لما بكتبه كده لوحده بيعرفه اني هبدا باراجراف جديد فيبيروح نازل 2 انتر عشان يبقي كل بارجراف لوحده مستقل…وطبعا في الحالة دي مش محتاج اقفله لان كل وظيفته في الحالة دي اه ينزل 2 انتر… بس ده طبعا مش مهم ابدا وانت لو عايز تعمل باراجراف جديد هتنزل لودك وتدوس انتر عادي…
الاتربيوتس بتاعته:<p align= right>
بكتب هنا في خانة الفاليو دي
right –left-center
هيطلع الكلام ده في الصفحة ناحية اليمين او الشمال او في النص زي ماحضرتك كاتب… جرب وشوف
وده لو حضرتك عايز شوية كلام عين تخليهم من ناحية اليمين وبقية الكلام من علي الشمال وكده…
انما لو عايز الصفحة كلها تيجي من ناحية اليمين بتريح فسك وبتكتب اتربيوت في الامر <html> من الاول خالص بتقولله يخلي الصفحة كلها من علي اليمين وبعدين عادي لوز حبيت تكتب شوية من علي الشمال تبقي تعملهم بالامر <p> والباقي هيبقي يمين
<html dir=rtl>
انا كده قلتله الاتجاه من اليمين الي الشمال
r اختصار ل right
T اختصار ل to
L اختصار ل left
والعكس ltr من الشمال لليمين…بس طبع ده الاساسي بتاعه مش لازم بتكتب..اناا بس لو كان موقعي عربي وهيتكتب من علي اليمين كله بكتب rtl دي في الاول…
…
خلص الامر <p>
لو انا عايز اكتب list
يعني مثلا عايز اقول كده:
substances:
arabic
english
physics
طبعا انا ممكن اكتبهم كده بالمنظر ده عادي من غير مشاكل..
بس في وسيلة مساعدة للتنظي بتقدمها اللغة دي..لو عايز تستعملها اهلا وسهلا مش عايز انت حر…
فدي ليها امر بينظمها شوية….
اللستة اللي انا هعملها ممكن اعملها مرقمة واحد اتنين تلاتة وممكن اعملها مش مرقمة…
لو عايزها مرقمة بقولله الامر ده <ol>
وده اختصار لكلمة ordered list
ولو عايزها مش مرقمة بقولله الامر ده <ul>
وده اختصار لكلمة unordered list
وطبعا دول امرين بيتقفلوا في الاخر بعد مااخلص كتابة اللستة كلها…
بس في كمان حتة صغيرة …
هما مش بيتكتبوا كده بس…
بيتكتبوا بالمنظر ده:


كودsubjects
<ol>
<li>
arabic
<li>
english
<li>
phyiscs
</ol>

قبل كل item في اللستة دي بكتب li ومش بقفلها ..دي بتعرفه ان ده ايتم في اللستة دي …ومش لازن ننزل سطر تحت ال li زي مانا كاتب كده بس انا اضطريت اكتبهم كدهعشان المنتدي ده عجيب ..بيغير شكل الاوامر لو كتبت حاجة جنبها...
ونفس الموضوع في الunordered list
جرب وشوف المنظر هتلاقيه بقي منظم اكترما كنت ممكن تنظمه بايدك..واريح…
في اتبربيوت للامرين دول اسمه type عشان احدد لو انا هعمله مرقم ..انا مثلا عايزة مرقم واحد اتنين تلاتة و ولا مرقم لاتيني ولا A-B-C…
فانا لو سبته وخلاص من غير أي اتربيوت هيرقمه واحد اتنين تلاتة
لو عايزه A-B-C
<ol type=a>
هيطلعه مترقم abc وكلها حروف small
لو عايزها capital
بعمل نفس الكلام وبكتب حرف ال A كابيتال
لو عايزها لاتيني:
<ol type=I>
وبرده فس الموضوع capitl و small
وجرب وشوف بنفسك…
لو عايزها مش مرقمة هو هيطلع جنبها دايرة سودة لو كتبتها كده وخلاص ..
لو انا عايز مربع او دايرة فاضية بعمل نفس الكلام…
<ul type=square>
<ul type=circle>
طبعا هو ده كلام مش مهم اوي بس انا بقول كل حاجة….وفي فايدة قلت هنعرفها بعدين من اننا نبقي عارفين كل حاجة حتي لو مش هنستعملها..
لو انا عايز احط كلمة وتعريفها تحتها بشوية..برده ممكن تظبطها بايدك بس هو ممكن يريحك…
انا عايز اكتب HTML وتعريفها تحتها وبعدين HTTP وتعريفها تحتها …
لو كتبتهم بايدي ممكن ميبقوش متظبطين ع بعض ويبقي شكلهم مش ظريف……
فانت جرب كده تكتبهم بالمنظر ده:


كود<dl>
<dt>
HTML
<dd>
hyper text markup Language
<dt>
HTTP
<dd>
hyper text transfere protocol
</dl>

متهيالي من المثال المكتوب واضح طريقة كتابة الامر ده…
بكتب dl في الاول وبقفلها في الاخر بتعرفه اني هتب هنا تعريفات وممكن تعريف واحد عادي..
وبعدين الكلمة الكبيرة اللي عايز اعرفها بكتب قبلها <dt> ومبيتقفلش
والتعريف بكتب قبله <dd> وبرده مبيتقفلش
..
طبعا كلام مش مهم اوي…
….كده تقريبا كل حاجة بالنسبة لل data خلصت…
ناقص بس انا كنت قلت لحضراتكم بالنسبة لصورة الخلفية..كنت قلت في ملاحظة ابقوا فكروني اقولهالكم…
وهي اننا قلت ما احط صورة في الخلفية يبقي مفيش داعي اني احط لون في الخلفية لان الصورة هيه اللي هتبان…بالرغم من كده أي حد بيعمل وقع لو حط صورة في الخلفية بتلاقيه كاتب لون برده للخلفية وده لسبب:
حضرتك لما بتيجي تفتح موقع علي حسب الحاجات الموجودة فيه بتكون سرعة تحميله…والصور بتاخد وقت شوية في التحميل…
كل ماكان عليه صور كتير بتاخد فترة علي متحمل…
ففي بعض الناس المحترفين شوية ومش عايزين يضيعوا وقت….بيعملوا حركة حلوة..
في خاصية في الويندوز اسمها اعرضلي أي موقع انا افتحه من غير صور خالص…
هيفتحلك أي موقع طبيعي جدا من غير متبان ولا صورة في الموقع ده…وده بيسرع التحميل شوية…
الناس اللي بيعملوا كده مش مهمين بالمنظر ..بس عايزين يشوفوا حاجة في الموقع وخلاص او يعرفوا معلومة منه بسرعة وخلاص…
في الحالة دي لو انا عامل لون للخلفية ..اول مالشخص ده اللي لاغي الصور يفتح الموقع بتاعي هيلاقي لون الخلفية الي انا عامله هو اللي هيظهر فتبقي برده الصفحة شكلها مش وحش ومش هتاخد وقت معاه لان الصور مش هتظهر..
لو انا مكنتش عامل لون…هتظهرله الخلفية بيضة وشكلها سخييييييف…
طبعا تلاقيك دلوقتي بتقول وانا مالي بالاخ الرخم ده…هو لغي الصور يتحمل المسئولية بقي ويطلعله المنظر زي ميطلع انا مليش دعوة…
فهنا في معلومة مهمة اوي لازم يعرفها أي مصمم مواقع…
انت لما عملت الموقع عملته ليه؟؟؟؟؟؟؟؟؟
عايز الناس تدخل عليه وتشوف الموجود فيه…
طيب لو انا عملت الموقع وحطيت فيه معلومات كتير اوي وحلوة اويييييييييي…بس شكله مش حلو..او طريقة تعامله مع الزائر رخمة..او بيحمل بالراحة اوي…
وجه شخص دخل عليه…
تخيل نفسك كده انت الزائر بتاع موقعي الرخم ده..
بتفتحه لقيته بطييييييييئ اوي وشكله وحش وبيتعامل معاك باسلوب رخم…هتدخل عليه تاني؟؟؟؟
حتي لو عليه معلومات حلوة اوي مش هتدخل عليه تاني ابدا..وهتقول يعم في مليون موقع تاني كويس اشوفلي حاجة حلوة منهم وبلاش قرف…
اقصد اقول من الكلام ده ان أي مصمم مواقع اهم حاجة بيحطها فيد ماغه هو زوار الموقع…وازاي يرضيهم وازاي يتعامل معاهم بشكل ظريف ويحسسهم ان الموقع ده حلو اوي وسريع التحميل وشكله حلو…ولذلك احنا بنحاول بكل الطرق اننا نعمل ما يرضي زائر الموقع اضافة الي ما في الموقع من معلومات ..ده يؤدي الي ان الناس تدخل عليه علطول..
ولو عايزين تعرفوا ازاي تلغوا ان الصور تظهر في الموقع عشان تسرعوا التحميل شوية اقولهالكم..لو عايزين يعني…
يارب يكون درس خفيف مش تقيل..وربنا يوفقكم

ولو حسيت باي مشكلة وانت بتقرا ارجع عيد تاني وكمل للاخر وان شاء الله هتفهم كل حاجة…
ولو في أي مشاكل سيب الحتة بتاعت المشكلة دي ابقي اسال فيها وكمل الباقي…
لادراج صور:
احنا خدنا قبل كده ازاي نحط صورة في الخلفية… ازاي بقي نحط صورة صغيورة في أي مكان في الصفحة ..او كبيرة زي متحب ..بس مش تكون في الخلفية كلها…
الامر <img>
الاول طبعا هنجيب الصورة ونحطها في الفولدر بتاع الشغل بتاعنا زي ماتفقنا جنب صفحة النوت باد اللي شغالين فيها..
وبعدين بقولله امر بالمنظر ده:
كود HTML:
<img src=" ">

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

كود<IMG SRC=" " width="300" height="300">

وتغير في الطول والعرض زي متحب…اكتب الرقم اللي يعجبك في كل واحدة منهم وشوف الحجم..لو مش عاجبك صغر او كبر زي متحب…
والامر <img> ده مش محتاج انه يتقفل..والسبب ان كل اللي انا عايزه منه في الامر ده كتبته بين ال< > يعني مفيش حاجة هتكتب بره والامر ده ينفذها عشان اقفله بعدها..لو في حاجة بره كنت بعد مااكتبها اقفل الامر
يبقي الامر <img> مبيتقفلش…
حضرتك كده افتح أي موقع واقف علي أي صورة فيه واصبر شوية ..هتلاقي اتكتب كلام كده بيعبر عن الصورة..نزل من تحت الماوس …
الحركة دي بتتعمل ازاي ؟؟ وفايدتها ايه؟؟؟
لو انا مثلا حاطط صورة هرم

كود<IMg src width=" " height=" " alt="pyramid">

جرب وابقي اقف علي الصورة شوية واصبر هتلاقي الكلمة اللي انت هتكتبها هتنزل من تحت كده….
دي لها شوية فوايد….لو مثلا في مشكلة في السيرفر والصور محملتش..ودي ساعات بتحصل ….هتلاقي مكان الصورة بدل ميبقي فاضي وشكله سخيف هيكتب مكانها الكلمة دي…
مش انت ساعات كده تفتح موقع تلاقي صورة مش ممحملة بتلاقي مكانها مربع كده وفوق خالص في المربع موجود علامة غلط…هتلاقي مكتوب في المربع ده الكلمة دي…
وكمان عشان الشخص الرخم اللي قلنا عنه قبل كده اللي هيلغي تحميل الصور خالص من الموقع …بدل ميبان عنده مكان الصورة فاضي خالص يبان اسم الصورة يعرف ان هنا كان موجود صورة كذا…
وفايدة كمان لو مفهمتهاش كويس دلوقتي اصبر لماتخلص الدرس ده للاخر هتفهمها كويس ان شاء الله
وهي اننا ممكن اعمل صورة عبارة عن لينك…يعني تضغط عليها تفتحلك صفحة تانية..او يعني توديك لحاجة تانية…فهكتبله هنابقي مثلا..اضغط لتذهب لصفحة الصور…هنعرف دلوقتي ازاي نعمل دي..بس المهم دلوقتي اننا نعرف ازاي لما نقف علي الصورة تظهر كلمة معينة….
يلا جرب الموضوع ده واتدرب عليه كويس اكتر من مرة….
جرب اكتر من مرة…انا قلتلك اهوه..لو مجربتش 3 او اربع مرات لما تخلص الدرس ده هتحس انك سحت…اسمع الكلام وجرب 3 او اربع مرات وان شاء الله كل حاجة هتبقي سهلة اوي…
في كمان 4 اتربيوتس للتعامل مع الصور عشان تنظمها شوية…
vspace –hspace-align-border
الاتربيوت border بيحدد اذا كنت عايز تعمل بوردر للصورة …وبيحدد حجمه…بتكتبه وتكتب فيه أي رقم اكتب كده مثلا boreder=5
وغير الرقم زي متحب عشان تغير سمك البوردر ده… ولو مكتبتوش خالص يبقي مش هيبقي في بوردر ..زي متحب..
vspace= واكتب أي رقم ..مثلا 10 هيسيب مسافة راسية بين الصورة والكلام اللي فوقها واللي تحتها بالمقدار اللي انت حددته…
v اختصار لكلمة vertical يعني انت قلتله سيب مسافة راسي مقدارها كذا..عشان لو في كلام فوق او تحت الصورة ميبقاش لازق فيها وشكله وحش..بتحدد له المسافة اللي هيسيبها…
والمسافة الافقية بالاتربيوت ده:
hspace
h اختصار لكلمة horizontal
جرب وشوف….
ناقص الاتربيوت align
ده عشان تحددله مكان الصورة ومكان كتابة الكلام بعدها….
يعني انت عايز الصورة في اليمين ولا الشمال..وعايز الكلام جنبها يبدا من بدايتها خالص من فوق ولامن نصها ولا من تحتها….انا مش عارف اوضحها كويس بالكلام بس انت لما تجرب هتفهم…
align= واكتب فيها أي واحدة من الفاليوز دي…
right-left-top-middle-bottom
رايت ولفت يحدد الصورة هتبقي في اليمين ولا الشمال…
توب وبتتوم وميدل يحدد الكلام بعدها هيبدا منين..جرب وشوف….
فاضل كمان اتربيوت واحد للصورة هناخده في الاخر ان شاء الله…

قبل مناخد ازاي نحط صوت او فلاش او….
هناخد حاجة مهمة اوي ي ي ي ي وهي ازاي نحط LINK…
الاول يعني ايه لينك؟؟؟؟؟؟ لو انت عارف معناها متتدايقش اني هشرحها لان في ناس متعرفش معناها..
link معناهابالعربي رابط ..يعني حاجة بتربطني بحاجة تانية…
يعني أي موقع في الدنيا بتفتحه…بتلاقي موجود فيه صور وكلام و…. وبتلاقي كلام موجود تحته خط بتظغ عليه يفتحلك صفحة تانية في الموقع ده …..ده اسمه لينك يعني حضرتك ممكن تعمل صفحتك وتحط فيها لينك لموقع ***** ميل مثلا… او لينك لموقع واحد صاحبك..بمجرد الضغط عليه يتحمل الموقع التاني ده ..بس دي مش الاهمية الاساسية بتاعته…الاهمية الاساسية بتاعته ان حضراتكم لغاية دلوقتي مكن تعملوا صفحة موقع كويسة وشكلها حلو…
بس عمرك شفت موقع صفحة واحدة بس؟؟؟وللا اي موقع بتلاقي فيه لينكات توديك لصفحات تانية في نفس الموقع…يعني مثلا لو انا عامل موقع شخصي لنفسي…هعمل صفحة رئيسية في الاول …وبعدين هعمل لينك اسمه السيرة الذاتية ولينك تاني اسمه صور شخصية وكده…كل لينك منهم تتك عليه يوديك لصفحة تانية انا عاملها برده موجود فيها حاجات علي حسب الاسم بتاعها..
قبل منعرف ازاي نعمل اللينك ده نعرف الاول ازاي نعمل الصفحة التانية ونبقي نخلي اللينك يفتح الصفحة التانية دي..
احنا عاملين فولدر فيه الشغل بتاعنا كله…وحاططين جواه الصور والفلاشات اللي هنستعلمها في الموقع وكل حاجة تبع الموقع ده… وموجود فيه الصفحة اللي انا بكتب فيها الكلام الللي انا عايزه بلغة الاتش تي ام ال..
لما احب اعمل صفحة تانية في الموقع باجي جوه الفولدر ده برده وافتح كمان صفحة نوت باد جديدة… واعمل فيها الصفحة التانية زي مانا عايز …وبعدين باجي في الصفحة الاولي واحط لينك واقولله لما اضغط علي اللينك ده افتح الصفحة اللي اسمها كذا موجودة عندك في نفس الفولدر هنا…
وكده ممكن اعمل العدد الليعجبني من الصفحات واحطها كلها في الفولدر ده ……واحط لينكاتها كلها في الصفحة الرئيسية…وانظم موقعي زي مانا عايز…ازاي بقي بنعمل اللينك ده؟؟؟؟؟؟؟

كود<a href=http://www.************>………………..................</a>
المنظر اللي فات ده مش واضح كويس…
كده انا قلتله لما يضغط علي اللينك ده روح للهوت ميل… وبعدين قفلت باصغر من…وبعدين ببدا اكتب اللينك اللي هيبقي ظاهر في الصفحة…يعني كده هو عرف ان اللي انا هكتبه هنا بمجرد الضغط عليه هيوديه للهوت ميل ان شاالله اكتبله هنا عفريت…اللي هيظهر في الصفحة بس هو العفريت ده واول متضغط علي العفريت ده هيفتح ***** ميل..وبعد مكتب العفريت ده بقفل الامر…
مثلا:<a href="http://www.************ " >open ******* page</a>
كده هيظهر في الصففحة open hot mail page واول ميضغط عليها هتفتح صفحة ***** ميل..
ولو انت كتبت أي حاجة مكان open hot mail page هتظهر في الصفحة وبرده اول ميظغط عليها هتفتح ***** ميل..إن شاء الله تكتبله هنا open ***** …لان انت كاتبله جوه الامر افتح ***** ميل اول ميضغظ علي الكلمة اللي انا هكتبهالك هنا ايا كانت الكلمة…اعتقد كده وضح المقصود..
ونفس الطريقة لو عايز احمل الصفحة التانية اللي انا عملتها في نفس الفولدر …لو فرضنا ان الصفحة التانية دي اسمها mostafa.htm هكتبله كده:
<a href="mostafa.htm">see my pictures</a>
لو انت عرفت تعمل اللينك ده لغاية دلوقتي يبقي حلو اوييييي .خش عالجاي بقي..لو مش واضح اوي بالنسبة لك ..ارجع اقراه تاني وحاول تفهمه ولو مقدرتش متبصش عالجاي واستني وابقي قوللي احاول اوضحهولك تاني..يعني متدخلش علي الجاي الا لما تكون فاهم الي فات كويس لان اللي فات ده مهم جداااااااااااااااااااااااااااااااااااااااااااااااا ااااااااااااا..
اللينك ده بقي مهم اويييييييييييييييييي وممكن يتعمل بيه حاجات كتيرة اويييي وجميلة اويييييييي…بس عايز تطبيق شوية من حضراتكم…
احنا عرفنا دلوقتي اننا ممكن نربط بيه بين مواقع مختلفة وممكن نعمل بيه اكتر من صفحة في موقع واحد…
ممكن كمان اعمل بيه اننا ممكن احط لينك بمجرد الضغط عليه يتبعتلي رسالة علي ايميلي …ازاي؟؟جرب كده وشوف:
<a href="mailto: ……@************">contact us</a>
اكتب كده واضغط عليه هتلاقيه فتحلك صفحة اوت لوك تكتب فيها الرسالة ومكتوبلك فوق ان الرسالة دي هتتبعت علي الايميل اللي حضرتك كاتبه…
ممكن اعمل بيه حاجتين كمان..هقول الاولي دلوقتي والتانية المرة الجاية ان شاء الله …لو انا مثلا عايز اعمل صفحة فيها 20 صورة..كلها صور شخصية بتاعتي… لو رصتهم كده جنب بعض او تحت بعض هيبقي شكلها سخيف اوي فانا ممكن احط الصور دي تكون صور صغيرة اوي وتكون كل واحدة منهم عبارة عن لينك بمجرد الضغط عليه تلاقي الصورة كبرت وبقت هيه لوحدها الموجودة في الشاشة…بص كده علي اللي انا هكتبه دلوقتي وانت تفهم بنفسك:

كود<a href="pic.htm"><img src=" " width="50" height="50"></a>

.انا قلت ان اللي هكتبه مبين الامر واغلاقه هو اللي هيظهر في الصفحة…انا هنا كتبتله صورة وقلتله خلي حجمها صغير..هتظهر الصورة بالحجم الصغير اللي انا عملته ده وتكون عبارة عن لينك اول ميضغط علييها يحمل الصفحة اللي انا كاتبهاله في الامر واكون انا حاطط في الصفحة دي نفس الصورة بس تكون حجمها كبير….يعني انا هعمل الاتي بالظبط:
هعمل صفحة مخصوصة لكل صورة من الصور اللي انا عايز احطها في الصفحة الكبيرة دي ..واحط في الصفحة دي الصورة بحجم كبير….واحطهم في الفولدر بتاعي..ودي مش هتاخد وقت كبير… لان اننا هعمل الصفحة احط فيها صورة بس.وان شاء الله هقوللكم علي حاجتين يخلصوا الموضوع ده بسرعة لان في الحالة دي انت هتعمل 20 صفحة ..بس برده كل واحدة منهم هتخلص بسرعة اوييييييي هتحط فيها الصورة بس ..
واجي في صفحة الصور احط الصور كلها علي هيئة لينكات ..كل لينك منهم يودي للصفحة اللي فيها نفس الصورة بحجم كبير…
هقوللكوا مثال علي صورة واحدة بس…
انا عايز اعمل الكلام ده…والصورة اسمها s.jpg
هفتح صفحة نوت باد واحط فيها الصورة دي بحجم كبير…
ولنفرض ان الصفحة دي سميتها 1.htm
هاجي بقي في صفحة الصور الرئيسية واكتب كده:
<a href="1.htm"><img src="s.jpg" width="50" height="50"></a>
كده هتظهر الصورة بالحجم الصغير ولما يضغط عليها تفتح الصفحة الموجود فيها الصورة بالحجم الكبير…
وممكن اخلي الصورة لما اضغط عليها تفتحلي صفحة فيها كلام ..او تفتح موقع تاني خالص ..زي متحب ياباشا…
يعني مثلا انا هحطله صورة كمبيوتر اول ميضغط عليها تفتحله صفحة في معلومات عن الكمبيوتر…انتوا خلاص عرفتوا الطريقة…
وطبعا مننساش حاجة مهمة اويييييييييييييييييييييييييييييييييييييييييييييييي ي
وهي اني لازم اربط بين الصفحات بتاعتي كلها باستخدام اللينكات دي…
يعني انا عملت موقع شخصي…الصفحة الرئيسية فيها شوية لينكات ..لينك يودي لصفحة صور ولينك يودي لصفحة فيها السيرة الذاتتية بتاعتي وكده…
طب دلوقتي زائر الموقع ده ..جه ودخل علي صفحة الصور..لو هو عايز يرجع تاني؟؟؟ يبقي لازم اكون حاططله لينك في صفحة الصور اسمه العودة للصفحة الرئيسية..مش هقوللك بقي تعملوا ازاي..انت لو فهمت اللي فات هتعمله لوحدك…
وبرده لما يفتح كل صورة من الصور يلاقي لينكين:
لينك اسمه العودة للصفحة الرئيسة ولينك اسمه ارجع لصفحة الصور…
كفاية كده اوي انهاردة..معلش كترت عليكوا بس حبيت اكمل الدرس اللي بدا للاخر…
محتاج تطبيق كتيير..جرب اكتر من مرة واقرا الدرس ده اكتر من مرة..مرتين علي الاقل…
وبعد متجرب اكتر من مرة…اقفل الدرس وسيب الورقة..وابدا فكر في شكل موقع من دماغك واعمله كده لوحدك وشوف مستواك…
ولو في أي مشكلة اسال .

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

اتفقنا ان الصفحة اللي هكتبها بلغة الي HTML بتنقسم الي جزاين: head و body
وقلنا ان ده مش هيظهر في الموقع بعد منخلص..يعني دي بس تقسيمة بعملها وانا بكتب الموقع او بصممه..انما في الاخر اللي هيظهر بس هو الموجود داخل البودي
ناخد بعض الاوامر اللي هتساعدنا في عمل موقع بسيط المرة دي…
وهنبدا الاول بالهيد:
انا قلت ان الهيد بيتكتب فيه العنوان وكمان شوية حاجات …
هناخد دلوقتي ازاي بنكتب العنوان..والحاجات التانية دي هنبقي ناخدها اخر حاجة خالص ان شاء الله لانها ملهاش اهمية دلوقتي خالص ومش هتتفهم الا في الاخر….
-الامر اللي بيفهم البراوزر اني بكتب عنوان

كود<title>………………….</title>وطبعا لازم يكون مكتوب في الهيد مش في البودي..
كود<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head>
….قبل مندخل في اوامر البودي……
كده لاحظنا من الامر اللي فات ده طريقة اغلاق الامر…
بقفل الامر لما اخلص كل اللي انا عايز اكتبه فيه…يعني انا فتحت الهيد وفتحت جواها ال title ولما خلصت كتابة قفلت ال title الاول وبعدين قفلت الهيد
وهيه دي طريقة الاغلاق:- اخر حاجة بتتقفل الاول ..وبعدين اللي قبلها وهكذا لغاية منوصل لاول حاجة…كالتالي:
كود<html>
<head>
<title>
……….
</title>
</head>
<body>
………..
</body>
</html>
كده خدنا من اوامر الهيد ازاي نحط عنوان للصفحة وبقية اوامر الهيد قلنا في الاخر ان شاء الله…
جرب كده تعمل العنوان ده هتلاقيه بقي مكتوب فوق خالص في السطر الازرق اعلي حاجة في الصفحة…
البودي…
الاول ناخد الصيغة العامة لاي امر في ال HTML
هيزيد عليها حاجة بسيطة عن اللي عرفناه قبل كده…
أي أمر بيتكتب بالصورة دي:
كود>خصائصه الامر <ايه التخريف ده؟؟؟
عشان اوضح الكلام ده هناخد الامر <body> مثال…
احنا قلنا ان انا لما بكتب <body> كده عرفته أني هكتب كلام في البودي…
طب لو انا عايز حاجات معينة او خصائص عامة تظهر في البودي كله زي مثلا لون الخلفية او لون الكلام وكده ة يعني…؟؟
دي بكتبهاله جنب البودي داخل علامة ال < >
طبعا مش أي خصائص بمزاجك ولا بتكتبها بالشكل اللي يعجبك…
الخصائص اللي بتكتبها مع كل امر متحددة ومتحدد الطريقة الي هتكتبها بيها…
يبقي احنا أي امر هناخده ان شاء الله هناخد الاول اسم الأمر وبعدين الخصائص بتاعته…
الامر <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">
نرجع للبودي…
خدنا كده من ال attributes بتاعته :
bgcolor
ملحوظة: وانت بتكتب أي attribute متعملشي أي مسافة في وسطه يعني مش بالشكل ده :- bg color …
لا بتبقي كلها علي بعضها كلمة واحدة bgcolor وده في كل ال attributes…
بس بنفصل بين أي attribute واللي بعده بمسافة وكذلك بين الامر وال attribute بمسافة…
كود HTML:
كود<body bgcolor="red">
او أي لون يعجبك يعني….انا طولت شوية وانا بتكلم عن ال attribute ده عشان بس كنت بوضح فيه بعض المفاهيم…
..بس الباقي ان شاء الله هنقول الامر وبعدين الattribute وبعدين ال value علطول ان شاء الله
تاني attribute في البودي:
عشان احدد لون الكلام …بنستخدم الاتربيوت text
كود HTML:
كود<body bgcolor="black" text="white">
او أي لون…
كده يطلع لون الخلفية اسود واي كلام هكتبه في البودي هيطلع لونه ابيض..
فاضل كمان اتنين attributes في البودي… بس بلاش دلوقتي…بعدين ان شاء الله عشان هما مترتبين علي شوية حاجاة في البودي لازم نعرفها الاول ……
كده خلاص المرة دي…يلا اطلع اقرا الكلام تاني ونفذ بقي……ومستني النتايج…
ملحوظة: وانت بتنفذ ..لما تجرب امر منهم وبعدين تعمل rename وتشوف النتيجة…
وبعدين لو عايز تجرب امر تاني هتعمل ايه؟؟
مش معقول كل مرة هتطلع تعيد نفس الموضوع من الاول تاني عشان تجربه…
انت جرب اول حاجة وبعد متعملها وتعملrename وتشوف النتيجة ..
الصفحة اللي ظهرت فيها النتيجة دي……اقف في أي حتة فيها واضغط كليك يمين واختار منها
view source
هتلاقي الصفحة دي لسة مفتوحة وفتحلك فوقها صفحة ال notepad الي انت كنت عاملها ….
غير فيها زي ميعجبك واكتب أي امر جديد… وبعدين اقفلها وقولله save
…كل ده والصفحة اللي فيها النتيجة هتلاقيها لسة مفتوحة متقفلتش…بس الكلام فيها هتلاقيه متغيرش خالص……
اعمل فيها refresh من فوق خالص هتلاقي التعديلات اللي انت عملتها ظهرت فيها ..
وكده بقي كل متحب تزود اي أمر أو تكون كتبت أمر ملقتش نتيجته ظهرت… ده معناه انك كاتب حاجة غلط في الامر ده…قد يكون غلط في ال spelling مثلا تعمل الطريقة دي وتبص عليه تشوف ايه الغلط فيه وتعدله …وتعمل save
وبعدين refresh
وتشوف النتيجة….
يارب يكون الدرس مش صعب ودمه مش تقيل
وياريت ياجماعة اللي يلاقي الموضوع مشي معاه سهل من غير مشاكل يجرب كمان مرتين او تلاتة عشان ايده تاخد علي الكلام ده ويبقي بالنسبة له سهل مفيهوش أي مشاكل…
واللي يلاقي فيه صعوبة يخلي عنده اصرار علي التعلم..يعدي الكلمة الصعبة ويجرب يعمل الباقي وفي الاخر يبقي يبص عليها..ولو معرفش يسال في الكلمة الغامضة بالنسبة له….
عشان تجرب كل الكلام اللي انا قلته دلوقتي…
كود HTML:
كود<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head>
<body bgcolor="black" text="white">
واكتب هنا الي يعجبك
</body>
</html>وكده اللي خدناه المرة دي لو اتفهم كويس هتلاقيه قليل جدااااااااااااااا…


______________________________________________



تعليق على سؤال


هما اول معلموا اللغة دي كانت صيغة الاوامر لازم تتكتب بالصورة اللي انا كاتبها من غير اي خطا
ولو حدث اي خطا كان الامر مش بيتنفذ..
وده كان بيسبب مشاكل كتير اوي لان اي حد بيعمل موقع كبير ..لو غلط في نصه غلط بسيط ...مش بيلاقي الامر اتنفذ وده يتطلب منه انه يراجع الموضوع كله عشان يلاقي الخطأ ده..
فهخما عشان يحلو المشكلة دي ..كل مبينزلوا نسخة احدث من الانترنت اكسبلورر بيحاولوا يخلوها لو كان الخطا بسيط في الكتابة تفهمه برده وتنفذه...
يعني حضرتك جربي كده تعملي نفس اللي انتي عملتيه واكتبي كله من غير متاكتبيس في الاو <html>
هتلاقيه نفذه طبيعي برده..
بس مينفعش نعتمد علي كده لان احنا لما نعمل موقع عايزين اي حد يفتحه ايا كانت نسخة البراوزر عنده يتشاف بنفس المنظر...
ده اولا..
ثانيا في انواع من البراوزرز مختلفة عن بعضها...يعني ممكن انا اكون مش عندي انترنت اكسبلورر..شغالل برنامج تاني زيه اسمه netscaope اكيد التطور فيهم مش زي بعضه ..يعني ممكن اغلط حاجة ألاقي الانترنت اكسبلورر يفهمها والتاني ميقمهاش ..والموةقع اللي بعمله لازم كله يشوفه بنفس المنظر ايا كان البراوزر عنده...
وده عموةما بالنسبة لاي حاجة لو لقيتيها عندك بتعدي واستسهلتيها ..مش هتلاقي عندك اي مشاكل بس لما تنزلي الموقع علي النت هيبقي في مشاكل كتير اوي بالنسبة للمتصفحين..
انما لو كل حاجة مكتوبة صح ..ايا كان نوع البراوزر هيفهمها..يبقي نخلينا في الأضمن أحسن...

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

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

كود<command name attribute="value" attribute="value">

وخدنا امر البودي واتنين من الاتربيوتس بتوعه….:textوbgcolor
طب لو انا عايز احط صورة تكون خلفية الموقع؟؟؟
يعني صورة عندي علي الكمبيوتر وعايز احطها خلفية للموقع بتاعي….
الاول نتفق علي حاجة مع بعض…
خلي شغلك كله في فولدر خاص بيه لاسباب هنعرفها دلوقتي ان شاء الله..
يعني قبل متعمل أي موقع او أي صفحة افتح new folder وسميه زي متحب وتدخل جواه وتفتح بقي صفحة ال notepad وتكمل شغلك…عشان ننظم الشغل شوية والسبب هيتعرف حالا ان شاء الله….
لما انا بحب احط صورة في الخلفية بجيب الصورة دي واحطها في نفس الفولدر ده ..يعني جنب صفحة ال ntepad
وبعدين وانا بكتب في صفحة ال notepad بقولله في عندك صورة جنبك حطهالي في الخلفية…
يبقي عرفنا ليه بنعمل الشغل كله في فولدر مخصوص …وايضا لاننا كمان أي صوت او فيديو او فلاش او أي حاجة هنحطها في الموقع هتتحط بنفس الطريقة..هنحطها جنبه في نفس الفولدر ونقولله واحنا بنكتب في حاجة معينة عندك جنبك حطهالي هنا في الموقع….
بالنسبة لصورة الخلفية دي بقي…
ليها اتربيوت بيتحط في البودي..

كود<body text="black" background="the name of the pictrue">

وهنا شوية ملاحطات….
انا مكتبتش ال bgcolor هنا وانا قاصد …واحنا قلنا ان ده طبيعي …مش لازم اكتب كل الاتربيوتس..بكتب بس اللي انا محتاجه..وممكن مكتبش ولا اتربيوت خالص…
والملاحظة التانية…ان انا لو كنت كتبتها هنا ..ايه اللي كان هيحصل…لما اكتبله لون الخلفية واكتبله صورة يحطها في الخفية هو هنا هيعمل ايه؟؟
مش يحط اللون خالص ..هياخد بس الصورة ويحطها ويطنش اللون خالص….وعشان كده انا مكتبتوش وريحت دماغي….
الملاحظة التالتة….ان وضع صورة في الخلفية ممكن يعجبك دلوقتي انما في التطبيق العملي مفيش حد خالص بيعمل موقع ويحط صورة في الخلفية والسبب: ان الصورة بتبقي فيها حتت غامقة وحتت فاتحة وده هيؤدي الي ان بعض الكلام ممكن ميظهرش…يعني لو انا عامل الكلام كله لونه ازرق..والصورة فيها حتة سودة…يبقي الكلام المكتوب في الحتة دي مش هيبان…
الملاحظة الرابعة…… ازاي بكتب اسم الصورة؟؟؟؟
لنفرض ان عندي صورة عايز احطها في الخلفية اسمها مثلا egypt.jbg
بكتبه كده

كود<body background="egypt.jbg">

وطبعا لازم اكون حاطط الصورة جنبها في نفس الفولدر….
وفي طريقة ممكن محطهاش جنبه ومن أي مكان عالجهاز اخليه يحطها بس رخمة وطويلة ..فخلينا في السهل احسن ..وكمان ده يخلي الشغل منظم …
يبقي أي حاجة هنحتاجها هنحطها في نفس الفولدر ..أي صورة ..فيديو..فلاش..او أي حاجة…
فاضل ملاحظة كمنا ابقوا فكروني اقولهالكم بعدين ان شاء الله عشان هيه حلوة ..بس بلاش اتقل عليكوا دلوقتي…
وكده خدنا 3 اتربيوتس للبودي وفاضل واحد هناخده بعدين ان شاء الله…
ندخل بقي في الشغل جوه البودي….
احنا قلنا اننا ممكن احط في الموقع بتاعي صور وصوت وفيديو وفلاشات وكلام (data)
هنمسك واحدة واحدة ونعرف ازاي نحطها وازاي نلعب فيها زي ماحنا عايزين…
بس قبل مناخد دول في شوية اوامر عامة بتتحط في بداية البودي بتسهل علينا كتير….
اول حاجة..المشكلة اللي قابلت حضراتكم كلكوا…وهيه ان الكلام اللي بتكتبوه كله بيظهر ورا بعضه …
نعرف الاول ايه سببها وبعدين نعرف ازاي نحلها…
سببها ان البراوزر وهو بيترجم المكتوب مبيفهمش ان انت عملت enter او سبت مسافة …
يعني انت لو كتبت كلام وضغطت مسافة وقعدت ضاغط عليها شهر وبعدين كتبت كلام تاني ..هيطلعك كله ورا بعضه ومش هيعبرك …
وبرده لو عملت 100 enter هيطلعه كله جنب بعضه ولا هيعبرك..
بمعني تاني هو اكتر حاجة بيفهمها في المسافات والانترات مقدار مسافة واحدة بس ايا كنت المسافات والانترات المكتوبة في السورس اللي حضرتك كاتبه…
طب حل المشكلة دي ايه؟؟؟؟
هيه ليها حلين..واحد رخم اوييييييي وملوش لازمة والتاني سهل اويييييييييييييبس انا هقول الاتنين عشان عشان تبقوا عارفين كل حاجة ولسبب تاني كمان هتعرفوه بعدين ان شاء الله…
الحل الرخم:
باستخدام الامر<br>
الامر ده معناه enter
هو اول مبيشوفه بيفهم ان انت قصدك تقولله اعمل انتر هنا …يعني انا لو حتي كتبت كلام في سطر واحد كله وفي النص كاتب<br> هيكتب كل واحد منهم في سطر….
وعلي فكرة الامر ده مش بيتقفل…ليه؟؟؟فكر شوية كده وانت تفهم بعقلك..احنا قلنا اننا بنقفل الاوامر ليه؟؟عشان نعرفه نهاية تنفيذه للامر ده فين…يعني لو اسم صورة ببدا اكتب الصورة وبعدين اقفل بيعرف ان خلاص اسم الصورة خلص..
انما هنا هو هينزل سطر وخلاص..هقولله يقف علي ايه بقي…يعني مش محتاج يتقفل…وطبعا ممكن اكتبه مرتين يسيب سطرين فاضيين وهكذا ..زي محضرتك تحب….
طيب مشكلة المسافات…
بنكتب كده بالظبط
كود&nbsp
بيفهم اننا كده بقولله سيب مسافةولو كتبتها مرتين يعني بقولله سيب مسافتين…
ودي غريبة شوية في انها مبتقفلش وكمان مبنحطهاش بين علامة اكبر من واصغر من …بتتكتب زي ماهي كده وهو بيفهم ان انا قصدي اقولله سيب مسافة…
والعلامة الغريبة اللي فيها دي 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>

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