آموزش گام به گام و تصویری HTML قسمت هفدهم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
عنصر <head> چیست؟
<head> در یک سند HTML وظیفه ی نگه داری از metadata را دارد و بین <html> و <body> قرار می گیرد. metadata یعنی «داده هایی که در مورد داده های دیگر» هستند! به طور مثال وقتی می گوییم «metadata های سند HTML» یعنی اطلاعاتی درباره ی سند HTML (که خود اطلاعات است).(ایران گستر)واضح است که metadata نمایش داده نمی شود و شکل بصری ندارد بلکه مواردی مثل این موارد را شامل می شود:(ایران گستر)
- character set (مواردی مثل UTF-8)
- document title (عنوان سند)
- styles (استایل های CSS)
- محل قرار گیری تگ های link و script
- و دیگر اطلاعاتی که راجع به خودِ سند HTML باشد
بیایید تک تک این موارد را بررسی کنیم.(ایران گستر)
تگ <title>
<title> عنوان و تیتر کل سند را انتخاب می کند و باید در تمام اسناد HTML وجود داشته باشد تا HTML شما غیر معتبر تلقی نشود.(ایران گستر)به عبارت دیگر 3 کار اصلی <title> از این قرار است:(ایران گستر)
- موضوع صفحه ی HTML را در تب مرورگر کاربر نمایش می دهد
- اگر صفحه ای به favorites اضافه شود، عنوان آن همان محتوای
<title>خواهد بود - تگ
<title>همان چیزی است که در موتورهای جست و جو به عنوان لینک سایت شما می آید
به این مثال ساده نگاه کنید:(ایران گستر)
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body dir="rtl">
<p>محتوایbodyدرصفحهیمرورگرنمایشدادهمیشود</p>
<p>محتوایتگtitleنیزدرتبمرورگر،درfavoritesودرموتورهایجستوجوبهنمایشدرمیآید</p>
</body>
</html>
|
همانطور که می بینید این موضوع بسیار ساده بود.
تگ <style>
<style> استایل های CSS را مشخص می کند.ما در دوره ی CSS توضیح میدهیم که کدهای CSS به سه روش اصلی نوشته می شوند:
- به صورت inline (به صورت attribute)
- به صورت internal (در قسمت <head> از سند HTML)
- به صورت external (در یک فایل جداگانه)
در واقع تگ <style> مورد دوم یا internal است. به مثال زیر توجه کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPEhtml>
<html>
<head>
<title>PageTitle</title>
<style>
body {background-color:powderblue;}
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>ThisisaHeading</h1>
<p>Thisisaparagraph.</p>
</body>
</html>
|
استفاده از کدهای CSS به این صورت ایده آل ترین حالت ممکن نیست اما ضربه ی جدی نیز به شما نمی زند. معمولا در یک وب سایت واقعی از آن جا که کدهای CSS بسیار حجیم می شوند مجبور می شوید آن ها را در یک فایل جداگانه (external) بنویسید و سپس با استفاده از link آن ها را به سند HTML متصل کنید. این نوع از نوشتن کدهای CSS معمولا برای مباحث یادگیری و تمرین و یا کدهای CSS خاصی است که برنامه نویس می خواهد در آن قسمت قرار بگیرند.(ایران گستر)
تگ <link>
<link> برای آدرس دهی به یک فایل خارجی استفاده می شود که معمولا جاوا اسکریپت و یا CSS است. با این کار فایل های خارجی خود را به سند HTML متصل کرده و می توانیم از کدهای داخلشان استفاده کنیم.(ایران گستر)|
1
|