بایگانی

Archive for مه 2011

آموزش HTML بخش 4


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

پیوند یا لینک‌، امکان دسترسی و ارجاع آسان کاربر را به صفحات مختلف در سرتاسر وب و یا حتی در یک صفحه فراهم می‌کند. لذا نحوه‌ی استفاده‌ی درست از تگ‌های پیوند و ایجاد میانبر‌های مناسب می‌تواند، به کاربری آسان صفحه‌ی وب کمک زیادی کند!

عموما یک لینک در صفحه‌ی HTML ساختاری برابر با چیزی که در زیر می‌بینید دارد‌:

[html]
<a href="http://shahinism.com">Shahin’s personal weblog</a>
[/html]

همانطور که می‌بینید تگ A مختص ایجاد پیوند می‌باشد‌. همچنین برای تعیین مقصد لینک‌، از پارامتر href استفاده می‌شود. در اینجا لینکی به صورت Shahin’s personal weblog ایجاد کردیم‌! حال فرض کنید که می‌خواهیم، این لینک بر روی یک عکس اعمال شود‌، به طوری که پس از کلیک بر روی عکس‌، کاربر به سمت این وبلاگ راهنمایی شود‌. برای این کار از تگ a و image به صورت زیر استفاده می‌کنیم‌.

[html]
<a href="http://shahinism.com"><img src="1.jpg" alt="Shahin’s Blog" /></a>
[/html]

همانطور که می‌بینید‌، با مخلوط کردن این دو تگ به سادگی توانستیم بر روی یک عکس مقدار لینک مورد نظر را اعمال کنیم‌. شاید تا کنون دیده‌اید که بعد از کلید بر روی یک لینک به بخش خاصی از صفحه مثلا به وسط صفحه‌ی حاضر و یا حتی صفحه‌ی دیگر منتقل می‌شوید‌. این‌جاست که با مفهومی به نام Anchor یا لنگر آشنا می‌شویم‌. برای درک بهتر موضوع می‌توانید به این پست خوب در وبلاگ «‌با اینترنت‌» مراجعه کنید‌، که به صورت عملی در محیط وردپرس این مفهوم را آموزش داده‌. و حالا ما قصد داریم‌، که آن را از نظر کد بررسی کنیم‌:

برای این‌کار ابتدا باید مقصد را معین کنیم‌. لذا به صورت زیر عمل می‌کنیم‌:

[html]
<a name="middle"></a>
[/html]

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

[html]
<a href="#middle"></a>
[/html]

همانطور که دیدید کافیست که جلوی آدرس مقصد‌، اسم مقصد را بعد از یک # قرار دهیم‌. همچنین‌، در صورتی که بخواهید از صفحه‌ی دیگری به این لنگر در صفحه‌ لینک کنید‌، کافیست بعد از نوشتن آدرس صفحه‌، اسم لنگر را بعد از یک # وارد کنید‌.
حتما تا کنون متوجه شده‌اید که لینک‌ها در صفحه‌های مختلف رنگ‌های مختلفی دارند‌. و در برابر عمل‌های مختلف با تغییر رنگ واکنش نشان می‌دهند‌. برای تعیین این رنگ‌ها می‌توانید از پارمتر‌های Alink, Vlink در تگ body استفاده کنید‌، که به ترتیب تعیین کننده‌ی رنگ لینک‌های رویت شده‌، رنگ لینک‌های رویت نشده می‌باشند‌. نمونه‌ای از استفاده از این پارامتر‌ها را در نمونه‌ی زیر می‌بینید‌:

[html]
<body alink=yellow vlink=Red>
</body>
[/html]

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

[html]
<a href="http://shahinism.com&quot; tabindex=1>Shahinism</a>
<a href="http://google.com&quot; tabindex=2>Google</a>
[/html]

و اگر بخواهیم این قابلیت را به کاربر بدهیم که بتواند با کلید‌های کیبورد لینک مورد نظر را انتخاب کند‌، یا به عبارتی میانبری برای کیبورد تعیین کنیم به صورت زیر از تگ Accesskey استفاده می‌کنیم‌:

[html]
<a href="http://shahinism.com&quot; tabindex=1 accesskey=s>Shahinism</a>
<a href="http://google.com&quot; tabindex=2 accesskey=g>Google</a>
[/html]

در این کد کاربر می‌تواند با زدن کلید S به سایت شاهینیسم و کلید G به سابت گوگل برود‌. لازم به ذکر است که در مرورگر IE باید برای استفاده از این کلید‌ها از آن‌ها به صورت ترکیبی با کلید Alt استفاده شود‌.
نکته‌ی آخر این که اگر می‌خواهید برای لینک خود یک لیبل تعیین کنید می‌توانید از تگ title همانطور که برای عکس‌ها در دروس قبل استفاده می‌شد‌، استفاده کنید‌.

دسته‌ها:HTML, دوره برچسب‌ها:

راه اندازی بلوتوث در اسلکور


خوب بعد از مدتی غیبت‌، توی این وبلاگ می‌خوام یه آموزش کوچیک رو به اشتراک بگذارم‌. یکی از ابزار‌هایی که خیلی به درد PC می‌خوره و کمک زیادی به اشتراک فایل‌ها بین ابزار‌های مختلف می‌کنه بلوتوثه‌! من یه چند‌تایی از این دانگل‌های بلوتوث داشتم که همشون به مرور زمان خراب شدن‌. ولی خیالم راحت بود که توی اوبونتو این ابزار‌ها خیلی راحت‌، بعد از نصب به کار می‌افتن‌!

چند روز پیش که به لطف پسر‌دایی یکی از این دانگل‌ها البته سالمش رو صاحب شدم ( می‌گم به لطف چون مجانی بود ) خواستم Bluetooth Devices که توی منوی KDE دیده بودم رو باز کنم‌، دیدم که ای داد اخطار داد‌. مشکل سر این بود که Daemon مربوط به بلوتوث توی اسلکور فعال نشده بود‌. و خوب فعال کردنش کار خاصی نداره‌. کافیه به آدرس زیر بریم و با دستور دوم Daemon رو Executable کنیم‌ ( اجرایی بشه ) ، و با دستور سوم فعالش کنیم‌:

[bash]
cd /etc/rc.d
chmod +x rc.bluetooth
./rc.bluetooth start
[/bash]

حالا ممکنه مثل من بخواین که دیگه سیستم خود به خود هنگام لود‌، این Daemon رو فعال کنه‌، کافیه مثل قبل که این‌جا یاد دادم‌، کد‌های زیر رو داخل rc.local اضافه کنید‌:

[bash]
#start bluetooth
if [ -x /etc/rc.d/rc.bluetooth ]; then
/etc/rc.d/rc.bluetooth start
fi
[/bash]

و همچنین برای خاموش کردنش در هنگام شات‌داون سیستم‌،‌ کد‌های زیر رو به rc.local_shutdow :
[bash][/bash]
# Stop bluetooth
if [ -x /etc/rc.d/rc.bluetooth ]; then
/etc/rc.d/rc.bluetooth stop
fi
[bash][/bash]

دسته‌ها:اسلکور, حل مشکل برچسب‌ها: ,

آموزش HTML بخش 3


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

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

در دو فصل قبل با پارامتر‌هایی از تگ Body نظیر‌، text‌و bgcolor آشنا شدیم‌. پارامتر بعدی که امروز قصد معرفی آن را داریم‌، background است. همانطور که حتما از اسم این پارامتر متوجه شده‌اید‌، از آن به عنوان تعیین کننده‌ی تصویر به عنوان پس زمینه‌ی سند استفاده می‌شود‌. به نمونه‌ای از استفاده از این تگ در کد زیر توجه کنید‌:

[html]
<html>
<head>
<title>Shahin</title>
</head>
<body bgcolor=black background="pic1.jpg">
</body>
</html>
[/html]

مقدار این پارامتر را باید در «» قرار دهید‌. و توجه داشته باشید که در صورتی که عکس در پوشه‌ی دیگری غیر از پوشه‌ی سند HTML‌مان قرار داشت‌، باید حتما آدرس کاملی که به عکس اشاره می‌کند را به جای مقدار قرار داد‌.

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

[html]
<html>
<head>
<title>Shahin</title>
</head>
<body bgcolor=black>
<img src="pic1.jpg" title="My First Pic" alt="Here is a Picture" height=200 width=200 align=right>
</body>
</html>
[/html]

همانطور که می‌بینید ما به همراه این تگ از چند پارامتر اضافه نیز استفاده کردیم‌، که به غیر از پارمتر src مابقی اختیاری است‌، ولی در صورت موجود بودن می‌تواند به SEO در صفحه‌ی وب شما کمک کند‌. پارامتر اول یعنی src یا همان سورس‌، در این‌جا تعیین کننده‌ی محلی است که قرار است تصویر از آن‌جا بار‌گذاری شود‌ -‌چیزی است شبیه به مقدار پارمتر background که در بالا توضیح دادم‌. –
پارامتر بعدی یعنی title یک تولتیپ به عکس شما اضافه می‌کند و مقدار روبرویش را در آن می‌نویسد‌. و پارمتر سوم بعنی alt نیز در صورتی که به هر دلیلی مرورگر نتواند تصویر را بار‌گذاری کند‌، مقدار روبرویش را به جای عکس می‌نویسد‌. پارامتر‌های چهارم و پنجم یعنی height و width طول و عرض عکس را تعیین می‌کنند‌. در صورتی که هر دوی این پارامتر‌ها و یا یکی از آن‌ها را تعیین نکنیم‌، مرورگر از سایز اصلی تصویر برای آن مقدار استفاده می‌کند‌.
پارامتر آخر یعنی align جهت چینش تصویر را مشخص می‌کند‌. در مثال فوق تصویر راست چین شده است‌. برای درک بهتر این پارمتر به مثال زیر توجه کنید‌:

[html]
<html>
<head>
<title>Shahin</title>
</head>
<body text=white bgcolor=black>
<img src="pic1.jpg" title="My First Pic" alt="Here is a Picture" height=200 width=200 align=right>
Hi This is Text 1
<br>
This is Text 2
<br clear=right>
This is Text3
</body>
</html>
[/html]

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

دسته‌ها:HTML, دوره برچسب‌ها: ,