يمكن تقسيم الروابط إلى فئتين:
روابط إلى الموارد الخارجية— يتم إنشاؤها باستخدام علامة ويتم استخدامها لتوسيع إمكانيات المستند الحالي عند معالجته بواسطة المتصفح؛
الارتباطات التشعبية- روابط لموارد أخرى يمكن للمستخدم زيارتها أو تنزيلها.

كيفية إنشاء ارتباطات تشعبية على موقع ويب

1. هيكل الارتباط

يتم إنشاء الارتباطات التشعبية باستخدام علامة مقترنة. يتم وضع النص الذي سيتم عرضه على صفحة الويب داخل العلامة. يتم عرض نص الرابط في المتصفح مع تسطير، ولون الخط أزرق، وعندما تحوم فوق الرابط، يتغير مظهر مؤشر الماوس.

معلمة العلامة المطلوبة هي سمة href، التي تحدد عنوان URL لصفحة الويب.

مؤشر الارتباط

يتكون الرابط من جزأين - المؤشرو جزء العنوان. مؤشر الارتباطعبارة عن جزء من نص أو صورة مرئية للمستخدم. جزء العنوانالرابط غير مرئي للمستخدم، فهو يمثل عنوان المورد الذي تريد الذهاب إليه.

يتكون جزء العنوان من الرابط من URL. عنوان URL(محدد موقع الموارد) - عنوان المورد الموحد. عند إنشاء العناوين، يوصى باستخدام واصلة بدلاً من الشرطة السفلية للفصل بين الكلمات. في منظر عامعنوان URL بالتنسيق التالي:

طريقة الوصول: // اسم الخادم: المنفذ / المسار

طريقة الوصول، أو البروتوكول، يتبادل البيانات بين محطات العمل على شبكات مختلفة. بروتوكولات نقل البيانات الأكثر شيوعًا:

يوفر الملف قراءة ملف من القرص المحلي:

الملف:/gallery/pictures/summer.html

يوفر http إمكانية الوصول إلى صفحة ويب باستخدام بروتوكول HTTP:

http://site.ru/

https هو تطبيق خاص لبروتوكول HTTP الذي يستخدم التشفير (عادةً SSL أو TLS)

https://site.ru/

يرسل ftp طلبًا إلى خادم FTP لاستلام ملف:

بروتوكول نقل الملفات: //pgu/directory/library

يبدأ mailto جلسة بريد مع الوجهة والمضيف المحددين:

ميلتو: [البريد الإلكتروني محمي]

اسم الخادميصف الاسم الكامل للجهاز على الشبكة، على سبيل المثال، site.ru. إذا لم يتم تحديد اسم الخادم، فإن الرابط يعتبر محليا، أي. وهو موجود على نفس الجهاز الذي يوجد به مستند HTML الذي يحتوي على الرابط.

رقم منفذ TCPالذي يعمل عليه خادم الويب. هذا هو الرقم الذي يجب تحديده إذا كانت الطريقة تتطلب رقم منفذ (قد يكون للخوادم الفردية رقم منفذ مميز خاص بها). إذا لم يتم تحديد أي منفذ، فإن المنفذ الافتراضي هو المنفذ 80. والمنافذ القياسية هي:
21 - بروتوكول نقل الملفات
23- التلنت
70- غوفر
80 - HTTP

طريقيحتوي على اسم المجلد الذي يوجد به الملف.

2. المسار المطلق والنسبي

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

أرز. 1. مثال على بنية المجلد

2.1. المسار المطلق

المسار المطلقيشير الموقع الدقيقالملف داخل بنية المجلد بأكمله على الكمبيوتر (الخادم). يتيح المسار المطلق للملف إمكانية الوصول إلى الملف من موارد خارجية ويحتوي على المكونات التالية:
1) البروتوكول، على سبيل المثال، http (اختياري)؛
2) المجال ( اسم المجالأو عنوان IP للكمبيوتر)؛
3) المجلد (اسم المجلد الذي يشير إلى المسار إلى الملف)؛
4) الملف (اسم الملف).

هناك نوعان من تدوين المسار المطلق: مع وبدون إشارة البروتوكول:

http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

إذا كان الملف موجودًا في المجلد الجذر، فسيكون المسار إلى الملف كما يلي:

http://site.ru/index.html

إذا لم يكن هناك اسم ملف، فسيتم تحميل صفحة الويب التي تم تعيينها افتراضيًا في إعدادات خادم الويب (ما يسمى بملف الفهرس).

http://site.ru/

عادةً ما يكون ملف الفهرس عبارة عن مستند يسمى Index.html. وجود شرطة مائلة لاحقة / يعني أن الوصول يذهب إلى المجلد؛ وإذا لم يكن هناك، فإنه ينتقل مباشرة إلى الملف.

2.2. المسار النسبي

المسار النسبييصف المسار إلى المستند المحدد بالنسبة للمستند الحالي. يتم تحديد المسار بناءً على موقع صفحة الويب التي يوجد بها الرابط. يتم استخدام الروابط النسبية عند إنشاء روابط لمستندات أخرى على نفس الموقع. عندما لا يجد المتصفح بروتوكول http:// في الرابط، فإنه يبحث في نفس الخادم عن المستند المحدد.

يحتوي المسار النسبي على المكونات التالية:
1) المجلد (اسم المجلد الذي يشير إلى المسار إلى الملف)؛
2) الملف (اسم الملف).

يحتوي مسار الروابط النسبية على ثلاث علامات خاصة:
/ يشير إلى الدليل الجذر ويقول لبدء المسار منه الدليل الجذرالمستندات وانتقل إلى المجلد التالي
./ يشير إلى المجلد الحالي
../ اصعد إلى مجلد واحد (الدليل)

والفرق الرئيسي بين المسار النسبي والمسار المطلق هو أن المسار النسبي لا يحتوي على اسم المجلد الجذر والمجلدات الأصلية، مما يجعل العنوان أقصر، وإذا انتقلت من مجال إلى آخر، فلن تحتاج إلى أدخل عنوانًا مطلقًا جديدًا. ولكن إذا كان مورد جهة خارجية يرتبط، على سبيل المثال، بصورك ذات العناوين النسبية، فلن يتم عرضها على موقع آخر.

3. المراسي

المراسيأو الروابط الداخلية، لإنشاء انتقالات إلى أقسام مختلفة من صفحة الويب الحالية، مما يسمح لك بالتنقل بسرعة بين الأقسام. يبدو أن هذا مناسب جدًا عندما يكون هناك الكثير من النص على الصفحة. يتم أيضًا إنشاء الروابط الداخلية باستخدام العلامة مع اختلاف أن سمة href تحتوي على اسم المؤشر - ما يسمى مِرسَاة، وليس عنوان URL. يُسبق اسم المؤشر دائمًا بعلامة #.

أعتقد أنه لا يمكن أن توجد صفحة HTML بدون ارتباط تشعبي واحد على الأقل (أو مجرد رابط). يمكن أن تكون الروابط لصفحات أو مواقع أخرى، وكذلك للملفات والصور وما إلى ذلك.

يمكن أن تكون الروابط خارجية وداخلية ونصية ورسومية. تشير الروابط الخارجية إلى مواقع أو كائنات أخرى موجودة عليها، بينما تشير الروابط الداخلية، على العكس من ذلك، إلى أجزاء مختلفة من موقعك. الرابط النصي هو نص، عند النقر عليه، يأخذك إلى كائن آخر أو يفتحه، في حين أن الرابط الرسومي هو كائن (عادة صورة) يعمل أيضًا على الانتقال إلى صفحة أخرى، أو موقع، أو على سبيل المثال، صورة. يتم إنشاء الروابط في HTML باستخدام علامة (من المرساة الإنجليزية - المرساة). بعد ذلك سأخبرك المزيد عن الروابط.

تحتوي العلامة على سمة href مهمة ورئيسية. قيمته هي المسار إلى الكائن أو الموقع الذي يشير إليه الرابط الخاص بنا في شكل عنوان URL. يمكن أن يكون الرابط (نص الرابط) إما نصًا (رابط نصي) أو صورة (رابط رسومي). إذا كنت بحاجة إلى إنشاء رابط رسومي، فستحتاج إلى استخدام علامة IMG بين العلامات كنقطة ارتساء. فيما يلي مثال بسيط لرمز HTML للرابط:

نص الارتباط (مرساة)

سأعطيك مثالا آخر حتى تتمكن من فهمه بشكل أفضل. سأستخدم موقع الويب الخاص بي كأساس:

ستظهر صفحة html في المتصفح بالشكل التالي:

يتم تعيين لون نص الارتباط بواسطة السمات الموجودة في علامة BODY. وبكل بساطة، تخضع الروابط لنفس سمات التعديل التي يخضع لها النص الموجود على الصفحة. يتضمن هذا الخط الغامق والمائل، واستخدام العناوين، وما إلى ذلك.

سيظهر ما يلي في صفحة html:

نحصل على النتيجة بدون إطار:

الصفحة الرئيسية 1سيو

كما لاحظت، يتم الانتقال إلى صفحة أخرى في نفس النافذة. إذا كنت تريد فتح الرابط في نافذة أخرى أو النافذة الرئيسية (افتراضيًا يكون في نفس النافذة)، فيمكنك استخدام السمة المستهدفة التالية للعلامة A:

• _blank — يفتح الصفحة في نافذة جديدة؛
• _parent — يقوم بتحميل رابط في النافذة الرئيسية؛
• _الذات - افتراضي. يفتح الرابط في نفس النافذة.

الصفحة الرئيسية لموقع 1seo

هناك أيضًا سمة عنوان لإنشاء تلميح أداة للرابط:

الصفحة الرئيسية لموقع 1seo

نص

بالمناسبة، إذا قمت بتحديد صندوق البريد الخاص بك في عنوان URL وحددت بروتوكول mailto:، فعند النقر فوق الارتباط الخاص بك، سيتم فتح برنامج البريد، حيث سيتم إدخال عنوانك بالفعل في الحقل "إلى" صندوق البريد. باستخدام المثال، سيكون كود HTML كما يلي:

اكتب لي رسالة

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

تاريخ النشر: 15 مايو 2012

السمة الرئيسية لمستند HTML هي وجوده فيه الارتباطات التشعبية(أو ببساطة روابط) إلى مستندات ومواقع وملفات وصور أخرى وما إلى ذلك. لقد كانت القدرة على إدراج روابط في صفحات لكائنات خارجها هي التي جعلت الإنترنت شائعًا جدًا وسهل الاستخدام. لذلك، عند إنشاء موقع الويب الخاص بك، تذكر دائمًا "سحر" الروابط.

في هذا الدرس سنتحدث عن كيفية إنشاء رابطإلى الموقع، إلى صفحة منفصلةأو ملف. سوف تتعلم كيفية تغيير نص الرابط، وكيفية فتحه في نافذة جديدة، وكيفية إنشاء رابط لصورة، وما هي الروابط الخارجية والداخلية، وأكثر من ذلك بكثير. بالإضافة إلى ذلك، لديك بالفعل معلومات حول العمل مع الروابط، والتي تطرقنا إليها في الدروس السابقة (على سبيل المثال، تحدثنا عن كيفية تغيير لون الرابط).

بشكل عام، سيجعل هذا البرنامج التعليمي فهمك لبناء الروابط كاملاً وكافيًا. سوف تفهم كيفية إنشاء ارتباط تشعبي في HTML ولماذا. وسوف تتعلم التحكم في خصائصه.

شروط

§ 1. رابط للملف، رابط للموقع، رابط للصفحة

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

وحتى لا أترك أفكاري جامحة، سأريكم كل شيء بمثال.

في المتصفح سنرى هذا:

في المتصفح سنرى هذا:

كما ترون، يتم إنشاء جميع أنواع الروابط بنفس الطريقة تمامًا. والفرق الوحيد هو عنوانالكائن المراد الرجوع إليه. الآن دعنا ننتقل إلى الجزء الرئيسي من الدرس.

§ 2. إنشاء روابط خارجية

الروابط تختلف عن بعضها البعض خارجيو داخلي، وكذلك على نصو رسم بياني. الروابط الخارجية تؤدي إلى خارج صفحة html، والروابط الداخلية تؤدي إلى أجزاء مختلفة نفس الشيءالصفحات. الروابط النصية هي نص (افتراضيًا، يتم تمييزه باللون الأزرق ووضع خط تحته)، وتحتوي الروابط الرسومية على صورة ككائن تحتاج إلى النقر فوقه للانتقال إليه. يتم إنشاء كل هذه الأنواع من الروابط بتنسيق HTML باستخدام علامة (اختصار لـ مرساة). دعونا نلقي نظرة فاحصة على ذلك.

لإنشاء رابط خارجي لموقع أو صفحة أو ملف، استخدم سمة العلامة - href. قيمة هذه السمة هي عنوان URLالموقع أو الصفحة أو الملف (تحدثنا عن هذا أعلاه). بين العلامات يوجد الجزء المرئي من الرابط (رابط الربط)، أي ما نراه على شاشة المتصفح. يمكن أن يكون رابط الارتباط إما نصًا عاديًا (رابط نصي) أو صورة بيانية(رابط الصورة). يتم إنشاء رابط الصورة عن طريق إدراج علامة مألوفة بين العلامات والعلامات. بشكل عام، يبدو بناء الجملة لإنشاء رابط كما يلي:

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

http://www.seoded.ru/"> الصفحة الرئيسية لموقع الموقع

في المتصفح سيبدو هكذا:

كما كتبت في بداية هذا الدرس، يمكن تغيير لون نص الرابط (المرساة) باستخدام . بشكل عام، يمكنك تطبيق نفس القواعد على نص الروابط كما هو الحال مع النص الرئيسي للصفحة، أي تمييزه بالخط العريض والمائل واستخدام العناوين وما إلى ذلك.

§ 2.1 الروابط الرسومية (روابط الصور)

كما قلت أعلاه، لإنشاء رابط الصورة، تحتاج إلى استخدام . مثال على هذا الرابط يبدو كما يلي:

وسيظهر المتصفح:

افتراضيًا، يقوم المتصفح بإحاطة الصورة برابط رسومي بإطار. إذا كان هذا غير مرغوب فيه، ثم السمة حدودعلامة آي إم جيتحتاج إلى تعيين القيمة 0:

الحدود = "0">

الصفحة الرئيسية

§ 3. الروابط الداخلية

تُستخدم الروابط الداخلية للتنقل بشكل مريح عبر الصفحات التي تحتوي على الكثير من المحتوى. وبمساعدتهم قمت بإعداد "محتويات الدرس" (انظر في بداية هذه الصفحة). يتم إنشاء الروابط الداخلية باستخدام نفس مبدأ الروابط الخارجية. فقط في قيمة السمة hrefتتم الإشارة إلى "مرساة" الرابط. يتم إنشاء "المرساة" بواسطة السمة اسم:

الاسم = "اسم المرساة"> النص

ويتم تعيين اسم "المرساة" بشكل تعسفي. تجدر الإشارة هنا إلى أنه ليس كل المتصفحات تفهم الأسماء الروسية لـ "المراسي"، لذلك أوصي باستخدام الأبجدية اللاتينية. النص بين العلامات لإنشاء "مرساة" غير مطلوب، وفي أغلب الأحيان، لا يتم تحديده.

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

كما قلت أعلاه، في السمة hrefرابط داخلي، بدلاً من العنوان، يُشار إلى اسم "المرسى" المطلوب برمز التجزئة الإلزامي ( # ) أمامه. دعونا ننظر إليها مع مثال.

لقد قمت بإنشاء "مرساة" بالاسم zagolovokووضعها في رمز الصفحة بجوار عنوان هذا الدرس ("الارتباطات التشعبية بتنسيق HTML"). رمز الإرساء هو كما يلي:

الاسم = "زاجولوفوك">

href="#zagolovok">إلى العنوان

وفي المتصفح هكذا:

إذا لاحظت، بعد النقر على الرابط الداخلي للعنوان، أن عنوان URL الموجود في شريط عنوان المتصفح قد تغير:

إلى العنوان الأصلي:

http://www..html

http://www..html#zagolovok

وباستخدام هذه الميزة، يمكنك الارتباط بموقع محدد في الصفحة من أي مصدر على الإنترنت! أي لنفترض أنك أنشأت صفحة تحتوي على مقالة مطولة حول شيء ما (أو نشرتها على الصفحة عدد كبيرالصور) ووضع علامة عليها بروابط داخلية. أثناء تواجدك في ، لم تكن بحاجة إلى الارتباط بالصفحة التي تحتوي على المقالة (أو الصور الفوتوغرافية) فحسب، بل بمكان محدد عليها (أو صورة معينة). باستخدام الخيار مع رابط داخلي في العنوان، يمكنك بسهولة تحقيق ما تحتاجه.

§ 4. المراجع المطلقة والنسبية

الصفحة الرئيسية

ولكن مع الروابط النسبية يكون الأمر أكثر تعقيدًا بعض الشيء. في مثل هذه الروابط يشار إلى العنوان أيضا نسبياًالمجلد الجذر للموقع (المجلد الذي يوجد به ملف الصفحة الرئيسية)، أو نسبة إلى الصفحة الأصلية. هناك حاجة إلى مثل هذه الروابط، على سبيل المثال، إذا كان الموقع موجودا على الكمبيوتر المنزلي. أو أن هذا ليس موقعًا، ولكنه صفحة تمثل مؤشرًا لمستندات أخرى.

دعونا نترك الأمر، نحتاج إلى الارتباط بالصفحة clienty.htmlالذي يكمن في مجلد واحدمع الصفحة الرئيسية للموقع. بعد ذلك سيبدو رمز الارتباط النسبي كما يلي:

/klienty.html">العملاء

لنفترض الآن أنه يوجد في نفس المجلد الذي توجد به الصفحة الرئيسية مجلد زكازيوبالفعل فيهتقع صفحة klienty.html ثم سيبدو رمز الرابط النسبي كما يلي:

/zakazy/klienty.html">العملاء

الآن دعونا نلقي نظرة على إنشاء الارتباطات التشعبية نسبة إلى الصفحة الأصلية. لنفترض أن لدينا صفحة السعر.html (الصفحة الرئيسية) وتحتاج إلى الارتباط بالصفحة منه clienty.htmlهناك الخيارات النموذجية التالية:

1. توجد الصفحات Price.html وclienty.html في مجلد واحد.

klienty.html">العملاء




2. في المجلد الجذر للموقع، سعر الصفحة.html موجود في مجلد زكازي مستوى واحد أعلى).

سيبدو الكود كالتالي:

../klienty.html">العملاء

تشير النقطتان إلى أنك بحاجة إلى الانتقال من المجلد الحالي إلى مستوى أعلى.




3. توجد صفحة klienty.html والمجلد zakazy في المجلد الجذر للموقع، مجلد ميبل موجود في مجلد زكازي، سعر الصفحة.html موجود في مجلد mebel(أي أن صفحة klienty.html تتعلق بصفحة Price.html الأصلية مستويين أعلى).

../../klienty.html">العملاء

أي أنه يتم الإشارة إلى كل مستوى بنقطتين وشرطة مائلة " / ».




4. في المجلد الجذر للموقع، صفحةclienty.html موجود في مجلد زكازي(أي أن صفحة klienty.html الآن مرتبطة بصفحة Price.html الأصلية مستوى واحد أقل).

zakazy/klienty.html">العملاء

في هذه الحالة، لا يتم استخدام النقاط والخطوط المائلة.




5. توجد صفحة Price.html (الصفحة الأصلية) والمجلد zakazy في المجلد الجذر للموقع، مجلد ميبل موجود في مجلد زكازي، صفحةclienty.html موجود في مجلد mebel(أي أن صفحة klienty.html أصبحت الآن مرتبطة بصفحة Price.html الأصلية تقع على مستويين أدناه).

zakazy/mebel/klienty.html">العملاء




6. في المجلد الجذر للموقع هناك مجلدين: زكازي وأبلاتا. صفحة clienty.html موجود في مجلد زكازي، سعر الصفحة الأصلية.html موجود في المجلد oplata(أي أن كلا الصفحتين تكذبان في مجلدات مختلفة مستوى واحد إلى أسفلمن المجلد الجذر للموقع).

../zakazy/klienty.html">العملاء

§ 5. رابط إلى البريد الإلكتروني

بغرض إنشاء رابط إلى البريد الإلكتروني، مطلوب بدلاً من عنوان URL الموجود في قيمة السمة hrefاكتب العنوان بريد إلكترونييشير إلى البروتوكول ( ميلتو:). وبعد ذلك عند الضغط على هذا الرابط، سيتم فتح نافذة برنامج البريدمع إدخال عنوان البريد الإلكتروني في الحقل "إلى". في كود HTML يبدو كما يلي:

ميلتو: [البريد الإلكتروني محمي]">بريدي

وفي المتصفح هو هكذا.

الارتباط التشعبيهو إشارة للمتصفح إلى الكائن الموجود داخل أو خارج مستند HTML الذي يجب عليه الوصول إليه. باستخدام الارتباطات التشعبية، يمكن للمستخدمين الانتقال من صفحة إلى أخرى، وتنزيل الملفات، وما إلى ذلك. ويمكن تصميم جزء من النص أو الصورة كارتباط تشعبي ( ملف رسومي). عندما يتم عرض صفحة ويب في نافذة المتصفح، يتم عادةً تمييز الرابط النصي باللون الأزرق ووضع خط تحته. ومع ذلك، هذا ليس هو الحال دائما. للذهاب إلى الموقع المشار إليه بواسطة الرابط، يحتاج المستخدم فقط إلى النقر على النص الخاص به.

لإنشاء ارتباط تشعبي، يجب عليك استخدام العلامات و، تعريف للعلامة يصف HREF. ويجب أن تكون قيمته عنوان URL الذي يشير إليه الرابط. يتم وضع نص الارتباط بين العلامات و.

إذا كانت صفحة الويب التي يشير إليها الارتباط موجودة في موقع آخر، فستكون قيمة السمة HREFيجب أن يكون عنوان URL كاملاً بما في ذلك اسم البروتوكول؛ تسمى هذه الروابط بالروابط الخارجية. إذا كان الارتباط التشعبي يشير إلى صفحة أخرى من نفس الموقع، فإنه يكفي للبحث عن مستند تحديد مسار نسبي فقط؛ ويسمى هذا الارتباط بالارتباط الداخلي.

يمكن أن يشير الارتباط التشعبي إلى موقع محدد داخل الصفحة إذا تم تضمين علامة الربط هناك أولاً. تُستخدم العلامات أيضًا لتحديد المرساة و، ولكن بدلاً من السمة HREFتعيين السمة اسم، والتي يجب أن تكون قيمتها اسم المرساة. يمكن أن تتكون من أحرف وأرقام، ولكن يجب ألا تحتوي على أحرف مسافات. إذا كان هناك عدة تسميات على الصفحة، فيجب أن يكون لها جميعًا أسماء مختلفة.

لإنشاء رابط للمرساة المثبتة التي تحتاجها في العلامة ضع اسمه في نهاية عنوان URL بعد اسم المستند، مفصولاً بـ # . رمز # يعني أنه متبوع باسم العلامة، وليس اسم الملف.

نص الارتباط

إذا في السمة HREFحدد عنوان بريد إلكتروني بكلمة mailto: أمامه، ثم بعد تحديد هذا الرابط يمكنك إرسال رسالة في الحقل "إلى من"سيتم تسجيل هذا العنوان.

يناقش المثال أدناه استخدام أنواع مختلفة من الارتباطات التشعبية.

مستند HTML يستخدم الارتباطات التشعبية والمثبتات:

إصدارات جديدة من البرامج القياسية لغرفة العمليات أنظمة ويندوزويمكن أيضًا العثور على برامج التشغيل على موقع الشركة الإلكتروني مايكروسوفت.

والآن يمكنك الذهاب إلى الصفحة الرئيسية للموقع.

يمكنك معرفة كيفية الاتصال بي في نهاية هذه الصفحة.

في هذه الوثيقة النصية.

[البريد الإلكتروني محمي]

هذا هو الشكل الذي سيبدو عليه مستند HTML بعد تشغيله بواسطة المتصفح:

إصدارات جديدة من البرامج القياسية ل نظام التشغيليمكن العثور على Windows وبرامج التشغيل على موقع Microsoft الإلكتروني.

يمكنك استخدام المواد التي تم نشرها في هذا المستند النصي.

في هذا المثال، يتم تضمين الكلمة "Microsoft" في علامة الارتباط التشعبي الخارجي وفي النص "الصفحة الرئيسية للموقع"- في علامة الارتباط الداخلي. نص "في نهاية هذه الصفحة"وضعت في علامة الارتباط المرساة، و "في هذه الوثيقة النصية"- في علامة الارتباط التشعبي ذات السمة HREF، حيث حددنا اتصالاً ليس بصفحة ويب، بل بـ وثيقة نصية، والذي يتم حفظه في نفس المجلد مثل مستند HTML الحالي. نص " [البريد الإلكتروني محمي] " موجودة في العلامة التي تصف تسمية الارتساء وفي السمة HREFعنوان البريد الإلكتروني المقدم.

إذا كان زائر الصفحة يستخدم رابطًا خارجيًا لـ Microsoft، فسيتم فتح الصفحة على: http://www.microsoft.com/. بعد النقر على الارتباط التشعبي "الصفحة الرئيسية للموقع"سيتم فتح الصفحة الرئيسية للموقع. سيؤدي النقر فوق رابط داخلي في مستند نصي إلى فتح نافذة تحتوي على المستند النصي text.docالواردة في المجلد الحالي. إذا استخدمت رابط الارتساء الموجود في نهاية هذه الصفحة، فسوف تتغير صورة الصفحة الحالية بحيث يصبح نص التسمية " [البريد الإلكتروني محمي] "، الذي يرتبط به المرساة، سيتم وضعه في جزء المستند المرئي على الشاشة.

ضع النص " [البريد الإلكتروني محمي] " هو ارتباط تشعبي، يستطيع المستخدم من خلاله إرسال خطاب باستخدام البريد الإلكتروني الذي تم تكوينه على الكمبيوتر إلى البريد المحدد في السمة HREFعنوان - [البريد الإلكتروني محمي] .

دعونا نلقي نظرة على مثال آخر لإنشاء الارتباطات التشعبية النصية. لنفترض أنه تم حفظ مستندين HTML في مجلد معين، مع وصف مجالين من مجالات عمل الشركة - 1.htmlو 2.html.

لنقم بإنشاء قائمة من الارتباطات التشعبية، يوضح كل منها أحد مجالات عمل الشركة:

منتجاتنا

عملائنا

نتيجة:

منتجاتنا

عملائنا

في هذا المثال، يتم تضمين علامات الارتباط التشعبي ضمن علامات عناوين المستوى الأول. سيتم وضع نصوص الارتباط التشعبي في أسطر منفصلة وتصميمها كعناوين من المستوى الأول.

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

يوم جيد للجميع، أصدقائي الأعزاء والقراء. أتمنى أن تكون قد قررت المشاركة في مسابقتي وأنك تكتب بالفعل عن رحلة التدوين الخاصة بك. حسنًا، أود أن نواصل دراستنا للغة html واليوم أود أن أخبركم عن أحد أهم مكوناتها، ألا وهو الارتباطات التشعبية.

نعم، بدون هذه الارتباطات التشعبية، لن يكون الإنترنت مريحًا جدًا. لا، أنا أكذب. لن يكون من السهل التنقل على الإطلاق. هل يمكنك تخيل الإنترنت بدونهم؟ أنا شخصيا لا.

واليوم سوف نتعلم كيفية إدراج رابط تشعبي في لغة HTML. لكن أولاً أود أن أسألك: هل تعرف ما هو الارتباط التشعبي وكيف يختلف عن الارتباط العادي؟ كل شيء بسيط هنا: الرابط عبارة عن معلومة بسيطة تشير إلى مستند. في الوقت نفسه، لا يمكنك النقر فوق هذا النص (لن يحدث شيء)، لكنك تعرف مكان البحث عن المعلومات.

مثال: يمكنك معرفة كيفية تمييز الشعر في Photoshop على //site/adobe-photoshop/kak-vydelit-volosy/

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

يمكنك أن تقرأ عن كيفية إبراز الشعر بشكل صحيح في Photoshop في أحد دروسي التعليمية.

اوه حسناً. نظرية جيدة. الآن دعنا ننتقل إلى التدريب ونرى من هو المسؤول عن كل هذه الأمور.

تكون العلامة المقترنة مسؤولة عن الارتباط التشعبي، ولكنها في حد ذاتها لا تمثل أي شيء. يذهب دائمًا جنبًا إلى جنب مع السمة. وفي هذه الحالة، نحتاج إلى كتابة نفس href باستمرار. في قيمة السمة نضع الرابط للمورد المطلوب نفسه. وفي المحتوى نفسه نكتب النص نفسه، والذي يجب أن يصبح قابلاً للنقر (يعمل عند النقر عليه). انظر إلى المثال وأعتقد أنك ستفهم كل شيء.

محرك بحث ياندكس

كما تفهم، كتبت في هذا المثال أنه عندما تنقر على جزء من النص " محرك البحث Yandex"، سيتم توجيه الشخص إلى العنوان المكتوب بقيمة السمة href.

أعتقد أن الكثير منكم يعرف أن هناك روابط داخلية وخارجية. يتم تنفيذ الروابط الداخلية ضمن دليل واحد، أي الموقع، وتؤدي الروابط الخارجية إلى بعض موارد الطرف الثالث. والآن سأوضح لك كيفية القيام بالأمرين معًا.

التحولات الداخلية

الملف في نفس المجلد

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

ملف في مجلد آخر

1. افتح ملف Pushkin.html في برنامج Notepad++
2. الآن ابحث عن كلمة photo وقم بتغليفها بالعلامات<أ href> .
3. الآن الاهتمام! في قيمة السمة، نحدد المسار المتعلق بالملف الذي يتم تحريره، أي Pushkin.html نفسه. يجب أن ينتهي بك الأمر بشيء مثل هذا:

صورة

ماذا فعلنا الآن؟ وقمنا بما يلي: لأن الطريق إلى التصوير الفوتوغرافي يكمن مجلد منفصل img، الموجود في نفس المجلد مثل ملف Pushkin.html، ثم في قيمة السمة علينا أن نكتب أولاً اسم المجلد، ثم من خلال شرطة مائلة (/)، الاسم الكامل للمستند (في حالتنا، صور).

الآن قم بحفظ وتشغيل ملف Pushkin.html في متصفحك. سترى أن كلمة "صورة" أصبحت مظللة باللون الأزرق وأصبحت قابلة للنقر عليها، مما يعني أنه بالضغط على هذا الرابط سيتم نقلنا إلى الملف fofo.jpg الموجود في مجلد img.

فكيف؟ هل كل شيء واضح؟ إذا حدث أي شيء، لا تتردد في السؤال.

التحولات الخارجية

وبالطبع لا يسعنا إلا أن نذكر روابط خارجية، بعد النقر عليه سيتم نقلنا إلى موقع مختلف تمامًا. ولكن لا يوجد شيء معقد هنا. بيت القصيد هو أن تضع العنوان الكامل للموقع أو صفحة الويب في قيمة href. لقد عرضت مثالاً مع Yandex أعلاه. ولكن هنا مثال آخر:

سأدرس لأصبح على درجة الماجستير في المشاريع الاجتماعية.

هنا نصل إلى صفحة معينة من موقع معين.

يفتح في نافذة جديدة

افتراضيًا، عند النقر فوق رابط، يتم فتح المستند في نفس نافذة صفحتك، أي. سوف تغلق صفحتك. وهذا ليس جيدا. على وجه الخصوص، بالنسبة لمشاريع المحتوى أو المدونات التي يتم الترويج لها، فمن المستحسن أنه عند النقر فوق رابط، يتم فتح المستند في نافذة أو علامة تبويب جديدة دون إغلاق صفحتك.

ستساعدنا السمة المستهدفة ذات القيمة "_blank" في ذلك. لا يوجد شيء معقد هنا. ستحتاج فقط إلى إدراج هذا داخل علامة الفتح بعد قيمة السمة href. لنأخذ هذا المقتطف من الملف lukomorye.html، حيث أنشأنا رابطًا لصفحة Pushkin.html، والآن فقط سنكتب هذه السمة بالذات. يجب أن يبدو مثل هذا:

من قصيدة رسلان وليودميلا (المؤلف - أ.س. بوشكين)

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

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

حسنًا، بهذا نختتم درسنا لهذا اليوم. أتمنى أن تكون قد أعجبتك مقالتي وستكون سعيدًا إذا أصبحت قارئًا منتظمًا. لذلك لا تنس الاشتراك في تحديثات مدونتي حتى لا يفوتك أي شيء مثير للاهتمام. حسنًا، أتمنى لك النجاح في جميع مساعيك. وداعا وداعا!

مع أطيب التحيات، ديمتري كوستين.