لقد اهتم مطورو المتصفحات براحة أولئك الذين يقومون بإنشاء مواقع تفتح في نفس المتصفحات، أي مشرفي المواقع. لقد أضافوا أدوات المطور إلى الميزات القياسية، والتي يمكنك من خلالها فتحها بسهولة عرض الكود المصدري لصفحة الموقع في المتصفح: HTML وCSS وJavaScript (JS)، والحصول على بيانات مفيدة متنوعة حول بنية الموقع، وإجراء التحليل الفني الخاص به. بشكل عام، نرى الكثير من الأشياء المفيدة.
بالطبع، يتم استخدام هذه الأدوات ليس فقط من قبل منشئي مواقع الويب للعمل، ولكن أيضًا من قبل المستخدمين العاديين، الذين يسمح لهم كود المصدر بعرض مختلف البيانات المفيدة.
ستتعلم من هذه المقالة كيفية عرض الكود المصدري لصفحة موقع ويب في المتصفح (كيفية فتح كود HTML وCSS وJavaScript لموقع الويب).
هناك طريقتان لفتح الكود المصدري لصفحة الويب في المتصفح:
السيطرة + 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/
إذا قمت بفتح أي صفحة ويب، فسوف تحتوي على عناصر نموذجية لا تتغير حسب نوع الموقع وتركيزه. يوضح المثال 4.1 رمز مستند بسيط يحتوي على علامات أساسية.
مثال 4.1. كود مصدر صفحة الويب
الفقرة الأولى.
الفقرة الثانية.
انسخ محتويات هذا المثال واحفظه في المجلد c:\www\ كمثال 41.html. بعد ذلك، قم بتشغيل المتصفح وافتح الملف من خلال عنصر القائمة ملف > فتح ملف (Ctrl+O). في مربع حوار تحديد المستند، حدد الملف example41.html. سيتم فتح صفحة الويب الموضحة في الشكل 1 في المتصفح. 4.1.
أرز. 4.1. نتيجة تشغيل المثال
عنصريهدف إلى الإشارة إلى نوع المستند الحالي - DTD (تعريف نوع المستند، وصف نوع المستند). يعد ذلك ضروريًا حتى يفهم المتصفح كيفية تفسير صفحة الويب الحالية، لأن HTML موجود في عدة إصدارات، بالإضافة إلى وجود XHTML (لغة ترميز النص التشعبي القابلة للتوسيع)، والتي تشبه HTML ولكنها تختلف عنها في بناء الجملة. حتى لا يرتبك المتصفح ويفهم المعيار الذي سيتم بموجبه عرض صفحة الويب، من الضروري تعيينه في السطر الأول من التعليمات البرمجية .
هناك عدة أنواعفهي تختلف وفقًا لإصدار HTML الذي تستهدفه. في الجدول 4.1. يتم إعطاء الأنواع الرئيسية من الوثائق مع أوصافها.
نوع الوثيقة | وصف |
---|---|
أتش تي أم أل 4.01 | |
بناء جملة HTML صارم. | |
بناء جملة HTML الانتقالي. | |
يستخدم مستند HTML الإطارات. | |
أتش تي أم أل 5 | |
يحتوي هذا الإصدار من HTML على نوع مستند واحد فقط. | |
أتش تي أم أل 1.0 | |
بناء جملة XHTML صارم. | |
بناء جملة XHTML الانتقالي. | |
الوثيقة مكتوبة بلغة XHTML وتحتوي على إطارات. | |
أتش تي أم أل 1.1 | |
يتوقع مطورو XHTML 1.1 أن يحل محل HTML تدريجيًا. كما ترون، هذا التعريف لا ينقسم إلى أنواع، لأن بناء الجملة هو نفسه ويخضع لقواعد واضحة. |
الفرق بين وصف المستند الصارم والانتقالي هو طريقة مختلفة لكتابة رمز المستند. يتطلب HTML الصارم التزامًا صارمًا بمواصفات HTML ولا يتسامح مع الأخطاء. يعتبر HTML الانتقالي أكثر استرخاءً فيما يتعلق ببعض عيوب التعليمات البرمجية، لذلك يفضل استخدام هذا النوع في حالات معينة.
على سبيل المثال، في HTML وXHTML الصارم، يلزم وجود العلامة
في المستقبل سوف نستخدم بشكل رئيسي صارم، ما لم ينص على خلاف ذلك. سيسمح لنا ذلك بتجنب الأخطاء الشائعة ويعلمنا كتابة التعليمات البرمجية الصحيحة من الناحية النحوية.
يمكنك غالبًا العثور على تعليمات برمجية بتنسيق HTML دون استخدام أي منها، ستظل صفحة الويب معروضة في هذه الحالة. ومع ذلك، قد يحدث أن يظهر نفس المستند بشكل مختلف في المتصفح عند استخدامهوبدونها. بالإضافة إلى ذلك، يمكن للمتصفحات عرض مثل هذه المستندات بطريقتها الخاصة، ونتيجة لذلك "تنهار" الصفحة، أي. سيتم عرضه بشكل مختلف تمامًا عما يطلبه المطور. لتجنب مثل هذه المواقف، أضف دائمًاإلى بداية الوثيقة.
بطاقة شعار يحدد بداية ملف HTML، ويتم تخزين الرأس بداخله (
) ونص الوثيقة (عنوان المستند، ويسمى أيضًا الكتلة
، يمكن أن يحتوي على نص وعلامات، لكن محتوى هذا القسم لا يظهر مباشرة على الصفحة، إلا في الحاوية
بطاقة شعار عالمية وتضيف فئة كاملة من القدرات، على وجه الخصوص، بمساعدة العلامات الوصفية، كما تسمى هذه العلامة بشكل عام، يمكنك تغيير ترميز الصفحة وإضافة كلمات رئيسية ووصف المستند وغير ذلك الكثير. حتى يفهم المتصفح أنه يتعامل مع ترميز UTF-8 (تنسيق تحويل Unicode)، ويتم إضافة هذا السطر.
بطاقة شعار
أرز. 4.2. عرض الرأس في المتصفح
بطاقة شعار
يجب عليك إضافة علامة إغلاقللإشارة إلى اكتمال كتلة عنوان المستند.
جسم الوثيقة
يقدم HTML ستة عناوين نصية بمستويات مختلفة تشير إلى الأهمية النسبية للقسم الذي يلي العنوان. نعم العلامة
يمكن إخفاء بعض النصوص من الظهور في المتصفح عن طريق جعلها تعليقًا. على الرغم من أن هذا النص لن يرى المستخدم، إلا أنه سيظل يتم نقله في المستند، لذلك إذا نظرت إلى الكود المصدري، يمكنك اكتشاف الملاحظات المخفية.
لفترة طويلة، كان خيار "إظهار مصدر الصفحة" عديم الفائدة وغير مثير للاهتمام بالنسبة لي. حتى الآن، لم يتحول تعلم HTML على Codecademy وتصميم مواقع الويب الخاصة بي إلى هوايتي الجديدة. وهنا نشأ السؤال: أين يمكن العثور على حالات حقيقية واقتراض حلول مثيرة للاهتمام لـ "الحصالة" الخاصة بك؟ وكانت الإجابة بسيطة بشكل غير متوقع، مثل كل الأشياء العبقرية: انظر إلى الكود المصدري للصفحة في Google Chrome! أشارككم اكتشافاتي المتواضعة.
إذا كنت، مثلي، تتخذ خطواتك الأولى في برمجة HTML، فسيكون من الجيد معرفة الكود المصدري للصفحة.
كود المصدر، المعروف أيضًا باسم كود صفحة HTML، هو نص مكتوب بلغة توصيف النص التشعبي (HTML). ويتضمن محتوى الصفحة الفعلي (النص والجداول) والعلامات. يعمل الأخير بمثابة تعليمات للمتصفح: كيفية عرض المحتوى، ونوع التنسيق المطلوب استخدامه، ومكان إدراج رابط تشعبي أو ملف وسائط. حسنًا، بالنسبة لنا، كمبرمجين مبتدئين، فإن الكود المصدري هو أفضل مكان للتدريب: نجد موقعًا مثيرًا للاهتمام ونتجسس عليه، ونحفظه، ونستخدم الأجزاء الناجحة. كيف؟
ابحث عن الصفحة التي تعجبك. على سبيل المثال، كنت مهتمًا بتصميم قائمة الموقع. هناك ثلاث طرق لفتح الكود المصدري في متصفح Google Chrome:
لقد تعاملنا مع مهمة عرض كود HTML الخاص بالصفحة في المتصفح. دعنا ننتقل إلى المرحلة الأكثر إثارة للاهتمام.
لمعرفة كيفية إنشاء مواقع الويب، لا يكفي قراءة كود HTML الخاص بشخص آخر. أنت بحاجة للعب بها والتجربة وإجراء التغييرات والتحقق من النتيجة. يمكنك أيضًا البدء بتجميع بعض العينات الناجحة. كيفية تحرير وحفظ كود المصدر؟
الخيار 1. "يدويًا"
بعد أن فتحنا الكود المصدري للصفحة، اتصل بقائمة السياق وحدد خيار "حفظ باسم" واحفظ الملف على محرك الأقراص الثابتة لديك. نقوم بتحرير الملف في برنامج Notepad أو Notepad، ونحفظ التغييرات ونفتحه من خلال المتصفح. سوف تنعكس نتائج تغييراتنا (الناجحة وغير الناجحة) في نافذة المتصفح.
الخيار 2. للمحترفين
عندما "تلعب" بالكود المصدري كل يوم، تصبح عملية "الحفظ - الفتح - التغيير - الحفظ - التحقق" متعبة. لقد وجدت بنفسي حلاً في شكل تثبيت مكون إضافي لـ Google Chrome - Firebug Lite. يسمح لك بتحرير وحفظ كود المصدر دون مغادرة نافذة المتصفح.
تعد خدمة SendPulse أداة تسويقية لإنشاء قاعدة اشتراكات وتحويل الزوار العاديين إلى موقع الويب الخاص بك إلى زوار عاديين. يجمع SendPulse في منصة واحدة أهم الوظائف لجذب العملاء والاحتفاظ بهم:
● النشرات الإخبارية عبر البريد الإلكتروني،
● دفع الويب،
● رسائل الرسائل القصيرة،
● سمتب،
● الرسائل الإخبارية في فايبر،
● إرسال الرسائل إلى الفيسبوك رسول.
من خلال البحث في عدد لا يحصى من المواقع على الإنترنت، يمكنك العثور على المواقع التي نحبها حقًا. هناك عدد من الأسئلة تنشأ على الفور. هل تم إنشاء الموقع باستخدام كود محلي الصنع أو نوع من نظام إدارة المحتوى (CMS)؟ ما هي أنماط CSS الموجودة به؟ ما هي العلامات الوصفية الخاصة به؟ وما إلى ذلك وهلم جرا.
هناك العديد من الأدوات التي يمكن استخدامها لاستخراج معلومات حول رمز صفحة موقع الويب. ولكن لدينا دائمًا زر الفأرة الأيمن في متناول اليد. وهذا ما سنستخدمه، باستخدام موقعي كمثال.
لعرض الكود المصدري لصفحة الموقع، تحتاج إلى تحريك مؤشر الماوس فوق أي منطقة من صفحة الويب (باستثناء الصور والروابط). بعد ذلك قم بالضغط على زر الفأرة الأيمن. ستفتح أمامنا نافذة تحتوي على عدة خيارات (قد تختلف قليلاً في المتصفحات المختلفة). في متصفح Google Chrome، على سبيل المثال، هذه هي الأوامر:
نحن بحاجة للنقر على عرض رمز الصفحةوسيفتح أمامنا كود html الخاص بصفحة الموقع.
لذا فإن رمز صفحة Html عبارة عن قائمة مرقمة من الأسطر، يحمل كل منها معلومات حول كيفية إنشاء هذا الموقع. لكي تتعلم بسرعة كيفية فهم هذا العدد الهائل من العلامات والرموز الخاصة، عليك التمييز بين الأقسام المختلفة من الكود.
على سبيل المثال، تحتوي أسطر التعليمات البرمجية داخل علامة الرأس على معلومات لمحركات البحث ومشرفي المواقع. لا يتم عرضها على الموقع. هنا يمكنك معرفة الكلمات الرئيسية التي يتم الترويج لها لهذه الصفحة، وكيفية كتابة عنوانها ووصفها. هنا أيضًا يمكنك العثور على رابط سنتعرف من خلاله على عائلة خطوط Google المستخدمة في الموقع.
إذا تم إنشاء الموقع على CMS WordPress أو Joomla، فسيكون هذا مرئيًا هنا أيضًا. على سبيل المثال، تعرض هذه المنطقة معلومات حول قالب WordPress أو قالب موقع Joomla. يمكنك رؤيته من خلال قراءة محتويات الروابط المميزة باللون الأزرق. يظهر رابط واحد قالب موقع ويب.
على سبيل المثال:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
سنرى أنماط خطوط CSS للصفحة. في هذه الحالة، يتم استخدام الخط. يمكن رؤية ذلك هنا - عائلة الخطوط: "Source Sans Pro".
تم تحسين هذا الموقع باستخدام البرنامج المساعد Yoast SEO. يمكن ملاحظة ذلك من قسم التعليمات البرمجية الذي تم التعليق عليه:
تم تحسين هذا الموقع باستخدام الإصدار 3.4.2 من Yoast SEO الإضافي - https://yoast.com/wordpress/plugins/seo/
يتم عرض جميع المعلومات الموجودة داخل علامة الجسم بواسطة المتصفح على شاشة المراقبة. نرى هنا رمز HTML للصفحة، وفي الأسفل يوجد رمز البرنامج النصي Yandex Metrics. وهي محاطة بعلامة تعليق تحتوي على النص:
/ عداد Yandex.Metrika
بعد إجراء تحليل سطحي إلى حد ما لرمز الصفحة الرئيسية للموقع، يمكننا استخلاص استنتاج حول الأدوات التي تم إنشاء هذه الصفحة بها. رأينا فيه:
أصبح الآن مبدأ تحليل كود HTML لصفحة موقع الويب واضحًا تمامًا. ليس من الضروري على الإطلاق إبقاء الصفحة التي تبحث عنها مفتوحة في المتصفح. يمكنك حفظ رمز الصفحة على جهاز الكمبيوتر الخاص بك باستخدام مجموعات المفاتيح ctrl+a، ctrl+c، ctrl+v. الصقه في أي محرر نصوص (يفضل Notepad++) واحفظه بامتداد html. وبالتالي، يمكنك في أي وقت دراستها بشكل أعمق والعثور على المزيد من المعلومات المفيدة لنفسك.