دورة الـــ HTML

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

m4 دورة الـــ HTML

مُساهمة  php.devolper في 04/08/07, 01:19 pm

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


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


أولا ما هي الـ HTML : إنها اللغة المستخدمة لإنشاء صفحات الإنترنت.

والكلمة اختصار لـ Hyper Text Markup Language.



هل لغة الـ HTML لغة صعبة التعلم : لا ليست صعبة ولكنها سهلة جدا وسيتضح هذا أثناء سيرنا حتى أنه يمكن كتابتها في أي محرر كتابة مثل ال Microsoft office , WordPad or notepad كما أنها غير مرتبطة بنظام تشغيل معين أو متصفح بعينة , و تعتبر لغة الـ HTML لغة ( static ) وليست ( Dynamic) أي أنها لغة ثابتة وليست لغة تفاعلية مثل لغة PHP , ASP … لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار.



شكل أكواد لغة الـ HTML : تتكون مفردات اللغة من شيفرات تسمى TAGS أي الوسوم. وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى اليمين) ومع كل بداية للوسم يجب أن تكون هناك نهاية لنفس الوسم مثلا :-

وسم البداية

وسم النهاية

وسيكون شكل الكود النهائي هكذا بداية الوسم من اليسار ثم المراد تأثير الوسم عليه ثم إغلاق الوسم على اليمين أو في الأسفل

The Language is HTML

أو



The Language is HTML



وقد تكتب بعض الوسوم منفردة مثل الوسم
( سنتأتى فيما بعد لمعرفة وظائف هذه الوسوم).



لماذا توجد وسوم منفردة ؟ الوسوم المنفردة وظائفها محدودة مثل عمل سطر جديد أو عمل خط أي ليس تأثير ولكن الوسوم الثنائية تقوم بتنفيذ تأثير معين على سطر أو قطعة بعينها (التي تقع داخل الوسم)



ماذا لو أقم بإغلاق الوسم المنفرد ؟ سيتم تطبيق الوسم على كل ما يكتب بعد الكود أو لن يتم تطبيق الكود نهائيا
avatar
php.devolper
عضو ذهبى
عضو ذهبى

عدد الرسائل : 52
العمر : 34
البلد : مصـــ الحبيبة ــــــرنا
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 08/07/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 خارطة الدروس

مُساهمة  php.devolper في 04/08/07, 01:34 pm

خارطة الدروس


الدرس الأول : الأساسيات
تعريف ملف Html والوسوم الرئيسية فيه، إنشاء صفحة ويب بسيطة

الدرس الثاني : الألوان
تنسيق الصفحة، أضف لصفحتك بعض الحيوية باستخدام الألوان والخلفيات

الدرس الثالث : الخطوط
التحكم بالخطوط في الصفحة، إختيار أنواعها وأحجامها وتنسيقاتها

الدرس الرابع : الفقرات والقوائم
قم بتنسيق وتنظيم صفحتك، واستخدم القوائم لترتيب بياناتك

الدرس الخامس : الصور والرسومات

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

الدرس السادس : الروابط والوصلات التشعبية
... كيف وصلت إلى هنا؟؟؟ بالنقر على وصلة تشعبية!

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

الدرس الثامن : الإطارات
قسم صفحتك إلى إطارات أفقية أو عمودية أو الاثنين معاً ... لا فرق! وحدد الخصائص أيضا وأكد أن الإطار يعمل بشكل جيد

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

الدرس العاشر : الخرائط الصورية
صورة واحدة فقط ... وعدة وصلات تشعبية

الدرس الحادي عشر : النماذج
تودّ أن تستطلع آراء زوارك!؟ ... عليك بالنماذج ُ

الدرس الثاني عشر : المتصفحات والوسوم الخاصة
الأرق الدائم لمصممي صفحات الويب

الدرس الثالث عشر : الويب واللغة العربية
الويب ... بتتكلم عربي

الدرس الرابع عشر : وسوم META ومحركات البحث
كيف تجعلهم يجدون موقعك..؟!
avatar
php.devolper
عضو ذهبى
عضو ذهبى

عدد الرسائل : 52
العمر : 34
البلد : مصـــ الحبيبة ــــــرنا
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 08/07/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 رد: دورة الـــ HTML

مُساهمة  أبو الفداء في 04/08/07, 01:36 pm

جزاك الله خيرا...
وشكرا على هذه البداية الجيدة...
avatar
أبو الفداء
عضو ماسى
عضو ماسى

عدد الرسائل : 766
نشاط العضو :
90 / 10090 / 100

تاريخ التسجيل : 06/07/2007

معاينة صفحة البيانات الشخصي للعضو http://www.abuelfeda14.blogspot.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 الدرس الأول : الأساسيات

مُساهمة  php.devolper في 04/08/07, 02:51 pm

[color=black]الدرس الأول : الأساسيات
البــــــدايـــــة


سوف أقوم في هذا الدرس بسرد الوسوم الأساسية لصفحة الويب ومناقشتها معك واحداً تلو الآخر. لنصل في النهاية إلى إنشاء صفحة ويب بسيطة.

لنأخذ الوسوم التالية:

وسم النهاية وسم البداية

<‎/HTML> <‎HTML>

<‎/HEAD> <HEAD>

<‎/TITLE> <‎TITLE>

<‎/BODY> <‎BODY>

ماذا تلاحظ؟ أن كل منها يتألف من زوج من الوسوم أحدهما وسم البداية، والآخر وسم النهاية. ويتميز وسم النهاية بوجود الرمز / . تأمل الرسم التالي، فهو يعطي فكرة عن تركيب ملف Html




إذن فملف Html يبدأ دائماً بالوسم <HTML> وينتهي بالوسم </HTML>. لا تنسى ذلك!

أما الوسم <HEAD> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح. وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين: <TITLE> … </TITLE> وبالطبع يجب كتابة الوسم </HEAD> لكي ننهي هذا المقطع.

نأتي إلى الوسم <BODY> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة. وهو أيضاً يحتاج إلى وسم الإنهاء </BODY>

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

<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
I'm writing my first webpage
<
/BODY>
<
/HTML>


والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره. ولا تنسى أن الامتداد المستخدم في أسماء ملفات HTML هو htm. أو html. مثلاً أنا اخترت الاسم firstpage.htm ومن الأفضل أن تقوم بإنشاء مجلد مستقل على القرص الصلب لكي تحفظ به ملفاتك فهذا يسهل عليك عملية استرجاعها للعرض أو التحديث وليكن هذا المجلد مثلاً بالاسم C:\mysite (أو بأي اسم يحلو لك).

حان وقت العرض، لكي نشاهد نتيجة ما كتبناه. قم بتشغيل متصفح الإنترنت الذي تستخدمه , اختر الأمر Open … من قائمة File ثم حدد المسار الذي يوجد به الملف. أنا شخصياً قمت بتحديد المسار التالي:
C:\ mysite\ firstpage.htm


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




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

وقبل أن نستمر أريد أن أنبهك إلى بعض الملاحظات عند كتابة صفحات الويب:

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

إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح Enter) التي تجدها هذه المتصفحات في ملف Html. وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق بالشكل التالي:

<HTML><HEAD><TITLE> This is a test Webpage </TITLE></HEAD><BODY>
Hi, I'm writing my first webpage </BODY></HTML>


أو بالشكل التالي:

<HTML>
<HEAD>
<TITLE>
This
is a
test
Webpage
<
/TITLE>
<
/HEAD>
<BODY>
HI,


I'm
writing
my
first
webpage
<
/BODY>
<
/HTML>


أو حتى بهذا الشكل:

<HTML> <HEAD> <TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Hi, I'm writing my first webpage
<
/BODY>
<
/HTML>


وفي كل الحالات ستحصل على نفس النتيجة.
والآن قد تتساءل، إذن كيف يمكن التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية الفقرة وبداية الفقرة التي تليها؟ سؤال وجيه!!! والإجابة عليه هي:


سوف نستخدم الوسم <BR> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية).

ونعود إلى المثال السابق، قم بتعديل الملف لكي يصبح بالشكل التالي

<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>


Hi, <BR> I'm writing my <BR>
first webpage
<
/BODY>
<
/HTML>






وهناك أيضا الوسم <P> الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات.

<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Hi, <P> I'm writing my <P>

first webpage
<
/BODY>
<
/HTML>






أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم &nbsp; (والأحرف هي اختصار للعبارة Non Breakable Space). وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب. كما يجب عليك التقيد بالأحرف الصغيرة هنا.

إذن لنعد إلى المفكرة ونكتب ملفنا بالشكل التالي:

<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow, &nbsp; &nbsp; &nbsp;

I'm &nbsp; &nbsp; &nbsp;writing &nbsp; &nbsp;

&nbsp; my &nbsp; &nbsp; &nbsp; first &nbsp; &nbsp; &nbsp; webpage
<
/BODY>
<
/HTML>


لاحــــظ

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

لأن السطر الجديد له وسم ذكرناه سابقا <br> ووسم الفراغات &nbsp;

<HTML>

<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Hi


I'm my

first webpage
<
/BODY>
<
/HTML>
[color:596b=black:596b]
avatar
php.devolper
عضو ذهبى
عضو ذهبى

عدد الرسائل : 52
العمر : 34
البلد : مصـــ الحبيبة ــــــرنا
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 08/07/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 رد: دورة الـــ HTML

مُساهمة  أحمد عبيدو في 06/08/07, 06:59 pm

جزاك الله خيراً وجعل هذا العمل فى ميزان حسناتك يوم القيامة
avatar
أحمد عبيدو
عضو فعال
عضو فعال

عدد الرسائل : 136
العمر : 37
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 11/07/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 أنا اريد نقاش في ...

مُساهمة  php.devolper في 06/08/07, 09:40 pm

السلام عليكم

جزيت خيرا أخى أحمد عبيدو

لقد شاهد الكثير الموضوع ولكن لم يضعوا كلمة فهل هى قناعة بعدم جدوى التعلم أم ماذا ... أم انهم طبقوا وفهموا الأمر وهو بالنسبة لبعض الناس ليس بجديد
على العموم سأكمل الدورة ومن يستشكل علية أمر الرجاء السؤال عنه حتى تكتمل الفائدة
ولكم جزيل الشكر
avatar
php.devolper
عضو ذهبى
عضو ذهبى

عدد الرسائل : 52
العمر : 34
البلد : مصـــ الحبيبة ــــــرنا
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 08/07/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 رد: دورة الـــ HTML

مُساهمة  sendbad_at في 10/08/07, 10:49 pm

جزاك الله خيرا ويارب نشوف كتير من الحجات الحلوة دة
avatar
sendbad_at
عضو جديد
عضو جديد

عدد الرسائل : 8
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 04/08/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 الموضوع حلو جدا يا رب المزيد والشرح ممتاز

مُساهمة  احمد طلعت في 11/08/07, 10:26 am

:D
avatar
احمد طلعت
عضو ماسى
عضو ماسى

عدد الرسائل : 288
العمر : 36
البلد : اسطنها
الوظيفة : Free
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 10/08/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 رد: دورة الـــ HTML

مُساهمة  محمود عبد الله في 15/08/07, 04:52 am

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

عدد الرسائل : 47
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 28/06/2007

معاينة صفحة البيانات الشخصي للعضو http://estanha.ahlamontada.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 رد: دورة الـــ HTML

مُساهمة  احمد عبد الهادي في 16/08/07, 11:52 am

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

عدد الرسائل : 501
العمر : 38
البلد : إسطنها
الوظيفة : محاسب
نشاط العضو :
90 / 10090 / 100

تاريخ التسجيل : 18/07/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 الدرس الثانى

مُساهمة  php.devolper في 18/08/07, 02:59 pm



أهلاً وسهلاً بك إلى الدرس الثاني من دروس
HTML. سوف نقوم في هذا الدرس بالتعرف على الخصائص التي يمكن إضافتها إلى الوسم <BODY> من أجل التحكم بالشكل العام للصفحة، وخصوصا فيما يتعلق بالألوان.

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

إذن لنبدأ العمل!


نطلق كلمة خاصية (Attribute) على التعابير التي تضاف إلى الوسوم، من أجل تحديد الكيفية أو الشكل الذي تعمل بها هذه الوسوم. وبعبارة أخرى ...

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

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



<HTML>

<HEAD>

<TITLE>

This is a test Webpage

</TITLE>

</HEAD>

<BODY BGCOLOR="FffffF">

Hi I'm my first webpage

</BODY>

</HTML>


ستجد أن الخلفية مازالت بيضاء


<HTML>

<HEAD>

<TITLE>

This is a test Webpage

</TITLE>

</HEAD>

<BODY BGCOLOR="FddddF">

Hi I'm my first webpage

</BODY>

</HTML>



لقد قمت بإضافة الخاصية BGCOLOR إلى الوسم <BODY> ، وهي تقوم بتحديد لون الخلفية للصفحة. أما FFFFFF فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، (لاحظ أنها مكتوبه بين إشارتي " " ) ولو أردت تمثيل اللون الأسود لكتبت الرمز 000000. أو الرمز 6699CC للون الأزرق الفاتح......
فمن أين جاءت هذه القيم، هذا ما سنتعرف عليه الآن


القليل عن الألوان...

تلاحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة التالية:-




هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.

إن أي لون هو مزيج -وبنسبة معينة من الدرجات- من هذه الألوان الثلاثة *

فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون من الدرجة 255 من هذه الألوان. أما اللون الأصفر فهو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان.

حسنا، لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداس عشري.
إذن فالرقم السداس عشري
FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.
وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري:
6699CC أما اللون الأسود فرقمه هو 000000.

وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري.




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

ملاحظة مهمة:
بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها دائماً.

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


ونعود إلى الوسوم و خصائصها ...

لاحظ الآتي :





<HTML>

<HEAD>

<TITLE>

This is a test Webpage

</TITLE>

</HEAD>

<BODY BACKGROUND="13.gif">

Hi I'm my first webpage

</BODY>

</HTML>



تقوم الخاصية BACKGROUND بتحديد صورة كخلفية (ورق جدران) للصفحة وقد استخدمت الصورة التالية:




والمسماة 13.gif في صفحتي وكانت هذه النتيجة






تلاحظ أن المتصفح قد قام بتكرار عرض الصورة بطريقة التجانب وأنها أصبحت تغطي كل الشاشة. بحيث حجبت أيضاً اللون الأبيض الذي حددناه كلون الخلفية (من خلال الخاصية BGCOLOR) والحقيقة أن اللون يظهر فقط عندما لا نقوم باستخدام صورة ما كخلفية. ومع ذلك يفضل تحديده إحتياطاً خاصة وأن بعض المتصفحات القديمة توصف بأنها متصفحات نصية Text-Based Browsers (أي ليس بإمكانها عرض الصور). أو ربما هناك بعض المستخدمين الذين قاموا بإلغاء خيار عرض الصور تلقائياً من متصفحاتهم. إذن لنعطهم على الأقل فرصة مشاهدة بعض الألوان إن لم يستطيعوا مشاهدة الصور.

إننا نستطيع استخدام الصور بأحجام مختلفة طولياً أو عرضياً كخلفيات للصفحة، والمتصفح نفسه هو الذي يقوم تلقائياً بعرضها في وضع التجانب مما يعطي الانطباع بأنها صورة كبيرة.

ولنكمل مع باقي الخصائص في وسم <BODY> : ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبية (Links) التي تنقر عليها لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائماً مميزة باللون الأزرق، وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي. حسناً، هذه هي الألوان الإفتراضية التي تعتمدها المتصفحات. لكن قد لا يعجبك ذلك وتريد تغيير هذا النظام. أو ببساطة ربما تريد استخدام لون أو صورة غامقة لخلفية الصفحة بما سيؤدي إلى اختفاء هذه الوصلات أو حتى اختفاء نص الصفحة نفسها. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:




TEXT="#rrggbb"‎ : تحديد لون النص الأساسي للصفحة

LINK="#rrggbb"‎ : تحديد لون الوصلات التشعبية

VLINK="#rrggbb" : تحديد لون الوصلات التشعبية التي تمت زيارتها visited links

ALINK="#rrggbb"‎ : تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها active links

والآن، دعنا نجمل الخصائص السابقة في عبارة واحدة. وسوف أكتب الرموز الخاصة بالألوان بنفس تلك الألوان التي تمثلها. وألفت نظرك إلى أنه لا أهمية للترتيب في كتابة هذه الخصائص داخل العبارة.


[color=black]<HTML>


<HEAD>

<TITLE>

This is a test Webpage

</TITLE>

</HEAD>

<BODY BACKGROUND="backimag.jpg" BGCOLOR="#ffff00" TEXT="#110000" LINK="#00ff00" VLINK="#ff0000" ALINK="#999999">

Hi I'm my first webpage

</BODY>

[color:8661=black:8661]</HTML>









حاول أن تحللها! هل استنتجت أنني قد حددت الصورة 13.gif كخلفية للصفحة؟ وأنني اخترت اللون الأصفر للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟ وان النص سيظهر باللون الأزرق الغامق؟ أما الوصلات التشعبية فلونها أخضر، والوصلات التي تمت زيارتها ستظهر باللون الأحمر. أما تلك الوصلة الفعالة فستظهر باللون الرمادي في لحظة النقر عليها بالفأرة.
سنأخذ الوصلات التشعيبيه فيما بعد
إذا كانت هذه هي استنتاجاتك... فمبروك، لقد نجحت.




avatar
php.devolper
عضو ذهبى
عضو ذهبى

عدد الرسائل : 52
العمر : 34
البلد : مصـــ الحبيبة ــــــرنا
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 08/07/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 أسف

مُساهمة  php.devolper في 10/09/07, 11:17 pm

السلام عليكم ورحمة الله وبركاته


أنا آسف انى لم انزل الدرس الجديد ......
لأن الجهاز كان متعطل قليلا ً وتم تنزيل نسخة جديدة .... .... ... .. .

ولكن على وعد بإكمال الدروس حتى النهاية
avatar
php.devolper
عضو ذهبى
عضو ذهبى

عدد الرسائل : 52
العمر : 34
البلد : مصـــ الحبيبة ــــــرنا
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 08/07/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 رد: دورة الـــ HTML

مُساهمة  kota123 في 11/09/07, 12:59 am

اشكرك اوى يا استاذنا على المجهود العظيم
avatar
kota123
مشرف
مشرف

عدد الرسائل : 572
العمر : 28
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 29/06/2007

معاينة صفحة البيانات الشخصي للعضو http://www.yahoo.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 درس الخطوط

مُساهمة  php.devolper في 16/11/07, 08:08 pm

درس الخطوط



[color=black]أهلاً وسهلاً بك إلى الدرس الثالث من دروس
HTML. لا زلنا نناقش معاً أساسيات تنسيق صفحات الإنترنت والتحكم بخصائصها. وسوف نتابع ذلك في هذا الدرس من خلال التعرف على الوسوم الخاصة بالخطوط.
سوف تلاحظ في هذا الدرس والدروس اللاحقة أن هناك أكثر من طريقة لأداء نفس العمل، أو إعطاء نفس الخصائص لصفحات الإنترنت. وبالمقابل قد يبدو لك أن بعض الوسوم والخصائص متشابهة في تأثيرها، لكن بالقليل من التدقيق والتجربة ستكتشف أن لكل وسم خصوصيته.

ولنبدأ

راجع صفحتنا البسيطة التي عملنا فيها في الدرسين السابقين. إننا لم نقم بالتعامل مع الخطوط فيها ولا بأي شكل من الأشكال. أي أننا تركناها على إعداداتها الافتراضية.
وبالمناسبة فإن هذه الإعدادات هي خط عادي، نوعه
Times New Roman وحجمه 3 (بمقياس متصفحات الإنترنت).

الوسم الأول الخاص بالخطوط هو <FONT> ... [color=black]FONT>
وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم. أما الخصائص التي نستخدمها مع هذا الوسم والوسوم الأخرى للخطوط فهي كالتالي:





والآن أعرف ماذا تريد أن تسأل، ستقول لقد ثبت حجم الخط على حده الأدنى عند الدرجة -2 وعلى حده الأعلى عند الدرجة +4. إذن ما الفائدة من وجود الدرجات الأخرى الأقل من -2 والأكبر من +4؟
حسنا وأنا أجيبك بسؤال آخر: ماذا لو قمنا بتغيير الحجم الافتراضي للخط في كل الصفحة إلى 1 بدلاً من 3؟ (وسوف نقوم بذلك فعلاً بعد قليل)، ألا نحتاج في هذه الحالة إلى الدرجات من +1 إلى +6 لتمثيل الأحجام الأكبر منه؟ وإذا قمنا بتحديد 7 كحجم إفتراضي ألا نحتاج إلى الدرجات من -1 إلى -6 لتمثيل الأحجام الأصغر منه؟ إذن نحن نحتاج فعلاً إلى هذه الدرجات لكي نغطي جميع الإحتمالات الواردة.
أرجو أن يكون هذا الجواب قد أقنعك :-)

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






[color=black]










ننتقل الآن إلى الوسم الثاني من الوسوم الخاصة بالخطوط وهو <BASEFONT>.
وعمله هو تحديد نوع الخط وخصائصه بالنسبة للصفحة كلها . أي أنه يقوم بتعريف نوع الخط الأساسي الذي سيستخدم في الصفحة من بدايتها إلى نهايتها ويحدد لونه وحجمه.
هل لاحظت انه وسم مفرد ولا يحتوي على وسم للنهاية؟ بالطبع ما الحاجة إلى وسم النهاية طالما أنه يتعامل مع الصفحة ككل ومع الإعدادات الأساسية لها، وليس مع كلمة أو سطر أو فقرة بذاتها. لذلك فإن هذا الوسم يكتب عادة في أول الملف، ويفضل مباشرة بعد وسم <
BODY>. أما الخصائص المستخدمة معه فهي نفس الخصائص سالفة الذكر مع <FONT> ، (نستطيع استخدام الخاصية Name معه بدلاً من Face). وبنفس الطريقة وبدون أي اختلافات. وإليك هذه الشيفرة كمثال:



وبدراسة هذا المثال نستنتج أنه يقوم بتعديل الخط الافتراضي للصفحة بحيث يصبح نوعه Arial وحجمه 5 ولونه أحمر. وبالتالي فإن كل النصوص المكتوبة في تلك الصفحة سيطبق عليها هذا النمط من الخط. ما لم نقم طبعا باستخدام الوسوم <Font> ... [color=black]‎Font> لتعديلها والتحكم بمظهرها كما فعلنا في الأمثلة السابقة، فهي أكثر تحديداً وأكثر مرونة من الوسم <BASEFONT>

وبمناسبة الحديث عن الألوان وتغيير اللون الأساسي لنص الصفحة. ألا تذكر أننا في الدرس السابق تكلمنا عن الخاصية Text التي تكتب مع الوسم <Body> والتي استخدمناها لتحديد لون نص الصفحة... أنا لا زلت أذكر ذلك.
لا يوجد تعارض بين هذه الخاصية وخاصية
Color في الوسم <BASEFONT> فأنت بكل بساطة تستطيع استخدام أي منهما في صفحتك. وإذا حدث واستخدمت كلاهما فإن اللون المحدد مع الوسم <BASEFONT> هو الذي سيطبقه المتصفح ويعتمده.
وهنا أريد أن أذكرك بما قلته في بداية هذا الدرس:


هناك وسوم خاصة تستخدم لتمييز العناوين Headings في صفحات الإنترنت وهي:
<Hn> ... </Hn>


وحرف n هو رقم بين 1-6 يمثل مستوى العنوان.







ونأتي الآن إلى التنسيقات والتأثيرات التي يمكن إضافتها إلى النصوص. وفيما يلي الوسوم الخاصة بها متبوعة بمثال ونتيجته:



وهذا النص يعرف أيضاً بالنص موحَد المسافات Monospaced Text. ولتوضيح هذا المفهوم إليك المثال التالي:
إذا أخذنا الحرفين
m,i وكتبنا كل منهما عشر مرات متتالية نلاحظ أن المساحة التي شغلها الحرف m هي أضعاف المساحة التي شغلها الحرف i

iiiiiiiiii
mmmmmmmmmm


أما عند استخدام الوسم <TT> ... </TT> فإن المساحة التي يشغلها كلا الحرفين تصبح موحدة

iiiiiiiiii
mmmmmmmmmm



وهذه أمثلة تجمع بين عدة تنسيقات معاً:







وقد أردت من هذه الأمثلة توضيح مسائل معينة أولها: أن بإمكاننا استخدام عدة وسوم وتنسيقات معاً في نفس الوقت ولنفس المقطع من النص. (وذلك لجميع الوسوم وليس فقط لوسوم الخطوط). وكما ذكرت سابقاً، لا أهمية لترتيب هذه الوسوم ولا أيها ورد أولاً... لكن
عند استخدام الوسوم المتعددة في مقطع واحد يجب مراعاة عدم التداخل بينها!... كيف؟ أنظر إلى الرسم التالي:


[color:f1aa=black:f1aa]فكتابة الوسوم السابقة بالطرق التالية هو خطأ:

[color:f1aa=black:f1aa]
[color:f1aa=black:f1aa]
أعرف أنك لم تصدقني وأنك قمت بتجربة هذه الوسوم وربما حصلت على نتيجة صحيحة. حسناً العبرة ليست في عبارة واحدة مكونة من وسمين أو ثلاثة تكتبها في ملف صغير بل في صفحة إنترنت كاملة قد تتألف من مئات أو حتى آلاف الوسوم مكتوبة في ملف خالٍ من الأخطاء المنطقية والتداخلات التي قد تسبب الإرباك للمتصفحات، وتؤدي إلى عدم عرض هذه الصفحة بالشكل المناسب والمطلوب.
لذلك فأهمية أن تتجنب وجود الوسوم المتداخلة في صفحتك هو بنفس الأهمية التي يجب أن توليها لكتابة هذه الوسوم بالصورة الصحيحة إملائياً. وإلا فالمتصفحات لا ترحم. وكثيرة هي المرات التي حصل فيها المصممون على صفحات منهارة بسبب نسيان حرف واحد أو إشارة مثل < أو > أو "
بإختصار شديد... وكقاعدة أساسية، الصفحة المصممة جيداً هي الصفحة ذات الوسوم الصحيحة وغير المتداخلة.


[color:f1aa=black:f1aa]
avatar
php.devolper
عضو ذهبى
عضو ذهبى

عدد الرسائل : 52
العمر : 34
البلد : مصـــ الحبيبة ــــــرنا
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 08/07/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 رد: دورة الـــ HTML

مُساهمة  elkady1914 في 16/11/07, 09:22 pm

بقولكوا ايه ما تريحوا دماغكوا وبدل ما تقروا من على الموقع


أدي الكتاب الي الموضوع منه

وأنا رفعته بنفسي على موقع

وده اللينك ويارب أكون أفدتكم

2shared.com/file/2504942/e66bb74d/elkady1914_learn_html_from_a_to_z.html

وشكرا للعضو php.devolper

ويا رب مكونش أزعجتك
avatar
elkady1914
عضو جديد
عضو جديد

عدد الرسائل : 8
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 13/08/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

m4 رد: دورة الـــ HTML

مُساهمة  php.devolper في 20/11/07, 10:06 am

شكرا لأخى elkady1914
على الكتاب
ولكن الفكرة تكمن في المناقشات
واحد عايز يطرح شيء ويسأل فيه يطرحه هنا ونجاوب عليه
وهكذا
واكرر شكرى مرة أخرى لمجهودك.
avatar
php.devolper
عضو ذهبى
عضو ذهبى

عدد الرسائل : 52
العمر : 34
البلد : مصـــ الحبيبة ــــــرنا
نشاط العضو :
50 / 10050 / 100

تاريخ التسجيل : 08/07/2007

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى