كيفية معرفة رمز الصفحة. كيفية عرض كود مصدر الصفحة وكود العنصر

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

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

بالنسبة للمستخدمين البعيدين عن فن مشرفي المواقع، أوصي باستخدام متصفح لهذه الأغراض. وبما أنني أستخدم Chrome، فسوف أقدم تعليمات مع لقطات شاشة لهذا المتصفح تحديدًا. وقياسًا على ذلك، يمكنك العمل مع متصفحات Opera وYandex.Browser وMozilla Firefox ومتصفحات أخرى؛

التعليمات 1: كيفية عرض كود HTML الكامل لموقع ما في المتصفح

افتح صفحة الويب المطلوبة لموقعك. انقر بزر الماوس الأيمن على العنصر المطلوب، وستظهر قائمة منسدلة سياقية للمتصفح تحتوي على الأوامر المتاحة:

الشكل 1. عرض كود HTML بالكامل لصفحة الويب في متصفح Chrome

مهم:قد تختلف الأوامر الموجودة في القائمة المنسدلة، على سبيل المثال، بالنسبة للعناصر النشطة (الروابط والصور ومقاطع الفيديو) والعناصر غير النشطة (النص والخلفية وdivs):

الشكل 2. القائمة المنسدلة لمتصفح Chrome

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

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

الشكل 3. جزء من التعليمات البرمجية لهذا الموقع

هذه الأداة مفيدة جدًا للعثور على العناصر التي تبحث عنها وتحريرها.

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

للوصول بشكل أسرع، يمكنك استخدام طرق أخرى لاستدعاء هذه الأداة

  1. في الشكل 1 نرى أيضًا أن هذا الأمر متاح عبر اختصار لوحة المفاتيح + ;
  2. الصق view-source:site في شريط عنوان المتصفح بدلاً من المجال الخاص بي، وأدخل عنوانك؛

كلتا الطريقتين عالميتان ويجب أن تعملا في جميع المتصفحات.

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

مجموعة مفاتيح التشغيل السريع +افتح نافذة البحث، في متصفح Chrome يظهر في أعلى اليمين:

الشكل 3. البحث عن طريق رمز الموقع

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

الشكل 4. البحث عن طريق كود موقع HTML

التعليمات 2: كيفية عرض وتحرير كود HTML وCSS لموقع ما في متصفح Google Chrome

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


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

من خلال البحث في عدد لا يحصى من المواقع على الإنترنت، يمكنك العثور على المواقع التي نحبها حقًا. هناك عدد من الأسئلة تنشأ على الفور. هل تم إنشاء الموقع باستخدام كود محلي الصنع أو نوع من نظام إدارة المحتوى (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. وبالتالي، يمكنك في أي وقت دراستها بشكل أعمق والعثور على المزيد من المعلومات المفيدة لنفسك.

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

سؤال آخر هو ما إذا كان الشخص الذي لا يشارك في البرمجة سيفهم أيًا من الرموز التي يتكون منها الكود. ولكن من الأمثلة التي سيتم تقديمها أدناه، سيتمكن أي مستخدم Google Chrome من عرض العناصر الفردية للمواقع.

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

لكي تتمكن من عرض رمز الصفحة في كروم، عليك الذهاب إلى الموقع الذي تهتم به وتنفيذ الخطوات التالية:


ويختلف هذان العنصران في وظائفهما ومعلوماتهما بالنسبة للمستخدم أو المبرمج أو المتسلل.

ما الفرق بين رمز الصفحة وأمر "عرض الرمز" فقط؟

تحليل كل من هذه الوظائف، يمكنك كتابة مقال منفصل. بالنسبة للمبرمجين، يعد هذا الاختلاف مهمًا ويفهمون في أي الحالات يكون من الضروري استخدام "عرض الرمز" وفي أي الحالات يكون من الضروري استخدام "عرض رمز الصفحة" في متصفح Google Chrome.

ولكن للتوضيح للمستخدم العادي، يمكن تقسيم هذه الوظائف إلى الأغراض التالية:

  1. يعد "عرض رمز الصفحة" ضروريًا فقط لرؤية المجموعة الرئيسية للصفحة. في الأساس، هذه هي بنية الموقع (بدون نماذج إضافية على شكل ملفات CSS وإضافات أخرى تبقى في مجلد منشئ الموقع). هذه البنية ليست مناسبة لإنشاء صفحتك الخاصة عن طريق "النسخ واللصق"، ولكنها ستسمح لك بمعرفة ما فعله المبرمج بالضبط وبأي تسلسل للتأكد من أن الموقع في متصفح Google Chrome به مثل هذا التصميم الخارجي.
  2. يعرض "عرض الرمز" بنية تفصيلية، مع تسليط الضوء على جميع المناطق المتأثرة في الصفحة. إذا قمت بالتمرير فوق رمز قائمة محدد، فسيتم تمييز العنصر الموجود على الموقع الذي ينتمي إليه.
  3. يتم فتح عرض رمز الصفحة في متصفح منفصل دون القدرة على تعديله. أي أنها مناسبة فقط لنسخ وقراءة كود الموقع. ولكن هذه ليست وظيفة أقل فائدة.
  4. "عرض الكود" قابل للتغيير ويمكنك تعديل أي عنصر بالطريقة التي تناسبك. بالطبع، كل هذه التغييرات "ستعيش" حتى يتم تحديث الصفحة، ولكن في بعض الأحيان يكون من الممتع مراجعة هذه الإعدادات وفهم سبب الحاجة إلى هذه القيمة أو تلك، وماذا سيحدث إذا قمت بتغييرها. لا ينبغي أن تفترض أنك ستؤذي نفسك أو الموقع من خلال مثل هذه الإجراءات - فهذه التغييرات تؤثر فقط على رمز Google Chrome الخاص بك ولا تتصل بالإنترنت.

نحن نفكر في مسألة كيفية عرض رمز العنصر

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

وظيفة رمز العنصر واسعة جدًا، لذلك نأخذ إحدى الكلمات الموجودة على موقع متصفح Google Chrome. أردنا أن نأخذ في الاعتبار الكلمات الرئيسية (التي سيتم كتابتها في الكود باسم "الكلمات الرئيسية") التي تم استخدامها لموقعنا. للقيام بذلك، نقوم بتنفيذ الخوارزمية التالية:

طرق أخرى لاستخدام هذه الميزة في متصفح Google Chrome

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

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

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

العنصر "عرض رمز العنصر" لا يعمل

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

  • ملف تعريف المستخدم تالف؛
  • وجود برامج ضارة على جهاز الكمبيوتر؛
  • الحظر بامتداد معين لزيادة الأداء (حتى هذا يمكن أن يحدث).

إصلاح ملف تعريف المستخدم التالف

لإنشاء ملف تعريف جديد، يجب عليك حذف الملف القديم من جهاز الكمبيوتر الخاص بك. وللقيام بذلك نقوم بما يلي:

  1. أغلق Google Chrome وقم بتشغيل متصفح Windows Explorer المدمج.
  2. أدخل الأمر التالي في شريط العناوين: %LOCALAPPDATA%\Google\Chrome\User Data\.
  3. عندما يفتح الدليل، ابحث عن المجلد "الافتراضي" وأضف "النسخ الاحتياطي" إلى اسمه بحيث يبدو كما يلي: "النسخ الاحتياطي الافتراضي".
  4. الآن، بعد إعادة تشغيل متصفح Chrome، سيتم إنشاء ملف تعريف جديد.

نقوم بإزالة البرامج الضارة أو بقاياها

إذا كان الملف الشخصي الجديد لا يتيح لنا الوصول إلى رمز عنصر الصفحة وما زلنا نرى الخطأ، فيجب علينا القيام بما يلي:

  1. افتح سطر أوامر Windows ("Run") وأدخل الأمر "cmd" هناك.
  2. أدخل الأمر التالي في السطر: RD /S /Q "%WinDir%\System32\GroupPolicyUsers".
  3. بعد تأكيد الإجراء، أدخل هذا: RD /S /Q "%WinDir%\System32\GroupPolicy".
  4. الآن "gpupdate /force" (بدون علامتي الاقتباس).

إذا تم كل شيء بشكل صحيح، فبعد إعادة تشغيل الكمبيوتر، سيفتح Google Chrome رمز العناصر وسيعمل المتصفح بشكل طبيعي.

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

النشرات الإخبارية عبر البريد الإلكتروني

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


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


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


الرسائل البريدية التلقائية. يستخدم مديرو المحتوى البريد التلقائي بشكل نشط. وهذا يساعد على أتمتة عملية العمل مع العملاء. يمكنك إنشاء رسالة إخبارية تلقائية بعدة طرق:
سلسلة حروف متسلسلة. هذا هو الخيار الأبسط عندما تتم كتابة عدة رسائل، بغض النظر عن الظروف، والتي سيتم إرسالها إلى المستلمين بترتيب معين. قد تكون هناك خيارات هنا - سلسلة من الرسائل(سلسلة رسائل بسيطة)، تاريخ خاص(يتم توقيت الرسائل لتواريخ محددة)، حرف الزناد– يتم إرسال الرسالة بناءً على تصرفات المشترك (فتح رسالة، وما إلى ذلك).
أتمتة360- إرسال بريدي بفلاتر وشروط معينة، مع مراعاة التحويلات.
سلاسل جاهزةوفقا للنموذج. يمكنك إنشاء سلسلة من الرسائل باستخدام قالب معين أو تعديل القالب وتعديله حسب احتياجاتك.
اختبار أ/بسيساعدك على تجربة خيارات مختلفة لإرسال سلسلة من الرسائل وتحديد الخيار الأفضل بناءً على عمليات الفتح أو النقرات.

إرسال إشعارات الدفع

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


جديد من ارسلنبض- يمكنك الآن تحقيق الدخل من موقعك باستخدام إشعارات الدفع عن طريق تضمين الإعلانات فيها. عند الوصول إلى 10 دولارات، يتم الدفع كل يوم اثنين إلى أحد أنظمة الدفع - Visa/mastercard، PayPal أو Webmoney.
رسائل الدفع على الخدمة مجانية تمامًا. يتم الدفع فقط مقابل White Label - المراسلات البريدية دون ذكر خدمة SendPulse، ولكن إذا كان شعار الخدمة لا يزعجك، فيمكنك استخدام إشعارات الدفع مجانًا دون قيود.

SMTP

تعمل وظيفة SMTP على حماية رسائلك البريدية من القائمة السوداء باستخدام عناوين IP المدرجة في القائمة البيضاء. تعمل تقنيات التوقيع المشفرة DKIM وSPF، المستخدمة في مراسلات SendPulse، على زيادة الثقة في الرسائل المرسلة، مما يجعل احتمالية وصول رسائلك إلى البريد العشوائي أو القائمة السوداء أقل.

روبوتات فيسبوك ماسنجر

Facebook chatbot في مرحلة الاختبار التجريبي. يمكنك ربطه بصفحتك وإرسال رسائل للمشتركين.

إرسال الرسائل القصيرة

من خلال خدمة SendPulse يسهل إرسال الرسائل باستخدام قاعدة بيانات لأرقام الهواتف. أولاً، تحتاج إلى إنشاء دفتر عناوين يحتوي على قائمة بأرقام الهواتف. للقيام بذلك، حدد قسم "دفتر العناوين"، وقم بإنشاء دفتر عناوين جديد، وقم بتحميل أرقام الهواتف. يمكنك الآن إنشاء رسالة إخبارية عبر الرسائل النصية القصيرة (SMS) استنادًا إلى قاعدة البيانات هذه. يختلف سعر الرسائل النصية القصيرة اعتمادًا على مشغلي الاتصالات التابعين للمستلم ويبلغ المتوسط ​​من 1.26 روبل إلى 2.55 روبل لكل رسالة نصية قصيرة مرسلة.

إنضم لبرنامج

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

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

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

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

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

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

كيفية البحث عن كود html وcss للموقع وتغييره

إذا كنت لا تحب المقالات الطويلة، فهذا لك في نهاية المقالفيديو تعليمي يوضح كيف يمكنك رؤية كود html الخاص بموقع الويب باستخدام برنامج Notepad++ وإجراء تغييرات على تصميم أي قالب باستخدام مثال لكيفية تغيير لون الخط. يوجد في الفيديو تفاصيل دقيقة أخرى للتعامل مع المدونة. وبالنسبة لأولئك الذين هم أقرب وأكثر قابلية للفهم من النص، يوجد أدناه تحليل مفصل للموضوع مع لقطات الشاشة.
httpv://youtu.be/uIlVvwCt2ho

المصطلحات والمفاهيم

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

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

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

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

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

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

هل يجب أن تكون خبيراً في كل شيء؟

غالبًا ما تكون هناك مناقشات على مدونات تحسين محركات البحث (SEO) حول ما إذا كان المبتدئ يحتاج إلى فهم عميق لـ HTML، أو حتى الأفضل، تعلم كيفية كتابة مواقع الويب بنفسه بحيث يكون كل شيء فريدًا.. حسنًا، لا أعرف - لكل واحد خاصته، وهنا ما هو أقرب لمن هو أقرب. أنا مهتم أكثر قليلاً، لذا فأنا الآن أتعلم المزيد من فلاديمير. في نوفمبر من هذا العام، افتتح فلاديمير مدونته الخاصة. تم إنشاء مدونته باستخدام أبسط قالب مجاني، وقد قام بتعديله بشكل طفيف فقط ليناسب نفسه.

بعد 10 أيام من وجودها، احتلت المدونة المرتبة 104 في تصنيف جميع مواقع Runet مع حركة مرور تبلغ حوالي 1.5 ألف شخص يوميًا. في 10 أيام. إذن ما هو الاتفاق؟ يتمتع فلاديمير بخبرة جيدة في لغة HTML ويمكنه أن يطلب ويشتري قالبًا فريدًا لنفسه. لذلك يجب أن تفهم ذلك السر لا يكمن في القوالب، بل في فائدة المعلومات.

أين يتم إخفاء كود html؟

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

  1. فتح الموقع في متصفح جوجل كروم (إذا لم تستخدمه بعد، فقم بتثبيته - فهو مصمم جيدًا للعمل مع مواقع الويب، ويحتوي على الكثير من الأدوات المضمنة).
  2. نقوم بتحريك مؤشر الماوس فوق العنصر الذي سنقوم بتغييره . في هذه الحالة - اسم المدونة. انقر بزر الماوس الأيمن عليه وفي النافذة التي تظهر، حدد عرض رمز العنصر.

هام: لا تخلط بين هذا وبين عرض رمز الصفحة! لا نحتاج إلى الصفحة بأكملها الآن، فقط عنصر منفصل.

انقر عليها - تظهر نافذة عرض الكود أسفل المتصفح:

يتم تمييز سطر التعليمات البرمجية الذي نقوم بتغييره باللون الأحمر.

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

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

المبدأ العام لمكان البحث عن الأشياء:

اسم الخط - في سطر FONT FAMILY

حجم الخط - في سطر حجم الخط

لون الخط - في سطر اللون

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

انتباه:

الخط الذي سنقوم بنسخه مظلل باللون الأحمر في الشكل،

بحيث يمكنك العثور عليه لاحقًا في ورقة الأنماط.

4. انسخ السطر. وبما أننا في هذا المثال نريد تغيير لون اسم الموقع، فقد قمت بنسخ الخط الموضح بالمستطيل الأحمر في الصورة الثانية. في القالب الخاص بي هو المسؤول عن تغيير لون عنوان الموقع:

#header h1 a، #header h1 a: تمت الزيارة (

ابحث عن السطر المطلوب في ملف "ورقة الأنماط (style.css)". وقد تم ذلك بالفعل في لوحة الإدارة. أطلب بشدة أنه على الرغم من عدم وجود ثقة وفهم كامل، يجب إجراء جميع التجارب على نطاق فرعي للاختبار من أجل استبعاد .

لذلك، انتقل إلى لوحة الإدارة: CONSOLE - APPEARANCE - EDITOR. في الشريط الجانبي الأيمن نجد الملف STYLE TABLE (STYLE.CSS)، افتحه.

افتح الآن سطر البحث باستخدام المفاتيح CTRL + F: ستظهر نافذة سطر فارغة في النافذة العلوية. نلصق فيه السطر الذي نسخناه في الخطوة 4.

وسترى كيف سيتم تمييز هذا الخط في ورقة الأنماط (باللون البرتقالي في الصورة):

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

يمكنك تحديد لون في أي خدمة لوحة ألوان ويب: اكتب "لوحة ألوان الويب" في محرك البحث وحدد اللون الذي تريده. نختار لونًا وننسخ قيمته الرقمية ونستبدله بعناية باللون القديم. وبعد ذلك نضغط على تحديث الملف ونذهب لنرى ما حدث.

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

يستغرق الوصف وقتًا طويلاً، ولكن في الممارسة العملية يتم كل شيء بسرعة، خاصة عندما تظهر المهارة الأولية.

بمزيد من التفاصيل، كيفية تغيير عناصر معينة:

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

أقترح مشاهدة فيديو Artem Abramovich حول كيفية البحث والعثور على أي كلمة أو عنصر في أي موضوع/قالب، لأي محرك (Wordpress، Joomla، إلخ) واستبدالها بما تحتاجه:

يرجى مشاركتها إذا أعجبتك:

قد تكون مهتمًا أيضًا بمعرفة: