تعرفنا في الدرس السابق من لغة HTML الخاصة ببناء المواقع على عدة عناصر أساسية من اللغة وكيفية إستخدامها , حيث تعرفنا على هيكل الصفحة الأساسي وأهم مكوناته وماهي أهميتها , وأيضا تعرفنا على عنصر ال Heading بالإضافة إلى الصور في HTML وكيفية التعامل معها,في هذا الشرح والذي هو الجزء الثاني سنتعرف على المزيد من خصائص لغة HTML.
الروابط في HTML
الروابط أيضا من العناصر المهمة في لغة في أي موقع , فهي التي تمكن من ربط صفحات المواقع مع بعضها البعض , وأيضا الربط مع المواقع الأخرى والإشارة لها , من أجل إضافة روابط قابلة للنقر إلى صفحة HTML سنستخدم التالي :
<h3>رابط موقع موضوع</h3>
<a href="https://mawdoo3.com/"> موقع موضوع </a>
كما تلاحظ استخدمنا الوسم <a> وهو الذي يستخدم للإشارة إلى الروابط , طبعا يجب إضافة الخاصية “href” التي تمكننا من كتابة الرابط الذي سيتوجه له المتصفح بعد النقر على النص أي “موقع موضوع” وهو النص المكتوب بين <a> </a> حيث ترك المكان فارغ بدون نص فلن يظهر شيئ .
أمر أخر وهو أهمية كتابة الروابط كاملة أي كتابة “https://” فهي التي تخبر المتصفح أننا نريد الإشارة إلى رابط خارجي , حيث عن عدم كتابتها سيجعل المتصفح أن الرابط المقصود هو رابط داخلي .
الروابط لاتستخدم فقط مع الروابط الخارجية بل أيضا مع الروابط الداخلية أي ربط صفحات موقعك مع بعضها البعض , قم مثلا في مجلد Myproject الذي تعمل عليه قم بإنشاء صفحة جديدة وأعطها مثلا الإسم التالي newpage.html والآن سنحاول الإنتقال من الصفحة القديمة index.html إلى الصفحة الجديدة newpage.html لفعل هذا يمكننا إستخدام نفس الوسم <a> على هذا الشكل :
<h3>رابط صفحة داخلية جديدة</h3>
<a href="newpage.html"> صفحة داخلية </a>قم بالتجربة وستلاحظ أن المتصفح بعد النقر على “صفحة داخلية” سينقلك إلى الصفحة الجديدة وهي صفحة فارغة هذا ببساطة لأننا لم نكتب فيها شيئا حتى وهي فقط للتجربة على كل حال, لاحظ أننا لم نقم بإضافة https:// إلى مقدمة الرابط , وهذا ببساطة كما سبق الإشارة لأن الرابط أو الصفحة موجودة في نفس المكان الذي توجد فيه الصفحة الرئيسية أي نفس السيرفر .
إستخدامات الوسم <a> كثيرة فهي لا تستخدم فقط من أجل الإنتقال بين الصفحات الخارجية أو الداخلية , بل أيضا الإنتقال بين عناصر الصفحة الواحدة , على سبيل المثال لنفترض مثلا أنه لدينا موقع فيه الكثير من المقالات , وهناك مقالات طويلة للغاية مثل ماهو موجود في مواقع مثل موسوعة ويكيبيديا أو موقع وضوع , إذا كيف يمكننا الانتقال بين فقرات المقالة حتى تسهل على القارئ الإنتقال في الصفحة والوصول على الجزء الذي يريد بسرعة , لفعل هذا يمكننا الإستعانة بهذه الطريقة :
<h1>مقالة مفيدة ما </h1>
<a href="#p1">الانتقال إلى الفقرة رقم 1</a> <br>
<a href="#p2">الانتقال إلى الفقرة رقم 2</a> <br>
<a href="#p3">الانتقال إلى الفقرة رقم 3</a> <br>
<a href="#p4">الانتقال إلى الفقرة رقم 4</a> <br>
<h3 id="p1" >الفقرة رقم 1</h3>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من <br>
مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.<br>
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى <br>
مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.</p>
<h3 id="p2">الفقرة رقم 2</h3>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من<br>
مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.<br>
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد<br>
النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.</p>
<h3 id="p3">الفقرة رقم 3</h3>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص<br>
من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.<br>
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية،<br>
مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.</p>
<h3 id="p4">الفقرة رقم 4</h3>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا <br>
النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.<br>
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية،<br>
مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.</p>
قد يبدوا أن العمل على هذا النوع من المواقع متعب نوعا ما , فهل يعقل أن أن أقوم بكتابة مقالة طويلة وتنسيقها يدويا , لكن هذا مجرد مثال حيث أنه عند الإنتهاء من تعلم الأساسيات سنتعلم مثلا طريقة برمجة موقع متكامل حيث تقوم بكتابة المقالات بطريقة مريحة من خلال لوحة تحكم.
لاحظ أننا في المثال أننا استخدمنا خاصية id=”” وهي التي تمكننا من تمييز الصفحات بعلامة من أجل التحكم في عناصر الصفحة , وقمنا إعطاء ال id قيم مختلفة في كل وسوم <h3> من p1 إلى p4 , بعدها في الروابط استخدمنا بطبيعة الحال الوسم <a> وطبعا href كقيمة أعطينا له من #p1 إلى #p4 بحيث عندما يريد المستخدم مثلا الإنتقال إلى الفقرة رقم 3 يكفي أن يقوم بالنقر الرابط “الإنتقال إلى الفقرة رقم 3” , طبعا هذه الطريقة مفيدة في حالات المواقع التي تحتوي على مقالات كثيرة.