مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در آموزشهای قبلی اشاره ای داشتیم به کاربرد صفات در html. همچنین با نحوه ی استفاده از فرم ها در html ، آشنا شدید. در این بخش از سری آموزشهای کامل html قصد داریم به چگونگی کار با سربرگها ( Headings ) در html ، بپردازیم. سربرگ ها ( Headings ) در واقع مشخص کننده ی یک سر فصل یا یک بخش مجزا در یک صفحه وب است. وخود سرفص ممکن است دارای زیر مجموعه های کوچتری باشد.
سربرگ ها در html در بازه ای بین تگ های <h1> تا <h6> ، تعریف می شوند. تگ <h1> بزرگترین سربرگ و <h6> کوچکترین آن هاست.
در ادمه این مطلب به بررسی و تحلیل هر کدام از سربرگ ها ی <h1> تا <h6> ، می پردازیم.
headings
کار با سربرگها ( Headings ) در html
در ترتیب استفاده از سربرگ ها <h1> مهمتریسن سربرگ ها را در یک وب سایت و <h6> نیز کوچکترین و کم اهمیت ترین سربرگ ها را در یک وب سایت مشخص می کند:
مثال : سرفصل ها
| <!DOCTYPE html> <html> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> |
اهمیت سربرگ ها
موتورهای جستجو در واقع از سربرگ ها ، برای فهرست کردن ساختار و محتوای وب سایت شما ، استفاده می کنند.
کاربارن نیز از سربرگ های وب سایت ها، برای رسیدن به مطالب مورد نظر خود استفاده می کنند ، پس این خیلی مهم است، که چگونه از سربرگ ها برای اعلام محتوای بخش های مختلف وب سایت خود استفاده کنید.
اندازه سربرگ
هر کدام از سربرگ ها در html یک اندازه پیش فرض دارند، با این وجود شما می توانید اندازه سربرگ های خود را با استفاده از صفت style ، و کد css اندازه فونت (font-size) ، تغییر دهید.
مثال : اندازه ها
| <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> |
بزرگترین اندازه ی سر فصل
هر heading (عنوان) HTML دارای اندازه پیش فرض است. با این حال، با استفاده از خصوصیت اندازه فونت CSS می توانید برای هر عنوان با ابعاد style مشخص کنید:
محتوای افقی در html
از تگ <hr> ، برای شکستن محتوا ، و انتقال به خط بعدی استفاده میشود. و بیشتر برای نمایش افقی محتوا استفاده می شود.
تگ <hr> ، در واقع برای جدا کردن بخش های مختلف یک محتوا استفاده می شود.
مثال : محتوای افقی
| <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr> |
تگ <head>
تگ <head> ، در واقع هیچ ربطی به سربرگ ها ندارد. این تگ در واقع یک ظرف برای نگهداری تگ های کلیدی از جمله <title> ، <link> و… می باشد.
تگ <head> ، بین تگ های <html> و <body> قرار می گیرد.
مثال : تگ head
| <!DOCTYPE html> <html> <head> <title>My First HTML</title> <meta charset="UTF-8"> </head> <body> . . . |
مشاهده ی سورس کد html صفحات وب
جهت مشاهده ی سورس کد html صفحات وب، در صفحه ی HTML راست کلیک کرده و گزینه ی “View Page Source” (در Chrome) یا گزینه ی “View Source” (در IE) را انتخاب کنید.
بررسی ساختار و عناصر HTML صفحات وب
در صفحه وب مربوطه روی یک عنصر و یا فضای خالی راست کلیک کرده و گزینه ی “Inspect” یا “Inspect Element” ر ابرای مشاهده ی ساختار و عناصر HTML صفحه وب مربوطه انتخاب کنید.
این قابلیت به شما اجازه ی تغییر کدهای HTML و CSS صفحه وب مربوطه را می دهد.
کلام آخر
محتوای اکثر صفحات وب از مقالات ، تحقیقات ، آموزش ها و … تشکیل می شوند که به ایجاد عناوینی در قسمت های مختلف محتوا منجر می شود، برای اینگونه موارد استفاده از تگ heading در HTML بهترین گزینه است.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
