CSS یکی از تکنولوژی های اصلی برای طراحی صفحات و اپلیکیشن های وب می باشد. مهم نیست قصد ساخت چه سایت و اپلیکیشنی را داشته باشید, باید در ساخت آن از CSS استفاده کنید.
CSS یک زبان استایل نویسی و از نوع اعلانی می باشد که نحوه نمایش یک صفحه وب را توصیف می کند.
تا الان درباره عناصر مختلفی بحث کردیم. در این مطلب در مورد گروه بندی این عناصر و ساختار یک صفحه وب صحبت می کنیم.
به عنوان نمونه یک صفحه بلاگ می تواند به چهار قسمت تقسیم شود:
وب می داند که گاهی کاربر نیاز دارد تا ورودی ها و اطلاعات خود را برای وب سایت فراهم آورد. به عنوان نمونه:
اگر در محتوای ما اطلاعاتی باشند که نیاز است آنها را بصورت جدولی نمایش دهیم می توانیم از عنصر <table> در HTML استفاده کنیم.
استفاده از جدول ها در HTML ساختار خاص خود را دارد:
<table> باز کنید.<tr> استفاده کنید.<td> و برای سلول عنوان <th> را قرار می دهید.
تصاویر اولین عناصر غیر متنی بودند که در وب به وجود آمدند.
اکثر فرمت های تصویری که در کامپیوترتان پیدا می شود بر روی وب نیز قابل استفاده هستند. فرمت های از قبیل .png، .jpg، .gif و غیره…
عنصر تصویر با تگ <img> مشخص می شود. این تگ از نوع تگ هایی می باشد که فقط تگ آغاز دارند.
با استفاده از ویژگی src می توانیم مکان یا همان آدرس تصویر را مشخص کنیم. که این آدرس می تواند شبیه آدرس لینک ها از نوع نسبی یا مطلق باشد.
از آنجایی که وب طراحی شد تا یک شبکه داده ای بین اسناد به هم مرتبط شده باشد، لینک ها جز اساسی وب و HTML هستند.
قسمت HyperText از HTML به ما نشان می دهد از چه نوع لینکی استفاده می کنیم. از لینک های ابرمتن که به آنها ابرپیوند (Hyperlink) نیز گفته می شود. ابرپیوند به پیوندی از درون یک سند به سندی دیگر گفته می شود.
در HTML لینک ها عناصر خطی هستند که توسط تگ <a> تعیین می شوند.
در عنصر <a> با استفاده از ویژگی href تعیین می کنیم هدف لینک چه آدرسی می باشد. (href = hypertext reference)
یعنی با استفاده از این ویژگی می توان تعیین کرد زمانی که بر روی یک لینک کلیک می کنیم به چه صفحه یا وب سایتی سفر می کنیم.
در حالی که از پاراگراف ها و لیست ها برای تعریف یک بلاکی از متن استفاده می شود گاهی نیاز داریم تا به یک کلمه یا کلماتی معنا بدهیم. برای این منظور نیاز به عناصری از جنس عناصر این مطلب داریم.
اگرچه تصویر، ویدئو و صدا در سراسر دنیای وب وجود دارد اما هنوز هم متن مهمترین قسمت تشکیل دهنده وب است.
پاراگراف ها <p> یکی از پرکاربردترین عناصر HTML می باشند. این عناصر بصورت پیشفرض از نوع بلاک هستند و بسیار سریع می شود از آنها جهت نمایش متن استفاده کرد:
<p>
.بهترین شیوه صداقت وفای به عهد است
</p>
در HTML سه نوع لیست وجود دارد:
<ul> لیست غیر ترتیبی<ol> لیست ترتیبی<dl> لیست توضیحیلیست ها در HTML ساختار مخصوص به خود را دارند. همیشه باید <ul> و <ol> پدر <li> باشند تا یک لیست داشته باشیم. <li> آیتم های یک لیست هستند. و هیچگاه به تنهایی استفاده نمی شوند و همیشه به عنوان فرزندان مستقیم <ul> و <ol> مورد استفاده قرار می گیرند.
در مثال هایی که تا الان بررسی کردیم همیشه از یک تکه کد HTML استفاده می کردیم. اگر بخواهیم یک صفحه وب را بسازیم HTML ما نیاز به یک ساختار خاص دارد تا معتبر باشد.
زمانی که کد HTML معتبر باشد:
بین آنچه که در کد HTML می نویسیم و آنچه که در مرورگر نمایش داده می شود تفاوت هایی وجود دارد.
تا الان دیدیم که تگ ها توسط مرورگر فقط خوانده می شوند تا بداند چه محتوایی درون آنها وجود دارد اما آن تگ ها را هرگز نمایش نمی دهد.
همینطور مشاهده کردیم که چگونه توضیحات یا Comment را در کد بنویسیم تا فقط توسط توسعه دهنده وب قابل خواندن باشد و مرورگر آنها را نادیده گرفته و نمایش ندهد.
نوع دیگری که توسط مرورگر نادیده گرفته می شود فضاهای خالی یا همان Whitespace هستند که شامل موارد زیر می باشند:
