category

systemdown

2024-09-29 23:46:24

لرزش گوشی با استفاده از جاوا اسکریپت

<h3> چگونه یک گوشی را با استفاده از جاوا اسکریپت به لرزش در آوریم؟ </h3> با استفاده از Vibration API در جاوا اسکریپت، می‌توانید به راحتی تعامل را به برنامه وب خود اضافه کنید. <li> نحو پایه: </li> از کد زیر استفاده کنید. تا دستگاه به مدت 500 میلی ثانیه لرزش داشته باشد. <code dir='ltr'> navigator.vibrate(500)</code> لرزش الگو: برای الگوی پیچیده تر، از آرایه ای از مقادیر استفاده کنید: <code dir='ltr'> navigator.vibrate([100, 50, 100, 50, 300]);</code> این یک توالی از ارتعاشات و مکث ایجاد می کند. <li> توقف لرزش: </li> برای متوقف کردن لرزش، از یا یک آرایه خالی ارسال کنید. <code dir='ltr'> navigator.vibrate(0); </code> <li> بررسی پشتیبانی مرورگر: </li> قبل از استفاده از API، بررسی کنید که آیا با مرورگر سازگار است: <code dir='ltr'> if ("vibrate" in navigator) { c.log("Vibration API is supported"); }</code> این می تواند برای اعلان ها، بازی ها یا هشدارها مفید باشد #web <h3> پایان </h3>

(1)

systemdown

2024-10-03 07:59:00

آموزش برنامه نویسی وب🌐: بخش اول اچ تی ام ال (قسمت نخست)

<p> در سری آموزش برنامه نویسی وب (متنی) وبلاگ آزادی سعی میشود که تمامی مهارت‌هایی که یک <strong> طراح یا برنامه نویس وب </strong> نیاز دارد آموزش داده شود. اگر کمی باهوش باشید از روی عنوان میفهمید قرار است در بخش اول اچ تی ام ال رو یاد بگیریم، خب اچ تی ام ال چیست؟ </p> <h2> آموزش برنامه نویسی وب بخش html قسمت نخست</h2> <h2> اچ تی ام ال چیست؟</h2> <p> اچ تی ام ال مخفف کلمه HyperText Markup Language، به معنای <strong> زبان نشانه گذاری متن </strong> است. و برای ساخت بلوک های ساختمان وبسایت ها است. در واقع html مثل استخوان های یک آدم و CSS مثل گوشت و پوست و JS مثل مغز انسان است. <br /> </p> html معنی و ساختار صفحات وب را تعریف میکند. <h2> ابر متن چیست؟</h2> <p> ابر متن پیوند‌ هایی هستند که صفحات وب را به یکدیگر متصل میکند. چه در یک بین صفحات یک سایت باشد یا سایت های دیگر. </p> اچ تی ام ال از تگ ها برای نمایش محتوا استفاده میکند. <h2> تگ ها و المنت‌ها</h2> <p> تگ‌ها نشانه‌هایی در اچ تی ام ال هستند که برای نمایش محتوا استفاده می‌شوند. هر تگ معمولاً شامل یک نام تگ است که در داخل علامت‌های >< قرار می‌گیرد. به عنوان مثال، تگ <strong><p></strong> برای ایجاد یک پاراگراف و تگ <strong><h1></strong> برای عنوان اصلی استفاده می‌شود. </p> <p> هر تگ می‌تواند دارای ویژگی‌هایی باشد که به آن اطلاعات اضافی می‌دهد. به عنوان مثال، تگ <strong><a></strong> که برای ایجاد لینک‌ها استفاده می‌شود، می‌تواند ویژگی <strong>href</strong> داشته باشد که آدرس URL مقصد را مشخص می‌کند. </p> <p> به طور کلی، تگ‌ها به دو دسته تقسیم می‌شوند: <ul> <li><strong>تگ‌های باز:</strong> این تگ‌ها شروع یک عنصر را مشخص می‌کنند، مانند <strong><div></strong> یا <strong><span></strong>.</li> <li><strong>تگ‌های بسته:</strong> این تگ‌ها پایان یک عنصر را مشخص می‌کنند و معمولاً با علامت / قبل از نام تگ نوشته می‌شوند، مانند <strong><div/></strong> یا <strong><span/></strong>.</li> </ul> </p> <p> علاوه بر این، برخی از تگ‌ها به صورت خودبسته هستند و نیازی به تگ بسته ندارند، مانند <strong><br></strong> برای ایجاد یک خط جدید یا <strong><img></strong> برای نمایش تصاویر. </p> <p> در نهایت، ترکیب تگ‌ها و ویژگی‌های آن‌ها به ما این امکان را می‌دهد که ساختار و محتوای صفحات وب را به صورت دقیق و منظم تعریف کنیم. با یادگیری نحوه استفاده از تگ‌ها و عناصر مختلف اچ تی ام ال، می‌توانید صفحات وب جذاب و کاربرپسند بسازید. </p> <p> به تصویر زیر برای درک المنت (Element)، تگ باز (Opening Tag)، تگ بسته(Closing Tag) و محتوا(Content) بنگرید. </p> <br /> <img src='https://blogfreedom.ir/uploaded_img/New Project.webp' width='100%'> <h2> ساختار کدهای اچ تی ام ال</h2> <p> ساختار کدهای اچ تی ام ال به ما کمک می‌کند تا صفحات وب را به صورت منظم و قابل فهم ایجاد کنیم. یک سند اچ تی ام ال معمولاً شامل چندین بخش اصلی است که هر کدام نقش خاصی در تعریف محتوا و ساختار صفحه دارند. در زیر به بررسی این بخش‌ها می‌پردازیم: </p> <h3> 1. نوع سند (DOCTYPE) </h3> <p> در ابتدای هر سند اچ تی ام ال، باید نوع سند را با استفاده از <strong>DOCTYPE</strong> مشخص کنیم. این خط به مرورگر می‌گوید که با چه نوع سندی سر و کار دارد. برای اچ تی ام ال5، این خط به صورت زیر است: <code> <!DOCTYPE html> </code> </p> <h3> 2. تگ <strong><html></strong> </h3> <p> تگ <strong><html></strong> ریشه سند اچ تی ام ال است و تمام محتوا درون آن قرار می‌گیرد. این تگ معمولاً شامل دو بخش اصلی است: <strong><head></strong> و <strong><body></strong>. </p> <h3> 3. تگ <strong><head></strong> </h3> <p> تگ <strong><head></strong> شامل اطلاعات متا، عنوان صفحه، و لینک‌های به فایل‌های CSS و جاوا اسکریپت است. این اطلاعات به مرورگر کمک می‌کند تا صفحه را به درستی نمایش دهد. به عنوان مثال: <code> <head> <meta charset="UTF-8"> <title<عنوان صفحه</title> <link rel="stylesheet" href="styles.css"> </head> </code> </p> <h3> 4. تگ <strong><body></strong> </h3> <p> تگ <strong><body></strong> شامل محتوای اصلی صفحه است که کاربران آن را مشاهده می‌کنند. این محتوا می‌تواند شامل متن، تصاویر، لینک‌ها و سایر عناصر باشد. به عنوان مثال: <code> <h1>عنوان اصلی</h1> <p>این یک پاراگراف است.</p> <img src="image.jpg" alt="توضیح تصویر"> </code> </p> <h3> 5. تگ‌های دیگر </h3> <p> درون تگ <strong><body></strong> می‌توانید از تگ‌های مختلفی مانند <strong><div></strong>، <strong><span></strong>، <strong><a></strong> و غیره استفاده کنید تا ساختار و طراحی صفحه را بهبود ببخشید. </p> <p> در زیر یک مثال کامل از ساختار یک سند اچ تی ام ال آورده شده است: <code> <!DOCTYPE html> <html> <head> </head> <body> <h1>خوش آمدید به وبسایت ما</h1> <p>این یک پاراگراف نمونه است.</p> <a href="https://example.com">لینک به وبسایت مثال</a> </body> </html> </code> </p> <p> با درک ساختار کدهای اچ تی ام ال، می‌توانید صفحات وب خود را به صورت مؤثر و منظم طراحی کنید و به راحتی محتوای مورد نظر خود را نمایش دهید. </p> <h2> صفات (Attributes) در اچ تی ام ال </h2> <p> صفات (Attributes) در اچ تی ام ال ویژگی‌هایی هستند که به تگ‌ها اطلاعات اضافی می‌دهند. این صفات به تگ‌ها کمک می‌کنند تا رفتار و ظاهر عناصر را تغییر دهند. هر صفت معمولاً شامل یک نام و یک مقدار است و در داخل تگ قرار می‌گیرد. در زیر به بررسی برخی از صفات متداول و مهم در اچ تی ام ال می‌پردازیم: </p> <h3> 1. صفت <strong>id</strong> </h3> <p> صفت <strong>id</strong> یک شناسه منحصر به فرد برای یک عنصر در صفحه ایجاد می‌کند. این شناسه می‌تواند برای انتخاب عنصر در CSS یا جاوا اسکریپت استفاده شود. <code> <div id="uniqueElement">محتوای این عنصر</div></code></p> <h3> 2. صفت <strong>class</strong> </h3> <p> صفت <strong>class</strong> به شما این امکان را می‌دهد که چندین عنصر را با یک نام کلاس مشترک گروه‌بندی کنید. این صفت معمولاً برای استایل‌دهی به عناصر با CSS استفاده می‌شود. <code> <p class="highlight">این یک پاراگراف با کلاس خاص است.</p> </code> </p> <h3> 3. صفت <strong>style</strong> </h3> <p> صفت <strong>style</strong> به شما این امکان را می‌دهد که استایل‌های CSS را به صورت مستقیم به یک عنصر اضافه کنید. <code> <p>این متن قرمز است.</p> </code> </p> <h3> 4. صفت <strong>href</strong> </h3> <p> صفت <strong>href</strong> در تگ <strong><a></strong> برای مشخص کردن آدرس URL مقصد لینک استفاده می‌شود. <code> <a href="https://example.com">به وبسایت مثال بروید</a> </code> </p> <h3> 5. صفت <strong>src</strong> </h3> <p> صفت <strong>src</strong> در تگ <strong><img></strong> برای مشخص کردن آدرس تصویر استفاده می‌شود. <code> <img src="image.jpg" alt="توضیح تصویر"> </code> </p> <h3> 6. صفت <strong>alt</strong> </h3> <p> صفت <strong>alt</strong> در تگ <strong><img></strong> برای ارائه توضیحی درباره تصویر استفاده می‌شود و در صورت عدم بارگذاری تصویر نمایش داده می‌شود. <code> <img src="image.jpg" alt="توضیح تصویر"> </code> </p> <h3> 7. صفت <strong>title</strong> </h3> <p> صفت <strong>title</strong> برای ارائه توضیحاتی درباره یک عنصر استفاده می‌شود که هنگام قرار دادن ماوس بر روی آن نمایش داده می‌شود. <code> <p title="این یک توضیح است">محتوای این پاراگراف</p> </code> </p> <h3> 8. صفت <strong>target</strong> </h3> <p> صفت <strong>target</strong> در تگ <strong><a></strong> برای مشخص کردن نحوه باز شدن لینک استفاده می‌شود. به عنوان مثال، <strong>_blank</strong> به این معنی است که لینک در یک تب جدید باز شود. <code> <a href="https://example.com" target="_blank">لینک به وبسایت مثال</a> </code> </p> <table border="2" cellpadding="5" cellspacing="1"> <thead> <tr> <th>تگ</th> <th>نوع</th> <th>توضیحات</th> <th class='hide-mobile'>مثال</th> </tr> </thead> <tbody> <tr> <td><b></td> <td>تگ متنی</td> <td>تگ <strong><b></strong> برای نمایش متن به صورت پررنگ (Bold) استفاده می‌شود. این تگ به معنای اهمیت معنایی نیست و فقط برای تغییر ظاهر متن به کار می‌رود.</td> <td class='hide-mobile'><code><b>این متن پررنگ است.</b></code></td> </tr> <tr> <td><i></td> <td>تگ متنی</td> <td>تگ <strong><i></strong> برای نمایش متن به صورت کج (Italic) استفاده می‌شود. این تگ نیز به معنای اهمیت معنایی نیست و فقط برای تغییر ظاهر متن به کار می‌رود.</td> <td class='hide-mobile'><code><i>این متن کج است.</i></code></td> </tr> <tr> <td><img></td> <td>تگ رسانه‌ای</td> <td>تگ <strong><img></strong> برای نمایش تصاویر در صفحات وب استفاده می‌شود. این تگ به صورت خودبسته است و معمولاً شامل صفاتی مانند <strong>src</strong> و <strong>alt</strong> است.</td> <td class='hide-mobile'><code><img src="image.jpg" alt="توضیح تصویر"></code></td> </tr> <tr> <td><strong></td> <td>تگ متنی</td> <td>تگ <strong><strong></strong> برای نمایش متن به صورت پررنگ (Bold) استفاده می‌شود و به معنای اهمیت معنایی است. این تگ نشان‌دهنده این است که متن دارای اهمیت بیشتری نسبت به متن‌های دیگر است.</td> <td class='hide-mobile'><code><strong>این متن مهم است.</strong></code></td> </tr> <tr> <td><em></td> <td>تگ متنی</td> <td>تگ <strong><em></strong> برای نمایش متن به صورت کج (Italic) استفاده می‌شود و به معنای اهمیت معنایی است. این تگ نشان‌دهنده این است که متن باید تأکید بیشتری داشته باشد.</td> <td class='hide-mobile'><code><em>این متن تأکید شده است.</em></code></td> </tr> <tr> <td><mark></td> <td>تگ متنی</td> <td>تگ <strong><mark></strong> برای هایلایت کردن متن استفاده می‌شود. این تگ معمولاً برای نشان دادن متن‌های مهم یا جالب به کار می‌رود.</td> <td class='hide-mobile'><code><mark>این متن هایلایت شده است.</mark></code></td> </tr> </tbody> </table> <a href="#" class="top" id='back-top-btn'>برگشت به بالا</a> <a href='https://blogfreedom.ir/view_post.php?post_id=44' color='red'>قسمت بعدی

(0)

systemdown

2024-10-04 03:12:47

آموزش برنامه نویسی وب🌐: بخش html قسمت دوم

<p> همانطور که در قسمت قبل گفتیم، در سری آموزش‌های برنامه‌نویسی وب، وبلاگ آزادی سعی دارد تمامی مهارت‌هایی که یک برنامه‌نویس وب به آن نیاز دارد را به صورت جامع و کاربردی آموزش دهد. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=42' color='red'>قسمت قبلی</a> <p> در این قسمت، مفاهیم مربوط به مرورگر، مفسر، نقش HTML در وب و برخی تگ‌های جدید HTML را مورد بررسی قرار می‌دهیم. </p> <h2>مرورگر وب چیست؟</h2> <p> <strong>مرورگر وب</strong> نرم‌افزاری است که امکان دریافت فایل‌ها از وبسایت‌ها و نمایش آن‌ها به کاربران را فراهم می‌کند. </p> <p> در حقیقت، مرورگر وب به‌عنوان یک مفسر برای فایل‌های HTML، CSS و JavaScript عمل کرده و این فایل‌ها را به صورت گرافیکی برای کاربران به نمایش می‌گذارد. </p> <p> مرورگر ابتدا فایل‌های وب‌سایت را از سرور دریافت کرده و سپس آن‌ها را ترجمه می‌کند تا به‌صورت متنی، گرافیکی یا حتی تعاملی به کاربر نمایش دهد. </p> <p> <strong>همچنین مرورگرهای وب امکاناتی نظیر ذخیره رمزهای عبور، مدیریت کوکی‌ها، ذخیره‌سازی اطلاعات فرم‌ها و موارد دیگر را در اختیار کاربران قرار می‌دهند.</strong> </p> <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Screenshot_of_Brave_Browser_88.1.20.103_on_Manjaro_%28GNOME%29_opening_the_welcome_page.png/640px-Screenshot_of_Brave_Browser_88.1.20.103_on_Manjaro_%28GNOME%29_opening_the_welcome_page.png' alt='مرورگر brave' width='100%' /> <figcaption>مرورگر brave</figcaption> <h2>شبکه چیست؟</h2> <p> شبکه به گروهی از کامپیوترها یا دستگاه‌ها گفته می‌شود که به‌منظور به اشتراک‌گذاری اطلاعات و منابع، به یکدیگر متصل شده‌اند. شبکه‌ها می‌توانند در اندازه‌های مختلف باشند؛ از شبکه‌های کوچک داخلی (LAN) گرفته تا شبکه‌های بزرگ جهانی مانند اینترنت. </p> <h2>اینترنت چیست؟</h2> <p> اینترنت یک شبکه جهانی است که میلیاردها دستگاه از سراسر جهان را به یکدیگر متصل می‌کند. اینترنت از مجموعه‌ای از شبکه‌های مختلف تشکیل شده که از طریق پروتکل‌های استاندارد با یکدیگر ارتباط برقرار می‌کنند و امکان تبادل داده را فراهم می‌آورند. </p> <h2>وب چیست و چه کسی آن را کنترل می‌کند؟</h2> <p> وب (World Wide Web یا WWW) مجموعه‌ای عظیم از صفحات وب است که از طریق اینترنت قابل دسترسی هستند. این صفحات شامل اطلاعات متنی، تصاویر، ویدئوها و دیگر انواع محتواها می‌باشند. وب توسط یک نهاد یا سازمان خاص کنترل نمی‌شود؛ بلکه مجموعه‌ای از پروتکل‌ها و استانداردها وجود دارد که به‌صورت جهانی به تصویب رسیده‌اند و هر کسی می‌تواند با رعایت آن‌ها صفحات وب خود را ایجاد کند. </p> <h2>صفحه وب، وب‌سایت، صفحه خانه چیست؟</h2> <p> - <strong>صفحه وب</strong>: یک سند یا فایل است که از طریق مرورگر قابل مشاهده است و معمولاً با HTML نوشته می‌شود.<br> - <strong>وب‌سایت</strong>: مجموعه‌ای از صفحات وب مرتبط است که تحت یک دامنه واحد در دسترس قرار دارند.<br> - <strong>صفحه خانه</strong>: اولین صفحه‌ای است که کاربران هنگام مراجعه به یک وب‌سایت مشاهده می‌کنند. این صفحه معمولاً به عنوان ورودی اصلی به دیگر بخش‌های سایت عمل می‌کند. </p> <h2>نقش HTML در وب‌سایت‌ها چیست؟</h2> <p> HTML یا <strong>HyperText Markup Language</strong> زبان استانداردی است که برای ساختاردهی و نمایش محتوا در صفحات وب استفاده می‌شود. HTML تعیین می‌کند که چگونه متن، تصاویر، لینک‌ها و دیگر عناصر در صفحه وب به نمایش درآیند. </p> <h2>هایپرلینک چیست؟</h2> <p> <strong>هایپرلینک</strong> یا لینک، عنصری در HTML است که به کاربران امکان می‌دهد از یک صفحه وب به صفحه‌ای دیگر یا بخش‌های مختلف یک صفحه منتقل شوند. لینک‌ها معمولاً به‌صورت متنی یا تصویری ظاهر می‌شوند و کاربر با کلیک بر روی آن‌ها به مقصد مورد نظر هدایت می‌شود. </p> <h2>آدرس‌دهی در HTML</h2> <p> آدرس‌دهی یا URL در HTML مشخص می‌کند که مرورگر باید به کدام منبع یا صفحه مراجعه کند. برای مثال، وقتی لینکی به یک صفحه دیگر در HTML اضافه می‌شود، با استفاده از URL مشخص می‌شود که مقصد لینک کجا خواهد بود. </p> <p> دو نوع آدرس دهی در وجود دارد. آدرس دهی نسبی و آدرس دهی مطلق. </p> <p> آدرس دهی نسبی به این معناست که با توجه به پوشه فعلی فایل، لینک دهی کنیم. <br /> برای مثال یک فایل به نام index.html داریم که الان داخل آن هاستیم اگر بخواهیم عکسی را نمایش بدهیم با نام pic.png که کنار فایل index.html هست میتوانیم آدرس دهی نسبی رو انجام بدهیم و نام و پسوند عکس رو بجای آدرس بنویسم و نیازی آدرس کامل نیست. و اگر فایل را از کنار فایل اصلیمون ورداریم عکس دیگر نمایش داده نخواهد شد. </p> <p> آدرس دهی مطلق به این معناست ما بصورت کامل لینک را بنویسیم برای مثال ما میخوایم به سایت گوگل لینک بزنیم. پروتکل وب + آدرس دامنه گوگل رو بجای آدرس مینویسم و اگر جای فایل عوض فرقی در آدرس ایجاد نمیشود. </p> <h2>تگ‌های جدید این قسمت</h2> <p> در این قسمت به بررسی تگ‌های جدید HTML که می‌توانند کاربردهای مفیدی در طراحی صفحات وب داشته باشند، می‌پردازیم: </p> <h3>تگ pre</h3> <p> تگ <code><pre> </code> برای نمایش متن به‌صورت پیش‌فرمات‌شده استفاده می‌شود. این تگ به مرورگر دستور می‌دهد که فضاها و خطوط جدید موجود در متن را دقیقاً همان‌طور که در کد نوشته شده‌اند، نمایش دهد. معمولاً از این تگ برای نمایش کدهای برنامه‌نویسی یا محتوایی که نیاز به قالب‌بندی دقیق دارد، استفاده می‌شود. </p> <h3>تگ style</h3> <p> تگ <code><style> </code> برای نوشتن استایل‌های CSS در داخل سند HTML استفاده می‌شود. با استفاده از این تگ، می‌توان استایل‌های مربوط به اجزای صفحه را مستقیماً در خود HTML تعریف کرد. </p> <h3>تگ q</h3> <p> تگ <code><q> </code> برای نمایش نقل‌قول‌های کوتاه به کار می‌رود. محتوای داخل این تگ به‌طور خودکار با علامت نقل‌قول (") محصور می‌شود. </p> <h3>تگ u</h3> <p> تگ <code><u> </code> برای زیرخط‌دار کردن متن استفاده می‌شود. </p> <h3>تگ del</h3> <p> تگ <code><del> </code> برای نمایش متنی که حذف شده یا دیگر معتبر نیست، به کار می‌رود. این تگ معمولاً متن را به‌صورت خط‌خورده نمایش می‌دهد. </p> <h2>بخش‌بندی صفحه با لینک</h2> <p> گاهی لازم است که یک صفحه بزرگ وب به بخش‌های مختلفی تقسیم شود و کاربر بتواند با استفاده از لینک‌ها به بخش‌های مختلف صفحه هدایت شود. این کار با استفاده از لینک‌های درونی (Anchor Links) امکان‌پذیر است که با استفاده از شناسه‌های اختصاصی (ID) در HTML صورت می‌گیرد. </p> <h2>ویژگی‌های جدید تگ‌ها</h2> <p> در این قسمت، به بررسی چند صفت مهم که می‌توانند در تگ‌های HTML استفاده شوند، می‌پردازیم: </p> <h3>صفت title</h3> <p> صفت <code>title </code> متنی را تعیین می‌کند که هنگام قرار گرفتن نشانگر موس روی یک عنصر HTML نمایش داده می‌شود. این ویژگی می‌تواند برای توضیح دادن محتوای لینک یا یک عنصر دیگر به‌کار رود. </p> <h3>صفت target</h3> <p> صفت target تعیین می‌کند که لینک یا فرم در کجا باز شود. به‌عنوان مثال، با تنظیم "target="_blank لینک در یک زبانه یا پنجره جدید مرورگر باز می‌شود. </p> <h3>صفت lang</h3> <p> صفت lang زبان محتوای داخل تگ را مشخص می‌کند. این ویژگی می‌تواند به موتورهای جستجو و مرورگرها کمک کند تا محتوای سایت را بهتر پردازش کنند. </p> <h3>صفت alt</h3> <p> صفت alt برای توصیف تصاویر استفاده می‌شود. این صفت به‌عنوان جایگزین متنی برای تصویر عمل می‌کند و در صورتی که تصویر بارگذاری نشود، این متن نمایش داده می‌شود. همچنین صفت alt برای بهبود دسترس‌پذیری و سئو نیز اهمیت دارد. </p> <p> در قسمت‌های بعدی، به بررسی عمیق‌تر تگ‌ها و مفاهیم دیگر کد نویسی خواهیم پرداخت. <br /> همچنین در قسمت چهارم کد نویسی را شروع و ابزار های متنوع را معرفی و استفاده میکنیم. <br /> در قسمت پنجم با لیست ها و متا تگ ها کار میکنیم </p> پایان <a href='https://blogfreedom.ir/view_post.php?post_id=47'>قسمت بعدی</a>

(1)

systemdown

2024-10-06 04:25:23

How to Make a Phone Vibrate Using JavaScript

<p>In this tutorial, we’ll explore how to trigger the vibration function on a smartphusing JavaScript. This feature can be useful for creating more interactive and respweb applicati, particularly when targeting mobile users. Let’s dive into the details of how this can be implemented effectively.</p> <h2>1. Introduction to the Vibration API</h2> <p>The Vibration API is a simple yet powerful feature available in modern web browsers that allows you to cthe vibration functiof a device. This API is primarily used on mobile devices, as most desktops do not have a vibration feature.</p> <p>The API is straightforward and cof a single method: <code>navigator.vibrate()</code>. When this method is called, it triggers the vibration of the device for a specified duration.</p> <h2>2. Basic Usage of the Vibration API</h2> <p>The syntax of the <code>vibrate()</code> method is as follows:</p> <code>navigator.vibrate(pattern);</code> <p>Here, <code>pattern</code> can be:</p> <ul> <li>A single number representing the duration of vibration in millisec.</li> <li>An array of numbers where odd indices represent vibration durati, and even indices represent pauses.</li> </ul> <p>For example:</p> <code>// Vibrate for 500 millisec<br>navigator.vibrate(500);</code> <code>// Vibrate for 200ms, pause for 100ms, then vibrate for 200ms again<br>navigator.vibrate([200, 100, 200]);</code> <h2>3. Practical Examples</h2> <h3>1. Simple Vibration on Button Click</h3> <p>Let’s start with a basic example where we trigger a vibration when the user clicks a button.</p> <code><button>Vibrate</button></code> <h3>2. Patterned Vibration</h3> <p>You can create more complex vibration patterns by using an array of numbers. Each odd index in the array defines a vibration duration, and each even index defines a pause.</p> <code><button>Vibrate Pattern</button></code> <h2>4. Stopping Vibration</h2> <p>To stop a vibration that is currently in progress, you can call the <code>vibrate()</code> method with a value of <code>0</code> or an empty array:</p> <code>navigator.vibrate(0);<br>// Or<br>navigator.vibrate([]);</code> <h2>5. Checking Browser Support</h2> <p>Not all browsers or devices support the Vibration API. Before using the vibration feature, it’s a good practice to check if the API is supported:</p> <code> if ("vibrate" in navigator) {<br>   c.log("Vibration API is supported");<br> } else {<br>   c.log("Vibration API is not supported");<br> } </code> <h2>6. Real-World Use Cases</h2> <ul> <li>Notificati: Trigger a short vibration when receiving a notification on a web app.</li> <li>Games: Enhance user experience by adding vibration feedback when interacting with game elements.</li> <li>Alerts: Alert users to critical updates or warnings by using a distinctive vibration pattern.</li> </ul> <h2>7. Cand Best Practices</h2> <ul> <li>Battery C: Frequent or prolvibratican drain the device's battery quickly. Use vibratisparingly.</li> <li>User Experience: Excessive vibratican be annoying or distracting. Always provide users with the option to disable this feature.</li> <li>Accessibility: Keep in mind that some users may rely on vibratias part of their accessibility settings. Ensure that your application respects these settings.</li> </ul> <h2>C</h2> <p>The Vibration API in JavaScript is a simple yet effective way to enhance the interactivity of your web applicati, especially for mobile users. Whether you're creating a game, building notificati, or just adding a bit of flair to your UI, the ability to trigger vibratican significantly improve user engagement. Remember to use this feature judiciously to ensure a positive user experience.</p>

(0)

systemdown

2024-10-06 12:13:30

آموزش برنامه نویسی وب🌐: بخش html قسمت سوم

<p> در این قسمت از آموزش برنامه نویسی وب کمی مفاهیم عمیق (تگ های سطح بلاک، پیشفرض مرورگر، استفاده از نقل قول ها) و همچنین تگ های بیشتر (del، u، ins، sub، sup، q) و کامنت ها در اچ تی ام ال و سیستم رنگ ها (RGB, HSL , HEX) رو مورد بررسی قرار میدهیم. </p> <p> آماده اید برای آموزش؟ <br /> توصیه میشود در هنگام دیدن آموزش بعد هر مرحله خودتون اون رو تست کنید و تغییر بدهید، <br /> همچنین سعی میشود در آخر هر پست تمرین هایی داده بشود. </p> <h2>سطح بلاک چیست؟</h2> <p> تگ‌های <strong>سطح بلاک</strong> به عناصری در HTML گفته می‌شود که به‌صورت خودکار یک بلاک جدید در صفحه ایجاد می‌کنند. این عناصر معمولاً فضای کل عرض صفحه را می‌گیرند و از یک خط جدید شروع می‌شوند. مثلاً تگ‌های <div>, <p> و <h1> همگی سطح بلاک هستند. </p> <h3>مثال تگ‌های سطح بلاک</h3> <code> <div> <br>   <h1>این یک تگ سطح بلاک است</h1> <br>   <p>این یک پاراگراف است که درون یک بلاک قرار دارد.</p> <br> </div> </code> <h2>بررسی تگ‌های دیگر HTML</h2> <p>برخی تگ‌های دیگر که می‌توانید در HTML استفاده کنید:</p> <ul> <li><code> <del> </code>: برای نشان دادن متن حذف شده (محروم).</li> <li><code> <u> </code>: برای خط زیرین کردن متن.</li> <li><code> <ins> </code>: برای نشان دادن متن اضافه شده.</li> <li><code> <sub> </code>: برای نمایش زیرنویس (نوشته زیر متن).</li> <li><code> <sup> </code>: برای نمایش بالانویس (نوشته بالای متن).</li> <li><code> <q> </code>: برای نمایش نقل قول‌ها.</li> </ul> <h3>مثال تگ‌های مختلف</h3> <code> <p><del>این متن حذف شده است.</del></p> <br> <p><u>این متن خط زیرین دارد.</u></p> <br> <p><ins>این متن اضافه شده است.</ins></p> <br> <p>آب <sub>H<sub>2</sub>O</sub> یعنی آب.</p> <br> <p>توان ۲: ۳<sup>2</sup></p> <br> <p><q>این یک نقل قول است.</q></p> </code> <a class='btn' href='https://blogfreedom.ir/editor-web'>ادیتور رو باز کنید.</a> <h2>کامنت‌ها در HTML</h2> <p>برای نوشتن توضیحات یا یادداشت‌هایی که در صفحه دیده نشوند، از کامنت‌ها در HTML استفاده می‌شود:</p> <code>  </code> <h2>سیستم رنگ‌ها</h2> <a title='مقاله کامل رنگ ها در اچ تی ام ال' href='https://blogfreedom.ir/view_post.php?post_id=49'> مقاله کامل رنگ ها در اچ تی ام ال</a> <p>در HTML می‌توان از سه نوع سیستم رنگ برای تعیین رنگ‌ها استفاده کرد:</p> <ul> <li><strong>RGB:</strong> مقدار رنگ قرمز، سبز و آبی، مانند <code>rgb(255, 0, 0) </code> برای قرمز.</li> <li><strong>HSL:</strong> مقدار رنگ، اشباع و روشنایی، مانند <code>hsl(0, 100%, 50%) </code> برای قرمز.</li> <li><strong>HEX:</strong> مقدار هگزادسیمال، مانند <code>#FF0000 </code> برای قرمز.</li> </ul> <h3>مثال سیستم رنگ‌ها</h3> <code> <div style="background-color: rgb(255, 0, 0);"> <br>   این یک بلاک با رنگ قرمز از طریق RGB است. <br> </div> <br> <div style="background-color: hsl(0, 100%, 50%);"> <br>   این یک بلاک با رنگ قرمز از طریق HSL است. <br> </div> <br> <div style="background-color: #FF0000;"> <br>   این یک بلاک با رنگ قرمز از طریق HEX است. <br> </div> </code> <h2>پیش‌فرض مرورگر</h2> <p>برای مشاهده پیش‌فرض مرورگر از کد زیر استفاده کنید:</p> <code><h1>عنوان 1</h1> <p>این یک پاراگراف است که با استایل پیش‌فرض مرورگر نمایش داده می‌شود.</p> <ul> <li>آیتم 1</li> <li>آیتم 2</li> </ul> </code> <h2>استفاده از صفات width و height </h2> <code><img src="image.jpg" width="300" height="200" alt="نمونه تصویر"> </code> <h2>نقل قول‌ها</h2> <p>از تگ‌های <q> و <blockquote>برای نقل قول استفاده می‌شود:</p> <code><p>گفته شد: <q>هیچ جایگزینی برای سخت کار کردن وجود ندارد.</q></p> <blockquote> این یک نقل قول طولانی است که در یک بلاک جداگانه نوشته شده و برای جملات طولانی یا چند پاراگراف استفاده می‌شود. </blockquote> </code> <h2>استفاده از سایر تگ‌ها</h2> <code><p>این یک <strong>متن مهم</strong> است.</p> <p>این یک <em>متن تأکید شده</em> است.</p> </code> <h2>مخفف‌ها و ارجاعات</h2> <code><p>این یک <abbr title="Hypertext Markup Language">HTML</abbr> است.</p> <p>این نقل قول از <cite>کتاب هنر برنامه‌نویسی</cite> گرفته شده است.</p> <p>این متن <mark>برجسته</mark> شده است.</p> </code> <h2>استفاده از width و height با CSS</h2> <code><div class="box"></div> <style> .box { width: 300px; height: 200px; background-color: lightblue; } </style> </code> منظور از .box کلاس تعیین شده برای المنت است میتوانید از نام تگ بجای آن استفاده کنید. <h2>تمرین‌های این قسمت</h2> <h3>تمرین 1: استفاده از تگ<mark></h3> <p> این متن برجسته شده است و بخش دیگری از </mark> متن <mark> هم نشانه‌گذاری شده. </p> <code> <p><br>   این متن <mark style="color: red;">برجسته شده</mark> است و <br>   <mark style="color: red;">بخش دیگری از متن</mark> هم نشانه‌گذاری شده.<br> </p> </code> <h3>تمرین 2: استفاده از تگ <blockquote></h3> "این یک نقل قول طولانی است که می‌تواند شامل چندین جمله باشد و در یک بلاک مجزا قرار می‌گیرد. استفاده از این نوع نقل قول برای جملات طولانی مناسب است." <code> <blockquote><br>   "این یک نقل قول طولانی است که می‌تواند شامل چندین جمله باشد و در یک بلاک مجزا قرار می‌گیرد. استفاده از این نوع نقل قول برای جملات طولانی مناسب است."<br> </blockquote> </code> <h3>تمرین 3: استفاده از تگ <sub>و <sup></h3> <p>آب: H<sub>2</sub>O</p> <p>توان 2: 3<sup>2</sup></p> <code> <p>آب: H<sub>2</sub>O</p><br> <p>توان ۲: 3<sup>2</sup></p> </code> <h3>تمرین 4: استفاده از تصویر با صفات width و height</h3> <img src="https://blogfreedom.ir/icon-small.png" width="300" height="200" alt="نمونه تصویر"> <code> <img src="https://blogfreedom.ir/icon-small.png" width="300" height="200" alt="نمونه تصویر"> </code> <h3>بلاکی با رنگ پس‌زمینه</h3> <code> <div class="box">این یک بلاک با رنگ آبی است.</div> </code> <a href='https://blogfreedom.ir/view_post.php?post_id=44'>قسمت قبلی</a> <br /> <a href='https://blogfreedom.ir/view_post.php?post_id=48'>قسمت بعدی</a>

(0)

systemdown

2024-10-11 03:10:13

آموزش برنامه نویسی وب🌐: بخش html قسمت چهارم

<p> در این قسمت از آموزش به سراغ کمی css برای تغییر ظاهر وبسایتمون میریم همچنین فونت ها رو کمی کار میکنیم. </p> <br /> <h2> مقدمه </h2> <p> سری آموزش برنامه نویسی وب در وبلاگ آزادی، سعی میکند تمام مهارت هایی که یک برنامه‌نویس یا طراح وب نیاز دارد را آموزش دهد. </p> <p> در این قسمت (چهارم) css درون خطی و داخلی رو کمی یاد میگیریم و به سراغ ساختن جدول هم میریم. </p> <h2> ساخت جدول در html </h2> <p>در دنیای وب، جدول‌ها یکی از ابزارهای مهم برای نمایش داده‌ها به صورت منظم و ساختار یافته هستند. در این قسمت، به بررسی نحوه ساخت جدول‌ها در HTML و ویژگی‌های مختلف آن‌ها خواهیم پرداخت.</p> <h3>ساختار پایه جدول</h3> <p>برای ایجاد یک جدول در HTML، از تگ‌های زیر استفاده می‌شود:</p> <ul> <li><table>: برای شروع جدول، تمامی تگ های مربوط به جدول داخل این تگ نوشته میشوند.</li> <li><tr> : برای ایجاد یک ردیف در جدول.</li> <li><td>: برای ایجاد یک سلول داده.</li> <li><th>: برای ایجاد یک سلول عنوان (سرفصل).</li> </ul> <h4>مثال ساده از یک جدول</h4> <p>در اینجا یک مثال ساده از جدول ارائه شده است:</p> <code dir='ltr'> <table border="1"><br> <tr><br> <th>نام</th><br> <th>سن</th><br> <th>شهر</th><br> </tr><br> <tr><br> <td>علی</td><br> <td>25</td><br> <td>تهران</td><br> </tr><br> <tr><br> <td>سارا</td><br> <td>30</td><br> <td>اصفهان</td><br> </tr><br> </table> </code> <h3>ادغام سلول‌ها</h3> <p>HTML به شما این امکان را می‌دهد که سلول‌ها را ادغام کنید تا نمایش بهتری داشته باشید. این کار با استفاده از صفت های colspan و rowspan انجام می‌شود.</p> <p> برای ادغام ردیف ها از rowspan و برای ادغام ستون ها از colspan استفاده میکنیم. </p> <p> هر مقداری که به این صفات در تگ th , td بدید به همون اندازه با سلول های جلویی در جهت جدول ادغام خواهد شد. به مثال زیر دقت کنید: </p> <h4>مثال ادغام سلول‌ها</h4> <code dir='ltr'> <table border="1"><br> <tr><br> <th>نام</th><br> <th colspan="2">جزئیات</th><br> </tr><br> <tr><br> <td>علی</td><br> <td>سن: 25</td><br> <td>شهر: تهران</td><br> </tr><br> <tr><br> <td>سارا</td><br> <td rowspan="2">سن: 30</td><br> <td>شهر: اصفهان</td><br> </tr><br> <tr><br> <td>حمید</td><br> <td>شهر: مشهد</td><br> </tr><br> </table> </code> <h3>اضافه کردن عنوان به جدول</h3> <p>شما می‌توانید با استفاده از تگ <caption>یک عنوان به جدول اضافه کنید:</p> <h3>مثال جدول با عنوان</h3> <code dir='ltr'> <table border="1"><br> <caption>اطلاعات کاربران</caption><br> <tr><br> <th>نام</th><br> <th>سن</th><br> <th>شهر</th><br> </tr><br> <tr><br> <td>علی</td><br> <td>25</td><br> <td>تهران</td><br> </tr><br> <tr><br> <td>سارا</td><br> <td>30</td><br> <td>اصفهان</td><br> </tr><br> </table> </code> <h3>مثال جدول </h3> <code dir='ltr'> <table><br> <tr><br> <th>نام</th><br> <th>سن</th><br> <th>شهر</th><br> </tr><br> <tr><br> <td>علی</td><br> <td>25</td><br> <td>تهران</td><br> </tr><br> <tr><br> <td>سارا</td><br> <td>30</td><br> <td>اصفهان</td><br> </tr><br> </table> </code> <h3>نتیجه‌گیری بخش جدول</h3> <p>جدول‌ها در HTML ابزاری قدرتمند برای نمایش داده‌ها به صورت منظم هستند. با استفاده از تگ‌های مناسب و استایل‌دهی می‌توانید جداول زیبا و کاربردی بسازید. </p> <h2>ویژگی‌های قلم (Font) در CSS</h2> <p>CSS (Cascading Style Sheets) ابزاری قدرتمند برای طراحی و استایل‌دهی به صفحات وب است. یکی از عناصر مهم در طراحی وب، قلم (Font) است. در این مقاله به بررسی ویژگی‌های مختلف قلم در CSS می‌پردازیم.</p> <h3>۱. ویژگی font-family</h3> <p>این ویژگی برای تعیین نوع قلم استفاده می‌شود. با استفاده از font-family می‌توانیم یک یا چند قلم را مشخص کنیم. مرورگرها به ترتیب از قلم‌هایی که معرفی شده‌اند استفاده می‌کنند.</p> <p><strong>نکته:</strong> همیشه بهتر است از چندین قلم به عنوان گزینه پشتیبان استفاده کنید.</p> <h4>مثال:</h4> <code dir='ltr'> p {<br> font-family: 'Times New Roman', Verdana, Courier;<br> } </code> <h3>۲. ویژگی font-size</h3> <p>این ویژگی برای تعیین اندازه قلم (سایز فونت) استفاده می‌شود. اندازه فونت می‌تواند به واحدهای مختلفی نظیر پیکسل px، em و درصد % مشخص شود.</p> <ul> <li>px: واحد ثابت است.</li> <li>em: واحدی نسبی است که به اندازه فونت پیش‌فرض مرورگر (معمولاً ۱۶ پیکسل) وابسته است.</li> <li>%: درصدی از اندازه فونت والد خود را نشان می‌دهد.</li> </ul> <h4>مثال:</h4> <code dir='ltr'> h1 {<br> font-size: 24px;<br> }<br> <br> p {<br> font-size: 1.5em;<br> }<br> <br> .small-text {<br> font-size: 80%;<br> } </code> <h3>۳. ویژگی font-weight</h3> <p>این ویژگی برای مشخص کردن وزن فونت (میزان توپر بودن) استفاده می‌شود. مقادیر قابل قبول برای این ویژگی عبارتند از:</p> <ul> <li>normal: حالت عادی</li> <li>bold: توپر</li> <li>bolder: توپرتر از bold</li> <li>lighter: نازک‌تر از normal</li> <li>عدد: مقادیر عددی از ۱۰۰ تا ۹۰۰</li> </ul> <h4>مثال:</h4> <code dir='ltr'> strong {<br> font-weight: bold;<br> }<br> <br> h2 {<br> font-weight: 700;<br> }<br> <br> .light {<br> font-weight: 300;<br> } </code> <h3>۴. ویژگی text-align</h3> <p>این ویژگی برای ترازبندی متن درون عناصر استفاده می‌شود. مقادیر قابل قبول عبارتند از:</p> <ul> <li>left: تراز از سمت چپ</li> <li>center: تراز وسط</li> <li>right: تراز از سمت راست</li> <li>justify: تراز متقارن</li> </ul> <h4>مثال:</h4> <code dir='ltr'> h1 {<br> text-align: center;<br> }<br> <br> p {<br> text-align: left;<br> }<br> <br> .right-align {<br> text-align: right;<br> } </code> <h3>۵. ویژگی line-height </h3> <p>این ویژگی برای تعیین فاصله بین خطوط متن استفاده می‌شود. استفاده از line-height می‌تواند به خوانایی متن کمک کند.</p> <h4>مثال:</h4> <code dir='ltr'> p {<br> line-height: 1.5;<br> } </code> <h3>۶. ویژگی text-transform</h3> <p>این ویژگی برای تغییر حالت حروف (حروف بزرگ، کوچک، و ...) استفاده می‌شود.</p> <ul> <li>uppercase: همه حروف را به بزرگ تبدیل می‌کند.</li> <li>lowercase: همه حروف را به کوچک تبدیل می‌کند.</li> <li>capitalize: حرف اول هر کلمه را بزرگ می‌کند.</li> </ul> <h4>مثال:</h4> <code dir='ltr'> .title {<br> text-transform: uppercase;<br> } </code> <h2>نتیجه‌گیری بخش فونت</h2> <p>با استفاده از ویژگی‌های مختلف CSS برای قلم، می‌توانید طراحی متنی زیبا و کاربرپسند در وبسایت خود داشته باشید. این ویژگی‌ها به شما کمک می‌کند تا متن‌ها را با توجه به نیاز خود استایل‌دهی کنید و تجربه کاربری بهتری را برای بازدیدکنندگان سایت خود فراهم آورید. به یاد داشته باشید که انتخاب قلم مناسب و سایز آن تأثیر زیادی بر روی زیبایی و خوانایی صفحات وب دارد.</p> پایان <a href='https://blogfreedom.ir/view_post.php?post_id=47'>قسمت قبلی</a> <a href='https://blogfreedom.ir/view_post.php?post_id=54'>قسمت بعدی</a>

(0)

systemdown

2024-10-11 06:52:10

راهنمای جامع استفاده از رنگ‌ ها در HTML

<p> در HTML و CSS، روش‌های مختلفی برای تعریف رنگ‌ها وجود دارد. در این پست، با این روش‌ها آشنا می‌شویم و مثال‌هایی از هر کدام را می‌بینیم. </p> <p>در کل با 6 روش میتوانیم، رنگ مورد نظر خود را به مرورگر اعلام کنیم که RGB و HEX رایج ترین آن ها هستند.</p> <h2>1. استفاده از نام رنگی (Color Names)</h2> <p>در HTML می‌توانید از نام‌های استاندارد رنگ برای تنظیم رنگ استفاده کنید. مثال:</p> <code> <body style="background-color: lightblue;"><br>   <h1 style="color: darkred;">این یک هدر با رنگ قرمز تیره است.</h1><br>   <p style="color: green;">این یک پاراگراف با رنگ سبز است.</p><br> </body> </code> <h2>2. استفاده از کد هگزادسیمال (Hexadecimal)</h2> <p>کدهای هگزادسیمال یکی از روش‌های محبوب برای تعریف رنگ‌ها هستند. در این روش از ۶ کاراکتر شامل دو کاراکتر برای هر یک از رنگ‌های قرمز، سبز و آبی استفاده می‌شود. مثال:</p> <code> <body style="background-color: #f0f0f0;"><br>   <h1 style="color: #ff5733;">این یک هدر با رنگ هگزادسیمال است.</h1><br>   <p style="color: #33ff77;">این یک پاراگراف با رنگ سبز است.</p><br> </body> </code> <h2>3. استفاده از رنگ‌های RGB (Red, Green, Blue)</h2> <p>در این روش، با استفاده از سه مقدار بین ۰ تا ۲۵۵، شدت هر یک از رنگ‌های قرمز (R)، سبز (G) و آبی (B) را تنظیم می‌کنیم. مثال:</p> <code> <body style="background-color: rgb(240, 240, 240);"><br>   <h1 style="color: rgb(255, 87, 51);">این یک هدر با رنگ RGB است.</h1><br>   <p style="color: rgb(51, 255, 119);">این یک پاراگراف با رنگ سبز است.</p><br> </body> </code> <h2>4. استفاده از رنگ‌های RGBA (Red, Green, Blue, Alpha)</h2> <p>رنگ‌های RGBA مشابه RGB هستند، اما یک کانال چهارم (آلفا) به آنها اضافه شده که میزان شفافیت رنگ را تنظیم می‌کند. مقدار آلفا بین ۰ (شفاف) تا ۱ (غیر شفاف) است. مثال:</p> <code> <body style="background-color: rgba(240, 240, 240, 1);"><br>   <h1 style="color: rgba(255, 87, 51, 0.8);">این یک هدر با رنگ RGBA است.</h1><br>   <p style="color: rgba(51, 255, 119, 0.5);">این یک پاراگراف با رنگ نیمه شفاف است.</p><br> </body> </code> <h2>5. استفاده از رنگ‌های HSL (Hue, Saturation, Lightness)</h2> <p>مدل HSL از سه پارامتر تشکیل شده است: Hue (عددی بین ۰ تا ۳۶۰ که رنگ اصلی را مشخص می‌کند)، Saturation (درصد شدت رنگ) و Lightness (درصد روشنایی). مثال:</p> <code> <body style="background-color: hsl(120, 100%, 90%);"><br>   <h1 style="color: hsl(0, 100%, 50%);">این یک هدر با رنگ HSL است.</h1><br>   <p style="color: hsl(240, 100%, 50%);">این یک پاراگراف با رنگ آبی است.</p><br> </body> </code> <h2>6. استفاده از رنگ‌های HSLA (Hue, Saturation, Lightness, Alpha)</h2> <p>HSLA مانند HSL است، اما با یک کانال شفافیت (آلفا) اضافه شده که شفافیت را کنترل می‌کند. مثال:</p> <code> <body style="background-color: hsla(120, 100%, 90%, 1);"><br>   <h1 style="color: hsla(0, 100%, 50%, 0.8);">این یک هدر با رنگ HSLA است.</h1><br>   <p style="color: hsla(240, 100%, 50%, 0.5);">این یک پاراگراف با رنگ نیمه شفاف است.</p><br> </body> </code> <h2>نتیجه‌گیری</h2> <p>در این پست، روش‌های مختلف تعریف رنگ‌ها در HTML را بررسی کردیم. از نام‌های رنگی گرفته تا کدهای هگزادسیمال، RGB، RGBA، HSL و HSLA. هر یک از این روش‌ها می‌توانند در موقعیت‌های خاص مورد استفاده قرار بگیرند تا شما بتوانید رنگ‌های دقیق و دلخواه خود را در طراحی وب‌سایتتان به کار ببرید.</p>

(0)

systemdown

2024-10-15 10:48:33

آموزش برنامه نویسی وب🌐: بخش html قسمت پنجم (اتمام جداول در اچ تی ام ال)

در قسمت قبلی، جداول و ویژگی های مربوط به قلم در CSS رو یاد گرفتیم. <p> در این قسمت قصد داریم جدول ها رو بطور کامل یاد بگیریم</p> <li> اگر قسمت قبلی رو ندید روی لینک زیر کلیک کنید. </li> <a href='https://blogfreedom.ir/view_post.php?post_id=48' title='قسمت چهارم آموزش برنامه نویسی وب'> قسمت قبلی (چهارم)</a> <img src='https://blogfreedom.ir/uploaded/_ac02a8d3-8b34-40c8-bac4-bf23d5c0f3f6.jpg' alt='gang Programmer' width='50%'> <figcaption>تصویر بالا نوع جدید از برنامه نویسان کشف شده در ماتریکس که به سیگما بودن و گنگ بودن علاقه زیادی دارند را توصیف میکند. </figcaption> <p> خب بریم سراغ آموزش این قسمت..... </p> <h2> سایز بندی جداول </h2> <p> عرض ستون جدول ها رو میتوان با صفت width تعیین کرد. برای مثال میتوان بعنوان مقدار به این صفت مقادیر زیر رو داد. </p> <ul> <li>70%: 70 درصد عرض جدول رو میگیرد</li> <li>70px: عرض ستون جدول 70 پیکسل میشود. </li><li>...</li> </ul> <p>به مثال زیر توجه کنید که جدول صد در صد عرض صفحه رو میگیرد و ستون اول 70 درصد جدول را میگیرد.</p> <code> <table width='100%' border='5px'> <tr> <th width='70%'>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>test 1</td> <td>test 2</td> <td>test 3</td> </tr> <tr> <td>test 4</td> <td>test 5</td> <td>test 6</td> </tr> </table> </code> <p> برای تغییر عرض یا ارتفاع یک سطر یا ستون فقط کافی صفت width با مقدار عرض دلخواهمون یا height با ارتفاع دلخواهمون به یکی از سلول های اون سطر یا ستون بدیم. </p> <p> در مثال بالا th دوم در tr اول که عنوان ستون دوم است صفت width رو با مقدار 70 درصد اعمال کردیم. کد بصورت زیر نمایش داده خواهد شد. </p> <table width='100%' border='3px'> <tr> <th width='70%'>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>test 1</td> <td>test 2</td> <td>test 3</td> </tr> <tr> <td>test 4</td> <td>test 5</td> <td>test 6</td> </tr> </table> <p> همانطور که در بالا دیدید ستون اول عرض بیشتری (%70) را نسبت به بقیه ستون ها دارد. همین عمل رو میتونید بر روی سطر ها انجام بدید. </p> <code> <table width='100%' border='5px'> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td height='70px'>test 1</td> <td>test 2</td> <td>test 3</td> </tr> <tr> <td>test 4</td> <td>test 5</td> <td>test 6</td> </tr> </table> </code> <h2>عناوین جداول در اچ تی ام ال </h2> <p> عنوان ها در جدول ها میتواند در سطر ها یا ستون ها یا هر دو باشد به مثال های زیر توجه کنید. </p> <table style="width:30%"> عناوین فقط در سطر ها <tr> <th>نام</th> <td>نوح</td> <td>نامعلوم</td> </tr> <tr> <th>نام خانوادگی</th> <td>عدم موجودیت</td> <td>بی نام خانوادگی</td> </tr> <tr> <th>سن</th> <td>500</td> <td>123</td> </tr> </table> <table width='30%'> عناوین فقط در ستون ها و سطر ها <tr> <th></th> <th>شنبه </th> <th>یکشنبه</th> <th>دوشنبه</th> </tr> <tr> <th>زنگ اول</th> <td>ورزش</td> <td>کار و فناوری</td> <td>تاریخ</td> </tr> <tr> <th>زنگ دوم</th> <td>ریاضی</td> <td>هنر</td> <td>علوم</td> </tr> </table> <table width='30%'> عناوین فقط در ستون ها <tr> <th>شنبه </th> <th>یکشنبه</th> <th>دوشنبه</th> </tr> <tr> <td>ورزش</td> <td>کار و فناوری</td> <td>تاریخ</td> </tr> </table> <p> کد زیر رو بررسی کنید. </p> <code> <table style="width:30%"> <caption> عناوین فقط در سطر ها </caption> <tr> <th>نام</th> <td>نوح</td> <td>نامعلوم</td> </tr> <tr> <th>نام خانوادگی</th> <td>عدم موجودیت</td> <td>بی نام خانوادگی</td> </tr> <tr> <th>سن</th> <td>500</td> <td>123</td> </tr> </table> <table width='30%'><caption> عناوین فقط در ستون ها و سطر ها </caption> <tr> <th></th> <th>شنبه </th> <th>یکشنبه</th> <th>دوشنبه</th> </tr> <tr> <th>زنگ اول</th> <td>ورزش</td> <td>کار و فناوری</td> <td>تاریخ</td> </tr> <tr> <th>زنگ دوم</th> <td>ریاضی</td> <td>هنر</td> <td>علوم</td> </tr> </table> <table width='30%'> <caption> عناوین فقط در ستون ها </caption> <tr> <th>شنبه </th> <th>یکشنبه</th> <th>دوشنبه</th> </tr> <tr> <td>ورزش</td> <td>کار و فناوری</td> <td>تاریخ</td> </tr> </table> </code> <p> هر جا نیاز به عنوان داریم از تگ th استفاده میکنیم. </p> <h2> تگ caption </h2> <p> تگ caption بالافاصله بعد از ایجاد تگ table نوشته میشود و متنی را در زیر یا بالای جدول نمایش میدهد و معمولا برای توصیف جدول استفاده میشود. </p> <p> همچنین میتوانیم با استفاده از ویژگی caption-side سی اس اس بالای جدول یا پایین بودن آن را مشخص کنیم. این ویژگیِ سی اس اس هست که در صفت style نوشته میشود و دو مقدار bottom یا top دارد. </p> <p> style='caption-side:bottom;' <br /> این ویژگی را وقتی به تگ caption اضافه کنیم توضیحات جدول در پایین صفحه نمایش داده میشود و اگر بجای bottom ، top را بزاریم توضیحات جدول در بالای جدول نمایش داده خواهد شد. </p> <h2> تگ های tbody، thead، tfoot </h2> <p> تگ های فوق برای نشان دادن، ساختار جداول استفاده میشود. و به شما اجازه میدهند که بخش عنوان و بدنه و پانویس جدول هاتون رو مشخص کنید. </p> <p> اگر علاقه مند به یادگیری این بخش هستید با مراجعه به سایت MDN، مقاله کامل رو بخونید. <a href='https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced' title='ساختار دهی به جداول در اچ تی ام ال'></a> لینک به صفحه کامل مقاله به زبان انگلیسی </p> <h2 id='border-table'>آموزش ویژگی‌های border-spacing و border-collapse</h2> <p>ویژگی‌های border-spacing و border-collapse در HTML برای تنظیم فاصله بین سلول‌های جدول و کنترل نحوه نمایش خطوط مرزی سلول‌ها استفاده می‌شوند. این دو ویژگی به شما امکان می‌دهند تا ظاهر جداول را به شکل دقیق‌تری سفارشی‌سازی کنید.</p> <h2>ویژگی border-spacing</h2> <p>ویژگی border-spacing برای تعیین فاصله بین مرزهای سلول‌های جدول استفاده می‌شود. به صورت پیش‌فرض، مرورگرها فاصله‌ای بین مرزهای سلول‌های جدول ایجاد می‌کنند، اما شما می‌توانید با استفاده از این ویژگی فاصله را به مقدار دلخواه تغییر دهید. مثالی از استفاده از این ویژگی:</p> <p>مثال:</p> <code> <table style="border-spacing: 15px;"> <br>    <tr><br>       <td>سلول ۱</td><br>       <td>سلول ۲</td><br>    </tr><br>    <tr><br>       <td>سلول ۳</td><br>       <td>سلول ۴</td><br>    </tr><br> </table> </code> <p>در این مثال، فاصله‌ی ۱۵ پیکسل بین سلول‌های جدول ایجاد می‌شود. هر چه مقدار `border-spacing` بیشتر باشد، فاصله بین سلول‌ها بیشتر خواهد شد.</p> <h3>ویژگی border-collapse</h3> <p>ویژگی border-collapse مشخص می‌کند که آیا مرزهای سلول‌های جدول جداگانه نمایش داده شوند یا به صورت یکپارچه. مقدار پیش‌فرض این ویژگی separate است که مرزهای هر سلول به صورت جداگانه نمایش داده می‌شوند. اگر بخواهید مرزهای سلول‌ها با هم ادغام شوند، باید از مقدار collapse استفاده کنید. مثالی از این ویژگی:</p> <p>مثال:</p> <code> <table style="border-collapse: collapse;"> <br>    <tr><br>       <td>سلول ۱</td><br>       <td>سلول ۲</td><br>    </tr><br>    <tr><br>       <td>سلول ۳</td><br>       <td>سلول ۴</td><br>    </tr><br> </table> </code> <p>با استفاده از border-collapse: collapse;، مرزهای سلول‌ها به هم متصل می‌شوند و فقط یک خط برای مرز بین سلول‌ها نمایش داده می‌شود.</p> <h2>زیباسازی جداول در HTML با استفاده از CSS</h2> <a href='https://blogfreedom.ir/view_post.php?post_id=55' title='مقاله کامل زیبا سازی جداول' > مقاله کامل زیبا سازی جداول در اچ تی ام ال </a> <br /> <a href='https://blogfreedom.ir/view_post.php?post_id=56'>قسمت بعدی </a>

(2)

systemdown

2024-10-18 07:54:21

آموزش برنامه نویسی وب🌐: بخش html قسمت ششم ( لیست ها در اچ تی ام ال)

<p> در این قسمت، لیست ها در اچ تی ام ال رو یاد خواهیم گرفت و تغییر استایل، لیست ها در CSS. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=54'>قسمت قبلی </a> <h2>لیست‌ها در HTML</h2> <p>در HTML سه نوع لیست اصلی وجود دارد که هر کدام کاربردهای خاص خود را دارند. این لیست‌ها شامل لیست مرتب (Ordered List)، لیست نامرتب (Unordered List) و لیست توصیفی (Description List) می‌باشند.</p> <h2>1. لیست مرتب (Ordered List)</h2> <p>لیست مرتب، لیستی است که آیتم‌های آن با ترتیب خاصی مانند اعداد یا حروف نمایش داده می‌شوند. برای ساخت این نوع لیست، از تگ <ol> استفاده می‌کنیم.</p> <code><ol> <li>Benz</li> <li>Audi</li> <li>Ford</li> </ol></code> <h3>تغییر نوع علامت‌گذاری لیست مرتب</h3> <p>به صورت پیش‌فرض، آیتم‌های لیست مرتب با اعداد دهدهی (1, 2, 3, ...) علامت‌گذاری می‌شوند. با استفاده از ویژگی list-style-type می‌توان این رفتار را تغییر داد. برخی از انواع علامت‌گذاری شامل موارد زیر هستند:</p> <ul> <li>decimal: اعداد دهدهی (پیش‌فرض)</li> <li>lower-alpha: حروف کوچک الفبای انگلیسی</li> <li>upper-alpha: حروف بزرگ الفبای انگلیسی</li> <li>lower-roman: اعداد رومی با حروف کوچک</li> <li>upper-roman: اعداد رومی با حروف بزرگ</li> </ul> <code><ol style="list-style-type:upper-roman;"> <li>Benz</li> <li>Audi</li> <li>Ford</li> </ol></code> <h2>2. لیست نامرتب (Unordered List)</h2> <p>لیست نامرتب، لیستی است که آیتم‌های آن بدون ترتیب خاصی و با استفاده از نمادهای گرافیکی مانند دایره یا مربع علامت‌گذاری می‌شوند. برای ساخت لیست نامرتب از تگ <ul> استفاده می‌کنیم.</p> <code><ul> <li>Benz</li> <li>Audi</li> <li>Ford</li> </ul></code> <h3>تغییر نوع علامت‌گذاری لیست نامرتب</h3> <p>به صورت پیش‌فرض، آیتم‌های لیست نامرتب با دایره توپر (●) نمایش داده می‌شوند. با استفاده از ویژگی list-style-type می‌توان نوع علامت‌گذاری را تغییر داد. برخی از انواع علامت‌گذاری شامل موارد زیر هستند:</p> <ul> <li>disc: دایره توپر (پیش‌فرض)</li> <li>circle: دایره توخالی</li> <li>square: مربع</li> </ul> <code><ul style="list-style-type:square;"> <li>Benz</li> <li>Audi</li> <li>Ford</li> </ul></code> <h2>3. لیست توصیفی (Description List)</h2> <p>لیست توصیفی برای نمایش مجموعه‌ای از واژه‌ها و توضیحات آن‌ها استفاده می‌شود. برای ساخت لیست توصیفی از تگ <dl> استفاده می‌کنیم و برای هر واژه از تگ <dt> و برای توصیف آن از تگ <dd> بهره می‌بریم.</p> <code><dl> <dt>Saipa</dt> <dd>Shahin</dd> <dd>Pride</dd> <dt>Toyota</dt> <dd>Prius</dd> <dd>GR Corolla</dd> </dl></code> <h2>استفاده از لیست‌های تو در تو</h2> <p>می‌توان درون هر لیست، لیست دیگری قرار داد. به عنوان مثال، درون یک لیست مرتب می‌توان لیست نامرتب یا بالعکس قرار داد.</p> <code><ol> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ol></code> <h2>سفارشی‌سازی بیشتر با تصاویر</h2> <p>اگر بخواهیم به جای نمادهای پیش‌فرض از یک تصویر دلخواه برای علامت‌گذاری استفاده کنیم، می‌توانیم از ویژگی list-style-image استفاده کنیم.</p> <code><ul style="list-style-image:url('icon.png');"> <li>Benz</li> <li>Audi</li> <li>Ford</li> </ul></code> <h2>حذف علامت‌گذاری</h2> <p>اگر بخواهیم آیتم‌های لیست بدون علامت‌گذاری نمایش داده شوند، کافیست ویژگی list-style-type را برابر با n قرار دهیم.</p> <code><ul style="list-style-type:n;"> <li>Benz</li> <li>Audi</li> <li>Ford</li> </ul></code> <a href='https://blogfreedom.ir/view_post.php?post_id=62' title='کمی css'>قسمت بعدی</a>

(0)

systemdown

2024-10-23 13:45:18

آموزش برنامه نویسی وب🌐: بخش html قسمت هفتم (پس زمینه، margin، padding)

<a href='https://blogfreedom.ir/view_post.php?post_id=56' title='لیست ها در اچ تی ام ال' >قسمت قبلی</a> <h2>تصویر پس‌زمینه، پدینگ، مارجین و بوردر در CSS</h2> <h3>1. تصویر پس‌زمینه (Background Image)</h3> <p>تصویر پس‌زمینه به شما این امکان را می‌دهد که از یک تصویر به عنوان پس‌زمینه عنصر خود استفاده کنید. شما می‌توانید تنظیمات مختلفی برای کنترل نحوه نمایش تصویر مانند اندازه، موقعیت و تکرار تصویر اعمال کنید.</p> <h4>مثال 1: استفاده ساده از تصویر پس‌زمینه</h4> <code> <div style="background-image: url('https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp'); height: 200px; width: 100%;"> <h2>تصویر پس‌زمینه ساده</h2> </div> </code> <h4>مثال 2: استفاده از تصویر و کنترل اندازه</h4> <code> <div style="background-image: url('https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp'); height: 300px; width: 100%; background-size: cover; background-position: center;"> <h2>تصویر پس‌زمینه با اندازه پوشش کامل</h2> </div> </code> <p>در مثال بالا، از <code>background-size: cover;</code> برای پر کردن تمام فضا استفاده شده است.</p> <h4>مثال 3: استفاده از چندین تصویر پس‌زمینه</h4> <code> <div style="background-image: url('https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp'), url('https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp'); height: 200px; width: 100%; background-size: cover, c; background-position: left top, right bottom;"> <h2>چندین تصویر پس‌زمینه</h2> </div> </code> <p>در این مثال، دو تصویر به عنوان پس‌زمینه تعریف شده‌اند که یکی با <code>cover</code> و دیگری با <code>c</code> تنظیم شده است.</p> <h3>2. پدینگ (Padding)</h3> <p>پدینگ فضای داخلی عنصر را از محتوای آن جدا می‌کند. این ویژگی برای تنظیم فاصله‌های داخلی استفاده می‌شود.</p> <h4>مثال 1: پدینگ یکسان در همه طرف‌ها</h4> <code> <div style="background-color: lightblue; padding: 20px;"> <p>این باکس دارای پدینگ 20 پیکسل است.</p> </div> </code> <h4>مثال 2: پدینگ جداگانه برای هر طرف</h4> <code> <div style="background-color: lightgreen; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;"> <p>پدینگ متفاوت برای هر طرف</p> </div> </code> <h4>مثال 3: پدینگ ترکیبی (مختصر)</h4> <code> <div style="background-color: lightcoral; padding: 10px 20px 30px 40px;"> <p>پدینگ ۱۰px بالا، ۲۰px راست، ۳۰px پایین و ۴۰px چپ</p> </div> </code> <h3>3. مارجین (Margin)</h3> <p>مارجین فاصله بیرونی عنصر از سایر عناصر را تنظیم می‌کند.</p> <h4>مثال 1: مارجین یکسان در تمام جهات</h4> <code> <div style="background-color: lightyellow; margin: 50px;"> <p>این باکس دارای مارجین 50 پیکسل است.</p> </div> </code> <h4>مثال 2: مارجین متفاوت در هر طرف</h4> <code> <div style="background-color: lightpink; margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;"> <p>مارجین متفاوت برای هر طرف</p> </div> </code> <h4>مثال 3: مارجین ترکیبی</h4> <code> <div style="background-color: lightgray; margin: 10px 20px 30px 40px;"> <p>مارجین ۱۰px بالا، ۲۰px راست، ۳۰px پایین و ۴۰px چپ</p> </div> </code> <h4>مثال 4: تنظیم خودکار مارجین (Auto)</h4> <code> <div style="background-color: lightblue; width: 50%; margin: 0 auto;"> <p>این باکس به صورت افقی در مرکز قرار می‌گیرد.</p> </div> </code> <p>در مثال بالا، از <code>margin: 0 auto;</code> استفاده شده تا عنصر به صورت خودکار در مرکز قرار گیرد.</p> <h3>4. بوردر (Border)</h3> <p>بوردر یا حاشیه می‌تواند به هر عنصر اضافه شود تا ظاهری مرزبندی شده به آن بدهد. شما می‌توانید رنگ، ضخامت و نوع خطوط بوردر را کنترل کنید.</p> <h4>مثال 1: بوردر ساده</h4> <code> <div style="border: 2px solid black;"> <p>این باکس دارای بوردر مشکی و ضخامت 2 پیکسل است.</p> </div> </code> <h4>مثال 2: بوردر خط‌چین</h4> <code> <div style="border: 3px dashed red;"> <p>این باکس دارای بوردر خط‌چین قرمز است.</p> </div> </code> <h4>مثال 3: بوردر ترکیبی (مختصر)</h4> <code> <div style="border: 5px dotted green;"> <p>این باکس دارای بوردر نقطه‌چین سبز با ضخامت 5 پیکسل است.</p> </div> </code> <h4>مثال 4: بوردرهای متفاوت برای هر طرف</h4> <code> <div style="border-top: 2px solid black; border-right: 4px dashed red; border-bottom: 6px dotted green; border-left: 8px double blue;"> <p>این باکس دارای بوردرهای مختلف برای هر طرف است.</p> </div> </code> <h3>مثال نهایی: ترکیب همه ویژگی‌ها</h3> <p>در این مثال، از تصویر پس‌زمینه، پدینگ، مارجین و بوردر استفاده شده است.</p> <code> <div style="background-image: url('https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp'); background-size: cover; background-position: center; padding: 30px; margin: 50px; border: 5px solid blue; text-align: center; color: white;"> <h2>مثال نهایی</h2> <p>این باکس شامل تصویر پس‌زمینه، پدینگ 30px، مارجین 50px و بوردر آبی 5 پیکسل است.</p> </div> </code> <a href='https://blogfreedom.ir/view_post.php?post_id=66' title='آموزش کلاس ها و آیدی قسمت نهم'> قسمت بعدی</a> <img src='https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp' alt='عکس خوشگل برای بکگراند' width='100%'>

(0)

systemdown

2024-10-26 11:15:49

آموزش برنامه نویسی وب🌐: بخش html قسمت هشتم(مدل جعبه‌ای CSS) 📦

<h2>باکس مدل چیست؟ و چه اجزایی دارد؟ </h2> <p> مدل جعبه‌ای CSS یا CSS Box Model یکی از مهم ترین مفاهیم در طراحی وب است. هر عنصر HTML در صفحه، به صورت یک جعبه در نظر گرفته می‌شود که شامل چهار بخش اصلی است: محتوا یا c، پدینگ (Padding)، حاشیه (Border) و مارجین (Margin). </p> <a href='https://blogfreedom.ir/view_post.php?post_id=62' title='آموزش ویژگی های مارجین و پدینگ و بوردر در css'>قسمت قبلی</a> به عکس زیر بنگرید: <img src='https://blogfreedom.ir/uploaded_img/boxmodel.png' title='مدل جعبه‌ای سی اس اس' width='100%' /> <p> همانطور که در تصویر بالا مبینید، هر المنت (عنصر) در اچ تی ام ال، بعنوان یک جعبه در نظر گرفته میشود. </p> <p> اجزای این جعبه عبارتند از: <ul style='margin:5%;'> <li>محتوا (C): متن یا رسانه درون عنصر HTML که بین تگ باز و بسته قرار میگیرد.</li> <li>پدینگ (Padding): فاصله بین محتوا و حاشیه‌ی(Border) عنصر.</li> <li>حاشیه (Border): حاشیه‌ای که دور تا دور عنصر را فرا می‌گیرد.</li> <li>مارجین (Margin): فاصله بین عنصر و عناصر اطراف آن.</li> </ul> </p> <h3>مثال های Box Model</h3> <p> این مثال فقط شامل محتوا است و هیچ پدینگ، حاشیه یا مارجینی ندارد. </p> <code> <div style="width: 200px; height: 100px; background-color: lightgray; text-align: center; line-height: 100px;"> این یک جعبه ساده است. </div> </code> <p> پدینگ فاصله‌ی بین محتوا و حاشیه را ایجاد می‌کند و به زیبایی جعبه کمک می‌کند. </p> <code> <div style="width: 200px; height: 100px; background-color: lightgreen; padding: 20px; text-align: center;"> این جعبه با پدینگ ۲۰ پیکسل است. </div> </code> <p>حاشیه به دور جعبه اضافه می‌شود و می‌تواند رنگ و ضخامت مختلفی داشته باشد.</p> <code> <div style="width: 200px; height: 100px; background-color: lightpink; border: 5px solid blue; text-align: center; line-height: 100px;"> این جعبه با حاشیه آبی ۵ پیکسل است. </div> </code> <h2>مدل جعبه‌ای CSS و نحوه کار با Padding، Margin، و Border</h2> <h3>تأثیر هر بخش بر روی اندازه عنصر</h3> <p>هنگامی که برای یک عنصر، مقدار <strong>width</strong> و <strong>height</strong> تنظیم می‌شود، در واقع این مقادیر فقط اندازه محتوای داخلی را تعیین می‌کنند. با اضافه کردن مقادیر <strong>padding</strong> و <strong>border</strong>، اندازه نهایی عنصر افزایش پیدا می‌کند. اما، <strong>margin</strong> تأثیری روی اندازه کلی عنصر ندارد و تنها فاصله بین عنصر و عناصر دیگر را تنظیم می‌کند.</p> <h3>فرمول محاسبه اندازه واقعی عنصر</h3> <p>با استفاده از مدل جعبه‌ای، اندازه واقعی یک عنصر به صورت زیر محاسبه می‌شود:</p> <p>پهنای واقعی: طول محتوا+ پدینگ چپ+ پدینگ راست+ حاشیه چپ+ حاشیه راست</p> <p>ارتفاع واقعی: ارتفاع محتوا+ پدینگ بالا+ پدینگ پایین+ حاشیه بالا+ حاشیه پایین</p> <h4>مثال:</h4> <code> p { width: 320px; height: 50px; padding: 10px; border: 5px solid gray; } </code> <p>در این مثال، اندازه واقعی عنصر p برابر با:</p> <ul> <li>پهنای عنصر: 320 + 10 + 10 + 5 + 5 = 350 پیکسل</li> <li>ارتفاع عنصر: 50 + 10 + 10 + 5 + 5 = 80 پیکسل</li> </ul> <h3>انواع مختلف مقداردهی Padding و Margin</h3> <ul> <li>padding: 15px; - مقدار padding برای چهار طرف عنصر ۱۵ پیکسل خواهد بود.</li> <li>padding: 10px 15px 13px 8px; - به ترتیب برای بالا، راست، پایین و چپ اعمال می‌شود.</li> <li>padding: 8px 10px 8px; - برای بالا، راست و چپ، پایین اعمال می‌شود.</li> <li>padding: 15px 10px; - برای بالا و پایین، و راست و چپ.</li> </ul> <h3>رفع مشکل افزایش اندازه عنصر با استفاده از box-sizing</h3> <p>برای جلوگیری از افزایش اندازه واقعی عنصر به دلیل وجود padding و border، از ویژگی box-sizing: border-box; استفاده می‌شود. این ویژگی باعث می‌شود که padding و border درون مقدار width و height در نظر گرفته شوند.</p> <h4>نمونه کد:</h4> <code> <head> <style> * { box-sizing: border-box; } </style> </head> </code> <p>با استفاده از این ویژگی، مقدار <strong>width</strong> و <strong>height</strong> دقیقا همان مقادیری خواهند بود که برای عنصر تنظیم کرده‌ایم.</p> <h3>مرکز چین کردن عناصر بلاکی</h3> <p>برای وسط‌چین کردن عناصر بلاکی، می‌توان از <strong>margin: 0 auto;</strong> استفاده کرد.</p> <h4>مثال:</h4> <code> <div style="width: 50%; margin: 0 auto; padding: 10px; border: 2px solid black;"> عنصر وسط‌چین شده </div> </code> <a href='https://blogfreedom.ir/view_post.php?post_id=73' title='لینک ها و کلاس ها و آیدی ها در اچ تی ام ال' > قسمت بعدی </a>

(0)

systemdown

2024-11-02 12:32:22

آموزش برنامه نویسی وب🌐: بخش html قسمت نهم (آیکون صفحه، کلاس ها، آیدی، لینک ها, Div)

<p> در این قسمت از سری آموزش برنامه‌نویسی وب از وبلاگ آزادی به موضوعات آیکون صفحه، کلاس‌ها، آیدی عنصرها، DIV و لینک ها خواهیم پرداخت. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=66' title='باکس مدل' > قسمت قبلی</a> <h2>آیکون صفحه چیست؟</h2> <p> آیکون عکس کوچکی است که در برگه مروگر کنار title سایت قرار میگیرد. </p> <img src='https://blogfreedom.ir/uploaded_img/Screenshot 2024-11-02 202650.png' alt='آیکون صفحه وب در کنار اسم سایت' style='width:100%;border-radius:5px;'/> <p> برای اضافه کردن آیکون به صفحه وب، میتوانید از تگ <strong> link </strong> استفاده کنید. برای آیکون تگ link باید دو تا صفت rel و type را عوض کرد و href که آدرس آیکون هست. <br /> بصورت زیر استفاده میشود. </p> <q>نکته: تگ link داخل تگ head نوشه میشود.</q> <code> <!DOCTYPE html> <html> <head> <title>Freedom Blog tutorial </title> <link rel="icon" type="image/png" href="https://blogfreedom.ir/icon.png"> </head> <body> <h1>عنوان سایت</h1> <p>متن تستی پاراگراف.</p> </body> </html> </code> <p> صفت rel برای مشخص کردن، ارتباط این فایل با صفحه است، که در تیکه کد بالا icon بود. به معنای آیکون صفحه. برای مثال برای لینک کردن فایل CSS از باید صفت rel را برابر با stylesheet قرار میدهیم. </p> <p> صفت type که در تگ link آن را برابر با image/png قرار دادیم نوع فایل لینک شده را مشخص میکند و باید گذاشته شود. </p> <q> تمرین: یک آیکون از اینترنت بصورت فایل png دانلود کرده و با کد بالا و تغییر دادن صفت href آن را به صفحه لینک کنید و نتیجه را در مرورگر مشاهده کنید. </q> <h2>لینک ها در اچ تی ام ال</h2> <p> همانطور که قبلا خواندید لینک با تگ a تعریف میشوند در جدول زیر سه تا از مهم ترین صفات تگ a نوشته شده است. </p> <table> <thead> <th>نام صفت</th> <th>توضیحات</th> </thead> <tr> <td>صفت download</td> <td>با دادن این صفت به تگ a فایل یا صفحه لینک شده بعد از کلیک کاربر بر روی او دانلود میشود.</td> </tr> <tr> <td>صفت target</td> <td>برای نوع باز شدن لینک مورد استفاده قرار میگیرد و برای مثال با دادن مقدار _blank لینک در تب جدید باز میشود</td> </tr> <tr> <td>صفت hreflang </td> <td>این صفت زبان صفحه لینک شده را مشخص میکند و مقادیرش همانند صفت lang است.</td> </tr> </table> <h2>کلاس ها در اچ تی ام ال</h2> <p> کلاس ها در اچ تی ام ال با استفاده از صفت class به یک عنصر اختصاص داده میشود.</p> <p>کلاس ها معمولا برای استفاده در CSS استفاده میشوند و برای مثال میتوان در CSS برای یک کلاس خاص رنگ متن تعریف کرد و هر عنصری که اون کلاس رو با استفاده از صفت class داشته باشه اون ویژگی های تعریف شده در CSS بر روی اون اعمال میشه.</p> <p> به مثال زیر دقت کنید. </p> <code> <html> <head> <style> .iran-city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class="iran-city"> <h2>Tehran</h2> <p>Tehran...</p> </div> <div class="iran-city"> <h2>Qom</h2> <p>Qom...</p> </div> <div class="iran-city"> <h2> Mashhad</h2> <p>Mashhad...</p> </div> </body> </html> </code> <p> همانطور که در بالا دیدید ما یکبار کد CSS نوشتیم و فقط با اختصاص دادن یک کلاس به عنصر ها ویژگی های مشترک رو اعمال کردیم. بجای اینکه برای هر کدام این کد ها رو تکرار کنیم.</p> <p> پس میتونیم بگیم کلاس ها، برای دادن ویژگی های مشترک به یکسری عنصر استفاده میشود. </p> <h2>آیدی‌ها در اچ تی ام ال</h2> <p>آیدی‌ها در HTML با استفاده از صفت <strong>id</strong> به یک عنصر اختصاص داده می‌شوند. هر آیدی باید منحصر به فرد باشد و تنها به یک عنصر در یک صفحه HTML تعلق داشته باشد.</p> <p>آیدی‌ها معمولاً برای شناسایی و استایل‌دهی به عناصر خاص استفاده می‌شوند. به عنوان مثال، می‌توانید با استفاده از CSS به یک عنصر خاص با آیدی مشخص، استایل‌های خاصی اعمال کنید.</p> <p>به مثال زیر دقت کنید:</p> <code> <!DOCTYPE html> <html> <head> <style> .iran-city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } #special-city { background-color: lightblue; color: darkblue; border: 2px dashed blue; margin: 20px; padding: 20px; } </style> </head> <body> <div class="iran-city"> <h2>Tehran</h2> <p>Tehran...</p> </div> <div class="iran-city" id="special-city"> <h2>Isfahan</h2> <p>Isfahan...</p> </div> <div class="iran-city"> <h2>Qom</h2> <p>Qom...</p> </div> <div class="iran-city"> <h2>Mashhad</h2> <p>Mashhad...</p> </div> </body> </html> </code> <p>در این مثال، ما یک آیدی به نام <strong>special-city</strong> به یک عنصر <strong>div</strong> اختصاص داده‌ایم. سپس با استفاده از CSS، استایل‌های خاصی برای این آیدی تعریف کرده‌ایم. به این ترتیب، تنها عنصر با این آیدی تحت تأثیر استایل‌های تعریف شده قرار می‌گیرد.</p> <p>به طور کلی، می‌توان گفت که آیدی‌ها برای شناسایی منحصر به فرد عناصر در یک صفحه استفاده می‌شوند و معمولاً در مواقعی که نیاز به اعمال استایل یا رفتار خاصی بر روی یک عنصر خاص داریم، به کار می‌روند.</p> <p>در مقایسه با کلاس‌ها، که می‌توانند به چندین عنصر اختصاص داده شوند، آیدی‌ها باید منحصر به فرد باشند و تنها به یک عنصر تعلق داشته باشند.</p> <q> تمرین: یک آیدی برای یکی از عناصر موجود در کد قبلی اضافه کنید و با استفاده از CSS، استایل خاصی برای آن تعریف کنید. </q> <h2>DIV ها در HTML</h2> <p>در دنیای طراحی وب، تگ <strong><div></strong> یکی از مهم‌ترین و پرکاربردترین عناصر HTML است. این تگ به ما این امکان را می‌دهد که محتوا را به بخش‌های مختلف تقسیم کنیم و به راحتی استایل و طراحی را بر روی آن‌ها اعمال کنیم. در این مقاله، به بررسی ساختار و کاربردهای تگ <strong><div></strong> می‌پردازیم و چند مثال عملی ارائه می‌دهیم.</p> <h3>ساختار تگ DIV</h3> <p>تگ <strong><div></strong> به صورت زیر تعریف می‌شود:</p> <code><div><br> <br></div></code> <p>این تگ می‌تواند شامل هر نوع محتوایی باشد، از جمله متن، تصاویر، و دیگر تگ‌های HTML.</p> <h2>کاربردهای DIV</h2> <ol style='padding-right:2em;'> <li><strong>تقسیم‌بندی محتوا</strong>: با استفاده از تگ <strong><div></strong>, می‌توانیم محتوا را به بخش‌های مختلف تقسیم کنیم. این کار به ما کمک می‌کند تا طراحی صفحه را سازماندهی کنیم.</li> <li><strong>استایل‌دهی</strong>: با استفاده از CSS، می‌توانیم استایل‌های مختلفی را به تگ‌های <strong><div></strong> اعمال کنیم. این کار به ما این امکان را می‌دهد که ظاهر بخش‌های مختلف صفحه را به راحتی تغییر دهیم.</li> <li><strong>ایجاد لایه‌ها</strong>: تگ <strong><div></strong> می‌تواند به عنوان یک لایه برای قرار دادن دیگر عناصر HTML استفاده شود. این کار به ما این امکان را می‌دهد که عناصر را به صورت دلخواه در صفحه قرار دهیم.</li> </ol> <p> در واقع DIV ها برای نگهداری دیگر عناصر استفاده میشود. مانند یک کانتینر. <br> به مثال زیر توجه کنید: </p> <code> <!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <meta name="viewport" c> <title>گالری تصاویر</title> <style> .gallery { display: flex; flex-wrap: wrap; } .gallery div { margin: 5px; border: 1px solid #ccc; width: 30%; } .gallery img { width: 100%; } </style> </head> <body> <div class="gallery"> <div> <img src="image1.jpg" alt="تصویر 1"> </div> <div> <img src="image2.jpg" alt="تصویر 2"> </div> <div> <img src="image3.jpg" alt="تصویر 3"> </div> </div> </body> </html> </code> پایان <br /> <a href='https://blogfreedom.ir/view_post.php?post_id=74' title='قسمت دهم آموزش برنامه‌نویسی وب'> قسمت بعدی <a/>

(0)

systemdown

2024-11-03 09:29:31

آموزش برنامه نویسی وب🌐: بخش html قسمت دهم(Iframe, Javascript, Meta tags)

در این قسمت از سری آموزش برنامه نویسی وب در وبلاگ آزادی به موضوعات زیر خواهیم پرداخت. <ol style='padding-right:2.1em;'> <li> تگ Iframe</li> <li> تگ های متا در اچ تی ام ال</li> <li> نوشتن جاوا اسکریپت در اچ تی ام ال</li> </ol> </p> <a href='https://blogfreedom.ir/view_post.php?post_id=73' title='قسمت نهم آموزش برنامه نویسی وب'>قسمت قبلی</a> <h2>Iframe چیست و چگونه استفاده میشود؟</h2> <p> تگ Iframe برای گذاشتن یک صفحه وب دیگر درون یک سند اچ تی ام ال مورد استفاده قرار میگیرد. </p> <p> با استفاده از صفت src میتوانید آدرس فایل مورد نظر خود را بدهید. <br/> همچنین میتوانید با استفاده از صفت title یک توضیح در مورد <strong> iframe </strong>اضافه کنید. <br/> کد زیر رو بررسی و امتحان کنید. </p> <code> <h1>تگ Iframe</h1> <iframe src="https://blogfreedom.ir" title="وبلاگ آزادی همه میتوانند در آن بنویسند"> </iframe> </code> <p> همچنین میتوانید با استفاده از صفات width و height طول و ارتفاع iframe را مشخص کنید توصیه میشود. برای بهم نریختن مطالب حتما طول و ارتفاع iframe ها رو مشخص کنید. <br/> در کد زیر صفات width و height تنظیم شده اند. </p> <code> <h1>تگ Iframe</h1> <iframe src="https://blogfreedom.ir" title="وبلاگ آزادی همه میتوانند در آن بنویسند" width='100%' height='50%'> </iframe> </code> <p> میتوانید با استفاده ویژگی border در CSS حاشیه iframe را حذف کنید. <br /> میتوانید با استفاده از صفت name یک نام، به iframe اختصاص دهید و با استفاده از تگ a لینکی بسازید و صفت target اش را با نامی که برای iframe انتخاب کردید، برابر قرار دهید و آن لینک را درون iframe باز کنید. <br /> کد زیر را دقت و تمرین کنید. </p> <code> <h1>تگ Iframe</h1> <iframe src="https://blogfreedom.ir" title="وبلاگ آزادی همه میتوانند در آن بنویسند" width='100%' height='50%' name='iframe_b' style='border:n;'> </iframe> <a href='https://blogfreedom.ir/document.php' target='iframe_b'>رفتن به صفحه اسناد </a> </code> <h2>جاوا اسکریپت در اچ تی ام ال چگونه نوشته میشود؟</h2> <p> جاوا اسکریپت برای پویایی و تعاملی کردن صفحات وب استفاده میشود. <br /> جاوا اسکریپت به سه صورت درون خطی(داخل صفات رویداد‌ها) و داخلی با تگ script و خارجی با استفاده از تگ script و صفت src نوشته میشود. </p> <p> نکات: <br /> تگ script درست است که در آخر سند اچ تی ام ال نوشته شود. <br /> نوشتن جاوا اسکریپت بصورت درون خطی معمولا برای صدا زدن یک تابع یا نمایش یک پیام مورد استفاده قرار میگیرد. </p> <p> به کد زیر که با صفت رویداد داده شده به یک عنصر باعث میشود وقتی روی آن کلیک شد، یک پیغام به کاربر نمایش داده شود. </p> <code> کدو نمیتونم بزارم خودتون بفهمید. </code> <h2>تگ های متا</h2> <p> تگ های متا برای ارائه توضیحاتی در مورد محتوای صفحه است، این تگ های خیلی برای موتور های جستجو مهم هستند و در سئوی سایت خیلی تاثیر گذارند. این تگ ها به کاربر نمایش داده نمیشوند و در head نوشته میشوند <br /> در زیر جدول مهمترین تگ های متا رو میتونید ببینید. </p> <table> <thead> <th>کد</th> <th>تاثیر</th> </thead> <tbody> <tr> <td dir='ltr'><meta charset="UTF-8"></td> <td>اعلام مجموعه کاراکتر مورد استفاده برای مرورگر</td> </tr> <tr> <td dir='ltr'> <td>تعریف کلمات کلیدی صفحه </td> </tr> <tr> <td dir='ltr'><meta name="description" content="Freedom Blog Ideas without censorship"></td> <td>توضیحات در مورد صفحه</td> </tr> <tr> <td dir='ltr'><meta name='author' content='System Down'></td> <td>نویسنده صفحه</td> </tr> <tr> <td dir='ltr'><meta name="viewport" content="width=device-width, initial-scale=1.0"></td> <td>اعلام کردن Viewport به مرورگر برای Responsive سایت</td> </tr> </tbody> </table> <a href='https://blogfreedom.ir/view_post.php?post_id=75' title='قسمت دهم آموزش برنامه نویس وب جاوا اسکریپت و متا تگ ها'> قسمت بعدی </a>

(0)

systemdown

2024-11-05 07:33:52

آموزش برنامه نویسی وب🌐: بخش html قسمت یازدهم(چیدمان صفحه، ریسپانسیو، رسانه ها)

<p> طبق معمول در این قسمت از سری آموزش برنامه نویسی وب به مفاهیم (ریسپانسیو و چیدمان صفحه) و تگ‌های رسانه رو مورد بررسی قرار میدهیم. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=74' title='قسمت دهم آموزش برنامه نویس وب جاوا اسکریپت و متا تگ ها'> قسمت قبلی </a> <h2>چیدمان صفحه سایت</h2> <p> هر صفحه وب معمولا به بخش‌های مختلفی تقسیم می‌شود، که شامل Header (هدر)، Navigation (ناوبری)، Main Section (بخش اصلی)، Sidebar (سایدبار) و Footer (فوتر) است. این بخش‌ها به سازمان‌دهی محتوای صفحه و ایجاد دسترسی راحت‌تر برای کاربران کمک می‌کنند. </p> <img src='https://blogfreedom.ir/uploaded_img/img_sem_elements.gif' alt='المنت های چیدمان صفحه'> <h3>header</h3> <p> هدر اولین بخش یک صفحه وب است که اغلب در بالای صفحه قرار می‌گیرد و معمولا شامل لوگو، عنوان سایت و عناصر ناوبری اصلی می‌باشد. هدر نقش مهمی در ارائه هویت سایت و کمک به کاربران برای شناسایی برند یا موضوع سایت دارد. </p> <code> <header> <img src="logo.png" alt="لوگوی سایت" width="100"> <h1>عنوان سایت</h1> <nav> <ul> <li><a href="#home">خانه</a></li> <li><a href="#about">درباره ما</a></li> <li><a href="#contact">تماس با ما</a></li> </ul> </nav> </header> </code> <h3>Navigation</h3> <p> بخش ناوبری یا منو برای لینک‌دهی به بخش‌های مختلف سایت استفاده می‌شود و کمک می‌کند که کاربران به راحتی به صفحات یا بخش‌های مختلف دسترسی داشته باشند. منوی ناوبری اغلب در داخل هدر یا در یک بخش جداگانه ایجاد می‌شود. </p> <code> <nav> <ul> <li><a href="#home">خانه</a></li> <li><a href="#services">خدمات</a></li> <li><a href="#blog">بلاگ</a></li> <li><a href="#contact">تماس با ما</a></li> </ul> </nav> </code> <h3>section , article</h3> <p> تگ‌های <section> و <article> برای تقسیم‌بندی محتوای اصلی صفحه به کار می‌روند: <section> برای سازمان‌دهی محتوای مرتبط در یک بخش خاص از صفحه استفاده می‌شود. <article> برای نشان دادن یک مطلب یا محتوای مجزا که ممکن است به تنهایی معنی‌دار باشد، مانند پست‌های وبلاگ یا اخبار، استفاده می‌شود. </p> <code> <section> <h2>بخش اصلی</h2> <article> <h3>مقاله ۱</h3> <p>این یک مقاله نمونه در بخش اصلی است.</p> </article> <article> <h3>مقاله ۲</h3> <p>این یک مقاله دیگر در بخش اصلی است.</p> </article> </section> </code> <h3>footer</h3> <p> فوتر آخرین بخش از صفحه وب است و معمولا شامل اطلاعات تماس، لینک‌های اجتماعی، کپی‌رایت و لینک‌های مرتبط می‌باشد. این بخش به کاربر کمک می‌کند تا به اطلاعات و لینک‌های مفید دسترسی پیدا کند. </p> <code> <footer> <p>&copy; 2024 تمامی حقوق محفوظ است.</p> <ul> <li><a href="#privacy">سیاست حفظ حریم خصوصی</a></li> <li><a href="#terms">شرایط استفاده</a></li> </ul> </footer> </code> <h3>aside</h3> <p> تگ <aside> برای قرار دادن محتوای جانبی یا سایدبار استفاده می‌شود که معمولا شامل لینک‌های اضافی، تبلیغات، لیست‌های مفید یا هر محتوای مرتبط دیگری است که به محتوای اصلی صفحه مرتبط است، اما ضروری نیست. </p> <code> <aside> <h3>مطالب مرتبط</h3> <ul> <li><a href="#related1">مطلب مرتبط ۱</a></li> <li><a href="#related2">مطلب مرتبط ۲</a></li> <li><a href="#related3">مطلب مرتبط ۳</a></li> </ul> </aside> </code> <h2>رسانه ها </h2> <h3>تگ تصویر (img)</h3> <p>تگ <strong><img></strong> برای اضافه کردن تصاویر به صفحه وب استفاده می‌شود. صفات مختلفی برای این تگ وجود دارد که در زیر به چند نمونه اشاره شده است:</p> <code> <img src="image.jpg" alt="توضیحات تصویر" width="100%" height="auto"> </code> <h3>تگ ویدیو (video)</h3> <p>تگ <strong><video></strong> برای نمایش ویدیوها به کار می‌رود. می‌توانید صفات مختلفی مانند <strong>controls</strong>، <strong>autoplay</strong> و <strong>loop</strong> را برای این تگ تعریف کنید.</p> <code> <video width="320" height="240" controls><br>   <source src="movie.mp4" type="video/mp4"><br> مرورگر شما از ویدیو پشتیبانی نمی‌کند.<br> </video> </code> <h3>تگ صوت (audio)</h3> <p>تگ <strong><audio></strong> برای اضافه کردن فایل‌های صوتی به صفحه استفاده می‌شود. مشابه تگ <strong>video</strong>، می‌توانید از صفات <strong>controls</strong> و <strong>autoplay</strong> استفاده کنید.</p> <code> <audio controls><br>   <source src="audio.mp3" type="audio/mpeg"><br> مرورگر شما از صوت پشتیبانی نمی‌کند.<br> </audio> </code> <h2>ریسپانسیو چیست؟</h2> <p> Responsive به معنای این است که سایت در سایز های نمایشگرها به خوبی نمایش داده شود. </p> <h4>کاربرد Media Queries در ریسپانسیو کردن تگ‌های رسانه</h4> <p>می‌توانید برای تغییر اندازه ویدیوها و تصاویر در اندازه‌های مختلف صفحه از Media Queries استفاده کنید:</p> <code> @media (max-width: 768px) {<br>   video, img {<br>     width: 100%;<br>     height: auto;<br> }<br> } </code> <h2>نکات تکمیلی</h2> <ul style='padding-right:2em;'> <li>همیشه از صفت <strong>alt</strong> برای تصاویر استفاده کنید تا توضیحی برای کاربرانی که تصویر را نمی‌بینند نمایش داده شود.</li> <li>در تگ <strong>video</strong>، صفت <strong>muted</strong> برای ویدیوهای بدون صدا یا ویدیوهای پس‌زمینه مفید است.</li> <li>می‌توانید از <strong>loop</strong> برای پخش مکرر فایل‌های ویدیویی و صوتی استفاده کنید.</li> </ul> پایان <br> <a href='https://blogfreedom.ir/view_post.php?post_id=76' style='display: inline-block; padding: 10px 20px; background-color: #007BFF; color: white; text-align: center; text-decoration: none; border-radius: 5px;'> قسمت بعدی </a>

(0)

systemdown

2024-11-09 06:42:51

آموزش کامل فرم های در اچ تی ام ال یا html - قسمت دوازدهم آموزش برنامه نویسی وب🌐

<p> در این قسمت از سری آموزشی برنامه نویسی وب در وبلاگ آزادی تمامی مباحث مربوط به فرم ها در وب مورد پوشش قرار خواهند گرفت. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=75' title='ریسپانسیو و چیدمان صفحات وب قسمت قبلی آموزش'>قسمت قبلی</a> <h2>فرم چیست؟</h2> <p> یک فرم در اچ تی ام ال برای جمع آوری اطلاعات از کاربران یک وبسایت استفاده میشود مثل فرم ثبت نام </p> <h2>ساختار فرم</h2> <p> فرم ها در اچ تی ام ال با استفاده از تگ form ایجاد میشود. و درون این تگ، تگ های فرم نوشته میشود.</p> <p>فرم ثبت نام دارای فیلد های نام و نام خانوادگی</p> <code> <form action="/file.php"> <label for="fname">نام :</label><br> <input type="text" id="fname" name="fname" value="کوروش"><br> <label for="lname">نام خانوادگی:</label><br> <input type="text" id="lname" name="lname" value="یغمایی"><br><br> <input type="submit" value="ثبت نام"> </form> </code> <p>با استفاده از تگ input در تگ فرم میتوانیم یک ورودی از کاربر بگیریم. تگ input نوع های بیشتری دارد مثل color, password, email که هر کدام برای دریافت نوعی از اطلاعات است.</p> <h2>صفات فرم</h2> <h3>صفت action فرم</h3> <p> صفت <strong> action </strong>در فرم HTML مشخص می‌کند که داده‌های فرم پس از ارسال به کدام آدرس (URL) ارسال شوند. این صفت معمولاً به یک اسکریپت سرور یا صفحه‌ای اشاره دارد که داده‌های فرم را پردازش می‌کند. </p> <code> <form action="submit_form.php" method="post"> <label for="name">نام:</label> <input type="text" id="name" name="name"> <input type="submit" value="ارسال"> </form> </code> <p> در این مثال، داده‌های فرم به فایل submit_form.php ارسال می‌شوند. </p> <h3>صفت method فرم</h3> <p>صفت <strong>method</strong> در فرم HTML مشخص می‌کند که داده‌های فرم چگونه به سرور ارسال شوند. دو روش اصلی وجود دارد: <strong>GET</strong> و <strong>POST</strong>.</p> <ul> <li><strong>GET</strong>: داده‌ها به صورت پارامترهای URL ارسال می‌شوند و برای درخواست‌های غیرحساس مناسب است. این روش می‌تواند برای سئو مفید باشد زیرا URL شامل اطلاعات جستجو است و می‌تواند ایندکس شود.</li> <li><strong>POST</strong>: داده‌ها در بدنه درخواست ارسال می‌شوند و برای ارسال اطلاعات حساس یا بزرگتر مناسب‌تر است. این روش معمولاً برای فرم‌هایی که تغییرات در پایگاه داده ایجاد می‌کنند، استفاده می‌شود.</li> </ul> <p>مثال:</p> <code> <form action="search.php" method="get"> <label for="query">جستجو:</label> <input type="text" id="query" name="query"> <input type="submit" value="جستجو"> </form> </code> <h3>صفت autocomplete فرم</h3> <p>صفت <strong>autocomplete</strong> در فرم HTML مشخص می‌کند که آیا مرورگر باید به طور خودکار مقادیر قبلاً وارد شده را برای فیلدهای فرم پیشنهاد دهد یا خیر. این صفت می‌تواند به بهبود تجربه کاربری کمک کند و زمان پر کردن فرم‌ها را کاهش دهد.</p> <p>مقدارهای ممکن برای این صفت عبارتند از:</p> <ul> <li><strong>on</strong>: مرورگر به طور خودکار مقادیر را پیشنهاد می‌دهد.</li> <li><strong>off</strong>: مرورگر پیشنهادات را غیرفعال می‌کند.</li> </ul> <p>مثال:</p> <code> <form action="submit.php" method="post"> <label for="email">ایمیل:</label> <input type="email" id="email" name="email" autocomplete="on"> <input type="submit" value="ارسال"> </form> </code> <p>در این مثال، صفت <strong>autocomplete</strong> برای فیلد ایمیل فعال شده است، بنابراین مرورگر می‌تواند مقادیر قبلاً وارد شده را پیشنهاد دهد.</p> <h3>صفت novalidate فرم</h3> <p>صفت <strong>novalidate</strong> در فرم HTML به مرورگر می‌گوید که هنگام ارسال فرم، اعتبارسنجی پیش‌فرض فیلدها را نادیده بگیرد. این صفت معمولاً زمانی استفاده می‌شود که شما می‌خواهید خودتان اعتبارسنجی را با استفاده از جاوااسکریپت یا روش‌های دیگر انجام دهید.</p> <p>استفاده از این صفت می‌تواند به شما این امکان را بدهد که کنترل بیشتری بر روی نحوه پردازش داده‌های فرم داشته باشید.</p> <p>مثال:</p> <code> <form action="submit.php" method="post" novalidate> <label for="username">نام کاربری:</label> <input type="text" id="username" name="username" required> <input type="submit" value="ارسال"> </form> </code> <p>در این مثال، با وجود اینکه فیلد نام کاربری به عنوان <strong>required</strong> مشخص شده است، اما به دلیل وجود صفت <strong>novalidate</strong>، مرورگر اعتبارسنجی پیش‌فرض را نادیده می‌گیرد و فرم می‌تواند بدون بررسی اعتبار ارسال شود.</p> <h3>صفت enctype فرم</h3> <p>صفت <strong>enctype</strong> در فرم HTML مشخص می‌کند که داده‌های فرم چگونه باید هنگام ارسال به سرور کدگذاری شوند. این صفت به ویژه در فرم‌هایی که شامل فایل‌های بارگذاری شده هستند، اهمیت دارد. مقادیر مختلفی برای این صفت وجود دارد:</p> <ul> <li><strong>application/x-www-form-urlencoded</strong>: این مقدار پیش‌فرض است و داده‌ها به صورت URL-encoded ارسال می‌شوند.</li> <li><strong>multipart/form-data</strong>: این مقدار برای ارسال فایل‌ها استفاده می‌شود و به مرورگر اجازه می‌دهد تا داده‌ها را به بخش‌های مختلف تقسیم کند.</li> <li><strong>text/plain</strong>: داده‌ها به صورت متن ساده ارسال می‌شوند، اما این روش معمولاً توصیه نمی‌شود.</li> </ul> <p>مثال:</p> <code> <form action="upload.php" method="post" enctype="multipart/form-data"> <label for="file">بارگذاری فایل:</label> <input type="file" id="file" name="file"> <input type="submit" value="ارسال"> </form> </code> <p>در این مثال، صفت <strong>enctype</strong> به <strong>multipart/form-data</strong> تنظیم شده است تا امکان بارگذاری فایل به سرور فراهم شود.</p> <h3>صفت name فرم</h3> <p>صفت <strong>name</strong> در فرم HTML به خود فرم یک نام منحصر به فرد می‌دهد. این نام به شما این امکان را می‌دهد که فرم را در جاوااسکریپت یا CSS شناسایی کنید و با آن کار کنید. همچنین، در برخی از موارد، نام فرم می‌تواند به عنوان کلید برای ارسال داده‌ها به سرور استفاده شود.</p> <p>استفاده از صفت <strong>name</strong> برای فرم به ویژه زمانی مفید است که شما چندین فرم در یک صفحه دارید و می‌خواهید به راحتی آنها را شناسایی کنید.</p> <p>مثال:</p> <code> <form name="loginForm" action="login.php" method="post"> <label for="username">نام کاربری:</label> <input type="text" id="username" name="username"> <label for="password">گذرواژه:</label> <input type="password" id="password" name="password"> <input type="submit" value="ورود"> </form> </code> <p>در این مثال، فرم دارای صفت <strong>name</strong> با مقدار <strong>loginForm</strong> است. این نام می‌تواند در جاوااسکریپت برای دسترسی به فرم و انجام عملیات مختلف استفاده شود.</p> <h2>تگ های فرم</h2> <p>تگ‌های فرم در HTML برای ایجاد فرم‌های تعاملی استفاده می‌شوند که به کاربران اجازه می‌دهند داده‌ها را وارد کرده و به سرور ارسال کنند. در زیر برخی از مهم‌ترین تگ‌های فرم آورده شده است:</p> <h3>تگ input در فرم</h3> <p>تگ <strong><input></strong> می‌تواند انواع مختلفی از ورودی‌ها را با استفاده از صفت <strong>type</strong> ایجاد کند. در زیر به برخی از انواع رایج اینپوت‌ها و مثال‌های مربوط به هر کدام اشاره شده است:</p> <h4>1. نوع Text</h4> <p>فیلد ورودی متنی برای وارد کردن متن ساده.</p> <code> <input type="text" name="username" placeholder="نام کاربری"> </code> <h4>2. نوع Password</h4> <p>فیلدی برای وارد کردن گذرواژه که متن را مخفی می‌کند.</p> <code> <input type="password" name="password" placeholder="گذرواژه"> </code> <h4>3. نوع Email</h4> <p>فیلدی برای وارد کردن آدرس ایمیل که اعتبارسنجی اولیه را انجام می‌دهد.</p> <code> <input type="email" name="email" placeholder="ایمیل"> </code> <h4>4. نوع Number</h4> <p>فیلدی برای وارد کردن عدد که می‌تواند محدودیت‌هایی مانند حداقل و حداکثر را داشته باشد.</p> <code> <input type="number" name="age" min="1" max="100" placeholder="سن"> </code> <h4>5. نوع Checkbox</h4> <p>فیلدی برای انتخاب گزینه‌ها که می‌تواند چندین گزینه را به صورت همزمان انتخاب کند.</p> <code> <input type="checkbox" name="subscribe" value="yes"> اشتراک در خبرنامه </code> <h4>6. نوع Radio</h4> <p>فیلدی برای انتخاب یک گزینه از بین چند گزینه. تنها یک گزینه از یک گروه می‌تواند انتخاب شود.</p> <code> <input type="radio" name="gender" value="male"> مرد <input type="radio" name="gender" value="female"> زن </code> <h4>7. نوع File</h4> <p>فیلدی برای بارگذاری فایل‌ها.</p> <code> <input type="file" name="profile_picture"> </code> <h4>8. نوع Date</h4> <p>فیلدی برای انتخاب تاریخ که به کاربر اجازه می‌دهد تاریخ را از یک تقویم انتخاب کند.</p> <code> <input type="date" name="birthdate"> </code> <h4>9. نوع Color</h4> <p>فیلدی برای انتخاب رنگ که به کاربر اجازه می‌دهد رنگ مورد نظر را انتخاب کند.</p> <code> <input type="color" name="favorite_color"> </code> <h4>10. نوع Range</h4> <p>فیلدی برای انتخاب یک مقدار از یک محدوده با استفاده از نوار لغزنده.</p> <code> <input type="range" name="volume" min="0" max="100"> </code> <p>این انواع مختلف <strong><input></strong> به شما این امکان را می‌دهند که فرم‌های تعاملی و متنوعی ایجاد کنید که به نیازهای مختلف کاربران پاسخ دهند.</p> <h3>تگ label در فرم</h3> <p>تگ <strong><label></strong> برای ایجاد برچسب برای فیلدهای ورودی استفاده می‌شود. این تگ به کاربران کمک می‌کند تا بفهمند هر فیلد برای چه اطلاعاتی است. با استفاده از صفت <strong>for</strong>، می‌توان برچسب را به یک فیلد ورودی خاص متصل کرد.</p> <p>مثال:</p> <code> <label for="username">نام کاربری:</label> <input type="text" id="username" name="username"> </code> <h3>تگ select در فرم</h3> <p>تگ <strong><select></strong> برای ایجاد منوهای کشویی استفاده می‌شود که به کاربران اجازه می‌دهد از بین گزینه‌های مختلف یکی را انتخاب کنند. هر گزینه درون تگ <strong><option></strong> قرار می‌گیرد.</p> <p>مثال:</p> <code> <label for="country">کشور:</label> <select id="country" name="country"> <option value="iran">ایران</option> <option value="usa">آمریکا</option> <option value="uk">انگلستان</option> </select> </code> <h3>تگ optgroup در فرم</h3> <p>تگ <strong><optgroup></strong> برای گروه‌بندی گزینه‌های مختلف در یک منوی کشویی (<strong><select></strong>) استفاده می‌شود. این تگ به کاربران کمک می‌کند تا گزینه‌ها را به صورت منظم‌تر و قابل فهم‌تر مشاهده کنند.</p> <p>مثال:</p> <code> <label for="fruits">میوه‌ها:</label> <select id="fruits" name="fruits"> <optgroup label="میوه‌های تابستانی"> <option value="watermelon">هندوانه</option> <option value="peach">هلو</option> </optgroup> <optgroup label="میوه‌های زمستانی"> <option value="orange">پرتقال</option> <option value="apple">سیب</option> </optgroup> </select> </code> <h3>تگ option در فرم</h3> <p>تگ <strong><option></strong> برای تعریف گزینه‌های مختلف در یک منوی کشویی (<strong><select></strong>) یا در یک گروه گزینه (<strong><optgroup></strong>) استفاده می‌شود. هر گزینه می‌تواند دارای یک مقدار و متنی باشد که به کاربر نمایش داده می‌شود.</p> <p>مثال:</p> <code> <label for="colors">رنگ‌ها:</label> <select id="colors" name="colors"> <option value="red">قرمز</option> <option value="green">سبز</option> <option value="blue">آبی</option> </select> </code> <h3>تگ textarea در فرم</h3> <p>تگ <strong><textarea></strong> برای ایجاد فیلدهای متنی چند خطی استفاده می‌شود که به کاربران اجازه می‌دهد متن طولانی‌تری را وارد کنند. این تگ می‌تواند دارای صفت‌هایی مانند <strong>rows</strong> و <strong>cols</strong> باشد که تعداد ردیف‌ها و ستون‌های فیلد را مشخص می‌کند.</p> <p>مثال:</p> <code> <label for="message">پیام:</label> <textarea id="message" name="message" rows="4" cols="50">متن خود را اینجا وارد کنید...</textarea> </code> <h3>تگ button در فرم</h3> <p>تگ <strong><button></strong> برای ایجاد دکمه‌های قابل کلیک در فرم استفاده می‌شود. این دکمه‌ها می‌توانند برای ارسال فرم یا انجام عملیات دیگر استفاده شوند. دکمه‌ها می‌توانند دارای متن یا تصویر باشند و می‌توانند با استفاده از صفت <strong>type</strong> مشخص کنند که چه نوع دکمه‌ای هستند (مانند <strong>submit</strong>، <strong>reset</strong> یا <strong>button</strong>).</p> <p>مثال:</p> <code> <button type="submit">ارسال</button> <button type="reset">تنظیم مجدد</button> </code> <h3>تگ fieldset در فرم</h3> <p>تگ <strong><fieldset></strong> برای گروه‌بندی عناصر فرم استفاده می‌شود. این تگ به شما این امکان را می‌دهد که عناصر مرتبط را در یک بخش مشخص قرار دهید و به کاربران کمک می‌کند تا فرم را بهتر درک کنند.</p> <p>مثال:</p> <code> <fieldset> <legend>اطلاعات شخصی</legend> <label for="name">نام:</label> <input type="text" id="name" name="name"> <label for="email">ایمیل:</label> <input type="email" id="email" name="email"> </fieldset> </code> <h3>تگ legend در فرم</h3> <p>تگ <strong><legend></strong> برای ایجاد عنوان برای یک <strong>fieldset</strong> استفاده می‌شود. این تگ به کاربران کمک می‌کند تا بفهمند که گروه‌بندی شده چه اطلاعاتی را شامل می‌شود.</p> <p>مثال:</p> <code> <fieldset> <legend>اطلاعات تماس</legend> <label for="phone">شماره تلفن:</label> <input type="tel" id="phone" name="phone"> </fieldset> </code> <h3>تگ datalist در فرم</h3> <p>تگ <strong><datalist></strong> برای ارائه لیستی از گزینه‌های پیشنهادی برای یک فیلد ورودی استفاده می‌شود. این تگ به کاربران اجازه می‌دهد تا از بین گزینه‌های موجود انتخاب کنند یا متن خود را وارد کنند.</p> <p>مثال:</p> <code> <label for="browsers">مرورگرها:</label> <input list="browsers" name="browser" id="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge"> </datalist> </code> <h3>تگ output در فرم</h3> <p>تگ <strong><output></strong> برای نمایش نتایج محاسبات یا خروجی‌های دیگر در فرم استفاده می‌شود. این تگ به شما این امکان را می‌دهد که نتایج را به صورت دینامیک به کاربران نمایش دهید.</p> <p>مثال:</p> <code> <form> <label for="a">عدد اول:</label> <input type="number" id="a" value="0"> <label for="b">عدد دوم:</label> <input type="number" id="b" value="0"> <output name="result" for="a b">0</output> </form> </code> <h2>انواع input ها</h2> <p>تگ <strong><input></strong> در HTML می‌تواند انواع مختلفی از ورودی‌ها را ایجاد کند. در اینجا به بررسی انواع مختلف <strong>input</strong> و کاربردهای آن‌ها می‌پردازیم:</p> <h3>نوع button در input</h3> <p>این نوع برای ایجاد دکمه‌های قابل کلیک استفاده می‌شود.</p> <code> <input type="button" value="کلیک کنید"> </code> <h3>نوع checkbox در input</h3> <p>این نوع برای انتخاب گزینه‌ها به صورت چندگانه استفاده می‌شود.</p> <code> <input type="checkbox" name="subscribe" value="yes"> اشتراک در خبرنامه </code> <h3>نوع color در input</h3> <p>این نوع برای انتخاب رنگ استفاده می‌شود.</p> <code> <input type="color" name="favorite_color"> </code> <h3>نوع date در input</h3> <p>این نوع برای انتخاب تاریخ استفاده می‌شود.</p> <code> <input type="date" name="birthdate"> </code> <h3>نوع datetime-local در input</h3> <p>این نوع برای انتخاب تاریخ و زمان محلی استفاده می‌شود.</p> <code> <input type="datetime-local" name="event"> </code> <h3>نوع email در input</h3> <p>این نوع برای وارد کردن آدرس ایمیل و اعتبارسنجی آن استفاده می‌شود.</p> <code> <input type="email" name="email" placeholder="ایمیل"> </code> <h3>نوع file در input</h3> <p>این نوع برای بارگذاری فایل‌ها استفاده می‌شود.</p> <code> <input type="file" name="profile_picture"> </code> <h3>نوع hidden در input</h3> <p>این نوع برای ذخیره اطلاعاتی است که کاربر نمی‌تواند آن را ببیند.</p> <code> <input type="hidden" name="user_id" value="12345"> </code> <h3>نوع image در input</h3> <p>این نوع برای ایجاد دکمه‌ای با تصویر استفاده می‌شود.</p> <code> <input type="image" src="submit.png" alt="ارسال"> </code> <h3>نوع month در input</h3> <p>این نوع برای انتخاب ماه و سال استفاده می‌شود.</p> <code> <input type="month" name="month"> </code> <h3>نوع number در input</h3> <p>این نوع برای وارد کردن عدد و محدودیت‌های آن استفاده می‌شود.</p> <code> <input type="number" name="age" min="1" max="100"> </code> <h3>نوع password در input</h3> <p>این نوع برای وارد کردن گذرواژه و مخفی کردن آن استفاده می‌شود.</p> <code> <input type="password" name="password" placeholder="گذرواژه"> </code> <h3>نوع radio در input</h3> <p>این نوع برای انتخاب یک گزینه از بین چند گزینه استفاده می‌شود.</p> <code> <input type="radio" name="gender" value="male"> مرد <input type="radio" name="gender" value="female"> زن </code> <h3>نوع range در input</h3> <p>این نوع برای انتخاب یک مقدار از یک محدوده با استفاده از نوار لغزنده استفاده می‌شود.</p> <code> <input type="range" name="volume" min="0" max="100"> </code> <h3>نوع reset در input</h3> <p>این نوع برای ایجاد دکمه‌ای برای تنظیم مجدد فرم استفاده می‌شود.</p> <code> <input type="reset" value="تنظیم مجدد"> </code> <h3>نوع search در input</h3> <p>این نوع برای ایجاد فیلدی برای جستجو استفاده می‌شود.</p> <code> <input type="search" name="query" placeholder="جستجو... "> </code> <h3>نوع submit در input</h3> <p>این نوع برای ایجاد دکمه‌ای برای ارسال فرم استفاده می‌شود.</p> <code> <input type="submit" value="ارسال"> </code> <h3>نوع tel در input</h3> <p>این نوع برای وارد کردن شماره تلفن استفاده می‌شود و می‌تواند شامل اعتبارسنجی اولیه برای فرمت شماره تلفن باشد.</p> <code> <input type="tel" name="phone" placeholder="شماره تلفن"> </code> <h3>نوع text در input</h3> <p>این نوع برای ایجاد فیلد ورودی متنی استفاده می‌شود که به کاربران اجازه می‌دهد متن ساده‌ای را وارد کنند.</p> <code> <input type="text" name="username" placeholder="نام کاربری"> </code> <h3>نوع time در input</h3> <p>این نوع برای انتخاب زمان (ساعت و دقیقه) استفاده می‌شود.</p> <code> <input type="time" name="appointment"> </code> <h3>نوع url در input</h3> <p>این نوع برای وارد کردن آدرس وب‌سایت استفاده می‌شود و اعتبارسنجی اولیه برای فرمت URL را انجام می‌دهد.</p> <code> <input type="url" name="website" placeholder="آدرس وب‌سایت"> </code> <h3>نوع week در input</h3> <p>این نوع برای انتخاب یک هفته خاص (شامل سال و شماره هفته) استفاده می‌شود.</p> <code> <input type="week" name="week"> </code> <h2>صفات input ها</h2> <p>تگ <strong><input></strong> در HTML می‌تواند شامل صفات مختلفی باشد که به شما این امکان را می‌دهد تا رفتار و ویژگی‌های فیلدهای ورودی را کنترل کنید. در اینجا به بررسی برخی از صفات مهم <strong>input</strong> می‌پردازیم:</p> <h3>صفت value</h3> <p>صفت <strong>value</strong> برای تعیین مقدار پیش‌فرض فیلد ورودی استفاده می‌شود. این مقدار می‌تواند به صورت متنی یا عددی باشد.</p> <code> <input type="text" name="username" value="نام کاربری"> </code> <h3>صفت readonly</h3> <p>صفت <strong>readonly</strong> به فیلد ورودی اجازه می‌دهد که فقط خواندنی باشد و کاربر نتواند مقدار آن را تغییر دهد، اما می‌تواند آن را کپی کند.</p> <code> <input type="text" name="email" value="example@example.com" readonly> </code> <h3>صفت disabled</h3> <p>صفت <strong>disabled</strong> فیلد ورودی را غیرفعال می‌کند، به طوری که کاربر نمی‌تواند به آن دسترسی داشته باشد یا مقداری وارد کند.</p> <code> <input type="text" name="phone" value="123-456-7890" disabled> </code> <h3>صفت size</h3> <p>صفت <strong>size</strong> برای تعیین عرض فیلد ورودی به تعداد کاراکترها استفاده می‌شود. این صفت فقط بر روی فیلدهای متنی و عددی تأثیر دارد.</p> <code> <input type="text" name="username" size="30"> </code> <h3>صفت maxlength</h3> <p>صفت <strong>maxlength</strong> برای تعیین حداکثر تعداد کاراکترهایی که کاربر می‌تواند در فیلد ورودی وارد کند، استفاده می‌شود.</p> <code> <input type="text" name="password" maxlength="20"> </code> <h3>صفت min-max</h3> <p>صفات <strong>min</strong> و <strong>max</strong> برای تعیین حداقل و حداکثر مقادیر مجاز در فیلدهای ورودی عددی و تاریخ استفاده می‌شوند.</p> <code> <input type="number" name="age" min="1" max="100"> </code> <h3>صفت multiple</h3> <p>صفت <strong>multiple</strong> به کاربر اجازه می‌دهد تا چندین فایل را به طور همزمان بارگذاری کند یا چندین گزینه را از یک منوی کشویی انتخاب کند.</p> <code> <input type="file" name="files" multiple> </code> <h3>صفت pattern</h3> <p>صفت <strong>pattern</strong> برای تعیین یک الگوی خاص برای ورودی استفاده می‌شود. این الگو با استفاده از عبارات منظم (regex) تعریف می‌شود.</p> <code> <input type="text" name="username" pattern="[A-Za-z]{3,}" title="حداقل 3 حرف"> </code> <h3>صفت placeholder</h3> <p>صفت <strong>placeholder</strong> برای نمایش یک متن راهنما در فیلد ورودی استفاده می‌شود که به کاربر نشان می‌دهد چه نوع اطلاعاتی باید وارد کند.</p> <code> <input type="text" name="email" placeholder="ایمیل خود را وارد کنید"> </code> <h3>صفت required</h3> <p>صفت <strong>required</strong> به فیلد ورودی این امکان را می‌دهد که الزامی باشد و کاربر باید مقداری را وارد کند تا فرم ارسال شود.</p> <code> <input type="text" name="username" required> </code> <h3>صفت step</h3> <p>صفت <strong>step</strong> برای تعیین گام‌های مجاز در فیلدهای عددی استفاده می‌شود. این صفت مشخص می‌کند که کاربر می‌تواند چه مقادیری را وارد کند.</p> <code> <input type="number" name="quantity" min="1" step="2"> </code> <h3>صفت autofocus</h3> <p>صفت <strong>autofocus</strong> به فیلد ورودی این امکان را می‌دهد که به طور خودکار در زمان بارگذاری صفحه فوکوس شود.</p> <code> <input type="text" name="search" autofocus> </code> <h3>صفت height-width</h3> <p>صفات <strong>height</strong> و <strong>width</strong> برای تعیین ابعاد فیلدهای ورودی استفاده می‌شوند. این صفات معمولاً برای فیلدهای متنی و <code><textarea></code> کاربرد دارند.</p> <code> <textarea name="message" rows="4" cols="50"></textarea> </code> <h3>صفت list</h3> <p>صفت <strong>list</strong> برای اتصال یک فیلد ورودی به یک <strong><datalist></strong> استفاده می‌شود که به کاربر گزینه‌های پیشنهادی را نمایش می‌دهد.</p> <code> <input type="text" name="browser" list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist> </code> <h3>صفت autocomplete</h3> <p>صفت <strong>autocomplete</strong> مشخص می‌کند که آیا مرورگر باید به طور خودکار مقادیر قبلاً وارد شده را برای فیلدهای ورودی پیشنهاد دهد یا خیر.</p> <code> <input type="text" name="username" autocomplete="on"> </code> <h2>صفات input ها در فرم</h2> <p>تگ <strong><input></strong> می‌تواند شامل صفات مختلفی باشد که به شما این امکان را می‌دهد تا رفتار و ویژگی‌های فیلدهای ورودی را کنترل کنید. در اینجا به بررسی برخی از صفات مهم <strong>input</strong> در فرم می‌پردازیم:</p> <h3>صفت form</h3> <p>صفت <strong>form</strong> به شما این امکان را می‌دهد که یک فیلد ورودی را به یک فرم خاص متصل کنید. این صفت به ویژه زمانی مفید است که فیلد ورودی خارج از تگ <strong><form></strong> قرار دارد.</p> <code> <form id="myForm"> <input type="text" name="username"> </form> <input type="submit" form="myForm" value="ارسال"> </code> <h3>صفت formaction</h3> <p>صفت <strong>formaction</strong> مشخص می‌کند که داده‌های فرم به کدام URL ارسال شوند. این صفت می‌تواند در تگ <strong><input type="submit"></strong> یا <strong><button></strong> استفاده شود.</p> <code> <input type="submit" formaction="submit.php" value="ارسال"> </code> <h3>صفت formenctype</h3> <p>صفت <strong>formenctype</strong> مشخص می‌کند که داده‌های فرم چگونه باید کدگذاری شوند. این صفت معمولاً برای بارگذاری فایل‌ها استفاده می‌شود.</p> <code> <input type="file" name="file" formenctype="multipart/form-data"> </code> <h3>صفت formmethod</h3> <p>صفت <strong>formmethod</strong> مشخص می‌کند که داده‌های فرم با کدام روش (GET یا POST) ارسال شوند.</p> <code> <input type="submit" formmethod="post" value="ارسال"> </code> <h3>صفت formtarget</h3> <p>صفت <strong>formtarget</strong> مشخص می‌کند که نتیجه ارسال فرم در کدام پنجره یا تب باز شود. می‌تواند مقادیری مانند <strong>_blank</strong>، <strong>_self</strong>، <strong>_parent</strong> یا <strong>_top</strong> داشته باشد.</p> <code> <input type="submit" formtarget="_blank" value="ارسال"> </code> <h3>صفت formnovalidate</h3> <p>صفت <strong>formnovalidate</strong> به مرورگر می‌گوید که اعتبارسنجی پیش‌فرض فیلدها را نادیده بگیرد و فرم را بدون بررسی اعتبار ارسال کند.</p> <code> <input type="submit" formnovalidate value="ارسال بدون اعتبارسنجی"> </code> <h3>صفت novalidate</h3> <p>صفت <strong>novalidate</strong> در تگ <strong><form></strong> به مرورگر می‌گوید که اعتبارسنجی پیش‌فرض فیلدها را نادیده بگیرد و فرم را بدون بررسی اعتبار ارسال کند.</p> <code> <form novalidate> <input type="text" name="username" required> <input type="submit" value="ارسال"> </form> </code> <h2>فرم کامل بهمراه CSS</h2> <code> <!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>فرم کامل</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; direction: rtl; text-align: right; } .container { max-width: 600px; margin: auto; background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; color: #333; } label { display: block; margin: 10px 0 5px; color: #555; direction: rtl; text-align: right; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], textarea, select { width: 100%; padding: 10px; margin: 5px 0 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type="submit"], input[type="reset"] { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; width: 100%; } input[type="submit"]:hover, input[type="reset"]:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h2>فرم ثبت نام</h2> <form action="submit.php" method="post"> <label for="username">نام کاربری:</label> <input type="text" id="username" name="username" required> <label for="email">ایمیل:</label> <input type="email" id="email" name="email" required> <label for="password">گذرواژه:</label> <input type="password" id="password" name="password" required> <label for="phone">شماره تلفن:</label> <input type="tel" id="phone" name="phone" required> <label for="age">سن:</label> <input type="number" id="age" name="age" min="1" max="100" required> <label for="country">کشور:</label> <select id="country" name="country"> <option value="iran">ایران</option> <option value="usa">آمریکا</option> <option value="uk">انگلستان</option> </select> <label for="message">پیام:</label> <textarea id="message" name="message" rows="4" placeholder="پیام خود را اینجا وارد کنید... "></textarea> <input type="submit" value="ارسال" style="margin-bottom: 1em" > <input type="reset" value="تنظیم مجدد"> </form> </div> </body> </html> </code> پایان

(0)

systemdown

2024-11-20 11:51:24

سری آموزش برنامه نویسی وب بخش اچ تی ام ال

<p> در این سری آموزش‌ها، به بررسی زبان <strong>HTML</strong> (زبان نشانه‌گذاری متن‌های وب) خواهیم پرداخت که پایه و اساس هر وب‌سایت را تشکیل می‌دهد. یادگیری HTML به شما این امکان را می‌دهد که ساختار صفحات وب را طراحی کنید و محتوای خود را به صورت منظم و قابل فهم برای مرورگرها و موتورهای جستجو ارائه دهید. </p> <p> ما در این دوره به مباحثی چون <strong>تگ‌های اصلی HTML</strong>، <strong>ساختار صفحات</strong>، استفاده از <strong>تصاویر</strong> و <strong>لینک‌ها</strong>، و ... خواهیم پرداخت. با یادگیری اصول HTML، شما می‌توانید وب‌سایت‌هایی بسازید که نه تنها زیبا و کاربرپسند باشند، بلکه مفید باشند. </p> <p><strong>به دنیای جذاب برنامه‌نویسی وب خوش آمدید!</strong></p> <img src='https://blogfreedom.ir/uploaded_img/_75d93348-07d7-4917-8aa9-ff2ad91f9dad.jpg' alt='به دنیای برنامه نویسی خوش آمدید' width='95%' style='margin:auto;display:block;border-radius:10px;'/> <h2>آموزش HTML: معرفی و مبانی اولیه طراحی وب</h2> <p> این قسمت به معرفی <strong>HTML</strong>، به‌عنوان بخش اصلی و ابتدایی آموزش برنامه‌نویسی وب، می‌پردازد. در این بخش، اصول و مبانی HTML شامل ساختار سند، تگ‌ها، ویژگی‌ها (<strong>Attributes</strong>)، و کاربردهای مختلف آن‌ها مورد بررسی قرار می‌گیرد. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=42' title='قسمت نخست: معرفی HTML' width='100%'/> قسمت نخست</a> <h2>HTML و نقش آن در عملکرد وب‌سایت‌ها</h2> <p> در این قسمت از آموزش برنامه‌نویسی وب، با مفاهیم پایه‌ای و ضروری که برای درک بهتر عملکرد وب‌سایت‌ها نیاز است، آشنا می‌شوید. این بخش به شما کمک می‌کند تا نقش <strong>مرورگرها</strong>، <strong>شبکه</strong>، و <strong>پروتکل‌های ارتباطی</strong> را بهتر درک کرده و از اهمیت HTML به عنوان پایه و اساس طراحی وب آگاه شوید. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=44' title='قسمت دوم: عملکرد وب‌سایت‌ها' /> قسمت دوم</a> <h2>آشنایی با تگ‌های HTML و کاربردهای آن‌ها در طراحی وب</h2> <p> در این قسمت از آموزش، به بررسی عمیق‌تر مفاهیم و <strong>تگ‌های HTML</strong> می‌پردازیم که شامل <strong>تگ‌های سطح بلاک</strong>، پیش‌فرض مرورگر، استفاده از نقل‌قول‌ها، و سیستم <strong>رنگ‌ها</strong> است. همچنین تمرین‌هایی برای تثبیت یادگیری ارائه شده است. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=47' title='قسمت سوم: تگ‌های HTML' /> قسمت سوم</a> <h2>ساخت جداول در HTML و استایل‌دهی با CSS</h2> <p> در این قسمت از آموزش، پس از مرور نحوه ساخت <strong>جدول‌ها</strong> در HTML، به اصول اولیه <strong>CSS</strong> برای تغییر ظاهر وبسایت و کار با <strong>فونت‌ها</strong> خواهیم پرداخت. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=48' title='قسمت چهارم: جداول و استایل‌دهی' /> قسمت چهارم</a> <h2>ویژگی‌های پیشرفته جداول HTML و استایل‌دهی حرفه‌ای</h2> <p> در این قسمت از آموزش‌های وبلاگ آزادی به پایان آموزش <strong>جداول در HTML</strong> می‌پردازیم. اگر قسمت قبلی را مطالعه نکرده‌اید، حتماً از لینک ارائه شده به آن مراجعه کنید. در این بخش با ویژگی‌های پیشرفته جداول مانند عرض و ارتفاع سفارشی، عنوان‌ها، و استایل‌دهی مرزها آشنا خواهیم شد. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=54' title='قسمت پنجم: ویژگی‌های پیشرفته جداول' /> قسمت پنجم</a> <h2>آشنایی با لیست‌ها در HTML و استایل‌دهی با CSS</h2> <p> در این قسمت با سه نوع اصلی <strong>لیست‌ها</strong> در HTML آشنا می‌شویم و نحوه‌ی استایل‌دهی به آن‌ها با CSS را بررسی می‌کنیم. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=56' title='قسمت ششم: لیست‌ها در HTML' /> قسمت ششم</a> <h2>استفاده از پس‌زمینه، پدینگ، مارجین و بوردر در طراحی وب</h2> <p> در این قسمت با نحوه استفاده از تصویر <strong>پس‌زمینه</strong>، تنظیم <strong>پدینگ</strong> و <strong>مارجین</strong>، و تعریف <strong>بوردر</strong> برای عناصر HTML آشنا خواهیم شد. این ویژگی‌ها کمک می‌کنند طراحی صفحات وب زیباتر و کاربرپسندتر شود. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=62' title='قسمت هفتم: پس‌زمینه و طراحی وب' /> قسمت هفتم</a> <h2>مفهوم مدل جعبه‌ای CSS </h2> <p> مدل جعبه‌ای <strong>CSS</strong> یکی از مفاهیم اصلی در طراحی وب است که نشان می‌دهد چگونه اندازه و فاصله عناصر در مرورگر محاسبه می‌شود. در این قسمت با اجزای مدل جعبه‌ای، فرمول محاسبه اندازه عناصر، و نکات کاربردی در استفاده از آن آشنا خواهیم شد. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=66' title='قسمت هشتم: مدل جعبه‌ای CSS' /> قسمت هشتم</a> <h2>استفاده از کلاس‌ها، آیدی‌ها و تگ‌های HTML در طراحی صفحات وب</h2> <p> این قسمت از آموزش به موضوعات مختلفی مانند آیکون صفحه، <strong>کلاس‌ها</strong>، <strong>آیدی‌ها</strong>، لینک‌ها و استفاده از تگ <strong><div></strong> در HTML پرداخته است. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=73' title='قسمت نهم: کلاس‌ها و آیدی‌ها' /> قسمت نهم</a> <h2>گنجاندن صفحات دیگر و استفاده از جاوا اسکریپت در HTML</h2> <p> در این بخش از آموزش، به تگ <strong><iframe></strong> پرداخته می‌شود که برای گنجاندن صفحات وب دیگر در داخل صفحه‌ی جاری استفاده می‌شود. همچنین، نوشتن <strong>جاوا اسکریپت</strong> در HTML با استفاده از تگ <strong><script></strong> و کاربردهای آن برای ایجاد تعامل و پویایی در صفحات وب توضیح داده می‌شود. </p> <p> در نهایت، تگ‌های <strong>متا</strong> که برای ارائه توضیحات به موتورهای جستجو و بهبود سئو سایت استفاده می‌شوند، معرفی می‌شوند. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=74' title='قسمت دهم: گنجاندن صفحات و جاوا اسکریپت' /> قسمت دهم</a> <h2>چیدمان صفحه وب و استفاده از رسانه‌ها در طراحی</h2> <p> در این بخش از آموزش، به <strong>چیدمان صفحه وب</strong> پرداخته می‌شود که شامل تقسیم‌بندی صفحه به بخش‌های مختلف مثل <strong>هدر</strong>، <strong>ناوبری</strong>، بخش اصلی، سایدبار و فوتر است. همچنین، تگ‌های رسانه‌ای مانند <strong><img></strong>، <strong><audio></strong> و <strong><video></strong> برای اضافه کردن تصاویر، ویدیوها و فایل‌های صوتی به صفحه معرفی می‌شوند. </p> <p> در نهایت، مفهوم <strong>ریسپانسیو</strong> و استفاده از <strong>Media Queries</strong> برای تنظیم نحوه نمایش رسانه‌ها در دستگاه‌های مختلف توضیح داده می‌شود. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=75' title='قسمت یازدهم: چیدمان و رسانه‌ها' /> قسمت یازدهم</a> <h2>مبانی و کاربرد فرم‌ها در طراحی وب</h2> <p> در این قسمت، تمامی مباحث مربوط به <strong>فرم‌ها</strong> در وب مورد پوشش قرار خواهند گرفت. <strong>فرم‌ها</strong> یکی از اجزای اصلی در طراحی وب هستند که به کاربران این امکان را می‌دهند تا اطلاعات را وارد کرده و با وب‌سایت تعامل کنند. </p> <a href='https://blogfreedom.ir/view_post.php?post_id=76' title='آموزش فرم‌ها در وب' /> قسمت دوازدهم</a>

(0)

post categories