آموزش جامع html

شروع موضوع توسط V.Valizadeh9 ‏19 آوریل 2010 در انجمن زبان HTML

وضعیت موضوع:
موضوع بسته شده است.
  1. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    آموزش جامع html ( مقدماتی تا پیشرفته )

    [​IMG]
    با سلام
    بالاخره نسخه PDF آموزش ها هم آماده شد.
    با تشکر از دوست خوبم مهدی (
    mehdi2477) که زحمت تهیه نسخه PDF رو کشیدن.
    برای دانلود روی عکس کلیک کنید و یا از فایل ضمیمه استفاده کنید.

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

    [​IMG]
     

    پیوست ها:

    آخرین ویرایش: ‏23 ژوئن 2010
    نوشته شده توسط V.Valizadeh9 در ‏19 آوریل 2010
    Niliyon439، rezakian13، teshneh و 59 نفر دیگر از این ارسال تشکر کرده اند.
  2. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    مقدمه ای بر وب و معرفی html

    مقدمه ای بر وب و معرفی HTML

    وب گسترده جهانی :
    وب گستره جهانی (World Wide Web) که معمولا فقط وب گفته میشود؛ شبکه ای است که تمام رایانه ها متصل به آن را در سراسر جهان به هم وصل میکند. و تمام رایانه ها میتوانند در وب با هم ارتباط داشته باشند.

    WWW چگونه کار میکند ؟
    اطلاعات وب در فایل هایی به نام Web Page قرار میگیرند که آن ها نیز در رایانه هایی به نام Web Server قرار دارند و رایانه ها برای دیدن صفحات وب از استانداردی ارتباطی به نام (Hyper Text Transfer Protocol) که HTTP مخففش ایت، استفاده میکنند. رایانه های متصل به وب اطلاعات موجود در Web Page ها را از طریق برنامه هایی به نام مرورگر وب (WWeb Browser) نشان میدهند. رایج ترین مرورگرهایی که مورد استفاده قرار میگیرند، Internet Explorer و FireFox میباشند.

    چگونه مرورگرها صفحات وب را نشان میدهند ؟
    همه صفحات وب شامل دستورالعمل هایی برای نمایش توسط مرورگرها هستند. مرورگرها با خواندن این دستورالعمل ها صفحات وب را نشان میدهند.
    دستورالعمل های صفحات وب، تگ های HTML نامیده میشوند.

    HTML چیست ؟


    • HTML یک زبان برای نشاه گذاری فرا متنی است که کارش توصیف وب است.
    • HTML برگرفته از کلمه Hyper Text Markup Language است.
    • HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است.
    • HTML از تگ های نشانه گذاری استفاده میکند که از طریق آن ها صفحات وب را توصیف میکند.
    • یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود.
    تگ های HTML :

    • تگ های نشانه گذاری معمولا تگ های HTML خوانده میشوند.
    • برچسب هایی هستند که متن ها را توسط کلمات کلیدی احاطه میکنند مانند : <html>
    • تگ ها به صورت جفت هستند که اولی تگ شروع و دومی تگ پایان نامیده میشود.
    • همچنین تگ های شروع و پایان تگ های باز شدن و بسته شدن هم خوانده میشوند.
    اسناد HTML = صفحات وب

    • اسناد HTML صفحات وب را توصیف میکنند.
    • اسناد HTML شامل متن و تگ های HTML است.
    • اسناد HTML صفحات وب نیز خوانده میشوند.
    هدف یک مرورگر وب (مانند اینترنت اکسپلورر و فایر فاکس و ... ) خواندن اسناد HTML و سپس نمایش آنها به صورت صفحات وب است. مرورگر تگ های HTML را نشان نمیدهد، بلکه با استفاده از تگ ها به تفسیر محتوای صفحات میپردازد.
    به متن HTML زیر توجه کنید :
    کد (Text):
    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
    </html>
    توضیح مثال بالا :

    • متن بین <html> و <html/> صفحه وب را توصیف میکند.
    • متن بین <body> و <body/> متن قابل نمایش در صفحه وب را مشخص میکند.
    • متن بین<p> و <p/> یک پاراگراف را نشان میدهد.
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏19 آوریل 2010
    شکیلا یعقوبی، rezakian13، pingu و 24 نفر دیگر از این ارسال تشکر کرده اند.
  3. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    شروع کردن

    شروع کنید !

    به چه چیز هایی نیاز دارید ؟

    • شما برای یادگیری HTML در مجید آنلاین به هیچ ابزاری نیاز ندارید !
    • شما ویرایشگر HTML نیاز ندارید!
    • شما به وب سرور نیاز ندارید !
    • شما به وب سایت نیاز ندارید!
    ویرایشگر های HTML :
    کا در این آموزش ها از یک ادیتور ساده متن مانند Notepad ویندوز استفاده میکنیم.
    شما می توانید به سادگی با استفاده از یک ویرایشگر WYSIWY("what you see is what you get") فایل های HTML را ویرایش کنید ، مثل FRONT PAGE,Claris Home Page یا Adob PageMill.
    اگر شما می خواهید یک توسعه دهنده وب توانا باشید ما توصیه اکید می کنیم که شما از یک ویرایشگر متنی ساده استفاده کنید تا اصول اولیه HTML را یاد بگیرید.

    پسوند HTML یا HTM ؟
    هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.

    آیا میخواهید یک بار امتحان کنید ؟
    اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.
    HTML:
    <html>
                            <head>
                            <title>title of page </title>
                            </head>
                            <body>
                            This is my first home page.<b> This text is bold </b>
                            </body>
                            </html>                    
    فایل را تحت عنوان "mypage.htm"ذخیره کنید.
    مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

    از طریق لینک زیر میتوانید آنلاین کار کنید !!!
    کلیک کنید!
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏19 آوریل 2010
    pingu، MAH203، muhama و 17 نفر دیگر از این ارسال تشکر کرده اند.
  4. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    عناصر html

    عناصر HTML :
    پرونده های HTML فایل های متنی هستند که با عناصر HTML شناخته شده اند. عناصر HTML با استفاده از برچسب (تگ های ) HTML تعریف میشوند.

    تگ (برچسب) های HTML
    • برچسب های HTML برای نشانه گذاری عناصر HTML استفاده می شوند
    • بر چسب های HTML توسط دو کاراکتر < و > محاط می شوند
    • این کاراکتر های محاط کننده قلاب نامیده می شوند
    • بر چسب های HTML معمولا بصورت جفت می آیند <b> , <b/>
    • اولین برچسب دوتایی برچسب شروع و دومی برچسب پایانی است
    • متن های بین برچسب ابتدایی و انتهایی محتوای عناصر هستند
    • برچسبهای HTML به حروف کوچک و بزرگ حساس نیستند <b> معادل <B> است.
    عناصر HTML

    نمونه یک سند HTML :
    کد (Text):
    <html>

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

    </html>
    در این مثال از 3 برچسب استفاده شده است یعنی : <html> و <body> و <p> .

    توضیح کامل مثال بالا:
    عنصر <p> (پاراگراف) :
    کد (Text):
    <p>This is my first paragraph</p>
    • متن بالا یک عنصر HTML است.
    • برچسب <p> به ما نشان میدهد که متن بالا یک پاراگراف در یک سند HTML است.
    • این عنصر با تگ <p> شروع میشود و با تگ <p/> پایان می یابد.
    • محتوای عنصر : This is my first paragraph
    عنصر <body> (بدنه) :
    کد (Text):
    <body>
    <p>This is my first paragraph</p>
    </body>
    • عنصر <body> بدنه فایل HTML را به ما نشان میدهد.
    • این عنصر با تگ <body> شروع و با تگ <body/> پایان می یابد.
    • محتوای این عنصر شامل یک عنصر دیگر HTML است، یعنی پاراگراف.

    عنصر <html> (سند html ) :
    کد (Text):
    <html>

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

    </html>
    • عنصر <html> نشان میدهد که تمام سند html است.
    • این عنصر با تگ <html> شروع و با تگ <html/> پایان می یابد
    • محتوای این عنصر شامل یک عنصر دیگر html است، یعنی body یا بدنه سند

    چرا ما از تگ هایی با حروف کوچک استفاده میکنیم ؟
    ما فقط گفتیم که تگ های HTML حساس به حروف کوچک و بزرگ نیستند و <B>همان معنی <b>را می دهد.هنگامی که شما به وب گردی می پردازد، متوجه خواهید شد که بیشتر آموزش ها در مثال هایشان از حروف بزرگ تگ های HTML استفاده می کنند.ما همیشه از برچسب های حروف کوچک استفاده می کنیم. چرا؟
    اگر شما می خواهید خود را برای نسل های بعدی HTML آماده کنیدشما باید شروع کنید و از برچسبهای حروف کوچک استفاده کنید.کنسرسیوم شبکه گسترده جهانی (W3C) در نظریه HTML4 خود برچسب های حروف کوچک را توصیه کرده و XHTML(نسل بعدی HTML) برچسبهای حروف کوچک را خواستار شده است.

    عناصر تگ :

    برچسبها خود می توانند شامل عناصری باشند ، عناصر می توانند اطلاعات اضافی در باره عناصر HTML در صفحه شما را فراهم کنند.این برچسب عنصر بدنه را در صفحه شما معرفی می کند:
    <body>
    با اضافه کردن عنصر <bgcolor>شما می توانید به مرورگر بگویید که رنگ پس زمینه شما باید قرمز باشد مثل این:<"body bgcolor="red>
    این برچسب یک جدول HTML را معرفی می کند:<table>. با اضافه کردن عنصر حاشیه شما می توانید به مرورگر بگویید که جدول نباید هیچ لبه و حاشیه ای داشته باشد: <"table border="0>
    عناصر همیشه در یک زوج نام/مقدار می آیند، مثل این: نام="مقدار"
    عناصر همیشه به برچسب شروع عناصر HTML اضافه می شوند

    هرگز تگ پایانی رافراموش نکنید!
    بیشتر مرورگر های وب سند HTML رابه درستس نمایش میدهند حتی اگر شما تگ پایانی را فراموش کنید.
    کد (Text):
    <p>This is a paragraph
    <p>This is a paragraph
    مثال بالا در بیشتر مرورگر ها به درستی نمایش داده میشود ولی به آنها اعتماد نکنید.فراموش کردن تگ پایانی منجر به اتفاقات و پیغام خطاهای غیر منتظره میشود!
    توجه! : ورژن (نسخه) بعدی HTML به شما اجازه نمیدهد تا این مرحله را رها کنید و انجام ندهید.

    عناصر خالی HTML :

    • عناصر html که بدون محتوی باشند عناصر خالی html نامیده میشوند.
    • عناصر خالی را میتوان در تگ آغازین بست!
    • <br> یک عنصر خالی است زیرا تگ پایانی ندارد.(که آن را خط شکسته یاد میکنند.)
    • در XHTML و XML و ورژن بعدی HTML همه ی عناصر باید دارای تگ پایانی باشند.
    • اضافه کردن یک اسلش ( / ) مانند <br /> به تگ آغازین یک راه صحیحی است تا عناصر خالی بسته شوند.این کار توسط XML، XHTML و HTml تایید شده است.
    • حتی اگر <br> در همه ی مرورگر ها کار کند، باز هم نوشتن <br /> مطمئن تر و در آینده باثبات تر است.

    حالت های کتیشن ، 'RED' یا "RED" :
    محتوای عناصر باید همیشه در کتیشن ها محدود شوند ، از هر دو حالت کتیشن و دوبل کتیشن می توان استفاده کرد ولی استفاده از دوبل کتیشن ها متداول تر است. در بعضی موقعیت های نادر مثل هنگامی که محتوای عناصر خود دارای کتیشن هستند لازم است که از تک کتیشن استفاده کنیم: 'Name='john "shotgun" Nelson
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏19 آوریل 2010
    pingu، MAH203، muhama و 23 نفر دیگر از این ارسال تشکر کرده اند.
  5. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    دوستان با توجه به این که نظری ندادین و تشکری نکردین (علی رغم بازدید ) بنده تصمیم گرفتم تا کار رو ادامه ندم و تا چند روز دیگه pdf این کارمو قرار بدم . نظرتون چیه ؟
     
    نوشته شده توسط V.Valizadeh9 در ‏20 آوریل 2010
    pingu، kimsungbabak، MAH203 و 20 نفر دیگر از این ارسال تشکر کرده اند.
  6. mehdi2477

    mehdi2477 Member

    ارسال‌ها:
    59
    تشکر شده:
    122
    امتیاز دستاورد:
    6
    نیکی و پرسش

    خواهشا کداتون را داخل تگ کد بزارید

    برای تبدیل کد به html به وسیله برنامه Notepad پس از انتخاب Save as باید گزینه Save as type بر روی All Files و بهتره که گزینه Encoding بر روی ANSI تنظیم بشه. ( همه که مثل شما نمیدونند)

    ما منتظریم

    موفق باشی
     
    نوشته شده توسط mehdi2477 در ‏20 آوریل 2010
    sobhan 021، muhama، hadi71120000 و 8 نفر دیگر از این ارسال تشکر کرده اند.
  7. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    ویژگی ها و نشانه ها در html

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

    نشانه ها در HTML :

    • عناصر HTML میتوانند شامل خواص و ویژگی هایی باشند.
    • نشانه ها این امکان را میدهند تا اطلاعاتی را به یک عنصر اضافه کنیم.
    • نشانه ها همیشه در تگ آغازین مورد استفاده قرار میگیرند.
    • نشانه ها به صورت جفت نام و مقدار می آیند مثل : name="value"

    مثال برای نشانه ها :
    لینک های در HTML توسط تگ <a> تعریف میشوند، آدرس لینک به صورت یک نشانه(ویژگی) شناخته میشود:
    کد (Text):
    <a href="http://www.w3schools.com">This is a link</a>
    در آموزش های بعدی در مورد لینک ها توضیح خواهیم داد. عجله نکنید!
    از طریق لینک روبرو تمرین کنید : کلیک کنید!

    همیشه مقدار (value) یک ویژگی را نقل کنید :
    ارزش و مقدار یک ویژگی همیشه باید در نقل قول ها لحاظ شود.
    سبک دوبل استایل در نقل قول ها رایج تر است ولی سبک تک استایل در نقل قول ها مورد قبول تر است.(از نظر مرورگرها)
    در بیشتر وضعیت های نادر، که خود مقدار (value) شامل نقل قول میشود؛ لازم است که شما از نقل قول یک گانه استفاده کنید : name='John "ShotGun" Nelson
     
    آخرین ویرایش: ‏21 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏21 آوریل 2010
    pingu، arabicedu، MAH203 و 18 نفر دیگر از این ارسال تشکر کرده اند.
  8. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    تیتر ها :: HTML Headings

    تیتر ها :: HTML Headings

    تیتر ها در HTML از اهمیت ویژه ای برخوردارند.
    تیترها در HTML :

    • تیتر ها توسط تگ <h1> تا <6> تعریف میشوند.
    • <h1> بزرگترین تیتر را تعریف میکند و <h6> نیز کوچکترین تیتر را تعریف میکند.
    مثال :
    کد (Text):
    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    نکته : مرورگرها به طور خودکار یک فاصله خالی قبل و بعد از تیتر ایجاد میکنند.
    تمرین در لینک روبرو : کلیک کنید!

    تیتر ها بسیار مهم هستند :

    • از تگ های تیتر فقط برای تیتر ها استفاده کنید.
    • برای بزرگ تر (BIG) نشان دادن و یا پررنگ تر (BOLD) نشان دادن متن از تگ تیتر استفاده نکنید.
    • موتور های جستجو (مثل گوگل و یاهو و ... ) برای ساختن فهرستی از اطلاعات و محتوای وب سایت شما از تیتر ها استفاده میکنند.
    • از آن جا که ممکن است کاربران صفحات وب شما را به طور سطحی بخوانند، استفاده از تیتر ها برای سازماندهی کردن متن و همچنین منظم نشان دادن آن مهم است.
    • تگ <h1> باید برای تیتر اصلی استفاده شود، بعد تگ <h2> و بعد <h3> و ... یعنی تگ <h1> معرفی کننده مهمترین تیتر است، بعد <h2>که اهمیتش کمتر است و به ترتیب تا <h6> که <h6> اهمیتش کمتر از بقیه است.
    قوانین خط (Rules) در HTML :

    • تگ <hr> برای ساختن (قرار دادن ) خط افقی استفاده میشود.
    مثال :
    کد (Text):
    <p>This is a paragraph</p>
    <hr />
    <p>This is a paragraph</p>
    <hr />
    <p>This is a paragraph</p>
    تمرین در لینک روبرو : کلیک کنید!

    توضیح و تفسیر در HTML :

    توضیحات میتوانند در کد های HTML درج شوند تا نوشته را خواندنی تر و قابل فهم تر کنند.
    توضیحات توسط مرورگرها نادیده گرفته میشوند پس در نتیجه در مرورگر هاینمایش داده نخواهند شد.
    توضیحات مانند مثال زیر نوشته میشوند :
    کد (Text):
    <!-- This is a comment -->
    تمرین و مثال بیشتر در لینک روبرو : کلیک کنید!
    نکته : یک علامت تعجب (!) بعد از براکت ( >) باز وجود دارد ولی قبل از براکت بسته (>) این علامت نیست!
    چگونه کد های HTML را ببینیم ؟

    حتما شما تا به حال یک صفحه ی وب را دیده اید و تعجب کرده اید ؛ " هی چطوری اینو ساخته ؟!!! "
    برای فهمیدن این که چگونه آن را ساخته این کار را انجام دهید :
    در صفحه راست کلیک کنید و گزینه ی "View Source"" را بزنید (در اینترنت اکسپلورر) و در فایرفاکس "View Page Source"را بزنید؛ در مرورگرهای دیگر هم به همین ترتیب. .قتی این کار را انجام دهید یک صفحه باز خواهد شد که کد های HTML صفحه وب مورد نظر شما را نشان خواهد داد.

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

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

     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏21 آوریل 2010
    pingu، amirone1، MAH203 و 17 نفر دیگر از این ارسال تشکر کرده اند.
  9. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    پاراگراف ها :: HTML Paragraphs

    پاراگراف ها :: HTML Paragraphs

    سند های HTML به پاراگراف هایی تقسیم میشوند.
    پاراگراف ها در HTML :

    • پاراگراف ها توسط تگ <p> تعریف میشوند.
    کد (Text):
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>  
    نکته : مرورگر ها به طور اتوماتیک یه فضای خالی قبل و بعد از پاراگراف ایجاد میکنند.
    مثال و تمرین بیشتر در لینک روبرو : کلیک کنید !

    تگ پایانی را فراموش نکنید :
    اگر شما تگ پایانی را فراموش کنید، بیشتر مرورگرها کدهای HTML را به طور صحیح نمایش میدهند؛ مانند مثال زیر:
    کد (Text):
    <p>This is a paragraph
    <p>This is another paragraph
    مثال بالا در بیشتر مرورگر ها به درستی نمایش داده میشود ولی به آنها اعتماد نکنید.فراموش کردن تگ پایانی منجر به اتفاقات و پیغام خطاهای غیر منتظره میشود!
    توجه! : ورژن (نسخه) بعدی HTML به شما اجازه نمیدهد تا این مرحله را از قلم بیندازید.

    شکست خطوط در HTML :

    اگر شما میخواهید خط را بشکنید (یک خط جدیدی را ایجاد کنید) بدون این که پاراگراف جدیدی را شروع کنید از تگ <br> استفاده کنید.
    کد (Text):
    <p>This is<br />a para<br/>graph with line breaks</p>  
    نکته : <br /> یک تگ خالی در HTML است، بنابراین تگ پایانی ندارد.
    تمرین و مثال بیشتر در لینک روبرو : کلیک کنید!

    <br> یا </br> ؟
    در XHTML و XML و ورژن نهایی HTML، عناصری بدون تگ پایانی غیر قابل قبول خواهد بود.
    حتی اگر <br> در همه ی مرورگر ها کار کند، باز هم نوشتن <br /> مطمئن تر و در آینده باثبات تر است.

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

    مرجع تگ های HTML :
    <p> ............... یک پاراگراف را تعریف میکند
    <br />............. یک شکست خط را ایجاد میکند.
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏22 آوریل 2010
    MAH203، abbasalim، aminamery و 13 نفر دیگر از این ارسال تشکر کرده اند.
  10. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    قالب بندی متن :: HTML Text Formatting

    قالب بندی متن :: HTML Text Formatting

    • زبان HTML از تگ هایی مثل <b> استفاده میکند تا متن خروجی به صورت پررنگ در آید.​
    • این تگ ها در HTML، تگ های قالب بندی متن نامیده میشوند.​
    در زیر مرجع این کد ها را مشاهده خواهید کرد :

    تگ های قالب بندی متن :

    [​IMG]

    مثال و تمرین بیشتر : کلیک کنید !

    تگ های خروجی کامپیوتر :

    [​IMG]

    تگ های نقل قول ، کتیشن و توضیحات :

    [​IMG]

    مثال های بیشتر :
    نوع نمایش متن
    در این مثال، نمایشهای گوناگون متن را می بینید.
    قالب بندی پیش فرض
    به کمک تگ pre، قالب بندی اولیه متن خود را(شامل فاصله ها و سرخط ها)، حفظ کنید.
    برچسبهای "خروجی کامپیوتری"
    نوشته های کامپیوتری، حالتهای خاصی دارند که می توان به کمک تگ ها، متن نوشته شده را به آن حالتها نمایش داد. مثال را ببینید.
    آدرس
    تگ address، حالت خاص نمایش آدرس را به متن ما می دهد. ببینید.
    مخفف و مترادف
    اگر بخواهیم مخفف و یا مترادف یک کلمه را در متن نشان دهیم چه می کنیم؟ مثال را ببینید.
    جهت متن
    مثال زیر نشان می دهد که چگونه می توان متن نوشته شده را سروته نشان داد.
    نقل قول
    نقل قول در متن، با توجه به اینکه کوتاه یا بلند باشد، به صورت های مختلف نشان داده می شود. این مثال را ببینید.
    متن حذف و یا اضافه شده
    برای نمایش کلمات حذف و یا اضافه شده به متن اصلی، مثال را ببینید.
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏22 آوریل 2010
    pingu، MAH203، abbasalim و 17 نفر دیگر از این ارسال تشکر کرده اند.
  11. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    استایل ها :: HTML Style

    استایل ها :: HTML Style

    عنصر style یک عنصر جدید در HTML است.از style برای معرفی و وارد کردن CSS در HTML استفاده میشود.
    به متن زیر و رنگش نگاه کنید!!
    متن روبرو قرمز است و با فونت Verdana نوشته شده است. This text is in Verdana and red
    متن روبرو آبی است و با فونت Times نوشته شده است. This text is in Times and blue

    عنصر استایل در HTML :
    هدف از عنصر استایل این است :
    یک استایل رایج و معمولی (پیشفرض) را برای همه ی عناصر پیاده کند.
    استایل در HTML 4 معرفی شد. راهی جدیدی که برای استایل ها در HTML ترجیح داده شد.
    عجله نکنید در آموزش CSS این مسائل را به شما آموزش میدم!
    در این سری آموزش ها فقط هدف آشنایی عنصر استایل را به شما دارم تا شما لا استایل ها در HTML آشنا شوید.

    مثال هایی برای استایل در HTML :

    کد (Text):
    style="background-color:yellow"
      style="font-size:10px"
     style="font-family:Times"
     style="text-align:center"
     


    مثال های استایل :
    رنگ پس زمینه :
    HTML:
    <body style="background-color:yellow">
    مشخصه style یک استایل را برای عنصر <body> تعریف میکند.
    رنگ پس زمینه با استفاده از استایل
    رنگ پس زمینه با استفاده از روش قدیمی

    فونت، رنگ و سایز متن :
    HTML:
    <p style="font-family:courier new; color:red; font-size:20px">
    مشخصه style یک استایل را برای عنصر <p> تعریف میکند.
    فونت،رنگ و سایز با استفاده از استایل
    فونت،رنگ و سایز با استفاده از روش قدیمی

    تنظیم متن :
    HTML:
    <h1 style="text-align:center">
    مشخصه style یک استایل را برای عنصر <h1> تعریف میکند.
    تیتر در مرکز با استفاده از استایل
    تیتر در مرکز با استفاده از روش قدیمی
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏22 آوریل 2010
    golibaroon، sdm، ArefGod و 8 نفر دیگر از این ارسال تشکر کرده اند.
  12. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    لینک ها :: HTML Links

    لینک ها :: HTML Links

    یک لینک آدرس یک سند یا یک منبع در وب است.
    مثال :
    ایجاد فراپیوند
    این مثال نشان می دهد که چگونه می توان، در متن نوشته شده، فراپیوندی ایجاد کرد.
    عکس، به عنوان فراپیوند
    این مثال عکسی را به یک فراپیوند تبدیل می کند.
    (مثالهای بیشتر، در انتهای این پست آمده است)


    Hyperlinks ، Anchors و لینک ها در HTML
    HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و ... .
    دستورالعمل ساخت یک Anchor:
    کد (Text):
    <a href="url"> متنی که نمایش داده  می شود </a>
    در هنگام ساختن یک Anchor باید مکانی که پیوند به آن پرونده اشاره میکند را مشخص کرد. برای نمایش آدرس پرونده از موجودیت href استفاده می شود.کلمات بین بر چسب آغازو پایان Anchor به عنوان فرا پیوند نمایش داده می شود.
    این Anchor یک پیوند به html.ir را معرفی می کند:
    کد (Text):
    <a href="http://www.majidonline.com"> را MajidOnline ملاقات کنید </a>
    خط بالا شبیه این نشان داده خواهد شد : ملاقات کنید MajidOnline را

    یک لینک در HTML :
    قاعده ساخت یک لینک :
    کد (Text):
    <a href="url">Link text</a>
    تگ آغازین شامل عنصری در مورد لینک است.
    محتوای عنصر (متن پیوند ) قسمتی است که نمایش داده خواهد شد.
    نکته : محتوای عنصر حتما نباید شامل متن باشد! میتواند شامل لینک یک عکس یا هر چیز دیگری باشد.

    مشخصه href :
    عنصر href آدرس یک لینک را تعریف میکند.
    عنصر <a> زیر، یک لینک به سایت مجید آنلاین را تعریف میکند :
    کد (Text):
    <a href="http://www.majidonline.com/">Visit MajidOnline!</a>
    کد بالا به صورت روبرو نمایش داده میشود : !Visit MajidOnline

    مشخصه target :
    توسط target شما میتوانید مشخص کنید که فایل لینک داده شده به آن کجا باز شود.
    به عنوان مثال، کد زیر سایت مجید آنلاین را در صفحه جدیدی باز میکند:
    کد (Text):
    <a href="http://www.majidonline.com/"target="_blank">Visit MajidOnline!</a>
    [​IMG]
    مشخصه name :
    مشخصه name برای ساخت یک لینک دارای نام استفاده میشود.توسط لینک دارای نام شما میتوانید لینکی بسازید که به قسمت خاصی از صفحه مستقیما جهش داشته باشد به جای این که کاربر را مجبور به پیمودن صفحه کنید تا به قسمت مورد نظر برسد.
    قاعده ساخت یک لینک دارای نام به صورت زیر است :
    کد (Text):
    <a name="label">Any content</a>
    قاعده ساخت یک named anchor :
    کد (Text):
    <a href="#label">Any content</a>
    # در عنصر href یک named anchor را تعریف میکند.

    مثال :
    عنصر anchor named داخل یک سند HTML :
    کد (Text):
    <a name="tips">Useful Tips Section</a>
    لینک به قسمت مورد نظر از همان سند :
    کد (Text):
    <a href="#tips">Jump to the Useful Tips Section</a>
    لینک به قسمت مورد نظر از یک سند دیگر :
    کد (Text):
    <a href="http://www.majidonline.com/html_tutorial.htm#tips">Jump to the Useful Tips Section</a>
    نکات پایه ای - اطلاعات مفید :
    همیشه یک علامت "/" به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این درست کنید
    کد (Text):
    href="http://www.majidonline.com/links.html"
    شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت "/" به انتهای آدرس اضافه کرده و یک تقاضای جدید درست می کند. مثل این:
    کد (Text):
    href="http://www.majidonline.com/links.html/"
    از Anchor نام دار معمولا برای ساخت یک جدول از محتویات در ابتدای یک پرونده بزرگ استفاده می شود. به هر بخش در میان پرونده یک Anchor نام دار داده شده و پیوند به هرکدام از این Anchor ها در بالای پرونده قرار داده شده است. اگر یک مرورگر نتواند Anchor نام داری را که مشخص شده است را پیدا کند به ابتدای آن پرونده رفته و هیچ خطایی اتفاق نمی افتد.

    مثال های بیشتر :
    لینک به محلی در همین متن
    فرض کنید در ابتدای متن، فهرستی از محتوای متن نوشته اید. اگر بخواهیم با کلیک روی هر یک از سرفصلها، به آن سرفصل مراجعه کنیم، چگونه عمل می کنیم؟ لینک های این مثال، چگونگی این کار را نشان می دهند.
    شکستن حصار قاب
    اگر صفحه شما، داخل یک قاب نمایش داده می شود، لینک های آن، محتوای قاب را تغییر می دهند. برای شکستن این محدودیت و تغییر محتوای کل پنجره مانند این مثال عمل کنید.
    لینک به Email
    در صورتیکه آدرس لینک شما، از شماهای دیگری غیر از http، مانند mailto و یا ftp استفاده کند، چه می شود. این مثال نمونه ای را نمایش می دهد.
    لینک به Email (نوعی دیگر)
    در این مثال نمونه دیگری از لینک نوع mailto را می بینید.

     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏24 آوریل 2010
    sdm، ArefGod، PhonieX و 5 نفر دیگر از این ارسال تشکر کرده اند.
  13. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    عکس ها :: HTML Images

    عکس ها :: HTML Images

    هدف ما این است شما خودتان یاد بگیرید! پس روی لینک های زیر کلیک کنید و تا حدودی با این عنصر آشنا شوید. کلیک کنید !
    قرار دادن عکس !
    در لینک بالا میتوانید بفهمید چگونه عکس ها را در صفحات وب قرار میگیرند (تمرین کنید!)
    قرار دادن عکس از سرور دیگر !
    در لینک بالا، نحوه قرار دادن عکس از سرور های دیگر را می بینید.

    تگ عکس ها و مشخصه src :
    در HTML عکس ها توسط تگ <img> تعریف میشوند.
    تگ <img> خالی است، به این معنی که میتواند شامل عناصری باشد و تگ پایانی ندارد.
    برای نشان دادن یک عکس در صفحه، شما باید از عنصر src استفاده کنید.
    Src مخفف source (منبع) است.
    محتوای عنصر url ، src تصویری است که شما می خواهید در صفحه تان نمایش دهید.
    نحوه معرفی یک تصویر:
    کد (Text):
    <"img src="url >
    url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که "HTML.png" نامیده شده در دایرکتوری "images" در "www.majidonline.com" دارای این url است:
    کد (Text):
    http://forum.majidonline.com/images/icons/iconss/web/HTML.png
    مرورگر تصویر را جایی قرار می دهد که تگ تصویر سند HTML در آنجا قرار گرفته است.اگر شما تگ تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و بعد پاراگراف دوم را نشان می دهد.

    مشخصه alt :
    عنصر alt برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای عنصر alt یک متن توصیفی است:
    کد (Text):
    <img src="boat.gif" alt="Big Boat" />
    اگر مرورگر نتواند تصویری را بارگیری نماید ، عنصر alt به خواننده می گوید که آن را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای آن نشان خواهد داد
    این یک عادت خوبی است تا هر عکس را در صفحه با عنصر alt همراه کنید تا برای کسانی که مجبورند در مرورگرهایشان فقط متن را مشاهده کنند صفحه شما بهتر و مفید تر نمایش داده شوند.

    نکات پایه ای - اطلاعات مفید :
    اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج است. بارگیری تصاویر وقت گیر است ، بنابر این توصیه من این است که از تصاویر به دقت استفاده کنید.

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

    تگ های عکس :

    [​IMG]
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏25 آوریل 2010
    sdm، ArefGod، PhonieX و 5 نفر دیگر از این ارسال تشکر کرده اند.
  14. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    جدول ها :: HTML Tables

    جدول ها :: HTML Tables

    مثال های زیر را ببینید و خودتان تمرین کنید.
    جدولها
    این مثال به ما نشان می دهد که چگونه می توانیم یک جدول بکشیم.
    حاشیه جدول
    این مثال حاشیه های مختلف جدول را نشان می دهد.
    (مثالهای بیشتر، در انتهای این صفحه آمده است)


    جدول ها :

    • جداول بوسیله تگ <table> معرفی می شوند.
    • هر جدول به سطرها (بوسیله تگ <tr>) و هر سطر به سلول های داده تقسیم می شود (بوسیله تگ <td>)
    • حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است.
    • یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد.
    کد (Text):
    <table border="1">
    <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>
    چگونگی نمایش در مرورگر :

    [​IMG]

    جدول ها و عنصر border :

    اگر شما برای جدول عنصر (border) حاشیه را تعیین نکرده اید، جدول شما بدون حاشیه نمایش داده خواهد شد.
    بعضی از مواقع این کار مفید است ولی بیشتر اوقات شما نیاز دارید تا حاشیه دیده شود.
    برای نمایش یک جدول به همراه حاشیه شما باید از عنصر border استفاده کنید :
    کد (Text):
    <table border="1">
    <tr>
    <td>Row 1, cell 1</td>
    <td>Row 1, cell 2</td>
    </tr>
    </table>
    سر تیتر ها در جدول ها :
    سرتیترها در یک جدول با تگ <th> تعریف میشوند.
    کد (Text):
    <table border="1">
    <tr>
    <th>Heading</th>
    <th>Another Heading</th>
    </tr>
    <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>
    چگونگی نمایش در مرورگر :

    [​IMG]

    سلول های خالی در جدول ها :
    سلول های جداول با محتوای خالی در بیشتر مرورگرها خوب نشان داده نمی شوند.
    کد (Text):
    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td></td>
    </tr>
    </table>
    چگونگی نمایش در مرورگر :

    [​IMG]
    این کدها در مرورگر بدین صورت نشان داده می شوند.توجه کنید که حاشیه های اطراف سلول خالی جدول از بین رفته است(موزیلا فایر فاکس(Fire Fox) حاشیه را نشان می دهد.).برای جلوگیری از آن یک فاصله نا مقطوع(;nbsp&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید.
    کد (Text):
    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    چگونگی نمایش در مرورگر :

    [​IMG]

    نکات پایه - اطلاعات مفید :
    عناصر <thead>، <tbody>و <tfoot>به دلیل پشتیبانی بد مرورگر ها به ندرت مورد استفاده قرار می گیرند. انتظار می رود که در نسخه های بعدی XHTML این روند تغییر کند.

    مثال های بیشتر :
    جدول بدون حاشیه
    در این مثال یک جدول بدون حاشیه را می بینید.
    سرتیترهای جدول
    چگونگی نمایش سرتیترها را در جدول می بینید.
    سلول خالی
    این مثال طریق استفاده از "&nbsp;"، برای نمایش صحیح سلولهای خالی را نشان می دهد.
    عنوان جدول
    این مثال چگونگی عنوان دار کردن جدول را نشان می دهد.
    توسعه سلول جدول به بیش از یک سطر یا ستون
    در این مثال چگونگی ساخت سلولی که بیش از یک ستون یا سطر را می پوشاند را می بینید.
    جدول در جدول
    برای ساخت جدولی، درون یک جدول دیگر، به این مثال توجه کنید.
    حاشیه خالی سلول
    در این مثال، روش قرار دادن حاشیه خالی بین محتوای سلول و حاشیه ان را می آموزیم.
    فاصله سلولها
    برای تعیین فاصله بین سلولها به این مثال توجه کنید.
    زمینه جدول
    برای زمینه جدول می توان یک رنگ و یا یک عکس را انتخاب کرد. به این مثال توجه کنید.
    زمینه برای یک سلول
    همانند مثال قبل است با این تفاوت که این بار زمینه فقط برای یک سلول انتخاب می شود.
    محل نمایش محتوای یک سلول
    با استفاده از عنصر "align"، می توان محل نمایش محتوای یک سلول را تعیین کرد. برای این منظور به این مثال توجه کنید.
    تعین قاب دور جدول
    به کمک عنصر "frame"، میتوان نوع قاب دور جدول را تعیین کرد. نگاه کنید.


    تگ های جدول :

    [​IMG]
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏25 آوریل 2010
    sdm، ArefGod، PhonieX و 5 نفر دیگر از این ارسال تشکر کرده اند.
  15. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    فهرست ها :: HTML Lists

    فهرست ها :: HTML Lists

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

    فهرست های نامرتب :

    • یک فهرست نامرتب ، لیستی از اقلام است.
    • اقلام فهرست به وسیله گلوله نشان گذاری می شوند (معمولا یک دایره سیاه کوچک).
    • یک فهرست نامرتب با یک تگ <ul> آغاز می شوند.
    • هر کدام از اقلام فهرست با تگ <li> آغاز می شوند.
    کد (Text):
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
    چگونگی نمایش در مرورگر :

    • Coffee
    • Milk
    داخل اقلام فهرست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.

    فهرست های مرتب :

    • یک فهرست مرتب شده نیز لیستی از اقلام است.
    • اقلام فهرست بوسیله شماره نشان گذاری می شوند.
    • یک فهرست مرتب با تگ <ol> آغاز می شود.
    • هرکدام از اقلام فهرست با تگ <li> آغاز می شوند.
    کد (Text):
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

     
    چگونگی نمایش در مرورگر :

    1. Coffee
    2. Milk
    داخل اقلام فهرست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.

    فهرست های تعریفی :

    • یک فهرست تعریفی ، فهرستی از اقلام نیست.
    • این فهرست ، فهرستی از عبارات و توضیحات آن عبارات است.
    • یک فهرست تعریفی با برچسب<dl> آغاز می شود.
    • هر کدام از اقلام فهرست تعریفی با تگ <dt> آغاز می شود.
    • هر تعریف در فهرست تعریفی با تگ <dd> آغاز می شود
    کد (Text):
    <dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
    </dl>
    چگونگی نمایش در مرورگر :
    CoffeeBlack hot drinkMilkWhite cold drinkداخل تعاریف یک فهرست تعریفی (تگ <dd>)شما می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، فهرست های دیگر و ... قرار دهید.

    مثال های بیشتر :
    نمایشهای گوناگون tفهرست های مرتب
    در این مثال صورتهای مختلف فهرست های مرتب را می بینید.
    نمایشهای گوناگون فهرست های دون ترتیب
    این مثال نمایشهای مختلف فهرست های بدون ترتیب را نشان می دهد.
    فهرست های تو در تو
    چگونگی ساخت فهرست های تو در تو را در این مثال می بینید.
    فهرست های تو در تو (2)
    این مثال نیز گونه های دیگری از فهرست های تو در تو را نشان می دهد.
    فهرست تعریفی
    این مثال روش ساخت فهرست ، که در آن مقدار و محتوای هر عنصر فهرست تعریف می شوند را نشان می دهد.


    تگ های فهرست :
    [​IMG]
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏25 آوریل 2010
    sdm، ArefGod، PhonieX و 5 نفر دیگر از این ارسال تشکر کرده اند.
  16. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    فرم ها :: HTML Forms

    فرم ها :: HTML Forms

    فرم های HTML به منظور انتخاب انواع مختلف ورودی های کاربر استفاده می شوند.
    به کمک مثال ها خودتان تمرین کنید!
    فیلد متنی
    این مثال طریق ساخت یک فیلد متنی را نشان می دهد. کاربر می تواند اطلاعات خود را در این فیلد بنویسد.
    فیلد رمزعبور
    گاهی نیاز است که مقداری که کاربر وارد می کند، دیده نشود. برای ایجاد چنین فیلد ورودی، از فیلد رمز عبور استفاده می کنیم. این مثال روش ساخت این فیلد را نشان می دهد.
    (مثالهای بیشتر، در انتهای این صفحه آمده است)

    فرم ها :: Forms

    یک فرم ، منطقه ای حاوی عناصر فرم است.
    عناصر فرم ، عناصری هستند که به کاربر اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکس ها و...) در فرم وارد کند.
    یک فرم با تگ <form> معرفی می شود.
    کد (Text):
    <form>
    .
    input elements
    .
    </form>
    Input (خروجی) :
    در تگ <form> تگ <input> بیشترین استفاده را دارد.نوع ورودی با خواص آن تعیین می شود.
    انواع پر کاربرد ورودی ها در پایین توضیح داده شده اند.

    فیلد های متنی :: Text Fields

    فیلد متنی هنگامی استفاده می شود که شما می خواهید کاربر ، حروف ، اعداد و... را تایپ کند.
    چگونگی نمایش در مرورگر :

    [​IMG]
    کد (Text):
    <form action="">
    First name:
    <input name="firstname" size="20" type="text">
    <br>
    Last name:
    <input name="lastname" size="20" type="text">
    </form>
    توجه کنید که خود فرم قابل رویت نیست ، همچنین توجه داشته باشید که در بیشتر مرورگرها طول فیلد متنی بطور پیش فرض 20 کاراکتر است.

    دکمه های رادیویی :: Radio Buttons
    دکمه های رادیویی زمانی استفاده می شوند که شما می خواهید کاربر از بین تعداد محدودی انتخاب، یکی را انتخاب کند.
    چگونگی نمایش در مرورگر :

    [​IMG]
    کد (Text):
    <form>
    <input type="radio" name="***" value="male" /> Male
    <br />
    <input type="radio" name="***" value="female" /> Female
    </form>
    توجه کنید که فقط یک گزینه می تواند انتخاب شود.

    چک باکس ها :: Checkboxes
    چک باکس ها زمانی استفاده می شوند که شما بخواهید کاربر از میان تعداد محدودی انتخاب ، یک یا چند گزینه را انتخاب کند.
    چگونگی نمایش در مرورگر :

    [​IMG]
    کد (Text):

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

    عنصر Action فرم و دکمه Submit :
    هنگامی که کاربر روی دکمه "Submit" کلیک می کند ، محتویات فرم به یک فایل دیگر فرستاده می شوند.
    فایل معرفی شده در عنصر Action معمولا کاری را با اطلاعات ورودی دریافتی انجام می دهد.
    چگونگی نمایش در مرورگر :

    [​IMG]
    کد (Text):
    <form name="input" action="html_form_submit.asp" method="get">
    Username:
    <input type="text" name="user" />
    <input type="submit" value="Submit" />
    </form>
    اگر شما تعدادی کاراکتر در فیلد متنی بالا تایپ کنید و دکمه "Submit" را کلیک کنید شما ورودی خود را به صفحه ای که "action1.asp" نام دارد خواهید فرستاد.آن صفحه به شما ورودی های دریافتی را نشان خواهد داد.

    مثال های بیشتر :: More Examples
    چک باکس ها
    روش ساخت فیلد چک باکس(انتخاب) در این مثال توضیح داده شده است. کاربر می تواند موارد مورد نظر خود را انتخاب کند.
    دکمه رادیویی
    دکمه های رادیویی مانند این مثال ساخته می شوند. از این دکمه ها برای انتخاب یک مورد از چند مورد استفاده می شود.
    انتخاب کرکره ای ساده
    این فیلد انتخابی، همانند دکمه رادیویی، برای انتخاب یک مورد از چند مورد، به کار می رود. با این تفاوت که فهرست عناصر بصورت کرکره، باز و بسته می شوند؛ و عنصر انتخابی فقط دیده می شود.
    فیلد کرکره ای (2)
    این مثال نیز فیلد کرکره ای را نمایش می دهد. با این تفاوت که برای این فیلد، یکی از مقادیر فهرست انتخابف به عنوان مقدار پیش فرض تعیین شده است.
    ناحیه متنی
    تفاوت این فیلد با فیلد متنی این است که در این فیلد، خطهای نا محدودی می توان وارد کرد. یک ورودی چند خطی. روش ساخت این فیلد در این مثال آمده است.
    دکمه
    این مثال روش ساخت دکمه را توضیح می دهد. نوشته روی دکمه را می توانید خودتان تعیین کنید.
    مجموعه فیلدها
    به کمک این سازه می توان حاشیه و عنوانی را برای یک یا چند فیلد ورودی تعیین کرد. این دسته بندی به کاربر کمک می کند که مجموعه اطلاعات مرتبط با هم را بهتر تشخیص دهد.

    مثال برای فرم ها :: Forms Example
    فرم، فیلدهای ورودی و دکمه تایید(submit)
    این مثال طریق اضافه کردن فرم و فیلدهای داخل آن را نشان می دهد. دکمه تایید محتوییات فرم را به آدرس action می فرستد.
    فرم به همراه چک باکس
    این مثال، فرمی به همراه فیلد چک باکس داخل آن تعریف می کند.
    فرم به همراه دکمه های رادیویی
    باز هم مثالی دیگر برای فرم. فرمی که در آن فیلد رادیویی وجود دارد.
    ارسال نامه الکترونیکی به کمک فرم
    در این مثال روش ارسال email به کمک فرم، نشان داده شده است. به موجودیت action فرم توجه کنید.

    تگ های فرم :: Form Tags

    [​IMG]
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏26 آوریل 2010
    tafti، PhonieX، eckankar123 و 3 نفر دیگر از این ارسال تشکر کرده اند.
  17. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    رنگ ها :: HTML Colors

    رنگ ها :: HTML Colors

    رنگ ها با ترکیب منابع نوری قرمز ، سبز و آبی معرفی می شوند.
    محتوای رنگ ها :: Color Values
    رنگ ها با استفاده از نشان گذاری مبنای 16 برای ترکیب مقدار رنگ قرمز و سبز آبی معرفی می شوند.
    پایین ترین مقدار رنگی که می توان به یک منبع رنگی داد صفر است (hex #00) و بالاترین مقدار 255 است(hex #ff).

    [​IMG]
    مثال و تمرین در لینک روبرو : کلیک کنید!

    نام رنگ ها :: Web Standard Color Names
    یک کلکسیون از نام رنگ ها بوسیله بیشتر مرورگرها پشتیبانی می شود.
    توجه: فقط 16 رنگ توسط استاندارد W3C HTML4.0 پشتیبانی می شود ( aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , white , yellow ). برای تمام رنگ های دیگر ، شما باید از مقدار شما باید از مقدار مبنای 16 رنگها استفاده کنید.

    رنگ های ایمن وب :: Web Safe Colors
    چندین سال پیش که کامپیوترها فقط 256 رنگ متفاوت را پشتیبانی می کردند ، لیستی از 216 رنگ ایمن وب بعنوان استاندارد وب پیشنهاد شد.
    دلیل این پیشنهاد آن بود که سیستم عامل های مایکروسافت و Mac از 40 رنگ ثابت از پیش تعیین شده سیستمی استفاده می کردند.

    جدول متقاطع 216 رنگ :

    [​IMG]
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏26 آوریل 2010
    PhonieX، baviran، eckankar123 و 3 نفر دیگر از این ارسال تشکر کرده اند.
  18. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    نام رنگ ها :: HTML Color Names

    نام رنگ ها :: HTML Color Names

    نام رنگ ها :: HTML Color Names
    در این پست شما یک جدول از اسامی رنگ هایی پیدا خواهید کردکه با بیشتر مرورگره پشتیبانی می شوند.
    توجه: فقط 16 نام رنگ با استاندارد W3C HTML 4.0 پشتیبانی می شوند. برای بقیه رنگ ها باید از مقادیر مبنای 16 آنها استفاده کرد
    برای مشاهده روی لینک زیر کلیک کنید :
    نام رنگ ها در HTML
    [​IMG]
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏26 آوریل 2010
    PhonieX، eckankar123، Saeed و 2 نفر دیگر از این ارسال تشکر کرده اند.
  19. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    فهرستی خلاصه از html 4.01

    فهرستی خلاصه از HTML 4.01

    این لیست را پرینت بگیرید، تا کنید و در جیبتان قرار دهید!!!
    HTML:
    <html>
    <head>
    <title>Document name goes here</title>
    </head>
     <body>
    Visible text goes here...
    </body> </html>
      [B]Heading Elements[/B]

     <h1>Largest Heading</h1> <h2> . . . </h2>
    <h3> . . . </h3>
    <h4> . . . </h4>
    <h5> . . . </h5>
     <h6>Smallest Heading</h6>
      [B]Text Elements[/B]

     <p>This is a paragraph</p>
    <br /> (line break)
    <hr /> (horizontal rule)
    <pre>This text is preformatted</pre>  [B]Logical Styles[/B]

     <em>This text is emphasized</em>
    <strong>This text is strong</strong>
    <code>This is some computer code</code>  [B]Physical Styles[/B]

     <b>This text is bold</b>
    <i>This text is italic</i>  [B]Links, Anchors, and Image Elements[/B]

     <a href="http://www.example.com/">This is a Link</a>
    <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
    <a href="mailto:[email protected]">Send e-mail</a>A  named anchor:
    <a name="tips">Useful Tips Section</a>
    <a href="#tips">Jump to the Useful Tips Section</a>
      [B]Unordered list[/B]

     <ul>
    <li>First item</li>
    <li>Next item</li>
    </ul>  [B]Ordered list[/B]

     <ol>
    <li>First item</li>
    <li>Next item</li>
    </ol>  [B]Definition list[/B]

     <dl>
    <dt>First term</dt>
    <dd>Definition</dd>
    <dt>Next term</dt>
    <dd>Definition</dd>
    </dl>  [B]Tables[/B]

      <table border="1">
    <tr>
      <th>Tableheader</th>
      <th>Tableheader</th>
    </tr>
    <tr>
      <td>sometext</td>
      <td>sometext</td>
    </tr>
    </table>
      [B]Frames[/B]

      <frameset cols="25%,75%">
      <frame src="page1.htm" />
      <frame src="page2.htm" />
    </frameset>
      [B]Forms[/B]

     <form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="email" value="[email protected]" size="40" maxlength="50"  />
    <input type="password" />
    <input type="checkbox" checked="checked" />
    <input type="radio" checked="checked" />
    <input type="submit" />
    <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>
      [B]Entities[/B]

     &lt; is the same as <
    &gt; is the same as >
    © is the same as ©  [B]Other Elements[/B]

      <!-- This is a comment -->
      <blockquote>
    Text quoted from a source.
    </blockquote>
      <address>
    Written by majidonline.com<br />
    <a href="mailto:[email protected]">Email us</a><br />
    Address: Box 564, Disneyland<br />
    Phone: +12 34 56 78
    </address>
     
     
    آخرین ویرایش: ‏30 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏26 آوریل 2010
    PhonieX، baviran، eckankar123 و 4 نفر دیگر از این ارسال تشکر کرده اند.
  20. V.Valizadeh9

    V.Valizadeh9 Well-Known Member

    ارسال‌ها:
    222
    تشکر شده:
    782
    امتیاز دستاورد:
    93
    خوب شکر خدا تونستم آموزش های مقدماتی html رو به پایان برسونم . (از حمایت ها ممنونم:))
    به زودی یک PDF از قسمت اول قرار داده میشه. (اگه کسی زحمتشو بکه ممنون میشم:green:)
    دور جدید آموزش ها با HTML پیشرفته شروع میشه :paint:
     
    آخرین ویرایش: ‏26 آوریل 2010
    نوشته شده توسط V.Valizadeh9 در ‏26 آوریل 2010
    Niliyon439، mf2fx، ArefGod و 5 نفر دیگر از این ارسال تشکر کرده اند.
وضعیت موضوع:
موضوع بسته شده است.

به اشتراک بگذارید