مدرسه HTML

بسم الله الرحمن الرحیم

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

فهرست:

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

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

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

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

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

پرسش و پاسخ:

                                                                                                                                                                   برچسب های HTML 

                                                                                                                                                                                عناصر HTML 

                                                                                                                                                                            عناصر برچسب 

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

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

سر تیتر ها 

پاراگراف ها 

پرش به خط بعد 

توضیحات در HTML 

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

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

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

برچسب HTML 

برچسب DOCTYPE 

برچسب Body 

برچسب h1-h6 

برچسب p 

برچسب Br 

برچسب Hr 

برچسب Comment 

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

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

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

                                                                                                                                          برچسب های TT,I,B,BIG,SMALL 

                                                                                                 برچسب های em,strong,dfn,code,samp,kbd,var,cite 

                                                                                                                                                              برچسب های sub,sup 

                                                                                                                                                                                 برچسب ins 

                                                                                                                                                                                 برچسب del 

                                                                                                                                                                        برچسب s,strike 

                                                                                                                                                                                    برچسب u 

                                                                                                                                                                               برچسب pre 

                                                                                                                                                                             برچسب abbr 

                                                                                                                                                                     برچسب acronym 

                                                                                                                                                                       برچسب address 

                                                                                                                                                                               برچسب bdo 

                                                                                                                                                                 برچسب blockquote 

                                                                                                                                                                                    برچسب Q 

موجودیت های HTML 

موجودیت های کاراکتر 

فاصله بدون شکست 

موجودیت کاراکترهای پر استفاده 

                                                                                                                                                                        پیوندهای HTML 

                                                                                                                                        برچسب Anchor و موجودیت Href 

                                                                                                                                                                       موجودیت Target 

                                                                                                                                            برچسب Anchor و موجودیت نام 

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

                                                                                                                                          مثالهای بیشتر - پیوندهای HTML 

                                                                                                                                                                        برچسب Anchor 

                                                                                                                                                                                   برچسب a 

قاب های HTML 

قابها 

برچسب Frameset 

برچسب Frame 

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

مثالهای بیشتر - قاب های HTML 

برچسب های قاب 

برچسب frameset 

برچسب frame 

برچسب noframes 

برچسب Iframe 

                                                                                                                                                                 جدول های HTML 

                                                                                                                                                                                  جدول ها 

                                                                                                                                                     جدول ها و عنصر حاشیه 

                                                                                                                                                             سر تیترها در جداول 

                                                                                                                                                سلول های خالی در جداول 

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

                                                                                                                                                              برچسب های جدول 

                                                                                                                                                                       برچسب Table 

                                                                                                                                                                             برچسب TH 

                                                                                                                                                                             برچسب TR 

                                                                                                                                                                             برچسب TD 

                                                                                                                                                                   برچسب Caption 

                                                                                                                                                                 برچسب Colgroup 

                                                                                                                                                                             برچسب Col 

                                                                                                                                                                       برچسب Thead 

                                                                                                                                                                       برچسب Tbody 

                                                                                                                                                                         برچسب Tfoot 

لیست های HTML 

لیست های نامرتب 

لیست های مرتب 

لیست های مرتب 

برچسب Anchor - لیست های HTML 

برچسب OL 

برچسب UL 

برچسب Li 

برچسب Dl 

برچسب Dt 

برچسب Dd 

برچسب Dir 

برچسب menu 

                                                                                                                                                  فرم ها و ورودی های HTML 

                                                                                                                                                                                        فرم ها 

                                                                                                                                                                                          input 

                                                                                                                                                                          فیلدهای متنی 

                                                                                                                                                                  دکمه های رادیویی 

                                                                                                                                               چک باکس ها (check boxes) 

                                                                                                                                       عنصر Action فرم و دکمه Submit 

                                                                                                                                                                    برچسب های فرم 

                                                                                                                                                                          برچسب Form 

                                                                                                                                                                         برچسب Input 

                                                                                                                                                                  برچسب Textarea 

                                                                                                                                                                         برچسب Label 

                                                                                                                                                                    برچسب Fieldset 

                                                                                                                                                                     برچسب Legend 

                                                                                                                                                                        برچسب Select 

                                                                                                                                                                 برچسب Optgroup 

                                                                                                                                                                       برچسب Option 

                                                                                                                                                                      برچسب Button 

عکس های HTML 

برچسب Images و موجودیت Src 

موجودیت Alt 

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

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

برچسب Img 

برچسب Map 

برچسب Area 

                                                                                                                                                         پس زمینه های HTML 

                                                                                                                                                                         پس زمینه ها 

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

رنگ های HTML 

نام رنگ ها 

رنگ های ایمن وب 

مقادیر رنگ های HTML 

نام رنگ ها در HTML 

                                                                                                                                         لینک به قسمت خاصی از متن 

• HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
• یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
• بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
• یک فایل HTML باید دارای پسوند html. یا html. باشد
• یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

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

<html>
<head>
<title>title of page </title>
</head>
<body>
This is my first home page.<b> This text is bold </b>
</body>
</html>

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

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

هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند 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 معمولا بصورت جفت می آیند <b> , <b/>
• اولین برچسب دوتایی برچسب شروع و دومی برچسب پایانی است
• متن های بین برچسب ابتدایی و انتهایی محتوای عناصر هستند
• برچسبهای HTML به حروف کوچک و بزرگ حساس نیستند <b> معادل <B> است.

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

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

<body>
This is my first homepage.<b>This text is bold</b>
</body>

این عنصر HTML با برچسب آغازین <body> شروع و با برچسب پایانی <body/> تمام می شود.
هدف برچسب <body> این است که عناصر HTML را که محتوای بدنه HTML هستند تعریف کند.

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

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

برچسبها خود می توانند شامل عناصری باشند ، عناصر می توانند اطلاعات اضافی در باره عناصر HTML در صفحه شما را فراهم کنند.این برچسب عنصر بدنه را در صفحه شما معرفی می کند:
<body> 
با اضافه کردن عنصر <bgcolor>شما می توانید به مرورگر بگویید که رنگ پس زمینه شما باید قرمز باشد مثل این:<"body bgcolor="red>
این برچسب یک جدول HTML را معرفی می کند:<table>. با اضافه کردن عنصر حاشیه شما می توانید به مرورگر بگویید که جدول نباید هیچ لبه و حاشیه ای داشته باشد: <"table border="0>
عناصر همیشه در یک زوج نام/مقدار می آیند، مثل این: نام="مقدار" 
عناصر همیشه به برچسب شروع عناصر HTML اضافه می شوند

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

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

<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>

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

<p> This is a paragraph </p>
<p> This is another paragraph </p>

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