مقدمه
سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته تگ Frameset را شناختیم؛ این تگ یک وظیفه ساده دارد و آن تعریف فریم ها در یک صفحه وب است.
در این جلسه دوست دارم با آموزش کار با تگ های h1 تا h6 در HTML شما را با تگ های h و کاربردهای آن آشنا نمایم.
آموزش کار با تگ های h1 تا h6 در HTML
به مثال زیر توجه نمایید.
در این مثال شش هدینگ مختلف HTML وجود دارد.
مثال :
| <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> |
تعریف و کاربرد
شاید کم و بیش با تگ های معروف h1 تا h6 آشنایی داشته باشید.
h1 و h2 و h3 و h4 و h5 و در نهایت h6 هر یک تگ هایی برای تعریف عنوان ها یا تیترهای یک مطلب در HTML هستند.
در این میان h1 مهم ترین هدینگ محسوب می شود و h6 نیز در آخرین درجه اهمیت قرار گرفته و تیترهایی که کم ترین اهمیت را دارند می توان به این تگ تعریف کرد.
پشتیبانی مرورگر ها
| عنصر |  |  |  |  |  |
| <h1> – <h6> | بله | بله | بله | بله | بله |
تفاوت بین HTML 4.01 و HTML5
خصیصه “align” در HTML5 پشتیبانی نمی شود و لذا باید به جای آن از CSS استفاده نمایید.
خصیصه ها
| خصیصه | مقدار | توضیحات |
|---|
| align | left
center
right
justify | این خصیصه تراز متن و قرار گیری محتوای تگ ها را تعیین می نماید.
این خصیصه در HTML5 پشتیبانی نمی شود. |
خصیصه های سراسری Global Attributes
تگ های <h1> تا <h6> از خصیصه های سراسری در HTML پشتیبانی می کند.
خصیصه رویداد Event Attributes
تگ های <h1> تا <h6> > از خصیصه رویداد در HTML پشتیبانی می کند.
تنظیمات پیش فرض CSS
بیشتر مرورگرها تگ <h1> را با مقادیر پیش فرض زیر نمایش می دهند:
مثال :
| h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } |
بیشتر مرورگرها تگ <h2> را با مقادیر پیش فرض زیر نمایش می دهند:
مثال :
| h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } |
بیشتر مرورگرها تگ <h3> را با مقادیر پیش فرض زیر نمایش می دهند:
مثال :
| h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } |
بیشتر مرورگرها تگ <h4> را با مقادیر پیش فرض زیر نمایش می دهند:
مثال :
| h4 { display: block; font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } |
بیشتر مرورگرها تگ <h5> را با مقادیر پیش فرض زیر نمایش می دهند:
مثال :
| h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } |
بیشتر مرورگرها تگ <h6> را با مقادیر پیش فرض زیر نمایش می دهند:
مثال :
| h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; } |
کلام آخر
در این جلسه به آموزش کار با تگ های h1 تا h6 در HTML پرداختیم؛ این تگ ها تگ هایی برای تعریف عنوان ها یا تیترها در HTML هستند.
در جلسه پیش رو به کار و بررسی تگ head می پردازیم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
