سبد خرید 0

آشنایی با اجزای تشکیل دهنده صفحات وب – طراحی سایت

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

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

هر صفحه وب از سه بخش زیر تشکیل شده است :

  1. HTML
  2. CSS
  3. Javascript

اجزای وب سایت

HTML

html مخفف Hyper text markup language و به معنی زبان نشانه گذاری می باشد. با استفاده از html عناصر مورد نیازی را که قصد داریم در صفحه نشان دهیم فراهم میکنیم. با استفاده از html، ساختار صفحه وب را درست میکنیم یا به عبارتی دیگر تمامی عنصاصر از قبیل جداول ، پاراگراف ها، عکس و غیره نوشته می شود.

جدیدترین نسخه HTML تحت عنوان HTML5 شناخته می شود که یک سری قابلیت هایی بیشتری را از طریق تعدادی تگ در اختیار شما می گذارد. برای مثال استفاده از تگ video جهت نمایش ویدیو داخل صفحات وب ، که همین امر یعنی نمایش ویدیو یا صوت در نسخه های قبلی امکان پذیر نبود و می بایست از flash player استفاده می کردیم.

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

 

در html تمام کار با با تگ (Tag) ها هست، در واقع تمامی چیزی که شما نیار دارید در مورد html  یاد بگیرید، آشنایی با تگ ها می باشد.

 

آشنایی با تگ ها :

هر تگ یک اسم منحصر به فرد دارد و ما نمی توانیم تگ های جدیدی ایجاد کنیم.

ساختار تگ ها به صورت زیر می باشد :

به جای tagname اسم تگ مورد نظر را می نویسم. برای مثال اگر ما بخواهیم یک پاراگراف را در صفحه داشته باشیم از تگ مربوط به پاراگراف باید استفاده کنیم که اسم آن P می باشد و نحوه نوشتن آن به صورت زیر می باشد :

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

لازم به ذکر هست که یکسری از تگ ها، نیازی به تگ پایان ندارند، نحوه نوشتن این تگ ها به صورت زیر می باشد

 

CSS

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

مرورگرها برای همه تگ ها یک سری خصوصیات پیش فرض در نظر میگیرند، برای مثال رنگ صفحه سایت به صورت پیش فرض سفید هست، پیوندها (لینک) به صورت underline نمایش داده می شوند.

 

در صورتی که بخواهیم ظاهر وب سایت را تغییر دهیم می بایست از css استفاده کنیم. همه ی وب سایت هایی که می بینید، از css استفاده کرده اند و ظاهری را که مد نظر داشته اند بر روی صفحات وب سایت شان اعمال کرده اند. یک صفحه وب ، بدون استفاده از css ظاهر زیبایی ندارد و کاربر پسند نمی باشد.

 

روش های استفاده از CSS

به سه روش زیر می توان از css برای تغییر ظاهرا صفحه وب استفاده نمود :

  1. Inline
  2. Internal
  3. External

روش Inline :

در این روش، css داخل تگ ها نوشته می شود. برای مثال اگر قصد داشته باشید رنگ یک پاراگراف را تغییر دهید، کدهای css مربوطه را داخل تگ p می نویسید. همه تگ ها دارای یک ویژگی به اسم Style هستند که می توانید برای تغییر ظاهر آن تگ از این ویژگی استفاده کنید.

نمونه ای از css به این روش به صورت زیر می باشد :

روش Internal

برای نوشتن css به روش Internal ، کدهای css داخل صفحه html نوشته می شود و برای این کار باید از تگ <style> استفاده نمود. در این حالات یک تگ Style داخل  تگ <head> نوشته می شود و تمامی css ی که نیاز دارید آنجا می نویسد.

 

 

روش External

در این روش ، تمامی کدهای css درون فایل یا فایل های جداگانه نوشته می شود و سپس آن فایل های css به صفحه html پیوست می شود.

پسوند فایل ها css. می باشد.

نحوه پیوست فایل css به صفحه html به صورت زیر می باشد :

 

جاوا اسکریپت

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

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

 

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

داخل صفحات وب می توانیم کارهایی از قبیل چک کردن ورودی ها توسط کاربر را با استفاده از جاوا اسکریپت انجام دهیم، برای مثال بررسی صحت آدرس ایمیل و…

 

 

جاوا اسکریپت همان جاوا است ؟

یک نکته خیلی مهم رو که دانشجویان خیلی می پرسند این هست که آیا جاوا اسکریپت با جاوا یکسان هست ؟ جواب خیر می باشد.

جاوا و جاوا اسکریپت هم ربطی به همدیگر ندارند و دو زبان کاملا متفاوت می باشند.

 

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

 

برای یادگیری html می توانید از دوره رایگان آموزش HTML هوژان استفاده نمایید.

دوره یادگیری HTML

 

اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید

keyboard_arrow_up