دوره مقدماتی آموزش HTML و CSS | قسمت سوم – تگ های حیاتی HTML
- موضوع : HTML
- تاریخ : 1399/09/05
- مجموع پسند شده : 0
- بازدید : 723

خب امروز به سراغ تگ های حیاتی HTML رفته ایم و با این تگ های مهم آشنا خواهیم شد.
در این جلسه به بررسی تگهای a, br , div و img خواهیم پرداخت و با attribute ها در html آشنا خواهیم شد.
attribute ها در تگ های HTML
attributes یا ویژگی های تگ به ما این امکان را می دهند که امکان مدیریت بهتر تگ ها را داشته باشیم.
در برخی تگ ها نوع تگ را مشخص می کنیم در برخی ؛ مقادیر مورد نیاز را به تگ تعریف می کنیم و … .
توجه : در ویژگی های تگ ها ، میتوانیم ویژگی ها دلخواه هم قرار بدهیم مثل test-attr , … . اینگونه خاصیت ها بیشتر در کار با جاوا اسکریپت خیلی به دردمون میخورن.
خاصیت تگ رو بایستی به صورت زیر تعریف کنیم :
۱ | <tag attribute1 attribute2 …></tag> |
اگر دقت داشته باشید هر خاصیت را با یک فاصله از هم تعریف کرده ایم. به مثال زیر توجه کنید :
۱ | <h1 class=”title” id=”sitetitle”>Webstand.ir</h1> |
ما در اینجا یک تگ h1 با دو خاصیت کلاس و آی دی با مقادیر title و sitetitle ایجاد کرده ایم.
در جلسات آینده بررسی بیشتری درباره attribute ها و نوع انها خواهیم داشت.
جهت آشنایی بیشتر با خاصیت های تگ ها به لینک زیر مراجعه کنید :
حالا بهتره بریم سراغ سری دیگر از تگ های اصلی HTML .
تگ a از تگ های حیاتی HTML
این تگ برای لینک دهی می باشد و با آن میتوان صفحه ای را به صفحه دیگر پیوند داد.
به عبارتی با کلیک بر روی محتوای این تگ کاربر وارد صفحه جدیدی می شود البته آدرس صفحه جدید را باید درون خاصیت href تگ نوشت.
۱ | <a href=" https://www.webstand.ir"> وبسایت اموزش برنامه نویسی </a> |
میتوانید درون href تگ a ، آدرس ایمیل , لوکیشن و سایر چیزهایی که url دارند بنویسید.
نکته : در صورتی که میخواهید با کلیک بر روی تگ a برنامه ارسال ایمیل اجرا شود بایستی خاصیت href تگ a را به شکل زیر تعریف کنید:
۱ | <a href="mailto:yourmail@email.com">ایمیل ما</a> |
به جای yourmail@email.com آدرس ایمیل مورد نظر خود را وارد نمایید.
نکته : در صورتی که می خواهید به شماره تماس لینک دهی کنید و کاربر هنگام کلیک بر روی لینک با پیغام تماس رو به رو شود از تگ a به صورت زیر استفاده نمایید :
۱ | <a href="tel:09111111111">۰۹۱۱۱۱۱۱۱۱۱ تماس بگیرید!</a> |
نکته : در صورتی که بخواهید هنگام کلیک بر روی تگ a نرم افزار خاصی اجرا شود بایستی از تگ به صورت زیر استفاده نمایید :
۱ | <a href="skype:<username>?<action>">ارسال پیام در اسکایپ</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 برای سئو سایت شما بسیار مهم و ضروری است. و یکی از شاخصه های مهم سئو در صفحات وب به شمار می رود.
۱ | <img src="https://webstand.ir/images/image.jpg " alt=" عکس سایت وب استند" heght="۳۰۰px" width="۳۰۰px"> |
نکته : همواره به تصویر خود طول و عرض خاصی بدهید در صورت انجام ندادن این کار تصویر با طول و عرض پیشفرض خود روی صفحه شما بارگذاری میشود.
خب تگ های حیاتی HTML رو هم خدمتتون معرفی کردیم و امیدواریم براتون مفید واقع شده باشه.
لطفا جهت بالا بردن سطح کیفیت آموزش ها از قسمت “آیا این مقاله برای شما مفید بود ؟” نظر خود را نسبت به محتوای این آموزش اعلام کنید.
آیا این مقاله برای شما مفید بود ؟
نظر شما کاربر محترم در مورد این مقاله برای ما بسیار اهمیت دارد و ما را در ارائه مقالات مفید دیگر کمک خواهد کرد.
عضویت در خبرنامه
جهت دریافت جدیدترین مطالب در ایمیل خود ، در خبرنامه وب استند عضو شوید.
خیالتان راحت هیچگونه ایمیل تبلیغاتی ارسال نخواهد شد!