2016 | أسامة الموسى

الأربعاء، 15 يونيو 2016

الدرس (18) تعلم html : القوائم

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

القوائم من الأشياء المهمة و المستخدمة كثيراً في أغلب المواقع فما هي و كيف نصنعها ؟

بدايةً القوائم من خلالها يمكن وضع عدة فقرات في ترتيب معين و من خلالها يمكن ان ننظم الموقع و نعطيه جمالية

مثال على حديثي انظر لهذه الصورة

كما كان مكتوب وضعت جملة desktop computer components في أول سطر و عند كتابتها ب html حددتها بالوسم <h3> و تحته مباشرة كتبت القائمة و التي هي موضوع درسنا , الجملة السابقة للتوضيح معناها ( مكونات الحاسب المكتبي ) و تحتها وضعت قائمة بالمكونات

الآن سأريك ما كتبت من وسوم لفعل هذه القائمة

<!DOCTYPE html> <html> <head> </head> <body> <h3> Desktop computer components</h3> <ul> <li>screen</li> <li>Mouse</li> <li>box</li> <li>keyboard</li> <li>speaker</li> </ul> </body> </html>

عملنا هو في الجزء ال body
في أول سطر فيه كتبت العبارة التوضيحية موضوعة بين وسم <h3> و السطر الثاني و ما بعده إلى نهاية ال body هي القائمة
الوسمين الأساسيين في القائمة السابقة هما

<ul></ul>

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

<li></li>

في السطر الأول كتبت screen و الثاني mouse و هكذا لتكون النتيجة كما في الصورة في بداية الدرس
يوجد أيضاً شيء مشابه للقائمة السابقة لكن تحتوي على ترتيب أكثر فالذي سوف نفعله ان نغير الوسمين الأساسيين من

<ul></ul>

إلى

<ol></ol>

و ستكون النتيجة هكذا

كما تشاهدون أن القائمة أصبحت مرتبة على ترتيب معين وهو الأرقام , إذا أردنا أن تكون بدل الارقام أحرف مثلاً a b c d يعني الترتيب الأبجدي للأحرف الانجليزية هكذا

يمكن عمل كما في الصورة السابقة عن طريق أضافة الكود

type="a"

داخل الوسم <ol> بعد ol مباشرة بعد ترك مسافة بينهما لتكون النتيجة على النحو التالي

<ol type="a">

يمكنك أيضاً ترتيب القائمة بحسب العد الروماني مثل هذا الشكل

يمكن عمل المثال السابق بتغيير الحرف a في

<ol type="a">

إلى الحرف i
أيضاً يوجد ترتيب آخر مثل هذا

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

<ol reversed>

كما قلنا أن الترتيب بأستخدام الوسم <ol> تكون نتيجته مثل هذا الشكل

لكن إذا أردنا الترتيب من رقم معي مثلاً من الرقم 25 وبعده 26 و و و ... فيمكن عن طريق أضافة الكود

start="25"

بعد ol في الوسم <ol> بعد ترك مسافة و يمكن تغيير الرقم 25 إلى الذي نريده , الوسم <ol> سيكون هكذا

<ol start="25">

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

نأتي الآن إلى جزء قد يفيد كثيراً والذي هو هل يمكن وضع قائمة داخل قائمة ؟

نعم يمكنك

كيف ذلك ؟

كما قلت يمكن وضع قائمة داخل قائمة أيضاً يمكن وضع قائمة داخل قائمة داخل قائمة و هكذا
يوجد لدينا نوعين من القوائم التي درسناها والتي هي القوائم المرتبة و القوائم الغير المرتبة أو التي لا تحتوي على ترتيب معين , القوائم المرتبة هي بين الوسمين
<ol></ol>
أما النوع الثاني هو
<ul></ul>
وكما قلنا ونزيد يمكن وضع قائمة مرتبة داخل قائمة غير مرتبة أو قائمة غير مرتبة داخل قائمة مرتبة مثلاً أنظرإلى هذا الشكل

كما موضح في الصورة التي سبقت أني قلت ال screen وضعت نوعين hd و full hd (الأشياء التي أكتبها على سبيل المثال ) و mouse نوعين wire و wireless , هكذا أعني بقائمة داخل قائمة ويمكن عمل قائمة داخل القائمة الفرعية كما تحدثت
الآن ناتي إلى كيف فعلت ذلك القائمة السابقة الأساسية هي تبدأ ب الوسم <ol> وتنتهي ب الوسم </ol> لأنها قائمة مرتبة فالقائمة الأولى داخل السطر الأول و القائمة الثانية وضعت داخل السطر الثاني , وللتوضيح الوسوم التي أستعملتها هي

<h3>Desktop computer components</h3>

<ol>

<li>screen

<ul>

<li>hd</li>

<li>full hd</li>

</ul>

</li>

<li>Mouse

<ol>

<li>Wire</li>

<li>Wireless</li>

</ol>

</li>

<li>box</li>

<li>keyboard</li>

<li>speaker</li>

</ol>

كما سبق السطر الأول في القائمة الرئيسية و الذي وسومه لونها أزرق أعني وسم البداية و وسم النهاية وبعد كلمة screen وضعت القائمة الفرعية (التي هي قائمة غير مرتبة ) للسطر الأول في القائمة الرئيسية الممتدة من الوسم <ol> التي باللون الاحمر إلى الوسم </ol> التي أيضاً باللون الاحمر , أنظر أن القائمة الفرعية معلمة باللون الزهري أقصد وسم البداية و وسم النهاية في القائمة الفرعية
ملاحظة : لم يتم حذف وسم النهاية في السطر الأول من القائمة الرئيسة في المثال السابق بل حافظنا عليه و قد لونته لك باللون الأزرق
كما لأحظنا و كما شرحنا كيفية وضع قائمة داخل قائمة فتحدثت كيف فعلت ذلك بالسطر الأول بالقائمة الرئيسية أيضاً وضعت قائمة في السطر الثاني من القائمة الرئيسية والذي علمته باللون الأخضر ولكن الأختلاف بين القائمة الفرعية الاولى و القائمة الفرعية الثانية أن القائمة الفرعية الأولى كانت قائمة فرعية غير مرتبة وكانت القائمة الرئيسية مرتبة أم القائمة الفرعية الثانية كانت مرتبة و هذا الذي اقصده أنه يمكن وضع قائمة مرتبة داخل قائمة غير مرتبة و العكس صحيح
وقلت أيضاً ان يمكن وضع قائمة داخل قائمة داخل قائمة مثل هذا الشكل

كما فعلت , انني وضعت قائمة للسطر الذي يحتوي على full hd و الوسوم المستعملة لعمل المثال السابق هي

<h3>Desktop computer components</h3>

<ol>

<li>screen

<ul>

<li>hd</li>

<li>full hd

<ul>

<li>30fps</li>

<li>60fps</li>

</ul>

</li>

</ul>

</li>

<li>Mouse

<ol>

<li>Wire</li>

<li>Wireless</li>

</ol>

</li>

<li>box</li>

<li>keyboard</li>

<li>speaker</li>

</ol>

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

الوسمين الرئيسين في هذا الأخير هم
<dl></dl>
داخلهما نضع القائمة التي لها وسوم معينة و يمكن وضع أكثر من قائمة
مثلاً ننشأ قائمة بهذا الشكل

الوسوم التي عملت هذا الشكل هي
<dl>
<dt>Computer Advantages</dt>
<dd>Way to communicate</dd>
<dd>Way to learn</dd>

</dl>
كما قلنا الوسمين الرئيسيين الذين سيحتويين على القوائم هم
<dl></dl>
داخلهما وضعت قائمة واحدة والتي عنوانها Computer Advantages (مزايا الحاسوب) , العنوان موضوع موضوع بين الوسمين
<dt></dt>
الوسمين السابقين يضع داخلهما عنوان القائمة أما كل من الجملتين Way to communicate و Way to learn هما عناصر القائمة و التين يوضعان بين الوسمين
<dd></dd>
القائمة السابقة يمكن أن نضيف قائمة بعدها لها عنوان و عناصر مثل هذه الصورة

الوسوم المستعمل هي

<dl>

<dt>Computer Advantages</dt>

<dd>Way to communicate</dd>

<dd>Way to learn</dd>

<dt>Advantages of the Internet</dt>

<dd>People gathered in one village</dd>

<dd>To learn</dd>

</dl>

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

اقرأ تكملة الموضع

الاثنين، 16 مايو 2016

الدرس (17) تعلم html : الجداول ( الجزء الثالث )

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

درس اليوم إن شاء الله بيكون خاتمة لسلسلة دروس الجداول في لغة html و سيكون فيه عرض مفاهيم مهمة في
بناء الجداول

سنتعرف على أول مفهوم إلا وهو (colspan) , ما هو و ماذا يفيد ؟؟

يفيد هذا الشيء في تلخيص و منع من تكرار نفس العبارة لمقصد واحد , فمثلاً في هاتين الصورتين مقدمة لما سوف نشرحه

الفرق بين الاولى و الثانية في أن الأولى في الصف الأول كانت تحتوي على أربعة أعمدة و الصورة الثاني اصبحت في عامودين

فما قلنا منعنا من تكرار نفس العبارة ووضعنا نفس العبارة في عامدو واحد أو خلية واحدة لأن المعلومات تحت كلمة computer (1) المكررة هم لكلا العبارة المكررة او العمود المكرر فعملنا على الاختصار في العمودين إلى عامود واحد و فعلنا ذلك بإضافة كود

colspan="2"

إلى العامود الأول الصف الأول و قمنا بحذف العامود الثاني في الصف الاول ليصبح الجدول على هذا الشكل

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <tr> <td colspan="2">Computer (1)</td> <td colspan="2">Computer (2)</td> </tr> <tr> <td>ram 1GB</td> <td>cpu intel</td> <td>ram 2GB</td> <td>cpu amd</td> </tr> <tr> <td>rom 64GB</td> <td>OS (M)</td> <td>rom 128 GB</td> <td>OS (W)</td> </tr> </table> </body> </html>

فجدول كان على هذا الشكل

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <tr> <td>Computer (1)</td> <td>Computer (1)</td> <td>Computer (2)</td> <td>Computer (2)</td> </tr> <tr> <td>ram 1GB</td> <td>cpu intel</td> <td>ram 2GB</td> <td>cpu amd</td> </tr> <tr> <td>rom 64GB</td> <td>OS (M)</td> <td>rom 128 GB</td> <td>OS (W)</td> </tr> </table> </body> </html>

فالأختلاف الحاصل بين الجدولين السابقين بالتحديد ان قمنا بحذف المحدد باللون الاحمر في النص التالي المأخوذ من الجدول الثاني مع العلم اني حذفت العامود الرابع من الصف الأول ايضاً لنفس السبب الذي هو لإختصار التكرار من (computer (2

<td>Computer (1)</td>

<td>Computer (2)</td>

و قمنا بإضافة الكود الذي هو يأخذ عامودين من الصف الأول

<td colspan="2">Computer (1)</td>

<td colspan="2">Computer (2)</td>

في الذي سبق اخذنا عامودين لكل من

Computer (1)

Computer (2)

و الرقم الذي باللون الأزرق هو يعني بأن أخذنا عامودين وهو الرقم 2
................................................................................................
نأتي الآن إلى شيء مماثل للذي سبق لكن الإختلاف في اختصار صفين الذين يقعان في العامود الواحد , كيف ذلك ؟؟؟
أنظر إلى الصورتين التاليتين لتفهم الفرق

لتكن الاكواد المستعملة في الصور على الشكل التالي

الصورة الأولى أكوادها هن

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <tr> <td>Computer (1)</td> <td>ram 1GB</td> <td>cpu intel</td> </tr> <tr> <td>Computer (1)</td> <td>Crom 64GB</td> <td>OS (W)</td> </tr> <tr> <td>Computer (2)</td> <td>ram 2GB</td> <td>OS (M)</td> </tr> </table> </body> </html>

الصورة الثانية أكوادها هن

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <tr> <td rowspan="2">Computer (1)</td> <td>ram 1GB</td> <td>cpu intel</td> </tr> <tr> <td>Crom 64GB</td> <td>OS (W)</td> </tr> <tr> <td>Computer (2)</td> <td>ram 2GB</td> <td>OS (M)</td> </tr> </table> </body> </html>

كما سبق فقد حذفت العامود الأول في الصف الثاني , وفي الصورة الأولى كانت اكواد الصف الثاني على الشكل التالي

<td>Computer (2)</td>

<td>ram 2GB</td>

<td>OS (M)</td>

فحذفت العبارة الملونة باللون الأحمر ليصبح في الصورة الثانية على الشكل التالي
<td>Crom 64GB</td>

<td>OS (W)</td>
ومن ثم نضيف في الصف الأول العامود الأول عبارة

rowspan="2"

لتتغير وسوم الصف الأول العامود الأول من

<td>Computer (1)</td>

إلى

<td rowspan="2">Computer (1)</td>

وكلما نزيد من الرقم 2 كلما حجزنا اكثر من الصفوف في نفس العامود

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

<colgroup></colgroup>

نضع هذين الوسمين اسفل الوسم <table> مباشرةً

ويكون داخل هذين الوسمين الجزء المسؤول أو وسوم تنسيق الجدول

فمثلاً نريد تغيير لون أعمدة معينة على كل الصفوف

انظر على الشكل التالي

هذا هوا الجدول

وهذه هي الأعمدة

في الصورة السابقة استعملنا لتلوين الأعمدة بهذا الشكل هذه الوسوم

<col span="2" style="background:#E5E5F1;">

<col span="1" style="background:#C0C0EA;">

في السطر الأول الذي فيه رقم 2 باللون الأحمر كنا نعني من الرقم 2 ان أول عامودين اعطي خلفيتهم لون معين ف style تعني الشكل و

background

تعني خلفية اي خلفية العامود

#E5E5F1

تعني كود اللون الذي استخدمته في تلوين أول عامودين

في السطر الثاني الذي فيه الرقم 1 الملون باللون الأحمر

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

انظر ما بعد style هذا ينتمي للغة css و لكن المطلوب منك معرفة شكل الوسم ككل

السطرين السابقين

<col span="2" style="background:#E5E5F1;">

<col span="1" style="background:#C0C0EA;">

يضعان كما قلنا بين الوسمين

<colgroup></colgroup>
ملحوظة : ترتيب التلوين في الاعمدة يمكنك تعديله فيمكنك القول ان أول عامود يلون بلون و بعدها ثاني عامودين يلونون بلون معين تختاره

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

<!DOCTYPE html> <html> <head> </head> <body> <table border="1px" width="500px"> <colgroup> <col span="2" style="background:#E5E5F1;"> <col span="1" style="background:#C0C0EA;"> </colgroup> <tr> <td rowspan="2">Computer (1)</td> <td>ram 1GB</td> <td>cpu intel</td> </tr> <tr> <td>Crom 64GB</td> <td>OS (W)</td> </tr> <tr> <td>Computer (2)</td> <td>ram 2GB</td> <td>OS (M)</td> </tr> </table> </body> </html>

وبهذا نكون قد انتهينا من سلسلة تعلم كيفية انشاء الجداول في لغة html

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

اقرأ تكملة الموضع

الخميس، 12 مايو 2016

الدرس (16) تعلم html : الجداول ( الجزء الثاني )

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

تعلمنا في الدرس السابق الأساسيات في بناء الجداول بلغة html لكن يوجد بعض الأضافات في بناء الجداول سنتعرف على بعضها في هذا الدرس

الجدول يمكن تقسيمه إلى ثالث اجزاء وهم الجزء العلوي (thead) و الصفوف التي تقع في المنتصف او ما تسمى جسم الجدول (tbody) و اخر شيء الجزء السفلي (tfoot)

هذه التقسيمات تفيدنا عند تنسيق شكل الجدول عن طريق لغة css وهذه اللغة ان شاء الله سأضع دروس لها على هذا الموقع بعد الأنتهاء من دروس html

بداية نتعرف اين سنضع thead

نضعه على شكل وسمين وسم بداية و وسم نهاية على شكل التالي

<thead></thead>

لكن كيف نضعه في الجدول , نضعه بأن يكون الصف الأول من الجدول داخل هذين الوسمين على الشكل التالي

<thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead>

ويمكن تنسيق هذا الصف بلغة css عن طريق كتابة اكواد css ونضع التوجيه لهذا ال الصف على الشكل التالي

<style type="text/css">
thead td{background:#ccc; }
</style>

فتكون النتيجة على الشكل التالي

مع العلم انا قد وضعت حدود لجدول هذا و ضبطت عرضه

و أكواد ال css ال style وضعتها في الجزء head من الصفحة

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

<!DOCTYPE html> <html> <head> <style type="text/css"> thead td{background:#ccc;} </style> </head> <body> <table border="1" width="400px"> <thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead> </table> </body> </html>

نأتي الآن إلى جسم الجدول وهي الصفوف التي تقع ما بين أول صف و أخر صف
والوسوم الذي نحتاجه هو

<tbody></tbody>

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

ويمكن تنسيق هذه الصفوف مثل هذا الشكل

<style type="text/css">
tbody td{background:#e0e0e0}

</style>

لتكون النتيجة على الشكل التالي

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

الأكواد التي أستعملتها ليصبح الشكل كالصورة السابقة

<!DOCTYPE html> <html> <head> <style type="text/css"> thead td{background:#ccc;} tbody td{background:#e0e0e0;} </style> </head> <body> <table border="1" width="400px"> <thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead> <tbody> <tr> <td>text 5</td> <td>text 6</td> <td>text 7</td> <td>text 8</td> </tr> <tr> <td>text 9</td> <td>text 10</td> <td>text 11</td> <td>text 12</td> </tr> <tr> <td>text 13</td> <td>text 14</td> <td>text 15</td> <td>text 16</td> </tr> </tbody> </table> </body> </html>

الآن نصل إلى آخر جزأ وهو الجزء السفلي من الجدول والتي وسومه هي

<tfoot></tfoot>

نضع ما بين الوسمين السابقين آخر صف من الجدول و يمكنك تنسيقه بلغة css كما نسقنا جسم الجدول و رأس الجدول
مثلاً لقد اعددت جدول مؤلف من أجزائه كلها و الأكواد هي

<!DOCTYPE html> <html> <head> <style type="text/css"> thead td{background:#ccc;} tbody td{background:#e0e0e0;} tfoot td{background:#848080;} </style> </head> <body> <table border="1" width="400px"> <thead> <tr> <td>text 1</td> <td>text 2</td> <td>text 3</td> <td>text 4</td> </tr> </thead> <tbody> <tr> <td>text 5</td> <td>text 6</td> <td>text 7</td> <td>text 8</td> </tr> <tr> <td>text 9</td> <td>text 10</td> <td>text 11</td> <td>text 12</td> </tr> <tr> <td>text 13</td> <td>text 14</td> <td>text 15</td> <td>text 16</td> </tr> </tbody> <tfoot> <tr> <td>text 17</td> <td>text 18</td> <td>text 19</td> <td>text 20</td> </tr> </tfoot> </table> </body> </html>

ليصبح الجدول على الشكل التالي

و بهذا نكون قد انتهينا من درس اليوم و إلى اللقاء في الجزء القادم من تعلم الجداول في لغة html

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

اقرأ تكملة الموضع

الثلاثاء، 29 مارس 2016

الدرس (15) تعلم html : الجداول ( الجزء الأول )

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

الجدول يفيد في كثير من الحالات كأنشاء جدول يحوي درجات الطلاب كمثل هذا الجدول في الصورة التالية

يكمن عمل مثل هذا الشكل بالوسوم التالية
بداية نكتب الوسمين

والذي يعني هيئة الجدول ونكتب داخله مجموعة من الوسوم والتي تحدد الصفوف و الأعمدة

مثلاً لكتابة صف من التسميات نكتب الوسمين

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

ام العامود فهذا هو

و الوسم الخاص بالأعمدة يوضع ما بين وسمين الصف على هذا الشكل

<tr>

<tr>

ويمكن تكرار الاعمدة داخل وسمين الصف لكن للتنويه الاعمدة تكون داخل الصف الواحد , فكل صف له اعمدة عندما تنشاً عدة صفوف داخلها أعمدة
لتقريبها لك اكثر في الصورة التالية الصف محدد باللون الاخضر و الأعمدة التي على نفس الصف محددة باللون الأحمر

الآن نأتي إلى الحدود في الجدول كيف وضعها فأنت عند كتابة الجدول يأتي على الصورة التالية

لوضع الحدود نضع في الوسم <table> عبارة

border="1"

ليصبح الوسم بعد ذلك على الشكل التي

يمكن اضافة شيء آخر بعد كود الحدود للتحكم بعرض الجدول بالكامل و الذي هو

width="500px"

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

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

إلى الآن نكون قد انتهينا من الجزء الأول شرح الجداول

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

اقرأ تكملة الموضع

السبت، 26 مارس 2016

الدرس (14) تعلم html : الوسم iframe

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

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

سأعطيك مثال على هذا الشيء , انظر للصندوق التالي الذي يعرض موقعي

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

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

name="my_website"

وظيفة ال name تكون انها اذا كانت لديك اكثر من iframe فال name تميز كل واحدة عن الأخرى
ثانياً كتبت

src="www.osamaalmousa"

وهو الموقع الذي نريده ان يعرض داخل الصندوق فالsrc لا تغيرها ابقها فهي تعني جلب الرابط وأما الموقع في حالتي يمكنك تغييره

يمكنك اضافة على الوسم iframe اضافات لتخصيص العرض و الأرتفاع للصندوق الذي يحتوي الموقع فمثلاً لتغيير العرض نضيف بعد

src="www.osamaalmousa"

هذا الكود

width="100px"

طبعاً بعد ترك فراغ بينها و بين الكود الذي قبلها

رقم مئة نغيره بالرقم الذي تريده اما بعد مئة px هي مقياس بالبكسل

نأتي الآن إلى الأرتفاع فكوده على الشكل التالي

height="100px"

نضع هذا الكود بعد كود الأرتفاع اذا اردت لكن بعد ترك فراغ

رقم مئة تغيره للذي تريده

إلى الآن نكون قد أنتهينا من درس اليوم

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

اقرأ تكملة الموضع

الأربعاء، 16 مارس 2016

الدرس (13) تعلم HTML : الروابط

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

في لغة ال html هناك وسم كثير الأستخدام لموضوع الروابط والذي هو الوسم <a>
وتكون صيغته على الشكل التالي

<a></a>

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

<a href="www.osamaalmousa.me">osama</a>

فالرابط يوضع بين " " و الكلمة href هي كلمة ثابتة لا تغيرها و بعدها يكتب = و هكذا
في المثال السابق عند كتابته على هذا النموذج فالنتيجة عند الضغط على كلمة osama في المتصفح فسيفتح الرابط في نفس علامة التتويبة اي لن يفتح الرابط في نافذة جديدة في المتصفح و لجعل الرابط يفتح في نافذا جديدة في المتصفح فسنزيد بعد

href=" "

بعبارة و لكن بعد ترك فراغ

target="_blank"

يمكن في نفس الصفحة ان نعمل توجيه لمكان ما في الصفحة و هذا يكون عن طريق ال id الذي يوضع مثلاً في الوسم <p> والتي مهتهما اعطاء عنوان للوسم
ال id يمكن كتابته على الشكل التالي

id=" هنا نكتب ايضاً ما نريده "

و الكود السابق يكتب في ال <p> و ليكون مثلاً نكتب هكذا

<p id=" "></p>
دعونا نكتب مثال لنشرح الموضوع

<!DOCTYPE html> <html> <head> </head> <body> <a href="#go-to-paragraph">go to paragraph 1 </a> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p id="go-to-paragraph"> paragraph 1 </p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> <p> paragraph<p> </body> </html>

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

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

<a href="#go-to-paragraph">go to paragraph 1 </a>

والذي داخله

#go-to-paragraph

حيث جملة go-to-paragraph مكتوبة داخل احدى وسوم <p> بعد رمز id و من اجل وضع الجملة السابقة في وسم الرابط ينبغي وضع رمز # قبلها فعند الضغط على الرابط سينتقل المتصفح إلى الفقرة التي تحوي خلف الكواليس في البرمجة على id

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

فالمثال السابق وضعنا رابط والذي اسمه go to paragraph 1 عند الضغط عليه يتم التوجيه إلى ال paragraph الذي عنوانه

go-to-paragraph

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

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

اقرأ تكملة الموضع

الخميس، 10 مارس 2016

الدرس (12) تعلم HTML : ما هي التعليقات في لغة html

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

التعليقات مفيدة كثيراً في انشاء المواقع و حتى عند كثير من لغات برمجة فالمبرمج المحترف قد ترى في صفحة البرمجة الخاصة به كثير من التعليقات والتي تفيد في الواقع في ان يضع تعليق او نص شرح لما فعله في نقطة معينة من ملفه البرمجي
فعند العودة و قراءة ما برمجه يكون قد وضع تعليق يرشده لما فعله في البرمجة عند مكان معين و هذا التعليق عند تنفيذ ملفات البرمجة لا يكون له علاقة في نتائج البرمجة
اي مثلاً في التعليقات في لغة html عند كتابتها لا تظهر في صفحة الويب

لأسهل الموضوع عليكم و لأن الموضوع سهل جداً سأدخل في مثال تطبيقي

<html> <head>  </head> <body>  </body> </html>

التعليقات قد كتبتها في المنطقتين ال head و ال body و التعليقات صيغتها على النحو التالي

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

<html> <head> <meta content=”text/html; charset=windows-1256″ http-equiv=”Content-Type” />  <title>مشروع عمل </title> </head> <body> </body> </html>

و هكذا نكون قد انتهينا من درس التعليقات في لغة html

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

اقرأ تكملة الموضع

الاثنين، 7 مارس 2016

الدرس (11) تعلم HTML : شرح ال paragraph

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

ان الوسم <p> و الذي يسمى paragraph من خواصه ان يأخذ حيز على عرض الموقع و يطبق عليه كثير من التأثير من لغة css كالخلفية و العرض و الطول و الإطار ولكن هذه الأشياء كما قلنا تلزمها دروس في حالها هنا ما يهمنا ان نشرح خصائص ال paragraph الرئيسية

1- الوسم <p> يجب انت تنهيه بوسم نهاية كالشكل التالي

<p> </p>

2- التأثير تكتب داخل الوسم <p> على الشكل التالي

<p style="background-color:red;"></p>

التأثير الخاصة بلغة css تكتب كما الصيغة في الشكل السابق ان يكون :

style="background-color:red;"

style تعبر عن التأثيرات بعدها تكتب اشارة = و بعدها نكتب اثنتين من هذه الاشارة " و التي يمكن كتابتها عن طريق الضغط على زر shift مع الزر الموجودة فيها علامة " وعادةً ما تكون فوق الزر shift , الآن بعدما كتبنا اثنتين من الأشارة " نكتب دخلهما التأثيرات كما في المثالة السابق كتبت background-color:red فإن background-color تعني الخلفية الملونة لل paragraph و تكتب بعدها نقطتين فوق بعضهما و بعد ذلك كنت قد كتبت اسم اللون والذي هو red اي احمر و بعد ذلك نكتب فاصلة منقوطة ; التي نكتبها بعد نهاية كل تأثير والتي نظهرها بالضغط على زر shift و الزر القريب من الزر shift المرسوم عليه تلك العلامة ;
للتذكير هذا الكلام يخص لغة css

3-الكتابة داخل ال paragraph اي بين الوسمين

<p> هنا نكتب النص المراد كتبه </p>

4- ال paragraph عند الكتابة فيه كتابات و عند وضع مسافات كثير فلن يأخذ غير مسافة واحدة و حتى عند الضغط على الزر enter الخاص بأخذ سطر جديد فالكلام لو كان على عدة اسطر سيكون على سطر واحد على متصفح الويب إلا اذا وضعنا بين كل جملة و جملة الوسم </br> لجعل كل جملة في سطر جديد

5- ال paragraph يكتب في ال body او بين الوسمين

<body> </body>

مثال على شرحنا اليوم :

<html> <head> </head> <body> <p style="background:red"> text <br> text 2 </p> </body> </html>

الصورة التالية لنتيجة العمل الخاص بنا

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

اقرأ تكملة الموضع

السبت، 5 مارس 2016

الدرس (10) تعلم HTML : بعض الوسوم التي تضع في ال head - الجزء الثاني -

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

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

لغة ال html هي لغة انشاء المواقع و لكن يوجد لغة مساندة لها والتي هي لغة css التي تقوم بالتحكم في
تصميم هذه الصفحة فمثلأ البناء عندما يبنى يكون في البداية بدون نوافذ ولا ابواب و من دون دهان ومثل هكذا تكون صفحة الويب عند برمجتها بلغة html و اما لغة css هي الشكل الذي يعطى لصفحة الويب مثل الطلاء الذي يدهن في البناء او وضع النوافذ و الأبواب

في البداية يجب ان نعرف ان لغة HTML لغة ينزل لها تحديثات وهذه التحديثات تكون في اضافة على اللغة من اكواد جديدة و تحسينات و الغاء وسوم و اضافة وسوم جديدة و اخر تحديث سمي ب HTML 5 الآن نحن يهمنا ان نضيف في بداية كتابة وسوم لغة HTML ان نكتب

<!DOCTYPE html>

فتصبح صفحة النت مكتوبة على الشكل التالي

<!DOCTYPE html> <html> <head> <meta content=”text/html; charset=windows-1256″ http-equiv=”Content-Type” /> </head> <body> </body> </html>

نأتي الآن إلى الأكواد المسؤولة عن مظهر الصفحة او اكواد لغة CSS قد تكتب احيانا بين الوسمين

<style></style>

وهذين الوسمين يضعان في ال head , هذا الموضوع عن اكواد لغة css لا يمكنني طرحه في هذا الدرس لأنه طويل و يلزم دروس خاصة به , الآن ما يهمنا ان في مكان head قد يوضع هذا الوسم و أيضاً قد يوضع الوسم link والذي له استخدامات لكن يكون لها استخدام كبير في جعلها وسيلة لربط بين ملف css خارجي فنعم قد يأتي اكواد لغة css في ملف خارجي مرافق لملف صفحة ال html , الوسم link في هذه الحالة يكون على الشكل التالي

<link rel="stylesheet" href="هنا نوضع موقع الملف">

في المكان الذي نضع فيه موقع الملف احياناً يكون ملف css بنفس مكان ملف حفظ صفحة html اذا حفظنا ملف css في نفس المكن فنوضع اسم الملف في المكان الموضح في الوسم السابق
ان شاء الله بعد ما ننهي من دروس html احتمال نشرح لغة css في دروس ثانية .
ايضاً من الوسوم التي توضع في جزء head الوسم <script>
الذي له لغة خاصة به والتي هي javascript هذه اللغة ليست صعبة بل سهلة في تعلمها لكن قبل تعلمها يجب ان يكون لديك دراية و معرفة بلغات css و html ,لغة javascript لها استخدامات كثيرة منها في برمجة العاب الويب و كثير اشياء ايضاً هذه اللغة يلزمها دروس لشرحها , المهم في دروس تعلم html يجب ان نعرف ان وسم script يكتب على هذا الشكل

<script></script>

بين الوسمين السابقين يكتب اكواد لغة javascript
نأتي الأن إلى الوسم الاخير الذي هو

<title></title>

هذان الوسمين شرحتهم في درس خاص بهما و لقراءته اضغط هنا
إلى هنا نكون قد انتهينا من درس اليوم

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

اقرأ تكملة الموضع

الأربعاء، 24 فبراير 2016

الدرس (9) تعلم HTML : بعض الوسوم التي تضع في ال head - الجزء الاول -

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

مرحباً بكم في شروحات لتعلم html اليوم سأعرفكم على بعض الوسوم التي تكون بين الوسمين

<head></head>

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

و هذه الخاصية تكون مسؤول عنها وسم meta والذي تكون صيغته على شكل التالي

مثال توضيحي

الوسم الثاني وهو لجعل الموقع يقبل اللغة العربية يعني اذا كتبت عبارة عربية في ال body من دون كتابة هذا الوسم فلن يظهر النص مفهوم

الوسم هو

هذا الوسم يفضل ان يكون من أوائل الوسوم في ال head

مثال على شرحنا اليوم

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

اقرأ تكملة الموضع

مرات مشاهدة الصفحة في الشهر الماضي

خبراتي فى لغات البرمجه

أرشيف المدونة الإلكترونية

نموذج الاتصال

الأربعاء، 15 يونيو 2016

الدرس (18) تعلم html : القوائم

القوائم من الأشياء المهمة و المستخدمة كثيراً في أغلب المواقع فما هي و كيف نصنعها ؟

بدايةً القوائم من خلالها يمكن وضع عدة فقرات في ترتيب معين و من خلالها يمكن ان ننظم الموقع و نعطيه جمالية

الاثنين، 16 مايو 2016

الدرس (17) تعلم html : الجداول ( الجزء الثالث )

الخميس، 12 مايو 2016

الدرس (16) تعلم html : الجداول ( الجزء الثاني )

الثلاثاء، 29 مارس 2016

الدرس (15) تعلم html : الجداول ( الجزء الأول )

السبت، 26 مارس 2016

الدرس (14) تعلم html : الوسم iframe

الأربعاء، 16 مارس 2016

الدرس (13) تعلم HTML : الروابط

الخميس، 10 مارس 2016

الدرس (12) تعلم HTML : ما هي التعليقات في لغة html

الاثنين، 7 مارس 2016

الدرس (11) تعلم HTML : شرح ال paragraph

السبت، 5 مارس 2016

الدرس (10) تعلم HTML : بعض الوسوم التي تضع في ال head - الجزء الثاني -

الأربعاء، 24 فبراير 2016

الدرس (9) تعلم HTML : بعض الوسوم التي تضع في ال head - الجزء الاول -

تطبيق موقع أسامة الموسى

كتاب : تعلم (html) من البداية حتى الإحتراف تأليف اسامة الموسى

Translate

للمتابعة على مواقع التواصل الاجتماعي

المشاركات الشائعة

أدوات

من انا

قائمة مواقعي