بخش های اصلی

آموزش HTML 5

ایجاد طرح بندی های (layouts) وب سایت

ایجاد طرح بندی وب سایت، عمل قرار دادن عناصر مختلف در صفحه ، به شیوه ای خوب و سازمان یافته و دادن ظاهری جذاب به وب سایته.

ساخت لایه بندی وب سایت

وب سایت های زیادی در اینترنت می بینین که برای فراهم آوردن محیطی بهتر جهت خواندن و نوشتن برای عموم کاربران وب ، محتوایشان را در سطر ها و ستون های چندتایی قرار می دن- مثل  قالب بندی مجله یا روزنامه. این امر به آسانی با استفاده از تگ ها <div>, <table> یا <span> و اضافه کردن کمی style به آن ها امکان پذیره.

استفاده از جدول ها در طرح بندی HTML

جدول ها ساده ترین روش برای ایجاد طرح بندی در HTML هستن. معمولاً، استفاده از این روش فرآیندیست شامل گذاشتن محتوا در سطرها و ستون ها.

طرح بندیِ HTML زیر از جدولی با 3 سطر و 2 ستون استفاده می کنه- ستون های اولین و آخرین row span ها ، هر دو از خصیصه colspan استفاده می کنن:

مثال

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Table Layout</title>
</head>
<body style="margin:0px;">
    <table cellpadding="10px;" cellspacing="0" style="font:12px verdana, sans-serif; width:100%;">
        <tr>
            <td colspan="2" style="background-color:#679BB7;">
                <h1 style="font-size:18px; margin:10px 0;">Tutorial Republic</h1>
            </td>
        </tr>
        <tr style="height:170px;">
            <td style="background-color:#bbd2df; width:20%; vertical-align:top;">
                <ul style="list-style:none; padding:0px; margin:0px;">
                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Home</a></li>
                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">About</a></li>
                    <li style="margin-bottom:5px;"><a href="#" style="color:#3d677e;">Contact</a></li>
                </ul>
            </td>
            <td style="background-color:#f0f0f0; width:80%; vertical-align:top;">
                <h2 style="font-size:16px; margin:0px;">Welcome to our site</h2>
                <p>Here you will learn to create websites...</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="background-color:#679BB7;">
                <p style="text-align:center; margin:5px;">copyright &copy; tutorialrepublic.com</p>
            </td>
        </tr>
    </table>
</body>
</html>

کد HTML بالا، خروجی زیر را ایجاد خواهد کرد:

html layouts basics

اخطار: روشی که برای ایجاد طرح بندی (layout)  در مثال بالا استفاده شده، اشتباه نیست ولی توصیه هم نمی شه. از استفاده از جدول ها (tables) و استایل های درون خطی (inline-styles) برای ایجاد طرح بندی، اجتناب کنین.

طرح بندی HTML با استفاده از Div و Span

عنصر <div> (مخفف تقسیم بندی (division)) در HTML برای ساخت یک بلاکِ محتوا یا تنظیم عناصر دیگر در سند HTML استفاده می شه. در صورت نیاز div می تواند، divهای دیگری را هم در خود جای بده، ولی نمی تواند عناصر درون خطی (inline) را شامل بشه.

از طرف دیگر عنصر <span> برای ساخت بخش های (sections) داخل عنصرِ بلاک (block) یا  دیگر عناصرِ درون خطی (inline) استفاده می شه.

مثال زیر از عنصرهای div برای ایجاد یک طرح بندی چند ستونی استفاه می کنه که خروجی آن مانند خروجی مثال قبلیه که از جداول استفاده می کرد:

مثال

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Div Layout</title>
    <style type="text/css">
        body{
            font: 12px verdana, sans-serif; 
            margin: 0px;
        }
        .header{
            padding: 10px 0;
            background-color: #679BB7; 
        }
        .header h1{
            font-size: 18px; 
            margin: 10px;
        }
        .container{
            width: 100%;
            background-color: #f0f0f0; 
        }
        .sidebar{
            float: left; 
            width: 20%; 
            min-height: 170px;
            background-color: #bbd2df;
        }
        .sidebar .nav{
            padding: 10px;
        }
        .nav ul{
            list-style: none; 
            padding: 0px; 
            margin: 0px;
        }
        .nav ul li{
            margin-bottom: 5px; 
        }
        .nav ul li a{
            color: #3d677e;
        }
        .nav ul li a:hover{
            text-decoration: none;
        }
        .content{
            float: left;
            width: 80%;
            min-height: 170px;
        }
        .content .section{
            padding: 10px;
        }
        .content h2{
            font-size: 16px; 
            margin: 0px;
        }
        .clearfix{
            clear: both;
        }
        .footer{
            background-color: #679BB7; 
            padding: 10px 0;
        }
        .footer p{
            text-align: center; 
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Tutorial Republic</h1>
        </div>
        <div class="wrapper">
            <div class="sidebar">
                <div class="nav">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="content">
                <div class="section">
                    <h2>Welcome to our site</h2>
                    <p>Here you will learn to create websites...</p>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="footer">
            <p>copyright &copy; tutorialrepublic.com</p>
        </div>
    </div>
</body>
</html>

کد HTML بالا، خروجی زیر را ایجاد خواهد کرد:

html layouts styles

نکته: می توان با DIV، SPAN و CSS، طرح بندی های (layouts) بهتری ایجاد کرد. می توانید طرح بندی تمام صفحه های وب سایتتان را تنها با تغییر یک فایل CSS تغییر بدین. برای یادگیری بیشتر CSS، لطفاً به بخش آموزشِ CSS مراجعه کنین.

ایجاد طرح بندی های (layouts) وب سایت با عناصر ساختاری HTML5

HTML5، عناصر ساختاری جدیدی مانند <header>, <footer>, <nav>, <section> و ... را برای تعریف قسمت های مختلف صفحه های وب به روشی معنادارتر معرفی کرده. می توانید این عناصر را بعنوان جایگزینی برای کلاس هایی که عموما استفاده می شن، مثل .header, .footer, .nav, .section و ... در نظر بگیرید. مثال زیر از عناصر ساختاریِ جدید HTML5 برای ایجاد طرح بندی ای مشابه طرح بندی ای که در مثال قبل ایجاد کردیم، استفاده می کنه.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Web Page Layout</title>
    <style type="text/css">
        body{
            font: 12px verdana, sans-serif; 
            margin: 0px;
        }
        header{
            background-color: #679BB7; 
            padding: 10px;
        }
        header h1{
            font-size: 18px; 
            margin: 10px 0;
        }
        .container{
            width: 100%;
            background-color: #f0f0f0; 
        }
        .sidebar{
            float: left; 
            width: 20%; 
            min-height: 170px;
            background-color: #bbd2df;
        }
        .sidebar nav{
            padding: 10px;
        }
        nav ul{
            list-style: none; 
            padding: 0px; 
            margin: 0px;
        }
        nav ul li{
            margin-bottom: 5px; 
        }
        nav ul li a{
            color: #3d677e;
        }
        nav ul li a:hover{
            text-decoration: none;
        }
        .content{
            float: left;
            width: 80%;
            min-height: 170px;
        }
        .content section{
            padding: 10px;
        }
        section h2{
            font-size: 16px; 
            margin: 0px;
        }
        .clearfix:after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        footer{
            background-color: #679BB7; 
            padding: 10px;
        }
        footer p{
            text-align: center; 
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Tutorial Republic</h1>
        </header>
        <div class="wrapper clearfix">
            <div class="sidebar">
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div class="content">
                <section>
                    <h2>Welcome to our site</h2>
                    <p>Here you will learn to create websites...</p>
                </section>
            </div>
        </div>
        <footer>
            <p>copyright &copy; tutorialrepublic.com</p>
        </footer>
    </div>
</body>
</html>

کد HTML بالا، خروجی زیر را ایجاد خواهد کرد:

html layouts div

جدول زیر مروری کوتاه بر عناصر ساختاری جدید در HTML5 است:

نام تگ

توضیحات

<header>

عنوانِ (headder) سند یا بخش (section) را نمایش می ده.

<footer>

پایین صفحه ی (footer) سند یا بخش را نمایش می ده.

<nav>

مجموعه ای از لینک های ناوبری (navigation) را تعریف می کنه.

<section>

بخش های سند مثل عنوان (header)، پایین صفحه (footer) و غیره را تعریف می کنه.

<article>

یک مقاله را تعریف می کنه.

<aside>

محتوای حاشیه ای که زیاد به متن اصلی صفحه مرتبط نباشه را تعریف می کنه.

<details>

جزئیاتی را تعریف می کنه که کاربر بسته به تقاضایش می تواند به اطلاعات اضافی یا کنترل ها دسترسی پیدا کنه.

<summary>

برای عنصر <details> یک خلاصه تعریف می کنه.

جهت یادگیری بیشتر راجع به تگ های جدید، به مرجعِ تگ های HTML5 مراجعه کنین.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد