آموزش رایگان HTML مقدماتی تا پیشرفته بخش عناصر
آموزش صفت HTML به زبان ساده
یک فایل HTML از عناصر ساخته شده است. وظیفه این عناصر ایجاد صفحات وب و تعریف محتوای آن ها است. یک عنصر در HTML معمولاً از تگ شروع <نام تگ>، تگ بسته <نام تگ/> و محتوای مندرج در بین آنها تشکیل شده است. از نظر فنی یک عنصر مجموعه ای از تگ شروع، صفات، تگ پایان و محتوای بین تگ ها است.
توجه: برخی عناصر تگ پایان و محتوا ندارند. این عناصر، عناصر خالی یا عناصر منفرد یا عناصر تهی نامیده می شوند.
به عنوان مثال:
1 |
<p> Hello world!!! </p> |
مثال
فهرست عناوین
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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> |
برای یادگیری تمامی محبث های این دوره میتوانید اینجا کلیک کنید.
- تمام محتوای نوشته شده بین عناصر تگ body در صفحه وب قابل مشاهده هستند.
Void element: تمام عناصر موجود در HTML نیاز به تگ شروع و پایان ندارند. برخی از عناصر دارای محتوا و تگ پایان نیستند، این عناصر با نام elements Void (عناصر تهی) یا عناصر خالی شناخته می شوند. همچنین به عنوان unpaired tag ( تگ غیر جفت) نیز خوانده می شوند.
بعضی از عناصر تهی عبارتند از: <br> (شکستن خط)، <hr> (کشیدن یک خط افقی) و … .
عناصر Nested (تودرتو): HTML: می تواند تودرتو باشد، به این معنی که یک عنصر می تواند عنصر دیگری را در خود جای دهد.
عناصر بلوکی و خطی
عناصر براساس نمایش پیش فرض به دو دسته تقسیم می شوند:
- عنصر بلوکی (Block-level element)
- عنصر خطی (Inline element)
عناصر بلوکی
- این عناصر بخش اصلی صفحه وب را با تقسیم بندی صفحه به بلوک های منطقی می سازند.
- یک عنصر بلوکی همیشه در یک خط جدید شروع می شود و تمام عرض صفحه را از چپ به راست در اختیار می گیرد.
- این عناصر می توانند عناصر بلوکی و همچنین خطی را در خود جای دهند.
عناصر بلوکی HTML در زیر آورده شده است:
1 |
<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>. |
مثال
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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> |
خروجی
بیشتر بخوانید:
- چگونه توسعه دهنده وب شویم؟
- چند پروژه تمرینی HTML و CSS
- دانلود افزونه فرم ساز گرویتی فرمز| Gravity Forms
- تکنیکهای سئو دسته بندی محصولات در فروشگاه اینترنتی
- آموزش رایگان HTML مقدماتی تا پیشرفته بخش تگ ها
- معرفی زبان PHP و مزیتهای آن
- آموزش رایگان HTML مقدماتی تا پیشرفته
- بهترین افزونه های اسلایدر وردپرس
- آموزش رایگان HTML مقدماتی تا پیشرفته بخش تگ ها
- آموزش رایگان HTML مقدماتی تا پیشرفته بخش دوم
- آموزش کامل شبه عناصر در CSS همراه با مثال
- آموزش رایگان HTML مقدماتی تا پیشرفته بخش سوم
- چند پروژه تمرینی HTML و CSS
- آموزش رایگان HTML مقدماتی تا پیشرفته بخش چهارم
- برترین افزونه های جدول ساز وردپرس
دیدگاهتان را بنویسید