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

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

اگر سروکارتان با اینترنت و وب باشد حتما تا به حال با کلمه 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 بنویسید در صفحه نمایش داده خواهد شد (شامل پاراگراف‌ها، تصاویر، لینک‌ها و…)

چطور یک عکس به صفحه‌ی HTML خود اضافه کنیم؟

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

برای اضافه کردن تصویر در HTML باید از کد زیر استفاده کنید:

<img src="آدرس تصویر" />

بدین ترتیب، مرورگر تصویر شما را نمایش خواد داد، به یاد داشته باشید که در بخش “” باید آدرس کامل تصویر خود را به همراه http یا https و پسوند عکس وارد کنید!

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

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

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

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

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

61 گفتگو

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

  1. آبتین رسولی گفت:

    سلام ++ Note Pad ادیتوره ؟

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

      سلام، بله ادیتوره (IDE نیست)

  2. you movies گفت:

    سایت خیلی خوبی دارید
    امیدوارم موفق باشید

  3. حسن رهبر گفت:

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

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

      سلام حسن عزیز

      برای اینکه سایتتون به شکل عمومی و در دسترس همه باشه، باید دامنه و هاست خریداری کنید و سایتتون رو به هاست منتقل کنید، توی آموزش زیر می‌تونید اطلاعات کاملی رو در خصوص هاست و دامنه مطالعه کنید:
      https://www.hamyarit.com/internet/host-domain/

      همچنین برای اینکه سایتتون در جستجوی گوگل نمایش داده باشه، لازمه که با فرایند بهینه‌سازی سایت برای موتورهای جستجو (سئو) آشنا باشید، که در این خصوص هم‌ آموزش زیر اطلاعات خیلی خوبی بهتون میده:
      https://www.hamyarit.com/internet/seo/

      لطفاً این‌ها رو مطالعه کنید و اگر سوالی داشتید مجددا بپرسید تا راهنماییتون کنم.

  4. ناشناس گفت:

    سلام عکس رو چطور باید بین تگ بادی قرار داد؟

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

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

  5. فرشید گفت:

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

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

      سلام، متاسفانه منظورتون رو از سفارش متوجه نشدم، اما برای ساخت وبسایت باید مراحل زیادی رو طی کنید و صرفا با نوشتن کدهای HTML یک سایت کامل نخواهید داشت، فکر می‌کنم این مقاله رو که بخونید اطلاعات خیلی خوبی بهتون بده:
      https://www.hamyarit.com/internet/web-design/

  6. Sana ... گفت:

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

    1. Sana ... گفت:

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

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

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

  7. مانیا نمازی گفت:

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

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

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

  8. علی گفت:

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

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

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

  9. علی گفت:

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

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

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

  10. علی گفت:

    یکی جواب بده

  11. علی گفت:

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

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

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

  12. علی گفت:

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

  13. علی گفت:

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

    1. علی گفت:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  17. سلام گفت:

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

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

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

  18. محمد گفت:

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

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

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

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

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

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

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

  19. محمدرضا گفت:

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

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

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

  20. محمدرضا گفت:

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

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

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

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

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

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

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

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

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

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

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

  23. امیر گفت:

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

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

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

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

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

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

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

  25. مریم گفت:

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

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

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

  26. عرشیا گفت:

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

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

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

  27. ناشناس گفت:

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

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

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

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

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

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

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

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

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

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

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

  29. دارک استار گفت:

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