آموزش HTML در صفحات وب

با آموزش HTML شما یاد خواهید گرفت چگونه از HTML در ساخت صفحات وب خودتان استفاده کنید.
یادگیری HTML بسیار ساده است و شما از آن لذت خواهید برد.

---

یک فایل HTML چیست؟

                   HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).

                   یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست

                   بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد

                   یک فایل HTML باید دارای پسوند html. یا html. باشد

                   یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

---

آیا می خواهید یکبار امتحان کنید؟

اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.

title of page


This is my first home page. This text is bold

فایل را تحت عنوان "mypage.htm"ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان  مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

---

مثال تشریح شده

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

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

---

پسوند htm. یا html. ?

هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.

---

به ویرایشگر های HTML توجه کنید:

شما می توانید به سادگی با استفاده از یک ویرایشگر WYSIWY("what you see is what you get") فایل های HTML را ویرایش کنید ، مثل FRONT PAGE,Claris Home Page یا Adob PageMill.
اگر شما می خواهید یک توسعه دهنده وب توانا باشید ما توصیه اکید می کنیم که شما از یک ویرایشگر متنی ساده استفاده کنید تا اصول اولیه HTML را یاد بگیرید.

---

پرسش و پاسخ:

س: پس از اینکه فایل HTML را ویرایش می کنم نمی توانم نتیجه را در مرورگر مشاهده کنم. چرا؟
ج:اطمینان حاصل کنید که فایل را با یک نام و پسوند صحیح ذخیره کرده اید مثل"C:\mypage.htm". همچنین اطمینان حاصل کنید که از همان نام هنگام باز کردن فایل در مرورگر استفاده کرده اید.
س:من سعی کردم فایل HTMLام را ویرایش کنم. اما تغییرات در مرورگرم نشان داده نشد. چرا؟
ج:مرورگر صفحه را کاشه(cach) کرده بنا بر این یک صفحه را دو بار نمی خواند. هنگامی که شما یک صفحه را تغییر می دهید مرورگر آن را نمی داند. از کلید REFRESH/RELOAD مرورگر استفاده کنید تا آن را مجبور کنید صفحه را دوباره بخواند.
س:از چه مرورگری باید استفاده کنیم؟
ج:شما می توانید تمام این آموخته ها را با مرورگرهای متعارف انجام دهید مثل Internet Explorer, Netscape,Mozilla و Opera. هر چند که تعدادی از مثال های مادر کلاسعناصر HTML

---

پرونده های HTML فایل های متنی هستند که با عناصر HTML ساخته شده اند.عناصر HTML با استفاده از برچسب های HTML تعریف می شوند.

---

برچسب های HTML

                   برچسب های HTML برای نشانه گذاری عناصر HTML استفاده می شوند

                   بر چسب های HTML توسط دو کاراکتر محاط می شوند

                   این کاراکتر های محاط کننده قلاب نامیده می شوند

                   بر چسب های HTML معمولا بصورت جفت می آیند ,

                   اولین برچسب دوتایی برچسب شروع و دومی برچسب پایانی است

                   متن های بین برچسب ابتدایی و انتهایی محتوای عناصر هستند

                   برچسبهای HTML به حروف کوچک و بزرگ حساس نیستند معادل است.

---

عناصر HTML

مثال HTML در صفحه قبل را بخاطر بیاورید. این یک عنصر HTML است:

This text is bold
عنصر HTML با یک برچسب شروع ، آغاز می شود:
محتوای عنصر HTML: This text is bold
عنصر HTML با یک برچسب پایانی تمام می شود:
هدف برچسب این است که تعریف کند عناصر HTML باید بصورت برجسته نشان داده شوند این نیز همچنین یک عنصر HTML است:

This is my first homepage.This text is bold

این عنصر HTML با برچسب آغازین

شروع و با برچسب پایانی

تمام می شود.
هدف برچسب این است که عناصر HTML را که محتوای بدنه HTML هستند تعریف کند.

چرا ما از برچسب هایی با حروف کوچک استفاده می کنیم؟

ما فقط گفتیم که برچسب های HTML حساس به حروف کوچک و بزرگ نیستند و همان معنی را می دهد.هنگامی که شما به وب گردی می پردازد، متوجه خواهید شد که بیشتر آموزش ها در مثال هایشان از حروف بزرگ برچسب های HTML استفاده می کنند.ما همیشه از برچسب های حروف کوچک استفاده می کنیم. چرا؟
اگر شما می خواهید خود را برای نسل های بعدی HTML آماده کنیدشما باید شروع کنید  و از برچسبهای حروف کوچک استفاده کنید.کنسرسیوم شبکه گسترده جهانی (W3C) در نظریه HTML4 خود برچسب های حروف کوچک را توصیه کرده و XHTML(نسل بعدی HTML) برچسبهای حروف کوچک را خواستار شده است.

---

عناصر برچسب:

برچسبها خود می توانند شامل عناصری باشند ، عناصر می توانند اطلاعات اضافی در باره عناصر HTML در صفحه شما را فراهم کنند.این برچسب عنصر بدنه را در صفحه شما معرفی می کند:

با اضافه کردن عنصر شما می توانید به مرورگر بگویید که رنگ پس زمینه شما باید قرمز باشد مثل این:
این برچسب یک جدول HTML را معرفی می کند:. با اضافه کردن عنصر حاشیه شما می توانید به مرورگر بگویید که جدول نباید هیچ لبه و حاشیه ای داشته باشد:
عناصر همیشه در یک زوج نام/مقدار می آیند، مثل این: نام="مقدار"
عناصر همیشه به برچسب شروع عناصر HTML اضافه می شوند

---

حالتهای کتیشن ، 'قرمز' یا "قرمز"؟

محتوای عناصر باید همیشه در کتیشن ها محدود شوند ، از هر دو حالت کتیشن و  دوبل کتیشن می توان استفاده کرد ولی استفاده از دوبل کتیشن ها متداول تر است. در بعضی موقعیت های نادر مثل هنگامی که محتوای عناصر خود دارای کتیشن هستند  لازم است که از تک کتیشن استفاده کنیم: 'Name='john "shotgun" Nelson  های پیشرفته به آخرین نسخه مرورگرها نیاز دارند. برچسب های پایه HTML

---

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

---

مثالها

ساده ترین Html
این مثال ساده ترین نمونه html است که در آن، از کمترین برچسب ممکن، استفاده شده است. در این مثال جمله نوشته شده درون برچسب body، نمایش داده می شود. 

پاراگراف ساده
این مثال نشان می دهد، که نوشته داخل برچسب پاراگراف، چگونه نمایش داده می شود.

(مثالهای بیشتر، در انتهای این صفحه آمده است)

---

 سر تیتر ها

سر تیترها با برچسب های

تا

معرفی می شوند.

بیانگر بزرگترین سرتیتر  و

بیانگر کوچکترین سر تیتر است. HTML بطور خودکار فضای خالی اضافی  به قبل و بعد از سر تیترها اضافه می کند.

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

---

پاراگراف ها

پاراگراف ها با برچسب

معرفی می شوند.HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.

This is a paragraph

This is another paragraph

---

پرش به خط بعد

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

---

توضیحات در HTML

برچسب توضیحات برای وارد کردن توضیحات در منبع کد HTML استفاده می شود.توضیحات توسط مرورگرها نادیده گرفته می شوند. شما می توانید از توضیحات برای تشریح کد های خود استفاده کنید که می تواند به شما هنگامی که در آینده کد منبع خود را ویرایش می کنید کمک کند.

توجه کنید که شما بعد از باز کردن براکت به علامت تعجب نیاز دارید اما قبل از بستن نیاز ندارید.

---

نکات پایه ای - اطلاعات مفید

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

مقداری اطلاعات اضافی

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

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

نوشته شوند.نسخه بعدی HTML اجازه نخواهد داد که هیچ برچسب پایانی را جا بیندازید.HTML بطور خود کار یک خط خالی اضافی قبل و بعد از برخی عناصر اضافه می کند مثل قبل و بعد از پاراگراف و قبل و بعد از سر تیتر ها.ما از یک خط افقی (برچسب

---

) برای جدا کردن بخش های مختلفدرسمان استفاده کرده ایم.

---

مثالهای بیشتر

پاراگرافهای بیشتر
این مثال رفتار برچسب پاراگراف را با نمایش چند نمونه از آن، نشان می دهد.

سر خط
با استفاده از برچسب سر خط، به ابتدای خط بعد می رویم. این مثال رفتار این برچسب را نشان می دهد.

مشکلات نمایش
با این مثال، متوجه می شوید، در صورتی که از برچسبها استفاده نکنید، صفحه بندی شما، نادیده گرفته می شود.

سر فصل
در این مثال طریق متمایز کردن جملات سر فصل را می بینید.

سر فصل در وسط خط
این مثال نشان می دهد که چگونه می توان،محل نمایش جمله، در خط را تعیین کرد.

خط افقی
این مثال روش نمایش یک خط افقی را نشان می دهد.

توضیحات مخفی
گاهی، نیاز به نوشتن توضیحی درباره html خود دارید. این توضیح باید در حالت نمایش دیده نشود. این مثال روش نوشتن چنین متن هایی را، داخل html، نشان می دهد.

رنگ زمینه
می توانید رنگ زمینه html خود را تعیین کنید. این مثال را ببینید.

---

برچسب های پایه

برچسب ها

توضیحات

یک پرونده HTML را معرفی می کند

بدنه پرونده را معرفی می کند

to

سر تیتر 1 تا 6 را معرفی می کند

یک پاراگراف را معرفی می کند

یک خط خالی را معرفی می کند

---

یک خط افقی را معرفی می کند

توضیحات را معرفی می کند

قالب بندی متن HTML

---

 Html، برچسبهای زیادی برای قالب بندی متن، مانند برچسب نمایش برجسته و یا برچسب مورب، دارد. در زیر مثالهای زیادی برای شما وجود دارد:

---

مثالها

نوع نمایش متن
در این مثال، نمایشهای گوناگون متن را می بینید.

قالب بندی پیش فرض
به کمک برچسب pre، قالب بندی اولیه متن خود را(شامل فاصله ها و سرخط ها)، حفظ کنید.

برچسبهای "خروجی کامپیوتری"
نوشته های کامپیوتری، حالتهای خاصی دارند که می توان به کمک برچسبها، متن نوشته شده را به آن حالتها نمایش داد. مثال را ببینید.

آدرس
برچسب address، حالت خاص نمایش آدرس را به متن ما می دهد. ببینید.

مخفف و مترادف
اگر بخواهیم مخفف و یا مترادف یک کلمه را در متن نشان دهیم چه می کنیم؟ مثال را ببینید.

سروته   هتورس
مثال زیر نشان می دهد که چگونه می توان متن نوشته شده را سروته نشان داد.

نقل قول
نقل قول در متن، با توجه به اینکه کوتاه یا بلند باشد، به صورت های مختلف نشان داده می شود. این مثال را ببینید.

متن حذف و یا اضافه شده
برای نمایش کلمات حذف و یا اضافه شده به متن اصلی، مثال را ببینید.

---

چگونه منبع HTML را ببینیم?

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

---

برچسب های قالب بندی متن

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

برچسب های خروجی کامپیوتر

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

برچسب های نقل قول ، کتیشن و توضیحات

برچسب ها	توضیحات
	یک کلمه مخفف را معرفی می کند
	یک سرنام را معرفی می کند
	یک عنصر آدرس را معرفی می کند
	جهت متن را معرفی می کند
	یک کتیشن بلند را معرفی می کند
	یک کتیشن کوتاه را معرفی می کند
	نقل قول را معرفی می کند
	یک عبارت توضیحی را معرفی می کند