آموزش html و css از مبتدی تا پیشرفته

آدرس کوتاه این صفحه : https://darkoobedu.ir/?p=2004

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

منابع زیادی در اینترنت وجود دارد که به شما کمک می کند html و css را یاد بگیرید. تنها راهی که می توانید یاد بگیرید در واقع کدنویسی و انجام دادن است. به شما توصیه می کنیم که برخی از پروژه های شخصی خود را بسازید چرا که این بهترین روش برای یادگیری است و باعث اطمینان خاطر شما نسبت به یادگیری آن می شود.

چرا یادگیری html و css برای طراحی سایت اهمیت دارد؟

صرف نظر از اینکه حرفه شما چیست، html و css مهارت های بسیار خوبی برای یادگیری و داشتن هستند. حتی اندکی آگاهی از این زبان ها می تواند تغییر بزرگی در حرفه شما ایجاد کند. درست مانند داشتن توانایی تکلم به یک زبان خارجی، این نوع مهارت تقریباً در همه مشاغل مفید است.

در ادامه چند دلیل وجود دارد که می توانید چند دقیقه از وقت خود را صرف درک بهتر وب سایت کنید. آموزش html و css شما را قادر می سازد تا:

بهتر وب را درک کنید

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

ایجاد وب سایت

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

شغل طراحی وب را شروع کنید

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

با سهولت بیشتری زبانهای دیگری را بیاموزید

داشتن یک اصول اساسی، یادگیری زبان برنامه نویسی دیگری مانند JavaScript ، PHP، SQL و … را بسیار آسان می کند. و هرچه بیشتر بدانید، فرصت های شغلی بیشتری برای شما ایجاد خواهد شد.

درآمد کسب کنید

مجموعه دارکوب با خوشحالی این نوید را به شما می دهد که شما می توانید با یادگیری مهارتهای html و css به تنهایی درآمد کسب کنید. در وب جستجو کنید و خودتان ببینید ده ها شغل مستقل html و css موجود را پیدا خواهید کرد. البته با افزودن مهارت های دیگر مانند JavaScript ، PHP، Photoshop و موارد دیگر به جعبه ابزار خود، می توانید درآمد بیشتری کسب کنید.

در مورد یادگیری چطور؟

یادگیری html و css آسان است. از بین تمام زبان های برنامه نویسی، html و css آسان ترین زبان برنامه نویسی برای یادگیری هستند و برای شروع آموزش html و css نیازی به تحصیل در رشته های مربوط به کامپیوتر ندارید. به طور معمول، یادگیری علوم کامپیوتر به دلیل نحوه توضیح آن دشوار است.

نیازی نیست که یک زبان را یکباره یاد بگیرید، اما صرف حتی چند روز یادگیری درک ساختار اساسی به شما کمک می کند صفحه وب ساده خود را ایجاد کنید.

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

از یادگیری نترسید و شروع کنید!

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

آموزش html و css از مبتدی تا پیشرفته

معرفی دوره آموزش html و css از پایه مقدماتی تا پیشرفته

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

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

در این مقاله راهنمای قدم به قدم، سعی بر آن شده است تا اصول آموزش html و css و نحوه ساخت اولین وب سایت را به شما بیاموزد. این بدان معنی است که چگونه می توان یک صفحه html را چیدمان کرد، چگونه می توان متن و تصاویر را اضافه کرد، چگونه سرفصل ها و قالب بندی متن را اضافه کرد و  همچنین چگونه از جداول استفاده کرد.

مجموعه دارکوب به شما این امکان را می دهد وب سایت جدید خود را در عرض چند ساعت و نه چند روز راه اندازی کنید. در حالی که بسیاری از سایت های موجود در اینترنت سعی در آموزش html و css با استفاده از بسیاری از نظریه های گیج کننده ذهن دارند، در عوض این آموزش به شما مهارت های عملی برای ساخت اولین سایت خود را متمرکز می کند.

هدف این است که به شما نشان دهد “چگونه” می توانید اولین صفحه وب خود را ایجاد کنید بدون اینکه کل آموزش را با تمرکز بیش از حد روی “چرا” ایجاد کنید.

در پایان این آموزش، شما می توانید دانش لازم برای ایجاد یک وب سایت اساسی را داشته باشید و امیدواریم که این امر به شما الهام بخشد تا با استفاده از راهنما های بعدی ما، بیشتر به دنیای html و css وارد شوید.

زبان html چیست و ساختار آن به چه شکل است؟

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

عناصر html بر روی محتوایی از جمله “این یک عنوان است” ، “این یک پاراگراف است” ، “این یک پیوند است” و غیره برچسب گذاری می کنند. در حال حاضر، ما بر روی آموزش ساخت صفحات سایت و نه طراحی آن به شما، تمرکز خواهیم کرد. ابتدا یک مقدمه و تاریخچه از html را بازگو می کنیم و سپس به ساختار آن خواهیم پرداخت.

html برای اولین بار توسط تیم برنرز لی، رابرت کیلیاو و دیگران از سال 1989 ایجاد شد. html  مخفف Hyper Text Markup Language است. Hypertext  به این معنی است که سند حاوی پیوند هایی است که به خواننده اجازه می دهد به مکان های دیگر سند یا کلاً به سند دیگری بپردازد.

تا به امروز زبان html در 5 نسخه منتشر شده است که آخرین و پیشرفته ترین نسخه از آن به 5 html معروف است که در سال 2014 منتشر شده است. در 5 html و 3 css که جدید ترین نسخه های html و css هستند، ویژگی های بسیاری به آن ها اضافه شده که در نسخه های قبلی منسوخ شده و کار را برای طراحان سایت بسیار آسان تر و حرفه ای نموده است.

زبان نشانه گذاری راهی است که کامپیوترها برای کنترل نحوه پردازش و ارائه متن با یکدیگر صحبت می کنند. برای انجام کار با html از دو چیز استفاده می شود: برچسب ها و ویژگی ها. حال این سوال مطرح می شود که برچسب ها و ویژگی ها چه کاربردی در html دارند؟

برای پاسخ به این سوال در ابتدا باید بگوییم که برچسب ها و ویژگی ها اساس کار html هستند. آنها با هم کار می کنند اما عملکردهای مختلفی را انجام می دهند پس ارزش این را دارد که 2 دقیقه را برای تمایز این دو سرمایه گذاری کنید تا به طور کامل متوجه آن شوید و از بروز مشکلات جدی در آینده جلوگیری کنید.

از برچسب ها برای مشخص کردن شروع یک عنصر در html استفاده می شود و آنها معمولاً در براکت های زاویه ای محصور می شوند. یک مثال از برچسب: <h1>. برای عملکرد بهتر، باید بیشتر برچسب ها <h1> باز و بسته شوند </ h1>. ویژگی ها حاوی اطلاعات اضافی هستند. ویژگی ها به صورت یک برچسب باز شده و اطلاعات اضافی در داخل آنها قرار می گیرد.

آموزش طراحی سایت با html   

حال می خواهیم آموزش html و css خود را با ذکر یک مثال آغاز کنیم. به مثال ساده html زیر توجه کنید و سپس هر یک از کد ها را به اختصار توضیح خواهیم داد.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

توضیح هر یک از کد های مثال فوق:

  • اعلامیه < !DOCTYPE html> تعریف می کند که این سند یک سند HTML5 است.
  • عنصر <html> عنصر اصلی یک صفحه HTML است.
  • عنصر <head> شامل اطلاعات متا در مورد صفحه HTML است.
  • عنصر <title> عنوانی را برای صفحه HTML مشخص می کند (که در نوار عنوان مرورگر یا در برگه صفحه نشان داده شده است).
  • عنصر <body> متن سند را تعریف می کند و محفظه ای برای تمام محتوای قابل مشاهده مانند عناوین ، پاراگراف ها ، تصاویر ، پیوندهای پیوندی ، جداول ، لیست ها و غیره است.
  • عنصر <h1> عنوان بزرگی را تعریف می کند.
  • عنصر <p> یک پاراگراف را تعریف می کند.

عنصر html چیست؟

یک عنصر html توسط یک برچسب شروع، برخی از محتوا و یک برچسب انتهایی تعریف می شود. به عنوان مثال: <tagname> محتوا به اینجا می رود … </tagname>

در عنصر html همه چیز از برچسب شروع تا برچسب پایان است:

<h1> عنوان اول </ h1>

<p> پاراگراف اول </ p>

عناصر html تو در تو

عناصر html را می توان تو در تو قرار داد (این بدان معنی است که عناصر می توانند عناصر دیگری را نیز شامل شوند). تمام اسناد html از عناصر html تو در تو تشکیل شده اند.

توجه کنید که برخی از عناصر html فاقد محتوا هستند. (مانند عنصر <br>) به این عناصر، عناصر خالی گفته می شود. عناصر خالی برچسب پایانی ندارند!

مرورگرهای وب

هدف یک مرورگر وب (Chrome ، Edge ، Firefox ، Safari) خواندن اسناد html و نمایش صحیح آنها است. یک مرورگر برچسب های html را نمایش نمی دهد، اما از آنها برای تعیین نحوه نمایش سند استفاده می کند.

ساختار صفحه html

در شماتیک زیر تجسم ساختار کلی صفحه html آورده شده است:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

توجه کنید که فقط محتوای داخل بخش <body> (قسمت سفید بالا) در یک مرورگر نمایش داده می شود.

ویراستاران html

یک ویرایشگر متن ساده تمام چیزی است که شما برای یادگیری html نیاز دارید. شما می توانید با استفاده از Notepad یا TextEdit HTML آموزش html و css را فرا بگیرید. صفحات وب را می توان با استفاده از ویرایشگر های حرفه ای html ایجاد و یا اصلاح نمود.

با این حال، برای آموزش html و css ما یک ویرایشگر متن ساده مانند Notepad (PC) یا TextEdit (Mac) را توصیه می کنیم. ما معتقد هستیم که استفاده از یک ویرایشگر متن ساده روش خوبی برای آموزش html و css است.

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

  • مرحله 0: دفترچه یادداشت یا همان Notepad را در Pc خود باز کنید.

اگر با ویندوز 8 یا بالاتر کار می کنید، صفحه شروع را باز کنید (نماد پنجره در پایین سمت چپ روی صفحه). دفترچه یادداشت(Notepad) را تایپ کنید.

اگر بر روی سیستم شما ویندوز 7 یا قبل از آن نصب است، می توانید با دستورالعمل زیر اقدام کنید.

Start > Programs > Accessories > Notepad

  • مرحله 1: باز کردن متن ویرایش (TextEdit) در سیستم عامل Mac

Finder> Applications> TextEdit

همچنین برخی تنظیمات برگزیده را تغییر دهید تا برنامه بتواند به درستی فایل ها را ذخیره کند. در تنظیمات با آدرس زیر عمل کنید.

Preferences > Format > انتخاب کردن  “Plain Text”

سپس در بخش ” Open and Save” ، کادر ” Display HTML files as HTML code instead of formatted text ” را علامت گذاری کنید.

سپس یک سند جدید برای کدنویسی باز کنید.

  • مرحله 2: شروع به نوشتن کدهای html کنید.

شما می توانید کد html زیر را در Notepad بنویسید یا کپی کنید.

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

  • مرحله 3: صفحه html خود را ذخیره کنید.

پرونده را در کامپیوتر خود ذخیره کنید. File> Save as را از فهرست Notepad انتخاب کنید.

نام پرونده را “index.htm” بگذارید و کدگذاری را روی UTF-8 تنظیم کنید (که رمزگذاری ارجح برای پرونده های html است).

نکته قابل توجه این است که شما می توانید از .htm یا .html به عنوان پسوند پرونده استفاده کنید. هیچ تفاوتی در هر یک وجود ندارد و کاملا سلیقه ای است و به شما بستگی دارد.

  • مرحله 4: صفحه html را در مرورگر خود مشاهده کنید.

فایل html ذخیره شده را در مرورگر مورد علاقه خود باز کنید (روی پرونده دوبار کلیک کنید، یا کلیک راست کرده و ” Open with” را انتخاب کنید). نتیجه بسیار شبیه به عکس زیر خواهد بود:

آموزش و یادگیری مشاهده سند html در مرورگر

مثالهای اساسی html

در این فصل از آموزش html و css برخی از مثالهای اساسی html را نشان خواهیم داد.

اگر ما از برچسب هایی استفاده می کنیم که شما هنوز در مورد آنها یاد نگرفته اید نگران نباشید. چرا که در ادامه شرح خواهیم داد.

اسناد html

  • همه اسناد html باید با اعلامیه نوع سند شروع شوند: <!DOCTYPE html>.

اعلامیه <!DOCTYPE html> نوع سند را نشان می دهد و به مرورگرها برای نمایش صحیح صفحات وب کمک می کند. این اعلامیه  فقط یک بار باید در بالای صفحه (قبل از هرگونه برچسب html) ظاهر شود و به حروف کوچک و بزرگ حساس نیست.

اعلامیه <!DOCTYPE html> برای HTML5 به شرح زیر است:

<!DOCTYPE html>

  • سند html خود با <html> شروع می شود و با </ html> پایان می یابد.
  • قسمت قابل مشاهده سند html بین <body> و </body> است.
  • عناوین html با برچسب <h1> تا <h6> تعریف می شوند.

<h1> مهمترین عنوان را تعریف می کند و <h6> کمترین عنوان را تعریف می کند. به عنوان مثال:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

 

  • پاراگرافهای html با برچسب <p> تعریف می شوند:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

  • پیونددهی های html با برچسب <a> تعریف می شوند. ویژگی href صفحه ای را که لینک به آن URL می رود را مشخص می کند:

<a href=”https://www.w3schools.com”>This is a link</a>

  • از برچسب <img> برای جاسازی تصویر در صفحه html استفاده می شود. فایل منبع (src) ، متن جایگزین (alt) ، عرض و ارتفاع به عنوان ویژگی ارائه می شوند:

<img src=”w3schools.jpg” alt=”W3Schools.com” width=”104″ height=”142″>

صفات html

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

  • ویژگی src: از برچسب <img> برای جاسازی تصویر در صفحه HTML استفاده می شود. ویژگی src مسیر تصویری را برای نمایش مشخص می کند:

<img src=”img_girl.jpg”>

برای تعیین URL در ویژگی src به دو روش وجود دارد:

  1. URL مطلق: پیوند به یک تصویر خارجی که در وب سایت دیگری میزبانی می شود. مثال: src = “https://www.w3schools.com/images/img_girl.jpg”.
  2. URL نسبی: پیوند هایی به تصویری که در وب سایت میزبانی می شود. در اینجا، URL شامل نام دامنه نیست. اگر URL بدون بریدگی شروع شود، نسبت به صفحه فعلی خواهد بود. مثال: src = “img_girl.jpg”. اگر URL با بریدگی آغاز شود ، نسبت به دامنه خواهد بود. مثال: src = “/ images / img_girl.jpg”.

نکته: تقریباً همیشه بهتر است از URL های نسبی استفاده کنید. چرا که در صورت تغییر دامنه، آنها از بین نمی روند.

  • ویژگی های عرض و ارتفاع: برچسب <img> همچنین باید دارای مشخصه های عرض و ارتفاع باشد که عرض و ارتفاع تصویر را مشخص می کند (در پیکسل):

<img src=”img_girl.jpg” width=”500″ height=”600″>

  • ویژگی alt مورد نیاز برای برچسب <img> متنی جایگزین برای یک تصویر را مشخص می کند، در صورتی که تصویر به دلایلی امکان نمایش ندارد. این می تواند به دلیل اتصال کند، یا خطا در ویژگی src باشد، یا اگر کاربر از صفحه خوان استفاده کند.

<img src=”img_girl.jpg” alt=”Girl with a jacket”>

  • ویژگی style: از ویژگی style برای افزودن style به یک عنصر مانند رنگ، قلم، اندازه و موارد دیگر استفاده می شود.

<p style=”color:red;”>This is a red paragraph.</p>

  • صفت lang: برای اعلام زبان صفحه وب، باید همیشه ویژگی tag را درون برچسب <html> قرار دهید. این به منظور کمک به موتورهای جستجو و مرورگرها است.

<!DOCTYPE html>
<html lang=”en”>
<body>

</body>
</html>

  • ویژگی title: برخی اطلاعات اضافی در مورد یک عنصر را تعریف می کند. هنگام قرار دادن عنصر روی ماوس ، مقدار ویژگی عنوان به عنوان یک راهنما نمایش داده می شود.

<p title=”I’m a tooltip”>This is a paragraph.</p>

عناوین html

استفاده از عناوین برای نشان دادن ساختار سند مهم است. موتورهای جستجو از عناوین برای فهرست بندی ساختار و محتوای صفحات وب شما استفاده می کنند. از عناوین <h1> باید برای عناوین اصلی استفاده شود و به دنبال آن عناوین <h2> و سپس از <h3> با اهمیت کمتری و غیره استفاده شود.

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

  • عناوین بزرگتر: هر عنوان html دارای اندازه پیش فرض است. با این حال، می توانید برای هر عنوان با مشخصه سبک، اندازه را با استفاده از ویژگی CSS font-size تعیین کنید:

<h1 style=”font-size:60px;”>Heading 1</h1>

پاراگراف های html

یک پاراگراف همیشه از یک خط جدید شروع می شود و معمولاً یک متن است. عنصر html <p> یک پاراگراف را تعریف می کند. یک پاراگراف همیشه از یک خط جدید شروع می شود و مرورگرها قبل و بعد از یک پاراگراف به طور خودکار فضای سفید (حاشیه) اضافه می کنند.

  • نمایش html

شما نمی توانید مطمئن باشید که html چگونه نمایش داده می شود. صفحات بزرگ یا کوچک و اندازه پنجره ها نتایج متفاوتی را ایجاد می کنند. با html ، نمی توانید صفحه نمایش را با افزودن فضاهای اضافی یا خطوط اضافی در کد html تغییر دهید. هنگام نمایش صفحه ، مرورگر به طور خودکار فضاها و خطوط اضافی را حذف می کند:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

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

مشاهده کد منبع html

شما می توانید در یک صفحه html کلیک راست کرده و ” View Page Source” (در Chrome) یا ” View Source ” (در Edge) یا موارد مشابه را در مرورگرهای دیگر انتخاب کنید. با این کار پنجره ای حاوی کد منبع html صفحه باز می شود.

بازرسی یک عنصر html

روی یک عنصر (یا یک قسمت خالی) کلیک راست کنید و “Inspect” یا “Inspect Element” را انتخاب کنید تا ببینید از چه عناصری تشکیل شده اند (شما هر دو html و css را خواهید دید). همچنین می توانید در پنل Elements یا Styles که باز می شود، html و یا css را ویرایش کنید.

css چیست و دستورات اولیه آن چگونه نوشته می شود؟

css مخفف Cascading Style Sheets است و زبانی است که برای سبک سازی ارائه بصری صفحات وب استفاده می شود. css زبانی است که به مرورگرها می گوید چگونه بخش های مختلف یک صفحه وب را ارائه دهند.

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

css با html چه تفاوتی دارد؟

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

تمام محتوای مهم وب سایت باید با استفاده از یک زبان نشانه گذاری مانند html به وب سایت اضافه شود. ارائه محتوای وب سایت باید توسط یک زبان سبک مانند css تعریف شود.

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

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

چرا از css استفاده کنیم؟

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

css یک مشکل بزرگ را حل کرد:

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

وقتی برچسب هایی مانند <font> و ویژگی های رنگ به مشخصات html 3.2 اضافه شدند، کابوسی برای توسعه دهندگان وب آغاز شد چرا که توسعه وب سایت های بزرگ، جایی که قلم ها و اطلاعات رنگی به هر صفحه اضافه می شد، به یک فرآیند طولانی و گران تبدیل شد.

برای حل این مشکل، کنسرسیوم شبکه جهانی وب  css را ایجاد کرد.

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

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

آموزش طراحی وب با css

ساختار css

یک مجموعه قانون css از یک انتخابگر و یک بلوک اعلان تشکیل شده است:

ساختار css برای یادگیری از مبتدی تا پیشرفته CSS

انتخابگر CSS

انتخابگرهای CSS یا selector برای “یافتن” (یا انتخاب) عناصر html مورد نظر جهت سبک سازی استفاده می شوند. ما می توانیم انتخابگرهای CSS را به پنج دسته تقسیم کنیم:

  • انتخابگرهای ساده (عناصر را بر اساس نام ، شناسه ، کلاس انتخاب کنید)
  • انتخابگرهای ترکیبی (عناصر را بر اساس رابطه خاصی بین آنها انتخاب کنید)
  • انتخابگرهای کلاس شبه (عناصر را بر اساس یک حالت خاص انتخاب کنید)
  • انتخاب کنندگان عناصر شبه (انتخاب و سبک بخشی از یک عنصر)
  • انتخابگرهای ویژگی (عناصر را بر اساس ویژگی یا مقدار ویژگی انتخاب کنید)

در این قسمت اساسی ترین انتخاب کنندگان CSS را توضیح خواهیم داد.

  • انتخابگر عنصر CSS

انتخابگر عنصر عناصر html را بر اساس نام عنصر انتخاب می کند. به عنوان مثال در اینجا، همه عناصر <p> صفحه با رنگ متن قرمز تراز وسط قرار می گیرند:

p {
  text-align: center;
  color: red;
}

  • انتخابگر شناسه CSS

انتخابگر شناسه از ویژگی id یک عنصر html برای انتخاب یک عنصر خاص استفاده می کند. شناسه یک عنصر در یک صفحه منحصر به فرد است، بنابراین از شناسه برای انتخاب یک عنصر منحصر به فرد استفاده می شود.

برای انتخاب یک عنصر با شناسه خاص، یک کاراکتر هشتگ (#) و بعد از آن شناسه عنصر را بنویسید. به عنوان مثال قانون CSS زیر برای عنصر html با id = “para1” اعمال می شود:

#para1 {
  text-align: center;
  color: red;
}

  • انتخابگر کلاس CSS

انتخابگر کلاس عناصر html را با یک ویژگی کلاس خاص انتخاب می کند. برای انتخاب عناصر با یک کلاس خاص ، یک کاراکتر period (.) و سپس نام کلاس را بنویسید. در این مثال، تمام عناصر html با class = “center” قرمز و تراز وسط قرار می گیرند:

.center {
  text-align: center;
  color: red;
}

همچنین می توانید تعیین کنید که فقط عناصر خاص html تحت تأثیر یک کلاس قرار گیرند. در این مثال فقط عناصر <p> با کلاس = “center” تراز وسط قرار می گیرند:

p.center {
  text-align: center;
  color: red;
}

عناصر html همچنین می توانند به بیش از یک کلاس اشاره کنند. در این مثال عنصر <p> مطابق با class = “center” و به class = “large” مدل خواهد شد:

<p class=”center large”>This paragraph refers to two classes.</p>

  • انتخابگر جهانی CSS

انتخابگر جهانی (*) همه عناصر html موجود در صفحه را انتخاب می کند. در این مثال قانون CSS زیر بر روی هر عنصر html موجود در صفحه تأثیر می گذارد:

* {
  text-align: center;
  color: blue;
}

  • انتخابگر گروه بندی CSS

انتخابگر گروه بندی، تمام عناصر html را با همان تعریف سبک انتخاب می کند. به کد CSS زیر نگاه کنید (عناصر h1 ، h2 و p تعریف یکسانی دارند):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

برای به حداقل رساندن کد، بهتر است گروهی را انتخاب کنید. برای گروه بندی انتخابگرها، هر انتخابگر را با کاما جدا کنید. در این مثال ما انتخاب کنندگان را از کد بالا گروه بندی کرده ایم:

h1, h2, p {
  text-align: center;
  color: red;
}

نحوه افزودن CSS

هنگامی که یک مرورگر یک صفحه استایل را می خواند، سند html را با توجه به اطلاعات موجود در صفحه استایل ، قالب بندی می کند. سه روش برای قرار دادن CSS در یک صفحه استایل وجود دارد:

  • CSS خارجی

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

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

یک صفحه استایل خارجی می تواند در هر ویرایشگر متنی نوشته شود و باید با پسوند css ذخیره شود. پرونده خارجی .css نباید حاوی برچسب های html باشد. در اینجا شکل فایل “mystyle.css” به شرح زیر است:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

  • css داخلی

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

در این مثال استایل های داخلی در داخل عنصر <style> ، در داخل بخش <head> صفحه html تعریف می شوند:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

  • CSS در خط

برای اعمال استایل منحصر به فرد برای یک عنصر، می توان از یک استایل درون خطی استفاده کرد. برای استفاده از استایل های درون خطی، ویژگی style را به عنصر مربوطه اضافه کنید. ویژگی style می تواند شامل هر خاصیت CSS باشد. در این مثال استایل های درون خطی در ویژگی “style” از عنصر مربوطه تعریف می شوند:

<!DOCTYPE html>
<html>
<body>

<h1 style=”color:blue;text-align:center;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>

</body>
</html>

  • دستور آبشار

در آموزش html و css وقتی بیش از یک استایل برای یک عنصر html مشخص شده باشد، از چه استایلی استفاده می شود؟

با توجه به قوانین زیر، که در آن شماره یک دارای بالاترین اولویت است، تمام استایل های یک صفحه به یک صفحه استایل “مجازی” جدید تبدیل می شوند:

  • استایل درون خطی (درون یک عنصر html)
  • ورق های استایل خارجی و داخلی (در بخش سر)
  • مرورگر به طور پیش فرض

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

  • رنگ های CSS

رنگ ها با استفاده از نام های رنگی از پیش تعریف شده یا مقادیر RGB ، HEX، HSL،RGBA ، HSLA مشخص می شوند.

در CSS می توان یک رنگ را با استفاده از یک نام رنگ از پیش تعریف شده تعیین کرد. CSS / html از 140 نام استاندارد رنگ پشتیبانی می کند.

  • رنگ پس زمینه CSS

شما می توانید رنگ پس زمینه را برای عناصر html تنظیم کنید:

<h1 style=”background-color:DodgerBlue;”>Hello World</h1>
<p style=”background-color:Tomato;”>Lorem ipsum…</p>

  • رنگ متن CSS

شما می توانید رنگ متن را برای عناصر html تنظیم کنید:

<h1 style=”color:Tomato;”>Hello World</h1>
<p style=”color:DodgerBlue;”>Lorem ipsum…</p>
<p style=”color:MediumSeaGreen;”>Ut wisi enim…</p>

  • رنگ حاشیه CSS

شما می توانید رنگ حاشیه ها را تنظیم کنید:

<h1 style=”border:2px solid Tomato;”>Hello World</h1>
<h1 style=”border:2px solid DodgerBlue;”>Hello World</h1>
<h1 style=”border:2px solid Violet;”>Hello World</h1>

  • مقادیر رنگی CSS

در CSS، رنگ ها را می توان با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA نیز تعیین کرد:

<h1 style=”background-color:rgb(255, 99, 71);”>…</h1>
<h1 style=”background-color:#ff6347;”>…</h1>
<h1 style=”background-color:hsl(9, 100%, 64%);”>…</h1>

  • رنگ متن و رنگ زمینه

در این مثال، هم ویژگی background-color و هم مشخصه color را تعریف می کنیم:

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

  • فونت های CSS

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

  • خانواده های فونت CSS

در CSS، دو نوع نام خانوادگی فونت وجود دارد:

خانواده عمومی – گروهی از خانواده های فونت با ظاهری مشابه (مانند “Serif” یا “Monospace”)

خانواده فونت – یک خانواده فونت خاص (مانند “Times New Roman” یا “Arial”)

  • خانواده فونت

خانواده فونت یک متن با ویژگی font-family تنظیم می شود. ویژگی font-family باید چندین نام فونت را به عنوان یک سیستم “fallback” نگه دارد. اگر مرورگر از فونت اول پشتیبانی نمی کند، فونت بعدی را امتحان می کند و موارد دیگر.

با فونت مورد نظر خود شروع کنید و با یک خانواده عمومی پایان دهید تا اگر هیچ فونت دیگری در دسترس نیست، به مرورگر اجازه دهید فونت مشابه را در خانواده عمومی انتخاب کند.

توجه کنید که اگر نام یک خانواده فونت بیش از یک کلمه باشد، باید در علامت های نقل قول باشد، مانند: “Times New Roman”. بیش از یک خانواده فونت در یک لیست جدا شده با ویرگول مشخص شده است.

به عنوان مثال فونت را برای سه پاراگراف مشخص می کنیم:

.serif {
  font-family: “Times New Roman”, Times, serif;
}

.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: “Lucida Console”, Courier, monospace;
}

در مثال زیر فونت فقط را برای یک پاراگراف مشخص شده است:

p.impact {
  font-family: Impact, Charcoal, sans-serif;
}

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

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