مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش html را دنبال می کنند. تاکنون شما را با تگ های اصلی و پایه در html که در تمام صفحات وب استفاده می شود و تا حدودی با ساختار آن ها آشنا کردیم. در این بخش نیز قصد داریم تا شما را با ساختار عناصر html و نکات مهمی که در پیاده سازی تگ های مختلف html باید رعایت کنید آشنا کنیم. از این رو برای آشنایی با این نکات مهم در ادامه ی مباحث ساختار عناصر html با ما همراه باشید.
ساختار عناصر html
در ادامه ی این جلسه در راستای آشنایی با ساختار عناصر html شما را با ساختار و نکات مهمی در این زمینه آشنا می کنیم.
عناصر html
یک عنصر HTML معمولا شامل یک تگ شروع و تگ پایان ، با محتوای وارد شده بین تگ شروع و پایان است:
<tagname>محتوا…</tagname>
تمام عناصر html که شامل محتوای متن و… هستند دارای یک تگ شروع و پایان می باشند.
<p>My first paragraph.</p>
| شروع تگ | محتوای عنصر | پایان تگ |
|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | |
نکته : عناصر HTML بدون محتوا، Empty elements (عناصر خالی) نامیده می شوند.
عناصر خالی تگ پایان ندارند، مانند عنصر <br> (که نشان دهنده یک شکست خطی به خط بعد است).
عناصر html تودرتو
عناصر html را می توان به صورت تو در تو تعریف کرد.
تمام صفحات html دارای عناصر تو در تو می باشند.
مثال زیر از ۴ عنصر html تشکیل شده است:
شرح مثال فوق:
مثال : عناصر تودرتو
| <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
تگ <html> کل سند html را در بر می گیرد.
تگ <html> شامل تک شروع <html> و تگ پایان <html/> است.
سایر محتوا که قابل مشاهده است در داخل تگ <body> قرار می گیرد:
مثال :
| <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
عنصر <body> در واقع بدنه ی سند html را توصیف می کند.
که با شامل تگ شروع <body> و تگ پایان <body/> می باشد.
این صفحه وب شامل دو عنصر محتوایی <h1> و <p> است:
مثال :
| <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> |
عنصر <h1> یک هدینگ یا سر فصل را تعریف می کند.
این عنصر شامل تگ شروع <h1> و تگ پایان <h1/> می باشد.
محتوای این عنصر My First Heading است:
مثال :
| <h1>My First Heading</h1> |
عنصر <p> یک پاراگراف را توصیف می کند.
این عنصر شامل تگ شروع <p> و تگ پایان <p/> می باشد.
محتوای این عنصر My first paragraph است:
مثال :
| <p>My first paragraph.</p> |
تگ پایان را فراموش نکنید
برخی از عناصر HTML به درستی نمایش داده می شود، حتی اگر تگ پایان را فراموش کنید:
مثال : تگ پایان
| <html> <body> <p>This is a paragraph <p>This is a paragraph </body> </html> |
مثال فوق در تمام مرورگرها کار می کند، زیرا برچسب بسته بودن اختیاری است.
نکته: هرگز در این مورد عادت نکن، چراکه اگر تگ پایان را فراموش کنید ممکن است نتایج غیر منتظره و / یا اشتباه ایجاد کنید.
عناصر html خالی
عناصر html بدون محتوا به عنوان عناصر خالی شناخته می شوند.
مثلا تگ <br> یک نمونه تگ خالی است چرا که محتوایی ندارد.
تگ های خالی نیز می توانند بسته باشند مانند : <br/>
در نظر داشته باشید که HTML5 عناصر خالی را نمی بندد.
اما اگر می خواهید اعتبار دقیقتری داشته باشید یا اگر بخواهید سند خود را با تجزیه کننده XML قابل خواندن کنید، باید تمام عناصر HTML را به درستی ببندید.
از حروف کوچک در ایجاد تگ استفاده کنید.
تگ های HTML حساس به حروف بزرگ نیستند: <P> به معنی همان <p> است.
استاندارد HTML5 نیازی به تگ های کوچک و بزرگ نیست اما بهتر است که از حروف کوچک استفاده کنید چراکه برخی فرمت ها مانند XHTML در این مورد سخت گیر تر عمل می کنند.
کلام آخر
برای شروع طراحی یک صفحه ی html بعد از انتخاب ویرایشگر و ایجاد فایل ، نخستین چیزی که باید بدانید و آن را رعایت کنید نکات اصلی کار با عناصر html و آشنایی با ساختار عناصر html است که ما در این بخش به آن پرداختیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
mostafa
عالی اما کاش تصویری بودن