خصائص النصوص فى لغة HTML إتش تى إم إل

سنتعلم فى هذه التدوينه كيف نتحكم فى شكل النصوص عبر لغة HTML الرائعه, حيث سنتحكم بنوع الخط وحجمه ولون النصوص وكل ما يخص النصوص ستجده هنا بإذن الله فى هذه التدوينه.

الألوان

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

ويكون كود HTML الذى نضيف به اللون كالآتى

<font color="#e92121">
النص أو الكلام المراد تلوينه بهذا الون
</font>

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

#0066cc

ويتكون كود الهيكساديسيمال من 6 أرقام وأمامهم علامة # وهو ما يعبر عن اللون.
ويمكننا الحصول على كود أى لون من خلال برامج التصميم بسهوله كبرنامج الفوتوشوب أو برنامج التقاط الألوان كولور بيك.

وأما الطريقه الثالثه فسنتركها الآن ونتحدث عنها لاحقا فى حديثنا عن لغة CSS سى إس إس.

الحجم

ويمكننا التحكم فى حجم النص عن طريق الوسم التالى

<font size="20px">
النص المراد إظهاره بهذا الحجم
</font>

إسم الخط ونوعيته

وهذه الخاصيه تسمح لنا بإظهار الخط بشكل معين من الخطوط وهو الشكل الذى نريده, ويتحقق ذلك فى الوسم التالى

<font face="arial">
الخط المراد ظهوره بهذا الشكل
</font>

وهناك الكثير من عائلات الخطوط المدعومه رسميا من المتصفحات والشبكه العنكبوتيه وهناك الكثير أيضا من الخطوط الغير مدعومه بعد.

شكل النص

ولدينا هنا من الخصائص ما تجعل الخط عريض أو مائل أو رفيع أو معتدل وغيرها من الخواص الأخرى
للحصول على نص غليظ

<b>
نص غليظ
</b>

للحصول على نص مائل

<em>
نص مائل
</em>

وطريقه اخرى للحصول على نص مائل

<i>
نص مائل
</i>

للحصول على نص تحته خط

<u>
نص تحته خط
</u>

للحصول على نص عليه خط أو مشطوب عليه

<s>
نص مشطوب
</s>

وهناك الكثير من الخواص التى ستعرفها عند تعمقك فى لغة HTML إتش تى إم إل.

العناوين

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

<h1> نص عنوان 1 </h1>
<h2> نص عنوان 2 </h2>
<h3> نص عنوان 3 </h3>
<h4> نص عنوان 4 </h4>
<h5> نص عنوان 5 </h5>

حيث أن h1 هو العنوان الأكبر حجما و h6 هو العنوان الأصغر حجما.

جهة النص أو الفقره

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

<p align="right">
النص جهة اليمين
</p>

خصائص أخرى

فى حالة الرغبه فى النزول إلى سطر جديد نستخدم فى آخر السطر السابق الوسم التالى

السطر الذى سيبدأ بعده سطر جديد <br>

وهذا الوسم من الوسوم الذى تحدثنا عنها سابقا وقلنا أن ليس لها وسم نهايه.
والوسم التالى يعطينا سطر ( خط ) ونستطيع التحكم فى لونه وسمكه وشكله كما نريد, وذلك من خلال الوسم التالى

<hr width="300px" size="5px" color="#020202">

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

&nbsp;

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

Unknown

الجمعة, فبراير 17, 2012

الموضوع كامل

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

لإضافة أحدث التعليقات على مدونتك مع خاصية إظهار صورة المعلق بشكل دائرى أنيق جدا فقط قم بإضافة الكود التالى فى أداه HTML/JAVASCRIPT جديده

<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:right;margin:0 0 0 6px;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://ar-blogger-tips.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

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

Unknown

الأحد, فبراير 12, 2012

الموضوع كامل

كيف تصبح صديقا لمحركات البحث

السلام عليكم ورحمة الله تعالى وبركاته

أولا يشرفني أن أكتب في مدونة نصائح للمدونين لدى صديقي ياسر إسماعيل, كما يسرني أن اساهم في إثراء المحتوى العربي والكتابة هنا بمواضيعي المتواضعة.

إسم موضوعنا اليوم :  كيف تصبح صديقا لمحركات البحث

كاتبه أخوكم : Dev Nasser   (المطور ناصر)

صاحب مدونتى : pxfree.blogspot.com //**// devnasser.blogspot.com

لندخل في صلب الموضوع ...

ما سنتحدث عنه في هذا المقال هو شيء مهم جدا جدا لكل شخص لديه موقع يريد نشره او مدون يريد إيصال تدويناته للقراء المستهدفين, والسيو SEO بكل بساطة هو إختصار ل :  Search Engine Optimization

والتعريف المختصر والبسيط الذي أحب أن أعطيه له هو : الحصول على أكبر عدد من الزوار .. طبعا القادمين من محركات البحث.

لذلك سميت الموضوع ب : كيف تصبح صديقا لمحركات البحث.

وكي لا أطيل عليكم في المقدمات والتعريفات ... إليكم الخطوات المهمة في موضوعنا هذا :

أولا البحث عن الكلمات المفتاحية - Keywords Research

الكلمات المفتاحية Keywords هي من أهم أجزاء السيو SEO. فعند إنشائك لمدونة أو موقع أعمالك, تحتاج إلى إعتماد السيو و ذلك للحصول على زوار كثر من محركات البحث. و أول ما يجب القيام به هو تحديد الكلمات الرئيسية Keywords لمدونتك أو موقع أعمالك.

و هنا أقترح عليك إستخدلم Google Adword Keyword Tool و التي ستساعدنا للبحث عن الكلمات المفتاحية. فلنفرض أن لديك موقعا يتكلم حول خدمات التسويق عبر الأنترنت, و خدمات التسويق الرقمي على سبيل المثال, يا ترى كيف ستختار كلماتك المفتاحية؟ كإجابة لهذا السؤال: هنا يأتي دور اداة جوجل هذه, أدخل الكلمات القليلة و العشوائية ذات الصلة بموقعك مثلا: التسويق عبر الأنترنت, خدمة الأنترنت و التسويق, خدمات السيو, خدمات SEO, حلول التسويق الإلكتروني, حلول التسويق الرقمي, التسويق .. إلخ

طبعا الاداة سهلة  و يمكن للجميع التعامل معها, هي على العنوان التالي :

https://adwords.google.com/select/KeywordToolExternal

توزيع الكلمات المفتاحية - Keywords Distribution

الآن بعد جمعك للكلمات المفتاحية Keywords و توفرك على عدد هام معك, الان كل ما عليك فعله هو التوزيع المناسب للكلمات الرئيسية تلك. هناك 3 اماكن في الكود الخاص بكل صفحة, إذ يجب عليك وضع العنوان لكل صفحة, و وسم ميتا Meta Tag يوضع فيها الوصف Description , و وسم ميتا أخرى توضع فيها الكلمات المفتاحية Keywords. و مع ذلك فإن الدراسات الحديثة تقول بان محرك البحث جوجل Google لم تعد تعطي أولوية كبيرة لتعريف الكلمات المفتاحية, و لكن غيرها من المحركات لا تزال تنظر إليها, بقيامك بهذه الخطوة .. أنت المستفيد!
الشيء الأكثر أهمية, هو تصنيف الكلمات المفتاحية حسب الأولوية, الآن ضع أهم كلماتك المفتاحية في العنوان و تذكر جيدا أنه لا يجب عليك وضع الكلمات الرئيسية في العنوان فقط, بل إجعلها مختطلة بكلمات أخرى .. و ذا معنى و مرتبط بمحتوى موقعك. 

كل ما قلته هنا بتعلق برئيسية الموقع فقط  و لباقي الصفحات كلام آخر.

و لإدخال الوصف و الكلمات المفتاحية, توجه إلى ملف الـ HTML الخاص بك, و حدد الوسمة <head> و نهايتها </head> و ضع الكود الآتي:

<meta name=”description” content=”ضع وصف موقعك هنا” />

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

بعد القيام بذلك, حان دور الكلمات المفتاحية .. سنستخدم وسمة الميتا على النحو الآتي:

<meta name=”keyword” content=”ضع كلماتك المفتاحية التي إخترتها هنا مفرقا بينها بفاصلة” />

بآتباعك لهذه الطريقة, تكون قد وزعت كل كلماتك المفتاحية بحكمة. و تذكر جيدا أن ما قمت به الآن ما هو إلا البداية. فما قما بعمله الآن يتعلق بالصفحة الرئيسية فقط, الآن يجب عليك القيام بنفس المهمة لكل الصفحات في مدونتك أو موقع الأعمال الخاص بك, فكل صفحة من صفحاته تحتاج إلى إختيار الكلمات المفتاحية و الوصف بحكمة .

وسمات للعناكب و البوتات - Tags for Crawlers

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

<meta name=”Robots” Content=”Index, follow”/>

<meta name=”Googlebot” Content=”Index, follow”/>

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

خرائط الموقع بآمتداد إكس ام ال - XML Sitemap

الآن ما يجب عليك القيام به هو إنشاء خريطة لموقعك بآمتداد إكس إم إل, و هناك الكثير من الادوات لإنشاء هذه الخرائط و بهذا الإمتداد .. قد نتطرق لها اذا اراد الله لنا ان ندون بعد هذا بكل تأكيد. على أي حال, بعد إنشائك لخريطة الموقع الخاص بك, تأكد أنها موضوعة في موقعك على هذا الشكل:  yoursite.com/sitemap.xml  و قم بتقديم الخريطة لجوجل عن طريق أدوات مشرفي المواقع Google webmaster tools  على الرابط التالي :

www.google.com/webmasters/tools 

سمة Alt الخاصة بالصور – Alt Attribute

السمة Alt  مهمة للغاية عند إدراجك الصور في موقعك, و كلمة Alt هي إختصار لـ Alternate أي البديل. فأحيانا لما يكون هناك صور بالموقع و يكون الإتصال سيء, يظهر لنا نص بدل الصور .. هذا هو دور السمة Alt. بآختصار ما أريد أن أقوله لكم, هو محاولة إدراج الكلمات المفتاحية الأساسية لموقعك في سمة الـ Alt على الصور أيضا, هذا لان جوجل على سبيل المثال, تتبع هذه العلامات و تقوم بفهرستها.

وسأستغل الفرصة لاتحدث عن مفهومين مهمين في موضوعنا هذا باختصار وهما
On-page Optimization و Off-Page Optimization
و سأكتفي بتقديم تعريف بسيط .. و في التدوينات المقبلة سأتكلم على كل واحد منهما بالتفصيل إن شاء الله.

On-page Optimization: هي الخطوة الاولى و الاهم في السيو. بل هو منظومة مستمرة, و التي بإمكانها فرز صفحات فردية على الشبكة و إظهار موقعك ضمن النتائج الأولى في محرك البحث.و بآستخدام هذه العملية على نحو أفضل في صفحات موقعك تكون قد قمت بعمل تحسين لصفحات موقعك و تهيئته لمحركات البحث كجوجل و ياهو و بينج و غيرها و التي تتعامل مع إسم النطاق, و العناوين, و العلامات الفوقية أو ما يسمى بوسمات الميتا, أو العلامات البديلة و أيضا المحتوى.
و بالتالي فـ On-Page Optimization ما هي إلى تحليل و آختيار حكيم لإسم النطاق و و و … إلخ

و هنا فأهمية الـ On-Page Optimization تكمن في مساعدتك للخروج بأفضل عنوان و وصف و كلمات مفتاحية و غيرها لموقعك طبعا بالتخطيط و إعتماد إستراتيجية مناسبة .. و بالتالي الحصول على مبتغاك.

صيغة الروابط الدائمة - Permalink Structure

الروابط الدائمة يجب عليها أن تكون ذات مغزى, ففي طريقي صادفت صيغة سيئة للروابط الدائمة على هذا الشكل:

/product_category.aspx?caid=102

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

category/السيو-seo-و-تقنيات-محركات-البحث/

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

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

في السابق, تكلمت لكم عن On-Page Optimization, الآن أعزائي, سأتكلم لكم عن Off-Page Optimization. و سأبدأ لكم بالفرق بينهما.
فـ On-Page Optimization هو مهمة نقوم بها داخل موقعنا لتهيئته لمحركات البحث من إختيار للعنوان و الكلمات المفتاحية و الوصف, و Off-Page Optimization هي تهيئة كذلك لموقعنا و لكن عن طريق مواقع أخرى, ما أقصد هو على سبيل المثال نشر الموقع في مجلات و أدلة خاصة بالمواقع, و إرسال خلاصات الـ RSS إلى الأدلة المتخصصة, و نشر الموقع في الشبكات الإجتماعية و ارسال تدوينات للإشهار بموقعك في أماكن مخصصة و بناء الوصلات و غيرها ..

ما يجب تذكره - Must Remember

1. يجب عليك تتبع أخطاء HTTP, و معرقلات الزحف في موقعك بواسطة أداة مشرفي المواقع الخاصة بجوجل, و في حال وقوع أخطآء, إعمل فورا على إصلاحها.
2. جميع وسامات الميتا توضع بين وسمتي <head></head>.
3. عند بدئك لحملة بناء الروابط Building Links “أو ما يطلق عليها الباك لنكس” لا تذهب بسرعة و تعمل على إنشاء الكثير منها في وقت واحد, فعلى سبيل المثال إعمل على بناء 3 وصلات كل يوم, و آعمل على رفع العدد إلى 6, ثم 8 ثم … كل يوم .. و بوتيرة منتظمة.

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

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

لهذا سأحاول أن أتحدث بشكل عام عن الخطوة التالية وهي في الحقيقية أهم خطوة بعد ما تحدثنا عنه فوق !! وسأركز فيها عن المدونين بالضبط.

لتكون صديق محركات البحث فعلا عليك أن تجعل موقعك أو مدونتك ذات محتوى جيد وغني ويا حبذا لو كان فريدا ومميزا.

كيف ذلك يا ترى ؟

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

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

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

وهناك نقاط اخرى كثيرة قد أتطرق لها في تدوينات اخرى  إما هنا او في مدونة اخرى .. المهم انها ستكون مدونة عربية بالتاكيد ان شاء الله.

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

هاهو أحضرته (كنت وجدته على أوركيوت ) :

http://ar-blogger-tips.blogspot.com/2011/07/100.html

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

وفي إنتظار موافقة الاخ ياسر ونشره للموضوع أريد أن أقدم له شكري المسبق.

تحياتي للجميع.

Unknown

السبت, فبراير 11, 2012

الموضوع كامل

كيف تنشىء صفحتك الأولى بإستخدام لغة HTML إتش تى إم إل

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

والآن سنتعرف على أول أمر تبدأ به صفحة HTML :

<HTML>

.....................

</HTML>

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

ولاحظ معى أننا فى كتابة الأمر إستعملنا وسما للبدايه ووسما للنهايه, وهذا يعنى أن بقية أكواد HTML التى سنستخدمها لاحقا ستكون بين وسم البدايه ووسم النهايه الذى ذكرناهم.
وبقى لنا الآن أن نعرف ماذا سنضع بين هذين الوسمين, ولكن قبل ذلك أود أن أوضح أن

صفحة HTML تكون مكونه من جزئين

1. الرأس ( HEAD ) وهو بمثابة تعريف للصفحه
2. الجسم ( BODY ) أى محتوى الصفحه

وهكذا فإن شكل الكود لصفحة HTML يكون كالتالى

<HTML>

   <HEAD>

      <TITLE>

عنوان الصفحه

      </TITLE>

   </HEAD>

   <BODY>

المحتوى الذى تريد وضعه فى الصفحه

   </BODY>

</HTML>

وهذه الصيغه لابد لك أن تحفظها عن ظهر قلب, وهى ليست بالشىء الصعب ومع تكرار التعامل بها ستحفظها أعلم ذلك.

والآن دعونا نطبق هذه الأكواد عمليا

1. إفتح Notepad جديده كى تقم بتحرير الأكواد فيها, وإنتبه أنه لابد لك من أن تكتب الأكواد بيدك ولا تقم بنسخها ولصقها فى النوت باد, وذلك حتى تحفظها بسهوله, لأنى أضع هذه الدروس لكى تتعلمها لا لكى تنسخها.
2. قم بكتابة أكواد الصفحه التى اتفقنا عليها سابقا, وقم بكتابة عنوان الصفحه اذى تريده والمحتوى النصى الذى تريد وضعه فى جسم الصفحه
3. قم بحفظ الملف ونسميه بالإسم الذى نريده, ولكن علينا أن نختار الإمتداد كالتالى ( yaso.html ) وذلك الإمتداد هو الإمتداد الخاص بلغة إتش تى إم إل.

بعد الحفظ ستجد الملف موجود على شكل المتصفح الذى تستخدمه على حاسبك, كأن يكون على شكل الفايرفوكس أو جوجل كروم أو إنترنت إكسبلورر, قم بفتحه وسترى أن عنوان الصفحه الذى وضعته موجود بالأعلى والنص الذى كتبته فى جسم الكود موجود فى الصفحه نفسها.

وهكذا أصبح لديك صفحة إنترنت قمت أنت بتكويدها بنفسك.

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

Unknown

الأربعاء, فبراير 08, 2012

الموضوع كامل

إضافة أكواد الميتا تاج لوصف المدونه والكلمات المفتاحيه فى قوالب بلوجر

لوضع أكواد الميتا تاج لوصف المدونه والكلمات المفتاحيه والعديد من التوصيفات الأخرى إتبع الآتى
إفتح تحرير HTML لمدونتك وقم بالبحث عن الكود التالى

<head>

ثم أضف بعده مباشرة الكود التالى

<meta content='ضع هنا وصف مدونتك' name='description'/>
<meta content='ضع هنا الكلمات الكلمات المفتاحيه و افصل بينها بفاصلة' name='keywords'/>
<meta content='global' name='distribution'/>
<meta content='10 days' name='revisit'/>
<meta content='10 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='ضع إسم صاحب المدونه' name='author'/>
<meta content='ar' name='language'/>
<meta content='أكتب البلد التى تدون منها' name='country'/>

وقم بتغيير الكلمات المكتوبه باللغه العربيه فى الكود لما تمليه عليك تلك الكلمات ثم قم بحفظ القالب.

Unknown

الأربعاء, فبراير 08, 2012

الموضوع كامل

مقدمه حول لغة HTML إتش تى إم إل

ليس غريبا ونحن نقرأ كلمة HTML لأول مره أن نسأل أنفسنا, ما معنى هذه الحروف الأربع ؟!!
وكتعريف مصطلح لكلمة HTML فهى إختصار لجملة Hypertext Markup Language وهى تعنى ببساطه لغة وصف للنص تستخدم ( وسوم ) معروفه لدى متصفح الإنترنت مثل Google Chrome .

وينبغى الإشاره إلى أن لغة HTML ليست لغة برمجه مثل C++ أو الجافا, ولكنها لا تتعدى كونها وسوم تعطى شكلا للنصوص والصور.

لازال هناك غموض حول لغة HTML ... ؟؟ حسنا سنتحدث بوضوح أكثر.

أنظر إلى صفحة بحث جوجل الرئيسيه, وأنظر كيف هى مرتبه وبسيطه وجميله جدا والنصوص ظاهره والصور كذلك, وكيف أن الروابط فعاله, وحتى الموضوعات بعد البحث تجدها ثابته فى مكانها ومنظمه, ألم تسأل نفسك كيف تم كل ذلك وبمجرد كتابتك لعنوان صفحة جوجل فى متصفحك تفتح لك الصفحه بهذا التناسق والشكل ؟!!
ماذا لو أخبرتك بأن هذا الموقع يستخدم لغة HTML فى أحد دعائمه كى يظهر لنا بهذا الشكل .
إذا إعلم أن لغة HTML تصف لك محتوى موقعك, أى أنها تقوم بتعريف محتواك للمتصفح حتى يترجمها للزائر, فتظهر له.
وأضف إلى ذلك أن لغة HTML هى الأساس فى بدايتك لمعرفة الأكواد والتكويد والتعديل عليها وحتى تصميم وبرمجة المواقع, فهى اللغه الأساسيه دائما ولا غنى لك عن معرفة أركانها وقواعدها.

ما هى الوسوم

الوسم هو أمر أو تعليم أو وصيه أو إرشاد, ويكتب عادة بين هذين الرمزين <> وهو يملك إسما وأحيانا صفات تعرفه.
والذى يجب أن نعرفه أكثر هو أن معظم التعليمات أو الأوامر فى HTML لها وسم بدايه ويكون هكذا

< الوسم >

ولها وسم نهايه ويكون هكذا

</ الوسم >

مع ملاحظة الفرق بين وسم البدايه ووسم النهايه وهو وجود الرمز / فى وسم النهايه.

مثال

<tag> text </tag>

ملحوظه : هناك بعض الوسوم فى HTML ليس لها وسوم نهايه, وستتعرف عليها مستقبلا.

ماذا سنحتاج للدخول فى تعلم هذه اللغه

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

فقط بهاتين الأداتين ومتابعتك لدروسنا فى تعليم لغة HTML ستتعلم هذه اللغه وتتقنها بإحترافيه بإذن الله, وتابعونا فى تدوينتنا القادمه بإذن الله كى نستكمل سلسلة دروس لغة HTML إتش تى إم إل بكل بساطه وسلاسه.

Unknown

السبت, فبراير 04, 2012

الموضوع كامل

عمل شكل مخصص لكل إضافه فى قالب بلوجر وشرح كامل للأكواد

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

هناك بعض الخطوات التى يجب أن تفعلها

• تحديد الإضافه التى ترغب بتغيير مظهرها.
• إضافة أكواد ال سى إس إس CSS التى ستقوم بتغيير المظهر للإضافه.
• التحلى بالصبر قليلا ولا تمل بسرعه فالنتيجه ستكون مثيره للغايه.

الإختيار والتحديد

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

الكود الخاص بأى إضافه فى مدونتك ستجده على هذا الشكل

<b:widget id='HTML1' locked='false' title='صندوق التنبيهات أو للإعلان' type='HTML'>
<b:includable id='main'>
                <!-- only display title if it's non-empty -->
                <b:if cond='data:title != &quot;&quot;'>
                    <h2 class='title'><data:title/></h2>
                </b:if>
                <div class='widget-content'>
                    <data:content/>
                </div>
                <b:include name='quickedit'/>
            </b:includable>
</b:widget>

هذه الكلمه HTML1 هى الإسم المعرف بإضافة صندوق التنبيهات أو للإعلان وهذا هو عنوان الإضافه كما تكتبه أنت فى عنوانها عند إضافتها, و HTML هى نوع الإضافه.

وللعلم تتغير هذه المسميات بتغير نوع الإضافه, فقط أوضح لك الشكل, وعليك تحديد الكود فى مدونتك وذلك عن طريق عمل بحث عن عنوان الأداه أو الإضافه فى كود مدونتك.

إضافة أكواد ال سى إس إس CSS التى ستقوم بتغيير المظهر للإضافه

قم بالبحث فى كود مدونتك عن الكود التالى

]]></b:skin>

والآن ستضع كود سى إس إس التالى قبل الكود السابق مباشرة

#HTML1 {
border: 1px dashed #e2e2e2;
padding: 5px;
background:#f5f5f5;
font:14px bold arial,tahoma;
color:#222222;
}

وهذا الكود الملون باللون الأحمر هو مثال فقط لشكل الكود الذى ستضيفه, حيث تضع أنت مكانه الأكواد التى تود إضافتها لتحصل على الشكل الذى ترغب به لإضافتك او لأداتك.

بعض الخيارات الإضافيه للتعديل على الأداه ومحتوياتها

للتعديل على شكل الروابط فى الأداه

#HTML1 a {
color:#5f5f5f;text-decoration:none;}
#HTML1 a:hover {
color:#cccccc;text-decoration:underline;}
#HTML1 a:visited {
color:#e1e1e1;text-decoration:underline;}

للتعديل على الصور فى الأداه

#HTML img {
border:3px solid #666444;padding:4px;background:#989765;}
#HTML img:hover {
border:3px dashed #666444;background:#f1f1f1;}

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

أرجو أن أكون قد وفقت فى تقديم هذا الشرح بشكل مبسط ويصل للجميع, ولا تترددوا فى ترك تعليقاتكم وتساؤلاتكم وطلباتكم.

Unknown

الأربعاء, فبراير 01, 2012

الموضوع كامل