در این جلسه توضیحاتی در مورد تگ های Block level ,Inline level و تگ div عرض می کنیم و در ادامه به بیان تگ های HTML که در نسخه ۵ آن اضافه شده اند می پردازیم و برخی را تشریح می کنیم.
به طور کلی تگ های HTML به دو دسته تقسیم می شوند: تگ های Block level و تگ های Inline level.
تگ های Block level از یک خط جدید شروع می شوند به این معنی که اگر تگی Block level باشد وقتی در صفحه قرار می گیرد حتی اگر کل پهنای صفحه را نپوشاند اجازه نمی دهد تگ دیگری در کنارش قرار بگیرد و تگ بعدی زیر آن جای می گیرد این تگ ها می توانند تگ دیگری را در خود جای دهند و عبارتند از:
<div> ، <table> ، <pre> ، <P> ، <ul> ، <ol> ، <li> ، <form> ، <h1> و … .
اما تگ های Inline level وقتی به کار می روند به خط جدید نمی روند و عبارتند از:
<span> ، <em> ، <input> ، <img> ، <strong> ، <b> ، <a> ، <i> و … .
توضیحی در مورد تگ div
تگ div معمولاً به عنوان ظرفی برای سایر تگ های html استفاده می شود و در صورت استفاده از css styling می توان محتوای آن را قالب بندی کرد. به کد زیر و نتیجه آن در تصویر دقت کنید:
<h1> Heading </h1> <div style="background-color:yellow; color:blue;"> <p> Some paragraph text goes here. </p> <p> Another paragraph goes here. </p> </div>
همانطور که در تصویر مشاهده می کنید می توانیم با استفاده از خاصیت style و قرار دادن آن در بخش آغازین تگ div به متن و زمینه آن رنگ بدهیم؛ که این یک روش قالب بندی صفحه است.
روش دیگر استفاده از تگ style و قرار دادن آن در تگ head می باشد. روش سوم ایجاد فایل CSS است که توضیح آن در این مبحث نمی گنجد.
توضیحی در مورد تگ <span>
یک تگ inline است که معمولاً محتوی بخشی از متن می باشد و با استفاده از css می توان آن بخش از متن را قالب بندی کرد.
<h3> some <span style="color:red"> Important </span> message </h3>
ما می توانیم تگ های inline را درون تگ های block و دیگر تگ های inline قرار بدهیم اما امکان قرار دادن تگ های block در تگ های inline وجود ندارد.
تگ های HTML در نسخه ۵
تگ های HTML که در نسخه ۵ اضافه شده اند را در زیر می بینیم:
<article> , <aside> , <audio> , <video> , <canvas> , <datalist> , <details> , <embed> , <footer> , <header> , <nav> , <output> , <progress> , <meter> , <section> , <bdi> , <dialog> , <figure> , <figcaption> , <time> , <wbr> , <summary> , <mark> , <main> , <ruby> , <rp> , <rt> , <menuitem>
ساختار صفحه در HTML5
یک وبسایت ممکن است از بخش های زیر تشکیل شده باشد. همین طور بسته به ساختار، صفحه شما می تواند یک یا چند بخش را نداشته باشد:
تگ header
این بخش معمولا شامل اسم سایت و لوگوی سایت می باشد. دقت کنید که یادداشت های موجود در این تگ کاملاً متفاوت از تگ <head> می باشند.
تگ nav
از تگ nav برای ایجاد نوار منوی سایت که شامل چندین مورد مثل «صفحه اصلی»، «در مورد ما» و «تماس با ما» می باشد، استفاده می شود.
تگ article
تگ article در برگیرنده قسمت اصلی و بخش مهم سایت است و مطالب را در خود جای می دهد و می تواند یک مطلب در مورد بازار، مجله، مقاله خبری و یا هر محتوای مستقل دیگری باشد.
تگ section
از تگ section، برای تقسیم بندی بخش اصلی سایت استفاده می شود .
تگ aside
تگ aside حاوی اطلاعات بیشتر راجع به بخش اصلی است و ممکن است حاوی لینک هایی برای دسترسی به اطلاعات بیشتر باشد و معمولاً در قسمت کناری سایت نمایش داده می شود و درون هر تگی که به کار برده شود محتوای آن باید مرتبط با تگ احاطه کننده آن باشد.
تگ footer
تگ footer بصورت گسترده استفاده می شود. بطور کلی بخش پایینی هر وبسایت را به خود اختصاص می دهد و حاوی اطلاعاتی در مورد مدیر سایت، حق کپی-رایت، سال تأسیس سایت و … می باشد.
در این جلسه به تگ های HTML پرداختیم و در جلسه بعد در مورد نحوه قرار دادن فایل های صوتی و تصویری در وبسایت صحبت می کنیم. از اینکه با ما همراهید متشکریم. لطفاً با درج نظرات خود، ما در بهبود مطالب کمک کنید.
دیدگاه بگذارید