اگر سروکارتان با اینترنت و وب باشد حتما تا به حال با کلمه HTML برخورد داشته‌اید، این واژه مخفف عبارات Hyper Text Markup Language است، می‌توان گفت تمام المان‌هایی که در صفحه مرورگر خود می‌بینید به کمک اچ تی ام ال به وجود آمده‌اند، 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 را به طور صحیح می‌آموزید.
در پایان این آموزش شما باید مهارت‌های زیر را کسب کرده باشید:
- با مفهوم اچ تی ام ال آشنا شده باشید.
- بدانید چگونه باید کدهای اچ تی ام ال را بنویسید.
- با مفهوم تگ آشنا شده باشید.
- نحوه نگارش تگ‌های اچ تی ام ال را بدانید و قالب کلی آن‌ها را بشناسید.
67 پاسخ
کجا باید این کدارو بزنم من صفر صفرم الان کجا باید این کدارو برنم معنیش چیه
یک فایل txt ایجاد کنید، کدها رو داخل فایل بنویسید و در نهایت پسوند فایل رو به html تغییر بدید.
سلام
وقتی میخوام از تگ src استفاده کنم اتومات میبرته کنار تگ بادی
من ی جای کارمو اشتباه رفتم یا باید بره کنار تگ بادی؟
سلام، اگر تگ بادی رو خودتون ننوشته باشید، مرورگر به شکل خودکار میذاره بین تگ بادی، در کل هرچیزی که در صفحه‌ی وب به کاربر نمایش داده میشه «باید» داخل تگ بادی قرار بگیره.
سلام میخوام یک وب طراحی کنم چکار باید بکنم
از کجا باید شروع کنم
سلام، این آموزش رو مطالعه کنید، اطلاعات خیلی خوبی بهتون میده:
https://www.hamyarit.com/blog/web-design/
سلام ++ Note Pad ادیتوره ؟
سلام، بله ادیتوره (IDE نیست)
سایت خیلی خوبی دارید
امیدوارم موفق باشید
سلام و وقت بخیر آقای گوهری من الان یه سایت طراحی کردم چجوری بکنم همه مردم دسترسی به سایتم داشته باشن. چی بکنم که رو گوگل سرچ کنم سایتم نشون بده.
سلام حسن عزیز
برای اینکه سایتتون به شکل عمومی و در دسترس همه باشه، باید دامنه و هاست خریداری کنید و سایتتون رو به هاست منتقل کنید، توی آموزش زیر می‌تونید اطلاعات کاملی رو در خصوص هاست و دامنه مطالعه کنید:
https://www.hamyarit.com/blog/host-domain/
همچنین برای اینکه سایتتون در جستجوی گوگل نمایش داده باشه، لازمه که با فرایند بهینه‌سازی سایت برای موتورهای جستجو (سئو) آشنا باشید، که در این خصوص هم آموزش زیر اطلاعات خیلی خوبی بهتون میده:
https://www.hamyarit.com/blog/seo/
لطفاً این‌ها رو مطالعه کنید و اگر سوالی داشتید مجددا بپرسید تا راهنماییتون کنم.
سلام عکس رو چطور باید بین تگ بادی قرار داد؟
سلام دوست عزیز، روش افزودن تصویر به آموزش اضافه شد، با استفاده از تگ src می‌تونید تصاویر رو هم به صفحه اضافه کنید.
سلام ببخشید من اگه بخوام یک وب سایت بسازم و شفارش بگیرم چه کدی داخل نوت پد وارد کنم؟
برای هر کاری فرق میکنه؟
ممنونم
سلام، متاسفانه منظورتون رو از سفارش متوجه نشدم، اما برای ساخت وبسایت باید مراحل زیادی رو طی کنید و صرفا با نوشتن کدهای HTML یک سایت کامل نخواهید داشت، فکر میکنم این مقاله رو که بخونید اطلاعات خیلی خوبی بهتون بده:
https://www.hamyarit.com/blog/web-design/
سلام وقت بخیر
برای برنامه ی نوت پد چند بیت نصب کنیم خوبه ۶۴ یا ۳۲ و اینکه کدومشون zip یا اونیکی ها اگه امکانش هست لینک اپلبکیشن رو به صورت کامل بزارید ممنون☺
منظورم اپلیکیشن نوت پد هستش اگه میشه لینکش رو بزارید تا بتونیم راحت تر دانلودش کنیم ممنون
سلام این رو داخل کامپیوتر یا لپ تاپ جستجو کن
notepad
فیلم اموزشی در زمینه کدنویسی دارین تو وبسایت؟
سلام، خیر در حال حاضر آموزش‌های ما به صورت مقاله و در برخی موارد فایل‌های PDF هست که می‌تونید ازشون استفاده کنید.
راستی دقتی گوهری من اگر از روی عکس از شما سوال داشته باشم چطور بپرسم
ایا آیدی دارید که اونجا از شما بپرسم؟
چون خیلی جاها به مشکل برخوردم.
همینجا در بخش نظرات بهتره بپرسید، چون ممکنه سوال شما، سوال خیلی از دوستان دیگه هم باشه، بنابراین اگر همینجا در بخش نظرات بپرسید برای بقیه هم مفید هست.
در مورد تصویر هم می‌تونید توی سایت‌های «آپلود عکس» آپلودشون کنید و لینکش رو اینجا قرار بدید.
اقا ی گوهری تو رو خدا شرمنده
اشتباه کردم این پیام ها رو دادم لطفاً پاکشون کنید
مشکلی نیست علی عزیز
یکی جواب بده
پیام من رو حذف نکنید آقای گوهری
لطفا در جیمیل بفرستید
نه علی جان، چرا باید کامنتتون رو حذف کنم :)
روی اولین نظری که گذاشته بودید، جوابتون رو دادم
نقش title در پاراگراف چیه؟
ممنون میشم اگه جواب بدید
سلام
ببخشید نقش title ودر چیه؟
نقش title در پاراگراف چیه؟
سلام علی جان، اگر منظورتون تگ‌های هدینگ هست (h1 تا h6) در سئو (SEO) موثر هستند.
چجوری باید یه عکس یا یه فایل تو سایتم اپلود کنم
اگر سایتتون در محیط اینترنت هست که باید روی هاستتون آپلود کنید، اما اگر به شکل لوکال و در کامپیوتر خودتون هست باید آدرسش رو در کدتون قرار بدید.
ببخشید یه سول داشتم میشه بگید چجوری عکس براگذاری کنم تو نوت پد
باید آدرس فایل رو در HTML قرار بدید.
ببخشید المان های قب مشاده یعنی
سلام، متاسفانه متوجه منظورتون نشدم
سلام اگه یه چیز دیگه به جای المان های قابل مشاهده بنویسی اون رو نشون میده
مثلا اگه بنویسی سلام سلام رو نشون میده
میخواستم بدونم با نوت پد میشه یه بازی خیلی ساده ساخت؟
بله میشه اما کار بسیار سختی هست، اگر بخواین با HTML بنویسید، نیاز به JS و CSS هم دارید که واقعا نوشتن تمام این‌ها در نوت‌پد کار ساده‌ای نیست :)
سلام من با توجه به آموزش هاتون وب رو ساختم و واردش شدم.ولی وقتی داخل مروگر جستجوش میکنم پیداش نمیکنه چرا؟ میشه کمکم کنید
سلام، منظورتون از جستجو اینه که داخل گوگل سرچ می‌کنید یا آدرس سایت رو توی مرورگر تایپ می‌کنید؟ سایتتون روی هاست قرار داره یا روی کامپیوتر خودتونه؟
سلام
منم همین مشکل دوستمون رو دارم و سایت رو ساختم و با گوشی اسم سایتم رو توی تب مرورگر تایپ کردم ولی خطای کد 603 نمیدونم یا 604 رو داد.
فقط جناب گوهری منظورتون از اینکه فرمودین روی هاسته یا کامپیوتر رو متوجه نشدم؟
سلام، ببینید شما وقتی یک صفحه‌ی وب درست می‌کنید (مثلا در قالب HTML که در این آموزش هم توضیح داده شده) در اصل این صفحه رو در کامپیوتر خودتون ساختید و تنها کسی که می‌تونه اون رو ببینه خود شما هستید (با کلیک کردن روی فایل) اگر بخواین صفحه‌ی وب یا وبسایتتون از طریق اینترنت در دسترس باشه باید اون رو در یک فضای آنلاین که در محیط اینترنت بهش میگیم هاست (Host) آپلود کنید و یک نام دامنه (Domain) برای خودتون بخرید که سایتتون تحت اون آدرس در اینترنت قابل دسترسی باشه، توصیه میکنم اگر آموزش‌های زیر رو مطالعه نکردید حتما بخونید:
https://www.hamyarit.com/blog/host-domain/
https://www.hamyarit.com/blog/web-design/
ببخشید اشتباه نوشتم من چطور میتونم تو اون سایت که ساختم برنامه و یا لینک دانلود اراعه بدم
سلام، لطفا یه مقداری بیشتر توضیح بدید، سایتتون رو با چه ابزاری ساختید؟ صرفا HTML یا وردپرس؟ آیا روی هاست آپلود شده؟ میخواین فایل آپلود کنید یا صرفا یه لینک قرار بدید؟
سلام ممنون بابت سایت خوبتون فقط من یه مشکلی دارم سایت من درست شده ولی چطور می تونم تو برنامه اراعه بدم
سلام ببخشید یک سوال دیگه داشتم
چرا وقتی در نوت پد بین تگ بادی از کلمات فارسی استفاده میکنیم در مرورگر به صورت علامت سوال نمایش داده میشه؟؟
سپاس از پاسخ گویی شما
سلام مجدد، به این دلیل که زبان فارسی دارای کارکترهای utf-8 هست و باید اون رو به ابتدای کدهای صفحه اضافه کنید تا مرورگر بتونه کارکترهای زبان فارسی رو نمایش بده، توی لینک زیر می‌تونید اطلاعات بیشتری در این زمینه کسب کنید شهریار جان:
https://www.w3schools.com/tags/att_meta_charset.asp
سلام خسته نباشید آقای گوهری
آیا بزرگی و کوچکی حروف انگلیسی در html مهمه؟ مثلا: با
تفاوتی داره؟
{کدی که در ابتدای نوت پد باید بنویسیم}
سلام شهریار عزیز، خیر زبان html به حروف کوچک و بزرگ حساس نیست (اصطلاحا Case Sensitive نیست) اما بهتره با حروف کوچک بنویسید.
سلام در قسمت دوم باز و بست کردن تگ باید کنار هم قرار گیرند یا زیر هم؟
سلام امیر عزیز، فرقی نمیکنه شما می‌تونید تگ‌های باز و بسته رو هم در یک خط بنویسید و هم زیر هم، معمولا جاهایی که محتوای کمی داخل تگ میاد (مثلا برای عنوان‌ها) در یک خط می‌نویسن و جاهایی که محتوای طولانی قرار داخل تگ بیاد (مثل پاراگراف‌ها) زیر هم نوشته میشه، بیشتر برای مرتب بودن کدنویسی باید به این موضوع دقت کنید، البته این برداشتی بود که من از سوالتون داشتم، اگر درست متوجه نشدم لطفا سوالتون رو واضح‌تر بپرسید.
سلام خدمت شما
جناب من هر کاری میکنم نمیتونم پسوند رو به html تغییر بدم
کلا 2 گزینه دارد txt وall file
لطفا راهنمایی کنید
سلام پوریای عزیز، برای تنظیم پسوند فایل کافیه موقع ذخیره‌ی فایل در انتهای اسم عبارت html. رو بنویسید.
وقتی کد ها رو نوشتیم باید چه کار کنیم
داخل یک فایل با پسوند html قرارشون بدید و هنگامی که فایل رو ذخیره کنید می‌تونید خیلی راحت با مرورگرتون بازش کنید و مرورگر کدهای شما رو در قالب یک صفحه‌ی وب نمایش میده.
منظورتان از عنوان نمایش داده شده در تب مرورگر چیست
عنوانی که در زبانه‌ی بالای مرورگر برای هر سایتی نمایش داده میشه، دوست عزیز
سلام من این کد هارو نوشتم ولی ببخشید این کد ها کجا عملی میشن مال من وقتی وارد مرورگر میشه باز همون کد ها رو نشون میده
سلام، مطمئن بشید که فایل کدتون رو با پسوند .html ذخیره کردید، اگر فایل txt باشه مرورگر به‌جای اجرای دستورات، خود کدها رو نمایش میده.
با سلام و تشکر از سایت فوق العاده شما.سایت شمارو به همه دوستان معرفی کردم.
سلام آقای گوهری من اگه وبلاگتون سایت همیار آی تی رو بسازم برای خودم ببینم چه جوریه از نظر شما مشکلی داره؟ از کدهایی که استفاده کردید استفاده کنم
سلام علی جان، خیر مشکلی نیست، هدف ما در همیار آی‌تی آموزش هست و اگر اینکار به یادگیری بیشتر شما کمک میکنه ایرادی نداره :)
از کد و عکس ها و همه چیز که تو ساخت این وبلاگ استفاده کردید استفاده کنم
با سپاس، بسیار روان و زیبا آموزش دادین، امیدوارم این سری از آموزش‌ها ادامه داشته باشن.