خانه / آموزش ها / آموزش HTML / آشنایی با تگ های div-span و صفات id-class
تگ div و span

آشنایی با تگ های div-span و صفات id-class

الف: آشنایی با تگ های div-span

ب: صفات id-class

ج: آشنایی با تگ های قالب بندی متن pre و code

 

 

الف: آشنایی با تگ های div-span و صفات id-class

تگ <div> که مخفف کلمه <divison>  بمعنای (بخش ، قسمت) می باشد.

در صورتی که صفحه وبی را به قسمت های مختلفی تقسیم کنیم به سادگی قادر خواهیم بود به هر یک از قسمت های ایجاد شده یک سبک (style) جداگانه ای اعمال کنیم.

در گذشته برای طراحی یک صفحه وب ما در ابتداء با استفاده از تگ table  صفحه مورد نظر را تقسیم بندی می کردیم مثالا یک با استفاده از تگtable  یک جدول برای قسمت هدر سایت طراحی می کردیم و برای قسمت body یک جدول کلی در نظر می گرفتیم و برای هریک از side bar ها نیز یک جدول قرار می دادیم و بهمین ترتیب تا انتهای کار پیش می رفتیم ولی در حال حاضر با استفاده از تگ div به تقسیم بندی صفحات می پردازیم و ساختار اصلی صفحه وب را  تعیین می کنیم.

و همچنین تگ <div> برای گروه بندی عناصر بلوک استفاده می شود تا بتوان آن ها را با  CSS  فرمت دهی کرد.

نکات:

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

هر بخش یک المان block level به حساب می آید و محتویات آن بطور خودکار از ابتدای خط جدید آغاز می شود.

 

تگ span در صفحات وب کاربردهای خاصی دارد و مانند تگ Lable عمل می کند.تگ span می تواند بخشی از یک نوشته را نشانه گذاری کند.از تگ span برای تقسیم بندی متون موجود استفاده می شود با استفاده از این خاصیت می توان به هر قسمت از متن ویژگی های خاصی را اعمال کرد.

برای نمایش دکمه های صفحه به صفحه، برجسته کردن (highlight) بخشی از یک متن به فرض در هنگام جستجو و… کاربرد دارد.

<html>

<head>
</head>
<body>
<p>this <span style=”color:red”>is a</span> paragraph.</p>
</body>

</html>

نتیجه :

this is a paragraph.

نکته: div  و span کارایی مشابه به یکدیگر دارند فقط div برای دسته بندی سایر المان های HTML استفاده می شود در حالی که span برای دسته بندی متن استفاده می شود.

نکته: از p و div می شود به جای هم استفاده کرد ولی بهترین کاربرد p برای پاراگرافهاست و بهترین کاربرد div برای جدا کردن یه بخش از بقیه بخشها و دادن یه خاصیت خاص به آن است.

 

دو صفت  class و id :

طریقه نامگذاری إلمان ها:

در html می توان به إلمانهای مورد نظر خود نام دلخواهی را نسبت دهیم.

البته این نام می تواند منحصر به فرد باشد و یا اینکه یک نام را برای چند المان در نظر گیریم و آنها را دسته بندی کنیم به عنوان مثال وقتی چندین إلمان مختلف را در یک گروه قرار می دهیم به راحتی می توانیم یک Style را به آنها إعمال کنیم.

حال با استفاده از صفت id یک شناسه منحصر به فرد برای یک عنصر HTML  مشخص می کنیم. و استفاده از چند آی دی هم نام در یک صفحه مجاز نیست. و با استفاده از صفت class می توانیم بصورت گروهی دسته بندی کنیم

در صورتیکه بخواهیم نام یک إلمان را تعیین نماییم در تگ باز مربوط به إلمان عبارتی را به این صورت id=”name”  تایپ می کنیم که در این عبارت به جای name نام دلخواه خودرا برای إلمان تایپ می کنیم .

در صورتی که بخواهیم إلمان ها را گروه بندی کنیم در تگ باز مربوط به إلمان مورد نظر عبارتی را به صورت class=”name” تایپ کرده که به جای name نام کلاس یا گروه مورد نظر راتایپ  می کنیم . البته باید توجه داشت که مقدار خصوصیتclass دو یا چند إلمان را می توانیم به طور یکسان تعیین کنیم.

مثال :

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

P.black{

Color:black

}

p.red{

color:red

}

در مرحله بعد باید برای هر پاراگرافی که می خواهیم به  رنگ مشکی باشد از شناسه class=”black” و برای پاراگراف قرمز از شناسه class=”red” استفاده می کنیم.

نکته: در نوشتن استایل می توان از نوشتن نام تگ چشم پوشی کرد، ولی استایل مورد نظر برروی تمام تگ های که کلاس هم نام دارند تاثیر می گذارد. مثال ؛

.center{

textalign:center

}

نکته :برای تگ فقط می توان یک id  نوشت ولی می توان برای تگ بیش از یک کلاس تعریف کرد اما نباید لفظ class را دو بار تکرار کرد بلکه باید در یک شناسه class  نام دو کلاس را با یک فاصله وارد کرد. مثال:

<p class=”red center”>  content </p>

نکته: در css برای id ها  از علامت # و برای کلاس از علامت نقطه استفاده  می شود .

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

<div id=”gallery”>

<div class=” gallery-item”><img src=”image.url”/> </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>

نکته: تعیین خصوصیات برای class  و id مورد نظر اجباری نیست و می توان قرار نداد.

ب: آشنایی با تگ های قالب بندی متن pre و codeو kbd و samp

در هنگام مشاهده سایت متون را غالبا با یکی از دو فونت ، عادی و mono spaced می بینیم که در فونت عادی فاصله بین کاراکترها به صورت نسبی تعیین می شود و در فونت mono ، حروف بیشتر شبیه به حروف ماشین تایپ می شوند.

فونت های mono معمولا یکی از فونت های time  و courier می باشند. فونت mono  برای جلب توجه بیننده است مانند متونی که از متون دیگر جدا می باشند و یا مانند کدهای کامپیوتری، البته فونت mono زیبا نیست.

برای استفاده از فونت mono باید از إلمان tt که مخفف عبارت type write به معنای ماشین تحریر است گرفته شده، البته می توان از إلمان های codeو kbd و samp نیز استفاده کرد مثلا

          </tt> متن مورد نظر <tt>     

یا

</kbd>  متن مورد نظر<kbd>

یا

</code>  متن مورد نظر<code>

<pre>

با استفاده از این تگ می توانید متن خود را همان طور که آنرا در کدنویسی نوشته اید، نمایش دهید یعنی همانطور که می دانیم، مرورگرها فاصله موجود در متن را نادیده می گیرند و اندازه متن را به صورت خودکار و برحسب اندازه پنجره ای که در آن نمایش داده می شوند تعیین می کنند و برای حفظ فاصله و تعداد خطوط می توان متن را به صورت preformatted  یا از پیش فرمت شده تبدیل کرد، برای اینکار از تگ <pre> استفاده می شود  .
مثلا  اگر شما در متن خود از چند space استفاده کرده اید ولی مرورگر فقط یکی از آنها را نمایش می دهد و یا با استفاده از enter به خط بعد رفته اید اما مرورگر به آن توجهی نمی کند، اما اگر متن را در داخل این تگ بنویسید متن دقیقا همان طوری که نوشته اید به نمایش در می آید.

بطور خلاصه می توان گفت که تگ pre ، متن تنظیم نشده را تعریف می کند

<pre>
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

نکته :در طراحی سایت ، تگ <code> را می توان در داخل یک تگ <pre> قرار داد.

 

درباره ی حسینعلی جانی نژاد

با سلام خدمت دوستان عزیز، فارغ التحصیل رشته IT هستم و در زمینه برنامه نویسی وب و طراحی سایت فعالیت می کنم.

پاسخ دهید