- اچ تی ام ال
- زمان 14 دقیقه
امیرحسین بخشیبا HTML شما می توانید وب سایت خود را ایجاد کنید. آموزش های سایت همه چیز را در رابطه با HTML به شما می آموزد. HTML بسیار آسانتر از آن است که فکرش را می کنید!
در مجموع صدها مثال متنوع در لا به لای فصل های آموزش قرار داده شده است.
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <body/> <html/>
مرجع کدهای HTML
در این آموزش می توانید کاملترین مرجع آموزش کدهای HTML (برچسب ها، کدهای رنگ، رمزگذاری URL، کدهای زبان، تمامی ویژگی های تگ ها و …) را به راحتی پیدا کنید.
HTML چیست؟
HTML یک زبان برای توصیف صفحات وب است.
HTML مخفف Hyper Text Markup Language می باشد.
HTML یک زبان نشانه گذاری می باشد.
همانطور که می دانید زبان نشانه گذاری مجموعه ای از تگ های نشانه گذاری می باشد.
تگ ها محتوای سند را توصیف می کنند.
اسناد HTML شامل تگ های HTML و متن های ساده هستند.
به اسناد HTML، صفحات وب نیز گفته می شود.
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <body/> <html/>
در مثال فوق:
DocType نوع سند را نشان داده و تعریف می کند.
تمامی صفحه وب بین دو تگ <html> و <html/> توصیف می شوند.
تمامی متن های بین <body> و <body/> در صفحه وب نمایش داده می شوند.
متن هایی که بین <h1> و <h1/> قرار می گیرند، به صورت عنوان متن نمایش داده می شوند.
متن هایی که بین <p> و <p/> قرار می گیرند، به صورت پاراگراف نمایش داده می شوند.
در مثال بالا <DOCTYPE html!> نمایانگر آن است که نوع سند HTML5 است.
تگ های HTML
تگ های نشانه گذاری HTML را تگ های HTML نیز می نامند.
تگ های HTML کلمات کلیدی هستند که بین دو قلاب احاطه شده اند مانند <html> (به عبارت دیگر نام هر تگ بین دو قلاب قرار می گیرد)
تگ های HTML معمولا به صورت جفت استفاده می شوند. مانند <html> و <html/>
تگ اول را تگ آغازین و تگ دوم را تگ پایانی می نامند. توجه داشته باشید تگ پایانی دقیقا مانند تگ آغازین نوشته می شود ولی با این تفاوت که در تگ پایانی یک / قبل از نام تگ قرار می گیرد.
تگ های آغازین و تگ های پایانی به نام های تگ های بازکننده و تگ های بسته شونده نیز شناخته می شوند.
<tagname>content</tagname>
عناصر HTML
تگ های HTML و همچنین عناصر HTML اغلب برای توصیف یک چیز مشابه به کار می روند. به بیان دقیقتر، یک عنصر HTML شامل تگ های آغازین و تگ های پایانی می باشد.
<p>This is a paragraph.</p>
مرورگرهای وب
هدف یک مرورگر وب (از قبیل گوگل کروم، فایرفاکس، اینترنت اکسپلورر، سافاری ) خواندن اسناد HTML و نمایش سند HTML به عنوان صفحه وب است. تگ های HTML توسط مرورگر وب نمایش داده نمی شود اما توسط تگ ها به توصیف و قالب بندی صفحه وب می پردازد.
ساختار صفحه HTML
<html>
</html> |
ورژن های HTML
از زمان های اولیه وب، ورژن های بسیار HTML وجود داشته است.
| ورژن | سال |
| HTML | ۱۹۹۱ |
| HTML+ | ۱۹۹۳ |
| HTML 2.0 | ۱۹۹۵ |
| HTML 3.2 | ۱۹۹۷ |
| HTML 4.01 | ۱۹۹۹ |
| XHTML 1.0 | ۲۰۰۰ |
| HTML5 | ۲۰۱۲ |
| XHTML5 | ۲۰۱۳ |
توصیف کننده <DOCTYPE!>
توصیف کننده DocType به مرورگر کمک می کند تا صفحه وب را به درستی نمایش دهد.
اسناد بسیار زیادی در وب وجود دارد و یک مرورگر وب زمانی می تواند صفحه HTML را به طور کامل درست نمایش دهد که نوع و ورژن سند HTML صفحه را بفهمد.
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML را می توان با برنامه های حرفه ای مختص ویرایش HTML مانند Adobe Dreamweaver , Microsoft Expression Web , CoffeeCup HTML Editor نوشت. با این حال توصیه می کنیم برای یادگیری HTML از یک ویرایشگر متن ساده مانند Notepad استفاده کنید.
استفاده از یک ویرایشگر متن ساده مانند Notepad، راه بسیار خوبی برای یادگیری HTML به صورت پیشرفته است. برای ساخت اولین صفحه وب خود مراحل زیر را انجام دهید.
مرحله اول: باز کردن Notepad
از مسیر Start=> All Programs => Acessories => Notepad برنامه Notepad را اجرا کنید.
مرحله دوم: ویرایش و ساخت صفحه وب با Notepad
کدهای HTML خود را در Notepad بنویسید.
مرحله سوم: ذخیره کردن با فرمت HTML
از منوی File گزینه Save As… را انتخاب کنید.
در بخش File Name اسم فایل را با پسوند html قرار دهید، برای مثال: webpage.html
در بخش Save As Type روی گزینه All Files کلیک کنید.
در بخش Encoding در صورتی که از حروف فارسی استفاده کرده اید بر روی UTF-8 قرار دهید، در غیر اینصورت پیشفرض آن را انتخاب کنید.
حال در پوشه ای فایل را ذخیره کنید.
مرحله چهارم: اجرا کردن صفحه وب با مرورگر
شما می توانید صفحه وب خود را توسط گزینه Open از منوی File مرورگر باز کنید. اما راحترین کار دابل کلیک روی فایل صفحه وب می باشد.
اگر از مثال های قبل که در رابطه با تگ ها بود، چیزی یاد نگرفته اید، اصلا نگران نباشید! شما در این فصل و فصل های آینده به طور کامل آن ها را یاد خواهید گرفت.
عنوان ها در HTML
عنوان در HTML به ۶ دسته تگ از <h1> تا <h6> تقسیم شده و تعریف می شوند.
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
پاراگراف در HTML
یک پاراگراف با تگ <p> تعریف می شود.
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
لینک ها در HTML
لینک یا رابط دهنده ی صفحات با تگ <a> تعریف می شوند.
<a href="https://tik4.com">This is a link</a>
دقت داشته باشید آدرس صفحه در ویژگی href در تگ a تعریف شده است (در مورد ویژگی تگ ها در آینده صحبت می کنیم)
تصویر در HTML
تصاویر در HTML با تگ <img> تعریف می شوند.
<img src="/foryoucenter.jpg"width="104"height="142">
همانطور که مشاهده می کنید، آدرس عکس، عرض عکس و طول عکس به ترتیب در ویژگی های src و width و height تعریف شده اند.
یک عنصر HTML شامل تگ آغازین و تگ پایانی و تمام کدهای میان آن هاست.
|
تگ آغازین |
محتوای تگ |
تگ پایانی |
|
<p> |
This is a paragraph |
</p> |
|
<a href=”/default.htm”> |
This is a link |
</a> |
|
<br> |
به تگ آغازین، تگ بازکننده و به تگ پایانی، تگ بسته شونده گفته می شود.
مشخصات عنصر HTML
عنصر HTML با یک تگ آغازین (تگ بازکننده) ، شروع می شود. عنصر HTML با یک تگ پایانی (تگ بسته شونده)، پایان می یابد. محتوای عنصر HTML بین دو تگ آغازین و تگ پایانی قرار می گیرد. دقت کنید: برخی عنصرهای HTML محتوا ندارند. عنصرهای بدون محتوا در تگ شروع بسته می شوند. بیشتر عنصرهای HTML دارای ویژگی هایی هستند که در فصل های بعدی به آن ها به طور کامل می پردازیم
عناصر HTML تو در تو
بسیاری از عناصر HTML می توانند درون یک دیگر قرار بگیرند یعنی می توانند عناصر HTML دیگر را در محتوای خود قرار دهند. اسناد HTML شامل عناصر HTML تو در توی بسیاری است.
مثال: یک سند کامل HTML
<!DOCTYPE html> <html> <body> <p>This is my first paragraph.</p> </body> </html>
مثال فوق دارای سه عنصر HTML است.
توضیح مثال فوق:
عنصر <p>
<p>This is my first paragraph</p>
عنصر <p> در سند HTML برای پاراگراف تعریف می شود. این عنصر با تگ <p> آغاز و با تگ <p/> به پایان می رسد. محتوای عنصر “This is my first paragraph” می باشد.
عنصر <body>
<body> <p>This is my first paragraph.</p> </body>
عنصر <body> برای بدنه سند HTML به کار می رود. این عنصر با تگ <body> آغاز و با تگ <body/> پایان می یابد. محتوای این عنصر شامل عنصر <p> نیز می باشد.
عنصر <html>
<html> <body> <p>This is my first paragraph.</p> </body> </html>
عنصر <html> ، سند html را تعریف می کند. این عنصر با تگ <html> آغاز و با تگ <html/> پایان می یابد. محتوای این عنصر، کل عناصر سند HTML را در بر می گیرد.
تگ پایانی را فراموش نکنید!
بعضی از عناصر HTML حتی اگر تگ پایانی نیز فراموش شود قادرند به درستی نمایش داده شوند.
<p>This is a paragraph</p> <p>This is a paragraph</p>
مثال بالا در اکثر مرورگرها به درستی نمایش داده می شود. زیرا تگ پایانی به صورت اختیاری در نظر گرفته شده است. اما به این نکته دقت کنید که بسیاری از عناصر HTML بدون تگ پایانی، نتایج نادرستی را نمایش خواهند داد.
عناصر HTML بدون محتوا عناصر HTML بدون محتوا را عناصر خالی نیز می نامند. تگ <br> یک عنصر خالی است که تگ پایانی ندارد.
نکته: در XHTML و XML باید تمامی تگ ها بسته باشند. برای مثال برای بستن تگ شروع یک عنصر خالی از یک ممیز در داخل تگ استفاده می شود: </ br>
نکته HTML : از حروف کوچک انگلیسی استفاده کنید تگ های HTML به حروف حساس نیستند. <P> با <p> یکی است. بسیاری از وبسایت ها از حروف بزرگ در تگ ها استفاده می کنند. ما توصیه می کنیم بر اساس استانداردهای شبکه ی جهانی (W3C (World Wide Web Consortium از حروف کوچک استفاده کنید زیرا HTML4 و XHTML نیاز به کوچک بودن حروف تاکید می کنند.
ویژگی ها، اطلاعات اضافی را به عناصر HTML می افزایند. در این جلسه مفاهیم اولیه ویژگی ها را به شما آموزش می دهیم.
ویژگی ها چه هستند؟
عناصر HTML می توانند ویژگی هایی را همراه خود داشته باشند.
ویژگی ها، اطلاعات اضافی را به عناصر HTML می افزایند.
ویژگی ها، همیشه در تگ شروع قرار می گیرند.
ویژگی ها به اینصورت تعریف می شوند: اسم=”ارزش”
مثالی از یک ویژگی
همانطور که می دانید لینک ها در HTML با تگ <a> تعریف می شوند. آدرس لینک در ویژگی href قرار گرفته است.
<a href="http://www.w3schools.com">This is a link</a>
ارزش ها باید همیشه در بین دو ” محصور شوند.
معمولا ارزش ها را بین ” قرار می دهند، اما گاهی اوقات اجازه استفاده از علامت ‘ را نیز دارید.
مثال: در بعضی مواقع، خود ارزش ها شامل ” هستند لذا لازم است مقادیر را در بین ‘ قرار دهیم. نام = ‘سایت “طراحی سایت” تیک۴’
نکته: در ویژگی ها از حروف کوچک استفاده کنید.
بسیاری از وبسایت ها از حروف بزرگ در تگ ها استفاده می کنند. ما توصیه می کنیم بر اساس استانداردهای شبکه ی جهانی (W3C (World Wide Web Consortium از حروف کوچک استفاده کنید زیرا HTML4 و XHTML نیاز به کوچک بودن حروف تاکید می کنند.
مرجع کامل ویژگی های عناصر HTML :
فهرست کامل این ویژگی ها در جلسات آینده آموزش داده می شوند. در زیر لیست مهمترین ویژگی ها قرار داده می شوند.
| ویژگی | توضیحات |
| class | وارد کردن کلاس مشخص شده در css به یک عنصر |
| id | تعیین شناسه منحصر به فرد برای یک عنصر |
| style | وارد کردن css به طور مستقیم برای اعمال بر روی عنصر |
| title | قرار دادن اطلاعات اضافی در رابطه با یک عنصر (نمایش در tooltip) |
عنوان ها:
عنوان ها در HTML با <h1> تا <h6> تعریف می شوند و از مهمترین بخش های یک صفحه html می باشند.
<h1> برای مهمترین عنوان به کار می رود در حالی که <h6> برای کم اهمیت ترین عنوان به کار می رود.
توجه: مرورگرها به صورت اتوماتیک یک فاصله خالی قبل و بعد عنوان ایجاد می کنند.
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
عنوان ها مهم هستند!
تگ های عنوان را فقط برای عنوان ها بکار ببرید. برای بزرگ کردن متن به هیچ عنوان از تگ های عنوان استفاده نکنید.
موتورهای جستجو برای index کردن ساختار و محتوای صفحات وب از همین عنوان ها استفاده می کنند. برای همین بهتر است عنوانی که در تگ عنوان قرار گرفته است ساختار و محتوای صفحه را در بر بگیرد
<h1> برای عنوان اصلی استفاده می شود. به دنبال آن <h2> استفاده می شود. سپس برای عنوان کم اهمیتر از <h3> استفاده می شود و غیره.
خطوط در HTML
تگ <hr> یک خط افقی در صفحه وب ایجاد می کند. این عنصر برای جدا کردن مطالب استفاده می شود.
<p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p>
نظرات شخصی در HTML
نظرات شخصی را می توان برای قابل فهم شدن کدنویسی در داخل کدهای HTML قرار داد. این نظرات توسط مرورگرها نادیده گرفته شده و نمایش داده نمی شوند.
نکته: بعد از باز کردن تگ یک علامت تعجب وجود دارد. اما قبل از بسته شدن تگ وجود ندارد!
<!-- This is a comment -->
لیستی از مهمترین تگ های عنوان
در اینجا مهمترین تگ های عنوان را قرار می دهیم. در درس های آینده به صورت کامل آن ها را آموزش می دهیم.
| تگ | توضیحات |
| <html> | سند html را تعریف می کند |
| <body> | محتوای صفحه را تعریف می کند |
| <h1> to <h6> | عنوان های html را تعریف می کند |
| <hr> | یک خط افقی را در صفحه نشان می دهد |
| <–!> | برای یک نظر شخصی در سند html استفاده می شود |
پاراگراف ها در HTML توسط تگ <p> تعریف می شوند. این تگ به صورت صحیح در مثال زیر نمایش داده شده است.
<p>This is a paragraph</p> <p>This is another paragraph</p>
توجه: مرورگرها به طور اتوماتیک یک خط قبل و بعد از هر پاراگراف اضافه می کنند.
تگ پایانی را فراموش نکنید!
بسیاری از مرورگرها پاراگراف ها را حتی بدون تگ پایانی به درستی نمایش می دهند.
<p>This is a paragraph <p>This is another paragraph
مثال بالا در بسیاری از مرورگرها به درستی نمایش داده می شود. با این حال توجه داشته باشید که فراموش کردن تگ پایانی ممکن است خطاهای غیرمنتظره ای در یک صفحه وب به وجود آورد.
توجه: در نسخه های بعدی HTML به شما امکان استفاده نکردن از تگ پایانی را نخواهد داد
فاصله خط در HTML
توسط تگ <br> شما می توانید یک خط جدید را بدون آغاز یک پاراگراف شروع کنید.
<p>This is<br>a para<br>graph with line breaks</p>
تگ <br> یک عنصر خالی است، پس تگ پایانی ندارد.
نکات مفیدی در رابطه با خروجی HTML
شما هیچگاه نمی توانید مطمئن باشید که HTML چگونه نمایش داده می شود. صفحه نمایش بزرگ یا کوچک و تغییر اندازه پنجره ها نیز باعث می شود که نتیجه متفاوتی از HTML را مشاهده کنیم.
توجه کنید که در HTML با اضافه کردن فضاهای خالی و خطوط اضافی نمی توانید خروجی را تغییر دهید.
یک مرورگر فضاهای خالی و خطوط اضافی را هنگامی که صفحه را نمایش می دهد
تگ های پاراگراف در HTML
| تگ ها | توضیحات |
| <p> | برای ایجاد یک پاراگراف به کار می رود |
| <br> | برای قرار دادن یک خط خالی در صفحه به کار می رود |
از تگ های <b> و <i> به ترتیب برای Bold و Italic کردن یک متن در صفحه استفاده و در خروجی نمایش داده می شود.
به این نوع تگ ها، تگ های قالب بندی HTML می گویند که در آخر همین صفحه مرجع کاملی از آن ها را بیان کرده ایم.
توجه: گاهی اوقات <strong> همچون <b> و <em> همچون <i> نمایش داده می شود. درحالی که تفاوتی بسیار بزرگی میان معنای این تگ ها وجود دارد.
<b> فقط برای Bold کردن و <i> فقط برای Italic کردن متن به کار می رود. اما <strong> و <em> برای نشان دادن اهمیت متن می باشد که کاربر به این نکته پی ببرد که متن مهم است. همکنون، تمامی مرورگرهای معروف، <strong> را همچون <b> به صورت Bold و <em> را همچون <i> به صورت Italic نمایش می دهند. با این حال ممکن است روزی مرورگری بخواهد که آن ها را به گونه ای دیگر نمایش دهد، برای مثال برای نشان دادن اهمیت strong کمی آن را سایه دار کند!
مرجع تگ های قالب بندی متن HTML
| تگ ها | توضیحات |
| <b> | برای پر رنگ کردن متن به کار می رود، همان bold |
| <em> | برای تاکید روی متن به کار می رود، غالبا به شکل کج کردن متن نمایش داده می شود، مانند italic |
| <i> | برای کج کردن متن به کار می رود، همان italic |
| <small> | برای کوچکتر متن به کار می رود |
| <strong> | برای مهم نشان دادن متن به کار می رود، غالبا به شکل پررنگ کردن متن به کار می رود، مانند bold |
| <sub> | برای زیرنویس کردن و نمایش اندیس متن به کار می رود |
| <sup> | برای بالانویس کردن و نمایش توان متن به کار می رود |
| <ins> | برای نمایش درج شدن متن به کار می رود |
| <del> | برای خط کشیدن روی متن و حدف کردن ظاهری آن به کار می رود |
تگ های خروجی رایانه HTML
| تگ ها | توضیحات |
| <code> | برای نمایش کدهای رایانه ای به کار می رود |
| <kbd> | برای نمایش متنی که توسط کیبورد تایپ شده به کار می رود |
| <samp> | برای نمایش کدهای نمونه ای رایانه به کار می رود |
| <var> | برای نمایش متغییرها به کار می رود |
| <pre> | برای نمایش متن های قالب بندی شده به کار می رود |
تگ های نقل‌وقول ها و تعاریف
| تگ ها | توضیحات |
| <abbr> | مخفف بودن یک کلمه را نشان می دهد |
| <address> | اطلاعات صاحب سند و نویسنده را معرفی می کند |
| <bdo> | جهت متن را معرفی می کند |
| <blockquote> | برای نمایش یک نقل و قول از یک متن به کار می رود |
| <q> | برای نمایش نقل و قول های درون خطی به کار می رود |
| <cite> | برای معرفی عنوان کار به کار می رود |
| <dfn> | برای نمایش یک عبارت تعریف شده به کار می رود |
در زبان برنامه نویسی تحت وب HTML تگ <a> برای تعریف یک لینک به کار می رود.
یک لینک می تواند یک کلمه، مجموعه ای از کلمات و یا یک عکس باشد که شما می توانید با کلیک روی آن به صفحه ای دیگر منتقل شوید.
موس بر روی یک لینک در صفحه وب به یک دست اشاره گر تبدیل می شود.
مهمترین ویژگی در تگ <a>، ویژگی href می باشد که آدرس صفحه (مقصد لینک) در آن قرار می گیرد.
به طور پیش فرض، لینک هایی که در مرورگرها ظاهر می شوند به صورت زیر می باشند:
لینک هایی که هنوز مشاهده نشده اند: با رنگ آبی و زیرخط دار نمایش داده می شوند.
لینک هایی قبلا مشاهده شده اند: با رنگ بنفش و زیرخط دار نمایش داده می شوند.
لینک هایی که فعال هستند: با رنگ قرمز و زیرخط دار نمایش داده می شوند.
ساختار لینک
کد HTML برای یک لینک ساده به صورت زیر نوشته می شود:
<a href="/url">Link text</a>
ویژگی href، همانطور که در مثال بالا مشاهده می کنید، مقصد لینک را در بر می گیرد.
مثال:
<a href="http://Tik4.com/">Tik4</a>
که به صورت Tik4 نمایش داده می شود. با کلیک روی آن به صفحه اصلی سایت برای تو مراجعه می کنید.
توجه: لینک لزوما روی یک متن قرار نمی گیرد بلکه می تواند روی عکس یا هر عنصر دیگری در HTML قرار گیرد.
و اما ویژگی دیگر و مهمی که در تگ <a> می تواند قرار گیرد، ویژگی target می باشد.
این ویژگی مرورگر را برای باز کردن صفحه در پنجره های خود راهنمایی می کند.
مثال زیر، صفحه اصلی سایت Tik4 را در صفحه جدیدی یا در تب جدیدی باز می کند.
<a href="http://Tik4.com/"target="_blank">Tik4</a>
در صورتی که اگر در مثال بالا ویژگی target حذف شود. صفحه اصلی سایت ForYouCenter در همان صفحه ای که بر روی لینک کلیک شده است باز خواهد شد.
ویژگی دیگر تگ <a>، ویژگی id می باشد. با این ویژگی می توان قسمت های مختلف یک صفحه وب را نشانه گذاری کرد.
با این ویژگی می توان به قسمت های مختلف یک صفحه وب رجوع پیدا کرد.
توجه: نشانه گذاری ها (تگی <a> که به تنهایی دارای ویژگی id می باشد) در هر کجا که باشند برای خواننده صفحه وب نمایش داده نمی شوند.
مثال:
ابتدا درون یک صفحه وب، یک متن را نشانه گذاری می کنیم.
<a id="tips">Useful Tips Section</a>
حال یک لینک درون همان صفحه برای مشاهده Useful Tips Section می سازیم.
<a href="#tips">Visit the Useful Tips Section</a>
و یا می توانید یک لینک به Useful Tips Section از درون صفحه دیگری بدهید.
<a href="https://tik4.com/html_links.htm#tips">Visit the Useful Tips Section</a>
چند نکته ساده
توجه: همیشه سعی کنید در هنگام آدرس دهی، به آخر پوشه های سایت خود یک / اضافه کنید. اگر لینک شما به صورت href=”https://tik4.com/html” باشد، سرور به جای یک درخواست، دو درخواست را باید انجام دهد زیرا ابتدا آخر پوشه یک / اضافه می کند: /href=”https://tik4.com/html” و سپس درخواست دوم یعنی ارجاع به آن صفحه را انجام می دهد. در صورتی که هنگام آدرس دهی، به آخر پوشه از ابتدا / را اضافه می کردید، سرور فقط درخواست ارجاع را انجام می داد و باعث افزایش سرعت و بازدهی کار می شد.
تگ های لینک دهی در HTML
| تگ ها | توضیحات |
| <a> | برای ایجاد لینک در صفحه وب به کار می رود |
عنصر <head> شامل تمام محتویاتیست که مرورگر باید ابتدا آن ها را بارگذاری کند تا صفحه وب را بتواند به درستی نمایش دهد. درون عنصر <head> اسکریپت ها، استایل ها و قالب بندی ها، اطلاعات متاتگ ها و … قرار می گیرند.
توجه: به عبارت ساده تر، تگ های <noscript>, <script>, <link>, <meta>, <style>, <title> و <base> در بخش head قرار می گیرند.
معرفی عنصر <title>
تگ <title> برای عنوان صفحه وب به کار می رود.
تگ <title> در تمام نسخه های HTML/XHTML مورد نیاز است.
در عنصر <title>:
تعریف یک عنوان برای صفحه وب برای نمایش در نوار ابزار مرورگر.
تعریف یک عنوان برای صفحه وب زمانی که در Bookmark (علاقمندی ها) ذخیره می شود.
تعریف یک عنوان برای صفحه وب زمانی که در نتایج جستجو، صفحه وب نمایش داده می شود.
مثالی از یک نمونه صفحه HTML ساده:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document... </body> </html>
معرفی عنصر <base>
این تگ یک آدرس پایه برای کلیه لینک های موجود در صفحه تعیین می کند.
<head> <base href="https://tik4.com/images/" target="_blank"> </head>
با قرار دادن عنصر <base> در بخش head می توان در صفحه وب آدرس دهی های طولانی را به کوچک تغییر داد.
مثال:
می توان به جای آدرس دهی زیر
< img src="https://tik4.com/images/smile.gif" / >
از آدرس دهی زیر استفاده کرد:
< img src="/smile.gif" />
معرفی عنصر <link>
تگ <link> یک رابطه میان یک صفحه وب و یک صفحه کد برقرار می کند. به عبارت ساده تر می توان یک صفحه کد (مثلا CSS) را در صفحه وب فراخوانی کرد.
بیشترین استفاده از تگ <link> برای فراخوانی قالب بندی ها و استایل های CSS است.
<head> <linkrel="stylesheet"type="text/css"href="https://tik4.com/mystyle.css"> </head>
معرفی عنصر <style>
از تگ <style> برای تعریف مستقیم قالب بندی و استایل های CSS یک صفحه وب استفاده می شود. (دیگر در این حالت نیازی به استفاده از تگ link و فراخوانی صفحه کد CSS نداریم) مرورگر توسط این تگ درک می کند که چگونه عناصر صفحه وب را نمایش دهد.
<head>
<styletype="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
معرفی عنصر <meta>
متاها اطلاعاتی در رابطه با داده ها هستند.
متاها اطلاعاتی در مورد صفحه HTML فراهم می کنند.
متاها در صفحه HTML نمایش داده نمی شوند اما برای تجزیه و تحلیل صفحه توسط موتورهای اینترنتی به کار می روند.
متاها معمولا برای تعیین توضیحات صفحه، کلمات کلیدی صفحه، نویسنده مطلب، آخرین ویرایش و از این نظیر استفاده می شوند.
متاها برای مرورگرها (مثلا چگونگی نمایش داده ها و بارگذاری مجدد صفحه)، موتورهای جستجو (مثلا کلمات کلیدی) و دیگرهای سرویس های اینترنتی از این قبیل استفاده می شوند.
متاتگ ها
در اینجا به مهمترین متاتگ ها اشاره ای می کنیم.
تعریف کلمات کلیدی برای موتورهای جستجو:
<meta name="keywords"content="HTML, CSS, XML, XHTML, JavaScript">
تعیین توضیحات صفحه برای سرویس های اینترنتی:
<meta name="description"content="Free Web tutorials on HTML and CSS">
تعیین نویسنده مطلب صفحه:
<meta name="author"content="Amir Hossein">
بارگذاری مجدد صفحه در هر ۳۰ ثانیه:
<meta http-equiv="refresh"content="30">
معرفی عنصر <script>
تگ <script> برای فراخوانی یک صفحه اسکریپت و یا نوشتن مستقیم یک کد اسکریپت در صفحه به کار می رود.
با این تگ در جلسات بعدی بیشتر آشنا خواهید شد.
تگ های مورد استفاده در <head>
| تگ ها | توضیحات |
| <head> | برای تعریف اطلاعات کلی در رابطه با صفحه وب به کار می رود. |
| <title> | برای تعیین عنوان یک صفحه وب به کار می رود. |
| <base> | برای تعیین یک آدرس پایه برای کلیه لینک های موجود در صفحه وب به کار می رود. |
| <link> | برای ارتباط دادن و فراخوانی یک صفحه کد با یک صفحه وب به کار می رود. |
| <meta> | اطلاعاتی در رابطه با صفحه HTML فراهم می کند. |
| <script> | برای ارتباط دادن و فراخوانی کد اسکریپت با یک صفحه وب به کار می رود. |
| <style> | برای تعریف مستقیم قالب بندی ها و استایل های CSS در صفحه وب به کار می رود. |
منبع : w3schools
ترجمه شده توسط تیم تیک۴
دیدگاه خود را بیان کنید