كيفية عرض كود HTML في كروم

روابط الجهاز

• ذكري المظهر
• ايفون
• Chromebook
• ماك
• شبابيك
• الجهاز مفقود؟

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

في هذا البرنامج التعليمي ، سنوضح لك كيفية عرض رمز HTML لصفحة ويب في Chrome.

عرض كود HTML في كروم

عند الكتابة بلغة HTML ، فإن الكود المصدري هو سلسلة من العلامات والسمات المستخدمة لتحديد هيكل ومحتوى صفحة الويب.

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

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

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

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

كيفية عرض كود HTML لصفحة ويب في Chrome على جهاز كمبيوتر يعمل بنظام Windows

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

يمكنك عرض كود HTML بطريقتين.

استخدام عرض مصدر الصفحة

هذه الطريقة مباشرة:

1. افتح Chrome وانتقل إلى الصفحة حيث تريد عرض كود مصدر HTML.
   
2. انقر بزر الماوس الأيمن على الصفحة وحدد عرض مصدر الصفحة ، أو اضغط على Ctrl + U على لوحة المفاتيح لفتح شفرة المصدر في علامة تبويب جديدة.
   

سيظهر رمز المصدر في علامة التبويب الجديدة ، ويمكنك التمرير خلالها لعرض ترميز HTML لتلك الصفحة.

باستخدام أدوات المطور

لفحص شفرة المصدر لصفحة الويب باستخدام أدوات المطور في Google Chrome ، اتبع الخطوات أدناه.

1. افتح Google Chrome وانتقل إلى صفحة الويب التي تريد فحصها.
   
2. اضغط على Ctrl + Shift + I على لوحة المفاتيح. سيتم فتح جزء أدوات المطور في قفص الاتهام بجانب صفحة الويب التي تشاهدها.
   
3. انقر فوق علامة التبويب "العناصر" في الجزء العلوي من الجزء. سيعرض هذا كود مصدر HTML لصفحة الويب.
   
4. يمكنك الآن مراجعة شفرة المصدر للصفحة. لطي عنصر ما ، انقر فوق المثلث الموجود بجوار اسم العلامة الخاصة به. لعرض مزيد من المعلومات حول أحد المكونات ، انقر بزر الماوس الأيمن فوقه وحدد "فحص".
   

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

كيفية عرض كود HTML لصفحة ويب في Chrome على جهاز Mac

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

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

بدلاً من ذلك ، يمكنك استخدام Chrome Developer Tools لعرض شفرة المصدر.

1. افتح Google Chrome وانتقل إلى صفحة الويب التي تريد فحصها.
   
2. انقر فوق رمز القائمة (ثلاث نقاط) في الزاوية العلوية اليمنى من المتصفح وحدد المزيد من الأدوات وأدوات المطور من القائمة المنسدلة.
   
3. سيتم فتح لوحة Developer Tools في الجزء السفلي من الشاشة. حدد "العناصر" في الجزء العلوي من الجزء.
   
4. سترى الآن رمز HTML للصفحة الحالية معروضًا في لوحة Elements. يمكنك استخدام الخيارات المختلفة في اللوحة لفحص الكود وتصحيحه حسب الحاجة.
   

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

كيفية عرض كود HTML لصفحة الويب في Chrome على تطبيق iPhone

إذا كنت تستخدم جهاز iPhone ، فيمكنك عرض كود HTML لأي صفحة في Chrome بطريقتين:

التغيير والتبديل في عنوان URL

يمكنك بسهولة عرض كود HTML لأي صفحة عن طريق إجراء تعديل بسيط على عنوان URL:

1. افتح Chrome وانتقل إلى صفحة الويب التي تريد عرض رمز HTML الخاص بها.
   
2. انقر مرة واحدة في شريط العناوين لبدء وضع التحرير.
   
3. حرك المؤشر إلى مقدمة عنوان URL.
   
4. اكتب "مصدر العرض" ثم اضغط على زر "انتقال". سيتم عرض رمز HTML لصفحة الويب في Chrome.
   

باستخدام أدوات المطور

تتوفر أيضًا أدوات مطوري Chrome على نظام التشغيل iOS ، ولكن يلزم مجموعة مختلفة من الخطوات لتشغيلها مقارنة بأجهزة الكمبيوتر.

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

كيفية عرض كود HTML لصفحة ويب في Chrome على تطبيق Android

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

1. افتح Chrome على جهاز Android.
   
2. اكتب “view-source:” متبوعًا بعنوان URL للصفحة التي تريدها حيث تريد عرض شفرة المصدر. على سبيل المثال ، إذا أردت عرض شفرة المصدر لموقع www.google.com ، فاكتب "view-source: www.google.com" في شريط عناوين Chrome.
   

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

كيفية عرض كود HTML لصفحة ويب في Chrome على جهاز iPad

يُسهل Chrome على تطبيق iPad عرض كود HTML لأي صفحة ويب. ما عليك سوى اتباع هذه الخطوات:

1. افتح Chrome واكتب "view-source:" متبوعًا بعنوان URL للصفحة التي تريد عرضها. على سبيل المثال ، إذا كنت ترغب في عرض شفرة المصدر لموقع www.alphr.com ، فأنت بحاجة إلى كتابة "view-source: www.alphr.com" في شريط عنوان Chrome.
   
2. اضغط على زر "Go".
   

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

كود المصدر هو الغراء الذي يحمل الصفحات معًا

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

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

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

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

دعنا نعلم فى قسم التعليقات.