sina salehifard 01 اردیبهشت 1393 بدون نظر 9555 بازدید آموزش HTML
فیلم آموزشی آشنایی با تگ های div-span و صفات id-class در html

آیا می دانید استفاده از تگ table برای طراحی ساختار اصلی وب سایت دیگر کاربردی ندارد و یک اصول کدنویسی غیراستاندارد است؟ تگ div یک جایگزین مناسب برای تگ table می باشد.

همان طور که می دانید زبان html دارای دو گروه تگ عمومی و اختصاصی است. تگ های اختصاصی مانند تگ a, p, ul و تگ های عمومی مانند تگ span, div. ما شما را با دو تگ عمومی div و span آشنا خواهیم کرد و به شما خواهیم آموخت که چگونه با تگ div ساختار صفحه خود را مشخص کنید.

در یکی از فـیلم های آموزشـی، صفات در html را برای شما توضـیح دادیم. در آنجا بیـان کردیم که صـفت ها به دو دسـته کلی تقســیم می شوند، یکسری صفات مخصوص بعضی تگ ها هستند، مانند صفت href برای تگ a و یکسری صفات عمومی هستند و برای تمامی تگ ها به کار می روند. ما در این فیلم آموزشی دو نوع از پرکاربردترین صفات عمومی class و id را برای شما توضیح خواهیم داد.

آنچه در این فیلم آموزشی خواهید آموخت :

  • بیان تفاوت تگ های span و div
  • توضیح کاربرد تگ div و span در html
  • بیان تفاوت صفات id و class
  • توضیح کاربردهای صفات id و class در html
  • بیان مثال کاربردی برای استفاده از  div, span, id, class در کدهای html

فیلم آموزشی آشنایی با تگ های div-span و صفات id-class در html

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

متن فیلم آموزشی آشنایی با تگ های div-span و صفات id-class در html

تگ های عمومی

همانطور که می دانید هر تگ در html وظیفه نشانه گذاری قسمت خاصی را بر عهده دارد. زبان html دارای دو گروه تگ عمومی و اختصاصی است. تگ های اختصاصی مانند تگ a (نشانه گذاری لینک)، p (نشانه گذاری پاراگراف)، ul (نشانه گذاری لیست ها) و تگ های عمومی مانند تگ span, div.

از این دو تگ برای تقسیم صفحه یا بخش بخش کردن صفحه وب خود میتوانید استفاده کنید. نوشتن آن به صورت زیر است:


<div >this is div </div>
<span>this is span</span>

تفاوت تگ span و تگ div در inline و block level بودن آن ها است.

div

 

span

از تگ span برای محتواهای کوچک تر و از تگ div برای نمایش محتواهای بزرگتر یا نمایش یک قسمت از صفحه سایت خود استفاده کنید.

صفات در html

attribute ها (صفات) در html به دو دسته تقسیم می شوند:

یک سری attribute را فقط می توان برای تگ های خاص استفاده کرد به عنوان مثال:


<a href="#">tag a</a>

صفت href را می توان فقط برای تگ a استفاده کرد و نمی توان برای Div یا img و… استفاده کرد.

دسته دوم صفاتی هستند که می توان برای تمام تگ ها استفاده کرد، مانند صفات id و class. به وسیله این صفات ما میتوانیم صفحه را با نام دلخواه نشانه گذاری کنیم و در css با نامی که انتخاب کردیم به آن اشاره کنیم و ویژگی هایی را بر روی تگ اعمال کنیم .

تفاوت id وclass

صفتId به معنی این است که من فقط یک تگ با این خصوصیات دارم و بیش از یک تگ نمی تواند یک آیدی با همان نام بگیرد اما از صفت class می توان چندین بار استفاده کرد و تگ ها با خصوصیت آن باشند.می توان چند عنصر با کلاس یکسان تعریف کرد.

به عنوان مثال:


<div id="gallery">

<div class=" gallery-item"></div>

<div class=" gallery-item"></div>

<div class=" gallery-item"></div>

<div class=" gallery-item"></div>

</div>

ما فقط یک گالری داریم اما شامل چندین تگ که کلاس مثل هم دارند.

فرض کنیم میخواهیم یک گالری دیگر هم ایجاد کنیم باید :


<div id="gallery">

<div class=" gallery-item"></div>

<div class=" gallery-item"></div>

<div class=" gallery-item"></div>

<div class=" gallery-item"></div>

</div>

<div id="gallery2">

<div class=" gallery-item"></div>

<div class=" gallery-item"></div>

<div class=" gallery-item"></div>

<div class=" gallery-item"></div>

</div>

همان طور که گفتیم فقط می توان id را برای یک تگ دانست پس دومی را گالری 2 می نویسیم اما می توان تگ ها با کلاس مثل قبلی گذاشت و هر چقدر بخواهیم از آن استفاده کنیم.

مثال در سایت آنلاینر:

logoon

مافقط یک لوگو داریم پس از id استفاده کرده ایم.

picon

در قسمت جدیدترین های فروشگاه، از class استفاده کرده ایم زیرا تمام عناصر شبیه هم هستند.( اندازه و..)

دسترسی سریع :

دیدگاه ها بسته شده اند.