0 0 تومان

دسته‌بندی‌ها

تبلیغات اینترنتی
آموزش طراحی سایت (HTML CSS Javascript) | آتریا
آموزش سی شارپ
آموزش فتوشاپ

css

  • DOCTYPE چیست؟

    اعلان <DOCTYPE!> در ابتدای صفحه، به مرورگر کمک می کند تا صفحه وب را به درستی نمایش دهد.

    اعلان <DOCTYPE!>

    Wiki

    روی وب، صفحات متفاوت زیادی وجود دارد. اگر مرورگر بداند که صفحه مورد نظر از چه نوعی است، می تواند به درستی آنرا نمایش دهد.

    همچنین نسخه های متفاوت زیادی از HTML وجود دارد، و اگر مرورگر نسخه دقیق HTML استفاده شده در صفحه را بداند، می تواند 100% درست آنرا نمایش دهد.

    <DOCTYPE!> یک تگ HTML نیست بلکه یک اعلان است و به مرورگر می گوید چه نسخه HTMLی در صفحه استفاده شده است.

    در این آموزش از HTML5 استفاده شده است.

    مثال (DOCTYPE چیست؟)

    یک سند HTML با یک اعلان که مشخص می کند، HTML5 در صفحه استفاده شده است:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>

    <body>
    The content of the document......
    </body>

    </html>

    نسخه های HTML 

    Wiki

    از اولین روزهای پیدایش وب، نسخه های زیادی از HTML وجود داشته است.

    نسخه سال
    HTML 1991
    HTML+ 1993
    HTML 2.0 1995
    HTML 3.2 1997
    HTML 4.01 1999
    XHTML 1.0 2000
    HTML5 2012
    XHTML5 2013

    اعلان های متداول

    Wiki

    HTML5

    <!DOCTYPE html>

    HTML 4.01

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    XHTML 1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • iframe چیست؟

    یک iframe برای نمایش صفحه وب، درون یک صفحه وب دیگر استفاده می شود.

    دستور اضافه کردن یک iframe

    <iframe src="/URL"></iframe>

    URL به مکان صفحه مجزای دیگری اشاره دارد.

    تنظیم عرض و طول iframe

    Wiki

    خصوصیت height و width برای تعیین طول و عرض یک iframe استفاده می شود.

    مقدار این خصوصیت ها به طور پیش فرض بر حسب پیکسل بیان می شود اما می توان آنرا به درصد نیز بیان کرد. (مثل 80 %)

    مثال (iframe چیست؟)

    <iframe src="/demo_iframe.htm" width="200" height="200"></iframe>
    خودتان امتحان کنید »

    حذف Border یا خطوط حاشیه iframe

    Wiki

    خصوصیت frameborder مشخص می کند آیا حاشیه نمایش داده شود یا نه.

    با تنظیم آن به عدد صفر حاشیه برداشته می شود.

    مثال (iframe چیست؟)

    <iframe src="/demo_iframe.htm" frameborder="0"></iframe>
    خودتان امتحان کنید »

    استفاده از iframe به عنوان مقصد یک لینک

    Wiki

    یک iframe می تواند به عنوان مقصد یک لینک استفاده شود.

    خصوصیت target در یک لینک باید به خصوصیت name در عنصر iframe اشاره کند.

    مثال (iframe چیست؟)

    <iframe src="/demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.beyamooz.com" target="iframe_a">beyamooz.com</a></p>
    خودتان امتحان کنید »

    تگ iframe

    تگ توضیح
    <iframe>

    تعریف یک صفحه داخل صفحه جاری (frame)

  • url چیست؟

    یک URL همان آدرس وب می باشد.

    Wiki

    یک URL می تواند ترکیبی از حروف باشد مثل beyamooz.com یا می تواند یک IP یا Internet Protocol باشد. بیشتر مردم هنگام گشت زنی در اینترنت از نام وب سایت استفاده می کنند زیرا به خاطر سپردن یک نام آسان تر است تا یک IP مثل 192.68.20.50.

    URL یا (Uniform Resource Locator)

    Wiki

    هنگامی که روی یک لینک در صفحه HTML کلیک می کنید، تگ <a> به آدرسی در شبکه جهانی وب اشاره می کند.

    یک URL یا (Uniform Resource Locator) برای فراخوانی یک سند (یا داده هایی دیگر) در اینترنت استفاده می شود.

    یک آدرس وب مثل http://beyamooz.com/index.php/design-page/html از الگوی زیر پیروی می کند:

    scheme://host.domain:port/path/filename

    توضیح

    Wiki

    • scheme:نوع سرویس اینترنتی را تعریف می کند. رایج ترین نوع http می باشد.
    • host: میزبان دامنه (domain host) را تعریف می کند. ( host پیش فرض برای http حروف www می باشد.)
    • domain: نام دامنه اینترنی را تعریف می کند. مثل w3school.com
    • port: در اینجا port number در host تعریف می شود. ( port number به طور پیش فرض برای http عدد 80 می باشد.)
    • path: یک مسیر را در سرور تعریف می کند. (اگر حذف شود، سند باید در فولدر اصلی وب سایتذخیره شده باشد.)
    • file name: نام یک سند یا منبع را تعریف می کند.

    Scheme های رایج

    Wiki

    در جدول زیر لیستی از Scheme های رایج ارائه شده است.

    Scheme مخفف در چه صفحاتی این  scheme استفاده می شود
    http

    HyperText Transfer Protocol

    (پروتکل انتقال ابر متن)

    صفحات وب به صورت معمول با http شروع می شوند. در اینجا اطلاعات رمزگذاری نمی شوند.
    https

    Secure HyperText Transfer Protocol

    (پروتکل انتقال ابر متن به صورت ایمن)

    تمام اطلاعات رمزگذاری شده اند و اطلاعات بصورت ایمن ارسال می شوند.
    ftp

    File Transfer Protocol
    (پروتکل انتقال فایل)

    برای دانلود و آپلود فایل ها در وب سایت استفاده می شود.
    file  

    فایلی روی کامپیوترتان

  • استفاده از css در HTML

    CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.

    Wiki

    به چگونگی نمایش متن ها نگاه کنید...!

    این متن قرمز است.

    رنگ این متن آبی است و نام فونت آن Times است.

    اندازه این متن 30 پیکسل است.

    خودتان امتحان کنید

    مثال - خودتان امتحان کنید

    استفاده از Styleها، داخل صفحه HTML
    چگونه Styleها را در قسمت <head> صفحه اضافه کنیم.

    لینکی که خط زیر ندارد
    چگونه یک لینک بدون خط زیر (underline) بسازیم.

    لینک به یک فایل CSS خارجی
    چگونه از تگ <link> برای اضافه کردن فایل CSS خارجی استفاده کنیم.

    تعیین شکل نمایش عناصر HTML با CSS

    Wiki

    CSSهمراه با HTML4 معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند.

    برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد:

    • برگه های استایل خارجی یا External style sheet
    • برگه های استایل داخلی یا Internal style sheet
    • استایل درون تگی یا Inline style

    روش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است. 

    برای کسب اطلاعات بیشتر درباره CSS می توانید به لینک روبرو مراجعه نمایید: آموزش CSS

    استایل درون تگی - Inline Styles

    Wiki

    قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.

    طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:

    <p style="color:blue;margin-left:20px;">This is a paragraph.</p>

    مثال: تنظیم رنگ پس زمینه عناصر HTML

    خصوصیت background-color رنگ پس زمینه یک عنصر HTML را تنظیم می کند:

    مثال (استفاده از css در HTML)

    <!DOCTYPE html>
    <html>

    <body style="background-color:yellow;">
    <h2 style="background-color:red;">This is a heading</h2>
    <p style="background-color:green;">This is a paragraph.</p>
    </body>

    </html>
    خودتان امتحان کنید »

    خصوصیت background-color از خصوصیت قدیمی و منسوخ شده bgcolor ساخته شده است.

    خودتان امتحان کنید: تنظیم رنگ پس زمینه با استفاده از روش قدیمی

    مثال: تنظیم رنگ و اندازه و فونت عناصر HTML

    خصوصیات font-family , color , font-size به ترتیب اندازه، رنگ و فونت متن را تنظیم می کنند:

    مثال (استفاده از css در HTML)

    <!DOCTYPE html>
    <html>

    <body>
    <h1 style="font-family:verdana;">A heading</h1>
    <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
    </body>

    </html>
    خودتان امتحان کنید »

    خصوصیات font-family , color , font-size از تگ قدیمی و منسوخ شده <font> ساخته شده اند.

    مثال: ترازبندی متن

    خصوصیت text-align در جهت محور X یک متن را ترازبندی می کند:

    مثال (استفاده از css در HTML)

    <!DOCTYPE html>
    <html>

    <body>
    <h1 style="text-align:center;">Center-aligned heading</h1>
    <p>This is a paragraph.</p>
    </body>

    </html>
    خودتان امتحان کنید »

    خصوصیت text-align از تگ قدیمی و منسوخ شده <center> ساخته شده است.

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

    برگه های استایل داخلی - Internal Style Sheet

    Wiki

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

    Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.

    <head>
    <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}
    </style>
    </head>

    برگه های استایل خارجی - External Style Sheet

    Wiki

    زمانی که Styleها در چندین صفحه مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.

    هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.

    <head>
    <link rel="stylesheet" type="text/css" href="/mystyle.css" />
    </head>

    تگ های Style در HTML

    تگ توضیحات
    <style>

    برای تعریف اطلاعات طرح بندی یک سند html استفاده می شود. تگ <style> باید در قسمت head صفحه قرار داده شود.
    <link />

    هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.

    تگ ها و خصوصیات منسوخ شده

    Wiki

    در HTML4 چندین تگ و خصوصیت برای Styleدهی استفاده می شود که این تگ ها در نسخه جدید HTMLپشتیبانی نمی شود.

    به همین منظور از استفاده عناصر و خصوصیات زیر اجتناب نمایید:

    • <font>
    • <center>
    • <strike>
    • color
    • bgcolor

  • استفاده از نام رنگ در HTML

    استفاده از نام رنگ ها در تمام مرورگرها پشتیبانی می شود

    Wiki

    در HTML و CSS می توان از نام رنگ، برای مشخص کردن پس زمینه یک عنصر استفاده کرد.

    نام 147 رنگ همراه با مقدار HEX آنها در جدول زیر لیست شده است. (16 رنگ اصلی همراه با 130 رنگ ترکیبی)

    توجه: نام 16 رنگ اصلی شامل: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

    مرتب شده براساس نام رنگ

    نام رنگ HEX رنگ
    AliceBlue #F0F8FF  
    AntiqueWhite #FAEBD7  
    Aqua #00FFFF  
    Aquamarine #7FFFD4  
    Azure #F0FFFF  
    Beige #F5F5DC  
    Bisque #FFE4C4  
    Black #000000  
    BlanchedAlmond #FFEBCD  
    Blue #0000FF  
    BlueViolet #8A2BE2  
    Brown #A52A2A  
    BurlyWood #DEB887  
    CadetBlue #5F9EA0  
    Chartreuse #7FFF00  
    Chocolate #D2691E  
    Coral #FF7F50  
    CornflowerBlue #6495ED  
    Cornsilk #FFF8DC  
    Crimson #DC143C  
    Cyan #00FFFF  
    DarkBlue #00008B  
    DarkCyan #008B8B  
    DarkGoldenRod #B8860B  
    DarkGray #A9A9A9  
    DarkGrey #A9A9A9  
    DarkGreen #006400  
    DarkKhaki #BDB76B  
    DarkMagenta #8B008B  
    DarkOliveGreen #556B2F  
    Darkorange #FF8C00  
    DarkOrchid #9932CC  
    DarkRed #8B0000  
    DarkSalmon #E9967A  
    DarkSeaGreen #8FBC8F  
    DarkSlateBlue #483D8B  
    DarkSlateGray #2F4F4F  
    DarkSlateGrey #2F4F4F  
    DarkTurquoise #00CED1  
    DarkViolet #9400D3  
    DeepPink #FF1493  
    DeepSkyBlue #00BFFF  
    DimGray #696969  
    DimGrey #696969  
    DodgerBlue #1E90FF  
    FireBrick #B22222  
    FloralWhite #FFFAF0  
    ForestGreen #228B22  
    Fuchsia #FF00FF  
    Gainsboro #DCDCDC  
    GhostWhite #F8F8FF  
    Gold #FFD700  
    GoldenRod #DAA520  
    Gray #808080  
    Grey #808080  
    Green #008000  
    GreenYellow #ADFF2F  
    HoneyDew #F0FFF0  
    HotPink #FF69B4  
    IndianRed #CD5C5C  
    Indigo #4B0082  
    Ivory #FFFFF0  
    Khaki #F0E68C  
    Lavender #E6E6FA  
    LavenderBlush #FFF0F5  
    LawnGreen #7CFC00  
    LemonChiffon #FFFACD  
    LightBlue #ADD8E6  
    LightCoral #F08080  
    LightCyan #E0FFFF  
    LightGoldenRodYellow #FAFAD2  
    LightGray #D3D3D3  
    LightGrey #D3D3D3  
    LightGreen #90EE90  
    LightPink #FFB6C1  
    LightSalmon #FFA07A  
    LightSeaGreen #20B2AA  
    LightSkyBlue #87CEFA  
    LightSlateGray #778899  
    LightSlateGrey #778899  
    LightSteelBlue #B0C4DE  
    LightYellow #FFFFE0  
    Lime #00FF00  
    LimeGreen #32CD32  
    Linen #FAF0E6  
    Magenta #FF00FF  
    Maroon #800000  
    MediumAquaMarine #66CDAA  
    MediumBlue #0000CD  
    MediumOrchid #BA55D3  
    MediumPurple #9370D8  
    MediumSeaGreen #3CB371  
    MediumSlateBlue #7B68EE  
    MediumSpringGreen #00FA9A  
    MediumTurquoise #48D1CC  
    MediumVioletRed #C71585  
    MidnightBlue #191970  
    MintCream #F5FFFA  
    MistyRose #FFE4E1  
    Moccasin #FFE4B5  
    NavajoWhite #FFDEAD  
    Navy #000080  
    OldLace #FDF5E6  
    Olive #808000  
    OliveDrab #6B8E23  
    Orange #FFA500  
    OrangeRed #FF4500  
    Orchid #DA70D6  
    PaleGoldenRod #EEE8AA  
    PaleGreen #98FB98  
    PaleTurquoise #AFEEEE  
    PaleVioletRed #D87093  
    PapayaWhip #FFEFD5  
    PeachPuff #FFDAB9  
    Peru #CD853F  
    Pink #FFC0CB  
    Plum #DDA0DD  
    PowderBlue #B0E0E6  
    Purple #800080  
    Red #FF0000  
    RosyBrown #BC8F8F  
    RoyalBlue #4169E1  
    SaddleBrown #8B4513  
    Salmon #FA8072  
    SandyBrown #F4A460  
    SeaGreen #2E8B57  
    SeaShell #FFF5EE  
    Sienna #A0522D  
    Silver #C0C0C0  
    SkyBlue #87CEEB  
    SlateBlue #6A5ACD  
    SlateGray #708090  
    SlateGrey #708090  
    Snow #FFFAFA  
    SpringGreen #00FF7F  
    SteelBlue #4682B4  
    Tan #D2B48C  
    Teal #008080  
    Thistle #D8BFD8  
    Tomato #FF6347  
    Turquoise #40E0D0  
    Violet #EE82EE  
    Wheat #F5DEB3  
    White #FFFFFF  
    WhiteSmoke #F5F5F5  
    Yellow #FFFF00  
    YellowGreen #9ACD32  

  • پاراگراف ها در HTML

    پاراگراف ها، قسمت عمده ای از یک سند HTMLرا تشکیل می دهند.

    پاراگراف ها در HTML

    Wiki

    پاراگراف ها به وسیله تگ <p> تعریف می شوند.

    مثال (پاراگراف ها در HTML)

    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
    خودتان امتحان کنید »

    نکته: مرورگرها به طور خودکار یک خط خالی را قبل و بعد از پاراگراف اضافه می کند.

    تگ پایان را فراموش نکنید

    Wiki

    اغلب مرورگرها حتی اگر تگ پایان را هم نگذاریم صفحه را به درستی نمایش می دهند.

    مثال (پاراگراف ها در HTML)

    <p>This is a paragraph
    <p>This is another paragraph
    خودتان امتحان کنید »

    مثال بالا در بیشتر مرورگرها عمل می کند، اما به آن اطمینانی نیست. فراموش کردن تگ پایان می تواند نتایج غیر منتظره یا خطاهایی را ایجاد کند.

    تذکر: نسخه های آینده HTML به شما اجازه نمی دهد که تگ پایان را فراموش کنید.

    رفتن به خط جدید در HTML

    Wiki

    از تگ </ br> برای رفتن به خط جدید بدون اینکه پاراگراف جدیدی را شروع کنیم استفاده می شود.

    مثال (پاراگراف ها در HTML)

    <p>This is<br />a para<br />graph with line breaks</p>
    خودتان امتحان کنید »

    عنصر </ br> یک عنصر تهی در HTML است. این عنصر دارای تگ پایان نیست.

    <br> یا </ br>

    Wiki

    در XHTML و XML عناصر بدون تگ پایان(تگ بسته) مجاز نمی باشند.

    اگر چه <br>در تمام مرورگرها کار می کند، اما نوشتن </ br> در برنامه های XHTML و XML بهتر عمل می کند.

     خروجی HTML - نکات مفید

    Wiki

    شما نمی توانید مطمئن شوید که کدهای HTML چگونه نمایش داده خواهد شد. صفحات نمایش بزرگ یا کوچک و تغییر اندازه پنجره ها نتایج متفاوتی را به همراه دارد.

    هنگام نوشتن کدهای HTML، نباید انتظار داشته باشید که فاصله ها یا خط های اضافه در کدهای HTML در خروجی مرورگر نیز فاصله یا خط اضافه دیده شوند.

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

    خودتان امتحان کنید

    (این مثال بعضی از مشکلات فرمت دهی را در HTML نشان می دهد.)

    مشکل نمایش اشعار در مرورگر

    مثال (پاراگراف ها در HTML)

    <p>شعر زیر، در مرورگر پشت سرهم و در یک خط نمایش داده خواهد شد</p>

    <p>

      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.

    </p>

    خودتان امتحان کنید »

    عنصر <pre> در HTML

    با استفاده از عنصر <pre> می توانید فاصله ها و خط های اضافی داخل متن را به همان صورت در مرورگر نمایش دهید:

    مثال (پاراگراف ها در HTML)

    <p>فاصله و خط های اضافی در شعر زیر به همان صورت نمایش داده خواهد شد</p>

    <pre>
     
      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.

    </pre>

    خودتان امتحان کنید »

    مثال - خودتان امتحان کنید

    HTML paragraphs
    چگونه پاراگراف ها در مرورگر نشان داده می شود.

    Line breaks
    رفتن به خط جدید در سندهای HTML.

    Poem problems
    بعضی مشکلات در فرمت دهی در HTML.

    More paragraphs
    رفتارهای پیش فرض در پاراگراف ها.

    منبع تگ های HTML

    منبع تگ های HTML حاوی اطلاعات اضافی در مورد عناصر HTML و خصوصیت های آن ها می باشد.

    تگ توضیح
    <p> یک پاراگراف را تعریف می کند.
    <br /> خط جدیدی را وارد می کند.

  • تصاویر در HTML

    مثال (تصاویر در HTML)

    Norwegian Mountain TripPulpit Rock

    خودتان امتحان کنید »

    مثال - خودتان امتحان کنید

    Wiki

    Insert images
    نحوه درج تصویر در سند HTML.

    Insert images from different locations
    نحوه درج تصویر از پوشه ای دیگر یا از سروری دیگر.

    (شما می توانید مثال های بیشتری را در پایین این صفحه مشاهده کنید.)

    تگ <img> و خصوصیت Src

    Wiki

    در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.

    تگ <img> خالی می باشد(یک عنصر تهی می باشد)، به این معنی که این تگ تنها حاوی خصوصیت ها می شود و تگ بسته ای ندارد.

    برای نمایش تصویر در صفحه وب، به خصوصیت src نیاز دارید. src مخفف کلمه source می باشد. مقدار این خصوصیت آدرس URL تصویری است که می خواهید نمایش داده شود. 

    فرم نوشتاری تگ img

    <img src="/url" alt="some_text"/>

    URL اشاره دارد به مکانی که تصویر در آن ذخیره شده است. یک تصویر با نام boat.gif، در پوشه images در سایت beyamooz.com واقع شده که دارای URl به این صورت http://beyamooz.com/images/boat.gif می باشد.

    مرورگر تصویری را که در تگ <img> وجود دارد را نشان می دهد. اگر شما تگ تصویر را بین دو پاراگراف قرار دهید، مرورگر ابتدا پاراگراف اول را نشان می دهد، سپس عکس و بعد از آن پاراگراف دوم را می آورد.

    خصوصیت ALT

    Wiki

    خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند، که اگر عکس نمایش داده نشود آن متن نمایش داده می شود.

    ذکر خصوصیت alt الزامی است و بدون آن صفحه وب، استاندارد نخواهد بود.

    <img src="/boat.gif" alt="Big Boat" />

    اگر کاربری به دلایلی (مثل کند بودن اتصال، خطایی در خصوصیت scr رخ دهد یا اگر کاربر از یک screen reader استفاده کند) نتواند عکس را مشاهده کند، خصوصیت alt اطلاعاتی در مورد عکس ارائه می دهد.

    تنظیم طول و عرض یک عکس

    Wiki

    خصوصیت height و width برای مشخص کردن طول و عرض یک عکس استفاده می شود.

    مقدار این خصوصیت ها به طور پیش فرض بر اساس پیکسل مشخص می شوند.

    <img src="/pulpit.jpg" alt="Pulpit rock" width="304" height="228" />

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

    نکات اساسی و مفید

    Wiki

    نکته: اگر یک فایل HTML حاوی ده تصویر باشد، یازده فایل (شامل 10 فایل تصویر و فایل HTML صفحه) برای نمایش صحیح صفحه نیاز می باشد. بارگذاری تصاویر زمان بر است، بنابراین پیشنهاد ما این است که: از تصاویر، با دقت استفاده کنید.

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

    مثال - خودتان امتحان کنید

    Wiki

    Aligning images
    نحوه تراز کردن تصویر در یک متن.

    Let the image float
    چگونه اجازه دهیم یک تصویر در سمت چپ یا راست یک پارگراف قرار گیرد.

    Make a hyperlink of an image
    چگونه از یک تصویر به عنوان لینک استفاده کنیم.

    Create an image map
    چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.

    تگ های تصویر

    Tag Description
    <img />

    تعریف یک تصویر
    <map>

    تعریف یک image map
    <area />

    تعریف ناحیه ای به صورت لینک در یک image-map

  • جداول در HTML

    جداول در HTML

    کالری نام میوه
    44% سیب
    23% موز
    13% پرتقال
    10% دیگر موارد

    مثال - خودتان امتحان کنید

    Wiki

    Tables
    نحوه ایجاد جداول در سند HTML.

    Table borders
    چگونه لبه های جدول را تنظیم کنیم.

    (مثال های بیشتر را می توانید در پایین صفحه ببینید.)

    جداول در HTML

    Wiki

    جداول به وسیله تگ <table> تعریف می شوند.

    یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شوند)

    td مخفف "table data" است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.

    <table>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

    کد HTML بالا چگونه در یک مرورگر دیده می شود:

    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

    خصوصیت Border

    Wiki

    اگر شما خصوصیت Border را برای جدولی مشخص نکنید، جدول بدون لبه نمایش داده می شود. گاهی اوقات این مورد می تواند کاربردی باشد، اما بیشتر مواقع ما نیاز به نمایش لبه ها داریم.

    برای نمایش لبه ها باید خصوصیت Border را تنظیم کنیم.

    مثال (جداول در HTML)

    <table border="1" style="width:300px">
    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    </table>

    خودتان امتحان کنید »
    Note توجه داشته باشید که اگر بخواهید طبق استاندارهای HTML پیش بروید نباید از ویژگی border استفاده کنید.
    برای تنظیم لبه ها بهتر است از CSSها استفاده کنید.

    با استفاده از خصوصیت border در CSS می توانید لبه ها را تنظیم نمایید:

    مثال (جداول در HTML)

    <style>
    table,th,td
    {
    border:1px solid black;
    }
    </style>

    خودتان امتحان کنید »

    بیاد داشته باشید که لبه ها برای دور جدول و تمام سلول های جدول، تنظیم خواهد شد.

    تبدیل لبه های دو خطی به یک خطی

    Wiki

    با استفاده از خصوصیت border-collapse در CSS می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید:

    مثال (جداول در HTML)

    <style>
    table,th,td
    {
    border:1px solid black;
    border-collapse:collapse
    }
    </style>

    خودتان امتحان کنید »

    تنظیم فاصله ی محتوای سلول ها از لبه

    Wiki

    با استفاده از خصوصیت padding در CSS می توانید فاصله محتویات یک سلول را از لبه هایش تنظیم کنید.

    اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.

    مثال (جداول در HTML)

    th,td
    {
    padding:15px;
    }

    خودتان امتحان کنید »

    تنظیم فاصله سلول ها از یکدیگر

    Wiki

    با استفاده از خصوصیت border-spacing در CSS می توانید فاصله سلول ها از یکدیگر را تنظیم کنید.

    مثال (جداول در HTML)

    table
    {
    border-spacing:5px;
    }

    خودتان امتحان کنید »

    عنوان جدول (Header)

    Wiki

    اطلاعات سرتیتر در یک جدول به وسیله تگ <th> تعریف می شود.

    بیشتر مرورگرها متن را در عنصر <th> به صورت برجسته (bold) و وسط چین نمایش می دهند.

    مثال (جداول در HTML)

    <table style="width:300px">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    </table>

    خودتان امتحان کنید »

    با استفاده از خصوصیت text-align در CSS، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم:

    مثال (جداول در HTML)

    th
    {
    text-align:left;
    }

    خودتان امتحان کنید »

    مثال بیشتر - خودتان امتحان کنید

    Wiki

    Tables without borders
    چگونه جدولی بدون خطوط حاشیه (Border) ایجاد کنیم.

    Table headers
    نحوه ایجاد سرتیترهای جدول.

    Table with a caption
    نحوه اضافه کردن عنوان به یک جدول.

    Table cells that span more than one row/column
    چگونگی تعریف سلول های جدول که بیش از یک سطر یا بیش از یک ستون را شامل می شوند.

    Tags inside a table
    نحوه نمایش عناصر درون عناصر دیگر.

    Cell padding
    چگونه از cellpadding برای ایجاد فاصله بیشتر بین محتوای سلول با حاشیه سلول استفاده کنیم.

    Cell spacing
    چگونه از cellspacing برای افزایش فاصله بین سلول ها استفاده کنیم.

    The frame attribute
    چگونه از خصوصیت "frame" برای کنترل حاشیه های دور جدول استفاده کنیم.

    تگ های جدول در HTML

    Tag توضیحات
    <table> تعریف جدول
    <th> تعریف عنوان جدول (table header)
    <tr> تعریف سطر جدول (table row)
    <td> تعریف سلول جدول (table data)
    <caption> تعریف تیتر جدول (table caption)
    <colgroup> برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
    <col> برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
    <thead> عناوین ستون های یک جدول (header) را گروه بندی می کند
    <tbody> محتویات بدنه یک جدول را گروه بندی می کند
    <tfoot> محتویات انتهای ستون های یک جدول (footer) را گروه بندی می کند

  • چکیده مطالب HTML در یک نگاه

    چکیده مطالب html در یک نگاه

    Wiki

    خلاصه ای از مطالب ارائه شده در مورد HTML در زیر ارائه شده است. آنرا چاپ کنید، تا کنید و در مکانی امن قرار دهید.

    تگ های اصلی یک سند HTML

    <!DOCTYPE html>
    <html>
      <head>
        <title>Title of document goes here</title>
      </head>
      <body>
          Visible text goes here...
      </body>
    </html>

    تگ عنوان در HTML

    Wiki

    <h1>Largest Heading</h1>
    <h2> . . . </h2>
    <h3> . . . </h3>
    <h4> . . . </h4>
    <h5> . . . </h5>
    <h6>Smallest Heading</h6>

    تگ های متن در HTML

    Wiki

    <p>This is a paragraph</p>
    <br /> (line break)
    <hr /> (horizontal rule)
    <pre>This text is preformatted</pre>

    تگ های فرمت بندی متن در HTML

    Wiki

    <em>This text is emphasized</em>
    <strong>This text is strong</strong>
    <code>This is some computer code</code>
    <b>This text is bold</b>
    <i>This text is italic</i>

    تگ لینک در HTML

    Wiki

    Ordinary link:
       <a href="http://www.example.com/">Link-text goes here</a>
    Image-link:
       <a href="http://www.example.com/"><img src="/URL" alt="Alternate Text" /></a>
    Mailto link:
       <a href="mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید">Send e-mail</a>
    Bookmark:
    <a name="tips">Tips Section</a>
    <a href="#tips">Jump to the Tips Section</a>

    تگ لیست های نامرتب در HTML

    Wiki

    <ul>
      <li>Item</li>
      <li>Item</li>
    </ul>

    تگ لیست های مرتب در HTML

    Wiki

    <ol>
      <li>First item</li>
      <li>Second item</li>
    </ol>

    تگ لیست های تعریفی در HTML

    Wiki

    <dl>
      <dt>First term</dt>
        <dd>Definition</dd>
      <dt>Next term</dt>
        <dd>Definition</dd>
    </dl>

    تگ جدول در HTML

    Wiki

    <table border="1">
      <tr>
        <th>Tableheader</th>
        <th>Tableheader</th>
      </tr>
      <tr>
        <td>sometext</td>
        <td>sometext</td>
      </tr>
    </table>

    تگ تصویر در HTML

    Wiki

    <img src="/URL" alt="Alternate Text" height="42" width="42">

    تگ Styles در HTML

    Wiki

    <style type="text/css">
      h1 {color:red;}
      p {color:blue;}
    </style>

    <div>A block-level section in a document</div>
    <span>An inline section in a document</span>

    تگ iframe در HTML (صفحه ای داخل صفحه جاری)

    Wiki

    <iframe src="/demo_iframe.htm"></iframe>

    تگ فرم در HTML (ارسال اطلاعات به سرور)

    Wiki

    <form action="http://www.example.com/test.asp" method="post/get">
      <input type="text" name="email" size="40" maxlength="50" />
      <input type="password" />
      <input type="checkbox" checked="checked" />
      <input type="radio" checked="checked" />
      <input type="submit" value="Send" />
      <input type="reset" />
      <input type="hidden" />

      <select>
        <option>Apples</option>
        <option selected="selected">Bananas</option>
        <option>Cherries</option>
      </select>

      <textarea name="comment" rows="60" cols="20"></textarea>
    </form>

    کاراکترهای رزرو شده در HTML

    Wiki

    &lt; is the same as <
    &gt; is the same as >
    &#169; is the same as ©

  • خصوصیت ها در HTML

    خصوصیت ها اطلاعات بیشتری در مورد عناصر HTML می دهند.

    خصوصیت ها در HTML

    Wiki

    • تمام عناصر در HTML دارای خصوصیت هستند.
    • خصوصیت ها اطلاعات بیشتری در مورد یک عنصر می دهند.
    • خصوصیت ها همیشه در تگ شروع نوشته می شوند.
    • خصوصیت ها به صورت روبرو نوشته می شوند: ("مقدار"=نام خصوصیت)

    مثال:

    لینک ها در HTML با تگ <a> تعریف می شوند. آدرس لینک به وسیله خصوصیت href مشخص می شود.

    مثال (خصوصیت ها در HTML)

    <a href="http://www.beyamooz.com">This is a link</a>
    خودتان امتحان کنید »

    همیشه مقدار خصوصیت را در کوتیشن بنویسید

    Wiki

    مقدار خصوصیت ها همیشه باید درون کوتیشن قرار بگیرد.

    دابل کوتیشن رایج تر است، اما تک کوتیشن نیز مجاز است.

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

    مثل: 'name='John "ShotGun" Nelson

    نکته: از حروف کوچک برای خصوصیت ها استفاده کنید

    Wiki

    نام خصوصیت و مقدار آن حساس به حروف نمی باشند.

    اما کنسرسیوم World Wide Web یا (w3c) حالت کوچک حروف را برای نام و مقدار خصوصیت ها در HTML 4 توصیه می کند.

    در نسخه های جدید (HTML (X نوشتن حروف کوچک برای خصوصیت ها و مقادیرشان استاندارد شده است.

    در زیر لیستی از بعضی خصوصیت ها که برای عناصر زیادی در HTML استاندارد هستند ارائه شده است:

    خصوصیت مقدار توضیحات
    class

    نام class

    یک class برای عنصر مشخص می کند.
    id id

    id منحصر به فردی را برای عنصر مشخص می کند.
    style

    تعریف style

    یک style درون تگی برای عنصر مشخص می کند.
    title

    متنی که در tooltip نمایش داده می شود

    اطلاعات اضافه ای را برای یک عنصر مشخص می کند (به صورت یک tool tip نشان داده می شود).

  • خلاصه مطالب HTML

    خلاصه HTML

    Wiki

    این خود آموز به شما نحوه استفاده از HTML را برای ایجاد وب سایتتان آموزش داده است.

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

    کلید کار با HTML تگ ها هستند که تعیین می کند که چه محتوایی ایجاد شود.

    حال که HTML را آموختید، قدم بعد چیست؟

    Wiki

    1- CSS

    CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.

    به وسیله CSS، تمام فرمت دهی ها در سند HTML می تواند برداشته شود و در یک فایل جداگانه ذخیره شود.

    برای یادگیری نحوه ایجاد style sheet ها، به آموزش CSS سری بزنید.

    2- JavaScript

    JavaScript می تواند وب سایت شما را پویاتر بسازد.

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

    JavaScript محبوب ترین زبان اسکریپت نویسی تحت وب است و با عمده مرورگرها کار می کند. 

    اگر می خواهید در مورد JavaScript بیشتر بدانید به JS HOME مراجعه کنید. 

  • رمزنگاری url در HTML

    رمزنگاری URL، کاراکترها را به فرمتی تبدیل می کند که بتواند بر روی اینترنت مخابره شود.

    URL Encoding (رمزنگاری URL)

    Wiki

    URL ها تنها به وسیله مجموعه کاراکترهای ASCII می توانند بر روی اینترنت فرستاده شوند.

    از آنجایی که URLها اغلب حاوی کاراکترهایی خارج از مجموعه ASCII هستند، باید به فرمت ASCII معتبری تبدیل شوند.

    برای رمزنگاری URL، کاراکترهایی که خارج از مجموعه ASCII هستند، با یک علامت % به همراه دو رقم در مبنای هگزا دسیمال جایگزین می شوند.

    URLها نمی توانند حاوی space باشند. به طور معمول space را با علامت "+" جایگزین می کنند.

    مثال - خودتان امتحان کنید

    Wiki

    اگر دکمه Submit را در زیر فشار دهید، مرورگر قبل از اینکه ورودی را به سرور ارسال کند آنرا رمزنگاری خواهد کرد و یک صفحه در سرور، محتویات تکس باکس را نمایش خواهد داد.

    ورودی های دیگری را امتحان کنید و دکمه Submit را فشار دهید.

    مثال URL Encoding

    Wiki

    Character URL-encoding
    € %80
    £ %A3
    © %A9
    ® %AE
    À %C0
    Á %C1
    Â %C2
    Ã %C3
    Ä %C4
    Å %C5

  • رنگ ها در HTML

    رنگ ها با ترکیب نورهای قرمز، آبی و سبز نمایش داده می شوند.

    مقادیر رنگ ها در CSS

    Wiki

    برای ترکیب مقدار رنگ های قرمز، سبز و آبی در HTML، از مبنای هگزا دسیمال (HEX) استفاده می شود.

    کمترین مقداری که می توان به یک منبع نوری داد صفر (در مبنای هگزا دسیمال: 00 ) و بیشترین مقدار255 (در مبنای هگزا:FF) می باشد.

    مقادیر HEX به صورت سه جفت از اعداد دو رقمی که با علامت # شروع می شوند مشخص می شوند.

    Color Values

    Color Color HEX Color RGB
      #000000 rgb(0,0,0)
      #FF0000 rgb(255,0,0)
      #00FF00 rgb(0,255,0)
      #0000FF rgb(0,0,255)
      #FFFF00 rgb(255,255,0)
      #00FFFF rgb(0,255,255)
      #FF00FF rgb(255,0,255)
      #C0C0C0 rgb(192,192,192)
      #FFFFFF rgb(255,255,255)
    خودتان امتحان کنید »

    شانزده میلیون رنگ مختلف

    Wiki

    ترکیب قرمز، سبز و آبی با مقادیر صفر تا 255، بیش از شانزده میلیون رنگ مختلف ارائه می دهد. (256*256*256)

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

    Red Light Color HEX Color RGB
      #000000 rgb(0,0,0)
      #080000 rgb(8,0,0)
      #100000 rgb(16,0,0)
      #180000 rgb(24,0,0)
      #200000 rgb(32,0,0)
      #280000 rgb(40,0,0)
      #300000 rgb(48,0,0)
      #380000 rgb(56,0,0)
      #400000 rgb(64,0,0)
      #480000 rgb(72,0,0)
      #500000 rgb(80,0,0)
      #580000 rgb(88,0,0)
      #600000 rgb(96,0,0)
      #680000 rgb(104,0,0)
      #700000 rgb(112,0,0)
      #780000 rgb(120,0,0)
      #800000 rgb(128,0,0)
      #880000 rgb(136,0,0)
      #900000 rgb(144,0,0)
      #980000 rgb(152,0,0)
      #A00000 rgb(160,0,0)
      #A80000 rgb(168,0,0)
      #B00000 rgb(176,0,0)
      #B80000 rgb(184,0,0)
      #C00000 rgb(192,0,0)
      #C80000 rgb(200,0,0)
      #D00000 rgb(208,0,0)
      #D80000 rgb(216,0,0)
      #E00000 rgb(224,0,0)
      #E80000 rgb(232,0,0)
      #F00000 rgb(240,0,0)
      #F80000 rgb(248,0,0)
      #FF0000 rgb(255,0,0)

    سایه های خاکستری

    Wiki

    رنگ های خاکستری با استفاده از مقدار رنگی مساوی از منبع های نوری ایجاد می شوند.

    برای اینکه کار انتخاب سایه مناسب را برای شما راحت تر کرده باشیم، جدولی از سایه های خاکستری را برای شما ایجاد کرده ایم.

    Gray Shades Color HEX Color RGB
      #000000 rgb(0,0,0)
      #080808 rgb(8,8,8)
      #101010 rgb(16,16,16)
      #181818 rgb(24,24,24)
      #202020 rgb(32,32,32)
      #282828 rgb(40,40,40)
      #303030 rgb(48,48,48)
      #383838 rgb(56,56,56)
      #404040 rgb(64,64,64)
      #484848 rgb(72,72,72)
      #505050 rgb(80,80,80)
      #585858 rgb(88,88,88)
      #606060 rgb(96,96,96)
      #686868 rgb(104,104,104)
      #707070 rgb(112,112,112)
      #787878 rgb(120,120,120)
      #808080 rgb(128,128,128)
      #888888 rgb(136,136,136)
      #909090 rgb(144,144,144)
      #989898 rgb(152,152,152)
      #A0A0A0 rgb(160,160,160)
      #A8A8A8 rgb(168,168,168)
      #B0B0B0 rgb(176,176,176)
      #B8B8B8 rgb(184,184,184)
      #C0C0C0 rgb(192,192,192)
      #C8C8C8 rgb(200,200,200)
      #D0D0D0 rgb(208,208,208)
      #D8D8D8 rgb(216,216,216)
      #E0E0E0 rgb(224,224,224)
      #E8E8E8 rgb(232,232,232)
      #F0F0F0 rgb(240,240,240)
      #F8F8F8 rgb(248,248,248)
      #FFFFFF rgb(255,255,255)

    رنگ های امن در وب

    Wiki

    سال ها پیش، هنگامی که کامپیوتر ها حداکثر 256 رنگ مختلف را پشتیبانی می کردند، لیستی از 216 رنگ مختلف به عنوان یک استاندارد وب پیشنهاد شد و 40 رنگ به عنوان رنگ های سیستمی رزور شد.

    جدولی از 216 رنگ برای اطمینان از اینکه همه کامپیوترها رنگ ها را به درستی نمایش دهند ایجاد شد.

    اما امروزه از زمانی که کامپیوتر ها توانستند میلیون ها رنگ مختلف را نشان دهد دیگر این امر مهمی نیست. به هر حال، در زیر جدول این پالت رنگی ارائه شده است.

    000000 000033 000066 000099 0000CC 0000FF
    003300 003333 003366 003399 0033CC 0033FF
    006600 006633 006666 006699 0066CC 0066FF
    009900 009933 009966 009999 0099CC 0099FF
    00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
    00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
    330000 330033 330066 330099 3300CC 3300FF
    333300 333333 333366 333399 3333CC 3333FF
    336600 336633 336666 336699 3366CC 3366FF
    339900 339933 339966 339999 3399CC 3399FF
    33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
    33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
    660000 660033 660066 660099 6600CC 6600FF
    663300 663333 663366 663399 6633CC 6633FF
    666600 666633 666666 666699 6666CC 6666FF
    669900 669933 669966 669999 6699CC 6699FF
    66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
    66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
    990000 990033 990066 990099 9900CC 9900FF
    993300 993333 993366 993399 9933CC 9933FF
    996600 996633 996666 996699 9966CC 9966FF
    999900 999933 999966 999999 9999CC 9999FF
    99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
    99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
    CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
    CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
    CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
    CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
    CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
    CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
    FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
    FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
    FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
    FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
    FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
    FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

  • صفحه بندی در HTML

    صفحه بندی در وب، برای اینکه سایت شما جذاب به نظر برسد، بسیار مهم است.

    پس صفحه وبتان را با دقت طراحی نمایید.

    مثال - خودتان امتحان کنید

    Web page layout using <div> elements
    نحوه صفحه بندی با استفاده از عناصر <div>.

    Web page layout using <table> elements
    نحوه صفحه بندی با استفاده از عناصر <table>.

     صفحه بندی وب سایت ها

    Wiki

    بیشتر وب سایت ها محتویات خود را در چندین ستون قرار می دهند (به فرمت مجله ها یا روزنامه ها)

    با استفاده از عناصر <div> یا <table> می توان حالت چند ستونی را ایجاد نمود.

    lamp

    گرچه می توان به وسیله جداول HTML، صفحه بندی نمود اما باید دانست که جداول برای ارائه داده ها در قالب جدول هستند نه ابزاری برای صفحه بندی.

    صفحه بندی با استفاده از عناصر <div>

    Wiki

    عنصر <div> یک عنصر block می باشد که برای گروه بندی عناصر HTML استفاده می شود.

    توجه:  CSS برای چیدمان عناصر یا ایجاد پس زمینه یا نمای رنگی برای صفحات استفاده می شود.

    در مثال زیر، از پنج عنصر div برای صفحه بندی استفاده شده است. همچنین از CSS برای تعیین مکان عناصر، ایجاد پس زمینه رنگی و مشخص کردن عرض و ارتفاع عناصر استفاده شده است:

    مثال (صفحه بندی در HTML)

    <!DOCTYPE html>
    <html>
    <body>

    <div id="container" style="width:500px">

    <div id="header" style="background-color:#FFA500;">
    <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    <b>Menu</b><br />
    HTML<br />
    CSS<br />
    JavaScript</div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
    Content goes here</div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
    Copyright © beyamooz.com</div>

    </div>

    </body>
    </html>
    خودتان امتحان کنید »

    کد HTML بالا نتیجه زیر را ایجاد خواهد کرد:

    Main Title of Web Page

    Menu
    HTML
    CSS
    JavaScript
    Content goes here
    Copyright © beyamooz.com

    مثال - خودتان امتحان کنید

    Web page layout using <div> elements with 3 columns
    در این مثال، نحوه صفحه بندی سه ستونه نشان داده شده است.

    صفحه بندی با استفاده از جداول

    Wiki

    راه ساده ایجاد یک صفحه بندی، استفاده از تگ <table> می باشد.

    حالت چند ستونی به وسیله عناصر <div> یا <table> ایجاد می شود. CSS برای تعیین مکان عناصر یا ایجاد پس زمینه یا نمایی رنگی برای صفحات استفاده می شود.

    lamp

    استفاده از جداول برای حالت چند ستونی، کاربرد درستی از عنصر <table> نمی باشد. هدف از عنصر <table> نمایش داده ها در قالب جدول است.

    در مثال زیر، از یک جدول با سه سطر و دو ستون استفاده شده است. با استفاده از خصوصیت colspan سلول های سطرهای اول و آخر با هم ادغام شده اند.

    مثال (صفحه بندی در HTML)

    <!DOCTYPE html>
    <html>
    <body>

    <table width="500" border="0">
    <tr>
    <td colspan="2" style="background-color:#FFA500;">
    <h1>Main Title of Web Page</h1>
    </td>
    </tr>

    <tr valign="top">
    <td style="background-color:#FFD700;width:100px;text-align:top;">
    <b>Menu</b><br />
    HTML<br />
    CSS<br />
    JavaScript
    </td>
    <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
    Content goes here</td>
    </tr>

    <tr>
    <td colspan="2" style="background-color:#FFA500;text-align:center;">
    Copyright © W3Schools.com</td>
    </tr>
    </table>

    </body>
    </html>
    خودتان امتحان کنید »

    کد بالا نتیجه زیر را ایجاد می کند.

    Main Title of Web Page
    Menu
    HTML
    CSS
    JavaScript    		 Content goes here
    Copyright © W3Schools.com

    نکات مهم

    Wiki

    نکته: بزرگترین مزیت استفاده از CSS  این است که اگر کد CSS را در یک style sheet بیرونی قرار دهید سایت شما خیلی راحت تر حفظ می شود. شما می توانید صفحه بندی کل وب سایتتان را با ویرایش یک فایل تغییر دهید.

    برای کسب اطلاعات بیشتر در مورد CSS به لینک روبرو مراجعه فرمایید: آموزش CSS-معرفی سی اس اس

    نکته: به دلیل اینکه ایجاد صفحه بندی های پیشرفته زمان گیر است، گزینه سریعتر، استفاده از یک الگو(template) می باشد. با جستجو در گوگل می توانید وب سایت های رایگانی را که این الگو ها را ارائه می دهند بیابید. (می توانید از آنها استفاده کنید و آنها را سفارشی کنید.)

    تگ های صفحه بندی  در HTML

    تگ توضیح
    <div>

    تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)
    <span>

    تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)

  • عناصر block و inline در HTML

    عناصر HTML را می توانید به وسیله تگ های <div> و یا <span> گروه بندی نمایید.

    عناصر Block

    Wiki

    یک عنصر Block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.

    مثال برای عناصر Block:

    • <h1>
    • <p>
    • <div>
    • <table>

    عناصر Inline

    Wiki

    یک عنصر Inline تنها به اندازه ای که نیاز دارد، عرض یک سطر را اشغال می کند، و هیچ اجباری در اشغال کل یک سطر وجود ندارد.

    مثال برای عناصر inline:

    • <span>
    • <a>
    • <img>
    • <td>

    عنصر <div>

    Wiki

    عنصر <div> یک عنصر block می باشد که می تواند به عنوان یک ظرف برای گروه بندی دیگر عناصر HTML استفاده شود.

    عنصر <div> معنی خاصی ندارد. به جز این، به دلیل اینکه یک عنصر block می باشد، مرورگر یک خط قبل و بعد از آن نمایش می دهد.

    هنگامی که با CSS استفاده می شود، عنصر <div> می تواند برای تنظیم خصوصیت style برای بلاک هایی با محتوای زیاد استفاده شود.

     دیگر استفاده رایج از عنصر <div> صفحه بندی سند می باشد. استفاده از جدول برای صفحه بندی دیگر قدیمی شده است. استفاده از جدول ها برای این منظور روش مناسبی نمی باشد. هدف از عنصر <table> نمایش داده ها به صورت جدولی می باشد.

    نحوه صفحه بندی با استفاده از عناصر <div>

    توضیح مثال بالا: آموزش HTML-صفحه بندی

    عنصر <span>

    Wiki

    عنصر <span> یک عنصر درون خطی (inline) است که می تواند به عنوان ظرفی برای متن استفاده شود.

    عنصر <span> معنی خاصی ندارد.

    هنگامی که با CSS استفاده می شود، عنصر <span> می تواند برای تنظیم خصوصیت style برای بخش های متنی شکل، استفاده شود.

    استفاده از عنصر <span> برای متمایز کردن رنگ قسمتی از متن

    تگ های گروه بندی

    تگ توضیح
    <div> تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)
    <span> تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)

  • عناصر پایه ای در HTML

    از اینکه احیاناً در مثال ها از تگ هایی که شما نیاموخته اید استفاده می شود نگران نباشید.

    در فصل های بعد آنها را خواهید آموخت.

    عنوان ها (Heading)

    Wiki

     عنوان ها در HTMLبه وسیله تگ های <h1> تا <h6> تعریف می شوند.

    مثال (عناصر پایه ای در HTML)

    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    خودتان امتحان کنید »

    پاراگراف (Paragraph)

    Wiki

    پارگراف ها در HTML به وسیله تگ <p> تعریف می شوند.

    مثال (عناصر پایه ای در HTML)

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    خودتان امتحان کنید »

    لینک ها (Link)

    Wiki

    لینک ها در HTML به وسیله تگ <a> تعریف می شود.

    مثال (عناصر پایه ای در HTML)

    <a href="http://www.beyamooz.com">This is a link</a>
    خودتان امتحان کنید »

    توجه: آدرس لینک، در خصوصیت href مشخص می شود.

    (در فصل های بعدی این خودآموز راجع به خصوصیت های عناصر، بیشتر خواهید آموخت.)

    تصاویر (Image)

    Wiki

    تصاویر در HTML به وسیله تگ <img> تعریف می شود.

    مثال (عناصر پایه ای در HTML)

    <img src="/beyamooz_logo.png" width="104" height="142" alt="beyamooz.com" />
    خودتان امتحان کنید »

    توجه: نام و سایز عکس به وسیله خصوصیت ها مشخص می شود.

    آموزش تصویری مطلب بالا (فیلم آموزش HTML)
     درس شماره 3 (عناصر پایه ای در HTML)  زمان فیلم:  08:00

      خرید و دانلود مستقیم فیلم آموزش HTML - حجم دانلود 766 مگابایت (کلیک کنید +)

  • عناصر در HTML

    سند های HTML به وسیله عناصر HTML تعریف می شوند.

    عناصر (Element)

    Wiki

    یک عنصر در HTML، هر چیزی از تگ شروع تا تگ پایان می باشد:

    تگ شروع* محتوای عنصر تگ پایان*
    <p> This is a paragraph </p>
    <a href="/default.htm" > This is a link </a>
    <br />    

    *تگ شروع را اغلب تگ باز و تگ پایان را اغلب تگ بسته می نامند.

    نحوه نوشتن یک عنصر در HTML

    Wiki

    • یک عنصر با یک تگ شروع (تگ باز) آغاز می شود.
    • یک عنصر به یک تگ پایان (تگ بسته) ختم می شود.
    • محتوای یک عنصر نوشته های بین تگ شروع و پایان می باشد.
    • بعضی از عناصر در HTML تهی هستند.
    • عناصر تهی در همان تگ شروع بسته می شود.
    • بیشتر عناصر HTML می توانند دارای خصوصیت هایی باشند.

    توجه: در آموزش بعدی در مورد خصوصیت های عناصر، بیشتر توضیح می دهیم.

    عناصر تو در تو در  HTML

    Wiki

     بیشتر عناصر HTML می توانند به صورت تو در تو باشند. (بدین معنی که محتوای آنها می تواند شامل دیگر عناصر HTML نیز باشد)

    سندهای HTML شامل عناصر تو در توی HTML می باشند.

    مثالی از یک سند HTML

    Wiki

    <html>

    <body>
    <p>This is my first paragraph.</p>
    </body>

    </html>

    مثال بالا شامل سه عنصر زیر می باشد:

    1- عنصر <p>

    <p>This is my first paragraph.</p>

    عنصر <p> یک پاراگراف را در سند HTML تعریف می کند.
    این عنصر حاوی تگ شروع <p> و تگ پایان <p/> می باشد.
    محتوای این عنصر "This is my first paragraph" می باشد.

    2- عنصر <body>

    <body>
    <p>This is my first paragraph.</p>
    </body>

    عنصر <body> بدنه یک سند HTML را توصیف می کند.
    این عنصر دارای تگ شروع <body> و تگ پایان <body/> می باشد.

    محتوای این عنصر حاوی یک عنصر دیگر (عنصر p) می باشد.

    3- عنصر <html>

    <html>

    <body>
    <p>This is my first paragraph.</p>
    </body>

    </html>

    عنصر <html> تمام سند html را توصیف می کند.

    این عنصر دارای تگ شروع <html> و تگ پایان <html/> می باشد.

    محتوای این عنصر حاوی یک عنصر دیگر (عنصر body که خود حاوی عنصر <p> است) می باشد.

    تگ پایان را فراموش نکنید

    Wiki

    در بعضی عناصر HTML حتی اگر تگ پایان را فراموش کنید ممکن است آن عنصر درست عمل کند:

    <p>This is a paragraph
    <p>This is a paragraph

    مثال بالا در بیشتر مرورگرها درست عمل می کند، زیرا تگ بسته در اینجا اختیاری می باشد.

    هرگز به این مسئله که تگ بسته اختیاری است استناد نکنید. عناصر زیادی هستند که اگر تگ پایان را در آنها ننویسید خطا می دهند یا نتایج نادرستی می دهند.

    عناصر تهی

    Wiki

    عناصری که قسمت محتوای آنها خالی است را عناصر تهی می نامیم.

    عنصر <br> یک عنصر تهی و بدون تگ بسته است (تگ <br> یک خط را تعریف می کند.)

    نکته: در XHTML تمام عناصر باید بسته شوند. اضافه کردن یک اسلش درون تگ شروع، مثل </br>، راه مناسبی برای بستن عناصر تهی در XHTML و XML می باشد.

    نکته: تگ ها را با حروف کوچک بنویسید

    Wiki

    تگ های HTML حساس به کوچکی و بزرگی حروف نیستند: <P> با <p> یکسان است. بیشتر وب سایت ها تگ ها را با حروف بزرگ می نویسند.

  • عنصر head در HTML

    مثال - خودتان امتحان کنید

    Wiki

    The title of a document
    تگ <title> عنوان یک سند را تعریف می کند.

    One target for all links
    نحوه استفاده از تگ <base> برای اینکه معین کنیم تمام لینک های یک صفحه در یک پنجره جدید باز شوند.

    Document description
    از عنصر <meta> برای توصیف سند استفاده کنید.

    Document keywords
    از عنصر <meta> برای تعریف کلمات کلیدی سند استفاده کنید.

    Redirect a user
    چگونه یک کاربر را به آدرس وب جدیدی redirect کنیم (تغییر مسیر دهیم)

    عنصر <head> در HTML

    Wiki

    عنصر <head> ظرفی برای تمام عناصر اصلی HTML می باشد. عناصر موجود در تگ <head> می توانند شامل script ها باشد، می تواند مرورگر را به مکانی هدایت کند که style sheet ها رابیابد، اطلاعات meta را ارائه کند و غیره.

    تگ های <title> و <base> و <link> و <meta> و <script> و <style> می توانند به قسمت head اضافه شوند.

    عنصر <title> در HTML

    Wiki

    تگ <title> عنوان سند را تعریف می کند.

    عنصر title در تمام سندهای HTML/XHTML ضروری است و نیاز است که همیشه نوشته شود.

    عنصر title:

    • یک عنوان را در نوار ابزار مرورگر تعریف می کند.
    • هنگامی که می خواهید صفحه ای را به لیست favorite اضافه نمایید از محتویات عنصر title برای این منظور استفاده می شود.
    • نتایج موتور های جستجو بر اساس محتویات عنصر title گزارش می شود.

    یک سند ساده HTML

    Wiki

    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>

    <body>
    The content of the document......
    </body>

    </html>

    عنصر <base> در HTML

    Wiki

    تگ <base> آدرس پیش فرض یا یک target پیش فرض را برای تمام لینک های یک صفحه مشخص می کند.

    <head>
    <base href="http://www.beyamooz.com/images/" />
    <base target="_blank" />
    </head>

     عنصر <link> در HTML

    Wiki

    تگ <link> ارتباط بین سند html و منبعی خارجی را تعریف می کند.

    تگ <link> اغلب برای لینک به cssها استفاده می شود.

    <head>
    <link rel="stylesheet" type="text/css" href="/mystyle.css" />
    </head>

    عنصر <style> در HTML

    Wiki

    تگ <style> برای تعریف اطلاعات نمایشی برای سند HTML استفاده می شود.

    درون عنصر style، مشخص می کنید که عناصر HTML چگونه باید در مرورگر نمایش داده شوند.

    <head>
    <style type="text/css">
    body {background-color:yellow}
    p {color:blue}
    </style>
    </head>

    عنصر <meta> در HTML

    Wiki

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

    عنصر <meta> نوعاً برای مشخص کردن نویسنده، کلمات کلیدی، آخرین تغییرات، توضیحاتی در مورد صفحه و دیگر داده های Meta استفاده می شوند.

    تگ <meta> همیشه درون عنصر head می باشد.

    داده های meta توسط مرورگر ها (جهت نحوه نمایش محتویات یا بار گذاری مجدد صفحه)، موتور های جستجو (جهت تعیین کلمات کلیدی) و دیگر سرویس های وب استفاده می شود.

    کلمات کلیدی برای موتورهای جستجو

    Wiki

    بعضی موتورهای جستجو از خصوصیت name و content عنصر meta برای شاخص گذاری صفحات استفاده می کنند.

    مثال1: توضیحی از محتویات یک صفحه

    <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

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

    <meta name="keywords" content="HTML, CSS, XML" />

    مثال3: مشخص کردن نویسنده یک صفحه

    <meta name="author" content="Hege Refsnes">

    مثال4: Refresh کردن صفحه هر 30 ثانیه یکبار

    <meta http-equiv="refresh" content="30">

    عنصر <script> در HTML

    Wiki

    تگ <script> برای برنامه نویسی سمت کاربر استفاده می شود، مثل JavaScript.

    عنصر script در فصل بعد توضیح داده خواهد شد.

    بخش Head

    Wiki

    در جدول زیر، تمام تگ هایی که می توانید در بخش Head صفحه، استفاده کنید لیست شده است:

    Tag توضیحات
    <head>

    اطلاعاتی در مورد سند ارائه می دهد.
    <title>

    عنوان یک سند را ارائه می دهد.
    <base />

    یک آدرس پیش فرض یا یک target پیش فرض برای تمام لینک های یک صفحه ارائه می دهد.
    <link />

    ارتباط بین یک سند و منبع خارجی را تعریف می کند.
    <meta />

    داده های meta  در مورد یک سند HTML را مشخص می کند.
    <script>

    برای برنامه نویسی سمت کاربر استفاده می شود.
    <style>

    مشخص می کنید که عناصر HTML چگونه باید در مرورگر نمایش داده شوند.

  • عنوان یا سرتیتر در HTML

    عنوان ها در سندهای HTML، عناصر مهمی هستند.

    عنوان ها در HTML

    Wiki

    عنوان یا سرتیتر در HTML به وسیله تگ های <h1> تا <h6> تعریف می شود.

    <h1> برای مهمترین سرتیتر استفاده می شود. <h6> کم اهمیت ترین سرتیتر را تعریف می کند.

    مثال (عنوان یا سرتیتر در HTML)

    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    خودتان امتحان کنید »

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

    سرتیترها عناصر مهمی هستند

    Wiki

    از عنصر heading تنها برای سرتیترها استفاده کنید. از آنها برای بزرگ یا bold کردن استفاده نکنید.

    موتورهای جستجو از سرتیترهای شما برای شاخص گذاری ساختار و محتوای صفحات وب شما استفاده می کنند.

    از آنجایی که کاربران ممکن است صفحات وب شما را با نگاه کردن به سرتیترها از نظر بگذرانند، استفاده از سرتیترها برای اینکه ساختار سند را نشان دهید مهم است.

    h1 برای مهمترین سرتیتر استفاده می شود، بعد از آن h2 و سپس h3 برای سرتیترهای کم اهمیت تر و به همین ترتیب سایر سرتیترها.

    ایجاد خطوط افقی در HTML

    Wiki

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

    مثال (عنوان یا سرتیتر در HTML)

    <p>This is a paragraph</p>
    <hr />
    <p>This is a paragraph</p>
    <hr />
    <p>This is a paragraph</p>
    خودتان امتحان کنید »

    توضیحات (Comment ها) در HTML

    Wiki

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

    توضیحات به صورت زیر نوشته می شوند:

    مثال (عنوان یا سرتیتر در HTML)

    <!-- This is a comment -->
    خودتان امتحان کنید »

    نکته: علامت تعجب بعد از علامت باز نوشته می شود نه قبل از علامت بسته.

    نکته: چگونه کدهای HTML را ببینیم

    Wiki

    آیا تاکنون وقتی یک صفحه وب را دیده اید از خود پرسیده اید "چگونه می توان کدهای HTML آن را دید."

    برای دیدن این کدها روی صفحه مورد نظر راست کلیک کرده و از منوی باز شده گزینه "View Source" را در (IE) و یا "View Page Source" را در  Firefox و یا گزینه مشابه را در سایر مرورگرها انتخاب کنید.

    مثال - خودتان امتحان کنید

    Wiki

    Headings
    چگونه سرتیترها را در یک سند HTML نشان دهیم.

    Hidden comments
    چگونه توضیحی را در کد HTML درج کنیم.

    Horizontal lines
    چگونه خط افقی درج کنیم.

    منبعی از تگ ها در HTML

    Wiki

    در فصل های بعد در مورد تگ های HTML و خصوصیت های آن ها بیشتر خواهید آموخت.

    تگ توضیح
    <html> یک سند HTML را تعریف می کند.
    <body> بدنه یک سند را تعریف می کند.
    <h1> تا <h6> سرتیترهای HTML را تعریف می کند.
    <hr /> یک خط افقی را تعریف می کند.
    <!--> توضیحی را درج می کند.

  • فرم های ورود اطلاعات در HTML

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

    مثال - خودتان امتحان کنید

    ایجاد فیلدهای متنی
    چگونه یک فیلد متنی ایجاد کنیم. کاربر می تواند داخل فیلد متنی یک متن دلخواه تایپ کند.

    ایجاد فیلد کلمه عبور(پسورد)
    چگونه یک فیلد برای ورود کلمه عبور ایجاد کنیم.

    (در انتهای این صفحه مثال های بیشتری آورده شده است.)

    فرم های HTML

    Wiki

    از فرم های HTML برای ارسال اطاعات به سرور استفاده می شود.

    یک فرم می تواند شامل عناصر ورودی(Input) مانند فیلد های متنی، چک باکس ها، رادیو باتن ها، دکمه های ارسال، لیست های انتخاب و... باشد.

    از تگ <form> برای ایجاد یک فرم HTML استفاده می شود:

    <form>
    .
    input elements
    .
    </form>

    فرم های HTML و عناصر ورودی

    Wiki

    یکی از مهمترین عناصر فرم، عنصر input است.

    در این عنصر خصوصیتی به نام type به تعیین نوع اطلاعات ورودی اختصاص دارد و می توان آن را با یکی از مقادیر زیر تنظیم کرد:

    text , checkbox , radio , password , hidden , submit , reset , button , file , image

    در ادامه به شرح بعضی از typeهای پرکاربرد بالا خواهیم پرداخت:

    فیلد input از نوع Text

    Wiki

    اگر می خواهید که بازدیدکننده، اطلاعاتی از قبیل متن، اعداد و... را وارد کند، خصوصیت type را با مقدار "text" تنظیم کنید:

    <form>
    First name: <input type="text" name="firstname" /><br />
    Last name: <input type="text" name="lastname" />
    </form>

    کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

    First name:
    Last name:

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

    نحوه نمایش عناصر ورودی در مروگر نمایش داده نمی شود.

    اگر بخواهیم مقداری بیش از 20 کاراکتر را برای عنصر متنی مشخص کنیم چه کار می کنیم.

    فیلد input از نوع Password

    Wiki

    اگر می خواهید که بازدیدکننده، کلمه عبور را وارد کند، خصوصیت type را با مقدار "password" تنظیم کنید:

    <form>
    Password: <input type="password" name="pwd" />
    </form>

    کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

    Password:

    توجه: کاراکترها در فیلد پسورد به صورت ماسک شده نمایش داده می شوند.(ستاره ای یا دایره ای)

    فیلد input از نوع Radio

    Wiki

    اگر می خواهید که بازدیدکننده، فقط یک گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار "radio" تنظیم کنید:

    <form>
    <input type="radio" name="sex" value="male" /> Male<br />
    <input type="radio" name="sex" value="female" /> Female
    </form>

    کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

    Male
    Female

    فیلد input از نوع Checkbox

    Wiki

    اگر میخواهید که بازدیدکننده، یک یا چند گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار "checkbox" تنظیم کنید:

    <form>
    <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
    <input type="checkbox" name="vehicle" value="Car" /> I have a car
    </form>

    کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

    I have a bike
    I have a car

    فیلد input از نوع Submit

    Wiki

    در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال یا Submit استفاده می شود و با کلیک کاربر روی این دکمه، اطلاعات درون فرم به فایلی دیگر ارسال خواهند شد.

    برای تعیین مقصد ارسال اطلاعات باید درون تگ form از شناسه ای به نام action استفاده کنید. مقدار شناسه action آدرس یا url فایلی است که به دریافت و سپس پردازش اطلاعات دریافتی خواهد پرداخت.

    معمولا فایلهای بخش action برنامه ها و اسکریپت های نوشته شده با زبانهای cgi مانند ASP.NET ، Perl ، PHP و... بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس پردازش آنها می باشد:

    <form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user" />
    <input type="submit" value="Submit" />
    </form>

    کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

    Username:

    اگر در فیلد متنی بالا کاراکترهایی را تایپ کنید و روی دکمه "submit" کلیک کنید، مرورگر، ورودی شما را به صفحه ای به نام "html_form_action.php" ارسال خواهد کرد.

    مثال - خودتان امتحان کنید

    Wiki

    Radio button
    چگونه یک radio button ایجاد کنیم.

    Checkbox
    چگونه یک checkbox ایجاد کنیم. کاربر می تواند در انتخاب مختار باشد.

    drop-down
    چگونه یک لیست کشویی یا drop-down ساده ایجاد کنیم.

    Drop-down با آیتم انتخاب شده از قبل
    چگونه یک لیست کشویی با مقدار انتخاب شده از قبل ایجاد کنیم.

    Textarea
    چگونه یک کنترل ورودی متن چند خطه ایجاد کنیم. در یک text-area کاربر می تواند تعداد نامحدودی کاراکتر تایپ کند.

    button
    چگونه یک دکمه برای کلیک کردن ایجاد کنیم.

    مثال - خودتان امتحان کنید(Form)

    Fieldset
    چگونه یک لبه یا border، اطراف عناصر داخل یک فرم ایجاد کنیم.

    فرمی با دو فیلد متنی و یک دکمه submit
    چگونه یک فرم با دو فیلد متنی و یک دکمه submit ایجاد کنیم.

    فرمی با دو checkbox
    چگونه یک فرم با دو checkbox و یک دکمه submit ایجاد کنیم.

    فرمی با دو radio button
    چگونه یک فرم با دو radio button و یک دکمه submit ایجاد کنیم.

    تگ های فرم HTML

    Wiki

    تگ توضیحات
    <form>

    یک فرم HTML برای ورودی کاربر تعریف می کند.
    <input />

    یک کنترل ورودی تعریف می کند.
    <textarea>

    یک کنترل ورودی متن چند خطه تعریف می کند.
    <label>

    برای یک عنصر ورودی مانند متن یک برچسب یا lable تعریف می کند.
    <fieldset>

    برای یک فرم HTML یک لبه یا border تعریف می کند.
    <legend>

    برای یک عنصر fieldset یک عنوان یا caption تعریف می کند.
    <select>

    یک لیست کشوئی یا (drop-down list) تعریف می کند.
    <optgroup>

    در لیست کشوئی یا (drop-down list) یک گروه از آیتم های مرتبط به هم را تعریف می کند.
    <option>

    در لیست کشوئی یا (drop-down list) یک آیتم یا option تعریف می کند.
    <button>

    یک دکمه برای کلیک کردن تعریف می کند.

صفحه1 از2

قالب وردپرس | لرن دی ال

تبلیغات

آموزش ASP.NET Core
آموزش برنامه نویسی
سرور اختصاص ایران سرور
طراحی سایت مشهد
ثبت دامنه
خرید هاست
ثبت دامنه com
ثبت دامنه ir
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی