hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

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

آموزش اچ تی ام ال برای قالب سازی وبلاگ

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

برای طراحی قالب یا پوسته وبلاگ ،در قدم اول نیاز هست که اچ تی ام ال را یاد گرفته ودر قدم دوم نیاز هست به سراغ سی اس اس برویم.

ما دونوع آموزش اچ تی ام ال داریم :1-مقدماتی 2-پیشرفته ،در مرحله اول ما سراغ قسمت مقدماتی این موضوع رفته ایم ،قسمت پیشرفته را نیز در تاپیکی جداگانه بررسی می کنیم.

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

تاریخ شروع آموزش:23بهمن

تاریخ پایان آموزش 23اسفند

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

چهارشنبه 23 بهمن 1392 10:53 AM

تشکرات از این پست

rasekhoon_weblog ravabet_rasekhoon sayyed13737373 mohsen_alavi siryahya khodaeem1 shirani98 AliFanoodi yaskabod kaka amirali123

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

پاسخ به:مقدمه

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

یک فایل HTML چیست؟

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

آیا می خواهید یکبار امتحان کنید؟

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

<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 را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

مثال تشریح شده

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

پسوند htm. یا html. ?

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

به ویرایشگر های HTML توجه کنید:

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

پرسش و پاسخ:

س: پس از اینکه فایل HTML را ویرایش می کنم نمی توانم نتیجه را در مرورگر مشاهده کنم. چرا؟
ج:اطمینان حاصل کنید که فایل را با یک نام و پسوند صحیح ذخیره کرده اید مثل"C:\mypage.htm". همچنین اطمینان حاصل کنید که از همان نام هنگام باز کردن فایل در مرورگر استفاده کرده اید.
س:من سعی کردم فایل HTMLام را ویرایش کنم. اما تغییرات در مرورگرم نشان داده نشد. چرا؟
ج:مرورگر صفحه را کاشه(cach) کرده بنا بر این یک صفحه را دو بار نمی خواند. هنگامی که شما یک صفحه را تغییر می دهید مرورگر آن را نمی داند. از کلید REFRESH/RELOAD مرورگر استفاده کنید تا آن را مجبور کنید صفحه را دوباره بخواند.
س:از چه مرورگری باید استفاده کنیم؟
ج:شما می توانید تمام این آموخته ها را با مرورگرهای متعارف انجام دهید مثل Internet Explorer, Netscape,Mozilla و Opera. هر چند که تعدادی از مثال های مادر کلاس های پیشرفته به آخرین نسخه مرورگرها نیاز دارند.

چهارشنبه 23 بهمن 1392 11:02 AM

تشکرات از این پست

sayyed13737373 mohsen_alavi khodaeem1 rasekhoon_weblog shirani98 AliFanoodi

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

پاسخ به:عناصر HTML

عناصر HTML

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

برچسب های 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 اضافه می شوند

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

محتوای عناصر باید همیشه در کتیشن ها محدود شوند ، از هر دو حالت کتیشن و دوبل کتیشن می توان استفاده کرد ولی استفاده از دوبل کتیشن ها متداول تر است. در بعضی موقعیت های نادر مثل هنگامی که محتوای عناصر خود دارای کتیشن هستند لازم است که از تک کتیشن استفاده کنیم: 'Name='john "shotgun" Nelson

چهارشنبه 23 بهمن 1392 11:05 AM

تشکرات از این پست

sayyed13737373 mohsen_alavi khodaeem1 rasekhoon_weblog shirani98 AliFanoodi

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

پاسخ به:برچسب های پایه HTML

برچسب های پایه 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 استفاده می شود.توضیحات توسط مرورگرها نادیده گرفته می شوند. شما می توانید از توضیحات برای تشریح کد های خود استفاده کنید که می تواند به شما هنگامی که در آینده کد منبع خود را ویرایش می کنید کمک کند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پنج شنبه 24 بهمن 1392 12:07 AM

تشکرات از این پست

mohsen_alavi rasekhoon_weblog sayyed13737373 shirani98 AliFanoodi

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

پاسخ به:موجودیت های HTML

موجودیت های HTML

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

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

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

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

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

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

نتیجه	توضیحات	نام موجودیت	شماره موجودیت
	فاصله بدون شکست
<	کوچکتر از	<	<
>	بزرگتر از	>	>
&	ampersand	&	&
"	علامت کتیشن	"	"
'	آپاستروف	'(در IE کاربرد ندارد)	'

نتیجه	توضیحات	نام موجودیت	شماره موجودیت
¢	cent	¢	¢
£	پاوند	£	£
¥	ین	¥	¥
§	بخش	§	§
©	حق کپی	©	©
®	علامت ثبت شده	®	®
×	ضرب	×	×
÷	تقسیم	÷	÷

شنبه 26 بهمن 1392 8:42 AM

تشکرات از این پست

rasekhoon_weblog AliFanoodi sayyed13737373

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

پاسخ به:پیوندهای HTML

پیوندهای 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 را معرفی می کند

شنبه 26 بهمن 1392 11:59 PM

تشکرات از این پست

rasekhoon_weblog AliFanoodi sayyed13737373

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

پاسخ به:قاب های HTML

قاب های HTML

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

مثالها

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

قابهای افقی
این مثال، قابهای افقی را نمایش می دهد.

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

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

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

برچسب Frameset

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

برچسب Frame

    برچسب <frame> پرونده HTML ای را معرفی می کند که در هر قاب قرار می گیرد.

در مثال پایین یک frameset با دو ستون داریم. ستون اول با پهنای 25% از پنجره مرورگر ست شده است.ستون دوم با پهنای 75% از پنجره مرورگر ست شده است. پرونده "HTML "frame_a.html در ستون اول قرار گرفته و پرونده "HTML "frame_b.html در ستون دوم قرار داده شدهاست.

<frameset cols="25%,75%">
    <frame src="frame_a.html">
    <frame src="frame_b.html">
</frameset>
نکات پایه ای-اطلاعات مفید

اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید "noresize="noresize را به برچسب <frame> اضافه کنید. اگر برچسب <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند.
مهم:شما نمی توانید برچسب های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما برچسب <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین برچسب های <body> </body> قرار دهید.
مثالهای بیشتر

برچسب noframes
در صورتیکه مرورگر، امکان نمایش قابها را نداشت، به کمک این برچسب، می توان نمایش مناسبی را ارایه کرد.

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

قابی با موجودیت noresize="noresize"
با کنترل این موجودیت، از تغییر اندازه قابها می توان جلوگیری کرد.

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

<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>

قاب محتوا، محتوای هر یک از این فراپیوندها را نمایش می دهد.

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

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

پرش به محل خاص در صفحه دارای قاب محتوا
این مثال ترکیبی از مثال "قاب محتوا" و مثال "پرش" است.
برچسب های قاب
برچسب ها   توضیحات
<frameset>   یک مجموعه از قاب ها را معرفی می کند
<frame>   یک زیر پنجره (قاب) را معرفی می کند
<noframes>   برای مرورگر هایی که قاب ها را پشتیبانی نمی کنند ، بخش بدون قاب را معرفی می کند.
<iframe>   یک زیر پنجره درون برنامه ای را معرفی می کند.

دوشنبه 28 بهمن 1392 12:02 AM

تشکرات از این پست

rasekhoon_weblog sayyed13737373

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

پاسخ به:جدول های HTML

جدول های HTML

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

مثالها

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

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

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

جدول ها

جداول بوسیله برچسب<table>معرفی می شوند.هر جدول به سطرها (بوسیله برچسب <tr>)و هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب <td>) حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است.یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد.

row1,cel1	row1,cel2
row2,cel1	row2,cel2

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

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

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

سرتیترها در یک جدول با برچسب <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

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

row1,cel2	row1,cel1
	row2,cel1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سه شنبه 29 بهمن 1392 12:00 AM

تشکرات از این پست

sayyed13737373 rasekhoon_weblog siryahya

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

پاسخ به:لیست های HTML

لیست های HTML

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

مثالها

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

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

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

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

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

<ul>
<li> Cofee <ul>
<li> Milk <ul>
</ul>

Cofee
Milk

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

لیست های مرتب

یک لیست مرتب شده نیز لیستی از اقلام است. اقلام لیست بوسیله شماره نشان گذاری می شوند.یک لیست مرتب با برچسب <ol> آغاز می شود.هرکدام از اقلام لیستبا برچسب <li> آغاز می شوند.

<ol>
<li> Cofee <ul>
<li> Milk <ul>
</ol>

Cofee
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 را معرفی می کند

چهارشنبه 30 بهمن 1392 12:09 AM

تشکرات از این پست

rasekhoon_weblog sayyed13737373 siryahya

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

پاسخ به:فرم های HTML

http://www.blog.e3tar.ir/wp-content/uploads/2010/09/cool-html-codes.jpg
فرم ها و ورودی های 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 استفاده کنید

پنج شنبه 1 اسفند 1392 12:03 AM

تشکرات از این پست

siryahya sayyed13737373

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

عکس های 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>	داخل یک تصویر نقشه یک منطقه قابل کلیک را تعریف می کند

جمعه 2 اسفند 1392 12:38 AM

تشکرات از این پست

sayyed13737373

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

پس زمینه های 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
این مثال نیز مانند مثال پیش نمونه دیگری از این تناسب خوب را نشان می دهد.

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

شنبه 3 اسفند 1392 3:43 PM

تشکرات از این پست

sayyed13737373

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

رنگ های 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

یک شنبه 4 اسفند 1392 12:01 AM

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

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

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

مقدار رنگ ها

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

قرمز را خاموش کنید

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

قرمز را روشن کنید

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

16 میلیون رنگ متفاوت

ترکیب مقادیر قرمز و سبز آبی از صفر تا 255 بیش از 16 میلیون رنگ متفاوت (256*256*256) می دهد. بیشتر نمایشگرهای مدرن قادر به نمایش 16384 رنگ متفاوت هستند.اگر شما به جدول رنگ پایین نگاه کنید، شما نتایج مختلف تغییرات رنگ قرمز از صفر تا 255 را در حالی که سبز و آبی صفر هستند خواهید دید. برای دیدن لیست کامل 16384 رنگ متفاوت که بر پایه قرمز از صفر تا 255 هستند بر روی یکی از مقادیر مبنای 16 یا rgb زیر کلیک کنید.

Red Light	HEX	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)

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

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

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

دوشنبه 5 اسفند 1392 12:05 AM

hossein201273

کاربر طلایی1

تاریخ عضویت : مهر 1392

تعداد پست ها : 26938

محل سکونت : سپاهان ایران

نام رنگها در HTML

نام رنگها در HTML

در این صفحه شما یک جدول از اسامی رنگ هایی پیدا خواهید کردکه با بیشتر مرورگرها پشتیبانی می شوند.
توجه: فقط 16 نام رنگ با استاندارد W3C HTML 4.0 پشتیبانی می شوند. برای بقیه رنگ ها باید از مقادیر مبنای 16 آنها استفاده کرد.

نام رنگ	مبنای 16	رنگ
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
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
Darkorange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DodgerBlue	#1E90FF
Feldspar	#D19275
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#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
LightGrey	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateBlue	#8470FF
LightSlateGray	#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
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
VioletRed	#D02090
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

سه شنبه 6 اسفند 1392 12:00 AM

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

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

یک فایل HTML چیست؟

آیا می خواهید یکبار امتحان کنید؟

مثال تشریح شده

پسوند htm. یا html. ?

به ویرایشگر های HTML توجه کنید:

پرسش و پاسخ:

عناصر HTML

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

برچسب های HTML

عناصر HTML

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

عناصر برچسب:

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

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

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

مثالها

پاراگراف ها

پرش به خط بعد

توضیحات در HTML

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

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

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

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

موجودیت های HTML

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

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

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

قاب های HTML

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

جدول های HTML

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

مثالها

جدول ها

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

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

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

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

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

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

لیست های HTML

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

مثالها

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

لیست های مرتب

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

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

عکس های HTML

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

مثالها

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

موجودیت Alt

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

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

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

پس زمینه های HTML

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

مثالها

پس زمینه ها

Bgcolor

پس زمینه

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

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

رنگ های HTML

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

محتوای رنگ ها

نام رنگ ها

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

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

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

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

مقدار رنگ ها

قرمز را خاموش کنید

قرمز را روشن کنید

16 میلیون رنگ متفاوت

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

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