location_on تهران ، خیابان آزادی خیابان شهیدان (روبروی مترو حبیب اله ) برج زیتون local_phone 66073800 021
بازگشت به لیست مقالات » | شنبه 15 آبان 1395 در ساعت 20 : 20 دقیقه | نظرات کاربران ( 0 )
آموزش HTML درس سوم

آموزش html   درس سوم :

در جلسات قبل در مورد html  و روش ایجاد یک سند html  و نحوه ی اجرای آن صحبت کردیم . سپس در مورد تگ های اصلی html  و تگ Head  و تگ title و.... نیز مثال زدیم . در این درس با سایر تگ ها آشنا خواهیم شد

تگ body    :

این تگ در تمامی سند های html  نقش بسیار مهمی را دارد . نام این تگ به فارسی بدنه می باشد . یعنی طاهر اصلی سایت و تمامی تگ ها درون این تگ قرار خواهند گرفت .

<DOCTYPE html!>

  <html>

   <head></head>

        <body>

        </body>

  </html>

 

این تگ در بر گیرنده ی تمامی تگ هاییست که میخواهند در سایت ما نمایش داده شوند . بنابراین به منظور چیدمان مرتب و داشتن قالبی مشخص از این به بعد تمامی تگ ها را درون تگ Body  قرار خواهیم داد .

تگ p  : این تگ نمایانگر ایجاد پاراگراف میباشد . هر زمان ما متنی را درون یک تگ پی قرار دهیم آنرا به عنوان یک پاراگراف در نظر خواهد گرفت . در مثال زیر بیشتر با این موضوع آشنا خواهید شد .

 

<DOCTYPE html!>

  <html>

    <head></head>

     <body>

          <h1> عنوان اصلی سایت </h1>

          <h2> عنوان سایت با تگ اچ2 </h2>

          <p>این یک تگ پی می باشد . تگ های پی شبیه به پاراگراف عمل کرده و متن ها را پشت سر هم و با فاصله ی معین و اندازه ی فونت مشخص نمایش میدهند .</p>

</body>

  </html>

 

 

با اجرای سند اچ تی ام ال بالا مرورگر برای ما اینگون به نمایش در خواهد آمد :

 

عنوان اصلی سایت

عنوان سایت با تگ اچ2

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

 

 

نکته مهم : تگ های html بصورت کلی دو نوع می باشند : inline level   و  block level

در مقاله تفاوت تگ های inline level  با  block level در HTMLبا این موضوع بیشتر آشنا خواهید شد .

اما بصورت کلی باید بگوییم که تگ های inline level  بخشی از یک سطر را در بر خواهد گرفت اما تگ های block level  تمامی سطر را در بر میگیرند . به عنوان مثال تگ h1  یک تگ block level  می باشد . یعنی زمانی که یک تگ h1 در یک سطر قرار میگیرد سایر تگ ها به ترتیب در زیر این تگ قرار خواهند گرفت و این تگ اجازه نمیدهد تگ های دیگر در کنارش قرار بگیرند .

مثال : اگر 2 تگ h1  در کنار یکدیگر قرار بگیرند به دلیل blocl level  بودن بصورت زیر نمایش داده خواهند شد اما تگ span  یک تگ  inline level  میباشد و در صورتی که در کنار یکدیگر نوشته شوند تا زمانی که آن خط کامل نشوند به خط بعد نخواهند رفت در مثال زیر کامل تر درک خواهد شد :

 

<DOCTYPE html!> 

  <html>

    <head></head>

    <body>

         <h1> عنوان اصلی سایت </h1> 

         <h1> عنوان سایت با تگ اچ2 </h1> 

         <span> اولین پاراگراف من </span> <span> دومین  پاراگراف من </span> 

    </body>

  </html>

 

 

با اجرای سند html  بالا مرورگر بصورت زیر برای ما نمایش خواهد داد :

 

 

عنوان اصلی سایت

عنوان اصلی سایت 2

اولین پاراگراف من دومین پاراگراف من

 

 

 

همانطور که در مثال بالا مشاهده نمودید تگ های h1  در کنار یکدیگر قرار داشتند اما چون بلاک لول بودند اجازه ی قرار گرفتن در کنار یکدیگر را نداشته و تگ h1   بعدی بصورت خودکار در زیر تگ قبلی خود قرار گرفت اما تگ span  به دلیل inline level  بودن در کنار یکدیگر قرار گرفتند .

نکته : در آموزش پیشرفته ی html  و در آموزش های بعدی طریقه ی در کنار هم قرار گرفتن تگ های blok level   را بازگو خواهیم کرد .

 

در آموزش بعدی شما را با تگ a و تگ  div و ویژگیهای آن آشنا خواهیم ساخت .

با INT   همراه باشید .

 

 

chat_bubble_outline ارسال نظر

عنوان نظر :
نام شما :
ایمیل :
آخرین مطالب
آموزش HTML  - کاراکترهای رزرو شده

آموزش HTML - کاراکترهای رزرو شده

آموزش HTML  - کاراکترهای رزرو شده یکسری از کارکتر ها و علائم در html  وجود دارند که به تنهایی نمیتوانند در داخل صفحات  html قرار گیرند و ممکن است حتی در کیبرد کامپیوتر ها وجود نداشته ب ...

آموزش html  -  جاوا اسکریپت

آموزش html - جاوا اسکریپت

آموزش html  -  جاوا اسکریپت تگ script  در html  : این تگ به منظور برنامه نویسی سمت کاربر مانند جاوا اسکریپت  javascript  مورد استفاده قرار میگیرد . عنصر <script > ...

آموزش html  تگ head

آموزش html تگ head

 آموزش html  تگ head عنصر head  یکی از مهمترین تگ های html  می باشد که تگ های اساسی و اصلی سایت را در خود جای میدهد . عناصری که درون تگ head  قرار میگیرند میتوانند شامل اسکری ...

expand_less