تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: اكتشاف نموذج الصناديق


الصفحة السابقة
يمكن اعتبار صفحة الويب كمجموعة من الصناديق ، تسمى "كتل". معظم العناصر التي رأيناها في الفصل السابق هي كتل: <header>، <article>، <nav>... لكننا نعرف بالفعل الكتل الأخرى: الفقرات <p>، والعناوين <h1>...

في هذا الفصل ، سنتعلم التعامل مع هذه الكتل كصناديق حقيقية. سنمنحهم أبعادًا ، وسنرتبهم باللعب على هوامشهم ، ولكن نتعلم أيضًا إدارة محتواهم ... لمنع النص من تجاوز هذه الكتل! هذه هي المفاهيم الأساسية التي سنحتاجها لوضع موقعنا على الصفحة ... كن منتبهاً!

العلامات من فئة كتل و المضمنة


في HTML ، يمكن أن تندرج معظم العلامات في واحدة من فئتين:

  • العلامات المضمنة : هذا هو الحال بالنسبة للروابط على سبيل المثال <a></a>.
  • العلامات الكتل : هذا هو الحال بالنسبة للفقرات على سبيل المثال <p></p>.

هناك بالفعل عدة فئات محددة للغاية ، على سبيل المثال لخلايا الجدول (النوع table-cell ) أو الرقائق (النوع list-item ) لن نكون مهتمين في الوقت الحالي لأن هذه العلامات أقلية.

ولكن كيف يمكنني التعرف على علامة مضمنة او علامة كتلة؟

إنه في الواقع سهل للغاية:

  • Block : تقوم علامة الكتلة في صفحة الويب تلقائيًا بإنشاء سطر جديد قبل وبعد. فقط تخيل كتلة. ستتألف صفحة الويب الخاصة بك بالفعل من سلسلة من الكتل واحدة تلو الأخرى. لكنك سترى أنه بالإضافة إلى ذلك ، من الممكن وضع كتلة داخل أخرى ، مما سيزيد بشكل كبير من إمكانياتنا لإنشاء تصميم موقعنا!
  • مضمنة : يجب أن تكون العلامة المضمنة داخل علامة كتلة. لا تنشئ العلامة المضمنة فاصل أسطر ، النص المكتوب بداخله بعد النص السابق ، على نفس السطر (لهذا السبب نتحدث عن العلامة " على الخط inline").

منذ HTML5 ، تصنيف العناصر المختلفة أكثر تعقيدًا من ذلك. ومع ذلك ، سيسمح لك هذا التبسيط الصغير من فهم الفرق بين مفهوم "block" ومفهوم "inline". لتصور هذا المفهوم ، إليك رسم تخطيطي صغير قمت بإعداده.

css html file
  • على خلفية زرقاء ، لديك كل ما هو كتلة bloc
  • على خلفية صفراء ، لديك كل علامة مضمنة inline
كما ترون ، الكتل هي واحدة دون الأخرى. يمكننا أيضًا تداخلها داخل بعضها البعض (تذكر أن كتلنا <section>تحتوي على كتل مثلاً <aside>!). توجد علامة مضمنة <a></a>داخل علامة كتلة ويتم إدراج النص في نفس السطر.

بعض الأمثلة


لمساعدتك بشكل أفضل على فهم العلامات المضمّنة والعلامات الكتل ، إليك مخطط صغير يسرد بعض العلامات الشائعة.

css html file

هذا الجدول غير مكتمل ، بعيد عن ذلك. إذا كنت ترغب في الحصول على قائمة كاملة بالعلامات الموجودة وما إذا كانت مضمنة أو كتلة ، فارجع إلى الملحق الذي يسرد علامات HTML .

العلامات العامة


أنت تعرفهم بالفعل لأنني قدمتهم لك قبل بضعة فصول. هذه علامات ليس لها معنى معين (على عكس <p> تعني "الفقرة" ، <strong> تعني "المهم" ، إلخ) الاهتمام الرئيسي لهذه العلامات هو أنه يمكننا تطبيق class (أو id ) في CSS عندما لا تكون هناك علامة أخرى مناسبة.

هناك علامتان عامتان ، والمصادفة ، أن الاختلاف الوحيد بينهما هو أن إحداهما مضمنة والآخرى عبارة عن كتلة:

  • <span></span> ( مضمنة )؛
  • <div></div> ( كتلة )

احترام الدلالات


بطبيعة الحال ، تكون العلامات العامة "عملية" في بعض الحالات ، لكن احرص على عدم إساءة استخدامها. أريد أن أحذرك على الفور: العديد من مصممي المواقع يكثرون من استعمال <div> و <span> و ينسون وجود علامات أخرى أكثر ملاءمة.

فيما يلي مثالان:

  • مثال على <span> لا طائل منها : <<span class="important">. لا يجب أن أرى هذا مطلقًا في أحد الرموز الخاصة بك بينما هناك علامة <strong>تفيد في الإشارة إلى الأهمية!
  • مثال ل <div> لا لزوم لها : <div class="titre">. هذا سخيف تمامًا نظرًا لوجود علامات خاصة للعناوين <h1> ، <h2>...</li>

نعم ، سوف تخبرني أنه في النهاية تكون النتيجة (بصرية) هي نفسها. انا موافق تماما. لكن العلامات العامة لا معنى لها في الصفحة ولا يمكن فهمها بواسطة الكمبيوتر. دائما استخدام العلامات الأخرى أكثر ملاءمة كلما كان ذلك ممكنا Google نفسه. ينصح لمساعدتك في تحسين موضع صفحاتك في نتائج البحث الخاصة به!

الأبعاد


سوف نعمل هنا فقط على العلامات كتلة.

بالنسبة للمبتدئين ، دعونا نلقي نظرة على حجم الكتل. على عكس الخط المضمن ، يكون للكتلة أبعاد دقيقة. لها عرض و ارتفاع. والتي ، من المستغرب ، لديها اثنين من خصائص CSS:

  • Width : إنه عرض الكتلة. يتم التعبير عنها بالبكسل (بكسل) أو بالنسبة المئوية (٪).
  • Height : إنه ارتفاع الكتلة. مرة أخرى ، يتم التعبير عنها بالبكسل (بكسل) أو النسبة المئوية (٪).

على وجه الدقة، width و height يمثل العرض والارتفاع من كتلة المحتوى. إذا كان للكتلة هوامش (سنكتشف هذا المبدأ فيما بعد) ، فستتم إضافتها إلى العرض والارتفاع. تلقائيا ، تأخذ الكتلة 100٪ من العرض المتاح. يمكن التحقق من ذلك عن طريق تطبيق الحدود أو لون الخلفية على كتل لدينا (الشكل التالي).

css html file

الآن ، دعونا نضيف بعض CSS لتغيير عرض الفقرات. تقول CSS التالية ، "أريد أن يكون عرض جميع فقراتي 50٪."


p
{
    width: 50%;
}

النتيجة واضحة في الشكل التالي.

css html file

ستكون النسب المئوية مفيدة لإنشاء تصميم يتكيف تلقائيًا مع دقة شاشة الزائر. ومع ذلك ، قد تحتاج إلى إنشاء كتل ذات بعد بكسل محدد:


p
{
   width: 250px;
}
الحد الأدنى والحد الأقصى

يمكن طلب أن يكون للكتلة أبعاد الحد الأدنى والحد الأقصى. هذا مناسب جدًا لأنه يتيح لنا تحديد أبعاد "الحدود" بحيث يتكيف موقعنا مع دقة الشاشة المختلفة لزوارنا:

  • min-width : الحد الأدنى للعرض ؛
  • min-height : الحد الأدنى للارتفاع ؛
  • max-width : أقصى عرض ؛
  • max-height : أقصى ارتفاع.

على سبيل المثال، يمكنك أن تطلب أن الفقرات تحتل 50٪ من عرض و تتطلب منه أن يفعل ما لا يقل عن 400 بكسل في جميع الحالات:


p
{
    width: 50%;
    min-width: 400px;
}

راقب النتيجة من خلال تغيير عرض نافذة المتصفح. سترى أنه إذا كانت هذه الصورة صغيرة جدًا ، فستكون الفقرة مجبرة على شغل ما لا يقل عن 400 بكسل من العرض.

الهوامش

يجب أن تعلم أن جميع الكتل لها هوامش. هناك نوعان من الهوامش :

  • الهوامش الداخلية
  • الهوامش الخارجية.

ننظر عن كثب في الرسم البياني في الشكل التالي.

css html file

على هذه الكتلة ، وضعت حدًا لرؤية حدودها جيدا.

  • المسافة بين النص والحدود هي الهامش الداخلي (باللون الأخضر).
  • المسافة بين الحد والكتلة التالية هي الهامش الخارجي (باللون الأحمر)

في CSS ، يمكنك تغيير حجم الهوامش بالخاصيتين التاليتين:

  • Padding : يشير إلى حجم الهامش الداخلي. يتم التعبير عنها بالبكسل (بكسل).
  • Margin : يشير إلى حجم الهامش الخارجي. مرة أخرى ، نستخدم في معظم الأحيان بكسل.

العلامات المضمّنة لها أيضًا هوامش. لذلك يمكنك أيضًا تجربة هذا على هذا النوع من العلامات. لرؤية الهوامش ، دعنا نأخذ فقرتين يمكنني ببساطة تطبيق حد صغير عليهما (الشكل التالي):


p
{
    width: 350px;
    border: 1px solid black;
    text-align: justify;
}
css html file
كما ترون ، لا يوجد هامش داخلي ( padding) افتراضيًا . من ناحية أخرى ، هناك هامش خارجي ( margin). هذا الهامش هو الذي يجعل فقرتين غير ملتصقتين ويبدو وكأنه "تخطي خط". الهوامش التلقائية ليست هي نفسها لجميع علامات الكتل. حاول تطبيق CSS على العلامات <div>التي تحتوي على نص ، على سبيل المثال: سترى أنه في هذه الحالة ، لا يوجد أي هامش داخلي ، ولا هامش خارجي!

لنفترض أنني أريد إضافة هامش 12 بكسل إلى الفقرات (الشكل التالي):


p
{
    width: 350px;
    border: 1px solid black;
    text-align: justify;
    padding: 12px; 
}
css html file

الآن ، أريد فقراتي أن تكون متباعدة. أضف الخاصية margin لأطلب أن يكون هناك 50 بكسل للهامش بين فقرتين (الشكل التالي):


p
{
   width: 350px;
   border: 1px solid black;
   text-align: justify;
   padding: 12px;
   margin: 50px; /* Marge extérieure de 50px */
}

css html file

لكن ؟؟؟ تم إضافة هامش إلى اليمين أيضًا!

نعم ، margin (كما هو الحال في padding) ينطبق على الجوانب الأربعة للكتلة.

إذا كنت ترغب في تحديد هوامش مختلفة في الأعلى والأسفل واليسار واليمين ، فسيتعين عليك استخدام خصائص أكثر دقة ... المبدأ هو نفسه بالنسبة للخاصية border، فسترى!

أعلى ، يمين ، أسفل ، يسار ، ... ونبدأ من جديد!

من الناحية المثالية ، يجب أن تتذكر المصطلحات التالية باللغة الإنجليزية:

  • TOP : أعلى.
  • BOTTOM : أسفل.
  • LEFT : يسار ؛
  • RIGHT : يمين.

حتى تتمكن من العثور على جميع الخصائص. ما زلت بصدد سرد الخصائص لـ margin و padding، لذلك أنا متأكد من أنك تفهم المبدأ.

هنا قائمة ل margin:

  • margin-top : الهامش الخارجي في الأعلى ؛
  • margin-bottom : الهامش الخارجي في القاع ؛
  • margin-left : الهامش الخارجي على اليسار ؛
  • margin-right : الهامش الخارجي على اليمين.

وقائمة ل padding :

  • padding-top : داخل الهامش في الأعلى ؛
  • padding-bottom : داخل الهامش في القاع ؛
  • padding-left : داخل الهامش على اليسار ؛
  • padding-right : داخل الهامش على اليمين.
هناك طرق أخرى لتحديد الهوامش مع الخصائص margin و padding. على سبيل المثال: margin: 2px 0 3px 1px; يعني "2 بكسل هامش في الأعلى ، 0 بكسل في اليمين (بكسل اختيارية في هذه الحالة) ، 3 بكسل في الأسفل ، 1 بكسل في اليسار". تدوينات مختصرة أخرى: margin: 2px 1px;تعني "الهامش 2 بكسل للأعلى والأسفل ، الهامش 1 بكسل لليسار واليمين."
وضع كتل في الوسط

من الممكن تماما توسيط الكتل. من العملي للغاية تحقيق تصميم مركزي عندما لا تعرف دقة شاشة المستخدم.

للوسط ، يجب احترام القواعد التالية:

  • إعطاء عرض للكتلة (مع الخاصية width )
  • تشير إلى أنك تريد الهوامش الخارجية التلقائية، مثل هذا: margin: auto;.

لنجرب هذه التقنية في فقراتنا الصغيرة :


p
{
    width: 350px; /* وضع قيمة الطول اجباري*/
    margin: auto; /* AUTO  يمكننا وضع الكتلة في الوسط باستعمال  */
    border: 1px solid black;
    text-align: justify;
    padding: 12px;
    margin-bottom: 20px;
}

وهنا النتيجة في الشكل التالي.

css html file

وبالتالي ، يقوم المتصفح تلقائيًا بتركيز فقراتنا!

ومع ذلك ، لا يمكن توسيط الكتلة عموديًا بهذه التقنية. يسمح فقط توسيط أفقي.

عندما يتجاوز الكتلة ...

عندما نبدأ في تحديد الأبعاد الدقيقة للكتل ، كما فعلنا للتو ، فقد تصبح صغيرة جدًا بالنسبة للنص الذي تحتويه. تم إنشاء خصائص CSS التي سنراها هنا بالتحديد للتحكم في التجاوزات ... وتحديد ما يجب القيام به إذا حدث ذلك.

OVERFLOW : قطع كتلة

افترض أن لديك فقرة طويلة وتريد (لسبب ما فقط) أن يبلغ عرضها 250 بكسل وارتفاعها 110 بكسل. أضف حدًا واملأه بالنص ... إلى الحد (الشكل التالي):


p
{
    width: 250px;
    height: 110px;
    text-align: justify;
    border: 1px solid black;
}
css html file

يا لا الهول! النص يتجاوز حدود الكتلة!

نعم! لقد طلبت الأبعاد الدقيقة ، كان لديك منهم! ولكن ... النص لا يصلح داخل كتلة صغيرة من هذا القبيل. إذا كنت تريد ألا يتجاوز النص حدود الفقرة ، فسيتعين عليك استخدام الخاصية overflow . فيما يلي القيم التي يمكن أن تقبلها:

  • visible(تلقائي): إذا تجاوز النص حدود الحجم ، فسيظل مرئيًا ويترك الكتلة طوعًا.
  • Hidden : إذا تجاوز النص الحدود ، فسيتم ببساطة قطعه. لن نتمكن من رؤية النص بالكامل.
  • Scroll : مرة أخرى ، سيتم قطع النص إذا تجاوز الحدود. باستثناء هذا الوقت ، سيقوم المستعرض بإعداد أشرطة التمرير لقراءة النص بأكمله. يشبه إلى حد ما إطار داخل الصفحة.
  • Auto : هذا هو وضع "الطيار الآلي". في الأساس ، هو المستعرض الذي يقرر ما إذا كان سيتم وضع أشرطة التمرير (سيتم وضعه فقط إذا لزم الأمر). هذه هي القيمة التي أنصح باستخدامها في كثير من الأحيان.

مع overflow: hidden;النص يتم قطعه (لا يمكننا رؤية المزيد) ، كما في الشكل التالي.

css html file

يتم قص النص إلى حدود الفقرة

لنجرب الآن overflow: auto; بكود CSS التالي (ينتج عن الشكل التالي):


p
{
    width: 250px;
    height: 110px;
    text-align: justify;
    border: 1px solid black;
    overflow: auto;
}
css html file

وجدتها! تتيح لنا أشرطة التمرير الآن عرض محتوى غير مرئي.

هناك علامة HTML قديمة <iframe>، والتي تعطي النتيجة نفسها إلى حد كبير. ومع ذلك ، يتم إهمال استخدام هذه العلامة اليوم. يسمح لك بتحميل كل محتوى صفحة HTML أخرى داخل صفحتك.
WORD-WRAP : قطع النص الطويل جدا

إذا اضطررت إلى وضع كلمة طويلة جدًا في كتلة لا تناسب العرض ، فستحب word-wrap. التي تتيح هذه الخاصية فرض قطع الكلمات الطويلة جدًا يوضح الشكل التالي ما يمكننا الحصول عليه عندما نكتب عنوان URL طويلًا في كتلة.

css html file

لا يعرف الكمبيوتر كيفية "قص" العنوان لأنه لا توجد مساحة أو شرطة. انه لا يعرف كيفية جعل استراحة. باستخدام الكود التالي ، سيتم فرض الواصلة بمجرد أن يتجاوز النص (الشكل التالي).


p
{
    word-wrap: break-word;
}
css html file
أوصي باستخدام هذه الميزة بمجرد أن تحتوي الكتلة على نص يدخله المستخدمون (على سبيل المثال في منتديات موقعك المستقبلي). بدون هذه الخدعة ، يمكننا بسهولة "كسر" تصميم الموقع (على سبيل المثال عن طريق كتابة سلسلة طويلة من "aaaaaaaaaaa").

الخلاصة


  • هناك نوعان رئيسيان من علامات HTML:
    • كتلة ( <p> ، <h1>،...) هذه العلامات تنشئ خطًا جديدًا وتحتل كل العرض المتاح تلقائيا. يتبعون بعضهم البعض من أعلى إلى أسفل.
    • النوع المضمن ( <a> ، <strong> ... ) تحدد هذه العلامات نصًا في منتصف السطر. يتبعون بعضهم البعض من اليسار إلى اليمين.
  • يمكنك تغيير حجم علامة الكتلة باستخدام خصائص width(العرض) و height (الارتفاع)
  • يمكننا تحديد الحد الأدنى والحد الأقصى المسموح به لعرض وارتفاع : min-width ، max-width، min-height، max-height.
  • العناصر الموجودة على الصفحة لكل منها هوامش داخلية ( padding) و خارجية ( margin).
  • إذا كان هناك الكثير من النص داخل كتلة ذات أبعاد ثابتة ، فهناك خطر تجاوز السعة. في هذه الحالة ، قد يكون من الحكمة إضافة أشرطة التمرير مع الخاصية overflow أو لفرض الواصلة بها word-wrap.