تعلم تصميم المواقع من الصفر للمبتدئين

[size=100]تعلم تصميم المواقع من الصفر للمبتدئين


معا نتعلم تصميم المواقع من الصفر ، لا تقلق فهي ليست بالعملية الصعبة ....

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

لمن هذه الدروس ؟؟
هذه الدروس لكل من يجد في نفسه ما يحب ان ينشره والا يكبته في داخله .. لكل من يحب ان ينطلق ويبحر في سماء الانترنت الواسع ..
لكل من يحب بلاده ويحب ان يخدمه ، ويحب الا نظل بعيدين عن التكنولوجيا وعن التقدم
لكل من يرى ان مدى تقدم بلادنا مسؤليتنا كلنا امام الله

هذا الكتاب للمبتدئين وليس للمحترفين .... لمن يريد ان يبدا من البداية ....

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

ونسال الله التوفيق لنا ولكم ...








لماذا نتعلم تصميم المواقع ؟؟


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

ماذا سنتعلم في هذه الدروس ؟؟
سنتعلم لغة تدعى html ..وهي اللغة الاساسية لتصميم المواقع ، وهي لغة بسيطة

ماهي البرامج التي تحتاجها للبدء في هذه الدروس ؟
لن تحتاج لاي برنامج فكل ما نحتاجه موجود على الجهاز بدون تدخل منا ...

كل ما نحتاج اليه هو تنهيده عميقة ثم توكل على الله وابدا بسم الله


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



مقدمة

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

هناك بعض المعلومات والمفاهيم التي لابد ان نفهمها جيدا قبل ان نتطرق الي تصميم المواقع


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

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

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


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






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


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

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

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

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

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

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







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

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

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

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

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

التعليق التاني انهم عملولنا حاجة بسيطة للتلخيص ..بدل متخلي الامتداد .html ممكن تخليه .htm بس من غير حرف ال" l "

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


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

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

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

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


بتتقسم صفحة ال html الي جزاين
head و body
ال head بنكتل فيها شوية حاجات مش هتظهر ف الصفحة بس هيكون ليها تاثير على الصفحة ..
وهنعرفها ف وقتها ان شاء الله

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

لما احب اعرفه اني هكتب body الامر شكله كده
كود HTML:
<body>…………….</body>


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





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

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

<html>
<head>……………………
.........
</head>
<body>………………
…………
</body>
</html>


ملحوظة :

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




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

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

-الامر اللي بيفهم البراوزر اني بكتب عنوان للصفحة
كود HTML:
<title>………………….</title>
وطبعا لازم يكون مكتوب في الهيد مش في البودي..
كود HTML:
<html>
<head>
<title>
بسم الله الرحمن الرحيم
</title>
</head>

ده بيكتب عنوان في الشريط الازرق اعلى المتصفح ...
وبقية اوامر الهيد هناخدها قدام شوية ان شاء الله
….
قبل مندخل في اوامر البودي……
لاحظنا من الامر اللي فات ده طريقة اغلاق الامر…
بقفل الامر لما اخلص كل اللي انا عايز اكتبه فيه…يعني انا فتحت الهيد وفتحت جواها ال title ولما خلصت كتابة قفلت ال title الاول وبعدين قفلت الهيد
وهيه دي طريقة الاغلاق:- اخر حاجة بتتقفل الاول ..وبعدين اللي قبلها وهكذا لغاية منوصل لاول حاجة…كالتالي:
كود HTML:
<html>
<head>
<title>
……….
</title>
</head>
<body>
………..
</body>
</html>


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

مثال : الامر <html>
له اصية اسمها dir وهي اختصار للكمة direction بتحدد بيها اتجاه الصفحة كله هتبقى من اليمين للشمال ولا العكس
وبيتكتب في القيمة بتاعتها rtl او ltr وهما اختصار ل right to left و left to right

كود HTML:
<html dir="rtl">

اي خاصية لاي امر اسمها attribute للامر ده
كل امر له عدة attributes كل واحد منها بينفذ خاصية من الخواص بتاعة الامر ده….
وطبعا انا مش لازم كل ماكتب امر اكتب كل خواصه….هكتب منها بس اللي انا عايزه…
ولو مش عايز اكتبها خالص عادي ممكن اكتب بس اسم الامر هينفذه من غير أي خصائص
ومن الامر اللي فات هنستشف طريقة كتابة اي اتربيوت
بص علي ال attribute ده انا كتبته ازاي
كود HTML:
dir="...."
وده شكل أي attribute في الدنيا ..
بكتب اسمه وبعدين علامة = وبعدين بفتح "…" ودي shift مع حرف ال ط
وبكتب فيها قيمة او كلمة علي حسب ال attribute ده …..القيمة او الكلمة دي اسمها بشكل عام ال value


يبقي الصيغة العامة لاي امر :
كود HTML:

<commandname attribute="value" attribute="value" attribute="value">
……………
</comandname>

ملحوظة: هناك بعض الخصائص متاح ان تكتب في قيتمها ما تشاء وهناك بعضها لا يمكن ان تكتب فيها الا القيم المحددة مثل الخاصية dir للوسم html لا يمكن كتابة فيها الا rtl او ltr
خصائص الامر <body>
عشان احدد لون الخلفية ..بكتب بالمنظر ده:
كود HTML:
<body bgcolor="black">

body ده اسم الامر…
bgcolor دي اختصار لbackground color ودي واحدة من الخواص بتاعته …
واسمها attribute للامر ده…

ملحوظة: وانت بتكتب أي attribute متعملشي أي مسافة في وسطه يعني مش بالشكل ده
bg color …
لا بتبقي كلها علي بعضها كلمة واحدة bgcolor وده في كل ال attributes…
بس بنفصل بين أي attribute واللي بعده بمسافة وكذلك بين الامر وال attribute بمسافة…
كود HTML:
<body bgcolor="red">

ملحوظة : قمت بكتابة اسماء الاتربيوتس باللون الاحمر واسماء القيم باللون الاخضر حتى تسهل القراءة
تاني attribute في البودي:
عشان احدد لون الكلام …بنستخدم الاتربيوت text
كود HTML:
<body bgcolor="black" text="white">

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

ملحوظة: وانت بتنفذ ..لما تجرب امر منهم وبعدين تعمل rename وتشوف النتيجة…
وبعدين لو عايز تجرب امر تاني هتعمل ايه؟؟
مش معقول كل مرة هتطلع تعيد نفس الموضوع من الاول تاني عشان تجربه…
انت جرب اول حاجة وبعد متعملها وتعمل rename وتشوف النتيجة ..
الصفحة اللي ظهرت فيها النتيجة دي……اقف في أي حتة فيها واضغط كليك يمين واختار منها
view source
هتلاقي الصفحة دي لسة مفتوحة وفتحلك فوقها صفحة ال notepad الي انت كنت عاملها ….
غير فيها زي ميعجبك واكتب أي امر جديد… وبعدين اقفلها وقولله save
…كل ده والصفحة اللي فيها النتيجة هتلاقيها لسة مفتوحة متقفلتش…بس الكلام فيها هتلاقيه متغيرش اعمل فيها refresh من فوق خالص هتلاقي التعديلات اللي انت عملتها ظهرت فيها ..
وهكذا كل متحب تزود اي أمر أو تكون كتبت أمر ملقتش نتيجته ظهرت… ده معناه انك كاتب حاجة غلط في الامر ده…قد يكون غلط في ال spelling مثلا تعمل الطريقة دي وتبص عليه تشوف ايه الغلط فيه وتعدله …وتعمل save
وبعدين refresh
وتشوف النتيجة….


مثال على كل ما سبق



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


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

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


ونعود مرة اخرى لبقية خصائص الامر body
اتفقنا ان صيغة أي امر كالتالي:
كود HTML:
<command name attribute="value" attribute="value">

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

الاول نتفق علي حاجة …
خلي شغلك كله في فولدر خاص بيه لاسباب هنعرفها دلوقتي ان شاء الله..
يعني قبل متعمل أي موقع او أي صفحة افتح new folder وسميه زي متحب وتدخل جواه وتفتح صفحة ال notepad وتكمل شغلك…عشان ننظم الشغل شوية والسبب هيتعرف حالا ان شاء الله….
لما احب احط صورة في الخلفية بجيب الصورة دي واحطها في نفس الفولدر ده ..يعني جنب صفحة ال notepad
وبعدين وانا بكتب في صفحة ال notepad بقولله في صورة جنبك حطهالي في الخلفية…
يبقي عرفنا ليه بنعمل الشغل كله في فولدر مخصوص …وايضا لاننا كمان أي ملف صوتي او فيديو او فلاش او أي حاجة هنحطها في الموقع هتتحط بنفس الطريقة..هنحطها جنبه في نفس الفولدر ونقولله واحنا بنكتب في حاجة معينة جنبك حطهالي هنا في الموقع….
بالنسبة لصورة الخلفية …
ليها اتربيوت بيتحط في البودي..
كود HTML:
<body text="black" background="the name of the pictrue">
وهنا شوية ملاحطات….
انا مكتبتش ال bgcolor هنا عن عمد …واحنا قلنا ان ده طبيعي …مش لازم اكتب كل الاتربيوتس..بكتب بس اللي انا محتاجه..وممكن مكتبش اي اتربيوت خالص…
والملاحظة التانية…ان انا لو كنت كتبتها هنا ..ايه اللي كان هيحصل…لما اكتبله لون الخلفية واكتبله صورة يحطها في الخفية هو هنا هيعمل ايه؟؟
هيحط اللون وفوقه الصورة ..يبقى اللون مش هيبان خالص لان الصورة اللي هتبقى ظاهرة ..

الملاحظة الرابعة…… ازاي بكتب اسم الصورة؟؟؟؟
لنفرض ان عندي صورة عايز احطها في الخلفية اسمها مثلا egypt.jpg
بكتبه كده
كود HTML:
<body bacground="egypt.jpg">
وطبعا لازم اكون حاطط الصورة جنبها في نفس الفولدر….
وفي طريقة ممكن محطهاش جنبه ومن أي مكان عالجهاز اخليه يحطها بس رخمة وطويلة ..فخلينا في السهل احسن ..وكمان ده يخلي الشغل منظم …
يبقي أي حاجة هنحتاجها هنحطها في نفس الفولدر ..أي صورة ..فيديو..فلاش..او أي حاجة…

وكده خدنا 3 اتربيوتس للبودي وفاضل واحد هناخده ان شاء الله بعد شوية لانه معتمد على حاجة هناخدها جوه الاول .
ندخل بقي في الشغل جوه البودي….
قلنا اننا ممكن نحط في الموقع صور وصوت وفيديو وفلاشات وكلام (texts)
هنمسك واحدة واحدة ونعرف ازاي نحطها وازاي نلعب فيها زي ماحنا عايزين…
بس قبل مناخد دول في شوية اوامر عامة بتتحط في بداية البودي بتسهل علينا كتير….
اول حاجة..المشكلة اللي قابلت حضراتكم كلكوا…وهيه ان الكلام اللي بتكتبوه كله بيظهر ورا بعضه …
نعرف الاول ايه سببها وبعدين نعرف ازاي نحلها…
سببها ان البراوزر وهو بيترجم المكتوب مبيفهمش ان انت عملت enter او سبت مسافة …
يعني انت لو كتبت كلام وضغطت مسافة وقعدت ضاغط عليها شهر وبعدين كتبت كلام تاني ..هيطلعك كله ورا بعضه ومش هياخد غير بس مسافة واحده …
وبرده لو عملت 100 enter هيطلعه كله جنب بعضه ولا هيعبرك..
بمعني تاني هو اكتر حاجة بيفهمها في المسافات والانترات مقدار مسافة واحدة بس ايا كنت المسافات والانترات المكتوبة في السورس اللي حضرتك كاتبه…
طب حل المشكلة دي ايه؟؟؟؟
هيه ليها حلين..واحد رخم شوية بس هنلاقيله استخدام قدام والتاني
الحل الرخم:
باستخدام الامر<br>
الامر ده معناه enter
هو اول مبيشوفه بيفهم ان انت قصدك تقولله اعمل انتر هنا …يعني انا لو حتي كتبت كلام في سطر واحد كله وفي النص كاتب<br> هيكتب كل واحد منهم في سطر….
وعلي فكرة الامر ده مش بيتقفل…ليه؟؟؟فكر شوية كده وانت تفهم ..احنا قلنا اننا بنقفل الاوامر ليه؟؟عشان نعرفه نهاية تنفيذه للامر ده فين…يعني عايز اغير لون الكلام بقولله غير لون الكلام وابدا اكتب ف الكلام وبعدين اقفل بعد نهاية الكلم ....
انما هنا هو هينزل سطر وخلاص..هقولله يقف علي ايه بقي…يعني مش محتاج يتقفل…وطبعا ممكن اكتبه مرتين يسيب سطرين فاضيين وهكذا ..زي محضرتك تحب….
طيب مشكلة المسافات…
بنكتب المنظر ده كده بالظبط
كود HTML:
&nbsp;

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

الحل السهل…
الامر <pre>
بكتبه في اول البودي واقفله في اخره …هو بيخلي البراوزر يفهم المسافات والانترات المكتوبة كلها زي محضرتك كاتبها في السورس…بالمنظر ده:
كود HTML:
<html>
<head>
……………………
</head>
<body>
<pre>………………
……..
</pre>
</body>
</html>
وتريح دماغك وتكتب كل حاجة هتظهر زي مانت كاتبها من غير br ولا غيرها
كده خدنا من الاوامر العامة اللي هنحطها في بداية البودي الامر <pre>
تاني امر ممكن نحتاج نحطه في البداية…
الامر <blockquote>
ده بيخلي منظر الصفحة احلي….عن طريق ان هو بيسيب مسافات في الجنبين…يمين وشمال….يعني متلاقيش الكلام بادئ كده لازق في حرف الصفحة علي اليمين والشمال…بيسيب مسافة صغيرة كده عشان يبقي شكلها كويس….
طبعا انت ممكن تقعد تعملها لوحدك فغي بداية كل سطر تسيب مسافة..بس الامر ده يريحك…واكتب عادي من اول السطر وهو هيسيب مسافة في كل السطور وكلها اد بعضها يبقي شكلها احلي..
وطبعا ممكن تكتبه مرتين لو عايز تضاعف المسافة المتروكة….وبرده بيتقفل في اخر الصفحة….
كود HTML:
<html>
<head>
……………………
</head>
<body>
<pre>
<blockquote>
………………
……..
</blockquote>
</pre>
</body>
</html>


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

قلنا اننا ممكن نحط كلام-صور………
وهنبدا بالكلام (texts):
قلنا كمان ان الكلام عشان احطه مش محتاج أي امر… يعني هكتب الكلام وخلاص وهو هيظهر طبيعي زي مانا كاتبه …
طيب..لو انا عايز احدد صفات معينة في بعض الكلام…؟؟؟ زي اللون او الحجم او نوع الخط ..
احنا خدنا قبل كده ازاي نحدد اللون بس وخلاص..وكان لون عام لكل الكلام في الصفحة….
ناخد الطريقة الخاصة واللي تقدر بيها تغير صفات كلمة معينة بس او شوية كلمات او فقرة معينة…ومش بس لونها ... كل صفاتها زي حجمها ونوع الخط المستخدم فيها
باستخدام الامر <font>
الامر ده بيعرفه ان انا هقولله حاجة ينفذها علي الكلام الجاي…
وبما انك دلوقتي فاهم يعني ايه امر ويعني ايه اتربيوت وفاليو…انا هكتب صيغة الامر كلها علي بعضها…
كود HTML:
<font color=" " size=" " face="name of the font">
طبعا مش لازم بنفس الترتيب ده…أي ترتيب ينفع عادي….
Size- : بتكت فيها حجم الكلمة يكون اد ايه ..وعندك من 1 الي 7 ..اكتب اللي يعجبك منهم وجرب وشوف..

Color : مش محتاج اتكلم عليها
Faceـ: بتكتب فيها نوع الخط اللي انت عايزه يكون ايه…
ودي ممكن تعرفها من الوورد..بتلاقي موجود فيه خطوط كتير…تجربها وتشوف الخط اللي يعجبك منهم وانسخه واعملله paste هنا او انقله….
كود HTML:
<font size="4" color="red" face="times new roman">
………………………
</font>
هينفذه بس علي الكلام الموجود هنا ..
اكيد وضح دلوقتي اوي اهمية اننا نقفل الامر…
وفي امر كمان للتسهيل اسمه
كود HTML:
<basefont size=" " color=" " face="name of the font">
ده هينفذ الكلام الي فيه علي الصفحة كلها….
وبما انه هيتنفذ علي الصفحة كلها يبقي مش محتاج انه يتقفل…
طب لو انا عملت كده
كود HTML:
<basefont color= "red">

وجيت علي شوية كلام في نص الصفحة وكتبت كده
كود HTML:
<font color="blue">

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

في بعض الاوامر غير الامر <font> بتتحكم في الكلام برده …

لو عايز تكتب عنوان … او شوية عناوين..يعني:
انا بكتب مثلا موضوع كبير له عنوان رئيسي…وتحته عناوين فرعية..وكل عنوان فرعي تحته شوية عناوين متفرعة منه….
و عشان المنظر يبقي كويس عايز العنوان الكبير خالص يبقي حجمه كبير عن الكلام والعناوين الفرعية برده اكبر من بقية الكلام بس اقل حجما من العنوان الرئيس وهكذا…
انا ممكن اتحكم في الكلام ده عن طريق الامر font size بس هتبقي متعبة شوية لو العناوين كانت كتيرة…
فهما سهلولك الموضوع ده…
عنوان يعني head
الامر بتاعه اسمه <h1>
<h2>
<h3>
يعني انا وانا بكتب العنوان الكبير اوي في الصفحة هكتبه كده
كود HTML:
<h1>بسم الله الرحمن الرحيم</h1>
العناون الفرعية منه
كود HTML:
<h2>html</h2>
وهكذا ….وقدامك لغاية h6
هو هيظبهم لوحده علي اساس ان ده العنوان الكبير ودي المتفرعة منه وكده…ويطلعهم بشكل حلو…وجرب وشوف…
شوية اوامر سريعة:
كود HTML:
<b>…………….</b>
بيخلي الخط تقيل شوية “bold”
كود HTML:
<I>……………….</i>
بيخلي الخط مائل “italic”
كود HTML:
<u>……………….</u>
بيحط خط تحت الكلام
كود HTML:
<strike>…………..</strike>
بيحط خط في وسط الكلام
كود HTML:
<big>………………</big>
بيخلي الكلام يكبر شوية
كود HTML:
<tt>………….</tt>
عشان نفهم دي بتعمل ايه:
اكتب في صفحة ال notepad الاتي:
iiiii ودوس انتر وبعدين اكتب mmmmm
وشوف المنظر…دول خمسة I ودول خمسة m بس هتلاقيهم شكلها مش حلو ومش متساويين عشان حرف الاي صغير والام كبير…
الامر <tt> تكتبه قبلهم وتقفله بعدهم يظبطهملك ويطلعلهملك اد بعض….
جرب وشوف…
كود HTML:
<center>………….</center>
بيخلي الكلام يبقي في النص…

طبعا ممكن تستعمل الاوامر دي بتداخل مع بعضها……
وده بيجي بقي بكتر الممارسة..
لو جربت الاوامر دي وشفت نتيجتها تمام ووقفت علي كده ..هتتعب لما تيجي تنفذ أي موقع…
جرب تستعمل الكلام ده كله بتداخل مع بعضه…
احنا اللي خدناه لغاية دلوقتي كله عن الكلام…
هات كده موضوع كبير واكتبه وظبط نفسك فيه…العناوين تعملها كبيرة والكلام المهم تعمله بلون مختلف وكبير شوية وكلام في ال center وهكذا …
بحيث انك تستعمل كل الاوامر الموجودة ..وجرب اكتر من مرة عشان ايدك تاخد عليهم….
وحاول يكون في تداخل شوية ……
يعني كلمة واحدة تنفذ عليها اكتر من امر وتشوف نفسك معاها…
زي كده مثلا…
كود HTML:
<font color="red" size="4">
<center><b><I><u><strike>
بسم الله الرحمن الرحيم
</strike></u></i></b></center></font>

هتتنفذ كده كل الاوامر دي علي الكلمة دي…

ملحوظة : لا تنسى اثناء تداخل الاوامر ان اغلاق الاوامر يكون بترتيب عكس الترتيب الذي فتحت به كما ي المثال السابق

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

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


الامر <p>
لو انا كتبته لوحده كده من غير أي اتربيوتس خالص…بيعمل 2 انتر…وده لانه حرف ال p ده اختصار لكلمة paragraph فانا لما بكتبه كده لوحده بيعرفه اني هبدا باراجراف جديد فيبيروح نازل 2 انتر عشان يبقي كل بارجراف لوحده مستقل…واقفله بعد ماخلص البراجراف …

الاتربيوتس بتاعته ...

:<p align= right>
بكتب هنا في خانة الفاليو دي
right –left-center
هيطلع الكلام ده في الصفحة ناحية اليمين او الشمال او في النص زي ماحضرتك كاتب… جرب وشوف


لو عايز اكتب list
يعني مثلا عايز اقول كده:
substances:
arabic
english
physics
طبعا ممكن اكتبهم كده بالمنظر ده عادي من غير مشاكل..
بس في وسيلة مساعدة للتنظيم بتقدمها اللغة دي.. …ليها امر بينظمها شوية….
اللستة اللي انا هعملها ممكن اعملها مرقمة واحد اتنين تلاتة وممكن اعملها مش مرقمة…
لو عايزها مرقمة بقولله الامر ده <ol>
وده اختصار لكلمة ordered list
ولو عايزها مش مرقمة بقولله الامر ده <ul>
وده اختصار لكلمة unordered list
وطبعا دول امرين بيتقفلوا في الاخر بعد مااخلص كتابة اللستة كلها…
بس في كمان حتة صغيرة …
هما مش بيتكتبوا كده بس…
بيتكتبوا بالمنظر ده:
كود HTML:
subjects :
<ol>
<li>arabic
<li>english
<li>phyiscs
</ol>

قبل كل item في اللستة دي بكتب 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 وتعريفها تحتها …
لو كتبتهم بايدي ممكن ميبقوش متظبطين ع بعض ويبقي شكلهم مش ظريف……
فانت جرب كده تكتبهم بالمنظر ده:
كود HTML:
<dl>
<dt>
html
<dd>
hyper text markup language
<dt>
http
<dd>
hyper text transfere protocol
</dl>

متهيالي من المثال المكتوب واضح طريقة كتابة الامر ده…
بكتب dl في الاول وبقفلها في الاخر بتعرفه اني هتب هنا تعريفات وممكن تعريف واحد عادي..
وبعدين الكلمة الكبيرة اللي عايز اعرفها بكتب قبلها <dt> ومبيتقفلش
والتعريف بكتب قبله <dd> وبرده مبيتقفلش

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



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

وبكتب هنا في الفاليو اسم الصورة… يلا جرب دلوقتي تعملها وشوف…
طلعلتلك الصورة صح؟
بس انا متاكد انها مش عاجباك..حجمها طالع كبير ..وانت عايزها اصغر شوية…او العكس
يلا بقي بعد معرفنا ازاي نجيب الصورة..نشوف ازاي نلعب فيها ونغير حجمها ونظبطها في الصفحة بالشكل اللي يعجبنا:
كود HTML:
<IMG SRC=" " width="300" height="300">

وتغير في الطول والعرض زي متحب…اكتب الرقم اللي يعجبك في كل واحدة منهم وشوف الحجم..لو مش عاجبك صغر او كبر زي متحب…
والامر <img> ده مش محتاج انه يتقفل..والسبب ان كل اللي انا عايزه منه في الامر ده كتبته بين ال< > يعني مفيش حاجة هتكتب بره والامر ده ينفذها عشان اقفله بعدها..لو في حاجة بره كنت بعد مااكتبها اقفل الامر
يبقي الامر <img> مبيتقفلش…
افتح أي موقع واقف علي أي صورة فيه واصبر شوية ..هتلاقي اتكتب كلام كده بيعبر عن الصورة..نزل من تحت الماوس …
الحركة دي بتتعمل ازاي ؟؟ وفايدتها ايه؟؟؟
لو انا مثلا حاطط صورة هرم
كود HTML:
<IMg src width=" " height=" " alt="pyramid">

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

ملحوظة : كيف تكتب مسار الصورة كقيمة للاتربيوت src ؟؟

هتقول ف ال كود الصورة ..المسار بتاعه relativley
يعني نسبة الي المكان الافتراضي اللي هو بيدور فيه ..هو ال default بتاعه بيدور ف نفس ملف الموقع ...
يبقى بفرض ان انك حاطط الصور داخل مجلد اسمه images

<img src=images\name of the picture>



طيب لو عملت فولدر رئيسي للموقع ....
وعملت جوه الفولدر ده فولدر للصور وفولدر تاني حطيت فيه الصفحات اللي انا بعملها...
يعني الصفحات اللي بعملها مش موجودة جوه الفولدر الرئيسي ..موجوده جوه فولدر تاني جواه ....
يبقي لما احب اوصفله المسار نسبيا لازم اقولله يطلع واحدة وبعدين يدخل جوه فولدر الصور ...ودي بتبقي كده :
<img src=..\pic\name of the picture>
يعني نقطتين وبعدين العلامة دي \ تطلعه واحد لفوق (كاني قلتله up )
وممكن اقولله المسار ليس نسبيا ...ولكن اقولهوله على اعتبار انه بادئ من my computer
يعني اقولله
C://mysite/images/name of the picture
بس ده هيعمل مشكلة عند نقل الموقع على السيرفر لان المسار هيتغير ...يبقى لو عملا المسار نسبي يكون افضل



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

links

قبل مناخد ازاي نحط صوت او فلاش او….
هناخد حاجة مهمة اوي وهي ازاي نحط LINK…
الاول يعني ايه لينك؟؟؟؟؟؟
link معناها بالعربي رابط ..يعني حاجة بتربطني بحاجة تانية…
يعني أي موقع في الدنيا بتفتحه…بتلاقي موجود فيه صور وكلام و…. وبتلاقي كلام موجود تحته خط بتضغط عليه يفتحلك صفحة تانية في الموقع ده …..ده اسمه لينك يعني حضرتك ممكن تعمل صفحتك وتحط فيها لينك لموقع الهوتميل مثلا… او لينك لموقع واحد صاحبك..بمجرد الضغط عليه يتحمل الموقع التاني ده ..بس دي مش الاهمية الاساسية بتاعته…الاهمية الاساسية بتاعته انك لغاية دلوقتي مكن تعمل صفحة موقع كويسة وشكلها حلو…
بس عمرك شفت موقع صفحة واحدة بس؟؟؟ اي موقع بتلاقي فيه لينكات توديك لصفحات تانية في نفس الموقع…يعني مثلا لو انا عامل موقع شخصي لنفسي…هعمل صفحة رئيسية في الاول …وبعدين هعمل لينك اسمه السيرة الذاتية ولينك تاني اسمه صور شخصية وكده…كل لينك منهم تتك عليه يوديك لصفحة تانية انا عاملها برده موجود فيها حاجات علي حسب الاسم بتاعها..
قبل منعرف ازاي نعمل اللينك ده نعرف الاول ازاي نعمل الصفحة التانية ونبقي نخلي اللينك يفتح الصفحة التانية دي..
احنا عاملين فولدر فيه الشغل بتاعنا كله…وحاططين جواه الصور والفلاشات اللي هنستعلمها في الموقع وكل حاجة تبع الموقع ده… وموجود فيه الصفحة اللي انا بكتب فيها الكلام الللي انا عايزه بلغة الاتش تي ام ال..
لما احب اعمل صفحة تانية في الموقع باجي جوه الفولدر ده برده وافتح كمان صفحة نوت باد جديدة… واعمل فيها الصفحة التانية زي مانا عايز …وبعدين باجي في الصفحة الاولي واحط لينك واقولله لما اضغط علي اللينك ده افتح الصفحة اللي اسمها كذا موجودة عندك في نفس الفولدر هنا…
وكده ممكن اعمل العدد اللي عجبني من الصفحات واحطها كلها في الفولدر ده ……واحط لينكاتها كلها في الصفحة الرئيسية…وانظم موقعي زي مانا عايز…ازاي بقي بنعمل اللينك ده؟؟؟؟؟؟؟
كود HTML:
<a href="http://www.yahoo.com">Click here</a>

تعالى نوضح المنظر الي فات ده :
كده انا قلتله لما يضغط علي اللينك ده روح للهوت ميل… وبعدين قفلت باصغر من…وبعدين ببدا اكتب اللينك اللي هيبقي ظاهر في الصفحة…يعني كده هو عرف ان اللي انا هكتبه هنا بمجرد الضغط عليه هيوديه للهوت ميل ان شاالله اكتبله هنا عفريت…اللي هيظهر في الصفحة بس هو العفريت ده واول متضغط علي العفريت ده هيفتح الهوتميل..وبعد مكتب العفريت ده بقفل الامر…
مثلا:<a href="http://www.hotmail.com " >open hotmail page</a>
كده هيظهر في الصفحة open hotmail page واول ميضغط عليها هتفتح صفحة الهوتميل..
ولو انت كتبت أي حاجة مكان open hot mail page هتظهر في الصفحة وبرده اول ميظغط عليها هتفتح الهوتميل.. حتى لو كتبت مكانها open yahoo لان انت كاتبله جوه الامر افتح الهوتميل اول ميضغظ علي الكلمة اللي انا هكتبهالك هنا ايا كانت الكلمة…اعتقد كده وضح المقصود..
ونفس الطريقة لو عايز احمل الصفحة التانية اللي انا عملتها في نفس الفولدر …لو فرضنا ان الصفحة التانية دي اسمها mostafa.htm هكتبله كده:
<a href="mostafa.htm">see my pictures</a>

ممكن عن طريق اللينكات يتعمل حاجات كتير…بس عايز تطبيق شوية منك …
احنا عرفنا دلوقتي اننا ممكن نربط بيه بين مواقع مختلفة وممكن نعمل بيه اكتر من صفحة في موقع واحد…
ممكن كمان اعمل بيه اننا ممكن احط لينك بمجرد الضغط عليه يتبعتلي رسالة علي ايميلي …ازاي؟؟جرب كده وشوف:
<a href="mailto: ……@************">contact us</a>
اكتب كده واضغط عليه هتلاقيه فتحلك صفحة اوت لوك تكتب فيها الرسالة ومكتوبلك فوق ان الرسالة دي هتتبعت علي الايميل اللي حضرتك كاتبه…

ملحوظة : mailto كلها كلمة واحده على بعضها ..


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

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

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


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