معرفی زبان 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 > قرار بگيرد ، توپر می شود .

<center> <link rel="stylesheet" type="text/css" href="http://pardisgame.net/templates/dark_side/css/global.css?20110607_v2" /> <div> </div> <div id="upcomming"> <div>در آینده نزدیک <span class="txtorange bold arial">>></span></div><div><a href="http://pardisgame.net/upcoming.html">آرشیو ...</a></div> <hr style="width: 97%" /> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-7152-Tales-of-Graces-f.html" title="Tales of Graces f" style="font-family: Arial">Tales of Graces f</a> </div> <div> (ps3) </div> <div> </div> <div> کنسول: <span>ps3</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-3122-Silent-Hill-Downpour.html" title="Silent Hill: Downpour" style="font-family: Arial">Silent Hill: Downpou...</a> </div> <div> (ps3) </div> <div> </div> <div> کنسول: <span>ps3</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-3123-Silent-Hill-Downpour.html" title="Silent Hill: Downpour" style="font-family: Arial">Silent Hill: Downpou...</a> </div> <div> (x360) </div> <div> </div> <div> کنسول: <span>x360</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-3482-Journey.html" title="Journey" style="font- family: Arial">Journey</a> </div> <div> (ps3) </div> <div> </div> <div> کنسول: <span>ps3</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-3838-Yakuza-Dead-Souls.html" title="Yakuza: Dead Souls" style="font-family: Arial">Yakuza: Dead Souls</a> </div> <div> (ps3) </div> <div> </div> <div> کنسول: <span>ps3</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-4024-Shoot-Many-Robots.html" title="Shoot Many Robots" style="font-family: Arial">Shoot Many Robots</a> </div> <div> (ps3) </div> <div> </div> <div> کنسول: <span>ps3</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-6110-Naruto-Shippuden-Ultimate-Ninja-Storm- Generations.html" title="Naruto Shippuden: Ultimate Ninja Storm Generations" style="font-family: Arial">Naruto Shippuden: Ul...</a> </div> <div> (ps3) </div> <div> </div> <div> کنسول: <span>ps3</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-6111-Naruto-Shippuden-Ultimate-Ninja-Storm- Generations.html" title="Naruto Shippuden: Ultimate Ninja Storm Generations" style="font-family: Arial">Naruto Shippuden: Ul...</a> </div> <div> (x360) </div> <div> </div> <div> کنسول: <span>x360</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-6776-FIFA-Street-2012.html" title="FIFA Street 2012" style="font-family: Arial">FIFA Street 2012</a> </div> <div> (ps3) </div> <div> </div> <div> کنسول: <span>ps3</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-6777-FIFA-Street-2012.html" title="FIFA Street 2012" style="font-family: Arial">FIFA Street 2012</a> </div> <div> (x360) </div> <div> </div> <div> کنسول: <span>x360</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/23</span> <a href="http://pardisgame.net/game-7204-Warp.html" title="Warp" style="font-family: Arial">Warp</a> </div> <div> (pc) </div> <div> </div> <div> کنسول: <span>pc</span> | عرضه: <span>4 روز</span> ديگر </div> </div> <div> <div> <span>12/24</span> <a href="http://pardisgame.net/game-4025-Shoot-Many-Robots.html" title="Shoot Many Robots" style="font-family: Arial">Shoot Many Robots</a> </div> <div> (x360) </div> <div> </div> <div> کنسول: <span>x360</span> | عرضه: <span>5 روز</span> ديگر </div> </div> <div> <div> <span>12/24</span> <a href="http://pardisgame.net/game-7206-Warp.html" title="Warp" style="font-family: Arial">Warp</a> </div> <div> (ps3) </div> <div> </div> <div> کنسول: <span>ps3</span> | عرضه: <span>5 روز</span> ديگر </div> </div> <div> <div> <span>01/01</span> <a href="http://pardisgame.net/game-3863-Ninja-Gaiden-3.html" title="Ninja Gaiden 3" style="font-family: Arial">Ninja Gaiden 3</a> </div> <div> (ps3) </div> <div> </div> <div> کنسول: <span>ps3</span> | عرضه: <span>11 روز</span> ديگر </div> </div> <div> <div> <span>01/01</span> <a href="http://pardisgame.net/game-3864-Ninja-Gaiden-3.html" title="Ninja Gaiden 3" style="font-family: Arial">Ninja Gaiden 3</a> </div> <div> (x360) </div> <div> </div> <div> کنسول: <span>x360</span> | عرضه: <span>11 روز</span> ديگر </div> </div> <div> <div> <span>01/01</span> <a href="http://pardisgame.net/game-4905-Armored-Core-V.html" title="Armored Core V" style="font-family: Arial">Armored Core V</a> </div> <div> (ps3) </div> <div> </div> <div> کنسول: <span>ps3</span> | عرضه: <span>11 روز</span> ديگر </div> </div> <div style="height: 5px"> </div> <script language="javascript" type="text/javascript"> $j("#upcomming .crow").mouseover(function () { $j(this).find(".extr_info").show(); $j(this).find(".extr_info_arr").show(); }).mouseout(function(){ $j(this).find(".extr_info").hide(); $j(this).find(".extr_info_arr").hide(); });; </script> <br><a href="http://moisrex.rpzblog.com">moisrex.r98.ir</a>

در اين قسمت ليست کامل تگ های HTML که در بخش آموزش HTML ، توضيحات مربوط به آنها ارائه شده است قرار داد . برای دريافت اطلاعات درباره هر کدام بر روی نام آن کليک کنيد :

تگ < script > :

از تگ < script > برای قرار دادن يک اسکريپت ( برنامه های نوشته شده توسط زبان های برنامه نويسی اسکريپتی مثل Java Script , VB Script ) درون صفحات HTML استفاده می شود . مجموعه دستورات برنامه مورد نظر بين تگ باز و بسته < script > قرار بگيرند .
برای دريافت اطلاعات بيشتر و آموزش برنامه نويسی به زبان های اسکريپتی به بخش آموزش VB Script و Java Script برويد . در اين قسمت ما به بررسی قرار دادن اسکريپت ها در صفحات HTML و خصوصيات تگ Script می پردازيم و به آموزش اسکريپت نويسی کاری نداريم .

محل قرار دادن تگ < script > :

تگ های اسکريپت را می توان در درون بخش < body > صفحه HTML و يا در قسمت < head > قرار داد . تگ هايی که در قسمت < body > قرار بگيرند ، به محض اجرای صفحات اجرا شده و اثر خود را نمايش می دهند . ولی اسکريپت هايی که در بخش < head > قرار بگيرند ، تا زمانی که توسط کاربر فراخوانی نشده و يا رويداد در نظر گرفته شده برای اجرای آنها اتفاق نيفتد ، اجرا نخواهند شد .

مثال : اسکريپت زير به محض اجرای صفحه اجرا شده و پيغام زير را نمايش می دهد :

مثال : می توان يک اسکريپت را در يک فايل خارجی ( برای مثال يک فايل با پسوند js برای Java Script ) ايجاد کرده و سپس توسط يک تگ < script > و خاصيت src در بخش head يا body به آن اسکريپت پيوند ايجاد کرد : 

* نحوه مديريت مرورگرهای قديمی در برخورد با تگ های < script > :
برخی از مرورگرهای قديمی تگ < script > را نمي شناسند و باعث می شوند تا متن دستورات اسکريپت ها را ، همانند متن ساده بر روی صفحه نمايش دهند . برای جلوگيری از اين مسئله و مخفی کردن تگ های اسکريپت از ديد مرورگرهای قديمی ، تگ < script > را در درون يک comment ( توضيح ) به صورت زير قرار می دهيم . مرورگرهای جديد به صورت هوشمند ، متن درون commnet ها را بررسی کرده و چنانجه حاوی دستورات اسکريپتی باشند ، آنها را اجرا می کنند .

مثال : Script زير را با قرار دادن بين علامت های توضيح comment ، از ديد مرورگرهای قديمی مخفی کرده ايم . چنانچه در بخش خروجی ، خروجی درستی نداريد ، ورژن مرورگر خود را عوض کنيد چون خيلی قديمی است !!! .

تگ < noscript > :

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

منبع: http://www.developerstudio.ir/HTML/Script.aspx#scr

توضیحات: در قسمت 0.7 زمانی که طول می کشه تا متن به حالت خواستخ شده برگرده. در قسمت 0هم زمانیه که کاربر باید ماوس خودشو رو کد نگه داره تا به این حالت در بیاد. در قسمت های 50px با تغییر عدد بالا اندازه ی اولیه متن (طول) و در عدد پایینی ارتفاع رو تنظیم می کنید و در قسمت ها 300 و 100 به همون ترتیب اندازه ثانویه متن رو تنظیم می کنید.

برای آزمایش کد اینجا کلیک کنید.

<style> .moisrex { -moz-transition: width 0.7s ease 0s ; width: 50px; height: 50px; } div:hover { width: 300px ; height: 100px ; } </style> </head> <body> <div> متن شما در اینجا واقع میشه من این متن رو طولانی درست می کنم تا خوب متوجه بشید. </div>

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

مثلا این متن رو نگاه کنید:  با سلام و خسته نباشید خدمت شما

حالا این یکی رو نگاه کنید: با سلام و خسته نباشید خدمت شما دوست عزیز

این یکی هم هست: سلام خدمت شما دوست عزیز و گرامی

حتما تا حالا فرقشون رو فهمیدید. برای این کار به تگ قبل از متن خود کد زیر را اضافه کنید که اغلب تگ <p> می باشد. در قسمت عدد 0 می توانید نوع نمایش سایه را مشخص کنید. صفر اول مقدار چپ و راست بودن سایه ، صفر دوم مقدار بالا و پایین بودن سایه و صفر سوم مقدار تیره بودن یا در اصل بلوری شدن سایه رو مشخص می کنه. در قسمت black هم رنگ رو مشخص کنید که باید به انگلیسی باشه یا کد رنگ رو بعد از # بگذارید که کد بعضی از رنگ ها رو براتون اینجا گذاشتم.

style="text-shadow:0px 0px 0px black"

اینم مثال یک کد کامل:

<p style="text-shadow:0px 1px 3px red">متن شما</p>

نتیجه کد: 

متن شما

فريم چيست؟

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

به مجموعه صفحات گنجانده شده در يک صفحه frameset مي گويند و به هر صفحه از آن يک frame  يا يک چارچوب گفته ميشود. در ساختار اصلي کدها،  ديگر تگ <body> نوشته نميشود و جاي آن تگ <frameset></frameset> قرارميگيرد، البته هر صفحه يعني هر فريم را که کد نويسي ميکنيد مانند ساختار معمولي است و از تگ <body></body>بايد استفاده کنيد ولي هنگاميکه صفحات را در يک frameset ميگذاريد بايد در ساختار کد آن بجاي <body>از <frameset> استفاده کرد،

توجه داشته باشيد که براي ديدن source code فريمها بايد بر روي هر فريم کليک راست کرده و گزينه view source را انتخاب کنيد و براي مشاهده کدهاي يک frameset بايد از منو view مرورگر اقدام نماييد.

 cols, rows

هر فريم ميتواند عمودي يا افقي در صفحه قرار گيرد يا يک frameset مخلوطي از چند فريم عمودي و افقي باشد که هر کدام از آنها توسط خصوصيتي در تگ<frameset>  کنترل ميشوند. به طور مثال اگر دو فريم داشته باشيم و آنها را بخواهيم به صورت عمودي در صفحه قرار دهيم از خصوصيت cols=” “  استفاده ميکنيم و اين خصوصيت را برابر با درصد اشغال هر فريم قرار ميدهيم يعني اگر ما دو فريم داشته باشيم و بخواهيم که يکي از آنها %30 صفحه را اشغال کند پس ديگري %70  را اشغال خواهد کرد و تگ آن بدين صورت ميشود:

<frameset cols=”30%,70%”>

دقت کنيد که اين اعداد با علامت ويرگول از هم جدا ميشوند. اگرهم بخواهيد دو فريم افقي داشته باشيد از خصوصيت rows=” “  استفاده ميکنيد. اما براي قراردادن دو صفحه يا دوفريم درframeset  بايد هر کدام از آنها را بطور جداگانه آدرس دهي کنيد و تگ آن براي هر کدام از فريمها به اين صورت است:

 مثال

آدرس دهي و نامگذاري

همانطور که ملاحظه ميفرماييد جلوي خصوصيت src=” “بايد آدرس صفحه را بنويسيد. خصوصيت ديگري هم هست که به غير ازخصوصيت   src بايد به اين تگ اضافه شود و آن name=” “   است که براي نامگذاري هر فريم بکار ميرود. اين نامگذاري زماني براي ما مفيد است که هرگاه ما بخواهيم دريکي از فريمها لينک بگذاريم هنگاميکه روي لينک کليک ميشود بايد مشخص شود که اطلاعات آن لينک در کدام فريم نمايش داده شود، به طور مثال فريم سمت چپ داراي يکسري لينک است که اطلاعات هر کدام بايد در فريم سمت راست نمايش داده شود پس به لينکها بايد نام فريم مورد نظر را بدهيم تا مشخص شود که اطلاعات را در کدام فريم نشان دهند. اما جدا از نامگذاري هر فريم براي اينکار بايد به هر لينک خصوصيت  target=” “  را اضافه کرد و آنرا برابر با نام منتخب هر فريم قرار داد.

اگر هم يک لينک در فايل 01.html داشته باشيم و بخواهيم درindex01.htm نمايش داده شود، طبق گفته هاي بالا:

<a href="htmlpages/info.html" target="right"> info.html </a>

 مثال

frame border

شما اگر يک frameset درست کرده باشيد متوجه يک کادر بين فريمهاي داخل آن شده ايد، براي برداشتن اين کادر ميتوانيد frameborder="no" و يا  border=”0” رابه تگ <frameset> اضافه کنيد.

 مثال

noresize

هنگاميکه frameset در مرورگر نمايش داده شود، بيننده سايت شما ميتواند سايز هر فريم را تغيير دهد يعني وقتي که نشانگر موس را روي لبه هر فريم ببرد ميتواند آنرا با drag  کردن کم يا   اضافه کند که براي جلوگيري از تغيير سايز هر فريم خصوصيت noresize رابه تگ <frame> بيافزاييد.

 مثال

scrolling

 خصوصيت ديگري هم هست که scroll bar هر فريم را کنترل ميکند، هر فريم داراي  scroll  ميباشد يعني ميتوانيد صفحه داخل فريم را به چپ وراست يا بالاوپايين حرکت دهيد که با خصوصيت   scrolling=” “ کنترل ميشود و آنرا برابر با کلمات Yes,no,auto  قرار دهيد.

 مثال

 noframes

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

<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>