افتح رمز الصفحة الرئيسية. عرض تأثير قواعد CSS بشكل تفاعلي على عرض علامات html
يوم جيد أيها القراء الأعزاء لمدونتي. في بعض الأحيان تجد بعض الميزات الجميلة على موقع ويب وتبدأ في التساؤل عن كيفية تحقيق المنشئ لهذا التأثير المثير للاهتمام.
اتضح أن الجواب بسيط للغاية. وإذا كانت لديك بعض المهارات، فيمكنك جمع الكثير من هذه الميزات وإنشاء موقع الويب الفريد الخاص بك في وقت قصير.
اليوم سنتحدث عن كيفية فتح كود الصفحة، عنصر محددوتعلم كيفية استخدام هذه المهارة لصالحك.
المعرفة الأساسية بالكودموقعي مخصص للمبتدئين وأود أولاً أن أتحدث بإيجاز عن المواقع والأكواد بشكل عام.
لرسم صورة، ثم قصها إلى أجزاء صغيرة، اكتب التعليمات البرمجية بحيث يقوم المتصفح بإعادة تجميع جميع العناصر في كل واحد. هل يبدو كل شيء معقدًا جدًا؟ لا على الإطلاق، ولا داعي للحزن على ذلك.
هذه هي الطريقة التي يتم بها إنشاء مواقع الويب عالية الجودة. إن شئت فادخل في هذا الأمر وادرسه، وإن كنت لا تريد فلن يجبرك أحد.
سأقول شيئًا واحدًا فقط... لا يوجد شيء أكثر متعة من رؤية كيف تتحول الكلمات غير المفهومة التي كتبتها إلى كل واحد وتنبض بالحياة: تعمل الروابط، وتتحرك الأزرار، وتتحرك الصور، ويزحف النص. أعتقد أنني أعرف كيف شعر فيكتور فرانكشتاين.
عندما تبدأ في فهم اللغة السرية وترى أن كل شيء في الواقع أبسط بكثير مما بدا في البداية، لا يسعك إلا أن تؤمن بها القوة الخاصةوقدرات الدماغ. هذا هو بارد جدا.
كيف يتم إنشاء المواقع؟ من الناحية المثالية، أولا. انه مجرد رسم صورة. على سبيل المثال، كما هو مبين في الصورة أدناه. في الوقت الحالي هي مجرد صورة، صورة فوتوغرافية. لا توجد روابط تعمل، عند النقر فوقها، لا تذهب إلى أي مكان، ولا يتم إجراء أي بحث.
وفقا لهذا الرسم. انظر إلى لقطة الشاشة أدناه. قد تعتقد أن هذا أمر مثير للسخرية وجدا مجموعة معقدةالشخصيات. في الواقع، كل شيء ليس معقدا للغاية، هناك خوارزمية معينة.
لا يوجد سوى حوالي 150 علامة وكل واحدة منها مسؤولة عن إجراء محدد: الرابط، والواصلة، والخط العريض، واللون، والعنوان، وما إلى ذلك. إن فهمها ليس بالأمر الصعب إذا كانت لديك الرغبة ولا تمانع في الوقت.
بفضل معرفة هذه السمات، يمكنك حل أي مشكلة تقريبًا. لكن كل مطور يجد طرقه الخاصة لتحقيق الهدف.
يرى المبدعون ذوو الخبرة على الفور كيفية تحقيق النتائج، بينما يتعين على الآخرين التفكير والبحث عن الإجابة في المقالات أو في الكود المصدري للمنافسين. إنهم ببساطة يأخذون الجزء الضروري من موقع جهة خارجية ويقومون بتحريره بأنفسهم. هذا يقلل بشكل كبير من عملية العمل.
وبعد ذلك بقليل، سأعرض لك مثالا محددا.
عرض الرمزلذا، اسمحوا لي أولاً أن أوضح لك كيفية التصرف إذا كنت بحاجة إلى اكتشاف لغة HTML الخاصة بشخص آخر. ثم سننظر في جميع الأسئلة الأخرى بمزيد من التفصيل.
أفضل طريقةالطريقة التي سأصفها أولاً معقدة بعض الشيء بالنسبة للمبتدئين، ولكن كمقدمة، اقرأها. افتح الصفحة وانقر على زر الفأرة الأيمن. حدد "حفظ باسم ..."
حفظ صفحة الويب بأكملها. كما ترون في لقطة الشاشة، لقد قمت بالفعل بتنزيل كل شيء مسبقًا. هنا لدينا مجلدين.
كل ما تحتاجه موجود هنا. كل عنصر. إذا فهمت هذا، يمكنك الحصول بسرعة على كل ما تحتاجه. لكن مثل هذه المهمة أصبحت مستحيلة على نحو متزايد. لا يوجد تنزيل. ماذا تفعل إذا كان نسخ الصفحة محظورًا؟
هذا هو جوجل كرومكما كنت قد لاحظت بالفعل، أنا غالبا ما تستخدم جوجل كروموتعلم كود شخص آخر في هذا المتصفح أمر سهل مثل قشر الكمثرى. كما هو الحال من حيث المبدأ مع أي دولة أخرى. لن يكون المخطط مشابهًا فحسب، بل متطابقًا أيضًا. افتح الصفحة التي نريد معرفة رمزها وانقر بزر الماوس الأيمن في أي مكان. في النافذة التي تظهر، انقر فوق "عرض رمز الصفحة".
سيتم فتح ورقة من التعليمات البرمجية في نافذة جديدة، وهو أمر يصعب على المبتدئين فهمه. ولكن لا تنزعج في وقت مبكر.
إذا كنت تريد معرفة رمز عنصر واحد فقط، فما عليك سوى التمرير فوقه بالماوس والنقر بزر الماوس الأيمن. حدد وظيفة Chrome أخرى: "عرض رمز العنصر".
على سبيل المثال، قد أكون مهتماً بكيفية صنع الشعار، باستخدام صورة أو لغة برمجة؟ بعد كل شيء، يمكنك رسم مربع مع مساعدة المغلق. ينصح العديد من الخبراء بكيفية القيام بذلك معلومات اكثراكتب في التعليمات البرمجية. كيف يعملون على المواقع الشعبية؟
هكذا ظهر معلومات ضرورية. html في الأعلى، وcss في الأسفل. هاتان لغتان. الأول مسؤول عن مكون النص والثاني عن التصميم. إذا لم يكن هناك CSS، فسيتعين عليك تحديد اللون وحجم الخط في كل مرة. بالنسبة لكل صفحة، هذا طويل جدًا. ولكن إذا لم يكن هناك HTML، فلن يكون لدينا نصوص. لقد شرحت ذلك بشكل تقريبي، ولكن بشكل عام، هذا هو الحال.
بالمناسبة، إذا كنت مهتمًا بكيفية العمل هنا، فيمكنك إلقاء نظرة على الرابط الموجود في الصورة أدناه. ها هي إجابتك.
إذا كنت ترغب في العمل في المصطكي، فسيكون كل شيء هو نفسه تماما. افتح الصفحة وانقر على الزر الايمنالفئران. " مصدر pages" إذا كنت تريد رؤية الكود بالكامل.
عندما تقوم بالتمرير فوق عنصر ما، يمكنك فتح الكود الخاص به.
هنا يتم عرض البيانات في الجزء السفلي من الشاشة، ولكن بخلاف ذلك كل شيء هو نفسه تمامًا.
في متصفح Yandex، كل شيء هو نفسه تمامًا كما في الخيارين السابقين، افتح الصفحة، المفتاح الصحيحالماوس، والنظر في رمز الصفحة.
نقوم بتحريك المؤشر فوق عنصر ما إذا أردنا معرفة الكود الخاص به بالضبط.
يتم عرض كل شيء هنا تمامًا كما هو الحال في Chrome.
وأخيرا الأوبرا.
بالمناسبة، ربما لاحظت أنه ليس عليك استخدام الماوس. لفتح الرمز هناك مزيج سريعالمفاتيح ولجميع المتصفحات هي نفسها: CTRL+U.
للعناصر: Ctrl+Shift+C.
وهذا ما تبدو عليه النتيجة.
انظر الآن كيف يعمل كل شيء. تجد موقعًا وتحب حقًا بعض العناصر. على سبيل المثال، هذا واحد. أنت تعرف بالفعل كيفية فتح رمز العنصر.
الآن قم بنسخه.
أنا استخدم، لصق هذا الرمز في أتش تي أم أل جديدالملف، في علامة الجسم (الجسم باللغة الإنجليزية).
الآن دعونا نرى كيف سيبدو كل شيء في المتصفح.
مستعد. من أجل محاذاة النص إلى الحواف والحصول على اللون الأخضر، تحتاج إلى الاتصال بهذا وثيقة المغلقوانسخ رمزًا آخر من الموقع الذي سرقنا منه هذا الرمز.
لن أفعل هذا الآن. وهذا يتطلب المزيد من الوقت: لي ولكم. أعتقد أنني سأصف كل التفاصيل في منشوراتي المستقبلية. اشترك في النشرة الإخبارية وكن أول من يعرف متى يظهر المقال.
إذا كنت لا تستطيع تحمل ذلك، ولكنك تريد معرفة المزيد عن html وcss الآن، فيمكنني أن أوصيك تقليديًا بدورات تدريبية مجانية.
فيما يلي 33 درسًا ستسمح لك بإتقان لغة HTML - « دورة مجانيةبواسطة HTML".
و هنا معلومات كاملةحول CSS - "دورة مجانية حول CSS (45 درس فيديو!)".
الآن أنت تعرف أكثر من ذلك بقليل. أتمنى لك النجاح في مساعيك. نراكم مرة أخرى!
هناك فرصة للنظر في الكود الأولي لصفحة الويب، والذي يتلقاه المتصفح نتيجة لطلب إلى الخادم، في كل متصفح إنترنت تقريبًا. يتم تنظيم الوصول إلى الأمر المقابل بشكل مماثل تقريبًا، ولكن هناك اختلافات كبيرة في الطريقة والشكل الذي سيتم من خلاله تقديم الكود الأولي لك.
تعليمات1. في المتصفح موزيلا فايرفوكسقم بتوسيع قسم "عرض" في القائمة وانقر على "رمز الصفحة الأولي". نفس النقطة في قائمة السياق، والذي يحدث عند النقر بزر الماوس الأيمن فوق نص الصفحة. يمكنك أيضًا استخدام مجموعة المفاتيح CTRL + U. لا يستخدم Mozilla FireFox برامج خارجية - سيتم فتح رمز الصفحة الأولي مع تمييز بناء الجملة نافذة منفصلة browser.
2. في المتصفح متصفح الانترنتانقر على قسم "ملف" في القائمة وحدد "تحرير في المفكرة". بدلا من اسم المفكرة، يمكن كتابة برنامج آخر قمت بتعيينه في إعدادات المتصفح لعرض الكود الأولي. عند النقر بزر الماوس الأيمن على الصفحة، تظهر قائمة السياق، والتي تحتوي أيضًا على عنصر يسمح لك بفتح الكود الأولي للصفحة في برنامج خارجي- "عرض كود HTML أ."
3. ب متصفح اوبراافتح القائمة، وانتقل إلى قسم "الصفحة" وستتاح لك فرصة اختيار عنصر "الرمز الأولي" أو عنصر "رمز الإطار الأولي" في القسم الفرعي "أدوات التطوير". هذا الاختيار مقدر للحرق مفاتيح CTRL+ U وCTRL + SHIFT + U على التوالي. في قائمة السياق المرتبطة بالنقر بزر الماوس الأيمن على الصفحة، يوجد أيضًا عنصر "الرمز الأولي". يفتح Opera مصدر الصفحة في برنامج خارجي تم تعيينه في نظام التشغيل أو في إعدادات المتصفح لتحرير ملفات HTML.
4. متصفح جوجليتمتع Chrome، دون أدنى شك، بأفضل تنظيم لعرض الكود الأولي. من خلال النقر بزر الماوس الأيمن على الصفحة، يمكنك تحديد خيار "عرض رمز الصفحة" ومن ثم سيتم فتح الكود المصدري مع تمييز بناء الجملة على علامة تبويب منفصلة. أو قد تفضل السطر "عرض رمز العنصر" في نفس القائمة، وسيفتح المتصفح في نفس علامة التبويب إطارين إضافيين يمكنك من خلالهما فحص كود HTML وCSS لكل عنصر من عناصر الصفحة. سيستجيب المتصفح لتحرك المؤشر على طول سطور التعليمات البرمجية من خلال تمييز العناصر الموجودة على الصفحة التي تتوافق مع هذا القسم من تعليمات HTML البرمجية.
5. في المتصفح أبل سفاريقم بتوسيع قسم "عرض" وحدد سطر "عرض كود HTML". في القائمة التي تظهر عند النقر بزر الماوس الأيمن صفحة مفتوحة، العنصر المقابل يسمى "عرض المصدر". يتم تعيين مفاتيح التشغيل السريع CTRL + ALT + U لهذا الإجراء. يتم فتح الكود الأولي في نافذة متصفح منفصلة.
من المؤكد أنك رأيت في بعض المواقع حظرًا على استخدام زر الفأرة الأيمن. تحارب هذه الميزة في المقام الأول أولئك الذين يريدون سرقة المحتوى الخاص بك. هذا الإجراء لن يحميك بشكل كامل من السرقة، لكنه سيحميك بشكل كامل من النسخ اليدوي. خيارات أخرى .
لا أوصي بتعطيل زر الفأرة الأيمن إذا قمت بنشر مواد مخصصة للنسخ على مدونتك. يمكن أن تكون هذه رموزًا أو نصوصًا برمجية أو وصفات الطهيوالمواد المرجعية وأكثر من ذلك. حظر النسخ في هذه الحالةسيؤدي ذلك إلى إبعاد الزوار عنك، وستصبح مدونتك أقل فائدة للزوار. إذا كانت الحماية من الانتحال مهمة بالنسبة لك، فمن الأفضل إضافة عنوان url الخاص بك في نهاية النسخة. وبعد ذلك سوف تكون متأكدًا من أنه إذا أراد شخص ما نشر شيء منسوخ منك في مكان آخر على الإنترنت، فمن المرجح أن يشارك راعي النسخ رابطًا إلى مدونتك.
هذه الوصفة مناسبة لأي موقع ويب. كل ما عليك فعله هو لصق الكود في جميع صفحات مدونتك:
في Blogger، أضف تعليمات برمجية إلى أداة HTML/Javascript في علامة التبويب "تصميم". إذا كنت تستخدم أحد أحدث السمات في مدونتك (Emporio، وContempo، وSoho، وNotable)، فلا تنس تنشيط رؤية الأداة (مربع الاختيار الموجود بجوار "مرئي للجميع"، و"إظهار الأداة " HTML/ جافا سكريبت "").
في Wordpress، أضف الكود إلى أداة "النص".
العطلة تقترب - يوم المرأة العالمي. دعونا نستعد لذلك مقدما. يمكنك تهنئة الفتيات والنساء بطريقة أصلية باستخدام خدمات البطاقات البريدية التي تتحدث عنها سنتحدثأقل.
أنشئ بطاقة بريدية بتاريخ 8 مارس عبر الإنترنت استخدم الخدمات التالية لإنشاء بطاقة بريدية عمليًا من البداية.
آمل أنه باستخدام أحد هذه المولدات، ستتمكن من تهنئة سيداتك بشكل مناسب في الثامن من مارس!
محتوى المقال:
جوجل بلسلم ترق منصة Google Plus إلى مستوى آمال المطورين وستتم إزالتها بالكامل في 2 أبريل 2019. سوف تختفي الألبومات المرتبطة به معه. صور جوجل، لن يكون التفويض على المواقع التي لها حساب Google Plus متاحًا. بالفعل في 4 فبراير أصبح وظيفة غير متوفرةإنشاء الملفات الشخصية والقنوات والصفحات في Google Plus. إذا قام حسابك بتخزين محتوى قيم، فيمكنك تنزيله نسخة إحتياطية.ستؤثر التغييرات بشكل كبير على المدونين الذين يديرون مدوناتهم على Blogspot. بعض أدوات G+، وتعليقات G+، و الملف الشخصي في جوجل+. تم ذكر ذلك في الإشعار الموجود في منطقة إدارة Blogger:
بعد إعلان الإنهاء عمل واجهة برمجة التطبيقاتستقدم +Google، المقرر إطلاقها في مارس 2019، عددًا من التغييرات على تكامل Blogger مع +Google في 4 فبراير.
جوجل+ الحاجيات. لن تدعم تصميمات المدونات زر 1+ ومتابعي +Google وعناصر واجهة المستخدم لشارة +Google بعد الآن. ستتم إزالة كافة مثيلات هذه الأدوات من مدونتك.
أزرار +1. ستتم إزالة الزرين 1+ وG+، وكذلك روابط "النشر على Google+" ضمن مشاركات المدونة وفي شريط التنقل.
يرجى ملاحظة أنه إذا كنت تستخدم قالب مخصص، والتي لديها ميزات جوجل+ ربما يحتاج إلى تغيير. يرجى الاتصال بالشخص الذي قدم لك هذا النموذج للحصول على توصيات.
تعليقات جوجل+. سيتم إيقاف دعم التعليقات من باستخدام جوجل+، وستتم استعادة تعليقات Blogger القياسية لجميع المدونات التي تستخدم هذه الميزة. لسوء الحظ، لا يمكن نقل التعليقات المنشورة عبر +Google إلى Blogger، لذا لن تظهر مرة أخرى في مدونتك. إزالة تعليقات جوجلبالإضافة إلى ذلك، للأسف سيتم حذف التعليقات التي تم نشرها في النظام نهائياً. يمكنك فقط استخدام نفس الأداة https://takeout.google.comلقول التعليقات الاحتياطية من Google+ إلى جهاز الكمبيوتر الخاص بك. فقط لا يوجد أداة تحميل تشغيل خاصة به ويمكنك فقط استعادة التعليقات يدويًا بطريقة ملتوية إلى حد ما. من الجيد أنني كنت في الوقت المحدد. كيفية استبدال ملف تعريف Google Plus بملف تعريف Blogger إذا كنت تقوم بالتدوين على Blogspot، فمن المستحسن الآن العودة من ملف تعريف Google Plus إلى ملف تعريف Blogger (لأولئك الذين تحولوا إلى Google Plus في مره واحده). أوصي بالقيام بذلك الآن لتجنب المواقف غير المتوقعة التي قد تحدث أثناء الحذف حسابات جوجلزائد. كيفية استعادة ملفك الشخصي في Blogger من السهل القيام بذلك في إعدادات مسؤول Blogger:
الإعدادات -> إعدادات مخصصة–> ملف تعريف المستخدم – هنا حدد Blogger
احفظ تغييراتك.
أكد الانتقال إلى وأدخل اسمك أو لقبك.
لا تنس تحميل الصورة الرمزية على ملفك الشخصي في Blogger.
كيفية حذف ملف تعريف جوجل بلس إذا قررت التخلص من ملفك الشخصي في جوجل بلس نهائيًا، فانتقل إلى صفحة جوجل بلس الخاصة بك -> الإعدادات -> انتقل إلى أسفل الصفحة -> حذف حساب جوجل بلس:
سأخبرك اليوم ما هو CSS3، وفيم يستخدم، وأين تبحث عنه، وكيفية كتابته بشكل صحيح. وأحذركم سأقول من نفسي بشكل مبسط لعامة الناس كما أراها +أمثلة. لذلك، دعونا نبدأ من بعيد.
CSS هي أنماط تُكتب بها خصائص الكائن. هذا يعني أنها موجودة في جميع المحركات الموجودة، إذا لم تتمكن من العثور عليها، فإما أنك تبحث في المكان الخطأ، أو أنها غير موجودة بالفعل ( موقع ملتوية). أين يتم العثور عليهم عادة؟ عادة ما يكون هذا هو جذر الموقع، واسم الملف هو style.css، على الرغم من أن الاسم، من حيث المبدأ، ليس بنفس أهمية امتداد .css إذا كان الملف ذو هذا الامتداد ملف نمط.
انظر أيضا على مدونتي.