آموزش HTML بخش آخر‌: معرفی W3Schools

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

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

پوسته Simplo-shahinism برای وردپرس

از جمله امکاناتی که به این پوسته اضافه کردم‌، استفاده از فونت Iranian SansZ هست که همونطور که توی وبلاگ خودم می‌بینین تونسته جایگزین خوبی برای Tahoma باشه. همچنین عناوین مطالب نیز با فونت Koodak نمایش داده می‌شود‌. به اشتراکش می‌گذارم که حس اشتراک گذاریم رو (‌!) ارضا کنم‌!

خوشحال می‌شم اگر استفاده کردید و لذت بردید یه خبر هم به من بدید که یه کم ذوق کنم‌! و دیگر دوستان هم نتیجهٔ کار رو روی وبلاگ‌های مختلف ببینن‌!

لینک راهنمای استفاده

لینک دانلود (tar.gz)

آموزش HTML بخش 4

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

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

<a href="http://shahinism.com">Shahin's personal weblog</a>

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

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

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

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

<a name="middle"></a>

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

<a href="#middle"></a>

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

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

<body alink=yellow vlink=Red>

</body>

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

<a href="http://shahinism.com" tabindex=1>Shahinism</a>

<a href="http://google.com" tabindex=2>Google</a>

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

<a href="http://shahinism.com" tabindex=1 accesskey=s>Shahinism</a>

<a href="http://google.com" tabindex=2 accesskey=g>Google</a>

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

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

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

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

cd /etc/rc.d

chmod +x rc.bluetooth

./rc.bluetooth start

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

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

و همچنین برای خاموش کردنش در هنگام شات‌داون سیستم‌،‌ کد‌های زیر رو به rc.local_shutdow :

bash

Stop bluetooth

if [ -x /etc/rc.d/rc.bluetooth ]; then

/etc/rc.d/rc.bluetooth stop

fi

bash

آموزش HTML بخش 3

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

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

<html>

<head>

<title>Shahin</title>

</head>

<body bgcolor=black background="pic1.jpg">

</body>

</html>

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

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

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

<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>

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

<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>

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