🙂 یک ریپو دارم که داخلش مجموعه‌ای از صفحه های 404 هست که با HTML , CSS و Js زدم درواقع ریپو برای تمرین بوده ولی بنظرم برای کسایی که دارن تازه یاد میگیرن منبع جالبی باشه👌

لینک ریپو گیت هاب :
🌐 https://github.com/MjavadH/4X4-Collection

لینک پیش نمایش:
🌐 https://mjavadh.github.io/4X4-Collection/

🔥🔥🔥🔥🔥🔥🔥🔥
دوستان من تا الان همیشه از کارهای خوب و خفن حمایت کردم و این کار رو هم ادامه خواهم داد ، فقط لطف کنید بهشون ⭐️ بدید ، چون واقعا ارزش حمایت شدن دارن

#html #css #js
☕️ @CodeExplore

👑یه لیست از 10 تا اتریبیوت خفن و پرکاربرد از HTML ببینیم؟

🟢data-[data-set-name] :
این اتریبیوت بهتون این اجازه رو میده که یسری اطلاعات کاستوم و سفارشی رو به تگ اضافه کنین، و داخل css و js بتونین استفادشون کنین

🟢contentedittable :
اینم به کاربر اجازه میده که محتوای تگ رو ادیت کنه

🟢hidden :
میتونین از این اتریبیوت برای مخفی کردن تگ هاتون استفاده کنین

🟢spellcheck :
وقتی این اتریبیوت رو به تگتون بدین میتونین کنترل کنین که مرورگر اون تگ رو برای املای صحیح بررسی کنه یا نه ( غلط املایی میگیره )

🟢tabindex :
این اتریبیوت برای فرم هاتون به درد میخوره، با استفاده از این میتونین شماره و ترتیب زدن دکمه tab برای focus روی تگ هاتون رو مدیریت کنین

🟢download :
شاید تا حالا شده بخاین با زدن روی یه لینک، یه فایلی دانلود شه، خب اینو به تگ a بدین و لینکشو ست کنین

🟢async & defer :
این اتریبیوت ها این اجازه رو میدن که کنترل کنین چطوری یه اسکریپت بارگذاری و اجرا بشه

🟢autofocus :
وقتی از این اتریبیوت استفاده کنین، اون تگتون به صورت دیفالت با ران شدن صفحه، focus میشه

🟢placeholder :
میتونین با این اتریبیوت، یک راهنما و متن موقت رو داخل input هاتون ست کنین

🟢required :
از این اتریبیوت ولی میخاید input هاتون خالی نباشه و حتما پر بشه استفاده کنین

#html
☕️ @CodeExplore

تگ های details و summary در HTML 🖐

🔴برای ایجاد محتوای قابل‌گسترش (collapsible content) استفاده می‌شن که به کاربر اجازه می‌دن با کلیک روی یک عنوان، محتوای مخفی رو ببینن. بریم سراغ جزئیات:تگ <details>این تگ برای تعریف یک بخش از محتوا استفاده می‌شه که می‌تونه باز یا بسته بشه.

⭐️تگ <summary>این تگ داخل <details> قرار می‌گیره و عنوانی رو که کاربر روش کلیک می‌کنه، مشخص می‌کنه.مثالفرض کنیم می‌خوایم اطلاعات بیشتری درباره‌ی یه موضوع نشون بدیم، اما نمی‌خوایم همیشه تمام اطلاعات نمایش داده بشن. از این تگ‌ها استفاده می‌کنیم:

<details>
  <summary>بیشتر بدانید</summary>
  <p>این محتوای اضافی است که کاربر می‌تواند با کلیک روی "بیشتر بدانید" مشاهده کند.</p>
</details>

#html #summary #details
☕️ @CodeExplore

تگ <progress> در HTML 🖐

💥برای نمایش پیشرفت یک کار خاص مثل آپلود یک فایل یا تکمیل یک وظیفه استفاده می‌شه. این تگ به صورت بومی توسط مرورگر پشتیبانی می‌شه و به طور خودکار یک نوار پیشرفت ایجاد می‌کنه. بریم سراغ جزئیات بیشتر:

<label for="file">پیشرفت دانلود فایل:</label>
<progress id="file" value="32" max="100">32%</progress>

✅توضیحات value: مقدار فعلی پیشرفت کار رو نشون می‌ده. در این مثال، پیشرفت 50 است.

✅توضیحات max: حداکثر مقدار پیشرفت رو تعیین می‌کنه. در این مثال، حداکثر مقدار 100 است.

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

✅برچسب (Label): با استفاده از تگ <label> می‌تونی توضیحی درباره نوار پیشرفت بدی.

✅اتصال به تگ <progress>: با استفاده از خاصیت for در تگ <label> و خاصیت id در تگ <progress> می‌تونی این دو رو به هم مرتبط کنی.

#html #progress
☕️ @CodeExplore

تگ <time> در HTML 🖐

☄️این تگ برای اینه که وقتی داریم توی سایتمون یه تاریخ یا زمان رو نشون میدیم، مرورگر و موتورهای جستجو دقیقاً بفهمن که داریم راجع به چی صحبت می‌کنیم. مثلا، اگه یه مقاله نوشتیم و می‌خوایم تاریخ انتشارش رو نشون بدیم، یا می‌خوایم بگیم یه رویداد کی برگزار میشه، از این تگ استفاده می‌کنیم.

❓مثال: فرض کنیم میخوایم تاریخ یه رویدادی رو بنویسیم...

<p>آغاز رویداد: <time datetime="2024-06-27T10:00:00">27 ژوئن 2024، ساعت 10:00</time></p>

◀️اینجا داریم به مرورگر می‌گیم که این "27 ژوئن 2024، ساعت 10:00" یه تاریخ و زمان خاصه. این خیلی کمک می‌کنه که مرورگر بفهمه این یه زمان مهمه و موتورهای جستجو هم راحت‌تر می‌تونن این اطلاعات رو پیدا کنن.


✅کجاها می‌تونیم ازش استفاده کنیم؟

1⃣وقتی توی سایت بلاگ می‌نویسیم و می‌خوایم تاریخ انتشار مقاله‌هامون رو نشون بدیم.

🔢 اگه سایتی داریم که رویدادها رو معرفی می‌کنه و می‌خوایم زمان شروع و پایان رویدادها رو بنویسیم.

🔢یا حتی وقتی یه تایم‌لاین داریم و می‌خوایم بگیم هر اتفاقی کی افتاده.

#html #time
☕️ @CodeExplore

تگ <figcaption> و <figure> در HTML 🖐

💻 تگ <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
☕️ @CodeExplore

استفاده از چند فایل در HTML 🖐

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

<input name="my_files[]" type="file" multiple enctype="multipart/form-data" >

#html #mutliple #file
☕️ @CodeExplore

پارگراف با قابلیت ادیت در HTML 🖐

میدونستین میتونین توی html ، پاراگراف قابل ویرایش(توسط کاربر) داشته باشین؟
به این شکل:

<p contenteditable="true">
CodeExplore
</p>

#html #p
☕️@CodeExplore

چجوری از html5 استفاده نکنیم؟ 🖐

😠بیاین فرض کنیم شما کنجکاویتون گل کرده و میخواین از html های قدیمی تری استفاده کنید، مثلا html4.01 ، خب برای اینکه ازین ورژن استفاده کنید این کد رو خط اول فایلتون مینویسید:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

⚠️ نکته قابل توجه اینه که با اینکار ساختار کدتون آنچنان فرقی نباید بکنه، ولی هر چی عقب تر برید، امکاناتتون کمتر میشه،عوضش روی مرورگر های بیشتری سایتتون پشتیبانی میشه!

✔️میتونید از اینجا بیشتر بخونید.

#html
☕️ @CodeExplore