HTML برای مبتدیان – مبانی HTML با نمونه کد
به دنیای هیجان انگیز توسعه وب خوش آمدید! در این راهنمای مبتدی، اصول HTML، ستون فقرات هر صفحه وب را یاد خواهید گرفت.
درختی را تصور کنید: ریشه های آن لنگر می اندازند و کل گیاه را تغذیه می کنند. به طور مشابه، HTML، ریشه توسعه وب، پایه و اساس هر صفحه وب را فراهم می کند.
درک نقش HTML مانند درک ریشه های یک درخت است، که پایه اساسی برای درک چگونگی زندگی صفحات وب را تشکیل می دهد.
در پایان این آموزش، شما به دانشی مجهز می شوید تا سفر برنامه نویسی خود را آغاز کنید.
فهرست مطالب
HTML چیست؟
HTML که مخفف Hypertext Markup Language است، زبان استانداردی است که برای ایجاد و طراحی ساختار یک صفحه وب استفاده می شود. به شما این امکان را می دهد که محتوا را در وب سایت خود سازماندهی کنید، ساختار آن را تعریف کنید و روابط بین عناصر مختلف را برقرار کنید.
ساختار اصلی یک سند HTML
یک سند HTML از ساختار خاصی پیروی می کند که به عنوان پایه و اساس صفحه وب شما عمل می کند:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link /> </head> <body> <!-- your web page content goes here --> </body> </html>بیایید آن را تجزیه کنیم:
<!DOCTYPE html> : نوع سند و نسخه HTML مورد استفاده را تعریف می کند (در این مورد HTML5).
<html lang="en"> و </html> : تگ باز و بسته شدن عنصر ریشه که کل محتوای HTML را می پوشاند. ویژگی lang="en" زبان را تعریف می کند (در این مورد، انگلیسی ایالات متحده)
<head> و </head> : تگ باز و بسته شدن عنصر head حاوی اطلاعات متا <meta > در مورد سند HTML، عنوان صفحه <title></title> که در برگه مرورگر می‌بینید، و پیوند <link /> که پیوندی بین سند HTML شما و منابع خارجی مانند شیوه نامه، فاویکون، واردات و غیره تعریف می کند.
<body> و </body> : باز و بسته شدن تگ body تمام محتوای قابل مشاهده یک صفحه وب، از جمله متن، تصاویر، پیوندها، فرم ها و سایر عناصری که کاربران با آنها در تعامل هستند را در بر می گیرد.
نکته : همه عناصر HTML دارای تگ های باز ( < > ) و بسته شدن ( </ > ) هستند، به جز تگ های خودبسته ( < > یا < /> ) که بعداً با جزئیات بیشتر توضیح خواهم داد.
نظرات
توجه کنید که <!-- your web page content goes here --> در ساختار اصلی html بالا، که به آن نظرات گفته می شود. از نظرات برای گفت ن یادداشت های توضیحی استفاده می شود که وقتی صفحه وب در مرورگر مشاهده می شود، نمایش داده نمی شوند. آنها برای مستندسازی کد شما، ارائه اطلاعات به دیگر توسعه دهندگان، یا حذف موقت بخش های خاصی از کد مفید هستند. می توانید با استفاده از این تگ نظر ایجاد کنید <!-- your comment goes here --> .
وجود دارد:
نظر تک خطی t: <!-- This is a single-line comment -->
نظر چند خطی : <!-- This is a multi-line comment. It can span multiple lines. All content within the comment block will be ignored by the browser. -->
برچسب ها و عناصر
HTML از برچسب ها برای تعریف عناصر مختلف در یک صفحه وب استفاده می کند. برچسب ها در براکت های زاویه ای ( < > ) قرار می گیرند. تگ های باز ( < > ) و بسته شدن ( </ > ) و تگ خود بسته شدن ( < > یا < /> ) وجود دارد. در اینجا چند نمونه هستند:
سرفصل ها
<h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2> <!-- ... up to <h6> --> تگ های عنوان <h1> تا <h6> برای تعریف سرفصل ها یا عنوان های فرعی در یک سند استفاده می شود. این تگ ها سلسله مراتبی از سرفصل ها را نشان می دهند که <h1> بالاترین سطح (عنوان اصلی) و <h6> پایین ترین سطح (پایین ترین سطح عنوان فرعی) است.
هدف آن ایجاد ساختار و سازماندهی محتوای یک صفحه وب، خوانایی و دسترسی بیشتر آن است.
پاراگراف
تگ پاراگراف ( <p> your text goes here </p> ) برای جداسازی بلوک های متن به پاراگراف های مجزا استفاده می شود. این یک عنصر در سطح بلوک است که یک واحد متن یا یک بلوک از محتوا را نشان می دهد و معمولاً برای ساختار و جداسازی متن در یک صفحه وب استفاده می شود.
تگ <p> بخشی از نشانه گذاری ساختاری در HTML است و به ایجاد محتوای منظم و خوانا کمک می کند.
خط می شکند
برای ایجاد شکست خط بدون شروع پاراگراف جدید، از تگ break ( <br> ) استفاده کنید.
مثال 1 - شکست خط اصلی:
<p>This is the first line.<br>This is the second line.</p>این به صورت زیر نمایش داده می شود:
این خط اول است.
این خط دوم است.
مثال 2 - شکست خط در متن:
<p>This text contains a<br>line break.</p>این به صورت زیر نمایش داده می شود:
این متن حاوی الف
خط شکستن
مثال 3 - شکست خط در فهرست :
<ul> <li>Item 1</li> <li>Item 2<br>with a line break</li> <li>Item 3</li> </ul>این به صورت زیر نمایش داده می شود:
مورد 1
مورد 2
با شکست خط
مورد 3
مثال 4 - خط شکستگی در آدرس:
<address> Nuel Cas<br> 23 Musa Yar'Dua VI<br> Lagos, Nigeria </address>این به صورت زیر نمایش داده می شود:
نوئل کاس
23 موسی یار دعای ششم
لاگوس، نیجریه
مثال 5: خط با تگ های متعدد <br> شکسته می شود
<p>This is a paragraph with<br><br>multiple line breaks.</p>این به صورت زیر نمایش داده می شود:
این یک پاراگراف با
چند خط شکستن
در حالی که تگ break ( <br> ) معمولا برای شکست خطوط ساده استفاده می شود، CSS و عناصر سطح بلوک مانند تگ های <p> و <div> اغلب برای طرح بندی های پیچیده تر ترجیح داده می شوند.
استفاده بیش از حد از تگ‌های <br> برای اهداف طرح‌بندی ممنوع است. CSS به طور کلی برای کنترل فاصله و چیدمان عناصر در یک صفحه وب مناسب تر است.
بخش
تگ <div> که مخفف "تقسیم" است، یکی از متداول ترین عناصر کانتینر مورد استفاده در HTML است. این یک ظرف در سطح بلوک است که برای گروه بندی سایر عناصر HTML با هم و اعمال سبک ها یا اسکریپت ها به آنها استفاده می شود.
در اینجا یک مثال است:
<div> <p>This is a paragraph inside a div.</p> <ul> <li>List item 1</li> <li>List item 2</li> </ul> </div> در این مثال، عنصر <div> دور یک پاراگراف ( <p> ) و یک فهرست نامرتب ( <ul> ) قرار می گیرد. این گروه بندی به شما اجازه می دهد تا با استفاده از CSS یا جاوا اسکریپت استایل ها را اعمال کنید یا این عناصر را با هم دستکاری کنید.
توجه : تگ <div> اغلب برای اهداف طرح بندی استفاده می شود و به ساختار محتوای یک صفحه وب کمک می کند. برای معانی معنایی و خاص تر، HTML5 برچسب های معنایی جدیدی مانند <section> ، <article> ، <header> ، <footer> و غیره را معرفی کرد که وضوح بهتری در مورد هدف محتوا ارائه می دهد.
برچسب های معنایی
آنها مانند برچسب های خاصی هستند که به مرورگرها و توسعه دهندگان وب می گویند که قسمت های مختلف یک صفحه وب چیست. آنها به درک آسان وب سایت ها برای افراد و رایانه ها کمک می کنند.
با استفاده از این برچسب ها می توانید وب سایت های خود را در دسترس تر و راحت تر در موتورهای جستجو پیدا کنید. در اینجا برخی از تگ های معنایی رایج HTML به همراه مثال آورده شده است:
<header> : تگ هدر محتوای مقدماتی را در ابتدای یک بخش یا صفحه وب نشان می دهد. معمولاً شامل لوگوها، منوهای ناوبری و سایر عناصر مقدماتی است.
مثال:
<header> <h1>Website Title</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> 2. <nav> : برای تعریف پیوندهای پیمایش در صفحه وب خود از تگ ناو استفاده کنید. این شامل پیوندهایی به صفحات یا بخش های دیگر وب سایت است.
مثال:
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> 3. <main> : برای تعریف محتوای اصلی یک صفحه وب استفاده می شود. این به بهبود دسترسی و ساختار کد HTML شما کمک می کند، زیرا به وضوح منطقه محتوای اصلی را برای صفحه خوان ها و سایر فناوری های کمکی شناسایی می کند. همچنین به موتورهای جستجو کمک می کند تا ارتباط محتوای صفحه شما را درک کنند که می تواند بهینه سازی موتور جستجو (SEO) وب سایت شما را بهبود بخشد.
مثال:
<main> <article> <h2>Page Title</h2> <p>Page content goes here...</p> </article> </main> 4. <section> : زمانی که می خواهید بخش هایی را در یک صفحه وب تعریف کنید از تگ section استفاده کنید. همچنین برای گروه بندی مطالب مرتبط با هم.
مثال:
<section> <h2>Section Title</h2> <p>Section content goes here...</p> </section> 5. <article> : زمانی که می‌خواهید یک محتوای مستقل را تعریف کنید، از برچسب article استفاده کنید، مانند یک پست وبلاگ، مقاله خبری یا پست انجمن.
مثال:
<article> <h2>Article Title</h2> <p>Article content goes here...</p> </article> 6. <aside> : وقتی می خواهید محتوایی را تعریف کنید که به محتوای اصلی مرتبط است اما بخشی از آن نیست، مانند نوارهای کناری، تبلیغات یا پیوندهای مرتبط، از برچسب aside استفاده کنید.
مثال:
<aside> <h3>Related Links</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </aside> 7. <footer> : برای تعریف پاورقی یک صفحه وب استفاده می شود که معمولاً حاوی اطلاعات حق چاپ، جزئیات تماس یا پیوندهایی به صفحات مرتبط است.
مثال:
<footer> <p>© Nuel Cas Website</p> </footer>برچسب فهرست
فهرست‌های <li> به شما امکان می‌دهند محتوا را به صورت سلسله مراتبی سازماندهی و ساختار دهید. آنها دو نوع هستند: فهرست های مرتب <ol> (شماره دار) و نامرتب ( <ul> ) (گلوله دار).
فهرست مرتب شده: از <ol> برای فهرست های مرتب شده و <li> برای موارد فهرست استفاده کنید.
مثال:
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
این به صورت زیر نمایش داده می شود:
مورد اول
مورد دوم
مورد سوم
فهرست نامرتب: تگ <ul> برای ایجاد یک فهرست نامرتب استفاده می شود، جایی که ترتیب آیتم ها مهم نیست، آیتم های گلوله ای را ارائه می دهد. هر آیتم در فهرست با تگ <li> (مورد فهرست ) نشان داده می شود.
مثال:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>این به صورت زیر نمایش داده می شود:
مورد 1
مورد 2
مورد 3
فهرست ها را می توان در داخل یکدیگر قرار داد. به عنوان مثال، می توانید یک فهرست مرتب شده در یک فهرست نامرتب داشته باشید یا برعکس.
مثال:
<ul> <li>Unordered List Item 1</li> <li>Unordered List Item 2 <ol> <li>Ordered List Item 1</li> <li>Ordered List Item 2</li> </ol> </li> <li>Unordered List Item 3</li> </ul>این به صورت زیر نمایش داده می شود:
فهرست نامرتب مورد 1
مورد فهرست نامرتب 2
1. مورد فهرست مرتب شده 1
2. مورد فهرست مرتب شده 2
مورد فهرست نامرتب 3
آیتم های فهرست نیز می توانند دارای ویژگی باشند. برای مثال، ممکن است از ویژگی type با تگ <ol> برای تغییر سبک شماره‌گذاری استفاده کنید.
مثال:
<ol type="A"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>این به صورت زیر نمایش داده می شود:
الف. مورد 1
ب. مورد 2
ج. مورد 3
تگ‌های <ul> ، <ol> و <li> در HTML برای ایجاد فهرست‌های سازمان‌یافته و ساختار محتوا در صفحات وب ضروری هستند. آنها انعطاف پذیری را در ارائه اطلاعات در هر دو فرمت مرتب و نامرتب فراهم می کنند.
اسپان تگ
تگ <span> یک محفظه درون خطی عمومی است (خط شکنی ایجاد نمی کند) که برای گروه بندی و اعمال سبک ها به عناصر درون خطی یا متن استفاده می شود. معمولاً زمانی استفاده می‌شود که می‌خواهید استایل‌ها را اعمال کنید یا از جاوا اسکریپت برای دستکاری بخش‌های خاصی از متن در یک بلوک بزرگ‌تر از محتوا بدون تأثیر بر ساختار کلی استفاده کنید.
در اینجا مثالی از نحوه استفاده از تگ <span> در HTML آورده شده است:
<p>This is a <span style="color: red; font-weight: bold;">highlighted</span> text.</p> در این مثال، کلمه "برجسته" به رنگ قرمز و پررنگ نمایش داده می شود، همانطور که توسط سبک های درون خطی اعمال شده در عنصر <span> مشخص شده است.
پیوندها
تگ <link> برای تعریف پیوند بین یک سند و یک منبع خارجی استفاده می شود. هدف اصلی آن شامل منابع خارجی مانند شیوه نامه ها، نمادها و اسناد دیگر است. بیایید موارد استفاده رایج تگ <link> را تحلیل کنیم:
صفحه سبک پیوند دادن : رایج ترین استفاده از تگ <link> پیوند دادن یک فایل CSS خارجی (Cascading Style Sheets) به یک سند HTML است. این به شما امکان می دهد سبک وب سایت خود را از ساختار آن جدا کنید و نگهداری و به روز رسانی آن را آسان تر می کند.
مثال:
<link rel="stylesheet" type="text/css" href="styles.css"> در این مثال، ویژگی rel رابطه بین سند HTML و منبع پیوند داده شده (stylesheet) را مشخص می کند، ویژگی type نوع منبع پیوند را نشان می دهد ( text/css برای شیوه نامه ها)، و ویژگی href مسیر به سمت خارجی را مشخص می کند. فایل CSS.
توجه : پیوند دادن یک فایل CSS باید در عنصر <head> انجام شود.
نماد پیوند : تگ <link> همچنین معمولاً برای پیوند دادن نماد فاویکون برای یک صفحه وب استفاده می شود، که نماد کوچکی است که در برگه مرورگر یا در کنار URL در نوار آدرس ظاهر می شود.
<link rel="icon" href="favicon.ico" type="image/x-icon"> در این حالت، ویژگی rel روی "icon" تنظیم می شود تا نشان دهد که یک فایل آیکون است و ویژگی href مسیر فایل آیکون را مشخص می کند. مشخصه type نوع فایل لینک شده را نشان می دهد، در این مورد، image/x-icon برای نمادها.
پیوند دادن اسناد خارجی : تگ <link> را می توان برای پیوند دادن سایر اسناد خارجی استفاده کرد، مانند:
1. Stylesheet برای چاپ: تصور کنید برای زمانی که شخصی می خواهد صفحه وب شما را چاپ کند، طرح خاصی دارید. تگ <link> می تواند صفحه وب شما را به یک شیوه نامه جداگانه که فقط برای چاپ طراحی شده است متصل کند. به این ترتیب، وقتی شخصی صفحه شما را چاپ می کند، زیبا و مرتب به نظر می رسد.
مثال:
<!-- Link to the stylesheet for printing --> <link rel="stylesheet" type="text/css" href="print-styles.css" media="print"> 2. نسخه های جایگزین یک سند (مانند ترجمه ها): گاهی اوقات، ممکن است نسخه های مختلفی از صفحه وب خود را برای زبان ها یا اهداف مختلف داشته باشید. تگ <link> می تواند صفحه وب شما را به این نسخه های جایگزین متصل کند.
مثال:
<link rel="alternate" hreflang="es" href="spanish-version.html"> 3. فیدهای پیوند محتوا: فرض کنید شما یک وبلاگ دارید و می خواهید دیگران به راحتی آخرین پست های شما را ببینند. تگ <link> می تواند با اتصال صفحه وب شما به یک فید، که مانند جریانی از آخرین محتوای شما است، کمک کند.
مثال:
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss-feed.xml"> تگ <link> مانند یک رابط است که به صفحه وب شما کمک می کند تا با سایر فایل های موجود در اینترنت تعامل داشته باشد.
تگ لنگر
تگ لنگر، که با <a> نشان داده می شود، برای ایجاد لینک ها یا نقاط لنگر در یک صفحه وب استفاده می شود. این در درجه اول برای تعریف یک لینک استفاده می شود، به کاربران اجازه می دهد تا به یک صفحه وب دیگر، بخش دیگری از همان صفحه یا حتی یک منبع خارجی حرکت کنند.
تگ anchor از ویژگی href برای تعیین URL مقصد (Uniform Resource Locator) استفاده می کند.
مثال:
<a href="https://www.example.com">Visit Example.com</a>برچسب فرم
فرم های HTML برای تعامل کاربر در وب سایت ها ضروری هستند. آنها به کاربران اجازه می دهند تا داده هایی را وارد کنند که می توانند برای پردازش به سرور ارسال شوند. ساختار اصلی یک فرم HTML شامل چندین عنصر کلیدی است:
<form> <!-- Your form elements go here --> </form> تگ <form> ابتدا و انتهای فرم شما را مشخص می کند. به عنوان ظرفی برای عناصر فرم مختلف عمل می کند. معمولاً برچسب ها، انواع ورودی، ناحیه متنی و برچسب های دکمه را در خود جای می دهد.
برچسب
تگ <label> برای تعریف یک برچسب برای عنصر ورودی استفاده می شود. مثال:
<label for="username">Username:</label>نوع ورودی
در یک فرم، انواع ورودی های مختلف اهداف مختلفی را انجام می دهند. تگ ورودی ( <input> ) یک عنصر تعاملی را برای کاربران تعریف می کند تا داده ها را وارد کنند. موارد رایج مورد استفاده عبارتند از:
ورودی متن:
<input type="text" name="username" placeholder="Enter your username">ورودی رمز عبور:
<input type="password" name="password" placeholder="Enter your password">دکمه های رادیویی:
<input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Femaleچک باکس ها:
<input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletterTextarea
تگ <textarea> یک کنترل ورودی متن چند خطی را تعریف می کند که معمولاً در عناصر فرم استفاده می شود. مثال:
<textarea name="message" placeholder="Enter your message"></textarea>دکمه (برای ارسال فرم ها)
مهمترین بخش یک فرم این است که به کاربران اجازه می دهد ورودی خود را ارسال کنند. برای این کار، می توانید از یک برچسب دکمه ( <button> ) برای ارسال استفاده کنید:
مثال:
<button type="submit">Submit</button> تگ <button> یک دکمه قابل کلیک ایجاد می کند. ویژگی type="submit" نشان می دهد که با کلیک بر روی این دکمه، فرم ارسال می شود.
راهنمایی سریع
همیشه یک ویژگی name در عناصر فرم خود قرار دهید. این به شناسایی و پردازش داده های روی سرور کمک می کند.
از ویژگی placeholder برای ارائه راهنمایی در مورد ورودی مورد انتظار به کاربران استفاده کنید.
هنگام انتخاب انواع ورودی، تجربه کاربری را در نظر بگیرید. به عنوان مثال، از دکمه های رادیویی برای گزینه های منحصر به فرد متقابل استفاده کنید.
در اینجا یک قطعه کد استفاده از یک عنصر فرم را نشان می دهد:
<form> <label for="username">Username:</label> <input type="text" id="username" name="username" placeholder="Enter your username"> <label for="password">Password:</label> <input type="password" id="password" name="password" placeholder="Enter your password"> <label>Gender:</label> <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female <label>Subscribe to newsletter:</label> <input type="checkbox" name="subscribe" value="yes"> <label for="message">Your Message:</label> <textarea id="message" name="message" placeholder="Enter your message"></textarea> <button type="submit">Submit</button> </form>برچسب های خود بسته شونده
عنصر <input> یا <input /> بالا یک تگ بسته شدنی است، به این معنی که نیازی به برچسب بسته شدن جداگانه ندارد.
تگ های خود بسته شونده دیگری در HTML وجود دارد:
تصویر ( <img> یا <img /> ).
خطوط شکسته ( <br> یا <br /> ).
پیوند منبع خارجی ( <link> یا <link /> ).
قانون افقی ( <hr> یا <hr /> ).
داده های متا ( <meta> یا <meta /> ).
ستون جدول ( <col> یا <col /> ).
URL پایه پیوندهای نسبی ( <base> یا <base /> ).
فرصت شکست کلمه ( <wbr> یا <wbr /> ).
ناحیه ( <area> یا <area /> ) که ناحیه ای را در داخل نقشه تصویر تعریف می کند تا تصویر بتواند منطقه ای قابل کلیک داشته باشد.
توجه: HTML5 (آخرین نسخه HTML) به شما امکان می‌دهد علامت اسلش ( / ) را در انتهای تگ‌های خود بسته‌شونده حذف کنید، اما گنجاندن آن سازگاری با استانداردهای قدیمی‌تر مانند XHTML و برخی ابزارها را تضمین می‌کند.
ویژگی های HTML
این یک اطلاعات یا ویژگی های اضافی است که می توانید برای عناصر HTML اعمال کنید تا رفتار، ظاهر آنها را تغییر دهید یا ویژگی های خاصی را تعریف کنید. ویژگی ها همیشه در تگ آغازین یک عنصر HTML گنجانده می شوند و به صورت جفت نام-مقدار نوشته می شوند.
نحو اصلی برای یک ویژگی HTML به شرح زیر است:
<tagname attribute="value">Content</tagname> در اینجا attribute نام ویژگی است و "value" مقداری است که به آن ویژگی اختصاص داده شده است.
ویژگی های زیادی برای عناصر مختلف HTML موجود است که در اینجا به چند مورد اشاره می کنیم:
id ویژگی
این یک شناسه منحصر به فرد برای یک عنصر HTML فراهم می کند. باید در کل سند HTML منحصر به فرد باشد.
ویژگی "id" به شما کمک می کند تا عناصر خاصی را در یک صفحه وب به طور منحصر به فرد شناسایی و کنترل کنید، درست مانند اینکه چگونه شماره شناسه هر دانش آموز به شناسایی آنها در یک مدرسه کمک می کند.
مثال:
<div id="header">This is a div with an id attribute.</div>صفت کلاس
برای اختصاص یک یا چند نام کلاس به یک عنصر HTML استفاده می شود. همچنین به شما کمک می کند تا قسمت های مختلف یک صفحه وب را با گروه بندی آنها در کنار هم سازماندهی و سبک دهید.
در اینجا سینتکس ویژگی کلاس آمده است:
<tagname class="classname1 classname2 ...">Content</tagname>فرض کنید می خواهید چند پاراگراف را با فونت و رنگ یکسان استایل کنید. به جای نوشتن همان سبک های CSS برای هر پاراگراف به صورت جداگانه، می توانید یک کلاس مشترک به تمام آن پاراگراف ها اختصاص دهید و استایل های آن کلاس را در فایل CSS خود تعریف کنید. مثال:
<body> <p class="highlight">This is the first paragraph.</p> <p class="highlight">This is the second paragraph.</p> <p class="highlight">This is the third paragraph.</p> </body>توجه : ویژگی "id" و ویژگی "class" در HTML اهداف مشابهی را دنبال می کنند زیرا هر دو به شما امکان می دهند عناصر را به طور منحصر به فرد در یک صفحه وب شناسایی کنید. با این حال، تفاوت های اساسی بین این دو وجود دارد:
هنگامی که نیاز دارید یک عنصر را به طور منحصر به فرد شناسایی کنید، از ویژگی "id" استفاده کنید.
زمانی که می‌خواهید چندین عنصر را با هم گروه‌بندی کنید و استایل یا عملکرد را به طور جمعی به آنها اعمال کنید، از ویژگی "کلاس" استفاده کنید.
در حالی که هر دو ویژگی را می توان برای یک استایل استفاده کرد، ویژگی "id" برای یک استایل منحصر به فرد مناسب تر است، در حالی که ویژگی "class" برای اعمال سبک های سازگار در چندین عنصر ایده آل است.
src (منبع) ویژگی
نشانی اینترنتی منبع تصویری که قرار است نمایش داده شود را مشخص می کند. مثال:
<img src="image.jpg" alt="Nuel Cas Photo"> توجه : در صورتی که تصویر بارگذاری نشود از ویژگی alt برای ارائه متن جایگزین برای تصویر استفاده می شود. این به عنوان یک متن توصیفی عمل می کند که به جای تصویر نمایش داده می شود و به کاربران کمک می کند تا محتوا یا هدف تصویر را حتی زمانی که قابل مشاهده نیستند درک کنند.
ویژگی href (برای پیوندها)
نشانی اینترنتی که هایپرلینک به آن اشاره می کند را مشخص می کند. مثال:
<a href="https://www.nuelcas.com">Visit Nuel Cas</a>صفت عرض و ارتفاع (برای تصاویر)
عرض و ارتفاع تصویر را بر حسب پیکسل تعیین می کند. مثال:
<img src="image.jpg" alt="Nuel Cas Photo" width="400" height="300">ویژگی سبک
به شما امکان می دهد سبک های CSS درون خطی را در یک عنصر HTML اعمال کنید. مثال:
<p style="color: red; font-size: 18px;">This is a red text.</p>ویژگی غیرفعال (برای عناصر فرم)
به شما امکان می دهد تعامل کاربر با عنصر فرم را غیرفعال کنید. مثال:
<input type="text" disabled>نوع ویژگی (برای عنصر فرم و موارد فهرست)
برای تغییر سبک شماره گذاری می توانید از ویژگی type با تگ <ol> استفاده کنید. مثال:
<ol type="A"> <li>Item A</li> <li>Item B</li> <li>Item C</li> </ol>این به صورت زیر نمایش داده می شود:
A. Item A B. Item B C. Item C همچنین، می‌توانید از ویژگی type برای تعیین نوع ورودی عنصر فرم استفاده کنید. فرض کنید می‌خواهید به مرورگر اطلاع دهید که این ورودی برای رمز عبور است، از کد زیر استفاده کنید
<input type="password" name="password" placeholder="Enter your password">ویژگی نام (برای عنصر فرم)
ویژگی name یک شناسه منحصر به فرد برای هر فیلد فرم ارائه می دهد. هنگامی که فرم به سرور ارسال می شود، داده های وارد شده در هر فیلد با نام مربوطه به عنوان یک جفت کلید-مقدار ارسال می شود. قطعه کد زیر نشان می دهد که می خواهید سرور این ورودی را به عنوان ایمیل شناسایی کند.
<input type="email" id="email" name="email" placeholder="Enter your email">توجه : درک و استفاده مؤثر از ویژگی ها برای کنترل ظاهر و رفتار عناصر در اسناد HTML ضروری است.
چند رسانه ای HTML
ممکن است لازم باشد انواع مختلفی از محتوای رسانه ای را در صفحات وب مانند تصاویر، صدا و ویدئو ادغام کنید. این عناصر رسانه ای با ایجاد جذابیت و پویایی بیشتر محتوای وب، تجربه کاربر را افزایش می دهند.
در اینجا انواع مختلفی از چند رسانه ای که می توانید در HTML استفاده کنید آورده شده است:
تصاویر
تصاویر رایج ترین نوع چند رسانه ای در HTML هستند. با استفاده از تگ <img> می توانید تصاویر را به یک صفحه وب اضافه کنید. مثال:
<img src="image.jpg" alt="Description of the image" width="200" height="150"> در مثال بالا، src نشانی اینترنتی منبع تصویر را مشخص می کند، alt متن جایگزین را برای دسترسی و سئو ارائه می دهد، و width و height ویژگی های اختیاری برای تنظیم ابعاد تصویر هستند.
سمعی
با استفاده از تگ <audio> می توانید فایل های صوتی را مستقیماً در یک صفحه وب جاسازی کنید. این به شما امکان می دهد کلیپ های صوتی، موسیقی یا سایر صداهای ضبط شده را پخش کنید. مثال:
<audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser may not support the audio element. </audio> در مثال بالا، controls کنترل‌های پخش، مکث و صدا را برای کاربر فراهم می‌کنند، src نشانی اینترنتی منبع فایل صوتی را مشخص می‌کند، در حالی که type MIME (افزونه‌های ایمیل اینترنتی چند منظوره) فایل صوتی را مشخص می‌کند.
ویدئو
تگ <video> برای جاسازی فایل های ویدئویی در یک صفحه وب استفاده می شود. این به شما امکان می دهد ویدیوها را در محتوا پخش کنید. مثال:
<video controls width="640" height="360"> <source src="video.mp4" type="video/mp4"> Your browser may not support the video element. </video> در مثال بالا، controls کنترل‌های پخش، مکث و صدا را برای کاربر فراهم می‌کنند، width و height ابعاد ویدیو را مشخص می‌کند، src نشانی اینترنتی منبع فایل ویدیویی را مشخص می‌کند، در حالی که type نوع MIME فایل ویدیویی را مشخص می‌کند.
iframe
<iframe> به شما امکان می دهد محتوا را از منبع یا صفحه دیگری در داخل یک قاب در صفحه وب خود نمایش دهید. این می تواند برای جاسازی فیلم ها، نقشه ها، صفحات وب یا سایر محتوای خارجی مفید باشد. مثال استفاده از <iframe> برای جاسازی یک ویدیو از YouTube:
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" title="YouTube Video" frameborder="0" allowfullscreen> </iframe> در قطعه کد بالا، ویژگی src نشانی اینترنتی صفحه یا محتوایی را که می خواهید در آن جاسازی کنید، مشخص می کند. اندازه ها با استفاده از ویژگی های width و height کنترل می شوند. ویژگی title توضیحاتی را برای محتوا ارائه می دهد که برای دسترسی مهم است.
ویژگی frameborder کنترل می‌کند که iframe دارای حاشیه باشد (0 برای بدون حاشیه، 1 برای یک حاشیه)، در حالی که ویژگی allowfullscreen اجازه می‌دهد ویدیو در حالت تمام صفحه پخش شود.
توجه : "VIDEO_ID" را با شناسه ویدیوی YouTube که می‌خواهید جاسازی کنید، جایگزین کنید.
بهترین شیوه ها
ساختار سند HTML مناسب را دنبال کنید:
سند HTML خود را با یک اعلان <!DOCTYPE html> شروع کنید تا از سازگاری مرورگر و مطابقت با استانداردها اطمینان حاصل کنید.
همیشه تگ های <html> ، <head> و <body> را در سند خود قرار دهید.
از تگ <meta charset="UTF-8"> برای تعیین رمزگذاری کاراکتر سند خود استفاده کنید.
زبان سند خود را با استفاده از ویژگی زبان ( <html lang="en"> ) تعریف کنید.
یک برچسب عنوان توصیفی ( <title> ) در قسمت head ( <head> ) اضافه کنید تا زمینه صفحه را فراهم کنید.
2. از عنصر HTML معنایی استفاده کنید:
از عناصر معنایی HTML مانند <header> ، <nav> ، <main> ، <section> ، <article> ، <aside> و <footer> برای ارائه وضوح و ساختار به محتوای خود استفاده کنید. عناصر معنایی دسترسی، سئو و قابلیت نگهداری کد شما را بهبود می بخشد.
3. کد خود را کامنت کنید:
از نظرات <!-- --> برای مستندسازی کد HTML خود استفاده کنید و هدف و عملکرد آن را توضیح دهید. نظرات خوانایی کد را بهبود می بخشد و همکاری بین توسعه دهندگان را تسهیل می کند.
4. محتوای خود را با برچسب های مناسب ساختار دهید:
از تگ های عنوان <h1> تا <h6> برای تعریف سلسله مراتب محتوای خود استفاده کنید.
از تگ های پاراگراف <p> برای جداسازی بلوک های متن به پاراگراف های مجزا استفاده کنید.
از فهرست‌ها ( <ul> ، <ol> ، <li> ) برای سازماندهی و ساختاربندی محتوا به شیوه‌ای سلسله مراتبی استفاده کنید.
5. عناصر را با <div> و <span> به مقدار کم گروه بندی کنید:
در صورت نیاز از تگ‌های <div> و <span> برای گروه بندی و استایل دادن به عناصر استفاده کنید، اما از تودرتوی بیش از حد و اتکای بیش از حد به این عناصر خودداری کنید. در صورت لزوم، جایگزین های معنایی بیشتری را ترجیح دهید.
6. بیش از حد از خطوط شکسته استفاده نکنید ( <br> ):
در حالی که تگ های <br> می توانند برای شکستن خطوط ساده مفید باشند، از استفاده بیش از حد از آنها برای اهداف طرح بندی خودداری کنید. در عوض، از CSS و عناصر سطح بلوک برای طرح‌بندی‌های پیچیده‌تر برای حفظ خوانایی و نگهداری بهتر کد استفاده کنید.
7. همیشه از متن جایگزین برای تصاویر استفاده کنید (خصلت alt ):
همیشه متن جایگزین توصیفی را با استفاده از ویژگی alt برای تصاویر (برچسب‌های <img> ) اضافه کنید. این امر دسترسی کاربرانی را که دارای اختلالات بینایی هستند بهبود می‌بخشد و تضمین می‌کند که حتی اگر تصاویر بارگیری نشوند، محتوا قابل درک باقی می‌ماند.
8. بهینه سازی فرم ها برای تجربه کاربر (UX):
برای شناسایی و پردازش دقیق داده ها در سرور، ویژگی های name معنی دار را برای عناصر فرم درج کنید.
از انواع ورودی مناسب (ویژگی type ) برای فیلدهای فرم برای بهبود تجربه کاربر و اطمینان از اعتبارسنجی داده ها استفاده کنید.
برای ارائه نکات یا ورودی مورد انتظار برای فیلدهای فرم، از ویژگی placeholder استفاده کنید.
9. از سازگاری با مرورگرهای قدیمی اطمینان حاصل کنید:
کد شما باید در مرورگرها و دستگاه‌های مختلف مورد آزمایش سازگاری قرار گیرد تا از رندر و عملکرد ثابت اطمینان حاصل شود.
برای ویژگی‌ها یا آپشن های جدیدتر HTML، جایگزین‌های مناسب را اضافه کنید، این به حفظ سازگاری با مرورگرهای قدیمی‌تر کمک می‌کند.
10. با استانداردهای HTML به روز بمانید:
خود را با آخرین استانداردهای HTML و بهترین شیوه ها به روز نگه دارید تا از ویژگی های جدید استفاده کنید، عملکرد را بهبود بخشید و تجربه کاربری برنامه های وب خود را ارتقا دهید.
با رعایت این بهترین شیوه ها، می توانید کد HTML با ساختار، در دسترس و قابل نگهداری ایجاد کنید که به کیفیت کلی و قابلیت استفاده پروژه های وب شما کمک می کند.
اگر این قطعه را خوانده اید، از آن لذت برده اید و تمایل بیشتری به آن دارید، برای همکاری بیشتر با من در X و LinkedIn تماس بگیرید.
برچسب‌ها
|
ارسال نظر