مثال های پایه HTML

مثال های پایه HTML

دسته بندی : آموزش HTML سطح مقاله : مقدماتی زمان مطالعه : 7 دقیقه آخرین بروز رسانی: 05 آبان 1399

مثال های پایه HTML را در این مقاله برای شما آماده کرده‌ایم تا بتوانید نحوه نوشتن و اجرای ساده‌ترین کدهای HTML را به طور عملی ببیند، پیشنهاد می‌کنیم بعد از مشاهده هر مثال شروع به تمرین کردن آن مثال کنید.

Boilerplate یا قالب اصلی HTML

در ابتدا بهتر است با نحوه صحیح نوشتن یک سند HTML و ساختار ضروری‌‎ترین تگ‌ها شروع کنیم:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

این تگ‌ها اساسی‌ترین تگ‌های HTML هستند و عناصر دیگر که در ادامه آن‌ها را مشاهده می‌کنید برای اجرای صحیح نیازمند وجود این تگ‌ها هستند.

  • عنصر <!DOCTYPE html> به مرورگر کمک می‌کند تا ورژن HTML را به درستی تفسیر کند و آن را نمایش دهد.
  • عنصر <html> یک سند HTML را تعریف می‌کند و نگهدارنده تمام عناصر HTML است.
  • تگ‌های <head> و <body> دو بخش اصلی از یک صفحه وب را نشان می‌دهند.

تفاوت head و body در HTML  چیست؟

Head (سر):

  • بخش <html> شامل اطلاعات مربوط به تنظیمات صفحه وب است.
  • این بخش عمدتاً شامل تگ‌هایی مانند <title> ،<meta> ،<link> ،<style> ،<script> و… می‌شود.

Body (بدنه):

  • بخش <body> حاوی محتوای اصلی صفحه وب است که به کاربران نمایش داده می‌شود.
  • این بخش شامل تمام المان‌هایی است که مرتبط با نمایش صفحه می‌شوند از جمله متن، تصاویر، لینک‌ها، جداول، فرم‌ها و دیگر المان‌های وب.
  • هر چیزی که به صورت مستقیم در مرورگر نمایش داده می‌شود، در بخش <body> قرار دارد.

بنابراین <head> بیشتر برای تنظیمات و اطلاعات مرتبط با صفحه استفاده می‌شود در حالی که <body> برای نمایش محتوا به کاربران است.

مثال های پایه HTML

در ادامه به بررسی نحوه استفاده از مهم‌ترین تگ های HTML می‌‎پردازیم؛ تمام تگ‌هایی که بررسی می‌شوند درون بخش <body> قرار می‌گیرند و هدف آن‌ها نمایش محتوا است.

استفاده از عناوین HTML

در زبان HTML عناوین یا تگ‌های هدینگ به منظور تعیین ساختار و اهمیت اجزاء مختلف صفحه وب به کار می‌روند؛ این عناوین با استفاده از تگ‌های <h1> تا <h6> در HTML مشخص می‌شوند. در زیر نحوه استفاده از عناوین HTML آمده است:

<h1>عنوان با اهمیت درجه یک</h1>
<h2>عنوان با اهمیت درجه دو</h2>
<h3>عنوان با اهمیت درجه سه</h3>
<h4>عنوان با اهمیت درجه چهار</h4>
<h5>عنوان با اهمیت درجه پنج</h5>
<h6>عنوان با اهمیت درجه شش</h6>

تعریف پاراگراف در HTML

در زبان HTML برای تعریف یک پاراگراف از تگ <p> استفاده می‌شود، پاراگراف‌ها برای نمایش متون و محتواهای متنی در صفحات وب استفاده می‌شوند؛ در زیر نحوه تعریف یک پاراگراف در HTML آورده شده است:

<p>این یک متن نمونه است که در یک پاراگراف قرار دارد.</p>

<p>پاراگراف‌ها به صورت خودکار زیر یکدیگر نمایش داده می‌شوند و متن درون هر پاراگراف به صورت یک پاراگراف جدید نمایش داده می‌شود.</p>

استفاده از لینک در HTML

در زبان HTML از تگ <a> برای ایجاد لینک‌ها استفاده می‌شود؛ لینک‌ها به کاربران این امکان را می‌دهند که به صفحات دیگر یا منابع مختلف در وب متصل شوند. در زیر نحوه استفاده از لینک در HTML نمایش داده شده است:

<a href="devix.academy">دویکس</a>


<p>لینک باز شونده در تب جدید:
  <a href="https://devix.academy/shop-category/education-courses/" target="_blank">دوره‌های آموزشی سایت دویکس</a>
</p>

اضافه کردن عکس در HTML

برای اضافه کردن یک تصویر به صفحه HTML از تگ <img> (تصویر) استفاده می‌شود؛ در زیر نحوه افزودن یک تصویر به صفحه HTML نمایش داده شده است:

 <img src="example.jpg" width="640" height="360" alt="توضیح تصویر">

در این مثال:

  • از تگ <img> برای اضافه کردن تصویر به صفحه وب استفاده شده است.
  • ویژگی src مسیر یا URL تصویر را مشخص می‌کند و “example.jpg” نشان دهنده نام تصویر واقع در همان دایرکتوری (مسیر) است.
  • ویژگی width و height اندازه تصویر را مشخص می‌کنند.
  • ویژگی alt یک متن جایگزین را برای تصویر فراهم می‌کند که در صورتی که تصویر بارگذاری نشود یا کاربر از مرورگرهایی با مشکلات نمایش تصاویر استفاده کند، این متن به عنوان جایگزین تصویر نمایش داده می‌شود.

اضافه کردن ویدیو در HTML

برای افزودن ویدیو به صفحه HTML از تگ <video> استفاده می‌شود؛ در زیر نحوه افزودن یک ویدیو به صفحه HTML نمایش داده شده است:

 <video src="example.mp4" width="640" height="360" controls>

در این مثال:

  • از تگ <video> برای اضافه کردن ویدیو به صفحه استفاده شده است.
  • ویژگی src مسیر یا URL ویدیو را مشخص می‌کند و “example.mp4” نشان دهنده نام ویدیو واقع در همان دایرکتوری (مسیر) است.
  • ویژگی width و height اندازه ویدیو را مشخص می‌کنند.
  • ویژگی controls امکان نمایش کنترل‌های پخش، مکث و تنظیمات صدا و تصویر را فراهم می‌کند.

البته روش دیگری برای تعریف یک ویدیو در صفحه وب وجود دارد که در مقاله تگ <video> در HTML آن را بررسی می‌کنیم.

اضافه کردن صدا در HTML

برای افزودن فایل صدا به صفحه HTML از تگ <audio> استفاده می‌شود؛ در زیر نمونه‌ای از افزودن صدا به صفحه HTML آمده است:

<audio src="example.mp3" controls>

در این مثال:

  • از تگ <audio> برای اضافه کردن صدا به صفحه استفاده شده است.
  • ویژگی src مسیر یا URL فایل صوتی را مشخص می‌کند و “example.mp3” نشان دهنده نام فایل صوتی واقع در همان دایرکتوری (مسیر) است.
  • ویژگی controls امکان نمایش کنترل‌های پخش، مکث و تنظیمات صدا و تصویر را فراهم می‌کند.

البته روش دیگری برای تعریف یک فایل صوتی در صفحه وب وجود دارد که در مقاله تگ <audio> در HTML آن را بررسی می‌کنیم.

تمام مواردی که برای نوشتن ساده‌ترین صفحه وب را لازم داشتید در مقاله مثال های پایه HTML بررسی کردیم؛ برای نوشتن صفحات وب حرفه‌ای در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید و مقالات بعدی را نیز دنبال کنید.

این مقاله چقدر براتون مفید بود؟

میانگین رتبه : 5/5 - تعداد رای : 3