مقدمه و معرفی زبان HTML

معرفی زبان HTML :
   عبارت HTML مخفف (Hyper Text Markup Language) است . Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.
 HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .
در يک صحفه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول و ... را قرار داد ، که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند .

مفهوم تگ های HTML :
تگ های HTML برای نشانه گذاری محتويات صفحات به کار می روند و باعث می شوند که مرورگر بتواند تشخيص دهد هر بخش چه نوع عنصری است. هر تگ HTML ، يک بخش ابتدايی و يک بخش انتهايی دارد که هم نام بوده و به صورت استاندارد طبق شکل کلی زير به کار می روند :

< تگ انتها / >    محتويات    < تگ ابتدا >
مثال : < label > ..... < /label >  
تگ ابتدايی مشخص کننده آغاز تگ و تگ پايانی ، مشخص کننده انتهای تگ است . هر تگ HTML ، بايد حتما در ادامه توسط تگ پايانی بسته شود . کليه نوشته ها و تگ های ديگری که در بين تگ ابتدا و پايان نوشته می شوند ، محتويات تگ را تشکيل می دهند .

خواص تگ های HTML :
هر تگ دارای مجموعه از خواص است که ويژگی های مختلف آنها را تعيين می کند . هر يک از اين خواص را می توان در درون تگ ابتدايي معرفی و مقدار دهی کرد .
راهنمايي : در ادامه هر يک از تگ های HTML معرفی شده و در صفحه مربوط به آنها خواص مربوطه نيز در جدول خواص مهم قرار داده شده اند . در ستون نام خاصيت نام آن و در ستون نوع خاصيت انواع مقادير قابل قبول برای آن خاصيت تعيين شده است .
مثال : برای مثال تگ < table > دارای خاصيتی به نام Border است ، که به دور جدول کادر يا حاشيه ايجاد می کند . نحوه تعريف و مقدار دهی آن به صورت زير است :
توجه : در هنگام تعريف بايد بين خاصيت و مقدار آن علامت = قرار داده و همچنين مقدارها بايد درون علامت " " قرار بگيرند .
< table border = "1" >  محتويات  < /table >
راهنمايی 2 : در بخش آموزش تگ ها سعی شده تا با ارائه مثال های مناسب مطالب توضيحی را در عمل نشان داد . برای اين منظور از جدول Example استفاده شده است ، که اين جدول دارای 2 قسمت است . در قسمت کد ، کد واقعی مورد نياز برای هدف ارائه شده و در قسمت خروجی نيز خروجی کد که به صورت اکتيو توسط مرورگر توليد شده ، نشان داده شده است .
توجه : تمام مثال های قسمت آموزش HTML بر طبق استانداردهای نرم افزار Microsoft Visual Studio 2005 طراحی شده و توسط مرورگرهاي مطرح Internet Explorer و FireFox تست شده است .

نکات مهم :

1. تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نيستند ، يعنی تگ های < b > با < B > برابر هستند .
   
2. می توان يک تگ را در تگ ابتدايي نيز بست . برای اين کار از يک علامت / بعد از نام تگ و خواص مورد نظر تعريف شده استفاده می کنيم . در اين حالت نمی توان متن يا تگ ديگری را به عنوان محتويات برای آن تگ در نظر گرفت .
   توجه کاربرد اين روش در مورد تگ هايي مثل < table > , < td > , < tr > و ... امکان پذير نيست .
   Example :
   
   < br / >< input type = "text" name ="family" ... / >
   
3. هر تگ HTML محتویات درون خود را تحت تاثير قرار می دهد . برای مثال تگ < b > برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بين تگ باز و بسته < b > قرار بگيرد ، توپر می شود .
   

نمايش کاراکترهای خاص در HTML

بعضی از کاراکترها در زبان HTML دارای معنی خاصی هستند مثل کاراکتر کوچکتر > که به معنای آغاز يک تگ می باشد . اگر بخواهيم در متن صفحات HTML اين نوع کاراکترها را نمايش دهيم ، جهت جلوگيری از تداخل متن با کد صفحه بايد از روش ويژه ای به صورت زير استفاده کنيم :
برای نمايش هر کاراکتر از يک واژه مرکب که شامل سه قسمت است استفاده می شود .
قسمت اول علامت (&) ، قسمت دوم يک نام از پيش تعيين شده يا علامت # به همراه يک عدد معلوم و قسمت سوم هم علامت ( ; ) است که در پايان قرار می گيرد .

برای مثال برای نمايش کاراکتر > بايد بنويسيم :
<     or     <

نکته : کليه نام های نمايش کاراکترهای خاص به حروف بزرگ و کوچک حساس هستند .
نکته : در زبان HTML ، اگر در هنگام ورود متن بين حروف با فشردن کليد Space Bar فاصله ايجاد کنيد ، در هنگام نمايش در مرورگر اين فاصله ها از بين رفته و حداکثر يک فاصله خالی بين دو واژه نمايش داده می شود . برای افزودن فاصله بين واژه ها بايد از کاراکتر ;nbsp& استفاده کرد که با هر بار وارد کردن اين کاراکتر ، يک فاصله خالی بين دو واژه به وجود می آيد .

تگ های مقدماتی HTML

تگ < html > :
محدوده کد صفحه HTML را مشخص می کند و به مرورگر مي فهماند که اين يک صفحه HTML است . فقط کدهاي درون اين محدوده توسط مرورگر اجرا می شود .
مثال : در مثال زير بدنه اصلی يک صفحه با تگ < html > مشخص شده است :

تگ < head > در بر گيرنده ااطلاعات کلی درباره سند وب است که اين اطلاعات Meta-Information به معنای (اطلاعات درباره) ناميده می شود .
کليه اطلاعات درون تگ < head > توسط مرورگر نمايش داده نمی شوند .براساس استاندارد HTML فقط تگ های زیر قابل استفاده در بخش head هستند:
< base > , < link > , < meta > , < title > , < style > , < script >


تگ < title > :
اين تگ عنوان صفحه را که مرورگر در هنگام باز کردن صفحه در نوار عنوان نمايش می دهد را مشخص می کند . متنی که بين تگ باز وبسته < title > قرار بگيرد عنوان صفحه را تعيين می کند . تگ < title > بايد در قسمت head صفحه قرار بگيرد .
عنوان صفحه ارتباطی به نام فايل صفحه ندارد و بهتر است حداکثر تا 15 حرف باشد .

اين تگ اولين سطر از کد صفحه وب است و به مرورگر نوع و نسخه استفاده شده از زبان برنامه نويسی HTML يا XHTML را اعلام می کند . لازم به ذکر است که هر صفحه فقط می تواند يک نوع Doctype داشته باشد .

نکته : تگ < Doctype! > تنها تگی است که تگ انتهايي ندارد و در تگ ابتدايي هم توسط علامت / بسته نمی شود .

انواع ورژن های قابل استفاده در صفحات وب :

1) HTML :   زبان HTML سه حالت کلی دارد :

Strict , Traditional , Frameset

کدهای زير بايد در قسمت < Doctype! > جهت استفاده از هر يک از حالت های فوق تايپ شود :


2) XHTML :  زبان XHTML سه حالت کلی دارد :

Strict , Traditional , Frameset

کدهای زير بايد در قسمت < Doctype! > جهت استفاده از هر يک از حالت های فوق تايپ شود :

تگ های مقدماتی HTML


تگ < meta > :
اين تگ اطلاعات کلی درباره مطالب درون صفحه وب ، توضيحات ضروری و واژه های کليدی مرتبط با موضوع صفحه جهت استفاده موتورهای جستجو را شامل می شود .
چيدمان مناسب و استفاده از کليد واژه های مرتبط به موضوع صفحه، باعث بهتر نمايش داده شدن صفحه و سايت در قسمت جستجوی موتورهای جستجو می شود .

- تعيين کليدواژه ها برای موتورهای جستجو :
موتورهای جستجو ، هنگام جستجو برای يافتن مطالب در مورد يک موضوع خاص ، آن مطلب را با کليدواژه های تعريف شده در سايت مقايسه کرده و در صورت يکسان بودن ، صفحه وب سايت شما را در ليست نتايج جستجو نمايش می دهند .



- تعيين يک توضيح درباره مطالب صفحه :



- تعيين آخرين زمان بازبينی و به روز کردن صفحه :



- تعيين زمان refresh شدن صفحه برای هر 5 ثانيه يکبار :

تگ های مقدماتی HTML

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


تگ < base > :
اين تگ يک آدرس پايه برای کليه لينک های موجود در صفحه تعيين می کند .
مثال : فرض کنيد که آدرس يک عکس در صفحه به صورت زير است :


در صورتی که تگ < base > در قسمت head به صورت زير وارد شود :


در هنگام وارد کردن عکس فوق در صفحه ، می توان برای وارد کردن آدرس عکس فقط ادامه مقدار آدرس عکس را در تگ < img > به صورت زير وارد کرد :

تگ های قالب بندی متن

تگ < p > :
برای ايجاد يک پاراگراف جديد در صفحه به کار می رود. هر متنی که در بين تگ باز و بسته < p > قرار بگيرد، محتويات آن پاراگراف را تشکيل می دهد. با ايجاد يک پاراگراف جديد ، نوشته به ابتدای خط بعدی انتقال می يابد .


تگ < h1 > - < h6 > :
اين تگ معمولا برای ايجاد تيترها و عنوان ها مورد استفاده قرار می گيرد. متنی که قرار است به عنوان تيتر نمايش داده شود ، بین تگ باز و بسته قرار می گيرد.


تگ < br > :
به کاربردن اين تگ باعث ايجاد يک خط جديد و انتقال نوشته به اول سطر پايينی می شود. همچنين به وسيله آن می توان يک خط خالی ايجاد کرد.
نکته : تگ < br > دارای تگ پايانی نيست و ترکيب < br > ... < /br > غلط است. اين تگ بايد به وسيله يک علامت / در درون تگ ابتدايی بسته شود.


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

تگ های قالب بندی متن

باعث توپر شدن متنی که درون تگ باز و بسته < b > قرار بگيرد می شود .

باعث می شود تا متنی که بين تگ باز و بسته < u > قرار بگيرد ، به صورت خط زير دار نمايش داده شود .

باعث می شود تا متن درون آن به صورت کج (italic) نماِش داده شود .

اين تگ باعث نمايش بزرگتر محتويات درون آن نسبت به متن خطوط همجوار می شود .

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

اين تگ باعث نمايش توپر و بزرگتر محتويات درون خود نسبت به متن خطوط همجوار آن می شود .

اين تگ باعث نمايش محتويات درون خود به صورت کج و متمايز نسبت به متن خطوط همجوار آن می شود .

از اين تگ معمولا برای نمايش آدرس ها در صفحه های وب استفاده می شود . خصوصيت مهم تگ address اين است که متن درون خود را به صورت کج (italic) نمايش داده و باعث ايجاد يک خط جديد در ابتدا و انتهای آدرس می شود .

چنانچه در محيط کد نويسی صفحات وب ، بين متن های نوشته شده با کليد space فاصله ايجاد کرده یا با کليد Enter به خط بعدی برويد ، مرورگر اين مسئله را ناديده گرفته ، تمام فاصله ها را از بين برده و حداکثر به اندازه يک کاراکتر فاصله ايجاد می کند . برای جلوگيری از اين مسئله ، از تگ < pre > استفاده می کنيم . اين تگ باعث نمايش متن درون خود با همان شکل و ساختاری که در محيط کد نويسی صفحه وارد شده است ، می شود . همانطور که قبلا ذکر شد ، برای ايجاد فاصله بين حروف از کاراکتر ;nbsp& و رفتن به خط بعدی از تگ <  br/ > استفاده می کنيم .