IDN » مدرسه وب

بایگانی نویسنده

HTML Cheatsheet – برگه تقلب HTML

آذر ۴م, ۱۳۸۷

< tr>

تگهای اصلی (Basic Tags)
<html></html>	ایجاد سندی اچتمل
<head></head>	ایجاد اطلاعات شناسنامه ای سند مانند عنوان و …
<body></body>	ایجاد بدنه و قسمت قابل مشاهده سند اچتمل

تگهای ناحیه Header
<title></title>	تعیین عنوان سند

شناسه های مهم تگ body
<body bgcolor=?>	تعیین رنگ زمینه بر اساس نام رنگ یا معادل هگز
<body text=?>	تعیین رنگ نوشته بر اساس نام رنگ یا معادل هگز
<body link=?>	تعیین رنگ پیوندها بر اساس نام رنگ یا معادل هگز
<body vlink=?>	تعیین رنگ پیوندهای بازدیدشده بر اساس نام رنگ
<body alink=?>	تعیین رنگ پیوند فعال بر اساس نام رنگ یا معادل هگز

تگهای متن و نوشته
<pre></pre>	نمایش متن های از قبل فرمت شده (preformatted)
<hl></hl>	ایجاد بزرگترین سر تیتر
<h6></h6>	ایجاد کوچکترین سر تیتر
<b></b>	ایجاد متن توپر
<i></i>	ایجاد متن مورب و ایتالیک
<tt></tt>	ایجاد متن از نوع تله تایپی
<cite></cite>	ایجاد citation معمولا ایتالیک
<em></em>	نمایش تاکید شده متن (توپر یا مورب)
<strong></strong>	نمایش تاکید شده متن (توپر یا مورب)
<font size=?></font>	تعیین اندازه قلم از ۱ تا ۷
<font color=?></font>	تعیین رنگ قلم بر اساس نام رنگ یا مقدار هگز آن

پیوندها
<a href=”URL”></a>	ایجاد پیوند
<a href=”mailto:EMAIL”></a>	ایجاد پیوندی از نوع mailto
<a name=”NAME”></a>	ایجاد پیوندی نامگذاری شده در یک سند
<a href=”#NAME”></a>	ارجاع به یک پیوند نامگذاری شده

فرمت دهی
<p></p>	ایجاد پاراگرافی جدید
<p align=?>	ترازبندی پاراگراف در سمت left, right, or center
<br>	رفتن سر سطر جدید
<blockquote> </blockquote>	عنوان سازی متن
<dl></dl>	ایجاد فهرستهای تعریفی
<dt>	ایجاد عنصری از یک فهرست تعریفی
<dd>	ایجاد شرح و توصیف یک عنصر فهرست تعریفی
<ol></ol>	ایجاد فهرستهای مرتب
<li></li>	ایجاد یک قلم اطلاعاتی از یک فهرست
<ul></ul>	ایجاد فهرستی نامرتب
<div align=?>	تگی برای فرمت دهی بلوکی بزرگ از کدهای اچتمل

المانهای گرافیکی
<img src=”name”>	ایجاد یک تصویر
<img src=”name” align=?>	تراز بندی تصویر (left, right, center; bottom, top, middle)
<img src=”name” border=?>	تعیین ضخامت مرز یک تصویر
<hr>	درج خطی افقی
<hr size=?>	تعیین ارتفاع خط افقی
<hr width=?>	تعیین عرض خط بر اساس مقدار واقعی یا درصدی
<hr noshade>	ایجاد خطی افقی بدون سایه

جداول
<table></table>	ایجاد جدول
<tr></tr>	ایجاد ردیف در جداول
<td></td>	ایجاد خانه های جداول
<th></th>	ایجاد عنوان ستونهای یک جدول

شناسه های جداول
<table border=#>	تعیین مقدار ضخامت مرزهای یک جدول
<table cellspacing=#>	تعیین فاصله بین خانه های جدول
<table cellpadding=#>	تعیین فاصله بین محتوای یک خانه و مرزهای آن
<table width=# or %>	تعیین عرض جدول بر اساس پیکسل و یا درصدی
<tr align=?> or <td align=?>	تعیین ترازبندی خانه های جدول (left, center, right)
<tr valign=?> or <td valign=?>	ترازبندی عمودی خانه های جدول (top, middle, bottom)
<td colspan=#>	تعیین تعداد ستون هائی که باید یکی شوند.
<td rowspan=#>	تعیین تعداد سطر هائی که باید یکی شوند.
<td nowrap>	باعث جلوگیری از شکسته شدن متن در خانه جدول میشود.

فریمها
<frameset></frameset>	تعریف و ایجاد مجموعه ای از فریمها
<frameset rows=”value,value”>	شناسه ای برای تعریف ردیفهای یک مجموعه فریم بر اساس اندازه واقعی بر حسب پیکسل و یا ابعاد درصدی
<frameset cols=”value,value”>	شناسه ای برای تعریف ستونها یک مجموعه فریم بر اساس اندازه واقعی بر حسب پیکسل و یا ابعاد درصدی
<frame>	تعریف فریمی از مجموعه فریمها
<noframes></noframes>	تعیین متنی که باید در صورت عدم پشتیبانی مرورگر از فریمها باید نمایش داده شود.

شناسه های فریمها
<frame src=”URL”>	تعیین سند اچتمل داخل فریم
<frame name=”name”>	تعیین نام برای یک فریم
<frame marginwidth=#>	تعیین عرض حاشیه راست و چپ فریم
<frame marginheight=#>	تعریف طول حاشیه بالا و پایین فریم بر اساس پیکسل
<frame scrolling=VALUE>	تعیین اینکه فریمی از Scroll bar استفاده کند یا نه. مقادیر ممکن: yes، no و auto (حالت پیش فرض)
<frame noresize>	سبب جلوگیری از تغییر اندازه یک فریم میشود.

فرمها
<form></form>	ایجاد یک فرم
<select multiple name=”NAME” size=?></select>	ایجاد یک منوی کرکره ای و تعیین تعداد اقلامی که قبل از scrolling نمایش داده خواهند شد.
<option>	تعیین هر یک از اقلام منو کرکره ای
<select name=”NAME”></select>	ایجاد منوی کرکره ای
<option>	تعیین هر یک از اقلام منو کرکره ای
<textarea name=”NAME” cols=40 rows=8></textarea>	ایجاد المانی برای ورود متن در بیش از یک خط با تعیین تعداد سطر و ستون ناحیه
<input type=”checkbox” name=”NAME”>	ایجاد چک باکسی با تعیین متن و عنوان آن
<input type=”radio” name=”NAME” value=”x”>	ایجاد رادیو باتن با تعیین متن و عنوان آن
<input type=text name=”foo” size=20>	ایجاد المانی برای ورود متن با حداکثر یک سطر به همراه تعیین ابعاد بر اساس نویسه
<input type=”submit” value=”NAME”>	ایجاد دکمه ای از نوع ارسال و Submit
<input type=”image” border=0 name=”NAME” src=”name.gif”>	ایجاد دکمه ای از نوع ارسال با کمک یک تصویر
<input type=”reset”>	ایجاد دکمه خلاصی !! یا Reset

Posted in اچ تی ام ال HTML, برنامه نویسی | No Comments »

رنگها در اچتمل

آذر ۴م, ۱۳۸۷

در زبان اچتمل رنگها بر اساس ترکیب سه منبع نوری قرمز(Red)، سبز(Green) و آبی(Blue) تعریف میشوند و هر منبع نوری شدتی بین ۰ تا ۲۵۵ را میتواند داشته باشد. در این استاندارد نور سفید رنگی است حاصل از تداخل سه منبع نوری با شدت کامل یعنی ۲۵۵ و رنگ سیاه حاصل تداخل سه نور با شدت ۰ خواهد بود.(در واقع هر نقطه رنگی یا پیکسل بر روی صفحه مانیتور حاصل برخورد سه اشعه نوری قرمز، سبز و آبی ساخته شده توسط لامپ تصویر میباشد.)

توجه داشته باشید که مطابق تعریف ذکر شده امکان استفاده از ۲۵۶ x 256 x 256 یا حدود ۱۶ میلیون (۱۶,۷۷۷,۲۱۶) رنگ مختلف وجود داشته و در شناسه های مختلف به یکی از سه روش زیر قادر به تعیین رنگ متن یا ناحیه ای خواهید بود:

استفاده از مقادیر شدت نور در مبنای ۱۶ با فرمت #RRGGBB که RR، GG, BB مقادیر مبنای شانزده نورهای قرمز، سبز و آبی میباشند.
استفاده از مقادیر شدت نور در مبنای ۱۰ با فرمت rgb(RRR,GGG,BBB) که RRR، GGG, BBB مقادیر مبنای ده نورهای قرمز، سبز و آبی میباشند.
استفاده از نامهای استاندارد رنگها مانند red ، green و … مطابق جدول انتهائی این صفحه

جدول زیر حاوی جندین مثال و رنگ ترکیبی در مبنای ده و شانزده میباشد:

جدول رنگهای پایه اچتمل بر اساس مقادیر هگز

مبنای ۱۶ (Color HEX)	مبنای ۱۰ (Color RGB)	نام رنگ
#۰۰۰۰۰۰	rgb(0,0,0)	Black

#FF0000	rgb(255,0,0)	Red

#00FF00	rgb(0,255,0)	Lime

#0000FF	rgb(0,0,255)	Blue

#FFFF00	rgb(255,255,0)	Yellow

#00FFFF	rgb(0,255,255)	Cyan

#FF00FF	rgb(255,0,255)	Fuchsia

#FFFFFF	rgb(255,255,255)	White

#C0C0C0	rgb(192,192,192)	Silver

در نسخه جدید(۴/۰) اچتمل امکان جداسازی کامل فرمت دهی از ساختار صفحات اچتمل فراهم شده است. در این نسخه توصیه میشود که تمامی اطلاعات مربوط به نمایش و ترازبندی به فایلهائی مجزا از صفحه اچتمل منتقل شوند. بخشی از صقحات اچتمل که مربوط به نمایش، ترازبندی و فرمت دهی است، استایل شیت یا “Style Sheet” نامید شده و معمولا به صورت فایلی مجزا درون بخش <head> صفحات اچتمل معرفی میگردند. در این درس به صورت بسیار خلاصه با روشهای مختلف استفاده از استایل شیتها در صفحات اچتمل آشنا خواهید شد.

چگونگی استفاده از استایل شیتها:

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

۱)استایل شیتهای خارجی (external style sheet) :

در این روش تمامی استیلها و تعاریف نمایشی درون فایلی جداگانه قرار گرفته و بسیار مناسب حالتهائی است که قرار است که استایلی به بیش از یک صفحه اچتمل اعمال شود. مزیت این روش سهولت در تغییر ظاهر صفحات یک وب سایت میباشد و برای یک تغییر کلی در سایت کافی است که فایل استایل شیت کل سایت که معمولا یک فایل واحد است تغییر داده شود. (باید توجه داشت که در این حالت تمامی صفحات سایت باید به یک فایل استایل شیت واحد لینک شده باشند.) استایل شیتهای خارجی توسط تگ <link> که درون بخش head صفحات اچتمل قرار میگیرد، معرفی میشوند.
در مثال زیر با کمک شناسه href از تگ link نام و در حالت کلی url فایل در برگیرنده استایلهای تعریف شده تعیین میگردد:

#EEEEEE

#DDDDDD

#CCCCCC

#BBBBBB

#AAAAAA

#999999

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

2)استایل شیتهای داخلی (Internal Style Sheet) :

کاربرد این روش در حالتهائی است که صفحه اچتمل نیازمند تعریف استایلی منحصر به فرد و مجزا بوده و استایل طراحی شده فقط بدرد آن صفحه خواهد خورد. در این حالت باید کدهای حاوی تعریف استایل درون تگ های <style> و <style/> قرار گرفته و معمولا نتیجه درون بخش head صفحه اچتمل گذاشته میشود.مثال:

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

3)استایل شیتهای درجا (Inline Styles) :

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

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

تگ های استایل

Start Tag	Purpose	کاربرد
<style>	Defines a style in a document	تعریف استیلها درون یک سند

<link>	Defines the relationship between two linked documents	تعیین و تعریف فایل استایل شیت خارجی

<font>	Deprecated. Use styles instead	کنار گذاشته شده.از استایل شیتها استفاده شود.

<basefont>	Deprecated. Use styles instead	کنار گذاشته شده.از استایل شیتها استفاده شود.

<center>	Deprecated. Use styles instead	کنار گذاشته شده.از استایل شیتها استفاده شود.

تغییرات در نسخه جدید اچتمل (۴/۰) :
هدف اولیه از طراحی زبان اچتمل ایجاد زبانی برای تعریف اطلاعات محض بدون در برداشتن جزئیات مربوط به فرمت و نمایش بود ولی با ایجاد نسخه ۳/۲ زبان اچتمل و اضافه شدن تگهای فرمت دهی مانند <font> و یا شناسه هائی مانند color و Align محتوا و نمایش در صفحات اچتمل ادغام گردیده و همین امر سبب بروز مشکلات عدیده ای برای طراحان و برنامه نویسان وب گردید. برای رفع این مشکل در نسخه ۴/۰ اچتمل توصیه بر جداسازی کامل این دو گروه از اطلاعات بوده و در نسخه های آینده اچتمل این جداسازی اجباری خواهد گردید و توصیه مدرسه وب نیز استفاده از استایل شیتها برای هر نوع تعریف فرمت و ترازبندی میباشد. برای مثال در کد اچتمل زیر که بر اساس نسخه ۳/۲ اچتمل میباشد، ساختار و محتوا (تگی از نوع پاراگراف با محتوای “This is a paragraph”) با اطلاعات نمایش یعنی رنگ و ترازبندی (رنک قرمز متن و ترازبندی در وسط صفحه) همزمان و در کنار هم آورده شده اند و این ادغام امکان تغییر و توسعه کد را بسیار محدود خواهد کرد:


<p align=”center”><font color=”red”>This is a paragraph</font></p>

Posted in اچ تی ام ال HTML, برنامه نویسی | No Comments »

قلم ها ( HTML Fonts )

آذر ۴م, ۱۳۸۷

با وجودیکه هنوز بعضی از اچتمل کاران از تگ <font> برای تعیین نام و نوع قلم، رنگ و اندازه متون استفاده میکنند ولی در استاندارد جدید اچتمل (نسخه ۴) و همچنین XHTML از تگ <font> پشتیبانی نمیشود و استفاده از Style Sheet ها به عنوان جایگزین معرفی شده است.

تگ <font>

در نسخه های ۳٫۲ و قبلی تر زبان اچتمل از تگ <font> برای تعیین نام قلم، رنگ و اندازه متون استفاده میشود. در این تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهای زیر کاربرد تگ <font> خدابیامرز را نشان میدهند:

کد اچتمل	نمایش کد روبرو توسط مرورگر
<p> <font size="2" face="Verdana"> This is a paragraph. </font> </p>	This is a paragraph.

<p dir="rtl"> <font size="1" face="Times" color="#FF9900"> متنی با قلم Times و اندازه ۱ و رنگ FF9900 </font> </p>	متنی با قلم Times و اندازه ۱ و رنگ FF9900

<p dir="rtl"> <font size="2" face="Tahoma" color="red"> این متنی با قلم Tahoma و اندازه ۲ و رنگ قرمز </font> </p>	متنی با قلم Tahoma و اندازه ۲ و رنگ قرمز

شناسه های تگ <font>

Attribute	Example	کاربرد
size=”number”	size=”2″	تعیین اندازه قلم

size=”+number”	size=”+1″	افزایش اندازه قلم

size=”-number”	size=”-1″	کاهش اندازه قلم

face=”face-name”	face=”Times”	تعیین نام قلم

color=”color-value”	color=”#eeff00″	تعیین رنگ قلم

color=”color-name”	color=”red”	تعیین رنگ قلم

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

دیگر از تگ <font> استفاده نکنید!

تگ <font> از رده خارج محسوب میشود و کنسرسیوم جهانی تعیین استانداردهای وب (World Wide Web Consortium, W3C) این تگ را از مجموعه تگهای استاندارد اچتمل کنار گذاشته است و اکیدا توصیه میشود که از Style Sheet ها برای تعریف هر گونه خواص نمایشی و آرایشی (layout & Presentation) المانها در اچتمل استفاده شود.

روش صحیح تعیین نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:

هر چند که مبحث و کلاسهای درس Style Sheet ها در “مدرسه وب” در دست تهیه بوده و امیدواریم که بزودی ارائه شوند ولی تا قبل از آن استفاده از شناسه ای به نام style در بسیاری از المانها کار گشا خواهد بود.

تگ <span>
تگ <span> سبب تعریف محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون تگهای <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا سمت و جهت نمایش متون(dir).
بر خلاف تگ های <p> و <div> مرورگرها هیچ سطر جدیدی به اول یا آخر المان <span> اضافه نمی کنند.

مثال:

کد اچتمل	نمایش کد روبرو توسط مرورگر
<p>Some text <span style=”color:#0000AF;”>another text</span> again text…</p>	Some text another text again text…


id, class, title, style, dir, lang	شناسه های استاندارد المان span

مثالهائی از نحوه استفاده از المان span و Style sheet ها:
روش قدیمی	روش صحیح
<font color=”#FF00FF”>Hello!</font>	<span style=”color:#FF00FF”>Hello!</span>

<font color=”rgb(255,0,255)”>Hello!</font>	<span style=”color:rgb(255,0,255)”>Hello!</span>

<font style=”color:Fuchsia”>Hello!</font>	<span style=”color:Fuchsia”>Hello!</span>

<font color=”#FF00FF” size=”3″>Hello!</font>	<span style=”color:#FF00FF;font-size:100%”>Hello!</span>

تگ <div>
تگ <div> سبب تعریف محدوده و گستره ای مشخص میشود. تمامی المان هائی که درون تگهای <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبیل استیل (Style) و یا سمت و جهت نمایش متون(dir).
بر خلاف تگ <span> مرورگرها یک سطر جدید به اول و آخر المان <div> اضافه می کنند.

مثال:

کد اچتمل

نمایش کد روبرو توسط مرورگر

<p>Some text <div style=”color:#0000AF;”>another text</div> again text…</p>

Some text

another text

again text…


id, class, title, style, dir, lang	شناسه های استاندارد المان div

Start Tag	Purpose	کاربرد
<div>	Defines a division/section in a document	تعریف بخش و ناحیه ای از صفحه اچتمل

<span>	Defines a section in a document	تعریف بخش و ناحیه ای از صفحه اچتمل

Posted in اچ تی ام ال HTML, برنامه نویسی | No Comments »

پس زمینه ( Background )

آذر ۴م, ۱۳۸۷

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

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

شناسه bgcolor برای رنگ پس زمینه (background color)شناسه bgcolor رنگ پس زمینه را تعیین میکند. مقدار رنگ پس زمینه میتواند نام رنگ (مثل red یا blue ) ، مقدار آن بر اساس استاندارد RGB و یا حتی مقدار هگزادسیمال (Hexadecimal) باشد.

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

در تمامی مثالهای بالا با کمک شناسه bgcolor رنگ زمینه صفحه “سیاه” تعیین میشود.

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

<body background="bg.gif">
<body background="http://www.khaterat.com/images/bg.gif">

در مثال اول از آدرس دهی نسبی (relative) برای تعیین URL یا آدرس تصویر استفاده شده و در واقع در این مثال فایل اچتمل و تصویر bg.gif باید در یک دایرکتوری قرار گیرند. در مقابل مثال دوم از آدرس دهی مطلق (absolute) برای تعیین آدرس تصویر استفاده شده است و همانطور که میدانید آدرس تصویر در هر نقطه از فضای وب میتواند باشد.

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

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

نکته مهم در سازگاری با نسخه های جدید اچتمل و XHTML شناسه های bgcolor و background در تگ <body> در نسخه ۴ اچتمل و XHTML پشتیبانی نمیشوند و در واقع از رده خارج محسوب میشوند. در عوض کنسرسیوم W3C استفاده از Style Sheet ها را توصیه میکند و در واقع در نسخه ۴ اچتمل و استاندارد جدید XHTML تمامی اطلاعات مربوط به نمایش یا presentation و layout باید در style sheet ها قرار گیرند.

Posted in اچ تی ام ال HTML, برنامه نویسی | No Comments »

تصاویر ( Images )

آذر ۴م, ۱۳۸۷

در این درس با تگ img ، شناسه src و alt ، تگهای Map و Area و چگونگی نمایش تصاویر و همچنین تنظیم محل آنها در سندهای اچتمل آشنا خواهید شد.

تگ img و شناسه src یا source

در زبان اچتمل تصاویر را با کمک تگ <img> تعریف میکنند. تگ <img> از نوع تگهای خالی است، بدین معنا که فقط دارای یک یا چند شناسه و attribute بوده و دارای تگ انتهائی یا <img/> نیست.

مهمترین شناسه برای درج و تعریف یک تصویر src یا source نام دارد و مقدار این شناسه آدرس یا URL تصویر میباشد. تصاویری که مرورگر در یک صفحه وب نمایش میدهد میتوانند در همان دایرکتوری صفحه اچتمل، در دیگر دایرکتوریهای همان سایت و یا در فضای بیکران وب قرار داشته باشند.

شکل ساده درج یک تصویر:

<img src=”url”>

مقدار url آدرس اینترنتی تصویر میباشد و مثلا اگر تصویری که قرار است که در صفحه درج شود در همان دایرکتوری قرار دارد و نامش me.jpg ، کافی است که به جای url فقط نام تصویر یعنی me.jpg را بنویسید و اگر تصویر در سایتی دیکر قرار دارد url کامل آنرا بنویسید. مثلا تصویر لوگو سایت google.com دارای url ی برابر http://www.google.com/images/logo.gif است.در این url نام تصویر logo.gif بوده، در دایرکتوری images قرار داشته و روی وب سایت google.com قرار دارد.

شناسه های width و height در تگ img

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

Posted in اچ تی ام ال HTML, برنامه نویسی | No Comments »

فرمها ( Forms )

آذر ۴م, ۱۳۸۷

از طریق استفاده از عنصر <form> و چند تگ مرتبط قادر به دریافت اطلاعات از بازدیدکنندگان صفحاتتان و یا تبادل اطلاعات بین صفحات مختلف خواهید شد. با کمک این گروه از تگ ها قادر به نمایش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، رادیو باتونها (radio-buttons) و … شده و همچنین امکان گذاشتن دکمه های ارسال (submit button) و یا حذف (reset) را خواهید داشت. این فصل با شرح تگ های form و input و … به چگونگی ایجاد ارتباط با بازدیدکنندگان و گرفتن اطلاعات از آنها بصورت لاتین و یا فارسی خواهد پرداخت.

توجه داشته باشید که برای پردازش اطلاعات دریافتی از کاربر باید با یکی از زبانهای cgi از قبیل ASP، perl، PHP، CFM ، JSP یا Java آشنائی داشته باشید. مثالهای cgi مدرسه وب از ربان اسکریپت Perl استفاده میکنند.

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

درون تگ فرم گروه زیادی از عناصر و تگهای مختلف قابل استفاده هستند از قبیل عناصر ورود متن یک سطری(text fields)، عناصر ورود متنهای چند سطری (Textarea)، منوهای drop-down و radio buttons و …

تگ Inputبه عنوان پر مصرف ترین تگ مربوط به ورود اطلاعات باید از تگ <input> نام برد. در این تگ شناسه ای به نام type به تعیین نوع اطلاعات ورودی اختصاص دارد. مقادیر ممکن برای این شناسه به قرار زیرند:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضی از type های کاربردی خواهیم پرداخت:

ورودیهای متن (Text Fields) اگر میخواهید که بازدیدکننده اطلاعاتی از قبیل متن، اعداد و … را وارد کند از شناسه ای با مقدار “text” استفاده میشود.

کد اچتمل

نمایش توسط مرورگر

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

<form dir="rtl" >
نـــــــــــــــام:
<input type="text" name="firstname">
<br>
نام خانوادگی:
<input type="text" name="lastname">
</form>

توجه داشته باشید که تگ <form> چیزی را به نمایش نخواهد گذاشت بلکه تگهای درون آن توسط مرورگر نمایش داده خواهند شد. در مثال فارسی بالا به شناسه dir و مقدار rtl آن توجه داشته باشید.لازم به یادآوری است که اغلب مرورگرها در حالت پیش فرض برای ورودیهای متن اندازه ۲۰ کاراکتر را در نظر میگیرند و اگر میخواهید که اندازه پیش فرض ورودیهای متن را تغییر دهید باید از شناسه ای به نام size استفاده کنید.

ورودیهای Radio Buttons اگر میخواهید که بازدیدکننده گزینه ای را از بین چند گزینه محدود انتخاب کند، از مقدار “radio” برای شناسه type استفاده کنید:

کد اچتمل

نمایش توسط مرورگر

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

<form dir="rtl">
<input type="radio" name="sex" value="male"> مرد
<br>
<input type="radio" name="sex" value="female"> زن
</form>

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

ورودیهای Checkboxes اگر میخواهید که بازدیدکننده یک یا چند گزینه را از بین چند گزینه محدود انتخاب کند، از مقدار “checkbox” برای شناسه type استفاده کنید:

کد اچتمل

نمایش توسط مرورگر

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

<form dir="rtl">
<input type="checkbox" name="bike">
دوچرخه دارم
<br>
<input type="checkbox" name="car">
ماشین دارم
</form>

شناسه Action و دکمه Submit در فرمها ( Form’s Action Attribute & Submit Button)در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال یا Submit Button استفاده میشود و در اثر کلیک کاربر بروی این دکمه “Submit” ، اطلاعات درون فرم به فایلی دیگر ارسال خواهند شد. برای تعیین مقصد ارسال اطلاعات باید درون تگ form از شناسه ای به نام action استفاده کنید. مقدار شناسه action آدرس یا url فایلی است که به دریافت و سپس پردازش اطلاعات دریافتی خواهد پرداخت. معمولا فایلهای بخش action برنامه ها و اسکریپت هائی نوشته شده با ربانهای cgi مانند ASP، Perl ، PHP و … بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس پردازش آنها میباشد.

تعیین مقدار “submit” برای شناسه type سبب نمایش دکمه Submit یا ارسال خواهد گردید.

کد اچتمل

نمایش توسط مرورگر

<form name="input" action="form_action.cgi">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

<form name="input" action="form_action.cgi" dir="rtl">
نام کاربر
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

در مثال بالا در باکس ورودی متن، کلمه ای را وارد کرده و دکمه ارسال را کلیک کنید. مرورگر به محض کلیک دکمه ارسال، اطلاعات درون فرم را که در این مثال متنی ساده است به سمت فایلی که در شناسه action تعیین شده است ارسال کرده و در این مثال برنامه ای به زبان Perl با نام form_action.cgi در سمت سرور به ذخیره و سپس نمایش متنی خبری خواهد پرداخت.

ورود متن فارسی در عناصری مانند Text field یا Text area:

همانطور که در مثالهای بالا مشاهده کردید در مورد المانهای Text field و Textarea با کمک شناسه dir میتوان سمت و جهت ورود اطلاعات را “از راست به چپ” تعیین کنید. ولی اگر کاربری ویندوز فارسی نداشته باشد، از کامپیوترهای مکینتاش استفاده کند و یا سیستمش را فارسی نکرده باشد قادر به ورود اطلاعات به زبان فارسی نخواهد بود و نویسه های تایپ شده لاتین خواهند بود!، در اینگونه موارد چه باید کرد؟
معمولا برنامه نویسان وب برای فراهم ساختن امکان ورود متن فارسی از یکی از دو روش زیر استفاده میکنند:

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

استفاده از زبان جاوا اسکریپت و با این عیب که سورس و کد اصلی JavaScript قابل مشاهده و استفاده توسط دیگران است!

تگهای فرم

Start Tag	Purpose	کاربرد
<form>	Defines a form for user input	تعریف فرم ورود اطلاعات

<input>	Defines an input field	تعریف ورودی از نوع Input

<textarea>	Defines a text-area (a multi-line text input control)	تعریف ورودی متن چند سطری یا text-area

<label>	Defines a label to a control	تعریف برچسب یا label

<fieldset>	Defines a fieldset	تعریف fieldset

<legend>	Defines a caption for a fieldset	تعریف عنوان برای fieldset ها

<select>	Defines a selectable list (a drop-down box)	تعریف فهرستهای انتخابی یا drop-down box

<optgroup>	Defines an option group	تعریف option group ها

<option>	Defines an option in the drop-down box	تعریف گزینه ای از drop-down box ها

<button>	Defines a push button	تعریف دکمه فشاری، متفاوت با button تگ input

Posted in اچ تی ام ال HTML, برنامه نویسی | No Comments »

فهرستها ( Lists )

آذر ۴م, ۱۳۸۷

این درس شما را با نحوه نمایش انواع فهرستها شامل فهرستهای مرتب(ordered) ، نامرتب(unordered) و فهرستهای تعریفی(definition lists) و تگ های مربوطه یعنی li ، ol ، ul ، dl ، dt و dd آشنا خواهد کرد.

فهرستهای نامرتب(unordered list)فهرستهائی هستند از یک یا چند قلم اطلاعات که معمولا با دایرهای کوچک و سیاه رنگ در شروع نمایش داده میشوند. یک فهرست از نوع نامرتب با تگ <ul> شروع شده و هر رقم اطلاعات با تگ <li> مشخص میگردد.

HTML code

نمایش توسط مرورگر

<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>

Red
Blue
Green

<ul dir="rtl" >
<li>قهوه</li>
<li>شیر</li>
<li>چای</li>
</ul>

قهوه
شیر
چای

داخل تگهای <li> میتوانید از پاراگرافها، تگهای br ، تصاویر و حتی فهرستهای دیگر استفاده کنید. به شناسه dir در مثال بالا توجه کنید، امکان تعیین سمت و جهت نمایش متون در تمامی تگهای مربوط به فهرستها ممکن میباشد.

فهرستهای مرتب(ordered list)این نوع فهرست بسیار شبیه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمایش اقلام اطلاعاتی از اعداد به جای دایره های کوچک سیاه رنگ استفاده میکند. یک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهای نامرتب هر رقم اطلاعات با تگ <li> مشخص میگردد.

HTML code

نمایش توسط مرورگر

<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>

Red
Blue
Green

<ol dir="rtl" >
<li>قهوه</li>
<li>شیر</li>
<li>چای</li>
</ol>

قهوه
شیر
چای

فهرستهای تعریفی(definition list)فهرست تعریفی فهرستی است از اصطلاح ها و تشریح و توصیف آنها.

فهرستهای تعریفی با <dl> شروع شده و هر ذوج اصطلاح و تعریف مربوط به آن با تگهای <dt> و <dd> تعریف میشوند.

HTML code

نمایش توسط مرورگر

<dl>
<dt>HTTP</dt>
<dd>Hypertext Transfer Protocol</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
<dt>IP</dt>
<dd>Internet Protocol</dd>
</dl>

HTTP: Hypertext Transfer Protocol
FTP: File Transfer Protocol
IP: Internet Protocol

<dl dir="rtl"  >
<dt >مقدمه</dt>
<dd>خلاصه ای از مقدمه</dd>
<dt>فصل ۲</dt>
<dd>خلاصه ای از فصل ۱</dd>
<dt>فصل ۲</dt>
<dd>خلاصه ای از فصل ۲</dd>
</dl>

مقدمه: خلاصه ای از مقدمه
فصل ۱: خلاصه ای از فصل ۱
فصل ۲: خلاصه ای از فصل ۲

داخل تگهای تشریح یعنی <dd> میتوانید از پاراگرافها، تگهای br ، تصاویر و حتی فهرستهای دیگر استفاده کنید. به شناسه dir در مثال بالا توجه کنید، امکان تعیین سمت و جهت نمایش متون در تمامی تگهای مربوط به فهرستها ممکن میباشد.

تگهای فهرست

Start Tag	Purpose	کاربرد
<ol>	Defines an ordered list	تعریف فهرستهای مرتب

<ul>	Defines an unordered list	تعریف فهرستهای نامرتب

<li>	Defines a list item	تعریف یک آیتم و قلم از یک فهرست

<dl>	Defines a definition list	تعریف فهرستهای تعریفی

<dt>	Defines a definition term	تعریف اصطلاح در فهرستهای تعریفی

<dd>	Defines a definition description	تعریف معنی و شرح اصطلاح در فهرستهای تعریفی

Posted in اچ تی ام ال HTML, برنامه نویسی | No Comments »

فریمها ( Frames )

آذر ۴م, ۱۳۸۷

با کمک فریمها قادر به نمایش همزمان بیش از یک صفحه وب در پنجره مرورگر خواهید شد. در این درس با مفاهیم فریم ( Frame ) و تگ های مربوطه مخصوصا تگهای Frame و Frameset آشنا خواهید شد.

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

معایب استفاده از فریمها:

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

تگ فریم ست (Frameset)

تگ <frameset> به تعریف فریمها و تقسیم بندی پنجره مرورگر میپردازد.
هر تگ <frameset> مجموعه ای از ردیفها یا ستونها را تعریف میکند.
داخل هر فریم میتواند frameset دیگری قرار دهید.
با کمک شناسه های rows و cols ابعاد و نسبت هر فریم تعیین میگردد.
تگ <frameset> درون تگهای <html> و <html/> قرار میگیرد.(نیازی به قید تگ body هنگام معرفی یک frameset نیست.)

تگ فریم (Frame)

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

مثال زیر مجموعه ای از فریمها را که شامل دو فریم عمودی میباشند معرفی میکند. از سمت چپ فریم اول ۷۵ درصد و فریم دوم ۲۵ درصد از عرض پنجره مرورگر را به خود نمایش خواهند داد. در ادامه تعریف محتویات هر فریم، درون فریم اول فایل “frame_left.html” و درون فریم دوم فایل “frame_right.html” نمایش داده خواهد شد.

<html>
<frameset cols="75%,25%">
   <frame src="frame_left.html">
   <frame src="frame_right.html">
</frameset>
</html>

برای نمایش مثال بالا به سه فایل نیاز دارید، frame_left.html ،frame_right.html و فایل کد اچتمل بالا.

شناسه های cols و rows در تگ frameset

شناسه	مقدار شناسه	کارکرد
cols	عرض پنجره بر اساس پیکسل، درصد یا علامت *	تعیین تعداد و اندازه ستونها در فریم ست

rows	عرض پنجره بر اساس پیکسل، درصد یا علامت *	تعیین تعداد و اندازه ردیفها در فریم ست

مثالهای زیر را در نظر بگیرید:

در مثال دوم عرض پنجره با مقادیر درصدی به فریمها اختصاص یافته است.
در مورد شناسه rows دقیقا قراردادهای بالا برقرارند.

نکات کاربردی:* اگر فریمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغییر اندازه (resize) خواهند بود و برای جلوگیری از تغییر اندازه فریمها توسط کاربر باید از شناسه ای به نام noresize در داخل تگ <frame> استفاده شود. در این مثال noresize نمیتوانید که فریمها را تغییر اندازه بدهید.

* اگر میخواهید که فریمها scroll نشوند (بالا و پایین بردن صفحه توسط ماوس) باید در تگ frame مقدار شناسه scrolling را برابر “no” قرار دهید. (مقادیر ممکن “yes” ، “no” و “auto” میباشند.) در این مثال scrolling صفحات قابل scroll نیستند.

* اگر میخواهید که مرز بین فریمها نمایش داده نشوند باید در تگ frame مقدار شناسه frameborder را برابر “۰″ قرار دهید. (مثال frameborder )

* درصد بسیار کمی از مرورگرها از تگهای مربوط به frame و frameset پشتیبانی نمیکنند. برای این موارد باید از تگ <noframes> جهت نمایش صفحه جایگزین استفاده شود.

تگ های فریم

مثال ۲

<html>
<frameset cols="25%,50%,25%">
   <frame src="frame_3.html">
   <frame src="frame_2.html">
   <frame src="frame_1.html">
</frameset>
</html>

<html>
<frameset cols="*,200">
   <frame src="frame_2.html">
   <frame src="frame_1.html">
</frameset>
</html>

نمایش توسط مرورگر

Start Tag	Purpose	کاربرد
<frameset>	Defines a set of frames	تعریف مجموعه ای از فریم ها

<frame>	Defines a sub window (a frame)	تعریف یک فریم

<noframes>	Defines a noframe section for browsers that do not handle frames	تعریف جایگزین برای مرورگرهائی که از فریم ها پشتیبانی نمیکنند.

<iframe>	Defines an inline sub window (frame)	تعریف فریم های درجا (inline)

Posted in اچ تی ام ال HTML, برنامه نویسی | No Comments »

جداول ( Tables)

آذر ۴م, ۱۳۸۷

در این درس با المان جدول ( Table ) ، سلولها یا خانه ها، مرز و border در جداول و تگ های مربوطه مخصوصا تگهای TABLE ، TD , TR آشنا خواهید شد. توجه داشته باشید که جداول یکی از مهمترین المانهای آرایش و layout میباشند.

جدولهابرای تعریف جداول از تگ <table> استفاده میشود. یک جدول از یک یا چند سطر که با کمک تگ <tr> تعریف میشوند، تشکیل میشود. هر ردیف یا row از یک یا چند سلول، خانه یا cell تشکیل گردیده که با کمک تگ <td> ایجاد میشوند. نام های td و tr به ترتیب خلاصه شده table row و table data میباشند.
محتوی یک سلول میتواند متن، تصویر، فهرستها، جداول دیگر، پاراگرافها و … باشد.

مثال زیر جدولی است با دو سطر و سه ستون :

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

نمایش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<td>ردیف ۱، سلول ۱</td>
<td>ردیف ۱، سلول ۲</td>
<td>ردیف ۱، سلول ۳</td>
</tr>
<tr>
<td>ردیف ۲، سلول ۱</td>
<td>ردیف ۲، سلول ۲</td>
<td>ردیف ۲، سلول ۳</td>
</tr>
</table>

ردیف ۱، سلول ۱	ردیف ۱، سلول ۲	ردیف ۱، سلول ۳
ردیف ۲، سلول ۱	ردیف ۲، سلول ۲	ردیف ۲، سلول ۳

جدولها و شناسه border و dir :

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

در مثال بالا شناسه dir یا direction و مقدار rtl برای آن، سبب تعیین نمایش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعریف شده است به تمامی سلولهای جدول اعمال خواهذ شد.

ساده ترین جدول ممکن در اچتمل، جدولی است با یک سطر و یک ستون!

سرستون در جداول (Headings)سرستونها در جداول با کمک تگ <th> تعریف میشوند. مثال زیر نحوه تعریف سرستونها را در جداول نمایش میدهد:

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

نمایش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<th>سرستون ا</th>
<th>سرستون ۲</th>
<th>سرستون ۳</th>
</tr>
<tr>
<td>ردیف ۱، سلول ۱</td>
<td>ردیف ۱، سلول ۲</td>
<td>ردیف ۱، سلول ۳</td>
</tr>
<tr>
<td>ردیف ۲، سلول ۱</td>
<td>ردیف ۲، سلول ۲</td>
<td>ردیف ۲، سلول ۳</td>
</tr>
</table>

سرستون ا	سرستون ۲	سرستون ۳
ردیف ۱، سلول ۱	ردیف ۱، سلول ۲	ردیف ۱، سلول ۳
ردیف ۲، سلول ۱	ردیف ۲، سلول ۲	ردیف ۲، سلول ۳

همانطوریکه مشاهده میکنید سر ستونها مانند سلولهای معمولی جداول تعریف میشوند و فقط به جای td از th استفاده شده و لی در نمایش محتوای سر ستونها bold یا توپر نمایش داده خواهند شد.

خانه های خالی در جداول (Empty Cells)اگر محتوای خانه ای از یک جدول خالی باشد چه چیزی باید نمایش داده شود؟ بسته به مرورگری که استفاده میکنید نتیجه نمایش متفاوت است و مثلا در مثال زیر خانه خالی جدول بدون مرز نمایش داده خواهد شد:

کد اچتمل جدولی با دو سطر و دو ستون

نمایش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<td>ردیف ۱، سلول ۱</td>
<td>ردیف ۱، سلول ۲</td>
</tr>
<tr>
<td>ردیف ۲، سلول ۱</td>
<td></td>
</tr>
</table>

ردیف ۱، سلول ۱	ردیف ۱، سلول ۲
ردیف ۲، سلول ۱

در اینگونه موارد برای رفع مشکل کافی است که از non-breaking space ( ) یا همان نویسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زیر نمایش خواهد داد:

کد اچتمل جدولی با دو سطر و دو ستون

نمایش جدول روبرو توسط مرورگر

<table border="1" dir="rtl">
<tr>
<td>ردیف ۱، سلول ۱</td>
<td>ردیف ۱، سلول ۲</td>
</tr>
<tr>
<td>ردیف ۲، سلول ۱</td>
<td>&nbsp;</td>
</tr>
</table>

ردیف ۱، سلول ۱	ردیف ۱، سلول ۲
ردیف ۲، سلول ۱

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

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

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

شناسه dir قابل استفاده در بسیاری از تگها ( مثلا table ، tr ، td ، th ) میباشد. با کمک شناسه dir و مقدار rtl برای آن، جهت نمایش متون فارسی از “راست به چپ” تعیین میگردد. توجه داشته باشید که مقدار شناسه dir به صورت موروثی از table به tr و th و از tr و th به td خواهد رسید.مثلا برای تعیین مقدار rtl برای تمامی خانه های یک جدول کافی است که فقط شناسه مزبور را در تگ table قید کنید و نیازی به قید آن در تمامی خانه های جدول نیست. البته میتوانید که در مورد یک ردیف خاص و یا یک خانه خاص شناسه dir را موردی تعیین کنید.

تگهای جداول

عضويت جهت دريافت آخرین مقالات پايگاه IDN

آدرس ايميل شما:

ورود به انجمنهای IDN

موضوعات

آمار بازديد

تعداد بازديدکنندگان امروز 175 نفر
تعداد بازديدکنندگان در حال حاضر 0 نفر

نظر سنجی

نظر شما درباره راه اندازی سرویس درخواست مقاله با پرداخت هزینه چیست؟
- بد
- خوب
- عالی
نتيجه
Loading ...

آرشیو ...

نمایش آخرین مقالات IDN
در سایت شما

کافی است کد زیر را در صفحه سایت خود قرار دهید

<p style="margin-top:10px; margin-bottom:0; padding-bottom:0; text-align:center; line-height:0"><a target="_blank" href="http://feeds.feedburner.com/~r/IranDevelopersNetwork/~6/1"><img src="http://feeds.feedburner.com/IranDevelopersNetwork.1.gif" alt="Iran Developers Network" style="border:0"></a></p><p style="margin-top:5px; padding-top:0; font-size:x-small; text-align:center"></p>

مانند نمونه زير
نمایش 5 مقاله جدید در سایت شما

کافی است کد زیر را در صفحه سایت خود قرار دهید

<script src="http://feeds.feedburner.com/IranDevelopersNetwork?format=sigpro" type="text/javascript" ></script>

پیوندها

Start Tag	Purpose	کاربرد
<table>	Defines a table	تعریف جدول

<th>	Defines a table header	تعریف سرستون در جداول

<tr>	Defines a table row	تعریف ردیف ها در جداول

<td>	Defines a table cell	تعریف سلول یا خانه های یک جدول

<caption>	Defines a table caption	تعریف عنوان جدول

بایگانی نویسنده

چگونگی استفاده از استایل شیتها:

۱)استایل شیتهای خارجی (external style sheet) :

2)استایل شیتهای داخلی (Internal Style Sheet) :

3)استایل شیتهای درجا (Inline Styles) :

تگ های استایل

تگ <font>

شناسه های تگ <font>

دیگر از تگ <font> استفاده نکنید!

روش صحیح تعیین نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:

تگهای جداول

عضويت جهت دريافت آخرین مقالات پايگاه IDN

موضوعات

آمار بازديد

نظر سنجی

نمایش آخرین مقالات IDN در سایت شما

مانند نمونه زير نمایش 5 مقاله جدید در سایت شما

پیوندها

نمایش آخرین مقالات IDN
در سایت شما

مانند نمونه زير
نمایش 5 مقاله جدید در سایت شما