سنتعلم في هذا الفصل كيفية إدخال المحتويات في صفحة الويب ، كما رأينا سابقا : لا يتم ذلك بأية طريقة كانت ، لا يجب نسيان أن صفحة الـHTML تتكون من عناصر و وسوم ، هذه العناصر تخبر الحاسوب بما يعرضه ( هذه فقرة ، هذا عنوان و غيرها ) .
سنتعرف على العديد من العناصر في هذا الفصل . بعضها كان موجودا من الإصدار الأول للـHTML ، و البعض الاخر تمت برمجته في الإصدار الأخير
فقط .سنرى في هذا الفصل بالترتيب :
- كيف ننشأ فقرة نصية .
- كيف نبني صفحة بالعناوين .
- كيف نميز بعض الكلمات من النص .
- كيف ننظم معلوماتنا في قائمة عمودية .
------- الفقرات -------
في معضم الوقت ، عندما نقوم بكتابة نص ما في صفحة ويب ، فأنا نقوم بذلك فوق الفقرة ، ترمز لغة HTML لعنصر الفقرة بالوسم <p> بكل بساطة :
<p> مرحبا بكم في مدونتكم </p>
- <p> هو وسم فتح عنصر الفقرة .
- <p/> هو وسم إغلاق عنصر الفقرة .
في حال تسائلت لماذا <p> فإن p هي الحرف من paragraph و التي تعني الفقرة .
كما قلت في الفصل السابق ، يجب أن نكتب محتوى صفحتنا داخل العنصر <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 و إعادة المحتوى إلى سطر جديد في المفكرة فإن المتصفح يتجاهل ذلك و يقوم بعرض المحتوى في سطر واحد .
عنصر العودة إلى السطر .
مثال لفقرة في المفكرة .
<!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> يتم إضافته في المكان الذي ينتهي فيه السطر .
<!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 ، لكي تكون هناك فائدة .
----- القوائم -----
تمكننا القوائم من بناء صفحتنا بشكل أحسن و ترتيب معلوماتها على شكل قائمة عمودية .
و هناك نوعان من القوائم :
- القوائم غير المرقمة .
- القوائم المرقمة .
القوائم غير المرقمة
أنا أستعمل هذه القوائم كثيرا في مقالاتي و خاصة هذه الفصول التعليمية .إنشاء قائمة أمر سهل : نضع أولا العنصر <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>
النهاية ... إلى الفصل القادم
فعلاً دروسك شيقك وطريقة شرحك ممتعة وفي الحقيقة أنا كنت قد قررت أن لا أبدأ التدوين حتى ألم بكل ما هو متعلق بال html & css سأكون من متابعيك
ردحذفوقدوضعت مدونتك في مفضلتي شكراً جزيلاً لك ... لك مني أجمل تحية
بالمناسبة فعلا موضوع التعليقات في العالم العربي عقدة نفسية لدى "الكثيرين"من الزوار وحتى المدونين أنفسهم ومن الجميل الإشارة إليها من خلال الدروس على طريقتك ..... أكرر لك شكري
شكرا لك أخي العزيز على ردك المشجع
ردحذفإن شاء الله ستعجبك باقي الدروس
تحية لك و شكرا
بارك الله فيك على الدروس الرائعة ... لقد استفدت كثيرا من دروسك السابقة ومن هذه الدروس كذلك.
ردحذفأهلا و سهلا بك دائما
ردحذفمشكور اخي الكريم
ردحذفانا درست هاي المادة بالجامعة على برنامج فيجوال ستديو وعندي المام كويس فيها ورغم هيك بقرأ شرحك لانو اكيد ما بعطونا كل شي بالجامعة
ما شاء الله شرحك جميل ومنسق احسن من دكتور الجامعة :)
الشلام عليكم ورحمة الله وبركاته
ردحذفشكرا جزيلا وشرح ممتاز
بس عندي مشكله
التايتل بيبان عاني في تاب الصفحة من فوق أم بقى البادي في التجربه الأولى ظهر مع التايتل في تاب الصفحه وفي التانيه ظهر في خانة الأدرس
أنا مسطبه notepad6.1.5
الويندوز بتاعي 7
والمتصفح جوجل شورم
وكمان كلهم بيبقو على صف واحد تحت بعض يعني مثلا الهيد مش داخل شويه عن اللي فوقيه زي اللي ان عارضه ولا أنا اللي بعمل تابه ولا أيه؟
معلش صدعتك بس ربنا يجازيك عني
حاولت أحط صوره للتجربه مس مانفعش
ليتكي وضعتي صورة ، و الله لا أدري و لكن أعتقد أنكي نسيتي إغلاق بعض العناصر ،
حذفاشكرك على الرد التجربه الأولى فعلا كان فيها عنصر التاينل مش مقفول التجربه التانيه لما فتحتها اشتغلت على طول الحمد لله وجزاك الله خيرا عنا انشاء الله وزادك من علمه
حذف