بایگانی

Archive for آوریل 2011

آموزش HTML بخش ۲


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

نکته‌: بعضی از تگ‌های استفاده شده در این آموزش در نسخهٔ جدید HTML دیگر جایی ندارند‌، و آن هم به دلیل استفاده از CSS در کنار HTML است‌. ولی آشنا شدن با آن‌ها می‌تواند کمک فراوانی به یاد‌گیری سریع‌تر CSS -که در آینده قصد بر آن داریم- کند‌.

انواع تیتر‌ها‌:

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

[bash]
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
<h1>Hello World</h1>
</body>
</html>
[/bash]

نتیجهٔ این کد برابر با تصویر زیر می‌باشد‌. همانطور که می‌بینید عبارت Hello World به صورت بزرگ نوشته شده است‌.


برای درک بهتر مقدار n در <Hn> از دو مقدار دیگر <h2><h3> به صورت زیر استفاده می‌کنم‌:

[bash]
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
<h1>Hello World</h1>
<h2>This is an HTML Document</h2>
<h3>Season 2<h3>
</body>
</html>
[/bash]

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

انواع نوشته‌ها‌:

  • Bold : برای نوشتن به صورت تو پر یا همان bold از تگ <b></b> استفاده می‌شود‌.
  • Italic : برای نوشتن به صورت مورب نیز از تگ<i></i> استفاده می‌شود‌.
  • Strike : برای نوستن به صورت رو خط دار از تگ <strike></strike> استفاده می‌شود‌.
  • Underline : برای نوشتن به صورت زیر خط دار از تگ <u></u> استفاده می‌شود‌.

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

[bash]
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
<h1>Hello World</h1>
<h3>This is an HTML Document <i>season #2</i></h3>
This is an free tutorial for <b>HTML</b> from <b><u>shahinism.com</u></b>
</body>
</html>
[/bash]

همانطور که می‌بینید توانستیم با تگ‌هایی ساده یک تایپوگرافی معقول ایجاد کنیم‌. تنها نکته‌ای که در مثال اخیر باید مورد توجه قرار گیرد‌، این قسمت است‌: <b><u>shahinism.com</u></b>همانطور که می‌بینید از دو تگ زیر خط و نوشتهٔ تو پر به صورت همزمان استفاده شده‌. ولی تگ‌ها از آخر به اول بسته شده‌.

موقعیت نوشته‌:

برای تعیین موقعیت نوشته‌ها نیز در HTML امکاناتی در نظر گرفته شده‌. که به تعدادی از آن‌ها اشاره می‌کنیم‌:

  • Center: برای وسط‌چین کردن نوشته استفاده می‌شود‌.
  • <br> : برای شکستن خط و شروع در خط جدید مورد استفاده قرار می‌گیرد‌.
  • <sub> و <sub> : که برای نمایش اندیس و توان مورد استفاده قرار می‌گیرد‌.

اکنون می‌خواهیم با کد‌هایی که یاد گرفتیم تغییرات دیگری را نیز در سند ایجاد کنیم‌:

[bash]
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
<center><h1>Hello World</h1></center>
<h3>This is an HTML Document <i>season <sub>#2</sub></i></h3>
This is an free tutorial for <b>HTML</b> from: <br><b><u>shahinism.com</u></b>
</body>
</html>
[/bash]


همانطور که در تصویر زیر می‌بینیم #۲ مقداری به پایین منتقل شده‌، هم‌چنین آدرس سایت نیز با توجه به اینکه در ادامهٔ خط نوشته شده‌، ولی پایین‌تر آمده‌. واضح‌ترین تغییر نیز در این مثال عبارت Hello World است که به وسط صفحه تغییر مکان داده‌.

تغییر قلم‌:

برای تغییر قلم نوشته (فونت‌) نیز می‌توانید از تگ فونت استفاده کنید‌. نمونه‌ای از استفاده از این قلم را در کد زیر ببینید‌:

[bash]
<html>
<title>Font Change</title>
</html>
<body>
Hi my friends <font face="tahoma" size=24 color=red>in this page we have 2</font> different font.
</body>
</html>
[/bash]

نتیجه‌ی مثال زیر را در تصویر زیر می‌بینیم‌:

لازم به ذکر است‌، مرور‌گر‌ها به صورت پیش‌فرض فونتی را برای نمایش نوشته در نظر می‌گیرند که با مراجعه به بخش تنظیمات هر مرورگر قابل تغییر است‌. فونت تعیین شده در کد بالا در صورتی که روی سیستم کاربر موجود باشد‌، نمایش داده می‌شود‌، در غیر این صورت از فونت پیش‌فرض استفاده می‌شود‌. در بخش آموزش CSS روشی از CSS3 را می‌آموزیم که این نقظه ضعف را پوشش می‌دهد‌.

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

آموزش HTML بخش ۱

آوریل 21, 2011 2 دیدگاه

HTML تشکیل شده از سر حرف کلمات Hyper Text Markup Language است‌. از این زبان برای طراحی صفحات وب استفاده می‌شود‌. در حقیقت حتی در صورت استفاده از زبان‌های برنامه‌نویسی PHP یا ASP و… صفحهٔ نهایی وب به صورت HTML به نمایش در می‌آید‌. در این دوره از آموزش قصد بر استفاده از این زبان برای طراحی صفحات ایستا داریم‌.
اکنون به چند نکتهٔ عمومی دربارهٔ زبان HTML می‌پردازم‌:

  • صفحات تولید شده با زبان HTML با پسوند .htm یا .html ذخیره می‌شوند‌.
  • در این زبان کوچک یا بزرگ بودن حروف مهم نمی‌باشد‌.
  • کلید‌هایی که در این زبان مورد استفاده قرار می‌گیرد‌، تگ نامیده شده و با <> مشخص می‌شود‌.
  • تگ‌ها به سه دستهٔ کلی تقسیم می‌شوند‌:
  1. تگ‌هایی مانند که می‌تواند در هر کجای صفحه به صورت انفرادی مورد استفاده قرار می‌گیرد‌.
  2. . تگ‌هایی که ابتدا و انتهای مشخصی دارند‌. مانند تگ که برای نمایش نام صفحه مورد استفاده قرار می‌گیرد‌. در این نوع تگ‌ها کلمات یا عناصری که قرار است در صفحه به نمایش در آید‌، بینشان نوشته می‌شود‌.
  3. دستهٔ سوم تگ‌هایی هستند که علاوه بر مشخص کردن ابتدا و انتهایشان‌، باید پارامتر‌هایی برایشان تعیین شود‌. مانند‌: . در رابطه با این تگ در ادامه بیشتر توضیح خواهم داد‌.

برای شروع کار‌، سعی می‌کنیم که یک صفحهٔ سادهٔ html ایجاد کنیم‌. پس ویرایشگر خود را باز کنید و با ادامهٔ مطلب همراه باشید‌.
همانطور که در ابتدای بخش گفتم‌، یک صفحهٔ HTML متشکل از تگ‌های متفاوتی است‌. برای شروع می‌خواهیم ابتدا و انتهای تگ‌هایمان را تعیین کنیم‌:

[html]
<html>
.
.
.
</html>
[/html]

این تگ‌ها محدودهٔ کد‌های یک صفحهٔ HTML را تعیین می‌کنند‌. به طور کلی یک صفحهٔ HTML از دو بخشه Head و Body تشکیل شده است‌. بخش Head مربوط به ابزار‌ها و شناسنامهٔ صفحهٔ وب ما می‌باشد‌. عموما تگ‌های استفاده شده در این بخش در صفحه نمایش داده نمی‌شود‌. از این تگ برای تعیین نام صفحه‌، کلمات کلیدی صفحه و یا بار گذاری ابزار‌های Javascript و یا دیگر ابزار‌ها مورد استفاده در صفحات HTML استفاده می‌شود‌. حال این بخش را به صفحهٔ ساخته شده‌مان اضافه می‌کنیم‌.

[html]
<html>
<head>
.
.
</head>
,
,
</html>
[/html]

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

[html]
<html>
<head>
<title>First HTML!</title>
</head>
</html>
[/html]

نتیجهٔ کار در مرورگر به صورت زیر نمایش داده می‌شود‌:

حالا می‌خواهیم‌، بخش دوم صفحه‌، یعنی بدنهٔ آن را تعیین کنیم‌. برای این کار به صورت زیر عمل می‌کنیم‌:

[html]
<html>
<head>
<title>First HTML!</title>
</head>
<body>
Hello World
</body>
</html>
[/html]

همانطور که می‌بینید تگ Body به سند HTMLمان افزوده شد‌. بر اساس گفته‌های گذشتهٔ من می‌دانیم که هر عنصر یا نوشته‌ای که بین این تگ قرار گیرد‌، در صفحهٔ نهایی نمایش داده می‌شود‌. ما در این‌جا پیغام Hello World را چاپ می‌کنیم‌.
همچنین باید اضافه کنم که تگ Body از نوع سوم تگ‌هایی است که در ابتدا معرفی کردم‌. یعنی می‌توان به پارامتر‌های آن مقدار دهی کرد‌. البته‌، در این کار اجباری نیست‌، ولی برای شروع کار بد نیست که این کار را انجام دهیم‌.

[html]
<html>
<head>
<title>First HTML!</title>
</head>
<body text="yellow" bgcolor="brown">
Hello World
</body>
</html>
[/html]

نتیجهٔ کار به صورت زیر است‌:

در اینجا ما به دو پارامتر text و bgcolor مقدار دهی کردیم‌. پارامتر text که رنگ زرد را در این کد به آن افزودیم‌، تعیین کنند رنگ متن موجود در تگ body می‌باشد‌. و تگ bgcolor نیز‌، که با رنگ قهوه‌ای تعیین شده‌، پس‌زمینه را برایمان رنگ‌آمیزی می‌کند‌! همچنین می‌توان برای تعیین رنگ در صفحات HTML از کد هگز به صورت #ff88ff نیز استفاده کرد‌. خوبی استفاده از این نوع کد این است که انتخاب بیشتری برای تعیین نوع رنگ‌ها در دستمان است‌.
نکته‌: لازم به ذکر است که برای دیدن نتیجهٔ کار‌، متن نوشته شده در ویرایشگر را با یک نام دلخواه برای مثال به صورت‌: test۱. html ذخیره کنید و با یک مرورگر نظیر Firefox فایل ساخته شده را باز کنید‌.
بخش اول آموزش در این‌جا به پایان رسید‌. منتظر ادامه آن باشید‌.

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

دورهٔ برنامه‌نویسی شاهینیسم (شروع از صفر)

آوریل 19, 2011 5 دیدگاه

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

بدون زیاده گویی می‌خواهم نحوهٔ انتخاب زبان‌ها و پیش‌نیاز‌های ساده‌ای که نیاز داریم را بیان کنم‌!

زبان‌های این دوره‌:

برای شروع کار برای اینکه می‌خواهم به کد نوشتن عادت کنیم‌، از HTML شروع می‌کنیم‌. درست‌! HTML یک زبان برنامه‌نویسی نیست‌، ولی خوب یاد می‌دهد که ساختار‌ها را درک کنیم و به کد نوشتن عادت کنیم‌! بتوانیم قوانین Syntax را به خاطر بسپاریم والخ‌. چیزی که آموزش می‌بینیم‌، HTML ۴ است‌، و پس از پایان این دوره یک نیم نگاهی هم به HTML ۵ می‌اندازیم تا بتوانیم برای آینده آماده باشیم‌. پس از یاد‌گیری HTML شروع به گذراندن دورهٔ CSS می‌کنیم تا بتوانیم ساختار پرونده‌های HTMLمان را بیشتر تحت کنترل بگیریم و پس از آن به سرغ جاوا اسکریپت می‌رویم‌. برای فعلا کافی‌است‌. ولی صد در صد بیشتر می‌شود‌. این‌قدر این دوره را ادامه می‌دهیم که حداقل بتوانیم حرفی برای گفتن در جامعهٔ برنامه‌نویسان ایرانی داشته باشیم‌!

پیش‌نیاز‌ها‌:

پیش‌نیاز‌هایی برای شروع دوره تعیین می‌کنم‌، که سلیقهٔ شما می‌تواند متفاوت از آن باشد‌. ولی به دلایلی که برای هر‌کدام می‌آورم دقت کنید شاید توانستم نظر شما را هم جلب کنم‌!

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

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

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

یک ویرایشگر انتخاب کنید‌. این مرحله ممکن است کمی گیج‌کننده‌تر از دیگر مراحل باشد‌. درست است که شروع دورهٔ ما با HTML است‌، و شما حتی با یک ابزار کذایی مثل notepad هم می‌توانید برایش کد بزنید‌. ولی انتخاب یک ویرایشگر قوی و یاد گیری تمامی سوراخ و سمبه‌هایش می‌تواند در آینده نجات دهنده باشد‌. اگر از لینوکس استفاده می‌کنید و یا قصد مهاجرت به لینوکس را دارید پیشنهاد من تازه‌کار‌، انتخاب VI یا Emacs است‌. VI انتخاب خوبی است و بسیار ساده و کاربردی است‌. آموزش‌های خوبی برای کار با آن در اینترنت می‌یابید مثل این‌. اما Emacs دنیای دیگری است‌. نمی‌توان اسمش را تنها ویرایشگر گذاشت‌. باور کنید‌، قولی است برای خودش‌. پیشنهاد می‌کنم برای آشنایی با آن این پست از پسرک را بخوانید‌. و برای یادگیری اصول اولیه‌اش به این مقاله از تکنوتاکس رجوع کنید‌. و در آخر برای داشتن یک صفحه تقلب کامل می‌توانید از این استفاده کنید‌، دو صفحه‌، خلاصه‌ای از یک دنیا‌!

اگر هنوز هم قصد دارید به ویندوز وابسته باشید‌، باز هم می‌توانید با قبول دردسر‌هایی از Emacs استفاده کنید‌! ولی پیشنهاد من در ویندوز استفاده از Notepad++است برای قدم‌های اول‌. شما راه‌تان را خودتان انتخاب کرده‌اید و بعد از این هم امید‌وارم بتوانید بیابیدش‌!

مشترک شاهینیسم شوید‌! دیگر توضیحی برای این قسمت ندارم‌. هر جور که می‌‌خواهید می‌توانید به شاهینیسم سر بزنید‌ و از به روز‌رسانی‌هایش با خبر شوید‌.

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

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

پنگوئن کوچولو 20 ساله شد‌!

آوریل 13, 2011 2 دیدگاه

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

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

از قرار‌، قراره که از 17‌ام تا 19‌ام آگوست‌، جشنی به همین منظور توی ونکوور کانادا برگذار بشه (‌از طرف سایت رسمی‌‌) امیدوارم جشن ایرانی‌اش رو هم ببینیم‌!