تگ های details و summary در HTML 🖐
🔴 برای ایجاد محتوای قابل‌گسترش (collapsible content) استفاده می‌شن که به کاربر اجازه می‌دن با کلیک روی یک عنوان، محتوای مخفی رو ببینن. بریم سراغ جزئیات:تگ <details>این تگ برای تعریف یک بخش از محتوا استفاده میشه که میتونه باز یا بسته بشه.
⭐️ تگ <summary>این تگ داخل <details> قرار می‌گیره و عنوانی رو که کاربر روش کلیک میکنه، مشخص میکنه.مثالفرض کنیم میخوایم اطلاعات بیشتری درباره‌ی یه موضوع نشون بدیم، اما نمی‌خوایم همیشه تمام اطلاعات نمایش داده بشن. از این تگ‌ها استفاده می‌کنیم:
#html #summary #details
☕️ @CodeExplore
<details>
<summary>بیشتر بدانید</summary>
<p>این محتوای اضافی است که کاربر می‌تواند با کلیک روی "بیشتر بدانید" مشاهده کند.</p>
</details>
#html #summary #details
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡12❤🔥4🔥3
کداکسپلور | CodeExplore
➕ تگ progress
تگ progress یک نوار پیشرفت را برای نشان دادن میزان تکمیل یک کار یا فرآیند ایجاد میکنه. این تگ یک عنصر بلوک هست و میتونه در هر مکانی در سند HTML قرار بگیره
تگ progress یک نوار پیشرفت را برای نشان دادن میزان تکمیل یک کار یا فرآیند ایجاد میکنه. این تگ یک عنصر بلوک هست و میتونه در هر مکانی در سند HTML قرار بگیره
تگ <progress> در HTML 🖐
💥 برای نمایش پیشرفت یک کار خاص مثل آپلود یک فایل یا تکمیل یک وظیفه استفاده میشه. این تگ به صورت بومی توسط مرورگر پشتیبانی میشه و به طور خودکار یک نوار پیشرفت ایجاد میکنه. بریم سراغ جزئیات بیشتر:
✅ توضیحات value: مقدار فعلی پیشرفت کار رو نشون می‌ده. در این مثال، پیشرفت 50 است.
✅ توضیحات max: حداکثر مقدار پیشرفت رو تعیین میکنه. در این مثال، حداکثر مقدار 100 است.
✅ محتوای داخل تگ: متنی که بین تگ‌های <progress> قرار می‌گیره، در صورتی که مرورگر نتونه نوار پیشرفت رو به درستی نمایش بده، به عنوان متن جایگزین نمایش داده میشه.
✅ برچسب (Label): با استفاده از تگ <label> می‌تونی توضیحی درباره نوار پیشرفت بدی.
✅ اتصال به تگ <progress>: با استفاده از خاصیت for در تگ <label> و خاصیت id در تگ <progress> می‌تونی این دو رو به هم مرتبط کنی.
#html #progress
☕️ @CodeExplore
<label for="file">پیشرفت دانلود فایل:</label>
<progress id="file" value="32" max="100">32%</progress>
#html #progress
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡6🔥3❤🔥1
تگ <time> در HTML 🖐
☄️ این تگ برای اینه که وقتی داریم توی سایتمون یه تاریخ یا زمان رو نشون میدیم، مرورگر و موتورهای جستجو دقیقاً بفهمن که داریم راجع به چی صحبت می‌کنیم. مثلا، اگه یه مقاله نوشتیم و میخوایم تاریخ انتشارش رو نشون بدیم، یا میخوایم بگیم یه رویداد کی برگزار میشه، از این تگ استفاده می‌کنیم.
❓ مثال: فرض کنیم میخوایم تاریخ یه رویدادی رو بنویسیم...
◀️ اینجا داریم به مرورگر می‌گیم که این "27 ژوئن 2024، ساعت 10:00" یه تاریخ و زمان خاصه. این خیلی کمک میکنه که مرورگر بفهمه این یه زمان مهمه و موتورهای جستجو هم راحت‌تر می‌تونن این اطلاعات رو پیدا کنن.
✅ کجاها می‌تونیم ازش استفاده کنیم؟
1⃣ وقتی توی سایت بلاگ می‌نویسیم و میخوایم تاریخ انتشار مقاله‌هامون رو نشون بدیم.
🔢 اگه سایتی داریم که رویدادها رو معرفی میکنه و میخوایم زمان شروع و پایان رویدادها رو بنویسیم.
🔢 یا حتی وقتی یه تایم‌لاین داریم و میخوایم بگیم هر اتفاقی کی افتاده.
#html #time
☕️ @CodeExplore
<p>آغاز رویداد: <time datetime="2024-06-27T10:00:00">27 ژوئن 2024، ساعت 10:00</time></p>
#html #time
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18⚡2❤🔥2
تگ <figcaption> و <figure> در HTML 🖐
💻 تگ
⚡️ استفاده از
❓ مثال:
#html #figure #figcaption
☕️ @CodeExplore
<figcaption> به عنوان توضیح یا عنوان برای محتوای داخل تگ <figure> عمل میکنه. این تگ معمولاً مستقیماً بعد از تگ <figure> قرار می‌گیره و توضیحاتی درباره تصویر یا محتوای دیگر ارائه می‌ده.<figure> و <figcaption> باعث میشه که توضیحات و محتوای تصویری به صورت معنادار و سازمان‌یافته در HTML نمایش داده بشه و این ساختار برای دسترس‌پذیری و بهینه‌سازی موتورهای جستجو (SEO) هم مفیده.<figure>
<img src="image.jpg" alt="A beautiful scenery">
<figcaption>A beautiful scenery in the mountains.</figcaption>
</figure>
#html #figure #figcaption
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡11❤🔥5🔥5
استفاده از چند فایل در HTML 🖐
💎 احتمالا تا حالا از اینپوت فایل توی HTML استفاده کردین، و دیدین که فقط یک فایل رو میشه انتخاب کرد، این دو اتریبیوت مشکلتون رو حل میکنه:
#html #mutliple #file
☕️ @CodeExplore
<input name="my_files[]" type="file" multiple enctype="multipart/form-data" >
#html #mutliple #file
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥14⚡3🔥3
پارگراف با قابلیت ادیت در HTML 🖐
میدونستین میتونین توی html ، پاراگراف قابل ویرایش(توسط کاربر) داشته باشین؟
به این شکل:
#html #p
☕️ @CodeExplore
میدونستین میتونین توی html ، پاراگراف قابل ویرایش(توسط کاربر) داشته باشین؟
به این شکل:
<p contenteditable="true">
CodeExplore
</p>
#html #p
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡20❤🔥6🔥1😁1
چجوری از html5 استفاده نکنیم؟ 🖐
😠 بیاین فرض کنیم شما کنجکاویتون گل کرده و میخواین از html های قدیمی تری استفاده کنید، مثلا html4.01 ، خب برای اینکه ازین ورژن استفاده کنید این کد رو خط اول فایلتون مینویسید:
⚠️ نکته قابل توجه اینه که با اینکار ساختار کدتون آنچنان فرقی نباید بکنه، ولی هر چی عقب تر برید، امکاناتتون کمتر میشه،عوضش روی مرورگر های بیشتری سایتتون پشتیبانی میشه!
✔️ میتونید از اینجا بیشتر بخونید.
#html
☕️ @CodeExplore
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
#html
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥13⚡3🔥2💔2
لینک بی عمل در جاوااسکریپت ✌️
⚡️ با این کد میتونید یک لینک درست کنید که دقیقا هیچکاری نمیکنه، نه صفحه جدیدی باز میکنه، نه هشتگی توی url میزاره و نه هیچی.
#html #js #javascript #trick
☕️ @CodeExplore
<a href="javascript:void(0);">Click Me!</a>
#html #js #javascript #trick
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14⚡5❤🔥3
<canvas> توی HTML مثل یه صفحه نقاشی خالیه که باهاش می‌تونی هرچی دلت می‌خواد بکشی. البته خودش چیزی نشون نمی‌ده؛ باید با جاوااسکریپت (یه زبان برنامه‌نویسی که توی وب استفاده میشه) بهش بگی چی بکشه.- عرض و ارتفاع (width و height): اینا اندازه صفحه نقاشیت رو مشخص می‌کنن. اگه نذاری، خودش یه اندازه پیش‌فرض داره (300 در 150 پیکسل).
- جاوااسکریپت: با جاوااسکریپت می‌تونی روی این صفحه نقاشی خط بکشی، دایره و مستطیل بکشی، یا حتی عکس بذاری.
یه مثال ساده:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
مرورگر شما از تگ Canvas پشتیبانی نمی‌کند.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// کشیدن یه مستطیل قرمز
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 75);
</script>
</body>
</html>
اینجا یه صفحه نقاشی به اندازه 200 در 100 پیکسل درست کردیم و با جاوااسکریپت توش یه مستطیل قرمز کشیدیم. این کارها رو با چند خط کد ساده انجام دادیم.
- کشیدن نمودارها و گراف‌ها
- رسم شکل‌های دو‌بعدی
- انیمیشن‌های ساده
- بازی‌های تحت وب
#canvas #html #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12⚡4❤🔥2
WebAssembly در فرانت‌اند: تحولی برای عملکرد بالاتر 🔥
📣 WebAssembly (Wasm) یکی از جدیدترین تکنولوژی‌ها در دنیای وب هست که به توسعه دهندگان امکان می‌ده تا کدهای سطح پایین و بهینه‌ای رو روی مرورگرهای وب اجرا کنن. این تکنولوژی برای برنامه‌هایی که به سرعت و عملکرد بالایی نیاز دارن، مثل بازی‌های وب و برنامه‌های محاسباتی سنگین، بسیار کاربردی هست. در این مقاله، به بررسی WebAssembly، مزایای آن در فرانت‌اند، و چگونگی استفاده از آن خواهیم پرداخت.
🌕 برای مشاهده کامل مقاله کلیک کنید.
#webassembelly #frontend #js #html #css #javascript #programming
☕️ @CodeExplore
#webassembelly #frontend #js #html #css #javascript #programming
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡12❤🔥3🔥2
آموزش و اهمیت استفاده از Shape Divider در طراحی وب ⚡️
🔔 طراحی وب همیشه به دنبال روش‌هایی است که به آن زیبایی و جذابیت بیشتری ببخشد. یکی از عناصر کلیدی در طراحی صفحات وب، استفاده از جداکننده‌ها یا دیوایدرها است. سایت Shape Divide به طراحان این امکان را می‌دهد تا اشکال جذاب و متنوعی برای جداکننده‌ها بسازند و طراحی خود را به سطح جدیدی ارتقا دهند.
🌕 برای مشاهده کامل مقاله کلیک کنید.
#shapedivider #frontend #css #html
☕️ @CodeExplore
#shapedivider #frontend #css #html
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤🔥3⚡1
ویژگی‌های WebKit در Safari 18.0: تحول بزرگ در عملکرد و امنیت 🔍
🔄 نسخه Safari 18.0 با بهبودهای گسترده در WebKit عرضه شده است که تجربه کاربران را بهبود می‌بخشد. این نسخه مجموعه‌ای از قابلیت‌های پیشرفته در زمینه CSS، امنیت، عملکرد و دسترسی را ارائه می‌دهد. در این مقاله به بررسی جزئیات این ویژگی‌ها و تأثیرات آنها می‌پردازیم.
🌕 برای مشاهده کامل مقاله کلیک کنید.
#ios #safari #css #html #frontend #site #programming
☕️ @CodeExplore
#ios #safari #css #html #frontend #site #programming
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤🔥4⚡2
آموزش جامع HTML 🔼 🌐
توی این دوره آموزشی سعی کردیم خیلی ساده، سریع و رایگان این زبان نشانه گذاری رو به شما بصورت کامل آموزش بدیم.
این دوره بصورت هفتگی آپدیت میشه و قسمت های جدیدی بهش اضافه میشه.
🔔 قسمت های منتشر شده:
- مقدمه
- آشنایی با ساختار صفحات
- تگ های hr و br
- تگ پاراگراف
دسترسی به دوره
#html #tutorial
☕️ Telegram | Website | Discord
توی این دوره آموزشی سعی کردیم خیلی ساده، سریع و رایگان این زبان نشانه گذاری رو به شما بصورت کامل آموزش بدیم.
این دوره بصورت هفتگی آپدیت میشه و قسمت های جدیدی بهش اضافه میشه.
- مقدمه
- آشنایی با ساختار صفحات
- تگ های hr و br
- تگ پاراگراف
دسترسی به دوره
#html #tutorial
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡16🔥8❤🔥3💔2
پنج قسمت جدید و پایانی از آموزش جامع HTML منتشرشد 🔥
توی این دوره آموزشی سعی کردیم خیلی ساده، سریع و رایگان این زبان نشانه گذاری رو به شما بصورت کامل آموزش بدیم.
🆕 قسمت های جدید:
- تگ های معنادار
- تگ های Article و Section
- تگ Canvas
- تگ های کاربردی
- متاتگ (Metatag) ها در HTML
دسترسی به دوره
#html #tutorial
☕️ Telegram | Website | Discord
توی این دوره آموزشی سعی کردیم خیلی ساده، سریع و رایگان این زبان نشانه گذاری رو به شما بصورت کامل آموزش بدیم.
🆕 قسمت های جدید:
- تگ های معنادار
- تگ های Article و Section
- تگ Canvas
- تگ های کاربردی
- متاتگ (Metatag) ها در HTML
دسترسی به دوره
#html #tutorial
☕️ Telegram | Website | Discord
⚡6🔥3❤🔥2
🔸️قالب HTML تلینو یه انتخاب عالی برای تیم هاییه که روی ربات‌های تلگرام کار می‌کنن و دوست دارن یه سایت اختصاصی خوشگل و حرفه‌ای داشته باشن تا کارشون حسابی بدرخشه.تو این قالب همه‌چی هست، از صفحه‌ی اصلی گرفته تا صفحات فرعی، بلاگ، جستجو و کلی چیز دیگه که میتونه سایتتون رو کامل و تر و تمیز کنه.
GitHub: https://github.com/htaria/telegram-services-site
#html #theme #telegram #site #css #js #frontend
☕️Telegram | Website | Discord
GitHub: https://github.com/htaria/telegram-services-site
#html #theme #telegram #site #css #js #frontend
☕️Telegram | Website | Discord
🔥5❤🔥3⚡2