سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML پس زمینه در html , رنگ در html و فونت ها در Html را یاد گرفتیم , در قسمت دهم با ادامه آموزش طراحی سایت همراه باشید:

فرم های html

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

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

form elements like input, textarea etc.

< /form>

ویژگی های فرم

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

کنترل های فرم HTML

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

• کنترل های ورودی متن
• کنترل های چک باکس
• کنترل های رادیو باکس
• کنترل های انتخاب باکس
• باکس های انتخاب فایل
• کنترل های مخفی
• دکمه های قابل کلیک شدن
• ثبت و تنظیم مجدد

کنترل های ورودی متن

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

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

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

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

مثال:

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

نمونه یک

First name:

Last name:

ویژگی ها

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

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

کنترل های پسورد ورودی

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

مثال:

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

نمونه دو

User ID :

Password:

ویژگی ها

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

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

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

مثال:

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

نمونه سه

Description :

Enter description here...</p> <p class="md-block-unstyled md-block-ltr">

ویژگی ها

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

کنترل چک باکس

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

مثال:

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

نمونه چهار

Maths

Physics

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

کنترل دکمه ی رادیو

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

مثال:

در اینجا مثالی از کد HTML می بینید برای یک فرم با دو دکمه ی رادیو.

نمونه پنج

Maths

Physics

ویژگی ها

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

کنترل Select Box

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

مثال:

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

نمونه شش

Physics

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

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

فایل آپلود باکس

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

مثال:

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

نمونه هفت

ویژگی ها

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

کنترل های دکمه

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

مثال:

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

نمونه هشت

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

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

مثال:

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

نمونه نه

This is page 10

با ادامه دوره آموزش طراحی سایت همراه ما باشید

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

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML لینک های عکس در html , لینک های متنی , لینک ایمیل در HTML و قابها در html را یاد گرفتیم , در قسمت نهم با ادامه آموزش HTML همراه باشید:

پس زمینه در 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 همچنین می تواند برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه های جدول، استفاده شود. شما می توانید یک تصویر را به عنوان زمینه ی صفحه و یا جدول HTML خود استفاده کنید. در زیر ترکیب استفاده از ویژگی background را با هر عنصر HTML می بینید.

توجه:

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

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

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

مثال:

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

نمونه دو

This background is filled up with HTML image.

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

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

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

مثال:

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

نمونه سه

This background is filled up with a pattern image.

رنگ در html:

رنگ ها برای دادن یک ظاهر و احساس خوب به وب سایت شما بسیار مهم می باشند. شما می توانید رنگ ها را روی لایه ی صفحه با استفاده از برچسب < body>مشخص کنید، یا می توانید رنگ ها را برای برچسب های مجزا با استفاده از ویژگی bgcolor مشخص کنید.
برچسب< body>دارای ویژگی های زیر می باشد که می تواند برای تنظیم رنگ های مختلف استفاده شود.

bgcolor

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

text

رنگی را برای متن تنظیم می کند

alink

رنگی را برای لینک های فعال یا انتخاب شده تنظیم می کند.

link

رنگی را برای متن لینک شده تنظیم می کند.

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

روش های کدگذاری رنگ HTML

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

Color names -

می توانید نام رنگ ها را به طور مستقیم تعیین کنید، به عنوان مثال سبز، قرمز، آبی و غیره.

Hex codes -

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

Color decimal or percentage values-

این مقدار با استفاده از ویژگی rgb( ) تعیین می شود.

اکنون این روش های رنگ گذاری را یکی یکی بررسی خواهیم کرد.

رنگ های HTML – نام رنگ

می توانید برای تنظیم رنگ متن یا زمینه به طور مستقیم از نام رنگ استفاده کنید. W3C لیستی از 16 رنگ پایه را دارد که توسط یک اعتباز سنج HTML ارزیابی می شود، اما نام بیشتر از 200 رنگ مختلف وجود داردکه توسط مرورگرهای مهم پشتیبانی می شوند.

16 رنگ استاندارد W3C

در اینجا نام 16 رنگ استاندارد W3C را مشاهده می کنید، پیشنهاد می شود که از آنها استفاده کنید.

مثال:

در اینجا مثال هایی را میبینید از تنظیم زمینه ی یک برچسب HTML به وسیله ی نام رنگ.

نمونه یک

Use different color names for for body and table and see the result.

رنگ های HTML – کدهای Hex

هگزادسیمال یک نمایش 6 رقمی از یک رنگ می باشد. دو رقم اول یعنی RR نمایانگر رنگ قرمر (Red) می باشند، دو رقم بعدی (GG) مقدار سبز (green) را نشان می دهند و آخرین دو رقم (BB) نیز مقدار آبی (blue) را نشان می دهند.
هر کد هگزادسیمال به وسیله ی یک علامت # دنبال می شود. در ادامه رنگ های مورد استفاده در نشانه گذاری هگزادسیمال را مشاهده می کنید.

در زیر مثال هایی را می بینیند از تنظیم زمینه ی یک برچسب HTML به وسیله ی کد رنگ در هگزادسیمال.

نمونه دو

Use different color hexa for for body and table and see the result.

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

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

مقدار این رنگ با استفاده از ویژگی rgb( ) مشخص می شود. این ویژگی سه مقدار می گیرد که هر کدام برای سبز، قرمز و آبی می باشد. مقدار می تواند عددی بین 0 و 255 یا یک درصد باشد.

توجه:

همه ی مرورگرها ویژگی ( )rgb را پشتیبانی نمی کنند، بنابراین توصیه می شود از آن استفاده نکنید.

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

در اینجا مثال هایی را مشاهده می کنید از تنظیم زمینه ی یک برچسب HTML به وسیله ی برچسب rgb() با کد رنگ.

نمونه سه

Use different color code for for body and table and see the result.

در زیر لیستی از 216 رنگ را مشاهده می کنید که تصور می شود سالم ترین و مستقل ترین رنگ های کامپیوتر باشند. این رنگ ها از کد هگزای 000000 تا FFFFFF متفاوت می باشند و توسط همه ی کامپیوترهای دارای پالت رنگ 256 تایی پشتیبانی می شوند.

فونت ها:

فونت ها نقش مهمی در زیبا ساختن و خواناتر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود، اما شما می توانید از برچسب < font>در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب< basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size، color و face می باشد که فونت شکا را به دلخواه در می آورد. برای تغییر هرکدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب < font> استفاده کنید. متنی که دنبال می کند، تغییر یافته با قی می ماند تا زمانی که شما آن را با < /font> برچسب ببندید. شما می توانید یکی از ویژگی ها یا همه ی ویژگی های داخل برچسب < font> را تغییر دهید.

نکته:

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

تنظیم اندازه ی فونت

شما می توانید با استفتده از ویژگی size اندازه فونت محتوا را تنظیم کنید. دامنه ی مقادیر قابل قبول از 1 (کوچکترین) تا 7 (بزرگترین) می باشد. اندازه ی فونت پیش فرض 3 می باشد.

مثال:

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

نمونه یک

Font size="1"

Font size="2"

Font size="3"

اندازه ی فونت مربوط

شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند. می توانید آن را مانند< font size="+n"> or < font size="-n"> مشخص کنید.

مثال:

نمونه دو

Font size="-1"

Font size="+1"

Font size="+2"

تنظیم ظاهر فونت

شما می توانید با استفاده از ویژگی face ظاهر فونت را تنظیم کنید، اما باید بدانید که اگر کاربر بازدیدکننده ی صفحه، فونت را نصب نکرده باشد، قادر به دیدن آن نخواهد بود. در عوض کاربر ظاهر فونت پیش فرض را می بیند که برای کامپیوترش مناسب می باشد.

مثال:

نمونه سه

Times New Roman

Verdana

Comic Sans MS

تعیین ظاهر فونت جایگزین

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

< font face="arial,helvetica">

< font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

اگر هیچکدام از فونت های ارائه شده نصب نشده باشند، بنابراین فونت پیش فرض Times New Roman نمایش داده خواهد شد.

تنظیم رنگ فونت

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

مثال:

نمونه چهار

This text is in pink

عنصر < basefont>

انتظار می رود که عنصر < basefont> یک اندازه، رنگ و ظاهر پیش فرض برای هر بخشی از داکیومنت که در برچسب < font>قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر < font>استفاده کنید تا تنظیمات < basefont> را انجام دهید.
برچسب < basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از 1+ برای فونت های بزرگتر و کمتر از 2- برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.

مثال:

نمونه پنج

This is the page's default font.

Example of the element<="" h2="">>

پایان بخش نهم آموزش طراحی سایت

آموزش طراحی سایت:صفر تا 100

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML لیست List , لینک های متنی را یاد گرفتیم , در قسمت هشتم با ادامه آموزش HTML همراه باشید:

آموزش لینک های عکس در html

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

مثال:

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

نمونه یک

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

تصاویر حساس به ماوس

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

استانداردهای HTML و XHTML یک ویژگی ارائه می دهند که به شما اجازه می دهد لینک های مختلفی را در داخل یک تصویر اجرا کنید. شما می توانید براساس مختصات مختلف موجود روی تصویر، لینک های مختلفی را روی یک تصویر مجزا ایجاد کنید. زمانی که لینک های متفاوت به مختصات متفاوت ضمیمه می شود، می توانیم برای باز کردن داکیومنت های تارگت روی بخش های مختلف تصویر کلیک کنیم. چنین تصاویری که به ماوس حساس می باشند، تصاویر نقشه نامیده میشوند. دو روش برای ایجاد چنین تصاویری وجود دارد.

سرور Server-side image maps - توسط ویژگی ismap از برچسب < img> فعال می شود و دستیابی به یک سرور و پردازش برنامه های مربوط به تصویر نقشه لازم می باشد.

کلاینت Client-side image maps - با استفاده از ویژگی usemap از برچسب < img> همراه با برچسب های متناظر< map> و < area> ایجاد می شود.

Server side image maps

در اینجا به سادگی تصویر خود را داخل یک هایپرلینک قرار داده و از ویژگی ismap استفاده کنید که آن را یک تصویر خاص می سازد و وقتی یوزر در بخشی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را همراه با URL مشخص شده در برچسب < a>به سرور وب منتقل می کند. سرور از مختصات اشاره گر ماوس استفاده می کند تا تعیین کند کدام داکیومنت باید به مرورگر بازگردانده شود.
زمانی که ismap استفاده می شود، ویژگی href از برچسب < a> باید URL یک برنامه ی سرور را مانند یک cgi یا اسکریپت PHP و غیره در برداشته باشد، تا درخواست ورودی را براساس مختصات انتقال داده شده پردازش کند. مختصات موقعیت ماوس پیکسل های صفحه میباشند که از گوشه ی بالای سمت چپ تصویر شمرده می شوند و با (0,0) شروع می شوند. مختصات دنبال شده با یک علامت سوال، به انتهای URL اضافه می شوند.

مثال:

نمونه دو

سپس مرورگر پارامترهای جستجوی زیر را به سرور می فرستد که می تواند توسط اسکریپت ismap.cgi یا فایل map پردازش شود و شما می توانید هر داکیومنتی را که دوست داشته باشید به این مختصات لینک کنید.

/cgi-bin/ismap.cgi?20,30

از این طریق شما می توانید لینک های مختلفی را به مختصات متفاوت یک تصویر اختصاص دهید، و وقتی این مختصات کلیک می شوند، می توانید داکیومنت های لینک شده ی متناظر را باز کنید.

Client side image maps

این تصاویر به وسیله ی ویژگی usemap از برچسب < img> فعال می شوند و به وسیله ی برچسب های ضمیمه ی< map>و< area> تعریف می شوند.
نقشه ای که قرار است نقشه را طراحی کند، به وسیله ی< img> به عنوان یک تصویرعادی وارد صفحه می شود، به جز اینکه این مورد ویژگی اضافه ای به نام usemap همرا خود دارد. مقدار ویژگی usemap مقداری می باشد که در یک برچسب< map>استفاده می شود تا برچسب های تصویر و نقشه را لینک کند.< map>همراه با برچسب های< area> همه ی مختصات تصویر و لینک های مربوطه را تعریف می کند.
برچسب< area> در داخل برچسب نقشه مختصات و شکل حاشیه های قابل کلیک در داخل تصویر را تعریف می کند. در اینجا مثالی از تصویر نقشه می بینید.

نمونه سه

سیستم مختصات

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

rect = x1 , y1 , x2 , y2

ایکس x1 و y1 مختصات گوشه ی بالای سمت چپ از مستطیل می باشد. x2 و y2 مختصات گوشه ی سمت راست پایین می باشند.

circle = xc , yc , radius

ایکس xc و yc مختصات مرکز دایره و radius شعاع دایره می باشد. دایره ای به مرکز200,50 با شعاع 25 دارای ویژگی coords="200,50,25" خواهد بود.

poly = x1 , y1 , x2 , y2 , x3 , y3 ,... xn , yn

جفت های مختلف x-y رئوس چند ضلعی می باشند، با یک خط که از یک نقطه به نقطه ی دیگر کشیده شده. یک چندضلعی لوزی شکل با بالاترین راس آن در نقطه ی 20،20 و 40 پیکسل، در عریض ترین نقطه ی خود دارای ویژگی coords="20,20,40,40,20,60,0,40" می باشد.
تمام مختصات مربوط به بالاترین گوشه ی سمت چپ تصویر می باشند. هر شکل دارای یک URL مربوطه می باشد. می توانید از هر نرم افزار تصویری برای دانستن مختصات موقعیت های مختلف استفاده کنید.

آموزش لینک ایمیل در HTML

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

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

برچسب HTML Email

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

نمونه یک

Send Email

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

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

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

نمونه دو

آموزش قابها در html

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

نقطه ضعف های چارچوب ها:

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

ایجاد چارچوب ها:

برای استفاده از چارچوب ها در یک صفحه از برچسب < frameset> به جای < body>استفاده می کنیم. برچسب< frameset> چگونگی تقسیم پنجره به چارچوب را تعریف می کند. ویژگی rows از برچسب < frameset> چارچوب های افقی و ویژگی cols نیز چارچوب های عمودی را تعریف می کنند. هر چارچوب توسط برچسب < frame> نشان داده شده است و تعریف می کند که کدام داکیومنت HTML باید در داخل چارچوب باز شود.

مثال:

در زیر مثالی را برای ایجاد سه چارچوب افقی می بینید.

نمونه یک

</p> <p class="md-block-unstyled md-block-ltr" style="box-sizing: border-box; margin: 20px 0px !important; direction: ltr; color: #4a4a4a; font-family: Vazir, roboto; font-size: 17.6px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-style: initial; text-decoration-color: initial;"><body></p> <p class="md-block-unstyled md-block-ltr" style="box-sizing: border-box; margin: 20px 0px !important; direction: ltr; color: #4a4a4a; font-family: Vazir, roboto; font-size: 17.6px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-style: initial; text-decoration-color: initial;">Your browser does not support frames.</p> <p class="md-block-unstyled md-block-ltr" style="box-sizing: border-box; margin: 20px 0px !important; direction: ltr; color: #4a4a4a; font-family: Vazir, roboto; font-size: 17.6px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-style: initial; text-decoration-color: initial;"></body></p> <p class="md-block-unstyled md-block-ltr" style="box-sizing: border-box; margin: 20px 0px !important; direction: ltr; color: #4a4a4a; font-family: Vazir, roboto; font-size: 17.6px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-style: initial; text-decoration-color: initial;">

ویژگی های برچسب < frameset>:

ویژگی های برچسب < frame>

مرورگرهایی که frame ها را پشتیبانی می کنند

اگر کاربر از مرورگرهای قدیمی یا مرورگرهایی استفاده کند که frame را پشتیبانی نمی کنند، عنصر < noframes>باید به یوزر نمایش داده شود. بنابراین شما باید یک عنصر < body>را داخل عنصر < noframes>قرار دهید، زیرا تصور می شود که عنصر< frameset>جایگزین عنصر< body>می شود. اما اگر یک مرورگر < frameset>را درک نکند، بنابراین باید آنچه را که داخل عنصر< body>می باشد درک کند که حاوی عنصر < noframes>می باشد.
شما می توانید به یوزرهای خود که از مرورگرهای قدیمی استفاده می کنند، پیام هایی بدهید. برای مثال پیام Sorry!! your browser does not support frames. ، همانطور که در مثال بالا نشان داده شده است.

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

نام frame و ویژگی های target

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

مثال:

اجازه بدهید مثال زیر را بررسی کنیم که داری کد زیر می باشد:

نمونه دو

Your browser does not support frames.

در اینجا دو ستون ایجاد کرده ایم که قرار است با دو ستون پر شوند. اولین frame دارای عرض 200 پیکسل می باشد و حاوی نوار منوی مسیر یابی می باشد که توسط فایل menu.htm اجرا می شود. دومین ستون فضای باقیمانده را پر کرده و حاوی بخش اصلی صفحه خواهد بود و توسط فایل main.htm اجرا می شود. برای هرسه لینک موجود در نوار منو یک frame هدف به عنوان main_page ذکر کرده ایم، بنابراین هر زمان روی لینک های موجود در نوار منو کلیک کنید، لینک موجود در main_page باز خواهد شد.
در زیر محتوای فایل menu.htm را مشاهده می کنید.

نمونه سه

Google

Microsoft

در زیر محتوای فایل main.htm را مشاهده می کنید.

نمونه چهار

This is main page and content from any link will be displayed here.

So now click any link and see the result.

اکنون می توانید لینک های موجود در پنل چپ را کلیک کرده و نتیجه را مشاهده کنید. ویژگی target نیز یکی از مقادیر زیر را می گیرد:

آموزش Iframes در html

شما می توانید یک frame درون خطی را با استفاده از برچسب < iframe>مربوط به HTML تعریف کنید. این برچسب به برچسب < frameset>ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود. برچسب< iframe>یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها.
ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.

مثال:

در زیر مثالی را می بینید که چگونگی استفاده از < iframe> را توضیح می دهد.

ویژگی های برچسب < iframe>

بسیاری از ویژگی های برچسب < iframe> شامل نام، گروه، حاشیه، id، longdesk، طول حاشیه، عرض حاشیه، نام، اسکرول کردن، روش و تیتر، درست مانند ویژگی های متناظر با برچسب < frame> رفتار می کنند.

" />

پایان بخش هشتم آموزش طراحی سایت

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML را شروع کردیم , در قسمت پنجم با ادامه آموزش HTML ( آموزش ساخت جدول ) همراه باشید:

آموزش Table در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table>ایجاد می شوند که در آن برچسب < tr>برای ایجاد ردیف ها و برچسب < td>برای ایجاد داده های سلول ها استفاده می شوند.

مثال:

نمونه یک

            Row 1, Column 1

            Row 1, Column 2

ویژگی های colspan و rowspan

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

مثال:

نمونه سه

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

پس زمینه ی جدول

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

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

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

مثال:

نمونه چهار

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

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

نمونه پنج

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

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.

مثال:

نمونه شش

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

شرح جدول

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

مثال آموزش طراحی سایت:

نمونه هفت

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>- برای ایجاد یک پاورقی مجزا در یک جدول

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

مثال:

نمونه هشت

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

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

مثال:

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

امتحان کنید

1945

424

• تاریخ ارسال:

1394/07/27

Name

Salary

Ramesh Raman

5000

Shabbir Hussein

7000

دریافت این مقاله بصورت PDF

دریافت سورس کد مقاله

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

tahlildadeh.com

یا

www.tahlildadeh.com

پایان بخش ششم آموزش طراحی سایت

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML را شروع کردیم , در قسمت پنجم با ادامه آموزش HTML همراه باشید:

آموزش Meta Tag در HTML

در این قسمت از آموزش HTML می خواهیم به Meta Tag در HTML و نحوه استفاده از آن در صفحات وب اشاره کنیم.
HTML علاوه بر مشخص کردن اطلاعات مهم به روش های مختلف در مورد یک داکیومنت، به شما اجازه می دهد تا متادیتا را نیز مشخص کنید. عناصر META می توانند برای وارد کردن جفت مقدار/نام استفاده شوند، این جفت ویژگی های داکیومنت HTML مانند نویسنده، تاریخ اتمام، لیست کلمات کلیدی، داکیومنت نویسنده و غیره را ارائه میدهد.
برچسب < meta> برای ارائه ی چنین اطلاعات اضافه ای استفاده می شود. این برچسب یک عنصر خالیست و دارای برچسب بستن نیست اما اطلاعاتی را با ویژگی آن در خود دارد. شما می توانید بر اساس اطلاعاتی که می خواهید در داکیومنت خود نگهداری کنید، یک برچسب یا بیشتر از یک برچسب متا وارد داکیومنت خود کنید. اما به طور کل برچسب های متا وضعیت ظاهری داکیومنت را تحت تاثیر قرار نمی دهند، بنابراین از لحاظ ظاهری استفاده کردن یا نکردن از آنها مشخص نمی شود.

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

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

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

مشخص کردن کلمات کلیدی

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

مثال:

در این مثال برچسب های متا، متادیتا و HTML را با عنوان کلمات کلیدی در مورد داکیومنت وارد می کنیم.

< title >Meta Tags Example< /title >

< meta name="keywords" content="HTML, Meta Tags, Metadata" >

توصیف داکیومنت

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

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

بازبینی تاریخ داکیومنت

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

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

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

تازه سازی داکیومنت:

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

مثال:

اگر می خواهید صفحه ی وب شما پس از هر 5 ثانیه ریفرش شود، از ترکیب زیر استفاده کنید:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="refresh" content="5" / >

ریدایرکت Redirect کردن صفحه

می توانید از برچسب برای Redirect کردن صفحه ی خود استفاده کنید، همچنین می توانید دوره ای را مشخص کنید که پس از آن صفحه به طور خودکار Redirect شود.

مثال:

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

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="refresh" content="5" url=http://www.tutorialspoint.com" / >

تنظیم cookies

کوکی Cookies داده هایی هستند که در یک فایل کوچک متن روی کامپیوتر شما ذخیره شده اند و بین مرورگر وب و سرور وب ردو بدل می شود تا مسیر اطلاعات مختلف را براساس نیاز برنامه ی وب شما حفظ کنند.
شما می توانید از برچسب برای ذخیره ی cookies در بخش کاربری استفاده کنید و پس از آن این اطلاعات می توانند توسط سرور وب استفاده شوند تا بازدیدکننده ی سایت را پیگیری کنند.

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" / >

اگر تاریخ و زمان انقضا را مشخص نکرده اید، cookie یک session cookie می باشد و وقتی که یوزر از مرورگر خارج شود، پاک خواهد شد.

تنظیم نام نگارنده

می توانید با استفاده از meta tag نام یک نگارنده را برای صفحه ی وب خود تنظیم کنید. یک مثال در این رابطه را در زیر مشاهده می کنید.

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta ame="author" content="Mahnaz Mohtashim" / >

تعیین تنظیم کاراکتر

می توانید از برچسب برای تعیین تنظیم کاراکتر مربوط به صفحه ی وب استفاده کنید.

مثال:

به طور پیش فرض مرورگرها و سرورهای وب از رمزگزاری ISO-8859-1 برای پردازش صفحات وب استفاده می کنند. در زیر مثالی را می بینید برای تنظیم رمزگزاری UTF-8:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" / >

برای ارائه ی کاراکترهای چینی سنتی به یک صفحه ی استاتیک، صفحه ی وب باید دارای یک برچسب باشد تا رمزگذاری Big5 را تنظیم کند.

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta ame="author" content="Mahnaz Mohtashim" / >

< meta http-equiv="Content-Type" content="text/html; charset=Big5" / >

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

آموزش استفاده از comment در html

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

نمونه یک

این مثال نتیجه ی زیر را بدون نمایش محتوای ارائه شده به عنوان بخشی از کامنت ها، به دنبال دارد.
Document content goes here.....

کامنت های معتبردر مقابل کامنت های نامعتبر

کامنت ها تودرتو نمی شوند، یعنی اینکه یک کامنت نمی تواند در داخل کامنت دیگری قرار بگیرد. خط تیره ی (dash) دوتایی "--" ممکن نیست در داخل یک کامنت ظاهر شود، به جز در مواردی که بخشی از برچسب closing باشد. شما باید مطمئن باشید که هیچ فضای خالی در ابتدای رشته ی کامنت وجود ندارد.

مثال:

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

نمونه دو

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

مثال:

نمونه سه

< !-- This is not a valid comment -->

کامنت های چندخطی

تاکنون فقط کامنت های تک خطی را مشاهده کردیم، اما HTML کامنت های چندخطی را نیز پشتیبانی می کند.
شما می توانید کامنت های چند خطی داشته باشید با استفاده از برچسب آغازگر --!> و پایان دهنده ی ،--> که قبل از اولین خط و در پایان آخرین خط قرار میگیرد.

مثال:

نمونه چهار

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

استفاده از برچسب کامنت

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

مثال:

نمونه شش

This is not Internet

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

This is Internet Explorer.

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

This is Internet Explorer.

کد اسکریپت کامنت

شما جاوا اسکریپت را در یک آموزش مجزا با HTML یاد خواهید گرفت. در اینجا باید دقت کنید که اگر در حال استفاده از javascript یا vbscript در کد html خود هستید، بنابراین توصیه می شود که آن کد اسکریپت را در داخل کامنت های مناسب HTML قرار دهید طوری که مرورگرهای قدیمی بتوانند به درستی کار کنند.

مثال:

نمونه هفت

Hello World!

کامنت صفحات طراحی

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

مثال:

نمونه هشت

span through as many as lines you like.

-->

آموزش درج کردن تصویردر HTML-آموزش Html

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

وارد کردن تصویر

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

src="Image URL" ... attributes-list/>

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

مثال:

برای امتحان کردن مثال، زیر اجازه بدهید فایل html خود یعنی test.htm و فایل تصویر خود یعنی test.png را در یک مسیر قرار دهیم.

نمونه یک

Simple Image Insert

شما می توانید از فایل تصویر JPEG، PNG یا GIF متناسب با راحتی خود استفاده کنید، اما مطمئن شوید که در ویژگی src نام فایل تصویر را به درستی وارد کردید. نام تصویر همیشه یک مورد هوشمند می باشد.
ویژگی alt یک ویژگی می باشد که اگر تصویر نمایش داده نشود، یک متن جایگزین را برای آن مشخص می کند.

تنظیم موقعیت تصویر

آموزش html css

معمولا ما تمام تصاویر خود را در یک مسیر مجزا قرار می دهیم. بنابراین اجازه بدهید فایل test.htm مربوط به HTML را در مسیر اصلی نگه داشته و یک مسیر فرعی images داخل مسیر اصلی، جایی که تصویر test.png را نگهداری می کنیم، ایجاد کنیم.
با فرض اینکه موقعیت تصویر ما "image/test.png" می باشد، مثال زیر را امتحان کنید:

مثال:

نمونه دو

Simple Image Insert

تنظیم طول و عرض تصویر

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

مثال:

نمونه سه

Setting image width and height

تنظیم حاشیه ی تصویر

به طور پیش فرض تصویر حاشیه ای در اطراف خود خواهد داشت، شما می توانید ضخامت این حاشیه را با استفاده از ویژگی border و به واحد پیکسل تنظیم کنید. ضخامت 0 یعنی هیچ حاشیه ای در اطراف تصویر وجود ندارد.

مثال:

نمونه چهار

Setting image Border

تنظیم همترازی تصویر

به طور پیش فرض تصویر در سمت چپ صفحه تنظیم می شود، اما می توانید از ویژگی align برای تنظیم تصویر در سمت راست یا مرکز صفحه استفاده کنید.

مثال:

نمونه پنج

Setting image Alignment

پایان بخش پنجم آموزش طراحی سایت