آموزش HTML | مبانی و مفاهیم پایه HTML
آموزش HTML | ساخت اولین صفحه وب و چاپ Hello World
21 مهر 1400
انواع متغیر ها در زبان برنامه نویسی دارت (Dart) برای فلاتر
5 دی 1400
آموزش HTML ، مبانی و مفاهیم پایه HTML. در قسمت قبل، اولین صفحه وب خود را ایجاد کردیم. و همچنین متن ” Hello World! ” را روی صفحه نمایش چاپ کردیم. در این پست، بسیاری از موارد اساسی مورد نیاز برای نوشتن کدهای HTML را مرور می کنیم. تگ های مختلفی وجود دارد که هنگام شروع کد نویسی با HTML باید آنها را در نظر بگیریم و بدانیم. این تگ ها به سازماندهی و قالب بندی اولیه عناصر در اسکریپت یا صفحات وب ما کمک می کند.
مبانی و مفاهیم پایه HTML
همانطور که در ابتدا گفته شد، در این قسمت از آموزش HTML به توضیح بسیاری از موارد اساسی یا به عبارتی مبانی و مفاهیم پایه HTML مورد نیاز برای نوشتن کدهای HTML می پردازیم.
پاراگراف در HTML (تگ p در HTML )
این تگ ها به ما کمک می کند تا دستورات پاراگراف را در یک صفحه وب بنویسیم. پاراگراف ها با تگ <p> شروع و با </p> خاتمه می یابند. و همچنین تگ <br> برای شکستن خط جاری و رفتن به خط جدید استفاده می شود.<br> یک تگ خالی (empty) است.
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>
آموزش طراحی سایت با HTML و CSS | وب سایت تجاری اپ
</title>
</head>
<body>
<h1>پاراگراف در HTML</h1>
<p>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
</p>
</body>
</html>
خروجی: هنگام باز کردن فایل در مرورگر، خروجی زیر را مشاهده خواهید کرد.
مبانی پایه HTML: خطوط افقی در HTML (تگ hr در HTML )
تگ <hr> برای شکستن صفحه (تقسیم صفحه) به قسمت های مختلف استفاده می شود. و با کمک یک خط افقی از سمت چپ به راست صفحه، حاشیه های افقی (خطوط افقی) ایجاد می کند. این تگ نیز مانند تگ <br> یک تگ خالی (empty) می باشد.
مثال:
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>
آموزش طراحی سایت با HTML و CSS | وب سایت تجاری اپ
</title>
</head>
<body>
<h1>ایجاد خطوط افقی در HTML</h1>
<p>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
</p>
<hr>
<p>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
</p>
<hr>
<p>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
</p>
</body>
</html>
خروجی:
تصاویر در HTML (تگ img در HTML )
از تگ <img> برای قرار دادن تصویر در صفحه وب خود استفاده می کنیم. منبع یا سورس تصویری که قرار است به صفحه وب ما اضافه شود در داخل تگ <img src = ”source_of_image”> قرار می گیرد.
مثال:
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>آموزش طراحی سایت با HTML و CSS | وب سایت تجاری اپ</title>
</head>
<body>
<h1>تصاویر در HTML</h1>
<img src="https://www.tejariapp.com/wp-content/uploads/tejariapp-new-logo.png">
</body>
</html>
خروجی:
لینک ها یا پیوندها در HTML (تگ a در HTML )
از لینک ها یا پیوندها تقریباً در همه صفحات وب استفاده می شود. لینک ها به کاربران این امکان را می دهند که با کلیک کردن بر روی آنها از صفحه ای به صفحه دیگر بروند. (صفحه ای از سایتی که در آن هستند یا صفحه ای از سایتی دیگر)
لینک های HTML، هایپرلینک هستند. می توانید روی یک لینک کلیک کنید و به صفحه دیگری بروید. هنگامی که ماوس را روی یک لینک حرکت می دهید، فلش ماوس به یک دست کوچک تبدیل می شود. توجه داشته باشید که لازم نیست لینک حتما متنی باشد. یک لینک می تواند یک تصویر یا هر عنصر HTML دیگری باشد. سینتکس لینک در HTML به این صورت می باشد :
<a href="url">متن لینک</a>
مهمترین مشخصه یا ویژگی (Attribute) عنصر <a> ویژگی href است که مقصد لینک را نشان می دهد. متن لینک، بخشی است که برای کاربر قابل مشاهده خواهد بود. با کلیک بر روی متن لینک، کاربر به آدرس URL مشخص شده هدایت می شود.
مثال:
<a href="https://www.tejariapp.com/">مشاهده تجاری اپ</a>
جدول در HTML
یک جدول در HTML از سلول های جدول در داخل سطرها و ستون ها تشکیل شده است. از تگ table برای ایجاد در صفحه وب خود استفاده می کنیم. هر جدول شامل سربرگ جدول (Table Header)، ردیف ها (Rows) و ستون های اطلاعات می باشد. سربرگ هر جدول، که عنوان مربوط به هر ستون را در آن قرار می دهیم را با تگ th تعریف می کنیم. ردیف ها یا سطرهای هر جدول را با تگ tr ایجاد می کنیم. و همچنین در نهایت سلول های اطلاعات را با تگ td تعریف می کنیم.
مثال:
<!DOCTYPE html>
<html dir="rtl">
<style>
table, th, td
{
border:1px solid black;
}
</style>
<body>
<table style="width:100%">
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>سن</th>
</tr>
<tr>
<td>مهسا</td>
<td>رضایی</td>
<td>25</td>
</tr>
<tr>
<td>علی</td>
<td>محمدی</td>
<td>38</td>
</tr>
</table>
</body>
</html>
خروجی:
همچنین بخوانید: تگ های معنایی یا semantic Tags در HTML5
مبانی پایه HTML: مشخصه یا ویژگی ها (Attributes) در HTML
یک مشخصه برای ارائه اطلاعات اضافی در مورد یک عنصر استفاده می شود.
- همه عناصر HTML می توانند مشخصه (attribute) داشته باشند. مشخصه ها اطلاعات اضافی را در مورد یک عنصر ارائه می دهند.
- همه مشخصه ها (attribute) دو پارامتر دارند: نام (name) و مقدار (value). مشخصه ها برای تعریف ویژگی های یک عنصر HTML استفاده می شود و داخل “تگ باز شده یا تگ آغازین” المنت قرار می گیرد. پارامتر name نام خاصیتی را که می خواهیم به عنصر اختصاص دهیم، می گیرد. و value مقداری است که برای صفت (property) تعیین می شود.
- مقدار (value) چیزی است که مقدار صفت را تعیین می کند و همیشه در علامت نقل قول قرار می گیرد.
توضیحات یا (Comments) در HTML
برای درج توضیحات در کد HTML استفاده می شود. استفاده از توضیحات، به ویژه در کدهای پیچیده، بهترین روش برنامه نویسی است تا برنامه نویس و خواننده بتوانند برای درک کدها از این توضیحات کمک بگیرند.
- کامنت ها، فقط یک قطعه کد هستند که توسط مرورگر های وب نادیده گرفته می‌شوند. به عبارت دیگر توسط مرورگر نمایش داده نمی شود.
- کامنت‌ها به برنامه نویسان و کسانی که کد را می خوانند کمک می کنند تا کدهایی که نوشته شده است، مخصوصا کدهای پیچیده را درک کنند.
- کامنت ها همچنین برای غیرفعال کردن بخشی از کدها نیز استفاده می شود.
سینتکس کامنت در HTML :
<!-- Write your comments here -->
مثال:
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>آموزش طراحی سایت با HTML و CSS | وب سایت تجاری اپ</title>
</head>
<body>
<!-- there is a comment -->
<p>آموزش کامنت در HTML</p>
</body>
</html>
خروجی:
لیست ها (Lists) در HTML
تا اینجا با اکثر تگ های مهم HTML یا به عبارتی با مفاهیم پایه و اساسی HTML آشنا شدید. آخرین موردی که به آن می پردازیم لیست ها در HTML هستند. یک لیست شامل اطلاعات کوتاهی مانند نام افراد است که معمولاً با یک آیتم در هر سطر نوشته یا چاپ می شود. و به گونه ای مرتب شده است که پیدا کردن یک آیتم خاص را آسان می کند. به عنوان مثال:
- یک لیست خرید
- لیست انجام کارها
- و …
HTML سه روش برای نمایش لیست اطلاعات ارائه می دهد. انواع لیست هایی که می توان در HTML استفاده کرد عبارتند از:
لیست بدون ترتیب (ul): این نوع لیست تعدادی آیتم‌های مرتبط و بدون ترتیب را به صورت پیش فرض با دایره های توپر لیست می کند. که البته این دایره های توپر قابل تغییر و سفارشی سازی هستند.
لیست مرتب (ol): این نوع لیست تعدادی آیتم‌های مرتبط را با استفاده از طرح های مختلف اعداد و حروف الفبا و به صورت مرتب لیست می کند.
لیست توضیحی (dl): dl از کلمه ( Description List ) گرفته شده است. این نوع لیست از نام/مقدار تشکیل شده است. و برای توضیح بخش هایی مانند اصطلاحات و تعاریف استفاده می شود.
مثال لیست نامرتب:
<!DOCTYPE html>
<html dir="rtl">
<body>
<h2>یک لیست HTML نامرتب</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
خروجی:
مثال لیست مرتب:
<!DOCTYPE html>
<html dir="rtl">
<body>
<h2>یک لیست HTML مرتب </h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
خروجی:
مثال لیست توضیحی:
<!DOCTYPE html>
<html dir="rtl">
<body>
<h2>لیست توضیحی</h2>
<dl>
<dt>HTML</dt>
<dd>- یک توضیح در مورد HTML</dd>
<dt>CSS</dt>
<dd>- یک توضیح در مورد CSS</dd>
<dt>JavaScript</dt>
<dd>- یک توضیح در مورد JavaScript</dd>
</dl>
</body>
</html>
خروجی:
در این قسمت به مبانی و مفاهیم پایه HTML پرداختیم. امیدواریم این آموزش برای شما مفید بوده باشد. قسمت های قبلی و بعدی این آموزش ها را در پایین می توانید مشاهده کنید.
سرفصل های آموزش طراحی یک وب سایت ساده با HTML و CSS
