آموزش CSS (بخش ششم)

تعیین عرض و ارتفاع در css

تنظیم ارتفاع و عرض

خواص height و width برای تعیین ارتفاع و عرض یک عنصر استفاده می شود.

height و width را می توان به طور خودکار تنظیم کرد. مقادیر عرض و ارتفاع را می توان با px , % , cm , … مشخص کرد.

<div style="height: 200px; width: 50%; background-color: darkblue;">
   <h2>Set the height and width of an element</h2>
   <p>This div element has a height of 200px and a width of 50%:</p>
</div>

خروجی :

Set the height and width of an element

This div element has a height of 200px and a width of 50%:

<div style="height: 100px; width: 500px; background-color: darkblue;">
   <h2>Set the height and width of an element</h2>
   <p>This div element has a height of 200px and a width of 50%:</p>
</div>

خروجی :

Set the height and width of an element

This div element has a height of 200px and a width of 50%:

نکته : خواص ارتفاع و عرض شامل padding، margin یا border نیست.

تنظیم حداکثر عرض

خصوصیات max-width برای تعیین حداکثر عرض یک عنصر استفاده می شود. max-width را می توان با مقادیر طول، مانند پیکسل، سانتی متر و غیره، یا درصد (٪) بلوک والد مشخص کرد.

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

CSS Box Model

تمام عناصر HTML را می توان به عنوان جعبه در نظر گرفت. در CSS، اصطلاح “Box Model” هنگام صحبت در مورد طراحی و طرح استفاده می شود.

CSS box model اساسا جعبه ای است که در اطراف هر عنصر HTML پیچیده می شود. این شامل: padding، border، margin و محتوای واقعی(content) است. تصویر زیر box mode را نشان می دهد:

توضیح بخش های مختلف تصویر بالا :

content : محتوا جعبه، جایی که متن و تصاویر در آن قرار می گیرد
padding : محدوده اطراف محتوا را مشخص می کند.
border : حاشیه ای که در اطراف محفظه و محتوا قرار می گیرد
margin : منطقه خارج از border را مشخص می کند.

box model اجازه می دهد تا ما یک مرز را در اطراف عناصر اضافه کنیم و فضای بین عناصر تعریف کنیم.

<div style="background-color: lightgrey; width: 300px; border: 25px solid green; padding: 25px; margin: 25px;">
This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

عرض و ارتفاع یک عنصر

به منظور تنظیم عرض و ارتفاع یک عنصر به طور صحیح در تمام مرورگرها، شما باید بدانید که چگونه box model کار می کند.

مهم: هنگامی که خواص عرض و ارتفاع یک عنصر را با CSS تنظیم می کنید، فقط عرض و ارتفاع محتوا را تعیین می کنید. برای محاسبه ابعاد کامل یک عنصر، شما همچنین باید padding، margin و border را اضافه کنید.

فرض کنید میخواهیم یک عنصر div را به عرض کل ۳۵۰ پیکسل بسپاریم:

محاسبه آن به صورت زیر می شود :

۳۲۰px (width)
+ ۲۰px (left + right padding)
+ ۱۰px (left + right border)
+ ۰px (left + right margin)
= ۳۵۰px

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

width + left padding + right padding + left border + right border + left margin + right margin

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

height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

آموزش CSS (بخش هفتم)

آموزش CSS (بخش دهم)

لینک ها در css

با استفاده از CSS، لینک ها می توانند از طرق مختلف طراحی شوند.

پیوند ها را می توان با هر ویژگی CSS (به عنوان مثال color, font-family, background و غیره) استایل دهید. علاوه بر این، لینک ها را می توان به صورت متفاوت با توجه به وضعیت موجود در آن، استایل دهید.

چهار حالت لینک عبارتند از:

a:link – یک پیوند معمولی، بدون بازدید
a:visited – یک پیوند بازدید شده توسط کاربر
a:hover – یک لینک زمانی که کاربر با موس روی آن میرود
a: active – لینک زمانی که کلیک شده است

a:link {
   color: red;
}
a:visited {
   color: green;
}
a:hover {
   color: hotpink;
}
a:active {
   color: blue;
}

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

a:hover باید بعد از a:link و a:visited بیاید و a:active باید بعد از a:hover بیاید.

a:link, a:visited {
   background-color: #f44336;
   color: white;
   padding: 14px 25px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
}
a:hover, a:active {
   background-color: red;
}

لیست ها در css

در HTML، دو نوع اصلی از لیست ها وجود دارد:

لیست های غیر ترتیبی (<ul>) : آیتم های لیست با یک دایره توپر مشخص می شوند
لیست های ترتیبی (<ol>) : آیتم های لیست با اعداد یا حروف مشخص می شوند

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

نشانگرهای لیست مختلف را برای لیست های ترتیبی تنظیم کنید
لیست مارکرهای مختلف را برای لیست های غیر ترتیبی تنظیم کنید
یک تصویر را به عنوان نشانگر لیست تنظیم کنید
رنگ های پس زمینه را به لیست های مورد نظر اضافه کنید

علامت های مورد نظر در لیست های مختلف

خصوصیت list-style-type علامت های مورد نظر در لیست های مختلف را مشخص می کند.

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

ul.a {
   list-style-type: circle;
}
ul.b {
   list-style-type: square;
}
ol.c {
   list-style-type: upper-roman;
}
ol.d {
   list-style-type: lower-alpha;
}

<ul class="a">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ul>
<ul class="b">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ul>
<ol class="c">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ol>
<ol class="d">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ol>

خروجی :

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

توجه: بعضی از مقادیر برای لیست های غیر ترتیبی و برخی برای لیست های مرتب شده است.

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

خصوصیت list-style-image یک تصویر را به عنوان نشانگر گزینه های لیست مشخص می کند:

ul {
   list-style-image: url('sqpurple.gif');
}

موقعیت نشانگرهای لیست

خصوصیت list-style-position موقعیت نشانگرهای لیست مورد نظر را مشخص می کند.

ul.a {
   list-style-position: outside;
}
ul.b {
   list-style-position: inside;
}

list-style-position: outside (پیش فرض):

Coffee – A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant
Tea – An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia
Coca Cola – A carbonated soft drink produced by The Coca-Cola Company. The drink’s name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves

list-style-position: inside:

Coffee – A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant
Tea – An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia
Coca Cola – A carbonated soft drink produced by The Coca-Cola Company. The drink’s name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves

حذف تنظیمات پیش فرض : برای حذف تنظیمات پیش فرض لیست ها مانند شکل نشانه آیتم های لیست و مقادیر پیش فرض padding ، margin به صورت زیر عمل می کنیم.

ul.demo {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

<ul class="demo">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Coca Cola</li>
</ul>

خروجی :

Coffee
Tea
Coca Cola

می توان تمام خصوصیات لیست را در یک خط با دستور list-style نوشت (Shorthand).

ul {
   list-style: square inside url("sqpurple.gif");
}

آموزش CSS (بخش یازدهم)

آموزش Html(بخش ششم)

تگ span

تگ span برای متن های خیلی کوتاه استفاده می شود. در وا قع استفاده از عنصر span برای متمایز کردن قسمتی از متن توسط CSS بکار برده می شود. برای مثال فرض کنید که می خواهید در یک پاراگراف متنی بنویسید که هر بخش از آن یک رنگ متفاوت داشته باشد برای این کار می‌توانید همه را در یک تگ p بنویسید و بخش های متفاوت آن را با تگ span جدا کرده و به هر بخش استایل مربوط به خود را بدهید.

<p>تمام رنگ ها از سه رنگ اصلی <span style="color:red">قرمز</span><span style="color:green">سبز</span><span style="color:blue">آبی</span>تشکیل شده است.</p>

تمام رنگ ها از سه رنگ اصلی قرمزسبزآبیتشکیل شده است.

تگ div

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

از این تگ در طراحی سایت برای تعیین ساختار اصلی صفحات استفاده می شود. هنگامی که شما میخواهید به گروهی از تگ ها یک style بخصوص در css بدید می توانید تمام این تگ ها را در داخل یک تگ div قرار دهید و سپس به آن تگ div استایل مورد نظر را اعمال کنید تا استایل مورد نظر را برای تگ های داخل این تگ div را با بقیه سایت متمایز کنید(تگ div والد تگ های داخل خود می شود و تگ های داخل آن فرزندان آن می شوند).

<p>این یک متن آزمایشی می باشد</p>
<div style="color:green">
   <h3>متن آزمایشی هدر</h3>
   <p>این یک متن آزمایشی می باشد</p>
</div>

این یک متن آزمایشی می باشد

متن آزمایشی هدر

این یک متن آزمایشی می باشد

تگ ul

از تگ ul و ترکیب آن با تگ li که گزینه های لیست در آن قرار می گیرد برای ایجاد لیست هایی که ترتیب برایمان اهمیتی ندارد استفاده می کنیم.

این تگ دارای خصوصیتی با نام type می باشد که علامت و نشانه های ما را در قسمت مورد نظر در طراحی سایت نمایش می دهد(Disk: برای نمایش دایره ی توپر کنار آیتم های لیست مورد نظر می شود – Circle: برای نمایش یک دایره توخالی کنار آیتم های لیست مورد نظر می شود – Square: برای نمایش مربع توپر کنار آیتم های لیست مورد نظر می شود – None: این خصوصیت باعث می شود هیچ علامتی در کنار لیست ما نشان داده نشود.

برای ایجاد لیست های ترتیبی بجای استفاده از ul از ol استفاده می کنیم .

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>Java script</li>
</ul>

HTML
CSS
Java script

تگ table

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

هر جدول میتواند شامل سربرگ جدول، ردیف ها و سلول های اطلاعات باشد.

سربرگ جداول که شامل عنوان مربوط به هر ستون می باشد را با تگ th مشخص میکنیم.
هر سطر(ردیف) را در جدول ها با tr مشخص می کنیم.
سلول های اطلاعات یا همان خانه های جدول را با td مشخص میکنیم.

<table width="100%" border="1">
   <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Age</th>
   </tr>
   <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>23</td>
   </tr>
   <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>37</td>
   </tr>
</table>

First name	Last name	Age
Jill	Smith	۲۳
Eve	Jackson	۳۷

خاصیت width برای تعیین عرض جدول و خاصیت border برای تعیین اندازه مرز بین خانه های جدول استفاده می شود.

تگ iframe

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

<iframe src="URL"></iframe>
<iframe src="https://www.designestan.com"></iframe>

آموزش Html(بخش هفتم)

آموزش css

css چیست؟

CSS مخفف Cascading Style Sheets (شیوه نامه آبشاری) است. کدهای CSS دستوراتی هستند که توسط آنها می توان تمامی خصوصیات ظاهری صفحات وب سایت را تعیین کرد و هر آنچه که توسط HTML به نمایش در می آید توسط CSS قابل کنترل است.

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

ساختار نحوی کدهای css

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

Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم.

هر بلوک css داخل {} قرار می گیرد و خصوصیات و مقادیر داخل این بلوک فقط مربوط به همان selector می باشد.

Property : نام خصوصیت و ویژگی تعریف شده در css می باشد.

Value : مقدار دلخواهی است که ما برای خصوصیت های css تعیین می کنیم.

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

۱ – Inline Styles :

فقط برای یک عنصر HTML مورد استفاده قرار می گیرد. برای استفاده از این روش باید به عنصر مورد نظر صفت Style را افزوده و سپس خاصیت ها و مقدارها را به این صفت اضافه کنید.

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

This is a heading

۲ – Internal Style Sheet :

اثر آن ها برای یک صفحه وب است و باید زمانی استفاده می شود که معمولا استایل به یک تگ html وصل است. کدهای CSS در قسمت head صفحه و درون تگ باز و بسته style قرار می گیرد.

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

۳ – External Style Sheet :

استایل های CSS در یک فایل جداگانه با پسوند css قرار می گیرند و آدرس آن را در تگ link درون head صفحه قرار می دهیم.

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

برای اعمال دستورات فقط بر روی یک عنصر واحد html از id استفاده می کنیم :

شناسه یک عنصر باید در یک صفحه منحصر به فرد باشد، بنابراین انتخابگر id برای انتخاب یک عنصر منحصر به فرد استفاده می شود. برای این کار ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف می کنیم، سپس به بخش دستورات CSS رفته و در بخش Selector، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد “#” قبل از آن اضافه می کنیم.

<p id="para1">This is a Paragraph.<p>

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

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

توسط صفت class ما دستورات تعیین شده css را برای گروهی از عناصر html که نام class آنها یکسان است اعمال می کنیم. برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف می کنیم، سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد “.” قبل از آن اضافه می کنیم.

<p class="cneter">This is a Paragraph.</p>
<h1 class="cneter">This is a header.</h1>

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

نکته : در صورتی که ما نام یک عنصر html را به تنهایی و بدون اضافه کردن id(#) و یا class(.) قرار دهیم استایل css مورد نظر برای تمام عناصر از آن نوع اعمال می شود.

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

نکته : می توانیم استایل هایی که برای گروهی از عناصر مشابه هستند را در یک بلاک قرار دهیم و selector ها را با کاما(,) از هم جدا کنیم تا استایل های تعیین شده برای تمام آنها اعمال شود.

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

آموزش CSS (بخش دوم)

آموزش Html

HTML چیست ؟

واژه HTML مخفف عبارت Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد برای طراحی صفحات وب سایت است. مرورگر ها هیچ یک از کدهای زبان های برنامه نویسی سمت سرور مانند asp و php را نمیشناسند و تنها کدهای html برای آنها قابل فهم است .

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

html یک پروندهٔ مبتنی بر متن میباشد که با پسوند htm یا html نام‌گذاری می شود. html زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است.

برای نوشتن کدهای HTML ، تنها یک ادیتور متن مانند Notepad ویندوز و یا نرم افزار هایی که برای این کار طراحی شده اند مانند Adobe Dreamweaver یا Visual studio استفاده کرد. برای یادگیری HTML توصیه می کنیم از ویرایشگر متن ++Notepad استفاده کنیدکه یک ویرایشگر متن ساده و کم حجم با امکانات لازم برای یادگیری HTML است.

یک عنصر HTML با یک تگ آغاز <html> شروع می شود و با یک تگ پایان <html/> تمام می شود. محتوای عنصر همه چیزی است که بین تگ آغاز و پایان قرار می گیرد. محتوای برخی از عناصر HTML خالی می باشد. عناصر خالی در همان تگ آغاز ، بسته می شوند. اکثر عناصر HTML میتوانند دارای صفات (attributes) باشند.

نمونه ای از ساختار کلی html :

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Page Title</title>
</head>
<body>
   <h1>This is a Heading</h1>
   <p>This is a paragraph.</p>
</body>
</html>

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

خواص تگ های HTML :

هر تگ html دارای مجموعه از خواص است که ویژگی های مختلف آنها را تعیین می کند. هر یک از این خاصیت ها را می توان در درون تگ ابتدایی تعیین کرد . خواص تگ ها را با علامت = مقدار دهی می کنیم و مقدار آن خاصیت را داخل ” ” قرار داده میشود. مثال:

<a href="https://www.designestan.com">DESIGNESTAN</a>
<img src="img.jpg" width="500" height="600">
<p style="color:red">paragraph</p>

خصوصیات استاندارد تگ های HTML :

در پایین خصوصیات استاندارد تگ های HTML معرفی شده اند . این خصوصیات در اکثر تگ های HTML مشترک هستند و دارای کاربرد یکسانی هستند .

نام خاصیت	شرح
class	مشخص کننده کلاس تگ در کد نویسی برنامه است . این کلاس در کدنویسی CSS و زبان های اسکریپتی کاربرد دارد .
id	مشخص کننده یک شناسه منحصر به فرد برای تگ در درون سند HTML است . id هر تگ در کدنویسی CSS و زبان های اسکرپیتی کاربرد دارد . توسط id می توان به تگ مورد نظر دست یافت .
style	یک خاصیت چند مفدارِی است که خصوصیات قالب دهی و اعمال سبک ها ( CSS ) را برای تگ مورد نظر مشخص می کند .
title	متنی است که به صورت tooltip در یک کادر زرد رنگ ، در هنگام قرار گرفتن موس بر روی عنصر نمایش داده می شود .

DOCTYPE چیست؟

DOCTYPE جزئی از تگ های html نیست، بلکه یک اعلان راهنما برای مرورگرهای وب است و در ابتدای صفحه به مرورگر کمک می کند تا صفحه وب را به درستی نمایش دهد. DOCTYPE به مرورگر اعلام میکند که از چه نسخه ای از HTML در صفحه استفاده شده است و صفحه مورد نظر از چه نوعی می باشد.

از آنجایی که کنسرسیوم جهانی وب (w3c) استاندارد های مختلفی از HTML را ارائه کرده است که هر کدام از آنها در مقایسه با هم دارای تفاوت هایی هرچند جزئی از هم هستند ولی این مسئله موجب می شود که مرورگرها در برخورد با صفحات مختلف نتوانند در حالت عادی، استاندارد صحیح را شناسایی کنند.

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

آموزش Html(بخش دوم)

آموزش CSS (بخش دوم)

رنگ ها در css

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

نام های رنگ :

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

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

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

در HTML، یک رنگ را می توان به عنوان یک مقدار RGB تعریف کرد، با استفاده از این فرمول :

rgb(red, green, blue)

هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین ۰ تا ۲۵۵ تعریف می کند. به عنوان مثال (۲۵۵,۰,۰)rgb به صورت قرمز نمایش داده می شود، چرا که قرمز به بالاترین مقدار آن (۲۵۵) و بقیه موارد ۰ تنظیم شده است. برای نمایش رنگ سیاه، تمام پارامترهای رنگ باید به ۰ تنظیم شود و برای نمایش رنگ سفید، تمام پارامترهای رنگ باید به ۲۵۵ تنظیم شود.

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

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

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

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

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

rgba(red, green, blue, alpha)

پارامتر alpha یک عدد بین ۰٫۰ (کاملا شفاف) و ۱٫۰ است (کاملا کدر) :

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

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

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

#rrggbb

که دراین نوع تولید رنگ rr (قرمز)، gg (سبز) و bb (آبی) را تعیین می کند، مقادیر هگزادسیم بین ۰۰ و ff هستند (همانند decimal 0-255). به عنوان مثال، ff0000# به صورت قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) تنظیم شده است و دیگر مقادیر به کمترین مقدار (۰۰) تنظیم شده اند.

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

#ff0000

#۰۰۰۰ff

#۳cb371

#ee82ee

#ffa500

#۶a5acd

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

در HTML، رنگ را می توان با استفاده از مقادیر hue , saturation , lightness در فرم مشخص کرد:

hsl(hue, saturation, lightness)

hue : یک درجه در چرخ رنگ از ۰ تا ۳۶۰ است. ۰ قرمز است، ۱۲۰ رنگ سبز است و ۲۴۰ آبی است.

saturation : یک مقدار درصدی است، ۰٪ به معنای سایه خاکستری است و ۱۰۰٪ رنگ کامل است.

Lightness : نیز یک مقدار درصدی است، ۰٪ سیاه است، ۵۰٪ بین روشن یا تاریک است، ۱۰۰٪ سفید است.

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

saturation را می توان برای شدت یک رنگ تعریف کرد. ۱۰۰٪ رنگ خالص است، بدون سایه خاکستری، ۵۰٪ خاکستری است، اما شما هنوز هم می توانید رنگ را ببینید و ۰٪ به طور کامل خاکستری است و شما دیگر نمی توانید رنگ را ببینید.

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Lightness یک رنگ را می توان به عنوان مقدار نور مورد نظر برای رنگ نشان داد، که ۰٪ به معنای هیچ نور (سیاه و سفید) نیست، ۵۰٪ به معنای ۵۰٪ نور (نه تاریک و نه روشن) ۱۰۰٪ به معنی نور کامل (سفید) است.

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

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

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

hsla(hue, saturation, lightness, alpha)

پارامتر alpha یک عدد بین ۰٫۰ (کاملا شفاف) و ۱٫۰ است (کاملا کدر) :

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

آموزش CSS (بخش سوم)

آموزش Html(بخش سوم)

متا تگ ها (Meta tags)

متا تگ ها نوعی متا دیتا(اطلاعاتی که در توصیف اطلاعات دیگر مورد استفاده قرار می گیرد) هستند.

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

استفاده ی درست از این متاتگ ها تاثیر بسیار زیادی بر ایندکس شدن صفحات و شناخت بهتر موتور های جستجو از سایت ما دارد. تگ های Meta در بین تگهای Head قرار میگیرند:

<html>
<head>
   <title>عنوان صفحه </title>
   <meta tag 1 />
   <meta tag 2 />
   <meta tag 3 />
   …
</head>
<body>
   محتوای صفحه
</body>
</html>

مهمترین متا تگ ها :

متا تگ description که برای شرح وب سایت شما در ۳ از ۴ جمله مورد استفاده قرار می گیرد و محتوای خلاصه صفحه را به نمایش می گذارد، این توضیح برای گوگل نباید بیشتر از ۱۵۰ کارکتر (حرف) باشد.

<meta name="description" content="text">

متا تگ keywords که مهم ترین کلمات کلیدی که در یک صفحه خاص مد نظر ما هستند در آن قرار می گیرند.

<meta name="keywords" content="words">

متا تگ Viewport اطلاعات مفیدی در مورد ابعاد صفحه وب سایت و نحوه زوم وب سایت به مرورگر می دهد. اما اگر به خوبی از این تگ استفاده نشود، صفحات وب سایت در گوشی های موبایل به درستی نمایش داده نمی شود(برای ریسپانسیو کردن وب سایت)

< meta name="viewport" content="width=device-width, initial-scale=1" >

متاتگ فارسی سازی صفحه (Utf-8) برای تعیین نوع رمزنگاری صفحه یا encoding صفحه از این متاتگ استفاده میشود و در صورت استفاده نکردن از این متاتگ ، در بعضی از مرورگرها ی کاربرانی که encoding فارسی ندارند ، متن های فارسی به صورت علامت سوال (؟) نشان داده می شوند.

<meta   http-equiv="content-type"   content="text/html;charset=utf-8"  />

متا تگ زبان مورد استفاده (Content-Language) این متا تگ برای دسته بندی زبانی برای موتورهای جستجوگر می باشد و توصیه می شود استفاده گردد.

<meta http-equiv="Content-Language" content="Fa">

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

تگ اسکریپت (Script)

از تگ اسکریپت در طراحی سایت برای قرار دادن اسکریپت (مانند java script) درون صفحات html استفاده می شود. دستورات باید بین تگ های باز و بسته script قرار گیرد.

<script  type="text/javascript" >

 محل کدهای جاوا اسکریپت

</script>

خصوصیت type در HTML 4 الزامی است، اما در HTML5 اختیاری است.

تگ استایل ( Style )

یکی از روش های تعریف استایل نویسی(CSS)، استفاده از تگ استایل در بخش head صفحات html است، که با تعریف آن می توان در تمام صفحه برای ظاهر سایت استفاده نماییم.

<style   type="text/css" >
   
  محل کدهای CSS

</style>

تگ لینک ( Link )

از تگ link برای برقرای ارتباط و لینک دادن به سایر صفحات وب استفاده می شود. مهم ترین کاربرد این تگ تعریف استایل (Style) خارجی حاوی کدهای Css می باشد.

برای تعریف Style خارجی فایل حاوی Css از کد زیر استفاده نمایید :

<link rel="Stylesheet" type="text/css" href="آدرس فایل سی اس اس" />

آموزش Html(بخش چهارم)

تگ توضیحات :

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

< !-- متن توضیحات مورد نظر -- >

ساختار تگ‌های HTML

تگ‌های HTML دو حالت دارند:

تگ‌هایی که تگ بسته منحصر به فرد دارند

<TagName> محتوا </TagName>

تگ باز شدن با استفاده از علامت بزرگ و کوچک ریاضی <> و نام تگ پیاده‌سازی می‌شود، همچنین تگ بستن با استفاده از همان موارد به اضافه یک علامت Forward Slash قبل از نام تگ پیاده‌سازی می‌شود. در بین باز و بسته شدن تگ نیز محتوا قرار می‌گیرد.

تگ‌هایی که خودشان، خودشان را می‌بندند.

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

تگ‌های عنوان (Heading)

تگ های هدر یا تگ های عنوان از مهم ترین تگ ها برای موتورهای جستجوگر وب می باشد و توجه ویژه ای به عناوین داخل آنها دارند(معمولا کلمات کلیدی وب سایت درون آنها قرار می گیرد).

تگ های عنوان شامل شش تگ با عنوان های H1 تا H6 می باشد که به ترتیب از H1 بزرگترین سایز و H6 کوچکترین سایز را دارا می باشد، درجه ی اهمیت آنها هم به همین میزان است.

<h1>عنوان شماره ۱</h1>
<h2>عنوان شماره ۲</h2>
<h3>عنوان شماره ۳</h3>
<h4>عنوان شماره ۴</h4>
<h5>عنوان شماره ۵</h5>
<h6>عنوان شماره ۶</h6>

عنوان شماره ۱

عنوان شماره ۲

عنوان شماره ۳

عنوان شماره ۴

عنوان شماره ۵

عنوان شماره ۶

تگ P یا پاراگراف

تگ p از مجموعه تگ‌هایی است که درون تگ Body قرار می گیرد. از این تگ برای تعریف یک پاراگراف در HTML استفاده می‌شود و متن داخل این تگ بصورت یک پاراگراف در نظر گرفته می شود. در صورت ایجاد یک پاراگراف یا تگ P جدید ، پاراگراف بعدی به سطر بعد می رود.

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
</head>
<body>
   <p>This is a new Paragraph</p>
</body>
</html>

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

تگ Br

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

تگ hr

از تگ hr برای کشیدن یک خط افقی استفاده می‌شود. این تگ یک تگ Self Closing است و تگ بسته ندارد.

تگ های فرمت دهی :

تگ Center

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

<center> متن تست با تراز وسط چین </center>

تگ B و تگ strong

متن داخل این تگ ها بصورت توپر و ضخیم (Bold) نمایش داده می شود(برای مهم نشان دادن متن داخل آن ها). این تگ ها نیز تگ های منسوخ شده ای هستند.
و بجای آن از استایل دهی CSS استفاده می شود.

<b> محتوای آزمایشی </b>
<strong> محتوای آزمایشی </strong>

تگ های Sub و Sup

متن داخل تگ sub بصورت زیرنویس و تگ sup بصورت بالا نویس نمایش داده می شود.

<p> این یک متن <sub>آزمایشی</sub> می باشد </p>
<p> این یک متن <sup>آزمایشی</sup> می باشد </p>

این یک متن _{آزمایشی} می باشد

این یک متن ^{آزمایشی} می باشد

تگ های i و em

متن داخل این تگ ها بصورت کج نمایش داده می شوند(برای تاکید روی متن داخل آن ها).

<p> این یک متن <i>آزمایشی</i> می باشد </p>
<p> این یک متن <em>آزمایشی</em> می باشد </p>

تگ mark

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

<p> این یک متن <mark>آزمایشی</mark> می باشد </p>

این یک متن آزمایشی می باشد

تگ del

محتوای متنی داخل این تگ یک خط روی آن ها کشیده می شود.

<del> متن آزمایشی </del>

~~متن آزمایشی~~

آموزش Html(بخش پنجم)

آموزش Html(بخش دوم)

تگ Html

در زبان HTML کدهای وب بین تگ های html و body قرار میگیرند و تگ html مشخص کننده ی شروع و پایان یک سند Html میباشد.

تگ Head

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

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

تگ title

یکی از مهمترین تگ ها برای جستجوگرهای وب تگ عنوان ( Title ) می باشد . متنی که داخل این تگ قرار میگیرد عنوان صفحه را مشخص میکند که در title bar مرورگر به کاربران نشان داده می شود، این تگ در همه سندهای HTML الزامی است.

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

ویژگی های مشترک در بین تگ ها در HTML

یک سری از ویژگی ها هستند که در بین تگ های html مشترک هستند و در همه آنها کار مشترکی را انجام میدهند.

این ویژگی ها به شرح زیر میباشند:

class
style
id
dir
hidden
title
lang
tabindex
translate
Event Attributes
accesskey
contenteditable
contextmenuelement
dropzone
draggable
spellcheck

خاصیت Style:

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

<p style=”background-color:#ccc; color:red; font-size:14px; text-align:center; “> متن پاراگراف </p>

ویژگی های رویداد(Event) در HTML:

تمام عناصر در HTML میتوانند شامل رویدادهایی باشند. رویدادها مجموعه عمل هایی هستند که در صورت بروز یک اتفاق در صفحه ( مانند کلیک کردن بر روی یک عنصر، فشردن دکمه ای از صفحه کلید ، بستن صفحه مرورگر و … ) عکس العمل نشان داده و باعث اجرای دستور یا دستورات تعیین شده برای آن رویداد خاص می شوند .

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

ویژگی های رویداد در HTML به چند قسمت تقسم می شوند:

رویدادهای پنجره
رویدادهای عناصر فرم
رویدادهای موس
رویدادهای صفحه کلید
رویدادهای حافظه کلیپ بورد (Clipboard)
رویدادهای پرینت
رویدادهای مربوط به مدیا
رویدادهای مربوط به سمت سرور

کلیه رویدادهای مربوط به موس

رویداد	توضیحات
onclick	این رویداد، زمانی که کاربر روی عنصر کلیک می کند، اتفاق می افتد.
oncontextmenu	این رویداد، زمانی روی می دهد که، کاربر برای باز کردن منوی زمینه، روی یک عنصر راست کلیک می کند.
ondblclick	این رویداد، زمانی روی می دهد که، کاربر روی یک عنصر دبل-کلیک کند .
onmousedown	این رویداد، زمانی روی می دهد که، کاربر دکمه ی موس را روی یک عنصر فشار دهد.
onmouseenter	این رویداد، زمانی روی می دهد که، کاربر نشانگر ماوس را به روی یک عنصر وارد کند.
onmouseleave	این رویداد، زمانی روی می دهد که، نشانگر موس از روی یک عنصر خارج شود.
onmousemove	این رویداد،زمانی روی می دهد که، اشاره گر موس بر روی یک عنصر، حرکت کند.
onmouseover	این رویداد، زمانی روی می دهد که،کاربر اشاره گر ماوس را بر روی یک عنصر یا فرزندان آن عنصر وارد کند.
onmouseout	این رویداد، زمانی روی می دهد که، کاربر اشاره گر ماوس را از روی یک عنصر یا فرزندان آن عنصر بیرون ببرد.
onmouseup	این رویداد، زمانی روی می دهد که کاربر،دکمه ی ماوس را بر روی یک عنصر رها کند.

کلیه رویدادهای مربوط به کیبورد (keyboard)

رویداد	توضیحات
onkeydown	این رویداد زمانی روی می دهد که، کاربر در حال فشار دادن یک دکمه است.
onkeypress	این رویداد زمانی روی می دهد که، کاربر یک دکمه را فشار دهد.
onkeyup	این رویداد زمانی روی می دهد که، کاربر یک دکمه را رها کند.

کلیه رویدادهای مربوط به فرم (form)

رویداد	توضیحات
onblur	این رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را از دست می دهد.
onchange	این رویداد زمانی روی می دهد که، مقدار یک عنصر تغییر کند. این عنصر می تواند <input> یا <keygen> یا <textarea> باشد.
onfocus	این رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را به دست آورد.
onfocusin	این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی گرفتن focus(فوکس)می باشد.
onfocusout	این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی از دست دادن focus(فوکس)می باشد.
oninput	این رویداد زمانی روی می دهد که، یک عنصر ورودی را از کاربر دریافت می کند
oninvalid	این رویداد زمانی روی می دهد که، یک عنصر نامعتبر است.
onreset	این رویداد زمانی روی می دهد که، یک فرم reset شود.
onsearch	این رویداد زمانی روی می دهد که، یک کاربر در فیلد search چیزی را بنویسد.
onselect	این رویداد زمانی روی می دهد که، کاربر مقداری از یک متن را انتخاب کند(select کند).
onsubmit	این رویداد زمانی روی می دهد که، یک فرم submit شود.

کلیه رویدادهای مربوط به حافظه کلیپ بورد (Clipboard)

رویداد	توضیحات
oncopy	این رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را کپی می کند.
oncut	این رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را cut می کند.
onpaste	این رویداد زمانی روی می دهد که، یک کاربر محتوایی را در یک عنصر paste(الصاق) می کند.

کلیه رویدادهای مربوط به پرینت (Print )

رویداد	توضیحات
onafterprint	این رویداد زمانی روی می دهد که، یک صفحه شروع به print می کند یا اینکه پنجره مربوط به print بسته می شود.
onbeforeprint	این رویداد زمانی روی می دهد که، یک صفحه در آستانه ی پرینت شدن است.

کلیه رویدادهای مربوط به مدیا (Media )

رویداد	توضیحات
onabort	این رویداد زمانی روی می دهد که لود شدن یک مدیا بی نتیجه باشد.
oncanplay	این رویداد زمانی روی می دهد که، مرورگر بتواند نمایش مدیا را شروع کند.
oncanplaythrough	این رویداد زمانی روی می دهد که، مرورگر بتواند بدون توقف برای لود کردن، مدیا را نمایش دهد.
ondurationchange	این رویداد زمانی روی می دهد که، مدت یک مدیا تغییر کند.
onemptied	این رویداد زمانی روی می دهد که به علت یک اتفاق بد، فایل مدیا ناگهان از دسترس خارج می شود.
onended	این رویداد زمانی روی می دهد که، مدیا به پایان می رسد (قابل استفاده برای پیام اتمام مدیا).
onerror	این رویداد زمانی روی می دهد که، یک error در طول لود شدن فایل مدیا رخ دهد.
onloadeddata	این رویداد زمانی روی می دهد که، داده های مدیا، لود شده اند.
onloadedmetadata	این رویداد زمانی روی می دهد که، داده های متا، لود شوند.
onloadstart	این رویداد زمانی روی می دهد که، مرورگر شروع به جستجوی مدیای مورد نظر می کند.
onpause	این رویداد زمانی روی می دهد که، مدیا متوقف شود، خواه توسط کاربر یا بصورت برنامه نویسی.
onplay	این رویداد زمانی روی می دهد که، پخش مدیا شروع شود or is no longer paused
onplaying	این رویداد زمانی روی می دهد که، مدیا بعد از متوقف شدن(pause) یا توقف برای دانلود ادامه(buffering)، شروع به پخش کند.
onprogress	این رویداد زمانی روی می دهد که، مرورگر در پروسه ی گرفتن داده های مدیا می باشد(دانلود کردن مدیا).
onratechange	این رویداد زمانی روی می دهد که، سرعت پخش مدیا تغییر کند.
onseeked	این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را به پایان ببرد.
onseeking	این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را شروع می کند.
onstalled	این رویداد زمانی روی می دهد که، مرورگر در حال تلاش برای دریافت داده های مدیا می باشد اما این داده ها غیر قابل دسترس می باشند.
onsuspend	این رویداد زمانی روی می دهد که، مرورگر به طور عمدی داده های مدیا را دریافت نمی کند.
ontimeupdate	این رویداد زمانی روی می دهد که، مکان پخش تغییر کند(درست مانند زمانی که کاربر به سرعت مدیا را از نقطه ای به نقطه ی دیگر می برد)
onvolumechange	این رویداد زمانی روی می دهد که، میزان صدای مدیا تغییر کند(همچنین هنگامی که صدا در حالت mute قرار دارد)
onwaiting	این رویداد زمانی روی می دهد که، مدیا برای دانلود فریم بعدی متوقف شده است و در حالت(resume)قرار دارد.

کلیه رویدادهای مربوط به سمت سرور (Server-Sent)

رویداد	توضیحات
onerror	این رویداد زمانی روی می دهد که یک error در منبع رویداد(event source) ایجاد شود.
onmessage	این رویداد زمانی روی می دهدکه، یک پیام از منبع رویداد(event source)دریافت شود.
onopen	این رویداد زمانی روی می دهد که، یک اتصال با منبع رویداد(event source) باز شود.

سایر رویدادها

رویداد	توضیحات
onmessage	این رویداد زمانی روی می دهد که، یک پیام از منبع رویداد(event source) دریافت شود.
onmousewheel	غیر قابل استفاده. به جای آن از رویداد onwheel استفاده کنید.
ononline	این رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آنلاین می کند.
onoffline	این رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آفلاین می کند.
onpopstate	این رویداد زمانی روی می دهد که، تاریخچه ی(history) پنجره تغییر می کند.
onshow	این رویداد زمانی روی می دهد که، یک عنصر <menu> بصورت منوی محتوا(context menu)، نشان داده شود.
onstorage	این رویداد زمانی روی می دهد که، یک منطقه ی ذخیره سازی وب بروز رسانی شود.
ontoggle	این رویداد زمانی روی می دهد که، یک کاربر عنصر <details> را باز کند یا ببندد.
onwheel	این رویداد زمانی روی می دهد که، دکمه ی چرخان ماوس، بر روی یک عنصر به سمت بالا یا پایین بچرخد.

آموزش Html(بخش سوم)

آموزش CSS (بخش پنجم)

تعیین فاصله ها در حاشیه عناصر CSS Margins

خواص margin در CSS برای ایجاد فضای اطراف عناصر، خارج از هر مرز تعریف شده، استفاده می شود. با CSS، شما کنترل کامل بر روی حاشیه ها دارید. این خاصیت ها برای تنظیم حاشیه برای هر طرف یک عنصر (بالا، راست، پایین و سمت چپ) وجود دارد.

CSS دارای خصوصیات برای تعیین حاشیه برای هر طرف یک عنصر است:

margin-top
margin-right
margin-left
margin-bottom

اگر margin دارای چهار مقدار باشد (;margin: 25px 50px 75px 100px) :

حاشیه بالای ۲۵ پیکسل است
حاشیه راست ۵۰ پیکسل است
حاشیه پایین ۷۵ پیکسل است
حاشیه سمت چپ ۱۰۰ پیکسل است

<h2>The margin shorthand property - 4 values</h2>
<div style="border: 1px solid black;margin: 25px 50px 75px 100px;background-color: darkblue;">
This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.
</div>

خروجی :

The margin shorthand property – 4 values

This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.

اگر margin دارای دو مقدار باشد (;margin: 25px 50px) :

حاشیه بالا و پایین ۲۵ پیکسل است
حاشیه راست و چپ ۵۰ پیکسل است

اگر margin دارای یک مقدار باشد (;margin: 25px) :

تمام چهار طرف حاشیه ۲۵ پیکسل است.

شما می توانید مقدار margin را auto قرار دهید که در این صورت عنصر درون ظرف خود به صورت افقی در وسط صفحه قرارمی گیرد و در واقع عنصر عرض مشخص شده را می گیرد و فضای باقیمانده به طور مساوی بین حاشیه های چپ و راست تقسیم می شود:

<h2>Use of margin:auto</h2>
<p>
You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
</p>
<div style="width:300px; margin: auto; border: 1px solid red;">
This div will be horizontally centered because it has margin: auto;
</div>

خروجی :

Use of margin:auto

You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

This div will be horizontally centered because it has margin: auto;

تعیین فاصله ها در داخل مرز عناصر CSS Padding

خصوصیات CSS Padding برای ایجاد فضای اطراف محتوای عنصر، در داخل هر مرز تعریف شده، استفاده می شود. با استفاده از CSS، شما کنترل کاملی بر روی Padding دارید. خواص برای تنظیم Padding برای هر طرف یک عنصر (بالا، راست، پایین و چپ) وجود دارد.

CSS دارای خصوصیاتی برای تعیین Padding برای هر طرف یک عنصر است.

padding-top
padding-right
padding-bottom
padding-left

توجه : مقادیر منفی برای خصوصیت padding مجاز نیستند.

مثال زیر padding های مختلف را برای هر چهار طرف یک عنصر تنظیم می کند:

<h2>Using individual padding properties</h2>
<div style="border: 1px solid black; background-color: darkblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px;">
This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.
</div>

خروجی :

Using individual padding properties

This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.

برای کوتاه کردن کد، می توان تمام خواص padding را در یک ویژگی مشخص کرد. اگر خصوصیت padding دارای چهار مقدار باشد (;padding: 25px 50px 75px 100px) :

مقدار padding بالا ۲۵ پیکسل است.
مقدار padding راست ۵۰ پیکسل است.
مقدار padding پایین ۷۵ پیکسل است.
مقدار padding چپ ۱۰۰ پیکسل است.

<h2>The padding shorthand property - 4 values</h2>
<div style="border: 1px solid black; padding: 25px 50px 75px 100px; background-color: darkblue;">
This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.
</div>

The padding shorthand property – 4 values

This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.

اگر خصوصیت padding دارای سه مقدار باشد (;padding: 25px 50px 75px) :

بالا ۲۵ پیکسل است
راست و چپ ۵۰ پیکسل است
padding پایین ۷۵ پیکسل است

اگر خصوصیت padding دارای دو مقدار باشد (;padding: 25px 50px) :

سطوح بالا و پایین ۲۵px هستند
مقادیر راست و چپ ۵۰ پیکسل است

اگر خصوصیت padding دارای یک مقدار باشد (;padding: 25px) :

تمام چهار طرف ۲۵ پیکسل است.

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

در مثال زیر، عنصر دارای عرض ۳۰۰px می باشد. با این حال، پهنای واقعی رندر عنصر ۳۵۰px خواهد بود (۳۰۰px + 25px + 300px + 25px ) :

<h2>Padding and element width</h2>
<div style="width: 300px; background-color: green;">
This div is 300px wide.
</div>
<br>
<div style="width: 300px; padding: 25px; background-color: darkblue;">
The width of this div is 350px, even though it is defined as 300px in the CSS.
</div>

خروجی :

Padding and element width

This div is 300px wide.

The width of this div is 350px, even though it is defined as 300px in the CSS.

برای حفظ عرض در ۳۰۰px، بدون توجه به مقدار padding، شما می توانید از box-sizing با مقدار border-box استفاده کنید. این باعث می شود که عنصر برای حفظ عرض آن، اگر padding را افزایش دهید، فضای موجود در دسترس کاهش خواهد یافت. به عنوان مثال:

<h2>Padding and element width</h2>
<div style="width: 300px; background-color: green;">
This div is 300px wide.
</div>
<br>
<div style="width: 300px; padding: 25px; box-sizing: border-box; background-color: darktblue;">
The width of this div is 350px, even though it is defined as 300px in the CSS.
</div>

خروجی :

Padding and element width

This div is 300px wide.

The width of this div is 350px, even though it is defined as 300px in the CSS.

آموزش CSS (بخش ششم)

طراحی سایت

تعیین عرض و ارتفاع در css

تنظیم ارتفاع و عرض

Set the height and width of an element

Set the height and width of an element

تنظیم حداکثر عرض

CSS Box Model

عرض و ارتفاع یک عنصر

نوشته‌های تازه

لینک ها در css

لیست ها در css

علامت های مورد نظر در لیست های مختلف

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

موقعیت نشانگرهای لیست

list-style-position: outside (پیش فرض):

list-style-position: inside:

نوشته‌های تازه

تگ span

تگ div

متن آزمایشی هدر

تگ ul

تگ table

تگ iframe

نوشته‌های تازه

css چیست؟

ساختار نحوی کدهای css

۱ – Inline Styles :

This is a heading

۲ – Internal Style Sheet :

۳ – External Style Sheet :

برای اعمال دستورات فقط بر روی یک عنصر واحد html از id استفاده می کنیم :

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

نوشته‌های تازه

HTML چیست ؟

نمونه ای از ساختار کلی html :

خواص تگ های HTML :

خصوصیات استاندارد تگ های HTML :

DOCTYPE چیست؟

نوشته‌های تازه

رنگ ها در css

نام های رنگ :

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

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

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

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

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

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

#ff0000

#۰۰۰۰ff

#۳cb371

#ee82ee

#ffa500

#۶a5acd

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

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)