دورة HTML: (الدرس الثاني) الروابط + الصور

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

HTML Course2 الدرس الثاني من دورة HTML بدايتك في عالم تصميم صفحات الإنترنت تحدثنا في الدرس الأول عن أساسيات بناء الصفحة + الفقرات وكيفية كتابة نصوص الآن سنتحدث عن كيفية إضافة الروابط والصور إلى الصفحة 🙂

أولاً قم بنسخ الكود التالي وضعه بالمفكرة واكتشف النتيجة في المتصفح الخاص بك:
<html>
<head>
<title>المستودع التقني</title>
</head>
<body>
<a href="http://tec-store.org">المستودع التقني</a>
<img src="http://tec-store.org/wp-content/uploads/2014/02/Logo1.png"/>
<a href="http://tec-store.org"><img src="http://tec-store.org/wp-content/uploads/2014/02/Logo1.png"/></a>
</body>
</html>

ستلاحظ عند استعراض الصفحة وجود:

  1. رابط (نصي)
  2. صورة
  3. رابط (صورة)

والآن لنشرح ما الذي قمنا بفعله:

بداخل الوسم <body> قمنا بإضافة الوسم <a> والذي يقوم بإضافة رابط إلى الصفحة 🙂

طريقة إضافة رابط نقوم بفتح الوسم <a> وبداخل الوسم <a> نقوم بكتابة الخاصية href ونحدد للخاصية الرابط المراد زيارته عند النقر على الكلمة أوالصورة

وبعد وسم الفتح نقوم بكتابة النص المراد عرضه للزائر ومن ثم نكتب وسم الإغلاق </a>

مثال:

<a href="http://tec-store.org">المستودع التقني</a>

وستكون النتيجة ظهور نص “المستودع التقني” وعند الضغط على “المستودع التقني” سيتم فتح الرابط:

“http://tec-store.org”.

والآن كيفية إضافة الصور 🙂

لإضافة صورة إلى الصفحة سنحتاج إلى استخدام الوسم <img> أهم ما يميز الوسم <img> هو أنه (وسم إغلاق ذاتي) أي أنك لن تحتاج إلى وسم فتح ووسم إغلاق بل يكفي كتابة وسم واحد لإضافة صورة

طريقة إضافة الصورة كالتالي:

نقوم بكتابة الوسم <img> وبداخل الوسم ندخل خاصية src ونكتب رابط الصورة المراد عرضها داخل الخاصية src ولا تنسى أن تضيف “/” في نهاية الوسم (لأنه وسم إغلاق ذاتي)

مثال:

<img src="http://tec-store.org/wp-content/uploads/2014/02/Logo1.png"/>

والنتيجة كالتالي:

آخر ما سنتعلمه اليوم هو كيفية إنشاء رابط صورة (أي: عندما نضغط على الصورة ستفتح الصفحة المحددة)

الطريقة سهلة جداً ويمكنك استنتاجها بنفسك بكل بساطة

كما تعلمنا في بداية الدرس لكي تنشئ رابط يجب إضافة وسمي <a> للفتح والإغلاق وبينهما نقوم بكتابة النص المراد عرضه مثل:

<a href="http://tec-store.org">المستودع التقني</a>
أما إن أردت أن تجعل الرابط الصورة كل ما عليك فعله هو استبدال النص المراد عرضه بالوسم <img> ليصبح الكود كالتالي:

<a href="http://tec-store.org"><img src="http://tec-store.org/wp-content/uploads/2014/02/Logo1.png"/></a>

وستكون النتيجة (عند الضغط على الصورة ستتجه إلى “http://tec-store.org”):

انتظرونا في الدروس القادمة 🙂

الدرس الأول: مقدمة + إنشاء الصفحة + الفقرات

عن Tec-Store

شاهد أيضاً

Linux2

الدخول إلى عالم لينكس: شرح أداة apt-get لتثبيت البرامج

بسم الله الرحمن الرحيم بعد أن شرحنا كيفية تثبيت توزيعة لينكس منت هاقد عدنا إليكم …

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *