تماس با ما درباه با ما درخواست پروژه
خوراک سایت
با ۶ تگ و خاصیت جالب در HTML برای طراحی صفحات وب آشنا شویم

با ۶ تگ و خاصیت جالب در HTML برای طراحی صفحات وب آشنا شویم

توی این پست قصد دارم چند نکته جذاب در مورد HTML و تگ های اون با شما در میون بزارم که می تونید در هنگام ایجاد صفحات با HTML از اونها استفاده کنید و خوب احتمالا با خیلی از این تگ ها و attribute ها تا حالا آشنا نشدین

همونطور که می دونیم HTML مخفف "HyperText Markup Language" است که به فارسی به "زبان نشانه‌گذاری ابرمتن" معنی شده هست.

HTML در اوایل دهه ۱۹۹۰ میلادی توسط تیم برنز-لی بر میگرده که نسخه اولیه اون تو سال ۱۹۹۱ معرفی شد و به سرعت به عنوان یه استاندارد برای ساخت صفحات وب تبدیل شد.

HTML یک زبان استاندارد برای ایجاد و طراحی صفحات وب هست و به توسعه‌دهندگان وب این امکان رو میده که ساختار صفحات وب رو تعریف کنن. در HTML، عناصر مختلف مانند متن، لینک‌ها، تصاویر و سایر محتویات از طریق برچسب‌ها (tags) نشانه‌گذاری میشن.

توی این پست قصد دارم چند نکته جذاب در مورد HTML و تگ های اون با شما در میون بزارم که می تونید در هنگام ایجاد صفحات با HTML از اونها استفاده کنید و خوب احتمالا با خیلی از این تگ ها و attribute ها تا حالا آشنا نشدین پس تا انتهای این مطلب با من همراه باشید :)

 

ایجاد لینک های تماس با ما:

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

 

<!-- Email link -->
<a href="mailto:[email protected]"> Send Email </a>

<!-- Phone call link -->
<a href="tel:+1234567890"> Call Us </a>

<!-- SMS link -->
<a href="sms:+1234567890"> Send SMS </a>

 

استفاده از تصویر پوستر برای ویدیو های سایت:

شما در HTML میتوانید با استفاده از attribute (poster( یک تصویر را نمایش دهید تا زمانی که کاربر روی ویدیو کلیک کنید این تصویر نمایش داده خواهد شد. اینکار به  ویدیو های توی صفحه نمای بهتری میده.

شما می تونید بصورت زیر خاصیت poster رو به تگ video اضاف کنید:

<video controls poster="image.png" width="500">
  <source src="video.mp4" type="video/mp4 />
</video>

 

تعریف URL پایه برای لینک های  وابسته:

شما می توانید با استفاده از تگ <base> یک URL پایه برای همه ی آدرس های یک صفحه ایجاد کنید. این کار علاوه بر تمیز بودن کد باعث بارگیری آسانتر منابع نیز می شود.

برای نمونه کد زیر را ببینید:

 

<head>
   <base href="https://pishroapp.net" target="_blank" />
</head>
<body>
   <a href="/blog">Blogs</a>
   <a href="/contact">Contact</a>
</body>

 

با تعریف تگ base در هدر سایت می توانید به سادگی ادرس های وابسته به آدرس base را بصورت بالا استفاده کنید.

 

Managing Translation :

شما میتونید با استفاده از خاصیت translate تعیین کنید که آیا محتوای element مورد نظر توسط گوگل ترجمه شود یا خیر

<p translate="no">
  This text should not be translated.
</p>

متن بالا توسط گوگل ترجمه نخواهد شد.

 

ویرایش محتوا:

با استفاده از خاصیت contenteditable می توانید تعیین کنید که آیا محتوای یک عنصر مشخص قابل ویرایش هست یا خیر. این خاصیت به کاربران شما اجازه می ده تا محتوای درون عنصر را تغییر بدن. این خاصیت برای زمانی مفید هست که میخواید به کاربر دسترسی تغییر بخشی از متن رو بدین یا ساخت فرم های inline و... با ترکیب این خاصیت با js میتونید استفاده کنید و تغییرات را در سمت سرور ذخیره کنید

 

<div contenteditable="true">
   You can edit this content.
</div>

 

بررسی انتخاب نوع فایل:

شما می توانید با استفاده از خاصیت accept در عنصر input تنها اجازه انتخاب شدن نوع خاصی از فایل که در سمت سرور نیز قابل پذیرش رو به کاربر بدین.

برای نمونه کد زیر تنها اجازه انتخاب تصاویر png , jpge رو میده

<input type="file" accept="image/png, image/jpeg" />

 

ایجاد بخش های Collapsible:

با استفاده از تگ های <details> و <summary>  می تونید محتوای پنهان ایجاد کنید که کاربر با کلیک روی یک متن، متن کامل رو ببینه.

متن کوتاه یا همون خلاصه ی چیزی که کاربر باید روی اون کلیک کنه توی  <summary> قرار می گیره و متن اصلی توی <details> قرار می گیره. بصورت زیر:

<details>
  <summary>what is pishroapp?</summary>
  <p>It is a best programming website :)</p>
</details>

 

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

شما هم اگه تگ یا خاصیت جذابی بیاد دارید می تونید از بخش نظرات ارسال کنید که همه ما بیشتر آشنا بشیم.

 


برچسب ها:

html تگ های html تگ چیست آموزش html html5 html چیست

دسته بندی ها:

آموزش html و css

ارسال نظر

برای اطلاع از پاسخ به نظر شما می توانید ایمیل یا شماره موبایل خود را وارد نمایید. *

ایمیل و شماره موبایل شما کاملا مخفی خواهد ماند و در سایت نمایش داده نخواهد شد. *

اگر نظری برای این مطلب ارسال شد از طریق ایمیل مرا اطلاع بده!
لسیت نظرات
هنوز برای این مطلب نظری ارسال نشده است!