اتنين اصحاب جدعان
مرحبا بك زائرا

.........ونرجوا .. أن تصبح فردا من عائلة المنتدى........
يجب عليك التسجيل لكي تتاح لك جميع صلاحيات التصفح والتحميل والمساهمة....
................. وشكرا مقدما لمسهاماتك
مع تحياتي...
مدير المنتدى.. Salah Soliman

اتنين اصحاب جدعان

هذا المنتدى أهداء خاص الى اعز صديقين .. أحمد وأسامة
 
الرئيسيةالرئيسية  البوابةالبوابة  اليوميةاليومية  س .و .جس .و .ج  بحـثبحـث  التسجيلالتسجيل  دخولدخول  الأعضاءالأعضاء  المجموعاتالمجموعات  

4Arabs


شاطر | 
 

 دورة تعليم HTML : الخطوط في HTML

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
عضو مؤسس
عضو مؤسس
avatar

عدد المساهمات : 91
تاريخ التسجيل : 26/05/2010
العمر : 38

مُساهمةموضوع: دورة تعليم HTML : الخطوط في HTML   الأحد يونيو 06, 2010 4:56 am


دورة تعليم HTML



الدرس الرابع : الخطوط





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

ولنبدأ

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

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

Face .................
تقوم هذه الخاصية بتحديد نوع الخط الذي نريده، وقد نقوم بتحديد أكثر من نوع معاً. وفي هذه الحالة إذا لم يتواجد الخط المحدد أولاً على جهاز الشخص الذي يتصفح الموقع يتم إعتماد الخط الثاني ... وهكذا


... Text ...
<‎/FONT>

طبعاً لا تنس أن تتأكد من كتابة أسماء الخطوط بالصورة الصحيحة هجائياً.


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


... Text ...
<‎/FONT>


Size
.............
ولتحديد حجم الخط نستخدم هذه الخاصية. وفقط هناك سبعة أحجام لأي خط تستطيع المتصفحات التعرف عليها.
ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم الذي نريده مباشرة.


... Text ...
<‎/FONT>



وإليك نماذج بأحجام الخطوط

خط بحجم 1
خط بحجم 2
[size=9]خط بحجم 3 (الخط الافتراضي)خط بحجم 4
خط بحجم 5
[size=32]خط بحجم 6[/size]
[size=42]خط بحجم 7[/size]

أما الأسلوب الثاني فهو النسبي: حيث تكتب الأرقام من 1 إلى 6 مرفقة إما بإشارة + أو بإشارة -.


... Text ...
<‎/FONT>



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

خط بحجم -3
خط بحجم -2
خط بحجم -1
خط بحجم +0 (أو -0 وهو الافتراضي)
خط بحجم +1
خط بحجم +2
[size=32]خط بحجم +3[/size]
[size=40]خط بحجم +4[/size]
[size=48]خط بحجم +5[/size]

لاحظ أنه حتى في الأسلوب النسبي لا نستطيع الحصول على أكثر من سبعة أحجام للخطوط. حتى وإن حاولنا كتابة أرقام أكبر أو أصغر كما فعلت هنا بكتابة الحجم -3 أو +5.




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

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



‎‎
This font is Arial, Size is 6, Color is Red
<‎/FONT>

[size=32]This font is Arial, Size is 6, Color is Red [/size]


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



This font is Arial, Size is +3, Color is Red
<‎/FONT>

[size=42]This font is Arial, Size is +3, Color is Red [/size]
--------------------------------------------------------------------------------


‎‎
This font is Times New Roman, Size is 5, Color is Blue
<‎/FONT>

This font is Times New Roman, Size is 5, Color is Blue

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



This font is Courier, Size is 2, Color is Maroon
<‎/FONT>

This font is Courier, Size is 2, Color is Maroon

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


This <‎/FONT>
is <‎/FONT>
multi <‎/FONT>
colors, <‎/FONT>
multi <‎/FONT>
faces, <‎/FONT>
and <‎/FONT>
multi <‎/FONT>
sizes <‎/FONT>
text <‎/FONT>

This is multi colors, multi faces, and multi sizes text


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


C <‎/FONT>
O<‎/FONT>
L<‎/FONT>
O<‎/FONT>
R<‎/FONT>
S<‎/FONT>


C O L O R S


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


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



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

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

يوجد دائماً أكثر من طريقة لأداء نفس العمل



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



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


... <‎/Hn>

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


Heading 1 <‎/H1>

Heading 2 <‎/H2>

Heading 3 <‎/H3>

Heading 4 <‎/H4>

Heading 5 <‎/H5>
Heading 6 <‎/H6>


Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6


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



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



* الخط الغامق (الأسود العريض)، ونستخدم له الوسوم التالية:

... <‎/B>
... <‎/STRONG>


* الخط المائل

... <‎/I>
... <‎/EM>


* الخط المسطر

... <‎/U>


* الخط المرتفع

... <‎/SUP>


* الخط المنخفض

... <‎/SUB>


* خط كبير

... <‎/BIG>


* خط صغير

... <‎/SMALL>


* نص يعترضه خط

... <‎/STRIKE>
... <‎/S>


* نص الآلة الطابعة TeleType

... <‎/TT>


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

iiiiiiiiii
mmmmmmmmmm

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

iiiiiiiiii
mmmmmmmmmm



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


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




This is a Bold, Italic and Underlined Text
<‎/U> <‎/I> <‎/B>

This is a Bold, Italic and Underlined Text



This text is red, size +3, Italic, and Underlined
<‎/I> <‎/U> <‎/FONT>

This text is red, size +3, Italic, and Underlined



[/size]




.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://2ashab.gid3an.com
 
دورة تعليم HTML : الخطوط في HTML
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» بعض النباتات الضاره بالكوكاتيل
» تابع html مستوى متقدم
» أنشاء سجل زوار لموقعك شرح بالخطوات
» اكواد ساعات للمنتديات
» برنامج لتنظيم صورك المفضلة في ألبوم فلاشي مع مؤثر التلاشي الجميل بصيغة SWF أو HTML

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
اتنين اصحاب جدعان :: منتدى البرامج العامة :: منتدى برامج التصفح وشروحات الأنترنت :: برامج الأنترنت :: منتدى تصميم وتطوير المواقع والأكواد-
انتقل الى:  
دخول
اسم العضو:
كلمة السر:
ادخلني بشكل آلي عند زيارتي مرة اخرى: 
:: لقد نسيت كلمة السر
Rest Resor
بحـث
 
 

نتائج البحث
 
Rechercher بحث متقدم
neo_world
هل تعلم
ازرار التصفُّح
 البوابة
 الصفحة الرئيسية
 قائمة الاعضاء
 البيانات الشخصية
 س .و .ج
 بحـث
زوروا مدونتي الفوتوشوب للعرب
المواضيع الأخيرة
» ويندوز فيستا الأصلية الكاملة Windows Vista أصلية 100% ..
الإثنين أكتوبر 03, 2011 6:31 am من طرف محمد حسين جا

» كتاب يحوىتعليم الفوتوشوب من البداية والى الاحتراف
الخميس مارس 17, 2011 3:55 am من طرف hamdy_fayed2002

» أنفراد ... @ ويندوز فيستا اصلي من مايكروسوفت @
السبت ديسمبر 25, 2010 6:20 pm من طرف aaaassss

» تحميل فيلم طير انت dvd
الخميس يونيو 10, 2010 3:33 pm من طرف Admin

» تحميل فيلم طير انت dvd
الخميس يونيو 10, 2010 3:31 pm من طرف Admin

» تحميل فيلم الف مبروك دي في دي - 1000 مبروك DVD
الخميس يونيو 10, 2010 3:12 pm من طرف Admin

» أحدث أغاني قناة طه للاطفال
الخميس يونيو 10, 2010 2:29 pm من طرف Admin

» درس أضافة ما يشبة الشريط الأصق على صورة
الخميس يونيو 10, 2010 10:55 am من طرف Admin

» درس عمل خلفية جميلة مليئة بالفراشات
الخميس يونيو 10, 2010 10:44 am من طرف Admin