أحدث المواضيع

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

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

85% HTML
90% CSS
85% Web-Design

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

الاسم

بريد إلكتروني *

رسالة *

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

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

 بسم الله الرحمن الرحيم
الجدول يفيد في كثير من الحالات  كأنشاء جدول يحوي درجات الطلاب كمثل هذا الجدول في الصورة التالية 
يكمن عمل مثل هذا الشكل بالوسوم التالية 
بداية نكتب الوسمين 
<table></table>
والذي يعني هيئة الجدول ونكتب داخله مجموعة من الوسوم والتي تحدد الصفوف و الأعمدة
مثلاً لكتابة صف من التسميات نكتب الوسمين
<tr></tr>
يمكن تكرار هذين الوسمين لصنع مجموعة الصفوف 
شاهد الصورة التالية ما داخل الأطار الأحمر لتوضح لك ما هو الصف الذي اعنيه
ام العامود فهذا هو 
و الوسم الخاص بالأعمدة يوضع ما بين وسمين الصف على هذا الشكل 
<tr>         
<td></td>
<tr>         
ويمكن تكرار الاعمدة داخل وسمين الصف لكن للتنويه الاعمدة تكون داخل الصف الواحد , فكل صف له اعمدة عندما تنشاً عدة صفوف داخلها أعمدة 
لتقريبها لك اكثر في الصورة التالية الصف محدد باللون الاخضر و الأعمدة التي على نفس الصف محددة باللون الأحمر
الآن نأتي إلى الحدود في الجدول كيف وضعها فأنت عند كتابة الجدول يأتي على الصورة التالية

 لوضع الحدود نضع في الوسم <table> عبارة 
border="1"
ليصبح الوسم بعد ذلك على الشكل التي 
<table border="1">
يمكن اضافة شيء آخر بعد كود الحدود للتحكم بعرض الجدول بالكامل و الذي هو 
width="500px"
يمكنك التعديل على العدد لضبط العرض , الكود السبق تضعه اذا اردت بعد كود الحدود لكن بعد ترك مسافة بينهم 
سأعطيك مثال تطبيقي على فعلناه 
قم بنسخ المثال السابق و ضعه في مفكرة و أحفظه كما تعلمنا في السابق و عند فتح الملف على المتصفح سيظهر كما في هذه الصورة 
إلى الآن نكون قد انتهينا من الجزء الأول شرح الجداول
السلام عليكم و رحمة الله و بركاته

اقرأ تكملة الموضع
By في 3/29/2016 05:48:00 م
التسميات:

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

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

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


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

هكذا يفعل الوسم iframe و الصندوق الذي يصنعه يمكنك مشاهدة الموقع الذي داخله بتحريك شريطي التمرير على جانبي الصندوق او من الهاتف بتمرير اصبعك فوق الصندوق و صيغته الiframe على الشكل التالي 
<iframe name="my_website" src="www.osamaalmousa.me"></iframe>
كما سبق كان للوسم iframe وسم نهاية والعمل يكون على وسم البداية فبعد كتابة iframe كتبت 
name="my_website"
وظيفة ال name تكون انها اذا كانت لديك اكثر من iframe فال name تميز كل واحدة عن الأخرى  
ثانياً كتبت 
src="www.osamaalmousa"
وهو الموقع الذي نريده ان يعرض داخل الصندوق فالsrc لا تغيرها ابقها فهي تعني جلب الرابط وأما الموقع في حالتي يمكنك تغييره 
يمكنك اضافة على الوسم iframe اضافات لتخصيص العرض و الأرتفاع للصندوق الذي يحتوي الموقع فمثلاً لتغيير العرض نضيف بعد 

src="www.osamaalmousa"
هذا الكود
width="100px"
طبعاً بعد ترك فراغ بينها و بين الكود الذي قبلها
رقم مئة نغيره بالرقم الذي تريده اما بعد مئة px هي مقياس بالبكسل
نأتي الآن إلى الأرتفاع فكوده على الشكل التالي
height="100px"
نضع هذا الكود بعد كود الأرتفاع اذا اردت لكن بعد ترك فراغ 
رقم مئة تغيره للذي تريده
إلى الآن نكون قد أنتهينا من درس اليوم
السلام عليكم و رحمة الله و بركاته
اقرأ تكملة الموضع
By في 3/26/2016 07:00:00 م
التسميات:

الأربعاء، 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>
دعونا نكتب مثال لنشرح الموضوع

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

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

اقرأ تكملة الموضع
By في 3/16/2016 11:18:00 م
التسميات:

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

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


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

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

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


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

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

السلام عليكم و رحمة الله و بركاته
اقرأ تكملة الموضع
By في 3/10/2016 06:35:00 م
التسميات:

الاثنين، 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>
مثال على شرحنا اليوم :
الصورة التالية لنتيجة العمل الخاص بنا 
و بهكذا نكون قد انتهينا من درس اليوم 
السلام عليكم و رحمة الله و بركاته

اقرأ تكملة الموضع
By في 3/07/2016 05:39:00 م
التسميات:

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

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

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

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

 في البداية يجب ان نعرف ان لغة HTML لغة ينزل لها تحديثات وهذه التحديثات تكون في اضافة على اللغة من اكواد جديدة و تحسينات و الغاء وسوم و اضافة وسوم جديدة و اخر تحديث سمي ب HTML 5 الآن نحن يهمنا ان نضيف في بداية كتابة وسوم لغة HTML ان نكتب 
<!DOCTYPE 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>
هذان الوسمين شرحتهم في درس خاص بهما و لقراءته اضغط هنا  
إلى هنا نكون قد انتهينا من درس اليوم 

السلام عليكم و رحمة الله و بركاته
اقرأ تكملة الموضع
By في 3/05/2016 09:45:00 م
التسميات:
الاشتراك في: الرسائل (Atom)

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

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

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

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

Translate

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

جميع الحقوق محفوظة © أسامة الموسى