بسم الله الرحمن الرحيم والصلاة والسلام على سيدنا محمد وعلى آله وأصحابه وسلم ..
السلام عليكم ورحمة الله وبركاته.
نصل للجزأ الرابع والأخير من سلسلة أساسيات لغة بناء المواقع
HTML
ومتأسف على التأخير بالتقديم..
تحدثنا فيما سبق عن كيفية ادخال رابط ما الى صفحتنا او ادخال صورة ما
اليوم سنتعلم كيفية اضافة خيارات اخرى للروابط باضافة صورة تحمل رابطا على سبيل المثال وغيرها ..
وسنتعلم البعض من الجداول ايضاً ..
فلنبدأ على بركة الله .
كما تعلمنا لاضافة رابط ما نقوم باضافة <a>
وهو زوجي ثم نضيف سمة href داخله لتحديد وجهة الرابط ثم بكتابة الرابط وكلمة الوصف ..
نتذكر كما بالصورة .
----------
حسنا كما نرى لون الخط يظهر بالازرق وعند فتح الرابط يتحول الى اللون البنفسجي .. فهل يمكن التعديل على ذلك ؟؟
نعم , تستطيع التعديل على الالوان حسب رغبتك ..
بجعل الكلامة تظهر بالأخضر مثلا!!
حسنا لاحظ تغير اللون وزوال الخط الذي تحته.
نلاحظ كما نعلم وجود سمة اللون وهي التي تحدد لون النص
ولون الخلفية بحيث تضيف خلفية للنص كما سبق يمكنك الغاء transparent واختيار ما تريد من الوان
ونرى اخر سمة وهي ديكور النص وهنا يمكنك اضافة underline لتضيف سطراً تحت النص ..تابع هذا المثال .
----------
حسناً نوع اكواد الcss هي ؟؟
داخليةInternal/
ويمكنك اختيار ما تشاء
----------
للتحكم في نافذة الفتح اي تحديد ما اذا كنت تريد ان يفتح الرابط في نافذة جديدة او نفس النافذة او ما إلى ذلك ..
فقط تضيف سمة _target الى مجموعة سمات الرابط
----------
هناك سمات أخرى للتحكم بنافذة الرابط يمكنك تجربتها :
_top
_self
_parent
framename
----------
----------
يمكنك تحويل صورة الى رابط بحيث عند الضغط على الصورة تتحول الى الرابط المراد .
----------
هناك صفحات كثيرة مثلاً مثل ويكيبيديا تحتوي كلام طويل جدا
وفي حال أردت الانتقال الى منطقة معينة من الصفحة دون قضاء الوقت في التحريك
وأحيانا ترى كلمة up او down في الصفحات تقوم بنقلك لمكان معين من الصفحة ..
الآن لتطبيق ذلك نقوم اولاً بانشاء ID لما تريد التنقل اليه ثم نقوم بادخال ذلك الآي دي الى الرابط ..
حسناً فلنبدأ بتشكيل الجداول .
الجدول يتم تحديده بوسم ال <table> وطبعا هو وسم زوجي
الصفوف التي في الجدول يتم صنعها باستخدام <tr> وهو زوجي
رؤوس الجدول يتم صنعها باستخدام <th> وهو زوجي ايضاً
اما بيانات الجدول والمقصود منه مضمون الجدول اي النصوص التي تحتويه فهي باستخدام <td>
وطبعا بنفس الحال فهو زوجي ..
لاحظ الصورة وركّز على الاكواد وترتيبها بشكل دقيق
----------
لاضافة حدود حول الجدول ليس لك سوى اضافة وسم style داخل وسم head ثم القيام بتحديد th و td وtable
ثم تحديد نوع الحدود ومسافاتها ...
كما تلاحظ في الصورة ..يمكنك التعديل على الحجم او اللون كما تشاء
----------
لاضافة الحشوة او كما سبق التعريف عنها المسافة الفاصلة بين النصوص والحدود
----------
نصل الى تشكيل القوائم ..
مثلا نجد دائما قوائم مثل
.المركز الاول
.المركز الثاني
.المركز الثالث
حسنا نقوم بانتاجها هكذا :
لاضافة قوائم بنقاط جانبها نستخدم ul وداخله li والاثنان زوجيان
----------
هل يمكن تحويل النقاط الجانبية لشكل أخر ؟؟
نعم يمكنك ذلك هكذا:
----------
لاضافة قائمة من الخيارات المرقمة بالترتيب .. نستعمل ol وداخله li والاثنان زوجيان طبعاً
----------
هل يمكن تغير الارقام لاحرف مثلاً ؟
نعم من خلال ادخال سمة النوع لداخل الol ووضع احدى الخيارات :
1 او A او a او I او i
فلنرى الامثلة:
----------
لادخال قوائم الوصف او ما يسمى بالقوائم الفرعية:
----------
لاضافة قائمة خيارات أفقية وهي تعتبر جزا من القوائم..
منتشرة بشدة في الصفحات ..
تابع الصورة بدقة
----------
وسم الميتا..
وسم مهم جدا لاضافة كلمات دلالية او تمكين لغة ما او حتى وصف الصفحة بالاجمال ...
تابع كل كود وعمله
لاحظ موضعه قبل الbody
----------
وهكذا نصل لنهاية دورة أساسيات لغة الHTML
تحياتي المبرمج المحترف
السلام عليكم ورحمة الله وبركاته.
نصل للجزأ الرابع والأخير من سلسلة أساسيات لغة بناء المواقع
HTML
ومتأسف على التأخير بالتقديم..
تحدثنا فيما سبق عن كيفية ادخال رابط ما الى صفحتنا او ادخال صورة ما
اليوم سنتعلم كيفية اضافة خيارات اخرى للروابط باضافة صورة تحمل رابطا على سبيل المثال وغيرها ..
وسنتعلم البعض من الجداول ايضاً ..
فلنبدأ على بركة الله .
كما تعلمنا لاضافة رابط ما نقوم باضافة <a>
وهو زوجي ثم نضيف سمة href داخله لتحديد وجهة الرابط ثم بكتابة الرابط وكلمة الوصف ..
نتذكر كما بالصورة .
حسنا كما نرى لون الخط يظهر بالازرق وعند فتح الرابط يتحول الى اللون البنفسجي .. فهل يمكن التعديل على ذلك ؟؟
نعم , تستطيع التعديل على الالوان حسب رغبتك ..
بجعل الكلامة تظهر بالأخضر مثلا!!
نلاحظ كما نعلم وجود سمة اللون وهي التي تحدد لون النص
ولون الخلفية بحيث تضيف خلفية للنص كما سبق يمكنك الغاء transparent واختيار ما تريد من الوان
ونرى اخر سمة وهي ديكور النص وهنا يمكنك اضافة underline لتضيف سطراً تحت النص ..تابع هذا المثال .
حسناً نوع اكواد الcss هي ؟؟
داخليةInternal/
ويمكنك اختيار ما تشاء
----------
للتحكم في نافذة الفتح اي تحديد ما اذا كنت تريد ان يفتح الرابط في نافذة جديدة او نفس النافذة او ما إلى ذلك ..
فقط تضيف سمة _target الى مجموعة سمات الرابط
هناك سمات أخرى للتحكم بنافذة الرابط يمكنك تجربتها :
_top
_self
_parent
framename
----------
----------
يمكنك تحويل صورة الى رابط بحيث عند الضغط على الصورة تتحول الى الرابط المراد .
هناك صفحات كثيرة مثلاً مثل ويكيبيديا تحتوي كلام طويل جدا
وفي حال أردت الانتقال الى منطقة معينة من الصفحة دون قضاء الوقت في التحريك
وأحيانا ترى كلمة up او down في الصفحات تقوم بنقلك لمكان معين من الصفحة ..
الآن لتطبيق ذلك نقوم اولاً بانشاء ID لما تريد التنقل اليه ثم نقوم بادخال ذلك الآي دي الى الرابط ..
الجدول يتم تحديده بوسم ال <table> وطبعا هو وسم زوجي
الصفوف التي في الجدول يتم صنعها باستخدام <tr> وهو زوجي
رؤوس الجدول يتم صنعها باستخدام <th> وهو زوجي ايضاً
اما بيانات الجدول والمقصود منه مضمون الجدول اي النصوص التي تحتويه فهي باستخدام <td>
وطبعا بنفس الحال فهو زوجي ..
لاحظ الصورة وركّز على الاكواد وترتيبها بشكل دقيق
لاضافة حدود حول الجدول ليس لك سوى اضافة وسم style داخل وسم head ثم القيام بتحديد th و td وtable
ثم تحديد نوع الحدود ومسافاتها ...
كما تلاحظ في الصورة ..يمكنك التعديل على الحجم او اللون كما تشاء
لاضافة الحشوة او كما سبق التعريف عنها المسافة الفاصلة بين النصوص والحدود
نصل الى تشكيل القوائم ..
مثلا نجد دائما قوائم مثل
.المركز الاول
.المركز الثاني
.المركز الثالث
حسنا نقوم بانتاجها هكذا :
لاضافة قوائم بنقاط جانبها نستخدم ul وداخله li والاثنان زوجيان
هل يمكن تحويل النقاط الجانبية لشكل أخر ؟؟
نعم يمكنك ذلك هكذا:
لاضافة قائمة من الخيارات المرقمة بالترتيب .. نستعمل ol وداخله li والاثنان زوجيان طبعاً
هل يمكن تغير الارقام لاحرف مثلاً ؟
نعم من خلال ادخال سمة النوع لداخل الol ووضع احدى الخيارات :
1 او A او a او I او i
فلنرى الامثلة:
لادخال قوائم الوصف او ما يسمى بالقوائم الفرعية:
لاضافة قائمة خيارات أفقية وهي تعتبر جزا من القوائم..
منتشرة بشدة في الصفحات ..
تابع الصورة بدقة
وسم الميتا..
وسم مهم جدا لاضافة كلمات دلالية او تمكين لغة ما او حتى وصف الصفحة بالاجمال ...
تابع كل كود وعمله
----------
وهكذا نصل لنهاية دورة أساسيات لغة الHTML
تحياتي المبرمج المحترف
ليست هناك تعليقات:
إرسال تعليق