۱۷ کد ساده‌ی HTML که می‌توان در ۱۰ دقیقه آموخت + فیلم آموزشی رایگان

۶۹۵۵ بازدید

آخرین به‌روزرسانی: ۰۸ مرداد ۱۴۰۱

زمان مطالعه: ۴۲ دقیقه

۱۷ کد ساده‌ی HTML که می‌توان در ۱۰ دقیقه آموخت + فیلم آموزشی رایگان

17 کد ساده‌ی HTML که می‌توان در 10 دقیقه آموخت حتی جدیدترین و مدرن‌ترین سایت‌هایی که عموما دارای طراحی کاربرپسند هستند از کدهای ساده‌ی (HTML) بهره می‌گیرند. اگر ۱۷ تگ زیر را بدانید، می‌توانید سایت‌های ساده‌ای را از ابتدا طراحی کرده و سپس سایت خود را با برنامه‌هایی مانند وردپرس راه‌اندازی کنید.

فهرست مطالب این نوشته

محتوای این مطلب جهت یادگیری بهتر و سریع‌تر آن، در انتهای متن به صورت ویدیویی نیز ارائه شده است.

برای مشاهده ویدیوها کلیک کنید.

در این مطلب تلاش شده است برای بیشتر تگ‌ها، نمونه‌هایی نیز آورده شود. ضمن اینکه می‌توانید این کدهای (HTML) را در یک ویرایشگر متن پیاده کرده و بعد از ویرایش، آنها را در مرورگر خود باز کنید تا تغییرات اعمال شده را مشاهده کنید.

<!DOCTYPE html>

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

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

<html>

یکی دیگر از تگ‌هایی که مرورگر براساس آن می‌تواند فایل (HTML) را بخواند، <html> است. چرا همزمان به این مورد و گزینه‌ی قبلی نیاز داریم؟ شاید کسی علت دقیق آن را نداند ولی بهتر است از هر دو استفاده کنید!

در پایان سند خود باید تگ </html> را نیز اضافه کنید.

<head>

در صفحات ساده، تگ <head> شامل عنوان مورد نظر و توضیحات آن است. اما موارد کوچکی وجود دارد که می‌توانید داخل آن قرار دهید که در بخش بعدی می‌بینید.

<title>

همان طور که انتظار می‌رود، این بخش عنوان صفحه را تعریف می‌کند. هر آنچه که می‌خواهید در این تگ قرار داده و آن را می‌بندید.

1<head>
2<title>
3My Website</title></head>

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

<meta>

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

توصیف (description): توصیف ساده‌ای از صفحه‌ی شما.
کلمات کلیدی (keywords): گلچینی از کلمات کلیدی که در صفحه‌ی شما وجود دارد.
نویسنده (author): نام نویسنده‌ی صفحه‌ی شما.
درگاه نمایش (viewport): تگی که به شما این اطمینان را می‌دهد صفحه‌ی مورد نظر در تمامی درستگاه‌ها درست نمایش داده می‌شود.

در قسمت زیر می‌توانید مثالی را ببینید که امکان اجرای آن در صفحه‌ی مورد نظر وجود دارد:

1<meta name="description" content="A basic HTML tutorial">
2<meta name="keywords" content="HTML,code,tags">
3<meta name="author" content="Dann Albright">
4<meta name="viewport" content="width=device-width, initial-scale=1.0">

تگ (viewport) همیشه باید به صورت “width=device-width, initial-scale=1.0” باشد؛ چرا که محتوا باید روی دستگاه‌های دسکتاپ و موبایل درست نشان داده شود.

<body>

بدنه‌ی صفحه‌ی وب شما اصولا شامل هر چیزی غیر از عنوان است که در تگ <body> قرار می‌گیرد. این تگ خیلی ساده است:

1<body>
2Everything you want displayed on your page.
3</body>

<h1>

تگ <h1> هدرهای سطح یک را در صفحه‌ی شما تعریف می‌کند. <h2> هدرهای سطح دو و <h3> هدرهای سطح سه و به همین ترتیب تا <h6> هدر سطح 6 را تعریف می‌کنند. به عنوان مثال نام تگ‌های این مطلب از هدرهای سطح دو بهره می‌برند.

1<h1>Big and Important Header</h1>
2<h2>Slightly Less Big Header</h2>
3<h3>Sub-Header</h3>

نتیجه به صورت زیر خواهد بود:

Big and Important Header

Slightly Less Big Header

Sub-Header

همان طور که می‌بینید به ترتیب هر سطح، تیترها (هدرها) کوچکتر می‌شود.

<p>

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

به عنوان مثال به فاصله‌ی میان این خط و خط قبلی نگاه کنید.این کاری است که تگ <p> انجام می‌دهد.

1<p>Your first paragraph.</p>
2<p>Your second paragraph.</p>

نتیجه به صورت زیر می‌شود:

.Your first paragraph

.Your second paragraph

همچنین می‌توانید از استایل‌های (CSS) در تگ‌های پاراگراف استفاده کنید:

1<p style="font-size: 120%;">20% larger text</p>

که نتیجه به شکل زیر است:

20% larger text

<br>

تگ ایجاد فاصله بین خطوط یک خط فاصله ایجاد می‌کند:

1<p>The first line.<br>
2The second line (close to the first one).</p>

نتیجه به صورت زیر می‌شود:

.The first line
.(The second line (close to the first one

نکته: ممکن است تگ‌هایی را ببینید که به صورت <br /> یا <br/> نوشته شده باشد. استفاده از علامت اسلش کمک می‌کند تا تگ مورد نظر در فایل (XHTML) قابل خواندن باشد.

<strong>

این تگ متون مهم را مشخص می‌کند. در کل می‌تواند گفت همان بولد کردن مطلب است. با وجود این، احتمال دارد استفاده از تگ <strong> در (CSS) نمایش متفاوتی داشته باشد.

با وجود این می‌تواند با استفاده از <strong> متن خود را بولد کنید.

1<strong>Very important things you want to say.</strong>

نتیجه به صورت زیر خواهد بود:

.Very important things you want to say

اگر با تگ <b> برای بولد کردن متن آشنایی داشته باشید، می‌توانید از آن نیز استفاده کنید. البته هیچ تضمینی وجود ندارد که در نسخه‌های آتی (HTML) این تگ کار کند. اما فعلا کار می‌کند.

<em>

مانند تگ‌های <b> و <strong>، تگ‌های <em> و <i> با هم مرتبط هستند. تگ <em> متن‌های برجسته را تعریف می‌کند که عموما به صورت ایتالیک نمایش داده می‌شود. این امکان در CSS وجود دارد که متون ایتالیک به صورت متفاوتی نمایش داده شود.

1<em>An emphasized line.</em>

نتیجه به صورت زیر نمایش داده می‌شود:

.An emphasized line

تگ <i> همچنان کار می‌کند ولی همچنان این احتمال وجود دارد که در نسخه‌های آتی (HTML) کار نکند.

<a>

تگ <a> ایجادکننده‌ی لینک است. این لینک ساده به صورت زیر است:

1<a href="//www.makeuseof.com/>Go to MakeUseOf</a>

نتیجه به صورت زیر نمایش داده می‌شود:

Go to MakeUseOf

صفت "href" آدرس لینک مقصد را نشان می‌دهد. در بسیاری از مواقع، این لینک به یک سایت دیگر ارجاع داده می‌شود. ضمن اینکه ممکن است فایلی مانند تصویر یا پی‌دی‌اف باشد.

از دیگر صفت‌های کاربردی "target" و "title" هستند. صفت (target) به صورت ویژه و اختصاصی برای باز کردن لینک در یک تب یا پنجره‌ی جدید استفاده می‌شود:

1<a href="//www.makeuseof.com/" target="blank">Go to MakeUseOf in a new tab</a>

نتیجه به صورت زیر خواهد بود:

Go to MakeUseOf in a new tab

صفت "title" یک (tooltip) یا راهنما ایجاد می‌کند. وقتی نشانگر موس را روی آن نگه دارید می‌توانید منظور ما را متوجه شوید:

1<a href="//www.makeuseof.com/" title="This is a COOLtip">Hover over this one</a>

نتیجه به این صورت است:

Hover over this one

<img>

اگر می‌خواهید تصویری را داخل صفحه‌ی خود جاسازی کنید، باید از تگ تصویر استفاده کنید. ساده‌ترین روش این است که منبغ تصویر را با استفاده از صفت "src" به صورت زیر اضافه کنید:

1<img src="https://cdn.makeuseof.com/wp-content/uploads/2016/02/hdr-moderation.png">

همان طور که می‌بینید صفحه شامل تصویر خواهد بود. با وجود این، تعدادی صفت‌های دیگری مانند "height"، "width" و "alt" وجود دارد که می‌توانید به صورت زیر از آنها استفاده کنید:

1<img src="https://cdn.makeuseof.com/wp-content/uploads/2016/02/hdr-moderation.png"  width="320" alt="the name of your image">

نتیجه به شکل زیر است:

the name of your image همان طور که می‌بینید صفات "height" و "width" به ترتیب نشان‌دهنده‌ی عرض و طول تصویر است. در کل، بهتر است یکی از آنها را به درستی تنظیم کنید تا به همان نسبت ابعاد تصویر تغییر کند. اگر از هر دو مورد استفاده کنید، احتمالا تصویر شما کشیده‌تر یا فشرده‌تر می‌شود.

تگ "alt" به مرورگر می‌گوید که در صورت عدم نمایش تصویر، چه متنی به عنوان جایگزین نشان داده شود. بهتر است تمامی تصاویر متن جایگزین داشته باشند. اگر سرعت اینترنت کند باشد یا از مروگر قدیمی استفاده کنید، بهتر است از این تگ در صفحات خود بهره بگیرید.

<ol>

تگ لیست ترتیب‌بندی شده به شما اجازه می‌دهد تا فهرستی را براساس مواردی که می‌خواهید مرتب کنید. در کل، می‌توان گفت فهرست شما، شماره‌بندی شده خواهد شد. هر مورد در لیست، نیاز به تگ <li> دارد که به صورت زیر نوشته می‌شود:

1<ol>
2<li>First thing</li>
3<li>Second thing</li>
4<li>Third thing</li></ol>

نتیجه به صورت زیر است:

1. First thing

2.Second thing

3.Third thing

در (HTML5) می‌توانید از <ol reserved> برای معکوس کردن ترتیب شماره‌ها استفاده کنید. صفت "type" به شما اجازه می‌دهد که مرورگر بگویید کدم نوع از نشانه‌ها برای آیتم‌های لیست استفاده شود. شما می‌توانید "1"، "A"، "a"، "I" یا "i" بهره بگیرید که کنار لیست شما نمایش داده می‌شوند.

<ul>

فهرست‌های بدون ترتیب خیلی ساده‌تر از موارد مرتب‌شده هستند. تنها کافی است از گوی‌های توپر استفاده کنید:

1<ul>
2<li>First item</li>
3<li>Second item</li>
4<li>Third item</li></ul>

که نتیجه به صورت زیر می‌شود:

First item
Second item
Third item

فهرست‌های بدون ترتیب دارای صفت "type" هستند و می‌توانید از "disc"، "circle" یا "square" استفاده کنید.

<table>

در حالی که استفاده از جداول به دلیل فرمت آن کمی سخت است، ولی زمان‌هایی وجود دارد که بخواهید اطلاعات خود را در سط و ستون‌های مجزا قرار دهید. به چندین تگ برای عملکرد صحیح جدول نیاز دارید. در ادامه می‌توانید به یک مثال توجه کنید:

1<table>
2<tbody>
3<tr>
4<th>First column</th>
5<th>Second column</th>
6<tr/>
7<tr>
8<td>Row 1, column 1</td>
9<td>Row 1, column 2</td>
10<tr/> 
11<td>Row 2, column 1</td>
12<td>Row 2, column 2</td>
13<tbody/>
14<table/>

نتیجه به این صورت است:

First column	Second column
Row 1, column 1	Row 1, column 2

هر کدام از تگ‌های <th> یک هدر را احاطه کرده است. <tbody> بدنه‌ی جدول را غیرفعال می‌کند. تگ <tr> یک سطر جدید به جدول اضافه کرده و هر تگ <td> سلولی را در یکی از سطرها مشخص می‌کند.

<blockquote>

زمانی که بخواهید نقل قولی را در از یک سایت یا فرد دیگر در سایت خود بیاورید، می‌توانید با کوتیشن آن را جدا کنید. تگ (blockquote) این کار را انجام می‌دهد. تمام چیزی که نیاز دارید این است تگ‌های کوتیشن را باز کرده، چیزی که می‌خواهید در آن قرار دهید و کوتیشن را ببندید.

1<blockquote>I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.</blockquote>

نتیجه به صورت زیر است:

I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain

البته ممکن است فرمت دقیق نوشته‌ی شما براساس مرورگری که استفاده می‌کنید یا کدهای CSS سایت شما متغیر باشد. اما تگ‌ها یکسان است.

اگر به این مقاله علاقه‌مند بوده‌اید، شاید مقاله‌های زیر نیز برای شما جذاب و مفید باشد: