الخميس، 26 نوفمبر 2015

الدرس #5 | لغة HTML _ الصور والرسومات | دروس أون لاين




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








أهلاً وسهلاً بك في الدرس الخامس من دروس HTML. في هذا الدرس سوف أقوم بالحديث عن الصور والرسومات وما يتعلق بالتعامل معها، بالإضافة إلى التعريف بأنواع الملفات الرسومية الدارجة في الإنترنت.
لقد اقتصر حديثنا عن الصور حتى الآن على إضافة خلفيات للصفحات، وكان ذلك في الدرس الثاني أما إدراج الصور ضمن الصفحات نفسها فله حكاية أخرى، أبدأ بروايتها لك الآن.
إن الوسم الرئيسي المستخدم لتعريف صورة ما داخل الصفحة هو <IMG> وهو وسم مفرد. لكن هل يكفي هذا لإدراج صورة؟ كلا، بالطبع يجب أن نحدد الصورة التي نريدها. لذلك نضيف الخاصية له SRC لتحديد موقع واسم الصورة.
الصورة التالية إسمها thedome.jpg وعندما قمت بإدراجها. كانت الشيفرة الخاصة بذلك هي
‎<IMG SRC="thedome.jpg">‎
The Dome Of The Rock
والصيغة هذه تفترض أن الصورة موجودة في نفس الدليل الفرعي أو المجلد حيث يتواجد ملف HTML الذي أعمل عليه، وقمت باستدعاء الصورة من خلاله. لكن ماذا لو كانت الصورة في مجلد فرعي آخر؟ حسنا سوف اناقش معك حالتين لهذه المسألة.
الحالة الأولى أن تكون الصورة موجودة في مجلد متفرع عن المجلد الموجود به ملف HTML حسب الشكل التالي:
Locating Images 1

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

الحالة الثانية: أن يكون ملف HTML موجوداً في مجلد ما وتكون الصورة موجودة في مجلد آخر بنفس المستوى. أي أنهما مجلدين متجاورين وليسا متفرعين أحدهما عن الآخر.
Locating Images 2

وفي هذه الحالة نكتب .. (نقطتين) لتوجيه المتصفح للخروج من المجلد الفرعي الحالي (حيث يوجد ملف HT‎ML) ومن ثم الدخول إلى المجلد images حيث توجد الصورة.

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


إن الأبعاد الأساسية لهذه الصورة هي 200×145 بيكسل Pixel (تابع القراءة حتى نهاية هذا الدرس وأعدك أن أوضح لك ما هي وحدة البيكسل إذا كانت هذه أول مرة تتعرف فيها على هذه الوحدة) وكما تلاحظ تم إدراج الصورة مع المحافظة على هذه الأبعاد. ومع ذلك فنحن نستطيع التحكم أيضاً بها وإظهار الصورة بالحجم الذي نريده من خلال هذا الوسم. كيف؟ بإضافة الخصائص HEIGHT, WIDTH متبوعة بأرقام تمثل الإرتفاع والعرض المطلوبين.
‎<IMG SRC="thedome.jpg" HEIGHT="70" WIDTH="120">‎
The Dome- 70*120
‎<IMG SRC="thedome.jpg" HEIGHT="300" WIDTH="500">‎
The Dome- 300*500
الخاصية التالية التي تستخدم مع <IMG> هي ALT وفيها نحدد نصاً بديلاً يظهر مكان الصورة. وهذا النص يلاحظ خصوصاً عندما يكون خيار "إظهار الصور تلقائياً" غير فعال في المتصفح. كما تستطيع ملاحظته في الفترة التي تسبق تحميل الصور وخاصة في المواقع بطيئة التحميل.
‎<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock">‎
عندما نقوم بإدراج صورة ضمن فقرة فإن موقع ظهورها يتحدد بالطبع حسب ترتيب ورودها في الفقرة، مثلها مثل أي كلمة أو عبارة أخرى. ونستخدم الخاصية ALIGN لتحديد محاذاة الصورة مع النص المرافق لها أو لنقل بعبارة أخرى: تحديد موقع النص الذي يليها بالنسبة لها وهي تأخذ القيم: BOTTOM, TOP, MIDDLE, LEFT, RIGHT وأوضح لك تأثير كل قيمة كما يلي:
في الحالة العادية  (مثل هذه) وعندما لا نقوم بتحديد أي محاذاة فإن النص الذي يلي الصورة يظهر بمحاذاة الحافة السفلى لها. وهذه هي الحالة الإفتراضية لظهور الصور والتي تمثلها القيمة BOTTOM
‎<IMG SRC="image.jpg" ALIGN="BOTTOM">‎
TOP

 وعند تحديد هذه القيمة فإن السطر الأول من النص الذي يلي الصورة يقع بمحاذاة الحافة العليا لها. أما باقي النص فيمتد أسفلها.
‎<IMG SRC="image.jpg" ALIGN="TOP">‎
MIDDLE

 أما عند تحديد هذه القيمة فإن السطر الأول من النص يقع بمحاذاة منتصف الصورة. كذلك فإن باقي النص يمتد أسفلها. 
‎<IMG SRC="image.jpg" ALIGN="MIDDLE">‎
LEFT

هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة. 
‎<IMG SRC="image.jpg" ALIGN="LEFT">‎
RIGHT

أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة. 
‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎


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

مثال:
‎<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20" HSPACE="20">‎


النتيجة: هذه الشيفرة ستدرج الصورة المسماه image.jpg مع محاذاتها ليمين الصفحة وإضافة مسافة فارغة مقدارها 20 بيكسل على الجهات الأربعة. (قارن بين هذا الإطار والإطار السابق الذي وضحت فيه خاصية ALIGN مع القيمة RIGHT. ولاحظ المسافة بين الصورة والنص المرافق لها.)



الخاصية الأخيرة والتي تستخدم مع الوسم <IMG> هي BORDER ووظيفتها إضافة إطار حول الصور والتحكم بسُمكِه. وهذه الخاصية تستخدم بشكل خاص عند تعيين صورة ما كوصلة تشعبية. (أنتظرالدرس السادس) ويتم التحكم بالسُمك من خلال إسناد رقم يمثل السُمك بالبيكسل. والقيمة الإفتراضية له هي 0 أي لا يوجد إطار حول الصورة.
مثلاٌ لإضافة إطار سُمكه 5 بيكسل نكتب الشيفرة التالية:
‎<IMG SRC="image.jpg" BORDER="5">‎

والآن حان الوقت لكي نناقش معاً بعض الأمور التي تتعلق بالصور والرسومات بشكل عام.

* هل حاولت أن تتعرف على أنواع الملفات الرسومية التي تقوم بتحميلها خلال تصفحك لمواقع الإنترنت؟
يزخر عالم الكمبيوتر بالعشرات من أنواع الملفات الرسومية وتنسيقات الصور. وكل منها يختلف عن غيره من عدة نواح، أذكر لك منها: الدقة، وعدد الألوان التي يستوعبها، والحجم التخزيني للملف. لكن هناك نوعين فقط من هذه الملفات يتم تداولهما حالياً في الإنترنت وهما:
JPG, JPEG
إختصار لـِ Joint Photographic Experts Group. ويدعم هذا التنسيق صوراً بعيار 24 بت (أي 16.7 مليون لون). وميزة هذا التنسيق تتمثل في إمكانية ضغط الصور بنسب مختلفة عند تخزينها وبالتالي الحصول على صور صغيرة الحجم نسبياً.(أعني هنا حجم التخزين بالكيلوبايتات وليس أبعاد الصورة). لكن بالمقابل كلما إزدادت نسبة الضغط وصغر حجم الملف كان ذلك على حساب الجودة والوضوح.
GIF
إختصار لـِ Graphical Interchange Format وأقصى عدد للألوان في هذا التنسيق هو 265 لون. ومع ذلك فإن أحجام الصور المخزنة به كبير نسبياً مقارنة بتنسيق JPG. لكن هناك مزايا رائعة ينفرد بها تنسيق GIF مما يستدعي استخدامه في صفحات الويب، أولها القدرة على تخزين صور بخلفيات شفافة Transparent Images وثانيها الصور المتحركة Animated Gifs
وتجد معلومات وافية ودروساً مفصلة حول هذه المواضيع ضمن دروس Paint Shop Pro.
والآن قد تسأل، أي من هذين التنسيقين أستخدم في صفحاتي؟! لا يوجد جواب قطعي لهذا السؤال لكن إليك هاتين المعادلتين:
JPG= الصور الحقيقية ذات العدد الكبير من الألوان، وذات الأبعاد الكبيرة
GIF= الصور قليلة الألوان وصغيرة الأبعاد مثل الأزرار.
* ما هي درجة إستبانة شاشتك Resolution? إذا كنت لا تعرف الجواب قم بفتح تطبيق لوحة التحكم في ويندوز 95 وإختر أيقونة(العرض) ثم اختر التبويب (إعدادات) وهناك سوف تشاهد "مساحة سطح المكتب" الذي يدل على درجة إستبانة الشاشة، وعلى الأغلب ستكون 640×480 أو 800×600، وهناك درجات أعلى تعتمد على قدرة محول العرض. كذلك سوف تشاهد "لوح الألوان" الذي يدل على عدد الألوان التي يمكن عرضها بالإعدادات الحالية للشاشة.
أما في ويندوز 3.11 أو 3.1 فاختر أيقونة برنامج إعداد Windows من لوحة التحكم فتظهر لك قائمة تجد بضمنها نوع وإستبانة الشاشة.

هذا الحديث يقودني إلى وحدة البيكسل Pixel (ألم أعدك مسبقاً بتوضيحها). وهي اختصار لـِ Picture Element. إذا كانت شاشتك بإستبانة 640×480 فهذا يعني أنها مقسمة(نظرياً) إلى شبكة من 640 عمود و480 سطر. وبمنتهى البساطة، إن كل خلية من هذه الشبكة تمثل بيكسل وبالطبع كلما زادت الإستبانة كلما صغر حجم وحدة البيكسل.
* هل سبق لك وأن سمعت بمصطلح Thumbnail ضمن مصطلحات الإنترنت؟ حسناً، لا تلتفت إلى الترجمة الحرفية لهذه الكلمة، والتي تعني "ظفر الإبهام". فالمقصود حقيقةً بها هي تلك الصورة الصغيرة جداً التي تقوم بالنقر عليها فتؤدي إلى عرض صورة بحجم أكبر. لذلك قد يكون المصطلح الأنسب لوصفها هو "العيّنة".
(وإذا كنت قد زرت أحد المواقع الإخبارية لرأيت كيف يتم عرض عينات وصور مصغرة للقطات الأحداث وعند النقر على العينة تظهر الصورة الأصلية. إذن أنت لست مجبراً على الإنتظار لوقت طويل لحين ظهور صورة ذات حجم كبير للقطة لست معنياً بها).

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

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























التسميات:

الاثنين، 16 نوفمبر 2015

أداة تفعيل ويندوز 8.1 بجميع اصداراته وللنواتين | دروس أون لاين


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


مرحباً بكم زوار ومتابعي مدونة دروس أون لاين 

اليوم في تدوينة بسيطة و أداة مفيدة

طـبـعاً هي عبارة عن :

أداة لتفعيل ويندوز 8.1 بجميع اصداراته وللنواتين [32 - 64]

لا أريد أن أطيل عليكم



شرح الأداة




  • أضغلت على زر الفأرة الأيمن ثم تشغيل كمسؤول :

1. تختار اصدار الويندوز تبعك
2. تضغط على Clear Activation Data قبل الضغط على Actuvate Now
3. أضغط على Activate Now






وأخيراً

الان نأتي للتحميل 



التسميات: ,

السبت، 14 نوفمبر 2015

حل مشكلة الكتابة باللغة العربية في الفتوشوب CS6 | دروس أون لاين







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

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

لحل لمشكلة واجهت الكثيرين وهي

[الكتابة باللغة العربية في الفوتوشوب CS6]




أترككم مع الفديو مشاهدة ممتعة ^_^



لا تنس الاشتراك بالقناة



تـعـلـيـقــم حــافـــزنــا نـــحــو الـــتــــقـــــدم
التسميات: ,

الجمعة، 13 نوفمبر 2015

طريقة لسحب سورس أي صفحة انترنت من موقع | دروس أون لاين


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

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

في شرح جديد لطريقة سحب سروس أي صفحة أنترنت بطريقة بسيطة

نبأ الشرح بالصور :


أولــاً :

الموقع عند الدخول اليه

[موقع مخترق مرفوع عليه إندكس]




لسحب السورس والتعديل عليه اتبع الخطوة التالية

[اذا تم تعطيل الزر الأيمن من قبل المصمم]

ثانيـاً :

نكتب 

view-source:

قبل رابط الإندكس






ثالـثـاً :

سوف تظهر لك هذه الصفحة أنسخ الكود الذي يظهر لك
وعدل عليه كما تشاء :)











#حسام_عبدالله














تـعـلـيـقــم حــافـــزنــا نـــحــو الـــتــــقـــــدم
التسميات:

الخميس، 12 نوفمبر 2015

الدرس #4 | لغة HTML _ الفقرات و القوائم | دروس أون لاين

الدرس الرابع

الفقرات والقوائم






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

لقد قمت في الدرس الأول بإيضاح بعض الوسوم الخاصة بالفقرات. ولا بأس من تذكيرك بها. فالوسم <P> يقوم بإنهاء الفقرة. والوسم <BR> ينهي السطر الحالي وينقل النص إلى سطر جديد. والوسم ‎&nbsp;‎ يقوم بإضافة الفراغات، ويجب تكرار كتابته بنفس عدد الفراغات المطلوب.
ونتابع في هذا الدرس مع هذه الوسوم وغيرها.

لقد قلت إن الوسم <P> هو وسم مفرد لكنه يستخدم أيضاً كوسم مزدوج <P> ... <‎/P> وفي هذه الحالة يمكّننا من تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخصائصALIGN, DIR.
فالخاصية ALIGN تحدد محاذاة الفقرة وهي تأخذ القيم Left, Center, Right وأوضحها بالأمثلة التالية:
<P Align="left"> This is a left-aligned paragraph <‎/P>
This is left-aligned paragraph
<P Align="right"> This is right-aligned paragraph</P> 
This is a right-aligned paragraph

<P Align="center"> This is a centered paragraph</P> 
This is a centered paragraph

كذلك لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة نستطيع استخدام الوسوم <CENTER> ... </CENTER>
<CENTER> This is a centered text </CENTER>
This is a centered text

  
أما الخاصية DIR والتي نستخدمها أيضاً مع <P> فتقوم بتحديد إتجاه قراءة النص وتأخذ القيم

LTRإتجاه النص من اليسار إلى اليمين (Left To Right)
RTLإتجاه النص من اليمين إلى اليسار (Right To Left)

                           (تذكر هذه الخاصية جيداً فهي مهمة عند كتابة صفحات باللغة العربية)

ولتنسيق الفقرات أيضاً يوجد الوسوم

<BLOCKQUOTE> ... <‎/BLOCKQUOTE> أي وسوم الفقرات المقتبسة. ووظيفتها تمييز الفقرة من خلال إدراج مسافة إضافية على الهامشين الأيمن والأيسر لها. أنظر إلى الفقرة التالية التي قمت (باقتباسها) من إحدى صفحات هذا الموقع. ومن ثم وضعتها ضمن <BLOCKQUOTE> ... <‎/BLOCKQUOTE>

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


<BLOCKQUOTE>

<BLOCKQUOTE>


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

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




والآن تأمل هذا الشكل وحاول أن تستنتج كيف قمت بإعداده...!؟


A  B  C  D

E  F  G  H


M  N  O  P

I  J  K  L


Q  R  S  T

ربما توصلت إلى أني استخدمت عدداً كبيراً من وسوم الفراغات ‎&nbsp;‎ ونهاية السطر <BR>. حسناً، إستنتاجك لا بأس به ولكنه ليس دقيقاً فأنا لم أستخدم أياً من هذه الوسوم هنا. بل كل ما فعلته بعد إعداد هذا الشكل هو وضعه ضمن:
<PRE> ... </PRE>
وهما اختصار لكلمة Preformated أي المنسق مسبقاً. وبالفعل فقد احتفظ هذا الشكل بالتنسيق المسبق الذي تم إعداده به. لكن تم تحويل الخط إلى خط موحد المسافات (راجع الدرس السابق) ولو لم أقم بوضعه ضمن هذه الوسوم لكانت النتيجة كالتالي:
A B C D E F G H I J K L M N O P Q R S T

لاحظ أن هذا الوسم يستخدم مع الفقرات التي لا نحتاج فيها إلى تنسيقات متعددة للخطوط أو الألوان. بل فقط مع الفقرات العادية موحدة الخط والتنسيقات.

القوائم
تحتوي لغة HTML على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات. وهناك نوعين من القوائم:
أولهما المتسلسلة Ordered Lists. واليك المثال التالي عليها

أسماء بعض المدن الفلسطينية
  1. القدس
  2. نابلس
  3. رام الله
  4. الخليل
  5. جنين
  6. طولكرم

وثانيهما القوائم غير المتسلسلة Unordered Lists وهذا مثال عليها
أسماء بعض الجامعات الفلسطينية
  • جامعة النجاح
  • جامعة القدس المفتوحة
  • جامعة بيرزيت
  • جامعة الخليل

عند التعامل مع القوائم بنوعيهما نحتاج إلى وسوم خاصة بتحديد بداية ونهاية القائمة ووسوم تحدد بنود هذه القائمة.
بالنسبة للقوائم المتسلسلة نستخدم الوسوم

<OL> ... <‎/OL>

أما بالنسبة للقوائم غير المتسلسلة فنستخدم
<UL> ... <‎/UL>

ولتعيين كل بند من بنود القائمة نستخدم الوسم <LI> وهو وسم مفرد يكتب في بداية السطر الخاص بكل بند List Item.
إذن عندما قمت بإنشاء القوائم السابقة استخدمت الشيفرة التالية:
<OL>

<LI>القدس

<LI>نابلس

<LI>رام الله

<LI>الخليل
<LI>جنين
<LI>طولكرم
<‎/OL>

<UL>

<LI>جامعة النجاح

<LI>جامعة القدس المفتوحة

<LI>جامعة بيرزيت

<LI>جامعة الخليل
<‎/UL>

والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي TYPE ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم <UL> أو <OL> وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطيع استخدامها أيضاً مع وسم البنود <LI> لإعطاء تحكم أكبر في مظهر القائمة من خلال تحديد رمز مختلف لكل بند.
فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: A, a, I, i التي تغير رموز الترقيم من الأرقام العادية الإفتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية كما ترى في الجدول التالي:

‎<OL TYPE="A">‎‎<OL TYPE="a">‎‎<OL TYPE="I">‎‎<OL TYPE="i">‎
  1.  
  2.  
  3.  
  4.  
  5.  
  1.  
  2.  
  3.  
  4.  
  5.  
  1.  
  2.  
  3.  
  4.  
  5.  
  1.  
  2.  
  3.  
  4.  
  5.  

والحديث عن هذه الخاصية يقودني إلى الحديث عن مسألة مهمة في لغة HTML وهي مسألة الوسوم والخصائص المحددة بمتصفح معين دون غيره أي التي تعمل مع أحد المتصفحات ولا تعمل مع غيره .
والسبب في ذلك أن هذه الخاصية تستخدم أيضاً مع القوائم غير المتسلسلة، لكن ليس بصورة مطلقة...كيف؟ أنت ترى أن الرمز الموجود عند كل بند في القائمة هو عبارة عن نقطة سوداء يطلق عليها اسم Disc وهي المعرفة ضمناً في خاصية TYPE. لكن هناك رموز أخرى يمكن إظهارها وهي المربع square, والدائرة المفرغة circle وتعرف بالشكل التالي:
‎<UL TYPE="square">‎
‎<UL TYPE="circle">‎
ولكن للأسف هذه الخاصية لا تعمل ولا يظهر تأثيرها إلا مع متصفح نيتسكيب وليس مع مايكروسوفت إكسبلورر الذي يتعامل فقط مع القيمة الإفتراضية للخاصية. (رجاءً لا يغضب مستخدمو إكسبلورر فهناك الكثير من الوسوم والخصائص التي لا يستطيع نيتسكيب عرضها أيضاً).
ولإتمام الحديث عن القوائم، أذكر لك أن هناك وسوماً أخرى تستخدم لإنشاء القوائم غير المتسلسلة، وبنفس الطريقة المستخدمة مع <UL>...<‎/UL> وهذه الوسوم هي:

<DIR> ... <‎/DIR>
<MENU> ... <‎/MENU>
هناك نوع خاص من القوائم يدعى قوائم الشرح أو التعريفات Definition Lists وكما يدل الإسم تستخدم عندما نريد إدراج قائمة من المصطلحات يتبع كل واحد منها شرح أو تعليق.
HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transfer Protocol
GIF
Graphical Interchange Format
JPG, JPEG
Joint Photographic Experts Group

ونحتاج لإنشاء هذه القوائم إلى ثلاثة وسوم:
الأول <DL> ... <‎/DL> لتعريف بداية ونهاية القائمة.
والثاني <DT> ويوضع قبل كل مصطلح لتحديده، وهو وسم مفرد.  
أما الثالث فهو <DD> وهو وسم الشرح أو التعليق وهو أيضا مفرد. ولنقم الآن بكتابة 
شيفرة القائمة السابقة

‎<DL>‎

‎<DT>HTML <DD>Hyper Text Markup Language‎

‎<DT>WWW <DD>World Wide Web‎

‎<DT>FTP <DD>File Transport Protocol‎

‎<DT>GIF <DD>Graphical Interchange Format‎
‎<DT>JPG, JPEG <DD>Joint Photographic Experts Group‎
‎<‎/DL>

‎

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

الأحد، 8 نوفمبر 2015

الدرس #3 | لغة HTML _ الخطوط | دروس أون لاين

l
الدرس الثالث
الخطوط

                             


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

ولنبدأ

راجع صفحتنا البسيطة التي عملنا فيها في الدرسين السابقين. إننا لم نقم بالتعامل مع الخطوط فيها ولا بأي شكل من الأشكال. أي أننا تركناها على إعداداتها الافتراضية.
وبالمناسبة فإن هذه الإعدادات هي خط عادي، نوعه Times New Roman وحجمه 3 (بمقياس متصفحات الإنترنت).
الوسم الأول الخاص بالخطوط هو <FONT> ... </FONT>
وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم. أما الخصائص التي نستخدمها مع هذا الوسم والوسوم الأخرى للخطوط فهي كالتالي:
Face
تقوم هذه الخاصية بتحديد نوع الخط الذي نريده، وقد نقوم بتحديد أكثر من نوع معاً. وفي هذه الحالة إذا لم يتواجد الخط المحدد أولاً على جهاز الشخص الذي يتصفح الموقع يتم إعتماد الخط الثاني ... وهكذا
‎<FONT FACE="Traditional Arabic, Arabic Transparent, Simplified Arabic">‎
... Text ...
<‎/FONT>
طبعاً لا تنس أن تتأكد من كتابة أسماء الخطوط بالصورة الصحيحة هجائياً.
Color
أما هذه الخاصية فتحدد لون الخط، وذلك بنفس مبادئ تحديد الألوان التي تحدثنا في الدرس السابق
‎<FONT COLOR="#FF0000">‎
... Text ...
<‎/FONT>
Size
ولتحديد حجم الخط نستخدم هذه الخاصية. وفقط هناك سبعة أحجام لأي خط تستطيع المتصفحات التعرف عليها.
ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم الذي نريده مباشرة.

‎<FONT SIZE="4">‎
... Text ...
<‎/FONT>
وإليك نماذج بأحجام الخطوط

خط بحجم 1
خط بحجم 2
خط بحجم 3    (الخط الافتراضي)
خط بحجم 4
خط بحجم 5
خط بحجم 6
خط بحجم 7


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

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

خط بحجم -3
خط بحجم -2
خط بحجم -1
خط بحجم +0   (أو -0 وهو الافتراضي)
خط بحجم +1
خط بحجم +2
خط بحجم +3
خط بحجم +4
خط بحجم +5

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

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

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

‎‎<FONT FACE="arial" SIZE="6" COLOR="#FF0000">‎
This font is Arial, Size is 6, Color is Red
<‎/FONT>
This font is Arial, Size is 6, Color is Red

‎<FONT FACE="arial" SIZE="+3" COLOR="#FF0000">‎
This font is Arial, Size is +3, Color is Red
<‎/FONT>
This font is Arial, Size is +3, Color is Red

‎‎<FONT FACE="Times New Roman" SIZE="5" COLOR="#0000FF">‎
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

‎<FONT FACE="courier" SIZE="2" COLOR="#800000">‎
This font is Courier, Size is 2, Color is Maroon
<‎/FONT>
This font is Courier, Size is 2, Color is Maroon

<FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This <‎/FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is <‎/FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi <‎/FONT>
<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, <‎/FONT>
<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi <‎/FONT>
<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, <‎/FONT>
<FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and <‎/FONT>
<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi <‎/FONT>
<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes <‎/FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text <‎/FONT>
This is multi colors, multi faces, and multi sizes text

<FONT FACE="Impact" SIZE="6" COLOR="#000000">C <‎/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#008080">O<‎/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF0000">L<‎/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#0000FF">O<‎/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#800000">R<‎/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF00FF">S<‎/FONT>
C O L O R S

ننتقل الآن إلى الوسم الثاني من الوسوم الخاصة بالخطوط وهو <BASEFONT>.
وعمله هو تحديد نوع الخط وخصائصه بالنسبة للصفحة كلها . أي أنه يقوم بتعريف نوع الخط الأساسي الذي سيستخدم في الصفحة من بدايتها إلى نهايتها ويحدد لونه وحجمه.
هل لاحظت انه وسم مفرد ولا يحتوي على وسم للنهاية؟ بالطبع ما الحاجة إلى وسم النهاية طالما أنه يتعامل مع الصفحة ككل ومع الإعدادات الأساسية لها، وليس مع كلمة أو سطر أو فقرة بذاتها. لذلك فإن هذا الوسم يكتب عادة في أول الملف، ويفضل مباشرة بعد وسم <BODY>. أما الخصائص المستخدمة معه فهي نفس الخصائص سالفة الذكر مع <FONT> ، (نستطيع استخدام الخاصية Name معه بدلاً من Face). وبنفس الطريقة وبدون أي اختلافات. وإليك هذه الشيفرة كمثال:
‎<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5">‎
وبدراسة هذا المثال نستنتج أنه يقوم بتعديل الخط الافتراضي للصفحة بحيث يصبح نوعه Arial وحجمه 5 ولونه أحمر. وبالتالي فإن كل النصوص المكتوبة في تلك الصفحة سيطبق عليها هذا النمط من الخط. ما لم نقم طبعا باستخدام الوسوم <Font> ... </‎Font> لتعديلها والتحكم بمظهرها كما فعلنا في الأمثلة السابقة، فهي أكثر تحديداً وأكثر مرونة من الوسم <BASEFONT>
وبمناسبة الحديث عن الألوان وتغيير اللون الأساسي لنص الصفحة. ألا تذكر أننا في الدرس السابق تكلمنا عن الخاصية Text التي تكتب مع الوسم <Body> والتي استخدمناها لتحديد لون نص الصفحة... أنا لا زلت أذكر ذلك.
لا يوجد تعارض بين هذه الخاصية وخاصية Color في الوسم <BASEFONT> فأنت بكل بساطة تستطيع استخدام أي منهما في صفحتك. وإذا حدث واستخدمت كلاهما فإن اللون المحدد مع الوسم <BASEFONT> هو الذي سيطبقه المتصفح ويعتمده.
وهنا أريد أن أذكرك بما قلته في بداية هذا الدرس:
يوجد دائماً أكثر من طريقة لأداء نفس العمل



هناك وسوم خاصة تستخدم لتمييز العناوين Headings في صفحات الإنترنت وهي: 
<Hn> ... <‎/Hn>
وحرف n هو رقم بين 1-6 يمثل مستوى العنوان.

<H1> Heading 1 <‎/H1>
<H2> Heading 2 <‎/H2>
<H3> Heading 3 <‎/H3>
<H4> Heading 4 <‎/H4>
<H5> Heading 5 <‎/H5>
<H6> Heading 6 <‎/H6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


 
ونأتي الآن إلى التنسيقات والتأثيرات التي يمكن إضافتها إلى النصوص. وفيما يلي الوسوم الخاصة بها متبوعة بمثال ونتيجته:
* الخط الغامق (الأسود العريض)، ونستخدم له الوسوم التالية:
<B> ... <‎/B>
<STRONG> ... <‎/STRONG>
<B> Bold Text <‎/B>This is Bold Text
<STRONG> Strong Text <‎/STRONG>This is Strong Text

* الخط المائل
<I> ... <‎/I>
<EM> ... <‎/EM>
<I> Italic Text <‎/I>This is Italic Text
<EM> Emphasized Text <‎/EM>This is Emphasized Text

* الخط المسطر
<U> ... <‎/U>
<U> Undelined Text <‎/U>This is Undelined Text

* الخط المرتفع
<SUP> ... <‎/SUP>
<SUP> Superscript Text <‎/SUP>This is Superscript Text

* الخط المنخفض
<SUB> ... <‎/SUB>
<SUB> Subscript Text <‎/SUB>This is Subscript Text

* خط كبير
<BIG> ... <‎/BIG>
<BIG> Big Text </BIG>This is Big Text

* خط صغير
<SMALL> ... <‎/SMALL>
<SMALL> Small Text <‎/SMALL>This is Small Text

* نص يعترضه خط
<STRIKE> ... <‎/STRIKE>
<S> ... <‎/S>
<STRIKE> Striked Text <‎/SRTIKE>This is Striked Text
<S> Striked Text <‎/S>This is Striked Text too

* نص الآلة الطابعة TeleType
<TT> ... <‎/TT>
<TT> TeleType Text <‎/TT>This is TeleType Text

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


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

<B><I><U>
This is a Bold, Italic and Underlined Text
<‎/U> <‎/I> <‎/B>
This is a Bold, Italic and Underlined Text 
 
<FONT COLOR="#FF0000" SIZE="+3"><U><I>
This text is red, size +3, Italic, and Underlined  
<‎/I> <‎/U> <‎/FONT>

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

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

Nested and Overlapped Tags


فكتابة الوسوم السابقة بالطرق التالية هو خطأ:
<B><I><U>
This is a Bold, Italic and Underlined Text
<‎/B> <‎/I> <‎/U>

<B><I><U>
This is a Bold, Italic and Underlined Text
<‎/B> <‎/U> <‎/I>
أعرف أنك لم تصدقني وأنك قمت بتجربة هذه الوسوم وربما حصلت على نتيجة صحيحة. حسناً العبرة ليست في عبارة واحدة مكونة من وسمين أو ثلاثة تكتبها في ملف صغير بل في صفحة إنترنت كاملة قد تتألف من مئات أو حتى آلاف الوسوم مكتوبة في ملف خالٍ من الأخطاء المنطقية والتداخلات التي قد تسبب الإرباك للمتصفحات، وتؤدي إلى عدم عرض هذه الصفحة بالشكل المناسب والمطلوب.
لذلك فأهمية أن تتجنب وجود الوسوم المتداخلة في صفحتك هو بنفس الأهمية التي يجب أن توليها لكتابة هذه الوسوم بالصورة الصحيحة إملائياً. وإلا فالمتصفحات لا ترحم. وكثيرة هي المرات التي حصل فيها المصممون على صفحات منهارة بسبب نسيان حرف واحد أو إشارة مثل < أو > أو "
بإختصار شديد... وكقاعدة أساسية، الصفحة المصممة جيداً هي الصفحة ذات الوسوم الصحيحة وغير المتداخلة.

وصلنا الآن إلى نهاية هذا الدرس. أتمنى أن تكون قد قضيت وقتاً ممتعاً معه.
تـعـلـيـقــم حــافـــزنــا نـــحــو الـــتــــقـــــدم
التسميات:

السبت، 7 نوفمبر 2015

تحميل عملاق الموسيقى فيرتشوال دي جي - Virtual DJ إصدار 8.0.2522 | دروس أون لاين




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

التي سأتحث فيها عن تحميل برنامج 

فيرتشوال دي جي - Virtual DJ 


تعريف عن البرنامج : 

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

مميزات البرنامج :

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

الأجهزة التي يعمل عليها :

برنامج فيرتشوال دي جي متوافق مع العديد من الاجهزة الحديثة والاجهزة الذكية وهو متاح ويعمل على الكمبيوتر ولويندوز 7 ويندوز 8.1 ويندوز xp والجوال واندرويد والايفون والايباد والماك والموبايل.

الموقع الرسمي للبرنامج : 

www.virtualdj.com


للتحميل من رابط مباشر :





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




تـعـلـيـقــم حــافـــزنــا نـــحــو الـــتــــقـــــدم
التسميات:
الاشتراك في: الرسائل (Atom)

جميع الحقوق محفوظة لمدونة دروس أون لاين 2013

تصميم :بويردن