expression blend

هوش و استعاد ایرانی ها فوق العاده است

آموزش کامل HTML

سه شنبه 25 آبان 1389

شما با آموزش با HTML  به راحتی می توانید برای خودتان یک سایت درست کنید مطالبی که دوست دارید در آن بیاورید حروف را با فونت های مختلف در سایز های مختلف به سبکهای مختلف و رنگ های مختلف در سایت بیاورید میتوانید از جدول استفاده کنید - میتوانید به راحتی از تصاویر در سایت استفاد ه کنید - میتوانید آدرس سایت های دیگر را در سایت خودتان بیاورید و میتوانید از یک یا چند صفحه برای سایت مورد نظرتان استفاده کنید  میتوانید از کنترلهای مختلف مانند BUTTON  - لیبل  و منو و خیلی از کنترل های دیگر داشته باشید .

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

در ابتدا یک مثال خواهم آورد تا به شکل و فرم نوشتن در آن آشنا شوید .

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html


مقدمه بر تعریف HTML

سه شنبه 25 آبان 1389


  • HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
  • یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
  • بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
  • یک فایل HTML باید دارای پسوند html. یا html. باشد
  • یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

ا
شما تنها با برنامه نوت پد NotePad میتوانید فایلهای HTML تولید کنید و آن فایل را با پسوند HTM سیو کنید بعد آنرا با یک bROWSER  مثلا IE  اجرا کنید و میبینید که شما هم میتوانید یک سایت را فقط بانوت پد ایجاد کنید .البته برای کمک به سرعت نوشتن می توانید از برنامه های مثل دریم ویور نیز استفاده کنید .


اولین برنامه HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 


اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.

<html>
<head>
<title>title of page </title>
</head>
<body>
hELLO WORLD.<b> I AM PROGRAMER HTML </b>
</body>
</html>

فایل را تحت عنوان "HELLOWORLD.htm"ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان  مثال "C:\HELLOWORLD.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان داده می شود .

ولین برچسب در فایل HTML شما ، <html> است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما <html/> است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است.
متن های بین برچسب و اطلاعات سرانداز (header)شماست .اطلاعات سر انداز در پنجره مرورگر نشان داده نخواهد شد. متن بین برچسب <title>، سرتیتر پرونده شماست. سرتیتر در قسمت عنوان صفحه مرورگر نشان داده خواهد شد.
متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب <body> نشان داده خواهد شد.
متنی که بین برچسب <b> قرار گیرد در مرورگر بصورت برجسته نشان داده خواهد شد.




تگ ها HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 


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

عناصر HTML

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

<b>This text is bold</b>
عنصر HTML با یک برچسب شروع ، آغاز می شود:<b>
محتوای عنصر HTML: This text is bold
عنصر HTML با یک برچسب پایانی تمام می شود:<b/>
هدف برچسب <b> این است که تعریف کند عناصر HTML باید بصورت برجسته نشان داده شوند این نیز همچنین یک عنصر HTML است:

<body>
This is my first homepage.<b>This text is bold</b>
</body>

این عنصر HTML با برچسب آغازین <body> شروع و با برچسب پایانی <body/> تمام می شود.
هدف برچسب <body> این است که عناصر HTML را که محتوای بدنه HTML هستند تعریف کند.

چرا ما از برچسب هایی با حروف کوچک استفاده می کنیم؟

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

عناصر برچسب:

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

حالتهای کتیشن ، 'قرمز' یا "قرمز"؟

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


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

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 

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


مثالها

ساده ترین Html
این مثال ساده ترین نمونه html است که در آن، از کمترین برچسب ممکن، استفاده شده است. در این مثال جمله نوشته شده درون برچسب body، نمایش داده می شود. 

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

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


 سر تیتر ها

سر تیترها با برچسب های <h1>تا<h6>معرفی می شوند.<h1>بیانگر بزرگترین سرتیتر  و<h6> بیانگر کوچکترین سر تیتر است. HTML بطور خودکار فضای خالی اضافی  به قبل و بعد از سر تیترها اضافه می کند.

<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>


پاراگراف ها

پاراگراف ها با برچسب <p> معرفی می شوند.HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.

<p> This is a paragraph </p>
<p> This is another paragraph </p>


پرش به خط بعد

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

توضیحات در HTML

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

<!--This is a comment-->

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

نکات پایه ای - اطلاعات مفید

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

مقداری اطلاعات اضافی

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

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


مثالهای بیشتر

پاراگرافهای بیشتر
این مثال رفتار برچسب پاراگراف را با نمایش چند نمونه از آن، نشان می دهد.

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

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

سر فصل
در این مثال طریق متمایز کردن جملات سر فصل را می بینید.

سر فصل در وسط خط
این مثال نشان می دهد که چگونه می توان،محل نمایش جمله، در خط را تعیین کرد.

خط افقی
این مثال روش نمایش یک خط افقی را نشان می دهد.

توضیحات مخفی
گاهی، نیاز به نوشتن توضیحی درباره html خود دارید. این توضیح باید در حالت نمایش دیده نشود. این مثال روش نوشتن چنین متن هایی را، داخل html، نشان می دهد.

رنگ زمینه
می توانید رنگ زمینه html خود را تعیین کنید. این مثال را ببینید.


برچسب های پایه

برچسب ها توضیحات
<html> یک پرونده HTML را معرفی می کند
<body> بدنه پرونده را معرفی می کند
<h1> to <h6> سر تیتر 1 تا 6 را معرفی می کند
<p> یک پاراگراف را معرفی می کند
<br> یک خط خالی را معرفی می کند
<hr> یک خط افقی را معرفی می کند
<!--> توضیحات را معرفی می کند


قالب بندی متن در HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 

 Html، برچسبهای زیادی برای قالب بندی متن، مانند برچسب نمایش برجسته و یا برچسب مورب، دارد. در زیر مثالهای زیادی برای شما وجود دارد:


مثالها

نوع نمایش متن
در این مثال، نمایشهای گوناگون متن را می بینید.

قالب بندی پیش فرض
به کمک برچسب pre، قالب بندی اولیه متن خود را(شامل فاصله ها و سرخط ها)، حفظ کنید.

برچسبهای "خروجی کامپیوتری"
نوشته های کامپیوتری، حالتهای خاصی دارند که می توان به کمک برچسبها، متن نوشته شده را به آن حالتها نمایش داد. مثال را ببینید.

آدرس
برچسب address، حالت خاص نمایش آدرس را به متن ما می دهد. ببینید.

مخفف و مترادف
اگر بخواهیم مخفف و یا مترادف یک کلمه را در متن نشان دهیم چه می کنیم؟ مثال را ببینید.

سروته   هتورس
مثال زیر نشان می دهد که چگونه می توان متن نوشته شده را سروته نشان داد.

نقل قول
نقل قول در متن، با توجه به اینکه کوتاه یا بلند باشد، به صورت های مختلف نشان داده می شود. این مثال را ببینید.

متن حذف و یا اضافه شده
برای نمایش کلمات حذف و یا اضافه شده به متن اصلی، مثال را ببینید.


چگونه منبع HTML را ببینیم?

آیا شما تا حالا صفحه ای را دیده اید که از دیدن آن شگفت زده شده با شید وبگویید چگونه این کار را انجام داده اند؟
برای پیدا کردن آن بسادگی بروی گزینه view روی نوار ابزار کلیک کنید وگزینه source یا page source را انتخاب کنید.آن یک پنجره ای را باز خواهد کرد که به شما HTML واقعی آن صفحه را نشان خواهد داد.

برچسب های قالب بندی متن

برچسب ها توضیحات
<b> متن را برجسته معرفی می کند
<big> متن را بزرگ معرفی می کند
<em> متن را مورب معرفی می کند
<i> متن را مورب معرفی می کند
<small> متن را کوچک معرفی می کند
<strong> متن را برجسته معرفی می کند
<sub> متن را زیرنویس دار معرفی می کند
<sup> متن را بالانویس دار معرفی می کند
<ins> قطعه متنی را که در متن اصلی جا داده شده معرفی می کند
<del> قطعه متنی را که از متن اصلی حذف شده نشان می دهد
<s> توصیه نمی گردد. به جای آن از <del> استفاده کنید.
<strike> توصیه نمی گردد. به جای آن از <del> استفاده کنید.
<u> توصیه نمی گردد.به جای آن از خواص Style استفاده کنید

برچسب های خروجی کامپیوتر

برچسب ها توضیحات
<code> متن کد کامپیوتری را معرفی می کند
<kbd> متن صفحه کلید را معرفی می کند
<samp> متن نمونه مثال های کامپیوتری را معرفی می کند
<tt> متن را بصورت ماشین نویس معرفی می کند
<var> یک مقدار را معرفی می کند
<pre> متن از پیش قالب بندی شده را معرفی می کند
<listing> توصیه نمی گردد. به جای آن از <pre> استفاده کنید
<plaintext> توصیه نمی گردد. به جای آن از <pre> استفاده کنید
<xmp> توصیه نمی گردد. به جای آن از <pre> استفاده کنید

برچسب های نقل قول ، کتیشن و توضیحات

برچسب ها توضیحات
<abbr> یک کلمه مخفف را معرفی می کند
<acronym> یک سرنام را معرفی می کند
<address> یک عنصر آدرس را معرفی می کند
<bdo> جهت متن را معرفی می کند
<blockquote> یک کتیشن بلند را معرفی می کند
<q> یک کتیشن کوتاه را معرفی می کند
<cite> نقل قول را معرفی می کند
<dfn> یک عبارت توضیحی را معرفی می کند


موجودیت های HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 

تعدادی از کاراکترها مثل کاراکتر ">" یک معنی خاص در HTML دارندو از این رو نمی توان از آنها در متن ها استفاده کرد. برای نشان دادن علامت کوچکتر از ">" ما باید از یک موجودیت کاراکتر استفاده کنیم.


موجودیت های کاراکتر

تعدادی از کاراکترها یک معنی خاص در HTML دارند.مثل علامت کوچکتر از ">" که شروع یک برچسب HTML را معرفی می کند.اگر ما بخواهیم که مرورگر عملا این کاراکتر ها را نشان بدهد باید در منبع کد HTML موجودیت های کاراکتر را وارد کنیم.
یک موجودیت کاراکتر سه بخش دارد: یک علامت "&" ، یک موجودیت اسم یا یک علامت "#" و یک موجودیت عددو در نهایت یک ";".
برای نمایش یک علامت کوچکتر از در یک پرونده HTML ما باید بنویسیم: ;lt& یا ;60#& .
فایده استفاده از یک نام بجای یک عدد این است که به خاطر سپردن یک نام آسان تر است و اشکال آن این است که همه مرورگر ها موجودیت کاراکترها را پشتیبانی نمی کنند در حالی که تقریبا همه مرورگرها خیلی خوب از موجودیت عددها پشتیبانی می کنند.
توجه کنید که موجودیت ها حساس به حروف کوچک و بزرگ هستند.

فاصله بدون شکست

یکی از موجودیت کاراکترهای پر استفاده در HTML فاصله بدون شکست است. بطور عادی HTML فاصله ها را در متن شما کوتاه خواهد کرد ، اگر شما ده فاصله در متن خود بگذارید HTML 9 تای آن را از بین خواهد برد. برای اضافه کردن فاصله در متنتان ، از موجودیت کاراکتر ;nbsp& استفاده کنید.

موجودیت کاراکترهای پر استفاده

نتیجه توضیحات نام موجودیت شماره موجودیت
  فاصله بدون شکست &nbsp; &#160;
< کوچکتر از &lt; &#60;
> بزرگتر از &gt; &#62;
& ampersand &amp; &#38;
" علامت کتیشن &quot; &#34;
' آپاستروف &apos;(در IE کاربرد ندارد) &#39;

دیگر موجودیت کاراکترهای پر استفاده

نتیجه توضیحات نام موجودیت شماره موجودیت
¢ cent &cent; &#162;
£ پاوند &pound; &#163;
¥ ین &yen; &#165;
§ بخش &sect; &#167;
© حق کپی &copy; &#169;
® علامت ثبت شده &reg; &#174;
× ضرب &times; &#215;
÷ تقسیم &divide; &#247;


پیوند های HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 

HTML برای پیوند به پرونده های دیگر در وب از فرا پیوندها استفاده می کند.


مثالها

ایجاد فراپیوند
این مثال نشان می دهد که چگونه می توان، در متن نوشته شده، فراپیوندی ایجاد کرد.

عکس، به عنوان فراپیوند
این مثال عکسی را به یک فراپیوند تبدیل می کند.

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


برچسب Anchor و موجودیت Href

HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و ... .
دستورالعمل ساخت یک Anchor

<a href="url"> متنی که نمایش داده می شود </a>

در هنگام ساختن یک Anchor باید مکانی که پیوند به آن پرونده اشاره میکند را مشخص کرد. برای نمایش آدرس پرونده از موجودیت href استفاده می شود.کلمات بین بر چسب آغازو پایان Anchor به عنوان فرا پیوند نمایش داده می شود.    
این Anchor یک پیوند به html.ir را معرفی می کند:

<a href="http://www.html.ir"> html.ir را ملاقات کنید </a>

خط بالا شبیه این نشان داده خواهد شد :

html.ir را ملاقات کنید


موجودیت Target

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

<a href="http://www.html.ir/" target="_blank"> html.ir را ملاقات کنید </a>


برچسب Anchor و موجودیت نام

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

<a name="lable">متنی که نوشته می شود</a>

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

<a name="tips"> بخش اطلاعات مفید </a>

شما باید توجه کنید که یک Anchor نام دار، در یک حالت خاص نشان داده نمی شود. برای پیوند مستقیم به بخش "Tips" یک علامت "#" و نام آن Anchor را به انتهای آن url اضافه کنید:

<a href="http://www.html.ir/links.html#Tips"> پرش به بخش اطلاعات مفید </a>

یک فرا پیوند به بخش نکات مفید از میان فایل "Links.html" شبیه به این خواهد بود

<a href="#Tips"> پرش به بخش نکات مفید </a>


نکات پایه ای - اطلاعات مفید

همیشه یک علامت "/" به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این درست کنید

href="http://www.html.ir/links.html"

شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت "/" به انتهای آدرس اضافه کرده و یک تقاضای جدید درست می کند. مثل این:

href="http://www.html.ir/links.html/"

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

مثالهای بیشتر

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

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

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

فراپیوند Email
در صورتیکه آدرس فراپیوند شما، از شماهای دیگری غیر از http، مانند mailto و یا ftp استفاده کند، چه می شود. این مثال نمونه ای را نمایش می دهد.

فراپیوند Email (نوعی دیگر)
در این مثال نمونه دیگری از فراپیوند نوع mailto را می بینید.


برچسب Anchor

برچسب ها توضیحات
<a> یک Anchor را معرفی می کند


جداول در HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 

به وسیله HTML شما می توانید جدول بسازید


مثالها

جدولها
این مثال به ما نشان می دهد که چگونه می توانیم یک جدول بکشیم.

حاشیه جدول
این مثال حاشیه های مختلف جدول را نشان می دهد.

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


جدول ها

جداول بوسیله برچسب<table>معرفی می شوند.هر جدول به سطرها (بوسیله برچسب <tr>)و هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب <td>) حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است.یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد.
row1,cel1 row1,cel2
row2,cel1 row2,cel2
<table border="1">
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
<tr>
<td>row1,cel1</td>
<td>row1,cel1</td>
</tr>
</table>

جدول ها و عنصر حاشیه

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

<table border="1">
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
<tr>
<td>row2,cel1</td>
<td>row2,cel2</td>
</tr>
</table>


سر تیترها در جداول

سرتیترها در یک جدول با برچسب <th>مشخص می شوند.

Another Heading Heading
row1,cel2 row1,cel1
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
</table>

سلول های خالی در جداول

سلول های جداول با محتوای خالی در بیشتر مرورگرها خوب نشان داده نمی شوند.
row1,cel2 row1,cel1

row2,cel1
<table border="1">
<tr>
<td>row1,cell1</th>
<td>row1,cell2</th>
</tr>
<tr>
<td>row2,cel1</td>
<td></td>
</tr>
</table>

این کدها در مرورگر بدین صورت نشان داده می شوند.توجه کنید که حاشیه های اطراف سلول خالی جدول از بین رفته است(موزیلا فایر فاکس(Fire Fox) حاشیه را نشان می دهد.).برای جلوگیری از آن یک فاصله نا مقطوع(;nbsp&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید.

row1,cel2 row1,cel1
  row2,cel1
<table border="1">
<tr>
<td>row1,cell1</th>
<td>row1,cell2</th>
</tr>
<tr>
<td>row2,cel1</td>
<td> &nbsp; </td>
</tr>
</table>

نکته های پایه ای-اطلاعات مفید

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


مثالهای بیشتر

جدول بدون حاشیه
در این مثال یک جدول بدون حاشیه را می بینید.

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

سلول خالی
این مثال طریق استفاده از "&nbsp;"، برای نمایش صحیح سلولهای خالی را نشان می دهد.

عنوان جدول
این مثال چگونگی عنوان دار کردن جدول را نشان می دهد.

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

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

حاشیه خالی سلول
در این مثال، روش قرار دادن حاشیه خالی بین محتوای سلول و حاشیه ان را می آموزیم.

فاصله سلولها
برای تعیین فاصله بین سلولها به این مثال توجه کنید.

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

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

محل نمایش محتوای یک سلول
با استفاده از موجودیت "align"، می توان محل نمایش محتوای یک سلول را تعیین کرد. برای این منظور به این مثال توجه کنید.

تعین قاب دور جدول
به کمک موجودیت "frame"، میتوان نوع قاب دور جدول را تعیین کرد. نگاه کنید.


برچسب های جدول

برچسب ها توضیحات
<table> یک جدول معرفی می کند
<th> سرتیتر جدول معرفی می کند
<tr> یک سطر جدول معرفی می کند
<td> یک سلول جدول معرفی می کند
<caption> عنوان جدول معرفی می کند
<colgroup> یک گروه از ستون ها معرفی می کند
<col> یک مقدار موجودیت برای یک یا چند ستون معرفی می کند
<thead> سر یک جدول را معرفی می کند
<tbody> بدنه یک جدول را معرفی می کند
<tfoot> پاورقی جدول را معرفی می کند


فرم ها در HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 

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


مثالها

فیلد متنی
این مثال طریق ساخت یک فیلد متنی را نشان می دهد. کاربر می تواند اطلاعات خود را در این فیلد بنویسد.

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

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


فرم ها

یک فرم ، منطقه ای حاوی عناصر فرم است.عناصر فرم ، عناصری هستند که به کاربر اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکس ها و...) در فرم وارد کند.یک فرم با برچسب <form> معرفی می شود.

<form>
<input>
<input>
</form>


input

در برچسب <form> برچسب <input>بیشترین استفاده را دارد.نوع ورودی با خواص آن تعیین می شود.انواع پر کاربرد ورودی ها در پایین توضیح داده شده اند.

فیلدهای متنی

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

Last name:

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

توجه کنید که خود فرم قابل رویت نیست ، همچنین توجه داشته باشید که در بیشتر مرورگرها طول فیلد متنی بطور پیش فرض 20 کاراکتر است.

دکمه های رادیویی

دکمه های رادیویی زمانی استفاده می شوند که شما می خواهید از بین تعداد محدودی انتخاب، یکی را انتخاب کند.
male
female
<form>
First name: <input type="radio" name="sex" value="male"> male
<br>
Last name:
<input type="radio" name="sex" value="female" > femail
</form>
توجه کنید که فقط یک گزینه می تواند انتخاب شود.

چک باکس ها (check boxes)

چک باکس ها زمانی استفاده می شوند که شما بخواهید کاربر از میان تعداد محدودی انتخاب ، یک یا چند گزینه را انتخاب کند.
I have a bike
I have a car
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car" >
I have a car
</form>

عنصر Action فرم و دکمه Submit

هنگامی که کاربر روی دکمه "Submit" کلیک می کند ، محتویات فرم به یک فایل دیگر فرستاده می شوند. فایل معرفی شده در عنصر Action معمولا کاری را با اطلاعات ورودی دریافتی انجام می دهد.
<form name="input value" action="action1.asp">
username:
<input type="text" name="username">
<input type="submit" value="submit">
</form>
username:
اگر شما تعدادی کاراکتر در فیلد متنی بالا تایپ کنید و دکمه "Submit" را کلیک کنید شما ورودی خود را به صفحه ای که "action1.asp" نام دارد خواهید فرستاد.آن صفحه به شما ورودی های دریافتی را نشان خواهد داد.

مثالهای بیشتر

چک باکس ها
روش ساخت فیلد چک باکس(انتخاب) در این مثال توضیح داده شده است. کاربر می تواند موارد مورد نظر خود را انتخاب کند.

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

انتخاب کرکره ای ساده
این فیلد انتخابی، همانند دکمه رادیویی، برای انتخاب یک مورد از چند مورد، به کار می رود. با این تفاوت که فهرست عناصر بصورت کرکره، باز و بسته می شوند؛ و عنصر انتخابی فقط دیده می شود.

فیلد کرکره ای (2)
این مثال نیز فیلد کرکره ای را نمایش می دهد. با این تفاوت که برای این فیلد، یکی از مقادیر فهرست انتخابف به عنوان مقدار پیش فرض تعیین شده است.

ناحیه متنی
تفاوت این فیلد با فیلد متنی این است که در این فیلد، خطهای نا محدودی می توان وارد کرد. یک ورودی چند خطی. روش ساخت این فیلد در این مثال آمده است.

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

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

مثالهای فرم

فرم، فیلدهای ورودی و دکمه تایید(submit)
این مثال طریق اضافه کردن فرم و فیلدهای داخل آن را نشان می دهد. دکمه تایید محتوییات فرم را به آدرس action می فرستد.

فرم به همراه چک باکس
این مثال، فرمی به همراه فیلد چک باکس داخل آن تعریف می کند.

فرم به همراه دکمه های رادیویی
باز هم مثالی دیگر برای فرم. فرمی که در آن فیلد رادیویی وجود دارد.

ارسال نامه الکترونیکی به کمک فرم
در این مثال روش ارسال email به کمک فرم، نشان داده شده است. به موجودیت action فرم توجه کنید.


برچسب های فرم

برچسب ها توضیحات
<form> یک فرم برای ورودی کاربران معرفی می کند
<input> فیلد ورودی معرفی می کند
<textarea> یک ورودی متن چند خطی  معرفی می کند
<label> یک برچسب برای ورودی ها معرفی می کند
<fieldset> یک مجموعه از فیلدها معرفی می کند
<legend> یک عنوان برای fieldset معرفی می کند
<select> یک لیست قابل انتخاب معرفی می کند
<optgroup> یک گروه از گزینه ها معرفی می کند
<option> یک گزینه در لیست باز شونده معرفی می کند
<button> یک دکمه را معرفی می کند
<isindex> توصیه می شود به جای آن از input استفاده کنید


فرم ها و ورودیها در html

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 

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


مثالها

فیلد متنی
این مثال طریق ساخت یک فیلد متنی را نشان می دهد. کاربر می تواند اطلاعات خود را در این فیلد بنویسد.

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

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


فرم ها

یک فرم ، منطقه ای حاوی عناصر فرم است.عناصر فرم ، عناصری هستند که به کاربر اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکس ها و...) در فرم وارد کند.یک فرم با برچسب <form> معرفی می شود.

<form>
<input>
<input>
</form>


input

در برچسب <form> برچسب <input>بیشترین استفاده را دارد.نوع ورودی با خواص آن تعیین می شود.انواع پر کاربرد ورودی ها در پایین توضیح داده شده اند.

فیلدهای متنی

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

Last name:

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

توجه کنید که خود فرم قابل رویت نیست ، همچنین توجه داشته باشید که در بیشتر مرورگرها طول فیلد متنی بطور پیش فرض 20 کاراکتر است.

دکمه های رادیویی

دکمه های رادیویی زمانی استفاده می شوند که شما می خواهید از بین تعداد محدودی انتخاب، یکی را انتخاب کند.
male
female
<form>
First name: <input type="radio" name="sex" value="male"> male
<br>
Last name:
<input type="radio" name="sex" value="female" > femail
</form>
توجه کنید که فقط یک گزینه می تواند انتخاب شود.

چک باکس ها (check boxes)

چک باکس ها زمانی استفاده می شوند که شما بخواهید کاربر از میان تعداد محدودی انتخاب ، یک یا چند گزینه را انتخاب کند.
I have a bike
I have a car
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car" >
I have a car
</form>

عنصر Action فرم و دکمه Submit

هنگامی که کاربر روی دکمه "Submit" کلیک می کند ، محتویات فرم به یک فایل دیگر فرستاده می شوند. فایل معرفی شده در عنصر Action معمولا کاری را با اطلاعات ورودی دریافتی انجام می دهد.
<form name="input value" action="action1.asp">
username:
<input type="text" name="username">
<input type="submit" value="submit">
</form>
username:
اگر شما تعدادی کاراکتر در فیلد متنی بالا تایپ کنید و دکمه "Submit" را کلیک کنید شما ورودی خود را به صفحه ای که "action1.asp" نام دارد خواهید فرستاد.آن صفحه به شما ورودی های دریافتی را نشان خواهد داد.

مثالهای بیشتر

چک باکس ها
روش ساخت فیلد چک باکس(انتخاب) در این مثال توضیح داده شده است. کاربر می تواند موارد مورد نظر خود را انتخاب کند.

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

انتخاب کرکره ای ساده
این فیلد انتخابی، همانند دکمه رادیویی، برای انتخاب یک مورد از چند مورد، به کار می رود. با این تفاوت که فهرست عناصر بصورت کرکره، باز و بسته می شوند؛ و عنصر انتخابی فقط دیده می شود.

فیلد کرکره ای (2)
این مثال نیز فیلد کرکره ای را نمایش می دهد. با این تفاوت که برای این فیلد، یکی از مقادیر فهرست انتخابف به عنوان مقدار پیش فرض تعیین شده است.

ناحیه متنی
تفاوت این فیلد با فیلد متنی این است که در این فیلد، خطهای نا محدودی می توان وارد کرد. یک ورودی چند خطی. روش ساخت این فیلد در این مثال آمده است.

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

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

مثالهای فرم

فرم، فیلدهای ورودی و دکمه تایید(submit)
این مثال طریق اضافه کردن فرم و فیلدهای داخل آن را نشان می دهد. دکمه تایید محتوییات فرم را به آدرس action می فرستد.

فرم به همراه چک باکس
این مثال، فرمی به همراه فیلد چک باکس داخل آن تعریف می کند.

فرم به همراه دکمه های رادیویی
باز هم مثالی دیگر برای فرم. فرمی که در آن فیلد رادیویی وجود دارد.

ارسال نامه الکترونیکی به کمک فرم
در این مثال روش ارسال email به کمک فرم، نشان داده شده است. به موجودیت action فرم توجه کنید.


برچسب های فرم

برچسب ها توضیحات
<form> یک فرم برای ورودی کاربران معرفی می کند
<input> فیلد ورودی معرفی می کند
<textarea> یک ورودی متن چند خطی  معرفی می کند
<label> یک برچسب برای ورودی ها معرفی می کند
<fieldset> یک مجموعه از فیلدها معرفی می کند
<legend> یک عنوان برای fieldset معرفی می کند
<select> یک لیست قابل انتخاب معرفی می کند
<optgroup> یک گروه از گزینه ها معرفی می کند
<option> یک گزینه در لیست باز شونده معرفی می کند
<button> یک دکمه را معرفی می کند
<isindex> توصیه می شود به جای آن از input استفاده کنید


لیست ها در HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 


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


مثالها

لیست بدون ترتیب
این مثال لیستی که در آن ترتیب اهمیت ندارد را نمایش می دهد.

لیست با ترتیب
در این مثال شما لیستی، دارای ترتیب می بینید.

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


لیست های نامرتب

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

لیست های مرتب

یک لیست مرتب شده نیز لیستی از اقلام است. اقلام لیست بوسیله شماره نشان گذاری می شوند.یک لیست مرتب با برچسب <ol> آغاز می شود.هرکدام از اقلام لیستبا برچسب <li> آغاز می شوند.
<ol>
<li> Cofee <ul>
<li> Milk <ul>
</ol>
  1. Cofee
  2. Milk
داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.

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

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

مثالهای بیشتر

نمایشهای گوناگون لیستهای مرتب
در این مثال صورتهای مختلف لیستهای مرتب را می بینید.

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

لیستهای تو در تو
چگونگی ساخت لیستهای تو در تو را در این مثال می بینید.

لیستهای تو در تو (2)
این مثال نیز گونه های دیگری از لیستهای تو در تو را نشان می دهد.

لیست تعریفی
این مثال روش ساخت لیست، که در آن مقدار و محتوای هر عنصر لیست تعریف می شوند را نشان می دهد.


برچسب Anchor

برچسب ها توضیحات
<ol> یک Anchor را معرفی می کند
<ul> یک Anchor را معرفی می کند
<li> یک Anchor را معرفی می کند
<dl> یک Anchor را معرفی می کند
<dt> یک Anchor را معرفی می کند
<dd> یک Anchor را معرفی می کند
<dir> یک Anchor را معرفی می کند
<menu> یک Anchor را معرفی می کند


تصاویر در HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 

با HTML شما می توانید در یک پرونده عکس نشان دهید.


مثالها

نمایش عکس
این مثال چگونگی نمایش عکس را نشان می دهد.

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

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


برچسب Images و موجودیت Src

در HTML عکس ها با برچسب <img > معرفی می شوند.برچسب <img > خالی است بدین معنا که آن فقط حاوی موجودیت هاست و برچسب پایانی ندارد.
برای نمایش یک تصویر در یک صفحه ، شما احتیاج دارید که از موجودیت Src استفاده کنید. Src مخفف source (منبع) است. محتوای موجودیت url ، Src تصویری است که شما می خواهید در صفحه تان نمایش دهید. نحوه معرفی یک تصویر:

<"img src="url >

url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که "boat.gif" نامیده شده در دایرکتوری "images" در "www.html.ir" دارای این url است:

http://www.html.ir/images/boat.gif

مرورگر تصویر را جایی قرار می دهد که بر چسب تصویر پرونده در آنجا قرار گرفته است.اگر شما برچسب تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف دوم را نشان می دهد.

موجودیت Alt

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

<"img src="url" alt="Big Boat>

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

نکات پایه ای - اطلاعات مفید

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

مثالهای بیشتر

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

محل نمایش عکس
به کمک این مثال می توان محل نمایش عکس، نسبت به متنی که عکس درون آن قرار دارد، را تعیین کرد.

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

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

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

عکس، به عنوان فراپیوند
این مثال عکسی را به یک فراپیوند تبدیل می کند.

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

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


برچسب های تصویر

برچسب توضیحات
<img> یک تصویر را معرفی می کند.
<map> یک تصویر نقشه را معرفی می کند
<area> داخل یک تصویر نقشه یک منطقه قابل کلیک را تعریف می کند


پس زمینه در HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 

یک پس زمینه خوب می تواند ظاهر یک سایت را واقعا عالی کند.


مثالها

رنگ زمینه و متن خوب
مثالی از رنگ زمینه و رنگ متن خوب که خواندن متن را آسان می کند.

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

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


پس زمینه ها

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

Bgcolor

موجودیت Bgcolor ، رنگ پس زمینه یک صفحه HTML را تعیین می کند.محتوای این موجودیت می تواند یک عدد مبنای 16 ، یک مقدار RGB یا نام یک رنگ باشد:

< body bgcolor="#000000" >
< body bgcolor="black" >
< body bgcolor="rgb(0,0,0)" >

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

پس زمینه

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

< body background="./content/fa/home/background/clouds.gif" >
< body background="http://www.html.ir/clouds.gif" >

url می تواند مرتبط باشد (مثل خط اول) ویا کامل باشد(مثل خط دوم).
توجه: اگر شما می خواهید از یک تصویر در پس زمینه استفاده کنید باید به خاطر داشته باشید:
  • آیا تصویر پس زمینه زمان بارگیری را بهبود می بخشد؟
  • آیا تصویر پس زمینه با تصاویر دیگر در صفحه خوب به نظر می رسد؟
  • آیا تصویر پس زمینه با رنگ متن ها خوب به نظر می رسد؟
  • آیا تصویر پس زمینه هنگامی که در صفحه تکرار می شود ، خوب به نظر می رسد؟
  • آیا تصویر پس زمینه مرتبا تمرکز را از متن می گیرد؟

نکات پایه ای-اطلاعات مفید

bg color, background و موجودیت های متن در برچسب <body> در آخرین نسخه HTML بد دانسته شده است. کنسرسیوم شبکه گسترده جهانی(w3c) این موجودیت ها را از نظریه های خود حذف کرده.
به جای آن از CSS باید استفاده کرد(برای معرفی طرح بندی و نمایش خواص عناصر).

مثالهای بیشتر

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

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

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


رنگ ها در HTML

سه شنبه 25 آبان 1389

نوع مطلب :HTML، 

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


محتوای رنگ ها

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

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

رنگ مبنای 16 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)

نام رنگ ها

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

رنگ مبنای 16 نام رنگ
  #F0F8FF AliceBlue
  #FAEBD7 AntiqueWhite
  #7FFFD4 Aquamarine
  #000000 Black
  #0000FF Blue
  #8A2BE2 BlueViolet
  #A52A2A Brown

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

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

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

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

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



فهرست وبلاگ
پیوندهای روزانه
طبقه بندی
آرشیو
نویسندگان
صفحات جانبی
نظرسنجی
    آیا شما برای آموزش اکسپرشن بلند ویدئوی آموزشی را مفید می دانید؟






آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
جستجو
آخرین پستها
اَبر برچسبها
شبکه اجتماعی فارسی کلوب | Buy Website Traffic | Buy Targeted Website Traffic