تصميم المواقع بلغة html css - التدوين بمنصة بلوجر

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

 

أسياسيات في تصميم المواقع الإلكترونية والتدوين.


أسياسيات في تصميم المواقع الإلكترونية والتدوين
مدخل عام تصميم المواقع الإلكترونية والتدوين

مقدمة

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

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

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

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

§        تعريف مصطلحات لابد من معرفتها

قبل ان نبدا في الحديث عن تصميم المواقع هناك بعض المعلومات والمفاهيم التي لابد ان نفهمها جيدا


 

 

الروابط التشعبية (Hyperlinks):

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


البروتوكول (Protocol):

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


الإنترنت (Internet):

الإنترنت هي نظام عالمي من شبكات الحاسوب المترابطة التي تستخدم بروتوكول إنترنت  (TCP/IP) لخدمة المليارات من المستخدمين في جميع أنحاء العالم. وهي شبكة من الشبكات التي تتكون من الملايين من القطاعين العام والخاص، والأعمال التجارية والأكاديمية والشبكات الحكومية ، من المحلية إلى النطاق العالمي، التي ترتبط من قبل مجموعة واسعة من تقنيات الشبكات الالكترونية واللاسلكية والبصرية. والإنترنت يجمع تشكيلة واسعة من مصادر المعلومات والخدمات.

 

شبكة الكمبيوتر(Computer Network):

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


الشبكة العنكبوتية العالمية (World Wide Web‏):

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

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

إن الإنسان والكمبيوتر لهما ميزتان متشابهتان، وهي أن كل منهما يستعمل لغة معقدة للتفاهم. فإذا أراد شخصان يتحدثان لغتين مختلفتين، ولنقل العربية واليابانية مثلا أن يتفاهما، فإن عليهما أن يستخدما مترجما بينهما، أو أن يتحدث الاثنان بلغة ثالثة ولنقل الإنجليزية مثلا . إن أجهزة الكمبيوتر غير موحدة في طريقة صنعها أو تشغيلها، فهي تعمل بلغات وبنظم تشغيل مختلفة، منها نظام الويندوز ونظام يونكس ونظام ماكينتوش وغيره، ولكي نجعل هذه الأجهزة تتصل مع بعضها بواسطة شبكة واحدة ( الإنترنت) وتتفاهم فيما بينها من خلال تلك الشبكة، فإن الإنترنت يستخدم مجموعة بروتوكولات معينة، ودعنا هنا نسميها "لغة" من أجل التقريب، وهي: Transmission Control Protocol / Internet Protocol ويطلق عليها اختصارا TCP/IP وقد تم اختراعها سنة 1970، وكانت جزءا من أبحاث مؤسسة DARPA، التي قامت بتوصيل أنواع مختلفة من الشبكات وأجهزة الكمبيوتر.

 

بروتوكول TCP/IP:

TCP‏ : (بروتوكول التحكم بالإرسال - Transmission Control Protocol) جزء أساسي من حزمة بروتوكولات الإنترنت. حيث يمثل هو والبروتوكول IP‏ أولى برتوكولات هذه الحزمة، لذلك يرمز لهذه الحزمة بالرمز (TCP/IP). على أن لكل بروتوكول  مهمة خاصة به، حيث يعمل IP في طبقة أدنى وهي طبقة الشبكة (بالإنجليزية: Network Layer‏) ويتحكم بشكل أساسي بعمليات نقل الرسائل من المصدر إلى الوجهة، في حين يعمل TCP في طبقة أعلى والتي تسمى طبقة النقل (بالإنجليزية: Transport Layer‏) ويتعامل بشكل أساسي مع التطبيقات التي تستخدمه لنقل البيانات عبر الإنترنت.

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

بينما يقوم IP: (Internet Protocol) بالعمل في الطبقة الثانية طبقة وصلة البيانات (Internet Layer)، ويُستعمل هذا البروتوكول لتحديد وجهات رزم المعلومات في اتجاهاتها الصحيحة. إن كل رزمة لها عنوان IP خاص بالكمبيوتر الذي أرسل تلك الرزمة، وكذلك عنوان IP بالكمبيوتر المرسلة إليه تلك الرزمة.

إن لكل كمبيوتر عنوان IP يتفرد به.  ونظرا لصعوبة تذكر هذه الأرقام، فقد تم اعتماد أسماء موازية لها تدعى (DNS = Domain Name Server)، وهذه الأسماء أسهل للحفظ، كما أنه يمكن أن يكون لها مدلولا معينا، سواء كان تجاريا أو تعليميا أو حكوميا أو غيره. وعندما تكتب اسما لكمبيوتر ما، وهو في الواقع عنوانه، فإنه في الواقع يترجم إلى اسمه الرقمي الأساسي.

إن بروتوكول TCP/IP في الواقع تعتمد عليه جميع أساليب العمل خلال الإنترنت وأنه على أسس هذا البرتوكول تأسست بروتوكولات تكون عائلة واحدة من خلال بروتوكول TCP/IP، ومن أهم هذه البروتوكولات:

 1) Simple Mail Transfer Protocol ( SMTP) ويتحكم في طريقة إرسال واستقبال البريد الإلكتروني.

 2) File Transfer Protocol ( FTP) وذلك لنقل الملفات بين أجهزة الكمبيوتر.

 3) ( HTTP) Hypertext Transfer Protocol وذلك لبث أو إرسال المعلومات على صفحات الشبكة العنكبوتية العالمية World Wide Web (www).


بروتوكول (HTTP):

الكلمة http هي اختصار (Hyper Text Transfer Protocol) أي بروتوكول نقل النصوص التشعبي و هذه هي اللغة المتعارف عليها لنقل النصوص والصور بين جميع أجهزة الحاسب على الإنترنت. فعندما يبدأ عنوان موقع بكلمة http يعني ذلك أنك تطلب من جهازك أن يقوم بإحضار صفحة إنترنت.

لكن هذا لا يعني أن كلمة http هي الكلمة المفتاحية الوحيدة التي يمكنك استخدمها في متصفحك، لأنه في الواقع هناك أكثر من بروتوكول يمكنك استخدامه منها ://FTP اختصار (File Transfer Protocol) أي بروتوكول نقل الملفات.. فعندما تبدأ عنوان الموقع به فأنك تخبر جهازك بأنك على وشك تنزيل ملفات من صفحة الإنترنت.


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










أساسيات لغة HTML


I.            المقدمة

HTML    (‌ Hyper Text Markup Language)   لغة النصوص التشعبية والتي تستخدم في تصميم صفحات الويب، وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغةASP  وPHP … بل هي لغة وصفية وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الويب (internet explorer، Firefox…..) وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار.

وكان   Tim Berners-Lee المؤلف الرئيسي للغة HTML مع بعض مساعديه في CERN ، والآن أصبحت منظمة الويب العالمية (The World Wide Web Consortium  <==W3C، هي منظمة عالمية هدفها تطوير معايير الويب) هي الراعية لهذه اللغة والمسؤولة عنها وهو رئيسها.

II.         الفصل الأول: أساسيات وثيقة html.

1.     العناصر والخصائصElements and Attributes

1.1.                   العناصر Elements

إن صفحة HTML  تتكون من وسوم (Tags) ، وتوجد لغالبية هذه الوسوم بداية ونهاية.

وتعريف الوسوم  باختصار بأنها توصيفات نستخدمها لكي نضعها في بداية العناصر وعند نهايتها. وتستخدم لتكوين عناصر HTML، وهي محاطة ما بين العلامتين < و > وتسمى الأقواس الحادة.

تأتي وسوم  HTML غالباً في شكل أزواج مثل <b> و </b>، الوسم الأول في الزوج هو وسم البداية، و الوسم الثاني في الزوج هو وسم النهاية، والنص بين وسم البداية و النهاية هو محتوى العنصر.

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

وهذا مثال لعنصر HTML وشكل الكود:

<b> Texte gras  </b>

يبدأ عنصر HTML مع وسم البداية: <b>

و محتوى عنصر HTML هو: Texte gras

ينتهي عنصر HTML مع وسم النهاية: </b>

و الهدف من الوسم <b> هو تحديد عنصر HTML الذي تريده أن يجعله عريضا في المتصفح.

 

1.2.                   الخصائص attributs

داخل العنصر يمكن تحديد خواصه و إسناد لها قيمة ، ولتأخذ مثال وسم الخط (font) يمكن تضمين خواص بداخله كحجم الخط (size) ويسند له قيمة مثلا (7)، وخاصية اللون (color) ويسند له قيمة مثلا (green).

(لاحظ أن قيمة الخاصية تكون دائما مكتوبة بين إشارتي التنصيص" " )

مثال حي:

<font  size="7"  color="green">  je sais utiliser les attributs  </font>

 

2.     بنية صفحة HTML La structure globale du document

بنية صفحة HTML La structure globale du document

وهذا مثال لشكل وثيقة Html

الصورة رقم1 تبين محتوى الوثيقة html

 

أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html>، لذلك قبل أن تبدأ أي شيء أكتب <html> في أول سطر في برنامج المفكرة (Notepad)، <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة (الصفحة) ستكتبها بين <html> و</html> كما هو واضح في الصورة والمثال أعلاه.

كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك:

أ‌.        في برنامج المفكرة  (Notepad) اختر  من قائمة "Fichier" في القائمة العلوية    "”enregistrez sous.

ب‌.   اختر "Tous le fichiers" في نافذة " type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.

ت‌.   احفظ الصفحة باسم "page1.html" الأحرف الأربعة الأخيرة .html تشير إلى أن الملف هو من نوع HTML،

وتتكون صفحة html من قسمين:

ü     راس الصفحة head:

تحتاج صفحتك لرأس head والذي يقدم معلومات حول الصفحة للمتصفح ومعلومات لمحركات البحث....، الوسمين الخاصين بالرأس هما <head>  كوسم بداية الرأس و </head>  كوسم الاغلاق، ويضم رأس الصفحة head عناصر من بينها وسم العنوان title  والذي يظهر على شريط العنوان "barre de titre du navigateur "

ü     جسم الصفحة body:

 و تحتاج صفحة HTML ل جسم body والذي سيضم المحتويات التي تريد أن تضعها في الصفحة ليراها الزائر،  head أو رأس الصفحة يوضع دائما فوق body أو جسم الصفحة.

ومن مكونات صفحة HTML:

§        التعاليق Commentaires :

الوسم التالي وسم الملاحظات <!-- Commentaires  --> ونستخدمه عند الحاجة لكتابة بعض الملاحظات الخاصة أو العبارات التوضيحية ضمن الملف والتي يقصد أن لا تظهر عند استعراض هذا الملف في المتصفح.

§        الرموز الخاصة Caractère speciaux:

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

 وإليك جدول ببعض هذه الرموز ووسومها المكافئة.

مثال بسيط.

 

 

 

III. الفصل الثاني: تنسيق النص  Text Formatting

1.     الألوان Colors

تعريف ثان للخاصية:

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

في المثال أسفله الوسم يقوم بتعريف عنصر جسم الصفحة: <body>. عند إضافة خاصية bgcolor, يمكنك أن تخبر المتصفح بأن لون خلفية صفحتك أخضر عن طريق إسناد القيمة green  للخاصية bgcolor داخل الوسم <body> ، هكذا:

<body bgcolor="green">

</body>

كما يمكن عمل خلفية خصراء للصفحة لكن بشكل أخر هو:

<body bgcolor="#008000 ">

</body>

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

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

ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية

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

وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد الألوان التي يمكن الحصول عليها بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط.

حسنا، لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة ب نظام العد السداسي عشر (Hexadecimal) (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداس عشري.

إذن فالرقم السداس عشري FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.

وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: 6699CC أما اللون الأسود فرقمه هو 000000.

 

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

 

Black

 

White

 

Red

 

Green

 

Marron

 

Purple

 

Navy

 

Blue

 

Teal

 

Lime

 

Gray

 

Silver

 

Olive

 

Aqua

 

Fuchsia

 

Yellow

 

 أمثلة أخرى مفيدة تستفيد منها في اختيار ألوانك:  المثال 1 ، المثال 2 ، المثال 3 ، المثال 4 .

 

 

 

 

2.     تنسيق الفقرات  Paragraphs Formatting

1.1.                   محاذاة النص – خاصية Align

الوسم <p> يعرف الفقرة  .(Paragraph)

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

ويمكننا محاذاة النص بأي طريقة نرغب، فخاصية Align تحدد محاذاة الفقرة وهي تأخذ القيم  Left، Center، Right، Justify وهذا مثال توضيحي:

 

<p align="left"> alignement du paragraphe à gauche (valeur par defaut) </p>

<p align="center">alignement du paragraphe au centre </p>

<p align="right">alignement du paragraphe à droite </p>

<p align="justify">justification gauche et droite du paragraphe </p>

 

1.2.                   محاذاة النص – خاصية Dir

أما الخاصية dir والتي نستخدمها أيضاً مع <p> فتقوم بتحديد إتجاه قراءة النص وتأخذ القيم

ltr :    إتجاه النص من اليسار إلى اليمين (left to right)

rtl :    إتجاه النص من اليمين إلى اليسار  (right to left)

 وهذا مثال توضيحي: (تذكر هذه الخاصية جيداً فهي مهمة عند كتابة صفحات باللغة العربية)

<p dir="ltr">alignement de gauche à droite</p>

<p dir="rtl">alignement de droite à gauche </p>

 

1.3.                   الفقرات المقتبسة  Blockquote

ولتنسيق الفقرات أيضاً يوجد الوسوم

<blockquote> ... </blockquote> أي وسوم الفقرات المقتبسة. ووظيفتها تمييز الفقرة من خلال إدراج مسافة إضافية على الهامشين الأيمن والأيسر لها.

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

<blockquote>

Sir Timothy John "Tim" Berners-Lee, OM, KBE, FRS, FREng, FRSA (born 8 June 1955[1]), also known as "TimBL", is a British physicist, computer scientist and MIT professor, credited for his invention of the World Wide Web, making the first proposal for it in March 1989.[2] On 25 December 1990, with the help of Robert Cailliau and a young student at CERN, he implemented the first successful communication between a Hypertext Transfer Protocol (HTTP) client and server via the Internet.

</blockquote>

 

1.4.                   المنسق مسبقاً Preformated 

وهذا الوسم يحتفظ بالشكل التنسيق المسبق الذي تم إعداده به.

وهذا مثال توضيحي:


<pre>              A                     B                     C                     D

                        E                     F                     G                     H

                        I                      J                      K                     L                                

</pre>

 

1.5.                   الفراغات  Spaces

الفراغات تعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم&nbsp; (والأحرف هي اختصار للعبارة Non Breakable Space). وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب. وهذا مثال توضيحي:

Definir Google comme &nbsp; &nbsp; &nbsp; moteur de recherche par defaut sur Internet explorer

 

1.6.                   سطر جديد BR - Line Break

سوف نستخدم الوسم </ br> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية).

Definir Google comme <br /> moteur de recherche par defaut sur Internet explorer

1.7.                   خط أفقي Horizontal rule

سوف نستخدم الوسم </ hr> في رسم خط أفقي. والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية)، مثال توضيحي

Definir Google comme <hr /> moteur de recherche par defaut sur Internet explorer

 

1.8.                   التنسيقات والتأثيرات التي يمكن إضافتها إلى النصوص

1.8.1.                        النص العريض bold

النص  العريض ونستخدم له الوسوم التالية، مع مثال توضيحي:

<b> Texte en gras </b>

<strong> Texte en gras </strong>

1.8.2.                       النص المائل italic

النص  المائل ونستخدم له الوسوم التالية، مع مثال توضيحي:

<i> Texte italique </i>

<em> Texte italique </em>

1.8.3.                       النص المسطر   Underlined

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

<u> Texte Souligne  </u>

1.8.4.                       النص المرتفع Superscript Text

النص  المرتفع   ونستخدم له الوسم التالي، مع مثال توضيحي:

Texte en <sup>  exposant  </sup>

1.8.5.                       النص المنخفض Subscript Text

النص  المنخفض ونستخدم له الوسم التالي، مع مثال توضيحي:

Texte en <sub>  indice  </sub>

1.8.6.                       خط كبير Big Text

النص  الكبير ونستخدم له الوسم التالي، مع مثال توضيحي:

Texte en <big>  indice  </big>

1.8.7.                       النص الصغير Small Text

النص  الكبير ونستخدم له الوسم التالي، مع مثال توضيحي:

Texte en <small>  indice  </small>

1.8.8.                       نص يعترضه خط  Striked Text

نص يعترضه خط  Striked Text ونستخدم له الوسوم التالية، مع مثال توضيحي:

  <strike>Texte barre</strike>

   <s>Texte barre</s>

1.8.9.                       نص الآلة الطابعة TeleType Texte

نص الآلة الطابعة TeleType ونستخدم له الوسم التالي، مع مثال توضيحي:

style machine à ecrire

<tt>style machine à ecrire</tt>

llllllllll

qqqqqqqqqqq

<tt> llllllllll</tt>

<tt> qqqqqqqqqqq</tt>

وهذا النص يعرف أيضاً بالنص موحَد المسافات Monospaced Text.

وفي الخير يمكن لك أن تجمع عددا من التسيقات معا في نص واحد.

 

 

 

 

 

 

 

3.     العناوين   Headings

هناك وسوم خاصة تستخدم لتمييز العناوين headings في صفحات الإنترنت وهي:

<hn> ... </hn> ، وحرف n هو رقم بين 1 – 6  يمثل مستوى أهمية العنوان، وهذا مثال توضيحي:

 

<h1> heading 1 </h1>

<h2> heading 2 </h2>

<h3> heading 3 </h3>

<h4> heading 4 </h4>

<h5> heading 5 </h5>

<h6> heading 6 </h6>

 

4.    الخطوط   Fonts

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

§          خاصية نوع الخط  Face

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

<font face="Verdana">Texte en Verdana</FONT><br />

<font face="Times New Roman">Texte en Times New Roman</font>

§          خاصية لون الخط   Color

هذه الخاصية تحدد لون الخط، وذلك بنفس مبادئ تحديد الألوان، وهذا مثال توضيحي:

<font color="#FF0000">Texte en rouge</font>

§          خاصية حجم الخط Size

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

ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم الذي نريده مباشرة.

<font size="3">This size  3!</font>

الأسلوب الثاني فهو النسبي: فتكتب الأرقام من 1 إلى 6 مرفقة إما بإشارة + أو بإشارة  - . وهذا مثال توضيحي:

ملحوظة: الإعدادات الافتراضية هي خط عادي، نوعه Times New Roman وحجمه 3 (بمقياس متصفحات الإنترنت(.

<font size="+3">This size  3!</font>

 

5.     الوصلات التشعبية  hyperlinks (or links)

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

 نستخدم الوسوم  <a> ... </a> ، كوسوم أساسية لإدراج الوصلات التشعبية، وهي اختصار لكلمة Anchor. وهي لا تعمل لوحدها بل تتطلب إضافة خصائص معينة أولها وأهمها الخاصية Href والتي نحدد من خلالها الموقع الذي نريد الدلالة عليه، وتعني كلمة Href

 "href " ===è [h] ypertext [ref]erence ===è reference du lien ===è مرجع النص التشعبي

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

<a target="_blank"  href="http://www.google.com">google</a>  <br />

<a href="http://www.yahoo.com">yahoo</a>

وهناك أربع حالات للروابط:

a:link  الرابط العادي

a:visited  الرابط تمت زيارته

a:hover   شكل الرابط عند تمرير الفأرة

 a:active  شكل الرابط النشط

و هذا مثال توضيحي.

 

 


6.     القوائم  Lists

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

أولهما القوائم المتسلسلة Ordered Lists. واليك المثال التالي عليها:


    <ol>

        <li> element a </li>

        <li> element b </li>

        <li> element c </li>

        <li> element d </li>

    </ol>

وثانيهما القوائم غير المتسلسلة Unordered Lists وهذا مثال عليها

<ul>

<li> element a </li>

<li> element b </l>

<li> element c </li>

<li> element d </li>

<ul>

والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي Type ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم <ul> أو <ol> وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطيع استخدامها أيضاً مع وسم البنود <li> لإعطاء تحكم أكبر في مظهر القائمة من خلال تحديد رمز مختلف لكل بند.

 

فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: A, a, I, i التي تغير رموز الترقيم من الأرقام العادية الإفتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية كما ترى في الجدول التالي:

<ol type="A">

<ol type="a">

<ol type="I">

<ol type="i">

  1.  
  2.  
  3.  
  4.  
  5.  
  1.  
  2.  
  3.  
  4.  
  5.  
  1.  
  2.  
  3.  
  4.  
  1.  
  2.  
  3.  
  4.  
  5.  

وهذا مثال شامل:

إن الرمز الموجود عند كل بند في القائمة غير المتسلسلة هو عبارة عن نقطة سوداء يطلق عليها اسم Disc وهي المعرفة ضمناً في خاصية Type. لكن هناك رموز أخرى يمكن إظهارها وهي المربع square, والدائرة المفرغة circle وتعرف بالشكل التالي: <ul type="square">

وهذا مثال للرموز قبل بنود القائمة غير المتسلسلة.

قوائم الشرح أو التعريفات Definition Lists

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

ونحتاج لإنشاء هذه القوائم إلى ثلاثة وسوم:

الأول <dl> ... </dl> (Definition List) لتعريف بداية ونهاية القائمة.

والثاني <dt> (Definition Term) ويوضع قبل كل مصطلح لتحديده، وهو وسم مفرد.

أما الثالث فهو <dd> (Definition Data) وهو وسم الشرح أو التعليق وهو أيضا مفرد. ولنقم الآن بكتابة كود مثال للقائمة

<dl>

     <dt>HTML <dd>Hyper Text Markup Language </dd> </dt>

     <dt>WWW <dd>World Wide Web‎ ‎</dd> </dt>

     <dt>FTP <dd>File Transport Protocol‎ ‎</dd> </dt>

     <dt>GIF <dd>Graphical Interchange Format </dd>‎ ‎</dt>

     <dt>JPG, JPEG <dd>Joint Photographic Experts Group </dd>‎ ‎</dt>

</dl>

مثال للقائمة مختلطة الوسوم

IV.   الصور Images

لإدراج صورة في صفحتك  فإنك تخبر المتصفح بأنك تريد وضع صورة بالوسم  <img> وموقعها  يكون بواسطة الخاصية src وهي اختصار source والتي نكتب فيه مسار الصورة . وهذا مثال توضيحي:

<img src="images/ads.jpg” title=”شبكة صناع الأجيال    />

لاحظ كيف أن وسم img هو في نفسه وسم البداية والإغلاق، مثل <br /> لا يرتبط بنص معين.

 الخاصية التالية التي تستخدم مع <img> هي title وفيها نحدد نصاً بديلاً يظهر مكان الصورة. وهذا النص يلاحظ خصوصاً عندما يكون خيار "إظهار الصور تلقائياً" غير فعال في المتصفح. كما تستطيع ملاحظته في الفترة التي تسبق تحميل الصور وخاصة في المواقع بطيئة التحميل.

 هناك خاصيتان مهمتان وهما width والذي يعني العرض وheight يعني ارتفاع الصورة، سوف نطبق طولا وعرض للصورة السابقة ونلاحظ التغيير،  . وهذا مثال توضيحي:

<img src="images/ads.jpg" title=”شبكة صناع الأجيال"  width="234" height="30"   />

الخاصية الحدود والتي تستخدم مع الوسم <img> هي border ووظيفتها إضافة إطار حول الصور والتحكم بسُمكِه. وهذه الخاصية تستخدم بشكل خاص عند تعيين صورة ما كوصلة تشعبية، ويتم التحكم بالسُمك من خلال إسناد رقم يمثل السُمك بالبيكسل. والقيمة الإفتراضية له هي 0 أي لا يوجد إطار حول الصورة.

مثلاٌ لإضافة إطار سُمكه 5 بيكسل نكتب الشيفرة التالية:

<img src="images/ads.jpg" title="شبكة صناع الأجيال" border="5px"     />

 

 

 

 

 

 

 

 

 

 

V.         الجداول Tables

النوع الأول البسيط م الجداول

الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض في شكل  أعمدة وصفوف، ولرسم جدول داخل وثيقة هتمل (document HTML) نستخذم العنصر table  ونعرف سطور الجدول ب tr التي تعني (table row) ، وسوف نعرف كل خلية ب td التي تعني (table data)

وهذا مثال توضيحي لجدول بسيط:

    <table border="1" width="500px">

        <tr>

            <td width="50%">ligne 1, colonne 1 </td>

            <td width="50%">ligne 1, colonne 2 </td>

        </tr>

        <tr>

            <td width="50%">ligne 2, colonne 1 </td>

            <td width="50%">ligne 2, colonne 2 </td>

        </tr>

    </table>

كل سطر من الجدول يتكون من خلايا التي نضع داخلها النصوص أو البيانات، فهناك عنصران، الأول ذكرناه سابقا td أما الثاني فهو th والذي يعني (table head) يعني رأس الجدول، والفرق بين هذين النوعين هو أن هذا الأخير th  يستعمل فقط في رأس الجدول، وهذا مثال توضيحي لننفس الجدول أعلاه مع تغيير فقط الرأس.

خاصيتان هما colspan  وrowspan تستخدمان لتحكم بالجداول بطريقة محكمة.

Colspan هي اختصار "column span"، Colspan تستخدم في الوسم <td> لتحدد عدد الأعمدة التي ستتمدد لها الخلية، وهذا مثال توضيحي 1، مثال ثان.

<table border="1">

<tr>

<td colspan="3">Cell 1</td>

</tr>

<tr>

<td>خلية 2</td>

<td>خلية 3</td>

<td>خلية 4</td>

</tr></table>


rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها، وهذا مثال توضيحي:

<table border="1">

<tr>

<td rowspan="3">خلية 1</td>

<td>خلية 2</td>

</tr>

<tr>

<td>خلية 3</td>

</tr>

<tr>

<td>خلية 4</td>

</tr>

</table>

    في المثال أعلاه أعطينا الخاصية rowspan القيمة "3" للخلية 1، هذا يعني أن الخلية يجب أن تتمدد فوق ثلاث صفوف، الصف الذي تقع فيه الخلية مع صفين آخرين أسفلها، الخلية 1 والخلية2 التان تقعان في نفس الصف، بينما الخلية 3 والخلية أربع تشكلان صفين منفصلين.

المزيد من الخصائص مع وسم <table> ... </table>



border

تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود

<table border="5">
<table border="0">

width

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

<table width="600">
<table width="80%">

height

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

<table height="500">
<table height="100%">

cellspacing

لتحديد المسافة بين كل خلية من خلايا الجدول

<table cellspacing="10">

cellpadding

لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول.

<table cellpadding="10">

align

لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left

<table align="left">
<table align="right">

bgcolor

ويستخدم لتحديد لون الخلفية للجدول

<table bgcolor="#00ffff">

وهذا مثال جامع توضيحي لأغلب الخصائص.

 

 

 

 

 

 

 

 

 ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <tr> ... </tr> ولا بأس من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف لهذا الوسم فهي:

 

align

لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي Right, Left, Center والقيمة الإفتراضية هي Center

valign

لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي: Top, Bottom, Middle,

bgcolor

لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <TABLE> ويتم تطبيق اللون المحدد هنا.

وهذا مثال جامع توضيحي لأغلب الخصائص.


 

 

VI.   النماذج  forms

§          تعريف

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

طريقة كتابة النماذج:

نستعمل عادة الوسم form لعمل نموذج ويكون كالتالي:

<form  action=”page.php”>محتوى النموذج هنا  </form>

 حيث نضع بين وسمي الـ form محتوى النموذج، وسندرج طرق الإدخال في الفقرات التالية من درسنا.

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

§          حقول النص Input text

يستخدم لتعريف حقل إدخال بسطر واحد يستطيع المستخدم إدخال البيانات فيه، مثال

<form>

الاسم الأول:   <input type="text" name="firstname" size="100" maxlength="5" value="Prenom" />

اسم العائلة: <input type="text" name="lastname" value="Nom" />

</form>

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

§          حقل إدخال كلمة السر Password

يستخدم كحقل لكلمة المرور، وهو مثل حقول النص السايقة فقط، خاصية type يسند لها القيمة password بدل text ، وهذا مثال توضيحي:

<form> كلمة السر: <input type="password" name="pass" value="00000" maxlength="5" /> </form>

 

§          أزرار راديو  Radio Buttons

تستخدم  أزرار الراديو  الـ Radio buttons لاختيار أحد الخيارات فقط من مجموعة الاختيارات المحددة.مثال نكتب خاصية checked لجعل القيمة يتم اختيارها بشكل افتراضي:

<form>

<input type="radio" name="sex" value="male"  checked /> ذكر<br />

<input type="radio" name="sex" value="female" /> أنثى

</form>

§          خانات الاختيار المتعدد checkbox

خانات الاختيار المتعدد checkbox  تمكّن المستخدم من تحديد اختيار واحد أو أكثر من الخيارات المحدّدة.

<form>

ما هي هواياتك المفضلة من بين الهوايات التالية: <br />

<input type="checkbox" name="vehicle" value="Travel" /> السفر والترحال ?  

<input type="checkbox" name="vehicle" value="Swimming" /> السباحة ?                          

<input type="checkbox" name="vehicle" value="hunting" /> الصيد ?                                 

</form>

§          زر الارسال  Submit Button

زر الارسال يستخدم لإرسال المعلومات إلى الخادم. والمعلومات ترسل إلى الصفحة المحدّدة في الخاصية action في النموذج. مثال توصيحي للزر Submit

<form>

اسم المستخدم: <input type="text" name="user" />

<input type="submit" value="دخول" />                                

</form>

§          قوائم الاختيار select

يتم استخدام وسم <select> لإنشاء قائمة اختيار (قائمة منسدلة)، والوسم <option> داخل العنصر select لتحديد الخيارات المتاحة في القائمة، خاصية size تعين عدد من الخيارات الواضحة في القائمة المنسدلة وهذا مثال توضيحي:

<form>

<select  size ="1">

  <option value="volvo">Volvo</option>

  <option value="saab">Saab</option>

  <option value="mercedes">Mercedes</option>

  <option value="audi">Audi</option>

</select>                                

</form>

§          حقل النصوص textarea

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

خاصية cols تحدد العرض المرئي من منطقة النص.

خاصية rows تحدد عدد من الصفوف الواضوحة في منطقة النص.

 مثال توضيحي لحقل النصوص textarea

<form>

<textarea rows="20" cols="50">

Entrez ici votre commentaire ...

</textarea>                            

</form>

مثال متقدم من النماذج forms


 

 

VII.                     الوسم Div و Span

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

Avant la division <div>Dans la division</div> Et après la division

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

Avant la division <span style="color:red">Dans la division</span> Et après la division


 

 

VIII.                وسوم META ومحركات البحث

لغويا META تعني التعريف، فوسوم  META هي باختصار شديد تعريفات  تدرج ضمن وثائق HTML، وبالتحديد في أعلاها وضمن المقطع     <head> ... </head>  وتستخدم لوصف الصفحة أو الموقع بشكل عام، من حيث المحتويات والكلمات الرئيسية أو المفتاحية والمؤلف وغيرها من المعلومات التي قد نعتبرها توثيقية، و تستخدم وسوم  META من قبل محركات البحث. ومع ذلك فإن نشرك لصفحاتك على الإنترنت دون وضع هذه الوسوم ضمنها يعتبر إهمالا لجانب مهم من جوانب إنشاء المواقع على الويب، وإنك بالاستخدام الأمثل لهاته الوسوم تساعد المحركات على تصنيف صفحاتك بالطريقة التي تراها أنت مناسبة، وتحسينها يعتبر من أهم الخطوات التي يجب اتباعها في الـ   SEO والتي تعني  (Search engine optimization) أي  تهيئة الموقع لمحركات البحث، وهي مجموعة من الطرائق  والخطوات التي  تهدف لتحسين ترتيب النتائج للمواقع التي تنتج عن بحث معين على الويب. ويقصد منها تحسين ترتيب الموقع في محركات البحث وتحسين تقييمه في قوائمها وفهارسها، وهناك  مجموعة من الطرائق المصرح بها من قبل محركات البحث، مثل التي يقدمها جوجل لمديري المواقع webmasters.

وهذا شكل الصفحة مع وسم META

<html>

<head>

<title>عنوان صفحة الموقع</title>

<meta name="description" content="هنا يوصع الوصف للصفحة">

<meta name="keywords" content="هنا تكتب كلمات الدليلية بينها بفاصلة">

<meta name="author" content="اسم صاحب الموقع">

</head>

<body>

محتويات صفحة الموقع

</body>

</html>

 

 و يمكن أن نلخصها أهم الخطوات في:

§        وسم العنوان Title

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

يجب أن لا يتجاوز العنوان 70 أو 80 حرفا، والأسماء التي تقوم بكتابتها في العنوان أو Title ستكون معروضة في نتائج البحث. لذا أنصح بشدة كتابة عناوين الصفحات أو المواضيع التي ترغبون في كتابتها بعناية.

§        وسم الوصف Description META tag

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

يتكون هذا الوسم من جزأين: الأول هو name و يتم هنا تحديد اسم وسم الـ META و في هذه الحالة هو description. و الجزء الثاني هو content أو المحتوى: و يتم في هذا الجزء كتابة المحتوى الخاص بالوسم.


§        وسم الكلمات الدالة Keyword META tag

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


و يمكنك الاطلاع على أوسمة الـ META للمواقع الأخرى، بالطرق التالية، لمستخدمي Microsoft Internet Explorer، اذهب إلى Affichage  و اختر Source من القائمة.

لمستخدمي firefox ، اذهب إلى قائمة Affichage  و اختر Code source de la page من القائمة.

 

ستحصل على الكود الخاص بتلك الصفحة، ووسوم META ستكون في الجزء العلوي من الكود.


 

 

IX.   الويب واللغة العربية

نقوم بإضافة هذه الشفرة لوثيقة Html لتظهر اللغة العربية بشكل سليم

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">

نستخذم خاصية http-equiv  (HTTP-equivalent)لتحديد نوع المحتوى في الوثيقة HTML، و قمنا بتوضيح للمتصفح أن هذه الصفحة تحتوي على نص بلغة الهتمل content="text/html ،  وهي مرمزة باللغة العربية، charset=windows-1256

كما يتضح لكم أنه للترميز باللغة العربية يتوجب علينا استخدام  windows-1256

لكن يفضل استخذام الترميز العالمي utf-8 ، لأن أهم ايجابية في هذا الترميز هي أن الموقع يظهر بالعربية، في أي دولة في العالم وبأي نظام، على عكس windows-1256 الذي يتطلب ان تكون اللغة العربية مثبتة في جهاز المستخدم



 

 









 اختصار للجملة Cascading Style Sheets والتي معناها باللغة العربية صفحات الأنماط الإنسابية


 

 

كلمة CSS اختصار للجملة Cascading Style Sheets والتي معناها باللغة العربية

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

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

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

قواعد أساسيه في تعريف وكتابة أوامر CSS

لو اخترنا اللون الأحمر ليكون خلفية للصفحة باستخدام HTML، يمكننا أن ننجز ذلك بهذه الطريقة:

<body bgcolor="#FF0000">

مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:

body {background-color: #FF0000;}

كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS.

 أوامر CSS تتشابه كثيراً مع HTML

Selector : المكان الذى تريد تطبيق الخصائص عليه ، ويمكن ان تختار اى من وسوم html مثل الروابط <a> والفقرات <p> والجدوال <table> , <td> , <tr> وجسم الصفحه <body>وغيرها.

Property : الخصائص التى سوف تتحكم من خلالها في الوسوم المختلفة وهى تنتهي بنقطتين  :

Value : القيم المختلفة لكل خاصية فلكل خاصية مجموعة قيم تحددها وهى تنتهي بفاصلة منقوطة  ;

Declaration block : المكان المحتوي على كل من الخواص والقيم ومن خلاله يتم التصريح ببدء العمل أو الفعالية ويبدأ وينتهي بأقواس معقوفة  { }


هناك طريقتان لتضمين أكواد أو شفرات CSS :

الطريقة الأولى: ضمن وسوم HTML باستخدام خاصية style

هذه طريقة مختلفة بأنها تستخدم وسم <style وهذا مثال لكيفية تطبيق هذه الطريقة:


<html>

  <head>

    <title>Example<title>

    <style type="text/css">

      body {background-color: #FF0000;}

    </style>

  </head>

  <body>

    <p>This is a red page</p>

  </body>

</html>

الطريقة الثانية: ملف خارجي

 الطريقة المثلى لتطبيق تقنية CSS والاستفادة من جميع مميزاتها ، وهي الاعتماد على كتابة كود CSS في ملف مستقل ينتهي بامتداد Extention .css على سبيل المثال : style.css ، هذا الملف سنكتب فيه الكود الذي سيتحكم في خصائص صفحات الـHTML ، ثم بعد ذلك نربط هذا الملف بجميع صفحات HTML بواسطة كود الربط التالي

 <link rel="stylesheet" type="text/css" href="style.css" />

    هذا السطر يجب كتابته في أي صفحة HTML تود أن تربط بها ملف الـCSS بحيث يتم تطبيق جميع الخصائص المكتوبة في ملف الـCSS على صفحة HTML ، لاحظ ان اسم ملف الـCSS هو : style.css ، مسار الملف حددناه باستخدام خاصية href.


ويجب أن يتم وضع سطر الربط في صفحة HTML بين الوسمين <head></head> أي في هيدر الصفحةK بهذه الطريقة يمكن ربط عدد لانهائي من ملفات HTML بنفس ملف الستايل style.css ، ومن ثم نستطيع تعديل شكل جميع صفحات الـHTML بواسطة تعديل ملف واحد فقط ألا وهو ملف الـCSS

الطريقة المثلى لتطبيق تقنية CSS والاستفادة من جميع مميزاتها ، وهي الاعتماد على كتابة كود CSS في ملف مستقل ينتهي بامتداد Extention .css

وهذا مثال توضيحي لواجهة ىموقع ب css

تعريف لكل من class,id

class و id هى الفئات و المعرفات الأساسية التى توضع بداخل أوسمة html حتى تتعرف على أوامر css المختلفة .

id معرّف يتم تحديده ، ويعرّف بوضع علامة  #  قبلها ويمكن أن تضع له اى اسم ، ويتم تطبيقه على عنصر واحد فقط داخل الصفحه .

class الفئات وهى يمكن أن تتكرر اكثر من مرة بنفس الصفحة على عكس المعرّفات id ، وتعرّف بوضع نقطه  . قبلها ويمكن أن تضع لها أي إسم. وسنعطي مثال بسيط في صفحة واحدة للشرح

جميع الخصائص المهمة بشرح مفصل لتقنية CSS  توجد في هاته الصفحة

وهذه الصفحة خاصة بموقع siteduzero الفرنسي

 

 

 

 

 

 

 

 

 

 

 

المدونة هي موقع شخصي يقوم صاحبه بكتابة تدوينات فيها، والتدوينات هي مواضيع يقوم المدون بإضافتها إلى محتوى مدونته أساسيات التدوين


 

 

§        تعريف:

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

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

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

§        إنشاء مدونة:

ببضع خطوات يمكنك امتلاك مدونة مجانية في أقل من نصف ساعة، وقد اخترت لكم المدونات المجانية الممنوحة من كوكل GOOGLE  وهي Blogger  الموجودة على العنوان التالي:

http://www.blogger.com/

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




 

 

 

 

 

 

 انشاء حساب جميل بسهولة account gmail

 

 انشاء حساب جميل بسهولة account gmail

 انشاء حساب جميل بسهولة account gmail

 

 انشاء حساب جميل بسهولة account gmail

 

وبعد ذلك ندخل Blogger  وعنوانه http://www.blogger.com/، وفي بضع خطوات يمكنك انشاء مدونة، والصور أسفله، تبين ذلك بوضوح:

 

 انشاء حساب مدونة بلوجر blogger

ب المدونة

 انشاء حساب مدونة بلوجر blogger

 

 انشاء حساب مدونة بلوجر blogger

 

 انشاء حساب مدونة بلوجر blogger

 

 

 انشاء حساب مدونة بلوجر blogger

 

 

 انشاء حساب مدونة بلوجر blogger

 

 انشاء حساب مدونة بلوجر blogger

 انشاء حساب مدونة بلوجر blogger

 

 انشاء حساب مدونة بلوجر blogger

 انشاء حساب مدونة بلوجر blogger

وبعد هات الخطوة الأخيرة يمكنك الانطلاق في التدوين

 

 

ولكي تتمكن من نشر موقعك في أقل من أربعة وعشرين ساعة على  google تحتاج التسجيل في google webmasters، ولأنك مسجل في gmail  فلن تحتاج سوى الدخول له عبر هذا الرابط

http://www.google.com/webmasters/

واتباع الخطوات الموجودة على الصورة أسفله:

 

 

التسجيل في google webmasters- تسجيل في gmail  - اكونت http://www.google.com/webmasters/

 

التسجيل في google webmasters- تسجيل في gmail  - اكونت http://www.google.com/webmasters/

 

التسجيل في google webmasters- تسجيل في gmail  - اكونت http://www.google.com/webmasters/

 

التسجيل في google webmasters- تسجيل في gmail  - اكونت http://www.google.com/webmasters/

التسجيل في google webmasters- تسجيل في gmail  - اكونت http://www.google.com/webmasters/

التسجيل في google webmasters- تسجيل في gmail  - اكونت http://www.google.com/webmasters/

التسجيل في google webmasters- تسجيل في gmail  - اكونت http://www.google.com/webmasters/

التسجيل في google webmasters- تسجيل في gmail  - اكونت http://www.google.com/webmasters/

التسجيل في google webmasters- تسجيل في gmail  - اكونت http://www.google.com/webmasters/

 

 

 

 

 

 

وهذا هو عنوان الخريطة الذي يجب وصعه في الخانة أعلاه:

atom.xml?redirect=false&amp;start-index=1&amp;max-results=500







خاتمة:

أتمنى أن أكون وفقت في تقريب بعض من مفاهيم تصميم المواقع،  فالشخص الذي يختص بتصميم المواقع يسمى Web designer ، أما الذي يهتم تطويرها فيسمى web developer فهو شخص يقوم بتطوير المواقع، بالاعتماد على احدى لغات البرمجة ك php  أو asp....... javascript واعتماد احدى محركات قواعد البيانات ك Mysql، وقد تحتاج لأن تكون مصمما محترفا ربما بعض الشهور، لكن أن تكون مبرمج مطور فتحتاج لسنوات.......

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

والسلام عليكم


  • Published
    2 فبراير 2016