با زبان HTML آشنا شوید، پایه و اساس شکل‌گیری صفحات وب

زمان مطالعه: حدود 4 دقیقه / 52 گفتگو

اگر سروکارتان با اینترنت و وب باشد حتما تا به حال با کلمه HTML برخورد داشته‌اید، این واژه مخفف عبارات Hyper Text Markup Language است، می‌توان گفت تمام المان‌هایی که در صفحه مرورگر خود می‌بینید به کمک اچ تی ام ال به وجود آمده‌اند، HTML یک زبان نشانه گذاری بوده و یادگیری آن ساده و بسیار شیرین است (آن را با زبان برنامه‌نویسی اشتباه نگیرید) در این آموزش از همیار آی‌تی قصد داریم در ابتدا اندکی با تاریخچه‌ی شکل‌گیری این زبان آشنا شده و در ادامه ساختار HTML و دستورات آن را مورد بررسی قرار دهیم.

با زبان HTML آشنا شوید، پایه و اساس شکل‌گیری صفحات وب

زبان برنامه‌نویسی صفحات وب چیست؟

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

چگونه یک صفحه وب را طراحی کنیم؟

ایجاد یک صفحه وب از آنچه که فکرش را می‌کنید بسیار آسان‌تر است، شما حتی با استفاده از Notepad ویندوزتان نیز می‌توانید یک سند HTML ایجاد کنید، اما برای راحتی کار به شما نرم‌افزار رایگان Notepad++ را پیشنهاد می‌کنیم، شما می‌توانید کد‌های مورد نظر را در نوت‌پد ویندوز نیز تایپ و اجرا کنید ولی برای راحتی کار و فهم بهتر کدها توصیه می‌کنیم از نرم‌افزار نوت‌پد پلاس‌پلاس استفاده کنید.

از کجا شروع کنیم؟

  • با مراجعه به منوی استارت یا جستجو برنامه نوت‌پد را پیدا کرده و آن را باز کنید، ما کدهای HTML را در این صفحه خواهیم نوشت.
  • حال باید فایل خود را ذخیره کنیم، در منوی بالایی نوت‌پد بر روی گزینه File کلیک کرده و گزینه‌ی Save As… را انتخاب کنید، حال یک نام دلخواه برای فایلتان انتخاب کرده و حتما پسوند html. را به انتهای نام پرونده اضافه کنید (مثل: hamyarit.html).
  • در بخش پایین نوت‌پد و در کنار گزینه‌ی Save یک کادر بازشونده با عنوان Encoding وجود دارد، بروی آن کلیک کرده و گزینه‌ی UTF-8 را انتخاب کنید.
  • در نهایت فایلتان را در محل دلخواه (مثلا دسکتاپ) ذخیره کنید، با کلیک بر روی فایل ذخیره شده و بازکردن آن مشاهده می‌کنید که صفحه مرورگر باز خواهد شد. (البته چون هنوز کدی نوشته نشده است صفحه خالی را مشاهده می‌کنید)

تگ HTML چیست؟

قطعه کد زیر را مشاهده‌ کنید:

<tag> تگ اچ تی ام ال </tag>

برای نوشتن کدها از یک تگ بازکننده به صورت <…> و از تگ تمام‌کننده به صورت<…/> استفاده می‌کنیم و محتوای مورد نظر را در میان دو تگ بازکننده (Opening Tag) و تمام‌کننده (Closing Tag) قرار می‌دهیم.

همانطور که مشاهده می‌کنید کلمه‌ی کلیدی tag در میان دو علامت <> نوشته شده است، برای نوشتن کد اچ تی ام ال باید کلمات کلیدی را درمیان چنین علامتی بنویسیم، چند نمونه از تگ‌های اچ تی ام ال را در زیر مشاهده می‌کنید:

<!DOCTYPE html>
<html>
	<head>
		<title> عنوان صفحه </title>
	</head>

	<body>
		<h1> تگ عنوان </h1>
		<p> تگ پاراگرف </p>
	</body>
</html>

با دقت در کدهای بالا در می‌یابید که قالب کلی تگ‌های اچ تی ام ال به صورت زیر است:
<علامت اسلش و تکرار نام تگ> … <نام تگ>

شروع کدنویسی
برای شروع وارد نوت‌پد شوید و عبارت:

<!DOCTYPE html>

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

<html>
</html>

پس از تگ html شما باید تگ هِد (head) را به سند خود اضافه کنید.

<!DOCTYPE html>
<html>
<head>
...
</head>
</html>

در میان تگ head عبارات مورد نیاز برای اجرای صحیح صفحه وب قرار می‌گیرند، این عبارات توسط کاربر به طور مستقیم قابل مشاهده نیستند ولی نقش مهمی را در ایجاد صفحه‌ی وب ایفا می‌کنند، فعلا عبارات زیر را بین تگ هِد خود اضافه کنید.

<meta charset="UTF-8">
<title> عنوان نمایش‌داده‌شده در تب مرورگر </title>

پس از تگ head نوبت به تگ body می‌رسد، این تگ دربردارنده‌ی اجزای قابل مشاهده‌ی صفحه می‌باشد:

...
<body>
...
</body>
...

حال قالب اصلی کدهای شما باید شکل زیر را به خود گرفته باشد:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> عنوان صفحه </title>
</head>
<body>
المان‌های قابل مشاهده
</body>
</html>

قالب کلی یک صفحه‌ی اچ تی ام ال به این صورت است، تمام عباراتی که بین تگ body بنویسید در صفحه نمایش داده خواهد شد (شامل پاراگراف‌ها، تصاویر، لینک‌ها و…)

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

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

در پایان این آموزش شما باید مهارت‌های زیر را کسب کرده باشید:

  • با مفهوم اچ تی ام ال آشنا شده باشید.
  • بدانید چگونه باید کدهای اچ تی ام ال را بنویسید.
  • با مفهوم تگ آشنا شده باشید.
  • نحوه نگارش تگ‌های اچ تی ام ال را بدانید و قالب کلی آن‌ها را بشناسید.

شما یک گام جلوتر از دیگران باشید! اگر به آی‌تی و تکنولوژی علاقه‌مندید و دوست دارید سریع‌تر در این زمینه پیشرفت کنید، همین حالا به جمع ۲۷۸۳ عضو همیار آی‌تی بپیوندید، دسترسی به تمام آموزش‌های پریمیوم، دریافت جدیدترین آموزش‌های کاربردی مرتبط با آی‌تی و استفاده از مشاوره‌ی رایگان، برخی از مزایای عضویت در سایت هستد، شما نیز به کاربران همیار پیوسته و همین حالا وارد دنیای حرفه‌ای‌ها شوید... من هم می‌خواهم عضو ویژه‌ی همیار شوم

52 گفتگو

در بحث‌‌ پیرامون این مقاله شرکت کنید، سوالات شما توسط کارشناسان همیار آی‌تی پاسخ داده می‌شود...

  1. Avatar Sana ... گفت:

    سلام وقت بخیر
    برای برنامه ی نوت پد چند بیت نصب کنیم خوبه ۶۴ یا ۳۲ و اینکه کدومشون zip یا اونیکی ها اگه امکانش هست لینک اپلبکیشن رو به صورت کامل بزارید ممنون☺

    1. Avatar Sana ... گفت:

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

    2. Avatar علی داوری گفت:

      سلام این رو داخل کامپیوتر یا لپ تاپ جستجو کن
      notepad

  2. Avatar مانیا نمازی گفت:

    فیلم اموزشی در زمینه کدنویسی دارین تو وبسایت؟

    1. فرشاد گوهری فرشاد گوهری گفت:

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

  3. Avatar علی گفت:

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

    1. فرشاد گوهری فرشاد گوهری گفت:

      همینجا در بخش نظرات بهتره بپرسید، چون ممکنه سوال شما، سوال خیلی از دوستان دیگه هم باشه، بنابراین اگر همینجا در بخش نظرات بپرسید برای بقیه هم مفید هست.
      در مورد تصویر هم می‌تونید توی سایت‌های «آپلود عکس» آپلودشون کنید و لینکش رو اینجا قرار بدید.

  4. Avatar علی گفت:

    اقا ی گوهری تو رو خدا شرمنده
    اشتباه کردم این پیام ها رو دادم لطفاً پاکشون کنید

    1. فرشاد گوهری فرشاد گوهری گفت:

      مشکلی نیست علی عزیز

  5. Avatar علی گفت:

    یکی جواب بده

  6. Avatar علی گفت:

    پیام من رو حذف نکنید آقای گوهری
    لطفا در جیمیل بفرستید

    1. فرشاد گوهری فرشاد گوهری گفت:

      نه علی جان، چرا باید کامنتتون رو حذف کنم :‌)
      روی اولین نظری که گذاشته بودید، جوابتون رو دادم

  7. Avatar علی گفت:

    نقش title در پاراگراف چیه؟
    ممنون میشم اگه جواب بدید

  8. Avatar علی گفت:

    سلام
    ببخشید نقش title ودر چیه؟

    1. Avatar علی گفت:

      نقش title در پاراگراف چیه؟

    2. فرشاد گوهری فرشاد گوهری گفت:

      سلام علی جان، اگر منظورتون تگ‌های هدینگ هست (h1 تا h6) در سئو (SEO) موثر هستند.

  9. Avatar محمد عرفان گفت:

    چجوری باید یه عکس یا یه فایل تو سایتم اپلود کنم

    1. فرشاد گوهری فرشاد گوهری گفت:

      اگر سایتتون در محیط اینترنت هست که باید روی هاستتون آپلود کنید، اما اگر به شکل لوکال و در کامپیوتر خودتون هست باید آدرسش رو در کدتون قرار بدید.

  10. Avatar محمد عرفان گفت:

    ببخشید یه سول داشتم میشه بگید چجوری عکس براگذاری کنم تو نوت پد

    1. فرشاد گوهری فرشاد گوهری گفت:

      باید آدرس فایل رو در HTML قرار بدید.

  11. Avatar محمد عرفان گفت:

    ببخشید المان های قب مشاده یعنی

    1. فرشاد گوهری فرشاد گوهری گفت:

      سلام، متاسفانه متوجه منظورتون نشدم

    2. Avatar علی داوری گفت:

      سلام اگه یه چیز دیگه به جای المان های قابل مشاهده بنویسی اون رو نشون میده
      مثلا اگه بنویسی سلام سلام رو نشون میده

  12. Avatar سلام گفت:

    میخواستم بدونم با نوت پد میشه یه بازی خیلی ساده ساخت؟

    1. فرشاد گوهری فرشاد گوهری گفت:

      بله میشه اما کار بسیار سختی هست، اگر بخواین با HTML بنویسید، نیاز به JS و CSS هم دارید که واقعا نوشتن تمام این‌ها در نوت‌پد کار ساده‌ای نیست :‌)

  13. Avatar محمد گفت:

    سلام من با توجه به آموزش هاتون وب رو ساختم و واردش شدم.ولی وقتی داخل مروگر جستجوش میکنم پیداش نمیکنه چرا؟ میشه کمکم کنید

    1. فرشاد گوهری فرشاد گوهری گفت:

      سلام، منظورتون از جستجو اینه که داخل گوگل سرچ می‌کنید یا آدرس سایت رو توی مرورگر تایپ می‌کنید؟ سایتتون روی هاست قرار داره یا روی کامپیوتر خودتونه؟

    2. Avatar احسان لشگری گفت:

      سلام
      منم همین مشکل دوستمون رو دارم و سایت رو ساختم و با گوشی اسم سایتم رو توی تب مرورگر تایپ کردم ولی خطای کد ۶۰۳ نمیدونم یا ۶۰۴ رو داد.
      فقط جناب گوهری منظورتون از اینکه فرمودین روی هاسته یا کامپیوتر رو متوجه نشدم؟

    3. فرشاد گوهری فرشاد گوهری گفت:

      سلام، ببینید شما وقتی یک صفحه‌ی وب درست می‌کنید (مثلا در قالب HTML که در این آموزش هم توضیح داده شده) در اصل این صفحه رو در کامپیوتر خودتون ساختید و تنها کسی که می‌تونه اون رو ببینه خود شما هستید (با کلیک کردن روی فایل) اگر بخواین صفحه‌ی وب یا وبسایتتون از طریق اینترنت در دسترس باشه باید اون رو در یک فضای آنلاین که در محیط اینترنت بهش میگیم هاست (Host) آپلود کنید و یک نام دامنه (Domain) برای خودتون بخرید که سایتتون تحت اون آدرس در اینترنت قابل دسترسی باشه، توصیه می‌کنم اگر آموزش‌های زیر رو مطالعه نکردید حتما بخونید:
      https://www.hamyarit.com/internet/host-domain/
      https://www.hamyarit.com/8934/web-design-introduction/

  14. Avatar محمدرضا گفت:

    ببخشید اشتباه نوشتم من چطور میتونم تو اون سایت که ساختم برنامه و یا لینک دانلود اراعه بدم

    1. فرشاد گوهری فرشاد گوهری گفت:

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

  15. Avatar محمدرضا گفت:

    سلام ممنون بابت سایت خوبتون فقط من یه مشکلی دارم سایت من درست شده ولی چطور می تونم تو برنامه اراعه بدم

  16. Avatar شهریار دهقانی گفت:

    سلام ببخشید یک سوال دیگه داشتم
    چرا وقتی در نوت پد بین تگ بادی از کلمات فارسی استفاده میکنیم در مرورگر به صورت علامت سوال نمایش داده میشه؟؟
    سپاس از پاسخ گویی شما

    1. فرشاد گوهری فرشاد گوهری گفت:

      سلام مجدد، به این دلیل که زبان فارسی دارای کارکترهای utf-8 هست و باید اون رو به ابتدای کدهای صفحه اضافه کنید تا مرورگر بتونه کارکترهای زبان فارسی رو نمایش بده، توی لینک زیر می‌تونید اطلاعات بیشتری در این زمینه کسب کنید شهریار جان:
      https://www.w3schools.com/tags/att_meta_charset.asp

  17. Avatar شهریار دهقانی گفت:

    سلام خسته نباشید آقای گوهری
    آیا بزرگی و کوچکی حروف انگلیسی در html مهمه؟ مثلا: با
    تفاوتی داره؟

    1. Avatar شهریار دهقانی گفت:

      {کدی که در ابتدای نوت پد باید بنویسیم}

    2. فرشاد گوهری فرشاد گوهری گفت:

      سلام شهریار عزیز، خیر زبان html به حروف کوچک و بزرگ حساس نیست (اصطلاحا Case Sensitive نیست) اما بهتره با حروف کوچک بنویسید.

  18. Avatar امیر گفت:

    سلام در قسمت دوم باز و بست کردن تگ باید کنار هم قرار گیرند یا زیر هم؟

    1. فرشاد گوهری فرشاد گوهری گفت:

      سلام امیر عزیز، فرقی نمی‌کنه شما می‌تونید تگ‌های باز و بسته رو هم در یک خط بنویسید و هم زیر هم، معمولا جاهایی که محتوای کمی داخل تگ میاد (مثلا برای عنوان‌ها) در یک خط می‌نویسن و جاهایی که محتوای طولانی قرار داخل تگ بیاد (مثل پاراگراف‌ها) زیر هم نوشته میشه، بیشتر برای مرتب بودن کدنویسی باید به این موضوع دقت کنید، البته این برداشتی بود که من از سوالتون داشتم، اگر درست متوجه نشدم لطفا سوالتون رو واضح‌تر بپرسید.

  19. Avatar پوریا فرمایشی گفت:

    سلام خدمت شما
    جناب من هر کاری میکنم نمیتونم پسوند رو به html تغییر بدم
    کلا ۲ گزینه دارد txt وall file
    لطفا راهنمایی کنید

    1. فرشاد گوهری فرشاد گوهری گفت:

      سلام پوریای عزیز، برای تنظیم پسوند فایل کافیه موقع ذخیره‌ی فایل در انتهای اسم عبارت html. رو بنویسید.

  20. Avatar مریم گفت:

    وقتی کد ها رو نوشتیم باید چه کار کنیم

    1. فرشاد گوهری فرشاد گوهری گفت:

      داخل یک فایل با پسوند html قرارشون بدید و هنگامی که فایل رو ذخیره کنید می‌تونید خیلی راحت با مرورگرتون بازش کنید و مرورگر کدهای شما رو در قالب یک صفحه‌ی وب نمایش میده.

  21. Avatar عرشیا گفت:

    منظورتان از عنوان نمایش داده شده در تب مرورگر چیست

    1. فرشاد گوهری فرشاد گوهری گفت:

      عنوانی که در زبانه‌ی بالای مرورگر برای هر سایتی نمایش داده میشه، دوست عزیز

  22. Avatar ناشناس گفت:

    سلام من این کد هارو نوشتم ولی ببخشید این کد ها کجا عملی میشن مال من وقتی وارد مرورگر میشه باز همون کد ها رو نشون میده

    1. فرشاد گوهری فرشاد گوهری گفت:

      سلام، مطمئن بشید که فایل کدتون رو با پسوند .html ذخیره کردید، اگر فایل txt باشه مرورگر به‌جای اجرای دستورات، خود کدها رو نمایش میده.

  23. Avatar آموزش asp.net گفت:

    با سلام و تشکر از سایت فوق العاده شما.سایت شمارو به همه دوستان معرفی کردم.

    1. Avatar علی داوری گفت:

      سلام آقای گوهری من اگه وبلاگتون سایت همیار آی تی رو بسازم برای خودم ببینم چه جوریه از نظر شما مشکلی داره؟ از کدهایی که استفاده کردید استفاده کنم

    2. فرشاد گوهری فرشاد گوهری گفت:

      سلام علی جان، خیر مشکلی نیست، هدف ما در همیار آی‌تی آموزش هست و اگر اینکار به یادگیری بیشتر شما کمک می‌کنه ایرادی نداره :‌)

    3. Avatar علی داوری گفت:

      از کد و عکس ها و همه چیز که تو ساخت این وبلاگ استفاده کردید استفاده کنم

  24. Avatar دارک استار گفت:

    با سپاس، بسیار روان و زیبا آموزش دادین، امیدوارم این سری از آموزش‌ها ادامه داشته باشن.