boody
11-09-2005, 09:15 PM
السلام عليكم ورحمة الله وبركاته
اولا اتمني لكم الاستفاده الكامله من هذه الدروس حتي يتكلل تعبي في جمعها وتنسيقها بالنتيجة المرجوة منها وودت ان ابدء اول مشاركة لي في منتدي مصر بشرح هذه اللغة الجميله
هذا الموضوع منقول من مصادر متعدده وجدتها وانا اتعلم هذه اللغة لكني اضفت لها تنسيقا خاصا
1) ما هي ال html هذه اللغة هي اقدم لغات برمجة الويب لكنها اهمها واسهلها من حيث انها لا تتطلب اي معرفة بالتعامل مع لغات البرمجة فقط تحتاج الي بعض التركيز في فهم هذه الدروس وتعد هذه اللغة المرحلة الاولي التي يجب ان يمر بها اي مبرمج لغة اخري
و هذه الحروف هي اختصار ل Hyper Text Markup Language وهي تعني لغة النصوص التشعبية العليا
و لنعلم انه في مجال تصميم صفحات الويب الكثير منا يستخدم برنامج ال front page المرفق مع بعض اصدارات office و انترنت اكسبلور
ولكن كيف يعمل الفرونت بيج ؟؟
ببساطة الفرونت بيج ما هو الا برنامج يعمل اساسا علي تحويل لغة الهتمل بصعوبتها النسبية الي مجموعة من الازرار بمعني انك حين تقوم بالنقر علي زرار معين منها يقوم البرنامج لتحويله الي امر من اوامر هذه اللغة
فمثلا نجد زر تحديد لون الخط وبه مجموعة من الالوان الكثيره لنختار منها لون فنختار مثلا الاسود ثم يقوم برنامج الفرونت بيج بتحويله الي امر لغة هتمل كالتالي
<"font color="#000000"> يوضع النص المراد تطبيق تاثير اللون علية هنا </font>
ولن اشرح هذا الامر الان فهو موضوع سابق لاوانه لكني رغبت بوضع مثال توضيحي لطريقة عمل الفرونت بيج و أمل من الله عز وجل ان يكون وصل المعني الذي انشده الي اذهانكم
الان بعد ما تعرفنا الي هذه اللغة نتطرق الي لغات برمجة الويب الاخري فهناك الكثير منها نذكر منها لغة ال php التي تعتبر لغة مطورة الي حد بعيد من لغة الهتمل
والذي يميز لغة الهتمل عن هذة اللغة انها لاتحتاج الي ان تكون متصل بالانترنت طوال فترة تصميم الموقع علي العكس من لغة الphp
ثم نجد العديد من اللغات المساعدة للغة الهتمل مثل لغة الcssوهي تعني لغة تصميم صفحات الانماط الانسيابية واعدكم بعد الانتهاء من دروس الهتمل بتقديم دروس في هذة اللغة.
وهناك لغة الجافا سكربت و الجافا التي تجعل من صفحة الويب تحيا بمزيد من الحيوية وانا الان في طريقي لتعلم لغات الجافا.
وتحتاج هذه اللغة الي مستعرض ويب مثل انترنت اكسبلور وهو الافضل علي الاطلاق والاكثر شعبية ويوجد ايضا نتسكيب وسندباد
و يجب العلم ان انترنت اكسبلور له اصدارات متعددة ولا شك افضلها هو احدثها من حيث انها تدعم اخر اوامر هذه اللغة لان هذه اللغة في تحديث وتطوير مستمر
لنتسأل هنا من يقوم بتطوير هذه اللغة ؟
تعتبر شركة w3 هي راعية لغة الهتمل في كل انحاء العالم فهي تقوم بنشر وتطوير هذة اللغة
والان بعد ان قمنا بشرح ماهية لغة الهتمل
ندخل الي العمق ونتغلل في لغة الهتمل
لنبدأ باسم الله
اولا انت لا تحتاج الي اي شئ غير موجود بطبيعتة في جهاز الكمبيوتر فانت تحتاج الي محرر نصوص وهو النوته الموجوده في جهازك ويسمي notepad وتصل اليها عن طريق start\programs\Accessories\notepad
ثم تحتاج الي مستعرض و يفترض وجوده اذا كنت مستخدما لاي اصدار من ويندوز وهو انترنت اكسبلور
فقط هذا ما تحتاج اليه لتبدأ معي
اولا يجب ان تعرف ان اي امر من اوامر هذه اللغة يبدأ بوسم فأي وسم يبدا كالتالي <tag> ... </tag> فالوسم يسمي tag ونلاحظ ان الوسم ينحصر بين قوسين <> والوسم <tag> يسمي بوسم البدايه </tag> وهذا الوسم يسمي بوسم الاغلاق او النهايه و هناك وسوم لا تحتوي علي وسم اغلاق مثل وسوم ميتا التي سنتطرق اليها لاحقا
ابدأ معي في تصميم اول صفحاتك
بداية اي صفحة تحتوي علي وسم بداية الصفحة <html> وهذا الوسم يخبر المستعرض بانه هنا تكون بداية الصفحة وفي نهاية الصفحة نضع وسم اغلاق الصفحة </html>
ثم نحتاج الي وسم راس الصفحة <head>وهنا يمكننا ان نضع معلومات صفحتنا مثل عنوان الصفحة او ندرج بعض الاكواد وفي النهاية نضع وسم الاغلاق لراس الصفحة</head>
<body> هذا الوسم يسمي بجسم الصفحة حيث يوضع هنا ما يراد عرضه علي المستخدم من نصوص وصور والوان ويمكننا ايضا ادراج الاكواد هنا وفي النهاية نضع وسم الاغلاق</body>
وبذلك يتكون عندنا الصفحة التالية
<html>
<head>
راس الصفحة هنا
</head>
<body>
جسم الصفحة هنا
</body>
</html>
ملاحظه ليس هناك فرق ان تكتب صفحتك بالاحرف الكبيره او الصغيره لكن حاول ان يكون لك منهجا خاص بك
الان لنبدأ فيما يمكن وضعه داخل راس الصفحة
<title>هذا وسم عنوان الصفحة حيث تضع عنوان الصفحة هنا ويظهر في مستعرض الانترنت اكسبلور اعلي اليسار وفي النهاية يجب ان نضع وسم الاغلاق </title>
ثم نجد عندنا وسوم ميتا meta tags
وهي تستخد لتعريف المستعرض وادله البحث بمحتويات الصفحة ومصمها وحقوق الطبع لمساعده الاخرين في ايجاد صفحتك علي هذه الشبكه العملاقه الم تجرب مسبقا ان تدخل الي موقع بحث وتكتب فيه مثلا لغة الهتمل لتجد امامك العديد من النتائج هذا الوسم يساعدك في ان تكون صفحتك احدي هذه الصفحات
وهي كالتالي
--------------------------------------------------------
<META NAME="keywords" CONTENT=" ... ">
نجد ان الوسم قد احتوي علي متغير وهو name هذا المتغير يحتوي علي قيمة وهي keywords الان عرفنا ان هناك داخل الوسم متغير هذا المتغير يحتوي علي قيمة ونلاحظ ان القيمه قد جاءت بين علامتي التنصيص واغلب القيم تحتاج الي علامتي التنصيص هاتين والقيمة keywords هنا تعني الكلمات المفتاحية للصفحة وهي تكتب كقيمة للمتغير CONTENT فمثلا انا الان اصمم صفحة للغة الهتمل فاكتب الاتي
<META NAME="keywords" CONTENT="html,webpage design,لغة هتمل,تصميم مواقع">
نلاحظ هنا اننا قمنا بكتابة الكلمات المفتاحية باللغة العربيه والانجليزيه ويجوز لي ان اكررها عدة مرات بشكل مختلف كانني اريد ان اكتب احمد مثلا فاكتبها عده مرات هكذا أحمد ,احمد لاحظ الهمزه فوق الالف فيجب ان تضع في الاعتبار ان المستخدم قد يكتب ما يريد باكثر من طريقة
--------------------------------------------------------
<META NAME="description" CONTENT=" ... ">
وهنا نجد القيمة description وهي لوصف الصفحة في عبارات ملخصة لمحتوياتها كالاتي
<META NAME="description" CONTENT="learning web page design in Arabic by html تعلم تصميم صفحات الويب بالعربيه بلغة الهتمل ">
--------------------------------------------------------
<META NAME="author" CONTENT=" ... ">
القيمة author هي التي توثق اسم المؤلف او صاحب الموقع كالاتي
<META NAME="author" CONTENT="abo farah">
--------------------------------------------------------
<META NAME="copyright" CONTENT=" ... ">
هذا الوسم لسرد حقوق النشر الخاصة بالصفحة كالاتي
<META NAME="copyright" CONTENT="body.co">
--------------------------------------------------------
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">
هذا الوسم يحدد اللغة العربية لتكون لغة الصفحة فهذا الوسم يقول للمستعرض ان هذه الصفحة هي باللغة العربيه و حيث يوجد العديد من لغات الترميز التي لن اتطرق اليها لانها بالعربي وجع راس ولو استطاع اي من الاخوه ان يساندني في فهم الترميز والرموز بسهوله ويسر فجازاه الله في خيرالان انتهينا من وسوم ميتا ومن الوسوم التي يمكن ان تدرج في راس الصفحة
و انتظروا الوسوم الاكثر متعه في الدرس القادم وهي الوسوم التي تدرج في جسم الصفحة وهي وسوم الخطوط والالوان والجداول والنماذج الخ
وانتظر تشجيعكم لي لانني لا اكتب هذا لنفسي فانا اعرف كل هذا والحمد لله
ارجو تثبيت الموضوع حتي تعم الفائدة
اولا اتمني لكم الاستفاده الكامله من هذه الدروس حتي يتكلل تعبي في جمعها وتنسيقها بالنتيجة المرجوة منها وودت ان ابدء اول مشاركة لي في منتدي مصر بشرح هذه اللغة الجميله
هذا الموضوع منقول من مصادر متعدده وجدتها وانا اتعلم هذه اللغة لكني اضفت لها تنسيقا خاصا
1) ما هي ال html هذه اللغة هي اقدم لغات برمجة الويب لكنها اهمها واسهلها من حيث انها لا تتطلب اي معرفة بالتعامل مع لغات البرمجة فقط تحتاج الي بعض التركيز في فهم هذه الدروس وتعد هذه اللغة المرحلة الاولي التي يجب ان يمر بها اي مبرمج لغة اخري
و هذه الحروف هي اختصار ل Hyper Text Markup Language وهي تعني لغة النصوص التشعبية العليا
و لنعلم انه في مجال تصميم صفحات الويب الكثير منا يستخدم برنامج ال front page المرفق مع بعض اصدارات office و انترنت اكسبلور
ولكن كيف يعمل الفرونت بيج ؟؟
ببساطة الفرونت بيج ما هو الا برنامج يعمل اساسا علي تحويل لغة الهتمل بصعوبتها النسبية الي مجموعة من الازرار بمعني انك حين تقوم بالنقر علي زرار معين منها يقوم البرنامج لتحويله الي امر من اوامر هذه اللغة
فمثلا نجد زر تحديد لون الخط وبه مجموعة من الالوان الكثيره لنختار منها لون فنختار مثلا الاسود ثم يقوم برنامج الفرونت بيج بتحويله الي امر لغة هتمل كالتالي
<"font color="#000000"> يوضع النص المراد تطبيق تاثير اللون علية هنا </font>
ولن اشرح هذا الامر الان فهو موضوع سابق لاوانه لكني رغبت بوضع مثال توضيحي لطريقة عمل الفرونت بيج و أمل من الله عز وجل ان يكون وصل المعني الذي انشده الي اذهانكم
الان بعد ما تعرفنا الي هذه اللغة نتطرق الي لغات برمجة الويب الاخري فهناك الكثير منها نذكر منها لغة ال php التي تعتبر لغة مطورة الي حد بعيد من لغة الهتمل
والذي يميز لغة الهتمل عن هذة اللغة انها لاتحتاج الي ان تكون متصل بالانترنت طوال فترة تصميم الموقع علي العكس من لغة الphp
ثم نجد العديد من اللغات المساعدة للغة الهتمل مثل لغة الcssوهي تعني لغة تصميم صفحات الانماط الانسيابية واعدكم بعد الانتهاء من دروس الهتمل بتقديم دروس في هذة اللغة.
وهناك لغة الجافا سكربت و الجافا التي تجعل من صفحة الويب تحيا بمزيد من الحيوية وانا الان في طريقي لتعلم لغات الجافا.
وتحتاج هذه اللغة الي مستعرض ويب مثل انترنت اكسبلور وهو الافضل علي الاطلاق والاكثر شعبية ويوجد ايضا نتسكيب وسندباد
و يجب العلم ان انترنت اكسبلور له اصدارات متعددة ولا شك افضلها هو احدثها من حيث انها تدعم اخر اوامر هذه اللغة لان هذه اللغة في تحديث وتطوير مستمر
لنتسأل هنا من يقوم بتطوير هذه اللغة ؟
تعتبر شركة w3 هي راعية لغة الهتمل في كل انحاء العالم فهي تقوم بنشر وتطوير هذة اللغة
والان بعد ان قمنا بشرح ماهية لغة الهتمل
ندخل الي العمق ونتغلل في لغة الهتمل
لنبدأ باسم الله
اولا انت لا تحتاج الي اي شئ غير موجود بطبيعتة في جهاز الكمبيوتر فانت تحتاج الي محرر نصوص وهو النوته الموجوده في جهازك ويسمي notepad وتصل اليها عن طريق start\programs\Accessories\notepad
ثم تحتاج الي مستعرض و يفترض وجوده اذا كنت مستخدما لاي اصدار من ويندوز وهو انترنت اكسبلور
فقط هذا ما تحتاج اليه لتبدأ معي
اولا يجب ان تعرف ان اي امر من اوامر هذه اللغة يبدأ بوسم فأي وسم يبدا كالتالي <tag> ... </tag> فالوسم يسمي tag ونلاحظ ان الوسم ينحصر بين قوسين <> والوسم <tag> يسمي بوسم البدايه </tag> وهذا الوسم يسمي بوسم الاغلاق او النهايه و هناك وسوم لا تحتوي علي وسم اغلاق مثل وسوم ميتا التي سنتطرق اليها لاحقا
ابدأ معي في تصميم اول صفحاتك
بداية اي صفحة تحتوي علي وسم بداية الصفحة <html> وهذا الوسم يخبر المستعرض بانه هنا تكون بداية الصفحة وفي نهاية الصفحة نضع وسم اغلاق الصفحة </html>
ثم نحتاج الي وسم راس الصفحة <head>وهنا يمكننا ان نضع معلومات صفحتنا مثل عنوان الصفحة او ندرج بعض الاكواد وفي النهاية نضع وسم الاغلاق لراس الصفحة</head>
<body> هذا الوسم يسمي بجسم الصفحة حيث يوضع هنا ما يراد عرضه علي المستخدم من نصوص وصور والوان ويمكننا ايضا ادراج الاكواد هنا وفي النهاية نضع وسم الاغلاق</body>
وبذلك يتكون عندنا الصفحة التالية
<html>
<head>
راس الصفحة هنا
</head>
<body>
جسم الصفحة هنا
</body>
</html>
ملاحظه ليس هناك فرق ان تكتب صفحتك بالاحرف الكبيره او الصغيره لكن حاول ان يكون لك منهجا خاص بك
الان لنبدأ فيما يمكن وضعه داخل راس الصفحة
<title>هذا وسم عنوان الصفحة حيث تضع عنوان الصفحة هنا ويظهر في مستعرض الانترنت اكسبلور اعلي اليسار وفي النهاية يجب ان نضع وسم الاغلاق </title>
ثم نجد عندنا وسوم ميتا meta tags
وهي تستخد لتعريف المستعرض وادله البحث بمحتويات الصفحة ومصمها وحقوق الطبع لمساعده الاخرين في ايجاد صفحتك علي هذه الشبكه العملاقه الم تجرب مسبقا ان تدخل الي موقع بحث وتكتب فيه مثلا لغة الهتمل لتجد امامك العديد من النتائج هذا الوسم يساعدك في ان تكون صفحتك احدي هذه الصفحات
وهي كالتالي
--------------------------------------------------------
<META NAME="keywords" CONTENT=" ... ">
نجد ان الوسم قد احتوي علي متغير وهو name هذا المتغير يحتوي علي قيمة وهي keywords الان عرفنا ان هناك داخل الوسم متغير هذا المتغير يحتوي علي قيمة ونلاحظ ان القيمه قد جاءت بين علامتي التنصيص واغلب القيم تحتاج الي علامتي التنصيص هاتين والقيمة keywords هنا تعني الكلمات المفتاحية للصفحة وهي تكتب كقيمة للمتغير CONTENT فمثلا انا الان اصمم صفحة للغة الهتمل فاكتب الاتي
<META NAME="keywords" CONTENT="html,webpage design,لغة هتمل,تصميم مواقع">
نلاحظ هنا اننا قمنا بكتابة الكلمات المفتاحية باللغة العربيه والانجليزيه ويجوز لي ان اكررها عدة مرات بشكل مختلف كانني اريد ان اكتب احمد مثلا فاكتبها عده مرات هكذا أحمد ,احمد لاحظ الهمزه فوق الالف فيجب ان تضع في الاعتبار ان المستخدم قد يكتب ما يريد باكثر من طريقة
--------------------------------------------------------
<META NAME="description" CONTENT=" ... ">
وهنا نجد القيمة description وهي لوصف الصفحة في عبارات ملخصة لمحتوياتها كالاتي
<META NAME="description" CONTENT="learning web page design in Arabic by html تعلم تصميم صفحات الويب بالعربيه بلغة الهتمل ">
--------------------------------------------------------
<META NAME="author" CONTENT=" ... ">
القيمة author هي التي توثق اسم المؤلف او صاحب الموقع كالاتي
<META NAME="author" CONTENT="abo farah">
--------------------------------------------------------
<META NAME="copyright" CONTENT=" ... ">
هذا الوسم لسرد حقوق النشر الخاصة بالصفحة كالاتي
<META NAME="copyright" CONTENT="body.co">
--------------------------------------------------------
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">
هذا الوسم يحدد اللغة العربية لتكون لغة الصفحة فهذا الوسم يقول للمستعرض ان هذه الصفحة هي باللغة العربيه و حيث يوجد العديد من لغات الترميز التي لن اتطرق اليها لانها بالعربي وجع راس ولو استطاع اي من الاخوه ان يساندني في فهم الترميز والرموز بسهوله ويسر فجازاه الله في خيرالان انتهينا من وسوم ميتا ومن الوسوم التي يمكن ان تدرج في راس الصفحة
و انتظروا الوسوم الاكثر متعه في الدرس القادم وهي الوسوم التي تدرج في جسم الصفحة وهي وسوم الخطوط والالوان والجداول والنماذج الخ
وانتظر تشجيعكم لي لانني لا اكتب هذا لنفسي فانا اعرف كل هذا والحمد لله
ارجو تثبيت الموضوع حتي تعم الفائدة