ساخت منو افقی و عمودی بوسیله HTML

​

  

در این مقاله از آموزش طراحی سایت می آموزیم که چطور یک Icon Bar ( نوار آیکون ) با استفاده از کد CSS ایجاد کنید.

قدم اول : کد HTML را اضافه کنید. مثال :

< div class="icon-bar">

< a class="active" href="#">< i class="fa fa-home">< /i>< /a>

< a href="#">< i class="fa fa-search">< /i>< /a>

< a href="#">< i class="fa fa-envelope">< /i>< /a>

< a href="#">< i class="fa fa-globe">< /i>< /a>

< a href="#">< i class="fa fa-trash">< /i>< /a>

< /div>

قدم دوم :  کد CSS را برای ساخت منو افقی اضافه کنید. مثال :

.icon-bar {

  width: 100%; /* Full-width */

  background-color: #555; /* Dark-grey background */

  overflow: auto; /* Overflow due to float */

}

 

.icon-bar a {

  float: left; /* Float links side by side */

  text-align: center; /* Center-align text */

  width: 20%; /* Equal width (5 icons with 20% width each = 100%) */

  padding: 12px 0; /* Some top and bottom padding */

  transition: all 0.3s ease; /* Add transition for hover effects */

  color: white; /* White text color */

  font-size: 36px; /* Increased font size */

}

 

.icon-bar a:hover {

  background-color: #000; /* Add a hover color */

}

 

.active {

  background-color: #4CAF50; /* Add an active/current color */

}

​

 

مثال (ایجاد منوی عمودی) : کد CSS را برای ساخت منو عمودی اضافه کنید.

.icon-bar {

width: 90px; /* Set a specific width */

background-color: #555; /* Dark-grey background */

}

.icon-bar a {

display: block; /* Make the links appear below each other instead of side-by-side */

text-align: center; /* Center-align text */

padding: 16px; /* Add some padding */

transition: all 0.3s ease; /* Add transition for hover effects */

color: white; /* White text color */

font-size: 36px; /* Increased font-size */

}

.icon-bar a:hover {

background-color: #000; /* Add a hover color */

}

.active {

background-color: #4CAF50; /* Add an active/current color */

}

​

 

​

آموزش طراحی سایت-جاوا اسکرپیت

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

• آموزش دستورات جاوا اسکریپت
• کلید واژه های جاوا اسکریپت
• آموزش متغیرها و انواع داده ای در زبان جاوا اسکریپت
• آموزش محل قرار گیری کدهای جاوا اسکریپت

حال ادامه آموزش طراحی سایت در خدمت شما هستیم.

آموزش خروجی جاوا اسکریپت:

زبان JavaScript هیچ گونه توابع توکار (built-in) مربوط به چاپ و نمایش (print،display) ندارد.

توانایی جاوا اسکریپت در نمایش داده ها به گونه های مختلف (با استفاده از توابع متفاوت)

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

1. با استفاده از تابع window.alert()، در پنجره ی هشدار (alert box) داده را نمایش می دهد.
2. با استفاده از تابع ()، متن مشخص (خروجی HTML) را در صفحه چاپ کرده و نمایش می دهد.
3. به وسیله ی خاصیت innerHTML، محتوای HTML را تعریف می کند و داخل آن کد می نویسید یا آن را دستکاری می کند.
4. به کمک متد console.log()، داده ی مورد نظر را در مرورگر به نمایش می گذارد.

استفاده از تابع ()window.alert

می توانید از یک پنجره ی هشدار (alert box) برای نمایش دادن خروجی (داده) استفاده کرد.

1< h1 >My First Web Page< /h1 >

1< p >My first paragraph.< /p >

1  

1< script >

1    window.alert(5 + 6);

1< /script >

استفاده از متد ()

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

مثال:

1< script >

1    (5 + 6);

1< /script >11

استفاده از () پس از اینکه سند HTML کاملاً بار گذاری شده، باعث می شود کلیه ی HTML های موجود از صفحه حذف گردند.

مثال:

< button type="button" ="(5 + 6)" >Try it< /button >

استفاده از خاصیت innerHTML

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

جهت دسترسی به عنصر HTML، جاوا اسکریپت می تواند از متد document.getElementById(id) بهره بگیرد.
خصیصه ی id عنصر HTML را تعریف می کند. خاصیت innerHTML در واقع محتوای HTML را تعریف می کند.

مثال:

1< script >

1    document.getElementById("demo") = 5 + 6;

1< /script >

استفاده از متد ()console.log

می توان در مرورگر با استفاده از متد console.log()، داده ی مورد نظر را نمایش داد.
دکمه ی F12 را فشار داده تا پنجره ی فرمان / کنسول مرورگر فعال شود، سپس "Console" را در منو انتخاب کنید.

مثال:

1< script >

1    console.log(5 + 6);

1< /script >

آموزش Syntax جاوا اسکریپت:

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

برنامه های جاوا اسکریپت

یک برنامه ی کامپیوتری / Computer program در واقع فهرستی از "دستورات / instructions" می باشد که باید توسط رایانه "اجرا / execute" شود.
در یک زبان برنامه نویسی به instruction های برنامه، Statement (دستور) گفته می شود.
جاوا اسکریپت نیز یک زبان برنامه نویسی محسوب می شود.
دستورات زبان جاوا اسکریپت توسط کاراکتر نقطه ویرگول (;) از هم جدا می شوند.

مثال:

1var x = 5; 

1var y = 6; 

1var z = x + y; 

نکته:

در HTML، برنامه های جاوا اسکریپت توسط مرورگر وب اجرا می شوند.

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

دستورات JavaScript

دستورات جاوا اسکریپت متشکل است از : values (مقادیر)، Operators (عملگرها)، Expressions (عبارات)، Keywords (کلیدواژه ها) و Comments (توضیحات).

لفظ ها یا لیترال های جاوا اسکریپت JavaScript literals:

مهمترین قوانین برای نوشتن مقادیر ثابت عبارتند از

اعداد Numbers – اعدادی که با اعشار (decimal) یا بدون اعشار نوشته می شوند، به ترتیب زیر

10.50

‎1001‎

رشته ها Strings – رشته ها متن یا نوشته هایی هستند که درون علامت های " " یا ' ' نوشته می شوند.

"John Doe" ‎

‎'John Doe'

عبارات Expressions – عبارات نیز می توانند نمایان گر مقادیر ثابت باشند.

5 + 6

‎5 * 10

متغیرهای جاوا اسکریپت (JavaScript Variables)

در یک زبان برنامه نویسی، متغیرها (variables) به منظور ذخیره سازی (store) مقادیر داده ها بکار می روند.
جاوا اسکریپت با استفاده از کلید واژه ی var متغیر تعریف (define) می کند.
علامت مساوی (=) را به منظور تخصیص مقادیر به متغیرها مورد استفاده قرار می دهیم.
در این مثال، x به عنوان متغیر تعریف شده، سپس به مقدار 6 به آن اختصاص داده شده است.

var x;

x = 6; ‎‏

عملگرهای جاوا اسکریپت (JavaScript Operators)

جاوا اسکریپت با استفاده از عملگر جایگزین / assignment operator(=) مقادیر را به متغیر ها نسبت (تخصیص / assign) می دهد.

var x = 5;

var y = 6;‎

جاوا اسکریپت با استفاده از عملگرهای محاسباتی (arithmetic operator) از جمله :+ - * / مقادیر را محاسبه (compute) می کند.

(5 + 6) * 10‎‏ ‏

کلیدواژه های جاوا اسکریپت (JavaScript Keywords)

واژه های کلیدی (Keyword) جاوا اسکریپت به منظور شناسایی عملیاتی که باید (انجام) پیاده شود مورد استفاده قرار می گیرد.
در واقع کلید واژه ی var به مرورگر دستور / اطلاع می دهد یک متغیر جدید ایجاد کند.

var x = 5 + 6;

var y = x * 10;‎‏

توضیحات در جاوا اسکریپت (JavaScript Comments)

تمامی دستورات جاوا اسکریپت لزوماً "اجرا" نمی شوند.
کدهایی که پس از کاراکتر // یا بین */ و /* قرار داده می شوند در حقیقت توضیح (comment) محسوب می شوند و از این رو در اجرا نادیده گرفته می شوند.

var x = 5; // I will be executed

‎// var x = 6; I will NOT be executed

جاوا اسکریپت، حساس به کوچک و بزرگی حروف (Case sensitive)

تمامی شناسه های (identifier) جاوا اسکریپت به کوچک و بزرگی حروف حساس هستند.
به عنوان مثال، lastName و lastname گرچه هر دو متغیر هستند ولی به دلیل تفاوت در کوچک و بزرگی حروف کاملاً از هم متمایز تلقی می گردند.

lastName = "Doe";

lastname = "Peterson";‎

برای جاوا اسکریپت VAR یا Var با کلید واژه ی var یکسان نیست.

JavaScript و Camel Case

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

خط تیره (hyphen)

first-name،‎ last-name،‎ master-card،‎ inter-city ‏

خط زیرین (underscore)

first_name،‎ last_name،‎ master_card،‎ inter_city

و

First Name،‎ LastName،‎ MasterCard،‎ InterCity‎

در زبان های برنامه نویسی، بخصوص جاوا اسکریپت، camel case اغلب با یک حرف کوچک (lower case) شروع می شود.

firstName،‎ lastName،‎ masterCard،‎ interCity

توجه:

در جاوا اسکریپت اجازه ی استفاده از خط تیره (hyphen) به برنامه نویس داده نمی شود مگر برای تفریق.

مجموعه کاراکترهای جاوا اسکریپت (JavaScript Character set)

جاوا اسکریپت از مجموعه کاراکترهای Unicode استفاده می کند.

یونیکد Unicodeتمامی کاراکترها، نشانه گذاری ها (punctuation) و علائم موجود را دربر می گیرد.

آموزش توضیحات در جاوا اسکریپت:

از Comment ها در جاوا اسکریپت برای توضیح کد و بهبود خوانایی آن ها استفاده می شود.
همچنین از توضیحات / comments می توانیم زمانی که می خواهیم کد جایگزینی را به جای کد اصلی امتحان کنیم، کمک بگیریم.

توضیحات تک خطی (single line comments)

توضیحات تک خطی با کاراکتر // آغاز می گردند.
جاوا اسکریپت هر متنی را که بین کاراکتر // و انتهای خط قرار بگیرد کاملاً نادیده می گیرد(اجرا نمی کند).
در این مثال از comment تک خطی پیش از هر خط به منظور تشریح کد مربوط استفاده شده.

مثال

1< script >

1    // Change heading:

1    document.getElementById("myH") = "My First Page"

1    // Change paragraph:

1    document.getElementById("myP") = "My first paragraph."

1< /script >

مثال زیر برای توضیح کد در انتهای هر خط یک comment تک خطی بکار گرفته.

1< script >

1    var x = 5;      // Declare x, give it the value of 5

1    var y = x + 2;  // Declare y, give it the value of x + 2

1  

1    document.getElementById("demo") = y; // Write y to demo

1< /script >

توضیحات چند خطی (multi-line comments)

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

کامنت Comment های چند خطی با */ آغاز شده و با کاراکتر /* خاتمه می یابند.
هر نوشته ی که بین دو کاراکتر گفته شده قرار گیرد کاملاً توسط جاوا اسکریپت نادیده گرفته می شود.
این مثال یک توضیح چند خطی (comment block یا مجموعه ی از توضیحات) را برای تشریح کد مورد نظر بکار می گیرد

مثال:

1< script >

1    /*

1    The code below will change

1    the heading with id = "myH"

1    and the paragraph with id = "myp"

1    in my web page:

1    */

1    document.getElementById("myH") = "My First Page"

1    document.getElementById("myP") = "My first paragraph."

1< /script >

نکته:

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

کامنت Comment block ها معمولا برای مستند سازی های رسمی بکار می روند.

استفاده از توضیحات برای جلوگیری از اجرای کد

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

مثال:

1< script >

1    //document.getElementById("myH") = "My First Page"

1    document.getElementById("myP") = "My first paragraph."

1< /script >

حال مثال زیر را مشاهده می کنید که به کمک comment block از اجرای چندین خط کد جلوگیری می کند.

مثال:

1< script >

1     /*

1     document.getElementById("myH") = "Welcome to my Homepage"

1     document.getElementById("myP") = "This is my first paragraph."

1     */

1 < /script >

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

آموزش طراحی سایت-آموزش جاوا اسکرپیت

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

• مزایای استفاده از جاوا اسکریپت
• نوشتن اولین قطعه کد جاوا اسکریپت
• فعال سازی جاوا اسکریپت در مرورگرها
• محل قرارگیری دستورات جاوا اسکریپت

حال ادامه آموزش طراحی سایت در خدمت شما هستیم.

آموزش دستورات جاوا اسکریپتstatements:

در جاوا اسکریپت statements، دستوراتی هستند که توسط مرورگر وب اجرا می شوند.

دستورات جاوا اسکریپت

دستور زیر به مرورگر دستور می دهد عبارت "Hello Dolly." را داخل یک المان HTML با شناسه ی "demo" بنویسد.

document.getElementById("demo") = "Hello Dolly."

عبارات JavaScript

document.getElementById("demo") = "Hello Dolly." Try it Yourself »

برنامه های جاوا اسکریپت

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

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

در این مثال x، y و z هر یک مقداردهی شده اند که یکی پس از دیگری اجرا می شوند. همان طور که خود مشاهده می کنید z آخر از همه اجرا می گردند.

مثال:

var x = 5; var y = 6; var z = x + y; 1document.getElementById("demo") = z;

توجه:

برنامه های نوشته شده توسط جاوا اسکریپت (javascript programs) همگی کد جاوا اسکریپت خوانده می شوند.

نقطه ویرگول ;

نقطه ویرگول برنامه ها (دستورات) جاوا اسکریپت را از هم جدا می کنند.

در انتهای هر دستور قابل اجرا یک نقطه ویرگول لحاظ کنید.

a = 5;

b = 6;

c = a + b;‎

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

a = 5; b = 6; c = a + b;‎

نکته:

قرار دادن نقطه ویرگول در انتهای دستورات اگرچه کاملاً ضروری نیست، اما اکیداً توصیه می شود.

فاصله بین بخش های مختلف کد

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

جاوا اسکریپت معمولاً فاصله ی بین بخش های مختلف کد را نادیده می گیرد. با این وجود می توان با استفاده از فاصله (white space) کد را به مراتب خواناتر کرد.

به عنوان مثال، دو نمونه ی زیر کاملاً یکسان هستند.

var person = "Hege";

var person="Hege";‎

توصیه می شود از فاصله در اطراف عملگرهای = + - * / استفاده کنید.

var x = y + z;‎

طول خط کد و شکستن آن (line length، line break)

به منظور خواناتر کردن کد، برنامه نویس ها اغلب سعی می کنند خطوط کدهایشان از 80 کاراکتر تجاوز نکند

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

مثال:

document.getElementById("demo") =

‎"Hello Dolly.";‎

مجموعه / گروهی از دستورات (code block)

می توان مجموعه ی از دستورات جاوا اسکریپت را داخل علامت های {...} جای گذاری کرد تا از این طریق امکان اجرای یکجا و همزمان کدها فراهم آید (به عبارتی آن ها را با قرار دادن داخل کاراکتر مزبور گروه بندی کرد).

هدف از این امر اجرای همزمان کدهای جاوا اسکریپت است.

یکی از جاهایی که در آن دستورات جاوا اسکریپت را به صورت گروه بندی شده مشاهده می کنید، داخل توابع (function) جاوا اسکریپت است.

مثال:

function myFunction() { 1‎ document.getElementById("demo") = "Hello Dolly." document.getElementById("myDIV") = "How are you?" ‎}‎

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

دستورات جاوا اسکریپت معمولاً با یک کلید واژه / keyword شروع می شود که نوع عملیاتی که در جاوا اسکریپت باید اجرا شود را تعیین می کند.

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

لطفاً توجه داشته باشید کلید واژه ها را نمی توان به عنوان اسم برای متغیرها مورد استفاده قرار داد.

آموزش متغیرها و انواع داده ای در زبان جاوا اسکریپت:

انواع داده ای در جاوا اسکریپت

یکی از مشخصه های اساسی هر زبان برنامه نویسی، انواع داده ای (Data Types) است که توسط آن پشتیبانی می شود. جاوا اسکریپت امکان استفاده از سه نوع داده ای اساسی زیر را به کاربر می دهد.

اعداد (Numbers) مثل 123 ، 12.50 و....

متن (Strings) مثل “ Text “ و....

مقادیر صحیح یا غلط (Boolean) مثل true یا false.

همچنین جاوا اسکریپت دو نوع داده ای جزیی به صورت null (خالی) و undefined (تعریف نشده) را نیز به صورت مقادیر تک وجهی پشتیبانی می کند.

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

نکته:

جاوا اسکریپت، تفاوتی بین نوع داده ای عددی (Integer) و اعداد بزرگتر (Flaot) قائل نشده و تمامی اعداد در این زبان در یک متغیر 64 بیتی از نوعfloat تعریف می شوند.

نحوه تعریف متغیرها در زبان جاوا اسکریپت

همانند سایر زبان های برنامه نویسی، جاوا اسکریپت نیز از متغیرها (Variables) پشتیبانی می کند. متغیرها در واقع ظروفی هستند که مقادیر مورد نظر خود را درون آنها ریخته و یک نام منحصر به فرد را برایش انتخاب می کنید. سپس در هر جای برنامه که خواستید از آن مقدار استفاده نموده و یا آن را تغییر دهید، کافی است نام متغیر را در کد خود بنویسید.

قبل از استفاده از یک متغیر در زبان جاوا اسکریپت، بایستی آن را در کد خود تعریف کنید. از واژه کلیدی var، همانند کد زیر برای تعریف متغیرها استفاده می شود. در مثال زیر، دو متغیر به نام های money و name را تعریف کرده ایم.

<script type="text/javascript">

‎‎

همچنین می توانید دو یا چندین متغیر را با استفاده از یک واژه کلیدی var و به صورت پشت سر هم تعریف کنید. همانند کد زیر

<script type="text/javascript">‎

‎‎

قرار دادن یک مقدار (Value) در متغیر را مقدار دهی اولیه می گویند. شما می توانید در زمان تعریف متغیر و یا در دستورات بعدی برنامه، آن را مقدار دهی کنید.

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

<script type="text/javascript">‎

‎‎

برای تعریف هر متغیر، فقط یکبار از واژه کلیدی var استفاده نمایید. در دفعات بعدی استفاده یا مقداردهی آن متغیر، دیگر نیازی با استفاده از کلمه var نیست.

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

نوع داده ای یک متغیر جاوا اسکریپت، حتی در طول کد می تواند، مثلا از عدد به متن تعییر کند. این کار آزادی عمل و امکان بروز خطای کمتری را به کاربر می دهد.

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

میدان شعاع ( دید ) استفاده از متغیرها در جاوا اسکریپت

میدان یا شعاع دید ( Scope ) یک متغیر، محدوده ای از کد برنامه است که در آن متغیر، قابل فراخوانی، استفاده و تغییر می باشد. متغیرها در جاوا اسکریپت می توانند دو نوع میدان دید داشته باشند.

متغیرهای سراسری (Global Variables) :

این نوع متغیرها سراسری بوده و در کل قطعه کد و برنامه قابل فراخوانی و استفاده هستند.

متغیرهای محلی (Local Variables) :

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

نکته:

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

<script type="text/javascript">‎

‎‎

توصیح مثال : در مثال فوق، یک متغیر سراسری به نام myVar و یک متغیر محلی نیز به همان نام درون تابع ای تعریف نموده و هر دو را مقدار دهی کرده ایم.

در هنگام اجرای دستور (myVar); درون تابع، مقدار متغیر محلی خوانده شده و در خروجی چاپ می شود.

قواعد نام گذاری متغیرها در جاوا اسکریپت

در هنگام نامگذاری متغیرها در جاوا اسکریپت، بایستی موارد زیر را رعایت نمایید.

شما مجاز به استفاده از نام های ذخیره شده و کلمات کلیدی زبان جاوا اسکریپت برای یک متغیر نیستید. لیست نام های دخیره شده و کلمات کلیدی جاوا اسکریپت در بخش بعدی قرار داده شده است. برای مثال نام هایی مثال if یاBoolean برای نامگذاری، غیر مجاز است.

نام متغیرها در جاوا اسکریپت، نباید با یک عدد(9 -0) شده و برای آغاز نام حتما بایستی یک کاراکتر حروفی یا علامت _ قرار بگیرد. برای مثال نام های 123est غیر مجاز و نام_123est ممکن است.

نام متغیرها در زبان جاوا اسکریپت، به بزرگی یا کوچکی حروف حساس هستند. برای مثال متغیرهای Name ، name و یا NaMe با هم متفاوت خواهند بود.

لیست کلمات کلیدی و ذخیره شده زبان جاوا اسکریپت

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

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

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

< head > … < /head >.

قرار دادن اسکریپت ها در تگ اصلی < body > … < /body > .

قرار دادن کدهای جاوا اسکریپت در یک فایل خارجی . js سپس لینک به آن فایل در بخش < head > صفحه.

در ادامه به تشریح هر یک از روش های بالا خواهیم پرداخت.

قرار دادن کدهای جاوا اسکریپت در تگ< head >صفحه

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

در مثال زیر در صورت کلیک کاربر بر روی دکمه فرمان< input > ، تابع sayHello ( ) اجرا شده و پیام خود را در صفحه نمایش می دهد.

توجه داشته باشید که کدهای موجود در بخش < head > صفحه، تا زمانی که فراخوانی نشوند، اجرا نخواهند شد.

قرار دادن کدهای جاوا اسکریپت در بخش < body > صفحه

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

همانند مثال زیر، کد < script > تعریف شده، بلافاصله پس از اجرا بر روی صفحه، پیام خروجی خود را نمایش می دهد.

قرار دادن کدهای جاوا اسکریپت در بخش < head > و < body > صفحه

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

همانند مثال زیر. در مثال زیر کد < script > موجود در بخش < head > در صورت کلیک کاربر بر روی دکمه فرمان و کد < script > موجود در بخش < body > به محض لود صفحه اجرا می شوند.

قرار دادن کدهای جاوا اسکریپت در یک فایل خارجی . js

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

1. جدا کردن بخش کدها از تگ های HTML برای خوانایی و کاهش حجم کد صفحه.
2. استفاده از یکسری کد مشترک جاوا اسکریپت در چندین فایل HTML با اتصال به فایل “.js” به جای نوشتن آن کدها به صورت جداگانه در هر صفحه.

برای این منظور، بایستی ابتدا کدها و توابع مورد نظر را در یک فایل متنی با نام مشخص و پسوند “.js” نوشته و سپس به وسیله یک تگ < script > در بخش < head > صفحه، آن فایل خارجی را به صفحه متصل کنید. همانند کد زیر < html >‎ ‎< head > ‎ < script type="text/javascript" src="filename.js" >< /script >‎ ‎ < /head >‎ ‎< body > ‎ ‎ .......‎ ‎ < /body >‎‎ < /html >‎

برای مثال شما می توانید تابع را در یک فایل خارجی “.js” تعریف کرده و سپس به وسیله یک تگ < script > و تابع sayHello ( )، در هر جای صفحه که می خواهید، آن را فراخوانی و اجرا کنید.

function sayHello() {‎ alert("Hello World")‎ }‎‏ ‏

همچنین می توانید این کد و فایل را برای هر چند فایل HTML دیگر که می خواهید، به کار ببرید.

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

آموزش طراحی سایت-آموزش جی کوئری

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

در قسمت قبل با jQuery جی کوئری آشنا شدید و استفاده از jQuery در صفحات وب را یاد گرفتید در ضمن چند مثال هم زدیم و رخداد Ready در Jquery را یا دادیم.حال ادامه دوره :

آموزش فراخوانی متدها به صورت زنجیر وار در Jquery:

زنجیره سازی متدها یا فراخوانی متدها به صورت زنجیر وار (Method chaining):

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

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

مثال:

<div id="divTest1" style="color: blue;">Hello, world!</div>

<script type="text/javascript">

$("#divTest1").text("Hello, world!").css("color", "blue");

</script>

در این مثال، یک شی جدید jQuery نمونه سازی می کنیم و المانی که شناسه ی آن divTest1 می باشد را با کاراکتر $ انتخاب می نماییم. این علامت یک میانبر بوده و جایگزینی برای کلاس jQuery می باشد. در نتیجه یک شی jQuery دریافت می کنیم که به ما این امکان را می دهد تا المان انتخابی را مطابق نیاز ویرایش کنیم. ما از آن شی برای فراخوانی متدtext() استفاده می کنیم. این متد متن المان انتخابی را تنظیم می کند. متد ذکر شده بار دیگر شی jQuery را بازمی گرداند و به ما اجازه می دهد متد یا عملیات دیگری (متد css()) را بر روی مقدار برگشتی، اجرا کنیم. می توانیم بسته به نیاز خود توابع دیگری را به انتهای تابع دیگر متصل کرده و فراخوانی کنیم، اما در کل باید از طولانی کردن بیش از حد کد خودداری نمود. خوشبختانه، جاوا اسکریپت در خصوص دستور نگارشی (syntax) خیلی سخت گیر نیست، بنابراین شما می توانید آن را مطابق میل فرمت دهی کنید. به عنوان مثال، می توان دستور ذکر شده در بالا را به صورت زیر نیز نوشت:

مثال 2:

<div id="divTest2" class="bold" style="color: blue;">Hello, world!</div>

<script type="text/javascript">

$("#divTest2").text("Hello, world!")

.removeClass("blue")

.addClass("bold")

.css("color", "blue");

</script>

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

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

معرفی انتخابگرهای jQuery:

یکی از عملیات رایج که برای انجام آن از جاوا اسکریپت استفاده می شود، خواندن و ویرایش محتویات صفحه می باشد. برای این منظور، ابتدا بایستی المانی که قصد دستکاری آن را دارید پیدا کنید. در اینجا است که انتخابگر (selector) jQuery به کمک شما می آید. با کد خالص جاوا اسکریپت، پیدا کردن المان ها و تغییر آن ها بسیار دشوار می باشد. مگر اینکه قصد یافتن تنها یک المان را داشته باشید که دارای شناسه ی منحصربفرد باشد. jQuery به شما این امکان را می دهد تا المان ها را بر اساس شناسه، کلاس ها، نوع (type)، مقدار attribute ها و غیره گزینش نموده و بازیابی کنید. این روش در واقع مبتنی بر selector های jQuery می باشد. از آنجایی انتخاب المان ها با jQuery یک فعل بسیار رایج است، constructor در اشکال و فرم های مختلف به کار می آید، بدین صورت که سازنده با پذیرفتن یک selector query به عنوان آرگومان، با کم ترین میزان کد، المان مد نظر را یافته و بیشترین کارایی را ارائه می دهد. شما می توانید با نوشتن دستورjQuery() و یا درج میانبر و جایگزین آن $()، یک شی jQuery نمونه سازی نمایید. بنابراین، انتخاب یک مجموعه المان به آسانی نمونه ی زیر می باشد:

$(<query here="">) </query>

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

آموزش انتخاب المان ها بر اساس شناسه و کلاس در Jquery:

انتخابگر #id:

یکی از پرکاربردترین انواع selector، انتخابگر #id (گزینش المان ها بر اساس شناسه) می باشد، همان طور که در مثال "Hello, world" نظاره گر آن بودیم. در مثال نام برده، از خصیصه ی ID یک تگ HTML برای یافتن و انتخاب یک المان منحصربفرد استفاده کردیم. جهت مکان یابی یک المان با شناسه ی مشخص، یک کاراکتر هش و به دنبال آن ID المان مورد نظر را درج نمایید:

$("#divTest")

مثال:

<div id="divTest"></div>

<script type="text/javascript">

$(function () {

$("#divTest").text("Test");

});

</script>

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

انتخابگر .class (گزینش المان بر اساس کلاس آن)

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

مثال:

<ul>

<li class="bold">Test 1</li>

<li>Test 2</li>

<li class="bold">Test 3</li>

</ul>

<script type="text/javascript">

$(function () {

$(".bold").css("font-weight", "bold");

});

</script>

انتخاب المان بر اساس اسم آن (element selector)

همچنین می توان المان ها را بر اساس اسم تگ آن ها انتخاب کرد. به عنوان مثال، می توانید تمامی لینک ها یک صفحه را بدین صورت (با ذکر اسم تگ آن ها) انتخاب کرد:

$("a")

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

$("div")

در صورت استفاده از یک انتخاب گر چند-المانه (مانند انتخابگر کلاس که در مثال قبلی بکار گرفته شد) و همچنین آگاهی از نوع دقیق المان های مورد انتخاب، توصیه می شود نوع المان را پیش از انتخابگر مشخص نمایید. نه تنها این روش دقیق تر است، بلکه پردازش آن برای jQuery آسان تر صورت پذیرفته که به واکنش هر چه سریعتر سایت کمک می کند. در زیر نسخه ی بازنویسی شده ی مثال قبلی را مشاهده می کنید:

$("span.bold").css("font-weight", "bold");

این مثال تمامی المان های span که اسم کلاس آن ها bold می باشد را bold می کند. البته، این روش را می توان با دیگر selector ها نیز پیاده سازی کرد.

پیدا کردن و انتخاب المان ها بر اساس attribute:

در آموزش قبلی، دیدیم که چگونه می توان المان ها را با توجه به کلاس یا شناسه ی آن ها انتخاب کرد( به آموزش انتخاب عناصر وب بر اساس کلاس و شناسه با jquery مراجعه کنید). این دو خاصیت (property) به خاطر اینکه برای استایل دهی به المان ها با CSS مورد استفاده قرار می گیرند، با هم مرتبط می باشند. اما با کتابخانه ی jQuery، می توان المان ها را بر اساس هر نوع خصیصه (attribute) پیدا و انتخاب کرد. در کتابخانه ی jQuery چندین انتخابگر خصیصه (attribute selector) وجود دارد که در مقاله ی حاضر به شرح برخی از آن ها می پردازیم.

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

انتخاب المان بر اساس خصیصه ی معین

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

<span title="Title 1">Test 1</span><br>

<span>Test 2</span><br>

<span title="Title 3">Test 3</span><br>

<script type="text/javascript">

$(function () {

$("[title]").css("text-decoration", "underline");

});

</script>

بنابراین، یک [] درج کرده و داخل آن اسم attribute دلخواه را ذکر می کنید. در نمونه ی بالا، با استفاده از یک انتخاب گر خصیصه (attribute selector)، کلیه ی المان هایی که attribute آن ها title می باشد را گزنیش کرده و سپس با استفاده از تابع .css()به المان های مزبور underline اعمال می کنیم. همان طور که پیشتر گفته شد، این کوئری با تمامی المان هایی که خصیصه ی آن ها title می باشد، صرف نظر از مقدارشان، منطبق می شود. اما گاهی لازم است یک المان را که attribute آن دارای مقدار مشخص است، پیدا کنیم.

انتخاب المان هایی که attribute آن ها دارای مقدار مشخص می باشد

در زیر مثالی را مشاهده می کنید که همه ی المان هایی که خصیصه ی آن ها دارای مقدار مشخص است را پیدا می کند:

<a href="http://www.google.com" target="_blank">Link 1</a><br>

<a href="http://www.google.com" target="_self">Link 2</a><br>

<a href="http://www.google.com" target="_blank">Link 3</a><br>

<script type="text/javascript">

$(function () {

$("a[target='_blank']").append("[new window]");

});

</script>

سلکتور Selector صرفا به jQuery اعلان می کند تمامی لینک هایی (المان های a) که دارای خصیصه ی target هستند و مقدار آن ها برابر رشته ی "_blank" می باشد را پیدا کرده و سپس متن "[new window]" را به آن ها پیوست (append) نماید. حال اگر بخواهیم المان هایی که مقدار attribute آن ها برابر با مقدار ذکر شده نباشند، انتخاب کنیم، چه اقدامی را بایستی اتخاذ کنیم؟ در پاسخ به این سوال باید گفت که کافی است انتخاب گر را با استفاده از عملگر " ! " نقیض نمایید:

$("a[target!='_blank']").append(" [same window]");

تنها فرق این نمونه با مثال قبلی در استفاده از عملگر " ! " پیش از علامت = می باشد. نمونه های دیگر: پیدا کردن المان های input که مقدار خصیصه ی name آن ها با رشته ی معین (مثلا 'txt') شروع می شود (با استفاده از عملگر ^=):

$("input[name^='txt']").css("color", "blue");

پیدا کردن المان های input که مقدار خصیصه ی name آن با رشته ی معین (مثلا letter) پایان می یابد (با استفاده از عملگر $=):

$("input[name$='letter']").css("color", "red");

پیدا کردن المان های input که مقدار خصیصه ی name آن ها برابر با رشته ی 'txt' می باشد:

$("input[name*='txt']").css("color", "blue");

آموزش انتخاب المان ها بر اساس رابطه ی پدر و فرزندی:

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

$("div > a")

این selector تمامی لینک هایی که فرزند مستقیم المان div هستند را انتخاب می کند. حال اگر عملگر < را با یک جای خالی (space) جایگزین نمایید، تمامی لینک های داخل المان div که حتی فرزند غیرمستقیم آن محسوب می شوند نیز انتخاب می شوند.

$("div a")

در اینجا مثالی را می بینید که در آن تگ bold که فرزند مستقیم المان div با شناسه ی TestArea1 است، آبی رنگ می شود:

<div id="divTestArea1">

<b style="color: blue;">Bold text</b>

<i>Italic text</i>

<div id="divTestArea2">

<b style="color: blue;">Bold text 2</b>

<i>Italic text 2</i>

<div>

<b style="color: blue;">Bold text 3</b>

</div>

</div>

</div>

<script type="text/javascript">

$("#divTestArea1 > b").css("color", "blue");

</script>

اگر این مثال را اجرا کنید، می بینید که تنها تگ bold اول آبی رنگ می شود. حال، چنانچه این کد را با روش دوم پیاده سازی کنید، هر دو تگ bold آبی رنگ می گردند. همان طور که در نمونه ی زیر مشاهده می کنید، مثال فوق را با اعمال یک تغییر (جایگزین کردن عملگر < با space) بازنویسی کردیم که در آن هر دو تگ bold انتخاب و آبی رنگ می شوند (نوه یا فرزندان غیرمستقیم المان div نیز دستکاری می شوند):

<div id="divTestArea1">

<b style="color: blue;">Bold text</b>

<i>Italic text</i>

<div id="divTestArea2">

<b style="color: blue;">Bold text 2</b>

<i>Italic text 2</i>

<div>

<b style="color: blue;">Bold text 3</b>

</div>

</div>

</div>

<script type="text/javascript">

$("#divTestArea1 b").css("color", "blue");

</script>

جی کوئری jQuery با ارائه ی تابعی به نام parent() به شما این اجازه را می دهد تا در صورت لزوم به بالای سلسه مراتب (نمودار درختی وراثت) پیمایش کنید. با این تابع می توان پدر یک عنصر فرزند را یافت.

پایان بخش دوم آموزش جی کوئری jQuery

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

آموزش طراحی سایت-آموزش جاوا اسکریپت

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل CSS در HTML‏ را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:

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


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

مثال:

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

function Hello()

{

alert("Hello, World");

}


اکنون اجازه بدهید از فایل جاوااسکریپت خارجی بالا در داکیومنت HTML خود استفاده کنیم، مانند زیر



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

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

نمونه یک

Javascript Internal Script





function Hello() {


alert("Hello, World");


}

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

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

نمونه دو

Event Handlers Example

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

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل سر برگ در HTML‏ را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:

آموزش Cascading style sheet ‏ ‏

استایل شیت Cascading style sheet (CSS) بیان می کند که داکیومنت ها روی صفحه و در چاپ چگونه نشان داده می شوند، یا شاید چگونه بیان می شوند. از زمانی که کنسرسیوم در سال 1994 تاسیس شد، W3C به طور فعالانه ای در استفاده از Style sheet روی وب پیشرفت کرده است.
CSS جایگزین های ساده و موثری را برای تعیین ویژگی های مختلف برچسب های HTML ارائه می دهد. با استفاده از CSS شما می توانید تعدادی از ویژگی های طراحی را برای یک HTML ارائه شده تعیین کنید. هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت (:) از هم جدا شده اند. اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند.

مثال:

ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب < font> استفاده می کند.

<p><font color="green" size="5">Hello, World!</font></p>

می توانیم با استفاده از style sheet مثال بالا را مانند زیر بازنویسی کنیم.

<p style="color:green;font-size:24px;">Hello, World!</p>

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

استایل Style sheet خارجی – قوانین style sheet را در یک فایل css مجزا تعریف می کند، و سپس آن فایل را با استفاده از برچسب در HTML وارد داکیومنت HTML شما می کند.

استایل Style sheet داخلی – قوانین style sheet را در با استفاده از برچسب< style>در بخش سربرگ داکیومنت HTML تعریف می کند.

استایل Inline style sheet – قوانین style sheet را مستقیما و به همراه عناصر HTML با استفاده از ویژگی style تعریف می کند.

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

Style sheet خارجی

اگر می خواهید از style sheet خود در صفحات مختلف استفاده کنید، توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید. یک فایل cascading style sheet دارای ضمیمه هایی مانند css می باشد و با استفاده از برچسب < link> وارد فایل های HTML خواهد شد.

توجه داشته باشید که ما یک فایل style sheet به نام style.css که دارای قوانین زیر می بشد، تعریف می کنیم.

.red{

   color: red;

}

.thick{

   font-size:20px;

}

.green{

   color:green;

}

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

!DOCTYPE html>

< html>

< head>

< title>HTML External CSS< /title>

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

< /head>

< body>

< p class="red">This is red< /p>

< p class="thick">This is thick< /p>

< p class="green">This is green< /p>

< p class="thick green">This is thick and green< /p>

< /body>

< /html>

این مثال نتیجه ی زیر را تولید خواهد کرد.

This is red

This is thick

This is green

This is thick and green

Style sheet داخلی

اگر می خواهید قوانین style sheet را برای یک داکیومنت مجزا به کار ببرید، فقط آن موقع است که می توانید این قوانین را با استفاده از برچسب< style>وارد بخش سربرگ داکیومنت HTML کنید.
قوانین تعریف شده در style sheet داخلی، قوانین تعریف شده در فایل CSS خارجی را نیز در بر می گیرد.

مثال:

اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما در اینجا قوانین style sheet را در همان داکیومنت HTML و با استفاده از برچسب< style>می نویسیم.

<style type="text/css">

.red {

color: red;

}

.thick {

font-size: 20px;

}

.green {

color: green;

}

</style>

شما می توانید با استفاده از ویژگی style از برچسب مربوطه، قوانین style sheet را مستقیما برای هر عنصر HTML به کار برید. این امر فقطزمانی می تواند انجام شود که شما علاقمند به ایجاد تغییرات خاص در هرکدام از عناصر HTML می باشید.
قوانین تعریف شده با عنصر درون خطی، قوانین تعریف شده در یک فایل CSS خارجی و نیز قوانین تعریف شده در یک عنصر< style>را در برمی گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما این بار قوانین style sheet را همراه با قوانین HTML و با استفاده از ویژگی style در عناصر خواهیم نوشت.

<p style="color:red;">This is red</p>

<p style="font-size:20px;">This is thick</p>

<p style="color:green;">This is green</p>

<p style="color:green;font-size:20px;">This is </p>

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

آموزش طراحی سایت-آموزش سربرگ HTML

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

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل چند رسانه ای در HTML‏ را یاد گرفتیم , در قسمت دوازدهم با ادامه آموزش طراحی سایت همراه باشید:

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

Document declaration tag

< html>

< head>

Document header related tags

< head>

< body>

Document body related tags

< body>

< html>

این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب <head> نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:

<title>

< meta>

< link>

< base>

< style>

< script >

< noscript >

برچسب < title> در HTML

این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.

نمونه یک

<title>HTML Title Tag Example</title>

<p>Hello, World!</p><p>

</p>

برچسب < meta> در HTML

این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

نمونه دو

<title>HTML Title Tag Example</title>

<!-- Provide list of keywords -->

<meta name="keywords" content="C, C++, Java, PHP, Perl, Python">

<!-- Provide description of the page -->

<meta name="description" content="Simply Easy Learning by Tutorials Point">

<!-- Author information -->

<meta name="author" content="Tutorials Point">

برچسب < base> در HTML

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

نمونه سه

<title>HTML Title Tag Example</title>

<base href="http://www.tahlildadeh.com/">

<img src="/banner/02.jpg" alt="Logo Images">

<a href="/ArticleDetails/HTML Marquees" title="HTML Tutorial">HTML Tutorial</a>

برچسب < link> در HTML

این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.

نمونه چهار

<title>HTML Title Tag Example</title>

<base href="http://www.tahlildadeh.com/">

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

برچسب< style>در HTML

این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.

نمونه پنج

<style>

.myclass {

background-color: #aaa;

padding: 10px;

}

</style>

توجه:

برای فراگیری چگونگی کار Cascading Style Sheet یک آموزش مجزای موجود در اینجا را کلیک کنید.

برچسب< script>در HTML

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

نمونه شش

function Hello() {

alert("Hello, World");

}

پایان قسمت دوازدهم آموزش طراحی سایت

آموزش طراحی سایت-آموزش چند رسانه ای در HTML‏ ‏

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

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML فرم ها در Html را یاد گرفتیم , در قسمت یازدهم با ادامه آموزش طراحی سایت همراه باشید:

آموزش چند رسانه ای در HTML‏:

گاهی اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید. ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت، وارد کردن برچسب خاص HTML به نام < embed> می باشد. این برچسب باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب < embed> و نوع مدیای ارائه شده را پشتیبانی می کند.
همچنین می توانید یک برچسب < noembed>برای مرورگرهایی وارد کنید که برچسب < embed> را نمی شناسند. به عنوان مثال می توانید از < embed> برای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر < embed> را پشتیبانی نمی کند، از< noembed> برای نمایش یک تصویر JPG مجزا استفاده کنید. ‏

مثال:

در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی midi.

مرحله 1

<embed src="/html/yourfile.mid">

<p><img alt="Alternative Media" src="yourimage.gif"><embed></p>

ویژگی های برچسب < embed>

در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب < embed> استفاده می شود.

انواع ویدیوهای پشتیبانی شده

می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.

• فایل های swf – فایل هایی هستند که با برنامه ی macromedia’s flash تولید می شوند.
• فایل های wmv – انواع فایل های تصویری ویندوز مایکروسافت می باشند.
• فایل های mov - فرمت Quick time movie در اپل.
• فایل های mpeg – فایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving Pictures Expert Group) ایجاد می شوند.

مرحله 2

<embed height="200" src="/html/yourfile.swf" width="200">

<p><img alt="Alternative Media" src="yourimage.gif"><embed></p>

صدای زمینه

شما می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند.
در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.

مرحله 3

<p><img src="yourimage.gif"></p>

این مثال یک صفحه ی خالی تولید خواهد کرد. این برچسب هیچ مولفه ای را اجرا نمی کند و مخفی باقی می ماند.
اینترنت اکسپلورر نیز تنها سه فرمت صدا را اجرا می کند: wav فرمت داخلی کامپیوترها، au فرمت داخلی برای کار ابزارهای Unix و MIDI یک کد برنامه گذاری جهانی برای موسیقی.

برچسب آبجکت در HTML

HTML 4 عنصر< object>را معرفی می کند که یک راه حل چند منظوره برای وارد کردن آبجکت عمومی ارائه می دهد. عنصر< object>به نویسندگان HTML اجازه می دهد تا هر چیز لازم را با یک آبجکت برای ارائه ی آن توسط یک کاربر، تعیین کند.
در اینجا چند مثال در این رابطه می بینید.

مثال:

شما می توانید یک سند HTML را در خود سند HTML اجرا کنید.

مرحله 4

<object data="data/test.htm" type="text/html" width="300" height="200">

alt : <a href="data/test.htm">test.htm<a>

</object>

در اینجا اگر مرورگر برچسب object را پشتیبانی نکند، ویژگی alt وارد تصویر می شود.

مثال:

شما می توانید یک سند PDF را در یک سند HTML اجرا کنید.

<object data="data/test.pdf" type="application/pdf" width="300" height="200">

alt : <a href="data/test.pdf">test.htm<a>

</object>

مثال:

شما می توانید با استفاده از برچسب < param> برخی پارامترهای متناسب با سند را مشخص کنید. در اینجا مثالی از اجرای فایل wavرا می بینید.

مرحله 5

<object data="data/test.wav" type="audio/x-wav" width="200" height="20">

<param name="src" value="data/test.wav">

<param name="autoplay" value="false">

<param name="autoStart" value="0">

alt : <a href="data/test.wav">test.wav<a>

</object>

مثال:

شما می توانید یک سند flash مانند زیر اجرا کنید.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="penguin"

codebase="someplace/swflash.cab" width="200" height="300">

<param name="movie" value="flash/penguin.swf" />

<param name="quality" value="high" />

<img src="penguin.jpg" width="200" height="300" alt="Penguin" />

</object>

مثال:

شما می توانید یک سند java applet وارد سند HTML کنید.

مرحله 6

<object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"

width="200" height="200">

<param name="code" value="applet.class">

</object>

ویژگی classid تعیین می کند که چه نسخه ای از java plug-in استفاده شود. شما می توانید از ویژگی انتخابی codebase برای مشخص کردن چگونگی دانلود JRE استفاده کنید.

پایان قسمت دهم آموزش طراحی سایت

ادامه دارد.

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

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTMLپس زمینه در html , رنگ در html و فونت ها در Html را یاد گرفتیم , در قسمت دهم با ادامه آموزش طراحی سایت همراه باشید:

 

فرم های html

وقتی که می خواهید داده هایی را از سایت بازدیدکننده جمع آوری کنید، به فرم های HTML احتیاج خواهید داشت. به عنوان مثال در هنگام ثبت کاربر، اطلاعاتی مانند نام، آدرس ایمیل و کارت اعتباری و غیره را جمع آوری می کنید. یک فرم داده ها را از بازدیدکننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی فرایندهای مورد نیاز را بر اساس کار تعریف شده در برنامه، روی داده ی منتقل شده انجام می دهد.
عناصر متفاوتی برای فرم در دسترس میباشند، مانند فیلدهای متن، فیلدهای textarea، منوهای رو به پایین، دکمه های رادیو، چک باکس ها و غیره.
برچسب < form>مربوط به HTML، برای ایجاد یک فرم HTML استفاده می شود و دارای ترکیب زیر می باشد

< form action="Script URL" method="GET|POST">

form elements like input, textarea etc.

< /form>

ویژگی های فرم

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

کنترل های فرم HTML

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

• کنترل های ورودی متن
• کنترل های چک باکس
• کنترل های رادیو باکس
• کنترل های انتخاب باکس
• باکس های انتخاب فایل
• کنترل های مخفی
• دکمه های قابل کلیک شدن
• ثبت و تنظیم مجدد

کنترل های ورودی متن

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

• کنترل های ورودی متن تک خطی: این کنترل برای آیتم هایی استفاده می شود که فقط یک خط از ورودی کاربر را لازم دارد، مانند باکس های جستجو و نام ها. این کنترل ها با استفاده ازبرچسب < input>مربوط به HTML ایجاد می شوند.
• کنترل ورودی گذرواژه: این نیز یک متن ورودی تک خطی می باشد، اما به محض اینکه کاربر کاراکتر را وارد می کند، این کنترل آن را می پوشاند.
• کنترل های متن ورودی چند خطی: زمانی استفاده می شود که لازم است کاربر جزئیاتی را وارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea>استفاده می شوند.

کنترل های ورودی تک خطی

این کنترل ها برای آیتم هایی استفاده می شوند که کاربر فقط یک خط ورودی احتیاج دارد، مانند باکس های جستجو و نام ها و با استفاده از برچسب < input>مربوط به HTML ایجاد می شوند.

ویژگی ها

در زیر لیستی از ویژگی های برچسب < input>را برای ایجاد فیلد متن می بینید.

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

کنترل های پسورد ورودی

این کنترل نیز یک کنترل تک خطی می باشد، اما به محض اینکه کاربر کاراکترها را وارد می کند، آنها را می پوشاند. این ها نیزبا استفاده از برچسب < input>مربوط به HTML ایجاد می شوند، اما نوع ویژگی با عنوان password تنظیم میشود.

مثال:

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

ویژگی ها

در زیر لیست مربوط به ویژگی های برچسب < input>را برای ایجاد فیلد پسوورد می بینید.

کنترل های متن ورودی چند خطی

زمانی استفاده می شود که یک کاربر باید جزئیاتی را ئارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea>ایجاد میشوند.

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

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

پس زمینه در html

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

پس زمینه در html

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

• زمینه ی HTML با رنگ ها.
• زمینه ی HTML با تصاویر.

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

زمینه ی HTML با رنگها

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

< tagname bgcolor="color_value" ...>

این color- value می تواند به هرکدام از فرمت های زیر ارائه شود.

<!-- Format 1 - Use color name -->

< table bgcolor="lime">

<!-- Format 2 - Use hex value -->

< table bgcolor="#f1f1f1">

<!-- Format 3 - Use color value in RGB terms -->

< table bgcolor="rgb(0,0,120)">

مثال:

در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.

نمونه یک

<table bgcolor="yellow" width="100%">

<tbody><tr>

<td>

This background is yellow

</td>

</tr>

</tbody></table>

زمینه ی HTML با تصاویر

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

توجه:

ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.

< tagname background="Image URL" ...>

متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.

مثال:

در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.

نمونه دو

This background is filled up with HTML image.

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

زمینه های طرح دار و شفاف

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

مثال:

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

نمونه سه

This background is filled up with a pattern image.

رنگ در html:

رنگ ها برای دادن یک ظاهر و احساس خوب به وب سایت شما بسیار مهم می باشند. شما می توانید رنگ ها را روی لایه ی صفحه با استفاده از برچسب < body>مشخص کنید، یا می توانید رنگ ها را برای برچسب های مجزا با استفاده از ویژگی bgcolor مشخص کنید.
برچسب< body>دارای ویژگی های زیر می باشد که می تواند برای تنظیم رنگ های مختلف استفاده شود.

bgcolor

رنگی را برای زمینه ی صفحه تنظیم می کند.

text

رنگی را برای متن تنظیم می کند

alink

رنگی را برای لینک های فعال یا انتخاب شده تنظیم می کند.

link

رنگی را برای متن لینک شده تنظیم می کند.

رنگی را برای لینک های بازدید شده تنظیم می کند- یعنی برای متن لینک شده که روی آن کلیک کرده اید.

روش های کدگذاری رنگ HTML

در زیر سه روش متفاوت برای تنظیم رنگ در صفحه ی وب خود مشاهده می کنید:

Color names -

می توانید نام رنگ ها را به طور مستقیم تعیین کنید، به عنوان مثال سبز، قرمز، آبی و غیره.

Hex codes -

یک کد شش رقمی که نشان دهنده ی مقدار آبی، قرمز و سبز سازنده ی رنگ، می باشد.

Color decimal or percentage values-

این مقدار با استفاده از ویژگی rgb( ) تعیین می شود.

اکنون این روش های رنگ گذاری را یکی یکی بررسی خواهیم کرد.

رنگ های HTML – نام رنگ

می توانید برای تنظیم رنگ متن یا زمینه به طور مستقیم از نام رنگ استفاده کنید. W3C لیستی از 16 رنگ پایه را دارد که توسط یک اعتباز سنج HTML ارزیابی می شود، اما نام بیشتر از 200 رنگ مختلف وجود داردکه توسط مرورگرهای مهم پشتیبانی می شوند.

16 رنگ استاندارد W3C

در اینجا نام 16 رنگ استاندارد W3C را مشاهده می کنید، پیشنهاد می شود که از آنها استفاده کنید.

16 رنگ استاندارد W3C

مثال:

در اینجا مثال هایی را میبینید از تنظیم زمینه ی یک برچسب HTML به وسیله ی نام رنگ.

نمونه یک

<p>Use different color names for for body and table and see the result.</p>

رنگ های HTML – کدهای Hex

هگزادسیمال یک نمایش 6 رقمی از یک رنگ می باشد. دو رقم اول یعنی RR نمایانگر رنگ قرمر (Red) می باشند، دو رقم بعدی (GG) مقدار سبز (green) را نشان می دهند و آخرین دو رقم (BB) نیز مقدار آبی (blue) را نشان می دهند.
هر کد هگزادسیمال به وسیله ی یک علامت # دنبال می شود. در ادامه رنگ های مورد استفاده در نشانه گذاری هگزادسیمال را مشاهده می کنید.

در زیر مثال هایی را می بینیند از تنظیم زمینه ی یک برچسب HTML به وسیله ی کد رنگ در هگزادسیمال.

نمونه دو

<p>Use different color hexa for for body and table and see the result.</p>

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

رنگ های HTML – مقادیر RGB

مقدار این رنگ با استفاده از ویژگی rgb( ) مشخص می شود. این ویژگی سه مقدار می گیرد که هر کدام برای سبز، قرمز و آبی می باشد. مقدار می تواند عددی بین 0 و 255 یا یک درصد باشد.

توجه:

همه ی مرورگرها ویژگی ( )rgb را پشتیبانی نمی کنند، بنابراین توصیه می شود از آن استفاده نکنید.

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

رنگ های HTML – مقادیر RGB

در اینجا مثال هایی را مشاهده می کنید از تنظیم زمینه ی یک برچسب HTML به وسیله ی برچسب rgb() با کد رنگ.

نمونه سه

<p>Use different color code for for body and table and see the result.</p>

در زیر لیستی از 216 رنگ را مشاهده می کنید که تصور می شود سالم ترین و مستقل ترین رنگ های کامپیوتر باشند. این رنگ ها از کد هگزای 000000 تا FFFFFF متفاوت می باشند و توسط همه ی کامپیوترهای دارای پالت رنگ 256 تایی پشتیبانی می شوند.

فونت ها:

فونت ها نقش مهمی در زیبا ساختن و خواناتر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود، اما شما می توانید از برچسب < font>در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب< basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size، color و face می باشد که فونت شکا را به دلخواه در می آورد. برای تغییر هرکدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب < font> استفاده کنید. متنی که دنبال می کند، تغییر یافته با قی می ماند تا زمانی که شما آن را با < /font> برچسب ببندید. شما می توانید یکی از ویژگی ها یا همه ی ویژگی های داخل برچسب < font> را تغییر دهید.

نکته:

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

تنظیم اندازه ی فونت

شما می توانید با استفتده از ویژگی size اندازه فونت محتوا را تنظیم کنید. دامنه ی مقادیر قابل قبول از 1 (کوچکترین) تا 7 (بزرگترین) می باشد. اندازه ی فونت پیش فرض 3 می باشد.

مثال:

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

نمونه یک

<font size="1">Font size="1"</font><br>

<font size="2">Font size="2"</font><br>

<font size="3">Font size="3"</font><br>

اندازه ی فونت مربوط

شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند. می توانید آن را مانند< font size="+n"> or < font size="-n"> مشخص کنید.

مثال:

نمونه دو

<font size="-1">Font size="-1"</font><br>

<font size="+1">Font size="+1"</font><br>

<font size="+2">Font size="+2"</font><br>

تنظیم ظاهر فونت

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

مثال:

نمونه سه

<font face="Times New Roman" size="5">Times New Roman</font><br>

<font face="Verdana" size="5">Verdana</font><br>

<font face="Comic sans MS" size="5">Comic Sans MS</font><br>

تعیین ظاهر فونت جایگزین

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

< font face="arial,helvetica">

< font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

اگر هیچکدام از فونت های ارائه شده نصب نشده باشند، بنابراین فونت پیش فرض Times New Roman نمایش داده خواهد شد.

تنظیم رنگ فونت

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

مثال:

نمونه چهار

<font color="#FF00FF">This text is in pink</font><br>

عنصر < basefont>

انتظار می رود که عنصر < basefont> یک اندازه، رنگ و ظاهر پیش فرض برای هر بخشی از داکیومنت که در برچسب < font>قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر < font>استفاده کنید تا تنظیمات < basefont> را انجام دهید.
برچسب < basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از 1+ برای فونت های بزرگتر و کمتر از 2- برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.

مثال:

نمونه پنج

<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">

<p>This is the page's default font.</p>

<h2>Example of the <basefont> element<="" h2=""></basefont>></h2>

پایان بخش نهم آموزش طراحی سایت