albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

HTML Layout

HTML Layout هى طريقة لترتيب صفحات الويب بطريقة جيدة التنظيم وذات تنظيم جيد وفي شكل سريع الاستجابة.

 

مثال

Header

Head content

Text of content or images or video ..etc

Footer

إنشاء تخطيطات مواقع الويب

 

يعد إنشاء تخطيط موقع الويب نشاطًا يتمثل في تحديد موضع العناصر المختلفة التي تجعل صفحة الويب بطريقة جيدة التنظيم وتعطي مظهرًا جذابًا للموقع.

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

يمكن تحقيق ذلك بسهولة باستخدام وسوم HTML أو HTML5، وإضافة بعض أنماط CSS إليها.

كل موقع له تصميم محدد لعرض المحتوى بطريقة معينة.

 

لكى يظهر موقعك بشكل احترافي يمكنك استخدام:

  • frameworks (الأطر المستمدة إلى CSS و JAVASCRIPT).
  • CSS float property
  • CSS flexbox
  • CSS grid

 

 

عناصر تخطيط HTML

 

1. بإستخدام عنصر الـ div

 

يحتوى HTML على عنصر الـ <div> يستخدم لتحديد الأجزاء المختلفة لصفحة الويب.

يعد استخدام عناصر <div> الطريقة الأكثر شيوعًا لإنشاء التخطيطات في HTML، يتم استخدام عنصر <div> لتمييز block من المحتوى أو مجموعة من العناصر الأخرى داخل مستند HTML.

💡 يمكن أن تحتوي على عناصر div أخرى إذا لزم الأمر.

 

مثال للتوضيح (فى هذا المثال نستخدم عناصر div لإنشاء layout):
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout Example</title>

    <style>
        .container .header {
            background-color: #08F;
            padding: 18px;
            text-align: left;
            font-size: 27px;
            color: white;
        }
        
        .container .nav {
            float: left;
            width: 25%;
            height: 300px;
            background: #b6b5b2;
            padding: 23px 12px 0 0;
        }
        
        .container .section ul li a {
            text-decoration: none;
            box-shadow: none;
            color: #08f;
        }
        
        .container .article {
            float: left;
            padding: 20px;
            width: 75%;
            background-color: #f8f6f6;
            height: 300px;
        }
        
        .container .section::after {
            content: "";
            display: table;
            clear: both;
        }
        
        .container .footer {
            background-color: #000;
            padding: 10px;
            text-align: center;
            color: white;
        }
        
        .container .footer p {
            margin: 0;
            padding: 0;
        }
        
        .container ul li {
            list-style: none;
        }
    </style>
  </head>

  <body>
    <div class="container">
        <div class="header">
            <h2>Our Tutorials</h2>
        </div>

        <div class="section">
            <div class="nav">
                <ul>
                    <li><a href="javascript:void(0)">HTML</a></li>
                    <li><a href="javascript:void(0)">CSS</a></li>
                    <li><a href="javascript:void(0)">JavaScript</a></li>
                    <li><a href="javascript:void(0)">Java</a></li>
                    <li><a href="javascript:void(0)">Python</a></li>
                </ul>
            </div>

            <div class="article">
                <h1>HTML</h1>
                <p>HTML language is very simple and you can understand every thing, .....</p>
            </div>
        </div>

        <div class="footer">
            <p>All Copyright &copy; saved</p>
        </div>
    </div>

  </body>
</html>

{Outputs} الكود السابق:

Our Tutorials

HTML

HTML language is very simple and you can understand every thing, …..

All Copyright © saved

تم تخطيط التخطيط السابق باستخدام خاصية الـ float، نظرًا لأن معظم متصفحات الويب تدعمه، يمكنك أيضًا استخدام الـ Flexbox أوالـ grid لإنشاء تخطيطات حديثة وأكثر مرونة.

 

2. بإستخدام عنصر الـ Table

 

يوفر الجدول أبسط طريقة لإنشاء تخطيطات بتنسيق HTML، بشكل عام يمكنك وضع كل محتواك مثل ما هو موجود فى المثال السابق، لكن الإختلاف هو أن تضع نفس محتواك فى عنصر الـ table (على هيئة صفوف وأعمدة) بدل ما تضعها فى عناصر div المتداخلة.

 

مثال للتوضيح (فى هذا المثال نستخدم عناصر الـ table لإنشاء layout):
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout Example</title>

    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        tr td ul li {
            list-style: none;
            padding:8px 12px 0 0
        }
        
        tr td ul li a {
            text-decoration: none;
            box-shadow: none;
            color: #08f;
        }
    </style>
  </head>

  <body>
    <table>
        <tr>
            <td colspan="2" style="padding:10px 20px; background-color:#08F;">
                <h1>Our Tutorials</h1>
            </td>
        </tr>
        <tr style="height:300px;">
            <td style="width:25%; padding:20px; background-color:#d4d7dc; vertical-align: top;">
                <ul>
                    <li><a href="javascript:void(0)">HTML</a></li>
                    <li><a href="javascript:void(0)" style="color:#08f; text-decoration: none;">CSS</a></li>
                    <li><a href="javascript:void(0)" style="color:#08f; text-decoration: none;">JavaScript</a></li>
                    <li><a href="javascript:void(0)" style="color:#08f; text-decoration: none;">Java</a></li>
                    <li><a href="javascript:void(0)" style="color:#08f; text-decoration: none;">Python</a></li>
                </ul>
            </td>
            <td style="padding:20px; background-color:#f8f6f6; vertical-align:top;">
                <h2>HTML</h2>
                <p>HTML language is very simple and you can understand every thing, .....</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="padding:10px; background-color:#000; text-align:center; color: #fff;">
                <p>All Copyright &copy; saved</p>
            </td>
        </tr>
    </table>
  </body>
</html>

{Outputs} الكود السابق:

Our Tutorials

HTML

HTML language is very simple and you can understand every thing, …..

All Copyright © saved

💡 ملاحظة: الطريقة المستخدمة(عن طريق الجداول) لإنشاء التخطيط في المثال السابق ليست خاطئة ، لكن لا أوصيك بها لأن غالبًا ما يتم عرض التخطيطات التي تم إنشاؤها باستخدام الجداول ببطء شديد، يجب استخدام الجداول فقط لعرض البيانات الجدولية.

💡 تجنب الـ inline–style لإنشاء التخطيطات لأنها تسبب بطء كبير فى صفحات الويب،

 

عناصر تخطيط HTML5

 

يحتوى HTML5 على عناصر مختلفة تستخدم لتحديد الأجزاء المختلفة لصفحة الويب:

العنصرإستخدامة
<header>يستخدم لتعريف رأس وثيقة(document) أو قسم(section).
<nav>يستخدم لتعريف محتوى روابط التنقل.
,<section>يستخدم لتعريف قسم في الوثيقة.
<article>يستخدم لتعريف مقال مستقل بذاته.
<aside>يُستخدم لتحديد aside (جانبًا) من المحتوى الأساسى (مثل الشريط الجانبي).
<details>يستخدم لتحديد تفاصيل إضافية.
<summery>يستخدم لتحديد عنوان العنصر.
<footer>يُستخدم لتعريف الجزء السفلى لمستند أو قسم.
مثال للتوضيح (فى هذا المثال نستخدم عناصر HTML5 لإنشاء layout):
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout Example</title>

    <style>
        header {
            background-color: #08F;
            padding: 18px;
            text-align: left;
            font-size: 27px;
            color: white;
        }
        
        nav {
            float: left;
            width: 25%;
            height: 300px;
            background: #b6b5b2;
            padding: 23px 12px 0 0;
        }
        
        nav ul li {
            list-style: none;
        }
        
        section ul li a {
            text-decoration: none;
            box-shadow: none;
            color: #08f;
        }
        
        section::after {
            content: "";
            display: table;
            clear: both;
        }
        
        article {
            float: left;
            padding: 20px;
            width: 75%;
            background-color: #f8f6f6;
            height: 300px;
        }
        
        footer {
            background-color: #000;
            padding: 10px;
            text-align: center;
            color: white;
        }
        
        footer p {
            margin: 0;
            padding: 0;
        }
    </style>
  </head>

  <body>
    <header>
        <h2>Our Tutorials</h2>
    </header>

    <section>
        <nav>
            <ul>
                <li><a href="javascript:void(0)">HTML</a></li>
                <li><a href="javascript:void(0)">CSS</a></li>
                <li><a href="javascript:void(0)">JavaScript</a></li>
                <li><a href="javascript:void(0)">Java</a></li>
                <li><a href="javascript:void(0)">Python</a></li>
            </ul>
        </nav>

        <article>
            <h1>HTML</h1>
            <p>HTML language is very simple and you can understand every thing, .....</p>
        </article>
    </section>

    <footer>
        <p>All Copyright &copy; saved</p>
    </footer>

  </body>
</html>

{Outputs} الكود السابق:

Our Tutorials

HTML

HTML language is very simple and you can understand every thing, …..

All Copyright © saved

الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements