الدرس الرابع : إضافة الروابط للصفحة – HTML

#############################################################################
ملاحظة: جميع دروس HTML&CSS النصية ليست دروساً مستقلة،إنما هي بمثابة المرجع النصي لما يشرحه الأخ عبدالمجيب .
#############################################################################

————————————–
الدرس هذا مشروح من قبل الأستاذ : عبدالمجيب على الرابط التالي :
http://www.aglx.org/?p=1528
————————————–

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

سأحاول شرح درس اليوم بإيجاز ..

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

جدول الأوسمة :

tagsTable

الجزء العملي :

indesCode

الناتج النهائي : تابع الفيديو لمعرفة كيفية عمل الروابط .

indexPhoto

إنتهى درسنا لهذا اليوم .. شكراً لكم .. 🙂

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

إقرا المزيد

الدرس الثالث: التعامل مع الصور – HTML

#############################################################################
ملاحظة: جميع دروس HTML&CSS النصية ليست دروساً مستقلة،إنما هي بمثابة المرجع النصي لما يشرحه الأخ عبدالمجيب .
#############################################################################
———————————————————————————————————————————————————————
لمراجعة هذا الدرس بالفيديو من إعداد الأستاذ: عبدالمجيب على الرابط التالي :
http://www.aglx.org/?p=1387
———————————————————————————————————————————————————————

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

تعلمنا في الدرس السابق كيفية تنسيق الصفحة بالألوان وتزيين النصوص والتحكم في أحجامها ، وكان العمل النهائي لتلك الصفحة التالي :

بعد التزيين

وستصبح بإذن الله بعد نهاية هذا الدرس بإضافة صور وإعادة تنسيقها كالتالي :

indexPhoto

———————————————————————————————————————————————————————
*ملاحظة : تنسيق الألوان والخطوط وغيره لا نلزمك به فأبدع بذاتك <3 .
———————————————————————————————————————————————————————
أهم الأوسمة :

tagTable

كما تعودنا : ننتقل للجزء العلمي دائماً وهو المفضل بالنسبة لي :

indexCode

وهذا الناتج 🙂 :

indexPhoto

إنتهى درسنا لهذا اليوم .. شكراً لكم .. 🙂

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

إقرا المزيد

الدرس الثاني: تزيين النصوص – HTML

#############################################################################
ملاحظة: جميع دروس HTML&CSS النصية ليست دروساً مستقلة،إنما هي بمثابة المرجع النصي لما يشرحه الأخ عبدالمجيب .
#############################################################################

الدرس الثاني:تزيين النصوص في لغة HTML.
بسم الله الرحمن الرحيم.

توقفنا في الدرس السابق بصنعنا هذه الصفحة ،،

index1

وستكون بنهاية درس اليوم بإذن الله – هكذا :

بعد التزيين
———————————————
سنتعلم اليوم بإذن الله كيفية الكتابة باللغة العربية،وتزيين النصوص وتلوينها، ثم ضبط محاذاة الصفحة.

تابع درس الأستاذ:عبدالمجيب على الرابط التالي:
http://www.aglx.org/?p=1315

———————————————

أهم الأوسمة المستخدمة في هذا الدرس وشرحها:

Tags

الجزء المفضل بالنسبة لي،الجزء العملي:

PageCODE

ثم تصبح هكذا إن شاء الله . *ملاحظة:الألوان وتنسيقات النصوص نترك لك مجالاً لتبدع فيها .
بعد التزيين

——————————————–
لمستخدمي ويندوز: قد تواجه مشكلة في اللغة العربية بحيث تظهر رموز وعبارات غريبة ، ويمكن
حل هذه المشكلة باستخدام الترميز UTF-8 عند حفظ الصفحة.
ثم وضع هذه الأكواد بين وسمي في الصفحة :

——————————————–
********************************************
——————————————–
*كما تعودنا في الدرس السابق،جرب وحاول ثم أخطئ ثم حاول ثم إسال حتى تستفيد.
*تعمدت وضع الأكواد في صور حتى لايتم نسخ أي كود منها بل يجب عليك كتابتها
بيدك حتى تتعود عليها وتحفظها.
*حاول ثم حاول ثم حاول.
*لا تـتردد في السؤال عند عدم فهمك لأي جزئية،فالتعليقات مفتوحة ومنتدى الدعم بانتظاركم.
*لاتـنسوا مشاركتنا تطبيقاتكم لدرس اليوم.
——————————————–

إقرا المزيد

الدرس الأول: مقدمة في لغتي HTML&CSS

#############################################################################
ملاحظة: جميع دروس HTML&CSS النصية ليست دروساً مستقلة،إنما هي بمثابة المرجع النصي لما يشرحه الأخ عبدالمجيب .
#############################################################################

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

ماهي لغة HTML&CSS؟

هي لغات تستخدم في إنشاء وتصميم صفحات الويب.
تقوم HTML بـوصف محتويات الصفحة وترتيبها.
تـتكفل CSS بتنسيق وتجميل الصفحة بالألوان والإطارات والتوزيع وغيرها.
———————————————————————————————–
*ملاحظة:HTML&CSS غير كافية لإعداد مشروع كامل لكنها اللّـبِنة الأساسية في كل صفحة إنترنت على الويب.
قم بفتح أي موقع وانقر بزر الفأرة الأيمن ثم اختر عرض الشفرة المصدرية أو “Show Source Code” لتتأكد من ذلك بعينيك.
———————————————————————————————–
متطلبات قبل البدء:
1.متصفح إنترنت.
2.أي محرر نصوص على أي بيئة تشغيل.

بعض الأوسمة المهمة التي لا غنى عنها في صفحات الإنترنت.

Tags

ننتقل إلى الجزء العملي:
قم بفتح ملف نصي جديد واحفظ الملف بأي اسم مع الامتداد .html وليكن
index.html مثلاً.

index

الناتج النهائي على المتصفح:

index1

———————————————————————————————–

*عوّد نفسك دائماً على كتابة الأكواد حتى تحفظها.
*قم بتجريب دائماً كل شيء،عند الخطأ حاول مره أخرى وبطريقة أخرى
واسأل في منتدى الدعم ولا تيأس.
*تدرب ثم تدرب ثم تدرب*

———————————————————————————————–
———————————————————————————————–
*ملاحظة:
هذا الدرس مشروح بالفيديو من إعداد الأخ: عبدالمجيب على الرابط:http://www.aglx.org/?p=1269 .
———————————————————————————————–

أي سؤال وأي استفسار لا تردد عن كتابة هنا في التعليقات أو بمنتدى الدعم ..
وننتظر تطبيقاتكم على درس اليوم ..

إقرا المزيد

بديل الفيجوال بيسك Gambas Almost Means Basic

بديل الفيجوال بيسك Gambas Almost Means Basic

gambas
gambas

هذا البرنامج الرائع ومجاني ويعمل تحت بيئة جنو/ لينكس  بسهولة ومرونة

صور توضيحيةلبرنامج

لتحميل ولمزيد يرجى زيارة صفحة المشروع

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

إقرا المزيد

تزيين النصوص في صفحات الإنترنت (المعنى و المظهر)

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

وسوم المعنى :

  • <cite> – يعرف مرجعا ، كاسم كتاب أو مقال في مجلة .
  • <code> – يعرف شفرة أحادية التباعد ، كشيفرة البرمجة .
  • <dfn> يحدد تعريفات ، كالتي تظهر في قاموس الخط مثلا .
  • <em> – يضيف تشديدا على النص .
  • <kbd> – يعرف نصا كتب في لوحة مفاتيح .
  • <samp> – يعرف تسلسل أحرف حرفية .
  • <strong> – يضيف تشديدا قويا على النص .

 

والان مع بعض الأمثلة على التنسيق المادي “المظهر” :

  • <b> – خط عريض.
  • <big> – يزيد الحجم عن الحجم الافتراضي .
  • <blink> – إضافة وميض
  • <i> – نص مائل
  • <s> – نص يتوسطه خط .
  • <small> – ينقص من حجم الخط الإفتراضي .
  • <sub> – تحديد نص منخفض .
  • <sup> –  يحدد نصا مرتفعا .
  • <tt> – يحدد خط أحادي التباعد .
  • <u> – يضع خط تحت النص .

إقرا المزيد