سفارش تبلیغ
صبا ویژن

HTML Layouts

HTML Layouts

آموزش HTML Layout ‏ ‏

Layout برای یک صفحه ی وب بسیار مهم است، چرا که دید بهتری نسبت به وب سایت شما ارائه می دهد. طراحی Layout خوب با منظره و حس خوب برای یک وب سایت زمان فوق العاده زیادی می گیرد. این روزها همه ی وب سایت های مدرن از چارچوب هایی بر اساس جاوااسکریپت و CSS استفاده میکنند تا به وب سایت های پاسخگو و دینامیک پیروز شوند، اما کار یک Layout در صفحه ی وب شما، صرفا از HTML و ویژگی های ان استفاده می کند.

 

Layout HTML – استفاده از جدول ها

ساده ترین و محبوب ترین راه برای ایجاد Layout ها، استفاده از برچسب < table>در HTML می باشد. این جدول ها در ردیف ها و ستون ها منظم می شوند که شما می توانید از این ردیف ها و ستون ها به هر طریقی که می خواهید استفاده کنید.


 مثال:

برای مثال، نمونه Layout HTML زیر از طریق استفاده ی یک جدول با سه ردیف و دو ستون به دست می آید، اما عنوان و پاورقی ستون هر دو ستون را با استفاده از ویژگی colspan احاطه می کند.

 

نمونه یک

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Layout using Tables</title>

</head>

<body>

    <table width="100%" border="0">

        <tr>

            <td colspan="2" bgcolor="#b5dcb3">

                <h1>This is Web Page Main title</h1>

            </td>

        </tr>

        <tr valign="top">

            <td bgcolor="#aaaa" width="50">

                <b>Main Menu</b><br />

                HTML<br />

                PHP<br />

                PERL...

            </td>

            <td bgcolor="#eeeee" width="100" height="200">

                Technical and Managerial Tutorials

            </td>

        </tr>

        <tr>

            <td colspan="2" bgcolor="#b5dcb3">

                <center>

                    Copyright © 2007 Tahlildadeh.com

                </center>

            </td>

        </tr>

    </table>

</body>

</html>

Layout های HTML – استفاده از DIV و Span

عنصر < div>یک عنصر block level می باشد که برای گروه بندی عناصر HTML استفاده می شود. در حالیکه این عنصر یک عنصر block level است، عنصر< span>برای گروه بندی عناصر در یک سطح درون خطی استفاده می شوند.
گرچه می توانیم با جدول های HTML ، Layout های بسیار زیبایی به دست آوریم، اما جدول ها در واقع به عنوان ابزار Layout طراحی نشده اند، و بیشتر برای نمایش داده های جدولی استفاده می شوند.

 

نمونه دو

 توجه:

این مثال از CSS استفاده می کند، بنابراین قبل از درک این مثال، بهتر است درک بهتری از چگونگی کار CSS داشته باشید.

 مثال:

در اینجا سعی می کنیم با استفاده از برچسب < div> همراه با CSS همان نتیجه ای را به دست اوریم که هنگام استفاده از برچسب < table> در مثال قبل به دست آوردیم.

 

نمونه سه

شما می توانید با استفاده از DIV و SPAN به همراه CSS، Layout های بهتری طراحی کنید. برای درک بیشتر از CSS لطفا به CSS Tutorial مراجعه کنید.

 

جهت مشاهده نمونه مثال ها بروی دوره آموزش طراحی سایت کلیک نمایید.


سربرگ HTML

سربرگ HTML

سربرگ HTML‏‏

یاد گرفتیم که یک نمونه داکیومنت HTML دارای ساختار زیر می باشد.

Document declaration tag
< html>
< head>
    Document header related tags
< head>
< body>
    Document body related tags
< body>
< html>

این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب< head>نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:< title>, < meta>, < link>, < base>,< style>, < script >, و < noscript > tags.


برچسب < title> در HTML

این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.


نمونه یک

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Title Tag Example</title>

</head>

<body>

    <p>Hello, World!<p>

</body>

</html>


برچسب < meta> در HTML

 

این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

 

 

نمونه دو

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Title Tag Example</title>
    <!-- Provide list of keywords -->
    <meta name="keywords" content="C, C++, Java, PHP, Perl, Python">

    <!-- Provide description of the page -->
    <meta name="description" content="Simply Easy Learning by Tutorials Point">

    <!-- Author information -->
    <meta name="author" content="Tutorials Point">

    <!-- Page content type -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!-- Page refreshing delay -->
    <meta http-equiv="refresh" content="30">

    <!-- Page expiry -->
    <meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">

    <!-- Tag to tell robots not to index the content of a page -->
    <meta name="robots" content="noindex, nofollow">
</head>
<body>
    <p>Hello, World!<p>
</body>
</html>

برچسب < base> در HTML

این برچسب برای تعیین URL پایه برای همه ی URL های وابسته در صفحه استفاده می شود، که به این معناست که همه ی URL های دیگر هنگامی که برای آیتم ارائه شده قرار می گیرند، دیگر URL ها به URL پایه زنجیر خواهند شد.
به عنوان مثال تمام صفحات و تصاویر ارائه شده، پس از پیشوند دار کردن URL های ارائه شده با URL پایه مسیر prefixing جستجو خواهند شد


نمونه سه

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Title Tag Example</title>

    <base href="http://www.tahlildadeh.com/" />

</head>

<body>

    <img src="/banner/02.jpg" alt="Logo Images" />

    <a href="/ArticleDetails/HTML Marquees" title="HTML Tutorial">HTML Tutorial</a>

</body>

</html>


برچسب < link> در HTML

این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.

 

نمونه چهار

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Title Tag Example</title>

    <base href="http://www.tahlildadeh.com/" />

    <link rel="stylesheet" type="text/css" href="/css/style.css">

</head>

<body>

    <p>Hello, World!<p>

</body>

</html>

برچسب< style>در HTML

این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.


نمونه پنج

 

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML style Tag Example</title>

    <base href="http://www.tahlildadeh.com/" />

    <style>

        .myclass {

            background-color: #aaa;

            padding: 10px;

        }

    </style>

</head>

<body>

    <p class="myclass">Hello, World!<p>

</body>

</html>

 توجه:

برای فراگیری چگونگی کار Cascading Style Sheet یک آموزش مجزای موجود در اینجا را کلیک کنید.

برچسب< script>در HTML

این برچسب برای وارد کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای داکیومنت HTML استفاده می شود. در زیر مثالی را می بینید که در آن از جاوا اسکریپت برای تعریف عملکرد ساده ی جاوااسکریپت استفاده می کنیم.


نمونه شش

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Title Tag Example</title>

    <base href="http://www.tahlildadeh.com/" />

    <script>

        function Hello() {

            alert("Hello, World");

        }

    </script>

</head>

<body>

    <input type="button" onclick="Hello();" name="ok" value="OK" />

</body>

</html>