منذ بداية الإنترنت، كانت لغة HTML أمراً حاسماً لجعل شبكة الويب العالمية تعمل وتظهر بالطريقة التي نريدها. دعنا نلقي نظرة على ماهية لغة HTML وكيف تتحول إلى الصفحات التي تراها كل يوم.
العمود الفقري للإنترنت:
ترمز لغة HTML إلى لغة ترميز النص التشعبي. إنها لغة تشفير تُستخدم لإنشاء صفحات يمكن لمتصفح الويب عرضها.
يتم تخزين معظم صفحات الويب التي تجدها على الإنترنت، بما في ذلك الصفحة التي تقرأ فيها هذه المقالة الآن، كملف HTML.
مواقع الويب هي مجموعة من صفحات HTML ذات الصلة المخزنة على خادم في مكان ما. هذا هو السبب في أن اللغة كثيراً ما يطلق عليها العمود الفقري للإنترنت.
عندما تنتقل إلى صفحة ما على الإنترنت، فأنت تطلب بشكل أساسي ملف HTML مخزن على الخادم. بعد ذلك، سيقوم المتصفح الذي تستخدمه، مثل كروم Chrome أو فايرفوكس Firefox، بتحليل لغة HTML وعرضه لك بالطريقة التي تقصدها.
إن عالمية وتعدد استخدامات لغة HTML تجعلها أكثر لغة ترميزية شيوعاً في العالم. يبدأ معظم مطوري واجهات الويب بتعلم كيفية البرمجة بلغة HTML.
تتم ترجمة أدوات السحب والإفلات ومحررات WYSIWYG في النهاية إلى لغة HTML بحيث يمكن للمتصفحات تحليلها.
كيف تعمل لغة HTML:
مثل أي لغة برمجة، تبدو لغة HTML كمجموعة من الأوامر وكتل النص قبل أن تتحول إلى الواجهة المرئية. إذا كنت مهتماً بمعرفة شكل لغة HTML في هذه الصفحة المعينة وكنت على سطح مكتب أو كمبيوتر محمول، فحاول النقر بزر الماوس الأيمن في أي مكان على هذه الصفحة واختر عرض مصدر الصفحة أو بالإنكليزية View Page Source (قد يختلف الخيار وفقاً لمتصفحك ).
يجب أن يأخذك هذا الأمر إلى صفحة ضخمة من التعليمات البرمجية.
يتم إنشاء معظم لغة HTML باستخدام كتل العناصر Element blocks، وهي مقتطفات من تعليمات HTML البرمجية التي تفصل بين العناصر المختلفة في الصفحة.
على سبيل المثال، نص هذه المقالة عبارة عن كتلة عناصر، مثل القائمة والتوصيات أدناه وتذييل الصفحة. يتم ترميز هذه العناصر بطريقتها الخاصة، حيث قد تتصرف بشكل مختلف.
يعد استخدام ما يسمى بـ Cascading Style Sheets أو اختصاراً (CSS) جزءاً مهماً من إنشاء صفحات HTML.
إنها التي تحدد الشكل الذي يجب أن تبدو عليه عناصر معينة من الصفحة. على سبيل المثال، كيف يجب أن تكون الصور كبيرة، وما هي الخطوط التي يجب أن تظهر على الصفحة، وكيف يجب أن تستجيب صفحة الويب عند تغيير حجمها أو توسيعها.
هذه كلها ضرورية لإنشاء مواقع ويب جذابة ومتماسكة وأنيقة. إذا كنت قد لاحظت أن مواقع الويب بدأت في الظهور بشكل أفضل في العقد الماضي، فإن الاستخدام المتزايد لـ CSS هو السبب الأكبر. يمكنك قراءة المزيد عن CSS هنا.
أحد أفضل الأشياء في لغة HTML هو قدرتها على تشغيل البرامج النصية الديناميكية عبر JavaScript أو JS. يمكن لهذه البرامج النصية إنشاء عناصر ديناميكية.
على سبيل المثال، في مواقع ويب معينة، سيسمح لك التمرير فوق صورة بتكبيرها. يمكنك تحقيق هذا التأثير عن طريق برمجة عنصر JavaScript.
أساسيات لغة HTML:
على الرغم من أن لغة HTML لغة معقدة إلى حد ما مع العديد من العلامات tags والكتل المختلفة، إلا أن هناك عدداً قليلاً من أكواد لغة HTML التي قد تكون مفيدة أثناء تصفح الويب. فيما يلي بعض علامات لغة HTML الأساسية التي قد تواجهها.
يمكنك استخدام الأمر <a> لإنشاء رابط. عنوان URL هو المكان الذي سيشير إليه الرابط، والنص SyrianTech هو كيف سيظهر للمستخدم النهائي.
<b>غامق</b> <i>مائل</i> <u>مسطّر</u>
غامقمائلمسطّر
يمكنك استخدام <b> و <i> و <u> لتطبيق خيارات تنسيق النص القياسية: نص غامق ومائل ونص تحته خط.
<img src="picture.jpg">
تُستخدم علامة <img> لتضمين صورة في الصفحة. يمكنك أيضاً تخصيصها ببعض السمات الإضافية، مثل تغيير الحجم والنص البديل.
<h1>heading 1</h1> <p>paragraph</p>
ما سبق هو علامات tags للعناوين والفقرات. على غرار الطريقة التي يسمح بها مايكروسوفت وورد Microsoft Word لك بفرز النص إلى عناوين ونص أساسي، يمكن لـ لغة HTML أيضاً تنسيق النص استناداً إلى خيارات العناوين والفقرات الافتراضية.
يتم تعريف هذه التنسيقات باستخدام CSS.
<p style="color:edr;">red paragraph</p>
يمكنك أيضاً استخدام علامة style لتخصيص النص بإعدادات نمط مختلفة، مثل لون النص ولون الخلفية وحجم الخط.
إذا كنت مهتماً بمعرفة المزيد من خيارات تنسيق لغة HTML، فاطلع على دروس W3Schools المجانية. ستجد قائمة كاملة بعلامات لغة HTML التي يمكنك استخدامها لبدء إنشاء صفحات الويب.
عند كتابة عنوان في متصفح الويب لديك، تحدث الكثير من الأشياء وراء الكواليس. ويتم تحديد معظم ذلك من خلال الأجزاء المختلفة من عنوان URL الذي كتبته. دعونا نلقي نظرة فاحصة.
يمكن أن يتكون عنوان URL من مجموعة من الأجزاء المختلفة. هناك اسم مضيف يقوم بتعيين عنوان IP لمورد معين على الإنترنت وحفنة من المعلومات الإضافية التي تخبر المتصفح والخادم بكيفية التعامل مع الأشياء.
يمكنك التفكير في عنوان IP على أنه شيء يشبه رقم الهاتف. يشبه اسم المضيف اسم الشخص الذي تريد البحث عن رقم هاتفه.
ويعمل معيار يسمى نظام اسم المجال (DNS) في الخلفية مثل دفتر الهاتف، وترجمة أسماء المضيف الأكثر ملاءمة للبشر في عناوين IP التي تستخدمها الشبكات لتوجيه حركة المرور.
مع مراعاة هذا القياس، دعنا نلقي نظرة على بنية عنوان URL وكيف يعمل على الوصول إلى المكان الذي تريد الذهاب إليه بالضبط.
ما هي بنية عنوان URL ؟
تم تعريف بنية عنوان URL لأول مرة من قبل السير تيم بيرنرز لي – الرجل الذي أنشأ الويب وأول متصفح ويب – في عام 1994.
تجمع عناوين URL بشكل أساسي بين فكرة أسماء النطاقات وفكرة استخدام مسار الملف لتحديد محدد مجلد وملف الهيكل. لذلك، يشبه استخدام مسار مثل C: \ Documents \ Personal \ myfile.txt في ويندوز Windows ، ولكن مع بعض الأشياء الإضافية في البداية للمساعدة في العثور على الخادم الصحيح على الإنترنت حيث يوجد هذا المسار والبروتوكول المستخدم للوصول إلى معلومات.
يتكون عنوان URL من عدة أجزاء مختلفة. خذ على سبيل المثال عنوان URL أساسي مثل ذلك الموضح في الصورة أدناه.
يتم تقسيم عنوان URL البسيط هذا إلى مكونين رئيسيين: مخطط العنوان والجزء الرئيسي.
المخطط:
يعتقد الكثير من الأشخاص أن عنوان URL مجرد عنوان ويب، ولكنه ليس بهذه البساطة. عنوان الويب هو عنوان URL ، ولكن جميع عناوين URL ليست عناوين ويب.
الخدمات الأخرى التي يمكنك الوصول إليها عبر الإنترنت – مثل FTP – أو حتى محلياً – مثل MAILTO – هي أيضاً عناوين URL.
يشير جزء مخطط عنوان URL (تلك الأحرف متبوعة بنقطتين) إلى البروتوكول الذي يجب أن يتصل به التطبيق (مثل متصفح الويب) والخادم.
عناوين الويب هي أكثر عناوين URL شيوعاً، ولكن هناك عناوين أخرى. لذلك، قد ترى مخططات مثل:
HyperText Transfer Protocol (بروتوكول نقل النص التشعبي) (HTTP): هذا هو البروتوكول الأساسي للويب ويحدد الإجراءات التي يجب على خوادم الويب والمتصفحات اتخاذها استجابة لأوامر معينة.
HTTP Secure (HTTPS): هذا هو شكل من أشكال HTTP يعمل على طبقة آمنة ومشفرة لنقل أكثر أماناً للمعلومات.
بروتوكول نقل الملفات (FTP): غالبا ما يستخدم هذا البروتوكول لنقل الملفات عبر الإنترنت.
في المتصفحات الحديثة، لا يلزم المخطط تقنياً كجزء من عنوان URL. إذا قمت بإدخال موقع ويب مثل syriantech.com ، فسوف يحدد المتصفح البروتوكول الصحيح المراد استخدامه تلقائياً. ومع ذلك، تتطلب بعض التطبيقات (والبروتوكولات) الأخرى استخدام المخطط.
الجزء الأساسي للعنوان:
إن الجزء الأساسي من عنوان URL (الذي يسبقه علامتي سلاش) هو نفسه مقسم إلى مجموعة من الأجزاء. لنبدأ بعنوان URL بسيط للغاية – وهو النوع الذي قد ينقلك إلى الصفحة الرئيسية لموقع الويب.
في هذا المثال البسيط، يسمى الجزء www.example.com بأكمله اسم مضيف، ويحمل عنوان IP. يمكنك أيضاً كتابة عنوان IP في شريط عنوان المتصفح بدلاً من اسم المضيف إذا كنت تعرفه.
ولكن عند تحليل اسم المضيف، فإنه يساعد على قراءته للخلف لفهم ما يحدث، لذلك إليك المكونات التالية:
نطاق المستوى الأعلىTop-Level Domain : في المثال هنا ، com هو نطاق المستوى الأعلى. هذا هو أعلى مستوى في التسلسل الهرمي لنظام اسم المجال (DNS) المستخدم لترجمة عناوين IP إلى عناوين لغة بسيطة يسهل على البشر تذكرها.
يتم إنشاء هذه المجالات ذات المستوى الأعلى وإدارتها من قِبل شركة الإنترنت للأسماء والأرقام المخصصة (ICANN).
نطاقات المستوى الأعلى الثلاثة الأكثر شيوعاً هي .com و .net و .gov. تمتلك معظم البلدان أيضاً نطاقاً من المستوى الأعلى مؤلفاً من حرفين، لذا ستشاهد نطاقات مثل .sy (الجمهورية العربية السورية) .us (الولايات المتحدة) و .uk (المملكة المتحدة) و .ca (كندا) والعديد غيرها.
هناك أيضاً بعض نطاقات المستوى الأعلى الإضافية (مثل .museum) التي ترعاها وتديرها المؤسسات الخاصة. بالإضافة إلى ذلك، هناك أيضاً بعض نطاقات المستوى الأعلى العامة (مثل .club و .life و .news).
نطاق فرعيSubdomain: نظراً لأن نظام أسماء النطاقات هو نظام هرمي، يعتبر كل من جزء www و example من عنوان URL الخاص بنا مثالًا على نطاقات فرعية.
يعد الجزء www نطاقاً فرعياً لنطاق المستوى الأعلى com ، ويكون الجزء www نطاقاً فرعياً لنطاق example. ولهذا السبب، غالباً ما تشاهد شركة تحمل اسماً مسجلاً مثل google.com مقسمة إلى نطاقات فرعية منفصلة مثل www.google.com و news.google.com و mail.google.com وهكذا.
كان هذا مثالاً للقسم الرئيسي في عنوان URL ، ولكن الأمور قد تصبح أكثر تعقيداً. هناك عنصرين آخرين يمكن أن يحتويهما مقطع الأساس:
معلومات المستخدمUser Information: يمكن أيضاً أن يحتوي القسم الرئيسي على اسم مستخدم وكلمة مرور للموقع الذي تقوم بالوصول إليه.
من غير المألوف رؤية هذه البنية في عناوين URL اليوم، ولكن يمكن أن يحدث ذلك. إذا كان موجوداً، فسيأتي جزء معلومات المستخدم قبل اسم المضيف وتتبعه علامة @. لذلك، قد ترى شيئاً مثل //username:password@www.example.com إذا تضمنت معلومات المستخدم.
رقم المنفذ Port Number: تستخدم أجهزة الشبكة عناوين IP للحصول على المعلومات إلى الكمبيوتر الصحيح على الشبكة.
عندما يصل ذلك المرور، يخبر رقم المنفذ جهاز الكمبيوتر بأن الغرض من هذه الحركة هو. رقم المنفذ هو عنصر آخر لا تشاهده كثيراً عند تصفح الويب، ولكن قد تراه في تطبيقات الشبكة (مثل الألعاب) التي تتطلب منك إدخال عنوان URL.
إذا كان عنوان URL يحتوي على رقم منفذ، فإنه يأتي بعد اسم المضيف ويسبقه نقطتان. سيبدو الأمر كالتالي:
//www.example.com:8080.
إذن، هذه هي أجزاء المخطط والجزء الرئيسي لعنوان URL ، ولكن كما قد يتبادر إلى ذهنك بعد النظر إلى الكثير من عناوين URL أثناء تصفح الويب، يمكن أن تتضمن المزيد من العناصر.
المسارات والاستعلامات والقطع:
هناك ثلاثة أجزاء إضافية من عنوان URL قد تراها بعد جزء المرجع: المسارات، والاستعلامات، والأجزاء (القطع). إليك كيف يعمل هؤلاء.
المسار:
يحصل قسم المرجع في عنوان URL على المتصفح (أو أي تطبيق) على الخادم الصحيح على الشبكة.
المسار التالي – الذي يعمل تماماً مثل المسار في ويندوز Windows أو MacOS أو لينكس Linux – ينقلك إلى المجلد أو الملف الأيمن على ذلك الخادم. يسبق المسار شرطة مائلة (سلاش)، وهناك سلاش بين كل دليل ودليل فرعي، على النحو التالي:
www.example.com/folder/subfolder/filename.html
القطعة الأخيرة هي اسم الملف الذي يتم فتحه عند الوصول إلى موقع الويب. على الرغم من أنك قد لا تراه في شريط العناوين، فإن هذا لا يعني أنه ليس موجوداً.
بعض اللغات المستخدمة لإنشاء صفحات الويب تخفي اسم الملف والإضافات التي تشاهدها. يجعل هذا عنوان URL أكثر سهولة في التذكر والكتابة، ويعطيها مظهراً أنظف.
الاستعلام query :
يتم استخدام جزء طلب البحث لعنوان URL لتحديد الأشياء التي لا تشكل جزءاً من بنية مسار صارمة. في أغلب الأحيان، سترى أنها مستخدمة عند إجراء بحث أو عندما تقدم صفحة الويب بيانات من خلال نموذج.
يسبق جزء الاستعلام علامة استفهام ويأتي بعد المسار (أو بعد اسم المضيف إذا لم يتم تضمين مسار).
على سبيل المثال، خذ عنوان URL هذا عندما بحثنا في أمازون Amazon عن الكلمات الرئيسية موسع wi-fi:
لقد اجتاز نموذج البحث معلومات إلى محرك البحث في أمازون Amazon. بعد علامة الاستفهام، يمكنك أن ترى أن هناك جزأين للاستعلام: عنوان URL للبحث (وهو جزء url = search-alias٪ 3Daps & field) والكلمات الرئيسية التي قمنا بكتابتها (هذه هي keywords = wi-fi + موسع الجزء).
هذا مثال بسيط إلى حد ما، وغالباً ما سترى عناوين URL ذات متغيرات إضافية (وأكثر تعقيداً). على سبيل المثال، إليك عنوان URL عندما بحثنا في جوجل Google عن الكلمة الرئيسية syriantech:
كما ترون، هناك بعض المعلومات المختلفة هناك. في هذه الحالة، يمكنك أن ترى أن هناك معلومات إضافية تشير إلى لغة البحث، والمتصفح الذي استخدمناه كروم Chrome ، وحتى رقم إصدار المتصفح.
القطع Fragment:
يُطلَق على المكون الأخير لعنوان URL الذي قد تراه اسم جزء أو قطع Fragment . يسبق الجزء علامة تجزئة (#) ويستخدم للإشارة إلى موقع محدد على صفحة ويب.
عند ترميز صفحة ويب، يمكن للمصممين إنشاء نقاط ارتساء لنص محدد مثل العناوين. عند استخدام الجزء المناسب في نهاية عنوان URL ، سيحمّل المتصفح الصفحة ثم ينتقل إلى تلك المرساة.
غالباً ما يتم استخدام المراس وعناوين URL التي تحتوي على أجزاء لإنشاء جداول محتوى على صفحات الويب لتسهيل التنقل.
إليك مثال على ذلك. تعد صفحة ويكيبيديا في عصر النهضة وثيقة طويلة جداً، وقد تم تقسيمها إلى حوالي 11 قسماً، يحتوي كل قسم منها على أقسام فرعية متعددة.
ولكن كل عنوان على الصفحة يحتوي على مرساة مضمنة، ويتضمن جدول المحتويات في الجزء العلوي من المقالة روابط تتيح لك الانتقال إلى الأقسام المختلفة. هذه الروابط تعمل عن طريق تضمين الأجزاء.
يمكنك أيضاً استخدام هذه الأجزاء مباشرة في شريط العناوين أو على شكل روابط قابلة للمشاركة. لنفرض على سبيل المثال أنك تريد عرض جزء من هذه الصفحة يغطي روسيا. يمكنك فقط إرسال هذا الرابط إليهم:
https://en.wikipedia.org/wiki/Renaissance#Russia
جزء #Russia هذا في نهاية عنوان URL يقفز مباشرة إلى هذا القسم بعد تحميل الصفحة.
إذاًأصبح لديك الآن أكثر مما تريد معرفته حول كيفية عمل عناوين URL.
