آموزش HTML – CSS (خاصیت های Margin , padding , display ,float در CSS)

khasiiatha dar css

سلام دوباره خدمت همه دوستان در جلسه هشتم از دوره ی آموزشی HTML و CSS خدمت شما هستیم تا مباحث جدید و جذاب تری را به شما آموزش دهیم . عاشقان طراحی وب با ما همراه باشید که امروز میخواهیم در مورد padding ، margin و float صحبت بکنیم و مطمئن باشید که این مباحث … ادامه

شروع و آشنایی با اصول کدنویسی در CSS

INTRO CSS
بخش آپدیت های مقاله
آموزش ویدیئویی در تاریخ 18 مرداد 98 اضافه شد .

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

[toc]

CSS چیه و چطور کار میکند؟

تفاوت بین HTML و CSS
فرق HTML با CSS

حتما در تصویری که در بالا میبینید متوجه عمق کار شده اید و میدانید این دو زبان با هم چقدر کار های زیبایی انجام میدهند و شما اگر تنها زبان HTML را در نظر بگیرید میشود به یک اسکلت و پایه کار تشبیه کرد و این CSS است که با کد های طراحی که دارد میتواند یک ظاهر زیبا از آن اسکلت بسازد و شما با آن دو است که یک وبسایت کامل خواهید داشت .

نکته : اگر میخواهید یک سایت را با وردپرس ایجاد کنید طراحی سایت با وردپرس را از دست ندهید

CSS به چند روش قابل استفاده است :

  • روش External یا خارجی :

در این روش فایل css در جای دیگری ذخیره شده و توسط کد های  html فراخوانی میشود .

  • روش internal یا داخلی :

در این روش شما کد های css را در head و با تگ <style> باید بنویسید .

  • روش Inline یا درون خطی :

در این روش شما کد های css خود را درون کد های html مینوسید و هر کجا که خواستید متوانید این کد ها را به کار ببرید.

مزیت های کدنویسی CSS :

  1. تعداد بسیار زیاد خصوصیات CSS نسبت به HTML و عدم محدودیت در استفاده کردن از این خصوصیات .
  2. طراحی بسیار راحت توسط CSS
  3. باعث بالا رفتن سرعت سایت میشود چون CSS در مرورگر سیستم ذخیره میشود

نحوی استفاده از کد های CSS در HTML :

روش اول (با کد نویسی External):

این روش را قدم به قدم باهم شروع به کار میکنیم . اولین کاری که باید انجام دهید این است که یک فایل css ایجاد کنید و برای این کار باید یک فایل با پسوند css. ایجاد کنید. و بهتر است که نام آن را اینطور اسم گذاری کنید style.css چرا که اصول این فایل در اکثر قالب های سایت به این نام است .

اولین کار این است که در ادیتور brackets فایل style.css رو در روت فولدر خود ایجاد کنید

ایجاد فایل استایل دهی
ایجاد فایل style.css

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

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

مثال :

شما برای تغییرات هر قسمتی کافی است که نام آن عنصر را بنویسید و هر مقداری که میخواهید را به آن بدهید .

در syntax کد نویسی css باید اسم ویژگی رو بنویسید و بعد با علامت (:) مقدار را جلوی آن بنویسید و در انتها حتما باید علامت سمی کالن(;) را بگذارید.

این از روش خارجی بود که اصولی ترین روش و بهترین راه برای نوشتن کد های css استفاده از این روش است.

با مثال بیشتر در ویدئوی آموزشی آشنا میشوید.

روش دوم (با کدنویسی internal):

برای این روش هم کافی است که کدهای مورد نظر را در head  و در تگ style بنویسید. که به شکل زیر نوشته میشود و از لحاظ نوشتاری فرقی با قبلی ندارد .

روش سوم (با کدنویسی inline):

در این روش به این صورت است که شما در هر قسمت از کد html خود خواستید میتوانید کد نویسی css رو بنویسید و نحوی نوشتن آن به صورت زیر است.

همانطور که میبینید کد css در تگ ابتدایی h1 قرار دادیم و  نگران کد های که نوشتیم نباشید در ادامه آموزش ها با همه ی آنها آشنا خواهیم شد .

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

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

توضیحات در CSS :

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

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

دوره آموزش HTML و CSS (نحوه ی آدرس دهی ، استفاده از لینک ها ، تصاویر و فرم ها در HTML)

links and pic
بخش آپدیت های مقاله
جلسه تمرینی جدید در تاریخ 15 مرداد 98 اضافه شد .

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

معرفی HTML5 :

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

برای این که مرورگر بفهمد که شما از HTML5 استفاده میکنیم باید در ابتدای کد خود یک معرفی داشته باشید که به این  صورت است .

اگر شما در ابتدای کد HTML از سند معرفی استفاده کنید کد شما با استاندارد های HTML5 خوانده میشود.

آدرس دهی در صفحات وب :

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

آدرس دهی نسبی و منطقی
آدرس دهی منطقی و نسبی در HTML

آدرس دهی مطلق Absolute :

آدرس دهی مطلق درحالتی که لوکال است و زمانی که قصد داریم درون فولدر ریشه قرار بدیم و هیچ وقت هم توصیه نمی شود. و به شکل زیر است :

D://images/web/aylinweb.jpg

آدرس دهی نسبی Relative :

نسبت به root folder آدرس دهی میشود و شروع آدرس دهی از فولدر ریشه است (فولدر ریشه همان پوشه ای است که شما تمام اطلاعات فایل و قالب را در آن نگه داری میکنید).

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

لینک دهی در زبان HTML :

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

بررسی تگ <a> در HTML:

برای این که شما یک لینک داشته باشید باید از تگ <a> استفاده کنید و این تگ دارای تگ انتهایی است در قسمت تگ شروع لینک یک سری از خصوصیات است که باهم آنها را بررسی میکنیم .

خاصیت href در تگ <a>:

  • لینک به یک آدرس خارجی :

href این امکان را به شما میدهد که شما مقصد لینک مورد نظر را در آن بنویسید و در این قسمت میتوانید آدرس یک سایت (برای آدرس دهی به یک سایت از آدرس دهی منطقی استفاده میشود)، یک فایل و یا هر چیز دیگری در ادامه نحوه نوشتن آدرس در href را بررسی میکنیم :

  • لینک به یک آدرس ایمیل

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

مبحث کامل لینک ها داخل ویدوی آموزشی

خاصیت Target در تگ <a>:

بیشتر برنامه نویسان وب در جواب خاصیت target  گزینه blank_ را انتخاب میکند ولی ما چند گزینه دیگر را بررسی میکنیم و میگم که چه کاری انجام میدن :

  • blank_ : این گزینه لینک شما را در صفحه جدید باز میکند
  • self_ : این گزینه لینک را در کادر فعلی باز میکند (در HTML5 این گزینه کاملا نادیده گرفته میشود و کار نمیکند).
  • parent_ : این گزینه لینک را در یک فرم در همان صفحه باز میکند (در HTML5 این گزینه کاملا نادیده گرفته میشود و کار نمیکند).
  • top_ : و این گزینه هم لینک را در بالای همان صفحه باز میکند (در HTML5 این گزینه کاملا نادیده گرفته میشود و کار نمیکند).

استفاده از تگ <img> در HTML :

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

نکته : تگ img داری تگ پایانی نیست و فقط یک تگ شروع دارد و در همان جا تمام میشود.

توضیحات کدهایی که در تگ <img> استفاده شده :

  • src : این خاصیت به شما کمک میکنه تا اینکه بتونید آدرس تصویر رو وارد کنید.
  • alt : وقتی برای تصویر شما مشکلی پیش اومد و تصویر نتونست لود بشه هر چیزی که داخل alt بنویسید نمایش داده میشه.
  • title :  همانطور که از اسمش معلومه عنوان تصویر رو نمایش میده و سعی کنید همیشه برای تصاویر عنوان انتخاب کنید. و زمانی که با اشاره گر رو تصویر میرید عنوان نمایش داده میشه.
  • width , height : این دو گزینه به شما کمک میکند که طول و ارتفاع تصویر را کنترل کنید.

و به امید خدا وقتی که توانستید CSS رو یاد بگیرید کنترل بیشتری رو تصاویر خواهید داشت.

استفاده از تگ <table> در HTML :

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

بریم سراغ ایجاد جدول ، برای ایجاد یک جدول باید از تگ ابتدایی و انتهایی <table> استفاده کنید . و برای ایجاد سطر و ستون ها هم یک سری تگ های دیگه میخواد که باهم آشنا میشیم.

خوب همونطور که گفتم داخل تگ <body> باید از جدول استفاده کنیم شما برای ایجاد جدول برای هر سطر باید از تگ <tr> استفاده کنید و برای ایجاد هر ستون از تگ <td> باید استفاده کرد.

تگ های جدول هم مثل بقیه ی تگ ها دارای atribute هایی هستند که ما در زیر یه آنها اشاره میکنیم:

border :  این خصوصیت مثل اسمی که دارد در تگ <table> استفاده میشود و با مقدار 0 تا شروع میشود هر چقدر عدد بیشتر شود ضخامت خطوط اطراف جدول بیشتر میشود . و اگر هم صفر باشید خطوط حذف خواهد شد.

colspan : برای ادغام کردن چند ستون مورد استفاده قرار میگیرد که در ویدئو نحوی استفاده کامل را شرح دادم.

rowspan : این خاصیت هم دقیقا برعکس گزینه قبل کار میکند و چند سلول را باهم ادغام میکند به صورت عمودی.

برای ایجاد چنین جدولی از نمونه کد زیر میتوانید استفاده کنید:

شادزردآفتابی
ناراحتقرمزبارانی
عصبانیآبیپابری

استفاده از تگ <form> در HTML :

فرم ها در صفحات وب بسیار کاربرد دارند چرا که یکی از عضو های جدا نشدنی وب هستند . شما در اکثر سایت ها میبینید که از فرم ها برای ثبت نام افراد و همچنین گرفتن یک سری اطلاعات از کاربران استفاده میشود.

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

برای ایجاد یک فرم باید از تگ <form>  استفاده کنید که دارای تگ انتهای نیز هست و تمام المان هایی که میخواهید داشته باشید را باید داخل این دو تگ بنویسید:

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

نمونه ایجاد یک فرم در html
ایجاد یک فرم در html
  • تگ <input> :

این تگ به شما کمک میکند که هر نوع ورودی را از کاربر بگیرید داخل این تگ از خاصیت type برای نوع ورودی استفاده میکید به عنوان مثال اگر نوع ورودی شما یک نام است میتوانید از نوع text استفاده کنید. و انواع type های مختلف که در ویدئو به همه ی آنها اشاره کرده ام.

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

منتظر جلسه تمرینی در همین مقاله باشید ….

اگه هر نوع سوالی داشتید ما منتظر کامنت های شما هستیم . حتما در انتهای همین جلسه تمرینی از ما بپرسید. و مطمئن باشید در کمترین زمان پاسخ خواهیم داد.

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

دوره آموزش HTML و CSS (کار با Attribute ها و تگ های Font ، hr و br) + ویدئوی آموزشی

kar ba khasiatha

سلام به همه دوستان و همراهان سایت آیلین وب با جلسه دوم از دوره آموزشی HTML & CSS خدمت شما هستیم که قسمتی از HTML رو پیش ببریم . در این جلسه از آموزشمون قصد داریم که ابتدا با خاصیت های تگ ها کار کنیم و بگیم که چه تغییراتی میتونیم روی اونا انجام بدیم. قبل از این که شروع به آموزش این جلسه از دوره آموزشی HTML و CSS بکنیم بهتره بهتون بگم که من در این جلسه در استفاده از ادیتور Brackets افزونه Emmet رو نصب میکنم تا به کد نویسی شما سرعت ببخشیم.

[toc]

نصب افزونه Emmet در ادیتور Brackets :

برای این کار کافی است که در ویرایشگر Brackets از زیر منوی file  روی گزینه Extension Manger کلیک کنید تا صفحه ای برای شما باز شود.

نصب افزونه Emmet
نصب افزونه Emmet در ادیتور Brackets

بعد از این که این صفحه نمایان شد در قسمت سرچ افزونه ها میتونید پلاگین Emmet رو سرچ کنید و بعد از نمایش افزونه میتونید رو گزینه Install کلیک کنید . همانطور که در تصویر بالا میبینید من افزونه ور از قبل نصب کردم  و گزینه نصب برای من فعال نیست بعد از نصب این افزونه متونید از امکانات Emmet استفاده کنید . بعد از این کار میریم سراغ ادامه کار .

برای کد نویسی بهتر سعی کنید که از ویرایشگر کد Brackets استفاده کنید.

قبل از شروع کار اگه قسمت های قبلی آموزش رو ندیده باشید حتما ویدئو ها رو کامل ببینید و تمرین کنید و در ادامه با ما همراه باشید.

Attribute ها در تگ های HMTL :

اصولا برای کار با خاصیت تگ ها یک سری خصوصیت ها جدید به تگ اضافه میشود که شما به راحتی و به بهترین شکل میتوانید آنها را کنترل کنید. ما در ادامه این جلسه از آموزش HTML و CSS یک سری از Attributs ها رو به شما معرفی میکنیم که در آموزش های بعدی با خیلی از آنها آشنا خواهید شد.

خاصیت Align :

این Attribut به شما کمک میکنه تا تراز بندی اون متنی یا هر المان دیگری رو کنترل کنید . ما در این قسمت در تگ های heading و <p> استفاده کردایم و لازم به ذکر است که در بعضی از تگ ها این خاصیت عمل نمیکند که در ادامه آموزش ها آشنا خواهید شد.

نحوی استفاده از خاصیت align در تگ ها:

 

و یا در تگ <body> برای این که تمام سایت شما به صورت راستچین و یا چپچین شود نمی توانید از تگ align استفاده کنید چرا که این خاصیت را پشتیبانی نمیکند همان طور که گفتم قرار نیست خاصیت align روی همه تگ ها کار کنید

برای این که کل تراز بندی سایت را تغییر دهیم از خاصیت dir  باید استفاد کنید و نحوی استفاده از آن به این صورت است که شما در تگ ابتدایی body این طور مینویسید

این خاصیت را حتما در تمرین های خود تست کنید تا تاثیر آنر را بر محتوای صفحه ای که ایجاد میکند ببینید. و دیگر خاصیت ها را که میبینید استفاده کرده ایم bgcolor رنگ پس زمینه کل صفحه را تغییر میدهد و text هم رنگ متن را تغییر میدهد در کل اگر میخواهید که تغییرات کلی به صفحه خود دهید حتما در داخل تگ body بنویسید.

dir همان direction صفحه است که مخفف شده است . و دارای دو گزینه است یکی rtl به معنای right to left و دیگری ltr به معنای left to right  .

نکته : حتما تگ هایی که دارای تگ پایانی هستند مثل تگ پارگراف ، هدینگ و خیلی از تگ های دیگر ، تگ انتهایی آن را حتما در انتهای کار بگذارید . گرچه شما اگر تگ انتهای را نگذارید کد بدرستی کار خواهد کرد ولی اگر شما از یادتون بره که تگ پایانی رو بزارید امکان داره در ادامه با کد هایی که مینویسید به تداخل بخوره و کدتون رو به هم بریزه .

معرفی تگ Font در HTML :

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

در تکه کدی که در بالا میبنید من از تگ font استفاده کردم و از چند خاصیت هم داخل تگ به کار برده ام.

خاصیت color در تگ فونت به شما کمک میکند تا رنگ متن رو عوض کنید و  همچنین خاصیت face به شما در انتخاب فونت نوشتاری کمک میکند که در ادامه آموزش ها حتما در مورد ایمپورت کردن انواع فونت به Hmtl  خود آموزش خواهیم داد نگران محدویت های الان نباشید.

پیشنهاد آیلین وب : اگر این جلسه را کامل متوجه نشدید جلسه قبل را حتما ببینید

معرفی تگ b و I :

تگ <b>:  این تگ برای bold و زخیم کردن متن استفاده میشود که یک تگ همسان به نام تگ <strong> همین کار را انجام میدهم . و فرقی نمیکند که شما از کدام یک از آن دو استفاده کنید.

تگ <i>:  این تگ هم مثل برای Italic کردن متن استفاده میشود و یک تگ مشابه هم دراد به نام <em> که همان کار را انجام میدهد .

معرفی تگ های List :

برای ایجاد لیست ها شما دو نوع را در اختیار دارید ordred list و Unordred list که ما بیشتر از UL ها استفاده میکنیم که به آنها لیست های غیر ترتیبی و به OL لیست های ترتیبی میگویند .

نحوی استفاده از لیست ها به ترتیب زیر است :

همان طور که میبیند آنها تفاوت چندانی باهم ندارند .

هر دو یک لیست ایجاد میکنند.

نکته : HTML در یک زبانی است که به حروف کوچک و بزرگ حساس نیست ولی خود سازمان W3C پیشنهاد داده که از حروف کوچک استفاده کنید.

معرفی تگ های CONTANER و  EMPTY :

تگ های Contaner :  این نوع تگ ها دارای تگ های ابتدا و انتها هستند مثل خیلی از تگ های html .

تگ های Empty :  این نوع تگ ها هم دارای تگ پایانی نیستند و داخل خود همان تگ بسته میشوند . مثل تگ های </hr> و تگ </br>

 معرفی تگ های <hr> و <br>:

این نوع تگ ها دارای تگ پایانی نیستند و کار تگ <hr> این است که یک خط افقی میکشد و تگ <br> محتوا را به خط بعدی میبرد. برای درک بهتر حتما ویدئو را ببینید.

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

دوره آموزش طراحی سایت با HTML و CSS | آموزش HTML و CSS + [فیلم و 100% رایگان]

html and css

دوره آموزش کامل HTML و CSS : آموزش زبان های HTML&CSS سلامی گرم به شما عزیزان علاقه مند به طراحی وب سایت، در بخش های قبلی دوره آموزش وردپرس رو به صورت کامل براتون قرار دادیم که جزئی از طراحی سایت بدون کدنویسی بود. الان هم با آموزش HTML و CSS در خدمت شما عزیزان … ادامه