وقتي قرار است اين اجتماع رنگارنگ و ناسازگار بر سر سفره جهاني وب بنشينند بايستي زباني مشترک براي تدوين و تبادل اطلاعات و اسناد داشته باشند. به گونه اي که اين تفاوت ها و ناسازگاري ها احساس نشود. بنيادي ترين نياز وب يک زبان واحد و استاندارد براي تدوين و صفحه آرايي اسناد وب بود. به گونه اي که هيچ وابستگي به سخت افزار طراحی وب سایت  يا نرم افزار خاصي نداشته باشد. به عبارت ديگر صفحات وب بايستي به گونه اي تدوين و صفحه آرايي شود تا بر روي تمام ماشين ها اعم از VAX، IBM PC، SUN، Apple به يک شکل نمايش يابد و طريقه تفسير و نمايش آن به هيچ عامل خارجي وابستگي نداشته باشد.

اولين زبان نشانه گذاري رسمي وب، HTML (Hyper text markup language) بود که در سال 1989 ميلادي توسط Tim Berners-Lee ابداع شد. تقريبا تمام وبسايت هاي دنيا به نحوي از زبان HTML براي نمايش هم زمان متن، تصوير، انيميشن، فيلم و صدا بهره ميگيرند. اين زبان تحت نظارت و قيوميت کنسرسيوم جهاني وب (با عنوان w3c يا world wide web consortium) قرار دارد و در خلال دهه گذشته چندين بار بازبيني و به روز شده است و اکنون از نسخه 4 آن استفاده مي شود. براي کسب آگاهي از توصيف دقيق اين زبان مي توانيد به آدرس www.w3c.org مراجعه کنيد.

اولين قدم براي طراحي وبسايت

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

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

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

HTML مجموعه اي از برچسب هاي خاص صفحه آرايي، عوامل و اشيا ورود و خروج اطلاعات است. برچسب هاي درون متن که به تگ يا tag مشهور هستند توسط مرورگر تشخيص داده شده و پس از تفسير، صورت ظاهري سند و نمايش متن را تحت تاثير قرار مي دهند. برچسب هاي HTML با علامت < > از متن اصلي متمايز مي شوند. عملي که هر برچسب انجام مي دهد در درون  <>مشخص مي شود. تاثير عمل هر برچسب به شکل <…> با برچسب ديگري به شکل </…> لغو مي شود.

اولين قدم براي طراحي وبسايت

به عنوان مثال متن ساده Hello Tebyan را در نظر بگيريد. با برچسب هاي <I><B>Hello Tebyan</B></I> مي توان مرورگر را وادار کرد تا متن را به صورت پر رنگ و ايتاليک به صورت Hello Tebyan نمايش دهد. 

در واقع برچسب <B> ميگويد که متني که ميان <B>…</B> قرار گرفته را Bold يا پررنگ بکن و متني که درون <I>…</I> قرار گرفته را به شکل ايتاليک در بيار. حال چون متن Hello Tebyan در بين هر دو تگ قرار دارد هر دو تگ بر متن اعمال مي شود و متن به صورت نهايي گفته شده تبديل مي شود.

براي نوشتن يک فايل HTML نياز به هيچ برنامه خاصي نداريد. مي توانيد به سادگي متن مورد نظر را با تگ هايي که ميخواهيد در يک ويرايشگر متني ساده مثل Notepad با پسوند .html ذخيره کنيد.

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

DHTML: HTML پويا

زبان نشانه گذاري DHTML در حقيقت نسخه مبتني بر شي (object) از HTML است. در اين زبان نشانه گذاري، قابليت هاي جديدي تعريف شده که بر اساس آن مي توان کنترل بيشتري بر روي مولفه هاي موجود در يک صفحه وب اعمال کرد تا بتوان به صفحه ي وب جلوه هاي ويژه (مبتني بر شرايط مرورگر) بخشيد. به عنوان مثال بتوان بر روي حرکان ماوس نظارت کرد و بر اساس موقعيت ماوس جلوه هاي خاصي را ايجاد کرد.

سايتها بر اساس کاربرد و نوع برنامه نويسي به چند دسته تقسيم مي شوند که عبارت است از :

سايتهاي ثابت (Static Website):

اين سايتها يکبار طراحي مي شوند و اطلاعات مورد نياز در داخل آنها قرار مي گيرد و پس از آن براي تغيير در آنها نياز به يک طراح حرفه اي يا نيمه حرفه اي سايت است. زبان برنامه نويسي اينگونه از سايتها غالبا HTML و Java Script هستند که در نوع توسعه يافته تر از CSS نيز بهره گرفته مي شود.

از آنجا که حجم کمتري از کد در طراحي سايتهاي ثابت استفاده مي‌شود سرعت بارگذاري (Loading) بالايي دارند. علاوه براين کاهش حجم کدها که باعث خوانايي بشتر سايت توسط رباتهاي جستجوگر مي‌شود از يک سو و کاهش زمان بارگذاري از سوي ديگر سبب بهتر شدن وضعيت آنها از لحاظ امتياز دهي موتورهاي جستجو يا همان "رنکينگ" مي شود. سايتهاي ثابت قيمت طراحي پايين تري را نيز عمدتا نسبت به ساير سايتها دارند.

عدم امکان ايجاد تغيير در اين نوع از سايتها توسط افراد عادي علاوه بر افزايش امنيت سبب بهرهمندي از گرافيک و ظاهري زيبا مي‌شود چرا که همه چيز ثابت است از جمله متون و اندازه تصاوير و همچنين همه عناصر مکان مشخص و ثابتي را دارند در نتيجه مي توان براي محل قرار گرفتن هر يک از اجزاء بهترين تصميم را گرفت.

اما از طرفي نيز عدم امکان ايجاد تغييرات توسط افراد عادي سبب مي‌شود تا امکان بروز رساني سايت توسط صاحبان و مديران سايت صلب شود.

نکته: سايتهاي ثابت (Static) براي افراد، شرکتها و سازمانهايي مناسب است که حداکثر يک يا دو بار در سال نيازمند به تغيير در محتواي سايت هستند.

سايتهاي پويا (Dynamic Website): محتواي سايتهاي دايناميک بعد از طراحي توسط افراد عادي که دسترسي به سيستم مديريت محتواي سايت را داشته باشند قابل تغيير است. زبان برنامه نويسي وبسايتهاي پويا ميتواند براساس نياز متفاوت باشد اما عمدتا از زبانهاي ASP ، ASP.Net و Php استفاده مي‌شود و از زبانهاي کمکي CSS و Silver light و يا Ajax براي ايجاد قابليتهاي ويژه نيز بهره گرفته مي شود.

در اينگونه از سايتها ابتدا اسکلت سايت توسط طراح ايجاد مي‌شود و سپس محتوا توسط مديران سايتها تغيير مي‌کند مانند فرم قراردادي که يکبار توسط فردي ايجاد مي‌شود و توسط افراد ديگري بارها تکميل مي شود، از اين رو طراح نسبت به محل قرار گرفتن و اندازه دقيق متون و تصاوير و ساير عناصري که بعداً توسط مديران سايتها تغيير مي‌کند اطلاع ندارد بنابر اين چاره اي ندارد جز اينکه همه حالات را در نظر بگيرد و اينکار سبب مي‌شود تاحدودي از گرافيک و جلوه سايت کاسته شود.

يکي از مزيتهاي سايتهاي دايناميک اين است که هيچ محدوديتي براي ايجاد، تغيير يا حذف مطالب، تصاوير و صفحات و غيره وجود ندارد.

با توجه به اينکه در سايتهاي پويا از زبانهاي برنامه نويسي پيشرفته استفاده مي‌شود امکانات زيادي در آنها قابل ايجاد است مانند ايجاد صفحات هوشمند، فرمها و جستجوهاي پيچيده.

استفاده زياد از کدها سبب کند شدن بارگذاري سايت و امتياز آن در موتورهاي جستجو مي شود.

نکته: سايتهاي پويا براي افراد، شرکتها و سازمانهايي مناسب است که بيش از دوبار در سال نياز به تغيير درمحتواي سايت را دارند.

پرتالها (Portal): پرتالها سايتهاي پوياي جامعي هستند که چند هدف خاص را در يک سايت دنبال مي کنند به عبارت ديگر مجموع چند سايت پويا که براي رسيدن به هدفي خاص در کنار هم قرار گرفته اند را مي توان پرتال ناميد. به عنوان مثال پرتال خبري مي تواند از چند سايت دايناميک تشکيل شده باشد که هر يک امکانات خاصي چون عضو گيري، انتشار اخبار، انتشار تصاوير، نظر سنجي و ... را در اختيار مديران آن قرار دهد.

تمام ويژگي‌هاي يک سايت پويا مي تواند در يک پرتال نيز صدق کند.

نکته: معمولاً پرتال‌ها توسط سازمانها، گروهها و شرکتها خريداري مي شوند. به دليل نياز به بروز رساني بخشهاي مختلف اداره آنها توسط يک فرد بسيار مشکل است مگر آنکه به چشم يک کار طراحی وب سایت   حداقل پاره وقت به آن نگاه شود.

سايتهاي متحرک استاتيک و نيمه دايناميک (Static and Dynamic Flash Website): سايتهاي فلش يا متحرک دو نوع استاتيک و نيمه دايناميک هستند و توسط نرم‌افزارهاي خاصي ايجاد مي شوند در برخي موارد از XML يا Action Script براي ايجاد قابليتهاي تغيير يا هوشمندي در اين سايتها بهره گرفته مي شود.

به طور کلي سايتهاي فلش ثابت (استاتيک) غير قابل تغيير مي باشند و مانند سايتهاي ثابت يکبار توسط طراح ايجاد مي شوند و براي تغيير آن نياز است تا افراد به صورت حرفه اي يا نيمه حرفه اي از دانش طراحي فلش برخوردار باشند