آموزش ساخت بدنه سایت

معرفی :

با عرض سلام ادب و احترام خدمت شما کاربران محترم سایت دوست داشتنی ilikephp.ir  به جلسه سوم  Html5 خوش آمدید .

هدف جلسه :

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

شروع آموزش :

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

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

معرفی تگ HEADER :

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

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

<header></header>

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

<header> 
</h1>آموزش اچ تی ام ال 5 - مدرس : عباس حبیبی<h1>               
 </header>

 تگ NAV  یا  NAVIGATION BAR :

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

<nav></nav>

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

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

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

معرفی تگ SECTION  :

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

<section></section>

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

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

معرفی ASIDE :

<aside></aside>

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

معرفی تگ FOOTER :

<footer></footer>

نتیجه گیری:

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

ممنون از اینکه همراه ما بودید
دوره های مارو به دوستانتان معرفی کنید
دوستدار شما : عباس حبیبی
سوالات خود را از ما بپرسید ...