فایل اچ تی ام ال چیست؟ راهنمای جامع برای ساخت، باز کردن و انتشار فایل های HTML

فایل اچ تی ام ال چیست؟ راهنمای جامع برای ساخت، باز کردن و انتشار فایل های HTML

? اچ تی ام ال: سازه ی بنیادین وبسایت شما

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

HTML به مرورگر می گوید چه چیزهایی باید در صفحه نمایش داده شوند. مثلاً عنوانی که در تب مرورگر می بینید مانند «فایل های اچ تی ام ال: چگونه بسازیم و استفاده کنیم» دقیقاً از تگ <title> در فایل HTML شما خوانده می شود.

? چگونه یک فایل HTML را باز کنید؟

۱. باز کردن در مرورگر (برای کاربران عادی)

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

۲. باز کردن در محیط توسعه (IDE) روش حرفه ای تر

به عنوان یک توسعه دهنده، بهتر است فایل های HTML را در محیط توسعه ی یکپارچه (IDE) خود باز کنید، محیط پیشنهادی Gitpod است.

? نکته کاربردی:
فایل های HTML را می توانید با کشیدن و رها کردن (Drag & Drop) در فضای کاری Gitpod وارد کنید. سپس با دستور زیر، صفحه را در مرورگر پیش نمایش کنید:

python3 -m http.server
Code language: CSS (css)

?️ چگونه یک فایل HTML بسازید؟

مراحل ساخت اولین فایل HTML شما بسیار ساده است:

مرحله ۱: ایجاد فایل جدید

در IDE خود، یک فایل جدید با پسوند .html ایجاد کنید.
✅ نکته: بهتر است نام فایل اصلی پروژه شما index.html باشد چرا؟ چون مرورگرها و سرورها به طور خودکار این فایل را به عنوان صفحه ی اصلی بارگذاری می کنند.

مرحله ۲: استفاده از Emmet (شگفت انگیز!)

اکثر IDEهای مدرن از Emmet پشتیبانی می کنند یک ابزار هوشمند برای تولید کد HTML به صورت خودکار.

? کافیست در فایل جدید خود علامت تعجب (!) را تایپ کرده و کلید Tab را فشار دهید.
به طور خودکار، یک ساختار پایه ای HTML شامل تگ های <html>, <head>, و <body> برای شما ایجاد می شود.

مرحله ۳: افزودن محتوا

اکنون فایل شما خالی است. برای تست، یک عنوان سطح یک اضافه کنید:

<h1>Hello world!</h1>
Code language: HTML, XML (xml)

? با استفاده از Emmet: کافیست h1 را تایپ کرده و Tab بزنید تگ به صورت خودکار کامل می شود.

مرحله ۴: اجرا و مشاهده

فایل را با روش گفته شده در بخش قبلی اجرا کنید. اگر متن “Hello world!” را در مرورگر دیدید تبریک! شما اولین وب صفحه ی خود را ساخته اید.

? چگونه فایل HTML خود را منتشر کنید؟

حالا که وبسایت شما آماده است، وقت آن رسیده تا آن را با جهان به اشتراک بگذارید و خوشبختانه، نیازی به پرداخت هزینه نیست! از GitHub Pages استفاده کنید.

مراحل انتشار با GitHub Pages:

  1. مخزن (Repository) خود را باز کنید.
    اگر از Gitpod استفاده می کنید، احتمالاً قبلاً یک مخزن برای پروژه تان ایجاد کرده اید.
  2. مطمئن شوید آخرین تغییرات روی GitHub آپلود شده اند.
    پیام آخرین commit در GitHub و محیط کاری شما باید یکسان باشد.
  3. به تب Settings → بخش Pages در نوار سمت چپ بروید.
    ⚠️ مخزن شما باید Public باشد در غیر این صورت GitHub Pages فعال نمی شود.
  4. شاخه ی (Branch) اصلی خود را انتخاب کنید معمولاً main یا master.
  5. روی دکمه Save کلیک کنید.
  6. پس از چند دقیقه، آدرس وبسایت شما نمایش داده می شود معمولاً به شکل زیر:
https://[نام کاربری شما].github.io/[نام مخزن شما]/Code language: JavaScript (javascript)

⚠️ نکته حیاتی: مسیرهای نسبی (Relative Paths)

اگر از فایل هایی مانند تصاویر، CSS یا PDF در پروژه تان استفاده می کنید، حتماً از مسیرهای نسبی استفاده کنید نه مسیرهای مطلق.

چرا؟

  • مسیر مطلق (مثلاً /images/logo.png) همیشه از ریشه ی دامنه شروع می شود:
    https://[نام_کاربری].github.io/
    در حالی که فایل های شما در اینجا نیستند بلکه در:
    https://[نام_کاربری].github.io/[نام_مخزن]/ قرار دارند.

مسیر نسبی (مثلاً images/logo.png) از محل فایل HTML شروع می شود و به درستی فایل ها را پیدا می کند.

✅ راه حل:

در تگ های HTML خود، اسلش اول (/) را از مسیر فایل ها حذف کنید.
مثال:

<!– ❌ اشتباه (مسیر مطلق) –>

<img src=”/images/logo.png”>

<!– ✅ درست (مسیر نسبی) –>

<img src=”images/logo.png”>

پس از اعمال تغییرات، آن ها را به GitHub پوش کنید و چند دقیقه صبر کنید تا GitHub Pages به روزرسانی شود.

تصویر نویسنده مهدی پشوتن
مهدی پشوتن

مهدی پشوتن مدیر سابق سئو در مایکت، مدرس اصلی دوره سئو لرن یار، با بیش از یک دهه تجربه در طراحی ساختارهای وب سایت ها، بهینه سازی محتوا و توسعه پلتفرم های آنلاین، یکی از چهره های برجسته در حوزه سئو و تجربه کاربری در فضای وب فارسی است. او با ترکیب دانش فنی در زمینه SEO، NLP و معماری اطلاعات، توانسته است مسیرهای یادگیری منحصربه فردی طراحی کند که کاربردی و کاملاً منطبق با نیازهای بازار کار است.

پست هایی که مطالعه آن ها خالی از لطف نیست

نظرات کاربران
ارسال دیدگاه
هنـوز دیدگاهی ثبــت نشــده اولیــن باشــید شــما