شما عضو این انجمن نبوده یا وارد نشده اید. لطفا برای مشاهده کامل انجمن و استفاده از آن وارد شوید یا ثبت نام کنید .

امتیاز موضوع:
  • 59 رأی - میانگین امتیازات: 2.9
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
آموزش زبان html

در حال تکمیل آموزش زبان HTML
#1
مقدمه و معرفی زبان 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 > قرار بگيرد ، توپر می شود .
پاسخ
 سپاس شده توسط ms.khassi ، saberi ، mesterweb ، farnaz ، saman ، elshan ، neda ، mitra ، sadegh001 ، نگار ، sara67 ، ali23
#2
خصوصيات استاندارد تگ های HTML

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


خصوصيات اصلی

نکته : اين خاصيت ها در تگ های base , head , html , meta , param , style , title و script وجود ندارد .

نام خاصيت :  class     نوع خاصيت :   نام کلاس عنصر
مشخص کننده کلاس تگ در کد نويسی برنامه است . اين کلاس در کدنويسی CSS و زبان های اسکريپتی کاربرد دارد .

نام خاصيت :   id    نوع خاصيت :  id عنصر
مشخص کننده يک شناسه منحصر به فرد برای تگ در درون سند HTML است . id هر تگ در کدنويسی CSS و زبان های اسکرپيتی کاربرد دارد . توسط id می توان به تگ مورد نظر دست يافت .

نام خاصيت :   style    نوع خاصيت : سبک و حالت
يک خاصيت چند مفدارِي است که خصوصيات قالب دهی و اعمال سبک ها ( CSS ) را برای تگ مورد نظر مشخص می کند .

نام خاصيت :   title     نوع خاصيت : متن
متنی است که به صورت tooltip در يک کادر زرد رنگ ، در هنگام قرار گرفتن موس بر روی عنصر نمايش داده می شود .

خصوصيات زبان

نکته : اين خاصيت ها در تگ های base , br , frame , hr , iframe , param و script وجود ندارد .

نام خاصيت :    dir     نوع خاصيت :   rtl و ltr
تعيين کننده جهت قرار گرفتن نوشته را تعيين می کند ، که يکی از 2 حالت زير را می تواند داشته باشد :
ltr : چپ به راست
rtl : راست به چپ

نام خاصيت :    language    نوع خاصيت :  نام زبان
مشخص کننده زبان برنامه نويسی کد مربوط به تگ است .

خصوصيات صفحه کليد

نام خاصيت :    accesskey    نوع خاصيت :  کليد میانبر
يک ميانبر صفحه کليد برای دستيابی به عنصر است .

نام خاصيت :    tabindex    نوع خاصيت :  عدد
شماره ترتيبی قرار گرفتن فوکوس صفحه بر روی عنصر مورد نظر را در هنگام فشردن کليد tab مشخص می کند .
پاسخ
 سپاس شده توسط ms.khassi ، saberi ، mesterweb ، farnaz ، saman ، elshan ، neda ، mitra ، sadegh001 ، ali23
#3
نمايش کاراکترهای خاص در HTML

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

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

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

[تصویر:  do.php?img=894]
پاسخ
 سپاس شده توسط ms.khassi ، saberi ، mesterweb ، farnaz ، saman ، elshan ، neda ، mitra ، sadegh001 ، ali23
#4
تگ های مقدماتی HTML

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

[تصویر:  do.php?img=896]

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

[تصویر:  do.php?img=897]
[تصویر:  do.php?img=898]
پاسخ
 سپاس شده توسط ms.khassi ، saberi ، mesterweb ، farnaz ، saman ، elshan ، neda ، mitra ، sadegh001 ، ali23
#5
تگ های مقدماتی HTML

تگ < head > :

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

[تصویر:  do.php?img=1079]

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

[تصویر:  do.php?img=1080]
پاسخ
 سپاس شده توسط neda ، ms.khassi ، saman ، mitra ، mesterweb ، sadegh001 ، elshan ، ali23
#6
تگ های مقدماتی HTML

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

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

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

Strict , Traditional , Frameset

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

[تصویر:  do.php?img=1081]

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

Strict , Traditional , Frameset

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

[تصویر:  do.php?img=1082]
پاسخ
 سپاس شده توسط neda ، ms.khassi ، saman ، mitra ، mesterweb ، sadegh001 ، elshan ، ali23
#7
تگ های مقدماتی HTML


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

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *


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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *


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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *


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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

[تصویر:  do.php?img=1084]
پاسخ
 سپاس شده توسط neda ، ms.khassi ، saman ، mitra ، mesterweb ، sadegh001 ، elshan ، ali23
#8
تگ های مقدماتی HTML

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

[تصویر:  do.php?img=1085]

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

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

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

[تصویر:  do.php?img=1086]
پاسخ
 سپاس شده توسط neda ، ms.khassi ، saman ، mitra ، mesterweb ، sadegh001 ، elshan
#9
تگ های قالب بندی متن

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

[تصویر:  do.php?img=1113]

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

[تصویر:  do.php?img=1114]

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

[تصویر:  do.php?img=1115]

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

[تصویر:  do.php?img=1116]
پاسخ
 سپاس شده توسط elshan ، neda ، sadegh001
#10
تگ های قالب بندی متن

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

[تصویر:  do.php?img=1117]

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

[تصویر:  do.php?img=1118]

تگ < em > , < i > :
باعث می شود تا متن درون آن به صورت کج (italic) نماِش داده شود .

[تصویر:  do.php?img=1119]

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

[تصویر:  do.php?img=1120]

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

[تصویر:  do.php?img=1121]

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

[تصویر:  do.php?img=1122]

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

[تصویر:  do.php?img=1123]

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

[تصویر:  do.php?img=1124]

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

[تصویر:  do.php?img=1125]
پاسخ
 سپاس شده توسط elshan ، neda ، saman ، sadegh001


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان