بایگانی‌های دوره آموزش HTML و CSS

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

مرداد ۲۷, ۱۳۹۸مرداد ۲۶, ۱۳۹۸ از پیمان امیدی

[su_box title=”بخش آپدیت های مقاله” box_color=”#d97560″ radius=”20″]آموزش ویدئویی در تاریخ 27 مرداد 98 اضافه شد .[/su_box] سلام دوباره خدمت همه دوستان در جلسه هشتم از دوره ی آموزشی HTML و CSS خدمت شما هستیم تا مباحث جدید و جذاب تری را به شما آموزش دهیم . عاشقان طراحی وب با ما همراه باشید که امروز … ادامه

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

مرداد ۲۶, ۱۳۹۸مرداد ۱۶, ۱۳۹۸ از پیمان امیدی

[su_box title=”بخش آپدیت های مقاله” box_color=”#d97560″ radius=”20″]آموزش ویدیئویی در تاریخ 18 مرداد 98 اضافه شد .[/su_box]

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

[toc]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مثال :

body

{

background-color:#00ffee;

}

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

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

[su_note note_color=”#25881e” text_color=”#fff” radius=”10″]این از روش خارجی بود که اصولی ترین روش و بهترین راه برای نوشتن کد های css استفاده از این روش است.[/su_note]

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

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

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

<head>

<style>

body

{

background-color: #aa12ee;

}

</style>

</head>

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

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

<h1 style="color:blue; margin-left:30px;">this is a heading</h1>

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

[su_note note_color=”#c8112a” text_color=”#fff” radius=”10″]نکته : یکی از بدترین حالاتی که به کد شما ضربه میزند همین روش است که به شما پیشنهاد میدهیم اگر میتوانید به هیچ وجه از این روش کد نویسی استفاده نکنید.[/su_note]

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

توضیحات در CSS :

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

/* این یک کامنت است */

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

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

بهمن ۲, ۱۳۹۹مرداد ۱۴, ۱۳۹۸ از پیمان امیدی

[su_box title=”بخش آپدیت های مقاله” box_color=”#d97560″ radius=”20″]جلسه تمرینی جدید در تاریخ 15 مرداد 98 اضافه شد .[/su_box]

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

معرفی HTML5 :

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

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

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title> 
</head>
 <body>
 </body> 
</html>

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

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

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

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

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

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

D://images/web/aylinweb.jpg

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

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

[su_note note_color=”#ec0e07″ text_color=”#fff” radius=”10″]نکته : برای آدرس دهی به یک سایت قاعدتا نمی شود که از آدرس دهی نسبی استفاده کرد . در این حالت از آدرس خود سایت استفاده کنیم. که همان مطلق میشود . ولی برای تصویر یا هر فایل دیگری که میتوان در فولدر ریشه آپلود کرد باید از آدرس نسبی استفاده کرد.[/su_note]

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

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

<a href="آدرس مقصد لینک" > محتوایی که کاربر روی آن کلیک میکند. </a>

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

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

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

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

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

<a href="http://google.com" >لینک به سایت گوگل</a>

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

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

<a href="mailto : [email protected]"> ارسال ایمیل به سایت آیلین وب </a>

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

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

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

<a href="http//aylinweb.com" target="_blank">سایت آیلین وب </a>

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

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

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

<img src="images/aylinweb.png" alt="تصویر لوگوی سایت آیلین وب" width="400" height="400" title="آیلین وب">

[su_note note_color=”#0fc617″ text_color=”#fff” radius=”10″]نکته : تگ img داری تگ پایانی نیست و فقط یک تگ شروع دارد و در همان جا تمام میشود.[/su_note]

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

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

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

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

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

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

<body>
 <table>
 <tr>
 <td>
</td>
 </tr>
 </table>
 </body>

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

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

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

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

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

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

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

<table> <tr>

<td>شاد </td>

<td> ناراحت</td>

<td>عصبانی </td> </tr> <tr>

<td>زرد </td>

<td> قرمز</td>

<td>آبی </td> </tr> <tr>

<td>آفتابی </td>

<td> بارانی</td>

<td>ابری </td>

</tr>

</table>

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

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

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

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

<form>

نام<br>

<input type="text" name="fristname">

رمز عبور:<br>

<input type="password" name="password">

ایمیل<br>

<br><input type="email" name="mail">

<input type="submit" value="ارسال اطلاعات">

</form>

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

نمونه ایجاد یک فرم در html — ایجاد یک فرم در html

تگ <input> :

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

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

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

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

[su_note note_color=”#027607″ text_color=”#fff” radius=”10″]بهتون قول داده بودم که یه جلسه تمرینی از Html رو براتون ایجاد کنم . و اگه کسی فایل تمرینی رو خواست در زیر همین مقاله در کامنت ها درخواست کنید براتون میفرستم.[/su_note]

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

مرداد ۱۳, ۱۳۹۸ از پیمان امیدی

سلام به همه دوستان و همراهان سایت آیلین وب با جلسه دوم از دوره آموزشی 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> محتوا را به خط بعدی میبرد. برای درک بهتر حتما ویدئو را ببینید.

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

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

بهمن ۸, ۱۳۹۹مرداد ۹, ۱۳۹۸ از پیمان امیدی

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