[آموزش html] همگام با مای بی بی ایران برای فراگیری html

[Pars]

درود

یادگیری HTML در کنار مای بی بی ایران

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

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


از امروز در کنار ما برای یادگیری html آماده شوید.

[Pars]

آموزش نخست:

HTML خلاصه شده ی چیست؟

Hyper Text Markup Language

Language به معنای یکی از زبان های برنامه نویسی.
Markup زبان بسیار ساده ای که از تگ ها استفاده می کند. (بدون ساختار خاصی است).
Text یک فایل متنی ساده است.
Hyper الگوی خطی ندارد (خطا در قسمتی از آن، باعث خطا در سایر قسمت ها نمی شود).


تگ ها:

Tag ها از 3 قسمت تشکیل شده اند:
1. یک علامت کوچکتر (>)
2. نام تگ
3. یک علامت بزرگتر (<)
نمونه:

<tagname>

تگ ها به صورت دوتایی استفاده می شوند و تشکیل عنصر (Element) را می دهند.
نمونه یک عنصر:

<tagname>content</tagname>

عنصر شامل:
1- (openning Tag) تگ آغازین
2- محتوا
3- (closing Tag) تگ پایانی

تفاوت تگ پایانی با آغازین داشتن علامت / قبل از نام تگ می باشد.

هر تگی که باز می شود باید در جایی بسته شود (البته موارد خاص هم دارد)

اولین نمونه :
برای کلفت نشان دادن متن یا bold کردن آن از تگ <b> استفاده می شود.
نوت پد ویندوز را باز کنید و متن زیر را در آن کپی کنید.

<b> MyBBIran </b>

سپس فایل را با پسوند html ذحیره کرده و آن را در مرورگر اجرا کنید. (نمونه : iran.html)

تمرین: متن مورد نظر خود را در این تگ نوشته و آن را در مرورگر خود ببینید.

[Pars]

تگ های مهم:

تگ <br />

کد:

<br />

برای ایجاد شکست خط (رفتن به خط بعدی)
نکته: جرو عناصر تهی (Empty Element) می باشد یعنی در انتهای بخش مورد نظر می آید.
در نسخه های قدیمی از <br> استفاده می شده است اما امروز از نمونه وارد شده در کد بالا استفاده می شود (به فاصله بین r و / دقت شود)

تگ <b> :
به معنای bold ، برای کلفت نمایش دادن متن.

<b> MyBBIran </b>

تگ <i> :
به معنای italic ، برای مورب نمایش دادن متن.

<i> MyBBIran </i>

تگ <u> :
به معنای under ، برای افزودن زیرخط به متن.

<u> MyBBIran </u>

تگ <strike> یا <s> :
به معنای strike ، برای نمایش متن به صورت خط خورده

تگ <sup> :
به معنای superscript ، برای نمایش متن به صورت بالانویس (حالت توان، بالاتر از متن عادی و کمی کوچکتر)

تگ <sub> :
به معنای subscript ، برای نمایش متن به صورت زیرنویس (حالت اندیس، پایین تر از متن عادی و کمی کوچکتر)

تگ <big> :
به معنای big ، برای نمایش متن به صورت بزرگ تر از متن های کناری

تگ <small> :
به معنای small ، برای نمایش متن به صورت کوچک تر از متن های کناری

نکته: استفاده از تگ ها به صورت مضاعف
همانطور که در توضیح تگ های big و small خواندید، این تگ ها متن داخل خود را نسبت به اطراف بزرگ تر یا کوچک تر می کنند. می توانید با وارد کردن چند مرتبه این تگ ها در داخل متن، آن را چندین باز بزرگ یا کوچک کنید.

نمونه:

کد:

<big>Here <big> is <big>MyBBIran</big> for </big> Persian Support</big><br />

تمرین: متن مورد نظر را در داخل تگ ها قرار داده و در مرورگر نتیجه کار خود را ببینید.

[Pars]

سه تگ مهم دیگر

تگ <blink>
متنی که بین این تگ قرار می گیرد به صورت چشمک زن در می آید (نکته: تمامی مروگر ها به جز IE از این تگ پشتیبانی می کنند)

<blink>MyBBIran</blink>

تگ <center>
برای وسط چین کردن متن

<center>MyBBIran</center>

تگ <hr />

کد:

<hr />

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


1- سایز خط (کلفتی)
می تواند با افزودن عبارت size کلفتی خط را تعریف کرد. (نکته: سایز بر اساس پیکسل می باشد)

کد:

<hr size=20 />

2- طول خط
با استفاده از width می توانید طول خط را تعریف کنید. هم بر اساس پیکسل هم درصدی از عرض صفحه بیان می شود.

کد:

< hr width=20 />
یا
< hr width=20% />

3- محل قرارگیری (تراز)
با استفاده از align می توانید محل قرارگیری خط را تعریف کنید. (سه متغیر left ، right ، center)

کد:

align=right

4- رنگ خط
به چند طریق می توانید رنگ برای خط خود تعریف کنید.
آ. نام رنگ، که باید آن ها را به خاطر بسپارید.
16 رنگ استاندارد:

کد:

Black , silver , gray , white , maroon , red , purple , fushia , green , lime , olive , yellow , navy , blue , teal , aqua

ب. کد رنگ (مبنای هگزادسیمال)
فرم کلی به صورت rrggbb# می باشد. برای نمونه 00000# رنگ سفید است.
پ. تابع rgp
این تابع به ترتیب سه رنگ قرمز، سبز و ابی را به عنوان مقدار می پذیرد. اعداد آن به صورت عدد صحیح یا درصد است. اعداد صحیح قابل قبول بین 0 و 255 است که 255 برابر 100% می باشد.

کد:

rgb(0%,63%,100%)
یا
rgb(0,160,255)

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

5- ترکیب ویژگی ها
به آسانی می توانید ویژگی های بیان شده برای خط را با هم ترکیب کنید.

کد:

<hr width=20% size=20 />

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

کد:

<hr  width=20%  color=red size=10 align=right />

[Pars]

تگ قراردادن تصویر

کد:

<img />

نمونه کامل آن به صورت زیر است که شامل لینک تصویر و توضیحی درباره آن است.:

کد:

<img src="MyBBIran.jpg" alt="Here is!" />

صفت های این تگ:
1- align : محل قرارگیری تصویر نسبت به متن و عناصر اطراف آن شامل مقادیر زیر:
عکس در سمت راست متن: right
عکس در سمت چپ متن : left
قسمت بالای عکس با خطی که در آن قرار دارد تراز می شود : top
میانه ی عکس با خطی که در آن قرار دارد تراز می شود: middle
قسمت پایینی عکس با خطی که در آن قرار دارد تراز می شود : bottom

2- alt : بیان توضیح برای تصویر، اگر تصویر بارگذاری نشود این متن به جای آن نمایش داده می شود. استفاده از alt در تگ تصویر امروزه ضروری می باشد.

3- height : ارتفاع تصویر بر اساس px یا درصد.

4- width : عرض تصویر بر اساس px با درصد.

5- border : ضخامت کادر عکس بر اساس px

6- vspace : فاصله تصویر از بالا و پایین با محیط.

7- hspace : فاصله تصویر از چپ و راست با محیط.

8- src : اصلی ترین صفت که لینک تصویر در آن قرار می گیرد.

[Pars]

تگ <a> :
برای ایجاد لینک استفاده می شود

نمونه:

کد:

<a href="http://community.mybbiran.com/thread-9269.html">Amuzesh html</a>

صفت ها: (بعدا در مورد صفت ها توضیحات کلی بیشتری داده می شود)
href :
اصلی ترین صفت که لینک مورد نظر در آن قرار می گیرد.

توضیح اضافه در مورد لینک ها:
1- لینک کامل (مطلق یا absolute URL) : که لینک به طور کامل نوشته می شود، مانند:

کد:

http://community.mybbiran.com

2- لینک ناقص (نسبی یا relative URL) : که در آن بخشی از آدرس نوشته می شود، مانند:

کد:

/images/smilies/angry.gif

** در لینک های نسبی از نوشتن دامنه صرف نظر می شود.
*** برای لینک دادن به سایت دیگر از لینک مطلق و برای لینک دادن به سرور خودی از لینک نسبی استفاده می شود.

Target :
نوع برخورد با صفحه لینک داده شده.

1- blank_ : باز کردن لینک در صفحه جدید.
2- self_ : باز کردن لینک در همان صفحه.
3- top_ : معمولا مانند self_ عمل می کند.


تمرین: لینک دار کردن عکس با استفاده از این آموزش و ارسال قبلی:

کد:

<a href="http://community.mybbiran.com/thread-9269.html" target="_blank"><img src="http://community.mybbiran.com/images/smilies/sad.gif" /></a>

[Pars]

صفت ها در html

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

صفت ها دارای دو قسمت هستند:

1- Name : نام صفت
2- Value : مقدار آن

بعد از نام صفت علامت مساوی (=) و بعد از آن مقدار صفت به صورتی که داخل گیومه (کوتیشن) قرار گرفته است نوشته می شود.

نمونه:

کد:

<p align=''right">Amuzesh</p>

در این نمونه
align ، نام صفت و right ، مقدار آن می باشد.

نکته: کوتیشن ها می توانند به صورت تکی یا دو تایی باشند: " یا '

برخی از صفت های عمومی:

class : برای نسبت دادن کلاسی که با استفاده از زبان CSS نوشته شده است.

dir : جهت گیری متن را تعیین می کند. دو مقدار rtl برای راست به چپ و ltr برای چپ به راست را می پذیرد.

title : توضیح ساده که با رفتن موس بر روی قسمت مورد نظر نمایش داده می شود. (به صورت tooltip)

style : برای تعیین قواعدی که به زبان CSS تعریف شده است استفاده می شود.

قبلا با برخی از صفت های عمومی و خصوصی مانند align و alt و height و width و border و vspace و hspace و target و src و href آشنا شده اید.

[Pars]

حالت کلی سند html

کد:

<! Doc Type>
نسخه html

<html>
html شروع سند

<head>
توضیحاتی درباره سند که در مرورگر نمایش داده نمی شود
</head>

<body>
هر چیزی که در مرورگر نشان داده می شود
</body>

</html>

نکته: با قرار دادن تگ title در قسمت header می توانید عنوان صفحه را برای مرورگر تعریف کنید.

کد:

<html>
<head>
<title>MyBBIran</title>
</head>
<body>
<p>MyBB Persian Support</p>
</body>
</html>

نکته ها:
هر صفحه html با یک تگ <html> آغاز و با تگ <html/> ، پایان می یابد.
عنصر <head> ، سر صفحه را مشخص می کند و می تواند شامل اطلاعاتی در مورد صفحه باشد.
عنصر <body> ، بدنه صفحه، اطلاعاتی که نمایش داده می شود.

[Pars]

چند تگ دیگر

<#H>
برای تعیین اندازه متن که به جای # عددی بین 1 تا 6 قرار می گیرد.

<em>
برای تاکید روی یک متن که اغلب ظاهر آن به ضورت مورب می باشد.

<strong>
مانند <br> برای کلفت نشان دادن متن

<ins>
مانند <u> برای زیر خط دار کردن متن

<del>
مانند <s> برای نمایش متن به صورت خط خورده

<pre>
برای اینکه مرورگر متن شما را دقیق به همان شکل نمایش دهد (رعایت فاصله بین کلمات و ...)
برای نمونه ممکن است شما بین دو واژه از چند فاصله (space) استفاده کنید. تا زمانی که متن داخل این تگ نباشد مرورگر تمامی فاصله ها را یک مورد در نظر می گیرد!

کد:

<pre>
درود،                  به مای بی بی ایران خوش آمدید
</pre>

[Pars]

تا اینجا تقریبا نیمی از HTML را آموخته اید.

ایجاد لیست نامرتب:

در این لیست ها ترتیب قرارگیری مهم نیست و تنها برای لیست کردن مطلب استفاده می شود.


از <li> و <ul> برای ایجاد لیست نامرتب استفاده می شود.

<ul> </ul> : لیست را ایجاد می کند.
<li> </li> : هر گزینه یا هر خط درون این قرار می گیرد.

کد:

<ul>
<li>GOZINE 1</li>
<li>GOZINE 2</li>
</ul>

در کنار هر نوشته یک دایره یا مربع قرار می گیرد. شما می توانید با دادن صفت به <li> نوع آن را مشخص کنید. (می توانید از صفت ها در <ul> نیز استفاده کنید)

صفت ها
Type : با استفاده از آن می توان نوع علامت کنار هر گزینه را تعریف کرد که مقادیر زیر را می پذیرد:
circle : دایره تو خالی
Disc : دایره تو پر سیاه رنگ
Square : مربع تو پر

کد:

<ul type='disc'>
<li>GOZINE 1</li>
<li type="Square">GOZINE 2</li>
<li>GOZINE 3</li>
<li>GOZINE 4</li>
<li type="circle">GOZINE 5</li>
<li>GOZINE 6</li>
</ul>

اگر نمونه بالا را در فایل تمرین خود انجام دهید متوجه می شود که هر گزینه ای که صفت ندارد (<li> دارای صفت نمی باشد) از صفت تعریف شده برای <ul> پیروی می کند.