سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانهگذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته با تگ های هدینگ یا تگ های h1 تا h6 آشنا شدیم؛ این تگ ها به تعریف عنوان ها یا تیترهای یک مطلب در HTML می پردازند.
در این جلسه آموزش کار با تگ head در HTML را به علاقمندان این دوره ارائه می نماییم.
به مثال زیر توجه نمایید.
در این مثال یک سند HTML با یک تگ<title> در بخش اصلی آن مشخص شده است.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> |
تگ head تگی است برای نگهداری سایر تگ های HTML. این تگ برای نگهداری سایر تگ همچونیک ظرف عمل می کند.
عنصر head می تواند یک عنوان برای سند، اسکریپت ها، استایل ها، متادیتا ها و موارد دیگر باشد.
عناصر زیر می توانند درون عنصر <head> قرار بگیرند:
عنصر | |||||
<head> | بله | بله | بله | بله | بله |
در HTML 4.01 تگ head یک تگ ضروری است.
اما در HTML5 ، تگ head قابل حذف است. کد زیر به عنوان HTML5 اعتبار می یابد:
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <title>Title of the document</title> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
خصیصه | مقدار | توضیحات |
---|---|---|
profile | URL | این خصیصه آدرس صفحه ای که حاوی قوانین مرتبط با صفحه وب است را تعریف میکند. این قوانین را می توان توسط مرورگرها خواند تا به وضوح اطلاعات را در ویژگی محتوای برچسب <meta> درک کرد. این خصیصه در HTML5 پشتیبانی نمی شود. |
تگ <head> از خصیصه های سراسری در HTML پشتیبانی می کند.
استفاده از تگ<base> در <head> (نحوه استفاده از تگ <base> برای مشخص کردن URL پیش فرض و یک صفحه مقصد برای کلیه لینک های موجود در یک صفحه)
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <base href="https://www.w3schools.com/" target="_blank"> </head> <body> <p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://www.w3schools.com/images/stickman.gif".</p> <p><a href="tags/tag_base.asp">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p> </body> </html> |
استفاده از تگ <style> در <head> (نحوه اضافه کردن اطلاعات استایل در بخش <head>)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <style> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
استفاده از تگ <link> در <head> (نحوه استفاده از تگ <link> برای لینک دهی به صفحه یک استایل خارجی)
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>I am formatted with a linked style sheet</h1> <p>Me too!</p> </body> </html> |
بیشتر مرورگرها عنصر <head> را با مقادیر پیش فرض زیر نمایش می دهند:
1 2 3 | head { display: none; } |
در این جلسه به آموزش کار با تگ head در HTML پرداختیم و آموختیم که می توان از تگ head برای نگهدرای سایر تگ های HTML استفاده کرد.
در جلسه آینده به آشنایی و بررسی تگ header خواهیم پرداخت.
با پی وی لرن همراه باشید.