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

وانتا طيب و كل اعضاء المنتدى ان شاء الله

جزالكم الله خير اخواني ونحن متحمسين للدروس

و لكن لي سؤال

هل ستعيدون نفس الدروس السابقة ( دروس HTML )

اقتباس

وهنبدأ من تحت الصفر

ام ستقومون باستكمالها

على كل الحوال نحن جميعا بانتظاركم و انتظار الدروس

و كل عام و الامة الاسلامية بخبر

هو معلش ياأخ ابو الفؤاد احنا هانبتدي الاول لان احنا عايزين يبقى تفاعل مع الاعضاء مش زي المرة

اللى فاتت يعني الاعضاء يقروا الدرس ويطبقوا ونرد على اسئلتهم

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

بتاعي ممكن تنزلها

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

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

يجب ان يعلم كل متعمق في هذا الموضوع اولا ما معني كلمة server وكلمة browser...

دعوني ابدا من الوراء قليلا للتوضيح

ما هو مفهوم شبكة الانترنت بالمعني العلمي؟؟؟

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

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

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

..فما هو الحل في هذه المشكلة وما هو معني الانترنت الان؟؟

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

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

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

كل هذه المشاكل كان لابد لها من حل....

من هنا ظهرت كلمة ال server كحل لكل هذه المشاكل....فما معناها؟؟

المعني الحرفي لكلمة server يعني خادم...."خادم الانترنت"

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

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

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

ولذلك فان كل السيرفرات متصلة ببعضها البعض في شبكة كبيرة تعرف بشبكة الشبكات وهذا هو الانترنت

"شبكة الشبكات"

..

كيف نطلب معلومات من السيرفر او نستقبل منه معلومات؟؟؟

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

وهذا ما سندخل اليه أنفا ان شاء الله لمعرفة المزيد عنه....

ارجو ان اكون قد أفدتكم...

وكل سنة وانتو طيبين ...

احنا حطينا درس خفيف وصغير النهاردة عشان بس رمضان لسه بادئ ... وعامل شغله معاكو اكيد :wacko: :wacko:

بس بعد كده مفيش الكلام ده :angry:

:D

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

الدرس الثاني

ما هي لغة ال 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> هيكتب كل واحد منهم في سطر….

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

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

طيب مشكلة المسافات…

بنكتب كده بالظبط

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

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

والعلامة الغريبة اللي فيها دي 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>

دول كانوا امرين بنكتبهم في الاول يسهلولنا الشغل جوه …

نبدا نتكلم عن الكلام اللي هنكتبه في الصفحة…

وازاي نلعب فيه براحتنا…

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

وعلي ماجهزه…عايز من حضراتكم حاجة….

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

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

فبما ان حضراتكم خلاص فهمتوا الشرح ..يبقي كل اللي انتوا محتاجينه الاوامر والباقي خلاص اتفهم…

يبقي كل واحد يجيب ورقة ويكتب فيها الاوامر بس …بالطريقة اللي تريحه…

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

وربنا يوفقكم

السلام عليكم ..

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

في الجامعة .. ولكن لم نبدأ بعد في الأوامر للغة html .. كان شرحا ممتعا والله يعطيكم العافية :rolleyes:

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

فأتمنى منكم قدر استطاعتكم أن تكتبوا بالفصيح .. :unsure: حتى يسهل على القارئ العربي

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

( من المتابعين ولكن بصمت )

وتقبلوا رجائي بكل صدر رحب ..

أخوكم ..

في انتظار الدروس القادمة ..

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

لم أشاهدها ؟؟ هل هناك خطأ ما مثلا أو أن الصورة حجمها كبير ؟؟

وشكرا ..

الأخ العزيزITCE@UOB نشكرك على متابعتك لينا

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

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

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

لا طبعا لم أقصد أن تغيروا كل الدروس السابقة فهذا شي صعب :^)

.. ولكن بالإمكان مرعاة ذلك في الأيام القادمة بإذن الله ..

على العموم عذركم مقبول :)

و مشكلة الصورة اتحلت .. لكن كيف نترك مسافة بين صورة على اليمين وصورة على الشمال .

أو ترك مسافة بين بوكسين ؟؟

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

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

طيب مشكلة المسافات…

بنكتب كده بالظبط

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

ممكن تحط كود المسافات بين الصور

عايزين مذاكرة كويسة :angry:

ولا ايه :D

الدرس السادس

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

قلنا اننا ممكن نحط كلام-صور………

وهنبدا بالكلام (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 فاضل فيها شوية حاجات

ويارب يكون الكلام واضح

------------------

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

شريف عفيفى كتب:

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

←

يس كده يا سيدى انتا تأمر

<html>
<head>
<title>
راس الصفحه
</title>
</head>
<body bgcolor="red" text="white">
<p align="right">
هييييييييييييه عملت موقع
</p>
</body>
</html>

الف مبروك عملت موقع

روح بقى علىwww.geocities.com

واعمل حساب او ادخل بحساب Yahoo عليه

وادخل الfile manager و upload ملف الhtml

الدرس السايع

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

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

انا عايز اكتب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>

كده هتظهر الصورة بالحجم الصغير ولما يضغط عليها تفتح الصفحة الموجود فيها الصورة بالحجم الكبير…

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

يعني مثلا انا هحطله صورة كمبيوتر اول ميضغط عليها تفتحله صفحة في معلومات عن الكمبيوتر…انتوا خلاص عرفتوا الطريقة…

وطبعا مننساش حاجة مهمة اويييييييييييييييييييييييييييييييييييييييييييييييي ي

وهي اني لازم اربط بين الصفحات بتاعتي كلها باستخدام اللينكات دي…

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

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

وبرده لما يفتح كل صورة من الصور يلاقي لينكين:

لينك اسمه العودة للصفحة الرئيسة ولينك اسمه ارجع لصفحة الصور…

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

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

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

ولو في أي مشكلة اسال .

--------------

الدرس التاسع:

عرفنا عن اللينك حاجات كتير…

وهنزود حاجتين كمان انهاردة ان شاء الله..

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

ازاي نعمل كده؟؟؟

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

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

فاللي بنعمله في الحالة دي اننا بندي للحتة دي اسم"وهنعرف دلوقتي ازاي" وبعدين نقولله روح للحتة اللي اسمها كذا لما يضغط علي الينك ده…

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

ازاي نسمي جزء معين؟؟

لنفرض ان اول كلمة في الصفحة مكتوبة هي كده:welcome in our website

هكتبها بالطريقة دي<a name=”this”>welcome in our website</a>

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

واجي وانا بعمل الللينك اقولله كده:

<a href="mostafa.htm#this>highest point in this page</a>

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

طب ليه انا قلتله اسم الصفحة؟؟طب ماقولله وخلاص اسم الحتة االلي هيروحلها….

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

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

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

<body link="red" alink="black" vlink="green>

link دي بتحدد لون أي لينك طبيعي في الصفحة

vlink بتحدد لون اللينك اللي اتفتح قبل كده…وهي اختصار ل visited link

alink بتحدد لون اللينك اللي انت واقف عليه بتضغط عليه حالا… ودي اختصار ل active link

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

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

لادراج فيديو او فلاش:

<" "=embed src=" " width=" " height>

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

لادراج صوت:

<bgsound src=name of the file>

كده الصوت ده هيشتغل لوحده علطول مع الموقه اول ميفتح…

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

هيه دي استخدام اللينك الاخير اللي كنت بقول عليه من شوية:

<a href="name of the file">download sorat el baqara</a>

كده اول ميضغط علي اللينك هيعملله داون لود علي الجهاز بتاعه…

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

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

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

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

الاول في امرين بسيطين كده:

الامر <marquee>………..</marquee>

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

الامر <hr> بيعمل خط مكان متكتبه…خط بعرض الصفحة..ده بتلاقيه في المواقع دايما في اولها خالص او في اخر الصفحة…

وطبعا بدام هو هيعمل خط وخلاص يبقي مبيتقفلش…

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

width-size-color-align-noshade

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

فاضل كده في اللغة دي كلها حاجتين مهمييييييييين ينظموا الصفحة كلها :

tables-frames

ال tables :

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

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

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

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

أي جدول في الدنيا عبارة عن صفوف افقية واعمدة راسية …

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

ازاي بقي تعمل الجدول ده وتظبطه؟؟؟؟؟

الامر <table>

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

الامر <tr> صف

الامر<td> عمود

منظر لجدول بسيط تفهموا منه طريقة عمل الجدول:

<table>
<tr>
<td>…………………………</td>
<td>…………………………..</td>
</tr>
<tr>
<td>…………………………</td>
<td>…………………………..</td>
</tr>
</table>

tr في ااول فهمته اني شغال في الصف الاول…وكتبت جواها td يبقي انا شغال في العمود الاول فيها..او الخانة الاولي فيه يعني..

وخلصت كتبابة فيها وقفلتها وفتحت الخانة التانية فيه وخلصت وقفلتها وبعدين قفلت ال tr يبقي خلصت الصف الاول ودخلت في التاني وكده….

ومينفعش اعكس واكتب العمود واقسم جواه الخانات ..هما عملوها نظامها كده بس..

<table>--<tr>-<td>

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

لو انا عايز عمل صفحة يكون فيها فيلمين فيديو وشغالين جنب بعض…كل واحد شغال في نص الصفحة..

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

وطبعا مش دي بس الحاجة الوحيدة..بس دي جت في دماغي دلوقتي..

نعرف بقي ازاي نتعامل مع الجدول ده ونظبطه.

او بمعني تاني الاتربيوتس بتاعة الجدول..

الاتربيوتس بتاعة الامر <table>:

border بيحدد حجم البوردر لو انت عايز تخليه جدول طبيعي والبوردر بتاعه ظاهر في الصفحة..لو مكتبتوش مش هتبقي البوردرز ظاهرة…وبتكتب فيها أي رقم 1-2-3-5-6 زي متحب

width بتحدد حجم الجدول كله هيكون اد ايه..وبعد كده لسة هنعرف ازاي نحدد حجم كل خانة فيه…

height بتحدد طوله..

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

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

bgcolor بتحدد لون خلفية الجدول لو انت عايز تعملله خلفية..

align بتحدد الجدول هيبدا من علي اليمين ولا الشممال ولا في النصright-left-center

..

الامرين tr و td لهم شوية اتربيوتس:

align لتحديد اذا كان الكلام جوه الصف ده كله هيبقي من اليمين ولا الشمال ولا في النص"right-left-center”

valign لتحديد الكلام جواه هيكون من فوق خالص ولا في النص ولا تحت خالص"top-bottom-middle”

طبعا ممكن تقول دلوقتي طب منا الحاجات دي محددها للجدول كله من فوق خالص…

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

height-width-bdcolor

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

وجرب تدخل بينها وبين بعضها….

ناقص حاجة واحدة بس في الجداول:

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

ودي لها اتربيوت في ال td

اسمه colspan و rowspan

لما انا احب اعمل خانة بحجم خانتين لو بالعرض بقولله colspan=2 ولو بحجم 3 خانات بقولله colspan=3 وكده…

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

والامر rowspan عشان لو عايز خانة بحجم خانتين بالطول او بحجم تلاتة..

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

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

ودي هتلاقي فايدتها دايما لو انت مثلا هتحط فلاش او فيديو وعايز تحط حاجة جنبه…مش هتعرف تعلملها الا بالجدول….

كده ناقصلنا ال frames ونبقي كده خلصنا كل حاجة في البودي.وناخد الحاجات اللي قلنا عليها هتتقال في الخهيد اخر حاجة خالص ونبقي خلصنا خالص ان شاء الله…

يارييييييييييييييت تتدربوا علي ال tables كويس….

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

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

ياريييييييييت تتعلموا فلاش… هتلاقوه بيعمل حاجات راااااااااااااااااااائعة ومش طويل …… وهتستفيدوا بيه جداااااا في الموقع…

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

--------------------

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

هما 3 امثلة

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

المثال التاني لفكرة في دماغي وعايز انفذها بالجدول…هيكون تنفيذها ازاي؟؟عشان الصورة توضح اكتر…

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

المثال الاول :

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

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

<HTML><center>
<table border=3 width=500 height=300 cellspacing=2 cellpading=2 bgcolor=yellow>
<caption>الاهلي"قاهر العمالقة"</caption>
<tr align=center bgcolor=green>
<td colspan=2>عصام الحضري </td><td colspan=2>اكرامي</td></tr>
<tr align=center>
<td>اسلام</td><td>شادي محمد-السيد</td><td>وائل-عماد النحاس</td><td>عبد الوهاب</td></tr>
<tr align=center>
<td>حسن مصطفي</td><td colspan=2>ابوتريكة</td><td>شوقي</td></tr>
<tr align=center><td>بركات</td><td colspan=2>عماد متعب</td><td>كاستللو</td></tr>




</center>
</HTML>…..

عايزكوا تدرسوه كويس….

المثال التاني….

<html>
<body bgcolor=green>
<pre><basefont size=7>
<center><table>

<tr align=center>
<td> اكرامي</td></tr><table>
<table width=400 height=100>
<tr align=center><td colspan=4>النحاس</td><td colspan=4>شادي</td></tr></table>
<table width=600>
<tr><td width=300>اسلام</td><td align=right>محمد عبد الوهاب</td></tr></table>
<table width=250><tr align=center><td>شوقي</td><td align=right>حسن مصطفي</td></tr></table>
<table height=100><tr><td>ابو تريكة </td></tr></table>
<table width=700>
<tr align=center><td width=350>بركات</td><td>عماد متعب</td></tr></table>
<table><tr><td>كاستللو</td></tr></table>


</center>
</pre></body>
</html>

…

انسخه كده وشوفه….

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

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

ادرسوه كويييس

المثال التالت:

\

<html>
<pre>
<center>welcome in my website</center> 
<hr>

<table width=800><tr align=center bgcolor=#ccccff>
<td>المنتدي</td><td>اتصل بنا</td><td>جديدنا</td><td>فلاش</td><td>html</td></tr></table>


<marquee>we hope u enjoy ur time with us</marquee>
<table>
<tr align=center>
<td height=300>
مواقع صديـقـة<br>
تصويتــــات<br>
المــنــتـدي<br
اخـــر الاخبار<br>
بــــحـــث</td>
<td width=800><b>do you.....???<br>
want to learn html?<br>
want to learn flash?<br>
want to ask us to add a new course?<br>
want to tell us at some problem facing u?<br>
ارسل رايك واقتراحاتك
</b></td></tr></table>



</pre>
</html>

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

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

-----------------------

ممممممممممممممممممممم

شكرا جدا هاميس علي مجهودك ده وان شاء الله ف ميزان حسناتك .. ;) ;)

وعايزين مشاركات اكتر ياشباب :rolleyes: :rolleyes:

سوري ياجماعة على التأخير ( ده لو كان فيه جماعة أصلاً ) معلش اصلي حاسة ان الدروس دي بحطها لنفسي :D :D :D

يالا ماعلينا

الدرس العاشر:

FRAMES

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

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

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

لما بكون عايز اعمل صفحة frames شكلها بيبقي مختلف شوية عن لصفحات اللي احنا عارفينها…

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

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

والامرده اسمه <frameset>

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

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

يعني انا عملت صفحة عادية اسمها mostafa.htm حطيت فيها فلاشاية جميلة وصفحة تانية سمها r.htm حطيت فيها شوية لينكات..وصفحة تالتة فاضية اسمهاf.hm وعايز احطهم كلهم في صفحة واحدة ..تكون الفلاشاية فوق..واللينكات تحت علي اليمين..والصفحة الفاضية تكون تحت في النص…بحيث اني كل ماضغط علي لينك من اللينكات اللي في الصفحة اللي علي اليمين يحمل في الصفحة اللي في النص وبقيت الصفحة ميتغيرش يفضل ز ماهو….

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

الامر :

<html>
<frameset>………………</frameset>
</html>

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

في الاول بكتب الامر frameset وبكتبله في اتربيوت بيعرفه ا لصفحة دي هتتقسم كام اطار..وبالطول ولا بالعرض…

<frameset rows=30%,70%>

كده هيقسمها صفحتين بالعرض..اللي فوق هتكون 30% م الصفحة واللي تحت 70%

وبعدين هنزل تحت واقولله الصفحة اللي هتحطها فوق موجودةعندك في الفولدر ده اسمها كذا..روح خدها وحطها هنا..والصفحة اللي تبقي تحت اسمها كذا……ودي بالامر <frame>

لو عايز اقسمها بالطول هقولله بدل rows الاتربيوت cols

<frameset rows=20%,80%>
<frame src="mostafa.htm">
<frame src="r.htm">
</frameset>

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

انا قسمتله ا لصفحة 30% فوق و70% تحت..هاجي في ال70% اللي تحت دول واقولله قسمهم تاني الي 20% علي اليمين و80% علي الشمال بنفس الطريقة..واقولله خلي علي الشمال الصفحة الفاضية دي وعلي اليمين صفحة اللينكات…

بالمنظر ده:

<frameset rows=30%,70%>
<frame src="mostafa.htm">
<frameset cols=20%,80%>
<framesrc="f.htm">
<frame src="r.htm">
</frameset>
</frameset>

هو مفروض بعد ماكتب الصفحة الاولي اقولله اسم الصفحة التانية…هو لقاني كاتبله قسملي 80% و20% ..هيروح منفذ ده علي الصفحة التانية علطول اللي هي مفروض تحت …

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

قبل ماقول الاتربيوتس عايز اقول حاجة انا كنت ماجلها شوية عشان متحسوش ان الاسامي رخمة وكتير…

اللغة دي اساسا مفيهاش حاجة اسمها امرخالص…

الاسم الصح (وسم) ..اللي احنا كنا بنقول عليه امر اسمه الصح سم..وبالانجليزي tagبس انا كنت بقوله كده بس عشان متهيالي ان امر اوضح شوية وعشان متحسوش ان الاسماي كتير..بس دلوقتي خلاص انتوا ماشاء الله بقيتوا تمام اوي ي

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

الاتربيوتس بتاعت الوسم frameset

الاتربيوت border

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

الاتربيوت bordercolor يحدد لون البوردر لو انا عايز اعمل بوردر…

الاتربيوت framespacing:

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

الاتربيوت rows و cols وخدناهم قبل كده...

كده خلصنا الاتربيوتس بتاعت الوسمframeset

اتربيوتس الوسم frame

الاتربيوت marginheight والاتربيوتmarginwidth

جربوهم كده واكتبوا في كل واحدة أي رقم هيسيب مسافة بمقدار الرقم اللي انت حددته ده من فوق ومن تحت في الاتربيوت marginheight ومن علي اليمين والشمال في الاتربيوت marginwidth …

الاتربيوت bordercolor

والاتربيوت framespacing بنفس الطريقة بتاعتهم في الوسم frameset… ووظيفتهم هنا عشان لو انت عامل فريمات كتير وعايز تخلي واحدمختلف عن التاني ممكن تغيرهم من هنا…

باقيلناهنا في الوسم ده 3 اتربيوتس مهمين جدااااا:

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

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

الاتربيبوت scrolling ..وبتقول فيها يساوي yes او no …ده عشان انت لو عملت صفحة وكانت اطول من الحجم اللي انت عايز تحطها فيه هتلاقي ظهر scroll في الجنب عشان تنزل منه حتي لو كانت الصفحة دي مكانه في النص هتلاقي ال scroll ظهر في النص..وده شكله بيبقي سخيف اوي ي ي …

فانت عشان تلغي دي بتقولله scrolling=no مش هيظهر ال scroll ده

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

ملحوظة: الscroll ده اللي هو الخط اللي بيبقي في جنب الصفحة وبتشده بينزل الصفحة تحت او يطلعها فوق…

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

الاولي : ان في بعض البراوزرز(كلمةبراوزر بالعربي معناها متصفح ) لا تدعم موضوع الفريمز ده…

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

طب الاول ليه هيه هتبان بيضا ..مش المفروض انه بدام مفهمش الكلام ده علي انه اوامر يظهره في الصفحة بنفس شكله؟؟؟

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

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

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

الوسم

<noframes>……………..</noframes>

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

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

هيه المسالة كلها اننا بنضحك علي البراوزر مش اكتر….

لما بنكتب الامر ده… المتصفح اللي بيدعم الاطارات فاهم الامر ده وعارف انه مش له عشان كده مش هينفذه…

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

هيكمل بعده لقي كلام يروح ظاهر الكلام ده في الصفحة ….

وبعدين يلاقي اغلاق الامر وهو برده مش فاهمه يروح مطنشه…

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

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

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

<a href=………….. target=..>learn html</a>

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

من الحاجات دي:

top كده هيحمل في الصفحة كلها عادي

self هيحمل في نفسالصفحة اللي فيها للينك وبقية صفحة الفريمات مش تتغير وهتبان طبيعية…

blank دي هتخليه يحمل في صفحة جديد خالص وصفحة الفريمات مفتوحة قدامك زي ماهي….

والاتربيوت د جميل وممكن تستخدمه من غير فريمات خالص..وانت بتعمل أي لينك عادي تقولله target=blank لما يضغط علي اللينك ده هيحمل في صفحة جديد خالص والصفحة القديمة مفتوحة زي ماهي…

parent هيحمل في الصفحة الام للصفحة اللي فيها اللينك ده…يعني ايه؟؟

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

ولما قسمت الجزء اللي تحت الي جزئين منهم الجزء اللي علي اليمين لينكات…بقت كده الجزء اللي تحت ده ام لكل جزء من الحزءين دول…اعتقد ان كده اتفهم المقصود…

وداعافريمز……ارجو انكوا تكونوا فهمتوها كويس يارب….

الخرائط الصورية:

لو انا عامل صورة وعايز اعملها لينك..دي سهلة…. طب لو انا عايز اخلي حتة معينة من الصورة دي بس هو الليكون لينك… يعني انا مثلا عندي صورة فيها رسومات كتير ومن ضمن الرسومات دي في مربع صغير مكتوب فيه مثلا (اطفالنا في فلسطين)

انا عايز اخلي المربع ده بس عبارة عن لينك لما يضغط عليه يوديه لاي صفحة تانية انت عاملها… بعملها ازاي؟؟

وانا بكتب الصورة بقولله كده:

<img src=……… usemap=#mostafa>

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

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

<map name=mostafa>

<areashape=……….coords=………….href=http://www......com>

وبكتب في ال areashape شكل المنظقة اللي انا عايزها تبقي لينك هل هي دايرة ولا مربع ولا مضلع…

circle-rect-poly

وفي ال coords بكتبله ابعاد الدايرة دي اوالمربع ده…… يعني بقولله المربع د مكانه فين بالظبط في الصورة …

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

href بكتب فيها اسم الصفحة للي عايزه يحملها لما يضغط علي الحتة للي انا حددتهاله دي…

<map name=mostafa >
<areashape=rect coords=30,20,0 href=…………></map>

درس انهارده كان طويل شوية ومليان حبتين…يارب تكونوا فهمتوه كويس…

الدرس الاخير....

هو في جزء بسيط فاضل اسمه ال forms بس انا مش عايز اقوله خالص لانه مش هيكون مفيد ابدا دلوقتي…

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

بسانا هقوللكوا فكرة بسيطة جدا عنها عشان لو لقيتوا كلمة forms او لو لقيتوا الوسم form في أي حتة….

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

في الاول خالص انا كنت قلت ان في وسم ناقص في وسوم الهيد وكنت قلت هناخده في اخر درس….

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

هتمشي في الشارع كل متقابل واحد تقولله والنبي ابقي خش ع الموقع ده؟؟

اكيد في طرق تانية…

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

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

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

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

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

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

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

هو الوسم ده هدفه ان لما حد يدخل علي مواقع البحث علي النت ويعمل search ويكتب مثلا html بيطلعله في النتايج كل المواقع اللي بتتكلم عن الكلمة دي……مواقع البحث بتتعتمد في بحثها علي الوسم اللي بنتكلم عنه…

الوسم ده اسمه meta

مواقع البحث دي عبارة عن شبكة عنكبوتية بتتغلغل في السورس بتاع كل المواقع تدور علي الوسم meta

وتشوف ايه المكتوب فيه ويتخزن عندها ان الموقع ده بيتكلم عن كده لان احنا بنكتب فيه الموضوع الللي بيتكلم عنه الموقع…

طريقة كتابته:

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

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

هنكتب الوسم هيد وبعدين تايتل ونقفل تايتل وبعديننكتب meta ونخلصه ونقفله وبعدين نقفل الهيد…

بس meta مش بيتكتب مرة واحدة بس..بيتكتب اكتر من مرة ..كل مرة لهدف من اهدافه…

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

بنعرفه اللي بنكتبه بالاتربيوت name

يعني هكتب كده المنظر ده :

<meta name=keywords content=html,flash,courses>

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

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

<meta name=decription content=html,flash,courses>

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

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

<meta http-equiv="Content-Type" content="text/html" charset=iso-8859-1">

وده يتحط يتحط في الهيد بتاع أي موقع تعملوه ان شاء الله……

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

وكده خلصت اللغة دي خالص والحمد لله....

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

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

هو طبعا حاجة عملية بسيطة خالص بره اللغة دي تماما.....

وربنا يكرمكم.....

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

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