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

يشترك

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

المزيد من مقاطع الفيديو على قناتنا - تعلم التسويق عبر الإنترنت مع SEMANTICA

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

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

• ترميز HTML؛
• ورقة الأنماط أو رابط الملف؛
• برامج مكتوبة بلغة JavaScript أو روابط لملفات تحتوي على تعليمات برمجية.

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

لماذا قد نحتاج إلى دراسة الكود المصدري؟

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

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

هذه هي الميزات الأساسية، ولكن في الواقع، من خلال القدرة على قراءة الكود، يمكنك معرفة الكثير عن الصفحة.

كيفية عرض الكود المصدري للموقع

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

حدد خيار "عرض رمز الصفحة" واحصل على القائمة الكاملة علامة تبويب منفصلة.

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

كيفية العثور على الكود المصدري لصفحة الموقع

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

في الفصل أدوات إضافيةحدد "أدوات المطور".

سيتم فتح نافذة توضح الحالة النشطة للكود. وهذا يعني أنه عند النقر فوق العلامة، سيظهر نمط العنصر بجوارها، وسيتم تمييز الكتل المحددة في الصفحة.

في علامة التبويب "المصدر"، يمكنك عرض محتويات بعض الملفات: البرامج النصية والخطوط والصور.

في علامة التبويب "الأمان"، يمكنك التحقق من شهادة الموقع.

ستساعدك علامة التبويب "التدقيقات" على التحقق من الموارد المنشورة على الاستضافة.

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

كيفية عرض العلامات الوصفية

يتضمن كل مستند HTML علامات هيكلية. وهنا بعض منهم:

1. أتش تي أم أل – الوثيقة بأكملها.
2. الرأس - قسم رؤوس الخدمة.
3. العنوان - عنوان الصفحة (يتم عرضه في علامة التبويب).
4. النص - نص الوثيقة.
5. H1-H6 – عناوين نص الصفحة.
6. مقالة - مقالة.
7. القسم - القسم.
8. القائمة - القائمة.
9. شعبة - كتلة.
10. سبان - سلسلة.
11. ف – الفقرة.
12. الجدول - الجدول.

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

ولا يمكن معرفة محتوياتها بأي طريقة أخرى.

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

سيتم فتحه في علامة تبويب جديدة الملف المحددوالتي يمكنك عرضها أو حفظها.

كيفية عرض الكود المصدري للصفحة لتصحيح البرنامج النصي

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

يمكن رؤية بناء الجملة مباشرة في الكود. هذا هو الغرض من علامة التبويب "المصدر".

كيفية عرض كود عنصر معين

للصفحات الكبيرة ذات كمية كبيرةمن الصعب العثور على العناصر الرمز المطلوبفي جميع أنحاء العلامات. في هذه الحالة عليك استعمال فريق خاصقائمة السياق. حرك الماوس فوق الجزء واضغط على RMB. حدد الأمر "عرض الرمز".

سيتم فتح نفس النافذة، ولكن مع التركيز على الكائن المحدد.

ملخص

قلنا لك ما هو رمز مصدر الصفحة. يكفي إتقان الأساسيات معرفة HTMLوCSS، واستخدام أدوات مريحةالمطور، يمكنك تصحيح مستندات HTML الخاصة بك.

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

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

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

ستتعلم من هذه المقالة كيفية عرض الكود المصدري لصفحة موقع ويب في المتصفح (كيفية فتح HTML وCSS و كود جافا سكريبتموقع).

كيفية فتح الكود المصدري للصفحة في المتصفح

هناك طريقتان لفتح الكود المصدري لصفحة الويب في المتصفح:

1. استخدام المفاتيح الساخنة.
2. فتح من قائمة السياق.

السيطرة + U– مجموعة مفاتيح التشغيل السريع لعرض الكود المصدري لصفحة الموقع بأكملها في نافذة جديدة منفصلة. قياسي لجميع المتصفحات: Google Chrome، وOpera، وMozilla Firefox، ومتصفح Yandex، وIE.

يمكنك أيضًا الدخول إلى أدوات المطور كما يلي:

من أجل العثور بسرعة على الرمز أو الكلمة أو النص المطلوب على الصفحة، يمكنك استخدام مجموعة مفاتيح البحث السريع القياسية لجميع المتصفحات: Ctrl + G.

تعليمات الفيديو:

عرض كود العنصر | استكشاف العنصر | تدقيق العنصر

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

كيفية عرض رمز عنصر على الصفحة:

يمكنك أيضًا استخدام اختصارات لوحة المفاتيح للقيام بذلك الوصول السريعلفحص العنصر.

مفاتيح التشغيل السريع (الأزرار):

جوجل كروم: Ctrl+Shift+I و Ctrl+Shift+C

الأوبرا: Ctrl+Shift+I و Ctrl+Shift+C

موزيلا فايرفوكس: Ctrl+Shift+I و Ctrl+Shift+C

متصفح ياندكس: Ctrl+Shift+I و Ctrl+Shift+C

بعد هذه الخطوات، سيتم فتح الملف الأصلي في نفس نافذة المتصفح. رمز الويبالصفحات:

ستكون جميع أكواد HTML موجودة في العمود الأيسر الكبير. أ أنماط CSS- على اليمين.

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

توضح تعليمات الفيديو هذه بالتفصيل وتوضح كيفية العمل مع أدوات المطور:

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

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

كيفية عرض كود المصدر على هاتف أندرويد

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

للقيام بذلك، أضف بادئة مصدر العرض إلى عنوان URL للصفحة التي يتم فحصها:

على سبيل المثال:

مصدر العرض:https://site/turbo-rezhim-opera/

" نفس النقطة في قائمة السياق، والتي إذا قمت بالنقر فوق انقر على اليميننص الفأرة الصفحات. يمكنك أيضًا استخدام اختصار لوحة المفاتيح CTRL + U. موزيلا فايرفوكسلا يستخدم برامج خارجية - أصلي شفرة الصفحاتمع تسليط الضوء على بناء الجملة سيتم فتحه في نافذة منفصلة browser.

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

في متصفح اوبراافتح القائمة، وانتقل إلى قسم "الصفحة" وستتاح لك الفرصة لتحديد عنصر "المصدر" في القسم الفرعي "أدوات التطوير" شفرة"أو العنصر "الأصل شفرةإطار." تم تعيين هذا التحديد ساخنًا مفاتيح CTRL+ U وCTRL + SHIFT + U على التوالي. في قائمة السياق منضمة إلى نقرة الصفحاتانقر بزر الماوس الأيمن، وهناك أيضًا عنصر "الأولي شفرة" مصدر الأوبرا الصفحاتفي برنامج خارجي تم تعيينه في نظام التشغيل أو في إعدادات المتصفح لتحرير ملفات HTML.

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