صفحه نخست » مقالات » مثال های پایه HTML

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

دسته بندی : مقالات سطح مقاله : مقدماتی زمان مطالعه : 3 دقیقه 05 آبان 1399
مثال-های-پایه-HTML

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

بدنه اصلی HTML

برای شروع بیایید ببینیم یک سند کد اساسی به چه صورت است:

<!DOCTYPE html>
<html>
<body>
  <h1>Heading</h1>
</body>
</html>

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

تگ <! DOCTYPE>

تگ <! DOCTYPE> به مرورگر کمک می کند تا ورژن HTML شما را به درستی درک کرده و نمایش دهد. به این تگ نیاز داریم زیرا بیش از یک سند وب برای استفاده وجود دارد . همچنین این تگ به حروف کوچک حساس نسیت:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

مثال هایی از توصیف HTML

عنصر <html> یک سند HTML را تعریف می کند. اساسا در حالی که <! DOCTYPE> کل صفحه را تعریف میکند، <html> عملکردی را برای آن به ارمغان می آورد:

<!DOCTYPE html>
<html>
<head>
  <title>Name of the website</title>
</head>

<body>
  <h1>Heading for the content below</h1>
  <p>Text text text</p>
</body>

</html>

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

عنصر head به طوری استفاده می شود که برای کاربر قابل مشاهده نیست. در واقع مهم ترین اطلاعات یک سند خاص است.فراداده ممکن است عنوان، اسکریپت ها یا اطلاعات مشابه باشد:

<head>
  <title>Document title</title>
</head>

عنصر  title که در مثال بالا مشاهده می کنید برای تهیه عنوان برای سند شما استفاده می شود که به موتورهای جستجو کمک می کند وب سایت شما را پیدا کنند.

<title>Page Title</title>

عنصر body تمام محتوای صفحه قابل مشاهده را توصیف می کند. محتواهایی مانند : متن ، فیلم، دکمه ها و …

<body>
  <h1>Heading</h1>
  <p>Paragraph</p>
</body>

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

سرفصل ها راه شما را در بین تمام مطالب راحت تر می کنند. این اطلاعات اولیه را در مورد محتوای آن قسمت خاص از سند به خواننده می دهد. برای اعلام عنوان، عنوان آن را داخل <h1> - <h6>   قرار دهید. هرچه عناوین کمتر باشند بزرگتر و مهمتر خواهند بود:

<h1>Heading text - Level 1. Most Important Heading</h1>
<h2>Heading text - Level 2</h2>
<h3>Heading text - Level 3</h3>
<h4>Heading text - Level 4</h4>
<h5>Heading text - Level 5</h5>
<h6>Heading text - Level 6. Least Important Heading</h6>

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

برای تنظیم فاصله برای یک پاراگراف ، باید از عنصر <p>استفاده کنید . این عنصر به طور خاص برای متن ایجاد شده است. یک مثال ساده کد HTML را در زیر مشاهده می کنید:

<p>This is a paragraph.</p>

<p>This is also a paragraph.</p>

<p>This is yet another paragraph.</p>

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

پیوندها شما را از صفحه فعلی به صفحه دیگری هدایت می کنند. برای ایجاد یک مورد، باید از یک عنصر <a> استفاده کنید و یک ویژگی  href  را به آن ضمیمه کنید:

<a href="https://www.bitdegree.org/">This is a link to external website</a>

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

برای افزودن تصویر به برچسب  <img> نیاز دارید. هم چنین باید ویژگی src را در آن بگنجانید تا مرورگر شما بتواند بفهمد از کجا می تواند تصویر را تهیه کند. به مثال زیر توجه کنید:

<img src="image.png" alt="JumpyDoggy" width="470" height="317">

هم چنین می توانید از ویژگی های عرض و ارتفاغ برای تعریف ابعاد تصویر استفاده کنید. با استفاده از alt ، اگر تصویری بارگیری نمی شود ، می توانید متن جایگزینی برای نمایش ارائه دهید. صفحه خوان هایی که محتوا را در دسترس کاربران نابینا یا کم بینا قرار می دهند نیز می توانند از آن برای نشان دادن ایده یک تصویر استفاده کنند.

نکات مفید در رابطه با مثال های HTML

  • می توانید کدهای اساسی را در ویرایشگر کد دویکس امتحان کنید که به شما امکان می دهد نمونه کدهای HTML خود را ذخیره کنید، و یک URL قابل اشتراک برای آن فراهم کنید.
  • اگر هنگام نوشتن کد اساسی در ویندوز هم چنان به مشکلی بر می خورید ، میتوانید سیستم راهنمای HTML ایجاد شده توسط مایکروسافت را امتحان کنید.

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 5.00
[ 1 رای ]
مطالب مشابه

Related Posts