🌱🌱 نکته روز #HTML

🌿🌿 ‏طراحی واکنش‌گرا برای دستگاه‌های مختلف: منوهای کشویی باید در اندازه‌های مختلف صفحه نمایش به خوبی کار کنند. برای دستگاه‌های موبایل، ممکن است نیاز به طراحی متفاوتی مانند منوی همبرگری یا منوی کشویی تمام صفحه باشد که با استفاده از HTML و CSS (و احتمالاً جاوااسکریپت) پیاده‌سازی می‌شود.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏استفاده از تگ‌های map و area برای نقشه‌های تصویری

🟢 سوال :

‏کدام ویژگی تگ `<area>` مختصات منطقه قابل کلیک را بر اساس مقدار ویژگی `shape` تعیین می‌کند؟

گزینه ۱:
`shape`

گزینه ۲:
`href`

گزینه ۳:
`coords`

گزینه ۴:
`alt`



🔵 گزینه صحیح: 3

🟢 توضیح :

‏ویژگی `coords` مختصات منطقه قابل کلیک را به صورت لیستی از اعداد تعیین می‌کند. این اعداد بسته به مقدار ویژگی `shape` متفاوت تفسیر می‌شوند (مثلاً برای `rect`: x1, y1, x2, y2 و برای `circle`: center_x, center_y, radius).

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏طراحی صفحات فرود (Landing Pages)

🟢 سوال :

‏برای نمایش نظرات مشتریان یا گواهی‌نامه‌ها (testimonials) در صفحه فرود، کدام تگ‌های HTML برای ساختاربندی هر نظر مناسب هستند؟

گزینه ۱:
‏`<p>` و `<span>`

گزینه ۲:
‏تگ‌های لیست (`<ul>` یا `<ol>`)

گزینه ۳:
‏`<figure>` با تگ `<blockquote>` برای نقل قول و `<figcaption>` برای نام مشتری

گزینه ۴:
‏تگ‌های جدول (`<table>`)



🔵 گزینه صحیح: 3

🟢 توضیح :

‏تگ `<figure>` برای گروه‌بندی نقل قول (`<blockquote>`) و اطلاعات مشتری (`<figcaption>`) به صورت معنایی مناسب است.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏استفاده از تگ base و link

🟢 سوال :

‏کدام ویژگی تگ <link> مشخص می‌کند که منبع لینک شده برای چه نوع رسانه‌ای (مانند صفحه نمایش، چاپ، یا دستگاه‌های خاص) اعمال شود؟

گزینه ۱:
type

گزینه ۲:
rel

گزینه ۳:
media

گزینه ۴:
sizes



🔵 گزینه صحیح: 3

🟢 توضیح :

‏ویژگی media در تگ <link> مشخص می‌کند که منبع لینک شده برای چه نوع رسانه‌ای اعمال شود. مقادیر رایج شامل screen (برای صفحه نمایش)، print (برای چاپ)، all (برای همه رسانه‌ها) و همچنین media queries برای اعمال استایل‌ها بر اساس ویژگی‌های دستگاه (مانند عرض صفحه) هستند.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🌱🌱 نکته روز #HTML

🌿🌿 ‏نمایش مقدار در یک محدوده با تگ <meter>: تگ <meter> برای نمایش یک مقدار اسکالر در یک محدوده مشخص استفاده می‌شود. این تگ برای نمایش مواردی مانند میزان استفاده از دیسک، قدرت سیگنال، یا میزان رضایت کاربر مناسب است. ویژگی‌های کلیدی آن شامل value (مقدار فعلی)، min (حداقل مقدار)، max (حداکثر مقدار)، low، high و optimum هستند که برای نشان دادن محدوده‌های مختلف استفاده می‌شوند.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🌱🌱 نکته روز #HTML

🌿🌿 ‏استفاده از لینک‌های انکر (<a> با href="#...") برای ناوبری: برای سوالات طولانی یا دسته‌بندی‌های متعدد، می‌توانید از لینک‌های انکر در بالای صفحه استفاده کنید تا کاربران بتوانند به سرعت به بخش مورد نظر خود منتقل شوند. برای این کار، به هر سوال یک id منحصر به فرد بدهید و سپس در لینک‌های ناوبری از href="#id_سوال" استفاده کنید.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏تگ‌های صوتی HTML5 (audio)

🟢 سوال :

‏کدام ویژگی تگ <audio> باعث می‌شود صدا پس از پایان به طور مداوم از ابتدا پخش شود؟

گزینه ۱:
controls

گزینه ۲:
autoplay

گزینه ۳:
loop

گزینه ۴:
‏poster (مربوط به ویدیو)



🔵 گزینه صحیح: 3

🟢 توضیح :

‏ویژگی loop در تگ <audio> باعث می‌شود صدا پس از رسیدن به انتها، به طور خودکار از ابتدا شروع به پخش کند و این چرخه به طور مداوم تکرار شود.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🌱🌱 نکته روز #HTML

🌿🌿 ‏استفاده از <input type="email"> برای آدرس ایمیل: برای دریافت آدرس ایمیل شرکت‌کنندگان، از تگ <input type="email"> استفاده کنید. این نوع ورودی اعتبارسنجی اولیه برای فرمت ایمیل را ارائه می‌دهد.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🌱🌱 نکته روز #HTML

🌿🌿 ‏ساخت صفحات واکنش‌گرا با HTML و CSS: اطمینان حاصل کنید که ساختار HTML شما به گونه‌ای است که محتوا به طور صحیح در اندازه‌های مختلف صفحه نمایش (دسکتاپ، تبلت، موبایل) نمایش داده شود. استفاده از طرح‌بندی‌های انعطاف‌پذیر و Media Queries در CSS در کنار ساختار HTML مناسب، تجربه کاربری یکپارچه‌ای را فراهم می‌کند.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏نحوه استفاده از تگ‌های HTML در ایجاد وبلاگ

🟢 سوال :

‏برای نمایش اطلاعات متا پست (مانند نویسنده، تاریخ انتشار، دسته‌بندی‌ها) در هر پست وبلاگ، کدام تگ HTML5 می‌تواند برای گروه‌بندی این اطلاعات استفاده شود؟

گزینه ۱:
‏<p> با <span>

گزینه ۲:
‏<div> با کلاس‌های CSS

گزینه ۳:
‏<aside> (اگر اطلاعات فرعی باشند) یا تگ معنایی <time> برای تاریخ و احتمالاً عناصر دیگر

گزینه ۴:
‏تگ <table>



🔵 گزینه صحیح: 3

🟢 توضیح :

‏تگ <aside> می‌تواند برای اطلاعات فرعی مرتبط با پست استفاده شود. تگ <time> به طور خاص برای نمایش تاریخ و زمان به صورت معنایی طراحی شده است. همچنین می‌توان از عناصر درون‌خطی مانند <span> در داخل یک <p> برای گروه‌بندی این اطلاعات استفاده کرد.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏تاریخچه HTML و تکامل آن

🟢 سوال :

‏کدام یک از موارد زیر جزء اهداف اصلی طراحی HTML5 بود؟

گزینه ۱:
‏بهبود سازگاری با مرورگرهای قدیمی

گزینه ۲:
‏ارائه پشتیبانی بهتر برای برنامه‌های کاربردی وب و محتوای تعاملی

گزینه ۳:
‏کاهش وابستگی به پلاگین‌های خارجی مانند Flash

گزینه ۴:
‏ساده‌سازی ساختار سند HTML



🔵 گزینه صحیح: 2

🟢 توضیح :

‏HTML5 با هدف ارائه پشتیبانی بهتر برای برنامه‌های کاربردی وب پیچیده، محتوای تعاملی و چندرسانه‌ای طراحی شد و تلاش کرد تا وابستگی به پلاگین‌های خارجی را کاهش دهد.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏استفاده از تگ‌های HTML در طراحی فروشگاه‌های اینترنتی

🟢 سوال :

‏برای ایجاد لینک‌های مربوط به سیاست‌های فروشگاه (مانند حریم خصوصی، شرایط و ضوابط) که معمولاً در فوتر قرار می‌گیرند، از کدام تگ HTML استفاده می‌شود؟

گزینه ۱:
`<link>`

گزینه ۲:
‏`<nav>` با لیست لینک‌ها (`<a>`)

گزینه ۳:
`<button>`

گزینه ۴:
`<form>`



🔵 گزینه صحیح: 2

🟢 توضیح :

‏تگ `<nav>` برای بخش‌های ناوبری (حتی در فوتر) مناسب است و معمولاً شامل یک لیست نامرتب (`<ul>`) از لینک‌ها (`<a>`) به صفحات مربوط به سیاست‌های فروشگاه است.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏تاریخچه HTML و تکامل آن

🟢 سوال :

‏XHTML چه تفاوتی با HTML 4.01 داشت؟

گزینه ۱:
‏XHTML از قوانین سخت‌گیرانه‌تر XML پیروی می‌کرد

گزینه ۲:
‏XHTML قابلیت‌های چندرسانه‌ای بیشتری داشت

گزینه ۳:
‏XHTML از CSS برای استایل‌دهی استفاده نمی‌کرد

گزینه ۴:
‏XHTML فقط برای برنامه‌های کاربردی وب موبایل طراحی شده بود



🔵 گزینه صحیح: 1

🟢 توضیح :

‏XHTML (Extensible HyperText Markup Language) یک بازنویسی از HTML 4.01 با استفاده از قوانین XML بود. این بدان معنا بود که XHTML دارای ساختار سخت‌گیرانه‌تری بود (مانند بسته شدن تمام تگ‌ها و استفاده از حروف کوچک برای نام تگ‌ها).

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏نحوه ایجاد تب‌ها در صفحات HTML

🟢 سوال :

‏برای پنهان کردن محتوای تب‌های غیرفعال از دید و ابزارهای کمکی، چه ویژگی ARIA می‌تواند به عنصر حاوی محتوای تب اختصاص داده شود؟

گزینه ۱:
`aria-selected="false"`

گزینه ۲:
‏`aria-expanded="false"` یا `aria-hidden="true"`

گزینه ۳:
`aria-controls`

گزینه ۴:
`aria-describedby`



🔵 گزینه صحیح: 2

🟢 توضیح :

‏ویژگی `aria-expanded="false"` یا `aria-hidden="true"` به عنصر حاوی محتوای تب‌های غیرفعال اختصاص داده می‌شود تا به ابزارهای کمکی اطلاع دهد که این محتوا در حال حاضر پنهان است. معمولاً از `aria-hidden="true"` برای پنهان کردن کامل از DOM و از `aria-expanded="false"` زمانی استفاده می‌شود که محتوا از نظر بصری پنهان شده اما در DOM وجود دارد.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏استفاده از تگ‌های map و area برای نقشه‌های تصویری

🟢 سوال :

‏کدام تگ HTML برای تعریف یک نقشه تصویری (clickable image map) استفاده می‌شود؟

گزینه ۱:
`<image>`

گزینه ۲:
`<area>`

گزینه ۳:
`<map>`

گزینه ۴:
`<canvas>`



🔵 گزینه صحیح: 3

🟢 توضیح :

‏تگ `<map>` به عنوان نگهدارنده‌ای برای تعریف مناطق قابل کلیک (hotspots) بر روی یک تصویر استفاده می‌شود. این تگ دارای یک ویژگی `name` است که برای مرتبط کردن آن با تگ `<img>` استفاده می‌شود.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏تگ‌های emphasis (em) و strong

🟢 سوال :

‏تگ <strong> در HTML برای چه منظوری استفاده می‌شود؟

گزینه ۱:
‏برای نمایش متن با حروف کوچک

گزینه ۲:
‏برای نشان دادن اهمیت قوی، جدی یا فوری یک کلمه یا عبارت

گزینه ۳:
‏برای ایجاد عنوان‌های مهم

گزینه ۴:
‏برای نمایش متن با فونت مورب



🔵 گزینه صحیح: 2

🟢 توضیح :

‏تگ <strong> برای نشان دادن اهمیت قوی، جدی یا فوری یک کلمه یا عبارت در متن استفاده می‌شود. مرورگرها معمولاً این متن را به صورت پررنگ (bold) نمایش می‌دهند.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🌱🌱 نکته روز #HTML

🌿🌿 ‏نیاز به زبان‌های سمت سرور برای پردازش داده‌ها: HTML به تنهایی قادر به ذخیره و پردازش اطلاعات ثبت رویداد نیست. برای این کار، به زبان‌های سمت سرور (مانند PHP، Python، Node.js) و یک پایگاه داده نیاز دارید تا اطلاعات ارسالی از فرم را دریافت، اعتبارسنجی و ذخیره کنید. HTML صرفاً ساختار فرم را ایجاد می‌کند.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #HTML

🟣 موضوع : ‏استفاده از تگ‌های HTML در طراحی فروشگاه‌های اینترنتی

🟢 سوال :

‏برای ایجاد بخش فیلتر و جستجو در صفحه فروشگاه، از کدام تگ‌های HTML می‌توان استفاده کرد؟

گزینه ۱:
‏فقط تگ‌های لینک (`<a>`)

گزینه ۲:
‏تگ‌های جدول (`<table>`)

گزینه ۳:
‏`<form>` با عناصر ورودی مختلف (`<input type="checkbox">`, `<input type="range">`, `<select>`)

گزینه ۴:
‏تگ‌های عنوان (`<h1>` تا `<h6>`)



🔵 گزینه صحیح: 3

🟢 توضیح :

‏تگ `<form>` با عناصر ورودی متنوع مانند چک‌باکس‌ها برای فیلترهای چندگانه، اسلایدرهای محدوده برای فیلترهای قیمتی و تگ `<select>` برای انتخاب از بین گزینه‌ها، ساختار مناسبی برای بخش فیلتر و جستجو فراهم می‌کند.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir