خانه » ساخت بدنه سایت در HTML5 و معرفی ساختار سایت دیجی کالا

ساخت بدنه سایت در HTML5 و معرفی ساختار سایت دیجی کالا

  • تاریخ :‌
  • دسته : ---
در این جلسه قرار هست که کدهای اصلی html5 رو در تگ Body بنویسیم و با اونها آشنا بشیم... پس سریعا Editor (ویرایشگر) خودتون رو باز کنید و یک پروژه جدید بسازید تا قدم به قدم پیش بریم...

خب دوستان همانطور که اطلاع دارین این جلسه قرار هست که تگ های اصلی HTML5 رو در پروژه وارد کنیم و با اونها کار کنیم .
قبل از اینکه وارد مباحث بشیم من یک  تصویر از ساختار HTML5  رو براتون آماده کردم که باید حتما مشاهده کنید :

ساخت بدنه سایت در HTML5

زیاد نگران تصویر بالا نباشید در ادامه با این ساختار آشنا میشیم .


معرفی تگ header :
این تصاویری که در ادامه مشاهده می کنید از سایت دیجی کالا گرفته شده و برای این هستش که اکثر شما عزیزان این سایت رو مشاهده کردید و برای شما آشنا هست ، و ما به عنوان مثال و یادگیری بهتر  شما این سایت رو در این جلسه بررسی می کنیم .
همونطور که قبلا گفتیم هر سایتی دارای یک هدر (سرصفحه ) HEADER هستش که به عنوان شروع کننده سایت در نظر گرفته می شود و البته یکسری اطلاعات مثل لوگو و ... رو شامل میشه  مانند شکل زیر :

ساخت بدنه سایت در HTML5

برای تعریف هدر یا سر صفحه  در HTML5  در تگ body  از تگ زیر استفاده می کنیم :

<header></header>

حالا به عنوان مثال ما می خواهیم در تگ header  یک نوشته برای ما نمایش داده شود ما بین تگ header تگ زیر رو وارد می کنیم :

<header> 
</h1>پیشروسافت<h1>               
</header>


 تگ nav  یا  navigation bar :

ساخت بدنه سایت در HTML5
تصویری رو که مشاهده می کنید اسمش Nav  هست که در اکثر سایت ها به شکل های مختلف مشاهده کردین این Nav Bar در واقع کاربران رو به صفحات دیگر سایت هدایت میکنه و همچنین از نظر سئو و بهینه سازی اگر هم به درستی ساخته بشه فرآیند مثبتی رو در پیش داره .
برای تعریف NAV در HTML5 از تگ زیر استفاده می کنیم  :

<nav></nav>

در تعریف nav حتما باید دقت کنید چرا ؟ به این علت که کلیه Navigation bar ها از لیست درست میشن و حتما برای اینکه بتونید nav تعریف کنید باید از تگ لیست استفاده کنید مثل شکل زیر :

        <nav>
            <ul>       
                </li>صفحه اصلی<li>              
                </li>درباره ما<li>               
                </li>تماس با ما <li>              
                </li>دانلودها  <li>               
            </ul>        
        </nav>

زنگ تفریح : خب تا اینجا که خسته نشدین ؟ اگر خسته شدین یه چیزی نوشجان کنید و یه چرخی بزنید و برگردید ما منتظر شما میمونی


معرفی تگ section  :

ساخت بدنه سایت در HTML5

تمام اجزای سایت شما که قابل دیدن هست در تگ section  نوشته می شه :
<section></section>

که می تونید اجزاء خودتون رو در این قسمت تعریف کنید ، اگر به تصویری که در ابتدای  آموزش برای شما قرار دادم مراجعه کنید (ساختار HTML5 ) می بینید که تمام اجزایی که در اون تصویر معرفی شده رو داریم بررسی می کنیم و باید مکان های مناسب رو که در تصویر وجود دارد رو  به خاطر بسپارید ...  و از تگ ها به موقع استفاده کنید .
تگ Section دارای زیر تگ هایی با نام های Header و  article  و footer  هستش که در جلسه بعدی درباره ی این سه تگ بیشتر توضیح خواهیم داد .

و تگ بعدی تگ side bar هستش  که برای تعریف کناره های سایت استفاده میشه  ، با استفاده از این تگ می تونید کناره های سایت خودتون رو تعریف کنید ، مثلا در سمت راست یک باکس رو به عنوان آخرین اخبار در نظر بگیرید و آخرین اخبار سایتتون رو در اونجا نمایش بدین .


معرفی aside :
<aside></aside>

ساخت بدنه سایت در HTML5

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


معرفی تگ footer :
<footer></footer>

ساخت بدنه سایت در HTML5

نتیجه گیری :
در این جلسه ساختار اصلی HTML5 رو یاد گرفتید و متوجه شدید برای تعریف اجزای مختلف صفحه باید از چه تگ هایی استفاده کنید ، اما نکته ای که باید اون رو در نظر بگیرید این هستش که اگر این تگ ها رو در Editor وارد کردید و تغییری حاصل نشد نگران نباشید چون شما دارید فعلا ساختار سایت رو تعریف می کنید برای مرتب کردن اجزای صفحه و مقدار دهی اونها باید از css استفاده کنید که در این دوره به شما CSS3 رو هم در کنار HTML5 آموزش خواهیم داد تا به صورت کاربردی این دوره رو به اتمام برسونید .



مطالب مشابه

ارسال نظر

عکس خوانده نمی‌شود





2018 © تمامی حقوق این وب‌سایت برای پیشروسافت محفوظ است.
انصراف
سوالی دارید؟ پاسخگو هستیم