سنتعلم في هذا الفصل كيفية إدخال المحتويات في صفحة الويب ، كما رأينا سابقا : لا يتم ذلك بأية طريقة كانت ، لا يجب نسيان أن صفحة الـHTML تتكون من عناصر و وسوم ، هذه العناصر تخبر الحاسوب بما يعرضه ( هذه فقرة ، هذا عنوان و غيرها ) .
سنتعرف على العديد من العناصر في هذا الفصل . بعضها كان موجودا من الإصدار الأول للـHTML ، و البعض الاخر تمت برمجته في الإصدار الأخير
فقط .سنرى في هذا الفصل بالترتيب :
- كيف ننشأ فقرة نصية .
- كيف نبني صفحة بالعناوين .
- كيف نميز بعض الكلمات من النص .
- كيف ننظم معلوماتنا في قائمة عمودية .
فهرس الفصل
------- الفقرات -------
في معضم الوقت ، عندما نقوم بكتابة نص ما في صفحة ويب ، فأنا نقوم بذلك فوق الفقرة ، ترمز لغة HTML لعنصر الفقرة بالوسم <p> بكل بساطة :
<p> مرحبا بكم في موقع فهمنى دوت كوم </p>
- <p> هو وسم فتح عنصر الفقرة .
- <p/> هو وسم إغلاق عنصر الفقرة .
في حال تسائلت لماذا <p> فإن p هي الحرف من paragraph و التي تعني الفقرة .
كما قلت في الفصل السابق ، يجب أن نكتب محتوى صفحتنا داخل العنصر <body> ( بين الوسمين <body> و <body/> ) . يكفي أن نضع العنصر <p> داخل <body> و نحصل بالتالي على صفحة ويب تحتوي على محتوى الفقرة .
كما قلت في الفصل السابق ، يجب أن نكتب محتوى صفحتنا داخل العنصر <body> ( بين الوسمين <body> و <body/> ) . يكفي أن نضع العنصر <p> داخل <body> و نحصل بالتالي على صفحة ويب تحتوي على محتوى الفقرة .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>فقرة </title>
</head>
<body>
<p> مرحبا بكم في موقع فهمنى دوت كوم </p>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<title>فقرة </title>
</head>
<body>
<p> مرحبا بكم في موقع فهمنى دوت كوم </p>
</body>
</html>
حسنا هذه كانت بداية جميلة 
إن كنت قد بدأت بتجربة العنصر الجديد ، فربما لاحظت أن محتوى عنصر الفقرة لا يعود إلى سطر جديد حتى و لو قمت بالضغط على زر الدخول Enter و إعادة المحتوى إلى سطر جديد في المفكرة فإن المتصفح يتجاهل ذلك و يقوم بعرض المحتوى في سطر واحد .
عنصر العودة إلى السطر .
مثال لفقرة في المفكرة .
إن كنت قد بدأت بتجربة العنصر الجديد ، فربما لاحظت أن محتوى عنصر الفقرة لا يعود إلى سطر جديد حتى و لو قمت بالضغط على زر الدخول Enter و إعادة المحتوى إلى سطر جديد في المفكرة فإن المتصفح يتجاهل ذلك و يقوم بعرض المحتوى في سطر واحد .
عنصر العودة إلى السطر .
مثال لفقرة في المفكرة .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> تجريب العودة إلى السطر </title>
</head>
<body>
<p>
مرحبا بكم في مدونتكم المتواضعة
أيها القارء العزيز ، أثبث وجودك و ضع ردا نتذكرك به
كثيرا ما نجد هذه الجملة في العديد من المدونات العربية
ربما لأن القراء العرب يخجلون من وضع الردود
</p>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<title> تجريب العودة إلى السطر </title>
</head>
<body>
<p>
مرحبا بكم في مدونتكم المتواضعة
أيها القارء العزيز ، أثبث وجودك و ضع ردا نتذكرك به
كثيرا ما نجد هذه الجملة في العديد من المدونات العربية
ربما لأن القراء العرب يخجلون من وضع الردود
</p>
</body>
</html>
شاهد نتيجة المثال
الفقرة السابقة ظهرت في سطر واحد ، رغم أنها تحتل أربعة سطور في المفكرة ، و حتى لو وضعنا مئة ألف مليون سطر فارغ بين كلمتين فإن المتصفح سيظهرهما الواحدة أمام الأخرى . يا له من مشاكس
.الحل الأول هو أن نكتب نصنا في فقرتين .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> تجريب العودة إلى السطر </title>
</head>
<body>
<p>
مرحبا بكم في مدونتكم المتواضعة
</p>
<p>
أيها القارء العزيز ، أثبث وجودك و ضع ردا نتذكرك به
كثيرا ما نجد هذه الجملة في العديد من المدونات العربية
ربما لأن القراء العرب يخجلون من وضع الردود
</p>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<title> تجريب العودة إلى السطر </title>
</head>
<body>
<p>
مرحبا بكم في مدونتكم المتواضعة
</p>
<p>
أيها القارء العزيز ، أثبث وجودك و ضع ردا نتذكرك به
كثيرا ما نجد هذه الجملة في العديد من المدونات العربية
ربما لأن القراء العرب يخجلون من وضع الردود
</p>
</body>
</html>
لكن أنا أريد فقط العودة إلى السطر لا كتابة فقرة جديدة ؟
سؤال في محله . فكما تلاحظ عند إنشاء فقرة جديدة فإن المتصفح يجعل مساحة كبيرة بين السطر الأخير من الفقرة الأولى و السطر الأول من الفقرة الثانية . كما لا يعقل كتابة كل سطر في فقرة منفردة لو أننا أردنا مثلا كتابة نص طويل .
يأتي الحل مع عنصر مغلق بسيط </ br> يتم إضافته في المكان الذي ينتهي فيه السطر .
سؤال في محله . فكما تلاحظ عند إنشاء فقرة جديدة فإن المتصفح يجعل مساحة كبيرة بين السطر الأخير من الفقرة الأولى و السطر الأول من الفقرة الثانية . كما لا يعقل كتابة كل سطر في فقرة منفردة لو أننا أردنا مثلا كتابة نص طويل .
يأتي الحل مع عنصر مغلق بسيط </ br> يتم إضافته في المكان الذي ينتهي فيه السطر .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> تجريب العودة إلى السطر </title>
</head>
<body>
<p>
مرحبا بكم في مدونتكم المتواضعة
</p>
<p>
أيها القارء العزيز ، أثبث وجودك و ضع ردا نتذكرك به <br />
كثيرا ما نجد هذه الجملة في العديد من المدونات العربية <br />
ربما لأن القراء العرب يخجلون من وضع الردود <br />
</p>
</body>
</html>
<html>
<head>
<meta charset="UTF-8" />
<title> تجريب العودة إلى السطر </title>
</head>
<body>
<p>
مرحبا بكم في مدونتكم المتواضعة
</p>
<p>
أيها القارء العزيز ، أثبث وجودك و ضع ردا نتذكرك به <br />
كثيرا ما نجد هذه الجملة في العديد من المدونات العربية <br />
ربما لأن القراء العرب يخجلون من وضع الردود <br />
</p>
</body>
</html>
- <p> لإنشاء الفقرات .
- </ br> للعودة بالنص إلى سطر جديد .
لقد عرفنا الان كيف ننشأ الفقرات ، لنر كيف يمكن إنشاء العناوين .
عندما يكون لك العديد من الفقرات في صفحة الويب ، فإن التفريق بينها يصبح صعبا بالنسبة للقارء . لذلك يتم إعتماد العناوين ، فبوضع عنوان لكل فقرة سيتمكن القارء التعرف على الفقرة التي تهمه بسهولة .
فأنت كمصمم يجب أن توفر لزائر صفحاتك الراحة .
في الـHTML هناك 6 مستويات للعناوين ، كما لو أنني أقول ' هذا العنوان أمثر أهمية من بقية العناوين ' و ' هذا العنوان أقل أهمية من السابق ' و ' هذا العنوان أقل أهمية مرة أخرى من السابق ' .... ، و بهذا فهناك 6 عناصر :
إنتبه : لا تخلط بين عناصر العناوين و عنصر <title> . العنصر <title> يظهر في الشريط العلوي للمتصفح ، أما العناوين <h1> ... <h6> فهي تظهر في الصفحة .
لا تتأثر كثيرا بهذه العناصر الستة ، عمليا نستعمل الثلاث الأولى فقط <h1> و <h2> و <h3> . يظهر المتصفح العنوان من المستوى الأول أكبر من العنوان من المستوى الثاني و الثاني أكبر من الثالث و هكذا .
------ العناوين ------
عندما يكون لك العديد من الفقرات في صفحة الويب ، فإن التفريق بينها يصبح صعبا بالنسبة للقارء . لذلك يتم إعتماد العناوين ، فبوضع عنوان لكل فقرة سيتمكن القارء التعرف على الفقرة التي تهمه بسهولة .
فأنت كمصمم يجب أن توفر لزائر صفحاتك الراحة .
في الـHTML هناك 6 مستويات للعناوين ، كما لو أنني أقول ' هذا العنوان أمثر أهمية من بقية العناوين ' و ' هذا العنوان أقل أهمية من السابق ' و ' هذا العنوان أقل أهمية مرة أخرى من السابق ' .... ، و بهذا فهناك 6 عناصر :
- <h1> </h1> : يعني ' عنوان مهم جدا ' . غالبا يستعمل في أول الصفحة .
- <h2> </h2> : عنوان اخر أقل أهمية من الأول .
- <h3> </h3> : عنوان أقل أهمية . ( يمكن القول بأنه عنوان فرعي ) .
- <h4> </h4> : ....................................................
- <h5> </h5> : ....................................................
- <h6> </h6> : هذا أصغر عنوان يمكن الوصول إليه .
يمكن القول بأن العنوان <h1> من المستوى الأول و <h2> من المستوى الثاني و هكذا دوالي .
لا تتأثر كثيرا بهذه العناصر الستة ، عمليا نستعمل الثلاث الأولى فقط <h1> و <h2> و <h3> . يظهر المتصفح العنوان من المستوى الأول أكبر من العنوان من المستوى الثاني و الثاني أكبر من الثالث و هكذا .
تذكر قليلا الـCSS اللغة التي قلنا بأنها تكمل الـHTML ، باستعمال هذه اللغة يمكننا تغيير أحجام الخطوط في العناوين و ألوانها كما نريد و ذلك لتقديم صفحة ويب أفظل .
سنتعرف على كل هذا فيم بعد . كل ما في الأمر أنك قد تبحث عن كيفية تغيير الألوان و الأشكال من الان و تقع في الخطأ 
.
.
تعرف أولا الأساسيات ثم توسع في معرفتك للغات الأخرى .
لقد نسينا أمر تجربة العناصر :
لقد نسينا أمر تجربة العناصر :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> العناوين </title>
</head>
<body>
<h1>عنوان من المستوى الأول </h1>
<h2>عنوان من المستوى الثاني</h2>
</html>
<html>
<head>
<meta charset="UTF-8" />
<title> العناوين </title>
</head>
<body>
<h1>عنوان من المستوى الأول </h1>
<h2>عنوان من المستوى الثاني</h2>
<h3>عنوان من المستوى الثالث ( العنوان الفرعي )</h3>
<h4>عنوان من المستوى الرابع</h4>
<h5>عنوان من المستوى الخامس</h5>
<h6>عنوان من المستوى السادس</h6>
</body></html>
لاحظ أننا نكتب بالعربية و مع ذلك فالمتصفح يضع نصوصنا على اليسار بدلا من اليمين . الذين يصنعون المتصفحات أناس أجانب ، لذلك قاموا بتعديلها حسب لغتهم . لكن لا تقلق : هناك وسم صغير يجعل المتصفح عربيا . و هو يوضع في الوسم <html> . ستجده في المثال التالي .
سأريك كيف تقوم بتنظيم العناوين مع الفقرات و ذلك للحصول على أحسن النتائج :
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8" />
<title> مثال للعناوين و الفقرات </title>
</head>
<body>
<h1>مرحبا بك في موقع فهمنى دوت كوم</h1>
<p>
أهلا و سهلا بكم في فهمنى دوت كوم <br />
فهمنى دوت كوم ؟ بماذا يهتم هذا الموقع ؟
</p>
<h2>موقع مهتمة بالتقنية و الإنترنت</h2>
<p>
يهتم الموقع بشكل كبير بتقديم دروس الويب ، و هي مهتمة بكل أشكال التقنية و خاصة المرتبطة بالأنترنت ، كما تحاول دائما إرضاء زوارها بأحسن المواضيع الحصرية التي قد تجعل منها موقع محبوب .
</p>
</body>
</html>
<html dir="rtl">
<head>
<meta charset="UTF-8" />
<title> مثال للعناوين و الفقرات </title>
</head>
<body>
<h1>مرحبا بك في موقع فهمنى دوت كوم</h1>
<p>
أهلا و سهلا بكم في فهمنى دوت كوم <br />
فهمنى دوت كوم ؟ بماذا يهتم هذا الموقع ؟
</p>
<h2>موقع مهتمة بالتقنية و الإنترنت</h2>
<p>
يهتم الموقع بشكل كبير بتقديم دروس الويب ، و هي مهتمة بكل أشكال التقنية و خاصة المرتبطة بالأنترنت ، كما تحاول دائما إرضاء زوارها بأحسن المواضيع الحصرية التي قد تجعل منها موقع محبوب .
</p>
</body>
</html>
ها قد بدأت الصفحة تأخذ بناءا 
.
.لا شك الان أنك متشوق لمعرفة المزيد من العناصر التي ستمكن من إضفاء الإحترافية على صفحتك .
بفضل لغة CSS سنتمكن من تلوين العناوين و النصوص كما نريد و سنتمكن من جعل العناوين ملونة و ذات خلفية منفردة و المزيد من الأشياء الرائعة .
لكن أولا سنتعرف على بعض العناصر التي تقوم تقريبا بنفس عمل الـ CSS و ذلك في الفقرة القادمة .
عناصر التخصيص
في فقرات صفحتك ، قد توجد بعض الكلمات المهمة التي يجب تمييزها عن باقي الكلمات الأخرى ، HTML تعطيك إمكانية تخصيص هذه الكلمات المهمة بتوفيرها عدة عناصر .
نبدأ بالعنصر الأول :
عنصر النص المائل
لتخصيص كلمة من فقرتك بجعلها مائلة يمكنك إحاطتها بالوسمين <em/> و <em> .
<p> HTML لغة <em> تصميم </em> و ليس لغة برمجة </p>
بالطبع أنت تعرف أن يجب عليك كتابة محتويات صفحتك داخل العنصر <body> ، أنا لم أكتب ذلك في المثال السابق لأوفر على نفسي قليلا مشقة لوحة المفاتيح
.لنرى عنصرا اخر .
عنصر تقوية الخط
يمكنك جعل الكلمات المهمة بارزة أكثر من خلال وضعها داخل العنصر <strong>
<p> HTML لغة <strong> تصميم </strong> و ليس لغة برمجة </p>
حسنا أظن أنك قد إستوعبت الفكرة ، لذلك فبدل من وضع مثال لكل عنصر مختلف يكفي أن أقدم لك قائمة كاملة بهذه العناصر و السلام .
.
<em>Emphasized text</em>
<strong>Strong text</strong>
<dfn>Definition term</dfn>
<code>Computer code text</code>
<samp>Sample computer code text</samp>
<kbd>Keyboard text</kbd>
<var>Variable</var>
<cite>Citation</cite>
<strong>Strong text</strong>
<dfn>Definition term</dfn>
<code>Computer code text</code>
<samp>Sample computer code text</samp>
<kbd>Keyboard text</kbd>
<var>Variable</var>
<cite>Citation</cite>
من جهة أخرى ، يساعد تخصيص الكلمات المهمة محركات البحث على الوصول لموقعك بسهولة .
لم أفهم ، كيف يستطيع الحاسوب معرفة الكلمات و كيف تقوم محركات البحث بمعرفة المواقع 
؟
أليس الحاسوب غبيا كما نعلم ؟
حسنا أنا لا أريد منك أن تتعلم لغة HTML يابسة ، بل أريدك أن تغني معارفك حولها و أن تتعرف أكثر على عالم الويب و الإنترنت حتى تكون مع التيار .
أتفق معك في كون الحاسوب غبيا ، لكن الذكاء هو التعامل معه على هذا الأساس .
يوجد حاليا برامج متقدمة تقوم بتحليل الكود المصدري ( Code source ) الخاص بكل الصفحات و عزل كل الكلمات المفاتيح ، هذا هو عمل الة محركات البحث ، فلا تتوقع من محرك البحث أن يفهم ما تريد البحث عنه ، فهو يقوم فقط بمسح الكلمات التي تريد البحث عنها في المواقع و تقديم النتائج على شكل روابط لصفحات الويب التي تتوفر على هذه الكلمات . لذلك فسواء وضعت في محرك البحث ' عاشق النت ' أو ' النت عاشق ' ستحصل تقريبا على نفس النتائج .
حسنا الان كيف أقوم بتلوين محتوى صفحتي ؟
هذا ينتمي إلى لغة CSS . سنترك حاليا لغة CSS بعيدا و نركز أولا على أساسيات الـ HTML ، لكي تكون هناك فائدة .
؟أليس الحاسوب غبيا كما نعلم ؟
حسنا أنا لا أريد منك أن تتعلم لغة HTML يابسة ، بل أريدك أن تغني معارفك حولها و أن تتعرف أكثر على عالم الويب و الإنترنت حتى تكون مع التيار .
أتفق معك في كون الحاسوب غبيا ، لكن الذكاء هو التعامل معه على هذا الأساس .
يوجد حاليا برامج متقدمة تقوم بتحليل الكود المصدري ( Code source ) الخاص بكل الصفحات و عزل كل الكلمات المفاتيح ، هذا هو عمل الة محركات البحث ، فلا تتوقع من محرك البحث أن يفهم ما تريد البحث عنه ، فهو يقوم فقط بمسح الكلمات التي تريد البحث عنها في المواقع و تقديم النتائج على شكل روابط لصفحات الويب التي تتوفر على هذه الكلمات . لذلك فسواء وضعت في محرك البحث ' عاشق النت ' أو ' النت عاشق ' ستحصل تقريبا على نفس النتائج .
حسنا الان كيف أقوم بتلوين محتوى صفحتي ؟
هذا ينتمي إلى لغة CSS . سنترك حاليا لغة CSS بعيدا و نركز أولا على أساسيات الـ HTML ، لكي تكون هناك فائدة .
----- القوائم -----
تمكننا القوائم من بناء صفحتنا بشكل أحسن و ترتيب معلوماتها على شكل قائمة عمودية .
و هناك نوعان من القوائم :
- القوائم غير المرقمة .
- القوائم المرقمة .
القوائم غير المرقمة
أنا أستعمل هذه القوائم كثيرا في مقالاتي و خاصة هذه الفصول التعليمية .
إنشاء قائمة أمر سهل : نضع أولا العنصر <ul>
إنشاء قائمة أمر سهل : نضع أولا العنصر <ul>
<ul> </ul>
إليك الان ما سنفعله . سنكتب كل عنصر من القائمة بين الوسمين <li/> و <li> . كل الوسوم توجد داخل العنصر <ul>
أنظر المثال .
<ul>
<li>غوغل</li>
<li>فيسبوك</li>
<li>تويتر</li>
</ul>
<li>غوغل</li>
<li>فيسبوك</li>
<li>تويتر</li>
</ul>
شاهد النتيجة .
لا نتس أن كل هذه العناصر داخل العنصر <body> ، فإبتدائا من الان لن أضع كود الصفحة كاملة
.بالطبع فأنت تستطيع إنشاء ما لا نهاية من عناصر القائمة <li> .
القوائم المرقمة .
مثل القوائم السابقة غير أن يوجد دائما رقم قبل كل عنصر في القائمة .
يتم إنشائها مثل القائمة السابقة ، فقط بدل العنصر <ul> نضع العنصر <ol> .
<h1>المواقع الأكثر شهرة في العالم</h1>
<ol>
<li>غوغل</li>
<li>فيسبوك</li>
<li>يوتوب</li>
</ol>
<ol>
<li>غوغل</li>
<li>فيسبوك</li>
<li>يوتوب</li>
</ol>
0 Comments