با html و css بیشتر آشنا شویم

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

اگر قصد یادگیری مقدمات html و css را دارید مقاله آموزش html و css به شما پیشنهاد می شود.


زبان html چیست؟

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

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

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

زبان css چیست؟

حال که بدنه و اسکلت سایت توسط زبان html ساخته شد نوبت به زیبا سازی سایت است. کدهای css در فایلی به نام style.css ذخیره می شود. کدهای css با استفاده از لینکی که در هدر سایت قرار می گیرد به کدهای html متصل می شود و سپس با استفاده از کلاس گذاری تگ های html می توان کدهای html را استایل دهی کرد.

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

<link rel="stylesheet" type="text/css" href="style.css" >

قطعه کد متا دسکریپشن که برای توضیحات سایت برای بهینه سازی سئو سایت در هدر سایت قرار داده می شود.

<meta name="description" content=" توضیحاتی در مورد خدمات فعالیت ها و حوزه کاری می دهیم.">

قطعه کد زیر نیز برای بهینه سازی سئو سایت در هدر قرار می گیرد.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />