خصائص الارتفاع و العرض فى CSS Height and Width
CSS Height and Width
إعداد الارتفاع والعرض
يتم استخدام خصائص الارتفاع والعرض لضبط ارتفاع وعرض عنصر ما.
يمكن تعيين الارتفاع والعرض بصفه افتراضيه
( يعني أن المتصفح يحسب الارتفاع والعرض )،
و يتم تحديد الوحدات التى يقاس بها، مثل بكسل أو سم أو نسبه مئويه (٪) من الكتلة المحتوية .
لنســـخ الكود selct all ثم ctrl + c
ملاحظة:
لا تتضمن خصائص الارتفاع والعرض
height and width
الحشو أو الحدود أو الهوامش؛
padding, borders, or margins;
أنها تعيين ارتفاع / عرض المنطقة داخل الحشو، والحدود، وهامش العنصر!
تعيين الحد الأقصى للعرض max-width
يتم استخدام الخاصية max-width لتعيين الحد الأقصى لعرض العنصر.
يمكن تحديد الحد الأقصى للعرض
بالوحدات التى يقاس بها، مثل بكسل أو سم أو نسبه مئويه (٪) من الكتلة المحتوية .
أو تعيينها على لا شيء و هذا هو الافتراضي، يعني عدم وجود حد اقصى للعرض او الارتفاع
باستخدام خاصيه حد اقصى للعرض و الارتفاع سيؤدي إلى تحسين معالجة المتصفح للنوافذ الصغيرة.
لنســـخ الكود selct all ثم ctrl + c
اخيرا . . . جميع خصائص الابعاد فى CSS
All CSS Dimension Properties
للمزيد حول هذا الموضوع من هنا
كيفية إضافة زر "الرجوع إلى الأعلى" إلى مدونه بلوجر
هل رأيت مثل هذا السهم فى أخر الصفحه . . .
أذا ضغطت عليه يصعد بك بسرعه الى بدايه الصفحه . . . هو أمر شيق و سهل . .
كيف ذلك . . .
تحدثنا فى تدوينه سابقه عن عمل رابط داخل الصفحه . . . وموضوعنا اليوم هو كيفية إضافة زر "الرجوع إلى الأعلى" إلى مدونه بلوجر .
هى نفس الفكره ولكن تتم على كل الصفحات . . اى تكون جزء من القالب . .
اولا :- من لوحه تحكم بلوجر
في لوحة تحكم المدونه، انقر على علامة التبويب " نموذج " أو"المظهر " ثم انقر على تعديل HTML
ثانيا :- ابحث عن علامة <head > . . . وستكون موجودة بالقرب من أعلى
الصفحة. يمكنك أيضا البحث عنه، من خلال النقر داخل المربع ثم ctrl + F
لظهور مربع البحث .
ثالثا :- ضع الشفرة التالية أسفل علامة
للنسخ اضغط "Select All" ثم ctrl + C
رابعا :-
انتقل إلى علامة التبويب "تخطيط"، ثم انقر على "إضافة أداة".
لا يهم أين تضع الأداة الخاصة بك، فإنه سيتم عرض تلقائيا في الجزء الاسفل الأيسر من الشاشة عند التمرير لأسفل.
لا يهم أين تضع الأداة الخاصة بك، فإنه سيتم عرض تلقائيا في الجزء الاسفل الأيسر من الشاشة عند التمرير لأسفل.
يفضل اضافته الى التذييل او الفوتر
خامسا :- قم بلصق الكود التالي داخل الاداه
للنسخ اضغط "Select All" ثم ctrl + C
ملحوظه :- الصوره الموجوده فى الرابط يمكن تغييرها بالصوره التى ترغبها
كذلك يمكن تغيير الكود right: 10px الى left:10px
فيتم تغييرصوره السهم من اليمين الى الشمال
وهذا كل شيء! لقد انتهيت . . الان استمتع بما قمت به
وهذا كل شيء! لقد انتهيت . . الان استمتع بما قمت به
إذا كان لديك أي أسئلة على الإطلاق، يرجى ترك لي تعليق وأذا اعجبك المنشور اعمل مشاركه . . . هذا المنشور موجود فى بعض المدونات الاجنبيه منها
وقد قمت بترجمته بتصرف
كيف تعمل رابط داخل الصفحة
عندما يفكر معظم الناس في الروابط، يفكرون في ربط صفحتين ويب مختلفتين معا.
يمكنك استخدام الارتباطات التشعبية لربط اثنين من مشاركات مدونتك، أو مشاركة مدونة وصفحة مقصودة، أو مشاركة مدونة وصفحة منتج، أو تغريدة إلى موقعك على الويب.
ولكن هذا ليس كل شئ يمكن القيام به.
مع القليل من التغيير والتبديل، يمكنك أيضا إعداد ارتباطات تشعبية لربط المحتوى على نفس الصفحة.
ربما تحتاج الى عمل فهرس للمشاركه الآن، عندما تشير إلى شيء ذكرته في مكان آخر من تلك المقالة،وفى نفس الصفحه يمكنك ربطه به فعلا - مما يسهل على جمهورك معرفة ما تتحدث عنه
رائع جدا، هذه مقدمه توضح كل شيء . . . لعمل ارتباطات داخل الصفحه اتبع الخطوات الاتيه
أولا :ـ أعط الكائن أو النص الذي تريد ربطه اسم
في سيناريو الربط العادي، فإن الشيء الذي تحتاج إلى الارتباط به له عنوان URL خاص به.
ولكن في هذا السيناريو، تكون الصفحة التي تريد ربطها والصفحة التي يكون الرابط فيها واحدة ونفس الشيء - لذا يجب أن تكون هناك اسما لوجهة الرابط
أوصي باستخدام كلمة أو عبارة تصف وجهة الرابط. إذا كنت تستخدم عبارة، يجب ألا تكون هناك مسافات - استخدم الشرطات السفلية بدلا من ذلك
مثال
لنفترض أننا أردنا الربط بمثال لفقره عن الصور والايقونات في مشاركة.
إليك ما سأستخدمه كاسم لهذا النص
photo_icon
ثانيا:ـ خذ الاسم الذي اخترته وأدخله في علامة ربط ارتباط HTML مفتوحة
استبدال القسم الأحمر من العلامة أدناه بالاسم الذي اخترته في الخطوة السابقة
<"a id="INSERT_NAME_HERE>
ثالثا:ـ ضع علامة #
قبل النص أو الكائن الذي تريد الربط به، ثم أضف علامة إغلاق <a>
</a>
يؤدي هذا إلى تعيين موقع الرابط. هذا هو الشكل الذي ستبدو عليه شفرتك الآن
<a id="INSERT_NAME_HERE"> الكائن الذي تريد ربطه. </a>
رابعا :ـ إنشاء الارتباط التشعبي الذي سوف يأخذك إلى هذا النص أو الكائن
انتقل الآن إلى الجزء الذي تريد تضمين الرابط التشعبي فيه.
ستحتاج إلى إضافة ترميز هتمل للوصلة التشعبية النموذجية، ولكن في الجزء الذي عادة ما تتضمن فيه عنوان URL، ستدرج رمز ( # ) ثم اسم الكائن الذي تربطه. وإليك ما يبدو عليه
<a href="# INSERT_NAME_HERE"> انقر هنا . </a>
مثال
كثيرا ما نرى فى نهايه كل صفحه هذا الرابط Back to top
وعند الضغط عليها ننتقل الى اعلى الصفحه .
هذا راط داخل الصفحه ويمكن ان ننفذه بكل سهوله
1- نضع هذا الكود
<a href="# top"> انقر هنا . </a>
فى اعلى الصفحه او اى مكان نريد الانتقال اليه
2- فى المكان الذى نحدده للرابط نضع هذا الكود
<a id="top"> Back to top</a>
لاحظ بكل سهوله تم عمل الرابط داخل الصفحه
تم الاعتماد فى هذه التدوينه على الترجمه من المواقع الاتيه
وعند الضغط عليها ننتقل الى اعلى الصفحه .
هذا راط داخل الصفحه ويمكن ان ننفذه بكل سهوله
1- نضع هذا الكود
<a href="# top"> انقر هنا . </a>
2- فى المكان الذى نحدده للرابط نضع هذا الكود
<a id="top"> Back to top</a>
تم الاعتماد فى هذه التدوينه على الترجمه من المواقع الاتيه
النسخ من المواقع المحمية
النسخ من المواقع المحمية
نسخ و لصق بعض السطور أمر شائع جدا.
و الشكل الأكثر شيوعا لنسخ الصفحة هو عن طريق تحديد النص بالماوس و النقر بزر الماوس الأيمن ونسخ المحتوى.
ويمكن بسهولة تعطيل استخدام زر الماوس الأيمن برمجيا عن طريق جافا سكريبت
وقد ذكرنا فى تدوينه سابقه كيف يتم لك .
وعند تصفحى للانترنت احتاج الى الاحتفاظ ببعض العناوين وبعض المقتطفات للرجوع اليها والمشكله التى واجهتها ان العديد من المواقع تقوم بتعطيل استخدام زر الماوس الأيمن و العديد من المواقع تقوم بتعطيل CTrl+C
لضمان أمن أفضل ضد المتسللين والمواقع الخبيثة
يستخدم معظم المدونين ومشرفي المواقع تقنية جافا سكريبت لتعطيل النقر بزر الماوس الأيمن، لمنع سرقة المحتوى الخاص بهم.
في كثير من الأحيان وعند ما تأتي إلى موقع ما وتجد محتويات مفيدة مثل كيفية عمل شئ معين ... و غيرها وتريد نسخه ... عموما نختار بعض النص ثم انقر بزر الماوس الأيمن لنسخ. ولكن في المواقع المحمية يظهر مربع رسالة قائلا "تم تعطيل النقر بزر الماوس الأيمن على هذا الموقع."
ولكن هناك طرق عديدة من خلال واحده منها يمكن نسخ المحتويات من المواقع المحمية
طرق نسخ النص من الصفحات التى تعطل استخدام زر الماوس الأيمن
ـــ تعطيل عمل جافا سكريبت في المتصفح
ـــ استخدام مواقع البروكسى
ـــ باستخدام عرض شفره المصدر للموقع
View page source
أولا :- تعطيل عمل جافا سكريبت في المتصفح غوغل كروم
في متصفح كروم، يمكنك تعطيل جافا سكريبت بسرعة عن طريق الانتقال إلى الإعدادات. انظر لقطة الشاشة للحصول على توضيح أفضل
Setting >> Content Settings
<<
Do not allow run JavaScript
<<
Do not allow run JavaScript
ثم حدد عدم السماح لأي موقع بتشغيل جافا سكريبت
وبالمثل إذا كنت تستخدم فايرفوكس، يمكنك إزالة القراد من الخيار " تمكين جافا سكريبت "
ثانيا:- استخدام مواقع البروكسى
هناك العديد من المواقع البروكسى ، والتي تمكنك من تعطيل جافا سكريبت أثناء التصفح. كل ما تحتاجه هو استخدام تلك المواقع البروكسى ، والتي تقدم هذه الميزات ويمكنك استخدامها بسرعة انقر بزر الماوس الأيمن فوق المواقع المحميه
ومن هذه البروكسى موقع
وقد تم تجربته .
ثالثا :- من خلال عرض كود المصدر
كل متصفح يوفرخيار عرض كود الصفحة، والتي يمكنك الوصول إليها مباشرة عن طريق النقر بزر الماوس الأيمن.
وهذه الطريقه للمتمرسين ومن لديهم خبره فى التعامل مع HTML
تم النقل من بعض المواقع باللغه الانجليزيه مثل موقع
العلامات الوصفية Meta Tags واهميتها للسيو seo
ما هي العلامات الوصفية؟ . .
What Are Meta Tags?
العلامات الوصفية هي مقتطفات من النص تصف محتوى الصفحة. لا تظهر العلامات الوصفية في الصفحة نفسها، ولكن في شفرة الصفحة فقط. تساعد محركات البحث على معرفة ما هي صفحة الويب
العلامات الوصفية هي أجزاء من نص مرتبط بصفحات الويب. هذه العلامات توضح ما هي هذه الصفحة وتبينها لمحركات البحث ومستخدميها، ويتم عرضها في محركات البحث. وهي تؤثر في ترتيب الصفحات فىمحركات البحث
أنواع العلامات الوصفية
هناك عدة علامات وصفية مختلفة.
هنا، سنتحدث عن الاربعه التي لها صلة وثيقة ب سيو:
1- علامات العنوان،
2- أوصاف ميتا،
3- علامات الكلمات الرئيسية.
4- علامات الروبوت.
وأخيرا، لا تعد علامات ألنص البديل للصوره
image alt tags
من الناحية التقنية علامات وصفية، ولكنها تحقق مهام مماثلة
علامة عنوان العنوان / الصفحة الوصفية هي العلامة الأكثر أهمية، حيث إنها تستخدم لوصف المحتوى على الصفحة وتعطي محركات البحث الكثير من الوزن. يتم عرض المعلومات التي تضعها في هذه العلامة أعلى نافذة المتصفح وهي أيضا ما سيظهر في محرك البحث باعتباره الرابط القابل للنقر إلى موقعك
- علامات العنوان Title tag
تعتبر علامات العنوان مهمة للغاية بالنسبة إلى تحسين محركات البحث. أنها تظهر
في علامات تبويب المتصفح
في نتائج محرك البحث - وهذا هو جزء مهم للغاية.
وهذا ايضا يعني امران.
الامر الأول: فإن الكلمات في علامة العنوان تخبر غوغل ومحركات البحث الاخرى عن صفحتك.
الامر الثاني: علامة العنوان هي أول شيء يراه المستخدم عند تصفح صفحات نتائج محرك البحث
اكتب علامة عنوان مقنعة ! يمكن أن تشجع المزيد من الناس على النقر
يجب أن تحتوي علامات العنوان على الكلمات الرئيسية التي تتعلق بمحتوى الصفحة لجذب المستخدمين للنقر
يتم عرض العنوان عادة كعنوان رئيسي قابل للنقر عليه في صفحة نتائج محرك البحث ويسمح للمستخدمين بتقييم مدى ملاءمة الصفحة في بحثهم.
تسمح جوجل ب 8-9 كلمات ( 65 حرفا تقريبا ) ضمن علامة العنوان لنتائج محرك البحث حاول تحديد عنوانك بتسعة كلمات، وتأكد من حصولك على كلماتك الرئيسية في الكلمات التسع الأولى
يجب أن تحتوي كل صفحة على علامة عنوان فريدة لتلك الصفحة تحديدا
إذا كانت علامة العنوان تعكس المحتوى الموجود في الصفحة، فسيؤدي ذلك إلى تحسين ترتيب محركات البحث حيث سيتم اعتبارها أكثر ملاءمة؛ فتأكد من أن العنوان يصف بدقة محتوى الصفحة التي يرتبط بها من محرك بحث
فكر في نوع كلمات البحث والعبارات التي تتوقعها من الأشخاص الذين يبحثون عن موقعك في محرك بحث لاستخدامه، واستخدام تلك العناوين في عناوين صفحتك
كود علامة العنوان
Title tag code
<head>
<title>Title Tag Goes Here</title>
< head / >
=====================
يتم عرض أوصاف ميتا أيضا في محركات البحث، لكنها لا تؤثر بشكل مباشر على الترتيب.
إلا أنها قد تؤثر في نسب النقر.
من المرجح أن يتم اقتطاع الكلمات أكثر من 160 حرفا للديسك توب و 115 حرفا للموبايل
يتم استخدام هذه العلامة لوصف صفحتك في نتائج محرك البحث. يظهر في معظم صفحات نتائج محرك البحث كملخص مختصر لموقعك أسفل العنوان.
يجب أن يكون الوصف جذابا وموجزا، حيث إن الزائرين المحتملين لصفحتك على الويب سيستخدمون هذه الكلمات لتحديد ما إذا كان يجب عليهم اتباع رابط العنوان
على الرغم من أن، في رأينا، أنها أقل اهميه بكثير من علامات العنوان، الا أنه ينبغي عدم تجاهلها
وهناك قليل من الامور التى يجب معرفتها
اولا :- تقوم محركات البحث أحيانا بإنشاء أوصاف ميتا خاصة بها. إذا لم تعجب غوغل وصف ميتا الخاص بك، فإنها قد تولد تلقائيا. كما أنها قد تتغير اعتمادا على البحث. إذا كانت صفحتك تحتوي على معلومات ذات صلة، على سبيل المثال، في نص الصفحة، فقد تعرض غوغل جزءا من النص الذي تراه مناسبا كنص وصفي.
ثانيا :- تعرض العلامات الوصفية التي تحتوي على كلمات رئيسية بخط عريض. في نتيجة البحث
ثالثا:- الناس تمسح صفحات نتائج محرك البحث بحثا عن معلومات محددة جدا غالبا ما تستخدم هذه الأوصاف لتحديد أي نتيجة هى أفضل لاحتياجاتهم
قم بوصف الصفحة بوضوح واحتفظ بالوصف قصير وموجز، لا يزيد طوله عن 150 حرفا
قم بتضمين عبارات الكلمات الرئيسية بالقرب من بداية الوصف بدون تكرار
إذا لم تقدم بيانات وصفية ، فسيعرض محرك البحث بضعة أسطر من النص من صفحة الويب بدلا من ذلك. قد تعرض غوغل أيضا وصفها الخاص المأخوذ من صفحتك على الويب إذا كانت تعتقد أنها ستكون أكثر ملاءمة من وصفك
كود العلامات الوصفية
<head>
>
meta name="description" content="Meta description"> tag goes here
<head/>
الكلمات الرئيسية
الكلمات الرئيسية ميتا قديمة، ولا تستخدمها معظم محركات البحث حاليا.
الكلمات الرئيسية هي الكلمات التي يكتبها المستخدمون في محرك بحث عندما يبحثون عن موقع ويب..
في الأيام "القديمة" ( التي تعود إلى عشر سنوات فقط )، استخدمت محركات البحث كلمات رئيسية وصفية لتحديد المحتوى الذي تتناوله. ولكن الإنترنت تغيرت بشكل كبير منذ ذلك الحين: الروبوتات هي أفضل في الزحف و الجوده وفك شفرة المعلومات فى الصفحة.
كقاعده عامه ان المحتوى يتحدث عن نفسه،
كود الكلمات الرئيسية
<head>
<meta name="keywords" content="keyword, keyword, , etc.">
</head>
علامات الروبوتات
علامات الروبوتات بسيطة. فهى تقول لمحركات البحث عما إذا سيتم "فهرسة" الصفحة وعما إذا سيتم "متابعة" الصفحة أم لا
*- الفهرسه - افتراضيا، تقوم محركات البحث بفهرسة الصفحة. وهذا يعني أن محركات البحث يمكنها العثور على الصفحة ووضعها في نتائج البحث.أما الصفحات التي تريدها مخفية من محركات البحث، استخدم noindex
*- المتابعة - افتراضيا، تقوم محركات البحث بمتابعة الصفحة. وهذا يعني أن محركات البحث ستقوم بالبحث عن الروابط داخل الصفحة والبدء في الزحف إلى تلك الصفحات المرتبطة. اما الصفحات التي لا تريد اتباعها، استخدم nofollow
التوصية: السماح لمحركات البحث بفهرسة جميع صفحاتك ومتابعتها، ما لم يكن لديك أسباب محددة لعدم ذلك.
. في معظم الحالات، تعطي لنفسك أفضل فرصة لترتيب، والسماح محركات البحث لفهرسه ومتابعة صفحاتك.
كود علامات الروبوتات
<head>
<meta name="robots" content="noindex, nofollow">
</head>
علامات النص بديل الصوره
Image alt tags
في حين أن علامات ألت من الناحية التقنية ليست علامات ميتا، فإنها تخدم غرضا مماثلا.
كما هو الحال بالنسبة إلى علامات العناوين التي تخبر محركات البحث عن صفحتك، فإن علامات ألت إيماج تخبر محركات البحث بمحتويات صورك.
قد يتم عرض صور ذات جودة عالية تحتوي على علامات ألت وصفية تحتوي على الكلمات الرئيسية المناسبة في نتائج بحث الصور.
إنشاء علامات بديل تحتوي على كلمات رئيسية ذات صلة بصفحتك. إذا تم عرضها في نتائج محركات البحث، فقد ينقر الباحثون على صورتك، وينقرون على صفحتك، ويصلون إلى موقعك على الويب.
كود علامات النص بديل الصوره
Image alt tags code
<img src="image-file.jpg" alt="Image alt tag description.">
العلامات الوصفية: سيو SEO صانع الاختلاف
سيضيع المحتوى الرائع إذا لم تعط العلامات الوصفية الاهتمام الذي يستحقه. العلامات الوصفية - لا سيما علامات العنوان - هي أول شيء يتم عرضه في محركات البحث. وهي أول شيء يراه العميل المحتمل عندما يبحثون عن منتجك أو خدمتك. ولا يقتصر الأمر على إخبار جوجل ومحركات البحث الاخرى بما يتعلق بمحتواك.
