آموزش HTML5 - جلسه پنجم
آموزش HTML5 – جلسه پنجم

با عرض سلبام خدمت شما کاربران آی وحید

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

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

توجه داشته باشین خصوصیات برای تگ های مختلف تفاوت داره که به تناسب هر تگ کدنویسی میشه و برخی تگ ها هم از خصوصیات پشتیبانی نمیکتن یعنی خصوصیات خاصی ندارن!

خاصیت های تگ های HTML

تگ های HTML میتونه خاصیت هایی متناسب با خودش رو قبول کنه.

خاصیت ها به تگ های HTML اطلاعات جدید اضافه میکنه.

خاصیت ها همیشه در اولین تگ کدنویسی میشن و در تگ پایان کدنویسی نمیشن. به مثال زیر توجه کنید:

<a href="https://ivahid.com" title="iVahid"></a>

خاصیت ها با یک نام خاصیت و با مقدارش کدنویسی میشه و فرمول کلی هم اینه: name=”value” به مثال زیر توجه کنید:

<tagname name="value"></tagname>

 خاصیت lang

خاصیت lang در تگ <html> استفاده می شود. این خاصیت در واقع زبان سند HTML شما رو مشخص میکنه. این خاصیت که در تگ <html> کدنویسی می شود برای سئو(موتورهای جستجو) و برخی اپ های دیگر مهم است و از همین ابتدا حتما در تمرینات خود از این خاصیت را بنویسید. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

در مثال بالا زبان سند HTML ما انگلیسی کدنویسی می شود اما از آنجا که ما فارسی زبان هستیم میتوانیم برای زبان فارسی از خاصیت fa-IR استفاده کنیم.

خاصیت title

خاصیت title برای اضافه کردن عنوان به تگ ها استفاده میشه. از این خاصیت میشه در تگ هایی مثل <a>, <p>, <img  و… اضافه کرد. برای نمونه در مثال زیر متن “About iVahid” برای تگ <p> عنوان این تگ کدنویسی شده است. اینم مثال:

<p title="About iVahid">
iVahid is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>

 خاصیت href

اگر از اولین جلسه با ما همراه هستین میدونین که برای لینک دادن از تگ <a> استفاده میشه. اما آدرس پیوند رو با استفاده از خاصیت href اضافه کنیم. بازم یه مثال میزنم:

<a href="https://ivahid.com">This is a link</a>

 خاصیت size

تصاویر و عکس ها رو با استفاده از تگ <img> کدنویسی میکنیم. این تگ میتونه خاصیت های منبع یا همون سورس رو و هم چنین سایز یا همون اندازه رو اضافه کرد.  برای روشن تر شدن موضوع به مثال زیر توجه کنید:

<img src="ivahid.jpg" width="104" height="142">

توجه داشته باشید برای اضافه کردن سایز از خاصیت height برای ارتفاع و خاصیت width برای عرض کدنویسی میکنیم. هم چنین واحدهای ارتفاع و عرض پیکسل می باشد.

خاصیت alt

خاصیت alt رو میتونیم به تگ <img> اضافه کنیم. در واقع کار این تگ یه توضیح متنی برای تصویر هست. شاید برای شما هم اتفاق بیفته که تصویری تو یکی از سایت ها براتون لود نشه و متنی نمایش داده میشه که به دلیل کم کاری های مدیران سایت معمولا نام تصویر با حروف انگلیسی هست. در واقع اون متن همون متنی هست که با خاصیت alt به تگ <img> اضافه میشه.

اینم مثال این خاصیت:

<img src="ivahid.jpg" alt="iVahid.com" width="104" height="142">

 پیشنهاد ما به کدنویسان مبتدی!

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

– همیشه و همیشه از حروف کوچک برای کدنویسی خاصیت ها استفاده کنید و هیچ گاه از حروف بزرگ استفاده نکنید زیرا زمانی که برنامه نویس حرفه ای خواهید شد و کد هاتون از مرز یه میلیون خواهد گذشت در موقع تایپ میبینید که تایپ و کدنویسی حروف کوچک راحت تر و سریع تر هست.

هم چنین استاندارد جهانی وب نیز استفاده و کدنویسی بر اساس حروف کوچک هست پس جهانی و استاندارد کدنویسی کنید!

خاصیت ها بدون علامت ها؟!

در HTML5 می توانید خاصیت ها را بدون علامت بنویسید پس می تونید امتحان کنید و به مثال زیر توجه کنید:

<a href=https://www.ivahid.com>

همونطور که دیدین خاصیت href رو بدون علامت های “” کدنویسی کردیم.

دو علامت یا یکی؟!

کدنویسی دوعلامتی یا همون “” بیشتر بین کدنویسان مطرح است اما تفاوت چندانی ندارن. هم چنین این دو علامت میتونه شامل یک دیگر هم بشن. برای روشن تر شدن موضوع به مثال های زیر توجه کنید:

<p title='John "ShotGun" Nelson'>

یا

<p title="John 'ShotGun' Nelson">

خب کدنویسان محترم خسته نباشین. برای این جلسه کافی هست. با تشکر – آی وحید.