HTML چیست؟

نویسنده پوریا ستایش پوریا ستایش
1399/05/02
0
212
زمان مطالعه 7 دقیقه
HTML چیست؟

با قسمت اول از آموزش HTML در خدمت شما هستیم. در این قسمت به مفاهیم پایه‌ای مثل عنصر HTML و تگ HTML می‌پردازیم که بسیار اهمیت بالایی دارند و اگر با امثال این اصطلاحات آشنا نباشید به شدت در آینده دچار مشکل می‌شوید.

در قسمت قبلی به سرفصل های آموزش HTML پرداختیم و توضیحاتی در مورد اینکه HTML چیست، دادیم.

دقیقاً HTML چیست؟

یادگیری HTML به‌صورت کامل، اولین قدم برای ایجاد سایت‌ها است ، اما اگر دانش کمی هم در مورد HTML داشته باشید خیلی از کارهای ویرایش سایت را می‌توانید به‌راحتی انجام دهید. با ادامه یادگیری ، می‌توانید HTML را با CSS و JavaScript ترکیب کنید تا سایت‌های جذاب و حرفه‌ای طراحی کنید.

HTML بستری برای نمایش محتوا مثل تصویر، متن، ویدئو و... در سایت است. HTML مخفف عبارت HyperText markup language است که معنای لغوی آن عبارت «زبان نشانه گذاری ابرمتن» است که مرورگرها آن را درک می‌کنند و HTML برایشان قابل درک است.

تگ HTML یعنی چی؟

در HTML مفهومی به اسم تگ وجود دارد. ما هر محتوایی داشته باشیم مثل متن و تصویر باید داخل تگی نوشته شود. یک تگ با علامت کوچک‌تر شروع و با علامت بزرگ‌تر خاتمه می‌یابد. به عبارت زیر توجه کنید:

<html>

در مثال بالا ما یک تگ معمولی را نوشتیم که نام آن تگ HTML است. HTML از مجموعه‌ای از تگ‌ها تشکیل شده است مثل تگ <p> که برای نمایش متن در صفحه استفاده می‌شود و در آینده با آن بسیار کار خواهیم کرد.

باید بدانید اغلب تگ‌های HTML به‌صورت تگ شروع و تگ پایان نوشته می‌شوند. نوشتن تگ‌های HTML مثل زمانی است که وارد اتاق شخصی می‌شوید. رفتار شما چگونه است؟ ابتدا در خواهید زد سپس وارد می‌شوید و پس از اینکه کارتان با آن شخص تمام شد در را می‌بندید! HTML نیز همین گونه است ابتدا تگ را باز می‌کنیم سپس تگ را می‌بندیم.

به تگی که به شکل معمول مثل <HTML> نوشته می‌شود تگ شروع می‌گویند و به تگی که یک « اسلش یا خط کج مثل / » قبل از علامت بزرگ تر دارد تگ پایان می گویند. به مثال زیر توجه کنید. تگ HTML را باز کردیم و سپس تگ HTML را بستیم.

<html>

</html>

عنصر HTML به چه معناست؟

HTML از مجموعه ای از عناصر تشکیل شده است. در بالا با مفهوم تگ آشنا شدیم. تگ شروع و تگ پایان و محتوای داخل این دو، کنار هم یک عنصر HTML را تشکلی می‌دهند. این عناصر باعث می‌شوند صفحه وب ساختار داشته باشد و محتوا همانطور که طراح دستور می‌دهد نمایش داده شود.

حرف از محتوا شد! محتوا را کجا نمایش می‌دهیم؟

محتوا دقیقاً بین دو تگ شروع و پایان HTML نمایش داده می‌شود. در ادامه مثال عملی را خواهیم دید.

فرمت صفحات HTML

حتماً بارها در سیستم عامل یک فایل txt ساختید، فرمت این فایل txt‌ است و برای مرورگر در حد همان متن خالی اهمیت دارد. اگر بخواهیم صفحات HTML درست کنیم حتماً باید از فرمت مخصوص به خودش استفاده کنیم. فرمت فایل HTML عبارت «html.» است.

به‌عنوان تمرین همین حالا بر روی صفحه راست کلیک کنید و یک فایل متنی با فرمت txt  ایجاد کنید و با اسم index ذخیره کنید. سپس این فایل را rename کنید و به فرمت index.html تغییر دهید. اگر صحیح انجام داده باشید هنگام باز کردن، فایل باید توسط یک مرورگر باز شود. وقتی باز شد با یک صفحه خالی رو به رو می‌شوید.

فایل HTML برای مرورگر، یک فایل معمولی نیست. مرورگر می‌تواند نوشته‌های داخل فایل HTML را درک کند و چیزی که طراح مد نظر داشته است را روی صفحه بیاورد.

ساختار کلی HTML چگونه است؟

در HTML همیشه باید یک ساختاری را در فایل‌هایمان رعایت کنیم که به شکل زیر است.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

ساختاری که در بالا نوشته شد، پایه و اساس هر فایل HTML است و در همه فایل‌ها وجود دارد. اگر این کد را در همان فایل index.html بنویسید و ذخیره کنید، اگر فایل را در مرورگر باز کنید، باز هم یک صفحه خالی می‌بینید. چون برای مرورگر تعریف شده است که تگ‌ها محتوا نیستند و فقط ساختار فایل ما را نشان می‌دهند.

در آینده با قسمت‌های مختلف به‌صورت مفصل آشنا می‌شویم البته برای اینکه الآن چیزی مبهم نباشد باید به سه نکته اشاره کنیم:

  • یک فایل HTML حتماً باید با عبارت <DOCTYPE html!> شروع شود. این عبارت یک تگ نیست فقط اطلاعاتی برای مرورگر است که با چه فایلی رو به رو می‌شود. در اینجا به مرورگر می‌گوییم که فایل ما از نوع HTML است.
  • تگ  head که در ساختار بالا دیدید شامل یک سری اطلاعات برای مرورگرها و خزندگان موتورهای جستجو مثل گوگل است و برای انسان‌ها اهمیتی ندارد.
  • هر آنچه در body نوشته شود، برای نمایش به کاربران است و انواع محتوا مثل متن و تصویر و ویدئو درون این تگ قرار می‌گیرد.

تگ پاراگراف در HTML

تصویر زیر ، یک عنصر پاراگراف HTML را نشان می‌دهد. (کلمه عنصر را که فراموش نکردید؟)

تگ پاراگراف در HTML

تگ پاراگراف یا تگ p برای نمایش محتوای متنی استفاده می‌شود. و شامل قطعات زیر است:

  • تگ شروع یا همان <p>
  • محتوا یا همان Hello World
  • تگ بسته <p/>

ساختار کلی یک فایل HTML برای نمایش پاراگراف به‌صورت زیر است:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

در حال حاضر، می‌خواهیم به نحوه اضافه کردن و تغییر محتوای اصلی در یک صفحه تمرکز کنیم. اگر صفحات ما زشت به نظر می‌رسند نگران نباشید، ما تازه در ابتدای راه هستیم. تگ‌های بسیاری وجود دارند که می‌توانیم از آن‌ها برای سازمان‌دهی و نمایش متن و تصویر استفاده کنیم.

و اما در این قسمت چه چیزی آموختیم؟ بگذارید من از شما بپرسم!

  • HTML چیست؟ چه کاربردی دارد؟
  • فرمت فایل های HTML را می‌دانید؟
  • فرق بین فایل HTML و یک txt معمولی در چیست؟
  • تگ و عنصر در HTML به چه معناست؟
  • تگ پاراگراف به چه منظور ساخته شده است؟

اگر جواب تمامی سؤالات بالا را می‌دانید می‌توانید به قسمت بعدی آموزش مراجعه کنید و اما اگر سؤالی دارید می‌توانید آن را با ما در میان بگذارید ما به سؤالات شما پاسخ خواهیم داد. در نهایت امیدوارم از این مطلب استفاده کرده باشید هرچند بیشتر به مفاهیم پایه پرداختیم اما چاره‌ای نبود، برای شروع لازم است مفاهیمی را بدانیم.