post

آموزش HTML – بخش چهار (ویژگی تگ ها)

تا الان علاوه بر شناخت کلی HTML و آشنایی با تگ ها ، یه صفحه HTML ساده هم ساختیم، اما از استفاده بعضی از تگ ها مثل <img> و  <a> به دلیل ویژگی های خاصی که داشتن صرف نظر کردیم، امروز میخوایم این دو تگ  رو تشریح کنیم و هرآنچه که قبل از ورود به CSS باید باهاش آشنایی داشته باشیم رو بیان کنیم و بعد بریم به سراغ CSS و هر دو مبحث HTML  و CSS رو با هم به پیش ببریم؛ پس در ادامه با من همراه باشید.

پیش گفتار

کار کردن با تگ هایی مانند <p> و <h1> و… به نسبت سایر تگ ها آسون تره، (چرا؟) چون تنها یک مقدار نیاز دارن، (یعنی چی؟) یعنی وقتی از تگ <h1> یا <p> استفاده می کنیم فقط به یه عنوان متنی و یا پاراگراف متنی نیاز داریم ؛ همین و بس.

اما استفاده از تگ های <img> و <a> پیچیده تره، برای مثال میخوایم از تگ <a> برای نشان دادن لینک استفاده کنیم، به چه چیزهایی نیاز داریم؟ اول به یک متن یا عنوان نیاز داریم تا لینک روی اون سوار بشه و دوم هم به یه لینک (این دو ویژگی جزو حداقل نیازهای تگ <a> هست). تگ <img> هم همینطوره که در بخش بعدی به طور مفصل دربارش صحبت می کنیم.

ساختار کلی تگ ها

میخوام یه قانون کلی درباره تگ ها بهتون یاد بدم؛ همون طور که تا الان متوجه شدیم، اکثر تگ ها حداقل ۳ بخش دارند:

  • تگ آغاز
  • متن (که ما بین دو تگ قرار می گیره)
  • تگ پایانی

تمام ویژگی ها و پارامترهایی که برای تگ ها بهتون یاد میدم، همگی درون تگ آغازین قرار میگیره و با سایر بخش ها (متن و تگ پایانی) هیچ کاری نداریم. این قانون رو برای همیشه بخاطر بسپارید.

ویژگی های تگ <a>

مهمترین ویژگی ها یا پارامترهای ورودی تگ <a> عبارت اند از :

  • href : آدرس لینک مورد نظر
  • target : نوع باز شدن لینک (در پنجره جدید، زبانه جدید، زیبانه فعلی و …)
  • title : عنوان لینک (برای زمانی که نشانگر ماوس روی لینک قرار میگیره)
  • id : اختصاص یک آیدی منحصر به فرد به لینک جهت استایل دهی به لینک (در CSS کاربرد داره) و گاها هم برای پرش از قسمتی به قسمت دیگه (اون سایتهایی که روی یه لینک کلیک می کنین و یهو صفحه بالا یا پایین میره و روی یه قسمت خاص متوقف میشه).
  • class : کاربردی مشابه آیدی داره، اما یک مفهوم عمومی تر محسوب میشه.(در CSS به طور کامل توضیح میدم).

نحوه به کار بردن ویژگی ها در تگ <a>

با توجه به قانون کلی که گفتم و ویژگی های بالا، ساختار کلی تگ <a> بصورت زیر خواهد بود:

<a href=”http://link.com” title=”link test” id=”link3″ target=”_blank” > عنوان لینک </a>

نکات آموزشی

– برای مقدار دهی به هر پارامتر بعد از اون پارامتر از علامت = استفاده می کنیم و مقدار اون پارامتر رو داخل “” وارد می کنیم.

– ترتیب پارامترهای ورودی اهمیت چندانی نداره.

– id و class معمولا بطور همزمان بکار نمیرن، مگر در موارد معدود که واقعا نیاز باشه.

– title میتونه بصورت فارسی هم بکار بره.

– فاصله در بین پارامترها مهم نیست و فقط کافیه حداقل یه فاصله رو بینشون قرار بدین (چیزی که خودم اون اوایل خیلی درگیرش بودم که دقیقا عین مثالها فاصله و … رو رعایت کنم، اما اصلا نیازی نیست پس راحت باشید)

 

ویژگی های تگ <img>

مهمترین ویژگی ها یا پارامترهای ورودی تگ <img> عبارت اند از :

  • src : آدرس تصویر مورد نظر
  • alt : عنوان عکس (برای وقتایی که عکس لود نمیشه، عنوان به نمایش در میاد تا کاربر متوجه بشه تصویر درباره چیه؛ نقش بسیار مهمی در سئوی وبسایت ایفا می کنه).
  • id : اختصاص یک آیدی منحصر به فرد به لینک جهت استایل دهی به لینک (در CSS کاربرد داره).
  • class : کاربردی مشابه آیدی داره، اما یک مفهوم عمومی تر محسوب میشه.(در CSS به طور کامل توضیح میدم).

نحوه به کار بردن ویژگی ها در تگ <img>

با توجه به قانون کلی که گفتم و ویژگی های بالا، ساختار کلی تگ <img> بصورت زیر خواهد بود:

<img src=”http://link.com/mypicture.jpg” alt=” عنوان عکس” class=”big-images”>

نکات آموزشی

– همونطور که می بینید تگ <img> تک قسمتیه و جزو اسنثنائات ما محسوب میشه (تگ <img> و تگ <br/> رو همیشه بخاطر بسپارید، چون از قوانین خاص خودشون پیروی می کنن )

– ویژگی های دیگه ای مثل طول و عرض و … هم برای این تگ وجود داره، اما چون استایل د دهی داخلی (در CSS  کامل توضیح میدم یعنی چی) محسوب میشه، ما ازش صرف نظر می کنیم.

 

جمع بندی

فکر می کنم همین قدر از HTML برای شروع CSS کافی باشه، منتظر یه شروع طوفانی با CSS باشید، چون که اگه همین چیزایی رو که تا الان بهتون آموزش دادم رو به خوبی یاد گرفتین به جرات میتونم بگم بیش از ۸۰ درصد HTML رو بلدین و از این به بعد میخوایم وارد طراحی قالب بشیم و اون ۱۰-۲۰ درصد پایانی با آزمون و خطا و تجربه بدست میاد؛ پس با من و مدرسه کوچک تیتکا همراه باشید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *