به کار گیری html و css در طراحی صفحات وب

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

در این مقاله ی آموزشی نقش html و css را در طراحی صفحات وب توضیح خواهیم داد.

نقش html در طراحی سایت؛ مشخص کردن اجزای صفحات وب

این یک اشتباه رایج است که گفته می شود با html، صفحات سایت طراحی می شوند! اما چرا این جمله اشتباه است؟ به خاطر اینکه استفاده از html به تنهایی نمی توان صفحه ای را ایجاد نمود که در نظر کاربر، یک صفحه ی سایت مناسب باشد. بلکه تا هنگامی که کدهای ایجاد شده به وسیله ی html، حداقل با css سبک دهی نشوند، نمی توان صفحات وب با کیفیت و کارآیی مناسب را ایجاد کرد. در حقیقت html به طراحی صفحات وب کمک می کند.

نقش کلیدی html، نشانه گذاری (mark up)، عناصر مختلف صفحات وب می باشد. مانند تعیین بخش هدر (header)، تیترها، منوها، نظرات، دیدگاه ها، سایدبار (sidebar)، فوتر (footer) و …

نکته:

html با محتوای صفحات وب سروکار دارد.

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

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

نکته:

css با ظاهر و چیدمان صفحات وب سروکار دارد.

استفاده از html، به صورت معناگرا

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

1. نحوه ی نشانه گذاری هر عنصر، نشان دهنده ی محتوای آن باشد.
2. نحوه ی نشانه گذاری هر عنصر، بر اساس سبک دهی آن نباشد (نشانه گذاری ها، presentational نباشند.)

برای درک دقیق آنچه گفته شد، به مثال زیر توجه کنید:

[html]<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>[/html]

در مثال فوق، با استفاده از صفت های id، نام هر بخش به صورت معناگرا مشخص شده است: header, sidebar, footer, content بنابر این کاربرد کدهای html بصورت معناگرا کاملا در مثال فوق مشاهده می شود.

حالا به مثال زیر توجه کنید:

[html]<div id="ali-logo"></div>
<div id="left"></div>
<div id="right"></div>
<div id="red-box"></div>[/html]

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

• نام ali-logo به این دلیل مناسب نیست که اسم یک شخص است و بر اساس محتوای آن (که قرار است هدر باشد) نامگذاری نشده است.
• نام های right و left بهیچ وجه مناسب نیستند. چرا که چپ و یا راست بودن عناصر با css تنظیم می شوند. حالا فرض کنید پس از گذشت مدتی بخواهیم جای عناصری که با نام های right و left مشخص کرده ایم را جابجا کنیم. چه اتفاقی می افتد؟ عنصری که نام آن left است، در سمت راست قرار میگیرد و عنصری که نام آن right است در سمت چپ قرار میگیرد!
• نام red-box هم مناسب نیست؛ چرا که مانند نام های right و left بر اساس سبکدهی (presentational) نامگذاری شده است. در حالی که ممکن است بخواهیم بعدا رنگ آن را به آبی، زرد و یا … تغییر بدهیم. واضح است که جالب نیست نام قسمتی قرمز باشد، در حالی که رنگ آن سبز است!

بنابراین همیشه توجه داشته باشید که هنگام استفاده از کدهای html، نامگذاری ها را به صورت معناگرا انجام بدهید.