HTML مخفف Hypertext Markup Language است. این یک زبان خاص برای ساخت صفحات وب است. وقتی از یک وب‌سایت بازدید می‌کنید، کامپیوتر HTML را می‌خواند تا کلمات، تصاویر و لینک‌ها را به شما نشان دهد. HTML را به عنوان بلوک‌های سازنده یک وب‌سایت در نظر بگیرید. درست همانطور که از قطعات لگو برای ساخت خانه یا ماشین استفاده می‌کنید، ما از تگ‌های HTML برای ساخت یک صفحه وب استفاده می‌کنیم.
HTML کدی است که به کامپیوتر می‌گوید چگونه متن، تصاویر، ویدیوها و لینک‌ها را در یک صفحه وب نمایش دهد. این مانند دادن دستورالعمل به دوستی است که در حال کشیدن نقاشی برای شماست. HTML از کلماتی درون براکت‌های زاویه‌دار، که تگ نامیده می‌شوند، برای مشخص کردن ابتدا و انتهای بخشی از صفحه وب استفاده می‌کند.
هر وب‌سایتی که بازدید می‌کنید به نوعی از HTML استفاده می‌کند. بدون HTML، هیچ صفحه وبی برای دیدن وجود نخواهد داشت. HTML به سازماندهی محتوا کمک می‌کند و به کامپیوتر می‌گوید که چگونه صفحه را نمایش دهد. این اولین چیزی است که در توسعه وب یاد می‌گیریم زیرا باعث می‌شود اینترنت کار کند!
یک سند HTML ساختار خاصی دارد. این ساختار با اعلانی به نام <code><!DOCTYPE html></code> شروع می‌شود که به کامپیوتر می‌گوید صفحه از HTML استفاده می‌کند. سپس سند به دو بخش اصلی تقسیم می‌شود: سربرگ و بدنه.
یک سند HTML بسیار ساده به این شکل است:
<کد><!DOCTYPE html>
<html>
<سر>
<title>اولین صفحه وب من</title>
</head>
<بدنه>
<p>سلام دنیا!</p>
</body>
</html> </کد>
در این مثال، بخش <head> عنوان صفحه را نشان می‌دهد و بخش <body> جایی است که محتوایی که روی صفحه نمایش داده می‌شود را قرار می‌دهید.
HTML از تگ‌ها برای علامت‌گذاری بخش‌های مختلف صفحه وب استفاده می‌کند. تگ ، کلمه‌ای است که درون براکت‌های زاویه‌دار قرار می‌گیرد. برای مثال، <code><p></code> به کامپیوتر می‌گوید که آنچه در ادامه می‌آید یک پاراگراف است. وقتی پاراگراف را تمام می‌کنید، از تگ پایانی، <code></p></code>، برای نشان دادن پایان استفاده می‌کنید.
یک عنصر در HTML شامل یک تگ آغازین، مقداری محتوا و یک تگ پایانی است. برای مثال:
<code><p>این یک پاراگراف است.</p></code>
هر تگ به مرورگر وب دستور می‌دهد که چگونه محتوا را نمایش دهد.
تگ‌های زیادی در HTML وجود دارد. برخی از رایج‌ترین آنها عبارتند از:
ویژگی‌ها اطلاعات اضافی در مورد یک عنصر HTML ارائه می‌دهند. آنها به تگ آغازین درون براکت‌های زاویه‌دار تگ اضافه می‌شوند. رایج‌ترین ویژگی‌ها src و alt هستند که با تگ تصویر استفاده می‌شوند.
برای مثال، برای اضافه کردن یک تصویر، می‌توانید بنویسید:
<code><img src="picture.jpg" alt="یک عکس خوب"></code>
در اینجا، src به مرورگر می‌گوید که فایل تصویر کجاست، و alt در صورت عدم نمایش تصویر، توضیحی در مورد آن ارائه می‌دهد.
سند HTML به دو بخش تقسیم می‌شود:
لینک‌ها به شما امکان می‌دهند از یک صفحه به صفحه دیگر بروید. در HTML، ما با استفاده از تگ <a> لینک‌ها را ایجاد می‌کنیم. ویژگی href درون این تگ، مقصد لینک را به مرورگر می‌گوید.
برای مثال:
<code><a href="https://www.example.com">به Example.com مراجعه کنید</a></code>
وقتی روی این لینک کلیک می‌کنید، مرورگر شما وب‌سایت example.com را باز می‌کند.
تصاویر، صفحه وب را روشن‌تر و جذاب‌تر می‌کنند. برای اضافه کردن تصویر، از تگ <img> استفاده می‌کنید. به یاد داشته باشید که تگ <img> تگ پایانی ندارد.
نحوه اضافه کردن تصویر به این صورت است:
<code><img src="sunflower.jpg" alt="یک گل آفتابگردان درخشان"></code>
این کد به مرورگر می‌گوید که تصویری از یک گل آفتابگردان را نمایش دهد. ویژگی src به مکان تصویر اشاره می‌کند و ویژگی alt توضیحی در مورد تصویر ارائه می‌دهد.
لیست‌ها اطلاعات را در قالبی مرتب سازماندهی می‌کنند. دو نوع اصلی لیست در HTML وجود دارد:
در اینجا مثالی از یک لیست نامرتب آورده شده است:
<کد><ul>
<li>سیب</li>
<li>موز</li>
<li>گیلاس</li>
</ul> </کد>
و در اینجا مثالی از یک لیست مرتب شده آورده شده است:
<کد><ol>
<li>اول</li>
<li>دوم</li>
سوم
</ol> </code>
جداول به نمایش اطلاعات در ردیف‌ها و ستون‌ها کمک می‌کنند. آنها زمانی مفید هستند که نیاز به مقایسه داده‌ها یا فهرست کردن موارد در یک شبکه داشته باشید.
در اینجا یک مثال ساده از یک جدول HTML آورده شده است:
<کد><table border="1">
<tr>
<th>نام</th>
<th>سن</th>
</tr>
<tr>
<td>آلیس</td>
<td>10</td>
</tr>
</جدول> </کد>
در این جدول، <tr> یک ردیف جدول را تعریف می‌کند، <th> برای عنوان جدول (متن پررنگ) و <td> برای داده‌های جدول (سلول‌ها) استفاده می‌شود.
HTML همچنین به شما امکان می‌دهد محتوای چندرسانه‌ای مانند صدا و تصویر اضافه کنید. با تگ <audio> می‌توانید فایل‌های صوتی را اضافه کنید. با تگ <video> می‌توانید پخش‌کننده‌های ویدیو را در صفحه وب خود جاسازی کنید.
در اینجا نمونه‌ای از کد جاسازی ویدیو آورده شده است:
<code><video width="320" height="240" controls>
<منبع src="movie.mp4" type="video/mp4">
</video> </code>
این کد یک پخش‌کننده‌ی ویدیو با دکمه‌هایی برای پخش، مکث یا تغییر صدا ایجاد می‌کند. ویژگی controls به مرورگر می‌گوید که این دکمه‌ها را نمایش دهد.
هر وب‌سایتی در اینترنت با HTML ساخته شده است. تصور کنید که از وب‌سایت مدرسه خود، یک سایت بازی سرگرم‌کننده یا یک داستان آنلاین بازدید می‌کنید. HTML در پشت صحنه کار می‌کند تا متن، تصاویر و سایر محتوا را طوری تنظیم کند که بتوانید آنها را به وضوح ببینید.
برای مثال، وقتی عکسی از شخصیت کارتونی مورد علاقه‌تان را به صورت آنلاین می‌بینید یا روی لینکی کلیک می‌کنید تا درباره یک موضوع جالب بیشتر بخوانید، HTML آنجاست تا این کار را انجام دهد.
بیایید به یک پروژه ساده نگاه کنیم. تصور کنید که می‌خواهید یک صفحه وب کوچک در مورد حیوان مورد علاقه خود، مانند یک گربه، ایجاد کنید. می‌توانید یک عنوان، یک پاراگراف در مورد گربه‌ها، یک تصویر و حتی یک لینک به وب‌سایتی با حقایق جالب در مورد گربه‌ها قرار دهید.
کد HTML شما ممکن است به این شکل باشد:
<کد><!DOCTYPE html>
<html>
<سر>
<title>حیوان مورد علاقه من</title>
</head>
<بدنه>
<h1>همه چیز درباره گربه‌ها</h1>
<p>گربه‌ها بازیگوش و مهربان هستند. آنها عاشق خوابیدن و خرخر کردن هستند. بسیاری از مردم دوست دارند گربه‌ها را به عنوان حیوان خانگی داشته باشند.</p>
<img src="cat.jpg" alt="یک گربه بامزه">
<a href="https://www.catfacts.com">درباره گربه‌ها بیشتر بدانید</a>
</body>
</html> </کد>
این پروژه از عنوان‌ها، پاراگراف‌ها، تصاویر و لینک‌ها استفاده می‌کند و نشان می‌دهد که چگونه از HTML برای ساخت یک صفحه وب کامل با بخش‌های مختلف استفاده می‌شود.
در حالی که HTML ساختار یک صفحه وب را می‌سازد، ابزارهای دیگری نیز وجود دارند که ظاهر و رفتار وب‌سایت‌ها را به شیوه‌های جالبی تغییر می‌دهند.
اگرچه امروزه ما در حال یادگیری HTML هستیم، اما دانستن CSS و جاوا اسکریپت به ما کمک می‌کند تا نحوه ساخت وب‌سایت‌ها را درک کنیم.
همانطور که HTML را بررسی می‌کنید، تگ‌های بسیار دیگری را نیز خواهید یافت. در اینجا چند مورد دیگر برای آشنایی بیشتر آورده شده است:
این برچسب‌ها به شما کنترل بیشتری بر نحوه نمایش محتوایتان در یک صفحه وب می‌دهند.
HTML از زمان ایجادش تغییرات زیادی کرده است. تگ‌ها و ویژگی‌های جدید زیادی به مرور زمان اضافه شده‌اند. هر نسخه جدید HTML، ایجاد وب‌سایت‌های پیچیده و زیبا را آسان‌تر می‌کند. امروزه، HTML با CSS و جاوا اسکریپت برای ساخت وب‌سایت‌های مدرنی که استفاده از آنها سرگرم‌کننده است و ظاهر زیبایی دارند، همکاری می‌کند.
این تکامل به این معنی است که HTML هم یادگیری آسانی دارد و هم به اندازه کافی قدرتمند است تا بتوان همه چیز را از صفحات وب ساده گرفته تا برنامه‌های وب پیچیده ایجاد کرد.
اگرچه یادگیری HTML سرگرم‌کننده است، اما همیشه مهم است که در اینترنت ایمن بمانید. هنگام بازدید از وب‌سایت‌ها یا کاوش در محتوای آنلاین، به یاد داشته باشید که اگر در مورد چیزی مطمئن نیستید، همیشه از یک بزرگسال کمک بخواهید. ایمنی شما در اولویت است و یادگیری HTML همیشه باید یک تجربه سرگرم‌کننده و ایمن باشد.
بیایید نگاهی به چند اصطلاح مهمی که امروز یاد گرفتید بیندازیم:
HTML در بسیاری از محیط‌های دنیای واقعی استفاده می‌شود. در اینجا چند مثال آورده شده است:
این مثال‌ها نشان می‌دهند که چگونه HTML ابزاری بسیار مفید در بسیاری از بخش‌های زندگی روزمره است.
امروز یاد گرفتیم که HTML مخفف عبارت Hypertext Markup Language (زبان نشانه‌گذاری فرامتن) است. این زبان، زبان پایه‌ای برای ایجاد صفحات وب است. در اینجا نکات کلیدی برای به خاطر سپردن آورده شده است:
HTML پایه و اساس هر وب‌سایتی است که در اینترنت می‌بینید. با بلوک‌های سازنده ساده‌ای مانند تگ‌ها و ویژگی‌ها، می‌توانید صفحات سرگرم‌کننده و تعاملی ایجاد کنید. با ادامه یادگیری، خواهید دید که چگونه HTML به زنده کردن صفحات وب کمک می‌کند و اینترنت را به مکانی مفید و هیجان‌انگیز برای کاوش تبدیل می‌کند.
