سلام به همه دوستان و همراهان سایت آیلین وب با جلسه دوم از دوره آموزشی HTML & CSS خدمت شما هستیم که قسمتی از HTML رو پیش ببریم . در این جلسه از آموزشمون قصد داریم که ابتدا با خاصیت های تگ ها کار کنیم و بگیم که چه تغییراتی میتونیم روی اونا انجام بدیم. قبل از این که شروع به آموزش این جلسه از دوره آموزشی HTML و CSS بکنیم بهتره بهتون بگم که من در این جلسه در استفاده از ادیتور Brackets افزونه Emmet رو نصب میکنم تا به کد نویسی شما سرعت ببخشیم.
[toc]
نصب افزونه Emmet در ادیتور Brackets :
برای این کار کافی است که در ویرایشگر Brackets از زیر منوی file روی گزینه Extension Manger کلیک کنید تا صفحه ای برای شما باز شود.
بعد از این که این صفحه نمایان شد در قسمت سرچ افزونه ها میتونید پلاگین Emmet رو سرچ کنید و بعد از نمایش افزونه میتونید رو گزینه Install کلیک کنید . همانطور که در تصویر بالا میبینید من افزونه ور از قبل نصب کردم و گزینه نصب برای من فعال نیست بعد از نصب این افزونه متونید از امکانات Emmet استفاده کنید . بعد از این کار میریم سراغ ادامه کار .
[su_note note_color=”#0fc617″ text_color=”#fff” radius=”10″]برای کد نویسی بهتر سعی کنید که از ویرایشگر کد Brackets استفاده کنید.[/su_note]
قبل از شروع کار اگه قسمت های قبلی آموزش رو ندیده باشید حتما ویدئو ها رو کامل ببینید و تمرین کنید و در ادامه با ما همراه باشید.
Attribute ها در تگ های HMTL :
اصولا برای کار با خاصیت تگ ها یک سری خصوصیت ها جدید به تگ اضافه میشود که شما به راحتی و به بهترین شکل میتوانید آنها را کنترل کنید. ما در ادامه این جلسه از آموزش HTML و CSS یک سری از Attributs ها رو به شما معرفی میکنیم که در آموزش های بعدی با خیلی از آنها آشنا خواهید شد.
خاصیت Align :
این Attribut به شما کمک میکنه تا تراز بندی اون متنی یا هر المان دیگری رو کنترل کنید . ما در این قسمت در تگ های heading و <p> استفاده کردایم و لازم به ذکر است که در بعضی از تگ ها این خاصیت عمل نمیکند که در ادامه آموزش ها آشنا خواهید شد.
نحوی استفاده از خاصیت align در تگ ها:
<h1 align="center" > <p align="right">
و یا در تگ <body> برای این که تمام سایت شما به صورت راستچین و یا چپچین شود نمی توانید از تگ align استفاده کنید چرا که این خاصیت را پشتیبانی نمیکند همان طور که گفتم قرار نیست خاصیت align روی همه تگ ها کار کنید
برای این که کل تراز بندی سایت را تغییر دهیم از خاصیت dir باید استفاد کنید و نحوی استفاده از آن به این صورت است که شما در تگ ابتدایی body این طور مینویسید
< body dir="rtl" bgcolor="red" text="white" >
این خاصیت را حتما در تمرین های خود تست کنید تا تاثیر آنر را بر محتوای صفحه ای که ایجاد میکند ببینید. و دیگر خاصیت ها را که میبینید استفاده کرده ایم bgcolor رنگ پس زمینه کل صفحه را تغییر میدهد و text هم رنگ متن را تغییر میدهد در کل اگر میخواهید که تغییرات کلی به صفحه خود دهید حتما در داخل تگ body بنویسید.
dir همان direction صفحه است که مخفف شده است . و دارای دو گزینه است یکی rtl به معنای right to left و دیگری ltr به معنای left to right .
[su_note note_color=”#ec4107″ text_color=”#fff” radius=”10″]نکته : حتما تگ هایی که دارای تگ پایانی هستند مثل تگ پارگراف ، هدینگ و خیلی از تگ های دیگر ، تگ انتهایی آن را حتما در انتهای کار بگذارید . گرچه شما اگر تگ انتهای را نگذارید کد بدرستی کار خواهد کرد ولی اگر شما از یادتون بره که تگ پایانی رو بزارید امکان داره در ادامه با کد هایی که مینویسید به تداخل بخوره و کدتون رو به هم بریزه .[/su_note]
معرفی تگ Font در HTML :
خوب همنطور که از اسم این تگ پیداست شما میتونید خاصیت متن رو تغییر بدید . و مثل بیشتر تگ ها دارای تگ بسته نیز میباشد. و به صورت زیر در کد استفاده میشود .
< color="red" face="tahoma" font > </p>آموزش طراحی سایت در آیلین وب <p> </font>
در تکه کدی که در بالا میبنید من از تگ font استفاده کردم و از چند خاصیت هم داخل تگ به کار برده ام.
خاصیت color در تگ فونت به شما کمک میکند تا رنگ متن رو عوض کنید و همچنین خاصیت face به شما در انتخاب فونت نوشتاری کمک میکند که در ادامه آموزش ها حتما در مورد ایمپورت کردن انواع فونت به Hmtl خود آموزش خواهیم داد نگران محدویت های الان نباشید.
پیشنهاد آیلین وب : اگر این جلسه را کامل متوجه نشدید جلسه قبل را حتما ببینید
معرفی تگ b و I :
تگ <b>: این تگ برای bold و زخیم کردن متن استفاده میشود که یک تگ همسان به نام تگ <strong> همین کار را انجام میدهم . و فرقی نمیکند که شما از کدام یک از آن دو استفاده کنید.
تگ <i>: این تگ هم مثل برای Italic کردن متن استفاده میشود و یک تگ مشابه هم دراد به نام <em> که همان کار را انجام میدهد .
<b> متن نوشته شده زخیم خواهد شد. </b> <i> متن نوشته شده کج خواهد شد. </i>
معرفی تگ های List :
برای ایجاد لیست ها شما دو نوع را در اختیار دارید ordred list و Unordred list که ما بیشتر از UL ها استفاده میکنیم که به آنها لیست های غیر ترتیبی و به OL لیست های ترتیبی میگویند .
نحوی استفاده از لیست ها به ترتیب زیر است :
<OL> لیست شماره یک</Li><li> لیست شماره دو</Li><li> </OL> <UL> لیست شماره یک</Li><li> لیست شماره دو</Li><li> </UL>
همان طور که میبیند آنها تفاوت چندانی باهم ندارند .
هر دو یک لیست ایجاد میکنند.
[su_note note_color=”#ec0e07″ text_color=”#fff” radius=”10″]نکته : HTML در یک زبانی است که به حروف کوچک و بزرگ حساس نیست ولی خود سازمان W3C پیشنهاد داده که از حروف کوچک استفاده کنید.[/su_note]
معرفی تگ های CONTANER و EMPTY :
تگ های Contaner : این نوع تگ ها دارای تگ های ابتدا و انتها هستند مثل خیلی از تگ های html .
تگ های Empty : این نوع تگ ها هم دارای تگ پایانی نیستند و داخل خود همان تگ بسته میشوند . مثل تگ های </hr> و تگ </br>
معرفی تگ های <hr> و <br>:
این نوع تگ ها دارای تگ پایانی نیستند و کار تگ <hr> این است که یک خط افقی میکشد و تگ <br> محتوا را به خط بعدی میبرد. برای درک بهتر حتما ویدئو را ببینید.
امیدوارم که از این این مقاله نهایت استفاده را برده باشید و اگر هر گونه سوال و یا پیشنهادی داشتید حتما با در ارتباط باشید. منتظر شما هستیم
