+ ارسال موضوع جدید
صفحه 1 از 6 1 2 3 4 5 ... آخرینآخرین
نمایش نتایج: از شماره 1 تا 10 , از مجموع 56

موضوع: آموزش html

  1. #1
    ناظم انجمن

    http://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gif

    [ ]
    تاریخ عضویت
    Feb 2013
    محل سکونت
    زیر اسمون خدا...
    نوشته ها
    16,534
    تشکر
    13,809
    تشکر شده 13,049 بار در 9,484 پست

    آموزش html




    HTML چیست؟

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

    • برنامه های استاتیک (Static): برنامه هایی هستند که صفحات آنها از متن، تصاویر،صوت و ... تشکیل شده. و احیاناً چند لینک به سایر آدرس ها در آن قرار گرفته است. در واقع این نوع صفحات با کاربر تعاملی ندارند و صرفاً کاربر میتواند موارد داخل این صفحات را مشاهده کند.
    • برنامه های داینامیک (Dynamic): برنامه هایی هستند که داده ای را از کاربر گرفته، و آن را پردازش می کنند، و در انتها نتیجه‌ی آن در اختیار کاربر قرار می گیرد.

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

    • Liner:به زبان هایی همچون C,Pascal, Delphi, PHP و ... که باید دستورات به ترتیبی که نوشته شده اند و به صورت خط به خط اجرا شوند و تا خطی از برنامه اجرا نشده خط بعدی اجرا نمی شود، و در واقع الگوی خطی دارند زبانهای Liner گفته میشود. که وجود خطا در هر خط از برنامه موجب توقف اجرای کل برنامه میشود.
    • Hyper: در مقابل زبانهایی هستند که الگوی خاصی ندارند و خطا در یک خط از برنامه موجب توقف کل برنامه نمی شود. به این زبان ها Hyper گفته می شود.

    Markup: زبان HTML بر خلاف بسیاری از زبان های برنامه نویسی فاقد ساختار(دستور)هایی همچون ساختار شرطی، حلقه، توابع و... است. در عوض این زبان از ساختار ساده‌ای به نام Markup Tag یا به اختصار Tag (برچسب) تشکیل شده است. در واقع HTML یه نوع دستور بیشتر ندارد و آن هم همین Tagها هستند.
    چون فایلهای Html متنی هستند بنابراین برای کد نویسی صفحات وب از هر ویرایشگر متنی میتوان استفاده کرد مانند Notepad یا Wordpad که در تمامی ویندوزها قابل دسترسی هستند. البته برای نوشتن کدهای Html نرم افزار های پیشرفته زیادی در این زمینه وجود دارد که ما را در نوشتن تگ ها راهنمایی میکنند. که پیشنهاد من برای اینکار نرم افزار Notepad++ است


    برای مشاهده نتیجه کار هم نیاز به یک مرورگر (....,Opera,IE, Firefox, Google Chrome)دارید که من از گوگل کروم استفاده میکنم.











  2. 3 کاربر مقابل از این پست *ADRIANA* تشکر کرده اند.


  3. #2
    ناظم انجمن

    http://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gif

    [ ]
    تاریخ عضویت
    Feb 2013
    محل سکونت
    زیر اسمون خدا...
    نوشته ها
    16,534
    تشکر
    13,809
    تشکر شده 13,049 بار در 9,484 پست

    پیش فرض پاسخ : آموزش html

    ساختار تگ ها:


    تگ ها از سه قسمت تشکیل می شوند:

    1. یک علامت کوچکتر (>)
    2. نام تگ
    3. یک علامت بزرگتر (<)

    1 <tagname>



    تگ ها معمولا به صورت جفتی به کار می روند و ساختار جدیدی به نام عنصر (element) را تشکیل می دهند. به مثال زیر دقت کنید:
    1 <tagname> content </tagname>



    همانطور که در مثال بالا میبینید یک عنصر از سه قسمت اصلی تشکیل می شود: تگ آغازین، محتوای تگ (که میتواند یک متن ساده، یک عنصر دیگر و یا خالی باشد) و تگ پایانی.
    به ساختار تگ پایانی توجه کنید که تفاوت آن با تگ آغازین فقط در "/" است که قبل از نام تگ در تگ پایانی می آید.
    نکته : دقت داشته باشید که هر تگی که باز میشود باید درجایی بسته شود. که البته استثنائاتی هم وجود دارد که بعدا آن ها را هم معرفی خواهیم کرد.
    بسیار خب. تا اینجا با طریقه نوشتن تگ ها آشنا شدید. از این به بعد به معرفی تگ های HTML پرداخته میشود.

    ساختار اصلی یک صفحه وب:


    هر صفحه وب (HTML) با تگ <html> شروع و به تگ بسته‌ <html/> ختم میشود. در واقع با این عنصر به مرورگر می گوییم که اولاً با یک صفحه از نوع HTML روبروست، ثانیاً صفحه با تگ باز <html> شروع و با تگ پایانی <html/> پایان می یابد. در داخل عنصر html دو عنصر اصلی صفحه وجود دارند:

    • عنصر <head> : این عنصر که قسمت head (سر) صفحه را مشخص میکند حاوی اطلاعاتی در مورد صفحه است. به عنوان مثال می تواند شامل عنوان و توضیحاتی در مورد آنچه در قسمت بدنه آمده است باشد. این قسمت از تگ <head> و تگ بسته <head/> و هر چیزی که بین آنهاست تشکیل می شود.




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

    نکته : معمولا آنچه که در قسمت head صفحه قرار میگیرد در صفحه نمایش داده نمی شود اما هر آنچه که در قسمت body قرار گیرد در صفحه نمایش داده خواهد شد.
    سه عنصر <head> , <html> و <body> با هم ساختار اصلی یک صفحه وب را تشکیل می دهند. مثال زیر ساختار اصلی یک صفحه را نمایش میدهد:
    1 <html>

    2 <head>

    3 <title> Page title </title>

    4 </head>

    5 <body>

    6 <p> This is a Paragtaph </p>

    7 </body>

    8 </html>



    ذکر این نکته اهمیت دارد که وقتی عناصر شامل عناصر دیگری باشند، توی هم قرار گرفتن آن ها باید به صورت مناسب انجام شود، یعنی هر عنصر به طور کامل باید درون عنصر پدرش قرار گیرد. هر وقت که از یک تگ بسته استفاده میکنید، این تگ بسته، باید وابسته به آخرین تگ بازی باشد که هنوز بسته نشده!.
    به عبارتی دیگر، اول تگ A را باز کنید، سپس تگ B را باز کنید، سپس تگ B را ببندید و در آخر تگ A را ببندید. به عنوان مثال اگر بخواهیم فقط کلمه "پاراگراف" به صورت ضخیم دربیاید، بایستی:
    1 <p> این یک <b>پاراگراف</b> است </p>



    اما کد زیر نادرست است، زیرا تگ بسته <b/> داخل تگ <p> قرار نگرفته است :

    1 <p> این یک <b>پاراگراف است </p></b>



    و باعث میشود که نه فقط کلمه "پاراگراف" بلکه هر کلمه ای که بعد از آن بیاید نیز به صورت ضخیم درآید، که این امر یک اشکال در کد به حساب می آید










  4. 2 کاربر مقابل از این پست *ADRIANA* تشکر کرده اند.


  5. #3
    ناظم انجمن

    http://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gif

    [ ]
    تاریخ عضویت
    Feb 2013
    محل سکونت
    زیر اسمون خدا...
    نوشته ها
    16,534
    تشکر
    13,809
    تشکر شده 13,049 بار در 9,484 پست

    پاسخ : آموزش html

    کار صفت ها چیست؟

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

    • Name : نام صفتی که میخواهید کنترل کنید. مثلا صفت align برای تگ p نحوه چینش متن پاراگراف را کنترل می کند.
    • Value : مقداری است که برای صفت تعیین می شود. مثلا مقدار right برای صفت align در تگ p، باعث راست چین شدن متن پاراگراف می شود. Valueها همیشه باید در داخل کوتیشن ها (double یا single) قرار بگیرند و با علامت = به نام صفت منتسب شوند.

    شکل کلی تعریف صفات برای عناصر به این صورت است:
    1 <tagname attribute1='value' attribute2='value'> content </tagname>



    مثال زیر پاراگراف را راست چین می کند:
    1 <p align='rtl'>این یک پاراگراف راست چین است</p>



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

    id: از این صفت برای تعیین یک شناسه برای یک عنصر استفاده می شود. این شناسه می بایست در صفحه یکتا باشد. یعنی نباید برای صفت id، دو عنصر مختلف،یک مقدار مساوی انتخاب کنیم. از این صفت برای نسبت دادن یک گزینشگر ID به یک عنصر نیز استفاده میشود. مثال:
    1 <p id='p1'> این یک پاراگراف است </p>



    class: از این صفت برای نسبت دادن کلاسی که به زبان CSS نوشته شده است به یک عنصر استفاده میشود.
    مثال:
    1 <p class='p-red'> این یک پاراگراف است </p>



    dir: جهت گیری متن داخل یک عنصر را کنترل میکند. این صفت دارای دو مقدار است :

    • rtl: برای جهت گیری عنصر از راست به چپ
    • ltr: برای جهت گیری عنصر از چپ به راست

    مثال:
    1 <p dir='rtl'> این یک پاراگراف راست چین است </p>



    نکته : مقدار پیش فرض این صفت ltr است. یعنی در صورت مقدار ندادن به این صفت، جهت گیری عنصر ما به صورت پیشفرض از چپ به راست خواهد بود.










  6. #4
    ناظم انجمن

    http://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gif

    [ ]
    تاریخ عضویت
    Feb 2013
    محل سکونت
    زیر اسمون خدا...
    نوشته ها
    16,534
    تشکر
    13,809
    تشکر شده 13,049 بار در 9,484 پست

    پاسخ : آموزش html

    lang: از این صفت معمولا برای تعیین زبان اصلی به کار رفته در صفحه و برای تگ <html> استفاده می شود. شما میتوانید این صفت را برای هر نوع عنصر دیگری که زبان آن غیر از آن چیزی است که در تگ <html> تعریف شده است نیز استفاده کنید. مقداری که این صفت میپذیرد، یکی از کدهای زبانی مانند .... , en , fa , fr , ar خواهد بود. مثال:
    1 <html lang='fa'>

    2 <p lang='en'>This is a English Paragraph</p>

    3 </html>



    style: از این صفت برای تعیین یکسری قواعد و مقادیرشان که در زبان CSS تعریف می شوند برای یک عنصر میتوان استفاده کرد. مثال:
    1 <p style='background-color: #ff00ff;'>این یک پاراگراف است</p>



    نکته : از زبان CSS برای استایل دهی به عناصر و تگ های زبان HTML استفاده می شود.
    title: این صفت مقداری از نوع رشته ساده را دریافت کرده و آن را به صورت tooltip هنگامی که نشانگر موس بر روی عنصر قرار گیرد، نمایش میدهد. مثال:
    1 <p title='سایت گوگل'>Google</p>



    contenteditable: این صفت که یکی از مقادیر true و false را اختیار میکند، مشخص میکند که آیا عنصر موردنظر قابل ویرایش توسط کاریر باشد یا خیر؟ true به معنی قابل ویرایش بودن عنصر است. مثال:
    1 <p contenteditable='true'>این یک پاراگراف قابل ویرایش است.</p>



    hidden: این صفت برای مخفی کردن عناصر استفاده میشود. و یکی از دو مقدار true و false که true به معنی مخفی شدن عنصر است، را به عنوان مقدار می پذیرد. عناصر hidden در صفحه نمایش داده نمیشوند. از این صفت میتوان برای مخفی نگه داشتن یک عنصر از دید کاربر تا زمان برقراری یک شرط استفاده نمود. در این حالت جاوا اسکریپت می تواند با حذف یا تغییر مقدار این صفت، عنصر را مجدداً نمایش دهد. مثال:
    1 <p hidden='true'>این پاراگراف در صفحه مرورگر نمایش داده نمیشود.</p>



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










  7. #5
    ناظم انجمن

    http://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gif

    [ ]
    تاریخ عضویت
    Feb 2013
    محل سکونت
    زیر اسمون خدا...
    نوشته ها
    16,534
    تشکر
    13,809
    تشکر شده 13,049 بار در 9,484 پست

    پیش فرض پاسخ : آموزش html

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

    آشنایی با انواع تگ های قالب بندی متن

    چندین تگ مخصوص قالب بندی متن های نمایشی در صفحه وجود دارد که در ادامه به بررسی هر یک از آن ها و صفات و مقادیرشان خواهیم پرداخت.
    نکته : از این به بعد همراه با من شما نیز کدها را در ویرایشگر متن تایپ کرده و نتیجه کارتان را در مرورگر مشاهده کنید.
    تگ <b>: متن داخل یک عنصر b در صفحه به صورت ضخیم نمایش داده خواهد شد. در کد زیر عبارت "7Lrean.com" در صفحه به صورت ضخیم نمایش داده خواهد شد:
    1 <p><b>7Learn.com :<b> Web Design Javascript Tutorials<p>



    نکته : برای نوشتن کدهای Html در نرم افزار Notepad++ بهتر است به نکات زیر دقت کنید:
    • از منوی Encoding (رمز گذاری) گزینه Encode in UTF-8 را انتخاب کنید تا هنگام تایپ فارسی کلمات به درستی در مرورگر نمایش داده شوند.
    • برای اینکه به برنامه بفهمانیم در حال نوشتن کدهای زبان HTML هستیم از منوی Language گزینه H و سپس گزینه HTML را انتخاب کنید.


    حالا پس از نوشتن کد بالا از منوی file گزینه save را انتخاب کنید. در پنجره ای که باز میشود ابتدا محل ذخیره سازی فایلتان را انتخاب کنید.، سپس در کادر مقابل عبارت file name نام فایل را بنویسید و فایل را با فرمت html. ذخیره کنید.

    نتیجه کد در مرورگر:










  8. 2 کاربر مقابل از این پست *ADRIANA* تشکر کرده اند.


  9. #6
    ناظم انجمن

    http://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gif

    [ ]
    تاریخ عضویت
    Feb 2013
    محل سکونت
    زیر اسمون خدا...
    نوشته ها
    16,534
    تشکر
    13,809
    تشکر شده 13,049 بار در 9,484 پست

    پیش فرض پاسخ : آموزش html

    تگ <i>: از این تگ برای مورب کردن متن استفاده می شود. کلمه "7Learn.com" در کد زیر در مرورگر به صورت مورب (italic) نمایش داده خواهد شد

    1 <p><i>7Learn.com :</i> Web Design Javascript Tutorials</p>



    نتیجه کد در مرورگر:
    تگ <u>: این عنصر محتوای خود را به صورت زیر خط دار(underline) نمایش می دهد. هرچند این عنصر جزء عناصر منسوخ شده به حساب می آید اما هنوز همه مرورگرها از آن به خوبی پشتیبانی می کنند.
    1 <p><u>7Learn.com :</u> Web Design Javascript Tutorials</p>



    نتیجه در مرورگر:
    تگ <s> و <strike> : این دو تگ محتوای خود را به صورت خط خورده نشان می دهند. در واقع یک خط نازک بر روی متن ایجاد میکنند
    1 <p><s>7Learn.com :</s> Web Design Javascript Tutorials</p>



    نتیجه در مرورگر:










  10. 2 کاربر مقابل از این پست *ADRIANA* تشکر کرده اند.


  11. #7
    ناظم انجمن

    http://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gif

    [ ]
    تاریخ عضویت
    Feb 2013
    محل سکونت
    زیر اسمون خدا...
    نوشته ها
    16,534
    تشکر
    13,809
    تشکر شده 13,049 بار در 9,484 پست

    پیش فرض پاسخ : آموزش html

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

    <p>7Learn.com : <sup> Web Design & Javascript Tutorials</sup></p>

    نتیجه در مرورگر:

    تگ <sub> : محتوای این عنصر به صورت زیرنویس (اندیس) نشان داده خواهد شد. زیر نویس ها معمولا به اندازه نصف ارتفاع یک کاراکتر از بقیه کاراکتر ها قرار میگیرند و کمی کوچکتر از متون اطرافشان هستند.

    <p>7Learn.com : <sub> Web Design & Javascript Tutorials</sub></p>

    نتیجه در مرورگر:

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

    <p><big>7Learn.com :</big> Web Design Javascript Tutorials</p>

    نتیجه در مرورگر:

    تگ <small> : این عنصر دقیقا عکس عنصر <big> عمل می کند و محتوایش را یک واحد کوچکتر از متون اطرافش نمایش می دهد.

    <p><small>7Learn.com :</small> Web Design Javascript Tutorials</p>

    نتیجه در مرورگر:

    تگ <del> و <ins> : از تگ <del> برای مشخص کردن تغییراتی که نشان می دهد نویسنده صفحه، محتوایی که از قبل در صفحه موجود بوده است را حذف کرده است، استفاده می شود. این تگ در مقابل تگ <ins> که وظیفه مشخص کردن محتوایی که به تازگی به صفحه اضافه شده است را دارد، قرار میگیرد. تگ <del> موجب نمایش خطی بر روی محتوای خود و تگ <ins> موجب نمایش زیر خط دار متن محتوای خود خواهد شد.

    <p><del>7Learn.com :</del> <ins> Web Design Javascript Tutorials</ins></p>

    نتیجه در مرورگر:












  12. کاربر مقابل از این پست *ADRIANA* تشکر کرده است.


  13. #8
    ناظم انجمن

    http://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gif

    [ ]
    تاریخ عضویت
    Feb 2013
    محل سکونت
    زیر اسمون خدا...
    نوشته ها
    16,534
    تشکر
    13,809
    تشکر شده 13,049 بار در 9,484 پست

    پیش فرض پاسخ : آموزش html

    تگ <abbr> و <acronym> : از این تگ ها برای تعیین عبارت های کامل کلماتی که به صورت مختصر و کوتاه شده در صفحه ذکر شده اند استفاده می شود. هر دو این تگ ها از صفت title برای تعیین عبارت کامل این گونه کلمات پشتیبانی می کنند. مثال زیر یک نمونه از کاربرد تگ <abbr> به همراه صفت title آن را نشان می دهد:
    1 <p> Learn <abbr title='Hyper Text Markup Language'>HTML</abbr></p>



    نتیجه در مرورگر:
    بسیار خب . تا اینجا با 10 تگ برای قالب بندی متون در html آشنا شدیم. در جلسه دوم با بقیه تگ های قالب بندی آشنا خواهیم شد.










  14. 2 کاربر مقابل از این پست *ADRIANA* تشکر کرده اند.


  15. #9
    ناظم انجمن

    http://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gif

    [ ]
    تاریخ عضویت
    Feb 2013
    محل سکونت
    زیر اسمون خدا...
    نوشته ها
    16,534
    تشکر
    13,809
    تشکر شده 13,049 بار در 9,484 پست

    پیش فرض پاسخ : آموزش html

    یادآوری : در پست قبلی با 10 تگ از تگ های قالب بندی متن آشنا شدید که عبارتند از :
    1 <b> </b>

    2 <i> </i>

    3 <u> </u>

    4 <s> </s> یا <strike> </strike>

    5 <sup> </sup>

    6 <sub> </sub>

    7 <big> </big>

    8 <small> </small>

    9 <del> </del> و <ins> </ins>

    10 <abbr> </abbr> و <acronym> </acronym>



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


    تگ <hn>: زبان HTML از شش سطح تیتر (Heading) ها پشتیبانی میکند. این 6 سطح با تگ های <h1> و <h2> و <h3> و <h4> و <h5> و <h6> ایجاد می شوند. مرورگرها عنصر <h1> را در بزرگترین و عنصر <h6> را در کوچکترین اندازه از بین این 6 سطح نمایش می دهند. به مثال زیر دقت کنید:
    1 <h1>7 Learn</h1>

    2 <h2>7 Learn</h2>

    3 <h3>7 Learn</h3>

    4 <h4>7 Learn</h4>

    5 <h5>7 Learn</h5>

    6 <h6>7 Learn</h6>



    نتیجه کد در مرورگر:
    نکته : توجه داشته باشید که منظور ما از تگ <hn>، حرف n عدد متغییری است بین 1 تا 6 .
    هر شش عنصر فوق دارای صفت های زیر هستند که در ادمه بررسی خواهیم کرد:
    1 align class id style title dir lang



    align: این صفت نحوه چینش متن داخل heading را کنترل میکند، و چهار مقدار زیر را می پذیرد:

    • left: تیتر در سمت چپ صفحه قرار میگیرد.
    • center: تیتر در وسط صفحه قرار میگیرد.
    • right: تیتر در سمت راست صفحه قرار میگیرد.
    • justify: متن داخل heading را از هر دو طرف تراز میکند.

    مثال:
    1 <h1 align="left">Left-Aligned Heading</h1>

    2 <p>This heading uses the align attribute with a value of left.</p>

    3 <h1 align="center">Centered Heading</h1>

    4 <p>This heading uses the align attribute with a value of center.</p>

    5 <h1 align="right">Right-Aligned Heading</h1>

    6 <p>This heading uses the align attribute with a value of right.</p>



    نتیجه در مرورگر:
    بقیه صفت ها نیز جزء صفات عمومی هستند که قبلا آنها را معرفی کرده ایم










  16. 2 کاربر مقابل از این پست *ADRIANA* تشکر کرده اند.


  17. #10
    ناظم انجمن

    http://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gifhttp://www.iranjoman.com/images/iranjoman/neshan2.gif

    [ ]
    تاریخ عضویت
    Feb 2013
    محل سکونت
    زیر اسمون خدا...
    نوشته ها
    16,534
    تشکر
    13,809
    تشکر شده 13,049 بار در 9,484 پست

    پاسخ : آموزش html

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

    1 <p>This is a Paragraph</p>

    2 <p>This is Another Paragraph</p>



    نتیجه در مرورگر:
    تگ </ br>: برای ایجاد شکست در خط و رفتن به خط جدید از این تگ استفاده میکنیم.این عنصر جزء عناصر تهی بوده و به تگ پایانی احتیاج ندارد. شما از این عنصر می توانید به شکل <br> نیز استفاده کنید که مخصوص نسخه های قدیمی HTML بوده. اما در نسخه XHTML می بایست بعد از br> یک فاصله خالی، و سپس / و در انتها یک علامت < قرار گیرد.
    1 <p>7Learn.com :<br />Web Design and Javascript Tutorials</p>



    نتیجه در مرورگر:
    تگ <nobr>: این تگ نوعی در مقابل </ br> قرار دارد. به دلیل که متن داخل این تگ به هیچ عنوان شکسته نخواهد شد مگر اینکه تگ </ br> داخل آن قرار گیرد. استفاده از این تگ باید با احتیاط انجام شود زیرا ممکن است موجب ایجاد اسکرول افقی در پنجره مرورگر شود که معمولا حالتی عذاب آور برای کاربر خواهد بود!
    1 <p><nobr>7Learn.com : Web Design and Javascript Tutorials</nobr></p>



    نتیجه در مرورگر:
    می بینید که متن ما شکسته نمی شود، و پنجره مرورگر به حال اسکرول در آمده است.
    تگهای <pre> و <code>: گاهی اوقات می خواهیم متنمان دقیقا به همان شکلی که نوشته می شود در نمایش داده شود و از فاصله های خالی، فاصله های Tab و شکست های خط چشم پوشی نشود. هر آنچه که بین تگ <pre> و <pre/> قرار می گیرد دقیقا به همان شکلی که در source صفحه نوشته شده است در صفحه نشان داده خواهد شد. این تگ معمولا به همراه تگی با نام <code> که متن داخل آن به یکی از فونت های از نوع monospace همانند courier new نشان داده می شود به کار می رود. (فونت های نوع monospace فونت هایی هستند که هر کاراکتر آن ها به یک اندازه فضا اشغال می کنند.)
    بیشترین استفاده از این تگ ها در نمایش کدهای کامپیوتری و برنامه نویسی است. در مثال زیر نمونه کدی به زبان جاوا اسکریپت در داخل تگ <pre> و <code> قرار گرفته است که در صفحه دقیقا به همان شکل نمایش داده خواهد شد:
    1 <code>

    2 <pre>

    3 function testFunction(strText) {

    4 alert (strText)

    5 }

    6 </pre>

    7 </code>



    نتیجه در مرورگر:










  18. 3 کاربر مقابل از این پست *ADRIANA* تشکر کرده اند.


+ ارسال موضوع جدید
صفحه 1 از 6 1 2 3 4 5 ... آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. کتاب آموزش html با زبان ساده – مبتدی تا پیشرفته
    توسط NOOB9876 در انجمن اسکریپت های تحت وب دیگر
    پاسخ ها: 0
    آخرين نوشته: 02-19-2012, 22:28
  2. HTML Password Lock 5.0 - نرم افزار ایجاد یوزر و پسورد در صفحات HTML
    توسط ARMAN²Afm در انجمن معرفی و دانلود نرم افزار
    پاسخ ها: 0
    آخرين نوشته: 08-06-2010, 19:10
  3. اینترنت و html
    توسط iman151 در انجمن کتابها و مقالات اینترنت وشبکه
    پاسخ ها: 0
    آخرين نوشته: 03-21-2010, 16:55
  4. استفاده از لیست های html در صفحه
    توسط amin در انجمن برنامه نويسی Client Side
    پاسخ ها: 0
    آخرين نوشته: 03-18-2010, 19:49

تعداد اعضای بازدید کننده از این تایپیک : 2

بازدید کنندگان :  (نمایش کلی)

  1. Stevenanits
  2. TreawnTrairty

کلمات کلیدی این موضوع

Bookmarks

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •