آموزش طرح بندی در HTML

3 سال پیش

آموزش طرح بندی در HTML

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش طرح بندی در HTML خواهیم پرداخت.

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

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

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

ساده ترین و محبوب ترین روش ایجاد طرح بندی استفاده از تگ <HTML <table است. این جداول در ستون ها و ردیف ها مرتب شده اند، بنابراین می توانید از این ردیف ها و ستون ها به هر روشی که دوست دارید استفاده کنید.

مثال

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

<!DOCTYPE html>
<html>

   <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 = "#aaa" width = "50">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © ۲۰۰۷ Tutorialspoint.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

خروجی

This is Web Page Main title
Main Menu HTML PHP PERL…	Technical and Managerial Tutorials

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

شما می توانید صفحه وب خود را طوری قرار دهید که محتوای وب خود را در چندین صفحه قرار دهید. شما می توانید محتوای خود را در ستون وسط نگه دارید و می توانید از ستون سمت چپ برای استفاده از منو و ستون سمت راست برای قرار دادن تبلیغات یا موارد دیگر استفاده کنید. این طرح بسیار مشابه آنچه در وب سایت tutorialspoint.com داریم.

مثال

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

<!DOCTYPE html>
<html>

   <head>
      <title>Three Column HTML Layout</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
                
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technical and Managerial Tutorials
            </td>
                
            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>

خروجی

Main Menu
HTML
PHP
PERL…

Technical and Managerial Tutorials

Right Menu
HTML
PHP
PERL…

طرح بندی در HTML – با استفاده از DIV ،SPAN

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

اگرچه ما می توانیم با جداول HTML به چیدمان های بسیار خوبی برسیم، اما جداول واقعاً به عنوان ابزاری برای چیدمان طراحی نشده اند. جداول بیشتر برای ارائه داده های جدولی مناسب هستند.

توجه – این مثال از (Cascading Style Sheet (CSS استفاده می کند، بنابراین قبل از درک این مثال باید درک بهتری از نحوه کار CSS داشته باشید.

مثال

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

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layouts using DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
        
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
            
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
            
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Technical and Managerial Tutorials</p>
         </div>
        
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
            
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © ۲۰۰۷ Tutorialspoint.com
            </center>
         </div>
            
      </div>
   </body>

</html>

خروجی

منبع.

لیست جلسات قبل آموزش HTML

نویسنده مطلب erfan molaei

آموزش طرح بندی در HTML

آموزش طرح بندی در HTML

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

مثال

This is Web Page Main title

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

مثال

طرح بندی در HTML – با استفاده از DIV ،SPAN

مثال

لیست جلسات قبل آموزش HTML

دیدگاه شما

بدون دیدگاه

آموزش طرح بندی در HTML

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

مثال

This is Web Page Main title

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

مثال

طرح بندی در HTML – با استفاده از DIV ،SPAN

مثال

لیست جلسات قبل آموزش HTML

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه