المنتهای HTML
آنچه در این مقاله میخوانید
Toggleیک فایل HTML از المنتها ساخته شده است. این المنتها مسئول ایجاد صفحات وب و تعریف محتوا در آن صفحه وب هستند. یک المنت در HTML معمولاً از یک تگ شروع <نام تگ> ، تگ پایان <نام تگ/> و محتوای درج شده بین آنها تشکیل شده است، یک المنت مجموعه ای از تگ شروع ، صفات ، تگ پایان و محتوای بین آنها است.
نکته: برخی از عناصر دارای تگ و محتوای نهایی نیستند ، این المنتها به عنوان المنت خالی یا المنت خود بسته شونده یا المنت خالی نامیده می شوند.مثلا:
<p> Hello world!!! </p>
مثال:
<!DOCTYPE html> <html> <head> <title>WebPage</title> </head> <body> <h1>This is my first web page</h1> <h2> How it looks?</h2> <p>It looks Nice!!!!!</p> </body> </html>
- تمامی محتوای نوشتهشده در المنت بدنه، بر روی صفحه وب نمایش داده میشود.
المنت خالی: همه المنتهای موجود در HTML نیازی به تگ شروع و تگ پایان ندارند ، برخی از المنتها فاقد محتوا هستند و تگ پایان آنها از جمله المنت Void یا المنتهای خالی شناخته می شوند. این المنتها به عنوان تگ جفت نشده نیز خوانده می شوند. بعضی از المنتهای خالی عبارتند از: <br> (رفتن به خط بعد)، <hr>(نمایش خط افقی) و…
المنتهای تو در توی HTML: می تواند تو در تو باشد ، این بدان معنی است که یک عنصر می تواند عنصر دیگری را نیز در خود داشته باشد.
المنتهای سطح بلوک و درون خطی:
به منظور نمایش پیشفرض در HTML، المنتها به دودسته تقسیم میشوند:
- المنتهای سطح بلوک(Block-level element)
- المنتهای درون خطی(Inline element)
المنتهای سطح بلوک(Block-level element)
- این المنتها ، بخش اصلی صفحه وب را با تقسیم یک صفحه به بلوک های منسجم ، ساختار می دهند.
- یک المنت در سطح بلوک همیشه با خط جدید شروع می شود و عرض کامل صفحه وب را از چپ به راست می گیرد.
- این المنتها می توانند شامل المنتها سطح بلوک و همچنین درون خطی باشند.
در ادامه المنتها سطح بلوک در HTML آورده شده است:
address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video.
توجه: همه این المنتها در قسمتهای بعدی شرح دادهمیشود.
مثال:
<!DOCTYPE html> <html> <head> </head> <body> <div style="background-color: lightblue">This is first div</div> <div style="background-color: lightgreen">This is second div</div> <p style="background-color: pink">This is a block level element</p> </body> </html>
در مثال بالا ما از تگ ، که بخشی را در یک صفحه وب تعریف می کند و عرض آن را به طور کامل می گیرد و همچنین از صفت style استفاده کرده ایم که برای سبک سازی محتوای HTML بکار میرود و رنگ پس زمینه نشان می دهد که این یک المنت سطح بلوک است.
المنتهای درون خطی(Inline element)
- المنتهای درون خطی المنتهای هستند که بخشی از متن داده شده را متمایز کرده و عملکرد خاصی را به آن ارائه می دهند.
- این عناصر با خط جدید شروع نمی شوند و طبق نیاز، عرض میگیرند.
- المنتهای درون خطی به طورعمده با المنتهای دیگر بکار میروند.
در ادامه المنتها درون خطی در HTML آورده شده است:
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
مثال:
<!DOCTYPE html> <html> <head> </head> <body> <a href="https://www.javatpoint.com/html-tutorial">Click on link</a> <span style="background-color: lightblue">this is inline element</span> <p>This will take width of text only</p> </body> </html>
در زیر لیستی از برخی المنتهای اصلی استفاده شده در HTML آورده شده است:
تگ شروع | محتوا | تگ پایان | توضیحات |
---|---|---|---|
<h1> … <h6> | هدینگها(heading) در HTML | <h1>؟؟ … <h6> | این المنتها برای تهیه هدینگ برای صفحه بکار میروند. |
<p> | این یک پاراگراف است | <p/> | این المنت برای نمایش یک محتوا به صورت پاراگراف استفاده می شود. |
<div> | این بخش <div> است | <div/> | این المنت برای تهیه بخش(section) در صفحه وب استفاده می شود. |
<br> | این المنت برای رفتن به خط بعدی استفاده میشود.(المنت خالی یا Void Element) | ||
<hr> | این المنت برای ایجاد یک خط افقی استفاده میشود.(المنت خالی یا Void Element) |
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.