و أخيرا . ها قد إنتهيت من تنصيب جميع البرامج التي ستحتاجها .
يجب عليك أن تستعمل محرر النصوص ( كـ++Notepad ) و بعض المتصفحات لتجربة موقعك ( Google Chrome , Mozilla Firefox , Internet Explorer ) .
في هذا الفصل ستبدأ التطبيق الفعلي ! ستقوم بتعلم قواعد HTML الأساسية . ثم ستقوم بإنشاء أول صفحة ويب لك ( :
فهرس الفصل
إنشاء صفحة ويب باستخدام المحرر .
حسنا ! أعد نفسك للبدأ . كما قلت لك ستقوم بإنشاء موقع باستخدام محرر النصوص ++Notepad .
إذن إفتحه الان .
ماذا سنكتب في هذه الورقة أمامنا ؟
لم لا نقم بتجربة معا . أكتب ما يخطر في بالك .
لا يهم ما تكتب : المهم هو أن تكتب ههههه .
الان قم بحفض ما كتبته . هذا بسيط للغاية ، فكما إعتدت في القائمة العلوية إذهب إلى Enregistrer sous ← Fichier . ستظهر نافذة على الشاشة . إحفظ ملفك أينما تشاء و لكن يجب أن تنهي إسم الملف بـ html. مثال test.html .
لم لا تنشأ مجلدا خاصا تضع فيه جميع ملفات HTML التي تعمل عليها .
حتى يسهل عليك الأمر .
إذهب الان إلى المجلد الذي وضعت فيه الملف .
إذن إفتحه الان .
ماذا سنكتب في هذه الورقة أمامنا ؟
لم لا نقم بتجربة معا . أكتب ما يخطر في بالك .
bonjour tous le monde
لا يهم ما تكتب : المهم هو أن تكتب ههههه .
الان قم بحفض ما كتبته . هذا بسيط للغاية ، فكما إعتدت في القائمة العلوية إذهب إلى Enregistrer sous ← Fichier . ستظهر نافذة على الشاشة . إحفظ ملفك أينما تشاء و لكن يجب أن تنهي إسم الملف بـ html. مثال test.html .
لم لا تنشأ مجلدا خاصا تضع فيه جميع ملفات HTML التي تعمل عليها .حتى يسهل عليك الأمر .
إذهب الان إلى المجلد الذي وضعت فيه الملف .
تختلف الأيقونة التي سيظهر بها ملفك حسب المتصفح الذي تستعمله . هنا الأيقونة التي تبرز هي أيقونة Google Chrome ذلك لأنني أستخدمه ، ربما قد تكون أيقونة ملفك مغايرة ، لذلك لا تقلق . فيما يلي مثال لنفس الملف لكن بأيقونات مختلفة :
نقرتين فقط على هذا الملف و سيظهر كل ما كتبته قبلا في المتصفح .
بهذه الطريقة تستطيع حفظ ملفات موقعك .
حسنا ! كما رأيت ، كل شيء بسيط . كل ما عليك أن تفعل هو كتابة النص في المحرر و الحفظ و ستحصل على صفحة HTML . المثال الذي قمت به ليس إلا البداية . فيم يلي ستتعرف على القواعد الأساسية التي تقوم عليها لغة HTML . و هي ببساطة : الوسوم .
الوسوم
تتكون صفحة HTML بما نسميه الوسوم ( Tag ) . هذه الأخيرة لا تظهر في المتصفح كالنص الذي كتبته ، لكنها توضح للمتصفح ماذا يفعل .
إدخال الوسوم أمر سهل . يتم تمييزها عن باقي النصوص بوضعها داخل العلامتين <...> مثال : <Tag>
بماذا تفيد الوسوم ؟ إنها تحدد طبيعة النص داخلها كما لو أنها تقول ' هذا نص ' ' هذا عنوان ' هذه صورة ' ( تابع القرائة )
هناك نوعان من الوسوم : الوسوم العادية و الوسوم المغلقة .
الوسوم العادية ( الوسوم المزدوجة )
تكون الوسوم غالبا على شكل أزواج حيث يمثل الوسم الأول وسم البداية ( أو وسم الفتح ) و الوسم الثاني وسم النهاية ( أو وسم الإغلاق )
الوسم ( <title> ) يمثل وسم البداية و الوسم ( <title/> ) يمثل وسم النهاية
يفهم المتصفح هذا المثال على أن الكتابة بين الوسمين تمثل عنوانا ، و أي كتابة خارج الوسمين ليست عنوانا .
كما لو أنك في المثال السابق تقول للمتصفح : الكتابة ( this is a title ) تمثل عنوانا .
و بهذه الطريقة تستطيع تحديد العناوين و النصوص و الروابط و كل شيء في صفحتك . كل ما عليك معرفته هو معنى مختلف الوسوم .
الوسوم المغلقة
تستخدم هذه الوسوم غالبا لإدخال عنصر في مكان معين في الصفحة ، كالصورة مثلا : ليس من الضروري أن تحدد بداية الصورة و نهايتها بل يكفي أن تقول للمتصفح ' أضف هذه الصورة هنا ' .
يكتب الوسم المغلق هكذا :
السمات
السمات ( Attribute ) هي خيارات الوسوم ، تأتي لعطي بعض المعلومات الإضافية للوسم .
توضع السمات بعد إسم الوسم مباشرة و قبل الرمز < ، مثال :
حسنا السمات مهمة لبعض الوسوم كوسم الصورة </ img> ، فمثلا إن أدخلت هذا الوسم في صفحتك فإن المتصفح لن يعرف أي صورة من صور حاسوبك تريد إدراجها في موقعك .
لذلك عليك أن تضيف للوسم</ img> سمة src تحتوي على عنوان الصورة التي تريد إدراجها ، مثال
العناصر
باختصار ، العناصر هي الوسوم و سماتها و محتواها . أي أن الوسم السابق <img src='image1.png' /> يسمى أيضا عنصر ، فبدل من أن نقول وسم الفتح <tag> و وسم الإغلاق <tag/> يكفي أن نقول العنصر <tag> .
قد يقول لك شخص ما : أكتب داخل العنصر <element> المحتوى كذا . هذه العبارة تعني أنه عليك كتابة المحتوى المطلوب منك بين وسم الفتح <element> و وسم الإغلاق <element/> .
لنعد الان لمحرر النصوص ، لم لا تقم بنسخ و لصق الكود أسفله في محررك . يمثل هذا الكود البنية الأساسية لصفحات الويب ( صفحات HTML ) .
لاحظ أن الوسوم تفتح و تغلق بترتيب محدد ، فمثلا وسم الفتح <html> يوجد في الأول ، و بالمقابل يوجد وسم الإغلاق <html/> في الأخير . فوسوم الإغلاق يجب أن ترتب عكس ترتيب وسوم الفتح . مثال :
<DOCTYPE html!>
السطر الأول يسمى الـDOCTYPE . و هذا السطر يقول للمتصفح أن هذه الصفحة صفحة HTML .
هذا ليس وسما مثل الاخرين ( إنه كعلامة فقط ) يمكنك القول بأنه يعرف قواعد HTML للمتصفح .
هذا السطر كان يكتب في الإصدارات السابقة للغة HTML كالتالي :
العنصر <html>
بهذه الطريقة تستطيع حفظ ملفات موقعك .
الوسوم و السمات الخاصة بها
الوسوم
تتكون صفحة HTML بما نسميه الوسوم ( Tag ) . هذه الأخيرة لا تظهر في المتصفح كالنص الذي كتبته ، لكنها توضح للمتصفح ماذا يفعل .
إدخال الوسوم أمر سهل . يتم تمييزها عن باقي النصوص بوضعها داخل العلامتين <...> مثال : <Tag>
بماذا تفيد الوسوم ؟ إنها تحدد طبيعة النص داخلها كما لو أنها تقول ' هذا نص ' ' هذا عنوان ' هذه صورة ' ( تابع القرائة )
هناك نوعان من الوسوم : الوسوم العادية و الوسوم المغلقة .
الوسوم العادية ( الوسوم المزدوجة )
تكون الوسوم غالبا على شكل أزواج حيث يمثل الوسم الأول وسم البداية ( أو وسم الفتح ) و الوسم الثاني وسم النهاية ( أو وسم الإغلاق )
<title>this is a title</title>
الوسم ( <title> ) يمثل وسم البداية و الوسم ( <title/> ) يمثل وسم النهاية
يفهم المتصفح هذا المثال على أن الكتابة بين الوسمين تمثل عنوانا ، و أي كتابة خارج الوسمين ليست عنوانا .
this is Not a title <title> this is a title </title> this is Not a title
كما لو أنك في المثال السابق تقول للمتصفح : الكتابة ( this is a title ) تمثل عنوانا .
و بهذه الطريقة تستطيع تحديد العناوين و النصوص و الروابط و كل شيء في صفحتك . كل ما عليك معرفته هو معنى مختلف الوسوم .
الوسوم المغلقة
تستخدم هذه الوسوم غالبا لإدخال عنصر في مكان معين في الصفحة ، كالصورة مثلا : ليس من الضروري أن تحدد بداية الصورة و نهايتها بل يكفي أن تقول للمتصفح ' أضف هذه الصورة هنا ' .
يكتب الوسم المغلق هكذا :
<image />
السمات
السمات ( Attribute ) هي خيارات الوسوم ، تأتي لعطي بعض المعلومات الإضافية للوسم .
توضع السمات بعد إسم الوسم مباشرة و قبل الرمز < ، مثال :
<tag attribute='value' />
حسنا السمات مهمة لبعض الوسوم كوسم الصورة </ img> ، فمثلا إن أدخلت هذا الوسم في صفحتك فإن المتصفح لن يعرف أي صورة من صور حاسوبك تريد إدراجها في موقعك .
لذلك عليك أن تضيف للوسم</ img> سمة src تحتوي على عنوان الصورة التي تريد إدراجها ، مثال
<img src='image1.png' />
العناصر
باختصار ، العناصر هي الوسوم و سماتها و محتواها . أي أن الوسم السابق <img src='image1.png' /> يسمى أيضا عنصر ، فبدل من أن نقول وسم الفتح <tag> و وسم الإغلاق <tag/> يكفي أن نقول العنصر <tag> .
قد يقول لك شخص ما : أكتب داخل العنصر <element> المحتوى كذا . هذه العبارة تعني أنه عليك كتابة المحتوى المطلوب منك بين وسم الفتح <element> و وسم الإغلاق <element/> .
و العناصر المغلقة هي التي تتكون من الوسوم المغلقة ، و العناصر العادية هي التي تتكون من وسمين وسم الفتح و وسم الإغلاق .
البنية الأساسية لصفحة HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
</body>
</html>
لاحظ أن الوسوم تفتح و تغلق بترتيب محدد ، فمثلا وسم الفتح <html> يوجد في الأول ، و بالمقابل يوجد وسم الإغلاق <html/> في الأخير . فوسوم الإغلاق يجب أن ترتب عكس ترتيب وسوم الفتح . مثال :
- <html><body></body></html> : صحيح : وسم الفتح الأول يقابله وسم إغلاقه في الأخير و وسم الفتح بعد الأول يقابله وسم إغلاقه قبل الأخير .
- <html><body></html></body> : خطأ : العناصر متداخلة فيم بينها .
<DOCTYPE html!>
<!DOCTYPE html>
السطر الأول يسمى الـDOCTYPE . و هذا السطر يقول للمتصفح أن هذه الصفحة صفحة HTML .
هذا ليس وسما مثل الاخرين ( إنه كعلامة فقط ) يمكنك القول بأنه يعرف قواعد HTML للمتصفح .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
لكن في HTML 5 تقرر إختصار كل هذا في سطر بسيط سهل الحفظ ( <!DOCTYPE html> ) .العنصر <html>
<html>
</html>
</html>
إنه العنصر الرئيسي للكود . إنه يجمع كل عناصر صفحتك . و كما ترى وسم النهاية <html/> يوجد في اخر الكود .
عنصر الرأس <head> و البدن <body>
تتقسم الصفحة إلى جزئين :
العنصر <meta>
عنصر الرأس <head> و البدن <body>
تتقسم الصفحة إلى جزئين :
- الرأس <head> : هذا الجزء يعطي لصفحة الويب بعض المعلومات الداخلية كإسم الصفحة نفسها و الترميز المستعمل فيها ( للسماح ببعض الحروف ) و غيرها . كل المعلومات التي تكون في رأس الصفحة لا تظهر بشكل مباشرة في صفحة الويب و لكن هذا لا يعني أنها غير مهمة ، على العكس من ذلك . ستعرف أهميتها فيم بعد .
- البدن <body> : هذا الجزء هو الذي يحتوي على كل العناصر الظاهرة في صفحتك ( النصوص الروابط و الصور ... )
مهم : إذا كنت أن تكتب بالعربية في المحرر فستلاحظ أنه يكتب ؟؟؟؟ بدل ذلك . هذا المشكل من الترميز . في القائمة العلوية للمحرر و اختر Encoder en UTF-8 ← Encodage . الان ستتمكن من كتابة اللغة العربية
هذا العنصر يحدد الترميز المستعمل في ملف HTML .
كنت قد حولت الترميز قبلا إلى UTF-8 لذلك عليك أن تضيف السمة Charset تحتوي على القيمة UTF-8 لكي تقول للمتصفح أنك غيرت الترميز إلى UTF-8 .
هناك العديد من الترميزات في العالم ، لكن أفضلها هو UTF-8 فهو ترميز موحد يسمح بجميع العلامات و الحروف الممكنة .
العنصر <title>
يكون هذا العنصر في رأس الصفحة ، و هو يحدد إسم أو عنوان الصفحة .
ينصح بأن يكون الإسم صغيرا . أقل من 100 حرف على العموم .
يظهر الإسم في صفحة الويب لكن في الشريط العلوي للمتصفح .
هناك العديد من الترميزات في العالم ، لكن أفضلها هو UTF-8 فهو ترميز موحد يسمح بجميع العلامات و الحروف الممكنة .
العنصر <title>
يكون هذا العنصر في رأس الصفحة ، و هو يحدد إسم أو عنوان الصفحة .
ينصح بأن يكون الإسم صغيرا . أقل من 100 حرف على العموم .
يظهر الإسم في صفحة الويب لكن في الشريط العلوي للمتصفح .
النهاية ( :
السلام عليكم
ردحذفدرس جميل ومفيذ بارك الله فيك
(يجب تعلم ايضا لغة css، لتكون الصفحة اجمل)
سؤال :
ما هو الترميز الافتراضي للمتصفح ؟
وما هي الترميزات التي تسمح بإظهار اللغة العربية في المتصفح ؟ او هناك عدة ترميزات..
بارك الله في اخي
مرحبا
ردحذفأقصد بالترميز أخي الـ Encodage
و الترميز الإفتراضي في المتصفحات موزيلا و كروم و سفاري هو UTF-8 و هو يسمح بجميع حروف اللغة العربية
بالنسبة لأنترنت إكسبلورر يتوفر على الترميز Europe occidentale و هو ترميز يسمح بمعضم ( ليس كل ) حروف اللغة العربية و لا يسمح ببعض العلامات الإملائية
لذلك يبقى الترميز UTF-8 الأقوى
و هو المعمول به حاليا في جميع المواقع العربية
حسنا هذا هو الدرس الثاني
ردحذفاتممت دراسته بعناية والحمد لله قمت بالتطبيق
رائع انت اخي بما تقدمه لنا
تحياتي
اخوك
رائع الدرس بوركتم أخي
ردحذفوفقكم الله