جلسه ی هشتم : تگ های جامع HTML

تگ های جامع HTMLدر این جلسه می خواهیم به معرفی تگ هایی که بیشترین کاربرد را در زمینه ی طراحی سایت دارند بپردازیم به نوعی می خواهیم دررون مایه ی زبان HTML را معرفی کنیم زیرا بدون این تگ ها نمی توانیم یک وب سایت خوب بسازیم. (برای دیدن آموزش Html به زبان ساده کلیک کنید )

تگ های HTML

تگ DIV

تگ div مهم ترین و پرکاربرد ترین تگ در طراحی وب سایت می باشد به نوعی طراحی یک وب سایت بدون این تگ غیر ممکن است . اگر یادتان باشد در جلسه ی پنجم از طراحی سایت در مورد اضافه کردن یک کلاس به یک تگ صحبت نمودیم. حال سوال این است اگر تعدادی تگ کنار هم داشته باشیم که نیاز به کلاس دادن داشته باشند چه می کنیم ؟؟؟

راه حل اول ( راه حل مبتدیا ) :

اولین راه این می باشد که به تمامی تگ ها کلاس مورد نظر خود را اضافه کنیم که با این کار حجم کد ها زیاد شده و سایت ما سنگین می شود این اولین مهمترین ایراد می باشد.

راه حل دوم ( راه حل حرفه ای ها  ) :

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


<div class="محتوای شما<"اسم کلاس</div>


اهمیت تگ div

به طور کلی اگر می خواهید به اهمیت تگ div پی ببیرد کافیست بر روی همین صفحه ی سایت راست کلیک نموده و بر روی آخرین گزینه کلیک نمایید ( Inspect ) کلیک نمایید تا کد های سایت را مشاهده کنید در آنجا می توانید به تعداد دفعاتی که از تگ div استفاده شده نگاه کنید و به اهمیت این تگ پی ببرید .
نکته : می توانید از کلید های ctrl+shift+i برای دیدن کد های یک وب سایت نیز استفاده کنید .

تگ p

اگر یادتان باشد در آموزش قبلی در مورد Heading ها و نحوه ی استفاده از آن ها صحبت کردیم و گفتیم که برای ایجاد یک جمله یا یک پاراگراف از از این تگ ها استفاده نمی کنیم . ( برای دیدن آموزش مورد نظر کلیک کنید )

چگونه از تگ p استفاده کنیم  ؟؟؟

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


<h1>این خط سر فصل می باشد</h1>


<p>این خط یک پاراگراف می باشد</p> 

خروجی کد بالا :

تگ های جامع HTML

اطلاعات بیشتر

همانطور که گفتیم تگ p از نوع تگ های دوتایی می باشد یعنی دارای تگ بسته می باشد اما این تگ می تواند بدون تگ بسته ی خود نیز کار کند یعنی نیازی به آن ندارد ، به نمونه کد زیر توجه کنید :


<h1>این خط سر فصل می باشد</h1>


<p>این خط یک پاراگراف می باشد
<p>این خط یک پاراگراف می باشد

خروجی کد بالا :

تگ های h1 و p

نکته : بهتر است از تگ بسته ی p نیز استفاده کنید زیر امکان ترکیب تگ p با بقیه ی تگ ها وجود دارد که در این صورت نتیجه ی مورد نظر نتیجه ی مورد قبول ما نخواهد بود ( حتما استفاده کنید چون در یک متن امکان ترکیب آن با Heading ها بسیار بالا می باشد )

تگ br

تگ br مانند دکمه Enter در نرم افزار word عمل می کند و یک خط فاصله ایجاد می کند. برای فهم بیشتر آموزش تگ br از یک مثال استفاده کنیم ، به نمونه کد زیر توجه کنید :


<h1>این خط سر فصل می باشد</h1>


<p>این

پاراگراف دارای فواصل

زیاد بین کلمات        و

چندین خط       می باشد</p>


خروجی کد بالا :
تگ های جامع HTML

همانطور که مشاهده می کنید فواصل بین کلمات و تغییر خطوط در خروجی کد ظاهر نمی شوند و فقط به اندازه ی یک حرف از یک دیگر فاصله دارند .

چگونه از تگ br استفاده کنیم ؟

معمولا از تگ br به صورت تکی خیلی کم استفاده می کنیم از این تگ بیشتر به صورت ترکیبی با تگ p استفاده می کنیم برای فهم بیشتر به مثال زیر توجه کنید :


<h1>این خط سر فصل می باشد</h1>


<p>این پاراگراف از اینجا <br>
دارای تغییر خط می باشد</p>

خروجی کد بالا :
تگ h1 ،تگ p ،تگ br ،

تگ a

از تگ a برای اضافه کردن لینک در وب سایت خود استفاده می کنیم حال این لینک می تواند به یک متن یا عکس یا هر چیز دیگری در وب سایت ما اضافه شده باشد . تگ a درای attribute ( ویژگی ) های بسیاری می باشد اما مهم ترین و پر کاربرد ترین attribute این تگ attribute href می باشد .

Attribute href

این ویژگی اصلی ترین ویژگی تگ a می باشد ( بدون این ویژگی تگ a هیچ ارزشی ندارد😐 ) . همانطور که گفتیم از تگ a برای اضافه کردن لینک به وب سایت خود اضافه می کنیم اما نگفتیم که این تگ را کجا قرار می دهیم .
ادرس مورد نظر خود را کپی می نماییم و آن را مقابل ویژگی href قرار می دهیم ، برای اینکه نحوه ی استفاده از تگ a را متوجه شوید به مثال زیر توجه کنید :

<a href="لینک مورد نظر ما"> این متن دارای لینک می باشد</a>

خروجی کد بالا :
تگ های جامع HTML

در همین متن کافیست به بالاتر رفته و به مبحث تگ p نگاهی بیاندازید در بند اول از این قسمت از آموزش در آخر خط یک متن وجود دارد که یک لینک به آن اضافه شده است .

تگ span

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

<span></span>

تگ Strong

کلمه ی strong در لغت به معنای قوی می باشد همانطور که از اسم این تگ پیداست کار آن قدرت بخشیدن به متن ما می باشد . از تگ strong برای برجسته نمودن ( bold ) استفاده می شود .
نکته : تگ strong از نوع تگ های دسته ی اول است یعنی دارای دو قسمت باز و بسته می باشد .

<strong></strong>

تاثیر تگ strong بر سئو

برجسته نمودن کلمات فقط برای زیبایی نمی باشد بلکه بر بهینه سازی سایت نیز تاثیر مثبت دارد برای مثال در همین متن کلمه ی تگ Strong به صورت برجسته شده می باشد اما یادتان باشد در این زمینه نباید زیاده روی کنید برای مثال یک پاراگراف نباید برجسته شود زیرا از لحاظ بهینه سازی تاثیر منفی می گذارد .
عموما برجسته سازی برای کلمات مهم در توضیحات و نوشته های ما می باشند ، این کار باعث می شود که این کلمات برای ربات های جست و جو گر گوگل مهم تر شود و دارای ارزش بسیار زیادی باشد . پس لطفا کلمات یا جملات بی ارزش را برجسته ننمایید .

چرا نباید کل سایت را درون تگ strong قرار دهیم ؟؟

شاید به فکر شما هم خطور کرده باشد که کل سایت خود را داخل تگ strong قرار دهید و تمام سایت خود را برای ربات های گوگل مهم کنید اما با این کار سایت خود را از بین می برید ( شاید ربات باشن ولی احمق نیستن 😉 ) زیرا ربات های گوگل شما را اسپم می نامند ( هرزنامه ) و تمام نتایج سایت شما را پاک می کنند و در کل سایت شما از بین می رود .
مثال ترکیبی از تگ های p و strong :

<p>این قسمت از متن ما <strong>برجسته </strong>شده است</p>

خروجی کد بالا :
تگ های جامع HTML

خلاصه مطلب :

۱- تگ div مهم ترین و پرکاربرد ترین تگ در طراحی وب سایت و بدون این تگ نمی توانیم سایت خود را بسازیم .
۲- از تگ div برای کلاس دادن به یک دسته کد استفاده می کنیم .
۳- از تگ p برای ایجاد یک جمله یا یک پاراگراف استفاده می کنیم .
۴- می توانیم از تگ بسته ی p استفاده نکنیم اما بهتر است که از آن استفاده شود تا با کد های دیگر ترکیب نشود .
۵- تگ br مانند دکمه Enter در نرم افزار word عمل می کند و یک خط فاصله ایجاد می کند.
۶- از تگ br بیشتر به صورت ترکیبی با تگ p استفاده می کنیم .
۷- از تگ a برای اضافه کردن لینک در وب سایت خود استفاده می کنیم .
۸- مهم ترین و پر کاربرد ترین ویژگی تگ a ویژگی href می باشد .
۹- تگ span تگ های ریزی می باشند که کاربرد های بسیار زیادی دارند .
۱۰- از تگ strong برای برجسته نمودن ( bold ) استفاده می شود .
۱۱- تمامی تگ هایی که در باتلا نام بردیم از نوع تگ های دوتایی می باشند . ( هم تگ باز دارند هم تگ بسته )

ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها