جلسه ششم : آشنایی با تگ های کاربردی HTML

جلسه ششم : آشنایی با تگ های کاربردی HTML

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

تگ <div> :

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

<div>
اینجا شما می توانید سایت خود را به صورت مشخص بخش بندی کنید
</div>

نکته : این تگ <div> از نوع تگ های Block می باشد و این تگ inline نیست و یعنی هر وقت که بخواهیم از آن استفاده کنیم می توانید و کل عرض مرورگر را نیز میگیرد و به عبارتی اگر که شما سه بار تگ <div> را پشت سر هم بنویسید محتوایشان هم زیر هم نمایش داده می شود نه در کنار یک دیگر و در مورد تگ های inline و Block بعد با یک دیگر صحبت خواهیم کرد و در ضمن تگ div یک نوع تگ بسته می باشد

تگ های عنوان یا تیتر نویسی

همانطور که می دانید ما برای اینکه بتوانیم در سایت خود از تیتر نویسی استفاده کنیم باید از تگ های H1 تا تگ های H6 در سایت خود استفاده کنیم و این تگ ها کد های زیر می باشد که به راحتی می توانید در سایت خود از این نوع تگ ها استفاده کنید

<h1>به میهن آکادمی خوش آمدید</h1>
<h2>به میهن آکادمی خوش آمدید</h2>
<h3>به میهن آکادمی خوش آمدید</h3>
<h4>به میهن آکادمی خوش آمدید</h4>
<h5>به میهن آکادمی خوش آمدید</h5>
<h6>به میهن آکادمی خوش آمدید</h6>

همانطور که مشاهده می کنید در تگ های h بالا که از h1 شروع شده است به معنای بزرگ ترین می باشد و h6 به معنای کوچک ترین تگ هدینگ می باشد و شما می توانید از این تگ ها در سایت خود استفاده کنید و این تگ ها از h1 تا h6 بر دیگری قلبیت دارند ، نکته ای که باید در نظر داشته باشید مانند تگ div یک نوع بلاک هستند که به صورت زیر هم دیگر قرار میگیرند و این هم به یاد داشته باشید که این نوع تگ های هدینگ از نوع تگ های بسته می باشد.

تگ <p> :

خب رسیدیم به تگ p یعنی تگی که در تمامی سایت شما در مقاله ها به کار گرفته می شود و می توانیم با استفاده از این تگ که به سایت خود اضافه می کنیم بخش عمده ای از هر پست سایت را همین تگ P نمایش می دهد و شما می توانید با مرورگر خود در قسمت inspect تمامی کد های P استفاده شده را ببنید تا متوجه موضوع و اهمیت این تگ شوید مانند کد زیر

<p>به میهن آکادمی خوش آمدید در این قسمت شما با تگ p آشنا می شوید</p>

نکته ای که تگ p دارد این است که انواع کد های Block می باشد و حالا شما بگویید که از نوع تگ های Block یعنی چی … و راستی صد البته که تگ p از نوع تگ های بسته می باشد

تگ <img> :

رفیق، تگ img تو HTML مثل این می‌مونه که بخوای یه قاب عکس خوشگل بذاری تو سایتت. با این تگ می‌تونی هر عکسی که دلت بخواد رو به صفحه وب‌ت اضافه کنی. حالا بریم سراغ یه سری چیز میز مهم که باید درباره‌ش بدونی:

src (آدرس عکس) : این مثل اینه که آدرس دقیق خونه‌ی عکست رو بدی به مرورگر تا بدونه از کجا باید پیداش کنه. مثلاً می‌تونی بگی src="images/my_pic.jpg".

alt (متن جایگزین) : این خیلی باحاله! فرض کن یه روزی اینترنت قطع شه یا به هر دلیلی عکسِت لود نشه. اینجا alt میاد به دادت می‌رسه و یه متن نشون می‌ده که بگه عکس چی بوده. تازه، این برای سئو هم خیلی مهمه، پس الکی رد نشو ازش! می‌تونی یه چیزی مثل alt=”عکس پروفایل من” بنویسی.

title (عنوان عکس): اینم یه جورایی باحاله. وقتی موس رو می‌بری روی عکس، یه متن کوچولو نشون می‌ده که عنوان عکس رو توضیح می‌ده. مثلاً title=”یه عکس خفن از تعطیلات”

width و height (عرض و ارتفاع) : با این دو تا می‌تونی سایز عکست رو تو صفحه وب تعیین کنی. مثلاً width=”500″ یعنی عرض عکس ۵۰۰ پیکسل باشه.

حالا در قسمت زیر به شما یک نمونه کدی را قرار می دهیم که می توانید در سایت خود به این شکل از کد استفاده کنید :

<img src="https://mihanacademy.org/test.png" alt="متن جایگزین تصویر که می تواند فارسی هم باشد"title="عنوان عکس که می تواند فارسی هم باشد" width="عرض تصویر"height="ارتفاع تصویر">

خب این هم از آشنایی با کد های اصلی و کاربردی HTML که می توانید این کد ها را در فایل html خود استفاده کنید و بنویسید و تکرار کنید تا به خوبی در ذهن شما به خوبی ماندگار باشد تا جلسه بعدی کد نویسی در میهن آکادمی منتظر ما باشید …

موفق و پیروز باشید.