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

Admin عدد المساهمات : 533 تاريخ التسجيل : 03/09/2011

الدروس دي مش خاصة بيا دي دروس خاصة بشخصين

هما (webdesigner ، H@mis)

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] دول كانوا نزلوا الدروس من سنة 2005 وبالصدفة وانا بدور لقيت

الدروس دي واستفدت منها جداً عشان كده [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] منكم انكم تدعولهم

ان ربنا يجازيهم خير جزاء نشرهم للعلم

رابعاً: لغة التصميم اللي هنستخدمها في التصميم هتكون لغة [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]ودي

لغة سهلة جداً في التصميم ومش تقلقوا الدروس سهلة جداً

Admin عدد المساهمات : 533 تاريخ التسجيل : 03/09/2011

]بسم الله نبدأ[/size]

ا[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

قبل ان نبدا في الحديث عن[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] المواقع هناك بعض المعلومات والمفاهيم

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

browser... دعوني ابدا من الوراء قليلا للتوضيح ما هو مفهوم [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] الانترنت بالمعني العلمي؟؟؟ في البداية كان الإنترنت عبارة عن شبكة بسيطة تربط بين أجهزة بعض الطلبة

في احدي الجامعات الأمريكية بحيث يمكن لأحدهم رؤية ما علي جهاز الاخر

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

جهاز صديقه مغلق في هذا الوقت؟؟ كان لا يستطيع لانه لابد لتبادل المعلومات في الشبكات ان يتم التبادل بين

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

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

احطها علي جهازي وفي حالة ما ذا كان جهازي مفتوح علطول يبقي أي جهاز

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

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

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

نفس الوقت وتتحمل ان تظل تعمل دائما بلا انقطاع... فانا لو عندي معلومات اقوم بوضعها علي هذا السيرفر بدلا من تركها علي

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

بكل الاجهزة في منظقته فتصبح كل هذه الاجهزة متصلة ببعضها البعض عن

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

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

الشبكات وهذا هو الانترنت "شبكة الشبكات" .. كيف نطلب معلومات من السيرفر او نستقبل منه معلومات؟؟؟ يوجد بكل [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] برنامج متصفح للانترنت "browser” اشهرها وافضلها

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

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

Admin عدد المساهمات : 533 تاريخ التسجيل : 03/09/2011

الدرس الثاني

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

----------

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

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

لو انا بكلم واحد من امريكا وعايز اقولله حاجة يعملها ....

لو قلتله الحاجة دي بالانجليزي هيفهمها وينفذها..

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

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

نفس الحال بالنسبة لل BROWSER..

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

الكلام والمعلومات اللي فيها بتظهر ازاي؟؟؟

ذكرنا قبل كده ان السيرفر بيقوم بارسال المعلومات إلي جهازك فيستقبلها البراوزر...

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

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

اول وابسط لغة من اللغات اللي بيفهمها البراوزر هي لغة ال HTML ...

وهناك لغات اخري كثيرة اكثر تطور من ال HTML بس الاساس هو ال HTML زي الإنجليزي بالنسبة للشخص الأمريكي...

ولا يوجد اي موقع يخلو من لغة ال HTML ..بالرغم من انها اقل اللغات تطورا...

وفي برامج حاليا بتغني عن لغة ال HTML وبتقوم بكل وظائفها بصورة اسهل ومنها " FRONT PAGE ,DREAMWEAVER"....ولكن...

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

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

ماحنا بنشوف المعلومات جاهزة وخلاص هنتعب نفسنا ليه؟؟

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

يارب يكون الاسلوب واضح..

Admin عدد المساهمات : 533 تاريخ التسجيل : 03/09/2011

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

اول مرة ترجع تقراه تاني هتتوضح ليها كل حاجة باذن الله ا

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

الدرس الثالث

اعذروني اذا طولت شوية المرة دي لانها اول مرة ندخل في

اللغة..فممكن تحتاج تطويل شوية في الشرح لغاية منفهم

اللغة دي ماشية ازاي….يعني كمية المعلومات المرة دي

قليلة بس هتاخد شرح كتير..وان شاء الله هتلاقوه سهل

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

هكتب خلاصة الكلام اللي اتقال وفي الاخر هكتب الخلاصة

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

بسيطة قبل متقروا أي حاجة...لو حسيت في النص انك

سيحت اوعي تقلق وكمل للاخر اول متوصل للاخر هتلاقي

كله وضح ان شاء الله وانا في الاخر خالص كاتب الخلاصة

كلها في سطرين بس هتلم الموضوع كله ان شاء الله بس

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

مش معقول اول ماخترعوا اللغة دي قالوا نسميها html

؟؟؟ …….أكيد في سبب html

اختصار لهذه الجملة: hyper text markup language

يعني لغة تقدر بيها تحط علي الانترنت texts بكميات

كبيرة (hyper) بس الاسم ده كان لانها في بداية

ماخترعوها كانت بس لوضع texts مش اكتر ..انما

دلوقتي تطورت كتير وممكن نحط texts وصور وفيديو

واوديو وفلاشات وكل حاجة…

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

ازاي نعرف البراوزر المعلومات باللغة دي …

إحنا قلنا ان دي لغة البراوزر وده يترتب عليه إن أنا لو

جيت علي أي فايل عندي علي الجهاز وعملت له 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 الامر شكله كده:

<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
واختار منها من فوق خالص علي الشمال tools واختار

منها اخر اختيار folder options
هيتفحلك نافذة تختار منها من فوق view
هيطلعلك اختيارات كتييييييييير...
بص فيهم كويس هتلاقي عندك منهم الاختيار ده:

hide file extention for known file types

اتاكد انه مش متعلم جنبه.....

لو لقيته متعلم جنبه الغي العلامة دي واعمل ok واطلع

هتلاقي المشكلة دي راحت خالص ان شاء الله....

تقدر بقي دلوقتي تغير الامتداد براحتك

ياريت كله يعمل الحكاية دي

Admin عدد المساهمات : 533 تاريخ التسجيل : 03/09/2011

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

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

اتفقنا ان الصفحة اللي هكتبها بلغة الي 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">

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

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

<command name attribute="value" attribute="value" attribute="value">
……………
</comandname>
طبعا مش بالشكل ده…بنكتب اسامي ال attributes وقيمة ال values بس ده الشكل العام
…وكمثال..
كود HTML:

<body bgcolor="red">
نرجع للبودي…
خدنا كده من ال attributes بتاعته :

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

<body bgcolor="black" text="white">
او أي لون…
كده يطلع لون الخلفية اسود واي كلام هكتبه في البودي هيطلع لونه ابيض..
فاضل كمان اتنين attributes في البودي… بس بلاش دلوقتي…بعدين ان شاء الله
عشان هما مترتبين علي شوية حاجاة في البودي لازم نعرفها الاول ……
كده خلاص المرة دي…يلا اطلع اقرا الكلام تاني ونفذ بقي……ومستني النتايج…
ملحوظة: وانت بتنفذ ..لما تجرب امر منهم وبعدين تعمل rename وتشوف النتيجة…
وبعدين لو عايز تجرب امر تاني هتعمل ايه؟؟
مش معقول كل مرة هتطلع تعيد نفس الموضوع من الاول تاني عشان تجربه…
انت جرب اول حاجة وبعد متعملها وتعملrename وتشوف النتيجة ..
الصفحة اللي ظهرت فيها النتيجة دي……اقف في أي حتة فيها واضغط كليك يمين واختار منها

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

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

______________________________________________

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

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

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

Admin عدد المساهمات : 533 تاريخ التسجيل : 03/09/2011

الدرس الخامس

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

<command name attribute="value" attribute="value">

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

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

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

<body background="egypt.jbg">

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

nbsp
بيفهم اننا كده بقولله سيب مسافةولو كتبتها مرتين يعني بقولله سيب مسافتين…
ودي غريبة شوية في انها مبتقفلش وكمان مبنحطهاش بين
علامة اكبر من واصغر من …بتتكتب زي ماهي كده وهو بيفهم ان انا قصدي اقولله
سيب مسافة…
والعلامة الغريبة اللي فيها دي shif مع رقم 7
وكده المشكلتين دول اتحلوا بس حل رخممممم اويييييييي
ومقرف…مش معقول كل ماحب اعمل مسافة هكتب المنظر الغشيم ده وكل ماحب انزل
سطر اكتب <br> …
الحل السهل…
الامر <pre>
بكتبه في اول البودي واقفله في اخره …هو بيخلي
البراوزر يفهم المسافات والانترات المكتوبة كلها زي محضرتك كاتبها في
السورس…بالمنظر ده:

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

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

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

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

وربنا يوفقكم

Admin عدد المساهمات : 533 تاريخ التسجيل : 03/09/2011

الدرس السادس

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

<font color=" " size=" " face="name of the font">

طبعا مش لازم بنفس الترتيب ده…أي ترتيب ينفع عادي….

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

Size-ــــــــــــ بتكت فيها حجم الكلمة يكون اد ايه
..وعندك من 1 الي 7 ..اكتب اللي يعجبك منهم وجرب وشوف.. Color مش محتاج
اتكلم عليها Faceـــــــــــــ بتكتب فيها نوع الخط اللي انت عايزه يكون
ايه…
<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 الاتي:

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

iiiii ودوس انتر وبعدين اكتب mmmmm <center>………….</center>

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

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

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

Admin عدد المساهمات : 533 تاريخ التسجيل : 03/09/2011

الدرس السايع

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

Admin عدد المساهمات : 533 تاريخ التسجيل : 03/09/2011

تلخيص الدروس

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

وتعرفوا كل كود وظيفته أيه

نبدأ بالدرس الرابع

هنتعلم فيه ازاي نتحكم في لون خلفية الموقع ولون الكتابة

bgcolor ده الامر المسئول عن لون الخلفية بحطه في البودي

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

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

طريقة كتابة الامر بتكون بالمنظر ده

bgcolor="pink"

text="black"

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

زي ما اتعلمتم في الاول وخلوه

html

وشوفوا المنظر هيكون عامل ازاي

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

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<meta http-equiv="Content-Language" content="ar-eg">

<title>
العملي
</title>
</head>
<body bgcolor="pink" text="black" >

العملي لدورس تعليم تصميم المواقع

تلخيص الدرس الرابع

كيفية عمل خلفية للموقع

وتغيير اللون واضافة صورة كخلفية بالاضافة الى تنسيق الكتابات بصورة لائقة
</body>
</html>
.................................................. ......................

الدرس الخامس

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

اول حاجة لازم اعمل فلودر(مجلد) اجمع فيه كل حاجة خاصة بالموقع اللي انا هعمله

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

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

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

مثلاً انا عندي على الجهاز صورة اسمها

12.jpg

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

background="12.jpg"

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

كده أظن الامور وضحت ومفيش مشكلة فيها

كده خلصنا من الخلفية ولون الكتابة نيجي على تنسيق الكلام

لو لاحظتم انكم مهما تكتبوا ومهما تعملوا انتر بين كل سطر وسطر فالكلام بيفضل ملزق زي ماهو طب ايه الحل

الحل هو الأمر ده
<pre>
وظيفته ان بيخلي الموقع يتعرف على الانترات والمسافات اللي بعملها بين الكتابات

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

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

الحل هو الأمر ده

<blockquote>

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

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<meta http-equiv="Content-Language" content="ar-eg">

<title>
العملي
</title>
</head>
<body bgcolor= "black" text="white">
<pre>
<blockquote>

العملي لدورس تعليم تصميم المواقع

تلخيص الدرس الرابع

كيفية عمل خلفية للموقع

وتغيير اللون واضافة صورة كخلفية بالاضافة الى تنسيق الكتابات بصورة لائقة
</pre>
<blockquote>

</body>
</html>

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

السادس والسابع

في حفظ الرحمن

منقول

» كيفيه البحث عن وظيفه ..!!
» النسخه الأخيرة لبرنامج Onspeed v6 الخارق لتسريع النت وفتح المواقع المحجوبة
» تحلمين بمشروع تصميم ديكور ؟؟ تفضلي للتفاصيل من مجلة افكار المشاريع
» تعلم السياقة مع هذه اللعبة