في هذا الفصل سنبدأ التطبيق! وسوف نكتشف أساسيات HTML ونسجل صفحة الويب الأولى!
بطبيعة الحال، لا تتوقعوا انشاء صفحة استثنائية على شبكة الإنترنت من الفصل الثاني ، ولكن التحلي بالصبر ... فإن كل شئ يأتي !
بطبيعة الحال، لا تتوقعوا انشاء صفحة استثنائية على شبكة الإنترنت من الفصل الثاني ، ولكن التحلي بالصبر ... فإن كل شئ يأتي !
بدون إطالة هذا هو فهرس الدرس الثاني من القسم الأول :
1. إنشاء صفحة بواسطة محرر النصوص
2. العلامات والسمات الخاصة بها
3. البنية الأساسية لصفحة HTML5
4. تعليقات
1. إنشاء صفحة بواسطة محرر النصوص
كما قلت لكم، سوف نستحدث موقعنا في محرر نص. و قد تطرقت في الدرس السابق الى مجموعة من المحررات
في أعقاب هذه الدورة، سأعمل مع المفكرة Notepad++
في أعقاب هذه الدورة، سأعمل مع المفكرة Notepad++
ماذا نفعل الآن؟ ماذا نكتب على هذه الورقة الفارغة ؟
لنقم باختبار صغير. أدعوكم لكتابة ما يأتي في رأسكم مثلي في الشكل التالي.
لنقم باختبار صغير. أدعوكم لكتابة ما يأتي في رأسكم مثلي في الشكل التالي.
الآن، لنسجل الملف .و الأمر في غاية البساطة: كما هو الحال في جميع البرامج، لديك قائمة ملف ثم حفظ. يظهر مربع حوار يطلب منك مكان حفظ الملف وتحت أي اسم. احفظه أينما تريد. و إعطه الاسم الذي تريد وبنتهي بالصيغة. html ، على سبيل المثال test.html ، كما هو مبين في الشكل التالي.
ملاحظة: أنصحكم بإنشاء مجلد جديد في المستندات وتضعون فيه ملفات موقعكم. عن نفسي أنا خلقت مجلد test حيث وضعت ملفي test.htm
الآن افتحوا مستكشف الملفات في المجلد حيث تم حفظ الصفحة الخاصة بكم. سترون الملف الذي أنشأتموه للتو
الرمز الذي يمثل ملف يعتمد على متصفح الويب الافتراضي هنا الرمز هو غوغل كروم لأنه المتصفح الافتراضي عندي، ولكن الملف قد يكون لها رمز آخر لك. هنه على سبيل المثال الرموز التي تظهر ادا كان المتصفح الأساسي هو فايرفوكس أو إنترنت إكسبلورر
ببساطة انقروا نقرا مزدوجا فوق هذا الملف وسيتم فتح المتصفح، الشكل التالي يعرض النص الذي كتبته
كما ترون لم يعمل بشكل جيد، عرض كل النص على نفس السطر رغم أننا قمنا بكتابة سطرين مختلفين من فماذا حدث ؟
في الواقع، لإنشاء صفحة على شبكة الإنترنت لا يكفي كتابة النص فقط كما فعلنا. بل يجب بالإضافة إلى هذا النص، أن نكتب ما يسمى الوسوم « tag »، مما سيعطي تعليمات لجهاز الكمبيوتر مثل "اذهب إلى سطر"، "اعرض صورة"، الخ
.
2. الوسوم والسمات الخاصة بها
أ. الوسوم
تمتلئ صفحات HTML مع ما يسمى الوسوم. و هي غير مرئية على الشاشة لزوار موقعكم، لكنها تسمح للكمبيوتر بفهم ما يعرضه. العلامات من السهل ايجادها فهي محاطة ب "الاقتباس"، وهذا يعني الرمزين <و>، مثل هذا : <tag>
بماذا تفيد الوسوم ؟ انها تشير إلى طبيعة النص الذي تحيط به . أنها تعني، على سبيل المثال: "هذا هو عنوان الصفحة"، "هذه هي الصورة"، "هذه هي الفقرة من النص"، الخ.
بماذا تفيد الوسوم ؟ انها تشير إلى طبيعة النص الذي تحيط به . أنها تعني، على سبيل المثال: "هذا هو عنوان الصفحة"، "هذه هي الصورة"، "هذه هي الفقرة من النص"، الخ.
هناك نوعان من الوسوم: الوسوم المزدوجة الوسوم المغلقة.
الوســوم المزدوجـــة :
تفتح ثم يكتب فيها النص، وفيما بعد تغلق. و هنا مثال توضيحي :
<title> هذا عنــــوان </tilre>
الوسم ( <title> ) يمثل وسم البداية و الوسم ( <title/> ) يمثل وسم النهاية
يفهم المتصفح هذا المثال على أن الكتابة بين الوسمين تمثل عنوانا ، و أي كتابة خارج الوسمين ليست عنوانا .
يفهم المتصفح هذا المثال على أن الكتابة بين الوسمين تمثل عنوانا ، و أي كتابة خارج الوسمين ليست عنوانا .
الوســوم المغلــقــة:
وهذه الوسوم تستخدم غالبا لإدراج عنصر ما في موضع معين( مثل صورة) وليس من الضروري تحديد بداية ونهاية للصورة، بل يعني فقط للكمبيوتر "إدراج صورة هنا."الوسوم المغلقة تكتب على هذا الشكل:
<image />
أ. الســمــات :
السمات هي بصيغة اخرى خيارات الوسوم. وهي مكملة لتقديم معلومات إضافية. يتم وضع السمة بعد اسم الوسم ويحتوي على الاغلب على القيمة، و هذا هو شكل الكتابة :<tag attribute="value">
لنأخذ المثال الذي رأينا للتو <image /> , فوحدها لا تفيدنا في شئ لذلك نضيف اليها سمة لتحديد اسم الصورة التي نريد عرضها :
<image nom="photo.jpg" />
في حالة الوسوم المزدوجة , لا توضع السمات إلا في وسم البداية ، وليس في وسم النهاية.
ملحوظــة: العناصــــر
العناصر هي الوسوم و سماتها و محتواها . أي أن الوسم السابق <img src='image1.png' /> يسمى أيضا عنصر ، فبدل من أن نقول وسم الفتح <tag> و وسم الإغلاق <tag/> يكفي أن نقول العنصر <tag> .
قد يقول لك شخص ما : أكتب داخل العنصر <element> المحتوى كذا . هذه العبارة تعني أنه عليك كتابة المحتوى المطلوب منك بين وسم الفتح <element> و وسم الإغلاق <element/> .
قد يقول لك شخص ما : أكتب داخل العنصر <element> المحتوى كذا . هذه العبارة تعني أنه عليك كتابة المحتوى المطلوب منك بين وسم الفتح <element> و وسم الإغلاق <element/> .
و العناصر المغلقة هي التي تتكون من الوسوم المغلقة ، و العناصر العادية هي التي تتكون من وسمين وسم الفتح و وسم الإغلاق .
3. البنية الأساسية لصفحة HTML5
لنعد إلى محرر النصوص لدينا (في حالتيNotepad++)
أدعوكم لكتابة أو نسخ ولصق الكود أدناه.. هذا الكود البنية الاساسية لصفحات الويب
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>
</body>
</html>
ملاحظـــة: الوسوم تفتح وتغلق في ترتيب معين. على سبيل المثال، <HTML> هي الأولى التي يتم فتحها وهي أيضا آخر من يتم إغلاقها في النهاية بواسطة الرمز </ HTML>
- <html><body></body></html> : صحيح : وسم الفتح الأول يقابله وسم إغلاقه في الأخير و وسم الفتح بعد الأول يقابله وسم إغلاقه قبل الأخير .
- <html><body></html></body> : خطأ : العناصر متداخلة فيم بينها .
لا تخافوا من رؤية كل هذه الوسوم في وقت واحد، وسوف أشرح لكم دورها!
<!DOCTYPE html>
<!DOCTYPE html>
السطر الأول يسمى الـDOCTYPE . و هذا السطر يقول للمتصفح أن هذه الصفحة صفحة HTML .
هذا ليس وسما مثل الاخرين ( إنه كعلامة فقط ) يمكنك القول بأنه يعرف قواعد HTML للمتصفح
هذا ليس وسما مثل الاخرين ( إنه كعلامة فقط ) يمكنك القول بأنه يعرف قواعد HTML للمتصفح
العنصر <html>
<html>
</html>
عنصر الرأس <head> و البدن <body>
تتقسم الصفحة إلى جزئين :
تتقسم الصفحة إلى جزئين :
- الرأس <head> : هذا الجزء يعطي لصفحة الويب بعض المعلومات الداخلية كإسم الصفحة نفسها و الترميز المستعمل فيها ( للسماح ببعض الحروف ) و غيرها . كل المعلومات التي تكون في رأس الصفحة لا تظهر بشكل مباشرة في صفحة الويب و لكن هذا لا يعني أنها غير مهمة ، على العكس من ذلك . ستعرف أهميتها فيم بعد .
- البدن <body> : هذا الجزء هو الذي يحتوي على كل العناصر الظاهرة في صفحتك ( النصوص الروابط و الصور...)
ملاحظة مهمة : إذا كنت تكتب بالعربية في المحرر فستلاحظ أنه يكتب ؟؟؟؟ بدل ذلك . هذا المشكل من الترميز . في القائمة العلوية للمحرر اختر Encoder en UTF-8 ← Encodage . الان ستتمكن من كتابة اللغة العربية
العنصر <meta>
هذا العنصر يحدد الترميز المستعمل في ملف HTML .
كنت قد حولت الترميز قبلا إلى UTF-8 لذلك عليك أن تضيف السمة Charset تحتوي على القيمة UTF-8 لكي تقول للمتصفح أنك غيرت الترميز إلى UTF-8 .هناك العديد من الترميزات في العالم ، لكن أفضلها هو UTF-8 فهو ترميز موحد يسمح بجميع العلامات و الحروف الممكنة .
العنصر <title>
يكون هذا العنصر في رأس الصفحة ، و هو يحدد إسم أو عنوان الصفحة .
ينصح بأن يكون الإسم صغيرا . أقل من 100 حرف على العموم .
يظهر الإسم في صفحة الويب لكن في الشريط العلوي للمتصفح .
4. التـعـلــيـقـات
لقد تعلمنا في هذا الفصل إنشاء أول صفحة HTML حقيقية. وقبل أن أختتم، أود أن أعرج على مبدأ التعليقات.
التعليق في HTML هو النص الذي ستعمل للتذكر فقط. لا يتم عرضه في الصفحة و لا لم يتم قراءته بواسطة الكمبيوتر، و هو مفيد لكم وللناس الذين سيقرؤون كود الصفحة الخاصة بكم.
التعليق هو وسمة HTML مع نموذج خاص جدا:التعليق في HTML هو النص الذي ستعمل للتذكر فقط. لا يتم عرضه في الصفحة و لا لم يتم قراءته بواسطة الكمبيوتر، و هو مفيد لكم وللناس الذين سيقرؤون كود الصفحة الخاصة بكم.
<!-- هذا تعليق -->
يمكنكم وضعها في أي مكان تريدون في الكود: انه ليس لديها تأثير على الصفحة الخاصة بكم، ولكن يمكنكم استخدامها لمساعدتكم على تحديد الكود لا سيما إذا كان طويلا
<!DOCTYPE html><html><head><!--رأس الصفحة --><meta charset="utf-8" /><title>عنوان</title></head></html>
انته الدرس 2 الذي أعددناه في 3 أيام و في الختام نرجو ان تستفيدوا
تنبيه : أرجو عدم نسخ المحتوى بدون ذكر المصدر و السلام
بقلم مطوري البلوجر
المطورون العرب هي مدونة مختصة في مجال التقنية و خاصة التصميم بدرجة أولى تليه الأخبار المرتبطة بالتكنولوجيا . كما نتطرق لشرح أغلب المسائل المطروحة حول بلوجر من تصميم قوالب و اضافات و ايضا نمدكم بدعم فني نلبي فيه أغلب طلباتكم المطروحة في هذه المجالات فان احتجت الى دعم فني ما عليك سوى الضغط على صفحة الدعم الفني ولا تآخذونا ان تأخرنا ...
تعليقك يساعدنا على المواصلة و يدعمنا نفسيا فلا تبخل علينا برأيك
0 التعليقات:
اظغط هنا لاظهار صندوق التعليقات
إرسال تعليق
Blogger Widgets