htmlآموزش

Simplified HTML Tutorial

posted in: Educationals, Teaching programming | 429

Simplified HTML Tutorial

Today, given the advancement of science, the Internet can be the best and easiest to advance.

Obviously, to enter the vast Internet world,

the website is a word that maybe more than any other word can be heard.

In a preliminary look at the Web, perhaps the first question that comes to mind is: how to build our first web page ?

مقدمه

در این مقاله مفاهیم اولیه ساخت صفحات وب را با زبان HTML فرا خواهیم گرفت.

HTML یک زبان منطقی نیست بلکه یک زبان نشانه گذاری است

که با استفاده از تگ ها ( TAG یا نشانه ) به مرورگر وب

مانند Internet Explorer ( یا Firefox یا Google Chrome ) نحوه نمایش متن و فرا متن را بیان می کند.

شکل کلی نوشتن یک تگ به صورت زیر است:

<تگ انتها/>محتویات<تگ ابتدا>

مثال:

<TITLE>سلام</TITLE>

برای نوشتن دستورات زبان HTML و همچنین ویرایش آنها از ویرایشگر متنی Notepad می توان استفاده کرد.

برای دسترسی به برنامه Notepad در ویندوز به آدرس زیر مراجعه کنید:

Start Menu/All programs/Accessories/Notepad

یا

Start Menu/run/”Type Notepad and press Enter”

یا

“Press Windows+R”/run/”Type Notepad and press Enter”

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

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

اما در کلیه نسخه های XP، ویستا و ویندوز 7 از روش سوم می توان استفاده کرد.

نکته: برای درک بهتر مفاهیم این مقاله توصیه می شود

هر مثال را در Notepad نوشته و اجرای آن را مشاهده نمایید.

پس از نوشتن مثال از منوی file این برنامه گزینه ی Save as را انتخاب کرده

و در مسیر مورد نظرتان فایل را با پسوند htm یا html ذخیره کنید.

همچنین توجه داشته باشید که جملات فارسی در Notepad پس از ذخیره به صورت علامت سوال نمایش داده می شوند،

به این دلیل که در صفحه ذخیره سازی گزینه Encoding به صورت پیش فرض در حالت ANSI قرار گرفته است

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

برای جلوگیری از این امر باید Encoding را در حالت UTF-8 قرار دهید و سپس فایل را ذخیره کنید.

پس از ساخت فایلی مثل web1.html کافی است بر روی فایل ساخته شده دوبار کلیک کنید تا برنامه با مرورگر پیش فرض کامپیوتر شما اجرا شود.

HTML

زبان HTML سرنام عبارت Hyper Text Markup Language می باشد که به منظور توصیف یک صفحه وب کاربرد دارد.

HTML از تعداد زیادی تگ تشکیل شده است که هر کدام دارای ویژگی های منحصربه فرد خود می باشند،

تمامی تگ ها بین دو کاراکتر < و > قرار دارند و مهمترین تگ که در برگیرنده تمامی تگ ها است، تگ <HTML> است.

این تگ در ابتدای صفحه باز شده و در انتهای صفحه نیز بسته می شود.

تگ بسته به صورت <HTML/> می باشد.

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

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

هر صفحه HTML شامل دو قسمت اصلی سرصفحه و بدنه است.

سرصفحه با تگ <HEAD> آغاز شده و با <HEAD/> خاتمه می یابد.

معمول ترین تگی که در تگ HEAD استفاده می شود تگ <TITLE>است که عنوان صفحه در آن نمایش داده می شود.

همچنین بدنه صفحه نیز با تگ <BODY> آغاز و با تگ <BODY/> خاتمه می یابد.

مانند مثال زیر:

<HTML>
<HEAD>
<TITLE>به اولین صفحه وب من خوش آمدید</TITLE>
</HEAD>
<BODY>
سلام بر دنیا!
</BODY>
</HTML>

نکته: تگ ها به دو صورت باپایان و بی پایان در HTML به کار برده می شود،

می توان از تگ باپایان تگ HEAD را نام برد که با <HEAD> باز شده و با <HEAD/> بسته می شود،

و همچنین می توان از تگ بسته به <BR> اشاره نمود،

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

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

و بعد از تگ TITLE عنوان مورد نظر را نوشته و سپس تگ ها را بسته و ذخیره می نمایید.

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

نکته: توجه داشته باشید یک تگ می تواند صفر، یک و یا بیشتر ویژگی ( Attribute ) داشته باشد،

این ویژگی ها به صورت زیر به تگ افزوده می شوند.

<tag name att1=”value1″ att2=”value2″>

ترتیب قرار گرفتن ویژگی ها در اجرای آن ها تاثیری ندارد.

پاراگراف ( Paragraph )

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

به منظور نمایش یک پاراگراف از تگ <P> استفاده می کنیم

که با تگ <P/> نیز بسته می شود.

یکی از صفات تگ <P> صفت ALIGN است که برای تراز کردن متن از آن استفاده می شود،

مانند مثال زیر:

<HTML>
<BODY>
<P ALIGN=”left”>این صفحه اولین صفحه وب من است</P>
<P ALIGN=”center”>آموزش گام به گام طراحی صفحات وب</P>
</BODY>
</HTML>

این صفحه اولین صفحه وب من است

آموزش گام به گام طراحی صفحات وب

توضیح برنامه: در این برنامه مشاهده می کنید که دو پاراگراف داریم

که هر کدام دارای مقدار ALIGN متفاوتی می باشند

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

مقادیر ALIGN می تواند هر یک از حالت زیر باشد:

Left: چپ چین
right: راست چین
center: وسط چین
Justify: تراز از چپ و راست

نکته: مرورگرها به صورت پیش فرض محتویات فایل HTML را چپ چین در نظر می گیرند،

شما با صفت ALIGN می توانید جهت پیش فرض را تغییر دهید.

تمرین 2- برنامه ای بنویسید که شامل دو پاراگراف باشد

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

ایجاد یک سطر جدید ( Break Line )

معمولا در هنگام تایپ از فاصله و Enter به منظور رفتن به خط بعد استفاده می شود

اما هنگام مشاهده در مرورگر، زبان HTML این فاصله ها و enter را نادیده گرفته

و تمامی متن در یک سطر نمایش داده می شود.

<HTML>
<BODY>
این کلمات
در یک خط
نمایش داده می شوند
</BODY>
</HTML>

این کلمات در یک خط نمایش داده می شوند

توضیح برنامه: همانطور که گفته شد زبان HTML فواصل و enter را نادیده می گیرد.

همان طور که مشاهده می کنید با اجرای این برنامه تمام متن در یک سطر چاپ می شود.

برای جلوگیری از این موضوع و نمایش متن به صورت دلخواه از تگ <BR> استفاده می کنیم.

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

همچنین برای ایجاد بیش از یک فاصله بین کلمات در یک جمله نیز از تگ <PRE> استفاده می کنیم

که با تگ <PRE/> بسته می شود.

می توان به جای استفاده از تگ <PRE> از عبارت ;nbsp& ( & خوانده می شود Ampersand ) نیز استفاده نمود.

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

همانند مثال زیر:

<HTML>
<BODY>
www.Firefars.com
:آدرس ایمیل شرکت امیدرسانه پاسارگاد
<PRE>       شرکت امیدرسانه       پارسارگاد </PRE>
<P>   شرکت امیدرسانه       پارسارگاد     </P>
</BODY>
</HTML>

www.Firefars.com :آدرس ایمیل شرکت امیدرسانه پاسارگاد

شرکت امیدرسانه   پارسارگاد

شرکت امیدرسانه پارسارگاد

توضیح برنامه: در این برنامه پس از استفاده از تگ های مربوطه مشاهده می شود

که متن ها به همان صورت نوشته شده نمایش داده می شود.

اما تگ P فاصله ها را نادیده گرفته و تمامی متن را در کنار هم و تنها با یک فاصله نمایش می دهد.

تمرین 3 برنامه ای بنویسید که بین دو کلمه ی امیدرسانه و پاسارگاد سه فاصله باشد،

و قبل از کلمه ی فایرفارس دو فاصله باشد.

نکته: می توان از تگ <PRE> بدون استفاده از تگ <TABLE>جدول ایجاد نمود( در ادامه با این تگ آشنا خواهید شد. )،

تنها کافیست متن را با همان فواصل مورد نظر در کد برنامه( Node pad ) تایپ نمود،

همانند مثال زیر:

<HTML>
<BODY>
<PRE>
نام    نام خانوادگی     سن
محمد           نجفی      21
کامران         رفعتی      26
</PRE>
</BODY>
</HTML>

نام    نام خانوادگی     سن

محمد         جفی      21

کامران        رفعتی      26

توضیح برنامه: نوشتن این دستورات نیز باعث می شود تا اطلاعات وارد شده به صورت جدول در خروجی نیز به صورت جدول نمایش داده شود.

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

ایجاد سرتیترها ( Head )

همان طور که می دانیم سرتیترها در ابتدای هر متن به صورت درشت (bold) نمایش داده می شود

و کاربر می تواند با مشاهده ی تیترها به مقصد مورد نظر خود سریعتر دست یابد.

بدین منظور در زبان HTML برای نوشتن تیترها از تگ <H> استفاده می شود،

که دارای 6 سطح می باشد ( H1,H2,H3,H4,H5,H6 ) .

تگ <H1> بزرگترین فونت را دارا می باشد و کوچکترین فونت آن مربوط به تگ <H6> می باشد

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

همانند مثال زیر:

<HTML>
<BODY>
<H1>خوش آمدید </H1>
<H2> خوش آمدید </H2>
<H3> خوش آمدید </H3>
<H4> خوش آمدید </H4>
<H5> خوش آمدید </H5>
<H6> خوش آمدید </H6>
</BODY>
</HTML>

خوش آمدید

خوش آمدید

خوش آمدید

خوش آمدید

خوش آمدید

خوش آمدید

نکته1 محتوای تگ های سرتیتر، به ترتیب از شماره کوچک به بزرگ برای موتورهای جستجو ( مانند گوگل ) بیشترین ارزش را دارد.

به عنوان مثال آنچه در تگ <H1> می آید، توسط ربات های موتورهای جستجو به عنوان یک مطلب با ارزش در نظر گرفته می شود.

توجه داشته باشید با ویژگی ALIGN نیز می توانید جهت نمایش متن را در این تگ تغییر دهید.

تمرین 5  برنامه ای بنویسید که 6 سرتیتر داشته باشد، H1, H3 و H5 آن به صورت وسط چین و H2 آن به صورت چپ چین باشد و بقیه به صورت راست چین باشد؟

توضیحات ( Comment )

برنامه نویسان برای درج توضیحات یا نکاتی که تمایل ندارند در خروجی برنامه ( مرورگر ) نمایش داده شود،

اصطلاحا آن را به شکل توضیحات می نویسند. از این رو در HTML توضیحات را بین <– و –!> قرار می دهیم.

<HTML>
<BODY>
<!– این جدول مشخصات است –>
<PRE>
نام    نام خانوادگی     سن
محمد           نجفی      21
کامران         رفعتی      26
</PRE>
</BODY>
</HTML>

نام    نام خانوادگی     سن

محمد         جفی      21

کامران        رفعتی      26

ا

توصیحات: هنگام اجرای برنامه در مرورگر جمله ی ( این جدول مشخصات است ) نمایش داده نمی شود اما در کد برنامه مشاهده می شود.

درج کاراکتر

برای اینکه در صفحه ی وب خود کاراکترهای خاصی را درج نماییم،

می توان کد اسکی (Ascii) آن را نوشت به این صورت که ابتدا ;?#& میگذاریم و به جای ؟ کد اسکی کاراکتر مورد نظر را می نویسیم.

مثلا علامت copy write دارای کد اسکی 169 می باشد که جای ؟ جایگزین می شود.

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

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

نام

HTML کد

نتیجه

Non-breaking space

&nbsp;

[ فاصله خالی یا Space]

Less-than

&lt;

<

Greater-than

&gt;

>

Ampersand

&amp;

&

Copyright

&copy;

©

Trademark

&reg;

®

Cent

&cent;

¢

Degree sign

&deg;

°

double-less than

&laquo;

«

Micron

&micro;

µ

Midline dot

&middot;

Negation, continuation line

&not;

¬

Paragraph

&para;

Plus/Minus

&plusmn;

±

British Pound

&pound;

£

double greater than

&raquo;

»

Section

&&sect;

§

Yen

&yen;

¥

مانند مثال زیر:

<HTML>
<BODY>
<P ALIGN=”left” >&#169این صفحه اولین صفحه وب من است</P>
<P ALIGN=”center”>&copyبرای آموزش به سایت فایرفارس رفتم</P>
</BODY>
</HTML>

©این صفحه اولین صفحه وب من است

©برای آموزش به سایت فایرفارس رفتم

سبک فونت ( Font Style )

برای تعیین سبک فونت در زبان HTML، تگ های خاصی در نظر گرفته شده است

که شامل BOLD, ITALIC, UNDERLINE, STRIKOUT می باشد.
معمولا برای متمایز کردن بخشی از متن با سایر بخش ها از این تگ ها استفاده می شود.

شیوه کار به این صورت است که:
BOLD ( بزرگ نمایی متن ): متن باید بین <B> و <B/> قرار گیرد.
ITALIC ( نمایش متن مورب ): متن باید بین<I> و <I/> قرار گیرد.
UNDERLINE ( نمایش متن زیر خط دار ): متن باید بین<U> و <U/> قرار گیرد.
STRIKEOUT ( نمایش متن خط خورده ): متن باید بین<STRIKE> و <STRIKE/> قرار گیرد.

همانند مثال زیر:

<HTML>
<BODY>
<B>نمایش متن به ضخیم </B>
<I>نمایش متن مورب </I>
<U>نمایش متن زیرخط دار </U>
<STRIKE>نمایش متن خط خورده </STRIKE>
</BODY>
</HTML>

نمایش متن به ضخیم
نمایش متن مورب
نمایش متن زیرخط دار
نمایش متن خط خورده

توضیح برنامه: در این برنامه خطوط نمایش داده شده به ترتیب، ضخیم، مورب، زیر خط دار و خط خورده می باشند.

تمرین 7 برنامه ای بنویسید که شامل 3 خط باشد

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

زیر نویس – بالا نویس کردن متن ( Sub script, Super script )

هدف از زیر نویس یا بالا نویس کردن متن، همان اندیس گذاری یا توان گذاری است.

متن زیر نویس کمی پایین تر از متن اصلی و متن بالا نویس کمی بالاتر از متن اصلی قرار می گیرد.

توجه داشته باشید که برای زیر نویس کردن متن، آن را بین دو تگ <SUB> و <SUB/> قرار می دهیم.

همچنین برای بالا نویس شدن آن، از تگ <SUP> و <SUP/> استفاده می کنیم.

مانند:

<HTML>
<BODY>
<P>این یک متن<SUP>بالا نویس </SUP>است</P>
<P>این یک متن<SUB>زیر نویس </SUB>است</P>
</BODY>
</HTML>

این یک متنبالا نویس است

این یک متنزیر نویس است

توضیح برنامه: همانگونه که می بینید <SUB> و <SUP> در تگ <P> قرار گرفته شده اند.

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

تمرین 8 برنامه ای بنویسید که سه سطر رانمایش دهد.

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

تغییر نوع فونت ( Font Type )

برای تغییر فونت متن در HTML از تگ <FONT> استفاده می شود.

برای این منظور ویژگی FACE را برابر با نام فونت مورد نظرمان قرار داده

و با تگ <FONT/> به دستور خاتمه می دهیم.

همانند مثال زیر:

<HTML>
<BODY>
<P><FONT FACE=”Arial”> Arialمتن با فونت</FONT></P>
<P><FONT FACE=”tahoma”> tahomaمتن با فونت</FONT></P>
</BODY>
</HTML>

Arialمتن با فونت

tahomaمتن با فونت

توضیح برنامه: همانند مثال قبل این تگ را نیز در تگ P استفاده کردیم

که پاراگراف اول متن با فونت Arial و پاراگراف دوم متن با فونت Tahoma نمایش داده می شود.

تمرین 9 برنامه ای بنویسید که شامل سه پاراگراف باشد، پاراگراف اول با فونت zar و پاراگراف دوم با فونت serif باشد.

اندازه ی فونت ( Font Size )

اندازه ی فونت یکی از موارد مهم در نمایش متن است.

از این رو با توجه به نوع متن، برای خوانایی بهتر آن اندازه ها را تنظیم می کنیم.

برای تغییر اندازه ی یک پاراگراف از تگ FONT، ویژگی SIZE آن را تغییر می دهیم.

رنج این تغییرات اعداد 1 تا 7 است که عدد 1 نشان دهنده ی کوچکترین سایز و عدد 7 نماد بزرگترین سایز می باشد.

همانند مثال :

<HTML>
<BODY>
<P><FONT SIZE=”3″>پاراگراف با فونت 3</FONT></P>
</BODY>
</HTML>

پاراگراف با فونت 3

توضیح برنامه: در این برنامه پاراگراف را به اندازه مورد نظرمان تعیین کردیم

که مطالب آن با فونت 3 نمایش داده می شوند .

تمرین 10 دو برنامه بنویسید که در برنامه اول فونت 6 برای تمامی متون در نظر گرفته شود

و در برنامه ی دوم دارای دو پاراگراف باشد،

پاراگراف اول با فونت 5 و پاراگراف دوم با فونت 2نمایش داده شوند.

رنگ فونت ( Font Color )

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

انتخاب رنگ مناسب باعث جذابیت بیشتر وب سایت می شود.

در زبان HTML برای تغییر رنگ متن از دو روش می توان استفاده کرد:
روش اول:  اگر بخواهیم رنگ کل متن را تغییر دهیم در تگ <BODY> از ویژگی TEXT استفاده می کنیم.
روش دوم: اگر بخواهیم رنگ قسمتی از متن را تغییر دهیم در تگ<FONT> از ویژگی COLOR استفاده می کنیم.

البته به این نکته توجه داشته باشید که معادل هگزادسیمال ( Hexadecimal ) رنگ ها نوشته می شود.

نکته: هگزادسیمال یک رنگ، معادل شانزده بیتی آن است.

شکل استاندارد این مدل نمایش رنگ، #RGB ،می باشد

که به ترتیب R بیان کننده ی رنگ قرمز (RED) ،

G  بیان کننده ی رنگ سبز (GREEN)

و B بیان کننده ی رنگ آبی (BLUE) است.

به جای هر یک از این حروف یک عدد دو رقمی از 0 تا F می نشیند.

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

مقدار هگزادسیمال

نام رنگ

مقدار هگزادسیمال

نام رنگ

#00FFFF

Aqua

#000000

Black

#0000FF

Blue

#FF00FF

Fuchsia

#808080

Gray

#008000

Green

#00FF00

Lime

#800000

Maroon

#000080

Navy

#808000

Olive

#800080

Purple

#FF0000

red

#c0c0c0

Silver

#008080

Teal

#FFFFFF

White

#FFFF00

Yellow

<HTML>
<BODY TEXT=”Blue”>
<P><FONT COLOR=”#FF0000″>متن با رنگ قرمز</FONT></P>
دیگر متون به رنگ پیش فرض آبی است
</BODY>
</HTML>

متن با رنگ قرمز

دیگر متون به رنگ پیش فرض آبی است

توضیح برنامه: در برنامه فوق رنگ تمامی متنون آبی می باشد اما متن قرار گرفته شده

در <P> با توجه با تغییرات داده شده، به صورت قرمز نمایش داده می شود.

(تنظیمات هر تگ نسبت به تنظیمات عمومی، اولویت دارد. )

تمرین 11برنامه ای بنویسید که دارای 2 پاراگراف باشد.

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

(برای پاراگراف اول از معادل هگزا دسیمال آن استفاده کنید.)

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

تعیین رنگ پس زمینه صفحه ( Back Ground Color )

اگر بخواهیم رنگ پس زمینه ی صفحه ی وب خود را تغییر دهیم،

در تگ <BODY> از ویژگی BGCOLOR استفاده می کنیم.

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

<HTML>
<BODY TEXT=”WHITE” BGCOLOR=”BLUE”>
تمامی متن سفید و پس زمینه به رنگ آبی است
</BODY>
</HTML>

تمامی متن سفید و پس زمینه به رنگ آبی است

توضیح برنامه: در این برنامه صفحه به رنگ آبی و متن ها به رنگ سفید نمایش داده می شود.
تمرین 12 برنامه ای بنویسید که در آن رنگ پس زمینه ی صفحه قرمز و متن آن به رنگ سیاه نمایش داده شود.

تنظیم اندازه حاشیه صفحه ( Margin )

با تنظیم حاشیه صفحات می توانید فاصله متن را از چپ و راست،

بالا و پایین تنظیم نموده و جلوه ی بهتری به صفحه بدهید.

معمولا در مرورگرها مقدار پیش فرض 10 پیکسل می باشد.

برای تنظیم حاشیه در تگ <BODY> از ویژگی های زیر استفاده می شود:
TOPMARGIN: فاصله از بالای صفحه
BOTTOMMARGIN: فاصله از پایین صفحه
RIGHTMARGIN: فاصله صفحه از راست
LEFTMARGIN: فاصله صفحه از چپ

همانند مثال زیر:

<HTML>
<BODY LEFTMARGIN=”80″ RIGHTMARGIN=”80″>
تنظیم این صفحه از چپ و راست 80 پیکسل است
</BODY>
</HTML>

تنظیم صفحه از چپ و راست 80 پیکسل است

توضیح برنامه: در برنامه ی بالا فاصله کلیه متون از چپ و راست صفحه 80 پیکسل می باشد.

تمرین 13 برنامه ای بنویسید که در آن تنظیم صفحه از پایین و بالا 90 پیکسل و از چپ و راست نیز 70 پیکسل باشد.

لیست مرتب ( Ordered Lists )

لیست مرتب مجموعه ای از گزینه ها است که به منظور نمایش، عناصر به شکل مرتب به کار می رود.

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

تمامی لیست را در بین تگ <OL> و <OL/> قرار می دهیم و هر عنصر بین تگ <LI> و <LI/> قرار می گیرد.

نماد پیش فرض یک لیست مرتب اعداد 1، 2، 3 و. . . می باشد.

به منظور تغییر این نماد در لیست های مرتب از ویژگی TYPE در تگ <OL> استفاده می کنیم.

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

مقدار              نماد

A,B,C,. . .             A

a,b,c,. . .             a

I,II,III,. . .          I

i,ii,iii,. . .          i

همانند مثال زیر:

<HTML>
<BODY>
<OL TYPE=”A”>
<LI>کتاب1</LI>
<LI>کتاب2</LI>
<LI>کتاب3</LI>
<LI>کتاب4</LI>
</OL>
</BODY>
</HTML>

  1. کتاب1

  2. کتاب2

  3. کتاب3

  4. کتاب4

توضیح برنامه: در برنامه ی بالا لیست ترتیبی چند کتاب را مشاهده می کنید که در ابتدای هر گزینه حروف بزرگ لاتین نمایش داده می شود.

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

لیست های نامرتب ( Unordered Lists )

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

در ابتدای هر عنصر یک علامت Bullet قرار می گیرد.

(شکل ساده گرافیکی مانند دایره) همچنین برای نمایش مقادیر متفاوت از ویژگی “?”=TYPE استفاده می کنیم

که به جای ? مقدار مورد نظر قرار می گیرد:

  • طراحی وب

  • برنامه نویسی وب

    برای تغییر این نماد می توانید از جدول زیر نماد مورد نظرتان را انتخاب کنید.

مقدار

نماد

circle

دایره تو خالی

disc

دایره تو پر

square

مربع تو خالی

لیست نامرتب بین تگ <UL> و <UL/> و عناصر آن بین تگ <LI> و <LI/> قرار می گیرند. همانند مثال زیر:

<HTML>
<BODY>
<UL type=”circle”>
<LI>کتاب رمان</LI>
<LI>کتاب روانشناسی</LI>
<LI>کتاب برنامه نویسی</LI>
<LI>کتاب کودک</LI>
</UL>
</BODY>
</HTML>

  • کتاب رمان

  • کتاب روانشناسی

  • کتاب برنامه نویسی

  • کتاب کودک

توضیح برنامه: در برنامه ی بالا لیست کتاب هایی را مشاهده می کنید که از نظم خاصی پیروی نمی کنند.

برای نمایش این عناصر لیست نامرتب انتخاب مناسبی است.

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

لیست تو در تو

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

مانند مثال زیر:

<HTML>
<BODY>
<LI>مشخصات</LI>
<OL TYPE=”A”>
<LI>نام نویسنده</LI>
<LI>ناشر</LI>
<LI>سال چاپ</LI>
<LI>شابک</LI>
</OL>
<LI>نام کتاب ها</LI>
<OL>
<LI>شیمی</LI>
<LI>فیزیک</LI>
<LI>ادبیات</LI>
<LI>ریاضی</LI>
</OL>
</BODY>
</HTML>

  • مشخصات

  1. نام نویسنده

  2. ناشر

  3. سال چاپ

  4. شابک

  • نام کتاب ها

  1. شیمی

  2. فیزیک

  3. ادبیات

  4. ریاضی

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

تمرین 16 برنامه ای بنویسید که دارای یک لیست تو در تو بوده و دو عنصر از آن دارای زیر شاخه باشند.

افزودن تصویر ( Image )

درHTML برای افزودن تصویر به صفحه وب از تگ IMG به همراه ویژگی “?”=SRC استفاده می نماییم

و به جای ? مسیر عکس مورد نظرمان را می نویسیم.

به منظور تنطیم اندازه ی عکس از ویژگی های ?=HEIGHT و ?=WIDTH استفاده می کنیم

و به جای ؟ اندازه مورد نظر را بر حسب پیکسل می نویسیم.

در مواردی مرورگر، تصویر را به دلایل مختلف (عدم تشخیص تصویر، تغییر آدرس تصویر، تغییر نام عکس و…) نمایش نمی دهد.

به همین منظور متنی جایگزین تصویر قرار می دهیم تا کاربر متوجه موضوع عکس باشد.

به همین دلیل ویژگی “?”=ALT استفاده می شود و به جای ؟ متن مورد نظر را تایپ می کنیم.

ممکن است کاربر بخواهد در هنگام نمایش تصویر، متن مربوط به آن نیز نمایش داده شود

از این رو از ویژگی “?”=TITLE استفاده می کنیم و به جای ؟ متن مورد نظر را می نویسیم.

مانند مثال زیر:

<HTML>
<BODY>
<IMG SRC=”http://www.firefars.com/img/logo.png” ALT=”لوگو فایرفارس” HEIGHT=”50″  WIDTH=”50″>
در این صفحه عکس لوگو فایرفارس نمایش داده می شود
</BODY>
</HTML>

در این صفحه عکس لوگو فایرفارس نمایش داده می شود

توضیح برنامه: در این برنامه آدرس کامل عکس مورد نظر را می نویسیم و اندازه های آن را تنظیم می کنیم.

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

تمرین 17 برنامه ای بنویسید که در آن دو عکس نمایش داده شود.

در عکس اول طول و عرض آن 160 پیکسل بوده و تصویر دوم دارای به همراه متن باشد.

افزودن تصویر پس زمینه ( Back Ground )

برای افزودن تصویر پس زمینه در صفحه وب از ویژگی BACKGROUND در تگ BODY استفاده می کنیم،

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

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

پس از تصاویری با ابعاد کوچکتر استفاده کنید.

مانند مثال زیر:

<HTML>
<BODY BACKGROUND=”http://www.firefars.com/img/logo.png”>
تصویر پس زمینه عکس یک لوگو فایرفارس است
</BODY>
</HTML>

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

در تگ BODY از ویژگی BACKGROUND استفاده کردیم و تصویر پس زمینه ی وب را عکس یک گل در نظر گرفتیم.

تمرین 18 برنامه ای بنویسید که تصویر پس زمینه ی آن عکسی با پسوند JPG باشد.

افزودن کادر به تصویر ( Border )

برای اضافه کردن یک کادر به تصویر از ویژگی ?=BORDER در تگ IMG استفاده می کنیم

و به جای ؟ عدد مورد نظرمان را بر حسب پیکسل می نویسیم.

این کار باعث زیباتر شدن تصویر می شود.

هنگامی که بخواهیم تصویرمان بدون کادر نمایش داده شود این مقدار را 0 می کنیم.

مانند مثال زیر:

<HTML>
<BODY>
<IMG SRC=”http://www.firefars.com/img/logo.png”BORDER=”10″>
ضخامت کادر تصویر 10 پیکسل است
</BODY>
</HTML>

ضخامت کادر تصویر 10 پیکسل است

توضیح برنامه: در برنامه ی بالا عکسی داریم که ضخامت کادر آن 10 پیکسل می باشد.
نکته: اگر در تگ IMG دستور BORDER را اجرا نکنیم امکان این وجود دارد که در مرورگرهای متفاوت، تصاویر با حاشیه نشان داده شوند.

لذا تعیین مقدار کادر حتی اگر 0 هم باشد الزامیست.
تمرین 19 برنامه ای بنویسید که تصویر آن با پسوند GIF بوده، ضخامت کادر دور آن 20 پیکسل و متن جایگزین این تصویر نام خود عکس باشد.

تراز کردن متن در اطراف تصویر ( Align )

در صورت وجود متن و تصویر در یک صفحه ی وب مرورگر آ ها را به صورت متوالی نمایش می دهد.

برای تراز کردن متن با تصویر مورد نظرمان از ?=ALIGN در تگ IMG استفاده می کنیم

و به جای ؟ یکی از مقادیر TOP, MIDDLE و BOTTOM را می گذاریم.

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

از ویژگی ?=CLEAR در تگ BR استفاده می کنیم و به جای ؟ یکی از مقادیر LEFT, RIGHT یا ALL می گذاریم،

مقدار ALL تمام عملیات تراز کردن از هر دو طرف تصویر را متوقف می کند.

مانند مثال زیر:

<HTML>
<BODY>
<IMG SRC=”http://www.firefars.com/img/logo.png”ALIGN=”MIDDLE”>
متن در وسط تصویر نمایش داده می شود
<IMG SRC=”Images/gol. gif”>
<BR CLEAR=”RIGHT”>
ادامه متن به صورت متوالی نمایش داده می شود
</BODY>
</HTML>

 متن در وسط تصویر نمایش داده می شود
ادامه متن به صورت متوالی نمایش داده می شود

توضیح برنامه: در برنامه ی بالا هر متنی که نوشته شود در وسط عکس نمایش داده می شود

تا زمانی که برنامه ی CLEAR اجرا شود.

پس از آن تمامی متون به صورت متوالی نمایش داده خواهند شد.

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

افزودن خط جدا کننده ( Horizental Line )

با استفاده از تگ <HR> می توانید خط جدا کننده ی افقی به صفحه اضافه کنید.

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

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

مانند مثال زیر:

<HTML>
<BODY>
این پاراگراف مربوط به دروس تخصصی کامپیوتر می باشد
<HR>
این پاراگراف مربوط به دروس عمومی پایه می باشد
</BODY>
</HTML>

این پاراگراف مربوط به دروس تخصصی کامپیوتر می باشد

این پاراگراف مربوط به دروس عمومی پایه می باشد

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

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

ایجاد لیستی از تصاویر

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

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

برای این کار از تگ IMG در تگ UL استفاده می کنیم.

برای مثال زیر:

<HTML>
<BODY>
<UL>
<IMG SRC=”http://www.firefars.com/img/logo.png” ALIGN=”MIDDLE”>فایر فارس
<IMG SRC=”http://www.firefars.com/img/logo.png” ALIGN=”MIDDLE”>رسانه پاسارگاد
</UL>
</BODY>
</HTML>

فایر فارس
رسانه پاسارگاد

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

تمرین 22 برنامه ای بنویسید که شامل لیست دروس کامپیوتر بوده

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

ایجاد پیوند به یک صفحه وب دیگر ( Link )

برای ایجاد ارتباط از صفحه ی وب خود با صفحات وب دیگر از ویژگی ?=HREF در تگ <A> استفاده می کنیم

و به جای ؟ آدرس URL مورد نظرمان را می نویسیم و با تگ<A/>خط را تمام می کنیم.

توجه داشته باشید آدرس URL را میتوان به دو صورت نسبی (نسبت به فایل HTML، مثلا به صورت /page.html) و مطلق (مثلا به صورت http://www.test.com/page.html) وارد کرد.

همانند مثال زیر:

<HTML>
<BODY>
<A HREF=”HTTP://WWW.FIREFARS.COM”>فایرفارس</A>
</BODY>
</HTML>

فایرفارس

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

تمرین 23 برنامه ای بنویسید که هنگامی که روی کلمه ی Microsoft site کلیک می کنیم به سایت Microsoft پیوند ایجاد کند.

ایجاد پیوند به یک تصویر

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

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

مانند مثال زیر:

<HTML>
<BODY>
<A HREF=”http://www.firefars.com/img/logo.png”><IMG SRC=”http://www.firefars.com/img/logo.png”><br>نمایش لوگو فایرفارس</A>
</BODY>
</HTML>

نمایش لوگو فایرفارس

توضیح برنامه: همانگونه که در برنامه ی بالا مشاهده می کنید چنانچه بر روی نمایش لوگو فایرفارس کلیک کنید به آدرس عکس مورد نظر رفته و گل را نمایش می دهد.

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

ایجاد پیوند به یک فایل

هنگامی که کاربر می خواهد فایلی رااز روی وب سرور دانلود کند

و آن را به کامپیوتر خود انتقال دهد به ایجاد یک پیوند نیاز خواهد داشت.

فایل ها می توانند PDF و یا یک GAME باشند.

برای ایجاد پیوند می توان از ویژگی ?=HREF در تگ A استفاده نمود.

مانند مثال زیر:

<HTML>
<BODY>
<A HREF=”GAME/CAR.exe”>دانلود بازی</A>
</BODY>
</HTML>

دانلود بازی

توضیح برنامه: همانگونه که در برنامه ی بالا مشاهده می کنید پیوندی با فایل بازی ایجاد کردیم که کاربر می تواند بازی را دانلود کرده و در کامپیوتر خود ذخیره نماید.

تمرین 25 برنامه ای بنویسید که کاربر بتواند با کلیک روی گزینه ی دانلود مطالب یک فایل PDF را دانلود کند.

ایجاد پیوند برای ارسال ایمیل

ممکن است بخواهیم با کلیک بر روی یک پیوند به سرعت ایمیلی را به آدرس مورد نظر ارسال کنیم. بدین منظور از ویژگی “HREF=”mailto:Your-Mail@Test.com در تگ A استفاده می کنیم و به جای Your-Mail@Test.com E-mail شخص مورد نظرمان را می نویسیم. مانند مثال زیر:

<HTML>
<BODY>
<A HREF=”mailto:info@firefars.com”>ایمیل من</A>
</BODY>
</HTML>

ایمیل من

توضیح برنامه: همانگونه که در برنامه ی بالا مشاهده می کنید آدرس ایمیل نویسنده مقاله نوشته شده و با کلیک روی کلمه ایمیل من می توانید به نویسنده ایمیل بدهید.

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

ایجاد پیوند به یک سایت FTP

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

برای این کار می توانید همانند پیوندهای قبل از ویژگی ?=HREF در تگ A استفاده کنید و به جای ؟ مسیر سایت FTP مورد نظرتان را بنویسید.

همانند مثال زیر:

<HTML>
<BODY>
<A HREF=”FTP://FIREFARS.COM”>فایرفارس</A>
</BODY>
</HTML>

فایرفارس

توضیح برنامه: در برنامه ی بالا هنگامی که روی کلمه ی فایر فارس کلیک می کنیم به سایت FTP آن ارتباط برقرار می کنیم.

تمرین 27 برنامه ای بنویسید که با کلیک بر روی کلمه ی دانشگاه آزاد به سایت FTP آن پیوند ایجاد کند.

باز کردن پیوند در یک پنجره ی جدید

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

حال اگر بخواهیم پیوند را به صفحه ی دیگری منتقل کنیم از ویژگی “?”=TARGET در تگ A استفاده می کنیم

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

مانند مثال جدید:

<HTML>
<BODY>
<A HREF=”A. HTML” TARGET=”Page 2″>نمایش صفحه جدید</A>
</BODY>
</HTML>

نمایش صفحه جدید

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

تمرین 28 برنامه ای بنویسید که با کلیک بر روی کلمه next page صفحه جدیدی باز کرده و با سایت فایر فارس پیوند ایجاد کند.

تعیین رنگ پیوند

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

علت این امر این است که پیوندها در سه دسته کلی قرار می گیرند:

Link:پیوندهایی که هنوز کاربر آن را انتخاب نکرده است.
Vlink:پیوندهایی که کاربر قبلا آن را انتخاب و مشاهده کرده است.
Alink:پیوندهایی که در حال حاضر کاربر آن را انتخاب کرده است.
برای اینکه بتوانیم رنگ پیوندهای نام برده را تغییر دهیم می توان از ویژگی های Link=”?”, Vlink=”?”, Alink=”?” در تگ BODY استفاده کنید و به جای ؟ نام رنگ مورد نظرتان را بنویسید. مانند مثال زیر:

<HTML>
<BODY LINK=”RED” VLINK=”YELLOW” ALINK=”BLACK”>
<A HREF=”A. HTML”>نمایش پیوند</A>
</BODY>
</HTML>

نمایش پیوند

توضیح برنامه: همانگونه که در برنامه مشاهده می کنید

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

برای پیوند هنوز مشاهده نشده رنگ قرمز،

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

و برای پیوند در حال حاضر انتخاب شده رنگ مشکی را در نظر گرفتیم.

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

تعریف کلید میانبر برای پیوند ( Access Key )

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

حال اگر بخواهیم بدون کلیک و با دسترسی سریع تر،

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

برای این کار از ویژگی “?”=ACCESSKEY در تگ A استفاده می شود و به جای ؟ رقم و یا حرف مورد نظر نوشته می شود.

باید به این نکته توجه داشت که همه ی مرورگرها از این ویژگی پشتیبانی نمی کنند

و همواره کلمات کلیدی میانبر در اینترنت، بر کلمات کلیدی برنامه ها مقدم تر است.

مانند مثال زیر:

<HTML>
<BODY>
<A HREF=”A. HTML” ACCESSKEY=”A”>نمایش با کلید میانبر</A>
</BODY>
</HTML>

نمایش با کلید میان بر

توضیح برنامه: همانگونه که مشاهده می کنید پیوند به صفحه وب A امکان پذیر است که با استفاده از کلید میانبر ALT+A نیز می توان به این صفحه دسترسی پیدا کرد.

تمرین 30 برنامه ای بنویسید که در آن کاربر با استفاده از کلید میانبر ALT+F بتواند به سایت فایرفارس پیوند ایجاد کند.

تعریف اولویت های پیوند صفحه ( Tab Order )

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

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

به طور پیش فرض Tab براساس ترتیب ظاهری پیوندها در صفحه عمل می کند.

برای اینکه ترتیب آن را به گونه ی مورد نظر تنظیم کنیم

از ویژگی “?”=TABINDEX در تگ A استفاده می شود که به جای ؟ به ترتیب اعداد مورد نظرمان را می نویسیم.

مانند مثال زیر:

<HTML>
<BODY>
<A HREF=”A. HTML” TABINDEX=”1″>نمایش پیوند1</A>
<A HREF=”A. HTML” TABINDEX=”2″>نمایش پیوند2</A>
<A HREF=”A. HTML” TABINDEX=”3″>نمایش پیوند3</A>
</BODY>
</HTML>

نمایش پیوند1
نمایش پیوند2
نمایش پیوند3

توضیح برنامه: همانگونه که در برنامه ی بالا مشاهده می کنید پیوندها به ترتیب، پیوند 2، 3و 1 نمایش داده می شود.

تمرین 31 برنامه ای بنویسید که در آن پنج پیوند نمایش داده شود که ترتیب آن 1، 3، 5،2،4 باشد.

ایجاد جدول ( Table )

برای ایجاد جدول در HTML از تگ <TABLE> می توان استفاده کرد

و با تگ <TABLE/> نیز پایان می یابد.

برای ایجاد یک سطر از تگ <TR>، برای ایجاد خانه های عنوان از تگ <TH> و برای خانه های عادی از تگ <TD> استفاده می شود.

مانند مثال زیر:

<HTML>
<BODY>
<TABLE>
<TR>
<TH>نام</TH>
<TH>نام خانوادگی</TH>
</TR>
<TR>
<TD>محمد</TD>
<TD>احمدی</TD>
</TR>
<TR>
<TD>علی</TD>
<TD>رجبی</TD>
</TR>
</TABLE>
</BODY>
</HTML>

نام

نام خانوادگی

محمد

احمدی

علی

رجبی

توضیح برنامه: همانگونه که مشاهده می کنید برنامه ی بالا شامل یک جدول با 3 سطر و 2 ستون می باشد که سطر اول عناوین جدول بوده و دو سطر بعدی نیز اطلاعات عادی است.

تمرین 32 برنامه ای بنویسید که شامل یک جدول با سه سطر و چهار ستون باشد، سطر اول عناوین جدول و سطرهای بعدی اطلاعات عادی باشد.

افزودن کادر به جدول ( Border )

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

برای افزودن کادر به جداول از ویژگی “?” =BORDER در تگ TABLE استفاده می شود و به جای ? ضخامت کادر را بر حسب پیکسل می نویسیم.

توجه داشته باشید برای تعیین رنگ کادر نیز می توانید از ویژگی “?”=BORDERCOLOR در تگ TABLE استفاده کنید.

مانند مثال زیر:

<HTML>
<BODY>
<TABLE BORDER=”2″ BORDERCOLOR=”RED”>
<TR>
<TH>نام</TH>
<TH>نام خانوادگی</TH>
</TR>
<TR>
<TD>محمد</TD>
<TD>احمدی</TD>
</TR>
<TR>
<TD>علی</TD>
<TD>رجبی</TD>
</TR>
</TABLE>
</BODY>
</HTML>

نام

نام خانوادگی

محمد

احمدی

علی

رجبی

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

تمرین 33 برنامه ای بنویسید که جدول آن دارای ضخامت کادر 3 پیکسل بوده و رنگ کادر آن آبی نمایش داده شود و محتویات آن مربوط به اجزای کامپیوتر باشد.

افزودن عنوان به جدول ( Caption )

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

در HTML به منظور اضافه کردن عنوان به جدول از تگ <CAPTION> بعد از تگ <TABLE> استفاده می شود که با تگ <CAPTION/> خاتمه می یابد.

اغلب عناوین در بالای جدول نمایش داده می شود.

مانند مثال زیر:

<HTML>
<BODY>
<CAPTION>جدول مشخصات</CAPTION>
<TABLE border=1>
<TR>
<TH>نام</TH>
<TH>نام خانوادگی</TH>
</TR>
<TR>
<TD>محمد</TD>
<TD>احمدی</TD>
</TR>
<TR>
<TD>علی</TD>
<TD>رجبی</TD>
</TR>
</TABLE>
</BODY>
</HTML>

جدول مشخصات

نام

نام خانوادگی

محمد

احمدی

علی

رجبی

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

تمرین 34 جدولی طراحی کنید که در آن اطلاعات دروس تخصصی کامپیوتر بوده و عنوان آن نمایش دروس باشد.

افزودن رنگ به جدول

به منظور رنگی کردن پس زمینه و یا قسمت مشخصی در جدول از ویژگی “?”=BGCOLOR استفاده می شود و به جای ؟ نام رنگ مورد نظر و یا معادل هگزادسیمال آن را می نویسیم. همانند مثال زیر:

<HTML>
<BODY>
<TABLE>
<TR BGCOLOR=”#C0C0C0″>
<TH>نام</TH>
<TH>نام خانوادگی</TH>
</TR>
<TR>
<TD>محمد</TD>
<TD>احمدی</TD>
</TR>
<TR>
<TD>علی</TD>
<TD>رجبی</TD>
</TR>
</TABLE>
</BODY>
</HTML>

نام

نام خانوادگی

محمد

احمدی

علی

رجبی

توضیح برنامه: همانگونه که در برنامه ی بالا مشاهده می کنید سطر اول به رنگ نقره ای نمایش داده می شود،

می توانید این ویژگی را در تگ های دیگر جدول نیز استفاده کنید.

تمرین 35 برنامه ای بنویسید که دارای دو جدول باشد،

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

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

افزودن پس زمینه به جدول

برای اضافه کردن تصویر پس زمینه به جدول و یا سلولی از جدول از ویژگی “?”=BACKGROUND در تگ TABLE, TH و یا TD استفاده کرد و به جای ؟ مسیر عکس مورد نظر را می نویسیم. مانند مثال زیر:

<HTML>
<BODY>
<TABLE border=1 BACKGROUND=”http://www.firefars.com/img/address.jpg”>
<TR>
<TH>نام</TH>
<TH>نام خانوادگی</TH>
</TR>
<TR>
<TD>محمد</TD>
<TD>احمدی</TD>
</TR>
<TR>
<TD>علی</TD>
<TD>رجبی</TD>
</TR>
</TABLE>
</BODY>
</HTML>

نام

نام خانوادگی

محمد

احمدی

علی

رجبی

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

تمرین 36 برنامه ای بنویسید که شامل یک جدول باشد، سطر عنوان آن دارای یک عکس پس زمینه باشد.

تراز کردن متن در جدول ( Align )

برای تراز کردن متن در سلول های یک جدول می توان از ویژگی های “?”=ALIGN و “?”=VALIGN استفاده کرد. به جای ؟ در ALIGN می توان یکی از مقادیر RIGHT, LEFT و CENTER و به جای ؟ در VALIGN می توان یکی از مقادیر BOTTOM, MIDDLE و یا TOP را قرار دهیم. مانند مثال زیر:

<HTML>
<BODY>
<TABLE border=1>
<TR ALIGN=”RIGHT”>
<TH>نام</TH>
<TH>نام خانوادگی</TH>
</TR>
<TR VALIGHN=”BOTTOM”>
<TD>محمد</TD>
<TD>احمدی</TD>
</TR>
<TR ALIGN=”CENTER”>
<TD>علی</TD>
<TD>رجبی</TD>
</TR>
</TABLE>
</BODY>
</HTML>

نام

نام خانوادگی

محمد

احمدی

علی

رجبی

توضیح برنامه: همانگونه که مشاهده می کنید در جدول بالا سطر اول از راست، سطر دوم از پایین و سطر سوم از وسط تنظیم شده است.

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

تنظیم سطر عنوان آن وسط چین، دو سطر بعدی چپ چین و سطر آخر به حالت پیش فرض باشد.

تنظیم اندازه ی جدول

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

حال برای اینکه بتوانیم اندازه ی جدول را تغییر تنظیم کنیم از ویژگی های “?”=WIDTH و “?”=HEIGHT استفاده می کنیم و به جای ؟ اندازه مورد نظرمان را بر حسب پیکسل می نویسیم.

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

مانند مثال زیر:

<HTML>
<BODY>
<TABLE BORDER=”2″ WIDTH=”200″ HEIGHT=”300″>
<TR>
<TH>نام</TH>
<TH>نام خانوادگی</TH>
</TR>
<TR>
<TD>محمد</TD>
<TD>احمدی</TD>
</TR>
<TR>
<TD>علی</TD>
<TD>رجبی</TD>
</TR>
</TABLE>
</BODY>
</HTML>

نام

نام خانوادگی

محمد

احمدی

علی

رجبی

توضیح برنامه: همانگونه که در برنامه ی بالا مشاهده می کنید ضخامت کادر جدول 2 پیکسل بوده، طول و عرض جدول نیز به ترتیب 300 و 200 پیکسل می باشد.

تمرین 38 برنامه ی تمرین 37 را به ضخامت کادر 3 پیکسل، طول و عرض 500 پیکسل تنظیم کنید.

ادغام خانه های جدول

در HTML می توان تعدادی از خانه ها را در راستای سطری و یا ستونی با یکدیگر ادغام کرد.

از این رو برای ادغام خانه های سطری از ویژگی “?”=ROWSPAN در تگ TH و TD و برای ادغام ستونی خانه ها از ویژگی “?”=COLSPAN در تگ TH و TD استفاده می کنیم و به جای ؟ تعداد خانه هایی را که ادغام می شوند می نویسیم.

مانند مثال زیر:

<HTML>
<BODY>
<TABLE border=”2″>
<TR>
<TH ROWSPAN=”3″>نام</TH>
<TH ROWSPAN=”3″>نام خانوادگی</TH>
</TR>
<TR>
<TD>محمد</TD>
<TD>احمدی</TD>
</TR>
<TR>
<TD>علی</TD>
<TD>رجبی</TD>
</TR>
</TABLE>
</BODY>
</HTML>

نام

نام خانوادگی

محمد

احمدی

علی

رجبی

توضیح برنامه: همانگونه که مشاهده می کنید ادغام تعداد خانه های سطری مشخص شده نمایش داده می شود برای درک بهتر این دستور یک بار اجرای این برنامه را در مرورگر مشاهده کنید.

تمرین 39 برنامه ای بنویسید که دارای جدولی با سه سطر و سه ستون باشد و سه ستون دیگر نیز با آن ادغام شده باشد.

تنظیم نمای ظاهری خانه های جدول

برای زیباتر شدن نمای ظاهری جدول از ویژگی های “?”=CELLSPACING ( فضای خالی بین خانه ها ) و “?”=CELLPADDING ( مقدار فضای خالی احاطه شده دور داده ها در خانه ها ) در تگ TABLE استفاده می کنیم و به جای ؟ عدد مورد نظرمان را می نویسیم مقدار پیش فرض 2 می باشد. مانند مثال زیر:

<HTML>
<BODY>
<TABLE BORDER=”3″ CELLSPACING=”10″>
<TR>
<TH>نام</TH>
<TH>نام خانوادگی</TH>
</TR>
<TR>
<TD>محمد</TD>
<TD>احمدی</TD>
</TR>
<TR>
<TD>علی</TD>
<TD>رجبی</TD>
</TR>
</TABLE>
</BODY>
</HTML>

نام

نام خانوادگی

محمد

احمدی

علی

رجبی

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

تمرین 40 برنامه ای بنویسید که شامل یک جدول با دو سطر و پنج ستون باشد

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

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

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

بدین سبب می توان از تگ TABLE در تگ TH و یا TD استفاده کرد.

توجه داشته باشید که تگ ها را در جای مناسب و صحیح ببندید.

مانند مثال زیر:

<HTML>
<BODY>
<TABLE BORDER=”3″>
<TR>
<TH>نام</TH>
<TH>نام خانوادگی</TH>
</TR>
<TR>
<TD>
<TABLE BORDER=”1″>
<TD>محمد</TD>
<TD>احمدی</TD>
</TABLE>
</TD>
<TD>سامان</TD>
<TD>جلالی</TD>
</TR>
<TR>
<TD>علی</TD>
<TD>رجبی</TD>
</TR>
</TABLE>
</BODY>
</HTML>

نام

نام خانوادگی

محمد

احمدی

سامان

جلالی

علی

رجبی

توضیح برنامه: همانگونه که در برنامه ی بالا مشاهده می کنید خانه ی اول سطر دوم دارای یک جدول دیگر با دو سطر و یک ستون می باشد و ضخامت کادر آن 1 پیکسل نمایش داده می شود.

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

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

ایجاد فرم ( Form )

همان طور که می دانیم فرم ها جهت ثبت اطلاعات به کار گرفته می شوند.

یک فرم، می تواند شامل عناصری مانند ناحیه متنی، جعبه علامت، دکمه رادیویی و . . . باشد.

از این رو در HTML برای طراحی یک فرم از تگ <FORM> استفاده می کنیم و با تگ <FORM/> ساخت فرم پایان می یابد.

این تگ دارای دو ویژگی اصلی METHOD و ACTION می باشد.

ویژگی “?”=METHOD تعیین می کند که اطلاعات یک فرم چگونه در اینترنت نمایش داده شوند

و دارای دو مقدار GET و POST می باشد که به طور پیش فرض مقدار GET فعال است.

تفاوت عمده ی این دو مقدار در این است که GET دارای محدودیت های نوشتاری ( تعداد کلمات ) می باشد.

همچنین آدرس کامل مسیر جاری را نمایش می دهد و . . . از این رو توصیه می شود از مقدار POST استفاده کنید.

ویژگی “?”=ACTION برای پردازشگر فرم استفاده می شود.

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

در این ویژگی به جای ؟ نام ومسیر مورد نظرمان را می نویسیم.

مانند مثال زیر:

<HTML>
<BODY>
<FORM ACTION=”B.HTML” METHOD=”POST”>
</FORM>
این یک صفحه اولیه ی فرم است
</BODY>
</HTML>

Top of Form

این یک صفحه اولیه ی فرم است

Bottom of Form

توضیح برنامه: در بالا قبل از ایجاد فرم برنامه ای نوشته و آن را با نام B . HTML ذخیره کردیم. سپس فرم را ساخته، ویژگی ACTION آن را برابر با مسیر B. HTML قرار داده و ویژگی METHOD آن را با مقدار POST تنظیم کردیم. برای درک بهتر برنامه حتما یک بار آن را اجرا فرمایید.

ایجاد کادر ویرایش متنی ( Text Box )

برای ویرایش و یا نوشتن متنی در فرم از تگ <“INPUT TYPE=”text> در داخل تگ FORM استفاده می شود.

این تگ دارای ویژگی ?=NAME می باشد که به جای ؟ نام کادر ویرایش متن را مشخص می کنیم.

این نام در فرم نمایش داده نمی شود، اما در هنگام تحویل به سرور ظاهر می شود.

یک نام می تواند ترکیبی از حروف و اعداد باشد.

یکی دیگر از ویژگی های این تگ “?”=SIZE می باشد که طول کادر را بر حسب تعداد کاراکتر مشخص می کند.

مانند مثال زیر:

<HTML>
<BODY>
<FORM ACTION=”B.HTML” METHOD=”POST”>
نام:<INPUT TYPE=”TEXT” NAME=TOZIHAT SIZE=20>
</FORM>
</BODY>
</HTML>

Top of Form

نام:

Bottom of Form

توضیح برنامه: همانگونه که در برنامه ی بالا مشاهده می کنید بعد از تگ FORM از تگ INPUT استفاده کردیم که قبل آن نام نوشته شده و در مرورگر مانند یک برچسب در کنار کادر نمایش داده می شود. ویژگی SIZE را نیز برابر 20 قرار دادیم.

تمرین 42 برنامه ای بنویسید که دارای یک فرم بوده و فرم آن شامل سه کادر ویرایش متن باشد. کادر ویرایش متن اول دارای سایز 25 ، کادر دوم 30 و سوم 20 باشد.

ایجاد ناحیه متنی ( Text Area )

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

در این گونه موارد از تگ <TEXTAREA> درون تگ FORM استفاده می شود،

و با تگ <TEXTAREA/> پایان می یابد. این تگ دارای ویژگی “?”=NAME برای تعیین نام مشخص می باشد

این ویژگی در آینده در زبان های مثل PHP و تکنولوژی هایی مثل ASP.NET مورد استفاده قرار می گیرد.

همچنین دارای دو ویژگی “?”=ROWS و “?”=COLS برای تعیین سطر و ستون ناحیه متنی و همچنین منظور از تعداد ستون در ناحیه ی متنی بر حسب اندازه ی کادر ویرایش می باشد.

مانند مثال زیر:

<HTML>
<BODY>
<FORM ACTION=”B.HTML” METHOD=”POST”>
توضیحات:<TEXTAREA NAME=”INFO” ROWS=8 COLS=20>
</TEXTAREA>
</FORM>
</BODY>
</HTML>

Top of Form

توضیحات:

Bottom of Form

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

فرمی ایجاد کرده ایم که دارای ناحیه متنی به نام INFO می باشد

و قبل آن برچسبی به نام توضیحات مشخص کرده ایم،

تعداد سطر و ستون های این ناحیه ی متنی 8 و 20 می باشد.

تمرین 43برنامه ای بنویسید که شامل یک فرم با ناحیه متنی باشد

که سطر و ستون آن به ترتیب 9 و 30 باشد،

و در برچسب کنار ناحیه متنی نیز کلمه ی COMMENT نمایش داده شود.

ایجاد جعبه های علامت ( Check Box )

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

و با کلیک دوباره بر روی همان گزینه می توانید تیک را بردارید.

برای ایجاد جعبه علامت در HTML از تگ <INPUT TYPE=CHECKBOX> در تگ FORM استفاده کنید.

هنگامی که برای ویژگی value نامی را انتخاب می کنیم

این نام در ویژگی name قرار گرفته و به صفحه ی بعد فرستاده می شود.

مانند مثال زیر:

<HTML>
<BODY>
<FORM ACTION=”B.HTML” METHOD=”POST”>
<p>لطفا فونت مورد نظرتان را انتخاب کنید:</p>
<INPUT TYPE=”checkbox” NAME=”chb1″ VALUE=”tah”>tahoma
<INPUT TYPE=”checkbox” NAME=”chb2″ VALUE=”var”>var
<INPUT TYPE=”checkbox” NAME=”chb3″ VALUE=”naz”>nazanin
</FORM>
</BODY>
</HTML>

Top of Form

لطفا فونت مورد نظرتان را انتخاب کنید:

tahoma
var
nazanin

Bottom of Form

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

فرمی را ایجاد کرده ایم که دارای چند checkbox می باشد

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

توجه داشته باشید در checkbox مقدار name را متفاوت قرار دهید.

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

ایجاد دکمه های رادیویی ( Radio Botton )

دکمه های رادیویی، دایره های کوچک تو خالی هستند

که با عمل کلیک کردن بر روی آن ها به حالت تو پر نمایش داده می شوند،

لذا برای نمایش آن ها در فرم از تگ <INPUT TYPE=RADIO> در تگ FORM استفاده می کنیم.

توجه داشته باشید هنگامی که می خواهید چند دکمه RADIO را در یک مجموعه قرار دهید

می توانید ویژگی NAME تعدادی از آن ها را یکسان قرار دهید

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

مانند مثال زیر:

<HTML>
<BODY>
<FORM ACTION=”B. HTML” METHOD=”POST”>
<p>لطفا تیتر مورد نظرتان را انتخاب کنید:
<INPUT TYPE=”radio” NAME=”title” VALUE=”hello”>سلام
<INPUT TYPE=”radio” NAME=”title” VALUE=”wellcom”>خوش آمدید
<INPUT TYPE=”radio” NAME=”title” VALUE=”hello world”>سلام به دنیا
</FORM>
</BODY>
</HTML>

Top of Form

لطفا تیتر مورد نظرتان را انتخاب کنید:

سلام
خوش آمدید
سلام به دنیا

Bottom of Form

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

در ابتدای گزینه ها سوالی را به عنوان برچسب نوشته ایم و سه دکمه radio قرار داده ایم

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

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

ایجاد منوی باز شونده ( Combo Box )

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

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

از این رو در HTML از تگ <SELECT> در تگ FORM استفاده می شود،

که با تگ <SELECT/> پایان می یابد.

با استفاده از ویژگی NAME می توان نامی را برای این لیست انتخاب کرد

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

یکی از ویژگی های این تگ “?”=SIZE است که با استفاده از آن می توان اندازه نمایش ظاهری منو را تعیین کرد،

برای ایجاد گزینه های این منو از تگ <OPTION> در تگ SELECT استفاده می شود

که با استفاده از ویژگی “?”=VALUE می توان یک نام برای هر گزینه انتخاب نمود.

مانند مثال زیر:

<HTML>
<BODY>
<FORM ACTION=”B. HTML” METHOD=”POST”>
<p>عدد مورد نظرتان را انتخاب کنید:
<select name=”age” size=”1″>
<option VALUE=”a1″>1</option>
<option VALUE=”a2″>2 </option>
<option VALUE=”a2″>3 </option>
<option VALUE=”a2″>4 </option>
<option VALUE=”a2″>5 </option>
<option VALUE=”a2″>6 </option>
<option VALUE=”a2″>7 </option>
<option VALUE=”a2″>8 </option>
<option VALUE=”a2″>9 </option>
<option VALUE=”a2″>10 </option>
<option VALUE=”a2″>11 </option>
<option VALUE=”a2″>12 </option>
<option VALUE=”a2″>13 </option>
<option VALUE=”a2″>14 </option>
<option VALUE=”a2″>15 </option>
</select>
</FORM>
</BODY>
</HTML>

Top of Form

عدد مورد نظرتان را انتخاب کنید:

Bottom of Form

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

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

و در نهایت گزینه های مورد نظر را در تگ OPTION وارد کردیم.

تمرین 46 برنامه ای بنویسید که دارای یک فرم که شامل دو منو است،

منوی اول دارای ده انتخاب باشد و نمای ظاهری آن سه خانه را نمایش دهد

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

UPLOAD کردن فایل

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

اصطلاحا به این کار عمل دانلود گفته می شود،

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

برای انجام عمل آپلود در فرم ها از ویژگی ENCTYPE=”multipart/form-data” در تگ FORM استفاده می شود

و همچنین در تگ FORM باید از تگ <“INPUT TYPE=”file> استفاده کنید.

مانند مثال زیر:

<HTML>
<BODY>
<FORM ACTION=”B.HTML” METHOD=”POST”   ENCTYPE=”multipart/form-data”>
<INPUT TYPE =”file” NAME=”articel” SIZE=25>
</FORM>
</BODY>
</HTML>

Top of Form

Bottom of Form

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

هنگام اجرای برنامه یک کادر ویرایش نمایش داده می شود

که در کنار آن یک دکمه Browse قرار دارد که شما می توانید با کلیک بر روی این دکمه

مسیر و نام کامل فایل موجود در کامپیوتر خود را درون کادر ویرایشی اضافه کنید.

ایجاد دکمه های Submit و Reset

دکمه submit دکمه ای است که کاربر می تواند پس از پر کردن فرم مورد نظر آن را به سرور ارسال نماید،

وجود این دکمه در فرم الزامی است.

دکمه reset نیز زمانی به کار می رود که کاربر اطلاعات اشتباه وارد سیستم کرده است،

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

ویژگی?=VALUE برای هر دو دکمه به این صورت عمل می کند که:

هر نامی در این ویژگی نوشته شود در خروجی به عنوان نام دکمه نمایش داده می شود.

مانند مثال زیر:

<HTML>
<BODY>
<FORM ACTION=”B.HTML” METHOD=”POST”>
<INPUT TYPE=”submit” VALUE=send>
<INPUT TYPE=”reset” VALUE=clear>
</FORM>
</BODY>
</HTML>

Top of Form

Bottom of Form

توضیح برنامه: همانگونه که در برنامه ی بالا مشاهده می کنید دو دکمه تعریف شده است

که در خروجی دکمه send اطلاعات را به سرور ارسال می کند

و دکمه clear صفحه را به حالت اولیه باز می گرداند.

تمرین 47 برنامه ای بنویسید که دارای یک فرم ثبت نام باشد

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

ایجاد دکمه ی Submit گرافیکی

دکمه submit گرافیکی تصویری است که کاربر پس از پر کردن فرم با کلیک بر روی آن

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

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

ناحیه مورد نظر خود را انتخاب کند .

به عنوان مثال اگر کاربر بخواهد در نقشه جهان کشور و شهر مورد نظر خود را مشخص کند

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

برای استفاده از این دکمه تصویری از تگ <“INPUT TYPE =”image> در تگ FORM استفاده می کنیم

و با ویژگی “?”=NAME نامی برای تصویر انتخاب می کنیم.

مانند مثال زیر:

<HTML>
<BODY>
<FORM ACTION=”B.HTML” METHOD=”POST”>
<INPUT TYPE =”image” src=”مسیر مورد نظر” NAME=firefars>
</FORM>
</BODY>
</HTML>

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

که کاربر پس از کلیک بر روی آن اطلاعات صفحه را به سرور ارسال می کند.

تمرین 48 برنامه ای بنویسید که دارای یک فرم ثبت نام باشد و در انتهای فرم دکمه به نام تصحیح مجدد و دکمه تصویری با نام ایران نمایش داده شود.

گروه بندی عناصر فرم ( Field Set )

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

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

در HTML برای گروه بندی عناصر در فرم از تگ <FIELDSET> و <FIELDSET/> استفاده می کنیم،

اگر می خواهید برای هر گروه عنوانی را تعیین کنید باید عنوان گروه را بین تگ های <LEGEND> و <LEGEND/> قرار دهید

و با ویژگی “?”=ALIGN محل قرار گیری کادر را مشخص کنید،

این مقادیر می تواند Left, Right, Bottom, Top باشد.

مانند مثال زیر:

<HTML>
<BODY>
<FORM ACTION=”B.HTML” METHOD=”POST”>
<FIELDSET>
<LEGEND>قسمت اول</LEGEND>
<select name=age size =”1″>
<option VALUE=”a1″>1</option>
<option VALUE=”a2″>2</option>
<option VALUE=”a3″>3</option>
</select>
</FIELDSET>
<FIELDSET>
<LEGEND>قسمت دوم</LEGEND>
<INPUT TYPE=”file” NAME=”articel” SIZE=25>
</FIELDSET>
</FORM>
</BODY>
</HTML>

قسمت اول قسمت دوم

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

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

تمرین 49 برنامه ای بنویسید که شامل یک فرم با سه بخش متفاوت باشد،

هر بخش در یک گروه قرار گیرد و دارای یک عنوان مناسب با موضوع گروه باشد.

**********************************************************************

************************************************************

**make-money-in-dollars**

کار با بیت کوین

429 Responses

  1. how to get help in windows 10

    My coder is trying to convince me to move to .net from
    PHP. I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on several websites for about a year and am concerned about switching to another platform.
    I have heard very good things about blogengine.net.
    Is there a way I can import all my wordpress posts into it?
    Any kind of help would be really appreciated!

  2. gamefly free trial

    Heya i am for the first time here. I came across this board and I
    find It really useful & it helped me out a lot.
    I hope to give something back and aid others like you helped me.

  3. gamefly free trial

    Write more, thats all I have to say. Literally, it
    seems as though you relied on the video to make your point.
    You definitely know what youre talking about, why waste your
    intelligence on just posting videos to your weblog when you could be giving us something enlightening to read?

  4. gamefly free trial

    Excellent article. I will be experiencing a few of these issues as
    well..

  5. gamefly free trial

    Truly when someone doesn’t know afterward its up to
    other visitors that they will assist, so here it takes place.

  6. gamefly free trial

    Right here is the perfect webpage for anyone who would
    like to understand this topic. You know so much its
    almost hard to argue with you (not that I really will need
    to…HaHa). You certainly put a new spin on a topic that’s been discussed for years.
    Great stuff, just wonderful!

  7. gamefly free trial

    Attractive section of content. I just stumbled upon your site
    and in accession capital to assert that I acquire actually enjoyed account your blog posts.
    Any way I’ll be subscribing to your augment and even I achievement you access consistently rapidly.

  8. gamefly free trial

    Hi there, just became aware of your blog through Google, and found that it is really informative.
    I’m gonna watch out for brussels. I’ll appreciate if you continue this in future.
    Lots of people will be benefited from your writing. Cheers!

  9. gamefly free trial

    I like reading through a post that will make people think.

    Also, thank you for permitting me to comment!

  10. gamefly free trial

    I love what you guys are usually up too. This type of clever work and reporting!
    Keep up the fantastic works guys I’ve added you
    guys to blogroll.

  11. gamefly free trial

    I really like your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you?
    Plz respond as I’m looking to create my own blog and would like to know where
    u got this from. cheers

  12. gamefly free trial

    Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your site?

    My blog site is in the very same area of interest as yours and my users would really benefit from a lot of
    the information you present here. Please
    let me know if this ok with you. Cheers!

  13. http://tinyurl.com/

    This page definitely has all the information and facts I needed concerning this subject and didn’t know who to ask.

  14. tinyurl.com

    Hello to every one, it’s actually a pleasant for me to visit
    this web page, it includes precious Information.

  15. tinyurl.com

    Please let me know if you’re looking for a article writer for your weblog.
    You have some really great posts and I think I would be a good asset.
    If you ever want to take some of the load off, I’d absolutely love to write some material for your
    blog in exchange for a link back to mine. Please blast me an email if interested.
    Cheers!

  16. quest bars cheap

    Greate article. Keep posting such kind of info on your blog.
    Im really impressed by it.
    Hi there, You’ve done an incredible job. I’ll certainly digg
    it and for my part suggest to my friends. I am sure they will be benefited from this website.

  17. http://tinyurl.com/

    I visited several web pages but the audio quality for audio
    songs current at this website is genuinely excellent.

  18. tinyurl.com

    My partner and I absolutely love your blog and find almost all of your post’s to be
    precisely what I’m looking for. Does one offer guest writers to write content for yourself?
    I wouldn’t mind creating a post or elaborating on a number of the subjects you write regarding here.
    Again, awesome web site!

  19. plenty of fish dating site

    Excellent blog here! Also your site loads up fast!
    What web host are you using? Can I get your affiliate link to your host?
    I wish my web site loaded up as quickly as
    yours lol

  20. quest bars cheap

    You have made some really good points there. I looked on the web
    to learn more about the issue and found most people will go along with
    your views on this website.

  21. how to get help in windows 10

    I constantly spent my half an hour to read this website’s posts daily along with a mug of coffee.

  22. tinyurl.com

    It’s very easy to find out any topic on net as compared to textbooks,
    as I found this article at this web site.

  23. quest bars cheap 2019 coupon

    Whoa! This blog looks exactly like my old one! It’s on a totally different topic but
    it has pretty much the same page layout and design. Excellent choice of colors!

  24. quest bars cheap

    Hi friends, fastidious post and nice arguments commented here, I am really enjoying by these.

  25. plenty of fish dating site

    Does your blog have a contact page? I’m having problems locating it but, I’d like to send you an e-mail.

    I’ve got some creative ideas for your blog you might be
    interested in hearing. Either way, great website
    and I look forward to seeing it improve over time.

  26. how to get help in windows 10

    Excellent post. I was checking constantly this blog and I am inspired!
    Extremely helpful information specially the ultimate section :
    ) I handle such info a lot. I used to be looking for this particular
    information for a very lengthy time. Thank you and good luck.

  27. how to get help in windows 10

    Hello just wanted to give you a quick heads up. The text in your article seem to be running off the
    screen in Ie. I’m not sure if this is a format issue or something
    to do with internet browser compatibility but I thought I’d post to let you know.

    The design look great though! Hope you get the issue fixed
    soon. Cheers

  28. how to get help in windows 10

    Post writing is also a excitement, if you be familiar
    with afterward you can write or else it is complex to write.

  29. plenty of fish dating site

    Great beat ! I would like to apprentice at the same time as you amend your
    website, how can i subscribe for a weblog site? The account aided me a appropriate deal.
    I had been tiny bit familiar of this your broadcast offered shiny clear idea

  30. plenty of fish dating site

    I think that is among the so much vital info
    for me. And i’m happy studying your article. But wanna remark on some basic issues, The site taste is wonderful, the articles is actually excellent
    : D. Good job, cheers

  31. plenty of fish dating site

    Thanks for sharing your thoughts on plenty of fish
    dating site. Regards

  32. how to get help in windows 10

    Hi there! I could have sworn I’ve visited
    this site before but after browsing through many of
    the posts I realized it’s new to me. Regardless, I’m certainly pleased I stumbled upon it and
    I’ll be bookmarking it and checking back frequently!

  33. how to get help in windows 10

    Attractive section of content. I just stumbled upon your web site and in accession capital to
    assert that I get in fact enjoyed account your blog posts. Anyway I
    will be subscribing to your feeds and even I achievement
    you access consistently fast.

  34. how to get help in windows 10

    Hi! I could have sworn I’ve been to this website before but after reading through some of the post I realized it’s new to me.
    Anyways, I’m definitely glad I found it and I’ll be book-marking and checking back often!

  35. natalielise

    I am not sure where you are getting your info, but good topic.

    I needs to spend some time learning much more or understanding more.
    Thanks for magnificent information I was looking for this info for my mission. natalielise pof

  36. plenty of fish dating site

    I’m gone to tell my little brother, that he should also visit this web site on regular basis to take updated from most recent reports.

  37. plenty of fish dating site

    We stumbled over here coming from a different page
    and thought I might check things out. I like what I see so now i am following
    you. Look forward to exploring your web page yet again.

  38. plenty of fish dating site

    Wonderful blog! Do you have any suggestions for aspiring writers?
    I’m planning to start my own site soon but I’m a little lost on everything.
    Would you advise starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I’m totally overwhelmed ..
    Any recommendations? Bless you!

    • Mor Rahi

      Hi dear friend
      I think it’s great to start WordPress.
      I did the same thing myself and made it free and I think it is very good and there is no problem.

  39. smore.com

    I do believe all the ideas you’ve offered to your post.
    They are really convincing and will certainly work. Nonetheless, the posts are very short
    for novices. Could you please lengthen them a little from
    subsequent time? Thanks for the post. pof natalielise

  40. plenty of fish

    I don’t even understand how I stopped up here, but I assumed this post was once
    great. I do not realize who you might be however certainly you are going to a famous blogger when you are not already.

    Cheers!

  41. plenty of fish

    I know this if off topic but I’m looking into starting my own blog and was curious what all is required to get setup?
    I’m assuming having a blog like yours would cost a pretty penny?

    I’m not very web savvy so I’m not 100% certain.
    Any recommendations or advice would be greatly appreciated.
    Kudos

  42. plenty of fish

    Thanks for some other informative site. Where else may I
    get that kind of info written in such a
    perfect way? I’ve a project that I’m simply now running on, and I have been at the glance out for such information.

  43. pof https://natalielise.tumblr.com

    Please let me know if you’re looking for a author for
    your blog. You have some really great articles and I believe I would
    be a good asset. If you ever want to take some of the load off, I’d really like to write some material for your blog in exchange for a link back to mine.
    Please shoot me an e-mail if interested. Regards! plenty of fish natalielise

  44. how to build backlinks for SEO

    I seriously love your website.. Excellent colors & theme. Did you make this website yourself? Please reply back as I’m trying to create my own site and want to learn where you got this from or what the theme is named. Thank you!

  45. plenty of fish dating site

    It’s a pity you don’t have a donate button!
    I’d most certainly donate to this excellent blog! I guess for now i’ll settle
    for bookmarking and adding your RSS feed to my Google account.
    I look forward to fresh updates and will talk about
    this site with my Facebook group. Chat soon!

  46. plenty of fish dating site

    you are really a excellent webmaster. The web site loading speed
    is amazing. It kind of feels that you are doing any distinctive trick.
    Moreover, The contents are masterwork. you’ve performed a wonderful
    job on this subject!

  47. plenty of fish dating site

    Your way of telling everything in this piece of writing is really good, all be able to effortlessly know
    it, Thanks a lot.

  48. plenty of fish dating site

    An outstanding share! I have just forwarded this onto a colleague who has
    been conducting a little research on this. And he in fact
    bought me lunch because I discovered it for
    him… lol. So allow me to reword this…. Thank YOU for the meal!!
    But yeah, thanks for spending some time to talk about this issue here on your web
    site.

  49. descargar facebook

    Hello there, I found your web site by way of Google while searching for a similar
    topic, your site got here up, it appears to be like great.
    I have bookmarked it in my google bookmarks.
    Hi there, simply was aware of your weblog through Google, and found that it’s truly informative.
    I am gonna watch out for brussels. I’ll be grateful if you continue this in future.
    Numerous other folks will likely be benefited from your writing.
    Cheers!

  50. minecraft games

    Whoa! This blog looks exactly like my old one!
    It’s on a entirely different subject but it has pretty much the same page layout and
    design. Outstanding choice of colors!

  51. reasons wordpress is good

    Hi, I do think this is an excellent blog. I stumbledupon it 😉 I may return yet again since I book marked it. Money and freedom is the best way to change, may you be rich and continue to help other people.

  52. quest bars cheap

    This is the right web site for anybody who would
    like to find out about this topic. You know a whole lot
    its almost tough to argue with you (not that I actually
    will need to…HaHa). You certainly put a fresh spin on a subject that has been written about for
    decades. Wonderful stuff, just excellent!

  53. quest bars cheap

    I think this is among the most significant info for me.
    And i am glad reading your article. But want to remark on some general things,
    The web site style is ideal, the articles is really excellent : D.

    Good job, cheers

  54. quest bars cheap

    After looking at a few of the blog articles on your web site, I
    honestly appreciate your way of writing a blog. I saved it to
    my bookmark webpage list and will be checking back soon. Please visit my website too and let me know
    how you feel.

  55. quest bars cheap

    Hi, of course this piece of writing is actually nice and I
    have learned lot of things from it concerning blogging.
    thanks.

  56. minecraft games

    Hey there! I just wanted to ask if you ever have any trouble with hackers?
    My last blog (wordpress) was hacked and I ended up losing
    a few months of hard work due to no back up. Do you have any solutions
    to stop hackers?

  57. minecraft games

    Amazing! This blog looks exactly like my old one! It’s on a completely different topic but
    it has pretty much the same page layout and design. Wonderful choice of colors!

  58. minecraft games

    Hi there, I enjoy reading all of your article. I wanted to write a
    little comment to support you.

  59. minecraft games

    Hi excellent blog! Does running a blog similar to this take a lot of work?
    I’ve absolutely no expertise in programming however I was hoping to start my own blog soon.
    Anyhow, should you have any recommendations or techniques for new blog owners
    please share. I know this is off topic nevertheless I
    just needed to ask. Kudos!

  60. minecraft games

    I am curious to find out what blog system you happen to be working with?
    I’m having some minor security problems with my latest blog
    and I’d like to find something more safeguarded.
    Do you have any suggestions?

  61. quest bars cheap

    Hello all, here every person is sharing these kinds of experience, so it’s fastidious to read this weblog, and I used to go to see this web site
    everyday.

  62. quest bars cheap

    We’re a bunch of volunteers and opening a brand new scheme in our community.

    Your website provided us with useful info to work on. You have done an impressive job and our
    whole group shall be grateful to you.

  63. quest bars cheap

    Spot on with this write-up, I truly feel this amazing site needs
    a great deal more attention. I’ll probably be returning
    to read more, thanks for the info!

  64. minecraft games

    I simply couldn’t leave your web site before suggesting that I really enjoyed the standard information an individual supply
    on your visitors? Is gonna be back ceaselessly to investigate cross-check new posts

  65. minecraft games

    Thanks for every other excellent article. The place else may just anybody get that type of info in such a perfect approach of writing?
    I have a presentation next week, and I’m at the look for such info.

  66. minecraft games

    Right here is the right blog for everyone who wants to find
    out about this topic. You know so much its almost tough to argue with you
    (not that I really will need to…HaHa). You definitely put a fresh spin on a topic that has been written about for decades.
    Excellent stuff, just excellent!

  67. minecraft games

    Thank you for another magnificent article. The place else could anybody
    get that type of info in such an ideal manner of writing?
    I have a presentation subsequent week, and I am on the search for such information.

  68. minecraft games

    I have been surfing on-line greater than three hours today, but I by no means found any interesting article like
    yours. It’s beautiful value enough for me. In my view,
    if all webmasters and bloggers made excellent content material as you did, the web
    will be much more helpful than ever before.

  69. quest bars cheap

    Good day! I could have sworn I’ve been to your blog before but
    after going through a few of the articles I realized it’s new to me.
    Regardless, I’m certainly pleased I found it and I’ll be book-marking it and checking back often!

  70. quest bars cheap

    I know this if off topic but I’m looking into starting my own blog
    and was curious what all is needed to get set up? I’m assuming having a blog like yours would cost
    a pretty penny? I’m not very web savvy so I’m not 100% positive.

    Any tips or advice would be greatly appreciated.
    Many thanks

    • Mor Rahi

      you’re welcome . I would be happy if I could help you.
      Are you familiar with WordPress?
      I think if you set up your own site with WordPress, it would be much easier and easier.
      I use WordPress myself and am happy.
      Anyway I’m in service.
      If you have questions or need help, I’ll help you as far as I know.
      be successful and victorious .

  71. coconut oil

    I really like reading through an article that can make people think.
    Also, thanks for allowing me to comment!

  72. quest protein bar

    Good day! Do you know if they make any plugins to
    assist with Search Engine Optimization? I’m trying to get my
    blog to rank for some targeted keywords but I’m not seeing very good gains.
    If you know of any please share. Thanks!

    • Mor Rahi

      Hi dear friend .
      I think if you use Long Tail (longer keywords in more detail), you will get a better result.
      Of course, I don’t know what you are working on, but overall it works better.
      For example: Instead of using the keyword ** Book of the Novel ** it is better to use the keyword ** White Night Book and other stories by Dostoyevsky ** to make your target audience easier to reach.
      Good luck

  73. benefits of coconut oil

    Hi this is kinda of off topic but I was wanting to know if blogs use WYSIWYG editors or if
    you have to manually code with HTML. I’m starting a blog soon but have no coding know-how so I wanted to
    get advice from someone with experience. Any help would be enormously
    appreciated!

    • Mor Rahi

      Hi dear friend .
      I have to say, honestly, I don’t know much about HTML.
      I use WordPress, which is great and I recommend it to you.
      be successful and victorious .

  74. benefits of coconut oil

    I have been surfing on-line more than 3 hours
    today, yet I by no means found any attention-grabbing article like yours.

    It’s pretty worth enough for me. In my opinion, if all site owners and bloggers made excellent content material as you did,
    the net might be a lot more helpful than ever before.

  75. coconut oil benefits

    Hi my friend! I want to say that this post is awesome,
    nice written and come with almost all significant infos.
    I’d like to see extra posts like this .

  76. plenty of fish dating site

    Great post! We are linking to this particularly
    great content on our website. Keep up the good writing.

  77. for more info

    Just to let you know your webpage appears a little bit unusual in Firefox on my notebook with Linux.

  78. custom made t-shirts

    Way cool! Some very valid points! I appreciate you penning this write-up and the rest of the website is also really good.

  79. www.imprints-tshirt.com

    This is really interesting, You are a very skilled blogger. I ave joined your rss feed and look forward to seeking more of your wonderful post. Also, I ave shared your website in my social networks!

  80. thiet ke noel

    Well, with only three games left in the tank and that this could turn out to

  81. benefits of social media for sales

    Very nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed surfing around your blog posts. After all I all be subscribing to your feed and I hope you write again soon!

  82. server rental

    Very useful information specifically the last part I care for such information a lot. I was looking for this certain information for a very long time. Thank you and good luck.

  83. arcadia realtor

    In it something is. Thanks for the help in this question, the easier, the better

  84. glendale real estate agent

    Your style is really unique in comparison to other people I ave read stuff from. Thanks for posting when you have the opportunity, Guess I will just book mark this site.

  85. pirate place pro

    very couple of internet sites that come about to become comprehensive beneath, from our point of view are undoubtedly very well really worth checking out

  86. VIZBOX lead the way with outdoor projector enclosure and control system solution

    Many thanks for sharing this great article. Very inspiring! (as always, btw)

  87. 1500d price all site

    uggs usa Best submit. I am looking forward to be able to reading through a lot more. Regards

  88. shared ssl certificate

    This very blog is really educating as well as factual. I have found a lot of useful stuff out of it. I ad love to come back again soon. Thanks!

  89. enviar mensaje masivo whatsapp web

    Wow, fantastic movie porn child weblog structure! How long have you ever been running a blog for? you make blogging glance easy. The entire glance of your website is great, as well as the content!

  90. buy instagram followers

    I was examining some of your content on this site and I believe this internet site is very instructive! Keep on posting.

  91. ZiXiuGnoJGgglr

    Very interesting points you have mentioned , appreciate it for putting up. Women have been trained to speak softly and carry a lipstick. Those days are over. by Bella Abzug.

  92. digital strategy

    you can look here How do you password protect a Blogger blog on a custom domain?

  93. hackernoon top story

    Looking forward to reading more. Great article.Really thank you! Really Cool.

  94. AV Magazine focus on VIZBOX outdoor projection solutions

    This is one awesome article.Really thank you! Will read on

  95. Music

    Pretty! This has been an incredibly wonderful post. Thank you for supplying these details.

  96. marketing agency near me in victoria

    very nice publish, i actually love this web site, carry on it

  97. VIZBOX Projector Enclosures

    There is visibly a lot to realize about this. I think you made certain good points in features also.

  98. Verosa Park Khang Dien quan 9

    Well I truly liked studying it. This subject procured by you is very constructive for proper planning.

  99. Promotional Polo Shirts Supplier

    magnificent issues altogether, you simply gained a new reader. What would you recommend about your put up that you simply made some days ago? Any certain?

  100. brexit

    It is not my first time to pay a quick visit this website, i am visiting this web

  101. psicólogo clínico málaga

    Major thanks for the blog post.Really looking forward to read more. Really Cool.

  102. Adriane

    Way cool! Some extremely valid points! I appreciate you penning this write-up and also the rest of the site is very good.

  103. Shaunda

    There is apparently a lot to realize about this. I think you made some nice points in features also.

  104. Marybeth

    This very blog is definitely interesting and besides factual. I have discovered a bunch of interesting tips out of this blog. I ad love to visit it again soon. Thanks!

  105. SEO Vancouver

    Pretty! This has been a really wonderful post. Many thanks for providing these details.

  106. SEO Vancouver

    It’а†s really a nice and helpful piece of information. I’а†m satisfied that you shared this helpful info with us. Please stay us up to date like this. Thank you for sharing.

  107. SEO Vancouver

    My brother suggested I might like this website. He was totally right. This post truly made my day. You can not imagine simply how much time I had spent for this info! Thanks!

  108. seo agency

    It as truly a great and helpful piece of information. I am glad that you shared this helpful tidbit with us. Please stay us up to date like this. Thanks for sharing.

  109. affordable seo canada

    make men and women think. Also, thank you for permitting me to comment!

  110. chung cu d`lusso

    I will right away snatch your rss feed as I can at to find your email subscription link or e-newsletter service. Do you have any? Please permit me know in order that I could subscribe. Thanks.

  111. five star Eco city

    Thanks for sharing this excellent piece. Very interesting ideas! (as always, btw)

  112. best seo vancouver

    Usually I do not read article on blogs, but I would like to say that this write-up very pressured me to take a look at and do so! Your writing taste has been surprised me. Thanks, quite great article.

  113. SEO Vancouver

    It as genuinely very complicated in this active life to listen news on TV, so I simply use world wide web for that purpose, and obtain the latest news.

  114. Martial Arts

    Looking forward to reading more. Great blog post.Much thanks again. Really Cool.

  115. C_SRM_72 exam book

    pretty useful material, overall I imagine this is really worth a bookmark, thanks

  116. Griselda

    Kudos for the excellent piece of writing. I am glad I ave taken the time to read this.

  117. Denae

    Wow, marvelous blog format! How lengthy have you ever been blogging for? you made blogging look easy. The total glance of your site is wonderful, let alone the content material!

  118. Personalized Products Printing

    There as certainly a lot to find out about this subject. I love all of the points you have made.

  119. Personalized Photo Products

    Very good information. Lucky me I discovered your site by chance (stumbleupon). I ave book-marked it for later!

  120. fondos de inversion usa

    What as up, I log on to your new stuff daily. Your story-telling style is witty, keep up the good work!

  121. anil c�makeup artist

    Looking forward to reading more. Great article.Much thanks again. Great.

  122. hire a space london

    Perfect work you have done, this internet site is really cool with superb info.

  123. dinner dates

    Really cool post, highly informative and professionally written..Good Job! car donation sites

  124. venue search London

    Start wanting for these discount codes early, as numerous merchants will start off

  125. venue search Edinburgh

    This is one awesome blog article.Much thanks again. Really Great.

  126. venue search Manchester

    Just Browsing While I was surfing today I saw a great post about

  127. venue search Birmingham

    This unique blog is obviously interesting additionally amusing. I have chosen helluva useful tips out of this source. I ad love to come back again and again. Thanks!

  128. social media posting

    This awesome blog is definitely cool and diverting. I have chosen helluva interesting things out of this blog. I ad love to come back again soon. Thanks!

  129. Garment Sourcing Company in Bangladesh

    Looking around I like to browse in various places on the web, regularly I will go to Digg and follow thru

  130. twXkDDQxocis

    I think other site proprietors should take this site as an model, very clean and magnificent user friendly style and design, let alone the content. You are an expert in this topic!

  131. venue search Brighton

    I simply couldn at depart your web site prior to suggesting that I really enjoyed the

  132. venue search Bristol

    I’а†ve recently started a blog, the info you provide on this website has helped me tremendously. Thanks for all of your time & work.

  133. token promotion

    Read, of course, far from my topic. But still, we can work together. How do you feel about trust management?!

  134. venue search Oxford

    Thanks for sharing, this is a fantastic article post.Really looking forward to read more. Really Great.

  135. ceramic tiling contractors

    Your posts continually include many of really up to date info. Where do you come up with this? Just saying you are very creative. Thanks again

  136. Hackernoon article

    Its hard to find good help I am regularly proclaiming that its hard to find quality help, but here is

  137. lap may phun suong

    Salaam everyone. May Allah give peace, Love and Harmony in your lives for the NEW YEAR.

  138. rental car in hcm city

    It as not that I want to copy your web-site, but I really like the layout. Could you let me know which design are you using? Or was it custom made?

  139. wholesale women's pajama pants

    Of course, what a magnificent site and educative posts, I surely will bookmark your site.Have an awsome day!

  140. ancestry

    This is my first time visit at here and i am truly happy to read all at one place.

  141. venue finder

    Normally I don at read article on blogs, but I wish to say that this write-up very pressured me to take a look at and do so! Your writing taste has been amazed me. Thanks, quite nice article.

  142. iphone event add attendees

    This can be a set of phrases, not an essay. you will be incompetent

  143. Wholesale Women's Pajama Pants

    This is really interesting, You are a very skilled blogger. I ave joined your rss feed and look forward to seeking more of your fantastic post. Also, I ave shared your website in my social networks!

  144. C_TSCM42_67 pdf

    You can certainly see your skills in the work you write. The world hopes for more passionate writers such as you who aren at afraid to say how they believe. At all times follow your heart.

  145. Casual Rainwear Supplier Bangladesh

    Only wanna comment that you have a very decent website , I like the style and design it actually stands out.

  146. seo commenting backlinks

    It as really a great and useful piece of info. I am glad that you shared this helpful information with us. Please keep us up to date like this. Thanks for sharing.

  147. coupon codes

    What as Happening i am new to this, I stumbled upon this I have found It absolutely useful and it has helped me out loads. I hope to contribute & help other users like its helped me. Good job.

  148. OEM Men's Brief Manufacturer Bangladesh

    so when I have time I will be back to read more,

  149. Darragh Grove-White

    It as not that I want to copy your internet site, but I really like the style and design. Could you tell me which theme are you using? Or was it especially designed?

  150. hawker house venue hire

    This is one awesome article post.Much thanks again. Will read on

  151. to read more

    There as noticeably a bundle to find out about this. I assume you made certain nice points in features also.

  152. cash offer

    I truly appreciate this post. I have been looking all more than for this! Thank goodness I found it on Bing. You ave created my day! Thank you again..

  153. dendy casino registracija

    Your method of telling everything in this article is genuinely pleasant, all can without difficulty know it, Thanks a lot.

  154. airbnb hosting tips

    You could definitely see your expertise within the work you write. The world hopes for more passionate writers such as you who are not afraid to say how they believe. At all times go after your heart.

  155. Best airbnb near Royal Jubilee Hospital Victoria BC

    Major thankies for the article.Much thanks again. Cool.

  156. truck-tire-repair-pros.com

    What would be There?s noticeably a bundle to find out about this. I assume you made certain good points in features also.

  157. Custom Apparel Printing

    I think this is a real great blog.Really looking forward to read more. Cool.

  158. บาคาร่า

    Thanks-a-mundo for the blog post.Really looking forward to read more. Keep writing.

  159. a qu� edad empieza la andropausia en el hombre

    there are actually many diverse operating systems but of course i ad nonetheless favor to utilize linux for stability,.

  160. all chainsaws

    Whoa! This blog looks just like my old one! It as on a totally different topic but it has pretty much the same page layout and design. Outstanding choice of colors!

  161. huacan diamond painting kits

    Spot on with this write-up, I really believe this website needs much more attention. I all probably be returning to see more, thanks for the information!

  162. nikon d5600 best buy

    Thorn of Girl Great info may be uncovered on this world wide web blog site.

  163. downloader instagram

    This blog was how do you say it? Relevant!! Finally I have found something that helped me. Many thanks!

  164. bandarq

    whoah this weblog is great i really like studying your articles. Stay up the great work! You already know, lots of persons are looking round for this information, you can aid them greatly.

  165. situs dominoqq terpercaya

    Your style is really unique in comparison to other people I have read stuff from. Thank you for posting when you have the opportunity, Guess I all just book mark this blog.

  166. whala boca chica resort

    the original materials to represent skin etc. As for the technology of air cushion; it is useful

  167. gia bo camera hikvision

    Major thanks for the blog post.Really looking forward to read more. Really Great.

  168. doc bao

    This is very interesting, You are a very skilled blogger. I have joined your feed and look forward to seeking more of your excellent post. Also, I ave shared your site in my social networks!

  169. Qlik Sense System Administrator Certification

    Thank you for another wonderful article. The place else could anyone get that type of info in such a perfect means of writing? I ave a presentation next week, and I am on the look for such info.

  170. abwasserpruefung

    There as noticeably a bundle to find out about this. I assume you made certain nice factors in features also.

  171. click here

    I will immediately clutch your rss feed as I can at find your email subscription link or newsletter service. Do you have any? Kindly permit me recognize in order that I may just subscribe. Thanks.

  172. kundendienstmonteur duesseldorf

    Muchos Gracias for your blog article.Much thanks again. Much obliged.

  173. games for pc free download

    Really informative article.Really looking forward to read more. Awesome.

  174. click for info

    You made some clear points there. I did a search on the issue and found most persons will agree with your blog.

  175. Custom Products Printing

    Outstanding place of duty, you have critical absent a quantity of outstanding points, I also imagine this is a fantastically admirable website.

  176. tennis net outdoor

    Looking forward to reading more. Great blog post.Really looking forward to read more. Will read on

  177. 10 best portable car jack

    There as definately a great deal to find out about this issue. I really like all the points you ave made.

  178. ao thun gia dinh

    There is a lot of other projects that resemble the same principles you mentioned below. I will continue researching on the message.

  179. Cap xach

    Your style is unique in comparison to other folks I ave read stuff from. Thank you for posting when you ave got the opportunity, Guess I all just book mark this page.

  180. what is decorative concrete

    You produced some decent points there. I looked on-line for the problem and situated most people will associate with along with your internet site.

  181. squareigloo

    There as certainly a great deal to learn about this issue. I like all the points you ave made.

  182. maintain your mercedes

    Way cool! Some very valid points! I appreciate you penning this post and also the rest of the site is also very good.

  183. residential concrete application

    Thank you ever so for you post.Much thanks again. Awesome.

  184. Outdoor Projector Enclosures

    Thanks-a-mundo for the blog post.Much thanks again. Really Cool.

  185. Tattoo Shops

    pretty beneficial stuff, overall I imagine this is really worth a bookmark, thanks

  186. Tattoo Designs

    You are my aspiration , I own few web logs and very sporadically run out from to brand.

  187. office removal services london

    writing like yours these days. I truly appreciate individuals like you! Take care!! Feel free to visit my blog post aarp life insurance

  188. Tattoo

    It as not that I want to copy your web site, but I really like the design and style. Could you let me know which design are you using? Or was it tailor made?

  189. latest apk for pc download

    Thanks for the article post.Really looking forward to read more. Really Great.

  190. smm panel

    This post post created me feel. I will write something about this on my blog. aаАа’б‚Т€ТšаЂаŒаАТ’аЂа†

  191. cheap diet pills

    This web site truly has all of the info I wanted about this subject and didn at know who to ask.

  192. Great Discounts

    Really appreciate you sharing this blog article.Really thank you! Fantastic.

  193. apps for pc download

    Really informative blog post.Really looking forward to read more. Awesome.

  194. apps for pc windows free download

    Interesting read , I am going to spend more time learning about this subject

  195. apps download for windows 7

    There as certainly a lot to know about this subject. I like all the points you ave made.

  196. cheap pills online

    pretty helpful material, overall I believe this is worth a bookmark, thanks

  197. cheap diet

    Well I definitely liked reading it. This article provided by you is very useful for correct planning.

  198. cheap diet pills

    Wow, what a video it is! Genuinely good feature video, the lesson given in this video is truly informative.

  199. cheap pills online

    The Silent Shard This may likely be fairly practical for many within your job opportunities I want to never only with my blogging site but

  200. compra venta de muebles de oficina

    usually posts some quite interesting stuff like this. If you

  201. buen psicologo malaga

    Really appreciate you sharing this article.Really looking forward to read more. Much obliged.

  202. axa seguros autos

    Very nice post. I just stumbled upon your blog and wanted to say that I ave really enjoyed surfing around your blog posts. After all I will be subscribing to your feed and I hope you write again soon!

  203. Personal Tax Accountants

    This website truly has all of the information and facts I wanted concerning this subject and didn at know who to ask.

  204. collares bonitos para perros

    Im obliged for the article post.Really looking forward to read more. Really Cool.

  205. Accountants

    write a litte more on this subject? I ad be very thankful if you could elaborate a little bit further. Bless you!

  206. mark edwards power efficiency guide

    Keep up the wonderful piece of work, I read few blog posts on this internet site and I believe that your blog is rattling interesting and has got bands of superb information.

  207. price reduslim

    pretty beneficial stuff, overall I believe this is worth a bookmark, thanks

  208. best cbd oil for anxiety

    Very good article. I absolutely appreciate this site. Continue the good work!

  209. this website

    Thankyou for this terrific post, I am glad I discovered this website on yahoo.

  210. Ebony MILF

    Usually I do not learn post on blogs, but I wish to say that this write-up very compelled me to try and do so! Your writing style has been surprised me. Thank you, very nice post.

  211. Chill NEWS Network

    You made some first rate factors there. I seemed on the internet for the difficulty and located most individuals will associate with together with your website.

  212. cheap diet pills

    Thanks for sharing, this is a fantastic blog.Really thank you! Fantastic.

  213. best cbd oil for pain

    Really informative blog.Really looking forward to read more. Cool.

  214. cheap diet

    I truly appreciate this post. I have been looking everywhere for this! Thank God I found it on Google. You ave made my day! Thanks again!

  215. cheap diet

    Network Promoting is naturally extremely well-known since it can earn you a lot of income inside a quite short time period..

  216. best motorcycle gps

    Well I really liked reading it. This post provided by you is very constructive for good planning.

  217. cheap pills

    you may have an important blog here! would you prefer to make some invite posts on my blog?

  218. vach kinh phong

    There is noticeably a bunch to know about this. I consider you made certain nice points in features also.

  219. click for more

    I think other website proprietors should take this site as an model, very clean and wonderful user friendly style and design, as well as the content. You are an expert in this topic!

  220. cheap diet pills

    Looking forward to reading more. Great blog post.Really thank you! Will read on

  221. cheap diet

    This is a very good tip particularly to those new to the blogosphere. Brief but very accurate info Many thanks for sharing this one. A must read post!

  222. cheap pills

    I truly appreciate this post. I have been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thank you again!

  223. free trial pills

    Its like you read my mind! You seem to know so much about this, like you wrote

  224. cheap diet

    Really appreciate you sharing this article.Really looking forward to read more. Want more.

  225. free diet pills

    Why people still make use of to read news papers when in this technological world everything is available on web?

  226. free trial pills

    Very good information. Lucky me I ran across your website by accident (stumbleupon). I have book marked it for later!

  227. diet pills

    You definitely ought to look at at least two minutes when you happen to be brushing your enamel.

  228. best cbd oil for pain

    You finished approximately nice points there. I did a explore taking place the deliver and found mainly guys will commend with your blog.

  229. voyance gratuite immediate par chat

    Pretty! This was a really wonderful article. Many thanks for providing this information.

  230. mat na naruko tram tra

    There is perceptibly a lot to identify about this. I suppose you made some good points in features also.

  231. spy camera pen

    You made some good points there. I looked on the internet for the issue and found most persons will go along with with your website.

  232. tronenvironmental.com

    You ave made some decent points there. I looked on the net for more information about the issue and found most people will go along with your views on this site.

  233. Nelly

    I simply could not depart your web site prior to suggesting that I extremely enjoyed the standard info a person provide on your guests? Is going to be again often in order to check out new posts

  234. parking lot security camera system installation NY

    Thanks again for the blog post.Thanks Again. Awesome.

  235. parking garage security camera system installation NY

    You have got a really nice layout for your blog i want it to utilize on my web site also.

  236. best cbd gummies

    You might add a related video or a related picture or two to grab readers excited about

  237. best motorcycle helmet speakers

    This is a topic that as near to my heart Take care! Exactly where are your contact details though?

  238. online real estate school California

    Loving the info on this site, you have done great job on the content.

  239. how to get your real estate license online california

    Thank you ever so for you blog.Really thank you! Really Cool.

  240. SEO Vancouver

    Thank you for helping out, good information. Whoever obeys the gods, to him they particularly listen. by Homer.

  241. best motorcycle battery

    Thank you for another fantastic post. Where else could anybody get that type of information in

  242. best motorcycle helmet speakers

    You have noted very interesting points! ps decent internet site.

  243. increase website traffic

    There as certainly a great deal to know about this issue. I really like all the points you have made.

  244. iphone Vinh Long

    pretty handy material, overall I feel this is worth a bookmark, thanks

  245. Homestay Vung Tau

    Sale |check out this site soon responded with a penalty. On weekends, she |check out this

  246. pod mod

    Usually I don at learn post on blogs, but I wish to say that this write-up very forced me to check out and do so! Your writing style has been amazed me. Thanks, very nice post.

  247. cua go cong nghiep

    serais incapable avons enfin du les os du. Il reste trois parcours magnifique elle,

  248. best cbd gummies

    Yay google is my world beater assisted me to find this outstanding web site !.

  249. poachtapp.com

    Wow, marvelous blog layout! How long have you ever been running a blog for? you made running a blog look easy. The whole glance of your website is fantastic, as well as the content!

  250. cbd oil|cbd near me

    It as really a nice and helpful piece of information. I am glad that you shared this useful info with us. Please keep us informed like this. Thanks for sharing.

  251. Atlantis Found

    The website loading speed is incredible. It seems that you are doing any distinctive trick.

  252. for details

    Thanks for sharing, this is a fantastic blog post.Much thanks again. Great.

  253. Tattoo Shops

    This is one awesome article post.Really looking forward to read more. Really Cool.

  254. ladies salon

    This website was how do you say it? Relevant!! Finally I have found something which helped me. Thanks a lot!

  255. vong bi skf

    I truly appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You have made my day! Thx again!

  256. west gate binh chanh

    It as hard to come by knowledgeable people about this topic, but you seem like you know what you are talking about! Thanks

  257. growth hacking tricks

    It as hard to find experienced people for this topic, however, you seem like you know what you are talking about! Thanks

  258. Custom Products Printing

    Usually I do not learn post on blogs, but I would like to say that this write-up very forced me to check out and do it! Your writing style has been surprised me. Thanks, quite great post.

  259. solar yard lanterns

    Looking around I like to surf around the internet, regularly I will go to Digg and read and check stuff out

  260. automatic dog feeder

    Im thankful for the article.Really thank you! Really Cool.

  261. small nightstands

    Thanks for writing such a good article, I stumbled onto your website and read a few articles. I like your way of writing

  262. you can check

    Your style is really unique compared to other people I ave read stuff from. Thanks for posting when you ave got the opportunity, Guess I will just book mark this site.

  263. South Florida Business Journal

    Really enjoyed this article.Much thanks again. Great.

  264. Better Business Bureau Colorado Springs

    Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is wonderful, as well as the content!

  265. Peachtree Business Products

    Visit this I was suggested this web site by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You are wonderful! Thanks!

  266. Landscape rock Columbia mo

    I’а†ve read a few good stuff here. Definitely worth bookmarking for revisiting. I wonder how so much attempt you put to make the sort of great informative website.

  267. my review here

    This is really interesting, You are a very skilled blogger. I ave joined your feed and look forward to seeking more of your fantastic post. Also, I ave shared your website in my social networks!

  268. small business accountants Birmingham

    This is really interesting, You are a very skilled blogger. I have joined your feed and look forward to seeking more of your fantastic post. Also, I ave shared your website in my social networks!

  269. ban da lavabo

    There are some lessons we have to drive the Muslims from its territory,

  270. whatsapp business enviar mensajes masivos

    Your web site provided us with valuable info to

  271. placa de torax precio

    Im obliged for the blog article.Much thanks again. Fantastic.

  272. postmenopausia que es

    pretty practical stuff, overall I consider this is really worth a bookmark, thanks

  273. sentirse bien david burns pdf gratis

    Usually I do not learn post on blogs, but I wish to say that this write-up very pressured me to try and do it! Your writing taste has been amazed me. Thank you, very great article.

  274. depresion en adolescentes hombres

    Wow, superb blog structure! How long have you been blogging for? you made blogging look easy. The full look of your site is excellent, let alone the content!

  275. click to read more

    This website definitely has all of the information I wanted about this subject and didn at know who to ask.

  276. accountancy firms near me

    Really appreciate you sharing this post.Much thanks again. Awesome.

  277. payday loans online

    That is a good tip particularly to those fresh to the blogosphere. Brief but very accurate info Thanks for sharing this one. A must read post!

  278. real estate agents in west Hollywood

    Keep up the great work , I read few posts on this internet site and I believe that your blog is rattling interesting and contains bands of great information.

  279. who is the best real estate agent in silverake

    posts from you later on as well. In fact, your creative writing abilities has motivated me to get

  280. temple city real estate agency

    pretty useful stuff, overall I imagine this is well worth a bookmark, thanks

  281. Pasadena real estate agent

    This blog was how do you say it? Relevant!! Finally I have found something that helped me. Many thanks!

  282. south Pasadena real estate agents

    Very nice post. I absolutely appreciate this website. Keep it up!

  283. who is the best real estate agent in san marino

    I will right away clutch your rss as I can at find your email subscription hyperlink or e-newsletter service. Do you ave any? Please allow me recognise so that I may just subscribe. Thanks.

  284. sistema win win

    Timon had the gifts of God, which is known for, plus an atmosphere pouch at the back

  285. spor giyim

    Your style is really unique in comparison to other people I ave read stuff from. Thanks for posting when you ave got the opportunity, Guess I all just book mark this blog.

  286. incarcare freon aer conditionat

    Very good blog article.Really looking forward to read more. Fantastic.

  287. sacramentoscoop.com

    Some times its Some times its a pain in the ass to read what blog owners wrote but this site is rattling user friendly !.

  288. cbd oil for sale

    Many thanks an additional superb write-up. The site else might anyone obtain that types of facts in such an easy way of writing? I get a display in the future, and I am within the hunt for like info.

  289. Ovalpool kaufen

    You have already known that coconut oil is not low calorie food however.

  290. for additional information

    you are not sure if they really are the Search Engine Optimization Expert they say they are.

  291. visit

    I?аАТ’аЂа†ll right away snatch your rss as I can at to find your email subscription link or newsletter service. Do you have any? Kindly let me understand in order that I may just subscribe. Thanks.

  292. http://www.claridgehoteluae.com/

    Nice blog right here! Additionally your web site a lot up fast! What web host are you the use of? Can I get your affiliate hyperlink for your host? I wish my website loaded up as fast as yours lol

  293. all on four los ageles

    Simply wanna say that this is extremely helpful, Thanks for taking your time to write this.

  294. Web SEO Directory

    Really informative article.Really looking forward to read more. Fantastic.

Leave a Reply

Your email address will not be published. Required fields are marked *