چگونه با استفاده از HTML یک صفحه‌ی وب ساده بسازیم

این ویکی‌هاو به تو یاد می‌دهد که چگونه با استفاده از HTML (hypertext markup language زبان نشانه‌گذاری ابر‌متنی) یک صفحه‌ی وب ساده بنویسی. HTML یکی از اجراء اصلی هسته‌‌ی World Wide Web (شبکه‌ی وب جهانی) است که ساختار صفحه‌های وب را تشکیل می‌دهد. بعد از اینکه یک صفحه‌ی وب ایجاد کردی، می‌توانی آن را به‌صورت یک سند HTML ذخیره و به‌وسیله‌ی مرورگر وب خودت مشاهده کنی. برای ساختن یک صفحه‌ی وب HTML می‌توانی از یک ویرایشگر متنی ساده که هم در ویندوز و هم در مک موجود است استفاده کنی.

بخش 1

بخش 1 از 5:

اضافه کردن Head (سربرگ) به HTML

1
یکی از ویرایشگر‌های متنی کامپیوترت را باز کن. در کامپیوتری که دارای سیستم‌عامل ویندوز است معمولاً می‌توانی از Notepad یا Notepad++ و در سیستم‌عامل مک از TextEdit استفاده کنی:
- در ویندوز - منوی Start
  (شروع) را باز کن، عبارت notepad یا notepad++ را تایپ کن و در بالای پنجره‌ی نمایش داده شده روی Notepad یا Notepad++ یا sublime کلیک کن.
- در سیستم‌عامل مک – روی جستجوگر Spotlight
  کلیک کن، عبارت textedit را تایپ کن و سپس در قسمت بالای نتایج نمایش داده شده روی TextEdit کلیک کن.
این کد به مرورگر می‌گوید که این سند یک سند HTML است.
این کد، تگ آغازین کد HTML تو است.
این کد، تگ آغازین head (سربرگ) سند HTML تو است. اطلاعات قرارگرفته در قسمت head (سربرگ) معمولاً در صفحه‌ی وب نمایش داده نمی‌شوند. این اطلاعات می‌تواند شامل عنوان صفحه، فراداده‌ها، کد‌های CSS و سایر زبان‌های اسکریپتی باشد.^{[۱]Xمنبع تحقیقات}
با وارد کردن این تگ، یک عنوان به صفحه اضافه می‌شود.
این عنوان می‌تواند اسمی که می‌خواهی روی صفحه‌ات بگذاری باشد.
این همان تگی است که قسمت عنوان با آن بسته می‌شود.
8
کد </head> را تایپ کن و کلید ↵ Enter (ورود) را فشار بده. این تگ، قسمت head (سربرگ) را می‌بندد. کد HTML تو باید چیزی شبیه به این باشد.
```
<!DOCTYPE html><html><head><title>صفحه‌ی وب من</title></head>
```

بخش 2

بخش 2 از 5:

اضافه کردن Body (بدنه) و متن به HTML

این تگ قسمت body (بدنه‌) HTML را باز می‌کند. هرچیزی که در قسمت بدنه قرار می‌گیرد در صفحه‌ی وب نمایش داده خواهد شد.
قسمت heading (عنوان) صفحه‌ی HTML به‌وسیله‌ی این کد به سند HTML اضافه می‌شود. Heading (عنوان) متن بزرگ و پررنگی است که معمولاً در بالای سند HTML قرار می‌گیرد.
این عنوان می‌تواند یک متن خوش‌آمدگویی یا عنوانی برای صفحه باشد.
4
کد </h1> را بعد از متن عنوان بنویس و کلید ↵ Enter (ورود) را فشار بده. این تگ قسمت heading (عنوان) را می‌بندد.
- می‌توانی headings (عنوان‌های) بیشتری را اضافه کنی. شش نوع مختلف از headings (عنوان‌ها) وجود دارد که می‌توانی با استفاده از تگ‌های <h1></h1> تا <h6></h6> آن‌ها را ایجاد کنی. این‌ کد‌ها heading (عنوان‌هایی) با سایز‌های مختلف ایجاد می‌کنند. به‌عنوان مثال، برای ایجاد سه عنوان با سایز‌های مختلف می‌توانی آن‌ها را به صورت زیر بنویسی:
  <h1> به صفحه‌ی من خوش آمدید</h1> <h2>اسم من باب است</h2> <h3>امیدوارم از اینجا خوشتان آمده باشد</h3>
- عنوان‌ها اولویت و اهمیت متن را نمایش می‌دهند. اگر می‌خواهی از عنوانی با سایز کوچک‌تر استفاده کنی، لازم نیست حتماً قبل از آن عنوان‌های بزرگتر را بنویسی. می‌توانی حتی در‌صورت نبودن عنوان H1 در نوشته‌ات، از عنوان H3 استفاده کنی.
این تگ یک پاراگراف باز می‌کند. از متن پاراگراف برای نمایش متن‌هایی با سایز معمولی استفاده می‌شود.
این متن می‌تواند توضیحاتی در‌مورد صفحه‌ی وب تو یا هر اطلاعات دیگری که دوست داری به اشتراک بگذاری باشد.
7
کد </p> را بعد از متنی که نوشته‌ای تایپ کن و کلید ↵ Enter (ورود) را فشار بده. از این تگ برای بستن قسمت پاراگراف استفاده می‌شود. مثال زیر نمونه‌ای از یک پاراگراف متنی در HTML است:
```
<p>This is my paragraph.</p>
```
- برای ایجاد مجموعه‌ای از پاراگراف‌ها در زیر یک تیتر می‌توانی زیر عنوان، چندین پاراگراف را به‌صورت یک ردیف اضافه کنی.
- می‌توانی با فریم‌بندی متن‌ها با تگ <font color="color"> و </font> رنگ آن‌ها را تغییر بدهی. رنگ دلخواهت را در قسمت "color" (رنگ) بنویس. با استفاده از این مجموعه تگ‌ها می‌توانی متن‌ها (مثلاً عنوان‌ها) را به رنگ‌های مختلفی تبدیل کنی. برای مثال برای تغییر یک پاراگراف به رنگ آبی می‌توانی کد را به‌صورت زیر بنویسی: <p><font color="blue">Whales are majestic creatures.</font></p>
- می‌توانی با استفاده از HTML، متن‌ها را پر‌رنگ یا کج بنویسی و یا به هر قالب دیگری که خواستی تغییر بدهی. در زیر نمونه‌هایی از چگونگی قالب‌بندی متن با استفاده از برچسب‌های HTML نشان داده شده است: ^{[۲]Xمنبع تحقیقات}
  <b>متن پررنگ</b> <i>متن کج</i> <u>متن با خط زیر</u> <sub>متن بالانویس</sub> <sup>متن پایین نویس</sup>
- اگر از حالت bold (پررنگ) یا italic (کج) برای تاکید متن استفاده می‌کنی و نه برای ظاهر آن، از عناصر <strong> و <em> به‌جای <b> و <i> استفاده کن. این کار باعث می‌شود تا صفحه‌ی وب تو برای تکنولوژی‌های مانند صفحه‌خوان ^{[۳]Xمنبع تحقیقات} یا حالت مطالعه که در برخی از مرورگر‌ها ارائه می‌شود ^{[۴]Xمنبع تحقیقات} قابل‌فهم‌تر باشد.

بخش 3

بخش 3 از 5:

اضافه‌کردن موارد دیگر به HTML

1
به صفحه‌ی HTML عکس اضافه کن. می‌توانی با طی مراحل زیر به HTML خودت عکس اضافه کنی:
- کد <img src= را تایپ کن تا تگ آغازین عکس باز شود.
- آدرس عکس را کپی و بعد از علامت "=" الصاق کن.
- بعد از آدرس عکس، کد > را تایپ کن تا تگ عکس بسته شود. به عنوان مثال، اگر آدرس عکس به‌صورت: "http://www.mypicture.com/lake" است، باید آن را به‌شکل زیر بنویسی:
  <img src="http://www.mypicture.com/lake.jpg">
2
صفحه‌ات را به صفحه‌های دیگر پیوند بده. می‌توانی با روش زیر لینکی را به صفحه‌ی وب خودت اضافه کنی:
- برای باز کردن تگ لینک، کد <a href= را تایپ کن.
- آدرس لینک را کپی و بعد از علامت "=" الصاق کن.
- برای بستن تگ لینگ در HTML، کد > را بعد از آدرس URL تایپ کن.
- بعد از بستن براکت برای لینک یک اسم وارد کن.
- برای بستن قسمت لینک HTML، کد </a> را بعد از اسم لینک بنویس. ^{[۵]Xمنبع تحقیقات} کد زیر نمونه‌ای از یک لینک به وب‌سایت فیسبوک است.
  <a href="https://www.facebook.com">Facebook</a>.
این کار باعث ایجاد یک خط افقی می‌شود و می‌توانی با استفاده از این خط، صفحه را به قسمت‌های مختلفی تقسیم کنی.

بخش 4

بخش 4 از 5:

بستن سند HTML

بعد از اینکه تمام متن‌ها، عکس‌ها و موارد دیگر را در سند HTML اضافه کردی، این تگ را در قسمت پایین سند HTML اضافه کن تا Body (بدنه‌) آن بسته شود.

How.com.vn فارسی: Step 2 کد </html> را وارد کن تا سند HTML بسته شود.

این تگ در انتهای سند HTML قرار می‌گیرد و به مرورگر وب می‌گوید که کد HTML دیگری وجود ندارد. کل سند HTML تو باید چیزی شبیه به این باشد:

<!DOCTYPE html><html><head><title>صفحه‌ی هوادار‌ان ویکی‌هاو</title>  </head><body><h1>به صفحه‌ی من خوش آمدید</h1>  <p>این صفحه‌ی ترفداران ویکی‌هاو است. اینجا را خانه خودتان بدانید</p>  <h2>تاریخ‌های مهم</h2>  <p><i> 25 دی 1398</i> - تولد ویکی‌هاو</p>  <h2>لینک‌ها</h2>  <p>این لینک ویکی‌هاو است: <a href="http://www.wikihow.com">ویکی‌هاو/a></p>  </body></html>

بخش 5

بخش 5 از 5:

ذخیره و بازکردن صفحه‌ی وب

در بالای صفحه‌، روی منوی Format (قالب) کلیک کن و سپس در منوی کشویی نمایش داده شده روی Make Plain Text (یک متن ساده ایجاد کن) کلیک کن.
این کار در ویندوز نه لازم است و نه امکان‌پذیر.
این گزینه داخل نوار منوی بالای صفحه‌ قرار دارد.
3
روی Save as (ذخیره به‌عنوان) کلیک کن. این گزینه در قسمت پایین منوی کشویی "File" قرار دارد.
- همچنین می‌توانی برای انجام این کار در ویندوز کلید‌های Ctrl+S یا در مک کلید‌های ⌘ Command+S را فشار بدهی.
داخل کادر متنی "File name" (در ویندوز) یا "Name" (در مک)، اسمی را که برای سندت در نظر گرفته‌ای وارد کن.
5
نوع سند را تغییر بده. باید قالب ذخیره‌ی سند را از فایل متنی به فایل HTML تغییر بدهی. برای تغییر قالب‌بندی، مراحل زیر را انجام بده:
- ویندوز - روی منوی کشویی "Save as type" (ذخیره به‌عنوان) کلیک کن، روی All Files (همه‌ی فایل‌ها) کلیک کن و سپس عبارت .html را به انتهای نام فایل اضافه کن.
- مک - در انتهای نام فایل، قسمت .txt را با .html جایگزین کن.
6
روی Save (ذخیره) کلیک کن. این گزینه در قسمت پایین پنجره قرار دارد. با انجام این کار یک فایل HTML ایجاد خواهد شد.
- فایل‌های HTML معمولاً از طریق مرورگر پیش‌فرض کامپیوترت باز می‌شوند.
در این مرحله می‌توانی فایل HTML خودت را با استفاده از مرورگر کامپیوترت باز کنی تا صفحه‌ی وبی که ایجاد کرده‌ای را ببینی.
8
سند HTML را با استفاده از مرورگر کامپیوترت باز کن. بیشتر وقت‌ها می‌توانی این کار را با دو بار کلیک روی سند HTML انجام بدهی. اگر بعد از دو بار کلیک کردن با خطا مواجه شدی، اقدامات زیر را انجام بده:
- در ویندوز - روی سند راست کلیک کن و گزینه‌ی Open with (بازکردن به‌وسیله‌) را انتخاب و مرورگر موردنظرت را مشخص کن.
- در مک - روی سند یک بار کلیک کن، روی File کلیک کن و بعد از انتخاب گزینه‌ی Open With (بازکردن به‌وسیله‌)، مرورگر موردنظرت را تعیین کن.
9
در‌صورت نیاز سند HTML را ویرایش کن. ممکن است در صفحه‎‌ی HTML با خطایی مواجه شوی. برای اصلاح آن می‌توانی سند HTML را ویرایش کنی:
- در ویندوز، می‌توانی روی سند راست کلیک کنی و در منوی کشویی نمایش داده شده روی Edit (ویرایش) کلیک کنی (اگر برنامه‌ی ++Notepad را نصب کرده باشی، باید به‌‌جای آن روی ++Edit with Notepad کلیک کنی).
- در مک، روی سند کلیک کن تا آن را انتخاب کنی، سپس روی File کلیک کن و بعد از انتخاب گزینه‌ی Open With (بازکردن به‌وسیله‌ی) روی TextEdit (ویرایش متن) کلیک کن. همچنین می‌توانی سند را به داخل TextEdit (ویرایش متن) بکشی.

نکات

تگ‌ها همیشه باید به همان شکل که باز می‌شوند بسته شوند. به عنوان مثال، <tag1><tag2> باید به صورت </tag2></tag1> بسته شود.
با استفاده از تگ <marquee></marquee> می‌توانی داخل وب‌سایت متن‌های پیمایشی قرار بدهی. ولی درنظر داشته باش که ممکن است این تگ توسط برخی از مرورگر‌ها قابل شناسایی نباشد.
بسیاری از افراد برای نوشتن و کامپایل کردن کد‌هایشان از ++Notepad استفاده می‌کنند.
اگر می‌خواهی در وسط صفحه یک عکس قرار بدهی می‌توانی کد <class="center"> را بعد از اسم عکس در تگ img قرار بدهی (به‌عنوان مثال <img src="URL" class="center">).

هشدارها

اگر می‌خواهی در صفحه‌‌ی وبت عکس بگذاری، بهتر است عکس‌های خودت را در سرویس‌هایی مانند Imgur یا سرویس‌های مشابه آن بارگذاری کنی. استفاده از عکس‌های دیگران ممکن است منجر به نقض قوانین حق انتشار شود.