PDA

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



Behzad AZ
12-01-2010, 11:16 AM
مقدمه و معرفی زبان 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 > قرار بگيرد ، توپر می شود .

Behzad AZ
12-01-2010, 11:16 AM
خصوصيات استاندارد تگ های HTML


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


خصوصيات اصلی


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


http://patoghu.com/forum/images/statusicon/wol_error.gifبرای دیدن عکس در اندازه بزرگ اینجا کلیک کنید http://www.up.patoghu.com/images/rs33yx19o4vhsdwwfq3y.png

Behzad AZ
12-01-2010, 11:17 AM
خصوصيات زبان


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


http://patoghu.com/forum/images/statusicon/wol_error.gifبرای دیدن عکس در اندازه بزرگ اینجا کلیک کنید http://www.up.patoghu.com/images/m9oklar6gxnnstkp8buy.png

Behzad AZ
12-01-2010, 11:17 AM
خصوصيات صفحه کليد



http://patoghu.com/forum/images/statusicon/wol_error.gifبرای دیدن عکس در اندازه بزرگ اینجا کلیک کنید http://www.up.patoghu.com/images/tcbnkhcz14wlf9e50z2j.png

Behzad AZ
12-01-2010, 11:17 AM
نمايش کاراکترهای خاص در HTML


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


&lt; or &#60;

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


http://patoghu.com/forum/images/statusicon/wol_error.gifبرای دیدن عکس در اندازه بزرگ اینجا کلیک کنید http://www.up.patoghu.com/images/fsaec3h8i8k2u4yo93in.png

Behzad AZ
12-01-2010, 11:17 AM
تگ های مقدماتی HTML


تگ < html > :

محدوده کد صفحه HTML را مشخص می کند و به مرورگر مي فهماند که اين يک صفحه HTML است . فقط کدهاي درون اين محدوده توسط مرورگر اجرا می شود .

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


http://www.up.patoghu.com/images/1fq8ov8gh4ah1q2n6ibu.png

Behzad AZ
12-01-2010, 11:18 AM
http://patoghu.com/forum/images/icons/icon1.png


تگ < body > :

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


http://patoghu.com/forum/images/statusicon/wol_error.gifبرای دیدن عکس در اندازه بزرگ اینجا کلیک کنید http://www.up.patoghu.com/images/couj659g6susjmr4wr7.png

http://patoghu.com/forum/images/statusicon/wol_error.gifبرای دیدن عکس در اندازه بزرگ اینجا کلیک کنید http://www.up.patoghu.com/images/x2ldxh2hsyixbe8qrdw.png

Behzad AZ
12-01-2010, 11:18 AM
http://www.up.patoghu.com/images/s7pxxnzkx7lqwpw27j0i.png

Behzad AZ
12-01-2010, 11:18 AM
تگ < head > :

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


http://patoghu.com/forum/images/statusicon/wol_error.gifبرای دیدن عکس در اندازه بزرگ اینجا کلیک کنید http://www.up.patoghu.com/images/cdzp3sydztkk4h9y9m8v.png

Behzad AZ
12-01-2010, 11:18 AM
تگ < title > :

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


http://patoghu.com/forum/images/statusicon/wol_error.gifبرای دیدن عکس در اندازه بزرگ اینجا کلیک کنید http://www.up.patoghu.com/images/af0t4dhqmbjwunpl3umw.png

Behzad AZ
12-01-2010, 11:19 AM
تگ <Doctype!> :

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

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

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


http://patoghu.com/forum/images/statusicon/wol_error.gifبرای دیدن عکس در اندازه بزرگ اینجا کلیک کنید http://www.up.patoghu.com/images/ynwy517kmpx3r3112w1p.png

Behzad AZ
12-01-2010, 11:19 AM
) XHTML :

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


http://patoghu.com/forum/images/statusicon/wol_error.gifبرای دیدن عکس در اندازه بزرگ اینجا کلیک کنید http://www.up.patoghu.com/images/mima0p3pf232p3nqv8h.png