دورة متقدمة في Html

[ابو ندا]

دورة متقدمة في HTML


يشير الإختصار HTML إلى عبارة Hyper******** Markup Language أو لغة الترميز المتشعبة، وهذه اللغة هي اللغة المستخدمة في تصميم جميع صفحات الويب الإحترافية، فهل تريد أن تصمم صفحات ويب احترافية ؟ تعال الآن وشارك الركب.

---
مقدمة
تكتب ملفات HTML في صورة ملفات نصوص بسيطة (Plain ********)، تأخذ الإمتداد .html عادة، وتكتب في أي برنامج للنصوص البسيطة، في الويندوز استخدم Notepad، في اللينكس استخدم pico، في الماكنتوش استخدم Simple********، جميع هذه البرامج مناسبة جدا لعمل صفحات HTML.

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

المشكلة التي قد تواجهك في كتابة صفحاتك هي دعم المتصفحات للغة العربية أولا، ودعمها لآخر التقنيات ثانيا، يقدم متصفح Internet Explorer من Microsoft دعما رائعا للغة العربية، ولآخر تقنيات الويب مثل HTML 4.0 و CSS و XML وغيرها، وأما متصفح Netscape Navigator فهو لا يدعم اللغة العربية بشكل جيد ولتحسين دعم اللغة العربية تحتاج إلى برنامج Sindbad من شركة صخر، وفي كل الأحوال يظل متصفح Netscape Navigator متصفحا متعبا في التصميم، لهذه الأسباب جميعا اعتمدنا متصفح Internet Explorer 5.0 كمتصفح قياسي لصفحات موقعنا، فهي تظهر بشكل رائع فيه.

ملحوظةآخر إصدارة من متصفح Netscape Navigator هي الإصدارة 4.72 وآخر إصدارة من برنامج Sindbad هي 4.51 وقد توقفت شركة صخر عن تعريب Navigator في الآونة الأخيرة لأسباب لا أعرفها

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

تتكون ملفات HTML من قسمين :

المحتوى : وهو ما يشاهده الجمهور في صفحتك.
الوسوم :وهي الأجزاء التي تحدد كيف سيشاهد جمهورك المحتوى السابق، فهي تصف المحتوى من حيث التنسيق.
مثال على ذلك هذا السطر من لغة HTML ..
HTML is a <b>Great</b> Language
وعند استخدام المتصفح في مشاهدة السطر السابق سيظهر هكذا ..

HTML is a Great Language
في المثال السابق تبدو أجزاء ملف الـ HTML واضحة، المحتوى الذي يتمثل في عبارة HTML is a Great Language، والوسوم المحاطة بعلامتي < و >، في المثال السابق استخدمنا وسما يدعى b وهو اختصار لكلمة bold (عريض)، ويأتي في صورة زوج من الوسوم، وسم للفتح ووسم للإغلاق، ويتميز وسم الإغلاق عن وسم الفتح في أنه يحتوي على علامة ( / ) قبل اسم الوسم، وسم الفتح يعني أن المتصفح يجب أن يطبق الوصف الموجود في الوسم على جميع النصوص الذي تلي الوسم وحتى يصل إلى وسم الإغلاق، مثل التشغيل والإطفاء .. وسم الفتح يشغل ميزة الخط العريض ووسم الإغلاق يطفأ هذه الميزة، وكما أن هنالك وسما للخط العريض .. هنالك وسم للخط المائل، وآخر لتغيير الخط، ووسوم أخرى للجداول والصور، جميع عناصر ملف HTML يتم إدراجها عن طريق الوسوم، وتحدد خصائصها أيضا عن طريق الوسوم.

إذا أردت مثلا أن تغير الخط في كلمة Great في مثالنا السابق، سنحتاج إلى استخدام الوسم Font، حيث سنستخدم الوسم Font بأن نضبط خاصية لون الخط في كلمة Great إلى اللون الأحمر، ويتم هذا كالتالي ..
HTML is a <font color="red">Great</font> Language

حيث ستبدو هكذا ..

HTML is a Great Language
في المثال السابق يتضح لنا أمر آخر، وهو أنه حتى نضبط خصائص أحد الوسوم فإننا نقوم بوضع إسم الخاصية بعد اسم الوسم بين علامتي الـ< والـ> ونفصل بين اسم الوسم والخاصية بمسافة بيضاء، وتكون الخصائص في صورة إسم="قيمة" أي إسم الخاصية ثم علامة المساواة ثم قيمة الخاصية بين أقواس الإقتباس المزدوجة، في المثال السابق قمنا بضبط الخاصية color للوسم font عند القيمة red، وإذا كان هنالك أكثر من خاصية يمكننا إضافتها أيضا في نفس المكان، بحث نفصل كل خاصية والأخرى بمسافة، مثلا ..
HTML is a <font color="red" size="+1">Great</font> Language

التي ستظهر هكذا ..

HTML is a Great Language
أمور إضافية يجب أن تعرفها عن HTML ..

لغة HTML لا تراعي حالة الأحرف من حيث كونها كبيرة أو صغيرة، أي أنه في HTML وضع <b> لا يختلف عن <B>.
يمكن إحاطة قيم الخصائص بعلامة إقتباس مزدوجة ( " ) أو مفردة ( ' )، ويمكن أيضا عدم إحاطتها بأي منها إذا كانت القيمة تتألف من كلمة واحدة دون مسافات.
بعض الوسوم تحتاج إلى وسم إغلاق وبعضها لا يحتاج إليه.
قد وقد لا يحتوي وسم الفتح على خصائص إضافية، ولكن وسم الإغلاق لا يحتوي أبدا على هذه الخصائص.
لغة HTML لا تراعي المسافات البيضاء، وتعتبرها جميعا مسافة واحدة، أي أن وضع مسافة واحدة بين كلمتين، يساوي وضع مسافتين، ويساوي وضع ثلاثين مسافة، ويساوي وضع سطر جديد، ويساوي وضع جدولة tab، كلها تترجم إلى مسافة.
توضع التعليقات بين <!-- و --> أي أن المتصفح يتجاهل أي شيء بينهما وكأنه غير موجود.
بنية ملف HTML
يتكون ملف HTML القياسي من جزئين رئيسيين هما :

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

<html>
<head>
...
</head>
<body>
...
</body>
</html>

المثال السابق صريح، ولا يحتاج إلى المزيد من التوضيح، الأجزاء التابعة للرأس توضع بين <head> و </head>، أما الأجزاء التابعة للجسم فتوضع بين الوسمين <body> و </body> .

يتم تحديد عنوان المستند الذي يظهر في شريط العنوان للمتصفح بإحاطته بـ <title> و </title>، والمكان الصحيح لوسم الـ <title> هو الرأس، حيث أن الوسم title لا يعتبر من ضمن محتوى الصفحة ولا يظهر في الصفحة، وهو يستخدم في عمليات البحث والأرشفة كما في محركات البحث، ولا يمكنك وضع وسوم تنسيق أخرى بين وسمي الـ title.

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

أما باقي الوسوم فأغلبها يوضع في منطقة الجسم body.


---------
أمور إضافية
وسوم meta
على الرغم من أن اسمها وسوم meta إلا أنها ليست أكثر من وسم واحد هو الوسم meta !

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

تختلف واصفحات meta عن بعضها البعض بالخاصية name أو **********************، توجد بعض البرامج تحدد نوع الوسم meta حسب الخاصية name وبرامج أخرى حسب الخاصية ********************** لذا فمن الأفضل وضع الإثنين.

الخاصية الثانية لوسوم meta هي الخاصية content التي تحدد محتوى المعلومة التي حددت اسمها بكل من الخاصيتين name و **********************.

الكلمات المفتاحية مثلا إسمها keywords، فإذا كانت الكلمات المفتاحية في موقعك هي (ألعاب برامج صور مقلات دروس دورات)، فإنك ستحتاج إلى أن يكون لديك الوسم التالي :

<meta name="keywords" **********************="keywords"
content="ألعاب,برامج,صور,مقلات,دروس,دورات">

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

وكما في الطريقة السابقة يتم تحديد معلومات الصفحة بنفس الطريقة، وتأخد الخاصية name أو ********************** أحد القيم التالية:

keywords : لتعيين الكلمات المفتاحية للمستند مفصولة بفواصل، ومرتبة حسب أهميتها ولا يجوز التكرار.
description : لوضع وصف بسيط للصفحة ويفضل أن لا يتعدى العشرون كلمة.
generator : إسم البرنامج الذي استخدم لإنشاء الصفحة.
author : إسم مؤلف الصفحة.
content-type : لتحديد نسق البيانات وصفحة المحارف المستخدمة، لصفحات HTML العربية المكتوبة في الويندوز ضع الوسم كالتالي :
<meta name="content-type" **********************="content-type"
content="********/html; cahrset=windows-1256">

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

لإظهار الخطوط العربية بشكل سليم يجب التأكد من استخدام صفحات المحارف العربية المنتشرة حاليا وهي windows-1256، إذا كنت تكتب صفحاتك في Windows فهذه هي صفحة المحارف القياسية، ما عدا Windows 2000 فهو يستخدم صفحة المحارف العالمية الموحدة Unicode، وأما إذا كنت تكتب صفحاتك في بيئة Unix (Linux مثلا) فإن ذلك يعتمد على البرنامج الذي تستخدمه لتعريب النظام.

وفي جميع الأحوال السابقة فإنك تحتاج لضبط الوسم meta الخاص بنوع المحتوى content-type عند قيمة مناسبة.

أما تغيير اتجاه الصفحات فيتم بعدة طرق، أول طريقة هي استخدام الوسم p وضبط الخاصية align له عند القيمة right، وهي طريقة بسيطة ونافعة، ولكنها تصبح متعبة في المواقع الكبيرة وعندما تريد عمل الكثير من الجداول والتنسيقات، أما الطريقة الثانية وهي الطريقة الأفضل فهي استخدام الخاصية dir في الوسم html وضبطه عند القيمة rtl، يقوم ذلك بجعل الصفحة تتجه كليا من اليمين إلى اليسار، بحيث تصبح الفقرات تتجه من اليمين إلى اليسار، والعناوين تتجه من اليمين إلى اليسار وتصبح الخلية الأولى في الجدول هي الخلية الأولى على اليمين، وهذه الميزة متوفرة تلقائيا في متصفح Internet Explorer وهي غير متوفرة في Netscape Navigator، ولكن عند تركيب Sindbad، فإن هذه الميزة تظهر في صورة زر في على شريط العنوان حيث يحدد المستخدم الإتجاه الذي يريده يدويا ولا تؤثر الخاصية dir على الصفحة تلقائيا.

<html dir="rtl">

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

أوراق الأنماط المتتالية
أوراق الأنماط المتتالية أو Casscading Style Sheet أو CSS هي تقنية تستخدم للتحكم في الكيفية التي يجب أن تظهر بها الوسوم في صفحة ويب، فمثلا العنوان الرئيسي H1 يظهر باللون الأسود وبخط عادي وطريقة عادية، ولتغييره كان لا بد من وضع وسم Font داخل كل وسم H1، فماذا لو استطعنا أن نحدد نحن كيف نريد لعنوان الصفحة الرئيسي أن يظهر، وكيف يجب أن تظهر الجداول وكيف يجب أن تظهر جميع الوسوم الأخرى في لغة HTML، الآن يمكننا عمل ذلك باستخدام تقنية CSS، وقد تم تطوير هذه التقنية على المدى الأعوام السابقة حتى وصلنا إلى النسخة الثانية من مواصفات هذه اللغة ويمكن الحصول عليها من مجمع الشبكة العنكبوتية العالمية مع مجموعة كبيرة من الوصلات والكتب والدورات : http://www.w3.org/Style/CSS
لغة الترميز القابلة للتوسع
لغة الترميز القابلة للتوسع أو eXtensible Markup Language أو XML هي عبارة عن تقنية جديدة بحيث يتم التخلص من الوسوم القياسية ويصبح لكل شخص وسومه الخاصة به، فبد أن ظهرت تقنية CSS أصبح أمر الوسوم غير مهما، فيمكنني مثلا أن أقوم بجعل الوسم h6 الذي لا أستخدمه كثيرا يصبح وسما خاصا له لون خاص وشكل خاص أستخدمه في كتابة الملاحظات مثلا، بحيث يصبح لونها أحمرا وتكون مبروزة ببرواز جميل ولافته للنظر، وهكذا أصبح الإسم h6 لا يشير إلى شيء، فما الفائدة منه الآن !

لذا فقد ظهرت فكرة لغة الترميز القابلة للتوسع بحيث أنك تقوم بعمل الوسوم وتسميها بأي اسم تريده، وتحدد كيفية ظهور المحتوى الذي بداخل الوسم عن طريق أوراق الأنماط المتتالية، للمزيد عن XML إذهب إلى قسم XML في مجمع الويب : http://www.w3.org/XML

لغة الجافا سكريبت
لغة الجافا سكريبت هي عبارة عن لغة برمجة محدودة، مخصصة للعمل في صفحات ويب لتوفير صفحات متغيرة ( ديناميكية )، فيمكنك عمل زر ينفذ عمليات خاصة على جهاز الزبون دون إرسال المعلومات إلى مزود ويب، وتستخدم بشكل كبير في الصفحات الشخصية في عمل الحركات والتأثيرات الفنية والحركية وقد ظهرت أخيرا العديد من المواقع التي توفر سكريبتات جاهزة ورائعة لتقوم بنقلها وإضافتها إلى موقعك بسهولة، للمزيد من المعلومات عن لغة الجافا سكريبت إذهب إلى موقع : http://javascript.internet.com أو موقع http://www.dynamicdrive.com

البرمجة جهة المزود
البرمجة جهة المزود هي طريق يتم فيها تركيب الصفحات وصنعها ديناميكيا طبقا لمواصفات متفق عليها لتبادل البيانات، وتسمى هذه المواصفات واجهة البوابات الشائعة أو Common Gateway Interface أو CGI، ويمكن كتابة البرامج بأي لغة من لغات البرمجة بشرط أن يعمل البرنامج حسب مواصفات CGI، ولكن أشهر لغات البرمجة استخداما هي لغة Perl وهي تتميز باحتواءها على العديد من الميزات ووظائف معالجة النصوص المطلوبة في عمليات إنشاء الصفحات ديناميكيا، وهي لغة عامة وليست لغة مخصصة لكتابة برامج CGI فقط، على العكس من لغة PHP الجديدة وهي لغة مخصصة كليا لعمل الصفحات الديناميكية وهي اللغة المستخدمة لجعل موقع مبرمج يظهر بمظهره الموحد والمتناسق والمترابط، وتوجد أيضا لغة ASP من مايكروسوفت أيضا ولكنها مقصورة على مزودات NT فقط ولا تعمل في مزودات UNIX الأوسع انتشارا، للمزيد من المعلومات حول Perl راجع : http://www.perl.com/ ولمعلومات حول لغة PHP راجع http://www.php.net

[فيصل بن حجرف]

السلام عليكم

يعطيك الف عافيه اخوي هايف

ودرس مهم لكل واحد حاب يتعمق في عالم الانترنت والتصاميم

تحياتي لك

[كويتي]

اخوي هايف لاهنت حبيبي

على هذى المجهود وتسلم ..

كويتي

[المستشار]

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

جزاك الله خيرا

مع تحياتي

المستشار

[عزوف]

يعطيك العافيه يا السفراني بصراحه شرح مفصل ومبسط

بصراحه انا خذيت دوره في معهد نيوهورايزن بهالخصوص ما شالله عليك لخصتها في سطور

قواك الله