چگونه با استفاده از 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 کلیک کن.
2
کد <!DOCTYPE html> را تایپ کن و کلید ↵ Enter (ورود) را فشار بده. این کد به مرورگر می‌گوید که این سند یک سند HTML است.
3
کد <html> را تایپ کن و کلید ↵ Enter (ورود) را فشار بده. این کد، تگ آغازین کد HTML تو است.
4
کد <head> را تایپ کن و کلید ↵ Enter (ورود) را فشار بده. این کد، تگ آغازین head (سربرگ) سند HTML تو است. اطلاعات قرارگرفته در قسمت head (سربرگ) معمولاً در صفحه‌ی وب نمایش داده نمی‌شوند. این اطلاعات می‌تواند شامل عنوان صفحه، فراداده‌ها، کد‌های CSS و سایر زبان‌های اسکریپتی باشد. ^{[۱]
X
منبع تحقیقات}
5
کد <title> را تایپ کن. با وارد کردن این تگ، یک عنوان به صفحه اضافه می‌شود.
6
به صفحه‌ی وب خودت یک عنوان اضافه کن . این عنوان می‌تواند اسمی که می‌خواهی روی صفحه‌ات بگذاری باشد.
7
کد </title> را تایپ کن و کلید ↵ Enter (ورود) را فشار بده. این همان تگی است که قسمت عنوان با آن بسته می‌شود.
8
کد </head> را تایپ کن و کلید ↵ Enter (ورود) را فشار بده. این تگ، قسمت head (سربرگ) را می‌بندد. کد HTML تو باید چیزی شبیه به این باشد.
```
<!DOCTYPE html>
<html>
<head>
<title>صفحه‌ی وب من</title>
</head>
```

بخش 2

بخش 2 از 5:

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

1
کد <body> را زیر تگ "Head" (سربرگ) تایپ کن. این تگ قسمت body (بدنه‌) HTML را باز می‌کند. هرچیزی که در قسمت بدنه قرار می‌گیرد در صفحه‌ی وب نمایش داده خواهد شد.
2
کد <h1> را تایپ کن. قسمت heading (عنوان) صفحه‌ی HTML به‌وسیله‌ی این کد به سند HTML اضافه می‌شود. Heading (عنوان) متن بزرگ و پررنگی است که معمولاً در بالای سند HTML قرار می‌گیرد.
3
عنوانی را برای صفحه‌ی خودت بنویس. این عنوان می‌تواند یک متن خوش‌آمدگویی یا عنوانی برای صفحه باشد.
4
کد </h1> را بعد از متن عنوان بنویس و کلید ↵ Enter (ورود) را فشار بده. این تگ قسمت heading (عنوان) را می‌بندد.
- می‌توانی headings (عنوان‌های) بیشتری را اضافه کنی. شش نوع مختلف از headings (عنوان‌ها) وجود دارد که می‌توانی با استفاده از تگ‌های <h1></h1> تا <h6></h6> آن‌ها را ایجاد کنی. این‌ کد‌ها heading (عنوان‌هایی) با سایز‌های مختلف ایجاد می‌کنند. به‌عنوان مثال، برای ایجاد سه عنوان با سایز‌های مختلف می‌توانی آن‌ها را به صورت زیر بنویسی:
  <h1> به صفحه‌ی من خوش آمدید</h1> <h2>اسم من باب است</h2> <h3>امیدوارم از اینجا خوشتان آمده باشد</h3>
- عنوان‌ها اولویت و اهمیت متن را نمایش می‌دهند. اگر می‌خواهی از عنوانی با سایز کوچک‌تر استفاده کنی، لازم نیست حتماً قبل از آن عنوان‌های بزرگتر را بنویسی. می‌توانی حتی در‌صورت نبودن عنوان H1 در نوشته‌ات، از عنوان H3 استفاده کنی.
5
کد <p> را تایپ کن. این تگ یک پاراگراف باز می‌کند. از متن پاراگراف برای نمایش متن‌هایی با سایز معمولی استفاده می‌شود.
6
متنی را تایپ کن. این متن می‌تواند توضیحاتی در‌مورد صفحه‌ی وب تو یا هر اطلاعات دیگری که دوست داری به اشتراک بگذاری باشد.
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>.
3
می‌توانی با استفاده از کد <br> در HTML یک‌خط پایین بیایی. این کار باعث ایجاد یک خط افقی می‌شود و می‌توانی با استفاده از این خط، صفحه را به قسمت‌های مختلفی تقسیم کنی.

بخش 4

بخش 4 از 5:

بستن سند HTML

1
برای بستن قسمت Body (بدنه‌ی) سند، کد </body> را تایپ کن. بعد از اینکه تمام متن‌ها، عکس‌ها و موارد دیگر را در سند HTML اضافه کردی، این تگ را در قسمت پایین سند HTML اضافه کن تا Body (بدنه‌) آن بسته شود.
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:

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

1
سندی که ایجاد کرده‌ای را به یک متن ساده (برای کاربران مک) تبدیل کن. در بالای صفحه‌، روی منوی Format (قالب) کلیک کن و سپس در منوی کشویی نمایش داده شده روی Make Plain Text (یک متن ساده ایجاد کن) کلیک کن.

این کار در ویندوز نه لازم است و نه امکان‌پذیر.
2
روی File کلیک کن. این گزینه داخل نوار منوی بالای صفحه‌ قرار دارد.
3
روی Save as (ذخیره به‌عنوان) کلیک کن. این گزینه در قسمت پایین منوی کشویی "File" قرار دارد.
- همچنین می‌توانی برای انجام این کار در ویندوز کلید‌های Ctrl+S یا در مک کلید‌های ⌘ Command+S را فشار بدهی.
4
یک اسم برای سند HTML خودت بنویس. داخل کادر متنی "File name" (در ویندوز) یا "Name" (در مک)، اسمی را که برای سندت در نظر گرفته‌ای وارد کن.
5
نوع سند را تغییر بده. باید قالب ذخیره‌ی سند را از فایل متنی به فایل HTML تغییر بدهی. برای تغییر قالب‌بندی، مراحل زیر را انجام بده:
- ویندوز - روی منوی کشویی "Save as type" (ذخیره به‌عنوان) کلیک کن، روی All Files (همه‌ی فایل‌ها) کلیک کن و سپس عبارت .html را به انتهای نام فایل اضافه کن.
- مک - در انتهای نام فایل، قسمت .txt را با .html جایگزین کن.
6
روی Save (ذخیره) کلیک کن. این گزینه در قسمت پایین پنجره قرار دارد. با انجام این کار یک فایل HTML ایجاد خواهد شد.
- فایل‌های HTML معمولاً از طریق مرورگر پیش‌فرض کامپیوترت باز می‌شوند.
7
ویرایشگر متنی را ببند. در این مرحله می‌توانی فایل 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 یا سرویس‌های مشابه آن بارگذاری کنی. استفاده از عکس‌های دیگران ممکن است منجر به نقض قوانین حق انتشار شود.