تسهيل الإستخدام

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

مايجب عليك فعله لجعل موقعك سهل الاستخدام للجميع

• الاهتمام بتباين الالوان.
• توفير نص بديل للصور.
• توفير نص وصفي للروابط.
• الاهتمام بتوفير تسميات لنماذج الإدخال.
• إستخدام هيكلية العناوين.
• دعم التنقل عبر لوحة المفاتيح

الاهتمام بتباين الالوان

توفير نص بديل للصور

توفير نص وصفي للروابط

الاهتمام بتوفير تسميات لنماذج الادخال

استخدام هيكلية العناوين

دعم التنقل عبر لوحة المفاتيح.

نظام بلوجر

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

كيفية إنشاء مدونة او موقع بواسطة بلوجر

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

نطاق بلوجر المجاني الفرعي

توفر بلوجر نطاق فرعي مجاني مدي الحياة مع إمكانية ربط نطاقك الخاص إن وجد، وهذا النطاق يكون باللاحقة blogspot.com، اذا كان اسم موقعك ahmed فإن نطاقك الفرعي يكون كالاتي :-
ahmed.blogspot.comوهكذا

مكونات بلوجر

• لوحة تحكم بلوجر.
• أدوات بلوجر.
• دوال بلوجر.
• قوالب بلوجر.

لوحة تحكم بلوجر

توفر بلوجر لوحةتحكم سلسة تستطيع من خلالها ادارة مدونتك بسهولة ويسر.

أدوات بلوجر

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

قوالب بلوجر

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

دوال بلوجر

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

☆ملاحظات هامة

• يمكن إنشاء موقع او مدونة في بلوجر وادارتها بواسطة الهاتف.
• يمكن إنشاء موقع او مدونة في بلوجر وادارتها دون معرفة بلغات تطوير الويب.
• يمكن إنشاء مدونة او موقع في بلوجر وربطه بمنصة (google AdSense) لعرض اعلانات والحصول علي اموال نظير عرض الاعلانات.
• لتعديل بعض دوال بلوجر تحتاج الي معرفة بلغة html.

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

لغة تصميم صفحات الإنترنت (Css) المقدمة

Cssهي لغة تصميم صفحات الانترنت، تتكون من خصائص ومحددات، تتحكم في مظهر وشكل الصفحات المكتوبة بلغة html من حيث التخطيط وإضافة الالوان والتباعد والحشو وغير ذلك، ويتم إضافة Css داخل ملف Html بطرق عديدة.

مكونات Css

• خصائص: تهتم بتخصيص شكل العنصر.
• محددات: تهتم بتخصيص عدة عناصر.

خصائص Css

هي عبارة عن قواعد تهتم بتخصيص شكل ظهور العنصر ومظهره في الصفحة.

مثال لخصائص Css:-

color | margin | padding | font-size
border | text-align | background-color

كيفية كتابة خصائص Css مثال:-

color:red; 

الشرح والتوضيح

• color هو اسم الخاصية.
• العلامة:فاصل بين اسم الخاصية وقيمتها.
• red هي قيمة الخاصية.
• العلامة ; هي نهاية الخاصية

محددات Css

وهي استخدام عدة خصائص في مكان واحد لاستهداف عنصر واحد او عناصر متعددة، وتنقسم المحددات الي اربع اقسام هي:-

المحدد العام

يستهدف جميع العناصر في الصفحة ويرمز له بعلامة النجمة * اي خاصية تكتب بداخله تطبق علي جميع العناصر في الصفحة مثال:-

*{.....} 

محدد العنصر

يستهدف عنصر محدد في الصفحة، يستهدف اسم العنصر مباشر واي خصائص بداخله تطبق فقط في العنصر نفسه مثال:-

h1{.....} 

محدد الفئة

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

 .cool{.....} 

محدد المعرف

يستهدف عنصر واحد فريد في الصفحة تكتب علامة هاش # قبل الاسم لاستهداف عنصر واحد فقط في الصفحة ولا يقبل التكرار ويستخدم السمة id مثال:-

#header{.....} 

طرق إضافة Css داخل ملف Html

تتم إضافة Css بعدة طرق وهي:-

السمة style

العنصر <style>

العنصر <link>

محررات html في لغة(html)

ماهي محررات (html editors) ؟ هي عبارة أدوات او تطبيقات لكتابة اكواد لغة (html) وتعديلها، يمكن كتابة وسوم وعناصر لغة (html) وتحريرها في اي محرر نصوص عادي، لكن المحررات الخاصة بلغة (html) توفر خيارات إضافية أخري منها إضافة ميزة معاينة نتيجة الكود وكيفية ظهوره قبل ادراجه في صفحة ويب ،وكذلك إضافة ميزة تمييز النصوص وهي مايعرف بتلوين النصوص البرمجية لتنظيمها حتي يسهل قرأتها وفهمها، يوجد نوعين من محررات لغة (html) النوع الأول عبارة عن تطبيقات غير متصلة بشبكة الانترنت وهي عبارة عن تطبيقات يتم تنزيلها في جهاز الكمبيوتر او الهاتف لتحرير النصوص مثل تطبيقات notepad وغيره من التطبيقات ، النوع الثاني محررات تعمل متصلة بشبكة انترنت وهذا النوع من المحررات متوفر في بعض مواقع الانترنت حيث توفر بعض من المواقع الإلكترونية هذا النوع للمستخدمين من هذه المواقع موقع w3shoolوcode pen وغيره من المواقع.
لدينا محرر بسيط وسهل خاص بموقعنا يتميز بعرض نتيجة الكود وكيفية ظهوره مباشر انظر ادناه.

محرر عربيكو لتحرير نصوص (html)

السابقالتالي

عناصر البيانات المرئية في لغة (html)

ماهي العناصر المرئية (Visual Elements) ؟ هي العناصر التي تنشئ محتوي مرئي للمستخدم ويتفاعل معها، مثل: الصور والنصوص والروابط والقوائم والعناوين والجداول وغيرها من البيانات المرئية للمستخدم، جميع العناصر المرئية تكون داخل عنصر الجسم<body>في مستند (html).

أهم العناصر المرئية

عنصر الفقرة<p>

عنصر يستخدم لإضافة فقرة نصية مثال :

<p>هذه فقرة </p>

عناصر العناوين<h1> الي<h6>

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

<h1>عنوان اول </h1>

<h2>عنوان ثاني </h2>

<h3>عنوان ثالث </h3>

<h4>عنوان رابع </h4>

<h5>عنوان خامس </h5>

<h6>عنوان سادس </h6>

ملاحظة

• تستخدم عناصر العناوين لاضافة عناوين فرعية داخل صفحات الانترنت.
• عنصر العنوان الاول <h1>له اهمية كبيرة لمحركات البحث فهو يمثل العنوان الاساسي للمحتوي ويجب الا يتكرر في الصفحة أكثر من مرة.
• عنصر العنوان <h2> ثاني اكثر اهمية ويليه عنصر العنوان <h3> ويكون ترتيب بقية العناوين هكذا الي العنصر <h6>وهو يمثل اقل أهمية .

عنصر الصورة <img>

وهو عنصر يستخدم لاظهار صورة للمستخدم، وهو من العناصر التي تحتاج الي سمة تحدد مسار او رابط الصورة مثل السمة srcمثال:

<img src="مسار او رابط الصورة هنا"/>

عنصر الرابط <a>

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

<a href="مسار الرابط">...</a>

عناصر القائمة <ol>و <ul>و<dl>

وهي عناصر تستخدم لعمل قوائم لغرض محدد مثل قائمة اصناف محددة او قائمة نصوص محددة، وهي ثلاث عناصر، ويتم إضافة العنصر <li>داخل هذه القوائم لتنظيم القائمة، هناك ثلاث انواع للقوائم منها قائمة مرتبة<ol> وهي قائمة تضع ترقيم تلقائي للبيانات واخري وقائمة غير مرتبة<ul> وهذه قائمة نقطية تضيف نقاط تلقائيا للبيانات مثال لذلك

قائمة مرتبة
<ol>
<il>طماطم</li>
<il>تفاح </li>
<il>عنب </li>
</ol>

النتيجة

1. طماطم
2. تفاح
3. عنب

قائمة غير مرتبة نقطية
<ul>
<il>طماطم</li>
<il>تفاح </li>
<il>عنب </li>
</ul>

النتيجة

• طماطم
• تفاح
• عنب

عناصر الجدول<table>

وهو عنصر يستخدم لعمل جدول للبيانات هناك عناصر مصاحبة لعنصر الجدول تستخدم لاضافة صفوف واعمدة مثل العناصر الاتية
<td>و<tr>و<th>و<tbody> وتكون هذه العناصر داخل عنصر الجدول.

كيفية كتابة العناصر المرئية داخل صفحة

يجب ان تكون داخل العنصر <body>هكذا

<body> هنا </body>

مثال:-
اذا كانت لدينا هذه العناصر

عنوان جانبي
<h3>العناصر المرئية</h3>

عنصر فقرة نصية <p>هي عناصر تظهر للمستخدم. </p>

سيكون الامر هكذا داخل صفحة الويب

<!DOCTYPE html>
<html>
<head></head>

<body>
<h3>العناصر المرئية</h3>
<p> .هي عناصر تظهر للمستخدم</p>
</body>

</html>

ستظهر هكذا في الصفحة

العناصر المرئية

هي عناصر تظهر للمستخدم.

ويمكن عمل ذلك تطبيق ذلك عمليا في محرر html <!DOCTYPE html> <html> <head></head> <body> <h3>العناصر المرئية</h3> <p>.هي عناصر تظهر للمستخدم</p> </body> </html>

السابقالتالي