مشاهده نسخه کامل
: زبانهای تحت وب HTML , JavaScript : تمامی مباحث و مسائل
جاوااسكريپت يك زبان مناسب براي انجام عملياتي چون چك كردن مقادير درون فرمها يا درست كردن منو براي حركت درون سايت يا حركت دادن يك شيئ درون صفحه و... است، اما بعضي از طراحان در استفاده از اين گونه كدها تا جايي پيش مي روند كه صفحه انباشته از كدهاي جاوااسكريپت ميشود. خوشبختانه جاوااسكريپت قدرت زيادي در جهت بهينه كردن كدها براي كاهش حجم يا بالا بردن سرعت اجرا به ما ميدهد. با استفاده از تكنيكهايي مثل فشرده سازي و مبهم سازي ميتوان 50% تا 90% حجم فايل جاوااسكريپت را كاهش داد.
چون فايلهاي جاوااسكريپت قسمتي از محتويات صفحات وب هستند، كاهش حجم آنها در كاهش زمان بارگذاري صفحات وب بسيار موثر است. البته در بعضي از مواقع هم افزايش سرعت اجراي كدها مهم است كه بايد اولويت هر كدام را بر اساس نياز انتخاب نمود.
چه زماني بايد كدها را بهينه كرد ؟
اغلب كدهاي جاوااسكريپت آنقدر كوچك هستند كه نيازي به بهينه سازي ندارند. در ابتدا كدهاي شما بايد درست كار كنند و خوانايي لازم را داشته باشند ) با بهره گيري از بهترين الگوريتمها (algorithms)و ساختمان داده هايي (Data Structures) كه براي شما امكان پذير است) آنگاه اگر متوجه شديد كه سرعت بارگذاري صفحات شما پايين است بايد به فكر بهينه سازي كدهاي خود باشيد.
آغاز بهينه سازي
جاوااسكريپت ميتواند از بيشتر تكنيكهاي بهينه سازي كه درCSS و HTML استفاده ميشود بهره ببرد. حذف فضاهاي خالي ، تكه تكه كردن و مبهم سازي ، تركيب چند فايل بصورت يكپارچه، از همه اين ترفندها به صورت تكي يا تركيبي از آنها ميتوان براي كاهش حجم كدها استفاده نمود. در كل با تركيب همه اين تكنيكها با هم، حجم كدها 50% تا 70% كاهش مي يابد. با استفاده ازCSS و HTML مجال بيشتري براي بهينه سازي كدهاي جاوااسكريپت بدست مي آيد، چون شما مي توانيد نام توابع و متغيرها و شي ها را به صورت دلخواه تعيين كنيد.
اگر حجم كدهاي جاوااسكريپت درون صفحه شما خيلي زياد باشد مطمعنا سرعت بارگذاري صفحه وب شما هم به همين اندازه پايين است. چون ارجاع به هر كدام از فايلهاي خارجي موجود در صفحه در قسمت head صفحه وب صورت مي گيرد در نتيجه تمامي فايلها بايد قبل از به نمايش در آمدن هر قسمتي از محتويات صفحه كه درون تگ body قرار دارند بارگذاري شوند، در اين صورت سرعت به نمايش در آمدن محتويات صفحه كاهش مي يابد. به همين دليل حجم فايلهاي .css و .js بسيار مهم است.
خوانايي برنامه
اولين عيبي كه به كدهاي بهينه شده گرفته ميشود پايين بودن خوانايي آنها است. براي حل اين مشكل ميتوان دوفايل جداگانه داشت، يكي فايل بهينه شده، براي استفاده در صفحه وب و ديگري (همان فايل اصلي) كه داراي خوانايي بالايي است، كه براي تغييرات يا مرورهاي بعدي كنار گذاشته مي شود.
بطور مثال دوفايل زير
code.js
code_o.js
كه فايل code_o.js همان فايل بهينه شده و فايل code.js همان فايل اصلي است.
تكنيكهاي بهينه سازي
1- حذف فضاهاي خالي موجود درون كدها
بطور مثال به كد زير دقت كنيد
function printArray(a) {
if (a.length == 0)
document.write(" Array is empty");
else {
for (var i = 0; i < a.length; i++) {
document.write(a[i] + "
");
}
}
}
پس از حذف فضاهاي خالي اينگونه ميشود
function printArray(a){
if(a.length==0)
document.write("Array is empty");
else{
for(var i=0;i document.write(a[i]+"
");
}
}
}
ويا حتي بهتر از آن
function printArray(a){
if(a.length==0)document.write("Array is empty");
else{for(var i=0;i document.write(a[i]+"
");}}}
2- كوتاه سازي يا حذف توضيحات درون كدها
به كدهاي زير دقت كنيد
function gotoFinList() {
// "SAVE & FINISH"
// this changes the bottom frameset to include a button
//to return to the homepage
// it also submits the form in the main frame that will
// then generate a list of pages
// added during content editing.
پس از كوتاه سازي
function gotoFinList() {
// chgs bottom frameset 2 incl button 2 ret 2 home
// also submits form in main form and gen list of pgs
// added during content editg
بهترين حالت حذف كامل توضيحات است
function gotoFinList() {
در قسمت بعد كه ادامه همين مطلب است تكنيكهاي ديگري در همين زمينه ارائه شده كه خواندن آنها را نيز به شما توصيه ميكنم.
منبع : [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
در اين قسمت مطالب قبلي را ادامه ميدهيم به دوستان عزيز خواندن قسمت اول اين مطلب را توصيه ميكنم
تكنيكهاي بهينه سازي
3- يكي از راههاي اضافه كردن كدهاي جاوااسكريپت به صفحات وب كه اغلب استفاده ميشود نوشتن كدهاي جاوااسكريپت در يك فايل جداگانه و سپس فراخواني آن در قسمت head صفحه است. مانند مثال زير
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Test Page</title>
<meta [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]"Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" src="code_o.js"> </script>
</head>
<body>
. . .
</body>
</html>
در اين صورت قبل از اينكه محتويات صفحه مورد نظر ما بارگذاري شود بايد فايل .js مورد نظر بطور كامل دريافت شود كه اين عمل باعث كاهش سرعت نمايش صفحات ميشود.
در صورتي كه كدهاي جاوااسكريپت مورد نظر ما خروجي خاصي براي نمايش درون صفحه نداشته باشند ميتوان بارگذاري كدها را به تاخير انداخت، بطور مثال كدهايي كه مقادير درون يك فرم وب را اعتبار سنجي ميكند. براي اين كار ميتوان از خصوصيت defer در تگ <script> بصورت زير استفاده نمود. البته اين خصوصيت فقط براي مرورگر IE (Internet explorer) قابل استفاده است.
<script language="JavaScript" src="code_o.js" defer="defer"> </script>
در اين صورت مرورگر بدون توجه به فايل جاوااسكريپت محتويات صفحه را بارگذاري ميكند و در نهايت به سراغ فايل .js ميرود.
يك راه بهتر براي صفحاتي كه داراي ترافيك بالايي هستند استفاده از SSI (Server Side Include) است. كار اين دستور مثل اين است كه كدها را مستقيما در جاي مورد نظر اضافه كرده باشيم. اين كار باعث ميشود كه حجم درخواستهاي مرورگر از سرويس دهنده كاهش يابد.
بطور مثال :
<script type="text/javascript">
<!--#include virtual="code_o.js" -->
</script>
</body>
4- بعضي از طراحان وب براي سازگاري كدهاي جاوااسكريپت با مرورگرهاي مختلف (مثل IE 4+ يا Netscape 4+ ويا DOM-based browsers) براي هر مرورگر كدهاي خاص همان مرورگر را استفاده ميكنند در اين حالت ميتوان بجاي نوشتن همه كدها در يك فايل حجيم و بزرگ، كدهاي مربوط به هر مرورگر را در فايلهاي جداگانه اي قرار داد (بطور مثال ie4.js و ns4.js و dom.js) و فقط از كدهاي مورد نياز استفاده كرد.
در كدهاي زير پس از تشخيص نوع مرورگر فقط فايل مربوط به همان مرورگر بارگذاري ميشود.
dom = (document.getElementById) ? true : false;
ns4 = (document.layers) ? true : false;
ie = (document.all) ? true : false;
ie4 = ie && !dom;
var src = '';
if (dom) src = '/dom.js';
else if (ie4) src = '/ie4.js';
else if (ns4) src = '/ns4.js';
document.write("<script src=" + src + "> <\/script> ");
5- كوتاه سازي و مختصر سازي كدها
با استفاده از نامهاي خلاصه سازي شده براي توابع و متغيرها و اشياء ميتوان حجم كدها را تاحد زيادي كاهش داد، البته براي اين كار بايد كدهاي HTML درون صفحه را نيز تصحيح كرد، كه اين كار با تغيير نام class و id مربوط به تگهاي مختلف درون صفحه امكان پذير است.
بطور مثال :
function validateParseAndEmail()
var firstButton
به كدهاي زير تبديل شده اند
function email()
var button1
و يا بهتر از آن كدهاي زير
function e()
var b
در اين حالت خوانايي برنامه بسيار پايين مي آيد. قبلا يك راه حل مناسب براي رفع اين مشكل بيان شد، يكي ديگر از راه حلها ايجاد يك جدول در فايل جداگانه است، بصورتي كه نام خلاصه شده درون برنامه و نام كامل هر متغر يا تابع در آن ذخيره شود تا در صورت نياز با مراجعه به جدول مورد نظر نام اصلي تابع يا متغير را تشخيص دهيم. البته دقت داشته باشيد كه اين فايل مخصوص برنامه نويس است و فقط براي خوانايي كدها ايجاد شده و جزئي از صفحات وب شما نيست.
خلاصه مطلب
با كاهش حجم فايلهاي جاوااسكريپت مورد استفاده سرعت بارگذاري صفحات وب نيز افزايش ميابد.
بطور كلي با روشهاي زير ميتوان حجم كدهاي جاوااسكريپت مورد استفاده در صفحات وب را تا حد زيادي كاهش داد:
- حذف فضاهاي خالي درون كدها
- حذف و يا خلاصه سازي توضيحات درون كدها
- استفاده از اسامي خلاصه شده براي متغيرها و توابع
اغلب تكنيكهاي ذكر شده در اينجا براي بهينه سازي حجم فايلهاي HTML و يا CSS نيز قابل استفاده هستند.
منبع : [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
در اين مقاله سعي شده كه با بيان يك مثال و با استفاده از يك سري تكنيكهاي جديد همراه با تكنيكهايي كه در دو قسمت قبل بيان شده بودند تكنيكهاي كاهش حجم كدهاي جاوااسكريپت را به صورت عملي بكار بنديم.
در قسمتهاي قبلي بيشتر با خود كدها كار ميكرديم و عمليات بهينه سازي بدون در نظر گرفتن عملياتي كه كدها انجام ميدادند انجام مي شد. اما يك را ديگر براي بهينه سازي حجم كدها اين است كه از ابتدا از الگوريتم هاي مناسب و حساب شده براي طراحي برنامه استفاده شود.
در اين مثال تابعي مينويسيم كه يك كلمه عبور بصورت اتفاقي براي ما ايجاد كند ، كه اين كلمه عبور شامل حروف (حروف كوچك) و اعداد باشد.
در اين مثال از توابع و دستورات جاوااسكريپت زير استفاده شده كه به بيان توضيحات مختصري درباره هركدام مي پردازيم.
Math.random() : يك عدد اتفاقي بين 0 و 1 را برميگرداند. بطور مثال عبارت زير يك عدد اتفاقي بين 0 و 25 را توليد ميكند.
25 * Math.random();
Math.round() : مقدار گرد شده يك عدد اعشاري را باز ميگرداند.
String.fromCharCode() : معادل كاراكتر ascii يك عدد را برميگرداند.
بطور مثال كد كاراكتر a عدد 97 است. در اين صورت خروجي تابع فوق با عدد 97 حرف a خواهد بود
String.fromCharCode(97) // return “a” character
? : : يك دستور شرطي است كه ابتدا عبارت قبل از علامت سئوال (?) را چك ميكند در صورتي كه مقدار آن true يا عددي غير صفر باشد خروجي آن مقدار قبل از علامت : است و در صورتي كه مقدار عبارت قل از ? false يا مقدار عددي صفر باشد خروجي آن مقدار بعد از علامت : است. بطور مثال
var exp1;
var temp="";
exp1 = true;
temp = exp1 ? "ON" : "OFF"
document.writeln (temp); // write ON
exp1 = false;
temp = exp1 ? "ON" : "OFF"
document.writeln (temp); //write OFF
+= :
اين دستور عمليات جمع و انتساب را باهم انجام ميدهد. مثلا هر دو عبارت زير با هم معادلند.
str = str + "end. "
str += "end. "
بعد از توضيحات كلي، كدهاي مروط به تابع مورد نظر را مي نويسيم.
function makepass(){
var str = "";
var len = 10;
var randomselect;
for (i = 1; i <= len; i++){
randomselect = Math.round(Math.random());
if (randomselect != 0)
charcode = Math.round(25*Math.random())+97;
else
charcode = Math.round(9*Math.random())+48;
str = str + String.fromCharCode(charcode);
}
return (str);
}
كار برنامه به اين صورت است كه در يك حلقه تكرار كه به تعداد طول كلمه عبور تكرار ميشود، در هر بار تكرار يك كاراكتر از كل كلمه عبور ايجاد ميشود، به اين صورت كه ابتدا يك عدد 0 يا 1 به صورت اتفاقي ايجاد ميشود اين عدد در متغير randomselect قرار مي گيرد. حال اگر عدد اتفاقي توليد شده مخالف 0 يعني 1 بود از يك حرف براي ايجاد كاراكتر فعلي كلمه عبور استفاده ميشود و در غير اين صورت از يك عدد در ايجاد كاراكتر فعلي كلمه عبور استفاده ميشود.
اما نحوه ايجاد يك كاراكتر يا يك عدد اتفاقي براي كلمه عبور به اين صورت است كه ابتدا يك عدد اتفاقي در محدوده مورد نظر ايجاد مي كنيم مثلا براي ايجاد يك حرف از حروف انگليسي (26 حرف داريم) به يك عدد اتفاقي بين0 تا 25 احتياج داريم حال در صورتي كه اين عدد را با عدد 97 كه كد حرف a است جمع كنيم يك حرف به صورت اتفاقي ايجاد كرده ايم .
در نهايت كاراكترهاي ايجاد شده را در كنار هم مي گذاريم تا كلمه عبور ساخته شود.
حال به سراغ بهينه سازي كدها مي رويم در اين مرحله از عبارت ? : بجاي if …else استفاده مي كنيم كدها به اين صورت در مي آيند.
function makepass_1(){
var str = "";
var len = 10;
var randomselect;
for (i = 1; i <= len; i++){
randomselect = Math.round(Math.random());
charcode = randomselect ? Math.round(25*Math.random())+97 : Math.round (9*Math.random())+48;
str = str + String.fromCharCode(charcode);
}
return (str);
}
بعد از آن بايد در صورت امكان بجاي متغييرها مقادير آنها را بكار بريم. كدها به صورت زير تغيير پيدا ميكنند.
function makepass_2(){
var str = "";
var len = 10;
for (i = 1; i <= len; i++){
charcode = Math.round (Math.random()) ? Math.round (25*Math.random())+97 : Math.round (9*Math.random())+48;
str = str + String.fromCharCode(charcode);
}
return (str);
}
در اين قسمت بجاي اينكه ابتدا يك عدد اتفاقي ايجاد كنيم و در يك متغير قرار دهيم و در نهايت مقدار آن متغير را به معادل ascii آن تبديل كنيم همه اين كارها را به صورت يكجا انجام مي دهيم. كدهاي زير ايجاد خواهند شد.
function makepass_3(){
var str = "";
var len = 10;
for (i = 1; i <= len; i++){
str = str + Math.round(Math.random()) ? String.fromCharCode (Math.round (25*Math.random())+97) : String.fromCharCode (Math.round (9*Math.random())+48);
}
return (str);
}
كدهاي نهايي به اين صورت در مي آيند.
function makepass_4(){
var str = "";
for (i = 1; i <= 10; i++)
str += Math.round(Math.random()) ? String.fromCharCode (Math.round (25*Math.random())+97) : String.fromCharCode (Math.round (9*Math.random())+48);
return (str);
}
اگر دقت كرده باشيد تا اينجا با روشهايي غير از روشهايي كه در بخشهاي قبلي بيان شده بودند حجم كدها را بهينه كرديم. البته همين تغييرات باعث كاهش قابل ملاحظه اي از حجم كدهاي جاوااسكريپت مورد نظر ما شد. اكنون كه نوشتن و ايجاد تغييرات بر روي كدها تمام شده ميتوان كد نهايي را با استفاده از قواعدي كه قبلا بيان شده بودند دوباره بهينه كرد. كه در نهايت كدهاي زير ايجاد خواهند شد.
function mp(){
var s="";
for (i=1;i<=10;i++)
s+=(Math.round(Math.random()))?String.fromCharCode (Math.round(25*Math.random())+97):String.fromCharC ode(Math.round(9*Math.random())+48);
return (s);
}
مقدمه اي بر HTML
در اين درس با ويژگيهاي فايلهاي HTML يا اچتمل و نحوه ايجاد يک فايل ساده و نمايش آن در صفحه مرورگرتان آشنا خواهيد شد.
يک فايل HTML چيست؟
HTML را "اچ تي ام ال" و يا اچتمل بخوانيد.
HTML برگرفته از حروف اول Hyper Text Markup Language
ميباشد.
يک فايل HTML فايلي از نوع text ميباشد که متشکل از markup tag ها ميباشد.
مرورگر يا Browser از روي markup tag ها مي فهمد که چگونه بايد صفحه را نمايش بدهد.
يک فايل HTML بايد داراي انشعاب htm و يا html باشد.
يک فايل HTML فايلي از نوع text ميباشد که با هر اديتور ساده اي قابل ايجاد است.
وظيفه اصلي تگ هاي اچتمل ( markup tags ) بيان چگونگي نمايش اطلاعات ميباشد.
ميخواهيد که يک فايل اچتمل بسازيد؟
اگر از ويندوز مايکروسافت استفاده ميکنيد، Notepad را باز کرده (Mac کارها از SimplaeText استفاده کنند. ) و متن زير را در آن تايپ کنيد:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>
سپس فايل را با نام مثلا test.html در درايو c:\ ذخيره کنيد.
براي ديدن فايل اچتمل بالا در مرورگر يا Brower تان ( معمولا اينترنت اکسپلورر و يا نتسکيپ نويگيتور ) کافي است که از روي منوي File/Open file فايل بالا را از روي محل ذخيره شده بخوانيد. ( به آدرس فايل در قسمت Address توجه کنيد، مثلا c:\test.html)
يکي از مهمترين وظايف مرورگرها نمايش صفحات اچتمل ميباشد، چه اين صفحات روي کامپيوتر شما ذخيره شده باشند و يا اينکه از اينترنت خوانده شوند. با کليک روي اين لينک فايلي شبيه فايل ذخيره شده توسط شما از روي وب سرور توسط مرورگرتان خوانده شده و سپس نمايش داده خواهد شد!!! ( به آدرس فايل در قسمت Address توجه کنيد، مثلا [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] )
توضيح مثال بالا
اولين تگ مثال بالا تگ <html> ميباشد. از روي اين تگ، مرورگر نوع متن يعني اچتمل بودنش را يافته و از روي <html/> انتهاي متن اچتمل را ميبابد.
متن بين تگ <head> و تگ <head/> اطلاعات شناسنامه اي يا "Header information" متن اچتمل بوده و نمايش داده نخواهند شد. در اين مثال با کمک تگهاي <title> و <title/> تيتر و يا Title صفحه که در اين مثال عبارت "Title of page" ميباشد در بالاي مرورگر نمايش داده خواهد شد.
متن بين تگ <body> و انتهاي آن يعني تگ <body/> تنها اطلاعاتي است که توسط مرورگرنمايش داده خواهند شد.
متن بين تگ <b> و انتهاي آن يعني تگ <b/> بصورت Bold و يا توپر نمايش داده خواهند شد.
انشعاب فايل htm يا html ؟
اغلب مرورگرها هر دو نوع انشعاب را به خوبي ميشناسند ولي ترجيحا به هنگام ذخيره فايلهاي اچتمل از html استفاده کنيد.( استفاده از انشعابهاي سه حرفي مانند htm مربوط به قديم و سيستم عاملهائي چون DOS بودند.)
نکته اي در مورد اديتورهاي اچتمل ( HTML Editors )
با وجوديکه با استفاده از اديتورهاي اختصاصي اچتمل مانند FrontPage و يا Claris Home Page امکان نوشتن و طراحي صفحات اچتمل بصورت WYSIWYG يا "What You See Is What You Get" وجود دارد اما توصيه ميشود که از اديتورهاي معمولي متن براي تهيه صفحات خود استفاده کرده، عملکرد تگها را شناخته و هيچگاه بدون اينکه بدانيد کاربرد يک تگ چيست آنرا بکار نبريد.
بيشترين سوالات پرسيده شده ( FAQ ) :
فايلم را درست کردم ولي هنوز نميتوانم آنرا در صفحه مرورگرم ببينم، مشکل کجاست؟
مطمئن شويد که فايل را با انشعاب درست (htm يا html ) ذخيره کرده ايد. در ضمن مطمئن شويد که همان فايل را Open کرده ايد.( نام و مسير فايل را در قسمت Address مرورگرتان چک کنيد.)
هر بار پس از تغيير و اديت مثالها نسخه اوليه را در صفحه مرورگرم ميبينم و تغييرات داده شده مشاهده نميشود، مشکل کجاست؟
به خاطر بالا بردن سرعت، هميشه مرورگرها از نسخه هاي موجود در Cache يا حافظه موقت خود براي خواندن صفحات استفاده ميکنند.براي وادار کردن مرورگر به خواندن اصل صفحه کافي است که در مرورگرتان Refresh/Reload کنيد. در اينترنت اکسپلورر کليد F5 يا View/Refresh و در نت اسکيپ Ctrl+R يا View/Reload اينکار را انجام خواهند داد.
آيا ميتوانم از هر دو مرورگر Internet Explorer و Netscape Navigator استفاده کنم؟
بله، فقط اگر از استاندارد يونيکد براي فارسي نويسي استفاده ميکنيد، براي ديدن درست صفحات فارسي بايد از نسخه 5 Internet Explorer و به بالا و در مورد Netscape Navigator از نسخه 6.2 و به بالا استفاده کنيد.
کجا ميتوانم آخرين نسخه از مرورگرهاي Internet Explorer و Netscape Navigator را داونلود کنم؟
Internet Explorer اينجاست و Netscape Navigator اينجا.
در اين درس با مفاهيم وب، اينترنت، مرورگرها و استانداردهاي وب آشنا خواهيد شد.
منظور از وب چيست؟
وب شبکه اي است متشکل از تمامي کامپيوترهاي دنيا، شبکه اي از شبکه ها.
اينترنت، وب، WWW ، web يا World Wide Web همگي يک چيزند.
تمامي کامپيوترهاي وب ميتوانند با هم ارتباط داشته باشند.
کامپيوترهاي موجود در وب با کمک استاندارد ارتباطي يا پروتوکل HTTP با هم ارتباط برقرار ميکنند .
نحوه کارکرد وب چگونه است؟
اطلاعات وب داخل فايلهائي به نام Web Pages و يا صفحات وب قرار دارند.
اين فايلها يا صفحات روي Web Server يا کامپيوترهاي سرويس دهنده وب ذخيره شده اند.
براي ديدن صفحات وب از نرم افزاري به نام مرورگر و يا Web Browser استفاده ميشود.
دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب ميشوند.
مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ ميباشد.
مرورگرها چگونه به خواندن صفحات وب ميپردازند؟
يک مرورگر با کمک يک Request درخواستي براي خواندن يک صفحه از وب سرور ميکند.
اين Request يا درخواست بر اساس استاندارد ارتباطي يا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر ميباشد.
آدرس يک صفحه وب چيزي شبيه [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] است. بخش //:http نوع پروتوکل و يا استاندارد ارتباطي را تعيين ميکند، [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] نام دومين يا Domain است و faq.html نام صفحه اي است که بايد خوانده شود.
مرورگرها چگونه صفحات وب را نمايش ميدهند؟
چگونگي نمايش يک صفحه وب بصورت مستتر در آن وجود دارد.
مرورگرها از روي دستورالعملهاي داخل صفحات وب و با کمک تگ ها به نمايش صفحات ميپردازند.
وظيفه اصلي تگ هاي اچتمل ( HTML tags ) بيان چگونگي نمايش اطلاعات ميباشد.
يک تگ اچتمل چيزي شبيه <p> اين تگ پاراگراف است! </p> است.
چه کساني استاندارد هاي وب را تعيين ميکند؟
تعيين استاندارد هاي وب ربطي به شرکتهاي مايکروسافت و يا نت اسکيپ ندارد.
World Wide Web Consortium يا W3C متولي تعيين استانداردهاي وب است.
HTML, CSS and XML از مهمترين استانداردهاي تصويب شده وب ميباشند.
آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .
کيفيت مقاله :
عالی خوب
يک فايل اچتمل متني از نوع text است که از عناصر يا element ها تشکيل ميشود و براي ايجاد عناصر از تگ ها يا tags استفاده ميشود. در اين فصل با عناصر و تگ ها اچتمل آشنا خواهيد شد.
تگ هاي اچتمل (HTML Tags)
با کمک تگ هاي اچتمل عناصر و يا Elements ساخته ميشوند.
در زبان اچتمل حدود 80 عنصر تعريف شده است.
تگ هاي اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند.
تگ هاي اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند <b>test</b>
تگ اول در يک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پاياني نام دارد.
متن بين تگ اول و تگ دوم در يک زوج تگ محتواي عنصر يا element content ناميده ميشود، مثلا "test"
تگ هاي اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. براي مثال دو تگ <b> و <B> معادل هم هستند ولي شديدا توصيه ميشود که به خاطر سازگاري با XHTML از حروف کوچک استفاده شود.
عناصر اچتمل (HTML Elements)
مثال بخش مقدمه را در نظر بگيريد:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>
*** نمونه اي از يک عنصر اچتمل:
<b>This text is bold</b>
عنصر اچتمل بالا با تگ <b> شروع شده و با تگ <b/> پايان مي يابد. محتواي اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ <b> نمايش توپر يا bold متون است.
*** مثال دوم يک عنصر اچتمل (معلوم الحال) :
<body>
This is my first homepage. <b>This text is bold</b>
</body>
عنصر اچتمل بالا با تگ <body> شروع شده و با تگ <body/> پايان مي يابد. همانطور که ميبينيد گاهي يک عنصر حاوي يک يا چند تگ ديگر ميباشد.وظيفه تگ <body> تعيين بدنه اصلي يا body يک متن اچتمل است.لازم به يادآوري است که تنها اطلاعات بخش <body> يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.
شناسه هاي يک تگ (Tag Attributes)
تگ ها ميتوانند حاوي اطلاعات اضافي ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ <body> شناسه اي به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند براي نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافي است که به شکل زير عمل کنيد :
<body bgcolor="black">
در مثال زير تگ <body> داراي چهار شناسه مختلف با نامهاي width، height ، align و border و مقادير center، 60، 100 و 0 ميباشد.
<table border="0" width="100" height="60" align="center" >
......
</table>
شناسه ها به صورت کلي "مقدار=نام" يا "name=value" نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادي يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد براي زمينه صفحه استفاده خواهد شد.
مقدار يک شناسه را ميتوانيد داخل نويسه هاي " و يا ' بنويسيد و اختيار دست شما است فقط در مواردي که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.
تگ ها ( tags ) اجزا تشکيل دهنده عناصر يا elements هاي اچتمل هستند و در اين فصل با عناصر و تگ هاي پايه و مهم:
<hr> , <br> , <h1> .... <h6> , <!-- comment --> , <p>
آشنا خواهيد شد . يکي از بهترين روش هاي يادگيري تگ هاي اچتمل ديدن مثالها و تغيير آنها ميباشد و با کمک اديتور اختصاصي ما و با استفاده از امکانات فارسي نويسي آن به صورت آنلاين ميتوانيد به مطالعه و يادگيري مثالها پرداخته، کدهاي اچتمل را تغيير داده و با کليک روي دکمه "نمايش نتايج" به مشاهده نتايج بپردازيد.
مثالها :
مثالي ساده از يک صفحه اچتمل
در اين مثال بسيار ساده جمله "!Hellow World" در صفحه مرور گر نمايش داده ميشود و در واقع محتوا و متن عنصر body تماما نمايش داده خواهد شد.
پاراگرافهاي ساده:
چگونگي نمايش متون با کمک تگ <p> و بصورت پاراگرافي
نمايش متون فارسي:
چگونگي نمايش متون فارسي. براي جزئيات بيشتر به فصل فارسي نويسي مراجعه کنيد.
مثالهاي بيشتر:
سر تيترها (Headings)
سر تيترها با کمک تگ هاي <h1> تا <h6> تعيين ميشوند. <h1> معرف بزرگترين سر تيتر و <h6> معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالي قبل و بعد از هر سر تيتر اضافه خواهد کرد.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
پاراگرافها (Paragraphs)
پاراگرافها با کمک تگ <p> معرفي ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالي قبل و بعد از آن اضافه خواهد کرد.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
سطر جديد (Line Breaks)
براي رفتن سر سطر جديد از تگ <br> استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ <br> از نوع تگ هاي خالي بوده و داراي تگ انتهائي (مثلا <br/> ) نميباشد.
<p>This <br> is a para<br>graph with line breaks</p>
مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
کامنت ها در اچتمل (Comments)
براي نوشتن شرح و توضيحات در مورد کدهاي اچتمل بايد از تگ خاصي استفاده کنيد. براي اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرور تگ هاي comment را در نظر نگرفته و محتوي آنها را نمايش نخواهد داد و فقط شرح و توضيحات براي برنامه نويس و ديگر افرادي که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکي و آنهم در ابتدا)
<!-- This is a comment -->
مثالي در مورد comments و نحوه استفاده از آن
چند نکته کاربردي:
توجه داشته باشيد که بدليل وجود مرورگرهاي متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکي تفاوت در حالتهاي مختلف نمايش داده ميشوند و هميشه سعي کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتي مرورگرهاي کامپيوترهاي مکينتاش چک کرده و همچنين در دقت هاي نمايش 800x600 و 1024X768 آن را امتحان کنيد.
از نظر فاصله و سطر بندي، متني که در صفحه اديتورتان تايپ ميکنيد با چيزي که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله هاي اضافي (space) و خطهاي خالي متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.
براي نمايش بيش از يک فاصله خالي بايد از نويسها يا ترکيب کاراکتري خاصي (None Breaking Space) استفاده کنيد. در بخش ( Entities ) نهادها به اين مطلب بيشتر پرداخته خواهد شد.
فاصله هاي اضافي بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالي در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.
براي ايجاد يک سطر جديد هيچگاه از يک تگ <p> خالي استفاده نکنيد و به جاي آن از تگ <br> استفاده کنيد..
مرورگرها به هنگام نمايش بعضي عناصر بصورت اتوماتيک يک سطر خالي قبل و بعد از آن عنصر نمايش خواهند داد. براي نمونه اين گروه از عنصرها ميتوان از پاراگراف (<p>) و سرتيترها (<h..>) نام برد.
تگ <hr> يا Horizontal Roler سبب نمايش يک خط افقي خواهد شد و در واقع بخش هاي مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.
مثالهاي بيشتر:
باز هم مثال پاراگرافها
اين مثال بعضي از مقادير قراردادي عناصر پاراگراف را شرح ميدهد.
ترازبندي پاراگراف ها
اين مثال نحوه تراز بندي يک پاراگراف را با کمک شناسه يا attribute اي به نام align نشان ميدهد. در اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد.
( "align="center )
رفتن سر سطر جديد
اين مثال نحوه استفاده از تگ <br> را در يک متن اچتمل نشان ميدهد.
سر تيترها
اين مثال نحوه استفاده از تگهاي <h1> .... <h6> را در يک متن اچتمل نشان ميدهد.
ترازبندي سر تيترها
اين مثال نحوه تراز بندي يک سر تيتر را با کمک شناسه يا attribute اي به نام align نشان ميدهد. در اين حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد.
( "align="center )
نمايش خطوط افقي
اين مثال نحوه نمايش خطوط افقي با استفاده از تگ <br> ميباشد.
استفاده از comment
اين مثال نحوه استفاده از comment در کدهاي اچتمل را نمايش ميدهد.
تعيين رنگ زمينه صفحه
اين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکي از شناسه هاي (attribute ) عنصر body با نام bgcolor نشان ميدهد. (Background Color)
( "bgcolor ="blue )
تگهاي اصلي
در جدول زير عناصر معرفي شده در اين فصل به همراه لينکهاي مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که براي هر عنصر فهرستي از شناسه ها يا Attributes موجود است و همچنين به شناسه هاي کنارگذاشته شده (Deprecated) در نسخه هاي آينده اچتمل توجه داشته باشيد و سعي کنيد که از آنها استفاده نکنيد.
:
Start Tag Purpose کاربرد
<html> Defines a html document نشان شروع متن اچتمل
<body> Defines the document's body تعيين بدنه و قسمت اصلي صفحه اچتمل
<h1>-<h6> Defines heading 1 to heading 6 تعريف سر تيترهاي h1 تا h6
<p> Defines a paragraph تعريف پاراگراف
<br> Inserts a single line break رفتن سر خط جديد
<hr> Defines a horizontal rule نمايش خط افقي
<!--> Defines a comment in the HTML source code نوشتن شرح و comment
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
در اين درس با فارسي نويسي، فارسي سازي و استاندارد يونيکد و نحوه استفاده از اديتور آنلاين و فارسي اين سايت آشنا خواهيد شد. همچنين متاتگ [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] و شناسه dir نيز معرفي خواهد شد.
سؤالات مربوط به فارسي نويسي را ميتوان به سه گروه عمده تقسيم کرد:
- چگونه فارسي بنويسم ؟
- چگونه فارسي بخوانم؟
- چگونه صفحات اچتمل فارسي را نمايش دهم؟
در مورد فارسي نويسي و فارسي خواني اگر از اديتور آنلاين ما در بخش مثالها استفاده ميکنيد نيازي به فارسي سازي نداريد و با کمک اديتور مزبور بايد به راحتي قادر به تايپ فارسي و لاتين باشيد.اگر ميخواهيد که در هر حال سيستمتان را فارسي کنيد، مطالعه صفحات زير راهنماي بسيار خوبي براي فارسي سازي ميباشند:
* راهنماي فارسي سازي ويندوز
* استفاده از استانداردِ يونيکد
* وبلاگ فارسي FAQ
دو نکته بسيار مهم در مورد فارسي نويسي:
روش کدگزاري UTF-8
اکيدا توصيه ميشود که براي تايپ و تمايش متون فارسي از استاندارد يونيکد و روش کدگزاري UTF-8 اسنفاده شود و اين روشي است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسي تعيين نوع کدگزاري يا encoing صفحات فارسي است که براي اينکار بايد از متاتگ خاصي به نام [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] در بخش head صفحات اچتمل به شکل زير استفاده شود:
<meta [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]"Content-Type" content="text/html; charset=utf-8">
در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روي متاتگ فوق نوع کدگزاري (Encoding) را تشخيص داده و ديگر مثلا نيازي به تعيين دستي (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود.
شناسه يا attribute ي به نام dir
جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسي بايد با کمک روشي جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه يا attribute ي به نام dir يا همان direction اين کار را براي شما انجام ميدهد. اين شناسه داراي دو مقدار ممکن ميباشد :
dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ
مثلا براي نمايش جمله فارسي "سلام بر دنياي وب!" با کمک عناصر p يا div کافي است که به يکي از شکلهاي زير عمل شود:
<p dir="rtl"> سلام بر دنياي وب </p>
<div dir="rtl"> سلام بر دنياي وب </div>
در بسياري از عناصر و تگ هاي اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:
<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...
مثالهاي زير نحوه ترازبندي متون فارسي را به نمايش ميگذارند و براي مطالعه بيشتر در مورد ترازبندي متون "راست به چپ" به اين صفحه مراجعه کنيد. (عناصر BDO ، Span و شناسه lang هم براي مطالعه مفيد ميباشند.)
مثالهاي فارسي نويسي:
مثال 1 : سلام بي وفا
به بخش head و تگ div توجه کنيد. متا تگ [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] نوع کدگزاري را تعيين ميکند و در اينجا با کمک تگ div جهت نوشتن مطالب (از راست به چپ يا بلعکس) تعيين ميگردد. dir به معناي direction و جهت بوده و rtl مخفف right to left و ltr معادل left to right ميباشد.
مثال 2 : متن ها و پاراگراف بندي
به عناصر div و p توجه کنيد. با کمک شناسه dir جهت نوشتن مطالب (از راست به چپ يآ بلعکس) تعيين ميگردد.
مثال 3 : متون فارسي و لاتين در کنار هم
مثالي کاملتر با راهنماي استفاده از عنصر div و شناسه dir آن
مثال 4 : شناسه dir در عنصر html
اگر شناسه dir را در عنصر html بکار ببريد جهت نمايش تمامي متون از راست به چپ شده و براي نوشتن از چپ به راست بايد به صورت موردي شناسه "dir="ltr را استفاده کنيد. همچنين در اين حالت ماسماسک! Scrool down مرورگر در سمت چپ صفحه نمايش داده خواهد شد. در صورت استفاده شناسه dir در عنصر body ماسماسک همان سمت راست خواهد ماند.
مثال 5 : مثال کامل
نحوه استفاده شناسه dir در عنصرهاي مختلف
لازم به ذکر است که براي فارسي نويسي از کدهاي java script موجود در اين آدرس که ابزارهاي برنامه نويسي فراهم شده توسط شوراي عالي انفورماتيك و دانشجويان دانشگاه صنعتي هستند، استفاده شده است و توصيه ميشود که پروژه farsiweb.info را فراموش نکرده زيرا که استاندارد آينده فارسي نويسي اينترنتي در ايران خواهد شد.
وظيفه گروهي از تگ هاي اچتمل فرمت دهي و تعيين شکل نمايش متون ( مثلا ضخيم و bold بودن و يا مورب و ايتاليک بودن ) ميباشد و در اين درس با اين گروه از تگهاي formating آشنا خواهيد شد:
<b> , <big> , <code> , <del> , <em> , <i> , <ins> , <kbd> , <pre> , <s> , <samp> , <small> , <strike> , <strong> , <sub> , <sup> , <tt> , <u> , <var>
مثالهاي شکل دهي متون (Text Formatting)
در مثالهاي زير نحوه استفاده از عناصر و تگهاي شکل دهي متون شرح داده شده اند:
شکل دهي متون
شکلهاي مختلف نمايش متون با کمک عناصر b , strong , big , em , i , small , sub , sup
متون از قبل شکل دهي شده
نمايش متون از قبل شکل دهي شده با کمک عنصر pre يا pre Formatted
براي نمايش اشعار فارسي استفاده از عنصر pre بهترين انتخاب ميباشد.
عناصر ديگر شکل دهي متن
نمايش متون deleted، underline و ... با کمک عناصر code , kbd , tt , samp , var , del , ins
نحوه ديدن سورس کدهاي اچتمل (HTML Source)
اگر ميخواهيد که سورس کدهاي اچتمل صفحات وب را ببينيد کافي است که در منوي View مرورگرتان حالت Source يا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون اديتوري باز کرده و قابل ذخيره توسط شما براي استفاده هاي بعدي ميباشد.
اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده کرده باشد براي ديدن سورس کد اصلي فريمها کافي است که ابتدا با کمک روش بالا به مشاهده سورس کدهاي اچتمل پرداخته (لازم به توضيح است که در اين حالت فقط تعاريف کلي فريمها قرار دارند.) و سپس براي ديدن کد اچتمل اختصاصي هر صفحه بايد پس از "Right Click" روي هر صفحه "View Source" کرده و کد اچتمل هر فريم را جداگانه ببينيد.
اگر طراح سايت با کمک Java Script مانع ديدن سورس توسط شما ميشود، ابتدا در منوي Tools/Internet Options.../Security/Custom Level مرورگرهاي اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (disable) و سپس مراحل بالا را تکرار کنيد!!!
چند نکته کاربردي:
در استفاده از Underline دقت كنيد چون در اكثر مرورگرها، پيوندها با اين خطوط نشان داده مي شوند و اين مساله ميتواند كاربران را دچار اشتباه كند .
به كارگيري تگهاي EM و STRONG كه جايگزين تگهاي I و B هستند ، اين اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش داده خواهد شد .
به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد، همان گونه كه مشاهده مي كنيد عنصر STRONG بعد از عنصر U شروع شده است ، به همين خاطر تگ خاتمه دهنده آن قبل از تگ خاتمه دهنده U قرار مي گيرد.
<U>version <STRONG>2.0</STRONG></U>
تگهاي فرمت دهي متون
Start Tag Purpose کاربرد
<b> Defines bold text نمايش توپر
<big> Defines big text نمايش در اندازه بزرگ
<em> Defines emphasized text نمايش بصورت تاکيد شده
<i> Defines italic text نمايش ايتاليک يا کج
<small> Defines small text نمايش در اندازه کوچک
<strong> Defines strong text نمايش قوي ؟!
<sub> Defines subscripted text نمايش پايين تر از خط افقي
<sup> Defines superscripted text نمايش بالاتر از خط افقي
<ins> Defines inserted text نمايش به صورت خط زير
<del> Defines deleted text نمايش به صورت خط خورده
<s> Deprecated. Use <del> instead از رده خارج
<strike> Deprecated. Use <del> instead از رده خارج
<u> Deprecated. Use styles instead از رده خارج
Start Tag Purpose کاربرد
<code> Defines computer code text نمايش کدهاي برنامه نويسي
<kbd> Defines keyboard text نمايش متن بصورت صفحه کليدي
<samp> Defines sample computer code نمايش کدهاي نمونه برنامه نويسي
<tt> Defines teletype text نمايش تله تايپ
<var> Defines a variable نمايش متغييرها
<pre> Defines preformatted text نمايش متون از قبل فرمت شده
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
در استاندارد اچتمل گروهي از نويسه ها (Character) داراي معني خاصي بوده ( مثلا نويسه < شروع يک تگ و نويسه > انتهاي يک تگ را نشان ميدهد. ) و براي نمايش آنها در صفحاتتان مستقيما قابل مصرف نميباشند. در اين فصل با فهرست اين نويسه ها آشنا شده و نحوه درج آنها را با کمک Character Entities فرا خواهيد گرفت.
Character Entities
در اچتمل بعضي از نويسه ها داراي معني خاصي بوده و براي نمايش آنها در صفحاتتان بايد از character entities ها استفاده کنيد. يک character entities از سه قسمت تشکيل ميشود:
1- نويسه ampersand (&)
2- نام entity يا نويسه # و سپس شماره عددي entity
3 - و نهايتا نويسه semicolon (;)
براي مثال براي نمايش نويسه > دو روش وجود دارد، بايد از &lt; يا از < استفاده کنيد. در اين مثال lt نام entity و 60 شماره عددي آن ميباشد.
مزيت استفاده از نام entity در مقابل استفاده از شماره عددي آن سهولت يادآوري آن از روي نامش ميباشد و عيب آن اين است که تمامي مرورگرها نام گذاريهاي موجود براي Entity ها را قبول ندارند ولي در عوض همگي شماره هاي عددي entity ها را بخوبي ميشناسند. توجه داشته باشيد که entity ها به کوچک و بزرگي حروف حساس هستند و در واقع Case Sensitive ميباشند.
پر کاربردترين character entity در اچتمل، نويسه فاصله يا Space يا Blank ميباشد و نام رسمي آن non-breaking space ميباشد. همانطور که ميدانيد مرورگرها فاصله هاي اضافي را در نظر نگرفته (truncate spaces) و مثلا از 10 نويسه فاصله، 9 تاي آنرا ناديده ميگيرند و براي نمايش فاصله هاي اضافي بايد از &nbsp; استفاده کنيد.
فهرست پرکاربردترين Character Entities ها
Result (نمايش) Description (شرح) Entity Name (نام) Entity Number (شماره عددي)
non-breaking space &nbsp;  
< less than &lt; <
> greater than &gt; >
& ampersand &amp; &
" quotation mark &quot; "
' apostrophe '
چند Character Entitie با کاربردهاي کمتر
Result Description Entity Name Entity Number
¢ cent &cent; ¢
£ pound &pound; £
¥ yen &yen; ¥
§ section &sect; §
© copyright &copy; ©
® registered trademark &reg; ®
× multiplication &times; ×
÷ division &divide; ÷
براي ديدن فهرست کل character entities ها سري به اين صفحه بزنيد.
در اين درس با پيوندها ( Links ) ، تگ هاي مربوطه مخصوصا تگ Anchor يا A و نحوه به کار گيري آنها آشنا خواهيد شد. همچنين شناسه هاي بسيار مهم href ،target و name تشريح خواهند شد.
در محيط وب، صفحات اچتمل با کمک پيوندها به يکديگر متصل (Link) ميشوند. اصطلاح ابرمتن (Hyper Text) در مقابل متن خطي (Linear) قرار دارد. در يک متن معمولي خواندن به شکل خطي و از ابتدا به انتها ميباشد و در مقابل در يک متن مختلط (Hyper) با کمک پيوندها ميتوان از يک متن به هر صفحه ديگر در وب متصل شد.اين کار با کمک عنصري معلوم الحال! به نام A يا Anchor ميسر ميگردد.
مثالها
ايجاد پيوندها با کمک متن
اين مثال چگونگي ايجاد يک پيوند، لينک يا Link را در يک متن اچتمل نشان ميدهد.
ايجاد پيوندها با کمک تصاوير
اين مثال چگونگي ايجاد يک پيوند، لينک يا Link را با کمک يک تصوير (image) نشان ميدهد.
تگ Anchor و شناسه href
براي ايجاد پيوند به صفحات ديگر از تگ <a> استفاده ميشود. پيوندها ميتوانند به بخش ديگري از همان صفحه، صفحات ديگر وب، تصاوير، فايلهاي صوتي يا حتي فيلم ها و ... اشاره کنند.
فرم کلي يک پيوند به قرار زير است:
<a href="url">Some Text</a>
در مثال بالا تگ <a> براي ايجاد پيوندي به صفحه اي ديگر که آدرس اينترنتي آن url ميباشد بکار رفته است. براي تعيين مقصد و يا آدرس صفحه جديد از شناسه اي به نام href که همان hyerlink reference ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتي صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــي (و يا تصويري ) که توسط مرورگر نمايش داده خواهد شد و بازديدکننده روي آن کليک خواهد کرد ميان تگهاي <a> و </a> قرار داده ميشود و هر چند که در مثال بالا اين بخش متن "Some Text" است ولي ميتواند حتي يک تصوير باشد.
براي نمونه کد اچتمل زير پيوندي به سايت google.com ايجاد خواهد کرد:
<a href="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">Visit Google Site</a>
و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر کليک روي پيوند توسط بازديدکننده، مرورگر به سايت Google خواهد رفت.
Visit Google Site
شناسه target در پيوندها:
با کمک شناسه target امکان تعيين مقصد پيوند جديد فراهم ميشود. در مثال بالا پس از کليک روي پيوند، مرورگر سايت google.com را باز کرده و جايگزين سايت فعلي خواهد شد. اگر ميخواهيد که مرورگر پيوند را در صفحه اي جديد باز کند بايد از شناسه target و مقدار "_blank" براي آن استفاده کنيد . مثال زير سبب باز شدن سايت google.com در پنجره جديدي خواهد شد:
<a href="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]" target="_blank">Visit Google Site</a>
خوتان آزمايش کنيد : Visit Google Site
شناسه Name :
با کمک شناسه name ميتوانيد پيوندها را نام گذاري کنيد.پيوندهاي نامگذاري شده امکان حرکت ميان قسمتهاي مختلف يک صفحه يا page را فراهم ميکنند. در اينصورت مثلا براي رفتن به آخر يک متن ديگر نيازي به Scrool down کردن تمامي صفحه نيست و کافي است که بازديدکننده روي پيوندي که به آخر صفحه اشاره ميکند کليک کند.
استفاده از پيوندهاي نامگذاري شده شامل دو مرحله است:
1- ايجاد يک پيوند نامگذاري شده (اين قسمت به عنوان لنگر کار خواهد کرد.) :
فرم کلي يک پيوند نام گذاري شده به قرار زير است:
<a name="label">Text to be displayed</a>
وظيفه شناسه name تعيين نام براي پيوند است و مقدارآن همان نام پيوند ميباشد. نام پيوند هم هر نام لاتيني ميتواند باشد. در فرم کلي بالا، نام پيوند label و متني که بعنوان پيوند نمايش داده ميشود عبارت "Text to be displayed" خواهد بود. مثال زير به ايجاد يک پيوند نامگذاري شده با نام top ميپردازد:
<a name="top">Here is top of my page!</a>
2- ايجاد يک پيوند به پيوند نامگذاري شده ديگر:
براي دادن لينک به پيوندي نام گذاري شده، کافي است که پيوندي معمولي ايجاد کرده و در قسمت href آن ابتدا url مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاري شده را درج کنيد. مثال زير ايجاد پيوندي است که به لينک نامگذاري شده اي به نام top اشاره ميکند:
<a href="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]"> Goto Top! </a>
در اثر کليک روي پيوند بالا مرورگر مستقيما به ابتداي بخش top صفحه [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] خواهد رفت.
لگر مقصد پيوند در همان صفحه قرار دارد نيازي به قيد url نيست و فقط نويسه # و سپس نام پيوند کافي است:
<a href="#top"> Goto Top! </a>
چند نکته کاربردي در مورد پيوندها:
* يکي از کاربردهاي رايج پيوندهاي نام گذاري شده در صفحات و متوني ميباشد که فهرست و يا ليستي از اقلام نمايش داده شده است، مانند بخش سرفصل مطالب، فهرست FAQ و يا ... در همين صفحه در دو مورد از پيوندهاي نامگذاري شده استفاده شده است، آيا ميتوانيد آنها را بيابيد؟!
* اگر مرورگر نتواند يک پيوند نامگذاري شده را بيابد ابتداي صفحه مقصد را نمايش خواهد داد.
مثالهاي بيشتر
باز کردن پيوند در پنجره اي جديد
اين مثال نحوه ايجاد پيوندهائي که در پنجره اي جديد باز ميشوند را نشان ميدهد. در اين حالت بازديدکنندگان سايتتان را از دست نخواهيد داد.
ارجاع به قسمت ديگري از صفحه
با کمک اين مثال نحوه تعريف پيوندهاي نام گذاري شده را فراگرفته و چگونگي ارجاع به قسمتهاي مختلف يک صفحه اچتمل را فرا خواهيد گرفت.
رهائي از شر فريم ها
اين مثال کاربرد شناسه target و مقدار top_ و نحوه رهائي از فريم ها را شرح خواهد داد.
نحوه ايجاد يک پيوند mailto
اين مثال نحوه ايجاد يک پيوند از نوع mailto براي باز کردن برنامه مديريت ايميل ها را نشان ميدهد. در اين حالت اگر بازديدکننده سايت برنامه هاي مربوط به ارسال و مديريت ايميل ها را نصب کرده باشد ميتواند به ارسال ايميل بپردازد.
مثالي کاملتر در مورد mailto
مثال از ارسال ايميل با امکان تعيين مقادير cc ، bcc، subject و body
Start Tag Purpose کاربرد عنصر Anchor
<a> Defines an anchor تعريف يک پيوند يا Anchor در يک صفحه اچتمل
Target Attributes کاربرد حالتهاي مختلف شناسه target
target="_blank" مرورگر پيوند را در يک پنجره جديد باز ميکند.
target="_self" مرورگر پيوند را همان پنجره باز ميکند. (حالت پيش فرض يا default)
target="_parent" مرورگر پيوند را فريم parent باز ميکند. (کاربرد در مبحث فريمها)
target="_top" مرورگر پيوند را در فريم مادر و اصلي باز ميکند.(روشي خوب براي نجات از شر فريمها )
براي مطالعه بيشتر در مورد شناسه target سري به اين صفحه بزنيد.
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
در اين درس با المان جدول ( Table ) ، سلولها يا خانه ها، مرز و border در جداول و تگ هاي مربوطه مخصوصا تگهاي TABLE ، TD , TR آشنا خواهيد شد. توجه داشته باشيد که جداول يکي از مهمترين المانهاي آرايش و layout ميباشند.
مثالها:
جداول، آرايه ها
مثال ساده اي براي ايجاد جداول
مرز جداول
نقش شناسه border در تعيين مرز جداول
مثالهاي بيشتر
جدولها
براي تعريف جداول از تگ <table> استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ <tr> تعريف ميشوند، تشکيل ميشود. هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ <td> ايجاد ميشوند. نام هاي td و tr به ترتيب خلاصه شده table row و table data ميباشند.
محتوي يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.
مثال زير جدولي است با دو سطر و سه ستون :
کد اچتمل جدولي با دو سطر و سه ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3
جدولها و شناسه border و dir :
در مثال بالا شناسه border مرز جدول را مشخص ميکند، مقدار 1 مرزي با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد که حالت پيش فرض يعني جدولي بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد.
در مثال بالا شناسه dir يا direction و مقدار rtl براي آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است به تمامي سلولهاي جدول اعمال خواهذ شد.
ساده ترين جدول ممکن در اچتمل، جدولي است با يک سطر و يک ستون!
سرستون در جداول (Headings)
سرستونها در جداول با کمک تگ <th> تعريف ميشوند. مثال زير نحوه تعريف سرستونها را در جداول نمايش ميدهد:
کد اچتمل جدولي با سه سطر و سه ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<th>سرستون ا</th>
<th>سرستون 2</th>
<th>سرستون 3</th>
</tr>
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
سرستون ا سرستون 2 سرستون 3
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3
همانطوريکه مشاهده ميکنيد سر ستونها مانند سلولهاي معمولي جداول تعريف ميشوند و فقط به جاي td از th استفاده شده و لي در نمايش محتواي سر ستونها bold يا توپر نمايش داده خواهند شد.
خانه هاي خالي در جداول (Empty Cells)
اگر محتواي خانه اي از يک جدول خالي باشد چه چيزي بايد نمايش داده شود؟ بسته به مرورگري که استفاده ميکنيد نتيجه نمايش متفاوت است و مثلا در مثال زير خانه خالي جدول بدون مرز نمايش داده خواهد شد:
کد اچتمل جدولي با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td></td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2
رديف 2، سلول 1
در اينگونه موارد براي رفع مشکل کافي است که از non-breaking space (&nbsp;) يا همان نويسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زير نمايش خواهد داد:
کد اچتمل جدولي با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>&nbsp;</td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2
رديف 2، سلول 1
توجه داشته باشيد که اينبار مرزهاي خانه خالي جدول بدرستي ترسيم گرديده اند.
چند نکته اساسي در مورد جداول:
در جداول، رديفها، خانه ها و سر ستونها از تعداد زيادي از شناسه ها ميتوانيد استفاده کنيد که شرح همگي آنها از حوصله اين دوره مقدماتي خارج است و توصيه ميشود که از مثالهاي زير و جدول واقع در انتهاي اين صفحه براي مطالعه هر چه بيشتر در مورد جزئيات شناسه ها استفاده شود.
شناسه dir قابل استفاده در بسياري از تگها ( مثلا table ، tr ، td ، th ) ميباشد. با کمک شناسه dir و مقدار rtl براي آن، جهت نمايش متون فارسي از "راست به چپ" تعيين ميگردد. توجه داشته باشيد که مقدار شناسه dir به صورت موروثي از table به tr و th و از tr و th به td خواهد رسيد.مثلا براي تعيين مقدار rtl براي تمامي خانه هاي يک جدول کافي است که فقط شناسه مزبور را در تگ table قيد کنيد و نيازي به قيد آن در تمامي خانه هاي جدول نيست. البته ميتوانيد که در مورد يک رديف خاص و يا يک خانه خاص شناسه dir را موردي تعيين کنيد.
مثالهاي بيشتر
مرز در جداول
اين مثال کاربرد شناسه border را در نمايش جداول نشان ميدهد.
تعيين جهت نمايش متن در خانه هاي يک جدول
اين مثال کاربرد شناسه dir است در تعيين جهت نمايش متن در خانه هاي يک جدول.
عنوان جداول و تگ caption
مثالي در مورد تگ caption در تعريف جداول
توسعه سطري يا ستوني در جداول
مثالي در مورد شناسه هاي colspan و rowspan در جداول
جدولي با محتويات مختلف
محتوي يک خانه جدول تقريبا ميتواند هر عنصر اچتملي باشد.
فاصله گذاري بين خانه هاي جداول
اين مثال نحوه ايجاد فاصله بين خانه هاي جدول را نشان ميدهد.(cellspacing)
لايه گذاري خانه هاي جدول
اين مثال نحوه ايجاد فاصله خالي بين خانه هاي جدول و مرز آنها را نشان ميدهد.(cellpadding)
تعيين رنگ زمينه يا تصوير زمينه کل يک جدول
تعيين رنگ زمينه يا تصوير زمينه سراسري جداول با کمک شناسه هاي bgcolor و background
تعيين رنگ زمينه يا تصوير زمينه يک يا چند خانه از جدول
تعيين رنگ زمينه يا تصوير زمينه در خانه هاي جداول با کمک شناسه هاي bgcolor و background
تراز بندي محتوا در خانه هاي جداول
اين مثال نحوه ترازبندي محتواي خانه هاي جداول با کمک شناسه "align" را نشان ميدهد.
شناسه frame در جداول
مثالي در مورد کاربرد شناسه "frame" در المان table جهت تعيين شکل مرز جداول.
تراز بندي محتوا در خانه هاي جداول
اين مثال نحوه ترازبندي محتواي خانه هاي جداول با کمک شناسه "align" و "valign" را نشان ميدهد.
تگهاي جداول
Start Tag Purpose کاربرد
<table> Defines a table تعريف جدول
<th> Defines a table header تعريف سرستون در جداول
<tr> Defines a table row تعريف رديف ها در جداول
<td> Defines a table cell تعريف سلول يا خانه هاي يک جدول
<caption> Defines a table caption تعريف عنوان جدول
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ هاي مربوطه مخصوصا تگهاي Frame و Frameset آشنا خواهيد شد.
مثالها:
مجموعه فريمهاي عمودي
مثالي در مورد ايجاد مجموعه فريمهاي عمودي توسط تگ هاي frameset و frame
مجموعه فريمهاي افقي
مثالي در مورد ايجاد مجموعه فريمهاي افقي توسط تگ هاي frameset و frame
مثالهاي بيشتر
فريمها (Frames)
با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه، فريم (frame) ناميده شده و فريمها کاملا مستقل از هم ميباشند. محتواي هر فريم هم ميتواند هر صفحه يا وب سايتي باشد. هر چند که فريمها طراحي سايتهاي کوچک و متوسط را بسيار آسان ميکنند ولي استفاده از آنها در کارهاي حرفه اي توصيه نميشود.(به جز در موارد خاص)
معايب استفاده از فريمها:
موتورهاي جستجو با صفحات طراحي شده با فريمها مشکل دارند.
چاپ و print صفحاتي که از فريمها استفاده ميکنند مشکل است.
صفحاتي که از فريمها استفاده ميکنند معمولا مبتدي بودن طراح سايت را نشان ميدهد!!
تگ فريم ست (Frameset)
تگ <frameset> به تعريف فريمها و تقسيم بندي پنجره مرورگر ميپردازد.
هر تگ <frameset> مجموعه اي از رديفها يا ستونها را تعريف ميکند.
داخل هر فريم ميتواند frameset ديگري قرار دهيد.
با کمک شناسه هاي rows و cols ابعاد و نسبت هر فريم تعيين ميگردد.
تگ <frameset> درون تگهاي <html> و <html/> قرار ميگيرد.(نيازي به قيد تگ body هنگام معرفي يک frameset نيست.)
تگ فريم (Frame)
کاربرد اصلي تگ <frame> تعيين source يا نام صفحه اي است که بايد در فريم ها نمايش داده شود.
مثال زير مجموعه اي از فريمها را که شامل دو فريم عمودي ميباشند معرفي ميکند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم، درون فريم اول فايل "frame_left.html" و درون فريم دوم فايل "frame_right.html" نمايش داده خواهد شد.
<html>
<frameset cols="75%,25%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
</html>
براي نمايش مثال بالا به سه فايل نياز داريد، frame_left.html ،frame_right.html و فايل کد اچتمل بالا.
شناسه هاي cols و rows در تگ frameset
شناسه مقدار شناسه کارکرد
cols عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه ستونها در فريم ست
rows عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه رديفها در فريم ست
مثالهاي زير را در نظر بگيريد:
مثال 2 مثال 1
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_3.html">
<frame src="frame_2.html">
<frame src="frame_1.html">
</frameset>
</html>
<html>
<frameset cols="*,200">
<frame src="frame_2.html">
<frame src="frame_1.html">
</frameset>
</html>
نمايش توسط مرورگر نمايش توسط مرورگر
در مثال يک عرض فريم اول از سمت راست 200 پيکسل تعيين شده و بقيه عرض پنجره که با علامت * مشخص ميشود به فريم دوم اختصاص خواهد يافت.
در مثال دوم عرض پنجره با مقادير درصدي به فريمها اختصاص يافته است.
در مورد شناسه rows دقيقا قراردادهاي بالا برقرارند.
نکات کاربردي:
* اگر فريمهاي طراحي شده مرزهاي قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (resize) خواهند بود و براي جلوگيري از تغيير اندازه فريمها توسط کاربر بايد از شناسه اي به نام noresize در داخل تگ <frame> استفاده شود. در اين مثال noresize نميتوانيد که فريمها را تغيير اندازه بدهيد.
* اگر ميخواهيد که فريمها scroll نشوند (بالا و پايين بردن صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهيد. (مقادير ممکن "yes" ، "no" و "auto" ميباشند.) در اين مثال scrolling صفحات قابل scroll نيستند.
* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهيد. (مثال frameborder )
* درصد بسيار کمي از مرورگرها از تگهاي مربوط به frame و frameset پشتيباني نميکنند. براي اين موارد بايد از تگ <noframes> جهت نمايش صفحه جايگزين استفاده شود.
مثالهاي بيشتر
مجموعه فريمهاي مرکب
مثالي در مورد ايجاد مجموعه اي مرکب از فريمهاي عمودي و افقي
مثالي کاربردي در مورد فريمها
در اين مثال کاربردي با کمک سه فريم امکان نمايش صفحات مختلف به آساني فراهم ميشود. فريم افقي و بالائي سرتيتر و نام اصلي سايت را نمايش خواهد داد و فريم سمت راست لينکهاي مهم صفحه را در بر گرفته و امکان navigation را فراهم ميسازد و نهايتا فريم اصلي و سمت چپ صفحات مختلف سايت را به نمايش خواهد گذاشت. توجه داشته باشيد که براي اين مثال حداقل به يک فايل براي معرفي مجموعا فريمها(frameset) و سه صفحه اچتمل براي فريمهاي بالائي، سمت چپ و راست احتياج خواهد بود.
فريمهاي شناور و يا درجا (Inline frame)
مثالي در مورد فريمهاي شناور و درجا (iframe)، فريمي درون يک صفحه اچتمل
مثالي کاربردي در مورد فريمهاي درجا (Inline frame)
مثالي کاربردي در مورد فريمهاي شناور و درجا (iframe) با کمک 7 صفحه اچتمل مختلف
شوخي با فريم هاي شناور
مثالي در مورد نمايش درايو لوکال (مثلا c:\ بازديدکنندگان سايت به آنها
فريمها و پيوندهاي نامگذاري شده
مثالي کامل در مورد فريمها و پيوندهاي نامگذاري شده و نحوه استفاده از آنها در طراحي سايتي ساده متشکل از چهار فايل اچتمل
فريمها و پيوندهاي نامگذاري شده کامل
همان مثال بالا در صفحه کامل مرورگر با شناسه هاي کامل در تگ frame
تگ هاي فريم
Start Tag Purpose کاربرد
<frameset> Defines a set of frames تعريف مجموعه اي از فريم ها
<frame> Defines a sub window (a frame) تعريف يک فريم
<noframes> Defines a noframe section for browsers that do not handle frames تعريف جايگزين براي مرورگرهائي که از فريم ها پشتيباني نميکنند.
<iframe> Defines an inline sub window (frame) تعريف فريم هاي درجا (inline)
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهاي مرتب(ordered) ، نامرتب(unordered) و فهرستهاي تعريفي(definition lists) و تگ هاي مربوطه يعني li ، ol ، ul ، dl ، dt و dd آشنا خواهد کرد. مثالها:
فهرستهاي نامرتب
مثالي بسيار ساده در مورد فهرستهاي نامرتب
فهرستهاي مرتب
مثالي در مورد فهرستهاي مرتب و نحوه نمايش متون فارسي
مثالهاي بيشتر
فهرستهاي نامرتب(unordered list)
فهرستهائي هستند از يک يا چند قلم اطلاعات که معمولا با دايرهاي کوچک و سياه رنگ در شروع نمايش داده ميشوند. يک فهرست از نوع نامرتب با تگ <ul> شروع شده و هر رقم اطلاعات با تگ <li> مشخص ميگردد.
HTML code نمايش توسط مرورگر
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
Red
Blue
Green
<ul dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چاي</li>
</ul>
قهوه
شير
چاي
داخل تگهاي <li> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
فهرستهاي مرتب(ordered list)
اين نوع فهرست بسيار شبيه فهرستهاي نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتي از اعداد به جاي دايره هاي کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهاي نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد.
HTML code نمايش توسط مرورگر
<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>
Red
Blue
Green
<ol dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چاي</li>
</ol>
قهوه
شير
چاي
داخل تگهاي <li> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
فهرستهاي تعريفي(definition list)
فهرست تعريفي فهرستي است از اصطلاح ها و تشريح و توصيف آنها.
فهرستهاي تعريفي با <dl> شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهاي <dt> و <dd> تعريف ميشوند.
HTML code نمايش توسط مرورگر
<dl>
<dt>[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]>
<dd>Hypertext Transfer Protocol</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
<dt>IP</dt>
<dd>Internet Protocol</dd>
</dl>
HTTP
Hypertext Transfer Protocol
FTP
File Transfer Protocol
IP
Internet Protocol
<dl dir="rtl" >
<dt >مقدمه</dt>
<dd>خلاصه اي از مقدمه</dd>
<dt>فصل 2</dt>
<dd>خلاصه اي از فصل 1</dd>
<dt>فصل 2</dt>
<dd>خلاصه اي از فصل 2</dd>
</dl>
مقدمه
خلاصه اي از مقدمه
فصل 1
خلاصه اي از فصل 1
فصل 2
خلاصه اي از فصل 2
داخل تگهاي تشريح يعني <dd> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
مثالهاي بيشتر
انواع فهرستهاي مرتب
مثالي در مورد فهرستهاي مرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست
انواع فهرستهاي نامرتب
مثالي در مورد فهرستهاي نامرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست
فهرستهاي تودرتو
مثالي در مورد فهرستهاي ترکيبي. اعضاي فهرست ميتوانند از فهرستهاي ديگر تشکيل شوند.
فهرستهاي تعريفي
مثالي در مورد فهرستهاي تعريفي به همراه استفاده از شناسه dir
تگهاي فهرست
Start Tag Purpose کاربرد
<ol> Defines an ordered list تعريف فهرستهاي مرتب
<ul> Defines an unordered list تعريف فهرستهاي نامرتب
<li> Defines a list item تعريف يک آيتم و قلم از يک فهرست
<dl> Defines a definition list تعريف فهرستهاي تعريفي
<dt> Defines a definition term تعريف اصطلاح در فهرستهاي تعريفي
<dd> Defines a definition description تعريف معني و شرح اصطلاح در فهرستهاي تعريفي
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
از طريق استفاده از عنصر <form> و چند تگ مرتبط قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهاي ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه هاي ارسال (submit button) و يا حذف (reset) را خواهيد داشت. اين فصل با شرح تگ هاي form و input و ... به چگونگي ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها بصورت لاتين و يا فارسي خواهد پرداخت.
توجه داشته باشيد که براي پردازش اطلاعات دريافتي از کاربر بايد با يکي از زبانهاي cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائي داشته باشيد. مثالهاي cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند.
مثالها:
وروديهاي متن يا Text fields
مثالي ساده در مورد ايجاد text field ها . با کمک text field ها کاربران قادر به وارد کردن و تايپ متن خواهند شد.
وروديهاي رمز عبور يا Password fields
مثالي ساده در مورد ايجاد password field ها . با کمک password field ها کاربران قادر به ورود رمز عبور يا پسورد خواهند شد.
مثالهاي بيشتر
فرمها (Forms)
تمامي عناصر و تگهائي که تاکنون ديده ايد فقط به نمايش اطلاعات پرداخته اند و هيچکدام به گرفتن و اخذ اطلاعات از کاربر نپرداخته اند. فرمها که با تگ <form> معرفي ميشوند، طراح سايت را قادر به جمع آوري و اخذ اطلاعات از بازديدکننده سايت خواهند کرد. عنصر فرم و گروهي از عناصر و تگهاي درون آن به دريافت و ارسال اطلاعات به سمت وب سرور کمک خواهند کرد و لازم به ذکر است که تمامي تگهاي مربوط به فرمها بايد درون تگهاي <form> و <form/> قرار ميگيرند.
درون تگ فرم گروه زيادي از عناصر و تگهاي مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطري(text fields)، عناصر ورود متنهاي چند سطري (Textarea)، منوهاي drop-down و radio buttons و ...
تگ Input
به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه اي به نام type به تعيين نوع اطلاعات ورودي اختصاص دارد. مقادير ممکن براي اين شناسه به قرار زيرند:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضي از type هاي کاربردي خواهيم پرداخت:
وروديهاي متن (Text Fields)
اگر ميخواهيد که بازديدکننده اطلاعاتي از قبيل متن، اعداد و ... را وارد کند از شناسه اي با مقدار "text" استفاده ميشود.
کد اچتمل نمايش توسط مرورگر
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
First name:
Last name:
<form dir="rtl" >
نـــــــــــــــام:
<input type="text" name="firstname">
<br>
نام خانوادگي:
<input type="text" name="lastname">
</form>
نـــــــــــــــام:
نام خانوادگي:
توجه داشته باشيد که تگ <form> چيزي را به نمايش نخواهد گذاشت بلکه تگهاي درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسي بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوري است که اغلب مرورگرها در حالت پيش فرض براي وروديهاي متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهاي متن را تغيير دهيد بايد از شناسه اي به نام size استفاده کنيد.
وروديهاي Radio Buttons
اگر ميخواهيد که بازديدکننده گزينه اي را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" براي شناسه type استفاده کنيد:
کد اچتمل نمايش توسط مرورگر
<form>
<input type="radio" name="---" value="male"> Male
<br>
<input type="radio" name="---" value="female"> Female
</form>
Male
Female
<form dir="rtl">
<input type="radio" name="---" value="male"> مرد
<br>
<input type="radio" name="---" value="female"> زن
</form>
مرد
زن
همانطور که مشاهده ميشود فقط امکان يکي از گزينه ها براي کاربر ميسر است.
وروديهاي Checkboxes
اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "checkbox" براي شناسه type استفاده کنيد:
کد اچتمل نمايش توسط مرورگر
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
I have a bike
I have a car
<form dir="rtl">
<input type="checkbox" name="bike">
دوچرخه دارم
<br>
<input type="checkbox" name="car">
ماشين دارم
</form>
دوچرخه دارم
ماشين دارم
شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button)
در فرمها براي ارسال اطلاعات کسب شده از دکمه اي به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروي اين دکمه "Submit" ، اطلاعات درون فرم به فايلي ديگر ارسال خواهند شد. براي تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه اي به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلي است که به دريافت و سپس پردازش اطلاعات دريافتي خواهد پرداخت. معمولا فايلهاي بخش action برنامه ها و اسکريپت هائي نوشته شده با ربانهاي cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد.
تعيين مقدار "submit" براي شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد.
کد اچتمل نمايش توسط مرورگر
<form name="input" action="form_action.cgi">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username:
<form name="input" action="form_action.cgi" dir="rtl">
نام کاربر
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
نام کاربر
در مثال بالا در باکس ورودي متن، کلمه اي را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطلاعات درون فرم را که در اين مثال متني ساده است به سمت فايلي که در شناسه action تعيين شده است ارسال کرده و در اين مثال برنامه اي به زبان Perl با نام form_action.cgi در سمت سرور به ذخيره و سپس نمايش متني خبري خواهد پرداخت.
ورود متن فارسي در عناصري مانند Text field يا Text area:
همانطور که در مثالهاي بالا مشاهده کرديد در مورد المانهاي Text field و Textarea با کمک شناسه dir ميتوان سمت و جهت ورود اطلاعات را "از راست به چپ" تعيين کنيد. ولي اگر کاربري ويندوز فارسي نداشته باشد، از کامپيوترهاي مکينتاش استفاده کند و يا سيستمش را فارسي نکرده باشد قادر به ورود اطلاعات به زبان فارسي نخواهد بود و نويسه هاي تايپ شده لاتين خواهند بود!، در اينگونه موارد چه بايد کرد؟
معمولا برنامه نويسان وب براي فراهم ساختن امکان ورود متن فارسي از يکي از دو روش زير استفاده ميکنند:
استفاده از اپلتهاي جاوا با اين مزيت که سورس و کد اصلي فارسي سازي قابل استفاده توسط ديگران نيست!!
استفاده از زبان جاوا اسکريپت و با اين عيب که سورس و کد اصلي JavaScript قابل مشاهده و استفاده توسط ديگران است!
مدرسه وب بر اساس دستورالعملهاي "پروژه فارسي وب" از روش دوم استفاده کرده و از کد جاوا اسکريپت فراهم شده توسط اين پروژه استفاده ميکند. مثال زير نحوه استفاده از کد فارسي ساز جاوا اسکريپتي مذکور را شرح خواهد داد:
فارسي ساز جاوا اسکريپتي
مثالي در مورد نحوه استفاده از فارسي ساز جاوا اسکريپتي در يک فرم متشکل از Textfield ها
مثالهاي بيشتر
حالتهاي مختلف ورودي Input
در تگ input و با کمک شناسه type و مقادير مختلف براي آن ميتوان انواع مختلف اطلاعات را از وبگرد گرفت.
Checkboxes
مثالي در مورد نحوه تعريف فرمي متشکل از Checkbox ها
Radiobuttons
مثالي در مورد نحوه تعريف فرمي متشکل از Radiobutton ها
فهرست کرکره اي ساده
مثالي در مورد نحوه تعريف فرمي متشکل از drop down box ها
فهرست کرکره اي ديگر
مثالي در مورد نحوه تعريف فرمي متشکل از drop down box ها با تعيين پيش گزينه
Textarea
مثالي در مورد نحوه تعريف فرمي متشکل از Textarea ، ناحيه اي براي ورود بيش از يک سطر متن (نکته: استفاده از اديتور ما براي اين مثال امکان پذير نيست! اگر گفتيد چرا!؟)
تعريف فرمي با کمک دکمه يا button
مثالي در مورد نحوه تعريف فرمي با کمک دکمه يا button
ترسيم مرز در اطراف فرم
مثالي در مورد نحوه تعريف فرمي دلخواه و ترسيم مرزي بدور آن به همراه تعيين عنواني براي فرم با کمک عنصر Fieldset
ارسال ايميل با کمک فرمها
مثالي در مورد نحوه ارسال ايميل با کمک فرمها
ساختن فهرستي از سايتهاي مورد علاقه
مثالي در مورد نحوه استفاده از تگ فرم و منوهاي کرکره اي و کمي جاوا اسکريپت براي ساخت فهرستي از سايتها
تگهاي فرم
Start Tag Purpose کاربرد
<form> Defines a form for user input تعريف فرم ورود اطلاعات
<input> Defines an input field تعريف ورودي از نوع Input
<textarea> Defines a text-area (a multi-line text input control) تعريف ورودي متن چند سطري يا text-area
<label> Defines a label to a control تعريف برچسب يا label
<fieldset> Defines a fieldset تعريف fieldset
<legend> Defines a caption for a fieldset تعريف عنوان براي fieldset ها
<select> Defines a selectable list (a drop-down box) تعريف فهرستهاي انتخابي يا drop-down box
<optgroup> Defines an option group تعريف option group ها
<option> Defines an option in the drop-down box تعريف گزينه اي از drop-down box ها
<button> Defines a push button تعريف دکمه فشاري، متفاوت با button تگ input
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
در اين درس با تگ img ، شناسه src و alt ، تگهاي Map و Area و چگونگي نمايش تصاوير و همچنين تنظيم محل آنها در سندهاي اچتمل آشنا خواهيد شد.
مثالها:
درج تصوير
نحوه درج تصاوير با کمک تگ img
درج تصويري واقع در فضاي آدرسي ديگر
درج تصويري واقع در دايرکتوريي غير از آدر س صفحه اچتمل و يا تصويري واقع در فضاي آدرسي ديگر سايتها
مثالهاي بيشتر
تگ img و شناسه src يا source
در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهاي خالي است، بدين معنا که فقط داراي يک يا چند شناسه و attribute بوده و داراي تگ انتهائي يا <img/> نيست.
مهمترين شناسه براي درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويري که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوري صفحه اچتمل، در ديگر دايرکتوريهاي همان سايت و يا در فضاي بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:
<img src="url">
مقدار url آدرس اينترنتي تصوير ميباشد و مثلا اگر تصويري که قرار است که در صفحه درج شود در همان دايرکتوري قرار دارد و نامش me.jpg ، کافي است که به جاي url فقط نام تصوير يعني me.jpg را بنويسيد و اگر تصوير در سايتي ديکر قرار دارد url کامل آنرا بنويسيد. مثلا تصوير لوگو سايت google.com داراي url ي برابر [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] است.در اين url نام تصوير logo.gif بوده، در دايرکتوري images قرار داشته و روي وب سايت google.com قرار دارد.
شناسه هاي width و height در تگ img
کاربرد شناسه هاي width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديري غير از مقادير واقعي طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويري را با قيد ابعاد آن شرح ميدهد:
<img src="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]" width="276" height="110" >
توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه هاي width و height قيد کنيد، اينکار سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير ميداند که چه مقدار از صفحه نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لوذ شدن تمامي تصاوير مرورگر شروع به نمايش قالب و چارچوب کلي صفحه خواهد کرد.)
شناسه Alt يا "alternate text" يا متن جايگزين
اگر مرورگر به هر دليلي نتواند که يک تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائي باشد که فقط متن را نمايش ميدهند، متن و text ي که با کمک شناسه alt تعيين شده است نمايش داده خواهد شد. همچنين در اغلب مرورگرها با قرارگرفتن ماوس بروي يک تصوير، متن تعيين شده توسط شناسه alt نمايش داده خواهد شد. با کمک alt اطلاعات اضافي مربوط به تصوير قابل نمايش ميباشد.مثال زير نحوه درج تصويري را با قيد متن جايگزين آن شرح ميدهد:
<img src="images/ganjafzar.gif" alt="Iran Developers!" >
وبلاگها و اضافه کردن تصاوير:
اگر وبلاگي داشته و ميخواهيد که تصويري به آن اضافه کنيد دو حالت مختلف ممکن است که پيش آيد:
الف) تصوير روي سايتي ديگر قرار داشته و شما هم ميخواهيد از آن تصوير که در سايتي ديگر قرار دارد استفاده کنيد. در اين حالت از آدرس مستقيم تصوير در شناسه src استفاده کنيد، مانند :
<img src="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]" width=258 height=78 >
در اين مثال تصوير روي سايت google.ca قرار داشته و لزومي به ذخيره آن توسط شما نيست.
ب) تصوير روي هارد کامييوتر شما است و هنوز بروي وب منتقل نشده است. در اين حالت چون اغلب سيستم هاي وبلاگ امکان ذخيره تصاوير را به شما نمي دهند بايد ابتدا تصويرتان را با کمک FTP يا روشهاي ديگر به روي سايتي ديگر منتقل کنيد. شرکتهاي مختلفي فضاي مجاني براي ساخت صفحات وب و ذخيره اطلاعات و تصاوير در اختيار شما قرار ميدهند و در يکي از سؤالهاي اين FAQ فهرست اين شرکتها را ميتوانيد ببينيد. بنابراين ابتدا فضائي در وب تهيه کرده، سپس تصويرتان را Upload کرده (با کمک FTP يا روشهاس ديگر ) و سپس در شناسه src از تگ img آدرس جديد تصوير را قيد کنيد.
چند نکته مهم:
اگر در يک صفحه اچتمل از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير)
استفاده از تصاوير، سرعت لود شدن صفحات را پايين مي آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد.
لود تصويري با حجم 50 کيلوبايت براي کسي که از مودمي با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد.
براي ديدن مشخصات تصاوير در وب کافي است که روي تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد.
براي ذخيره تصاوير در وب کافي است که روي تصوير Right click کرذه و سپس در بخش "Save picture as" آنرا ذخيره کنيد.
مثالهاي بيشتر
تصاوير زمينه
مثالي در مورد نحوه تعيين تصاوير زمينه با کمک شناسه background در تگ body
ترازبندي تصاوير
اين مثال نحوه ترازبندي تصاوير در کنار متون را نشان ميدهد.
تصاوير شناور در متن
آزاد گذاشتن تصوير در سمت چپ يا راست
نمايش تصاوير در ابعاد مختلف
مثالي در مورد استفاده از شناسه هاي width و height و نمايش تصاوير در ابعاد مختلف
نمايش متن جايگزين براي تصاوير
مثالي در مورد استفاده از شناسه alt
استفاده از تصاوير هنگام ايجاد پيوند ها
مثالي در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها
ايجاد image map ها
مثالي در مورد ايجاد image map . در اين مثال هر بخش از نواحي تعريف شده قابل کليک بوده و به پيوندي اختصاصي اشاره ميکند.
تگ هاي تصاوير
Start Tag Purpose کاربرد
<img> Defines an image درج تصوير
<map> Defines an image map تعريف Image map يا ؟؟؟
<area> Defines an area inside an image map تعريف ناحيه اي در داخل Image map
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
در اين درس با چگونگي تعيين تصاوير و رنگ پس زمينه (Background) آشنا خواهيد شد. رنگ و يا تصوير پس زمينه فاکتور بسيار مهمي در طراحي صفحات اچتمل بوده و استفاده از رنگ و يا تصوير مناسب نقشي تعيين کننده در خوانا بودن صفحات دارد.
مثالها:
رنگ متن و زمينه متناسب
انتخاب رنگ مناسب متون و پس زمينه به خوانا بودن متن کمک شايان توجهي خواهد کرد.
رنگ متن و زمينه نامتناسب
مثالي از انتخاب نامناسب رنگ متن و پس زمينه
مثالهاي بيشتر
رنگ و تصوير زمينه در صفحات اچتمل:
تگ <body> داراي دو شناسه مهم براي تعيين رنگ و تصوير پس زمينه ميباشد. پس زمينه صفحات اچتمل رنگ و يا يک تصوير ميتواند باشد.
شناسه bgcolor براي رنگ پس زمينه (background color)
شناسه bgcolor رنگ پس زمينه را تعيين ميکند. مقدار رنگ پس زمينه ميتواند نام رنگ (مثل red يا blue ) ، مقدار آن بر اساس استاندارد RGB و يا حتي مقدار هگزادسيمال (Hexadecimal) باشد.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
در تمامي مثالهاي بالا با کمک شناسه bgcolor رنگ زمينه صفحه "سياه" تعيين ميشود.
شناسه Background براي تصوير پس زمينه:
براي تعيين تصويري که به عنوان پس زمينه صفحه نمايش داده ميشود از شناسه background استفاده ميشود.مقدار اين شناسه URL يا آدر س تصوير (image) ميباشد.اگر ابعاد تصوير کوچکتر از ابعاد صفحه مرورگر باشد، تصوير زمينه تکثير خواهد شد تا حدي که تمام صفحه نمايش از تصوير زمينه پوشانده شود.
<body background="bg.gif">
<body background="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]">
در مثال اول از آدرس دهي نسبي (relative) براي تعيين URL يا آدرس تصوير استفاده شده و در واقع در اين مثال فايل اچتمل و تصوير bg.gif بايد در يک دايرکتوري قرار گيرند. در مقابل مثال دوم از آدرس دهي مطلق (absolute) براي تعيين آدرس تصوير استفاده شده است و همانطور که ميدانيد آدرس تصوير در هر نقطه از فضاي وب ميتواند باشد.
نکات مهم: اگر از تصاوير پس زمينه در صفحات اچتمل استفاده ميکنيد به نکات زير توجه کنيد :
هرتصويري با فرمت gif و يا jpg قابل استفاده به عنوان تصوير زمينه ميباشد.
از تصاوير بزرگتر از ده کيلوبايت ظرفيت به هيچ وجه استفادا نکنيد، در غير اين صورت سرعت load صفحه بشدت پايين خواهد آمد.
از تصاوير زمينه هماهنگ با ديگرتصاوير صفحه استفاده کنيد.
از تصاوير زمينه هماهنگ با متون صفحه استفاده کنيد.
در رزولوشنهاي مختلف به ديدن و آزمايش تصاوير پس زمينه بپردازيد.
پر مصرف ترين رنگهاي زمينه وب سايتها، رنگهاي سفيد، سياه و خاکستري ميباشند.
اغلب سايتهاي وب از تصاوير پس زمينه استفاده نمي کنند! مثلا همين سايت!!!
نکته مهم در سازگاري با نسخه هاي جديد اچتمل و XHTML
شناسه هاي bgcolor و background در تگ <body> در نسخه 4 اچتمل و XHTML پشتيباني نميشوند و در واقع از رده خارج محسوب ميشوند. در عوض کنسرسيوم W3C استفاده از Style Sheet ها را توصيه ميکند و در واقع در نسخه 4 اچتمل و استاندارد جديد XHTML تمامي اطلاعات مربوط به نمايش يا presentation و layout بايد در style sheet ها قرار گيرند.
مثالهاي بيشتر
استفاده مناسب از تصوير زمينه 1
در اين مثال بدليل استفاده از تصوير مناسب براي زمينه، نوشته هاي صفحه کاملا خوانا هستند.
استفاده مناسب از تصوير زمينه 2
در اين مثال در اثر استفاده از تصوير مناسب براي زمينه، نوشته هاي صفحه کاملا خوانا هستند.
استفاده نامناسب از تصوير زمينه
در اين مثال نوشته هاي صفحه خوانا نيستند.
استفاده از تصوير زمينه با آدرس مطلق
در اين مثال آدرس تصوير زمينه بصورت مطلق و کامل آورده شده است.
تعيين رنگ زمينه با Style Sheet ها
در اين مثال چگونگي استفاده از Style Sheet ها براي تعيين رنگ زمينه آورده شده است.
با وجوديکه هنوز بعضي از اچتمل کاران از تگ <font> براي تعيين نام و نوع قلم، رنگ و اندازه متون استفاده ميکنند ولي در استاندارد جديد اچتمل (نسخه 4) و همچنين XHTML از تگ <font> پشتيباني نميشود و استفاده از Style Sheet ها به عنوان جايگزين معرفي شده است.
تگ <font>
در نسخه هاي 3.2 و قبلي تر زبان اچتمل از تگ <font> براي تعيين نام قلم، رنگ و اندازه متون استفاده ميشود. در اين تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهاي زير کاربرد تگ <font> خدابيامرز را نشان ميدهند:
کد اچتمل نمايش کد روبرو توسط مرورگر
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
This is a paragraph.
<p dir="rtl">
<font size="1" face="Times" color="#FF9900">
متني با قلم Times و اندازه 1 و رنگ FF9900
</font>
</p>
متني با قلم Times و اندازه 1 و رنگ FF9900
<p dir="rtl">
<font size="2" face="Tahoma" color="red">
اين متني با قلم Tahoma و اندازه 2 و رنگ قرمز
</font>
</p>
متني با قلم Tahoma و اندازه 2 و رنگ قرمز
شناسه هاي تگ <font>
Attribute Example کاربرد
size="number" size="2" تعيين اندازه قلم
size="+number" size="+1" افزايش اندازه قلم
size="-number" size="-1" کاهش اندازه قلم
face="face-name" face="Times" تعيين نام قلم
color="color-value" color="#eeff00" تعيين رنگ قلم
color="color-name" color="red" تعيين رنگ قلم
*** بيان مختصر عملکرد تگ <font> در اين دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحي صفحات اچتمل توصيه نميشود.
ديگر از تگ <font> استفاده نکنيد!
تگ <font> از رده خارج محسوب ميشود و کنسرسيوم جهاني تعيين استانداردهاي وب (World Wide Web Consortium, W3C) اين تگ را از مجموعه تگهاي استاندارد اچتمل کنار گذاشته است و اکيدا توصيه ميشود که از Style Sheet ها براي تعريف هر گونه خواص نمايشي و آرايشي (layout & Presentation) المانها در اچتمل استفاده شود.
روش صحيح تعيين نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:
هر چند که مبحث و کلاسهاي درس Style Sheet ها در "مدرسه وب" در دست تهيه بوده و اميدواريم که بزودي ارائه شوند ولي تا قبل از آن استفاده از شناسه اي به نام style در بسياري از المانها کار گشا خواهد بود. مثالهاي ساده زير نحوه تعيين نام قلم، اندازه و رنگ متون را با کمک شناسه style به نمايش خواهند گذاشت:
تعيين نام قلم
مثالي در مورد تعيين نام قلم در يک استيل درجا (inline)
تعيين اندازه قلم
مثالي در مورد تعيين اندازه قلم در يک استيل درجا (inline)
تعيين رنگ قلم
مثالي در مورد تعيين رنگ قلم در يک استيل درجا (inline)
تعيين نام، اندازه و رنگ قلم
مثالي در مورد تعيين نام، اندازه و رنگ قلم در يک استيل درجا (inline)
مثال کاربردي در مورد Style Sheet ها
مثالي در مورد نحوه تعريف استيلهاي مختلف نمايش متون در جداول
تگ <span>
تگ <span> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ هاي <p> و <div> مرورگرها هيچ سطر جديدي به اول يا آخر المان <span> اضافه نمي کنند.
مثال:
کد اچتمل نمايش کد روبرو توسط مرورگر
<p>Some text <span style="color:#0000AF;">another text</span> again text...</p>
Some text another text again text...
id, class, title, style, dir, lang شناسه هاي استاندارد المان span
مثالهائي از نحوه استفاده از المان span و Style sheet ها:
روش قديمي روش صحيح
<font color="#FF00FF">Hello!</font> <span style="color:#FF00FF">Hello!</span>
<font color="rgb(255,0,255)">Hello!</font> <span style="color:rgb(255,0,255)">Hello!</span>
<font style="color:Fuchsia">Hello!</font> <span style="color:Fuchsia">Hello!</span>
<font color="#FF00FF" size="3">Hello!</font> <span style="color:#FF00FF;font-size:100%">Hello!</span>
تگ <div>
تگ <div> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ <span> مرورگرها يک سطر جديد به اول و آخر المان <div> اضافه مي کنند.
مثال:
کد اچتمل نمايش کد روبرو توسط مرورگر
<p>Some text <div style="color:#0000AF;">another text</div> again text...</p>
Some text
another text
again text...
id, class, title, style, dir, lang شناسه هاي استاندارد المان div
تعيين جهت نمايش متون
مثالي در مورد استفاده از تگ div و اعمال "جهت نمايش متون" به بخشي از صفحه اچتمل
Start Tag Purpose کاربرد
<div> Defines a division/section in a document تعريف بخش و ناحيه اي از صفحه اچتمل
<span> Defines a section in a document تعريف بخش و ناحيه اي از صفحه اچتمل
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
در نسخه جديد(4/0) اچتمل امکان جداسازي کامل فرمت دهي از ساختار صفحات اچتمل فراهم شده است. در اين نسخه توصيه ميشود که تمامي اطلاعات مربوط به نمايش و ترازبندي به فايلهائي مجزا از صفحه اچتمل منتقل شوند. بخشي از صقحات اچتمل که مربوط به نمايش، ترازبندي و فرمت دهي است، استايل شيت يا "Style Sheet" ناميد شده و معمولا به صورت فايلي مجزا درون بخش <head> صفحات اچتمل معرفي ميگردند. در اين درس به صورت بسيار خلاصه با روشهاي مختلف استفاده از استايل شيتها در صفحات اچتمل آشنا خواهيد شد.
مثالها
استيلها در اچتمل
در اين مثال نحوه تعريف استايل شيتها درون بخش <head> صفحات اچتمل شرح داده شده است. (Internal Style Sheet)
پيوندي بدون خط افقي زيري
در اين مثال نحوه ايجاد پيوندي بدون "خط افقي زيري" شرح داده شده است. (Inline Styles)
اتصال به فايلهاي استايل شيت خارجي
در اين مثال نحوه استفاده از تگ <link> جهت اتصال به فايلهاي استايل شيت خارجي شرح داده خواهد شد. (External Style Sheet)
چگونگي استفاده از استايل شيتها:
مرورگرها از روي استيلهاي تعريف شده توسط استايل شيتها به فرمت دهي و نمايش اطلاعات درون صفحه اچتمل ميپردازند. تعريف و استفاده از استايل ها در صفحات اچتمل به سه روش مختلف ممکن ميباشد:
1)استايل شيتهاي خارجي (external style sheet) :
در اين روش تمامي استيلها و تعاريف نمايشي درون فايلي جداگانه قرار گرفته و بسيار مناسب حالتهائي است که قرار است که استايلي به بيش از يک صفحه اچتمل اعمال شود. مزيت اين روش سهولت در تغيير ظاهر صفحات يک وب سايت ميباشد و براي يک تغيير کلي در سايت کافي است که فايل استايل شيت کل سايت که معمولا يک فايل واحد است تغيير داده شود. (بايد توجه داشت که در اين حالت تمامي صفحات سايت بايد به يک فايل استايل شيت واحد لينک شده باشند.) استايل شيتهاي خارجي توسط تگ <link> که درون بخش head صفحات اچتمل قرار ميگيرد، معرفي ميشوند.
در مثال زير با کمک شناسه href از تگ link نام و در حالت کلي url فايل در برگيرنده استايلهاي تعريف شده تعيين ميگردد:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2)استايل شيتهاي داخلي (Internal Style Sheet) :
کاربرد اين روش در حالتهائي است که صفحه اچتمل نيازمند تعريف استايلي منحصر به فرد و مجزا بوده و استايل طراحي شده فقط بدرد آن صفحه خواهد خورد. در اين حالت بايد کدهاي حاوي تعريف استايل درون تگ هاي <style> و <style/> قرار گرفته و معمولا نتيجه درون بخش head صفحه اچتمل گذاشته ميشود.مثال:
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3)استايل شيتهاي درجا (Inline Styles) :
کاربرد اين روش در مواردي است که بايد براي يک المان (يا گروهي) خاص استايلي اعمال شود. در اين حالت بايد از شناسه اي به نام style که تقريبا در تمامي تگها قابل اعمال است استفاده شود. مثال:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
تگ هاي استايل
Start Tag Purpose کاربرد
<style> Defines a style in a document تعريف استيلها درون يک سند
<link> Defines the relationship between two linked documents تعيين و تعريف فايل استايل شيت خارجي
<font> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.
<basefont> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.
<center> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
تغييرات در نسخه جديد اچتمل (4/0) :
هدف اوليه از طراحي زبان اچتمل ايجاد زباني براي تعريف اطلاعات محض بدون در برداشتن جزئيات مربوط به فرمت و نمايش بود ولي با ايجاد نسخه 3/2 زبان اچتمل و اضافه شدن تگهاي فرمت دهي مانند <font> و يا شناسه هائي مانند color و Align محتوا و نمايش در صفحات اچتمل ادغام گرديده و همين امر سبب بروز مشکلات عديده اي براي طراحان و برنامه نويسان وب گرديد. براي رفع اين مشکل در نسخه 4/0 اچتمل توصيه بر جداسازي کامل اين دو گروه از اطلاعات بوده و در نسخه هاي آينده اچتمل اين جداسازي اجباري خواهد گرديد و توصيه مدرسه وب نيز استفاده از استايل شيتها براي هر نوع تعريف فرمت و ترازبندي ميباشد. براي مثال در کد اچتمل زير که بر اساس نسخه 3/2 اچتمل ميباشد، ساختار و محتوا (تگي از نوع پاراگراف با محتواي "This is a paragraph") با اطلاعات نمايش يعني رنگ و ترازبندي (رنک قرمز متن و ترازبندي در وسط صفحه) همزمان و در کنار هم آورده شده اند و اين ادغام امکان تغيير و توسعه کد را بسيار محدود خواهد کرد:
<p align="center"><font color="red">This is a paragraph</font></p>
کد معادل مثال فوق با استفاده از استايل شيتها در اين مثال شرح داده شده است.(هر چند که اين مثال از تمامي امکانات استايل شيتها و ايجاد فايلي کاملا مستقل براي تعريف استايل استفاده نکرده است.)
NAME W3C HTML NS MSIE DESCRIPTION
A HTML40 NS3+ MSIE3+ anchor
ABBR HTML40 abbreviated form (e.g., [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] etc.)
ACRONYM HTML40
ADDRESS HTML40 NS3+ MSIE3+ information on author
APPLET HTML40 NS3+ MSIE3+ Java applet
AREA HTML40 NS3+ MSIE3+ client-side image map area
B HTML40 NS3+ MSIE3+ bold text style
BASE HTML40 NS3+ MSIE3+ document base URI
BASEFONT HTML40 NS3+ MSIE3+ base font for the page
BDO HTML40 MSIE5+ I18N BiDi over-ride
BGSOUND MSIE3+ background sound
BIG HTML40 NS3+ MSIE3+ enlarge text style
BLINK NS3+ blinking text
BLOCKQUOTE HTML40 NS3+ MSIE3+ long quotation
BODY HTML40 NS3+ MSIE3+ document body
BR HTML40 NS3+ MSIE3+ forced line break
BUTTON HTML40 MSIE4+ push button
CAPTION HTML40 NS3+ MSIE3+ table caption
CENTER HTML40 NS3+ MSIE4+ shorthand for DIV align=center
CITE HTML40 NS3+ MSIE3+ citation font format
CODE HTML40 NS3+ MSIE3+ computer code fragment
COL HTML40 MSIE3+ table column
COLGROUP HTML40 MSIE3+ table column group
COMMENT MSIE3+ comment ignored by the browser
DD HTML40 NS3+ MSIE3+ definition description
DEL HTML40 MSIE4+ deleted text
DFN HTML40 MSIE3+ instance definition
DIR HTML40 NS3+ MSIE3+ directory list
DIV HTML40 NS3+ MSIE3+ generic language/style container
DL HTML40 NS3+ MSIE3+ definition list
DT HTML40 NS3+ MSIE3+ definition term
EM HTML40 NS3+ MSIE3+ emphasis
EMBED NS3+ MSIE3+ embeds external object in HTML
FIELDSET HTML40 MSIE4+ form control group
FONT HTML40 NS3+ MSIE3+ local change to font
FORM HTML40 NS3+ MSIE3+ interactive form
FRAME HTML40 NS3+ MSIE3+ subwindow
FRAMESET HTML40 NS3+ MSIE3+ window subdivision
H1 HTML40 NS3+ MSIE3+ heading
H2 HTML40 NS3+ MSIE3+ heading
H3 HTML40 NS3+ MSIE3+ heading
H4 HTML40 NS3+ MSIE3+ heading
H5 HTML40 NS3+ MSIE3+ heading
H6 HTML40 NS3+ MSIE3+ heading
HEAD HTML40 NS3+ MSIE3+ document head
HR HTML40 NS3+ MSIE3+ horizontal rule
HTML HTML40 NS3+ MSIE3+ document root element
I HTML40 NS3+ MSIE3+ italic text style
IFRAME HTML40 MSIE3+ inline subwindow
ILAYER NS4+ positioning content
IMG HTML40 NS3+ MSIE3+ Embedded image
INPUT HTML40 NS3+ MSIE3+ form control/field
INS HTML40 MSIE4+ inserted text
ISINDEX HTML40 NS3+ MSIE4+ single line prompt
KBD HTML40 NS3+ MSIE3+ text to be entered by the user
KEYGEN NS4+ for use in web-based certificate management systems
LABEL HTML40 MSIE4+ form field label text
LAYER NS4+ positioning content
LEGEND HTML40 MSIE4+ fieldset legend
LI HTML40 NS3+ MSIE3+ list item
LINK HTML40 NS4+ MSIE3+ a media-independent link
MAP HTML40 NS3+ MSIE3+ client-side image map
MARQUEE MSIE3+ scrolling text field
MENU HTML40 NS3+ MSIE3+ menu list
META HTML40 NS3+ MSIE3+ generic metainformation
MULTICOL NS3+ multiple column formatting
NOBR NS3+ MSIE3+ ensures that a line of text does not wrap to the next line
NOEMBED NS3+ alternative text for embedded objects
NOFRAMES HTML40 NS3+ MSIE3+ alternate content container for non frame-based rendering
NOLAYER NS3+ positioning content
NOSCRIPT HTML40 NS3+ MSIE3+ alternate content container for non script-based rendering
OBJECT HTML40 NS4+ MSIE3+ generic embedded object
OL HTML40 NS3+ MSIE3+ ordered list
OPTGROUP HTML40 option group
OPTION HTML40 NS3+ MSIE3+ selectable choice
P HTML40 NS3+ MSIE3+ paragraph
PARAM HTML40 NS3+ MSIE3+ named property value
PLAINTEXT NS3+ MSIE3+ text format
PRE HTML40 NS3+ MSIE3+ preformatted text
Q HTML40 MSIE4+ sets apart a quotation in text
S HTML40 NS2+ MSIE3+ strike-through text style
SAMP HTML40 MSIE3+ sample program output, scripts, etc.
SCRIPT HTML40 NS3+ MSIE3+ script statements
SELECT HTML40 NS3+ MSIE3+ option selector
SERVER NS3+ specifies server-side JavaScript statements
SMALL HTML40 NS3+ MSIE3+ small text style
SPACER NS3+ inserts a space in a document
SPAN HTML40 NS4+ MSIE3+ generic language/style container
STRIKE HTML40 NS3+ MSIE3+ strike-through text
STRONG HTML40 NS3+ MSIE3+ strong emphasis
STYLE HTML40 NS4+ MSIE3+ style info
SUB HTML40 NS3+ MSIE3+ subscript
SUP HTML40 NS3+ MSIE3+ superscript
TABLE HTML40 NS3+ MSIE3+ table
TBODY HTML40 MSIE4+ table body
TD HTML40 NS3+ MSIE3+ table data cell
TEXTAREA HTML40 NS3+ MSIE3+ multi-line text field
TFOOT HTML40 MSIE4+ table footer
TH HTML40 NS3+ MSIE3+ table header cell
THEAD HTML40 MSIE4+ table header
TITLE HTML40 NS3+ MSIE3+ document title
TR HTML40 NS3+ MSIE3+ table row
TT HTML40 NS3+ MSIE3+ teletype or monospaced text style
U HTML40 NS3+ MSIE3+ underlined text style
UL HTML40 NS3+ MSIE3+ unordered list
VAR HTML40 NS3+ MSIE3+ instance of a variable or program argument
در زبان اچتمل رنگها بر اساس ترکيب سه منبع نوري قرمز(Red)، سبز(Green) و آبي(Blue) تعريف ميشوند و هر منبع نوري شدتي بين 0 تا 255 را ميتواند داشته باشد. در اين استاندارد نور سفيد رنگي است حاصل از تداخل سه منبع نوري با شدت کامل يعني 255 و رنگ سياه حاصل تداخل سه نور با شدت 0 خواهد بود.(در واقع هر نقطه رنگي يا پيکسل بر روي صفحه مانيتور حاصل برخورد سه اشعه نوري قرمز، سبز و آبي ساخته شده توسط لامپ تصوير ميباشد.)
توجه داشته باشيد که مطابق تعريف ذکر شده امکان استفاده از 256 x 256 x 256 يا حدود 16 ميليون (16,777,216) رنگ مختلف وجود داشته و در شناسه هاي مختلف به يکي از سه روش زير قادر به تعيين رنگ متن يا ناحيه اي خواهيد بود:
استفاده از مقادير شدت نور در مبناي 16 با فرمت #RRGGBB که RR، GG, BB مقادير مبناي شانزده نورهاي قرمز، سبز و آبي ميباشند.
استفاده از مقادير شدت نور در مبناي 10 با فرمت rgb(RRR,GGG,BBB) که RRR، GGG, BBB مقادير مبناي ده نورهاي قرمز، سبز و آبي ميباشند.
استفاده از نامهاي استاندارد رنگها مانند red ، green و ... مطابق جدول انتهائي اين صفحه
جدول زير حاوي جندين مثال و رنگ ترکيبي در مبناي ده و شانزده ميباشد:
Color مبناي 16 (Color HEX) مبناي 10 (Color RGB) نام رنگ
#000000 rgb(0,0,0) Black
#FF0000 rgb(255,0,0) Red
#00FF00 rgb(0,255,0) Lime
#0000FF rgb(0,0,255) Blue
#FFFF00 rgb(255,255,0) Yellow
#00FFFF rgb(0,255,255) Cyan
#FF00FF rgb(255,0,255) Fuchsia
#FFFFFF rgb(255,255,255) White
#C0C0C0 rgb(192,192,192) Silver
مثالهائي از نحوه استفاده از رنگها در اچتمل:
<p style="color:#FF00FF">Hello!</p> استفاده از مقدار در مبناي 16
<p style="color:rgb(255,0,255)">Hello!</p> استفاده از مقدار در مبناي 10
<p style="color:Fuchsia">Hello!</p> استفاده از نام رنگ
body{ color: #444400; } تعيين رنگ نوشته المان body در Style sheet ها
body{ background-color:#FFFFFF; } تعيين رنگ زمينه صفحه در Style sheet ها
HR { color : #EEEECC;} تعيين رنگ خطوط افقي در Style sheet ها
a:link {color:#c00B09;} تعيين رنگ پيوندها در Style sheet ها
p {color:Yellow;} تعيين رنگ متون پاراگرافها در Style sheet ها
جدول رنگهاي پايه اچتمل بر اساس مقادير هگز
#EEEEEE #DDDDDD #CCCCCC #BBBBBB #AAAAAA #999999
#888888 #777777 #666666 #555555 #444444 #333333
#000000 #000033 #000066 #000099 #0000CC #0000FF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#CC6600 #CC6633 #CC6666 #CC3399 #CC66CC #CC66FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
جدول رنگهاي نامگذاري شده و مقادير معادل هگز آن به ترتيب حروف الفباء
Aliceblue
#F0F8FF Antiquewhite
#FAEBD7 Aqua
#00FFFF
Aquamarine
#7FFFD4 Azure
#F0FFFF Beige
#F5F5DC
Bisque
#FFE4C4 Black
#000000 Blanchedalmond
#FFEBCD
Blue
#0000FF Blueviolet
#8A2BE2 Brown
#A52A2A
Burlywood
#DEB887 Cadetblue
#5F9EA0 Chartreuse
#7FFF00
Chocolate
#D2691E Coral
#FF7F50 Cornflowerblue
#6495ED
Cornsilk
#FFF8DC Crimson
#DC143C Cyan
#00FFFF
Darkblue
#00008B Darkcyan
#008B8B Darkgoldenrod
#B8860B
Darkgray
#A9A9A9 Darkgreen
#006400 Darkkhaki
#BDB76B
Darkmagenta
#8B008B Darkolivegreen
#556B2F Darkorange
#FF8C00
Darkorchid
#9932CC Darkred
#8B0000 Darksalmon
#E9967A
Darkseagreen
#8FBC8F Darkslateblue
#483D8B Darkslategray
#2F4F4F
Darkturquoise
#00CED1 Darkviolet
#9400D3 Deeppink
#FF1493
Deepskyblue
#00BFFF Dimgray
#696969 Dodgerblue
#1E90FF
Firebrick
#B22222 Floralwhite
#FFFAF0 Forestgreen
#228B22
Fuchsia
#FF00FF Gainsboro
#DCDCDC Ghostwhite
#F8F8FF
Gold
#FFD700 Goldenrod
#DAA520 Gray
#808080
Green
#008000 Greenyellow
#ADFF2F Honeydew
#F0FFF0
Hotpink
#FF69B4 Indianred
#CD5C5C Indigo
#4B0082
Ivory
#FFFFF0 Khaki
#F0E68C Lavender
#E6E6FA
Lavenderblush
#FFF0F5 Lawngreen
#7CFC00 Lemonchiffon
#FFFACD
Lightblue
#ADD8E6 Lightcoral
#F08080 Lightcyan
#E0FFFF
Lightgoldenrodyellow
#FAFAD2 Lightgreen
#90EE90 Lightgrey
#D3D3D3
Lightpink
#FFB6C1 Lightsalmon
#FFA07A Lightseagreen
#20B2AA
Lightskyblue
#87CEFA Lightslategray
#778899 Lightsteelblue
#B0C4DE
Lightyellow
#FFFFE0 Lime
#00FF00 Limegreen
#32CD32
Linen
#FAF0E6 Magenta
#FF00FF Maroon
#800000
Mediumaquamarine
#66CDAA Mediumblue
#0000CD Mediumorchid
#BA55D3
Mediumpurple
#9370D8 Mediumseagreen
#3CB371 Mediumslateblue
#7B68EE
Mediumspringgreen
#00FA9A Mediumturquoise
#48D1CC Mediumvioletred
#C71585
Midnightblue
#191970 Mintcream
#F5FFFA Mistyrose
#FFE4E1
Moccasin
#FFE4B5 Navajowhite
#FFDEAD Navy
#000080
Oldlace
#FDF5E6 Olive
#808000 Olivedrab
#688E23
Orange
#FFA500 Orangered
#FF4500 Orchid
#DA70D6
Palegoldenrod
#EEE8AA Palegreen
#98FB98 Paleturquoise
#AFEEEE
Palevioletred
#D87093 Papayawhip
#FFEFD5 Peachpuff
#FFDAB9
Peru
#CD853F Pink
#FFC0CB Plum
#DDA0DD
Powderblue
#B0E0E6 Purple
#800080 Red
#FF0000
Rosybrown
#BC8F8F Royalblue
#4169E1 Saddlebrown
#8B4513
Salmon
#FA8072 Sandybrown
#F4A460 Seagreen
#2E8B57
Seashell
#FFF5EE Sienna
#A0522D Silver
#C0C0C0
Skyblue
#87CEEB Slateblue
#6A5ACD Slategray
#708090
Snow
#FFFAFA Springgreen
#00FF7F Steelblue
#4682B4
Tan
#D2B48C Teal
#008080 Thistle
#D8BFD8
Tomato
#FF6347 Turquoise
#40E0D0 Violet
#EE82EE
Wheat
#F5DEB3 White
#FFFFFF Whitesmoke
#F5F5F5
Yellow
#FFFF00 YellowGreen
#9ACD32
تگهاي اصلي (Basic Tags)
<html></html> ايجاد سندي اچتمل
<head></head> ايجاد اطلاعات شناسنامه اي سند مانند عنوان و ...
<body></body> ايجاد بدنه و قسمت قابل مشاهده سند اچتمل
تگهاي ناحيه Header
<title></title> تعيين عنوان سند
شناسه هاي مهم تگ body
<body bgcolor=?> تعيين رنگ زمينه بر اساس نام رنگ يا معادل هگز
<body text=?> تعيين رنگ نوشته بر اساس نام رنگ يا معادل هگز
<body link=?> تعيين رنگ پيوندها بر اساس نام رنگ يا معادل هگز
<body vlink=?> تعيين رنگ پيوندهاي بازديدشده بر اساس نام رنگ
<body alink=?> تعيين رنگ پيوند فعال بر اساس نام رنگ يا معادل هگز
تگهاي متن و نوشته
<pre></pre> نمايش متن هاي از قبل فرمت شده (preformatted)
<hl></hl> ايجاد بزرگترين سر تيتر
<h6></h6> ايجاد کوچکترين سر تيتر
<b></b> ايجاد متن توپر
<i></i> ايجاد متن مورب و ايتاليک
<tt></tt> ايجاد متن از نوع تله تايپي
<cite></cite> ايجاد citation معمولا ايتاليک
<em></em> نمايش تاکيد شده متن (توپر يا مورب)
<strong></strong> نمايش تاکيد شده متن (توپر يا مورب)
<font size=?></font> تعيين اندازه قلم از 1 تا 7
<font color=?></font> تعيين رنگ قلم بر اساس نام رنگ يا مقدار هگز آن
پيوندها
<a href="URL"></a> ايجاد پيوند
<a href="mailto:EMAIL"></a> ايجاد پيوندي از نوع mailto
<a name="NAME"></a> ايجاد پيوندي نامگذاري شده در يک سند
<a href="#NAME"></a> ارجاع به يک پيوند نامگذاري شده
فرمت دهي
<p></p> ايجاد پاراگرافي جديد
<p align=?> ترازبندي پاراگراف در سمت left, right, or center
<br> رفتن سر سطر جديد
<blockquote> </blockquote> عنوان سازي متن
<dl></dl> ايجاد فهرستهاي تعريفي
<dt> ايجاد عنصري از يک فهرست تعريفي
<dd> ايجاد شرح و توصيف يک عنصر فهرست تعريفي
<ol></ol> ايجاد فهرستهاي مرتب
<li></li> ايجاد يک قلم اطلاعاتي از يک فهرست
<ul></ul> ايجاد فهرستي نامرتب
<div align=?> تگي براي فرمت دهي بلوکي بزرگ از کدهاي اچتمل
المانهاي گرافيکي
<img src="name"> ايجاد يک تصوير
<img src="name" align=?> تراز بندي تصوير (left, right, center; bottom, top, middle)
<img src="name" border=?> تعيين ضخامت مرز يک تصوير
<hr> درج خطي افقي
<hr size=?> تعيين ارتفاع خط افقي
<hr width=?> تعيين عرض خط بر اساس مقدار واقعي يا درصدي
<hr noshade> ايجاد خطي افقي بدون سايه
جداول
<table></table> ايجاد جدول
<tr></tr> ايجاد رديف در جداول
<td></td> ايجاد خانه هاي جداول
<th></th> ايجاد عنوان ستونهاي يک جدول
شناسه هاي جداول
<table border=#> تعيين مقدار ضخامت مرزهاي يک جدول
<table cellspacing=#> تعيين فاصله بين خانه هاي جدول
<table cellpadding=#> تعيين فاصله بين محتواي يک خانه و مرزهاي آن
<table width=# or %> تعيين عرض جدول بر اساس پيکسل و يا درصدي
<tr align=?> or <td align=?> تعيين ترازبندي خانه هاي جدول (left, center, right)
<tr valign=?> or <td valign=?> ترازبندي عمودي خانه هاي جدول (top, middle, bottom)
<td colspan=#> تعيين تعداد ستون هائي که بايد يکي شوند.
<td rowspan=#> تعيين تعداد سطر هائي که بايد يکي شوند.
<td nowrap> باعث جلوگيري از شکسته شدن متن در خانه جدول ميشود.
فريمها
<frameset></frameset> تعريف و ايجاد مجموعه اي از فريمها
<frameset rows="value,value"> شناسه اي براي تعريف رديفهاي يک مجموعه فريم بر اساس اندازه واقعي بر حسب پيکسل و يا ابعاد درصدي
<frameset cols="value,value"> شناسه اي براي تعريف ستونها يک مجموعه فريم بر اساس اندازه واقعي بر حسب پيکسل و يا ابعاد درصدي
<frame> تعريف فريمي از مجموعه فريمها
<noframes></noframes> تعيين متني که بايد در صورت عدم پشتيباني مرورگر از فريمها بايد نمايش داده شود.
شناسه هاي فريمها
<frame src="URL"> تعيين سند اچتمل داخل فريم
<frame name="name"> تعيين نام براي يک فريم
<frame marginwidth=#> تعيين عرض حاشيه راست و چپ فريم
<frame marginheight=#> تعريف طول حاشيه بالا و پايين فريم بر اساس پيکسل
<frame scrolling=VALUE> تعيين اينکه فريمي از Scroll bar استفاده کند يا نه. مقادير ممکن: yes، no و auto (حالت پيش فرض)
<frame noresize> سبب جلوگيري از تغيير اندازه يک فريم ميشود.
فرمها
<form></form> ايجاد يک فرم
<select multiple name="NAME" size=?></select> ايجاد يک منوي کرکره اي و تعيين تعداد اقلامي که قبل از scrolling نمايش داده خواهند شد.
<option> تعيين هر يک از اقلام منو کرکره اي
<select name="NAME"></select> ايجاد منوي کرکره اي
<option> تعيين هر يک از اقلام منو کرکره اي
<textarea name="NAME" cols=40 rows=8></textarea> ايجاد الماني براي ورود متن در بيش از يک خط با تعيين تعداد سطر و ستون ناحيه
<input type="checkbox" name="NAME"> ايجاد چک باکسي با تعيين متن و عنوان آن
<input type="radio" name="NAME" value="x"> ايجاد راديو باتن با تعيين متن و عنوان آن
<input type=text name="foo" size=20> ايجاد الماني براي ورود متن با حداکثر يک سطر به همراه تعيين ابعاد بر اساس نويسه
<input type="submit" value="NAME"> ايجاد دکمه اي از نوع ارسال و Submit
<input type="image" border=0 name="NAME" src="name.gif"> ايجاد دکمه اي از نوع ارسال با کمک يک تصوير
<input type="reset"> ايجاد دکمه خلاصي !! يا Reset
سلام
با تشکر از کارلوس عزيز که در امر آموزش جديت خاصي به کار مي برند.
اميدوارم دوستان از اين مقالات به نحو احسن استفاده نمايند.
سلام متشکر از رامبد عزیز البته این آموزش ها به صورت مبتدی تا پیشرفته هستش که باید از اول دنبال کنن دوستان .
با تشکر
سلام دوست عزیز خواهش می‌کنم اگر ممکن هست درباره مقالاتی که می‌بینید هم نظر بدید من ممنون میشم .
من واقعا جاوا رو دوست دارم :mrgreen:
من واقعا جاوا رو دوست دارم :mrgreen:
سلام دوست عزیز .
پس شما هم میتوانید که در اینجا فعالیت کنید یا از آموزش هائی که من گذشته ام استفاده کنید .
متشکر.
:wink:
shahab630
13-08-2005, 04:19
مر29+1
عالي عزيز
در اولين فرصت مي خونمشون و بازهم نظر ميم البته با اجازه... :wink: [/url]
مر29+1
عالي عزيز
در اولين فرصت مي خونمشون و بازهم نظر ميم البته با اجازه... :wink: [/url]
سلام شهاب جان متشکر از نظر شما و ورود شما رو به انجمن برنام نویسی و کل اینجا تبریک و خوش آمد میگم به شما. :D :D :wink:
ازجدیتت خیلی خوشم میاد نستای عزیز
من برای یافتن پاسخ یکی از سواهام اینجا اومدم همون سوالی که گفته بودم چطور میشه توی اچ تی ام ال از چه دستوری برای متحرک کردن متن استفاده میشه .فعلا به جایی نرسیدم .بهر حال ممنون
double_n
17-08-2005, 17:01
نستا جان ممنون و خسته نباشی .
لطفا در مورد جاوا اسکریپت و وی بی اسکریپت مطلب بذارید .
سلام چشم نیما جان به زودی من باز آموزش میگذارم آخه این قسمت زیاد درخواست نداشت من هم دست نگاه داشته بودم فعلا ..متشکر از شما.
دوست عزیزی که فرمودید از جدیت من خوشتون میاد ..من باید بگم که من هدفم تا اونجا که بشه کمک به بچه ها هست .ولی به نظرم کمی جدیت و دیسیبرین در همچین انجمنی لازم هست .من هم از شما که انسان فهمیده ای هستین بسیار سپاسگزارم.
:D
سلام اسكريپت زير يه بازده عددي داره من مي خوام اونو با يه عدد مثلا 220 جمع كنه بعد نمايش بده بايد از چه كدي استفاده كنم؟
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
pelaake21
21-08-2005, 15:43
گفتن بيهوده نويسي نكنين
ولي من فكر مي كنم تشكر كردن بيهوده نويسي نيست
لا اقل يه دگمه ي تشكر اينجا بذارين...جدي ميگم
تا بشه به دوستاني كه تاپيك هاي اينجوري مي زنن فيدبك داد.
ممنون سعيد خان. خيلي وقت بود دنبال همچين مقا له اي مي گشتم.
سلام دوست عزیز .خواهش می‌کنم دوست من کسی نگفته که تشکر نکنید منتها دیگه زمانی که جائی دیدین که 10 نفر دارن تشکر می‌کنن به نظر من لازم نیست البته من خودم هم الکی تشکر نمیکنم اگه ببینم که واقعا نیاز به تشکر داره این کار را انجام میدم.
در مورد پیشنهاد شما هم باید بگم که شما در انجمن پیشنهادات و انتقادات باید این طرح رو مطرح کنید.
سپاسگزارم.
K053_LSH_KV90
21-08-2005, 21:50
Nesta, جان به اون سوال قبلي من پاسخ داده نشده همون سوال در مورد باز كردن چند صفحه همزمان ايا ميشه چنين كاري كرد يا من تخيلي فكر مي كنم!!!! راستي من قبلا هم گفته بودم انواع اقسام كد هاي جاوا رو پيدا كردم اما اينو اصلا نديدم چه برسه پيدا كنم!!!!
سلام جناب کوسه من سوال شما رو ندیدم میشه یک بار دیگه بفرمائین !!؟
و من راستی اینجا رو نفهمیدم یعنی چی ؟
اينو اصلا نديدم چه برسي پيدا كنم!!!!
:D
K053_LSH_KV90
07-09-2005, 15:32
قابل توجه دوستاني كه جاوا سرشون ميشه چه يكم و چه دوكم و البته قابل توجه نستاي عزيز و نيما جان
--------------------
اين نزديك به 3 ماه بود كه دنبال يه كد شبيه اين بودم خيلي از كد هاي عجيب غريبي پيدا كردم اما اينو جايي پيدا نكردم ....
تا اينكه امروز داشتم تو اچ تي ام ال اديتورم كه نسخه جديدش اومده گشت ميزدم ديدم كه اين كد رو داره اما به يه اسم ديگه
[شايد يكي از بچه هاي اين انجمن سووال و درخواست منو به سازنده برانامه گفتن و اون تو Ace html pro قرار داده :mrgreen: ]
اين همون كده كه خيلي خيلي خيلي خيلي خيلي سادست
-----------
اين يه تيكه تو تگ <head>
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
اين يه تيكه هم كه هرجا ميخوايم لينك رو قرار بديم ميزاريم
برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید
براي منم كه خيلي جالب بود شما رو نمدونم
[آخر خودم به داد خودم رسيدم :mrgreen: ]
double_n
07-09-2005, 20:45
SHARK_Chevanton جون من رفتم ببینم چی به چیه :wink:
سلام کوسه جان متشکر ، باید جالب باشه ، من که سرم خیلی شلوغ شده شما کمک کنید ،سپاسگزارم :D
--------------------------------------------------------------------------------
سلام
من به کمک شما احتیاج دارم که منو در اینمورد بخصوص کمک کنید. در جاوا معمولا میشه از تاریخ و ساعت ماشین استفاده کننده استفاده کرد برای تنظیم یا نمایش چیزهای بخصوط. من میخوام از یه تاریخ ثابت برای همه استفاده کنم. مثلا تاریخ گرینویچ. اگه بطف کنین و راهنمایی کنین ممنون میشم
توضیح:
1- تعریف تاریخ گرینویچ (یا دادن آدرس برای گرفتن آن)
2- استفاده از جایگزین
3- احضار عملگر مربوطه
4- تطبیق تاریخ با تعریف شده ها
5- باز شدن اتوماتیک یک پنجره
__________________
K053_LSH_KV90
14-09-2005, 16:48
دوستان من اون كدي رو كه اينجا معرفي كرده بودم رو يكم تغيرش دادم
نتيجه كا رو اينجا ببنيد
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
و نظرتون رو بگيد
double_n
14-09-2005, 22:58
کوسه جون دیدمش جالبه .
سلام آقای کوسه متشکر که اینجا هم راه میاندازید .سپاسگزارم.
vBulletin , Copyright ©2000-2024, Jelsoft Enterprises Ltd.