مواقع الويب والمدونات وصفحات الويب - مفاهيم مألوفة بالفعل في عصرنا. مع تطور الإنترنت ، أصبحت مواقع استضافة صفحات الويب مشهورة بشكل لا يصدق ، وهذا ليس مفاجئًا: بالنسبة لبعض الأشخاص ، يعد امتلاك موقع الويب الخاص بهم أمرًا ضروريًا ، وبالنسبة للآخرين فهو ترفيه ممتع. في الحالة الأولى ، نتحدث عادة عن الشركات والمؤسسات وأصحاب المشاريع الخاصة عندما يعلنون عن أي منتج أو خدمة مطلوبة. والثاني عن المدونين
إلى جانب ذلك ، هناك مستخدمو الإنترنت الذين يبحثون ببساطة عن المعلومات ، ويقرأون المدونات ، ويشاهدون مقاطع الفيديو وما إلى ذلك.
لإنشاء موقع ويب عالي الجودة ، هناك العديد من الخيارات. سنركز على برمجة الويب من خلال HTML.
ما هو HTML
HTML تعني Hyper Text Mark-Up Language. مترجم من اللغة الإنجليزية ، وهذا يعني "لغة ترميز النص التشعبي".
بمعنى آخر ، HTML عبارة عن مجموعة من الأكواد التي يمكنك من خلالها إنشاء العناصر الرئيسية للموقع ، وإطاره ، مثلكيف تتكون الكلمات من جمل
أكواد HTML مكتوبة بشكل حصري بأحرف لاتينية وتسمى علامات ، وكل رمز محاط بأقواس زاوية. تم إقران بعض العلامات ، والبعض الآخر غير مقترن.
يقترن يعني أنه يجب استخدامها في أزواج دون فشل. على سبيل المثال ، تشير علامة الفتح إلى المكان الذي تبدأ فيه على صفحة الويب ، وتشير علامة الإغلاق إلى المكان الذي تتوقف فيه. هذا الأخير يختلف عن السابق من خلال وجود حرف مائل بعد قوس زاوية الفتح. على سبيل المثال ،هي علامة الفتح ، وهي علامة الإغلاق.
العلامات غير المقترنة لا تحتاج إلى شريك.
يمكن أن تحتوي العديد من العلامات على سمات - عناصر إضافية تمنحها معنى أكثر تحديدًا. على سبيل المثال ، الوسم
حيث يتم استخدام HTML
الفهم الكلاسيكي لمكان الحاجة إلى HTML هو بناء مواقع الويب.
من الناحية العملية ، قد يكون هذا كافيًا ، لأن HTML يسمح لك بإنشاء العناصر الرئيسية للموقع ، والقوائم (بما في ذلك القوائم متعددة المستويات) ، وتعيين الخلفية ، وإدراج النص ، والصور ، والصوت ، والفيديو ، وتحرير الخطوط وأكثر من ذلك بكثير
ومع ذلك ، هناك لغات أخرى تسمح لك بإضافة عناصر أكثر إثارة للاهتمام وغالبًا ما تكون ضرورية إلى صفحة الويب:
- يعين CSS أنماطًا للموقع بأكمله دون الحاجة إلى وصف ميزات النمط باستمرار للعناصر الفردية باستخدام العلامات - لون النص وخطه ، على سبيل المثال.
- تسمح لك لغة البرنامج النصي بتطوير وتضمين برامج مصغرة (نصوص) على الموقع ، بدءًا منأشياء جمالية عادية (تغيير لون الرابط عند التمرير بالماوس) وتنتهي بأخرى وظيفية (جمع عناوين البريد الإلكتروني للعملاء وأرقام الهواتف).
- مع PHP يمكنك تطوير سجل الزوار الخاص بك أو نظام التعليق.
كما يتم استخدام HTML في إنشاء رسائل البريد الإلكتروني للتوزيع.
ما هو الرابط
تسمح لك بالانتقال إلى صفحة ويب أخرى ، داخل الموقع وخارجها.
روابط HTML شائعة الاستخدام:
- للذهاب إلى مورد ويب خارجي.
- للتنقل بين الصفحات داخل الموقع
- للذهاب إلى نماذج جوجل.
غالبًا ما يشار إلى ارتباط إلى المصدر في HTML ، خاصة أنه عند نسخ مادة من موقع آخر ، يجب عليك تحديد المؤلف. خلاف ذلك ، يمكن أن يندرج النسخ دون الإسناد ضمن تعريفات انتهاك حقوق النشر وسرقة المحتوى والنتائج العكسية. بالإضافة إلى ذلك ، فإن استخدام المواد المستعارة وغير الفريدة يقلل من أداء تحسين محركات البحث ، ويشير إلى وجود ارتباط بالمصدر يقلل من المخاطر.
أنواع الروابط
بالمعنى الكلاسيكي ، الرابط هو عنوان مورد الويب الذي يمكنك الانتقال إليه بالنقر فوقه.
إلى جانب ذلك ، هناك ارتباطات تشعبية: نصوص وصور. في هذه الحالات ، يكون رابط HTML "مخفيًا" أسفل جملة (كلمة) أو صورة ما ، ولمتابعته ، تحتاج إلى النقر فوق النص أو الصورة.
أنواع أخرى من الروابط:
- لم تتم زيارته - رابط لم يتم النقر عليه بعد أثناء جلسة معينة. على سبيل المثال ، إذا اتبعت هذا الرابط بالأمس ، ثم أوقفت جهاز الكمبيوتر الخاص بك ، وأعدت تشغيله مرة أخرى اليوم ، فلن تتم زيارة الرابط الآن مرة أخرى ، حيث بدأت جلسة جديدة.
- نشط - في هذه الحالة ، يتم حفظ الرابط لفترة قصيرة جدًا: الفاصل الزمني بين النقر على الرابط ومتابعته.
- تمت زيارته - رابط تمت زيارته بالفعل مرة واحدة على الأقل خلال جلسة واحدة.
بالنسبة للروابط النصية العادية ، تميل الروابط التي تمت زيارتها إلى تغيير لونها ما لم ينص على خلاف ذلك.
صورة الارتباط التشعبي لا تغير مظهرها سواء تمت زيارتها أم لا.
كيفية إدراج رابط عادي
تنظر العديد من موارد الويب إلى عنوان الموقع على أنه رابط ، واجعله قابلاً للنقر على الفور وقم بتمييزه بالألوان. على سبيل المثال ، إذا تم إرسال العنوان في ماسنجر أو عن طريق البريد الإلكتروني ، بالضغط عليه ، يمكنك الذهاب إلى الموقع.
في حالة إنشاء موقع بنفسك باستخدام HTML ، يجب إدخال رابط باستخدام علامة خاصة. سيبدو مثل هذا: عنوان موقع الويب. يجب تحديد نص الرابط في HTML بالكامل مع البروتوكول.
كيفية إدراج ارتباط تشعبي نصي
قيل سابقًا أن الارتباط التشعبي للنص يؤدي نفس وظيفة الارتباط العادي ، ولكنه يبدو أكثر إرضاءً من الناحية الجمالية: بدلاً من عنوان الموقع ، الذي غالبًا ما يكون طويلًا بشكل غير ضروري ، يشار إلى كلمة أو عبارة. على سبيل المثال ، في الجملة "ابحث عن المعلومات هنا" ، يمكنك إخفاء الرابط فيهاكلمة "هنا". سيتم تمييزه والضغط عليه سينقل المستخدم إلى الموقع المطلوب
تمت مناقشة كيفية إنشاء رابط HTML مسبقًا. يمكنك إدراج ارتباط تشعبي نصي باستخدام نفس العلامة. الاختلاف الوحيد هو أنك تحتاج إلى تحديد النص الذي سيتم إخفاء الرابط تحته بين العلامات: نص مرئي.
كيفية إدراج ارتباط تشعبي للصورة
الأمر أكثر تعقيدًا هنا بقليل. نحن نستخدم نفس العلامة ، ولكن بدلاً من النص ، تحتاج إلى تحديد المسار إلى الصورة.
المسار هو موقع الصورة. إذا كانت الصورة (الصورة) موجودة في خدمة مشاركة الملفات ، فأنت بحاجة إلى تحديد جميع المجلدات على طول المسار إلى الصورة من خلال شرطة مائلة. يمكنك أيضًا تضمين ارتباط إلى صورة إن أمكن.
لوضع علامة
بالإضافة إلى src ، هناك سمات أخرى قابلة للتطبيق أيضًا ، مما يتيح لك ضبط ارتفاع الصورة وعرضها وموقعها وغير ذلك الكثير. البعض منهم:
- Src - يحدد المسار إلى الصورة.
- Lowsrc - مطابقة للسمة السابقة ، لكنها محددة للصور منخفضة الجودة.
- الارتفاع - ارتفاع الصورة
- العرض - عرضه.
- بديل - وصف الصورة. عندما تحوم فوق صورة أو صورة ، سيظهر النص المحدد في هذه السمة.
- Border - يحدد سمك الحد حول الصورة.
يتم تحديد السمات بعد العلامة ويتم تضمينها فيتكوينه. يجب أن تتبع السمة قيمتها. على سبيل المثال ، بالنسبة للسمات "الارتفاع" أو "العرض" (الارتفاع ، العرض) يحدد ارتفاع الصورة على صفحة الويب. وحدة القياس هي البكسل ، ما لم يذكر خلاف ذلك.
سيبدو كالتالي: <a href="عنوان صفحة الويب"
. ستساعد هذه السمات في تحديد الحجم المناسب للصورة. تساعد الحدود في إنشاء حد غير مرئي حول الصورة.
تنطبق السمات المذكورة أعلاه بشكل منفصل على علامة إدراج الصورة. على سبيل المثال:.
ما هي روابط المرساة
يعد إنشاء روابط الإرساء مهارة مفيدة للغاية. غالبًا ما تكون هناك حاجة إلى تصميم صفحة ويب ذات كتلة نصية طويلة أو تحتوي على عدة أقسام فرعية في صفحة واحدة. في هذه الحالة ، يمكنك البدء فورًا بقائمة روابط لأقسام فرعية من النص أو صفحة الويب ، وعند النقر فوقها ، ينتقل المستخدم مباشرةً إلى القسم المطلوب.
سيتطلب إنشاء روابط إرساء مزيدًا من استخدام علامات السمات أكثر من أنواع الروابط الأخرى.
أولاً ، تحتاج إلى تعيين القيمة الإجمالية لكل كتلة من المعلومات أو قسم فرعي من النص باستخدام السمة العلوية ، ثم ربطها بالرابط المقابل.
ميزاتها أكثر شمولاً ، لذلك يُنصح أولاً بإتقان إنشاء روابط أبسط ، ثم الانتقال إلى تكوين روابط الارتساء.
نصائح
مساعدة من ذوي الخبرةالمبرمجين:
- يمكنك عمل ذلك بحيث يتم عرض المعلومات المتعلقة بالرابط عند التمرير في HTML. لهذا ، يمكن أن تكون سمة alt ، التي نستخدمها أيضًا للعناصر الرسومية ، مفيدة.
- من الممكن عمل قائمة بالروابط باستخدام HTML. على وجه الخصوص ، يمكن أن يكون هذا مفيدًا لروابط الارتساء ، وكذلك عندما تحتاج إلى إنشاء قائمة بموارد الويب التي يمكن أن يتبعها ارتباط مباشرة من صفحة الويب الحالية.
- بمساعدة CSS و JavaScript ، بالإضافة إلى بعض وظائف HTML ، يمكنك إنشاء تصميم مختلف للروابط النصية والارتباطات التشعبية عن المعتاد. على سبيل المثال ، عند تحريك مؤشر الماوس فوق ارتباط ، يمكنه تغيير لونه والعودة إلى اللون السابق عندما يكون المؤشر بعيدًا عنه. يمكن القيام بذلك باستخدام برنامج JavaScript مخصص. بالإضافة إلى ذلك ، يمكن تعيين لون الارتباط على شيء آخر غير اللون الأزرق للزيارة غير المرغوب فيها أو الأرجواني للزيارة. هذه هي وظيفة CSS.
- لا تسيء استخدام الروابط. صفحة الويب التي تحتوي على العديد من الروابط غير الملائمة تبدو قذرة وقذرة.
- تأكد من أن المستخدم يفهم أن الارتباط التشعبي بالصورة هو في الحقيقة صورة وليس مجرد صورة.
الخلاصة
من السهل جدًا الارتباط بصفحة بتنسيق HTML. من المهم اتباع جميع النقاط الرئيسية لهذه اللغة ، لأنه حتى الخطأ الصغير يمكن أن يؤدي إلى حقيقة أنه لن تكون هناك نتيجة ، ولن يعمل الكود.
