#html
#وب
#آموزش
روزتون خوش 🌹
بریم به سراغ ادامه ی مباحث

دوستان در این پست قصد داریم به برسی تگ های عبارتی بپردازیم.

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

از تگ های عبارتی که قبلا برسی کردیم میتوان به موارد زیر اشاره کرد:👇

1: strong
2: em
3: mark
4: dfn
5: blockquote
6: address
7: q
8: kbd
9: abbr

و اما برسیم به یاد گیری چندین تگ عبارتی جدید 🌷

<code>
با استفاده از این تگ میتوانیم یک تکه کد (معمولا کدهای کامپیوتری) را درون یک صفحه ی وب تعریف نماییم.
در حالت عادی این تگ شکل شمایل خاصی ندارد ولی ما با استفاده از CSS میتونیم به دلخواه به این تگ استایل بدهیم .
برای مثال :

<p>Salam. Man <code>Amir</code> Hastam.</p>


<samp>
با استفاده از این تگ میتوان خروجی یک برنامه کامپیوتری را در یک صفحه وب قرار داد.
در حالت عادی این تگ شکل شمایل خاصی ندارد ولی ما با استفاده از CSS میتونیم به دلخواه به این تگ استایل بدهیم .
برای مثال :

<p>Salam. Man <samp>Amir</samp> Hastam.</p>


<var>
با استفاده از این تگ میتوان متغیر ها را در یک صفحه وب تعریف و یا ایجاد کرد.
در حالت عادی این تگ شکل شمایل خاصی ندارد ولی ما با استفاده از CSS میتونیم به دلخواه به این تگ استایل بدهیم .
برای مثال:
<var>value</var>


نکته:
دوستان شاید در حالت عادی و در ظاهر تفاوت انچنانی مابین تگ های code , var , samp , kbd مشاهده نکنید ، ببینید دوستان تفاوت اصلی این تگ ها در ماهیت و نحوه ی شناخت موتور جستجو از انها هست.
برای صفحه ی شما این خیلی بهتر خواهد بود که اگر میخواهید متغیر به کاربر نشان بدهید از تگ var و اگر میخواهید یک تکه کد نمایش بدید از تگ code و اگر میخواهید دکمه ای از صفحه کلید نمایش بدید از تگ kbd استفاده کنید.


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

<embed>
ما با استفاده از این تگ میتوانیم محتوای خارجی را در یک صفحه ی وب قرار بدیم.

به عبارتی بهتر ما با استفاده از این تگ میتوانیم فایل های Pdf یا فایل های وب (مثل html و..) یا فایل های فلش (swf.) تصاویر ، ویدئو و... را در یک صفحه وب قرار بدیم.
مهم ترین صفت های این تگ به شرح زیر است 👇

width
این صفت عرض محدوده ی تگ رو مشخص میکند.

height
این صفت ارتفاع محدوده ی تگ رو مشخص میکند.

src
با استفاده از این صفت آدرس محتوایی را که میخواهیم به صفحه وارد کنیم را مشخص میکنیم.

type
این صفت نوع رسانه محتوایی که میخواهیم وارد بکنیم را مشخص میکند.

نکته:برای قرار دادن ویدئو سعی کنید حتما و فقط از تگ video استفاده نمایید ، و همچنین برای قرار دادن آهنگ از تگ audio استفاده نمایید ، استفاده از تگ embed برای گذاشتن ویدئو و اهنگ در صفحه اصلا توصیه نمیشود.

<object>
دوستان با استفاده از این تگ میتوانیم یک شئ را از خارج صفحه با داخل صفحه وارد بکنیم.

فایل صوتی ، ویدئویی ، فایل های PDF ، فایل های فلش و حتی صفحات وب دیگر را میتوان با استفاده از این تگ درون یک صفحه وب دیگر قرار داد.
مهم ترین صفت های این تگ به شرح زیر است 👇

width
height
این دو صفت مثل صفت های تگ قبلی عرض و ارتفاع را مشخص میکنند.

data
با استفاده از این صفت آدرس محتوایی را که میخواهیم به صفحه وارد کنیم را مشخص میکنیم.

name
با این صفت میتوان یک نام برای این تگ مشخص نمود.

usemap
این صفت نام یک نقشه تصویری را مشخص میکند.

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

type
این صفت نوع رسانه محتوایی که میخواهیم وارد بکنیم را مشخص میکند.

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

نکته: دوستان حتما به نکته ای که در تگ قبلی گفتیم توجه کنید و همچنین برای قرار دادن تصاویر حتما از تگ img استفاده کنید.


تمرین یادتون نره⁦❤️⁩
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه یادگیری

<param>
با استفاده از این تگ میتوانیم یک پارامتر برای تگ object مشخص یا تعریف کنیم.
صفت های این تگ به صورت زیر است👇

⁦☘️⁩name
با استفاده از این صفت میتوانیم یک نام برای پارامتر خودمان تعریف کنیم.

☘️value
با استفاده از این صفت میتوانیم یک مقدار برای پارامتر خودمان تعریف کنیم.

مثال برای این تگ :

<object data="halo.mp3">

<param name="autoplay" value="true">

</object>


<dialog>
با استفاده از این تگ میتوانیم یک پنجره پاپ اپ ایجاد بکنیم ، این تگ تنها دارای صفت open هست که مشخص میکند پنجره پاپ اپ به صورت پیشفرض نمایش داده شود ، این تگ در حالت عادی شکل و شمایل خاصی ندارد ولی میتوان با استفاده از css انواع مختلف استایل ها را برای این تگ به کار برد و همچنین با استفاده از جاوا اسکریپت میتوان حالتی ایجاد کرد که کاربر خود مشخص کننده ی نمایش یا عدم نمایش پنجره پاپ اپ باشد.

<template>
با استفاده از این تگ میتوان محتوایی که در صفحه وجود دارد را مخفی کرد ، به صورت شیوا فرض کنید یک تگ p دارید و یک متنی رو داخل اون تگ نوشته اید ، حالا میخواهید کل محتویات اون تگ رو در سمت کاربر مخفی بکنید ، برای اینکار باید تگ p رو داخل این تگ قرار بدید.


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

<output>
با استفاده از این تگ میتوان خروجی یک عمل انجام شده مثل عمل محاسبه را در مرورگر نمایش داد.
صفت های این تگ به شرح زیر است 👇

⁦☘️for
این صفت رابطه بین نتیجه محاسبات و عناصر مورد استفاده در محاسبات را مشخص میکند.

⁩⁦☘️name
با استفاده از این صفت میتوانیم یک نام برای این عنصر تعریف بکنیم.

⁩⁦☘️⁩form
این صفت مشخص میکند که عنصر متعلق به یک یا چند فرم باشد.


<picture>
این تگ یک ظرف برای نگه داری یک یا چندین تصویر هست ، یا به عبارتی بهتر این تگ یک محفظه برای نگهداری یک یا چندین تصویر است که با استفاده از آن میتوان یک یا چندین تصویر یا عکس را در حالت های مختلف در یک صفحه وب به نمایش گذاشت.

معمولا بیشترین استفاده از این تگ برای نمایش یک یا چندین تصویر در حالت واکنش گرایی ( ریسپانسیو ) یک صفحه وب می باشد ، به اینصورت که کاربر بتواند با تغییر اندازه دادن صفحه نمایش تصاویر های مختلفی را مشاهده نماید.

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

<picture>

<source media="(min-width: 650px)" srcset="img_1.jpg">

<source media="(min-width: 465px)" srcset="img_2.jpg">

<img src="img_3.jpg">

</picture>

در مثال بالا تعریف کردیم که مثلا وقتی اندازه صفحه نمایش کمتر از ۶۵۰ پیکسل شد تصویر (img_1.jpg) را نمایش بده و وقتی اندازه کمتر از ۴۶۵ پیکسل شد تصویر (img_2.jpg) را نمایش بده.


سوالی که پیش میاد اینه که تگ img در اون وسط چیکار میکنه ؟
در جواب باید بگم اولویت نمایش تصاویر اول با تگ picture می باشد ، یعنی از ابتدا به هر اندازه که تگ source درون تگ picture وجود داشته باشد تصاویر هم نمایش داده می شوند و اولویت آخر با تگ img است.
و همچنین اگر مرورگر از تگ picture پشتیبانی نکند ، بجای اون ، تگ img نمایش داده میشود.

دوستان همانطور که در مثال بالا مشاهده میکنید ما برای تعیین تصویر از تگ source و برای تعیین اندازه صفحه از صفت media و برای نمایش تصویر در اون سایز از صفت srcset استفاده میکنیم ، دوستان اصلا نگران نحوه تعیین اندازه صفحه و حالت ریسپانسیو سازی نگران نباشید زیرا تمام این موارد رو در دوره ی جامع css برسی خواهیم کرد.


تمرین یادتون نره⁦❤️⁩
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش

روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

<wbr>
با استفاده از این تگ میتوانیم از شکسته شدن خودکار متن به سطر بعدی جلوگیری کنیم.
ببینید دوستان بصورت پیش فرض یا در حالت عادی وقتی یک کلمه طولانی باشه مرورگرها بصورت خودکار اون کلمه رو به سطر جدید پرت میکنند ولی خب ما با استفاده از این تگ میتونیم از اینکار جلوگیری کنیم.
یعنی میتونیم خودمون تعیین کنیم که کجا سطر یا کلمه مون شکسته بشه و به سطر جدید بره، پس در کل ما با استفاده از تگ wbr میتونیم شکسته شدن سطر را مدیریت کنیم.

نکته: ببینید دوستان این تگ رو با تگ br اشتباه نگیرید ، تگ br متن رو به صورت کامل میشکنه و به سطر بعدی انتقال میده ، اما تگ wbr متن رو نمیشکنه بلکه تعیین میکنه که کجا متن شکسته بشه.


<noscript>
دوستان همانطور که در پست مربوط به تگ script گفتیم ، شما میتوانید از جاوا اسکریپت داخل html استفاده بکنید.

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

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

نکته: در نسخه قبلی html این تگ حتما بایستی داخل تگ body مورد استفاده قرار می گرفت.
اما در html5 این تگ رو میتوان در قسمت head و body مورد استفاده قرار داد.



تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش
روزتون خوش 🌹
بریم سراغ ادامه ی یادگیری

دوستان در این پست قصد داریم به یادگیری دو عدد صفت کاربردی بپردازیم.


tabindex
این صفت صفتی است که ما با استفاده از آن میتوانیم یک عدد را برای کلید Tab یک عنصر که بروی صفحه کلید قرار دارد مشخص و یا تعریف نماییم ، بطور کلی بهش میگیم تب ایندکس یک عنصر.

همانطور که میدونید ما میتوانیم با فشردن کلید tab در سیستم خودمان بین نرم افزارها و برنامه ها سوییچ کنیم.

⁦☘️⁩این صفت یک عدد را به عنوان مقدار اختیار میکنه.

فرض کنید در صفحه وب خودتان 6 عدد اینپوت دارید ، هنگامی که صفحه شما بارگذاری شد اگر شما کلید tab رو فشار بدید نشانگر ماوس ابتدا روی اینپوت اولی قرار خواهد گرفت ، حال اگر بخواهید اینپوت اخر شما با اولین کلید tab نشانگر ماوس را انتخاب کند ، پس شما tabindex اون اینپوت را عدد 1 خواهید گذاشت.


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

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

این صفت دو مقدار yes , no را اختیار میکند که مقدار yes یعنی قابلیت ترجمه فراهم باشد و مقدار no یعنی عنصر ترجمه نشود.

❌ این صفت در هیچ یک از مرورگر های فعلی پشتبانی نمیشود.

از انجایی که این صفت در هیچ یک از مرورگر ها پشتیبانی نمیشود بنابراین ما باید یک نوع هک انجام دهیم و برای غیر فعال کردن قابلیت ترجمه یک عنصر به شکل زیر عمل کنیم:


<p class="notranslate">سلام</p>



تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش


روزتون خوش 🌹
بریم سراغ ادامه یادگیری


<keygen>
این تگ داخل تگ form مورد استفاده قرار میگیره و باعث میشه تا اطلاعات فرم ما با امنیت بالاتری ارسال بشه ، بطور کلی این تگ وظیفش تولید کلید عمومی و خصوصی هستش که برای رمزگذاری و رمزگشایی داده های ارسال شده به سرور در هنگام ارسال فرم و اطلاعات میباشد.

از این تگ بیشتر برای استفاده در سیستم هایی که مثلا نیاز به تایید امضای دیجیتال دارند استفاده میشود.

نکته: این تگ در برخی از مرورگر ها مثل IE به درستی کار نمیکنه.

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

این تگ صفت های زیر را اختیار میکند👇

☘️autofocus
این صفت رو در پست های قبلی با تعریف کامل و مثال اموزش دادیم ، ولی باز هم بهتره مختصرا بهش بپردازیم تا درک بهتر و راحت تری از این صفت در ذهن شما ایجاد بشه ، این صفت مشخص میکند که بلافاصله با بارگذاری صفحه اشاره گر ماوس درست روی keygen فوکوس کند.

☘️challenge
این صفت یک رشته را به همراه کلید عمومی انتقال میدهد.

☘️disabled
این صفت رو هم در پست های قبلی و بیشتر در قسمت فرم ها بهش پرداختیم ، اما بد نیست باز هم بگویم که استفاده از این صفت باعث غیر فعال سازی تگ موردنظر میشود.

☘️form
این صفت مشخص میکند که داده های این تگ به یک یا چندین فرم ارسال شود.

☘️keytype
این صفت نوع الگوریتم رمزگذاری رو مشخص میکند و سه مقدار rsa , dsa , ec را اختیار میکند.

☘️name
این صفت رو هم در گذشته یه کرات برسی کردیم و میدانیم که یک نام برای تگ مورنظرمون ایجاد و اعمال میکنه.


یک مثال برای این تگ:
<form action="demo_keygen.php" method="get">

<keygen name="mykey" keytype="RSA">

<input type="text" name="user-name">

<input type="submit" value="send">

</form>


تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

#html
#وب
#آموزش



روزتون خوش 🌹
بریم سراغ ادامه ی مباحث

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

صفت هایی که این تگ اختیار میکند به شرح زیر است👇

☘️default
این صفت مشخص میکند که فایل track بصورت پیش فرض با اجرای فایل رسانه نمایش داده شود.

☘️kind
این صفت نوع متن رسانه را مشخص میکند و این مقادیر رو اختیار میکند: caption , chapters , descriptions , metadata , subtitles

برای فایل زیر نویس بایستی مقدار subtitles رو قرار بدید.

☘️label
این صفت یک عنوان برای track مشخص میکند.

src
این صفت مسیر و ادرس فایل track رو مشخص میکند.
این صفت اجباری است.

☘️srclang
کد زبان متنی فایل track را مشخص میکند.
کد زبان فارسی fa میباشد.

نکته: فایل زیر نویس شما حتما باید از فرمت vtt باشد ، نه از فرمت srt .

مثال از این تگ:
<video width="400" height="300" controls>

<source src="video/hi.mp4" type="video/mp4">

<track src="files/subtitle.vtt" kind="subtitles" srclang="fa" label="سلام" default>

</video>

این سایت میتونه زیر نویس از نوع srt را به یک زیر نویس با فرمت vtt تبدیل کنه.


<time>
این تگ همونطور که از اسمش هم مشخصه تگی است که با استفاده از آن میتوان یک تایم (زمان) را در یک صفحه وب ایجاد و یا تعریف کرد.

این زمان یا تایم ، هم میتواند توسط انسان ها و هم توسط ربات ها یا ماشین های خواننده تفسیر و خواندن شود.

مهم ترین صفت این تگ به شرح زیر است 👇

☘️datetime
با استفاده از این صفت میتوان زمان یا تاریخ دقیق عمل انجام یک کار را مشخص کرد.

مثال از این تگ:
<p>
My BirthDay Is <time datetime="1900-10-22">Here</time>
</p>


مثال دوم:

<p>We open at <time>12:00</time> every morning.</p>

<p>I have a date on <time datetime="2018-02-14 20:00">Valentines day</time>.</p>


<canvas>
تگ canvas تگی است در واقع همانند یک ظرف برای نگهداری اشکال گرافیکی ، که این اشکال گرافیکی معمولا توسط اسکریپت ها (جاوا اسکریپت) ایجاد می شوند.
دوستان از انجایی که این تگ نیاز به بلد بودن جاوا اسکریپت داره ، بنابراین بعد از یادگیری جاوا اسکریپت کاملا یه دوره اموزشی مجزا برای این تگ قرار خواهیم داد.



تمرین یادتون نره⁦❤️⁩

——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

سگمنت کانالی برای برنامه نویسان عزیز

😍پر از فیلم های آموزشی (رایگان)😍
😍 لایسنس های رایگان nod32😍
😍اموزش تخصصی html 😍
😍 فیلترشکن های قدرتمند 😍
😍 موسیقی های آرام‌بخش برای تمرکز😍
@segmenttt
😍 فیلم های اموزشی java😍
😍 فیلم های اموزشی JavaScript 😍
😍 اخبار تکنولوژی و فناوری های روز😍
😍ترفند های موبایل و کامپیوتر 😍
😍جزوات دانشگاهی رشته نرم افزار😍
😍سورس کد های باز 😍
😍 دوره جامع php 😍
😍 آموزش صفر تا صد c# 😍
😍 آموزش کامل زبان C😍
😍 آموزش بهینه سازی سایت seo 😍
😍 اموزش برنامه نویسی کاتلین 😍
😍انجام پروژه های دانشجویی 😍
😍و هزاران ترفند ها و دانستنی های رشته کامپیوتر و it😍

با سگمنت
متفاوت بیندیش،
بی حد و مرز،
جلوتر از دیگران حرکت کن
(انجام طراحی سایت ، تولید محتوا ،سئو ،طراحی گرافیک ، برنامه نویسی سی شارپ)


——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
🌐 www.segmentt.ir

برای دریافت اموزش ها لطفا به کانال اصلی ما بپیوندید
@segmenttt
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
@computer4

برای دریافت ادامه اموزش ها لطفا به کانال اصلی ما بپیوندید
https://t.me/segmenttt
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
@computer4

برای دریافت ادامه اموزش ها لطفا به کانال اصلی ما بپیوندید
https://t.me/segmenttt
——————————————
👁‍🗨با فروارد کردن پست های چنل از ما حمایت کنید 👁‍🗨
@segmenttt
@computer4