أساسيات لغة HTML
هنا سنتعرف على أساسيات لغة HTML وكيفية عملها فكما قلنا سابقا فلنقوم بتنسيق النص فاننا سنوجه أوامر للحاسوب وهذه الأوامر هي عبارة عن أوسمة وكل وسم يقوم بعمل معين ويبدأ بالشكل التالي <الأمر> وينتهي بالشكل التالي:</ الأمر>حيت نضيف الشرطة المائلة بعد القوس الأول مباشرة أما النص الذي نريد تطبيق هذا التنسيق عليه فسنضعه بينهما : </الأمر> النص المراد تطبيق التنسيق عليه <الأمر> هذا هو المبدأ بكل بساطة.
هناك أيضا وسوم أخرى لاتحتاج لوسم للإغلاق وسنتعرف عليها من خلال هذا الدرس.
بعد أن تعرفنا على مبدأ عمل لغة HTML سنقوم الأن بشرح لأهم الوسوم التي يمكن أن تتكون منها صفحة ويب وسنبدأ هنا بشرح الهيكل العام الذي تتكون منه كل صفحة ويب وهو كالتالي:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> عنوان الصفحة </title> </head> <body> </body> </html>
يمكنكم نسخ ولصق هذه السطور في مفكرتكم Notepad حيت سنقوم بشرح دور كل سطر على حدة.
أولا سنبدأ بالسطر الأول وهو على الشكل التالي: <!DOCTYPE html> وهوالذي الدي يحدد بأن الصفحة ستكون عبارة صفحة ويب وهو مختلف شيأ ما عن الأوسمة الاخرى، فلنعتبره استثناء.
تم في السطر الموالي نجد الوسم : <html> وإذا لاحظتم في السطر الأخير فهناك وسم أخر لإغلاقه <html/> إذن فهما يحيطان بكامل الصفحة، يمكن إستغلال هذه الأوسمة حين نريد كتابة صفحات باللغة العربية مثلا وذلك ليكون اتجاه الكتابة من اليمين إلى اليسار ولهذا يمكننا أن نضيف مايلي (dir="rtl") قرب كلمة HTML وسنحصل على <HTML dir="rtl"> وبهذا يصبح اتجله الكتابة من اليمين إلى اليسار.
هناك أيضا الوسم <head> وهو يحدد رأس الصفحة لأن لكل صفحة ويب رأس وجسم ويتضمن هذا الوسم هنا وسمين أخرين الأول هو: </meta charset="utf-8"> وهذا الوسم يحدد التشفير المستعمل لصفحتكم أي طريقة حفظ الصفحة وهو الذي يحدد كيف يتم إظهار حروف كل لغة وهناك الكثير من تقنيات التشفير لكن ينصح باستعمال التقنية UTF-8 والموجودة في هذا الوسم، كما يجب عليكم حفظ الصفحة بUTF-8 كي لاتحصلو علو رموز غريبة وغير مفهومة خصوصا عند الكتابة باللغة العريبة ولذلك ماعليكم سوى الدهاب إلى القائمة Encodage وبعد الظغط عليها تظهر قائمة منسدلة ومنها نختار(Encoder en UTF-8 (sans BOM لكن هذا يطبق فقط على الملف المفتوح حاليا ولكي لا تظطر لتطبيقها على كل ملف على حدة تقوم بإنشائه، ما عليك سوى الذهاب إلى القائمة Pramétrage ومن القائمة المنسدلة نختار Préférences تم onglet Nouveau document/Dossier بعدها حدد UTF-8 sans BOM في القائمة.
وسم أخر يوجد داخل الوسم <head> وهو الوسم <title></title>ويتضمن العبارة "عنوان الصفحة" وإذا لاحظتم جيدا أنه عند فتح الصفحة التي أنشأناها فستلاحظون أن هذه العبارة تظهر في أعلى الصفحة ويظهر العنوان أيضا في نتائج محركات البحث كجوجل مثلا و تبين الصورة الثالية مكان ظهور العنوان على المتصفح:
وأخيرا هناك الوسم <body></body> وكما ذكرنا سابقا فإن كل صفحة ويب تتكون من رأس وجسم وهذا الوسم هو الذي يحدد جسم الصفحة وفيه نقوم بكتابة كل محتوى الصفحة أي سيتضمن العديد من الأوسمة الاخرى وهو الجزء الأكبر مقارنة برأس الصفحة.
التعليقات
في أي صفحة ويب يمكننا أن نضيف ما يسمى بالتعليق أو التعليقات وهي في الحقيقة لا تؤثر على كود الصفحة الذي كتبناه كما أن المتصفح لا يظهرها ورغم أنها قد تبدو عديمة الفائدة إلا أن دورها مهم و يكمن في أنها تمكننا من التعليق على كود الصفحة الذي كتبناه حيث بها يمكننا أن نفسر كيفية عمل هذا الكود ودوره ولذلك من أجل تذكره فيما بعد لأننا قد ننساه .
أما فيما يخص كيفية كتابته فهو عبارة عن وسم إلا أن طريقة كتابته مختلفة شيئا ما وللتوضيح أكتر إليكم هذا المثال:
<--! نكتب التعليق هنا -->
ويمكنكم إضافة التعليقات في أي مكان في صفحتكم وقدر ما تشأؤن منها كما في الثال التالي:
<html>
<!--رأس الصفحة-->
<head>
<meta charset="utf-8"/>
<title>عنوان الصفحة</title>
</head>
<!--جسم الصفحة -->
<body>
</body>
</html>
كما يجب أن تعلمو أن الجميع يمكنه رؤية كود صفحتكم بعد وضعها على الأنترنت بما في ذلك التعليقات حيت يكفي النقر في مكان ما على الصفحة بالزر الأيمن للفأرة وإختيار الخيار Afficher le code source من القائمة المنسدلة ليظهر الكود ويمكنكم تجربة هذا على أي صفحة ويب كيفما كانت لهذا يجب عليكم الا تضعو أي معلومة حساسة في تعليقاتكم ككلمة المرور مثلا وغيرها.
تنظيم النص
بعد أن تعرفنا على بعض أساسيات لغة HTML سوف نتعمق الأن في التفاصيل أكثر حيت سنتعرف على وسوم جديدة والتي ستمكننا من تنظيم النص وتنسيقه.
الفقرات
لكتابة فقرة ما على صفحة HTML هناك وسم خاص بالفقرات ويكتب على الشكل التالي: <p>هنا نكتب الفقرة </p>.
وإدا طبقناه على صفحتنا السابقة فإننا سنحصل على مايلي:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> عنوان الصفحة </title>
</head>
<body>
<p> مرحبا بكم على موقعي </p>
</body>
</html>
الرجوع إلى السطر
كما نعرف فحين نريد الرجوع إلى السطر في أحد برامج تحرير أو معالجة النصوص فيكفي الظغط على الزرEntree فتبدأ سطرا جديدا لكن هذه الطريقة لاتعمل مع صفحتنا فلو أننا كتبنا فقرة طويلة على المفكرة Notepad ثم فتحنها في المتصفح فإنه سيقوم بكتابة هذه الفقرة في سطر واحد دون الرجوع إلى السطر رغم أننا كتبناها في عدة سطور على Notepad لتفهمو أكثر جربو مثلا الكود التالي:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> عنوان الصفحة </title>
</head>
<body>
<p>مرحبا بكم على موقعي وهذه أول صفحة من هذا الموقع فهو مازال قيد الإنشاء وسأنتهي منه بعد أن أتعلم العديد من الاشياء وهذه الفقرة التي أكتبها الأن فهي للتجربة فقط وهي طويلة جدا ورغم أنه فيها رجوع إلى السطر إلا أن المتصفح سيظهرها في سطر واحد.</p>
</body>
</html>
بعد أن تجربو هذا الكود ستلاحضون أن المتصفح يكتبه في سطر واحد و,إن الزر Entree هنا لا يفيد في شيء لذلك سأعطيكم المثال التالي الذي سيوضح لكم كيف تضيفون فقرات أخرى وفي المتصفح فستبدأ الفقرة الثانية في سطر جديد :
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>
<p>مرحبا بكم على موقعي وهذه أول صفحة من هذا الموقع فهو مازال قيد الإنشاء وسأنتهي منه بعد أن أتعلم العديد من الاشياء</p>
<p>وهذه الفقرة التي أكتبها الأن فهي للتجربة فقط وهي طويلة جدا ورغم أنه فيها رجوع إلى السطر إلا أن المتصفح سيظهرها في سطر واحد.</p>
</body>
</html>
هنا كل شيء واضح فلم نقوم سوى بإضافة وسم أخر لتحديد فقرة جديدة ولكن ماذا لو أردنا البدء من سطر جديد خلال الفقرة. ولفعل هذا ، الأمر سهل جدا ما عليكم سوى إضاف الوسم التالي :</br> عند الكلمة التي تريدون أن ينتهي عندها السطر وهو يضاف وحده ولا يحتاج لوسم لإغلاقه كما في المثال التالي:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> عنوان الصفحة </title>
</head>
<body>
<p>مرحبا بكم على موقعي<br/> وهذه أول صفحة من هذا الموقع فهو مازال قيد الإنشاء وسأنتهي منه بعد أن أتعلم العديد من الاشياء</p>
<p>وهذه الفقرة التي أكتبها الأن فهي للتجربة فقط وهي طويلة جدا ورغم أنه فيها رجوع إلى السطر إلا أن المتصفح سيظهرها في سطر واحد.</p>
</body>
</html>
بعد أن تعرفنا على كيفية إنشاء الفقرات وكيفية الكتابة في بداية سطر جديد سنتعرف الأن على عنصر مهم وهو العناوين.
العناوين
بعد أن تكثر فقراتكم فلابد أنكم ستحتاجون للعناوين وذلك لعنونة كل فقرة على حدة لذلك فHTML توفر لنا هذه الخاصية حيث بها يمكننا كتابة ستة أنواع من العناوين وتختلف هذه العناوين في ما بينها من حيت حجمها حيت نميز من بينها عناوين رئيسية وعناوين فرعية إلى غير ذلك وإليكم هذا الكود الذي ستتعرفون بعد تجربته على كل هذه العناوين:
<! DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>
<h1> عنوان رئيسي كبير جدا</h1>
<h2>عنوان رئيسي أصغر من الأول</h2>
<h3>عنوان صغير</h3>
<h4>عنوان أكثر صغرا</h4>
<h5>عنوان صغير جدا </h5>
<h6>عنوان صغير جدا جدا </h6>
</body>
</html>
في الحقيقة ستة أنواع من العناوين كثيرة جدا وقد لانحتاج إلى كل هذه الأنواع وغالبا مايتم إستعمال النوع الأول والتاني والثالث.
ولنفهم أكثر كيفية إستعمال العناوين سنأخد المثال السابق وسنضيف إليه العناوين وإليكم الكود لتجربته:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> عنوان الصفحة </title>
</head>
<body>
<h1>مرحبا بكم</h1>
<p>مرحبا بكم على موقعي<br/> وهذه أول صفحة من هذا الموقع فهو مازال قيد الإنشاء وسأنتهي منه بعد أن أتعلم العديد من الاشياء</p>
<h2>فقرة للتجربة</h2>
<p>وهذه الفقرة التي أكتبها الأن فهي للتجربة فقط وهي طويلة جدا ورغم أنه فيها رجوع إلى السطر إلا أن المتصفح سيظهرها في سطر واحد.</p>
</body>
</html>
إعطاء القيمة
قد تكون لبعض الكلمات في فقراتكم أهمية أكثر من الكلمات الأخرى لهذا يجب إظهارها بشكل مختلف عن غيرها من الكلمات ولهذا فهناك عدة أوسمة لفعل هذا بHTML وإليكم هذه الأوسمة :
- <em></em>: وهذا الوسم يمكننا من إعطاء أهمية قليلة للكلمة أو الجملة فيكفي فقط وضع الكلمة المراد إعطاءها الأهمية بين هذين الوسمين مما يجعل المتصفح يضهرها على شكل نص مائل (italique).
- <strong></strong>: هذا الوسم يستعمل لإعطاء أهمية أكبر للكلمة أو الجملة ويستعمل بنفس الطريقة التي يستعمل بها الوسم الأول وهو يظهر النص على المتصفح على هيئة نص مكتوب بخط عريض.
- <mark></mark>: هذا الوسم يمكننا من تمييز كلمة أو جملة ما عن باقي النص وليس بالضرورة أن يكون مهما وهو يظهر النص في المتصفح على هيئة نص مسطر.
كما يجب التنويه إلى أن هذه الأوسمة رغم أنها تمكن من إظهار النص على شكل مائل أو بخط عريض أو نص مسطر إلا أنها لا تستعمل لذلك، وسنتعرف على كيفية كتابة النصوص بهذه الأشكال بعد أن نتعرف على لغة CSS وهي التي ستمكننا من ذلك.
وجدير بالذكرأيضا أن ربوتات محركات البحث كجوجل مثلا فهي تقرأ الكود المصدري لصفحات الويب وإعطاء الأهمية لكلمات صفحتكم قد يزيد من حظوظ ظهورها على نتائج البحث في هذه المواقع لكن هذا لايعني أن استعمال هذه الأوسمة بإفراط قد يحسن مرتبتكم في محركات البحت.
القوائم
تعد القوائم عنصرا أساسيا في كل صفحة ويب ويمكن أن نميز بين نوعين من القوائم فهناك قوائم مرتبة وقوائم غير ترتيب والقوائم غير المرتبة هي التي التي ليس فيها لا أول ولا تاني ولا ثالث ولإنشاء هذه القائمة يكفي إستعمال الوسم التالي :<ul></ul> مع وضع عناصر القائمة بين هذين الوسمين وكل عنصر يكون بين وسمين أخرين وهما:<li></li> وإليكم هذا المثال لتفهمو أكثر:
<ul>
<li>عنصر أول</li>
<li>عنصر ثاني</li>
<li>عنصر ثالث</li>
</ul>
جربو هذا الكود لتلاحظو نتيجته مع العلم أنه يوضع وسط الوسم <body></body> لأنني لم أضع الكود كاملا وذلك ليكون سهل القراءة.
أما فيما يخص القوائم المرتبة فهي تقريبا مثل الأولى إلا أنها مرتبة ولإنشاء هذه القائمة يكفي إستعمال الوسم <ol></ol> وداخلهما نستعمل نفس الوسمين السابقين <li></li> وهاهو مثال أخر لتفهمو أكثر:
<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ol>
الأن تعرفنا على العديد من الأوسمة لكنها لا تكفي لإنشاء موقع كامل علما أن المواقع ماهي إلا عدة صفحات مرتبطة فيما بينها ولربطها فإننا سنحتاج إلى ما يسمى الروابط وهو ما سنتحدت عنه في الجزء الموالي.
السلام عليكم
ردحذفالمتصفح عني لايقرأ اللغة العربية في هذا التمرين
أقوم بالمثال كما هو مكتوب لكن لاتظهر اللغة العربية
تظهر على شكل رموز
ماعليك سوى فتح صفحتك مرة أخرى في Notepad تم ندهب إلى القائمة Encoding ومن القائمة التي تظهر بعد الظغط عليها نختارConvert to UTF-8 ثم نحفظ التغييرات ونعيد فتح الصفحة وستكون المشكلة قد حلت إن لم تفهم راجع الفقرة الأهيرة من الدرس السابق:
حذفhttp://al-bassit.blogspot.com/2015/02/learn-html5-and-css3-for-beginners.html