نمایش نتایج 1 تا 19 از 19

نام تاپیک: یک قالب سه ستونه با html5

  1. #1
    کاربر دائمی آواتار ravand
    تاریخ عضویت
    اردیبهشت 1389
    محل زندگی
    راوند کاشان
    پست
    3,378

    یک قالب سه ستونه با html5

    سلام
    راستش من هنوز html5 رو درست و حسابی کار نکردم. یه سری کد نوشتم برای یه قالب سه ستونه ی ساده که از سایت w3c گرفتم.
    خواستم ببینم این روش روش استانداری هست یا نه؟ یا تگ هایی که استفاده کردم باید چیز دیگه باشن؟
    متشکرم.

    کد HTML:
    <!DOCTYPE html>
    <html>
                    <head>
                                    <title> آموزش ساخت قالب وبلاگ </title>
                                    <meta charset="utf-8">              
                                    <style type="text/css">
                                    .kol{
                                                    border:1px #000000 solid;
                                                    height:500px;
                                    }
                                    #header{
                                                    border:1px #000000 solid;
                                                    width:1000px;
                                                    height:200px;
                                                    margin:0 auto;
                                                    text-align:center;
                                                    background-color:#41e8e6;
                                    }
                                    #nav{
                                                    border:1px #000000 solid;
                                                    width:1000px;
                                                    height:40px;
                                                    margin:0 auto;  
                                                    text-align:center;            
                                                    background-color:#e416e6;
                                    }
                                    #sidebar1{
                                                    border:2px #0ced61 solid;
                                                    width:20%;
                                                    height:200px;
                                                    float:right;
                                                    text-align:center;
                                                    background-color:#0ec5d0;
                                    }
                                    #main{
                                                    border:2px #ed0c61 solid;
                                                    width:57%;
                                                    height:200px;   
                                                    float:right;          
                                                    text-align:center;            
                                                    background-color:#0ed065;
                                    }
                                    #sidebar2{
                                                    border:2px #2925e9 solid;
                                                    width:20%;
                                                    height:200px;   
                                                    float:left;
                                                    text-align:center;
                                                    background-color:#12cfc8;
                                    }
                                    #footer{
                                                    border:1px #1fdcda solid;
                                                    width:1000px;
                                                    height:40px;
                                                    margin:0 auto;  
                                                    text-align:center;            
                                                    background-color:#cfa512;
                                    }
                                    </style>
                    </head>
    <body>
    <div class="kol">
      <div id="header">
        هدر
      </div>
     
      <div id="nav">
        منو
      </div>
     
      <div id="sidebar1">
        راست
      </div>
     
      <div id="main">
        وسط
      </div>
     
     <div id="sidebar2">
       چپ
      </div>
    </div>
      <div id="footer">
        فوتر
      </div>
    </body>
    </html>

  2. #2

    نقل قول: یک قالب سه ستونه با html5

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

    <!doctype html>
    <html lang="fa">
    <head>
    <meta charset="UTF-8">
    <title>بایدبرایم مهم باشد؟ html5 چرا</title>
    <meta name="description" content="بایدبرایم مهم باشد؟ html5 چرا">
    <meta name="author" content="html5,css3,seo">
    <link rel="stylesheet" href="style.css">
    <!--[if it IE 9]-->
    <script src="modernizr.js"></script>
    <![endif]-->
    </head>
    <body>
    <header>
    <nav></nav>
    <hgroup>
    <h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
    <h2>html5 & css3 & seo</h2>
    </hgroup>
    </header>
    <article>
    <h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
    </article>
    <aside>
    <article></article>
    </aside>
    <footer>
    <section></section>
    </footer>


    <script src="main.js"></script>
    </body>
    </html>


    چرا html5 بایدبرایم مهم باشد؟

  3. #3

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط tamafi6 مشاهده تاپیک
    کدشما html5 نیست چون هیچ تگ وبرچسب html5 رانداره ولی اگرنام id هارادر خودبرچسب به کارببری میشه گفت html5
    نمونه:

    <!doctype html>
    <html lang="fa">
    <head>
    <meta charset="UTF-8">
    <title>بایدبرایم مهم باشد؟ html5 چرا</title>
    <meta name="description" content="بایدبرایم مهم باشد؟ html5 چرا">
    <meta name="author" content="html5,css3,seo">
    <link rel="stylesheet" href="style.css">
    <!--[if it IE 9]-->
    <script src="modernizr.js"></script>
    <![endif]-->
    </head>
    <body>
    <header>
    <nav></nav>
    <hgroup>
    <h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
    <h2>html5 & css3 & seo</h2>
    </hgroup>
    </header>
    <article>
    <h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
    </article>
    <aside>
    <article></article>
    </aside>
    <footer>
    <section></section>
    </footer>


    <script src="main.js"></script>
    </body>
    </html>


    چرا html5 بایدبرایم مهم باشد؟
    این کد نویسی استاندارد html5 هست با این تفاوت که تگ hgroup منسوخ شده

  4. #4
    کاربر دائمی آواتار ravand
    تاریخ عضویت
    اردیبهشت 1389
    محل زندگی
    راوند کاشان
    پست
    3,378

    نقل قول: یک قالب سه ستونه با html5

    الان ما میخوایم سه تا ستون کنار هم بسازیم. باید از چه تگ هایی استفاده بکنیم؟

  5. #5

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط ravand مشاهده تاپیک
    الان ما میخوایم سه تا ستون کنار هم بسازیم. باید از چه تگ هایی استفاده بکنیم؟
    ببین اول باید بدونی اون 3تا باکس مربوط به چی هستش
    مثلا اگه یکیش سایدبار هست باید از تگ aside استفاده کنی یا اگه برای بالای سایت یه لوگو و یه منو داری باید از برای باکس کلی از تگ header استفاده کنی و برای منو از تگ nav. یا اگه میخوای پست بزاری باید از تگ article استفاده کنی.
    آموزش html5 سایت w3school رو ببینی کاربردشون دستت میاد
    http://www.w3schools.com/html/html5_intro.asp

  6. #6
    کاربر دائمی آواتار ravand
    تاریخ عضویت
    اردیبهشت 1389
    محل زندگی
    راوند کاشان
    پست
    3,378

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط afshinz مشاهده تاپیک
    ببین اول باید بدونی اون 3تا باکس مربوط به چی هستش
    مثلا اگه یکیش سایدبار هست باید از تگ aside استفاده کنی یا اگه برای بالای سایت یه لوگو و یه منو داری باید از برای باکس کلی از تگ header استفاده کنی و برای منو از تگ nav. یا اگه میخوای پست بزاری باید از تگ article استفاده کنی.
    آموزش html5 سایت w3school رو ببینی کاربردشون دستت میاد
    http://www.w3schools.com/html/html5_intro.asp
    من اینو قبلا دیدم ولی یه مثال ساده نذاشته برای همچین چیزی.
    الان برای سه تا ستونی که باید بذارم از چه تگ هایی باید استفاده کنیم؟
    الان برای ستون وسط از <main></main> استفاده کنم؟
    برای کنار از <aside></aside> ؟
    اگه دو تا کنار سمت راست و چپ داشته باشیم چی؟

  7. #7

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط ravand مشاهده تاپیک
    من اینو قبلا دیدم ولی یه مثال ساده نذاشته برای همچین چیزی.
    الان برای سه تا ستونی که باید بذارم از چه تگ هایی باید استفاده کنیم؟
    الان برای ستون وسط از <main></main> استفاده کنم؟
    برای کنار از <aside></aside> ؟
    اگه دو تا کنار سمت راست و چپ داشته باشیم چی؟
    خب اگه سه ستونه هست و 2تا ستون چپ و راست هر دو سایدبار هستن پس برای هر دو باید از aside استفاده کنی

  8. #8
    کاربر دائمی آواتار ravand
    تاریخ عضویت
    اردیبهشت 1389
    محل زندگی
    راوند کاشان
    پست
    3,378

    نقل قول: یک قالب سه ستونه با html5

    الان اینی که نوشتم مشکلی نداره ؟
    کد HTML:
    <!DOCTYPE html>
    <html>
                    <head>
                                    <title> آموزش ساخت قالب وبلاگ </title>
                                    <meta charset="utf-8">              
                                    <!--[if it IE 9]-->
                                                    <script type="text/javascript"> src="modernizr.js"></script>
                                    <![endif]-->
                                    <style type="text/css">
                                    .kol{
                                                    border:1px #000000 solid;
                                                    height:500px;
                                    }
                                    .header{
                                                    border:1px #000000 solid;
                                                    width:1000px;
                                                    height:200px;
                                                    margin:0 auto;
                                                    text-align:center;
                                                    background-color:#41e8e6;
                                    }
                                    .nav{
                                                    border:1px #000000 solid;
                                                    width:1000px;
                                                    height:40px;
                                                    margin:0 auto;  
                                                    text-align:center;            
                                                    background-color:#e416e6;
                                    }
                                    .sidebar1{
                                                    border:2px #0ced61 solid;
                                                    width:20%;
                                                    height:200px;
                                                    float:right;
                                                    text-align:center;
                                                    background-color:#0ec5d0;
                                    }
                                    .main{
                                                    border:2px #ed0c61 solid;
                                                    width:57%;
                                                    height:200px;   
                                                    float:right;          
                                                    text-align:center;            
                                                    background-color:#0ed065;
                                    }
                                    .sidebar2{
                                                    border:2px #2925e9 solid;
                                                    width:20%;
                                                    height:200px;   
                                                    float:left;
                                                    text-align:center;
                                                    background-color:#12cfc8;
                                    }
                                    .footer{
                                                    border:1px #1fdcda solid;
                                                    width:1000px;
                                                    height:40px;
                                                    margin:0 auto;  
                                                    text-align:center;            
                                                    background-color:#cfa512;
                                    }
                                    </style>
                    </head>
    <body>
    <div class="kol">
                    <header class="header">
                                       <h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
                                       <h2>html5 & css3 & seo</h2>
                                    <nav class="nav"></nav>    
                    </header>
                   
                                     <aside class="sidebar1">
                                                    <article>ساید بار راست</article>
                                     </aside>
                                     
                                     <main class="main">
                                                    <article>وسط</article>
                                     </main>
                                     
                                     <aside class="sidebar1">
                                                    <article>ساید بار راست</article>
                                     </aside>                            
    </div>
                    <footer class="footer">
                                    <article>فوتر</article>
                    </footer>
    </body>
    </html>

  9. #9

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط afshinz مشاهده تاپیک
    این کد نویسی استاندارد html5 هست با این تفاوت که تگ hgroup منسوخ شده
    ببخشیداستادمیشه توضیح بدیدچرامنسوخ شده ؟
    یه خورده درمورداین تگ توضیح میدهید؟

  10. #10

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط ravand مشاهده تاپیک
    الان اینی که نوشتم مشکلی نداره ؟
    کد HTML:
    <!DOCTYPE html>
    <html>
                    <head>
                                    <title> آموزش ساخت قالب وبلاگ </title>
                                    <meta charset="utf-8">              
                                    <!--[if it IE 9]-->
                                                    <script type="text/javascript"> src="modernizr.js"></script>
                                    <![endif]-->
                                    <style type="text/css">
                                    .kol{
                                                    border:1px #000000 solid;
                                                    height:500px;
                                    }
                                    .header{
                                                    border:1px #000000 solid;
                                                    width:1000px;
                                                    height:200px;
                                                    margin:0 auto;
                                                    text-align:center;
                                                    background-color:#41e8e6;
                                    }
                                    .nav{
                                                    border:1px #000000 solid;
                                                    width:1000px;
                                                    height:40px;
                                                    margin:0 auto;  
                                                    text-align:center;            
                                                    background-color:#e416e6;
                                    }
                                    .sidebar1{
                                                    border:2px #0ced61 solid;
                                                    width:20%;
                                                    height:200px;
                                                    float:right;
                                                    text-align:center;
                                                    background-color:#0ec5d0;
                                    }
                                    .main{
                                                    border:2px #ed0c61 solid;
                                                    width:57%;
                                                    height:200px;   
                                                    float:right;          
                                                    text-align:center;            
                                                    background-color:#0ed065;
                                    }
                                    .sidebar2{
                                                    border:2px #2925e9 solid;
                                                    width:20%;
                                                    height:200px;   
                                                    float:left;
                                                    text-align:center;
                                                    background-color:#12cfc8;
                                    }
                                    .footer{
                                                    border:1px #1fdcda solid;
                                                    width:1000px;
                                                    height:40px;
                                                    margin:0 auto;  
                                                    text-align:center;            
                                                    background-color:#cfa512;
                                    }
                                    </style>
                    </head>
    <body>
    <div class="kol">
                    <header class="header">
                                       <h1>بایدبرایم مهم باشد؟ html5 چرا</h1>
                                       <h2>html5 & css3 & seo</h2>
                                    <nav class="nav"></nav>    
                    </header>
                   
                                     <aside class="sidebar1">
                                                    <article>ساید بار راست</article>
                                     </aside>
                                     
                                     <main class="main">
                                                    <article>وسط</article>
                                     </main>
                                     
                                     <aside class="sidebar1">
                                                    <article>ساید بار راست</article>
                                     </aside>                            
    </div>
                    <footer class="footer">
                                    <article>فوتر</article>
                    </footer>
    </body>
    </html>
    دوست عزیز شما نباید به تگ های معناگرا کلاس ویا شناسه اختصاص بدهید

  11. #11
    کاربر دائمی آواتار ravand
    تاریخ عضویت
    اردیبهشت 1389
    محل زندگی
    راوند کاشان
    پست
    3,378

    نقل قول: یک قالب سه ستونه با html5

    خب من اگه بلد بودم که از شما نمی پرسیدم
    شما بیا و حداقل یکی از تگ ها رو اونطوری که میگی بنویس.

  12. #12

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط tamafi6 مشاهده تاپیک
    ببخشیداستادمیشه توضیح بدیدچرامنسوخ شده ؟
    یه خورده درمورداین تگ توضیح میدهید؟
    دوست عزیز دو قسمتی که به عنوان آپدیت در این لینک هستن رو بخونید
    link
    تو خود سایت w3school هم اگه مراجعه کنید کلا اون رو حذف کردن

  13. #13

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط afshinz مشاهده تاپیک
    دوست عزیز دو قسمتی که به عنوان آپدیت در این لینک هستن رو بخونید
    link
    تو خود سایت w3school هم اگه مراجعه کنید کلا اون رو حذف کردن
    درسته اون چیزی هم که نوشته شده یک مقاله وبحث هست وچندسالی هست که برسربعضی از تگ ها ی html5 این اختلافات رخ میده - به همین دلیل هم در سایت w3school به صورت معلق درآورده - ولی هنوز به عنوان منسوخ مطرح نشده .

  14. #14
    کاربر دائمی آواتار ravand
    تاریخ عضویت
    اردیبهشت 1389
    محل زندگی
    راوند کاشان
    پست
    3,378

    نقل قول: یک قالب سه ستونه با html5

    دوست عزیز شما نباید به تگ های معناگرا کلاس ویا شناسه اختصاص بدهید
    خب من چطوری باید بهش استایل بدم ؟ یه مثال میشه بنویسید؟

  15. #15

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط ravand مشاهده تاپیک
    خب من چطوری باید بهش استایل بدم ؟ یه مثال میشه بنویسید؟
    تاجایی که امکان دره به برچسب های اصلی مانند article , aside ,footer ,section, header نباید کلاس اختصاص داده بشه چون یک کارغیر اصولی هست برای رفع مشکل فقط استایل اختصاص بدید مانند
    اشتباه :

    <style>
    .article {color:red;}
    </style>
    <article class="article">
    </article>


    صحیح:

    <style>
    article p{color:red;}
    </style>
    <article>
    <p>متن</p>
    </article>

    اگردرجایی به کلاس نیاز داشتید بهتره اونها را در div قراربدید

  16. #16
    کاربر دائمی آواتار ravand
    تاریخ عضویت
    اردیبهشت 1389
    محل زندگی
    راوند کاشان
    پست
    3,378

    نقل قول: یک قالب سه ستونه با html5

    من توی سایت w3schools یه چیزایی در مورد تگ article خوندم. دقیقا کارش چیه اصلا برای چی اضافه شده؟
    متشکرم.

  17. #17

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط tamafi6 مشاهده تاپیک
    دوست عزیز شما نباید به تگ های معناگرا کلاس ویا شناسه اختصاص بدهید
    دوست عزیر میشه بگید چرا نمیشه به این تگ ها کلاس داد؟؟
    درسته میشه خیلی راحت تگ رو داخل سی اس اس استایل دهی کرد ولی من هیچجا ندیدم که همچین حرفی بزنن که درست نیست به این تگ ها کلاس یا آی دی اختصاص بدیم!
    ممنون میشم اگه مقاله ای رو در این مورد خوندید لینک بدید

  18. #18

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط afshinz مشاهده تاپیک
    دوست عزیر میشه بگید چرا نمیشه به این تگ ها کلاس داد؟؟
    درسته میشه خیلی راحت تگ رو داخل سی اس اس استایل دهی کرد ولی من هیچجا ندیدم که همچین حرفی بزنن که درست نیست به این تگ ها کلاس یا آی دی اختصاص بدیم!
    ممنون میشم اگه مقاله ای رو در این مورد خوندید لینک بدید
    عذر میخوام پست پایینی رو نخوندم. درسته کار اصولی تریه که خود سلکتور تگ رو استفاده کنیم ولی محدودیتی برای اینکه کلاس یا آی دی بدیم وجود نداره

  19. #19

    نقل قول: یک قالب سه ستونه با html5

    نقل قول نوشته شده توسط ravand مشاهده تاپیک
    من توی سایت w3schools یه چیزایی در مورد تگ article خوندم. دقیقا کارش چیه اصلا برای چی اضافه شده؟
    متشکرم.
    هر پست اصلی وبسایت رو داخل یه تگ article قرار میدن

تاپیک های مشابه

  1. طراحی قالب چند ستونه با div مانند عکس نمونه
    نوشته شده توسط neda555 در بخش طراحی وب (Web Design)
    پاسخ: 13
    آخرین پست: شنبه 19 اسفند 1391, 15:59 عصر
  2. قالب سه ستونه
    نوشته شده توسط sg.programmer در بخش طراحی وب (Web Design)
    پاسخ: 0
    آخرین پست: سه شنبه 03 مرداد 1391, 23:18 عصر
  3. سوال: مشکل با قالب سه ستونه با css در asp ??
    نوشته شده توسط Fartaj در بخش طراحی وب (Web Design)
    پاسخ: 8
    آخرین پست: جمعه 16 تیر 1391, 21:12 عصر
  4. سوال: قالب سه ستونه
    نوشته شده توسط mohsen.nsb44 در بخش طراحی وب (Web Design)
    پاسخ: 20
    آخرین پست: جمعه 26 اسفند 1390, 18:34 عصر
  5. آموزش: (مبتدی) اصول طراحی یک قالب چند ستونه
    نوشته شده توسط hamiii در بخش طراحی وب (Web Design)
    پاسخ: 0
    آخرین پست: پنج شنبه 01 مهر 1389, 09:52 صبح

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •