طراحی وب سایت

 همه طراحان بزرگ به طور مداوم در حال بهبود مهارت ها و کسب تجربه هاي جديدتر هستند. هرگز يک طراح موفق و يا هر کس ديگري که به صورت حرفه اي روي کاري خاص فعاليت مي کند ، نگفته است که ” تا همين جا کافي است “.

برای شروع کار با HTML شما به چیزهایی نیاز دارید که در لیست زیر آمده است:

شما به یک ویرایشگر متن نیاز دارید. در ویندوز شما می توانید از برنامه Notepad استفاده کنید. از هر نرم افزار ویرایش متن دیگری استفاده کنید اما این نکته را در نظر داشته باشید که نرم افزار WordPad که در ویندوز وجود دارد و نرم افزارهایی مانند Microsoft Office Word و امثال آن برای نوشتن کدهای HTML مناسب نیستند چون در هنگام ذخیره کردن متن این نرم افزارها کدهایی طراحی وب سایت را به آن اضافه می کنند.

نرم افزار Notepad را می توانید از طریق منوی استارت در قسمت Accessories پیدا کنید یا از طریق فرمان Run با تایپ notepad در کادر Open و فشار دادن دکمه Enter.

شما به یک مرورگر طراحی وب سایت به انتخاب خود نیاز دارید. می توانید از Microsoft Inteet Explorer استفاده کنید که با ویندوز نصب می شود یا از Opera, Mozilla Firefox و نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند.

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

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

برای ذخیره کردن فایلی که با Notepad نوشته اید کافی است از منوی File گزینه Save As را انتخاب کرده و مسیری را برای ذخیره فایل انتخاب کنید و در کادر File Name در پایین پنجره Save As نام فایل را با پسوند html بنویسید. در آخر هم دکمه Save را کلیک کنید.

ساخت اولين صفحه   طراحی وب سايت

زبان HTML از تعداد زيادي تگ تشکيل مي شود. هر يک از اين تگ ها داراي ويژگي هايي نيز مي باشند. اين تگ ها تعيين مي کنند که يک صفحه چگونه بايد در مرورگر براي کاربري که از طريق اينترنت آن را مشاهده مي کند، نمايش داده شود. هر تگ در داخل < > قرار مي گيرد. تعداد زيادي از تگ هاي  HTML داراي تگ شروع و تگ پايان هستند.

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

< HTML> معروف ترين و ساده ترين تگ در زبان HTML است. تمام دستورات و تگ هاي HTML بايد بين  HTML و   / HTMLقرار گيرد.

تگ   HEAD  بايد بلافاصله بعد از تگ    HTMLقرار گيرد. اين تگ بايد با تگ   HEAD خاتمه يابد.  به طور کلي هر صفح? HTML از دو قسمت HEAD و BODY تشکيل مي گردد. در بخش HEAD برخي ويژگي هاي صفحه مانند عنوان آن تعيين مي شود. مهمترين تگي که در داخل  HEAD قرار مي گيرد، تگ  TITLE  نيز با تگ  TITLE  خاتمه مي يابد. عنوان يک صفحه، توضيحي در مورد صفحه است که در نوار عنوان مرورگر ظاهر مي شود.

توجه: توضيحي که براي عنوان يک صفحه قرار مي گيرد، فقط مي تواند شامل حروف و اعداد باشد.

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

نکته: هر چند تگ هاي  HTML ، HEAD و  BODY ، اختياري هستند، ولي توصيه مي شود حتماً از آنها استفاده نماييد.

مثال :

آموزش طراحي وب سايت - مقدماتي - قسمت دوم

مشاهد? صفحه در مرورگر

براي مشاهد? صفحه اي که ساخته ايد، از يک مرورگر مانند IE و يا Netscape استفاده نماييد. اين کار باعث مي شود تا درستي صفحهش طراحی وب سايت خود را در اينترنت بررسي نماييد. مرورگر، صفح? حاوي کدهاي HTML را خوانده و تگ هاي آن را تفسير نموده و آن را به نمايش در مي آورد. با توجه به اينکه مرورگرهاي مختلف ممکن است صفح? شما را به طرق مختلفي تفسير نموده و نمايش دهند. بهتر است آن را در مرورگرهاي ديگر نيز مشاهده نماييد.

براي مشاهد? صفحه در IE دو روش زير وجود دارد، که به طور مشابه در مرورگرهاي ديگر نيز قابل انجام است.

روش اول: آدرس کامل صفح? وبي که ساخته ايد را در نوارد آدرس تايپ نماييد و کليد Enter را فشار دهيد. به عنوان مثال اگر صفح? خود را در پوش? WebSite از درايو C با نام Index.htm ذخيره نموده ايد، آدرس C:/WebSite/Index.htm را در نوار آدرس تايپ نماييد.

روش دوم: از منوي File ، گزينه Open را انتخاب نموده و از فرمي که ظاهر مي شود دکم? Browse را کليک نماييد. سپس از کادر محاوره Open فايل موردنظر را پيدا نماييد و دکمه Open از اين کادر محاوره اي را کليک نماييد. پس از انتخاب فايل، دکم? OK را کليک نماييد.

شروع يک پاراگراف جديد

يک پاراگراف، متني شامل يک يا چند سطر است، که مفهوم تقريباً مستقلي دارد و از سطر جديدي شروع مي شود. در اغلب طراحی وب سايت  معمولاً از متون و پاراگراف ها بسيار استفاده مي شود. در صورتي که شما در نوشتن پاراگراف خود از کليد Enter براي رفتن به سطر جديد استفاده نماييد، معمولاً اغلب مرورگرها آن را ناديده مي گيرند. در HTML براي شروع يک پاراگراف جديد، بايد متن مورد نظر را در بين تگ هاي باز و بسته يP  و /P  قرار داد. براي ترازکردن پاراگراف، بايد از ويژگي ALIGN اين تگ استفاده نماييد.

مثال:

ايجاد پاراگراف به صورت چپ چين

P     ALIGN=¢¢left¢¢

پاراگراف موردنظر  

تگ باز و بسته  /P

نکته: مقدار ويژگي ALIGN مي تواند يکي از مقادير زير باشد:

    Left : چپ چين

    Right : راست چين

    Center : وسط چين

    Justify : تراز از راست به چپ

نکته: وجود تگ    /P    براي پايان پاراگراف، اختياري است، ولي در صورتي که بخواهيد بعداً از شيو? نامه (CSS) استفاده نماييد، وجود آن ضروري است.

مثال :

آموزش طراحی وب سايت  - مقدماتي - قسمت دوم

شروع يک سطر جديد

براي شروع يک سطر جديد، بايد از تگ  BR استفاده نمود. نام اين تگ از کلم? Break به معناي شکستن گرفته شده است. به اين معني که هر متني که بعد از  BR  قرار بگيرد، شکسته شده و در سطر جديد قرار مي گيرد. اين تگ برخلاف تگ هاي ديگري که تا اينجا آموختيد، تگ پايان ندارد.

مثال :

آموزش طراحی وب سايت  - مقدماتي - قسمت دوم

اين تگ در مواردي که بخواهيد يک سطر خالي ايجاد کنيد، نيز کاربرد دارد. براي اين منظور بايد آن را به تنهايي استفاده کنيد.

نکته: اغلب مرورگرها، فضاهاي خالي درج شده در هنگام تايپ نمودن کد HTML در ويرايشگر را ناديده مي گيرند براي در فضاي خالي[1] بايد از   در متن HTML استفاده نمود.

نکته: در صورتي که مي خواهيد مرورگر فضاهاي خالي درج شده در کد HTML صفحه را در نظر بگيرد، بايد متن موردنظر را در بين تگ هاي باز و بسته  PRE و /PRE  قرار دهيد.

ايجاد سرتيتر (Heading)

سرتيترها عناويني از يک صفحه هستند که باعث وضوح بيشتر صفحه شده و موجب مي شوند کاربر سريع تر به اطلاعات خود دست يابد. سرتيترها به صورت Bold نمايش داده مي شوند.

شش سطح از سرتيترها در HTML وجود دارند که با H6,H5,H4,H3,H2,H1 بيان مي شوند. تگ H درشت ترين و تگ H6 ريزترين سرتيتر است. اين تگ ها داراي تگ پايان نيز مي باشند. متني که مي خودهيد به عنوان سرتيتر ظاهر شود را مثلاً براي درشت ترين اندازه در بين تگ هاي H1و /H1 قرار دهيد. همين طور براي اندازه هاي ديگر از تگ مناسب آن استفاده نماييد.

مثال :

آموزش طراحی وب سايت - مقدماتي - قسمت دوم

نکته: مرورگرها معمولاً به طور پيش فرض، سرتيتر را به صورت چپ چين نمايش مي دهند. براي تغيير تراز سرتيتر بايد از ويژگي ALIGN آن استفاده کرد. اين ويژگي مي تواند داراي مقادير  left, right, center باشد.

پيش فرمت کردن متن (PreFormat)

همان طور که قبلاً اشاره شد، معمولاً مرورگرها فاصله هاي درج شده در متن را ناديده مي گيرند. تگ PRE باعث مي شود مرورگر هر متني که بين PREو   /PRE  قرار دارد را از اين قاعده مستثني نمايد. به عبارت ديگر در اين مورد مرورگر فواصل درج شده در متن را در نظر مي گيرد. هنگامي که شما متني را پيش فرمت مي نماييد، در مرورگر در هنگام نمايش آن، علاوه بر لحاظ نمودن فواصل موجود در متن، حتي براي تنظيم متن با انداز? پنجر? مرورگر، عمل wrapping نيز انجام نمي دهد. در اين مورد خود برنامه نويس بايد فواصل را به طور مناسب تنظيم نمايد. يکي ديگر از فوايد اين تگ، ايجاد جدول هاي ساده در متن بدون استفاده از تگ TABLE مي باشد. با توجه به عمل پيش فرمت، فواصل موجود بين ستون هاي جدول طراحی وب سايت در مرورگر به خوبي نمايش مي يابد.

مثال :

طراحی وب سايت - مقدماتي - قسمت دوم

افزودن توضيحات (Comments)

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

براي اضافه کردن توضيحات بايد آنها را در بين علائم و --> قرار دارد. مرورگر هر متني که در بين اين دو علامت قرار داشته باشد را ناديده مي گيرد.

مثال :

آموزش طراحي وب سايت - مقدماتي - قسمت دوم

نکته: در مواردي که برنامه نويسان طراحی وب سايت از کدهاي جاوا اسکريپ در بين کدهاي HTML استفاده مي کنند ولي با مرورگري سروکار دارند که کدهاي جاوا اسکريپت را پشتيباني نمي کند، نمي توانند براي پنهان کردن اين کدها از ديد مرورگر، آنها را به توضيحات تبديل نمايند.

درج کاراکترهاي ويژه

در HTML استاندارد مي توان کاراکترهاي ويژه اي که بر روي صفحه کليد وجود ندارند را جهت نمايش در مرورگر، درج نمود. هر کاراکتر کد اسکي منحصر به فردي است. براي درج يک کاراکتر خاص در متن، بايد از علامت &#?; استفاده کرد. به جاي ? کد اسکي آن کاراکتر قرار مي گيرد. همچنين هر کاراکتر در HTML داراي نام مشخصي است که در صورت دانستن نام آن مي توان از علامت &?; استفاده نمود. به جاي ? بايد نام کاراکتر ويژه را قرار داد.

مثال: درج کاراکتر ? با کد اسکي 169 (نام معادل آن © است.)

© Microsoft Corporation

يا به صورت زير:

&#copy; Microsoft Corporation

که خروجي آن در مرورگر به صورت زير است:

? Microsoft Corporation

نکته: براي يافتن کد کاراکترهاي ويژه مي توانيد از جدول هاي اسکي در انتهاي برخي کتاب ها و يا از واژه پرداز Word از طريق منوي Insert گزين? Symbol استفاده نماييد.

توجه: کاراکترهاي &,‘‘,>,< از ديد HTML جزء کاراکترهاي ويژه محسوب مي گردند، چون هر يک از آنها جزء کلمات کليدي در HTML هستند. مثلاً علائم <> براي تگ هاي HTML استفاده مي شوند. در صورتي که مي خواهيد از آنها استفاده ديگري بنماييد، بايد آنها را به صورت فوق درج نماييد، لازم به ذکر است که کد اين کاراکترها به ترتيب برابر 38, 34, 62, 60 و معادل اسمي آنها به ترتيب برابر کلمات & , " , > , < است.

ويژگي هاي عام در HTML

قبل از اينکه اين فصل را به پايان ببريم، بد نيست نگاهي به چند ويژگي عمومي که تقريباً در تمام تگ هاي HTML قابل استفاده هستند، بيندازيم. اين ويژگي ها شامل ID ، CLASS ، STYLE و TITLE هستند.

ويژگي ID

اين ويژگي يک شناس? يکتا به دستوري از HTML نسبت مي دهد. از اين شناسه در ارجاع هاي بعدي به اين دستور استفاده مي شود. نامي که براي شناسه انتخاب مي شود، بايد ترکيبي از حروف و ارقام باشد، به طوري که با رقم شروع نشود. يکي از کاربردهاي ID در شيوه نامه ها است که بعداً در مورد آن بيشتر صحبت خواهيم کرد.

ويژگي CLASS

اين ويژگي، نام کلاسي است که اين دستور از HTML به آن کلاس تعلق دارد را تعيين مي کند. اين ويژگي باعث مي شود که بتوانيم مجموعه اي از دستورات طراحی وب سايت HTML را به دلخواه انتخاب نموده و آنها را در يک کلاس مشخص قرار دهيم. بعداً مي توانيم براي تمام دستوراتي که متعلق به اين کلاس هستند، عمل معيني را انجام دهيم، يک کاربرد اين ويژگي در شيوه نامه ها است.

ويژگي STYLE

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

ويژگي TITLE

اين ويژگي براي ايجاد متن توضيحي[2] براي يک عنصر HTML به کار مي رود. وقتي نشانگر ماوس در مروگر بر روي اين عناصر قرار گيرد، اين متن توضيحي براي راهنمايي کاربر، نمايان مي شود.

خلاصه ي جلسه :

در اين فصل به طور مقدماتي با مباني طراحی وب سايت HTML آشنا شديد و برخي تگ هاي آن را ياد گرفتيد.  HTML  ، معروف ترين تگ در زبان HTML است. تمام دستورات و تگ هاي HTML بايد بين   HTML  و    /HTM  قرار گيرد. تگ  HEAD  بايد بلافاصله بعد از تگ  HTML  قرار گيرد. اين تگ بايد با تگ  /HEAD  خاتمه يابد. به طور کلي هر صفح? HTML از دو قسمت HEAD و BODY تشکيل مي گردد. در بخش HEAD برخي ويژگي هاي صفحه مانند عنوان آن تعيين مي شود. مهمترين تگي که در داخل تگ  HEAD  قرار مي گيرد، تگ  TITLE   است. تگ  TITLE  نيز با تگ /TITLE   خاتمه مي يابد. عنوان يک صفحه، توضيحي در مورد صفحه است که در نوار عنوان مرورگر ظاهر مي شود. کل بدن? صفحه بايد در بين تگ هاي BODY و /BODY قرار بگيرد. قسمت بدنه، بخش اصلي هر صفح? وب سايت است که شامل متن، تصوير، جدول ها و عناصر ديگري است که کاربر در هنگام ملاقات طراحی وب سايت ، آنها را مشاهده خواهد کرد.

براي شروع يک پاراگراف جديد، بايد متن مورد نظر را در بين تگ هاي باز و بسته P و /P  قرار داد. براي تراز کردن پاراگراف جديد بايد از ويژگي ALIGN اين تگ استفاده نماييد. براي شروع يک سطر جديد بايد از تگ  BR  ريزترين سرتيتر است. متني که مي خواهيد به عنوان سرتيتر ظاهر شود را مثلاً تگ پاياني است.

شش سطح از سرتيترها در HTML وجود دارند که با H1 تا  H6  بيان مي شوند. تگ  H1 درشت ترين و تگ

ريزترين سرتيتر است. متني که مي خواهيد به عنوان سرتيتر ظاهر شود را مثلاً براي درشت ترين اندازه بين تگ هاي H1 و /H1 قرار دهيد.

معمولاً مرورگرها فاصله هاي درج شده در متن را ناديده مي گيرند. تگ  PRE  باعث مي شود مرورگر هر متني که در بين PRE و   /PRE قرار دارد را از اين قاعده مستثني نمايد. به عبارت ديگر در اين مورد مرورگر فواصل درج شده در متن را در نظر مي گيرد. به اين عمل پيش فرمت کردن متن گفته مي شود.

توضيحات قسمت هايي از يک سند HTML هستند که حاوي دستور يا تگ HTML نيستند و مرورگر آنها را ناديده مي گيرد. توضيحات، متوني هستند که برنامه نويس براي اطلاع خود به کد HTML اضافه مي نمايد. براي اضافه کردن توضيحات بايد آنها را در بين علائم و --> قرار داد.

کاراکترهاي &,‘‘,>,< از ديد HTML جزء کاراکترهاي ويژه محسوب مي گردند. چون هر يک از آنها جزء کلمات کليدي در HTML هستند. معادل اسمي آنها به ترتيب برابر & , " , > , < است.

ويژگي هاي عام HTML به ويژگي هايي گفته مي شود، که تقريباً در تمام تگ هاي HTML قابل استفاده هستند، اين ويژگي ها شامل ID ، CLASS ، STYLE و TITLE هستند.