Iran Developers Network » اچ تی ام ال HTML

زبان فارسی در HTML

admin — Sat, 28 Mar 2009 16:38:32 +0000

کنسرسیوم وب (W3C) استانداردهای HTML و CSS را با یک دید کلی به همه زبانها و ملیتها در نظر گرفته است. بخصوص راجع به زبانهای موجود در خاورمیانه که از راست به چپ هستند. زبان فارسی و عربی از جمله این زبانها می باشند. لازم بذکر است که زبان فارسی و چند زبان دیگر مانند اردو و پشتو بعنوان بخشی از زبان عربی در نظر گرفته شده اند. اما این مساله نه تنها سبب عدم بکارگیری فارسی در دنیای اینترنت نیست بلکه دریچه ارزشمندی است که بسوی زبان فارسی گشوده شده است تا بلکه در آینده نگاه مستقلی به این زبان ایجاد گردد. زبان فارسی در استاندارد یونیکد تحت بلوک زبان عربی این استاندارد بخوبی پشتیبانی شده است و امروزه تنها راه بکارگیری زبان فارسی در اینترنت بصورت استاندارد محسوب می شود.

مجموعه مقالاتی که در این زمینه ارائه می گردد با الهام از مقاله ای بنام Authoring HTML for Middle Eastern Content منتشره توسط شرکت مایکروسافت در سال ۲۰۰۱ می باشد. در این مقالات سعی خواهد شد روش های ساخت صفحات وب بصورت فارسی با استفاده از HTML 4.0 و CSS2 بیان گردد.

مجموعه نویسه
جهت نمایش صحیح یک صفحه وب، مرورگر باید نوع مجموعه نویسه ای که در آن صفحه استفاده شده است را بداند. جهت این امر باید نوع مجموعه نویسه در قسمت HEAD صفحه HTML قبلا معرفی شده باشد. برای اینکار از یک تگ META بین تگ های و بصورت زیر استفاده می کنیم:

در حالت فوق مجموعه نویسه صفحه بصورت utf-8 مناسب برای صفحات فارسی بصورت یونیکد تعریف شده است. برای صفحات وب با زبانهای خاورمیانه ای معمولا مجموعه نویسه های زیر را داریم:

iso-8859-1 – ISO Latin-1 standard (no Arabic characters included)
iso-8859-6 – ISO Arabic standard
windows-1252 – Windows 1252 (no Arabic characters included)
windows-1256 – Windows Arabic codepage
asmo-708 – ASMO 708 codepage
dos-720 – Arabic DOS 720 codepage

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

تعیین زبان
با استفاده از مشخصه LANG می توان نوع زبان را برای هر یک از عناصر HTML مانند بدنه، پاراگراف، متن و غیره را مشخص نمود. تعیین این مشخصه می تواند در موارد زیر مفید باشد:

• تشخیص زبان برای موتورهای جستجو
• کمک به مرورگر جهت انتخاب نوع بهتر نمایش شکل نویسه ها
• کمک به مرورگر جهت رعایت علائم و نقطه گذاری، فواصل، اتصال یا جداسازی حروف
• کمک به برنامه های غلط گیر املائی یا انشائی

بعنوان مثال می توان زبان را برای تگ‎های

و بصورت زیر تعریف نمود:

همچنین می توان این عمل را یک بار برای کل صفحه در قسمت HEAD بصورت زیر تعریف نمود:

در عبارت فوق که در قسمت HEAD صفحه HTML می آید با استفاده از علامت fa نوع زبان، فارسی تعریف شده است. توجه داشته باشید که تقدم مشخصه LANG برای هر عنصر HTML از عبارت فوق بالاتر است.

هر زبان علامت یا مجموعه علائم مخصوص به خود را دارد که همه این علائم مشخص شده اند و می توانید استاندارد مربوطه را در [RFC1766] ببینید. بعنوان مثال برای زبان انگلیسی از en و برای عربی از ar استفاده می شود.

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

بهترین راه حل برای حل چنین مشکلی تعیین اندازه فونت برای هر نوع از متون است. بدین منظور برای راحتی کار می توان از CSS استفاده نمود. در مثال زیر دو نوع مدل یکی برای نمایش متون فارسی و دیگری برای نمایش متون انگلیسی تعریف و استفاده شده است.

.سلام اینجا ایران است
Hello, This is Iran.

طرح بندی صفحات فارسی

admin — Sat, 28 Mar 2009 16:36:57 +0000

با استفاده از مشخصه DIR که از کلمه direction مشتق شده است می توان در HTML جهت یا طرح بندی (layout) تگ های HTML را مشخص نمود. بعبارت دیگر مثلا می توان جهت متن را بصورت راست به چپ تعیین نمود. کاربرد این مساله برای زبانهائی است که جهت نوشتار آنها از راست به چپ می باشند مانند زبان فارسی. مساله تعیین جهت در صفحات HTML فارسی از موارد کلیدی و اساسی بحث فارسی وب است.

استاندارد یونیکد جهت نوشتاری زبان ها را پیش بینی کرده است و برای این منظور نویسه های کنترلی خاصی را در نظر گرفته است که براساس یک الگوریتم مشخص طرح بندی مناسب زبان مورد استفاده را مشخص می کنند. این الگوریتم بنام “الگوریتم دو سویه یونیکد” یا Unicode Bidirectional Algorithm شناخته می شود. برخی از این نویسه های مخصوص عبارتند از LRM ،RLM ،RLO و LRO .

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

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

که درون قرار دارد نیز معتبر است یا بعبارت دیگر به ارث برده می شود. همچنین تگ

می تواند مشخصه DIR مختص خود را داشته باشد و بصورت دیگری آن را مقداردهی کند.

استفاده از DIR در یا ؟
براساس تعریف زبان HTML، استفاده از DIR در تگ در کل طرح بندی صفحه اثر می گذارد. این اثرات بشرح زیر است:

• خاصیت Ambient مربوط به شئ های OLE/COM در صفحه به مقدار AMBIENT_RIGHTTOLEFT مقداردهی می گردد.
• از طریق DOM یا Document Object Model می توان جهت صفحه را با استفاده از اسکریپتهای نزد کاربر تغییر داد.
• پنجره های مشتق شده از پنجره اصلی این خاصیت را به ارث می برند.
• در صورت وجود scrollbar عمودی در پنجره، این scrollbarها در سمت چپ صفحه نمایش قرار می گیرند.

استفاده از DIR=RTL در تگ موارد زیر را بهمراه دارد:

• خاصیت Ambient مربوط به اشیاء OLE/COM فعال نخواهد شد.
• امکان تغییر جهت صفحه از طریق DOM میسر نخواهد بود.
• پنجره های مشتق شده و عنوان پنجره تحت تاثیر این مساله قرار نخواهند گرفت.
• محل scrollbar براساس جهت مشخص خواهد شد و نه جهت

ترازبندی (Alignment)
مشخصه DIR در مورد برخی تگ ها بطور خودکار عمل ترازبندی را هم انجام می دهد. بعبارت دیگر هرگاه مشخصه DIR=RTL برای تگهای

استفاده شود، ترازبندی این تگها بصورت پیش فرض از راست خواهد بود و دیگر نیازی به ALIGN=RIGHT نیست.

جدول
قراردادن مشخصه DIR در تگ
بصورت
سبب می شود تا کل طرح بندی جدول از راست به چپ شود. یعنی در حالت عادی (چپ به راست) اگر ستونی در منتها الیه سمت چپ جدول باشد (اولین ستون) در حالت DIR=RTL این ستون در منتها الیه سمت راست جدول نشان داده می شود.
همچنین می توان از DIR برای تگ

استفاده نکرده بلکه از آن برای تگ
استفاده نمود که به نظر می رسد این حالت در طراحی صفحات فارسی مناسبتر است و از سردرگمی برنامه نویس جلوگیری می کند.

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

کنترل های HTML

admin — Tue, 17 Mar 2009 12:49:28 +0000

دریافت اطلاعات ورودی و بررسی کنترل های HTML در ASP.NET

——————————————————————————–
در یک صفحه ASP.NET می توان دو نوع کنترل داشت: کنترل های HTML و کنترل های Web. کنترل های HTML جهت ایفای نقش همان تگ های HTML معمولی طراحی شده اند. بعبارت دیگر اگر یک صفحه HTML معمولی داشته باشیم، با تبدیل تگ های مربوطه به کنترل های HTML می توانیم سریعا آن را به یک صفحه ASP.NET تبدیل کنیم.

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

SimpleHTML.htm

Enter your favorite color:

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

در مثال زیر صفحه فوق به یک صفحه ASP.NET تبدیل شده است.

SimpleASPX.aspx

Enter your favorite color:

همانگونه که مشاهده می کنید چهار تغییر اساسی و مهم نسبت به صفحه HTML مثال قبل صورت گرفته است:

• پسوند فایل به aspx تغییر کرده است.
• مشخصه runat=”server” به همه عناصر فرم موجود اضافه شده است.
• بجای مشخصه name از مشخصه id در تگ استفاده شده است.
• مشخصه های Method و Action از تگ
حذف شده اند زیرا فرم های ASP.NET بصورت پیش فرض به همان صفحه ارسال می شوند و دیگر نیازی به مشخصه های فوق نیست.

اگر مثال فوق را اجرا کنید خواهید دید که پس از ارسال فرم و نمایش مجدد صفحه فوق، رنگ مورد نظرتان در قسمت ورودی همچنان موجود است. بعبارت دیگر برعکس HTML معمولی، کنترل های HTML در ASP.NET مقادیر خود را بصورت خودکار در استفاده های بعدی حفظ می کنند.

آیکونی برای سایت شما

admin — Sat, 07 Mar 2009 14:38:30 +0000

یکی از ویژگی‌هایی که با عرضه نسخه پنجم Internet Explorer به این برنامه اضافه شد، امکان نشان دادن آیکون ویژه هر سایت در منوی Favorites بود. انجام اینکار بسیار ساده است و به هیچ نرم‌افزار خواصی نه در سمت سرور و نه در سمت کاربر نیاز ندارد.

برای Internet Explorer 5 اندازه این آیکون باید ۱۶×۱۶ پیکسل باشد؛ در غیر اینصورت نادیده گرفته خواهد شد. جهت ساختن آیکون میتوانید از برنامه‌های زیادی که در اینترنت برای این کار موجود است استفاده کنید. یکی از بهترین برنامه‌ها در این زمینه برنامه Microangelo است که میتوانید آنرا از سایت www.impactsoftware.com دریافت کنید. برنامه‌های Visual Studio 6 و Visual Studio .NET نیز امکان ساخت و ویرایش آیکون را دارند.

بعد از ساخت آیکون باید آنرا با سایت خود مرتبط کنید. ساده‌ترین راه برای انجام این کار قرار دادن آیکون با نام favicon.ico در دایرکتوری ریشه سایت است. از این پس هر بار که کاربری سایت شما را به لیست Favorites خود اضافه کنید، Internet Explorer به طور خودکار این فایل را از آدرس http://www.mywebsite.com/favicon.ico دریافت کرده و نمایش میدهد.

اما اگر میزبان سایت شما اجازه استفاده از فایلهای ICO. را نمیدهد و مجبورید آیکون خود را روی سایت دیگری قرار دهید و یا اگر میخواهید برای هر صفحه از آیکون متفاوتی استفاده کنید، باید از راه دوم استفاده کنید. در این روش لازم است که خط زیر را به قسمت Head صفحات خود یعنی بین تگهای و اضافه کنید و بجای http://www.mydomain.com/myicon.ico آدرس فایل آیکون خود را قرار دهید.

اکنون هر بار که کاربری سایت شما را به لیست Favorites خود اضافه کند، آیکونی که مشخص کرده‌اید در کنار منوی مربوطه و آدرس سایت در نوار آدرس نشان داده خواهد شد.

ده نکته برای افزایش سرعت بارگزاری صفحات وب

admin — Tue, 17 Feb 2009 08:25:09 +0000

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

۱٫ استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table

CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری می‌شوند:

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

جداول (Tables) در یک مرحله بر روی صفحه به نمایش در می‌آیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمی‌شوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود.

عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا” با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت می‌پذیرد.

بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند.

تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) می‌شود. اما قالب‌های ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار می‌شوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند.

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

برای آشنایی بیشتر با CSS و کارهای جالبی که می توان با آن در یک سایت انجام داد می توانید از آموزشهای خوب و مفید سایت HTML Dog استفاده کنید.

۲٫ از تصاویر برای نمایش متن استفاده نکنید

در اینجا نیز CSS به ما کمک خواهد کرد. در مواردی که کار را می توان با CSS بطور کامل انجام داد از تصاویر استفاده نکنید. به کد زیر دقت کنید:

a:link, a:visited, a:active {
width: 7em;
font: bold 0.8em Georgia;
text-decoration: none;
display: block;
margin-left: 0;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-left: 1px solid #6cf;
border-bottom: 1px solid #068;
border-right: 1px solid #068;
padding: 0.25em 0.5em 0.4em 0.75em;
border-top: 1px solid #6cf;
}

a:hover {
background: #28b;
padding: 0.35em 0.35em 0.25em 0.9em;
border-top: #069;
border-right: #6cf;
border-bottom: #6cf;
border-left: #069;
}

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

۳٫ فراخوانی تصاویر تزیینی بوسیله CSS

با CSS می‌توان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر ۲۰۰×۲۰۰ را می‌توان بصورت زیر نمایش داد:

کد HTML

.pretty-image {
background: url(filename.gif);
width: 200px;
height: 200px
}

کد CSS

در ابتدا شاید این کار بی معنی به نظر برسد اما این کار سرعت بارگذاری و نمایش صفحات را افزایش می‌دهد. بطور کلی مرورگرها تصاویر زمینه را بعد از بقیه اجزا بارگذاری می‌کنند. با استفاده از این تکنیک متن درون صفحه فورا” به نمایش درآمده و کاربر می‌تواند آن را مشاهده و در بین آن گردش کند و در همین هنگام تصاویر با حجم زیاد بارگذاری می‌شوند.

در این روش نمی‌توان از خصوصیت ALT استفاده نمود اگر واقعا” می‌خواهید که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید.

در اینجا spacer.gif یک تصویر ۱×۱ پیکسل شفاف (transparent) است که ۵۰ بایت حجم دارد. در این حالت ابتدا محتوای اصلی بارگذاری می‌شود و بعد از آن تصویر بزرگ و حجیم همراه با خصوصیت ALT بطور کامل بارگذاری می‌شود. دقت داشته باشید که این روش برای نمایش تصاویر تزئینی مناسب می‌باشد نه برای تصاویر حاوی اطلاعات. همچنین کاربرانی که CSS آنها غیر فعال است قادر به مشاهده تصویر (یا متن مربوط به ALT) نمی‌باشند.

۴٫ استفاده از انتخاب کننده‌های (selectors) مناسب

به کد نامناسب زیر توجه کنید:

This is a sentence

This is another sentence

This is yet another sentence

This is one more sentence

.text {
color: #03c;
font-size: 2em
}

به جای اختصاص دادن مقدار به هر پاراگراف، می‌توان همه را در یک تگ
قرار داده و مقدار را به آن اختصاص دهیم:

This is a sentence

This is another sentence

This is yet another sentence

This is one more sentence

.text p {
color: #03c;
font-size: 2em
}

در ابتدا شاید این موضوع زیاد با اهمیت به نظر نرسد اما اگر شما بتوانید از آن بطور صحیح در تمام صفحه استفاده کنید به راحتی ۲۰% از حجم فایل شما کم خواهد شد. همچنین شاید توجه کرده باشید که مقادیر مربوط به رنگها کوتاه‌تر از حالت عادی است. ۰۳c# کوتاه شده مقدار ۰۰۳۳cc# است شما می‌توانید از این روش خلاصه کردن در هر جایی که مقادیر با این فرم قرار دارند استفاده کنید.

۵٫ استفاده از خلاصه نویسی خصوصیات در CSS

در زیر روش خلاصه نویسی بعضی المانهای CSS را مشاهده می‌کنید:

font: 1em/1.5em bold italic serif

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Font

border: 1px black solid

border-width: 1px;
border-color: black;
border-style: solid

Border

background: #fff url(image.gif) no-repeat top left

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Background

margin: 2px 1px 3px 4px (top, right, bottom, left)

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px

Margin

margin: 5em 1em 3em (top, left and right, bottom)

margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em

Margin

margin: 5% 1% (top and bottom, left and right)

margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1%

Margin
این قوانین بطور عملی برای border و padding نیز قابل استفاده است.

۶٫ استفاده از فراخوانی نسبی

سعی کنید از آدرس دهی مطلق پرهیز کنید زیرا فضای بیشتری را اشغال می‌کند و تغییر دادن آنها در آینده مشکل است. یک مثال از فراخوانی مطلق بصورت زیر است:

که بهتر است به این صورت باشد:

.

اما اگر فایل‌ها در فهرست‌های مختلف باشند از خلاصه نویسی‌های زیر استفاده کنید:

دستور فراخوانی

http://www.URL.com/filename.html

a href=”/directory/filename.html”> http://www.URL.com/directory/filename.html

index.html در فهرست جاری

index.html از یک فهرست بالاتر

filename.html از یک فهرست بالاتر

index.html از دو فهرست بالاتر

۸٫ حذف تگ‌های غیر ضروری META و مقادیر درون آن

بسیاری از تگهای META غیر ضروری هستند و کار زیادی انجام نمی‌دهند. در صورت علاقه می‌توانید لیست تگهای META را در این آدرس مشاهده کنید. تگ‌های METAی با اهمیت برای موتورهای جستجو تگ‌های keywords و description هستند. البته استفاده نادرست و بیش از اندازه از آنها به تازگی باعث کاهش اهمیت آنها شده است. در هنگام استفاده از هرکدام از این تگ‌ها سعی کنید حجم محتوای آنها برای هر یک کمتر از ۲۰۰ کاراکتر (حرف) باشد. هر مقداری بیش از این باعث افزایش حجم صفحه شما خواهد شد. متا تگ‌های طولانی برای موتورهای جستجو مناسب نیستند زیرا کلمات کلیدی شما را کم رنگ می‌کنند.

۹٫ انتقال JavaScript و CSS درون صفحه به فایلهای مستقل

برای استفاده از CSS که در فایل خارجی قرار دارد از کد زیر استفاده کنید:

و برای استفاده از JavaScript که در فایل خارجی قرار دارد از کد زیر استفاده کنید:

هر فایل خارجی یک بار فراخوانی شده و بعد از آن در کامپیوتر کاربر (برای استفاده‌های بعدی) ذخیره می‌شود. بجای قرار دادن JavaScript و CSS در تک تک صفحات HTML آنها را برای یک بار در یک فایل خارجی قرار دهید و از آن درون صفحات استفاده کنید. فراموش نکنید که هیچ محدودیتی برای استفاده از این فایل‌های خارجی وجود ندارد. برای مثال بجای ساختن یک فایل CSS بزرگ، یک فایل برای قسمتهای یکسان در تمام صفحات و چند فایل هم برای قسمت‌هایی که در صفحات خاص استفاده می‌شوند بسازید.

۱۰٫ استفاده از / در انتهای آدرس فهرست‌ها:

بجای استفاده از این کد:

link

از کد زیر استفاده کنید:

link

زیرا اگر از / در انتهای آدرس استفاده نکنید سرور متوجه نخواهد شد که اشاره به فایل شده یا فهرست. اما با اضافه کردن / سرور فورا” متوجه می‌شود که به یک فهرست اشاره شده و آنرا نمایش می‌دهد.

CSS و کاربرد آن در طرح های امروزی

admin — Tue, 20 Jan 2009 17:16:08 +0000

cssجایگزینی برای نمایش مبتنی بر HTML پیشنهاد می کند و اکنون به وسیله ی انجمن طراحی وب پذیرفته شده است . سازگاری css نیازمند برخی تغییرات از سوی تولید کنندگان وب است . css بسیار حساس به نحو دستوری است ، و اشتباهات کوچک می توند باعث شکست کامل یک قانون css شود . بنابراین ، طراحان باید از مشخصات آن آگاه باشند .

متاسفانه ، حتی اگر از قوانین پیروی کنید ، خطاهای آشکاری در پیاده سازی مرورگرهای پیشرفته وجود دارد . چیزهای زیادی وجود دارد که باید درباره ی CSS بدانید ، و امکانات جدید هر لحظه اضافه می شود . CSS1 تعیین اولین شیوه نامه ، بیش از ۵۰ خاصیت را تعریف می کند ، و CSS2 بیش از ۵۰ خاصیت دیگر را . CSS2 تسهیلات تغییر مکان که CSS-P نامیده می شود را به وجود آورده است . نگارش جدید که CSS3 نام دارد قصد دارد امکانات ارائه بیشتری را به وجود آورد ، و با فناوری های دیگر ، نطیر اسکریپت و گرافیک های برداری ، بیشتر یکپارچه شود .

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

هر چند واضح است که می خواهیم به برچسب های منطقی معنی بدهیم ، ولی مواظب باشید که این به شما مجوز نمی دهد از CSS به جای کد HTML استفاده کنید . قوانینی که ارائه محدود برخی برچسب ها را تغییر می دهند نباید به کار روند . برای مثال در اینجا باعث می شویم که برچسب های <b> به طور غیر معمولی عمل کنند و تمام اشکال تزئینی پیوندها را حذف نمایند :

b {font-style:italic; font-weight:normal;}
a {text-decoration:none; color: black; }

( اگر به دلیل خاصی این قوانین را بازنویسی کرده اید ، حتما باید آن ها را توضیح گذاری کنید ) به خاطر مشکل معنای پیش فرض در HTML ، شاید برچسب های <div> و <span> فوق العاده مفید باشند . هم چنین برچسب <div> یک برچسب بلوکی است که هیچ نمایش پیش فرضی ندارد ، بنابراین در حالت دهی به بخش های بزرگ یک سند مفید است . برای مثال :

<div style=”background: lightblue; font-weight: bold; color: black;”>
<p>This Paragraph is highlighted in blue.p>
div>

به طور مشابه برچسپ <span> هیچ معنی یا نمایش از پیش تعریف شده ایی ندارد ، ولی وقتی یک برچسب هیچ کاراکتر بازگشت به ابتدای خط ( carriage return ) را نداشته باشد ، هنگام الصاق اطلاعات سبک به چند کلمه یا حرف ، مفید به نظر می آید ، مانند مثال زیر :

<p>Calling out<span style=”background-color:#99CC00; font-weight:bold; color:#000000“>span>isn’t hard with SPANp>

روش های متفاوتی برای اضافه کردن CSS به سند HTML وجود دارد ، و همه آن ها داری مزایا و معایبی است که قبل از اینکه روشی در نظر گرفته شود باید به دقت سبک و سنگین شود . ابتدا می توانید در بخش سر صفحه ی یک سند HTML با مشخص ساختن رابطه پیوندی به یک شیوه نامه ی خارجی ، به آن متصل شوید . برای مثال :

<link rel=”stylesheet” href=”styles/global.css” media=”screen” />

روش دوم برای اضافه کردن CSS ، نهفته کردن آن است . وقتی یک شیوه نامه نهفته می شود ، قوانین شیوه نامه را به طور مستقیم درون سند HTML بنویسید . شیوه نامه ی گسترده شدن درون سند ( document-wide style ) یک راه بسیار ساده برای شروع استفاده از CSS است . یک برچسب <style> درون سر صفحه ی سند HTML قرار دهید . به دلیل اینکه چند شکل از شیوه نامه ها ممکن است اضافه شود ( فراتر از شکل استاندارد CSS ) باید هنوز هم صفت type را اضافه کنید تا نشان دهید که کدام شکل از شیوه نامه را به کار می برید ، البته صرفنظر از پشتیبانی پیش فرض مرورگر از فناوری های شیوه نامه ها . به مثال های زیر توجه کنید :

شیوه نامه گسترده درون برجسب استایل

<style type=”text/css“>
body {background-color:#666666; font-size:9px; }
h1 {color:#990000;}
style>

شیوه نامه پیوندی درون برجسب استایل

<style type=”text/css“>
@import url( wp-layout.css );
style>

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

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

آخرین روش به کار بردن CSS اعمال آن درون مولفه های ویژه با استفاده از صفت رایج style است . نیازی نیست که این گونه اطلاعات مربوط به شیوه نامه ها از مرورگرهایی که نسبت به شیوه نامه ها اطلاعی ندارند مخفی شود ، زیرا مرورگرها صفاتی که نمی فهمند را در نظر نمی گیرند . به مثال زیر توجه کنید :

<p style=”color:#3366FF; font-size:12px;”>This is red blue text!p>

ولی بسیاری از مزایای اصلی استفاده از CSS به این روش به دست نمی آید . زیرا CSS خیلی به برچسب وابسته هستند . در واقع ، همه توافق دارند که این شیوه خیلی بهتر از به کاربردن برچسب های جدید جهت تشریح ظاهر صفحه نمی باشد . ولی برخی از طراحان از CSS به این روش استفاده می کنند تا از کد HTML قدیمی به CSS پلی بزنند .

رنگ ScrollBar صفحه سایت خود را عوض کنید

admin — Tue, 20 Jan 2009 17:15:00 +0000

برای اینکه رنگ ScrollBar صفحه سایت خود را عوض کنید کافی است کد زیر را در ابتدای برنامه خود اضافه کنید. (تقریبا بعد از تگ )

خب یک توضیحی در مورد این سورس بدم…

اول اینکه این چند خط کد از دستورات CSS‌پیروی میکنه که در تگ Style قرار گرفته است.

Scrollbar-face-color: در این قسمت رنگ اصلی اسکرول را تعیین می کنید.

Scrollbar-shadow-color: در این قسمت رنگ سایه اسکرول را مشخص می کنید (خط موجود در سمت راست و پایین اسکرول)

Scrollbar-highlight-color: در این قسمت رنگ قسمت روشن اسکرول را مشخص می کنید (خط موجود در سمت چپ و بالای اسکرول)

Scrollbar-3dhigh-color: این پارامتر رنگ بوردر (خط) دور اسکرول را مشخص می کند. (خط کلی در دور تا دور اسکرول)

Scrollbar-darkshadow-color: خط دوم سایه اسکرول را مشخص می کند . (این خط بر روی خط سایه که در سمت راست و بالای اسکرول است قرار میگیرد)

Scrollbar-track-color: این قسمت رنگ زمینه اسکرول را مشخص می کند.

Scrollbar-arrow-color: رنگ فلش های موجود در کلیدهای بالا و پایین اسکرول را تغییر می دهد.

صفحات دو ستونی در CSS

admin — Tue, 20 Jan 2009 17:13:53 +0000

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

در قسمت کناری صفحه اغلب کدهای javascript برای استفاده از سرویسهای سایتهای مختلف (مثل سایتهای اندازه گیری بازدیدکنندگان یا سایت blogrolling برای لینکهای سایت) وجود دارد به همین خاطر کار لود شدن آن قسمت مدت به نسبت زیادی را به خود اختصاص میدهد. به همین دلیل در صورت قرار گیری این بخش در قسمت بالاتر صفحه کار لود شدن نوشته های اصلی صفحه به تعویق خواهد افتاد.

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

برای قرار دادن بخش اصلی در ابتدای صفحه تگ DIV مربوط به بخش اصلی را در ابتدا و تگ DIV مربوط به بخش کناری را بعد از آن قرار دهید. سپس خصوصیت float مربوط به style بخش اصلی را تایین کنید. مثال:

Page contents here

Page Side Contents

استایل (CSS) چیست؟

admin — Tue, 20 Jan 2009 17:12:16 +0000

استایل (CSS) چیست؟
- CSS مخفف کلمه Cascading Style Sheets میباشند.
- اولین ورژن استایلها در سال ۱۹۹۶ ساخته شد. که اولین ورژن آن CSS1 بود.
- دیگر وژن آن CSS2 می باشد که در سال ۱۹۹۸ ساخته شد که بیشتر برای ویرایش صفحات، نحوه نمایشها تگها و … کاربرد دارد.
- فایل استایلها با فرمت CSS ذخیره میشوند.

انواع استایلها:
همانطوری که قبلا نوشتم استایلها بر سه نوع میباشند:
۱. Inline Style: این نوع استایل در داخل تگهای HTML به کار گرفته میشوند، و این استایل فقط بروی همان تگ به خصوص تاثیر خواهد گذاشت و به صورت زیر نوشته خواهد شد.

Example:

This is a paragraph

در مثال بالا با استفاده از حالتهای مختلف در استایلها نوع فونت آنرا تغییر دادیم و همانطوری که در تعریف این نوع استایل نوشتم این استایل فقط و فقط تغییرات را بروی همین پاراگراف اعمال خواهد کرد.

۲. Embedded or Global Style: در این نوع، استایل نوشته شده در تمامی صفحه تاثیر خواهد گذاشت، اینرا بین دو تگ () به صورت زیر نوشته خواهد شد.

Example:

این نوع حالت از تغییرات تعریف شده بروی تمامی تگها پاراگراف اعمال خواهد شد که رنگ متن: قرمز، جهت متن: چپ، و اندازه فونت ۸ پوینت خواهد بود. توجه داشته باشید در این مثال سه حالت مختلف یک استایل را برای تگ پاراگراف تعریف کردیم که با استفاده از (;) حالتهای مختلف آن از هم جدا شدند.
اگر بخواهید این حالت نوشته شده را برای چند تگ دیگر اعمال کنید می توانید تگها را بااستفاده از کاما (,) از هم جدا کنید برای مثال:

h1, h2, h3, h4 { color: gold; font-family: sans-serif }

۳. Linked or External style sheet: نوع آخر هم معروف به استایلهای خارجی هستند که به صورت لینک فایل استایل را به صفحات خود لینک میدهید. فایلهای استایل با فرمت CSS ذخیره میشوند و به صورت زیر به صفحات لینک داده میشود.

Example:

در این نوع از استایلها بعد از اینکه فایل استایل خود را آماده کردید آنرا با فرمت CSS ذخیره کرده و آنرا همانند بالا فایل استایل را به قالب لینک می کنیم. برای راحت بود در کار می توانید ابتدا استایلها را به صورت Internal استفاده کرده و بعد از اینکه کارتان تمام شد کدهای نوشته شده بین دو تگ () را در نت پد کپی کرده و آنرا با فرمت CSS دخیره کرده و سپس با استفاده از فرمول بالا آن فایل را به قالب لینک دهید.
یکی از مزیتهای این نوع استایل این میباشد که می توانید با داشتن یک فایل استایل برای چندین صفحه استفاده کنید و از دیگر مزیت های آن با این کار کدهای قالب را به چند فایل تقسیم کرده و قالب را منظم تر میشود.

انواع استایل ها

admin — Tue, 20 Jan 2009 17:11:23 +0000

استایلها CSS (Cascading style sheet) بر سه نوع هستند.
۱. Inline Style: این نوع استایل در داخل تگهای HTML به کار گرفته میشوند، و این استایل فقط بروی همان تگ به خصوص تاثیر خواهد گذاشت و به صورت زیر نوشته خواهد شد:

Style declarations: حالتهای و نوع استایلهای هستش.

برای مثال:

Bolghan Tools

Bolghan Tools

۲. Embedded or Global Style: در این نوع، استایل نوشته شده در تمامی صفحه تاثیر خواهد گذاشت، اینرا بین دو تگ () به صورت زیر نوشته خواهد شد.

برای مثال:

۳. Linked or External style sheet: نوع آخر هم معروف به استایلهای خارجی هستند که به صورت لینک فایل استایل را به صفحات خود لینک میدهید. فایلهای استایل با فرمت CSS ذخیره میشوند و به صورت زیر به صفحات لینک داده میشود.

URL: آدرس فایل استایل | Relation type: برابر با stylesheet هست | link type: هم با text/css برابر میباشد.

برای مثال: