آموزی زبان HTML با شیوه Encoding

okhpatoos · 17 سپتامبر 2012

اگر شما می خواهید در صفحه خود از فریمهای نامرئی استفاده کنید، یعنی نمی خواهید خط حاشیه فریمها قابل دیدن باشد باید چند فرمان را به تگ <frameset> اضافه کنید و تگهای <frame> را آنطور که دوست دارید تنظیم کنید. در اینجا می توانید کدی را که یک صفحه را با فریمهای نا مرئی می سازد می بینید:
<html>
<head>
<title>مخفی کردن فریم در صفحه</title>
</head>
<frameset cols="25%,75%" border="0" framespacing="0" frameborder="0">
<frame src="page1.htm" name="left" scrolling="no">
<frame src="page2.htm" name="right">
</frameset>
</html>

در تگ <frameset> از شناسه های مختلفی می توان استفاده کرد که در اینجا لیست برخی از آنها را مشاهده می کنید:

"border="0
این شناسه میزان ضخامت کادر اطراف فریم را تعیین می کند که ما در اینجا آنرا صفر قرار داده ایم.
"frameborder="0
مقدار حاشیه فریمها را صفر قرار می دهیم تا نمایش داده نشوند.
"framespacing="0
فاصله بین فریمها را صفر قرار می دهیم تا بین آنها فاصله ای دیده نشود.
"scrolling="no
این شناسه باعث می شود در صورتی که محتویات فریمها از اندازه پنجره بزرگتر بود نوار اسکرول بار نمایش داده نشود.

okhpatoos · 17 سپتامبر 2012

به لطف HTML 4.0 ما توانایی ایجاد فریمها را در بدنه صفحات پیدا کردیم. با استفاده از این نوع فریمها (inline frame) می توانیم صفحه خود را به صورت عادی طراحی کنیم و در هر کجای آن که مایل بودیم دریچه ای به یک صفحه دیگر بسازیم.
Your browser does not support inline frames or is currently configured not to display inline frames. در قسمتهای قبل با طرز ساختن فریمها و خواص آنها آشنا شدیم. در این قسمت می خواهیم به ساختن فریمهای درونی بپردازیم. یک نمونه از این فریمها را می توانید در سمت راست این نوشته ببینید.
احتمالاً در بسیاری از صفحات نمونه هایی از این نوع فریم را دیده اید. اگر به ساختن آنها علاقه مند شده اید به سراغ تگ سازنده این فریمها می رویم:
با قرار دادن این تگ در کد HTML صفحه در جایی که می خواهید فریم قرار بگیرد می توانید یک فریم اینلاین بسازید:
<iframe src="../examples/html/page1.htm" width="400" height="250" frameborder="1"></iframe>
با این تگ شما می توانید یک فریم در صفحه خود بسازید. همانطور که می بینید ما در صفحه اصلی از تگ body استفاده کردیم و از تگ frameset هم استفاده نشد.
در اینجا به توضیح شناسه های قابل استفاده در این تگ می پردازیم:

<iframe> :
این تگ آغازی یک فریم اینلاین است.
"src="frame_1.htm :
این قسمت مشخص کننده آدرس صفحه ای است که می خواهیم در فریم نمایش داده شود.
"width="350 :
مشخص کننده مقدار عرض فریم در مقیاس پیکسل است. البته می توانیم از مقیاس درصد هم استفاده کنیم.
"height="250 :
مشخص کننده ارتفاع فریم در صفحه است. مقیاس آن می تواند پیکسل یا درصد باشد.
"frameborder="1 :
مشخص کننده ضخامت لبه های فریم است.

در مورد لینکها هم رفتار این فریمها مانند بقیه فریمها است. می توانیم به آنها یک نام بدهیم و از شناسه target در لینکها استفاده کنیم. به یک مثال توجه کنید:
در ابتدا به تگ فریم خود یک نام نسبت می دهیم. مانند زیر:
<iframe src="../examples/html/page1.htm" width="400" height="250" frameborder="1" name="inlineframe1"></iframe>
در مرحله بعد به تگ لینک مورد نظر شناسه target را اضافه می کنیم. مانند زیر:
<a href="index.html" target="inlineframe1">این صفحه در فریم نمایش داده خواهد شد.</a>

حالا می توانید لینک زیر را کلیک کنید. خواهید دید که لینک در فریم همین صفحه باز خواهد شد:

مانند بقیه فریمها می توانید از شناسه "scrolling="no در تگ فریم استفاده کنید تا در فریم اسکرول بار نداشته باشید.

okhpatoos · 17 سپتامبر 2012

ساختن کادرهای ورودی متن برای استفاده در فرمهای html

ما با استفاده از تگ <input> می توانیم بسیاری از اطلاعاتی را که در فرمها نیاز داریم از طریق کاربران به دست آوریم. در حقیقت این تگ برای وارد کردن اطلاعات توسط کاربر استفاده می شود. این تگ در HTML4.01 نیازی به تگ پایانی ندارد.
از تگ <input> می توانیم برای ساختن کادرهای مربوط به وارد کردن متن، کادر کلمه عبور، فیلدهای مخفی، دکمه های رادیو، چک باکس، دکمه ارسال فرم، دکمه پاک کردن فرم و انواع دیگر دکمه ها و چند نوع ورودی دیگر استفاده کنیم. در اینجا هر کدام از این ورودی ها را به صورت جداگانه مورد بررسی قرار می دهیم.
جعبه ورودی متن (Text Box)

از این نوع ورودی برای ایجاد یک کادر یک سطری برای ورود متن استفاده می شود. برای ساختن این کادر باید از شناسه "type="text در تگ <input> استفاده کنیم. در صورت تعریف نشدن شناسه type در مرورگرهای جدید این شناسه به صورت پیش فرض به کار می رود و یک Text Box را نمایش می دهد اما برخی از مرورگرهای قدیمی در صورتی که از ایسن شناسه استفاده نشود این کادر را نمایش نمی دهند.
یک نمونه از کد مربوط به ایجاد این کادر را می توانید در اینجا مشاهده کنید:
<input type="text" name="testField" maxlength="50" size="30" value="کادر ورود متن">
کادر متنی بالا به صورت زیر نمایش داده می شود:
در اینجا به توضیح برخی از شناسه هایی که با این نوع ورودی به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند.

type :
برای اینکه یک کادر متنی ایجاد کنیم باید مقدار این شناسه را text قرار دهیم.
name :
این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
maxlength :
این شناسه برای مشخص کردن حداکثر تعداد کاراکترهای ورودی استفاده می شود. این شناسه در مورد ورودی متنی یک سطری استفاده می شود و مقدار آن باید عددی مثبت باشد.
size :
این شناسه در مورد این نوع ورودی طول کادر را بر حسب تعداد کاراکتر مشخص می کند. البته مرورگرهای مختلف ممکن است بر حسب نوع فونت مورد استفاده اندازه این کادر را مانند هم نشان ندهند. مقدار این شناسه باید عددی مثبت باشد. مقدار پیش فرض این شناسه 20 است.
value :
این شناسه در مورد کادرهای متنی، متنی را که به صورت پیش فرض در کادر متنی نمایش داده می شود معین می کند.
"readonly="readonly :
این شناسه فقط برای کادرهای متنی مورد استفاده قرار می گیرد و باعث می شود تا کاربر نتواند تغییری در متن نوشته شده در این کادر ایجاد کند اما کاربر می تواند متن را مشاهده کند و آنرا انتخاب کند.
مقادیر مربوط به فیلدهایی که به صورت readonly هستند اگرچه توسط کاربر تغییر نمی کنند ولی با ارسال فرم به سرور ارسال می شوند.
"disabled="disabled :
از این شناسه برای غیر فعال کردن کادر متنی استفاده می شود. به صورتی که کاربر نمی تواند متنی در این کادر بنویسد و یا متن آنرا انتخاب کند. البته این رفتار ممکن است در مرورگرهای مختلف تفاوت داشته باشد.
مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

برای مشاهده کادر در حالات فقط خواندنی (readonly) و غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در کادر متنی زیر مشاهده کنید:
حالت مورد نظر شما : فقط خواندنی غیر فعال

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

علاوه بر شناسه های بالا که فقط مربوط به فرم هستند از شناسه های استاندارد زیر نیز می توان در تگ فرم استفاده کرد:
id, class, title, style, dir, lang, xml:lang
رویدادهای زیر هم در تگ فرم قابل استفاده هستند.
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

okhpatoos · 17 سپتامبر 2012

چک باکس (checkbox)

برای ساختن چک باکس هم باید از تگ <input> استفاده کنیم. برای این کار باید از checkbox به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن چک باکس آورده شده است:
<input name="someNeme" type="checkbox" value="مقدار مورد نظر">
در اینجا می توانید چک باکس ایجاد شده را مشاهده کنید:
در اینجا به توضیح برخی از شناسه هایی که برای چک باکس به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند.

type :
برای اینکه چک باکس متنی ایجاد کنیم باید مقدار این شناسه را checkbox قرار دهیم.
name :
این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
value :
این شناسه در مورد در مورد چک باکس مقداری است که در صورت انتخاب شدن این دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در مورد چک باکس و دکمه های رادیو ضروری است.
"checked="checked :
این شناسه فقط برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیرد و باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند.
"disabled="disabled :
از این شناسه برای غیر فعال چک باکس استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را انتخاب کند یا آنرا به صورت انتخاب نشده در آورد. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

برای مشاهده چک باکس در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در چک باکس زیر مشاهده کنید:
حالت مورد نظر شما : فعال یا غیر فعال
چک باکس نمونه :

توجه : دوستان عزیزم در این پستهای زبان HTML بعضی از مواردمثلا "ایکونها" نشان داده نمیشه .
برای مثال : چک باکس نمونه : ایکون چک باکس ک یک مربع کوچک است نمایش داده نشده.

okhpatoos · 17 سپتامبر 2012

دکمه های رادیو (Radio Button)

برای ساختن دکمه های رادیو هم باید از تگ <input> استفاده کنیم. برای این کار باید از radio به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه رادیو آورده شده است:
<input name="someNeme" type="radio" value="مقدار مورد نظر">
در اینجا می توانید دکمه رادیو ایجاد شده را مشاهده کنید:
حتماً تا به حال دکمه های رادیویی را که در یک زمان فقط یکی از آنها می تواند انتخاب شده باشد مشاهده کرده اید. برای ساختن این نوع دکمه ها از کد بالا استفاده می شود همه دکمه هایی که باید به این گونه رفتار کنند دارای یک نام هستند اما مقادیر قرار گرفته شده در شناسه value در آنها متفاوت است. در زیر می توانید کد مربوط به یک دسته دکمه رادیو را ببینید:
<input name="Neme" type="radio" value="مقدار دکمه اول">Radio Button 1 <br>
<input name="Neme" type="radio" value="مقدار دکمه دوم">Radio Button 2 <br>
<input name="Neme" type="radio" value="مقدار دکمه سوم">Radio Button 3 <br>
در اینجا هم می توانید این دکمه ها را مشاهده کرده و آنها را آزمایش کنید:
Radio Button 1
Radio Button 2
Radio Button 3
در اینجا به توضیح برخی از شناسه هایی که برای دکمه های رادیو به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند.

type :
برای اینکه یک دکمه رادیو ایجاد کنیم باید مقدار این شناسه را radio قرار دهیم.
name :
این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
value :
این شناسه در مورد در مورد دکمه رادیو مقداری است که در صورت انتخاب شدن این دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در مورد چک باکس و دکمه های رادیو ضروری است.
"checked="checked :
این شناسه فقط برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیرد و باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند.
توجه داشته باشید که در یک دسته دکمه رادیو که در بالا یک نمونه از آن آورده شده است نباید بیش از یک دکمه دارای این شناسه باشد.
"disabled="disabled :
از این شناسه برای غیر فعال دکمه رادیو استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را انتخاب کند. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

برای مشاهده دکمه رادیو در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در دکمه رادیوی زیر مشاهده کنید:
حالت مورد نظر شما : فعال یا غیر فعال
دکمه رادیو نمونه :

توجه : دوستان عزیزم در این پستهای زبان HTML بعضی از موارد مثلا "ایکونها" نشان داده نمیشه .
برای مثال :دکمه رادیو نمونه : یک دایره کوچک است.

okhpatoos · 17 سپتامبر 2012

دکمه ارسال فرم (Submit)

برای ساختن دکمه ارسال فرم باید از تگ <input> استفاده کنیم. برای این کار باید از submit به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه ارسال فرم آورده شده است:
<input name="buttonName" type="submit">
در اینجا می توانید دکمه ارسال فرم ایجاد شده را مشاهده کنید البته چون این دکمه در تگ <form> قرار ندارد با کلیک کردن بر روی آن اتفاقی رخ نمی دهد اما اگر این دکمه در تگ فرم قرار داشته باشد با کلیک کردن بر روی آن اطلاعات وارد شده در فرم به صفحه action ارسال می شوند.

Submit Query

دکمه پاک کردن فرم (Reset)

برای ساختن این دکمه هم از تگ <input> استفاده می شود به این صورت که برای شناسه type از مقدار reset استفاده می کنیم. در اینجا می توانید یک نمونه از کدی را که برای ساختن این دکمه استفاده می شود ملاحظه کنید:
<input name="buttonName" type="reset">
در اینجا می توانید دکمه ای را که با استفاده از تگ بالا ساخته شده است ملاحظه کنید. این دکمه هم مثل دکمه ارسال فرم باید در تگ فرم قرار داشته باشد تا با کلیک بر روی آن اطلاعاتی که کاربر وارد کرده است حذف شوند و فرم به حالت اولیه بازگردد.

Reset
ساختن دکمه (Button)

به جز دکمه های ارسال فرم و پاک کردن فرم دکمه هایی هم وجود دارد که بیشتر برای استفاده در جاوا اسکرپت استفاده می شوند. این دکمه ها به صورت پیش فرض وظیفه خاصی را انجام نمی دهند و وظیفه آنها بستگی به موقعیت و مورد استفاده آنها از نظر برنامه نویس دارد.
در اینجا به توضیح برخی از شناسه هایی که برای دکمه های رادیو به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند. برای مثال دکمه هایی که در پایین همین صفحه قرار دارند و برای رفتن به بخش قبلی یا بعدی استفاده می شوند از همین نوع دکمه ها هستند.
از کد زیر برای ساختن این دکمه ها استفاده می شود:
<input name="buttonName" type="button">
در اینجا به معرفی برخی از شناسه هایی که برای دکمه ها در تگ <input> استفاده می شوند می پردازیم :

type :
برای دکمه ارسال فرم باید از submit برای مقدار این شناسه استفاده شود.
برای دکمه پاک کردن فرم باید از reset برای مقدار این شناسه استفاده شود.
برای سایر دکمه ها باید از button برای مقدار این شناسه استفاده شود.
name :
این شناسه برای اختصاص یک نام به هر دکمه استفاده می شود.
value :
در مورد دکمه ها این شناسه مشخص کننده متنی است که در روی دکمه نمایش داده می شود.
"disabled="disabled :
از این شناسه برای غیر فعال دکمه ها استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را کلیک کند. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

برای مشاهده دکمه زیر در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در دکمه زیر مشاهده کنید:
حالت مورد نظر شما : فعال یا غیر فعال
دکمه نمونه :ارسال فرم

okhpatoos · 17 سپتامبر 2012

کادر کلمه عبور (Password)

احتمالاً تا به حال به سایتی برخورد کرده اید که برای ورود به آن نیاز به کلمه عبور داشته باشید. شما مسلماً تمایل ندارید وقتی کلمه عبور خود را وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به مشاهده آن باشند. به همین دلیل معمولاً سایتها برای اینکه کلمه عبور کاربران در هنگام پر کردن فرم نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که کاملاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با این تفاوت که به جای نمایش کاراکترهای کلمه عبور به جای هر کاراکتر از یک نقطه یا ستاره (بستگی به مرورگر دارد) نمایش می دهد.
برای ساختن کادر کلمه عبور می توانید از کد زیر استفاده کنید:
<input type="password" name="someName" size="30">
کادر به دست آمده مانند زیر است. می توانید متنی را در آن بنویسید و نتیجه را مشاهده کنید:
همانطور که در کد بالا مشاهده می کنید ما از شناسه "size="30 برای این کادر استفاده کردیم. تقریباً همه شناسه هایی که برای کادرهای متنی استفاده می شوند در مورد کادر کلمه عبور هم قابل استفاده هستند.
فیلدهای مخفی (Hidden Fields)

ممکن است برای شما پیش آمده باشد که بخواهید قسمتی از اطلاعات به همراه فرم ارسال شوند ولی کاربر آنها را مشاهده نکند و نیازی نباشد آنها را وارد کند. برای این کار می توانید از فیلدهای مخفی استفاده کنید. کد زیر مربوط به یک فیلد مخفی است:
<input type="hidden" name="FieldName" value="اطلاعات مورد نظر شما" >
در کد بالا شما می توانید مقدار مورد نظر خود را در قالب شناسه value به صفحه action ارسال کنید بدون اینکه در صفحه نمایش داده شود.

okhpatoos · 17 سپتامبر 2012

کادر های متنی با بیش از یک سطر (Text Area)

از یک Text Area کاربران می توانند برای وارد کردن تعداد نامحدودی کاراکتر در بیش از یک سطر وارد کنند. بهتر است تا برای متنهای طولانی به جای Text Box از Text Area استفاده کنید تا کاربران راحتتر بتوانند متن خود را مشاهده کنند و یا آنرا ویرایش کنند.
برای ایجاد Text Area باید از تگ <textarea> استفاده کنید. این تگ بر خلاف تگ <input> یک تگ پایانی دارد و باید به وسیله تگ <textarea/> بسته شود. در مثال زیر می توانید کد مربوط به یک Text Area را مشاهده کنید:
<textarea name="someName" cols="40" rows="3">
این متن به صورت متن داخلی کادر نمایش داده می شود
</textarea>
می توانید نتیجه کد بالا را در اینجا مشاهده کنید:
این متن به صورت متن داخلی کادر نمایش داده می شود همانطور که مشاهده می کنید متنی که بین تگ ابتدایی و تگ پایانی یک Text Area نوشته شود به صورت پیش فرض در کادر Text Area نمایش داده می شود.
در اینجا می توانید برخی از شناسه های قابل استفاده در تگ <textarea> را مشاهده کنید:

cols :
این شناسه عرض کادر را بر حسب تعداد کاراکتر تعیین می کند. مقدار این شناسه باید عددی مثبت باشد. البته این عرض بستگی به اندازه فونت تعریف شده برای صفحه و مرورگر دارد. استفاده از این شناسه برای تگ <textarea> الزامی است.
rows :
این شناسه مشخص کننده تعداد سطرهای قابل مشاهده در کادر است. این مقدار هم باید عددی مثبت باشد. استفاده از شناسه rows برای تگ <textarea> الزامی است.
name :
از این شناسه می توان برای اختصاص دادن یک نام مشخص به textarea استفاده کرد.
"readonly="readonly :
این شناسه کادر را به صورت فقط خواندنی در می آورد و کاربر نمی تواند متن موجود در کادر را تغییر دهد.
"disabled="disabled :
این شناسه کادر را به صورت غیر فعال در می آورد و بازدید کننده نمی تواند متن موجود در آن را تغییر دهد یا آنرا انتخاب کند. (این رفتار بسته به مرورگر متفاوت است)

برای مشاهده کادر در حالات فقط خواندنی (readonly) و غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در Text Area زیر مشاهده کنید:
حالت مورد نظر شما : فقط خواندنی : غیر فعال
کادر متنی نمونه :
متن موجود در کادر متنی :متن موجود در کادر متنی

در تگ <textarea> علاوه بر شناسه های بالا که مربوط به همین تگ هستند می توان از شناسه های استاندارد زیر هم استفاده کرد:
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
همچنین از رویدادهای زیر هم می توان در تگ <textarea> استفاده کرد :
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

okhpatoos · 17 سپتامبر 2012

لیستهای کشویی (Select)

برای ساختن لیستهای کشویی که به کاربران اجازه می دهد یک یا چند گزینه موجود در لیستی را در یک فرم انتخاب کند باید از تگ <select> استفاده کنیم. گزینه های موجود در این تگ بین <option> و <option/> قرار می گردند و پس از گزینه ها تگ پایانی لیست به صورت <select/> نوشته می شود.
در اینجا می توانید یک نمونه از کدی را که با آن یک لیست کشویی ساخته می شود مشاهده کنید:
<select name="someName">
<option value="value 1" >گزینه اول</option>
<option value="value 2">گزینه دوم</option>
<option value="value 3">گزینه سوم</option>
</select>
در این قسمت می توانید لیست مربوط به کد بالا را ملاحظه کنید:
با انتخاب هر یک از گزینه های موجود در لیست و کلیک بر روی دکمه ارسال فرم، مقدار مربوط به آن گزینه به صفحه action ارسال می شود.
از شناسه های زیر می توان در تگ <select> استفاده کرد:

name :
از این شناسه برای تخصیص یک نام به لیست استفاده می شود.
size :
این شناسه مشخص می کند چه تعدادی از گزینه ها در یک زمان قابل مشاهده باشند. در واقع رتفاع لیست را بر حسب تعداد گزینه ها مشخص می کند. مقدار این شناسه باید عددی بزرگتر از صفر باشد.
"multiple="multiple :
در صورتی که این شناسه به تگ <select> اضافه ضود بازدید کننده می تواند بیش از یک گزینه از گزینه های لیست را انتخاب کند.
"disabled="disabled :
این شناسه لیست را برای کاربر غیر فعال می کند و در نتیجه گزینه های آن امکان انتخاب شدن ندارند.

برای مشاهده لیست در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را مشاهده کنید:
حالت مورد نظر شما : فعال غیر فعال
کادر متنی نمونه :

از رویداد های زیر هم می توانیم در تگ <select> استفاده کنیم:
onfocus, onblur, onchange
وارد کردن گزینه ها به لیست با تگ <option>

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

value :
این گزینه مشخص کننده متنی است که در صورت انتخاب شدن گزینه مربوطه به عنوان مقدار لیست کشویی به صفحه action ارسال می شود.
"selected="selected :
از این گزینه برای مشخص کردن گزینه ای که به هنگام باز کردن صفحه به صورت پیش فرض انتخاب شده است استفاده می شود. در صورتی که برای هیچکدام از گزینه های موجود در لیست از این شناسه استفاده نشده باشد گزینه اول به عنوان گزینه پیش فرض استفاده می شود.

استفاده از رویداد های زیر در تگ <option> مجاز است:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
دسته بندی گزینه های لیست های کشویی با استفاده از <optgroup>

اگر یک لیست کشویی طولانی دارید توانید برای سهولت کار برای بازدید کننده گزینه های مرتبط با هم را در یک دسته قرار دهید به صورتی که از سایر گزینه ها جدا باشند. برای انجام این کار می توانید از تگ <optgroup> استفاده کنید. با استفاده از این تگ می توانید گزینه های مورد نظر خود برای یک دسته را بین <optgroup> و <optgroup/> قرار دهید.
کد زیر یک نمونه از لیست کشویی را نشان می دهد که گزینه ها در آن دسته بندی شده اند:
<select>
<optgroup label="عنوان گروه اول">
<option value ="some value "> گزینه اول در گروه اول </option>
<option value ="saab"> گزینه دوم در گروه اول </option>
</optgroup>
<optgroup label="عنوان گروه دوم">
<option value ="mercedes"> گزینه اول در گروه دوم </option>
<option value ="audi"> گزینه دوم در گروه دوم </option>
</optgroup>
</select>
در اینجا می توانید لیست ساخته شده با کد بالا را مشاهده کنید:
استفاده از شناسه زیر در تگ <optgroup> الزامی است :

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

از رویدادهای زیر می توانید در تگ <optgroup> استفاده کنید:
tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

okhpatoos · 17 سپتامبر 2012

تگهای META مورد استفاده موتورهای جستجو برای بررسی و شاخص گذاری صفحات قرار می گیرند. مخصوصاً اگر صفحه شما فریم (قاب) داشته باشد. این تگها باید در قسمت HEAD صفحه شما قرار گیرند.
در سطر زیر یکی از معمول ترین تگهای META را می بینید:
<head>
<title>عنوان صفحه</title>
<meta name=" " content=" ">
</head>

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

در این بخش به توضیح دو متا تگ که برای موتورهای جستجو اهمیت بیشتری دارند می پردازیم.
META Keywords

<meta name="keywords" content="متا تگ, موتور جستجو">

"name="keywords
این فرمان برنامه اسپایدر موتورهای جستجو را از وجود یک دسته از کلمات کلیدی این صفحه در این تگ آگاه می کند.
"متا تگ، موتور جستجو"=content
این قسمت لیستی از کلمات کلیدی موجود در این صفحه است. در این قسمت برای جدا کردن کلید واژه ها از یکدیگر از علامت کاما استفاده می شود.

توجه داشته باشید که نباید یک کلید واژه را چندین بار تکرار کنید و کلی واژه ها باید با متن شما در صفحه مربوطه ارتباط باشند. موتورهای جستجو معمولاً رتبه بندی صفحاتی را که در آنها با تکرار بیش از حد یک کلید واژه یا ذکر کلید واژه ای که با متن صفحه ارتباطی ندارد سعی می شود رتبه بالایی را به دست بیاورند، متوقف می کنند.

META Description

این تگ محتویات صفحه را توصیف می کند.
<meta name="description" content="افزودن متا تگ به صفحه">

"name="description
این بخش توضیحی در باره صفحه برای برنامه اسپایدر موتورهای جستجو است.
"افزودن متا تگ به صفحه"=content
این بخش توصیفی است که شما از صفحه خود می نویسید. در این قسمت هر چیزی را که می خواهید درباره صفحه خود توضیح دهید، همچنین می توانید از یک دو تا از کلید واژه ها هم استفاده کنید. بسیاری از موتورهای جستجو این قسمت را در لیست نتایج جستجو به عنوان توضیح صفحه نشان می دهند.

دو متا تگ ذکر شده در بالا از بقیه متا تگها پر کاربرد تر هستند. متا تگ های دیگری هم وجود دارند که در زیر به برخی از آنها اشاره می شود:
<meta name="author" content="نام نویسنده صفحه"> این تگ به شما اجازه می دهد که نویسنده صفحه را مشخص کنید. فقط نام نویسنده را در این تگ بنویسید تا هر کسی که کدهای HTML این صفحه را می بیند، بداند چه کسی این صفحه را نوشته است. موتور های جستجو معمولاً از این تگ برای رتبه بندی صفحات استفاده نمی کنند.
<meta name="generator" content="نام برنامه مورد استفاده شما"> این تگ به شما اجازه می دهد که به افرادی که کدهای این صفحه را می بینند بگویید که شما از چه برنامه ای برای نوشتن این کدها استفاده کرده اید. این تگ نیز برای رتبه بندی صفحات در موتورهای جستجو استفاده نمی شود.

okhpatoos · 17 سپتامبر 2012

تگهای META مورد استفاده موتورهای جستجو برای بررسی و شاخص گذاری صفحات قرار می گیرند. مخصوصاً اگر صفحه شما فریم (قاب) داشته باشد. این تگها باید در قسمت HEAD صفحه شما قرار گیرند.
در سطر زیر یکی از معمول ترین تگهای META را می بینید:
<head>
<title>عنوان صفحه</title>
<meta name=" " content=" ">
</head>

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

در این بخش به توضیح دو متا تگ که برای موتورهای جستجو اهمیت بیشتری دارند می پردازیم.
META Keywords

<meta name="keywords" content="متا تگ, موتور جستجو">

"name="keywords
این فرمان برنامه اسپایدر موتورهای جستجو را از وجود یک دسته از کلمات کلیدی این صفحه در این تگ آگاه می کند.
"متا تگ، موتور جستجو"=content
این قسمت لیستی از کلمات کلیدی موجود در این صفحه است. در این قسمت برای جدا کردن کلید واژه ها از یکدیگر از علامت کاما استفاده می شود.

توجه داشته باشید که نباید یک کلید واژه را چندین بار تکرار کنید و کلی واژه ها باید با متن شما در صفحه مربوطه ارتباط باشند. موتورهای جستجو معمولاً رتبه بندی صفحاتی را که در آنها با تکرار بیش از حد یک کلید واژه یا ذکر کلید واژه ای که با متن صفحه ارتباطی ندارد سعی می شود رتبه بالایی را به دست بیاورند، متوقف می کنند.

META Description

این تگ محتویات صفحه را توصیف می کند.
<meta name="description" content="افزودن متا تگ به صفحه">

"name="description
این بخش توضیحی در باره صفحه برای برنامه اسپایدر موتورهای جستجو است.
"افزودن متا تگ به صفحه"=content
این بخش توصیفی است که شما از صفحه خود می نویسید. در این قسمت هر چیزی را که می خواهید درباره صفحه خود توضیح دهید، همچنین می توانید از یک دو تا از کلید واژه ها هم استفاده کنید. بسیاری از موتورهای جستجو این قسمت را در لیست نتایج جستجو به عنوان توضیح صفحه نشان می دهند.

دو متا تگ ذکر شده در بالا از بقیه متا تگها پر کاربرد تر هستند. متا تگ های دیگری هم وجود دارند که در زیر به برخی از آنها اشاره می شود:
<meta name="author" content="نام نویسنده صفحه"> این تگ به شما اجازه می دهد که نویسنده صفحه را مشخص کنید. فقط نام نویسنده را در این تگ بنویسید تا هر کسی که کدهای HTML این صفحه را می بیند، بداند چه کسی این صفحه را نوشته است. موتور های جستجو معمولاً از این تگ برای رتبه بندی صفحات استفاده نمی کنند.
<meta name="generator" content="نام برنامه مورد استفاده شما"> این تگ به شما اجازه می دهد که به افرادی که کدهای این صفحه را می بینند بگویید که شما از چه برنامه ای برای نوشتن این کدها استفاده کرده اید. این تگ نیز برای رتبه بندی صفحات در موتورهای جستجو استفاده نمی شود.

okhpatoos · 17 سپتامبر 2012

اگر صفحه شما جابجا شد یا به هر دلیلی خواستید مسیر بازدیدکنندگان خود را تغییر دهید می توانید از تگ meta refresh برای بردن بازدید کنندگان به صفحه مورد نظرتان استفاده کنید. البته در استفاده از این روش برای تغییر مسیر بازدید کنندگان، مخصوصاً در صفحه اصلی سایت خود باید به این نکته توجه کنید که برخی از موتورهای جستجو به دنبال تگهای meta refresh می گردند که بازدید کنندگان را از یک صفحه که با کلمات کلیدی پر شده است، به صفحه واقعی می برند که ممکن است در آن از کلمات کلیدی استفاده نشده باشد و در نتیجه با موضوع مورد نظر بازدید کننده مرتبط نباشد. بنابراین تغییر مسیر بازدید کننده از یک صفحه با سرعت زیاد (معمولاً کمتر از 10 ثانیه) ممکن است باعث شود این صفحه در لیست موتور جستجو قرار نگیرد. البته اگر این صفحه صفحه اصلی سایت شما نباشد ممکن است نخواهید در لیست موتور جستجو قرار گیرد.
بسیار خوب، کد زیر را می توان برای تغییر مسیر بازدید کننده استفاده کرد:
<html>
<head>
<meta http-equiv="refresh" content="3;url=http://www.yoursite.com/destinationpage.htm">
<title>این صفحه جا به جا شده است</title>
</head>
<body>
متن مورد نظر شما
</body>
</html> این نکته را مد نظر داشته باشید که تگ Meta refresh قبل از عنوان صفحه (TITLE) نوشته می شود.
فرمان " "=content دو کار را انجام می دهد. اول مشخص می کند که مرورگر قیل از تغییر مسیر چند ثانیه باید صبر کند. دوم آدرس صفحه ای که باید مسیر به آن آدرس تغییر یابد. به این نکته توجه کنید که هر دو قسمت زمان و آدرس صفحه در یک جفت دابل کوت قرار دارند نه دو جفت. برای جدا کردن این دو قسمت باید از نقطه ویرگول (

استفاده کرد.
در بخش BODY هم ر چیزی که بخواهید می توانید بنویسید. همچنین می توانید برای کاربرانی که از مرورگرهای قدیمی استفاده می کنند یک لینک را قرار دهید تا به صورت دستی به صفحه جدید وارد شوند.
<html>
<head>
<meta http-equiv="refresh" content="3;url=http://www.yoursite.com/destinationpage.htm">
<title>این صفحه جا به جا شده است</title>
</head>
<body>
این صفحه جا به جا شده است. اگر مرورگر شما به صورت اتوماتیک به صفحه جدید نرفت <a
href="http://www.yoursite.com/destinationpage.htm">اینجا</a> را کلیک کنید تا به صورت دستی به صفحه جدید وارد شوید
</body>
</html>

okhpatoos · 17 سپتامبر 2012

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

width :
این فرمان مقدار عرض خط افقی را مشخص می کند. ر این فرمان شما می توانید از مقیاس پیکسل یا درصد استفاده کنید. گزینه پیش فرض برای این فرمان 100% است.
"align="left :
این فرمان سمت قرار گرفتن خط افقی را مشخص می کند. شما می توانید خط را به صورت چپ چین، راست چین و در مرکز صفحه قرار دهید. گزینه پیش فرض این فرمان center است که خط را در مرکز صفحه قرار می دهد. البته زمانی این وضعیت مشخص می شود که عرض خط افقی کمتر از عرض صفحه باشد.
"size="3 :
این فرمان اندازه خط را مشخص می کند. اندازه پیش فرض برای خط 2 است.
"noshade="noshade :
این فرمان خط را به صورت تو پر نشان می دهد.

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

---------------------------------------------------------------------------------------------------------------

<hr width="250">
با این فرمان خطی افقی مانند زیر خواهید داشت:

---------------------------------------------------------------------------------------------------------------

<hr width="250" align="right">
با این تگ یک خط افقی با عرض 250 پیکسل و در سمت راست صفحه خواهید داشت. مانند زیر:

---------------------------------------------------------------------------------------------------------------

<hr width="250" size="10">
با این تگ یک خط افقی با عرض 250 پیکسل و پهنای 10 خواهید داشت:

---------------------------------------------------------------------------------------------------------------

حالا یک اندازه بزرگ را برای پهنای خط انتخاب می کنیم، مثلاً 80 ، نتیجه به این صورت خواهید بود:
همانطور که ملاحظه می کنید، خط به صورت تو خالی و مانند یک حباب به نظر می رسد.
حالا اگر از فرمان noshade استفاده کنید، خط به صورت تو پر نمایش داده می شود:
<hr width="250" noshade="noshade">
این بار با اندازه 80 این تگ را امتحان می کنیم:
<hr width="250" size="80" noshade>
---------------------------------------------------------------------------------------------------------------
در برخی مرورگرها مانند اینترنت Internet Explorer 4.0 به بعد و Mozilla Firefox امکان تغییر رنگ خط نیز وجود دارد. اما ممکن است این رنگ در همه مرورگرها مثلاً Opera 9.0 قابل مشاهده نباشد و خط به رنگ پیش فرض مشاهده شود.
در این قسمت اگر با مرورگری مثل اینترنت اکسپلورر صفحه را مشاهده می کنید، می توانید خطی را به رنگ زرد مشاهده کنید اما اگر با مرورگری مثل Opera این صفحه را مشاهده می کنید، خط زیر را به رنگ خاکستری (رنگ پیش فرض) خواهید دید.
<hr width="250" size="20" color="yellow" noshade>

okhpatoos · 17 سپتامبر 2012

برای تغییر رنگ پیش فرض متن در صفحه باید از تگ <BODY> استفاده کنید. شما باید دنبال " "=text بعد از تگ BODY بگردید. مانند این:
<BODY text="black">
ممکن است به جای رنگ از ترکیبی از حروف و اعداد استفاده شده باشد. مانند زیر:
<BODY text="#000000">
البته ممکن است هیچکدام از موارد بالا وجود نداشته باشد، یا شما بخواهید یک صفحه تازه بنویسید. در این موارد باید این فرمان اضافی را به تگ BODY خود اضافه کنید. درست مثل موارد بالا. اگر فرمانهای دیگری هم دارید می توانید این فرمان را در انتهای آنها اضافه کنید البته با قرار دادن یک فضای خالی بین فرمانها. برای نمونه به سطر زیر توجه کنید، من برای تعیین رنگ زمینه و رنگ متن این صفحه از این فرمان استفاده کرده ام:
<BODY bgcolor="#66CCFF" text="black">
حالا اگر می خواهید رنگ متن را تغییر دهید می توانید نام انگلیسی رنگ مورد نظر خود را به جای black بنویسید. روش دیگری که برای این کار وجود دارد استفاده از معادل هگزادسیمال رنگها است که در این روش می توانید از بین رنگهای بیشتری رنگ خود را انتخاب کنید چون ما برای تمام رنگهای مورد استفاده نمی توانیم اسم واحدی را به کار ببریم.
برای مثال اگر می خواهید رنگ متن شما زرد باشد از دو طریق می توانید به این خواسته خود برسید:

استفاده از نام رنگ به صورت زیر :
<BODY text="yellow">
استفاده از معادل هگزادسیمال رنگها :
<BODY text="#FFFF00">

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

okhpatoos · 17 سپتامبر 2012

اگر بخواهید رنگ لینکها را در صفحه خود تغییر دهید مانند تغییر رنگ پیش فرض متن باید تگ BODY را پیدا کنید. در تگ BODY به دنبال شناسه link بگردید. مثلاً ممکن است تگ BODY به این صورت باشد:
<body link="blue">
در تگ BODY ممکن است شناسه های دیگری هم وجود داشته باشند، مثلاً شناسه های مربوط به رنگ متن و یا رنگ زمینه. در این صورت می توانید شناسه رنگ لینک را با یک فاصله خالی با آخرین فرمان موجود در تگ BODY به این تگ اضافه کنید.
حالا برای تغییر رنگ لینکها در صفحه نام رنگ مورد نظر خود را به عنوان مقدار شناسه link وارد کنید یا از معادل هگزادسیمال رنگ به جای نام رنگ استفاده کنید.
مثلاً برای تغییر رنگ لینکها به زرد می توانیم مانند زیر عمل کنیم:
1- استفاده از نام رنگ:
<body link="yellow">
2- استفاده از معادل هگزادسیمال رنگ:
<body link="#ffff00">
حالا همه لینکهای موجود در صفحه شما به جای آبی به رنگ زرد در مرورگر ظاهر می شوند.
همین کار را می توانید برای لینکهای فعال و لینکهای بازدید شده تکرار کنید. مانند زیر:
<body alink="blue" vlink="violet">
مانند مثال بالا شناسه alink برای لینکهای فعال و vlink برای لینکهای بازدید شده استفاده می شود.
برای تغییر دیگر رنگها هم به همین صورت عمل می شود تنها نکتهای که باید مد نظر قرار گیرد این است که حتماً قبل از وارد کردن فرمان یک فضای خالی با فرمان قبلی بگذارید.
روش دیگری که برای تغییر رنگ لینکها وجود دارد استفاده از استایل و CSS است. در صورتی که برای تعیین مشخصات لینکها از استایل استفاده شود امکان افزودن ویژگیهای دیگری نظیر کادر و رنگ زمینه هم به لینکها وجود دارد.

okhpatoos · 17 سپتامبر 2012

اگر می خواهید برای زمینه صفحه خود یک رنگ را انتخاب کنید، باید این رنگ را در تگ BODY تعریف کنید. وقتی که این تگ را پیدا کردید در آن به دنبال شناسه bgcolor بگردید ، که ممکن است مانند زیر باشد:
<body bgcolor="gray">
ممکن است به جای نام رنگ از معادل هگزادسیمال رنگ استفاده شده باشد. مانند زیر (این فرمانی است که من برای زمینه این صفحه از آن استفاده کرده ام):
<body bgcolor="#66ccff">
البته ممکن است این شناسه را در تگ BODY پیدا نکنید، در این صورت یک فاصله بعد از BODY قرار داده شناسه bgcolor را وارد کنید.
برای عوض کردن رنگ زمینه نام رنگ مورد نظر خود را به جای نام رنگ در شناسه بالا قرار دهید.
به جای نام رنگ می توانید از معادل هگزا دسیمال رنگ استفاده کنید.
برای مثال اگر می خواهید رنگ زمینه به رنگ سبز درآید باید مانند زیر عمل کنید:
<body bgcolor="green">
و یا به این صورت:
<body bgcolor="008000">
روش دیگری که برای تغییر رنگ زمینه صفحه وجود دارد استفاده از CSS است که با ورود نسخه چهارم HTML استفاده از آن رو به افزایش است.

okhpatoos · 17 سپتامبر 2012

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

چگونه یک لینک بسازیم.
چگونه یک عکس را به صفحه اضافه کنیم.

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

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

<img src="image.gif">
حال اگر بخواهیم از یک عکس به عنوان یک لینک استفاده کنیم باید تگ عکس را به جای متن لینک استفاده کنیم. یعنی به صورت زیر:
<a href="url"><img src="image.gif"></a>
تنها نکته ای که در اینجا باید به آن دقت کنید این است که نباید تگ لینک را قبل از ورود تصویر ببندید. یعنی تگ عکس باید بین تگ ابتدایی و انتهایی لینک قرار بگیرد تا به عنوان یک لینک عمل کند. به این مثال توجه کنید:
می خواهیم از عکسی با نام learn_html.gif که در پوشه همین صفحه قرار دارد به عنوان لینک به مقدمه آموزش HTML که در همین پوشه است استفاده کنیم(نام صفحه مورد نظر index.html است). به این صورت عمل می کنیم:
<a href="index.html"><img src="learn_html.gif"></a>
لینک به دست آمده مانند سطر زیر است:

اگر ماوس خود را بر روی عکس بالا قرار دهید خواهید دید که نشانگر ماوس به شکل دست در می آید. اگر بر روی عکس کلیک کنید به صفحه سرفصل آموزش HTML خواهید رفت.
اغلب مرورگرها به تصاویری که به عنوان لینک استفاده می شوند یک خط حاشیه (border) در لبه های تصویر اضافه می کنند. برای اینکه این خط دیده نشود شناسه زیر را به تگ عکس خود اضافه کنید:
border="0"
مثال قبل را با اضافه کردن شناسه بالا تکرار می کنیم:
<a href="index.html"><img src="learn_html.gif" border="0"></a>
نتیجه به این صورت در می آید:

شما می توانید خط حاشیه را کلفت تر نیز نشان دهید. فقط کافی است عدد بزرگتری را در فرمان border قرار دهید. مانند زیر:
<a href="index.html"><img src="learn_html.gif" border="5"></a>
نتیجه را در زیر مشاهده می کنید:

منظور از قرار دادن خط حاشیه مشخص کننده محدوده لینک است

okhpatoos · 17 سپتامبر 2012

برای اینکه بتوانیم یک متن را در کنار یک عکس بنویسیم باید در تگ عکس از یکی این فرمانها استفاده کنیم (در صورتی که از این فرمانها استفاده نشود متن و عکس در دو سطر نمایش داده می شوند):
align="left"
align="right"
تگ عکس با استفاده از این فرمانها به صورت زیر در می آید:

عکس مورد نظر در صفحه به این صورت نمایش داده می شود:

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

این سطر باید در کنار عکس به نمایش درآید

همینطور تا وقتی که

متن به پایان عکس برسد

متن باید در کنار عکس قرار گیرد

تا به پایان عکس برسد

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

این سطر باید در کنار عکس به نمایش درآید
همینطور تا وقتی که
متن به پایان عکس برسد
متن باید در کنار عکس قرار گیرد
تا به پایان عکس برسد

البته ممکن است شما احتیاجی به استفاده از تگ سطر جدید یعنی
نداشته باشید. من از این تگ برای جلوگیری از طولانی شدن متن استفاده کردم. اگر از این تگها استفاده نکنید تا جایی که عرض صفحه اجازه می دهد سطر ادامه پیدا می کند و بعد به سطر بعد خواهید رفت.
شما می توانید از فرمان "align="right برای قرار دادن عکس در سمت راست صفحه استفاده کنید. در این صورت عکس در سمت راست صفحه نمایش داده می شود و متن در سمت چپ کس دیده می شود.

okhpatoos · 17 سپتامبر 2012

از شناسه alt برای وارد کردن متن جایگزین برای عکس در تگ <img> استفاده می شود. موقعی که مرورگر به هر دلیلی نتواند عکس موجود در صفحه شما را نمایش دهد به جای آن این کامنت را نشان می دهد. و می تواند به بیننده بفهماند که چه چیزی را از دست داده است.
از این شناسه مانند مثال زیر استفاده می شود :
alt="متن کامنت"
این فرمان را در تگ تصویر (IMG) قرار دهید، فاصله بین دو فرمان را فراموش نکنید. مانند زیر:
<img src="learn_html.gif" alt="html لوگوی آموزش">
ما این کامنت را به عنوان جانشین عکس در تگ IMG وارد می کنیم. تا هر وقت عکس به نمایش در نیامد این کامنت به نمایش درآید.
در سطر زیر نشان می توانید یک کامنت جایگزین را ببینید چون عکس اصلی به نمایش در نمی آید (در اینجا عکس به نمایش در نمی آید چون در مسیر مربوطه چنین عکسی وجود ندارد):

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

okhpatoos · 17 سپتامبر 2012

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

Back to the Top

ممکن است شما بخواهید صفحه را به چندین قسمت تقسیم کنید و در بالای صفحه فهرستی برای آن قرار دهید که بیننده با کلیک کردن بر روی عنوان هر قسمت به آن قسمت در صفحه برود.
در این موارد شما می توانید از پیوندهای نامگذاری شده که در قسمتهای مشخصی از صفحه شما قرار دارند که شما می خواهید به آن نقاط لینک بسازید استفاده کنید. شما می توانید به هر نقطه از صفحه لینک بسازید اما فعلاً در مورد لینک به بالای صفحه توضیح می دهیم.
برای این کار به بالای قسمت BODY در متن HTML خود بروید ( درست بعد از تگ BODY )
اکنون این تگ را تایپ کنید:

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

علامت # به مرورگر می فهماند که مقصد پیوندی نامگذاری شده در همین صفحه است. اگر شما یک پیوند با نام "UP" ساخته بودید اکنون باید از "up#" به جای "top#" استفاده می کردید.
شما می توانید در هر کجای صفحه یک پیوند نامگذاری شده بسازید و به وسیله یک لینک از قسمتهای دیگر به آن قسمت بازگردید.

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

آموزی زبان HTML با شیوه Encoding

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

تبلیغات متنی