روزها

معرفی سایت ها و وبلاگ ها

روزها

معرفی سایت ها و وبلاگ ها

آموزش نکات HTML پیشرفته

آموزش نکات HTML پیشرفته – تگ DOCTYPE
 
 

آیا تا کنون دقت کرده اید که برنامه های ویرایشگر اچتمل مانند دریم ویور و فرانت پیج در ابتدای صفحات ، یک تگ DOCTYPE قبل از تگ html مینویسند که برداشتن آن نیز تاثیر خاصی در صفحه ندارد ؟ 
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


اما کار این تگ چیست ؟ این خط به برنامه مرورگر می فهماند که شما قصد استفاده از HTML نسخه 4 را برای طراحی صفحه وب خود دارید . در صورتی که بخواهید از XHTML جهت طراحی صفحه وب خود استفاده کنید باید کد فوق را کمی تغییر دهید . پس چرا حذف آن تاثیری در صفحه وب ما ندارد ؟ این کد در ایجاد صفحات HTML اختیاری و در صفحات XHTML اجباری است . اگر این تگ را به همراه یک URL در بالای صفحه وب خود اعلان کنید ، سبب میشود که برنامه های مرورگر فعلی ، هنگام باز کردن صفحه شما در مد standards کنار کنند . بدین صورت میتوانید کدهای خود را مطابق استاندارد نوشته و کنترل بیشتری بر چگونگی نمایش این صفحه در برنامه های مرورگر مختلف داشته باشید. در صورت نگذاشتن این کد ، مرورگر از روش های قدیمی تر برای نمایش صفحه شما استفاده می کند . یک مثال عملی :در هنگام تعیین رنگ با شماره های هگزادسیمال ، یک علامت شارپ (#) در ابتدای شماره رنگ قرار میگیرد که حذف آن باعث نادیده گرفتن این رنگ در زمان نمایش صفحه میشود . اما اگر کد DOCTYPE را از ابتدای صفحه پاک کنید ،مرورگرتان از این مورد ایراد نمی گیرد و آن رنگ را نشان میدهد . برای تست این مثال از مرورگر فایرفاکس استفاده کنید . چون مرورگر Internet Explorer بطور معمولی هم از حذف علامت # ایراد نمی گیرد و ممکن است شما فکر کنید علامت # اختیاری است !

 
 

آموزش CSS - طراحی یک سایت بدون استفاده از جدول ها

 

بیایید به روزهای اولیه وب برگردیم . هیچ استانداردی نبود و هر مرورگر هر روز یه تگ جدید معرفی میکرد. بالاخره یه موسسه همه مرورگر ها رو سر یه میز جمع کرد و با هم استانداردی بنام W3C را تصویب کردند . در این زمان نیاز عمده ای حس میشد که محتویات سایت از طراحی جدا شود . در اینجا بود که سر و کله CSS پیدا شد و مسئولیت نمایش نمای صفحات را بعهده گرفت و XHTML نیز برای نمایش اطلاعات بگار گرفته شد .

 

چرا باید بجای جدول از کد CSS استفاده کرد ؟

  • اول اینکه کد شما خیلی کوتاه تر میشه ، حتی نصف !
  • دوم اینکه سرعت لودینگ سایت شما بیشتر میشه .
  • راحت تر تغییر مییابد : شما یک فایل CSS را تغییر می دهید و کل سایت شما تغییر می یابد .
  • مطالب از قالب سایت میشود .

 

در این مقاله شما یاد میگیرید چگونه بجای جداول از CSS وکلاس های آن استفاده کنید .

ساخت کلاسی برای عناصر تگ <div> : اولین قدم ساخت کلاس CSS است که المنت های تگ <DIV> از آن استفاده میکنند . بصورت زیر :

div.leftnav{

 

background: white;

 

color: black;

 

/* other display information here */

 

/* add Positioning information here */

 

}

این کلاس بسیار ساده است و در اصل الان کاری انجام نمیدهد . فقط متن سیاه را روی زمینه سفید تعریف میکند . شما باید از این المنت در جایی از صفحه استفاده کنید .

موقعیت یابی وابسته ساده :

این بدین معناست که ما فقط هر عنصر را در موقعیتش قرار میدهیم و بدین تعریف کردن جای دقیق آن در صفحه .

div.leftnav{

 

background: white;

 

color: black;

 

/* Other display information here */

 

width: 15%;

 

}

خوب . ما چه انجام دادیم ؟ ما گفتیم که هدایتگر چپ باید در سمت چپ باشه ، جاییکه در صفحه قرار میگیرد . این بد نیست ، اما برای انعطاف بیشتر ممکنه شما به موقعیت یابی مطلقی نیاز داشته باشید .  همچنین این خیلی مهمه که بدونین که چیزی که شما تا حالا انجام دادید موقیت نمایی اصلی نیست . تمام چیزی که تعریف کردید Width بود . بنابرین یک المنت با پهنای 15% ساخته خواهد شد .

 

موقعیت نمایی مطلق . اضافه کردن border و margin :

موقعیت نمایی مطلق به معنای این است که شما بگویید دقیقا المنت های شما کجای صفحه ظاهر شوند . اینکار با تعریف خاصیت های top , bottom, left , right امکان پذیر میشود :

div.content{

 

background: white;

 

color: black;

 

position: absolute; /* Says which positioning we are using */

 

left: 17%; /* 17% from the left side of the screen */

 

width: 69%; /* This is the width */

 

}

نکته اینجاست که در کد بالا فقط خاصیت left تعریف شده، این کافیه ! نیازی نیست که شما تمامی تمام خاصیت هایش را تعریف کنید . اما برای انعطاف پذیری بیشتر ممکنه خودتون بخواهید اینکارو بکنید . بطور مثال ممکنه شما بخواهید یک منو در سمت راست اضافه کنید:

div.rightnav{

 

background: white;

 

color: black;

 

position: absolute;

 

left: 83%;

 

width: 10%;

 

top: 80px; /* 80 pixels from the top */

 

}

اساسا در موقعیت نمایی مطلق این المنت ها معانی زیر را دارند:

Left : فاصله از چپ صفحه ، معمولا بر حسب درصد

Right : فاصله از راست صفحه ، معمولا بر حسب درصد

Top: فاصله از بالای صفحه ، معمولا بر حسب پیکسل

Bottom : فاصله از پایین صفحه ، معمولا بر حسب پیکسل

 

نکته اینکه bottom به ندرت استفاده میشود ، اما گاهی لازم میشود . اگر شما از 4 یا 3 تا پراپرتی با هم استفاده کنید ،باید قادر به قرار دادن تگ DIV  در هر کجا که میخواهید باشید  . همچنین در نظر داشتن این نکته مهم است که راه های بیشتری نیز برای موقعیت نمایی یک المنت در کنار موقعیت نمایی مطلق وجود دارد . اما تمام مرورگر های وب آن راه ها را پشتیبانی نمیکنند .

 

افزودن Border :

ممکنه شما بخواهید کمی عناصرصفحه را با لبه کنار صفحه یا هر چیز دیگر فاصله دهید ، border ها برای این امر مناسبند . اما صفحه خود را در مرورگر های مختلف تست کنید تا نتیجه درستی دریافت کنید . و حال طرز ساخت حاشیه ها:

div.rightnav{

 

background: white;

 

color: black;

 

position: absolute;

 

left: 83%;

 

width: 10%;

 

top: 80px; /* 80 pixels from the top */

 

border-color: white; /* Keep the border invisible */

 

border-style: solid; /* It is a solid invisible line which is fine */

 

border-bottom-width: 2px; /* These attributes are pretty self-explanatory */

 

border-top-width: 2px;

 

border-left-width: 3px;

 

border-right-width: 4px;

 

}

افزودن حاشیه یا margin :

Margin ها ابزار های قدرتمندی در سایت های css میباشند .در مقدمه میبینید که شما میتوانید چیزی را بکمک تعیین فاصله درصدی از طرفین margin ها در وسط قرار دهید .

div.content{

 

background: white;

 

color: black;

 

margin-left: 20%; /* 20% from the left side of the screen */

 

margin-right: 20%; /* 20% from the right side of the screen */

 

}

نقصان وجود پشتیبانی مرورگر ها :

پشتیبانی نشدن تمام دستورات css توسط تمامی مرورگر ها مشکلات زیادی را برای طراحان پیش آورده . Mozilla ( و مرورگر های زیر مجموعه آن مانند FireFox ) و Opera بروز رسانی بسیار خوبی در پشتیبانی دستورات css دارند . اما Internet Explorer کمی عقب مانده است . کد هایی که در این مقاله نوشتیم توسط تمامی مرورگر ها پشتیبانی میشود .

 

ناسازگاری بین مرورگر ها :

بیشتر مردم از آخرین نسخه مرورگرها استفاده می کنند. مرورگر های گوناگون کد css  شما را بگونه های مختلف تفسیر میکنند . اصلی ترین مرورگر در این زمینه IE است که ممکنه کد های border را بگونه دیگری نشان دهد .

 

افزودن تگ DIV :

افزودن تگ DIV برای گره زدن تمام اطلاعات بسادگی زیر انجام پذیر است :

<div class = "leftnav">

 

// Insert Links

 

</div>

همانطور که می بینید خیلی ساده اینکار انجام شد و بیشتر کار در فایل CSS انجام میشود . شما میتوانید از تگ DIV در هرجای صفحه استفاده کنید . در انتها اینجا یک صفحه XHTML ساده را می بینید که کد css آنرا سافته و نمای آن سه ستون دارد :

<div class = "content">

 

// Content

 

</div>

 

<div class = "leftnav">

 

// Links

 

</div>

 

<div class = "rightnav">

 

// Links

 

</div>

 

 

متاتگ چیست ؟

 

 

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

 

دو نوع اصلی متاتگ وجود دارد :

این متاتگ باعث میشود که اطلاعات اضافی ای همراه صفحه وب درخواستی شما در http header به مرورگر ارسال شود .  مثلا میتوانید تاریخ انقضای اطلاعات را تعیین کنید یا میتوانید صفحه وب را با یک متا تگ خاص پس از چند ثانیه به صفحه دیگری بفرستید بدون دخالت کاربر !

HTTP-EQUIV

این نوع از متاتگ برای تعیین اطلاعات داخل صفحه وب استفاده میشود که باعث میشود صفحه وب شما با راحتی بیشتری برای موتورهای جستجوگر شناخته شود ... مثلا زبان این صفحه ، نام طراح ، کلمات کلیدی این صفحه و ...

NAME

 

متاتگ ها کجای صفحه وب نوشته میشوند ؟

متاتگ ها را باید داخل تگ head نوشت . در صفحه هایی که از چند فریم درست شده باید در تمام صفحات متاتگ را نوشت.

به مثال های زیر دقت کنید : content در متاتگ کارش معرفی مقداری هست که متاتگ با یکی از دو صفت name  و HTTP-EQUIV  در خود دارد .

 

مثال : NAME="keywords" CONTENT=" persian macromediax dreamweaver">

تگ بالا را یه نگاه کنید . از نوع name است . مقدار name مساوی با keywords است . یعنی این متاتگ کارش شناساندن کلمات کلیدی سایت به موتور های جستجوگر است ... اگر میخواهید موتور های جستجو مانند گوگل سایت شما را بهتر بشناسند این تگ را به قالب سایت یا وبلاگ خود بیفزایید و در جلوی content  کلمات کلیدی سایت خود را بنویسید .


 

مثال : NAME="description" CONTENT=" persian web design center">

تگ بالا کارش افزودن توضیحات سایت شما به موتور های جستجوگر است . اگر این تگ را به وب سایت یا وبلاگ خود اضافه کنید از ماه آینده اگر کسی بصورت تصادفی در گوگل به سایت شما بر بخورد توضیحات داخل این متا تگ را بجای توضیحات میبیند . یعنی گوگل دقیقا از این متاتگ برای ذخیره اطلاعات درباره سایت شما استفاده میکند . پس بکاربردن این متا تگ ها خیلی مهمه !

 

مثال :<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">

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

 

منابع : htmlhelp.com و html-reference.com

و

http://www.macromediax.com

نظرات 0 + ارسال نظر
برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
ایمیل شما بعد از ثبت نمایش داده نخواهد شد