آموزش HTML5 معرفی و کار بر روی section در پروژه

1396/3/26 عباس حبیبی 1583

html5 section

معرفی :

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

 

هدف جلسه :

 

این جلسه قرار هست که بر روی یک قسمت مهم که  Section هست در پروژه کار کنیم و کمی اطلاعات در پروژه اضافه کنیم تا انتهای این آموزش با ما باشید ...

 

شروع آموزش :

 

خب در این جلسه قصد داریم که Main Body سایت رو باهم درست کنیم ، همانطور که در جلسات پیش مشاهده کردید یک ساختار کلی سایت رو باهم از صفر تا صد بررسی کردیم و این جلسه قصد داریم در قسمت اصلی سایت شروع به کد زدن بکنیم ...

 

برای اینکار در ابتدا داخل تگ section  باید یک تگی رو قرار بدیم با نام article به صورت زیر :

 

<section>

         <article>
         </article>

</section>

 

 

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

 

<article>

      <header>

      <h1>Php Wit Us | Ilikephp.ir Group </h1>

      <h2>Php Wit Us | Ilikephp.ir Group </h2>

      </header>

       <P>ILIKEPHP.IR | PROGRAMMING </P>

</article>

 

خب اگر دقت کرده باشید در کد بالا از دو تگ h1,h2 استفاده کردیم که می توانیم آنها را در تگ دیگری به نام hgroup قرار دهیم به صورت زیر :

 

<article>

      <header>

       <hgroup>

      <h1>Php Wit Us | Ilikephp.ir Group </h1>

      <h2>Php Wit Us | Ilikephp.ir Group </h2>

       </hgroup>



         <P>ILIKEPHP.IR | PROGRAMMING </P>

</header>

</article>

کاری که hgroup  انجام میده این هستش که ما به مرورگر می فهمانیم که تگ هایی که داخل hgroup قرار گرفته اند تگ های title و subtitle ما نیستند و یک تگ مجزا هستند . که بینهات تگ می توانیم داخل hgroup  بنویسیم .

 

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

 

<article>

      <header>

      <hgroup>

      <h1>Php Wit Us | Ilikephp.ir Group </h1>

      <h2>Php Wit Us | Ilikephp.ir Group </h2>

       </hgroup>



</header>

         <P>ILIKEPHP.IR | PROGRAMMING </P>

<footer>

        <p> HTML5 tutorial With : Abbas Habibi In Ilikephp.ir </p>

</footer>

</article>

 

خب پس footer رو هم باهم ساختیم اما نکته ای که باید در نظر داشته باشید این هستش که شما می تونید بیش از یک تگ article  در پروژه هاتون داشته باشید و دقت کنید که تگ p درون body باید قرار بگیره یعنی ما بین تگ های footer و header که در جلسات آتی بیشتر در مورد نحوه قرارگیری کدها و عناصر در صفحات صحبت خواهیم کرد .

 

نتیجه گیری:

 

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

ممنون از اینکه همراه ما بودید

دوره های مارو به دوستانتان معرفی کنید

دوستدار شما : عباس حبیبی

سوالات خود را از ما بپرسید ... 

عباس حبیبی
کارشناس سئو و بازاریابی اینترنتی
متخصص سئو و بهینه سازی سایت
بازاریابی اینترنتی
مشاور راه اندازی کسب و کار اینترنتی
برنامه نویسی و طراحی وب