الدرس الثالث: الفقرات والرّوابط التشعبيّة

في هذا الدّرس سنخوض في تفاصيل هذه اللغة بشكل أكبر ..
الجزء الأصعب انتهى وعدّى ، وما سيتم شرحه من الآن فصاعداً هو الجزءُ الأسهل

فلنقم بفتح الصفحة التي قمنا بعملها في الدّرس السابق بواسطة الـ Notepad لنضيف عليها.

• مثال - 1 - : الفقـرات | HTML Paragraphs

لكتابة أي نصوص في صفحة الويب الخاصّة بنا نستخدم وسم <p> ، طبعاً في داخل وسميّ الـ Body
لاحظوا تكوين الجملة كنوع من المُراجعة :



بين الوسمين نكتب ما نريد




بعد إضافتها ، نخزّن التغييرات (Ctrl+S) ونقوم بفتحها بواسطة متصفح الانترنت لعرض النتائج




من الجدير بالذكر أن الانتر [ سطر جديد ] لا تظهر بين وسميّ الـ <p> أو في الـ HTML ..

يعني الجملة التالية :



تكافئ تماماً
الجملة التالية :




* لا قيمة للـ Enter


إذن ، كيف نقوم بعمل سطر جديد ؟

• مثال - 2 - : Break Line

يُستخدم وسم الـ <br> للنزول سطر واحد فقط [ بما يساوي مقدار Enter واحدة ]
في المثال السّابق ، لنفرض أننا في الفقرة نفسها نرغب أن تكون جملة "hope you enjoy it" على سطر جديد
كلّ ما علينا فعله هو إضافة وسم <br> قبل كلمة hope بالضبط




النتيجة :



إذا أردنا أن ننزل سطوراً أكثر ، نضيف <br> أكثر

مثال :



النتيجة :




مثال - 3 - : الرّوابط التشعبية | HyperLinks

سَيـُوضّح هذا المثال لكم كيف يمكنكم كتابة كود للانتقال إلى موقع آخر عن طريق الضغط على كلمة أو جُملة معينة
وهنا نستخدم الوسم <a> الذي يُمكن استخدامه بطريقتين ، إما للإنتقال إلى صفحة أخرى مُختلفة تماماً ..
أو للانتقال إلى مكانٍ آخر في نفس المستند ، ما سنعرضه هنا هو الطريقة الأولى ..



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



في المثال أعلاه :
الصفّة أو الـ Attribute هي : herf
والقيمة لهذه الصّفة أو الـ Value هي الرابط الذي نرغب بالانتقال إليه ، وتكون عادة بين علامتي تنصيص مزدوجة
( " " )

الآن دعونا نُطبّق :



احفظ التغييرات واستعرض النتائج :



وعند الضغط على الكلام ستظهر أمامك صفحة بسمله بالطبع

ولتعميق فِكرة الـ Attributes بشكلٍ أكبر دعونا نرى مثالاً على وسم الـ <p> الذي شرحناه سابقاً
لو أردنا عمل توسيط لِفقرة نصّية معينة ، علينا إضافة attribute أو صفة لوسم الـ <p> تُفيد بتوسيط النّص
وهذا الـ attribute هو : align أي مُحاذاة ، بإسناد قيمة center إليه سيقوم بمحاذاة النص إلى الوسط
كما في المِثال التّالي :



والنتيجة :



كما تُلاحظون النّص المطلوب توسّط
بإمكاننا إسناد قيمة أخرى إلى هذا المتغير ، فإن أردنا مثلاً محاذاة النص إلى اليمين ..
ستكون قيمته كالتّالي : align = right
وهكذا ..



مثال - 4 - : رابط للبريد الإلكتروني | Mail Link

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

لاحظوا المثال :



mailto : هو attribute تضع فيه البريد الإلكتروني الذي سترسل إليه الرّسالة
Subject : هو أيضاً attribute يمثّل عنواناً افتراضياً للرسالة المرسلة

جرّبوها وخبّرونا بالنتيجة

تنويه بوجود خطأ في تركيب الكود أعلاه ، هنالك علامة سؤال مفقودة
الصّحيح كالتّالي :

::

حاولوا التطبيق وأي مشاكل يمنكم عرضها هنا لحلّها