اکنون وقت آن شده است که شروع به نوشتن دستورات و تگ های HTML کنیم. برای این کار کافی است ابتدا محیط و برنامه‌ای را که قرار است با آن کار کنیم را انتخاب کنیم. برای نوشتن کدهای HTML می‌توانید به دلخواه خود یک برنامه را برگزینید و بدون معطلی، کار خود را شروع کنید. ساده ترین ویرایشگری که وجود دارد ویرایشگرمتنی Notepad است که می‌توانید از آن استفاده کنید. البته ویرایشگر vs code که یک نرم افزار سبک و عالی است برای این کار پیشنهاد می‌شود. ولی در حال حاضر به سراغ Notepad می‌رویم و کار خود را شروع می‌کنیم.
نکته مهم: همیشه قبل از شروع یک پروژه ی طراحی سایت ابتدا یک پوشه جدید ایجاد کنید. اما دلیل این کار چیست؟ دلیل این است که در طراحی سایت فایل‌های متفاوتی را خواهیم ساخت، مثلا فایلی برای صفحه اصلی، فایلی برای صفحات دیگر سایت و همچنین پوشه‌های متفاوتی مثل پوشه‌ای برای تصاویر سایت، پوشه‌ای برای ویدِئوها و غیره. لازم است که همه این فایل‌ها و پوشه‌ها را در یک پوشه قرار دهیم.
پس اولین کاری که باید ابتدا انجام دهیم، ایجاد یک پوشه است. سپس به سراغ باز کردن یک فایل در Notepad می‌رویم. برای اینکار کافی است وارد قسمت Start از سیستممان شویم و بعد در قسمت سرچ کلمه Notepad را سرچ کرده و آن را باز کنیم. حالا به سراغ نوشتن تگ های اچ تی ام ال می‌رویم.
تگ های مهم در HTML
ابتدا اصلی ترین تگ یعنی تگ <html></html> را می نویسیم و درون آن تگ های HTML را قرار می دهیم. اولین تگی که درون تگ <html> قرار می گیرد، تگ <head></head> به معنای سر است. درون این تگ نیز تگ های دیگری قرار می‌گیرد که فعلا به آن اشاره‌ای نمی‌کنیم. دومین تگی که درون تگ <html> قرار می دهیم تگ <body></body> ست.
تا به اینجا سه تگ را نوشتیم؛ حال می‌خواهیم به سراغ هدفمان یعنی ذخیره و اجرای کدهایمان برویم و ببینیم که خروجی کارمان به چه صورت است. در این مرحله باید کدهایی را که نوشته‌ایم ذخیره کنیم؛ میتوانیم با فشردن کلیدهای Ctrl وS همزمان اینکار را انجام دهیم. البته میتوانیم با رفتن به منوی File در نوار بالای پنجره و انتخاب گزینه Save as نیز این کار را انجام دهیم. با عمل ذخیره کردن پنجره‌ای باز می‌شود که ابتدا باید در آن محل ذخیره فایل را انتخاب کنیم. شما کجا را انتخاب می‌کنید؟ پاسخ واضح است. همان پوشه‌ای را که دقایقی پیش برای پروژه‌مان ساختیم.
حال باید اسم و پسوندی را برای فایلمان انتخاب کنیم. در ابتدا توجه کنید که باید از پسوند HTML یا HTM استفاده کنیم. هر کدام را که مایل باشیم میتوانیم استفاده کنیم. برای انتخاب اسم نیز باید از index استفاده کنیم، البته اگر هر اسم دیگری را بنویسیم با پسوند html یا htm سند ما اجرا می‌شود. اما نکته‌ای که وجود دارد این است که مرورگرها به طور پیشفرض فایلی را که با اسم index هست را به عنوان صفحه‌ی اصلی سایت در نظر می‌گیرند و آن را اجرا می‌کنند. پس در نهایت اسم فایل را index.html می‌گذاریم.
اجرا کردن فایل HTML
در مرحله آخر باید Encoding را انتخاب کنیم. باید از مقدار utf-8 استفاده کنیم. دلیل آن هم این است که ما ممکن است در سندمان از زبان فارسی و یا کاراکترهای خاص استفاده کنیم و برای آنکه کاراکترهای ما به هم نریزد؛ مقدار encoding را باید روی utf-8 قرار دهیم. اکنون کارمان تمام و روی گزینه ذخیره کلیک می‌کنیم.
اکنون سند ما ذخیره شده است و می‌خواهیم خروجی آن را مشاهده کنیم. به پوشه پروژه‌مان می‌رویم و روی فایل ذخیره شده درون آن کلیک راست می‌کنیم و با گزینه Open With، مرورگری که می‌خواهیم سندمان با آن نمایش داده شود را انتخاب می کنیم. به همین راحتی!
حالا ممکن است بخواهیم همین سندمان را ویرایش کنیم و تغییراتی روی آن ایجاد کنیم، کافی است روی سند کلیک راست کنیم و گزینه Open With را بزنیم و Notepad را انتخاب کنیم تا فایل ما با این برنامه باز شود و بتوانیم آن را ویرایش کنیم. در آینده که vs code را نصب کردیم میتوانیم آن را انتخاب کنیم و با آن تغییرات را ایجاد کنیم.
تگ پاراگراف (P)
تگ دیگری که می خواهیم به شما معرفی کنیم تگی برای معرفی پاراگراف است. تگ <p></p> معرف پاراگراف است. این تگ یک تگ زوج است یعنی دارای تگ باز <p> و تگ بسته </p> است. اگر از ویرایشگر ساده مثل Notepad استفاده می‌کنید بسیار دقت کنید که تگ پایانی (تگ بسته) را حتما بنویسید.
نکته قابل توجهی که وجود دارد این است که هرگاه بخواهید تگی را درون تگ دیگری بنویسیم ابتدا یک فاصله با کلید Tab ایجاد می‌کنیم و سپس تگ را می‌نویسیم. در نرم افزارهایی مثل vs code به صورت خودکار این فاصله ایجاد می‌شود.
برای مثال می توانید تگ زیر را درون سند خود بنویسید و خروجی آن را مشاهده کنید.
<html>
<head></head>
<body>
<p>من یک پاراگراف هستم</p>
</body>
</html>
تگ هدینگ (H)
تگ های دیگری که می‌خواهیم به شما معرفی کنیم، heading ها هستند. این تگ ها برای معرفی تیترها هستند. هر متنی که قرار باشد درون سایت قرار گیرد ممکن است دارای تیترهای متفاوتی باشد که اهمیت آن‌ها هم با هم فرق می‌کند. در این شرایط از هدینگ ها باید کمک گرفت. <h1></h1> برای مهم ترین تیتر و <h2></h2> برای تیتر با اهمیت کم تر و به همین ترتیب که <h6></h6> برای کم اهمیت ترین تیتر استفاده می‌شود. پس هدینگ ها از h1 تا h6 هستند و با توجه به اهمیت تیتر به کار می‌روند.
تگ hr در HTML
اکنون به سراغ معرفی تگ <hr> می رویم. این تگ برای جدا کردن یک قسمت از قسمت دیگر به وسیله ی یک خط افقی است. تگ <hr> یک تگ فرد است یعنی باز و بسته نمی‌شود، بلکه فقط یک تگ هست که می توانیم به صورت <hr> و یا </hr> از آن استفاده کنیم. می‌توانید مثال زیر را در سند خود بنویسید و آن را اجرا کنید تا نتیجه را ببینید و با کارکرد این تگ آشنا شوید.
<html>
<head></head>
<body>
<p>من یک پاراگراف هستم</p>
<hr>
<p>من هم یک پاراگراف هستم</p>
</body>
</html>
تگ br در HTML
در پایان تگ <br/> را معرفی می‌کنیم. این تگ برای رفتن به خط بعدی استفاده می‌شود. گاهی ممکن است بخواهیم در متن خود از اینتر که در صفحه کیبورد است استفاده کنیم، اما باید به شما بگوییم با زدن کلید اینتر هیچ اتفاقی نمی‌افتد و متن ما به خط بعدی نمی‌رود، برای این کار باید از تگ <br/> استفاده نماییم.
4 دیدگاه. Leave new
ممنونم بابت آموزش عالیتون خانم محرابی و همچنین تیم قدرت مند ابزار وردپرس.
بسیارعالی بود،تشکر
بسیار عالی ، ساده و روان
پیشنهاد میکنم این آموزش رو حتما ببینید
ممنونم