دوره مقدماتی آموزش HTML و CSS | قسمت سوم – تگ های حیاتی HTML

خب امروز به سراغ تگ های حیاتی HTML رفته ایم و با این تگ های مهم آشنا خواهیم شد.

در این جلسه به بررسی تگهای a, br , div و img خواهیم پرداخت و با attribute ها در html آشنا خواهیم شد.

attribute ها در تگ های HTML

attributes یا ویژگی های تگ به ما این امکان را می دهند که امکان مدیریت بهتر تگ ها را داشته باشیم.

در برخی تگ ها نوع تگ را مشخص می کنیم در برخی ؛ مقادیر مورد نیاز را به تگ تعریف می کنیم  و … .

توجه : در ویژگی های تگ ها ، میتوانیم ویژگی ها دلخواه هم قرار بدهیم مثل test-attr , … . اینگونه خاصیت ها بیشتر در کار با جاوا اسکریپت خیلی به دردمون میخورن.

خاصیت تگ رو بایستی به صورت زیر تعریف کنیم :

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

ما در اینجا یک تگ h1 با دو خاصیت کلاس و آی دی با مقادیر title و sitetitle ایجاد کرده ایم.

در جلسات آینده بررسی بیشتری درباره attribute  ها و نوع انها خواهیم داشت.

جهت آشنایی بیشتر با خاصیت های تگ ها به لینک زیر مراجعه کنید :

html attributes

حالا بهتره بریم سراغ سری دیگر از تگ های اصلی HTML .

تگ a از تگ های حیاتی HTML

این تگ برای لینک دهی می باشد و با آن میتوان صفحه ای را به صفحه دیگر پیوند داد.

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

میتوانید درون href  تگ a  ،  آدرس ایمیل , لوکیشن و سایر چیزهایی که url  دارند بنویسید.

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

به جای yourmail@email.com آدرس ایمیل مورد نظر خود را وارد نمایید.

نکته : در صورتی که می خواهید به شماره تماس لینک دهی کنید و کاربر هنگام کلیک بر روی لینک با پیغام تماس رو به رو شود از تگ a به صورت زیر استفاده نمایید :

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

در این حالت بایستی ابتدا نام نرم افزار مورد نظر را وارد کنید سپس مقادیر لازم را قرار دهید.

البته نسبت به هر نرم افزار این قسمت متفاوته و بایستی این مقادیر رو در اینترنت جستجو کنید.

تگ br در HTML

این تگ باعث شکستن خط میشود و تگ هایی که بعد از این تگ نوشته میشوند به خط بعدی انتقال داده می شوند. این تگ در واقع کار دکمه Enter را انجام می دهد.

نکته : این تگ برای نوشتن شعرها و آدرس بسیار کاربردی میباشد.

توجه : تگ br  یک تگ تکی یا تنها میباشد و هیچ نوع محتوایی درون آن قرار نمیگیرد  که این نوع تگها را Empty elements  (المنتهای خالی) مینامند.

تگ div از تگ های حیاتی HTML

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

division در انگلیسی معانی مختلفی دارد ولی معنی آن در html  < بخش یا قسمت > می باشد.

از آنجا که هر سایت از بخش های مختلفی تشکیل  شده است پس بالطبع باید از div های زیادی در سایت استفاده شود.

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

همچنین تا زمانی که به آن استایلی ندهید هیچ تاثیر خاصی بر روی تگ ها و محتوای درونش نخواهد داشت.

می توان گفت تگ div از تگ های حیاتی HTML به حساب میاد و یک صفحه وب با این تگ بیشتر ساخته می شود.

تگ img در HTML

این تگ هم مانند تگbr  یک تگ تکی میباشد و برای بارگذاری تصاویر روی صفحات وب استفاده می شود .

نکته : تصاویر به صورت دستی یا عملی در یک صفحه وب درج نمی شوند بلکه این تصاویر به صفحات وب پیوند داده می شوند.

تگ img یک نگهدارنده برای تصاویر پیوند داده شده می باشد.

به این منظور که ما آدرس اینترنتی تصویر مورد نظر را به تگ img تعریف میکنیم و این تگ با استفاده از آن آدرس ، عکس را به کاربران نشان می دهد.

این تگ دو attribute  اساسی دارد :

• Src  : درون این attribute  آدرس تصویر وارد میشود (حتما فرمت تصویر را در انتهای آدرس وارد کنید).
• Alt :در صورتی که مشکلی در بارگذاری تصویر ایجاد شود و تصویر به هر دلیلی روی صفحه نمایش داده نشود محتوای درون این attribute بارگذاری خواهد شد.

توجه : نوشتن خاصیت alt  برای سئو سایت شما بسیار مهم و ضروری است. و یکی از شاخصه های مهم سئو در صفحات وب به شمار می رود.

نکته : همواره به تصویر خود طول و عرض خاصی بدهید  در صورت انجام ندادن این کار  تصویر با طول و عرض پیشفرض خود روی صفحه شما بارگذاری میشود.

خب تگ های حیاتی HTML رو هم خدمتتون معرفی کردیم و امیدواریم براتون مفید واقع شده باشه.

لطفا جهت بالا بردن سطح کیفیت آموزش ها از قسمت “آیا این مقاله برای شما مفید بود ؟” نظر خود را نسبت به محتوای این آموزش اعلام کنید.