خبر جدید : به زودی آموزش HTML قرار میگیرد

[mohammadreza_bnd]

سلام دوستان عزیز .
طی گفتوگوی من با وحید ( مدیر کل سایت قالب سبز ) به دلیل درخواست شما کاربران عزیز من از آقای وحید خواهش کردم که در این تالار گفتمان یک موضوع در مورد آموزش کد html بسازه و بعد منو وحید و مهدی از این به بعد به شما دوستان عزیز کد html آموزش بدیم .
با آموزش HTML شما یاد خواهید گرفت چگونه از HTML در ساخت صفحات وب خودتان استفاده کنید.
یادگیری HTML بسیار ساده است و شما از آن لذت خواهید برد
این آموزش ها رایگان میباشند و فقط و فقط به خاطر شما دوستان عزیز در تالار گفتمان سایت قرار می گیرد .

[black_Sky]

آموزش قسمت 1

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

شما به یک ویرایشگر متن نیاز دارید. در ویندوز شما می توانید از برنامه Notepad استفاده کنید. از هر نرم افزار ویرایش متن دیگری استفاده کنید اما این نکته را در نظر داشته باشید که نرم افزار WordPad که در ویندوز وجود دارد و نرم افزارهایی مانند Microsoft Office Word و امثال آن برای نوشتن کدهای HTML مناسب نیستند چون در هنگام ذخیره کردن متن این نرم افزارها کدهایی را به آن اضافه می کنند.
نرم افزار Notepad را می توانید از طریق منوی استارت در قسمت Accessories پیدا کنید یا از طریق فرمان Run با تایپ notepad در کادر Open و فشار دادن دکمه Enter.
شما به یک مرورگر وب به انتخاب خود نیاز دارید. می توانید از Microsoft Internet Explorer استفاده کنید که با ویندوز نصب می شود یا از Opera, Mozilla Firefox و نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند.
بهتر است صفحاتی را که می نویسید با چند مرورگر آزمایش کنید. زیرا در HTML قسمتهایی وجود دارد که مختص به یک مرورگر خاص است و با سایر مرورگرها کار نمی کند.
شما به جایی برای ذخیره کردن متن خود دارید که می تواند جایی روی هارد دیسک شما، یک فلاپی دیسک یا یک سرور باشد. البته شما برای استفاده از HTML نیاز ندارید حتماً به اینترنت متصل باشید، شما می توانید با استفاده از یک مرورگر وب در کامپیوتر خود از HTML استفاده کنید.
برای ذخیره کردن فایلی که با Notepad نوشته اید کافی است از منوی File گزینه Save As را انتخاب کرده و مسیری را برای ذخیره فایل انتخاب کنید و در کادر File Name در پایین پنجره Save As نام فایل را با پسوند html بنویسید. در آخر هم دکمه Save را کلیک کنید.
خوب دوستان براي شروع ابتدا :

بهتره از برنامه ++notepad را دانلود كنيد
لينك
رمز:www.p30download.com

[black_Sky]

[COLOR=#FF00</B>00]آموزش قسمت 2[/COLOR]

در اينجا مي خواهيم به ساختار شناسه ها يا همان تگها (tag) در HTML بپردازيم. يک تگ هميشه با علامت کوچکتر رياضي يعني اين علامت > آغاز مي شود و با علامت بزرگتر < به پايان مي رسد. مثلاً تگي که باعث ايجاد زيرخط کلمات مي شود اينطور نوشته مي شود: <U> اين علامت را قبل از متني که مي خواهيم زير آن خط کشيده شود قرار مي دهيم. به اين تگ ، تگ ابتدايي (Opening tag) مي گويند، که عملياتي را که شما مي خواهيد آغاز کنيد شروع مي کند. به منظور پايان دادن به زيرخط بايد از يک تگ پاياني استفاده کنيد. يک تگ پاياني با اين علامت شروع مي شود: /> بقيه تگ مانند تگ ابتدايي مي باشد. براي درک بهتر اين مطلب به مثال زير توجه کنيد:

کد: انتخاب همه

Tags and their position

اگر بخواهيد متن بالا را با زيرخط در مرورگر خود ببينيد بايد آنرا مطابق خط روبرو در ويرايشگر متن خود بنويسيد:

کد: انتخاب همه

<u>tags and their position</u>

نتيجه را به اين صورت مي بينيد:

Tags and their position

در HTML همه تگها به يک تگ پاياني نياز ندارند. براي مثال تگي که براي وارد کردن عکس استفاده مي شود از اين قبيل تگهاست، که به اين صورت مي باشد:

کد: انتخاب همه

<img src="myimage.gif">

البته بعداً در مورد اين تگ توضيح خواهيم داد در اينجا فقط براي مثال اين تگ را آورديم. موارد ديگري هم با اين وضعيت وجود دارند مثلاً <br> که براي رفتن به خط بعدي استفاده مي شود، <hr> که براي ايجاد يک خط افقي به کار مي رود و <p> که براي رفتن به پاراگراف بعدي استفاده مي شود.

در ضمن نياز نيست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً <P> همان <p> است. البته در نسخه هاي جديدتر HTML توصيه مي شود کدهاي HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامي است. فضاي خالي هم بين تگها تأثيري ندارد. مثلاً :

کد: انتخاب همه

<u>	    متن زيرخط دار		</u>

کد بالا همان نتيجه اي را مي دهد که کد زير دارد:

کد: انتخاب همه

<u>متن زيرخط دار</U>

به اين طريق هم اگر نوشته شود فرقي نمي کند:

کد: انتخاب همه

<u>
متن زيرخط دار
</u>

قالب پايه اي يک فايل HTML مانند زير است. ببينيد مي توانيد کاري را که تگهاي اين کد انجام مي دهند حدس بزنيد؟ البته همه آنها را بعداً توضيح مي دهيم.

کد: انتخاب همه

<html>
<head>
<title>html قالب اصلي</title>
</head>
<body>
هر چيزي که اينجا قرار گيرد در صفحه شما قابل ديدن است
</body>
</html>

براي درک بهتر اين قسمت سعي کنيد تگها را به صورت جفتي در نظر بگيريد (از جايي که باز مي شوند تا جايي که بسته مي شوند) اولين تگ <html> است که علامت شروع يک متن HTML است و تگ پاياني آن <html/> است که همانطور که ممکن است حدس زده باشيد نشانه پايان متن HTML است. هر چيزي در HTML بايد بين اين دو تگ قرار گيرد. مانند متن، ديگر تگها، عکسها و... چون اين دو تگ نشان دهنده آغاز و پايان صفحه شما هستند.

تگ بعدي <head> است. اين تگ مشخص کننده بخشي است که شما بايد عنوان صفحه، کلمات کليدي، و ديگر توضيحات خود براي اين صفحه را در آن قرار دهيد. اين بخش با <head/> به پايان مي رسد. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که با TITLE مشخص مي شود.

تگ <title> به شما اجازه مي دهد براي صفحه خود يک عنوان برگزينيد. اين قسمت مورد استفاده موتورهاي جستجو قرار مي گيرد و همان متني است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده مي شود. تا هنگامي که اين تگ در قسمت BODY قرار نگيرد در متن شما نشان داده نمي شود. براي پايان دادن به تگ عنوان از اين تگ استفاده مي شود: <title/> در مثال بالا عنواني که براي صفحه نشان داده مي شود قالب اصلي HTML است.

تگ <body> بخشي را آغاز مي کند که در صفحه مرورگر شما به نمايش در مي آيد. اين قسمت جايي است که ما بايد کار اصلي خود را در آن انجام دهيم. براي پايان دادن به اين تگ از <body/> استفاده مي کنيم. در مثال بالا متني که در صفحه مرورگر ديده مي شود به صورت زير است (البته در اينجا براي نوشته زير رنگ و فونت نيز انتخاب شده که در قسمتهاي بعد به آنها خواهيم پرداخت) :

کد: انتخاب همه

هر چيزي که اينجا قرار گيرد در صفحه شما قابل ديدن است

چيزي که در اينجا مي بينيم متني است که به صورت ساده نوشته شده و در طرف چپ صفحه قرار دارد.

در درس بعد در مورد چگونگي کار کردن با متنها بحث مي کنيم.[/b]

[black_Sky]

آموزش قسمت 3

در این درس به کار با متنها می پردازیم. ابتدا با این تگ شروع می کنیم:
1- <B> این تگ باعث می شود کلماتی که بین این تگ و تگ پایانی آن قرار دارند به صورت پر رنگ و بولد (Bold) دیده شوند. به مثال زیر توجه کنید:

کد: انتخاب همه

<b>متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود</b>

مثال بالا به صورت زیر دیده می شود:
متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود
بیایید با تگهای دیگری ادامه دهیم:
------------------------------------
2- زیرخط (Underline):

کد: انتخاب همه

<u>این متن با زیر خط مشاهده می شود</u>

این هم نتیجه:
این متن با زیر خط مشاهده می شود
---------------------------------------
3- حروف کج (Italic):

کد: انتخاب همه

<i>این متن به صورت مورب دیده می شود</i>

و نتیجه به این صورت است:
این متن به صورت مورب دیده می شود
------------------------------------------

5- وسط چین:

کد: انتخاب همه

<center>این متن در وسط خط نوشته می شود</center>

نتیجه کد:

این متن در وسط خط نوشته می شود

-------------------------------------------------------------
شما می توانید بیشتر از یک فرمان را برای یک متن اجرا کنید. مثلاً وقتی که می خواهید متنی به صورت پر رنگ و کج نوشته شود. برای این کار هر دو تگ ابتدایی را برای متن در ابتدای آن و تگهای پایانی را در جایی که می خواهیم پایان پر رنگی و کجی متن باشد قرار می دهیم.

با این مثال توجه کنید:

کد: انتخاب همه

<b><i>این متن به صورت کج و پر رنگ دیده می شود</i></b>

نتیجه هم به این صورت دیده می شود:

این متن به صورت کج و پر رنگ دیده می شود

آیا ترتیب قرار گرفتن تگهای پایانی مهم است؟ در پاسخ باید گفت در مثال بالا خیر، اما مواردی وجود دارد که ترتیب قرار گرفتن تگها مهم است مثلاً قرار گرفتن تگ پایانی <HTML/> قبل از <BODY/> اشتباه است. شما با تمرین و تجربه می توانید این نکته را فرا بگیرید. شما می توانید برای جلو گیر از اشتباه HTML را به صورت زیر بنویسید:

کد: انتخاب همه

<b>
	  <i>
		  این متن به صورت پر رنگ و کج دیده می شود
	   </i>
</b>

اما این روش خسته کننده است. در اینجا مهم نیست تگها به چه صورت باز و بسته شوند. اما نکته مهمی که باید در نظر داشته باشید این است که متنها تحت تأثیر تگهایی که قبل از آنها باز شدهاند
و بسته نشده اندقرار می گیرند. تأثیر یک تگ تمام می شود وقتی که تگ بسته شود.

مثال زیر را در نظر داشته باشید:

کد: انتخاب همه

<b><i><u>این متن پر رنگ، کج و دارای زیرخط است</u></i></b>

این نتیجه را به ما می دهد:

این متن پر رنگ، کج و دارای زیرخط است

اما این یکی:

کد: انتخاب همه

<u><i><b>این متن پر رنگ، کج و دارای</b></i>زیرخط است</u>

این نتیجه را به ما می دهد:
این متن پر رنگ، کج و دارایزیرخط است
همان طور که دیدید متن بولد و ایتالیک زودتر از متن زیرخط دار به پایان رسید و این به این دلیل است که تگهای پایانی بولد (<B/>)و ایتالیک (<I/>) زود تر نوشته شدند و انتهای متن فقط توسط تگ زیرخط (<U/>) تحت تأثیر قرار دارد.

متنها به صورت پیش فرض در سمت چپ صفحه به نمایش در می آیند. اما با استفاده از <CENTER> می توان آنها را در وسط صفحه به نمایش در آورد. این تگ را هم می توان با دیگر تگها ترکیب کرد و نتایج جابی گرفت. به مثال زیر توجه کنید:

کد: انتخاب همه

<center><b><i>به این مثال توجه کنید</i></b></center>

و این هم نتیجه آن:

به این مثال توجه کنید

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

[GAZ]

درود
من نمی دونم این آموزش html که گذاشتی چه ربطی به این بخش از انجمن داره !؟ این بخش اطلاعیه های سایت هست ! بهتر نبود بخشی به نام ( آموزش برنامه نویسی ) درست می کردید و زیره اون بخش مباحثی هم چون ( آموزش html ، آموزش css و ... ) قرار می دادید ؟

[black_Sky]

درود
من نمی دونم این آموزش html که گذاشتی چه ربطی به این بخش از انجمن داره !؟ این بخش اطلاعیه های سایت هست ! بهتر نبود بخشی به نام ( آموزش برنامه نویسی ) درست می کردید و زیره اون بخش مباحثی هم چون ( آموزش html ، آموزش css و ... ) قرار می دادید ؟

آخ شرمنده بزودي انتقال داده ميشود