استایل css برای پس زمینه ها(background):

خصوصیات background در css: توسط CSS می‌توانید برای عناصر در صفحات وب پس زمینه قرار دهید. این پس زمینه ها می توانند یک تصویر و یا یک رنگ مورد نظر شما باشند. خواص پس زمینه CSS مورد استفاده برای تعریف جلوه های پس زمینه:

background-color
background-image
background-repeat
background-attachment
background-position

Background Color

با استفاده از این دستور می توانید رنگ پس زمینه عناصر مورد نظر خود را تغییر دهید. به طور مثال پس زمینه جعبه متن، یک پاراگراف، div و یا هر عنصر دیگری را با می توانید با رنگ دلخواه پر کنید. به طور مثال با استفاده از دستور زیر می توانید رنگ پس زمینه کل صفحه را تغییر دهید:

body {
   background-color: blue;
}

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

body {
   background-color: blue;
}
body {
   background-color: #0000ff;
}
body {
   background-color: rgb(0, 0, 255);
}

در مثال زیر عناصر h1، p و div دارای پس زمینه هایی با رنگ های متفاوت هستند:

h1 {
   background-color: green;
}
div {
   background-color: lightblue;
}
p {
   background-color: yellow;
}

CSS background-color example!

This is a text inside a div element.

This paragraph has its own background color.

We are still in the div element.

Background Image

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

body {
   background-image: url("body-bg.jpg");
}

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

background repeat

به طور پیش فرض، تصویر پس زمینه یک تصویر را به صورت افقی و عمودی تکرار می کند. بعضی از تصاویر باید فقط به صورت افقی یا عمودی تکرار شوند.

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

اگربخواهیم تصویر بالا فقط در محور افقی تکرار شود دستور(;background-repeat: repeat-x) و اگربخواهیم تصویر بالا فقط در محور عمودی تکرار شود دستور(;background-repeat: repeat-x) را استفاده می کنیم و اگر بخواهیم تصویر فقط یکبار نشان داده شود و تکرار نشود، باید از دستور (;background-repeat: no-repeat) استفاده کنیم.

background position

برای تعیین موقعیت مکانی تصویر در پس زمینه از دستور background-position استفاده می کنیم. وقتی که بخواهیم تصویر در پس زمینه یکبار و بدون تکرار نشان داده شود، باید محل قرارگیری تصویر در یک زمینه بزرگ را تعیین کنید. به عنوان مثال توسط مجموعه دستورات زیر، پس زمینه صفحه وب سایت، در سمت چپ و بالای صفحه نشان داده می شود:

body {
   background-image: url('img_tree.png');
   background-repeat: no-repeat;
   background-position: left top;
}

background attachment

شاید وب سایتهایی را دیده باشید که هنگامی که صفحه را برای مطلعه اسکرول میکنیم، پس زمینه آنها در جای خود ثابت مانده و محتوای آن صفحه حرکت میکند. این کار توسط دستور background-attachment انجام می شود.

برای تعیین اینکه تصویر پس زمینه ثابت باشد (با بقیه صفحه حرکت نکند)، از ویژگی background-attachment با مقدار fixed استفاده کنید:

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

برای کوتاه کردن کد، می توانید تمام خواص پس زمینه را در یک خط بنویسید. این یک ویژگی shorthand نامیده می شود.

body {
   background: #ffffff url("img_tree.png") no-repeat right top;
}

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

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

آیا میخواهید React، JavaScript، Illustrator، UX و بیشتر یاد بگیرید؟ یا شاید شما همیشه می خواستید مهارت های تصویرسازی خود را بهبود ببخشید تا بتوانید پروژه شخصی خود را که در دو سال گذشته روی دسکتاپ شما نشسته است، پایان دهید. به هر دلیلی، هیچ راهی بهتر از یادگیری دانش آموزان وجود ندارد. برای دسترسی سریع به برخی از آموزش های عالی، YouTube پلت فرم کامل است.

۱ – DesignCourse

این کانال توسط گروهی به نام Gray اجرا می شود که برای برخی از نام های بزرگ در یادگیری ویدئویی از جمله Pluralsight، LinkedIn Learning و Lynda.com کار کرده است. او آموزش کامل پشته توسعه، که در این مورد به شما کمک می کند ترکیبی از طراحی و توسعه آموزش از جمله UI/UX, front end dev- back end dev and graphic design. با فیلم های جدید هفتگی، همیشه ارزش چک کردن دارد.

۲ – DevTips

اگر شما همیشه برای پریدن به جهان جاوا اسکریپت ترسیدید، باید از اینجا شروع کنید. هنگامی که میزبان شما David و MPJ شما را به قلاب می کشند، می توانید هر هفته بازگردید و چیزی جدید به دست آورید. بسیاری از انواع و سطوح در این کانال وجود دارد: شما می توانید یاد بگیرند که چگونه با Adobe CC شروع به کار کنید، برخی از نمونه سازی React را امتحان کنید و انیمیشن را با CSS کشف کنید.

۳ – Gigantic

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

۴ – Mike Locke

مایک لاک یک خواننده پرشور و مشتاق است که طراح ارشد UI / UX با مجموعه مهارت های گسترده است. او همه چیز را در مورد طراحی UI بصری، تجربه کاربر، طراحی تعاملی، معماری اطلاعات، تحقیق و تجزیه و تحلیل، XHTML / CSS و استراتژی و برنامه ریزی می داند. کانال او بازتابی است از آنچه که او از طراحی می داند. لاک در طراحی UI / UX تمرکز می کند و بسیاری از افکار و توصیه های معقول و منطقی ارائه می دهد. به علاوه، اگر شما نیاز به مشاوره حرفه ای دارید باید نگاهی به این کانال بندازید.

۵ – Layout Land

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

۶ – LevelUp Tuts

ماموریت این کانال کمک شما به تبدیل شدن به یک توسعه دهنده وب بهتر است. این کانال مجموعه جامعی از فیلم ها ( بیش از ۸۰۰) با موارد جدید به طور منظم اضافه شده است. زبانها و تکنولوژی ها در آن درجه بندی شده است. اگر بخواهید Vue و React یاد بگیرند،فیلم های زیادی در آن موجود است. همچنین شامل بسیاری از فیلمهای HTML5، دروپال، CSS، SASS، Sketch و وردپرس است.

۷ – The Net Ninja

اگر میخواهید یک کمربند سیاه را در توسعه وب بدست آورید، این کانال جای خوبی برای یادگیری است. به روز رسانی منظم (تقریبا روزانه) در آن انجام می شود. به طور معمول فیلم های جدید سریال می شوند، به این معنی که بیننده ها یک دوره کامل را دریافت می کنند. بنابراین چه دوره هایی در معرض پیشنهاد هستند؟ Vuetify, Vue CLI, D3, React, Redux, Firebase, Materialize, Firestore, object-oriented JavaScript, CSS variables و Django در آن موجود هستند.

فرم ها در html

تگ form

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

خاصیت action در form :

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

خاصیت method در form :

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

همان طور که گفته شد، تگ form به تنهایی قابلیت خاصی در اختیار کاربران قرار نمی دهد و با تگ های input ، select ،text area و .. که زیر مجموعه های این تگ می باشند کارایی پیدا می کند.

تگ input: ای تگ شامل خاصیت هایی می شود که برای ایجاد دکمه های رادیویی، دکمه ارسال، فیلدهای متنی (متن کوتاه) ، فیلدهای مربوط به رمز عبور، فیلد آپلود فایل و… کاربرد دارد.
تگ select: این تگ در کنار تگ option برای ایجاد منوهای بازشونده و انتخاب یک یا چند مورد استفاده می شود.
تگ textarea: این تگ برای دریافت متن های طولانی بکار برده می شود.

تگ input

این تگ با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات از قبیل فیلد متنی (text)، فیلد رمز عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و … را ایجاد کرد.

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

نوع text

بیشترین و رایج ترین نوع مورد استفاده نوع trxt می باشد که یک فیلد تک خطی است که کاربر می تواند داخل آن اطلاعات وارد کند.

<form action="users/get.php" method="get">
   <input type="text" name="firstname">
</form>

نوع password

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

<form action="users/get.php" method="get">
   <input type="password" name="password" />
</form>

نوع button

برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد.

<form action="users/get.php" method="get">
   <input type="button" value="دکمه" onclick="alert('دکمه در تگ فرم باید با دستورات جاوا اسکریپت تکمیل شود')" />
</form>

نوع submit

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

<form action="users/get.php" method="get">
   <input type="submit" value="ارسال" />
</form>

نوع reset

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

<form action="users/get.php" method="get">
   <input type="reset" value="نوشتن از نو" />
</form>

نوع checkbox

از این نوع به همراه تگ input برای ایجاد چک باکس بکار برده می شود.

<form action="users/get.php" method="get">
   <input type="checkbox" checked="checked" name="choose" value="1"/>
</form>

نوع file

برای آپلود یک فایل به سرور استفاده می شود.

<form action="users/get.php" method="get" enctype="multipart/form-data">
   <input type="file" name="file-name" accept="image/gif,image/jpg,application/pdf" />
</form>

برای اینکه این نوع به درستی عمل کند، باید خاصیت enctype را با مقادیر multipart/form-data به تگ form اضافه کنیم.
نکته: پارامتر اختیاری accept مشخص کننده فرمت های مجازی است که از طریق فیلد، قابل آپلود هستند، این فرمت ها بر اساس استاندارد MIME یا (Multipurpose Internet Mail Extensions) مشخص می شوند. لیست کامل از فرمت ها و معادل آنها در استاندارد MIME

نوع hidden

برای ارسال فیلدهای مخفی به سمت سرور بکار برده می شود.

<form action="users/get.php" method="get">
   <input type="hidden" name="hidden-name" value="13" />
</form>

نوع radio

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

<form action="users/get.php" method="get">
   <input type="radio" name="radio-box" value="1" />
</form>

تگ select در form

از این تگ برای ایجاد یک منوی کشویی که دارای چند گزینه باشد در صفحات html استفاده می شود. برای ساختن گزینه های انتخابی از تگ زیرمجموعه آن یعنی option استفاده می شود.

<form action="users/get.php" method="get">
   <select name="select-option">
      <option value="0" selected="selected">انتخاب کنید</option>
      <option value="1">html</option>
      <option value="2">css</option>
      <option value="3">java script</option>
   </select>
</form>

در حالت عادی در هر تگ select کاربران مجاز به ارسال تنها یک مقدار می باشند، برای اجازه ارسال چندین مقداردر این تگ، باید خاصیت multiple را به آن اضافه کنیم.

<form action="users/get.php" method="get">
   <select name="select-option[]" multiple="multiple">
      <option value="0" selected="selected">انتخاب کنید</option>
      <option value="1">html</option>
      <option value="2">css</option>
      <option value="3">java script</option>
   </select>
</form>

تگ textarea در form

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

<form action="users/get.php" method="get">
   <textarea name="your-text" cols="50" rows="8">
</textarea>
</form>

از خاصیت cols برای تعیین عرض(اندازه ستون ها) و از خاصیت rows برای تعیین ارتفاع(تعداد سطرها) استفاده می شود.

استفاده از label در form

برای ایجاد برچسب های استاندارد در فرم ها از تگی با نام label استفاده می شود، label در واقع نقش معرف و برچسب را برای تگ های فرم ایفا می کند.

<form action="users/get.php" method="get">
   <label for="your-text">یادداشت:</label>
      <textarea name="your-text" cols="50" rows="8" id="your-text"
</textarea>
</form>

برای هر فیلدی که قصد تعریف برچسب داریم، یک id تعریف کرده و با خاصیت for برچسب را به آن نسبت می دهیم.

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

تعیین عرض و ارتفاع در 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 تعریف شده اند و یا با ارزش های 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 (بخش سوم)

تگ 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(بخش هفتم)

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(بخش دوم)

تگ 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(بخش سوم)

یک ویرایشگر کد چیست؟

ویرایشگرهای کد نرم افزارهای مهم و اساسی برای هر یک از توسعه دهندگان، طراحان و حتی نویسندگان هستند. محیط های یکپارچه توسعه یکپارچه (IDE ها) اغلب برای انجام وظایف کوچکتر، مانند کار بر روی یک پروژه یا پرونده، سنگین است.

از سوی دیگر، ویراستاران متن اصلی مانند Notepad در ویندوز و یا TextEdit در macOS برای وظایف ویرایش کد تحت تأثیر قرار می گیرند و بسیاری از ویژگی های ضروری را از دست می دهند و باعث می شود که ویرایش کد بسیار دشوار باشد.

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

علاوه بر این، بسیاری از ویراستاران کد اینجا می توانند رفتار خود را از طریق گزینه های گزینه تنظیمات (چیزهایی مانند تنظیم طول برگه، طول خط و بسته بندی، تکمیل خودکار، برجسته نحو، و غیره) تغییر دهید. این توانایی شکل ظاهر و رفتار برنامه، به برنامه نویس اجازه می دهد تا سودمندی نرم افزار را به حداکثر برسانند، در حالی که پیش فرض های یک کاربر معمولی را تجربه می کند تا یک تجربه دلپذیر و مفید از فضای بیرونی داشته باشد.

چگونه یک ویرایشگر کد را انتخاب کنیم؟

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

آنچه را که ویرایشگر شما برای شما انجام می دهد را در نظر بگیرید. آیا از تکمیل خودکار کدها، یا براکت یا تگ های اتوماتیک و بسته شدن آن ها لذت می برید؟ یا شما یک طرفدار بزرگ از حالت ساده و غیر اتوماتیک از ویرایشگرها هستید؟ آیا می خواهید عملیات Git را مستقیما از ویرایشگر خود انجام دهید؟

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

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

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

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

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

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

۱- ویرایشگر Sublime Text :

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

وب سایت ویرایشگر sublime text

۲- ویرایشگر Visual Studio Code :

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

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

وب سایت ویرایشگر visual studio code

۳- ویرایشگر Atom :

ویرایشگر Atom یک ویرایشگر منبع باز است و توسط GitHub توسعه یافته است. در توسعه اولیه آن به شدت تحت تاثیر سبک جدید ویرایشگر محبوب Sublime Text قرار گرفت. با این حال، تفاوت های کلیدی با sublime text دارد که می توان به اینکه Atom رایگان و منبع باز است و ادغام آسان از جعبه را با Git و GitHub ارائه می دهد اشاره کرد.

Atom در گذشته دارای مشکلات عملکرد و ثبات بوده است، اما الان آن ها به طور قابل توجهی کاهش یافته اند. درست است که هنوز از بعضی از ویرایشگرها کم اهمیت تر است، اما به همان میزان قابل اعتماد و سریع است.

وب سایت ویرایشگر Atom

۴- ویرایشگر Brackets :

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

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

وب سایت ویرایشگر brackets

۵- ویرایشگر Vim:

این نرم افزار خط فرمان مورد علاقه برنامه نویسان قدیمی است. از خصوصیات آن سبک و سریع بودن و سازگاری بالا با سیستم عامل های hinux و macOS است.

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

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

وب سایت ویرایشگر vim

بهترین ویرایشگرهای کد (بخش دوم)

آموزش HTML5

HTML5 چیست؟

نسخه پنجم HTML است که برای تولید محتوای وب سایت می باشد.اهداف اصلی Html5 پشتیبانی از جدیدترین فناوری‌های چند رسانه‌ای است بطوری که خواندن آن را آسان کند و به طور مداوم نیز توسط رایانه‌ها، مرورگرهای وب، تجزیه کننده‌ها و … قابل فهم باشد و از مهمترین ویژگی های آن‎ها می‎توان به ایجاد انیمیشن و پشتیبانی از فناوری‌ های جدید چند ‎رسانه‌ای نام برد.

لیست تگ های حذف شده در html5 :

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

لیست تگ های اضافه شده در html5 :

<article>
<header>
<hgroup>
<footer>
<nav>
<section>
<summary>
<datalist>
<keygen>
<meter>
<bdi>
<mark>
<output>
<progress>
<rp>
<rt>
<ruby>
<wbr>
<video>
<audio>
<canvas>
<embed>
<figure>
<figcaption> 
<source>
<time>

تگ article

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

<article>
   <h1>Introduction to HTML</h1>
   <p>HTML is a markup language that is used for creating web pages.</p>
</article>

تگ aside

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

<aside>
   <h1>Apollo 13 Facts</h1>
   <p>Apollo 13 was the seventh manned mission in the American Apollo space program and the third intended to land on the Moon.</p>
</aside>

تگ header

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

<header>
   <h1>Tutorial Republic</h1>
   <nav>
      <p>
         <a href="/home">Home</a>
         <a href="/about-us">About Us</a>
         <a href="contact-us">Contact Us</a>
      </p>
   </nav>
</header>

تگ nav

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

<nav>
   <ul>
      <li><a href="/Home">Home</a></li>
      <li><a href="/about-us">About Us</a></li>
      <li><a href="contact-us">Contact Us</a></li>
   </ul>
</nav>

تگ section

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

نکته: وقتی از این تگ استفاده می کنیم که حتما بتوان برای آن محتوا عنوان تعریف کرد (بتوان از تگ های h1 تا h6 در آن استفاده کرد).

<section>
   <h1>Welcome to Our Website</h1>
   <p>Welcome and thank you for taking the time to visit our website.</p>
</section>

تگ footer

این تگ نشان دهنده پاورقی یک سند یا بخش است. یک پاورقی معمولا حاوی اطلاعاتی درباره نویسنده سند، اطلاعات کپی رایت، پیوندهایی به اسناد مربوطه و غیره است.

<footer>
   <nav>
      <p><a href="#">Terms of Use</a> | <a href="#">Privacy Policy</a></p>
   </nav>
   <p>Copyright © ۲۰۱۴ Tutorial Republic</p>
</footer>

تگ های بالا ، برای تعیین ساختار اصلی سایت مورد استفاده قرار می گیرند.

تگ details

این تگ برای ارائه یک ویژگی “تکمیل خودکار” برای عنصر استفاده می شود. بدین صورت که کاربران یک لیست کشویی از گزینه های از پیش تعریف شده در هنگام تکمیل فیلد، مشاهده می کنند و نشان دهنده یک کنترل است که کاربر می تواند اطلاعات اضافی را بر اساس تقاضا دریافت کند.

تگ summary

این تگ همراه با تگ details برای ارائه یک خلاصه قابل مشاهده برای کاربر استفاده می شود. هنگامی که کاربر روی خلاصه کلیک می کند، اطلاعات اضافی یا محتویات داخل عنصر details که قبلا پنهان شده اند قابل مشاهده می شود.

<details>
   <summary>What is HTML?</summary>
   <p>HTML is a markup language for describing the structure of web pages.</p>
</details>

What is HTML?

HTML is a markup language for describing the structure of web pages.

تگ hgroup

این تگ برای عناصر گروه heading (عنوان) استفاده می شود(برای گروه بندی تگ های h1 تا h6).

<hgroup>
   <h1>This is a main heading</h1>
   <h2>This is sub-heading</h2>
</hgroup>

تگ datalis

این تگ یک مجموعه از گزینه های از پیش تعیین شده برای یک تگ input را مشخص می کند. این تگ می تواند برای ارائه گزینه های سریع برای یک فیلد ورودی مانند یک ویژگی “تکمیل خودکار” مورد استفاده قرار گیرد که نه تنها موجب صرفه جویی در زمان کاربر می شود، بلکه خطاها را نیز کاهش می دهد، زیرا کاربر احتمال اشتباه املایی کمتری دارد.

<p>Enter your favorite browser name:</p>
<input type="text" list="browsers">
<datalist id="browsers">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Internet Explorer">
   <option value="Opera">
   <option value="Safari">
</datalist>

Enter your favorite browser name:

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

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

استایل css برای پس زمینه ها(background):

Background Color

CSS background-color example!

Background Image

background repeat

background position

background attachment

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

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

۱ – DesignCourse

۲ – DevTips

۳ – Gigantic

۴ – Mike Locke

۵ – Layout Land

۶ – LevelUp Tuts

۷ – The Net Ninja

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

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

فرم ها در html

تگ form

خاصیت action در form :

خاصیت method در form :

تگ input

نوع text

نوع password

نوع button

نوع submit

نوع reset

نوع checkbox

نوع file

نوع hidden

نوع radio

تگ select در form

تگ textarea در form

استفاده از label در form

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

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

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

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

Set the height and width of an element

Set the height and width of an element

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

CSS Box Model

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

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

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

رنگ ها در 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