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

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

آگوست 18, 2019آگوست 17, 2019 از پیمان امیدی

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

آموزش HTML و CSS (کار با selector ها ، فونت و حالت های مختلف لینک)

آگوست 18, 2019آگوست 16, 2019 از پیمان امیدی

بخش آپدیت های مقاله

آموزش ویدئویی در تاریخ 26 مرداد 98 اضافه شد .

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

در ابتدای آموزش میخوام در مورد سلکتور ها بهتون بگم که چیکار میکنن و به چه دردی میخورن . پس شروع کنیم :

[toc]

کار با سلکتور ها در HTML :

دوستان ما در HTML چندین نوع سلکتور داریم که استفاده میشود ولی بیشترین سلکتور هایی که در این آموزش ما آنها کار میکنیم در پایین لیست میشود :

tag selector :

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

مطالعه بیشتر : آشنایی بیشتر با تگ سلکتور ها با استفاده از background , border

به مثال زیر توجه کنید :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>

p
{
border-radius: 20px;
border: solid;

}
h1
{
border-left-style: solid;
border-color:red;

}
</style>
</head>
<body>
<h1>hello aylinweb</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>

</body>
</html>

<!DOCTYPE html>

<head>

<style>

{

border-radius: 20px;

border: solid;

}

{

border-left-style: solid;

border-color:red;

}

</style>

</head>

<body>

<h1>hello aylinweb</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>

</body>

</html>

همانطور که در کد بالا میبیند تغییراتی که به تگ ها داده شده از طریق تگ سلکتور ها بوده . و اگر ما هر چقدر تگ p یا h1 داشته باشیم تمام آنها به آن صورت که به آنها استایل داده ایم تغییر خواهند کرد و عملا این کار رو نمیشه توی صفحاتی که ایجاد میکنیم انجام دهیم ولی برای بعضی از تگ ها مثل تگ body میشود چنین تغییراتی را انجام داد . بریم سراغ سلکتور بعدی .

class selector :

با مشکلاتی که در بالا داشیم کلاس ها میتوانند بسیار عالی باشند چرا که از حجم کدنویسی ما کم خواهد شد و سرعت سایت ما را بالاتر خواهد برد . برای استفاده از کلاس ها باید از کلمه class در Html استفاده کنید به این شکل:

<p class="mayp">

1	<p class="mayp">

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

ابتدای اسم با عدد شروع نشود
از علامت های غیر متعارف مثل (@#$%) استفاده نکنید
ابتدای اسم با آندرلاین شروع نشود (_)
و…

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

<!DOCTYPE html>
<html>
<head>
<style>
body
{
direction: rtl;
}
.city {
background-color: lightblue;
color: white;

}
.Village {
background-color: blueviolet;
color: white;

}
</style>
</head>
<body>

<div class="city">
<h2>شهر</h2>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده</p>
</div>

<div class="Village">
<h2>روستا</h2>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده</p>
</div>

<div class="city">
<h2>شهر</h2>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده</p>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body

{

direction: rtl;

}

.city {

background-color: lightblue;

color: white;

}

.Village {

background-color: blueviolet;

color: white;

}

</style>

</head>

<body>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده</p>

</div>

<h2>روستا</h2>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده</p>

</div>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده</p>

</div>

</body>

</html>

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

و در قسمت کلاس که میبینید ما چند تگ h و p دارین اما رنگ و شکل متفاوتی دارند و این به کمک کلاس ها است .

نکته ها :

از class میتونید در همه جای Html و در همه المنت ها استفاده کنید .
اسم class به حروف بزرگ و کوچک حساس است.

ID selector :

یکی دیگه از سلکتور هایی که بهتون معرفی میکنم id selector هست که نحوی کار این سلکتور هم تقریبا شبیه کلاس ها هست ، به این شکل که شما برای معرفی در html باید از کلمه id استفاده کنید و برای استفاده id در css باید از علامت # استفاده کنید .

<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>

<style>

#myHeader {

background-color: lightblue;

color: black;

padding: 40px;

text-align: center;

}

</style>

<h1 id="myHeader">My Header</h1>

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

کار با font در CSS :

در CSS هم مثل HTML میتوانید از فونت ها استفاده کنید و در خاصیت های که دارد میتوانید نوع فونت ، اندازه و استایل را تغییر دهید پس بریم سراغ کار با font در css :

اولین ویژگی که شما باید با آن آشنا شوید font-family است .

مطالعه بیشتر : نحوی اضافه کردن فونت به وردپرس

p
{
	font-family: tahoma,sans-serif;
}

{

font-family: tahoma,sans-serif;

}

در بالا شما نام یک فونت رو میبینید که این فونت تاهوما پیشفرض خود ویندوز هست در ادامه آموزش ها حتما اضافه کردن فونت رو خواهم گفت و بعد کلمه serif هست اجازه بدین یه توضیح بدم تا بهتر متوجه بشید :

sans-serif : به این شکل است که در حروفی که هست قسمت های انتهای حروف به صورت تیز و نشان داده میشوند .

serif : به صورتی است که حروف در انتهایشان به حالت خمیده هستند .

تفاوت بین دو نوع نوشتار — تفاوت sans-sarif و sarif

شما با font چندین گزینه برای انتخاب دارید که با هم آنها را بررسی میکنیم :

font-style : شما با این گزینه میتوانید استایل متن خود را تغییر دهید که داری سه مقدار normal , italic و oblique که شما را از کد های html راحت خواهد کرد .

font-size : با استفاده از این خصوصیت میتوانید اندازه متن خود را تغییر دهید که برای مقدار آن میتوانید از غدد و (px) استفاده کنید و بسیار کاربردی است .

p
{
font-family:"tahoma", serif;
font-style: italic;
font-size: 20px;
}

{

font-family:"tahoma", serif;

font-style: italic;

font-size: 20px;

}

حالات مختلف در لینک ها :

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

a:link

این در حالتی است که لینک به صورت عادی نمایش داده میشود .

a:visited

این در حالتی است که شما بر روی لینک کلیک کرده اید و اتفاقی که بعد از کلیک میفتد(در ویدئو بررسی میکنیم)

a:hover

این خصوصیت هم برای زمانی که شما اشاره گر را روی لینک میبرید و روی آن مکث میکنید .

a:active

این خاصیت در حالتی است که شما روی لینک کلیک میکنید و کلیک خود را برای چند لحظه نگه میدارید .

و حالا در جواب این گزینه ها میتوانید تغییراتی را که میخواهید را روی لینک انجام دهید.

a:link, a:visited

{


background-color: #f44336;


color: white;

text-align: center;


text-decoration: none;
}

a:hover, a:active

{
background-color: red;
}

a:link, a:visited

{

background-color: #f44336;

color: white;

text-align: center;

text-decoration: none;

}

a:hover, a:active

{

background-color: red;

}

در بالا یک خط شاید برای شما قابل درک نباشد ;text-decoration: none این کد خط زیر لینک را حذف میکند .

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

دوره آموزش HTML – CSS (آشنایی با color ، background و border)

آگوست 16, 2019آگوست 10, 2019 از پیمان امیدی

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

در ضمن یادتون نره که جلسه قبلی آموزش css رو ببینید که این دو جلسه با هم در ارتباط هستن .

[toc]

رنگ ها در CSS :

آنتخاب رنگ در طراحی وب — رنگ ها در html , css

خوب همانطور که میدانید رنگ ها در طراحی سایت ارزش زیادی دارند تا این که شما بتوانید بهترین ارتباط را با کاربر داشته باشید و ما در CSS از هر نوع مدل رنگی میتوانیم استفاده کنیم رنگ ها را نمایش دهیم به عنوان مثال میتونیم از RGB یا هگزا دسیمال و در ادامه از نوع ترنسپرنت هم میتوانیم استفاده کنیم . حالا نحوی اضافه و کار کردن با رنگ را در CSS رو میبینیم.

در جلسه قبلی بهتون گفتم که چطور یک فایل CSS رو ایجاد کنید و با استفاده از لینک آن را به HTML متصل کنید فرض کنید ما می خواهیم روی h1 که در html هست تغییرات انجام بدیم کافی است که در فایل css نام اون تگ و یا ویژگی رو بنویسیم با یک براکت باز و {} داخل آن کد های خود رو مینویسیم و حالا بریم سراغ کد نویسی .

پیشنهاد من به شما : شروع و آشنایی با کد نویسی css

h1

{

color: blue;

background-color: #eee;

}

{

color: blue;

background-color: #eee;

}

در کد بالا ما تونستیم رنگ پس زمینه و رنگ متن تگ h1 رو تغییر بدیم و یک سری کارهای دیگه میتونیم انجام بدیم که در ویدئو میتونید با اون آشنا بشید .

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

سایت flatuicolors.com :

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

سایت loremipsum.ir :

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

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

کار با Background در CSS :

شما میتوانید با پس زمینه ها رنگ ، تصویر و یا حالت آنها را تغییر دهید که با هم به بررسی آنها می پردازیم :

background-color : همانطور که در قمست رنگ ها هم به آن اشاره شده میتوانید رنگ پس زمینه خود را عوض کنید.
background-image : این گزینه به شما کمک میکند تا یک تصویر را به صفحه اصلی یا هر قسمت صفحه اضافه کنید .
background-repeat : این گزینه به این معنا است که تصویر و هر چیزی که برای پس زمینه انتخاب میکنید در صفحه تکرار شود یا خیر که داری چندین مقدار است (در حالت عادی که رو تکرار قرار دارد و no-repeat به این معنا است که از تصویر فقط یکی باشد هیچ گونه تکراری در صفحه نداشته باشد . repeat-x و y تکرار در محورای x,y را اشاره میکند که هر کدام را انتخاب کنید در همان محور تکرار خواهد شد).
background-attachment : این گزینه هم دارای دو مقدار برای انتخاب است (fixed و scroll) فیکس که همان به معنای ثابت بودن است تصویر شما هر چقدر به پایین اسکرول شود در جای خود ثابت است ولی اسکرول دقیقا برعکس آن عمل میکند و با محتوای صفحه به پایین اسکرول میشود .
background-position : این گزینه دارای چندین مقدار است که محل تصویر شما را انتخاب میکند (top , right , left , bottom) .

با تمام این گزینه ها کار خواهیم کرد و نتیجه را به شما نشان خواهیم داد .

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}

body {

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

background-attachment: scroll;

}

شما تمام این تکه کد بالا را میتوانید در یک خط هم جای دهید و کد شما کار کند :

body

{

background: #fff url("tree.jpg") no-repeat right top fixed;

}

{

background: #fff url("tree.jpg") no-repeat right top fixed;

}

این هم از کدهای background که خیلی پیچیده نبود و کار کردن با آنها راحت و آسوده است حتما یادتون نره که تمرین کنید .

مطالعه بیشتر : شروع کد نویسی با HTML

نحوه ی کار کردن با Border ها در CSS :

border ها اهمیت زیادی در طراحی صفحات وب دارند چرا که امرزه هر سایتی در طراحی خود از border ها استفاده میکند.

ما در border ها چندین نوع داریم که به بررسی آنها می پردازیم :

border-style : این گزینه چندین مقدار دارد که نوع نمایش خط را نشان می دهد که چگونه کار میکند به عنوان مثال (dotted , dashed , solid) این گزینه هایی است که شما میتوانید انتخاب کنید.
border-width : این گزینه که از اسمش هم پیداست ضخامت border را به ما نشان میدهد .
border-color : در این قسمت هم به راحتی می توانید رنگ خط مورد نظر را عوض کنید .
border-top-style : شما به جای top میتوانید اسم چهار جهت اصلی را ینویسید و نوع هر جهت را جداگانه انتخاب کنید .

این از گزینه هایی بود که شما می توانستید برای یک border انتخاب کنید.

و شما توسط تنها کلمه border میتوانید این کار های را انجام دهیم با هم ببینیم :

p {
border: 5px solid red;
}

p {

border: 5px solid red;

}

در خط بالا که میبینید چندین کار در یک خط نوشته شده است و که ضخامت و نوع و همچنین رنگ border را عوض کرده است .

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

p {
border-left: 6px solid red;
background-color: lightgrey;
}

p {

border-left: 6px solid red;

background-color: lightgrey;

}

تکه کد بالا دقیقا سمت چپ تگ P را استایل داده است .

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

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

آگوست 17, 2019آگوست 7, 2019 از پیمان امیدی

بخش آپدیت های مقاله

آموزش ویدیئویی در تاریخ 18 مرداد 98 اضافه شد .

یک سلام گرم به همه دوستانی که تا اینجای کار با ما همراه بودند و آموزش های 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">

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

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

مثال :

body

{

background-color:#00ffee;

}

body

{

background-color:#00ffee;

}

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

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

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

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

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

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

<head>

<style>

body

{

background-color: #aa12ee;

}

</style>

</head>

<head>

<style>

body

{

background-color: #aa12ee;

}

</style>

</head>

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

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

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

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

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

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

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

توضیحات در CSS :

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

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

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

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

دوره آموزش HTML و CSS (کار با متا تگ ها و آشنایی بار رنگ در HTLM)

آگوست 7, 2019آگوست 6, 2019 از پیمان امیدی

بخش آپدیت های مقاله

آموزش ویدیئویی در تاریخ 16 مرداد 98 اضافه شد .

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

مروری بر جلسه سوم از دوره HTML و CSS :

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

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

کار با رنگ ها در HTML :

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

معرفی رنگ ها در html — کار با رنگ ها در html

در تصویر بالا که میبینید قسمت های RGB و HEX انتخاب شده میتوانید در نرم افزار فوتوشاپ نحوی کار با آنها و ترکیب هایشان آشنا شوید .

رنگ های RGB

به صورت 255 رنگ انتخاب میشوند و از ترکیب سه رنگ قرمز ، سبز و آبی ایجاد میشود و اگر شما (255,0,0) RGB در کد خود بنویسید رنگ شما به صورت کاملا قرمز ایجاد خواهد شد و به مراتب میتونید که اعداد آن را کم و زیاد کنید تا رنگ مورد علاقه خود را ایجاد کنید.

کار با کد رنگی HEX

به این صورت است که شما یک علامت هشتگ (#) در ابتدای کد میزنید و در ادامه کد رنگ را انتخاب میکنید . به این صورت است که دو حرف اول قرمز و دو حرف دوم سبز و همچنین دو حرف آخر آبی است و به عنوان مثال ff0000 # به شما رنگ قرمز میدهد و تغییر این رنگ به صورت دوتایی است و اصولا شما برای رنگ سفید باید از 6 حرف f استفاده کنید برای این کار شما میتوانید کد خود را کوتاه کنید مثل fff# به ازای هر دو حرف مشابه میتوانید از یک حرف استفاده کنید . با کار کردن این رنگ ها بیشتر میتوانید این کد ها رو درک کنید .

در جلسه ویدئویی که ایجاد میکنم بیشتر با این کار آشنا خواهید شد.

کامنت ها در HTML :

شما میتوانید در کد های خود از متن ها و کد هایی استفاده کنید که در کد شما دیده شود ولی توسط مرورگر خوانده نشود syntax زیر:

<-- این یک متن برای نشان دادن کامنت است --!>

1	<-- این یک متن برای نشان دادن کامنت است --!>

در Html برای این که یک تکه از کد خود را تبدیل به کامنت کنید باید در ابتدای آن (–!>) استفاده کنید و در انتهای خط خود یا هر جایی که میخواید که کامنت شما تمام شود باید از (<–) استفاده کنید .

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

عناصر استفاده شده در تگ HEAD :

همانطور که میدانید تگ head یکی از تگ هایی است که در بین تگ <html> و تگ <body> نوشته میشود و ما برای این که سایت خود را با دنیایی بیرون در ارتباط کنیم باید از یک سری تگ ها در head استفاده کنیم .

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

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

<title> : این تگ عنوان سایت شما را مشخص میکند و حکم معرفی آن صفحه را دارد.

<style>: شما چندین نوع روش برای نوشتن کد های css دارید که در تگ style در این قسمت میتوانید که کدهای css را بنویسید.

<link> : این تگ به شما کمک میکند با فایل ها و کدهای بیرون از html ارتباط داشته باشید. مثل ارتباط با فایل css.

<script>: شما میتوانید در بین این تگ کد های اسکریپت خود را بنویسید و یا آن را فراخوانی کنید.

meta tags : کار با متا تگ ها چندین نوع دارند که در ادامه باهم آشنا میشویم :

<“meta charset=”UTF-8> :

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

<“meta name=”description” content=”aylinweb .com> :

اصولا شما وقتی یک سرچ در گوگل میکنید در زیر لینک های یک سری توضیحات نوشته میشه که این description این کار را میکند .

<“meta name=”keywords” content=”HTML, CSS, XML, JavaScript> :

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

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

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

ژانویه 21, 2021آگوست 5, 2019 از پیمان امیدی

بخش آپدیت های مقاله

جلسه تمرینی جدید در تاریخ 15 مرداد 98 اضافه شد .

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

معرفی HTML5 :

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

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

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Document&lt;/title&gt; 
&lt;/head&gt;
 &lt;body&gt;
 &lt;/body&gt; 
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

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

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

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

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

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

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

D://images/web/aylinweb.jpg

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

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

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

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

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

&lt;a href="آدرس مقصد لینک" &gt; محتوایی که کاربر روی آن کلیک میکند. &lt;/a&gt;

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

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

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

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

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

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

&lt;a href="http://google.com" &gt;لینک به سایت گوگل&lt;/a&gt;

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

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

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

&lt;a href="mailto : aylinwebinfo@gmail.com"&gt; ارسال ایمیل به سایت آیلین وب &lt;/a&gt;

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

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

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

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

&lt;a href="http//aylinweb.com" target="_blank"&gt;سایت آیلین وب &lt;/a&gt;

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

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

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

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

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

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

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

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

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

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

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

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

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

&lt;body&gt;
 &lt;table&gt;
 &lt;tr&gt;
 &lt;td&gt;
&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/body&gt;

<body>

<table>

<tr>

<td>

</td>

</tr>

</table>

</body>

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

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

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

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

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

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

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

&lt;table&gt; &lt;tr&gt;

&lt;td&gt;شاد &lt;/td&gt;

&lt;td&gt; ناراحت&lt;/td&gt;

&lt;td&gt;عصبانی &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;

&lt;td&gt;زرد &lt;/td&gt;

&lt;td&gt; قرمز&lt;/td&gt;

&lt;td&gt;آبی &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;

&lt;td&gt;آفتابی &lt;/td&gt;

&lt;td&gt; بارانی&lt;/td&gt;

&lt;td&gt;ابری &lt;/td&gt;

&lt;/tr&gt;

&lt;/table&gt;

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

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

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

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

</tr>

</table>

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

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

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

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

&lt;form&gt;

نام&lt;br&gt;

&lt;input type="text" name="fristname"&gt;

رمز عبور:&lt;br&gt;

&lt;input type="password" name="password"&gt;

ایمیل&lt;br&gt;

&lt;br&gt;&lt;input type="email" name="mail"&gt;

&lt;input type="submit" value="ارسال اطلاعات"&gt;

&lt;/form&gt;

<form>

نام<br>

رمز عبور:<br>

ایمیل<br>

</form>

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

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

تگ <input> :

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

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

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

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

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

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

آگوست 4, 2019 از پیمان امیدی

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

[toc]

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

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

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

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

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

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" >

1	< body dir="rtl" bgcolor="red" text="white" >

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

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

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

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

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

< color="red" face="tahoma" font >

      </p>آموزش طراحی سایت در آیلین وب <p>

</font>

< color="red" face="tahoma" font >

</p>آموزش طراحی سایت در آیلین وب <p>

</font>

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

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

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

معرفی تگ b و I :

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

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

<b>

متن نوشته شده زخیم خواهد شد.

</b>

<i>

متن نوشته شده کج خواهد شد.

</i>

<b>

متن نوشته شده زخیم خواهد شد.

</b>

<i>

متن نوشته شده کج خواهد شد.

</i>

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

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

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

<OL>

لیست شماره یک</Li><li>

لیست شماره دو</Li><li>

</OL>

<UL>

لیست شماره یک</Li><li>

لیست شماره دو</Li><li>

</UL>

<OL>

لیست شماره یک</Li><li>

لیست شماره دو</Li><li>

</OL>

<UL>

لیست شماره یک</Li><li>

لیست شماره دو</Li><li>

</UL>

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

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

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

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

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

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

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

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

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

معرفی HTML و اصول اولیه کد نویسی+ویدئوی آموزشی

آگوست 1, 2019 از پیمان امیدی

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

کد نویسی با HTML بسیار ساده و راحت تا دیر نشده شروع کنید 😉

[toc]

اصول اولیه کد نویسی HTML :

ما در کد نویسی وب دو نوع کد نویسی داریم که یک سمت کد نویسی برای کاربر و یک سمت کدنویسی برای سرور هست . کد نویسی HTML ، CSS و JS برای سمت کاربر هست که ما با آن سرو کار داریم و به آن Client side میگن و یه کد نویسی که برای مثال PHP سمت سرور است که به آن هم server side میگن . خوب سروکار ما با کد نویسی سمت کاربر هستش بریم شروع کنیم …

HTML چیست ؟

هدف از HMTL — کار HTML چیه و چیکار میکنه

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

خJب شما که این کد های HTML رو نوشتین چه کسی میخونه ؟

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

HTML و دستورات آن :

<HTML>

</HTML>

<HTML>

</HTML>

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

بخش Head در HMTL :

در این بخش شما به عنوان یک معرف به Head نگاه کنید چرا که تمام عناوین مهم که باید به search engine (موتور های جستجو مثل گوگل ، یاهو ، بینگ) معرفی شود و شما تمام این معرفی های رو در داخل این تگ باید بنویسید .

<HTML>

<head>     

</head>     

</HTML>

<HTML>

<head>

</head>

</HTML>

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

بخش body :

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

هدف اصلی کلا روی این تگ است.

<HTML>

<head>   

</head>   

<body>   

</body>   

</HTML>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

این ساختار کلی یک HTML است دارای قسمت یک قسمت کلی تگ <HTML> و یک تگ <HEAD> و همچنین مهمترین قسمت آن <BODY> .

ایجاد یک Root Folder :

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

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

شما راه های زیادی برای نوشتن دستورات خود دارید . میتونید Notepade ویندوز استفاده کنید / میتونید از ++Notepade که نسبت به ویرایشگر ویندوز بسیار بهتر است کد های شما با رنگ های مختلف نمایش میدهد که تشخیص و ویرایش آن بسیار راحتر است.

پیشنهاد من چیه به شما؟

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

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

تگ ها همان دستوراتی هستند که شما در HTML مینویسید همیشه یک سری تگ ها وجود دارند که حتما باید انتهای آنها رو معلود کنید با یک علامت (/) مثل <BODY/> ولی یک سری تگ ها هم هستند که بدون تگ پایانی هستند مثل <BR>

تگ <P> :

کار پاراگراف رو انجام میده و متن رو به یک خط جدید میبره.

<p>
wellcome to aylinweb
<p/>

<p>

wellcome to aylinweb

<p/>

اکثر متن هایی که نوشته میشه داخل این تگ هست.

تگ های <h> :

این تگ ها برای معرفی عنوان محتوا استفاده میشود که هر چه عدد آن بیشر شود ارزش آن کمتر خواهد شد به این ترتیب که <H1> با <H6> بسیار از لحاظ اندازه فرق دارد.

<h1>My First Heading</h1>

1	<h1>My First Heading</h1>

تا این مرحله امید وارم که تمام استفاده رو از این آموزش برده باشید منتظر آموزش های بعدی ما باشید

در ضمن هر نوع سوالی در رابطه با تمرینات و آموزش ها داشتید میتونید از تلگرام و یا کامنت کردن در زیر همان آموزش سوال خود را بپرسید.

دانلود مستقیم نرم افزار Brackets

مقدمه ای بر معرفی زبانهای HTML و CSS

آگوست 1, 2019جولای 31, 2019 از پیمان امیدی

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

[toc]

معرفی دوره HTML و CSS :

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

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

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

معرفی و کار با زبان CSS

معرفی زبان استایل دهی CSS
کار با HTML و CSS
معرفی خاصیت های زبان CSS
معرفی خاصیت های جدید در CSS3
استایل دهی های حرفه ای به کدهای HTML

دوره HTML و CSS

مناسب چه کسانی است :

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

آیا برای یک طراح وب شدن این دوره لازم است ؟

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

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

و لازم به ذکر است که بگم بهتون برای ایجاد یک وبسایت کامل و پویا HTML و CSS کافی نیست باید با زبان های دیگر مثل JavaScript کار کنید تا بتوانید یک طراحی سایت انجام دهد و تا اینجا شما فقط یک سایت ظاهری طراحی کرده اید و برای تبدیل قالب به وردپرس کارهای زیادی دارید.

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

سایت: www.w3schools.com
سایت :www.khanacademy.org
سایت :www.w3schools.com

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

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

مدرس این دوره :

سامان فتاحی از تیم مدیریت آیلین وب

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

کار با سلکتور ها در HTML :

tag selector :

class selector :

ID selector :

کار با font در CSS :

حالات مختلف در لینک ها :

رنگ ها در CSS :

کار با Background در CSS :

نحوه ی کار کردن با Border ها در CSS :

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

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

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

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

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

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

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

توضیحات در CSS :

کار با رنگ ها در HTML :

رنگ های RGB

کار با کد رنگی HEX

کامنت ها در HTML :

عناصر استفاده شده در تگ HEAD :

معرفی HTML5 :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

خاصیت Align :

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

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

معرفی تگ b و I :

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

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

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

اصول اولیه کد نویسی HTML :

HTML چیست ؟

HTML و دستورات آن :

بخش Head در HMTL :

بخش body :

ایجاد یک Root Folder :

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

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

تگ <P> :

تگ های <h> :

معرفی دوره HTML و CSS :

معرفی و کار با زبان CSS

دوره HTML و CSS

مناسب چه کسانی است :

آیا برای یک طراح وب شدن این دوره لازم است ؟

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

کمی درباره ما

آیتم های محبوب

تماس سریع