ایجاد محتوای اصلی در html5 + فیلم آموزشی -جلسه 10

فیلم آموزشی تفاوت section و article

فهرست مطالب

تفاوت تگ section و article در html5

section برای قسمت بندی صفحه که هر قسمت باید شامل یک عنوان ومی تواند شامل section یا article دیگر می تواند باشد ولی article جهت انتشار یک مطلب یا پاراگراف خاص با یک عنوان استفاده می شود.

تگ article در html5:

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

برخی موارد استفاده از article عبارتند از:

ورودی وبلاگ
نظر ارسال شده توسط یک کاربر
مقاله روزنامه/مجله
پست انجمن

موارد استفاده از تگ article

Article بیشتر در دو زمینه استفاده می شود:

ارائه محتوای اصلی دریک صفحه
در صفحه‌ای مانند صفحه نتایج جستجو، صفحه فهرست وبلاگ و غیره..

ادامه مطلب php چیست ؟ و کاربرد php چیست- جلسه 1

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

ادامه مطلب ریسپانسیو چیست؟ آیا باید سایت ریسپانسیو باشد؟-جلسه 5

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

تگ section در html5:

تگ section یک تگ معنایی است. تگ section صفحه را به بخش‌های مختلفی مانند مقدمه، جزئیات، اطلاعات تماس و غیره تقسیم می‌کند که بیشتر در تگ‌های <section> مختلف قرار دارند. حتی می تواند مطالب را به زیربخش ها تقسیم کند. بیشتر زمانی استفاده می شود که نیاز به 2 سرصفحه یا هر بخش دیگری از اسناد باشد.

تقسیم بندی محتوا اصلی در html5

با استفاده از کول بندی که در css خارجی انجام داده ایم می توانیم تقسیم بندی محتوا اصلی در html5 را انجام داده و محتوای اصلی را به ستون های مختلف تقسیم کنیم

فیلم آموزش تقسیم بندی محتوای اصلی در html 5

پس کدهای زیر را به قسمت محتوای اصلی که ما نام section را به عنوان فایل آن در نظرگرفته ایم اضافه می کنیم

نمایش کپی در حافظه

بعد از این مرحله قسمت مربوط به اسلایدر و عناوین مطالب مرتبط محتوای اصلی را اضافه می کنیم که نتیجه به صورت زیر خواهد بود.

نمایش کپی در حافظه

<div class="continer" style="background:white;">
        <div class="col-8">
            <div class="continer">
                <div id="owl-one" class="owl-carousel owl-theme"  >
                    <div class="item center itemSliSec">
                        <div class="continer">
                            <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/colerYear.jpg" alt="سئوکان">
                        </div>
                        <div class="col-11">
                            <p>جگوار از گربه سانانی است که توانایی شکار سوسمار را دارد و به نسبت پوست پلنگ خال های کم تر اما درشت تری دارد</p>
                        </div>
                    </div>
                    <div class="item center itemSliSec">
                        <div class="continer">
                            <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/jaguar.jpg" alt="سئوکان">
                        </div>
                        <div class="col-11">
                            <p>جگوار از گربه سانانی است که توانایی شکار سوسمار را دارد و به نسبت پوست پلنگ خال های کم تر اما درشت تری دارد</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <nav class="sectionNav">
                <ul>
                    <li><a href="#"><i class="fa fa-arrow-alt-circle-left"></i>مروری برتاریخچه جام جهانی از ابتدا تا اکنون</a> </li>
                    <li><a href="#"><i class="fa fa-arrow-alt-circle-left"></i>زندگی نامه استیون هاوکینگ فیزیکدان نظری، کیهان‌شناس و نویسنده انگلستانی </a> </li>
                    <li><a href="#"><i class="fa fa-arrow-alt-circle-left"></i>علائم بیماری کبد چرب چیست و راه های درمان آن</a> </li>
                    <li><a href="#"><i class="fa fa-arrow-alt-circle-left"></i>معرفی رشته کوهنوردی و آشنایی با شاخه های آن</a> </li>
                    <li><a href="#"><i class="fa fa-arrow-alt-circle-left"></i>تاسیسات ساختمانی چیست و آشنایی با انواع تاسیسات ساختمانی</a></li>
                    <li><a href="#"><i class="fa fa-arrow-alt-circle-left"></i>مروری برتاریخچه جام جهانی از ابتدا تا اکنون</a> </li>
                    <li><a href="#"><i class="fa fa-arrow-alt-circle-left"></i>زندگی نامه استیون هاوکینگ فیزیکدان نظری، کیهان‌شناس و نویسنده انگلستانی </a> </li>
                    <li><a href="#"><i class="fa fa-arrow-alt-circle-left"></i>علائم بیماری کبد چرب چیست و راه های درمان آن</a> </li>
                    <li><a href="#"><i class="fa fa-arrow-alt-circle-left"></i>معرفی رشته کوهنوردی و آشنایی با شاخه های آن</a> </li>
                    <li><a href="#"><i class="fa fa-arrow-alt-circle-left"></i>تاسیسات ساختمانی چیست و آشنایی با انواع تاسیسات ساختمانی</a> </li>
                </ul>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://seokan.ir/language-php/" target="_blank" rel="nofollow" class="IRPP_minimalist"><style> .IRPP_minimalist { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#ECF0F1; border:0!important; border-left:4px solid #7F8C8D!important; text-decoration:none; } .IRPP_minimalist:active, .IRPP_minimalist:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .IRPP_minimalist { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_minimalist .ctaText { font-weight:bold; color:#16A085; text-decoration:none; font-size: 16px;float:left; } .IRPP_minimalist .postTitle { color:#34495E; text-decoration: underline!important; font-size: 16px; } .IRPP_minimalist:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">ادامه مطلب</span>  <span class="postTitle">php چیست و چه کاربرد کارد - سئوکان</span></div></a><div style="width:100%; text-align:left; font-weight:normal;"><div style="font-size:10px;"><span class="poweredByText">قدرت گرفته از</span> <a rel="nofollow" style="font-weight:bold;" href="https://mihannevis.com/inline-related-posts" target="_blank">افزونه نوشته‌های مرتبط هوشمند</a></div></div><div style="clear:both"></div></div>            </nav>
        </div>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://seokan.ir/versions-php/" target="_blank" rel="nofollow" class="IRPP_minimalist"><style> .IRPP_minimalist { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#ECF0F1; border:0!important; border-left:4px solid #7F8C8D!important; text-decoration:none; } .IRPP_minimalist:active, .IRPP_minimalist:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .IRPP_minimalist { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_minimalist .ctaText { font-weight:bold; color:#16A085; text-decoration:none; font-size: 16px;float:left; } .IRPP_minimalist .postTitle { color:#34495E; text-decoration: underline!important; font-size: 16px; } .IRPP_minimalist:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">ادامه مطلب</span>  <span class="postTitle">آموزش بررسی نسخه PHP - سئوکان</span></div></a><div style="width:100%; text-align:left; font-weight:normal;"><div style="font-size:10px;"><span class="poweredByText">قدرت گرفته از</span> <a rel="nofollow" style="font-weight:bold;" href="https://mihannevis.com/inline-related-posts" target="_blank">افزونه نوشته‌های مرتبط هوشمند</a></div></div><div style="clear:both"></div></div>
    </div>

استایل دهی به nav در html5

جهت استایل دهی به nav در html5 از یک کلاس یا id استفاده می کنیم که من از کلاس sectionNav استفاده کرده ام

حالا نوبت به اضافه کردن css مربوط به این دو قسمت می باشد و کد های زیر را به css داخلی اضافه می کنیم

نمایش کپی در حافظه

آموزش استفاده از transform در css3

ویژگی ترنسفرم یا Transform یکی از دیگر ویژگی های زبان CSS است که در نسخه 3 این زبان اضافه شده و با استفاده از آن می توانید عناصر موجود در یک صفحه وب را تغییر (حرکت، چرخش، کج کردن) دهید.

کد های html مربوط به مطالب برگزیده را در زیر مطالب اسلایدر و عناوین اضافه شده اضافه می کنیم.

نمایش کپی در حافظه

<div class="continer" style="background:white;">
        <span class="titleBox2">مطالب برگزیده</span>
        <div  id="owl-two" class="owl-carousel owl-theme">
            <div class="item">
                <figure class="feaCon">
                 <div class="feaConImg"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/jaguar.jpg" alt="جگوار"></div>
                    <figcaption>مهاارت تماشایی یک جگوار در شکار یک آناکوندا</figcaption>
                </figure>
            </div>
            <div class="item">
                <figure class="feaCon">
                    <div class="feaConImg"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/colerYear.jpg" alt="رنگ سال"></div>
                    <figcaption>رنگ سال پنتون در ۱۲ سال گذشته</figcaption>
                </figure>
            </div>
            <div class="item">
                <figure class="feaCon">
                    <div class="feaConImg">  <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/twinPeaks.jpg" alt="توئین پیکس"></div>
                    <figcaption>توئین پیکس آهنگ ساز مشهور آمریکایی</figcaption>
                </figure>
            </div>
            <div class="item">
                <figure class="feaCon">
                    <div class="feaConImg"><img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/rolex.jpg" alt="ساعت رولکس"></div>
                    <figcaption>همه با یک رولکس شروع میکنن!</figcaption>
                </figure>
            </div>
            <div class="item">
                <figure class="feaCon">
                    <div class="feaConImg"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/alborzVahsh.jpeg" alt="حیات وحش البرز"></div>
                    <figcaption>۵ سال تولید برای نمایش حیات وحش زاگرس/ رشته کوه غرب ایران، بام جهان می‌شود؟</figcaption>
                </figure>
            </div>

</div>
    </div>

کد های CSS مربوط به transform در css3

نمایش کپی در حافظه

اضافه کردن سطری دیگر با عنوان مطالب پربازدید به محتوای اصلی

نمایش کپی در حافظه

<div class="continer" style="background:white;">
        <span class="titleBox2">مطالب پربازدید</span>
        <div class="continer">
            <div class="col-3 posOveVie">
                <figure>
                    <div class="col-6"><img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/twinPeaks.jpg" alt="توئین پیکس"></div>
                     <figcaption class="col-6">توئین پیکس آهنگ ساز مشهور آمریکایی</figcaption>
                </figure>
            </div>
            <div class="col-3 posOveVie">
                <figure>
                    <div class="col-6"><img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/rolex.jpg" alt="ساعت رولکس"></div>
                   <figcaption  class="col-6">همه با یک رولکس شروع میکنن!</figcaption>
                </figure>
            </div>
            <div class="col-3 posOveVie">
                <figure>
                    <div class="col-6"><img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/alborzVahsh.jpeg" alt="حیات وحش البرز"></div>
                     <figcaption class="col-6">۵ سال تولید برای نمایش حیات وحش زاگرس</figcaption>
                </figure>
            </div>
            <div class="col-3 posOveVie">
                <figure>
                    <div class="col-6"> <img class="lazyload"  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="../image/colerYear.jpg" alt="رنگ سال"></div>
                   <figcaption class="col-6">رنگ سال پنتون در ۱۲ سال گذشته</figcaption>
                </figure>
            </div>
        </div>

</div>

css مربوط به مطالب پربازدید

نمایش کپی در حافظه

اضافه کردن footer به html5

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

ادامه مطلب Css چیست؟ و نحوه اضافه کردن انواع css به صفحات html - جلسه 2

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

نمایش کپی در حافظه

ایجاد محتوای اصلی در html5 + فیلم آموزشی -جلسه 10

فیلم آموزشی تفاوت section و article

تفاوت تگ section و article در html5

تگ article در html5:

برخی موارد استفاده از article عبارتند از:

موارد استفاده از تگ article

تگ section در html5:

تقسیم بندی محتوا اصلی در html5

فیلم آموزش تقسیم بندی محتوای اصلی در html 5

استایل دهی به nav در html5

آموزش استفاده از transform در css3

کد های CSS مربوط به transform در css3

اضافه کردن footer به html5

کد منبع جلسه 10 به صورت کامل

آموزش ساخت فرم ثبت‌ نام با PHP- سئوکان

آموزش ساخت جدول در php – سئوکان

آموزش اتصال به دیتابیس با PDO – سئوکان

تفاوت get و post – سئوکان

ارسال دیدگاه لغو پاسخ

عنوان