ساخت اسکلت یک سایت کامل، در HTML

اکنون آماده هستید که اسکلت یک سایت کامل را بسازید . کار من این است که کدهای مربوط به اسکلت یک سایت کامل را به شما بدهم و کار شما تنها یک چیز است و آن ((خرابکاری)) می باشد . نخندید کاملا جدی گفتم ، شما باید این کدها را کپی کرده و نتیجه را مشاهده کنید که یک اسکلت کامل برای سایت است سپس باید بخش های مختلف آن را دستکاری کنید و ببینید چه چیزهایی خراب می شود . تنها با این روش است که می توانید به چگونگی شکل گرفتن این اسکلت پی ببرید . نگران خرابکاری نباشید هر وقت که بخواهید کدهای صحیح در این صفحه در اختیار شما می باشد . البته من نیز توضیحاتی را در مورد کدها ارائه خواهم کرد .

کدها :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان صفحه</title>
<style type="text/css">
body {
         font-family:Arial, Helvetica, sans-serif;
         text-align:right;
         direction:rtl;
     }
.container {
           width:100%;
           margin:0 auto;
                   }              
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
                                                   margin:0px;
                                               padding:0px;
                                                                                           }    
#logo1 {        
           background:url(../images/kelid.gif) no-repeat;
           width:100%;
       height:180px;
           background-position:center
       }        
#tagline {
         padding-top:60px;
                 text-align:center;
         }                      
#tagline h3 {
                font-size: 30px;
                    color: #09F;
                    }                    
ul#menu {
        list-style:none;
                padding-top:50px;
        }              
ul#menu li a {
             font-size:20px;
             color:#090;
             text-decoration:none;
             }                                          
ul#menu li {                            
           float:right;
                   padding-left:0px;
           padding-right:30px;
           width:150px;
                   }            
#sidebar1 {
              width: 20%;
          float:left;
                  direction:rtl;
                  padding-top:30px;
                  padding-bottom:30px;
                  padding-right:2%;
                  padding-left:2%;
          }                                                        
ul#sidebar1_menu {
                 list-style:none;
                 }                        
#content {
         width:52%;
         float:left;
                 padding-top:30px;
                 padding-bottom:30px;
                 padding-right:0px;
         }              
#content h2 {
            font-size: 24px;
            color: #00C;
            padding-top: 25px;
            }                          
#content h3 {
            font-size:24px;
            color:#444444;
            padding:20px;
            }
#content h4 {
            font-size: 18px;
            color: #373737;
            font-weight: normal;
            }
#content p {
               text-align:justify;
           font-size: 18px;
           color: #000;
           padding-top: 20px;
           }                              
#content small {
               font-size: 12px;
               color: #373737;
               }                          
#content a {
           color: #F33;
           font-weight: bold;
           text-decoration: none;
           }                                                                                                                                    
#sidebar2 {
              width: 20%;
          float:left;
                  direction:rtl;
                  padding-top:30px;
                  padding-bottom:30px;
                  padding-left:2%;
                  padding-right:2%;
          }              
ul#sidebar2_menu {
                 list-style:none;
                 }                      
ul#sidebar2_menu li a {
                                  text-decoration:none;
                      }                  
#footer {
            width: 100%;
            text-align:center;
                padding-top:60px;
        }                        
</style>
</head>
<body>
     <div id="main">
          <div class="container">
               <div id="header">
                    <div id="logo1">
                         <div id="tagline">
                                                         <h3>شعار تبلیغاتی سایت شما در این محل نمایش داده می شود</h3>
                         </div>              
                    </div>
                   
                    <div style="clear:both"></div>
                   
                    <ul id="menu">
                        <li><a href="#">خانه</a></li>
                        <li><a href="#">مبحث اول</a></li>
                        <li><a href="#">مبحث دوم</a></li>
                        <li><a href="#">مبحث سوم</a></li>
                        <li><a href="#">تماس با ما</a></li>
                    </ul>  
                         
                    <div style="clear:both"></div>
               </div>
               
               <div id="sidebar1">
                    <h3>عنوان ستون سمت چپ</h3>
                    <br />
                    <ul id="sidebar1_menu">
                        <li>عبارت اول از ستون سمت چپ</li>
                        <hr />
                        <li>عبارت دوم از ستون سمت چپ</li>
                        <hr />
                        <li>عبارت سوم از ستون سمت چپ</li>
                        <hr />
                    </ul>
               </div>              
               
               <div id="content">
                    <h1>عنوان اصلی مبحث</h1>
                    <h2>زیر عنوان :</h2>
                    <p>
                           مباحث به زبان فارسی در این محل نوشته خواهد شد .
                    </p>
               </div>  
               
               <div id="sidebar2">
                    <h3>عنوان ستون سمت راست</h3>
                    <br />
                    <ul id="sidebar2_menu">
                        <li><a href="#">اولین لینک از ستون سمت راست</a></li>
                        <hr />
                        <li><a href="#">دومین لینک از ستون سمت راست</a></li>
                        <hr />
                        <li><a href="#">سومین لینک از ستون سمت راست</a></li>
                        <hr />
                    </ul>
               </div>
               
               <div style="clear:both"></div>
          </div>
     </div>
     <div id="footer">
          <div class="container">
                    <div style="clear:both"></div>
                        <p>
                            Copyright © 2012 www.yoursite.com <br />
                            All Rights Reserved
                        </p>          
          </div>
     </div>
</body>
</html>

نتیجه :

توضیحاتی در مورد کدها :

نحوه جداسازی بخش های مختلف سایت با تگ div :

در بخش body از فایل html ، با استفاده از تگ div ، بخش های مختلف سایت را جدا کرده ایم تا بتوانیم به هر یک به طور جداگانه مشخصه هایی را اختصاص بدهیم و همچنین نحوه چیدمان بخش های مختلف سایت در کنار هم را مشخص کنیم . به هر تگ div یک id اختصاص داده ایم زیرا کدهای CSS را در بخش head فایل html نوشته ایم و با استفاده از id است که تعیین می کنیم هر قسمت صفحه ( محتویات هر تگ div ) چه مشخصه هایی باید داشته باشد .

بخش های مختلف سایت عبارتند از header که در بالاترین بخش سایت نمایش داده می شود و درواقع سردر ورودی سایت می باشد ، sidebar1 که ستون سمت چپ سایت است ، sidebar2 که ستون سمت راست سایت است ، content که مطالب مربوط به هر صفحه در آن نوشته می شود و بین دو ستون اصلی سایت قرار می گیرد و footer که در پایین ترین بخش سایت قرار می گیرد و معمولا حاوی علامت تجاری سایت ، حقوق مادی و معنوی سایت و ... می باشد .

چگونگی نوشته شدن کدهای CSS :

کدهای CSS در قسمت head فایل html باید نوشته شوند ( یعنی بین دو تگ <head> و <head/> ) . شروع کدهای CSS را با تگ <"style type="text/css> و پایان کدهای CSS را با تگ <style/> اعلام کرده ایم . سپس ابتدا باید مشخص کنیم که می خواهیم مشخصه ها را به کدام بخش سایت اعمال کنیم . اگر بخواهیم مشخصه ای را به محتویات یک تگ div اعمال کنیم باید ابتدا علامت # را نوشته و بعد از این علامت ، نام id مربوط به آن تگ div را بنویسیم . سپس یک علامت ((})) را نوشته و پس از آن مشخصه های مورد نظرمان را می نویسیم . چنانچه قصد نوشتن چند مشخصه را داشته باشیم باید آنها را با علامت ((;)) از یکدیگر جدا کنیم . پس از نوشتن تمامی مشخصه های مورد نظرمان ، علامت (({)) را به کار می بریم تا اعلام کنیم که مشخصه های آن تگ div پایان یافته است . برای سایر تگ ها نیز باید همین شیوه را اجرا کنیم و کدهای آنها را پشت سرهم بنویسیم .

همان طور که می بینید برای تعیین مشخصه های تگ های div ، ترتیب فراخوانی تگ های div دقیقا مثل ترتیب نوشته شدن کدهای آنها در بخش body فایل html می باشد .

نکته

بهترین انتخاب برای نوشتن کدهای CSS ، نوشتن آنها در فایلی جدا از فایل html می باشد زیرا با این شیوه می توانید کدهای CSS را به هر فایل html که بخواهید اعمال کنید و برای این کار تنها باید در فایل html آدرس فایل حاوی کدهای CSS را مشخص کنید . ما فعلا از این شیوه استفاده نکرده ایم تا گیج نشوید و تمرکز اصلی خود را فعلا بر روی نکات دیگر قرار دهید .

نحوه چیدمان بخش های مختلف سایت در کنار هم :

نحوه چیدمان بخش های مختلف سایت باید به این شکل باشد که ابتدا header نمایش داده شود و سپس دو ستون اصلی سایت و بخش content باید در پایین قسمت header نمایش داده شوند . ما برای کنار هم قرار دادن دو ستون اصلی و بخش content از مشخصه float استفاده کرده ایم که باعث می شود تگ های div شناور شوند و موقعیت خود را بر اساس تگ div کنار خود ، تنظیم کنند . در کدهای CSS مشاهده می کنید که برای هر سه تگ div با id های sidebar1 ، sidebar2 و content ، مشخصه float به کار رفته است به این صورت که چون ابتدا کدهای sidebar1 در بخش body نوشته شده است پس ابتدا مشخصه float آن را به صورت left ( سمت چپ ) تعیین کرده ایم تا در سمت چپ صفحه قرار بگیرد ، سپس بخش content را داریم که مشخصه float آن را نیز برابر left تعیین کرده ایم تا به sidebar1 که در سمت چپ آن است بچسبد . سپس برای sidebar2 نیز مشخصه float را برابر left تعیین کرده ایم تا در کنار بخش content که در سمت چپ آن است بچسبد .

نکته

برای آنکه دو ستون اصلی و بخش content به درستی در کنار هم قرار بگیرند باید مجموع عرض هر سه بخش برابر عرض کل صفحه باشد وگرنه ممکن است sidebar2 در زیر sidebar1 و content قرار بگیرد . برای فهمیدن عرض هر بخش ابتدا باید در کدهای CSS نگاه کنید و ببینید عرض آن بخش چقدر تعریف شده است و علاوه بر این باید ببینید که این بخش ها دارای مشخصه padding-left یا padding-right هستند یا نه . زیرا باید میزان این مشخصه ها را به عرض تعریف شده اضافه کنید . به عنوان مثال در کدهای بالا عرض های تعریف شده به صورت درصد می باشند و زمانی که کل درصدها را برای sidebar1 ، content و sidebar2 جمع بزنید ، برابر 100 درصد خواهد شد .

فهرست مباحث

1 شروع یادگیری HTML
2 HTML چیست ؟
3 تگ ها، در HTML
4 شروع یک خط جدید، با تگ br ، در HTML
5 ایجاد عنوان، با تگ های h1 و h2 و h3 و h4 و h5 و h6 ، در HTML
6 ایجاد یک پاراگراف، با تگ p ، در HTML
7 تقسیم فایل html به دو بخش head و body ، در HTML
8 مشخصه برای تگ ها، در HTML
9 نرم افزار Dreamweaver برای راحت تر نوشتن کدها
10 تگ div برای ساخت اسکلت سایت، در HTML
11 استفاده از id برای دادن نام اختصاصی به هر تگ div ، در HTML
12 ساخت اسکلت یک سایت کامل، در HTML
13 قرار دادن سایت بر روی اینترنت
14 تغییر رنگ پس زمینه سایت، در HTML
15 تعیین رنگ، در HTML
16 ساخت لینک، در HTML
17 تعیین مشخصات فونت ها، با تگ font و مشخصه های face و size و color ، در HTML
18 نوشتن توضیحات (Comment)، در HTML
19 ترسیم خط افقی، با تگ hr ، در HTML
20 تگ های شیوه نمایش متن (تگ های b و ins و i و sub و sup)، در HTML
21 نمایش عکس ها، در HTML
22 ساخت جدول، در HTML
23 ساخت لیست (فهرست)، در HTML
24 فرم ها (Form)، در HTML
نکته : این فهرست مباحث، صرفا منتخبی از کلیدهای آموزشی این موضوع است (که خواندن متوالی آنها توصیه می شود) و برای دیدن کلیدهای آموزشی بیشتر از این موضوع، می توانید بر روی دسته بندی های ستون سمت راست کلیک نمایید.

دسته بندی مباحث اولیه، در HTML

نویسنده علیرضا گلمکانی

شماره کلید 499

گزینه ها

به اشتراک گذاری (Share) در شبکه های اجتماعی

FaceBook Twitter Digg Reddit LinkedIn Pinterest StumbleUpon

نظرات 4 4 0

elahe afravi

۱۳۹۵/۰۵/۱۸

۲۱:۴۵

سلام
چرا وقتی فارسی مینویسم علامت سوال میاد؟؟

admin

۱۳۹۵/۰۵/۱۹

۱۳:۰۷

سلام.
احتمالا کد زیر را در بین زوج تگ head ننوشته اید (تعیین charset برابر utf-8) :

حامد

۱۳۹۵/۰۵/۲۲

۱۸:۱۷

با سلام و خدا قوت
بنده کد های بالا رو در نوت پد کپی میکنم و بعد اجرا ولی مطالب یه خورده بهم ریخته اجرا میشه؟؟ چرا؟؟
مبحث اصلی میره سمت راست و ستون سمت راست میچسبه به ستون سمت چپ.

admin

۱۳۹۵/۰۵/۲۵

۱۶:۴۸

سلام.
تگ div با id برابر content از کدها حذف شده بود (نمونه خروجی درست بود، اما نمی دانم چرا از کدهایی که در مبحث نمایش داده بودیم، بخشی حذف شده بود). تگ مورد نظر :

اکنون کدهای مبحث تصحیح شده است و می توانید دوباره امتحان کنید.

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)