در صفحه های htlm هر متنی که نوشته شود در خروجی نمایش داده می شود اما مرورگر ها کدهای html را شناخته و به صورت اشکال و متون نمایش می دهد.

همان طور که گفته شد بعضی از تگ ها دارای مقدار داخلی و بعضی فاقد آن هستند. تمام کدهای یک صفحه html در بین دو تگ <html> و </html> قرار می گیرد:

محل قرارگیری تگ هایی که در صفحه نمایش داده خواهند شد

در این تگ، دو تگ مهم قرار می گیرند که ساختار کلی صفحه را مشخص می کند:

1- تگ <head> که با </head> بسته می شود:

موضوع اصلی این درس این قسمت است.

در این قسمت از صفحه کدهای به اصطلاح شناسنامه ای صفحه قرار می گیرند. این کدها بین دو تگ <head> و </head> قرار می گیرند.گروهی از این تگ ها که بدون مقدار داخلی هستند به تگ های meta معروفند.ساختار کلی آن به شکل زیر است:

خصوصیت http-equiv می تواند مقادیر مختلفی داشته باشد و خصوصیت content با توجه به آن مقداردهی می شود. به چند نمونه از آن اشاره می کنیم:

Content-Type نوع نوشته ی صفحه ی html را مشخص می کند و همانطور که قبلا گفته شد مقدار Content آن، یعنی text/html; charset=utf-8 مشخص می کند که این نوع مقادیر این صفحه از نوع utf-8 است که مربوط به پشتیبانی از زبان فارسی در صفحه است.

همانطور که مشاهده می کنید در description شما این امکان را دارید تا به طور مختصر سایت خود را معرفی کنید تا در موتور های جست و جو بهتر یافت شود.

این کد یعنی Keywords نیز مربوط به موتورهای جست و جو میباشد. کلمات کلیدی که شما در سایت خود به وفور استفاده کرده اید و می تواند به موضوع سایت مرتبط باشد را در این قسمت نوشته تا موتور های جستجوگر مانند گوگل بتواند محتوای سایت شما را بشناسد. این کلمات را با ویرگول لاتین (کاما) (,) از هم جدا کنید.

برخی اوقات و برخی از وب سایت ها اطلاعاتی را دارا هستند که نیاز به آپدیت شدن در هر چندثانیه یا چند دقیقه می باشد. Refresh این کار را برای شما انجام می دهد و صفحه ی html شما را با مقداری که در content قرار می دهید رفرش می کند. این مقدار با ثانیه داده می شود. مثلا در مثال بالا هر 30 ثانیه صفحه ی ما رفرش می شود.

گزینه ی بعد که جزء تگ های meta نیست، تگ <title> است که عنوان صفحه را مشخص می کند. در مرورگرها این عنوان به خوبی قابل مشاهده است. شکل استفاده از این تگ به صورت زیر است:

خروجی آن در مرورگر:

Html Meta

2- و تگ <body> که با </body> بسته می شود:

محل نمایش متون، تصاویر، لینک ها، جداول و…

از این به بعد تمام کدهایی که آموزش داده خواهند شد در این قسمت قرار خواهند گرفت.

صفات مربوط به تگ <body>:

dir:

نحوه ی نمایش متون، تصاویر و… و چگونگی قرار گرفتن آنها در کنار یکدیگر را مشخص می کند.این صفت شامل 2 مقدار می باشد: rtl و ltr

– راست به چپ یا right to left که مختصرا rtl نامیده می شود.

– چپ به راست یا left to right که مختصرا ltr نامیده می شود.

در صفحه های وب که به صورت فارسی نوشته شده است اغلب از مقدار rtl و راست به چپ استفاده می شود. به جز مواردی که نظم صفحه را به می ریزد که حتما در آینده با آن روبرو خواهید شد. این مقدار را بر روی rtl تنظیم کنید تا نوشته های شما به سمت راست صفحه منتقل شود:

حال دو مقدار rtl و ltr را با هم مقایسه می کنیم:

خروجی:

 

html meta

 

خروجی:

html meta codes

Bgcolor:

این صفت رنگ زمینه صفحه ی html شما را تنظیم می کند. مقدار این صفت به دو حالت قابل تنظیم می باشد:

1-نام رنگ           2- شماره رنگ

مثلا برای رنگ آبی می توان مثال زد:

نام رنگ:blue

شماره رنگ: #0000FF

اگر شما هرکدام از این دو مورد را برای صفت bgcolor تنظیم کنید حاصل یکسان است. تعدادی از این رنگ ها در زیر آمده است:

 

نام رنگ نام لاتین شماره رنگ
آبی Blue #0000FF
آبی تیره Darkblue #00008B
آبی روشن LightBlue #ADD8E6
مشکی Black #000000
سفید White #FFFFFF
قهوه ای Brown #A52A2A
خاکستری Gray #808080
خاکستری تیره Darkgray #A9A9A9
خاکستری روشن Lightgray #D3D3D3
نارنجی Orange #FFA500
نارنجی تیره Darkorange #FF8C00
قرمز Red #FF0000
قرمز تیره Darkred #8B0000
صورتی Pink #FFC0CB
صورتی تیره DeepPink #FF1493
صورتی روشن Lightpink #FFB6C1
سبز Green #008000
سبز تیره Darkgreen #006400
سبز روشن Lightgreen #90EE90
زرد Yellow #FFFF00
زرد تیره YellowGreen #9ACD32
زرد روشن Lightyellow #FFFFE0
نقره ای silver #C0C0C0

 

برای مثال در زیر رنگ زمینه را برابر با lightblue قرار می دهیم:

همان طور که می بینید رنگ زمینه به آبی کم رنگ تبدیل شد:

html meta tags

اگر مقدار lightblue را به شماره رنگ آن یعنی #ADD8E6 تغییر دهیم نتیجه همان می باشد:

Background:

این صفت تصویری را برای پس زمینه صفحه ی html شمل تنظیم می کند. مقدار این صفت تنها آدرس تصویر مورد نظر می باشد. این آدرس می تواند آدرس یک تصویر در اینترنت باشد و یا یک تصویر از روی کامپیوتر شخصی خودتان.

در این مثال تصویر از روی کامپیوتر انتخاب شده است:

دقت کنید که چون فایل تصویر با نام image.jpg در کنار فایل html ما یعنی test.html قرار دارد می توان آدرس را مانند کد این کد تنظیم کرد. در حالی که این کد با کد زیر هیچ تفاوتی ندارد:

و خروجی آن به شکل زیر است: