فرم هاي html

sali دوشنبه ۲۸ تیر ۰۰ ۱۴:۰۹ ۷ بازديد

فرم هاي html

وقتي كه مي خواهيد داده هايي را از سايت بازديدكننده جمع آوري كنيد، به فرم هاي HTML احتياج خواهيد داشت. به عنوان مثال در هنگام ثبت كاربر، اطلاعاتي مانند نام، آدرس ايميل و كارت اعتباري و غيره را جمع آوري مي كنيد. يك فرم داده ها را از بازديدكننده ي سايت مي گيرد و سپس آن را به يك برنامه ي پاياني مانند CGI، اسكريپت ASP يا اسكريپت PHP باز مي گرداند. برنامه ي پاياني فرايندهاي مورد نياز را بر اساس كار تعريف شده در برنامه، روي داده ي منتقل شده انجام مي دهد.
عناصر متفاوتي براي فرم در دسترس ميباشند، مانند فيلدهاي متن، فيلدهاي textarea، منوهاي رو به پايين، دكمه هاي راديو، چك باكس ها و غيره.

< form action="Script URL" method="GET|POST">

form elements like input, textarea etc.

< /form>

ويژگي هاي فرم

علاوه بر ويژگي هاي متداول، در زير ليستي از متداول ترين ويژگي هاي مربوط به فرم را مشاهده مي كنيد .

Attribute

Description

action

اسكريپت backend براي پردازش داده ي انتقال شده ي شما آماده ميباشد.

method

روشي براي بارگذاري داده. متداولترين روش هاي مورد استفاده GET و POST مي باشند.

target

پنجره ي هدف يا چارچوب را، جايي كه نتيجه ي اسكريپت نمايش داده خواهد شد، مشخص مي كند. اين ويژگي مقادير _blank, _self, _parent و غيره را به خود مي گيرد.

enctype

شما مي توانيد از ويژگي enctype براي مشخص كردن چگونگي برنامه نويسي توسط مرورگر قبل از ارسال به سرور، استفاده كنيد. مقادير ممكن عبارتند از: application/x-www-form-urlencoded - اين روش استانداردي است كه بيشتر فرم ها در سناريو هاي ساده استفاده مي كنند. mutlipart/form-data - اين روش زماني استفاده مي شود كه شما مي خواهيد داده هاي دوتايي را به شكل فايل هايي مانند تصوير بارگذاري كنيد.

كنترل هاي فرم HTML

انواع مختلفي از كنترل هاي فرم وجود دارند كه مي توانيد براي جمع آوري داده با استفاده از فرم HTML از آنها استفاده كنيد.

كنترل هاي ورودي متن
كنترل هاي چك باكس
كنترل هاي راديو باكس
كنترل هاي انتخاب باكس
باكس هاي انتخاب فايل
كنترل هاي مخفي
دكمه هاي قابل كليك شدن
ثبت و تنظيم مجدد

كنترل هاي ورودي متن

سه نوع ورودي متن وجود دارد كه در فرم ها استفاده مي شوند .

كنترل هاي ورودي متن تك خطي: اين كنترل براي آيتم هايي استفاده مي شود كه فقط يك خط از ورودي كاربر را لازم دارد، مانند باكس هاي جستجو و نام ها. اين كنترل ها با استفاده ازبرچسب < input> مربوطبه HTML ايجاد مي شوند.
كنترل ورودي گذرواژه: اين نيز يك متن ورودي تك خطي مي باشد، اما به محض اينكه كاربر كاراكتر را وارد مي كند، اين كنترل آن را مي پوشاند.
كنترل هاي متن ورودي چند خطي: زماني استفاده مي شود كه لازم است كاربر جزئياتي را وارد كند كه بيشتر از يك جمله مي باشند. كنترل هاي ورودي چند خطي با استفاده از برچسب < textarea> استفاده مي شوند.

كنترل هاي ورودي تك خطي

اين كنترل ها براي آيتم هايي استفاده مي شوند كه كاربر فقط يك خط ورودي احتياج دارد، مانند باكس هاي جستجو و نام ها و با استفاده از برچسب < input> مربوط به HTML ايجاد مي شوند.

مثال:

در اينجا مثال پايه اي مي بينيد از يك ورودي تك خطي كه براي گرفتن نام كوچك و نام خانوادگي به كار مي رود .

نمونه يك

Text Input Control

ويژگي ها

در زير ليستي از ويژگي هاي برچسب < input>را براي ايجاد فيلد متن مي بينيد.

Attribute

Description

type

نوع كنترل ورودي را نشان مي دهد و براي كنترل متن ورودي براي text تنظيم خواهد شد.

name

براي دادن نام به كنترلي استفاده مي شود كه قرار است براي تشخيص به سرور ارسال شود و مقدار بگيرد.

value

مي تواند براي ارائه ي يك مقدار اصلي در داخل كنترل استفاده شود.

size

اجازه مي دهد تا عرض كنترل متن ورودي را متناسب با كاراكترها تعيين كنيد.

maxlength

اجازه مي دهد تا حداكثر تعداد كاراكترهايي را كه يك كاربر مي تواند در يك تكست باكس وارد كند، مشخص كنيد.

كنترل هاي پسورد ورودي

اين كنترل نيز يك كنترل تك خطي مي باشد، اما به محض اينكه كاربر كاراكترها را وارد مي كند، آنها را مي پوشاند. اين ها نيزبا استفاده از برچسب < input> مربوط به HTML ايجاد مي شوند، اما نوع ويژگي با عنوان password تنظيم ميشود.

مثال:

در اينجا مثالي از ورودي تك خطي پسوورد مي بينيد كه براي گرفتن پسورد كاربر استفاده مي شود.

نمونه دو

ويژگي ها

در زير ليست مربوط به ويژگي هاي برچسب < input>را براي ايجاد فيلد پسوورد مي بينيد.

Attribute

Description

type

نوع كنترل ورودي را نشان مي دهد و براي كنترل ورودي پسوورد، براي password تنظيم خواهد شد.

name

براي نام گذاري كنترلي استفاده مي شود كه براي تشخيص وگرفتن مقدار به سرور فرستاده مي شود.

value

براي ارائه ي يك مقدار اوليه در داخل كنترل استفاده مي شود.

size

اجازه مي دهد تا عرض كنترل متن ورودي را با كاراكترها تعيين كنيد.

maxlength

اجازه مي دهد تا حداكثر تعداد كاراكترهايي را كه يك كاربر مي تواند در يك تكست باكس وارد كند، تعيين كنيد.

كنترل هاي متن ورودي چند خطي

زماني استفاده مي شود كه يك كاربر بايد جزئياتي را ئارد كند كه بيشتر از يك جمله مي باشند. كنترل هاي ورودي چند خطي با استفاده از برچسب < textarea> ايجاد ميشوند.

مثال:

در اينجا مثالي را مي بينيد از يك ورودي متن چند خطي كه براي ارائه ي توصيفات آيتم استفاده مي شود.

نمونه سه

ويژگي ها

در زير ليستي از ويژگي هاي برچسب < textarea> ارائه شده اند.

Attribute

Description

name

براي نامگذاري كنترلي استفاده مي شود كه به سرور ارسال مي شود تا تشخيص داده شده و مقدار بگيرد.

rows

تعداد رديف هاي area box مربوط به متن را نشان مي دهد.

cols

تعداد ستون هاي area box مربوط به متن را نشان مي دهد.

كنترل چك باكس

چك باكس ها زماني استفاده مي شوند كه بيشتر از يك گزينه قرار است انتخاب شود. آنها نيزبا استفاده از برچسب < input>ايجاد مي شوند، اما نوع ويژگي به checkbox تنظيم مي شود.

مثال:

در اينجا مثالي از كد HTML را مشاهده مي كنيد براي يك فرم با دو چك باكس.

نمونه چهار

در زير ليستي از ويژگي هاي برچسب < checkbox> را مي بينيد:

Attribute

Description

type

نوع كنترل ورودي را نشان مي دهد و براي كنترل ورودي چك باكس با checkbox كنترل خواهد شد.

name

براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور ارسال مي شود.

value

مقداري كه اگر چك باكس انتخاب شود، استفاده خواهد شد.

checked

اگر بخواهيد آن را به طور پيش فرض انتخاب كنيد، با checked تنظيم مي شود.

كنترل دكمه ي راديو

دكمه هاي راديو زماني استفاده ميشوند كه بين چندين گزينه تنها يك گزينه بايد انتخاب شود. اين كنترل ها نيز با برچسب < input> ايجاد ميشوند، اما نوع ويژگي با radio تنظيم مي شود.

مثال:

در اينجا مثالي از كد HTML مي بينيد براي يك فرم با دو دكمه ي راديو.

نمونه پنج

ويژگي ها

در زير ليستي از ويژگي هاي دكمه ي راديو را مي بينيد.

Attribute

Description

type

نوع كنترل ورودي را نشان مي دهد و براي كنترل ورودي چك باكس با عنوان radio تنظيم مي شود.

name

براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور ارسال مي شود.

value

مقداري كه radio box انتخاب شود، استفاده خواهد شد.

checked

اگر مي خواهيد آن را به عنوان پيش فرض استفاده كنيد، به checked تنظيم كنيد.

كنترل Select Box

يك Select Boxكه منوي رو به پايين نيز ناميده مي شود، گزينه اي را براي ارائه ي گزينه هاي مختلف به شكل يك ليست رو به پايين ارائه مي دهد، كه كاربر مي تواند از آن يك يا بيشتر از يك گزينه را انتخاب كند.

مثال:

در اينجا مثالي از كد HTML براي يك فرم با يك جعبه ي رو به پايين مي بينيد.

نمونه شش

در زير ليستي از ويژگي هاي برچسب < select> را مي بينيد.

Attribute

Description

name

براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور انتقال مي شود.

size

براي نمايش يك ليست باكس اسكرولينك استفاده مي شود.

multiple

اگر روي multiple تنظيم شده باشد، به كاربر اجازه مي دهد تا چند آيتم را از منو انتخاب كند.

در زير ليستي از ويژگي هاي مهم برچسب < option> ارائه شده است.

Attribute

Description

value

اگر در سلكت باكس يك گزينه انتخاب شده باشد، اين مقدار استفاده خواهد شد.

selected

مشخص مي كند كه اين گزينه رد زمان بارگذاري صفحه، بايد گزينه ي انتخابي باشد.

label

يك روش جايگزين براي برچسب دار كردن گزينه ها.

فايل آپلود باكس

اگر مي خواهيد به كاربر اجازه دهيد تا فايلي را روي وب سايت شما آپلود كند، به يك كنترل فايل آپلود احتياج خواهيد داشت، كه Select Boxنيز ناميده مي شود. اين ويژگي با استفاده از برچسب < input> نيز ايجاد مي شود، اما نوع ويژگي با file تنظيم مي شود.

مثال:

در اينجا مثالي را مي بينيد از كد HTML براي يك فرم با يك فايل آپلود باكس.

نمونه هفت

ويژگي ها

در زير ليستي از ويژگي هاي فايل آپلود باكس را مي بينيد.

Attribute

Description

name

براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور انتقال مي شود.

نوع فايل هايي را كه سرور مي پذيرد، تعيين مي كند.

كنترل هاي دكمه

راه هاي مختلفي براي ايجاد دكمه هاي قابل كليك شدن وجود دارد. شما با استفاده از برچسب < input> و با تنظيم نوع ويژگي آن به button دكمه هاي قابل كليك شدن ايجاد كنيد. نوع ويژگي مي تواند مقادير زير را بگيرد.

Type

Description

submit

دكمه اي را ايجاد مي كند كه به طور خودكار يك فرم را مي پذيرد.

reset

دكمه اي را ايجاد مي كند كه به طور خودكار كنترل هاي فرم را به مقادير اوليه ي خود بازمي گرداند.

button

دكمه اي را ايجاد مي كند كه براي اجراي اسكريپت كاربر، زماني كه كاربر آن دكمه را كليك مي كند، استفاده مي شود.

image

يك دكمه ي قابل كليك شدن ايجاد مي گند، اما ما مي توانيم از يك تصوير به عنوان زمينه ي دكمه استفاده كنيم.

مثال:

در اينجا مثالي از كد HTML براي يك فرم با سه نوع دكمه را مي بينيد.

نمونه هشت

كنترل هاي مخفي شده ي فرم

كنترل هاي مخفي شده فرم براي پنهان كردن داده در داخل صفحه اي استفاده مي شوند كه بعدا مي توانند به سرور ارسال شوند. اين كنترل در داخل كد مخفي شده و روي صفحه ي حقيقي ظاهر نمي شود. براي مثال فرم مخفي شده ي زير براي حفظ شماره ي صفحه ي جاري استفاده مي شود. وقتي كه كاربر روي next page كليك كند، مقدار كنترل مخفي شده به سرور وب ارسال شده و در آنجا تصميم خواهد گرفت كه بر اساس انتقال صفحه ي جاري، كدام صفحه نمايش داده خواهد شد.

مثال:

در اينجا مثالي از كد HTML براي نمايش كاربرد كنترل مخفي شده مي بينيد.

نمونه نه

جهت مشاهده نمونه مثال ها برروي دوره آموزش طراحي سايت كليك نماييد.

برچسب ها: آموزش طراحي سايت, دوره آموزش سايت, دوره برنامه نويسي,

۰ نظر

پس زمينه در html

sali سه شنبه ۱۵ تیر ۰۰ ۱۴:۱۲ ۵ بازديد

background در html

آموزش طراحي سايت

به طور پيش فرض رنگ زمينه ي صفحه ي وب شما سفيد مي باشد. ممكن است اين زمينه را دوست نداشته باشيد، اما نگراني وجود ندارد. HTML دو روش مناسب زير را ارائه مي دهد تا زمينه ي صفحه وب خود را به دلخواه بياراييد.

زمينه ي HTML با رنگ ها.
زمينه ي HTML با تصاوير.

اكنون اجازه بدهيد هر دو روش را يكي يكي و با استفاده از مثال هاي مناسب بررسي كنيم.

زمينه ي HTML با رنگها

ويژگي bgcolor براي كنترل زمينه ي يك عنصر HTML، به ويژه بدنه ي صفحه و زمينه ي جدول، استفاده مي شود. در زير تركيب استفاده از bgcolor را با هر برچسب HTML مي بينيد.

< tagname bgcolor="color_value" ...>

اين color- value مي تواند به هركدام از فرمت هاي زير ارائه شود.

< table bgcolor="lime"

< table bgcolor="#f1f1f1">

< table bgcolor="rgb(0,0,120)">

مثال:

در اينجا مثالي را مي بينيد از تنظيم زمينه ي يك برچسب HTML.

نمونه يك

HTML Background Colors

This background is yellow

This background is sky blue

This background is green

زمينه ي HTML با تصاوير

آموزش html css

ويژگي background همچنين مي تواند براي كنترل زمينه ي يك عنصر HTML، به ويژه بدنه ي صفحه و زمينه هاي جدول، استفاده شود. شما مي توانيد يك تصوير را به عنوان زمينه ي صفحه و يا جدول HTML خود استفاده كنيد. در زير تركيب استفاده از ويژگي background را با هر عنصر HTML مي بينيد.

توجه:

ويژگي background به عنوان ويژگي خوبي تلقي نمي شود و توصيه مي شود از style sheet براي تنظيم زمينه استفاده كنيد.

< tagname background="Image URL" ...>

متداول ترين فرمت هاي مورد استفاده ي تصوير عبارتند از JPEG، PNG و GIF.

مثال:

در اينجا مثال هايي را از تنظيم تصوير به عنوان زمينه ي جدول مشاهده مي كنيد.

نمونه دو

زمينه هاي طرح دار و شفاف

شما ممكن است الگوها و زمينه هاي شفاف بسياري را در وب سايت هاي نختلف ديده باشيد. اين امر به راحتي و با استفاده از تصاوير طرح دار و شفاف در زمينه قابل دستيابي مي باشد. توصيه مي شود در هنگام ايجاد تصاوير طرح دار يا شفاف GIF يا PNG، از كوچكترين ابعاد ممكن آنها استفاده كنيد، حتي به كوچكي 1x1 براي جلوگيري از بارگذاري آهسته.

مثال:

در اينجا مثالي از تنظيم يك الگوي زمينه براي يك جدول را مشاهده مي كنيد.

نمونه سه

براي مشاهده نمونه مثال ها برروي دوره آموزش طراحي سايت كليك نماييد.

برچسب ها: آموزش طراحي سايت, دوره آموزش سايت, دوره برنامه نويسي,

۰ نظر

آموزش لينك ايميل در HTML

sali یکشنبه ۰۹ خرداد ۰۰ ۱۲:۵۸ ۱ بازديد

آموزش لينك ايميل در HTML

لينك ايميل HTML

قرار دادن يك لينك ايميل HTML روي صفحه ي وب خود كار سختي نيست، اما اين كار ممكن است باعث بروز مشكل اسپم هاي غيرضروري در اكانت ايميل شما شود. افرادي هستند كه مي توانند برنامه هايي را براي جمع آوري چنين ايميل هايي اجرا كنند و سپس آنها را با راه هاي مختلف براي اسپم كردن استفاده كنند.
مي توانيد از گزينه ديگري استفاده كنيد تا افراد به راحتي بتوانند به شما ايميل ارسال كنند. يك گزينه مي تواند استفاده از فرم هاي HTML باشد براي جمع آوري داده هاي يوزر و سپس استفاده ازاسكريپت PHP يا CGI براي ارسال ايميل.
براي يك مثال ساده، فرم Contact Us را چك كنيد. با استفاده از اين فرم يك فيدبك از يوزر گرفته و سپس از يك برنامه ي CGI استفاده مي كنيم كه در حال جمع آوري اين اطلاعات و ارسال ايميل به يك email ID ارائه شده مي باشد.

برچسب HTML Email

برچسب < a> در HTML براي مشخص كردن يك آدرس ايميل و ارسال ايميل، گزينه هايي را به شما ارائه مي دهد. در حاليكه از برچسب < a> به عنوان يك email tag استفاده مي كنيد، از mailto:email address همراه با ويژگي href نيز استفاده خواهيد كرد. در زير تركيب استفاده از mailto را به جاي استفاده از http مي بينيد.

نمونه يك

SendMail

Send Email

اكنون اگر يوزر روي اين لينك كليك كند، email client آغاز به كار خواهد كرد ( مانند lotus notes و outlook express و غيره.) كه روي كامپيوتر شما نصب شده است. ريسك ديگري در استفاده از اين گزينه براي ارسال ايميل وجود دارد، زيرا اگر يوزر email client نصب شده روي كامپيوتر خود نداشته باشد، ارسال ايميل ممكن نحواهد بود.

تنظيمات پيش فرض

شما مي توانيد يك موضوع ايميل و يك بدنه ي ايميل پيش فرض همراه با آدرس ايميل خود ايجاد كنيد. در زير مثال استفاده از بدنه و موضوع پيش فرض را مشاهده مي كنيد.

نمونه دو

SendMail

Send Feedback

برچسب ها: آموزش طراحي سايت, دوره آموزش سايت, دوره برنامه نويسي, آموزش طراحي سايت با html, آموزش html css,

۰ نظر

آموزش List

sali چهارشنبه ۰۵ خرداد ۰۰ ۱۴:۵۳ ۰ بازديد

آموزش طراحي سايت - آموزش List

آموزش List

< ul>- ليست بدون ترتيب. اين ليست آيتم ها را با استفاده از bullet هاي ساده ليست مي كند.
< ol> - ليست منظم. اين ليست از نمودارهاي عددي مختلف براي ليست كردن آيتم هاي شما استفاده مي كند.
< dl>- ليست تعريف. اين ليست آيتم هاي شما را به همان روشي كه در ديكشنري منظم شده اند، منظم مي كند.

ليست هاي بدون ترتيب HTML

ليست بدون ترتيب مجموعه اي از آيتم هاي مربوط به هم مي باشد كه هيچگونه نظم و ترتيب خاصي ندارند. اين ليست با استفاده از برچسب < ul> در HTML ايجاد مي شود. هر آيتم در ليست با يك bullet مشخص مي شود.

مثال:

نمونه يك

HTML Unordered List

Beetroot

Ginger

Potato

Radish

ويژگي type

مي توانيد از ويژگي type براي برچسب < ul> استفاده كنيد تا نوع bullet خود را مشخص كنيد، كه به طور پيش فرض يك ديسك مي باشد. در زير گزينه هاي ممكن را مشاهده مي كنيد.

<ultype="square">

<ultype="disc">

<ultype="circle">ul>ul>ul>


در زير مثالي را ميبينيد كه در آن از < ul type="square"> استفاده مي كنيم.



نمونه دو





HTML Unordered List



Beetroot

Ginger

Potato

Radish




 
در زير مثالي را مي بينيد كه در آن از < ul type="disc"> استفاده كرده ايم.
 

نمونه سه
 




HTML Unordered List



Beetroot

Ginger

Potato

Radish






 
در زير مثالي را مي بينيد كه در آن از < ul type="circle"> استفاده كرده ايم.
 

نمونه چهار
 



HTML Unordered List



Beetroot

Ginger

Potato

Radish





 
ليست هاي منظم HTML
 
اگر تمايل داريد آيتم هاي خود را به جاي قرار دادن در يك ليست داراي bullet، در يك ليست عددگذاري شده قرار دهيد، مي توانيد از ليست منظم HTML استفاده كنيد. اين ليست با استفاده از برچسب < ol> ايجاد مي شود. شماره گذاري از يك شروع شده و براي هر ليست منظم عنصر بعدي با اضافه شدن يك عدد و به همراه برچسب< li>اضافه مي شود.
مي توانيد از ويژگي type براي برچسب < ol> استفاده كنيم تا نوع شماره گذاريمورد نظر خود را مشخص كنيد. به طور پيش فرض شماره گذاري به وسيله ي عدد انجام مي شود. در زير گزينه هاي ممكن را مشاهده مي كنيد.
 

<ol type="1">
    - Default-Case Numerals.
<oltype="I">
        - Upper-Case Numerals.
<oltype="i">
            - Lower-Case Numerals.
<oltype="a">
                - Lower-Case Letters.
<oltype="A"> - Upper-Case Letters.ol>ol>ol>ol>ol>



در زير مثالي را مي بينيد كه در آن از < ol type="1"> استفاده كرده ايم.

نمونه پنج




HTML Ordered List



Beetroot

Ginger

Potato

Radish





در زير مثالي را مي بينيد كه در آن از < ol type="I"> استفاده مي كنيم.
 

نمونه شش




HTML Ordered List



Beetroot

Ginger

Potato

Radish





در زير مثالي را ميبينيد كه در آن از < ol type="i"> استفاده كرده ايم.
 

نمونه هفت
 




HTML Ordered List



Beetroot

Ginger

Potato

Radish





: مثال
در زير مثالي را مي بينيد كه در آن از < ol type="A"> استفاده كرده ايم.
 

نمونه هشت




HTML Ordered List



Beetroot

Ginger

Potato

Radish





 
در زير مثالي را مي بينيد كه در آن از< ol type="a"> استفاده كرده ايم.
 

نمونه نه





HTML Ordered List



Beetroot

Ginger

Potato

Radish





ويژگي start
شما مي توانيد از ويژگي start براي برچسب < ol> استفاده كنيد تا نقطه ي شروع شماره گذاري خود را مشخص كنيد. در زير گزينه هاي ممكن را مشاهده مي كنيد.
<ol type="1" start="4">

    - Numerals starts with 4.
<oltype="I"start="4">
        - Numerals starts with IV.
<oltype="i"start="4">
            - Numerals starts with iv.
<oltype="a"start="4">
                - Letters starts with d.
<oltype="A"start="4">    - Letters starts with D.
ol>ol>ol>ol>ol>

 


در زير مثالي را مي بينيد كه در آن از < ol type="i" start="4"> استفاده مي كنيم.

 

نمونه ده
 




HTML Ordered List



Beetroot

Ginger

Potato

Radish





ليست هاي تعريف HTML

HTML و XHTML ليست هايي به نام ليست هاي تعريف را پشتيباني مي كنند كه در اين ليست ها ورودي ها مانند ترتيب لغات در ديكشنري قرار مي گيرند. اين ليست يك روش ايده آل براي ارائه يك فهرست از معاني يا ليستي از اصطلاحات يا ليستي از نام ها و مقادير مي باشد.
ليست تعريف از سه برچسب زير استفاده مي كند
 

< dl> - شروع ليست را تعريف مي كند.

 مثال:

نمونه يازده



HTML Definition List



HTML

This stands for Hyper Text Markup Language

HTTP

This stands for Hyper Text Transfer Protocol




جهت مشاهده كدها برروي آموزش طراحي سايت كليك نماييد


            
   برچسب ها:
آموزش طراحي سايت, دوره آموزش سايت, دوره برنامه نويسي, آموزش آنلاين و حضوري طراحي سايت,


        
           
              آموزش ساخت جدول در html 
          
          
            
              
               sali  سه شنبه ۰۴ خرداد ۰۰ ۱۲:۱۸   ۱ بازديد  
آموزش طراحي سايت - آموزش ساخت جدول در html
آموزش Table در HTML
جدول هاي HTML به نويسندگان وب اجازه مي دهند تا داده هايي مانند متن، تصاوير، لينك ها، جدول هاي ديگر و غيره در رديف ها و ستون ها تنظيم كنيد. جدول هاي HTML با استفاده از برچسب < table> ايجاد مي شوند كه در آن برچسب < tr> براي ايجاد رديف ها و برچسب < td> براي ايجاد داده هاي سلول ها استفاده مي شوند.

 مثال:

نمونه يك



   
HTML Tables
   
 
      
       
    
 
          
       
   
    
   
        
 
          
        
 
  


Row 1, Column 1
Row 1, Column 2


Row 2, Column 1
Row 2, Column 2




ويژگي هاي colspan و rowspan
اگر بخواهيد دو يا بيشتر از دو ستون را با هم تلفيق كنيد از ويژگي colspan استفاده مي كنيد. به طور مشابه اگر بخواهيد دو يا بيشتر از دو رديف را در يك رديف تلفيق كنيد از rowspan استفاده كنيد.

 مثال:

نمونه سه



 
  HTML Table Colspan/Rowspan

   
     
  
       
    
       
    
     
      
     
  
   
    
 
      
 
      
    


Column 1
Column 2
Column 3


Row 1 Cell 1
Row 1 Cell 2
Row 1 Cell 3


Row 2 Cell 2
Row 2 Cell 3


Row 3 Cell 1




پس زمينه ي جدول
مي توانيد به دو روش زير براي جدول خود زمينه اي تنظيم كنيد.
 

ويژگي Bg color: مي توانيد رنگ زمينه را براي همه ي جدول و يا تنها براي يك سلول تنظيم كنيد.
ويژگي background: مي توانيد يك تصوير را براي كل جدول يا تنها يك سلول تنظيم كنيد.

همچنين مي توانيد با استفاده از ويژگي bordercolor رنگ حاشيه را نيز تنظيم كنيد.

 مثال:

نمونه چهار



   
HTML Table Background

 
  
   
    
       
    
     
      
   
        
   
    
     
  
        
   
    
 
  


Column 1
Column 2
Column 3

Row 1 Cell 1
Row 1 Cell 2
Row 1 Cell 3

Row 2 Cell 2
Row 2 Cell 3


Row 3 Cell 1




در اينجا مثالي در رابطه با استفاده از ويژگي background مي بينيد. در اين مثال ما از تصويري موجود در image directory استفاده كرده ايم.
 

نمونه پنج
 


 
  HTML Table Background

 
  
     
  
     
      
     
      
   
        
 
      
       
   
    
       
    


Column 1
Column 2
Column 3


Row 1 Cell 1
Row 1 Cell 2
Row 1 Cell 3


Row 2 Cell 2
Row 2 Cell 3


Row 3 Cell 1





 
آموزش html css
طول و عرض جدول
شما مي توانيد طول و عرض جدولي را با استفاده از ويژگي هاي width و height تنظيم كنيد. شما مي توانيد طول و عرض جدول را به پيكسل و يا متناسب با درصد صفحه ي جاري تنظيم كنيد.

 مثال:

نمونه شش



   
HTML Table Width/Height

   
 
      
     
      
 
          
     
  
     
  
     
      
   
        
   
    
    


Row 1, Column 1
Row 1, Column 2


Row 2, Column 1
Row 2, Column 2




شرح جدول
برچسب caption يك توضيح يا يك تيتر براي جدول مي باشد كه در بالاي جدول نمايش داده مي شود. اين برچسب در ورژن هاي جديد HTML/XHTML توصيه مي شود.

 مثال:

نمونه هفت

    HTML Table Caption
    
 
      
        
       
    
   
        
 
      
 
      
   
        
            
     
  
   

This is the caption

row 1, column 1
row 1, columnn 2


row 2, column 1
row 2, columnn 2


تيتر، بدنه و پاورقي جدول
جدول ها مي توانند به سه بخش تقسيم شوند: تيتر، بدنه و پاورقي جدول. عنوان و فوت(tfoot) در واقع شبيه به تيتر و پاورقي در يك فايل پردازش word مي باشند كه براي هرصفحه يكي مي باشد، در حاليكه بدنه همان نگه دارنده ي محتواي اصلي جدول مي باشد.
سه عنصر براي مجزا كردن عنوان، بدنه و فوت در يك جدول عبارتند از
 

< thead> - براي ايجاد يك تيتر مجزا
< tbody>- براي نشان دادن بدنه ي اصلي جدول
< tfoot> - براي ايجاد يك پاورقي مجزا در يك جدول

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

 مثال:

نمونه هشت



  HTML Table
   
   
    
       
    
       
        
            
       
     
  
 
          
         
      
   
        
     
  
     
  
   
        
         
      
   
            
     
          
 
              
     
    
   
    
    



This is the head of the table




This is the foot of the table




Cell 1
Cell 2
Cell 3
Cell 4




جدول هاي تودرتو
آموزش طراحي سايت با html
شما مي توانيد از يك جدول در داخل جدولي ديگر استفاده كنيد. نه تنها جدول ها، بلكه مي توانيد تمام برچسب ها را در داخل برچسب داده ي استفاده كنيد.

 مثال:
در زير مثالي را از استفاده ي يك جدول و برچسب هاي ديگر در داخل يك سلول مشاهده مي كنيد.
براي مشاهده اين مثال برروي آموزش طراحي سايت كليك نماييد.
            
   برچسب ها:
آموزش طراحي سايت, دوره آموزش سايت, دوره برنامه نويسي, آموزش برنامه نويسي, 


          
          
            
              
              
                ۰ نظر 
            
          
        
        
           
              آموزش طراحي سايت -آموزش Attributeها در HTML 
          
          
            
              
               sali  سه شنبه ۲۱ اردیبهشت ۰۰ ۱۶:۴۲   ۵ بازديد  
آموزش طراحي سايت -آموزش Attributeها در HTML-آموزش HTML
 
آموزش طراحي سايت -آموزش Attributeها در HTML-آموزش HTML
ويژگي هاي زبان HTML
 
در اين مبحث از آموزش هاي HTML مي خواهيم به بررسي برخي از ويژگي هاي زبان HTML بپردازيم:
برخي از برچسب هاي HTML مانند برچسب هاي تيتر و برچسب هاي پاراگراف، و موارد استفاده ي آنها را مشاهده كرديم. تاكنون از آنها به ساده ترين شكل خود استفاده كرده ايم، اما بيشتر برچسب هاي HTML مي توانند ويژگي هايي داشته باشند كه مقداري اطلاعات اضافه مي باشد.
يك attribute براي تعريف ويژگي هاي عنصر HTML استفاده مي شود و در داخل برچسب بازكننده ي عنصر قرار مي گيرد. همه ي ويژگي ها از دو بخش تشكيل شده اند: name و value.
 
 

Name ويژگي مورد نظر شما براي تنظيم ميباشد، به عنوان مثال عنصر پاراگرافp> > در مثال ارائه شده داراي ويژگي مي باشد كه نام آن align مي باشد و شما مي توانيد از آن براي تنظيم پاراگراف در صفحه استفاده كنيد.
Value همان است كه شما مي خواهيد مقدار ويژگي تنظيم شود و هميشه در داخل گيومه قرار مي دهيد. مثال زير سه مقدار ممكن ازيك ويژگي تراز را نشان مي دهد: چپ، مركز و راست.

ويژگي نام ها و ويژگي مقادير غيرهوشمند مي باشند. به هرحال وب جهاني Consortium (W3C) مقادير ويژگي ها را در HTML 4 با حروف كوچك پيشنهاد مي دهد.
 مثال:
نمونه يك
 
ويژگي هاي اصلي
چهار ويژگي اصلي كه مي توانند در اكثر عناصر HTML مورد استفاده قرار بگيرند عبارتند از:

id
title
class
style

ويژگي id
ويژگي id يك برچسب HTML مي تواند براي تشخيص يك عنصر در يك صفحه ي HTML مورد استفاده قرار بگيرد. دو دليل اصلي براي تمايل شما به استفاده از ويژگي id در يك عنصر وجود دارد:

اگر يك عنصر يك ويژگي را به عنوان تشخيص دهنده ي منحصر به فرد استفاده مي كند شناخت تنها آن عنصر و محتواي مربوط به آن ممكن مي باشد.
اگر داراي دو عنصر هم نام در يك صفحه ي وب مي باشيد، مي توانيد از عنصر id براي تشخيص اين عناصر هم نام استفاده كنيد.

در مورد طراحي صفحه در آموزش هاي مجزا بحث خواهيم كرد، اكنون اجازه بدهيد از ويژگي id براي تشخيص عناصر بين دو پاراگراف استفاده كنيم، مانند مثال زير:
<p id="html">This para explains what is HTMLp>
 
<p id="css">This para explains what is Cascading Style Sheetp>
 
 
. به وبسايت آموزش طراحي سايت مراجعه فرماييد  HTML يراي ديدن وِِيژگي هاي عناصر
 
.   چنانچه سوالي در اين زمينه داريد در كامنت مطرح نماييد و يا با شماره تلفن 09373889811در ارتباط 
باشيد
 

            
   برچسب ها:
آموزش طراحي سايت, دوره آموزش سايت, دوره برنامه نويسي, 


          
          
            
              
              
                ۰ نظر 
            
          
        
        
           
              آموزش طراحي سايت- آموزش تگ هاي اصلي در Html 
          
          
            
              
               sali  یکشنبه ۱۹ اردیبهشت ۰۰ ۱۶:۳۸   ۷ بازديد  
آموزش طراحي سايت- آموزش تگ هاي اصلي در Html
در اين سري از مقالات آموزش html مي خواهيم به بيان تگ در html بپردازيم.
 
 برچسب هاي تيتر:
هر داكيومنت با يك تيتر آغاز مي شود. شما مي توانيد از اندازه هاي مختلف براي تيترهاي خود استفاده كنيد. HTML داراي شش سطح مي باشد كه از< h1>, < h2>, < h3>, < h4>, < h5> و < h6> عناصر استفاده مي كند. در هنگام نمايش هر تيتر مرور گر يك خط قبل و يك خط بعد از تيتر اضافه مي كند.
مثال:
نمونه يك



 




 
 
 
  Heading Example
 
 
 
This is heading 1
  
 
 
This is heading 2
 
 
 
This is heading 3
 
 
 
This is heading 4
 
 
 
This is heading 5
 
 
 
This is heading 6


 
 

برچسب پاراگراف:
برچسب < p> به روش طراحي متن شما در پاراگراف هاي مختلف اشاره دارد. هر پاراگراف متن بايد بين برچسب بازكننده ي < p> وبستن < /p> قرار بگيرد، همانطور كه در مثال زير مشاهده مي كنيد:
 

نمونه دو



 




 
 
  Paragraph Example
 
 
 
Here is a first paragraph of text.
 
 
 
Here is a second paragraph of text.
 
 
Here is a third paragraph of text.
 
 




 



برچسب شكست لينك
هرزمان كه شما از < br /> عنصر استفاده كنيد، هر چيزي كه آن را دنبال مي كند از خط بعد شروع خواهد شد. اين برچسب نمونه اي از يك عنصرempty مي باشد، زماني كه لازم نيست برچسبي را باز كنيد يا ببنديد چرا كه چيزي براي رفتن بين آنها وجود ندارد.
در بچسب < br />، يك فضاي خالي بين كااكترهاي br و اسلش جلوي آن وجود دارد. اگر شما اين فضا را حذف كنيد، مرورگرهاي قديمي تر در اجراي خط شكست مشكل خواهند داشت، در حاليكه اگر اسلش را حذف كنيد برچسب < br> باقيمانده در HTML معتبر نمي باشد.
 مثال:
نمونه سه



 



 
    Line Break  Example
 
 
 
Hello
         You delivered your assignment ontime.
        Thanks

        Mahnaz   
 
 
 

مركزگذاري متن
مي توانيد با استفاده از برچسب < center> مي توانيد هر محتوايي را در مركز صفحه يا در مركز هر سلول از يك جدول قرار دهيد.

 مثال:
نمونه چهار



 




 
 
    Centring Content Example4
 
 
 
This text is not in the center.
 
 
  
       
 
 
This text is in the center.
        
 
 
 
 
 

خطوط افقي
خطوط افقي براي بخش هاي شكست بصري يك داكيومنت استفاده مي شوند. برچسب < hr> خطي از موقعيت كنوني داكيومنت به حاشيه ي سمت راست ايجاد كرده و خط را طبق آن مي شكند.
به عنوان مثال ممكن است تمايل داشته باشيد بين دو پاراگراف خطي قرار دهيد، همانطور كه در مثال زير ارائه شده است:
 مثال:
نمونه پنج




 





 
 
 
Horizontal Line Example5
 
 
 
This is paragraph one and should be on top
 
 
 

   
 
 
This is paragraph two and should be at bottom


 
 

و باز برچسب< hr /> مثالي از Empty مي باشد كه نيازي به باز كردن يا بستن برچسب نداريد زيرا چيزي براي رفتن بين آنها وجود ندارد.
در عنصر < hr /> يك فضاي خالي بين كاراكترهاي hr و اسلش مقابل آن وجود دارد. اگر اين فضا را حذف كنيد مرورگرهاي قديمي تر در اجراي خط افقي مشكل خواهند داشت. در حاليكه اگر اسلش مقابل آن را حذف كنيد عنصر باقيمانده < hr> مي باشد كه در HTML فاقد اعتبار مي باشد.
 
حفظ طراحي
گاهي اوقات تمايل داريد كه متن فرمت دقيق خود در HTML را دنبال كند، در اين موارد مي توانيد از برچسب پريفرمت < pre> استفاده كنيد.
هر متن بين برچسب باز كننده ي < pre> و برچسب بستن < /pre> طراحي متن منبع را حفظ خواهد كرد.
 مثال:
نمونه شش

 
 
 
Preserve Formatting Example6
 
 
 
    function testFunction( strText ){    alert (strText) }
 
 
 
 

سعي كنيد از همان كد بدون نگهداري آن بين برچسب هاي < pre>...< /pre> استفاده كنيد.
 
فضاهاي غيرشكست:
فرض كنيد مي خواهيد از عبارت "12 Angry Men." استفاده كنيد. در اينجا از مرورگر نمي خواهيد عبارت را بين دو خط به صورت 12 Angry و Men بشكند.

An example of this technique appears in the movie "12 Angry Men."
 

در مواردي كه نمي خواهيد مرورگر متن را بشكند بايد به جاي يك فضاي عادي از فضاي غير شكست استفاده كنيد. براي مثال وقتي "12 Angry Men" را در يك پاراگراف كدگذاري مي كنيد بايد از كدي مانند زير استفاده كنيد:
مثال:
نمونه هفت



 






 
 
 
  Nonbreaking Spaces Example7
 
 
 
 
An example of this technique appears in the movie "12 Angry Men."
 
 
 
 

 
 

 

            
   برچسب ها:
آموزش طراحي سايت, دوره آموزش سايت, دوره برنامه نويسي, آموزش آنلاين و حضوري طراحي سايت, 


          
          
            
              
              
                ۰ نظر 
            
          
        
        
           
              آموزش طراحي سايت -  آموزش html  
          
          
            
              
               sali  جمعه ۱۷ اردیبهشت ۰۰ ۱۳:۵۷   ۷ بازديد  
آموزش html-آموزش طراحي سايت
آموزش مقدمات HTML
دوره آموزش طراحي سايت
در اين مقاله آموزش HTML مي خواهيم مقدمات آنرا براي شما دوستان عزيز بيان كنيم.
HTML مخفف عبارت Hyper Text Markup Language مي باشد كه در واقع گسترده ترين زبان استفاده شده در صفحات وب مي باشد.
HTML توسط برنرز لي در اواخر سال 1991 ايجاد شد، اما html 2.0 اولين نوع استاندارد آن بود كه در سال 1995 منتشر شد. HTML 4.01 ورژن مهمي از HTML بود كه دراواخر 1999 منتشر شد. گرچه در آموزش html HTML 4.01 ورژني است كه به طور گسترده استفاده مي شود، اما معمولا HTML 5 را داريم كه توسعه ي يافته html 4.01 است و در سال 2012 منتشر شد.
اين آموزش HTML براي آشنا كردن طراحان و توسعه دهندگان وب با نياز براي درك HTML با جزئيات كافي به همراه يك نظر كلي ساده و مثال هاي عملي، طراحي شده است. اين آموزش HTML به شما محتواي كافي براي شروع با HTML از جايي كه مي توانيد تخصصي با سطح بالاتر داشته باشيد، ارائه مي دهد.
 
پيش نيازها:
قبل از پيش رفتن براي آموزش HTML شما بايد يك دانش پايه براي كار با ويندوز و سيستم عملياتي Lunix داشته باشيد. علاوه بر اين براي آموزش HTML شما بايد با موارد زير آشنا باشيد:
دوره آموزش طراحي سايت

تجربه كار با هر ويرايشگري مانند Notepad، Notepad ++ و يا Editplus و غيره براي آموزش html .
چگونگي ايجاد مسيرها و فايل ها روي كامپيوتر خود براي آموزش html
چگونگي مسيريابي از طريق مسيرهاي مختلف براي آموزش html.
چگونگي تايپ كردن محتوا در يك فايل و ذخيره ي آنها روي كامپيوتربراي آموزش html.
درك تصاوير با فرمت هاي مختلف مانند JPEG و PNG براي آموزش html.

امتحان كردن HTML روي خط

نمونه يك



Hello World!




 

            
   برچسب ها:
آموزش طراحي سايت, دوره آموزش سايت, دوره برنامه نويسي, 


          
          
            
              
              
                ۱ نظر

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

row 1, column 1	row 1, columnn 2
row 2, column 1	row 2, columnn 2

This is the head of the table
This is the foot of the table
Cell 1	Cell 2	Cell 3	Cell 4