با عرض سلام خدمت کاربران گرامی آی وحید
در این ساعت از وبلاگ آی وحید با آموزش هدینگ ها در خدمت شما هستیم که جلسه ششم از آموزش HTML5 رو به خودش اختصاص داده است پس همراه ما باشید تا هدینگ ها رو به طور کامل آموزش بدیم.
هدینگ ها یا همان عنوان ها در سندهای HTML بسیار مهم هستند. هم چنین این تگ ها در مباحثی مانند سئو (بهینه سازی سایت برای موتورهای جستجو) و … موثر و مهم است.
عنوان های HTML
همانطور که در جلسات قبلی گفتیم برای کدنویسی عنوان های در زبان HTML از تگ های <h1> تا <h6> استفاده می شود که مهم ترین این عنوان <h1> است و به ترتیب با بیشتر شدن عدد از اهمیت آنها کاسته می شود.
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
توجه داشته باشید که مرورگرها به صورت پیشفرض فاصله ای را میان عناوین با دیگر المنت ها قائل می شوند.
عناوین مهم هستند!
عنوان ها فقط عنوان هستند. هیچ گاه برای درشت یا همون bold کردن و یا بزرگ کردن یه عبارت از تگ های هدینگ استفاده نکیند زیرا هر تگی را بهر کاری ساخته اند و از تگ های هدینگ فقط برای عنوان های سند HTML استفاده کنید.
اغلب موتورهای جستجو بر اساس الگوریتم هایی که داریم و با توجه به بیشتر شدن حجم دیتاها در سطح اینترنت و پوشش همه ی وب اعم از وب سایت ها و وبلاگ ها به عناوین توجه می کنند تا در زمان کوتاهی ساختار صفحه رو بفهمند.
هم چنین استفاده از عناوین در جای مناسب خود ساختار صفحه رو مشخص می کنه و زیبایی خاص خودش رو بهش اضافه می کنه.
در استفاده از تگ های هدینگ توجه داشته باشین کلماتی که دارای بیشترین اهمیت است رو با تگ <h1> و کلمات کم اهمیت تر رو با تگ های <h2> و <h3> و به همین ترتیب کدنویسی کنین.
خط افقی!
تگ <hr> در صفحات HTML یه خط افقی رو نمایش میده. از این تگ میتونیم برای جدا کردن بخش های یک موضوع استفاده کنیم. یه مثال نیز براتون آماده کردم:
<p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p>
تگ <head>
این تگ قبل از تگ <body> و بعد از تگ <html> کدنویسی می شود. این تگ شامل تگ های خاصی هست و معمولا اطلاعات اضافی صفحات وب در این تگ کدنویسی می شوند. اطلاعاتی مانند برنامه نویس صفحه – شرکت سازنده – صفحات شبکه های اجتماعی و هر اطلاعات اضافی که برنامه نویس لازم بدونه.
<!DOCTYPE html> <html> <head> <title>My First HTML</title> <meta charset="UTF-8"> </head> <body> . . .
توجه داشته باشید در مثال بالا در داخل تگ هد نوع encoding یا همون نوع کاراکترهای صفحه رو مشخص کردیم که معمولا برای حروف فارسی و عربی و… از UTF-8 استفاده می شود.
هم چنین سه نقطه پایانی مثال به منزله ادامه کدها می باشد و از این به بعد کد ها رو کامل نخواهیم نوشت پس به این نکته هم توجه داشته باشید.
نکته:> متا تگ دیتا ها (اطلاعات داخل تگ هد) اطلاعاتی اضافی(ضروری نیستن) هستن که درباره صفحه وب در اختیار ما می گذارند.
تگ <title>
این تگ جزو تگ های متا دیتا هست و از این تگ برای قرار دادن عنوان صفحه HTML استفاده میشه. محتوای این تگ در درون صفحه به کاربر نمایش داده نمیشه اما مرورگرها محتوای این تگ رو در تب های خودشون نشون میدم.
تگ <meta>
این تگ ها جزو تگ های متا دیتا هست و محتویات اون میتونه هر دیتا اضافی درباره صفحه باشه.
از جمله تگ های پرکاربر میشه به تگ های <style> و <link> اشاره کرد. از این تگ های برای اضافه کردن دستورات و قوانین زبان CSS استفاده میشه که تگ <style> کدهای CSS داخلی و از تگ <link> برای کدهای CSS خارجی هست یعنی اگه از تگ <style> استفاده کنیم کدهای CSS رو مستقیم در صفحه HTML میتونیم کدنویسی کنیم و از تگ <link> هم برای فراخوانی یه فایل خارجی استفاده می کنیم که شامل کدهای CSS هست که فرمت اون فایل بایستی .css و فقط شامل کدهای CSS باشه و معمولا فراخوانی فایل در طراحی های وب استفاده میشه که باعث افزایش سرعت هم میشه و بهتره از این روش استفاده کنید.
خب فعلا برای این جلسه کافیه. همون طور که قبلا هم تاکید کردیم حتما مواردی که گفته میشه تمرین کنید تا از یادتون نره و با تمرین می تونید مهارت های خودتون رو افزایش دهید و اگه کمی خلاقیت داشته باشین تجربه های جالبی بدست میارین.
در پناه حق – آی وحید
