مباحث اولیه برای آشنایی با HTML

P O U R I A · Jul 27, 2015

فهرست مطالب:

شروع یادگیری html
html چیست ؟
تگ ها در html
شروع یک خط جدید با تگ <br>
ایجاد عنوان با تگ های <h1> و <h2> و <h3> و <h4> و <h5> و <h6>
ایجاد یک پاراگراف با تگ <p>
تقسیم فایل html به دو بخش head و body
مشخصه برای تگ ها در html
نرم افزار Dreamweaver برای راحت تر نوشتن کدها
تگ div برای ساخت اسکلت سایت
استفاده از id برای دادن نام اختصاصی به هر تگ div
ساخت اسکلت یک سایت کامل
قرار دادن سایت بر روی اینترنت
تغییر رنگ پس زمینه سایت
تعیین رنگ در html
ساخت لینک در html
تعیین مشخصات فونت ها در html
نوشتن توضیحات در فایل html
ترسیم خط افقی در html با تگ <hr>
تگ های شیوه نمایش متن در html
نمایش عکس ها در html
ساخت جدول در html
ساخت لیست (فهرست) در html
فرم ها در html

منبع: kelidestan

P O U R I A · Jul 27, 2015

شروع یادگیری html

شروع یادگیری html

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

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

[h=2]یک روش کارآمد برای آن که انگیزه خود را از دست ندهید :[/h]1- تمامی دستوراتی را که یاد می دهم حتما تایپ کرده و نتیجه را مشاهده کنید وگرنه این آموزش برای شما تبدیل به یک کتاب قصه می شود که شما را به خواب خواهد برد .

2- بعد از مدتی نرم افزار Dreamweaver را به شما معرفی خواهم کرد که سرعت نوشتن کدها را بیشتر می کند .

3- فارسی نویسی در سایت و قواعد لازم برای نمایش صحیح متن فارسی در html را آموزش خواهم داد . زیرا احتمالا محتوای سایت شما فارسی است .

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

5- نحوه ساخت قالب سایت که به صورت سه ستون می باشد ( قالب اکثر سایت ها ) را با استفاده از تگ div به شما آموزش خواهم داد .

6- به شما آموزش خواهم داد که CSS تا چه حد طراحی سایت را برای شما ساده می کند .

P O U R I A · Jul 27, 2015

html چیست؟

html چیست؟

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

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

نحوه ساخت یک فایل html :

ساخت یک فایل html بسیار ساده می باشد . شما تنها به یک نرم افزار نیاز دارید که بتوانید با آن تایپ کنید . نرم افزار Notepad در ویندوز گزینه مناسبی می باشد . برای باز کردن این نرم افزار ، از منوی start در ویندوز ، Accessories را انتخاب کرده و سپس گزینه Notepad را انتخاب کنید .

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

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
 
salam bar shoma !
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

عبارت <html> نشان دهنده شروع کدهای html و عبارت <html/> نشان دهنده پایان کدهای html می باشد و عبارت salam bar shoma ! نیز ((سلامی)) است به شما که آن را در مرورگر اینترنت خواهید دید .

اکنون باید فایل را ذخیره کنید . قبل از ذخیره کردن فایل ، بر روی desktop خود فولدری به نام www.www.www.iran-eng.ir بسازید ( یا هر نام دیگری ) . شما تمامی فایل های سایت خود را در این فولدر نگهداری خواهید کرد و بدین صورت کار خود را با نظم به پیش می برید . چیدمان فایل ها در این فولدر دقیقا با چیدمان فایل ها در کامپیوتری که بعدا سایت خود را بر روی آن قرار می دهید ، یکسان خواهد بود .

اکنون فایل را با نام index.html ذخیره کنید . دقت کنید که پسوند فایل را نباید txt انتخاب کنید بلکه پسوند فایل باید html باشد تا مرورگرهای اینترنت بتوانند فایل را بخوانند . نام اصلی ترین صفحه هر سایت index می باشد و به همین دلیل این نام را انتخاب کرده ایم .

حال بر روی فایل ذخیره شده کلیک راست نموده و از قسمت Open with گزینه Internet Explorer و یا هر مرورگر دلخواه دیگر را انتخاب کنید . مرورگر باز شده و صفحه index.html را نمایش می دهد .

شما صفحه ای کاملا سفید را مشاهده خواهید کرد که در آن عبارت salam bar shoma ! نوشته شده است :

HTML:

salam bar shoma !

P O U R I A · Jul 27, 2015

تگ ها در html

تگ ها در html

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

اکثر تگ ها در html به صورت زوج تگ می باشند یعنی یک تگ برای اعلام شروع (تگ شروع) و یک تگ برای اعلام پایان (تگ پایان) به کار می رود که تنها تفاوت آنها در یک علامت / می باشد که به تگ پایانی اضافه شده است . البته تگ های تکی هم داریم که در مباحث بعدی معرفی می شوند .

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

P O U R I A · Jul 27, 2015

شروع یک خط جدید با تگ <br>

شروع یک خط جدید با تگ <br>

مرورگرهای اینترنت هنگام خواندن یک فایل html چنانچه به چندین فاصله خالی پشت سرهم برخورد کنند آنها را تنها به عنوان یک فاصله در نظر می گیرند . بنابراین شما در یک فایل html نمی توانید با قرار دادن تعدادی فاصله پشت سر هم ، ادامه مطالب را به شروع خط بعدی ببرید . برای آنکه بخواهید ادامه مطالبتان در شروع خط بعدی باشد باید از تگ <br> استفاده کنید .

قبل از مثالی در مورد این تگ ، ابتدا مثال قبلی را دوباره مرور می کنیم :[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
 
salam bar shoma !
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

HTML:

salam bar shoma !

نکته :از این به بعد تنها کافی است که فایل html در Notepad باز بوده و هر بار کد درون فایل را تغییر داده و با گرفتن کلید Ctrl و فشار دادن کلید S از کیبورد ، تغییرات را ذخیره کنید و در مرورگر اینترنت خود که همواره باز است بر روی دکمه Refresh کلیک کنید . این کار روشی سریع برای مرور مثال های پی در پی می باشد .

حال با مثال زیر نحوه عملکرد تگ <br> را نشان می دهیم :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
 
salam [COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR]>[/COLOR] bar shoma !
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

HTML:

salam 
bar shoma !

مشاهده می کنید که عبارت های بعد از تگ <br> در خط بعدی نمایش داده شده اند .

P O U R I A · Jul 27, 2015

ایجاد عنوان با تگ های <h1> و <h2> و <h3> و <h4> و <h5> و <h6>

ایجاد عنوان با تگ های <h1> و <h2> و <h3> و <h4> و <h5> و <h6>

حرف h در تگ های بالا از اول کلمه heading به معنای ((عنوان)) گرفته شده است و برای نمایش عنوان یک مطلب به کار می رود . معمولا برای جلب توجه بیشتر باید عنوان مطلب با اندازه بزرگتر و برجسته تر نسبت به متن مطلب نمایش داده شود که این تگ ها این عمل را انجام می دهند . به مثال زیر توجه کنید :

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]h1[/B][/COLOR]>[/COLOR]salam[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]h1[/B][/COLOR]>[/COLOR]
salam bar shoma !
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

salam

salam bar shoma !

مشاهده می کنید که عبارت درون تگ های <h1> و <h1/> به صورت برجسته تر نمایش داده شده است . همچنین این تگ ها باعث می شوند که مرورگر نمایش ادامه محتویات را از خط بعدی شروع کند .

تفاوت تگ های <h1> و <h2> و <h3> و <h4> و <h5> و <h6> :

تفاوت تگ های فوق تنها در اندازه نمایش عنوان می باشد . تگ <h1> بزرگترین و تگ <h6> کوچکترین نمایش را برای عنوان به کار می برند . به مثال زیر توجه کنید :مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]h1[/B][/COLOR]>[/COLOR]salam[COLOR=#009900]<[COLOR=#000000][B]h1[/B][/COLOR][COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]h2[/B][/COLOR]>[/COLOR]salam[COLOR=#009900]<[COLOR=#000000][B]h2[/B][/COLOR][COLOR=#66CC66]/[/COLOR]>[/COLOR] 
[COLOR=#009900]<[COLOR=#000000][B]h3[/B][/COLOR]>[/COLOR]salam[COLOR=#009900]<[COLOR=#000000][B]h3[/B][/COLOR][COLOR=#66CC66]/[/COLOR]>[/COLOR] 
[COLOR=#009900]<[COLOR=#000000][B]h4[/B][/COLOR]>[/COLOR]salam[COLOR=#009900]<[COLOR=#000000][B]h4[/B][/COLOR][COLOR=#66CC66]/[/COLOR]>[/COLOR] 

 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

salam

salam

salam

salam

P O U R I A · Jul 27, 2015

ایجاد یک پاراگراف با تگ <p>

ایجاد یک پاراگراف با تگ <p>

چنانچه قصد داشته باشیم بخشی از متن به صورت یک پاراگراف نمایش داده شود و از بخش های دیگر متن جدا بوده و فاصله داشته باشد باید از زوج تگ <p> و <p/> استفاده کنیم . متنی که بین این دو تگ قرار بگیرد به صورت یک پاراگراف نمایش داده می شود . به مثال زیر توجه کنید :

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
 
the text before paragraph .[COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR]>[/COLOR] another text .
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]this is a paragraph[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR] 
the text after paragraph .[COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR]>[/COLOR] another text .
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

the text before paragraph .
another text .this is a paragraph
the text after paragraph .
another text .

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

P O U R I A · Jul 27, 2015

تقسیم فایل html به دو بخش head و body

تقسیم فایل html به دو بخش head و body

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

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]this is a paragraph[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR] 
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

this is a paragraph

در واقع زمانی که تگ های دو بخش head و body را مشخص نکنیم ( مثل مثال های قبلی ) ، مرورگر فرض می کند که این کدها برای بخش body بوده است و آنها را نمایش خواهد داد .

نکته :

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

بنابراین از این به بعد از نوشتن بخش head در مثال ها خودداری می کنیم تا زمانی که کار با نرم افزار Dreamweaver را شروع کنیم اما تگ های مربوط به body را می نویسیم تا این تقسیم بندی را فراموش نکنید .

P O U R I A · Jul 27, 2015

مشخصه برای تگ ها در html

مشخصه برای تگ ها در html

همان طور که قبلا شرح دادیم در html هر تگ برای منظور خاصی به کار می رود . مثلا تگ <p> برای ایجاد یک پاراگراف به کار می رود . اما فرض کنید که هنگام ایجاد یک پاراگراف ، بخواهیم مشخصه و ویژگی خاصی را برای آن پاراگراف مشخص کنیم . در اینگونه موارد این مشخصه را باید در تگ شروع وارد کنیم . به مثال زیر توجه کنید :مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR] [COLOR=#000066]align[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"right"[/COLOR]>[/COLOR]this is a paragraph .[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

this is a paragraph .

مشخصه align زمانی به کار می رود که بخواهیم تعیین کنیم پاراگراف در چه سمتی از صفحه ، نمایش داده شود . چون این مشخصه را به صورت right تعیین کرده ایم بنابراین پاراگراف در سمت راست صفحه ، نمایش داده می شود . همان طور که مشاهده کردید با یک فاصله پس از حرف p ، نام مشخصه align را نوشته ایم و سپس حالتی را که برای align در نظر گرفته ایم ( در اینجا right ) در بین دو علامت " نوشته ایم . تمامی مشخصه ها برای تگ های مختلف به همین شیوه نوشته می شوند و تنها باید یاد بگیرید که هر مشخصه برای چه تگ هایی به کار می رود و چه ویژگی خاصی را برای آن تگ ها تعیین می کند .

P O U R I A · Jul 27, 2015

نرم افزار Dreamweaver برای راحت تر نوشتن کدها

نرم افزار Dreamweaver برای راحت تر نوشتن کدها

نرم افزار Dreamweaver ساخت شرکت adobe می باشد که محیط بسیار مناسبی برای نوشتن کدهای html فراهم کرده است . این نرم افزار تمامی زبان های مربوط به طراحی سایت و اینترنت را پشتیبانی می کند . در ادامه برخی ویژگی های جالب این نرم افزار را برایتان شرح می دهم .

[h=2]پر کردن بخش head فایل html به صورت خودکار :[/h]برای آنکه در نرم افزار Dreamweaver یک فایل html بسازیم باید از منوی File گزینه New را انتخاب کنیم . سپس پنجره ای به شکل زیر باز می شود :

در این پنجره ، بخش Page Type را برابر HTML و بخش Layout را برابر <none> انتخاب کنید . یک فایل html باز می شود که بخش head آن به طور کامل پر شده است و مناسب برای قرار گرفتن در اینترنت می باشد .

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

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#00BBDD]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" [/COLOR]
[COLOR=#00BBDD]"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR] xmlns[COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"http://www.w3.org/1999/xhtml"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]meta[/B][/COLOR] [COLOR=#000066]http-equiv[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"Content-Type"[/COLOR] [COLOR=#000066]content[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"text/html; charset=utf-8"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]title[/B][/COLOR]>[/COLOR]Untitled Document[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]title[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=2]قابلیت نمایش نتیجه کد ها به طور همزمان با ویرایش کدها :[/h]در پنجره نرم افزار Dreamweaver چنانچه گزینه Split را انتخاب کنید آنگاه پنجره به دو قسمت تقسیم می شود که یک قسمت کدهای نوشته شده را نشان می دهد و قسمت دیگر نتیجه کدها را نمایش می دهد . این قابلیت باعث می شود که مجبور نباشید مرتب مرورگر اینترنت خود را برای مشاهده نتیجه باز کنید . اما در کل من به شما توصیه می کنم که نتایج خود را صرفا در این بخش مشاهده نکنید و حتما آنها را در مرورگر اینترنت خود چک کنید .

[h=2]قابلیت نمایش صفحه در مرورگرهای مختلف:[/h]در نرم افزار Dreamweaver می توانید با گزینه هایی که به صورت گرافیکی در بالای پنجره قرار داده شده اند ، صفحه html ساخته شده توسط خود را در هر مرورگر دلخواه که بر روی ویندوز شما نصب شده باشد ، ببینید . همچنین می توانید از منوی File بر روی گزینه Preview in Browser رفته تا لیست مرورگرها را ببینید و بر روی هر کدام که کلیک کنید صفحه html شما در آن مرورگر باز می شود .

[h=2]قابلیت انتخاب مشخصه ها از لیستی کامل از آنها :[/h]گر یادتان باشد گفتیم که مثلا در تگ <p> چنانچه بخواهیم مشخصه ای را به کار ببریم ابتدا می نویسیم p> و سپس یک فاصله قرار می دهیم و آنگاه مشخصه مورد نظرمان را می نویسیم ، مثل عبارت زیر :

<p align="right">

در نرم افزار Dreamweaver همین که پس از نوشتن p> بر روی کلید Space از کیبورد فشار دهید تا یک فاصله ایجاد شود ، خود نرم افزار لیستی از تمامی مشخصه های ممکن برای آن تگ را به شما نشان می دهد تا به راحتی یکی را انتخاب کنید و سپس مقادیر ممکن مختلف برای آن مشخصه را به شما نشان می دهد تا آن را که مورد نظرتان بوده است انتخاب کنید .

[h=2]ساختار های آماده برای سایت در نرم افزار Dreamweaver :[/h]نرم افزار dreamweaver دارای یک سری قالب آماده می باشد که هنگام ایجاد یک فایل html جدید می توانید هر یک از آنها را انتخاب نمایید . برای این منظور از منوی File گزینه New را انتخاب کنید سپس در صفحه ای که باز می شود بخش Page Type را برابر HTML و بخش Layout را برابر هر نوع ساختاری که دوست دارید قرار دهید .

P O U R I A · Jul 27, 2015

تگ div برای ساخت اسکلت سایت

تگ div برای ساخت اسکلت سایت

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

بنابراین در این مرحله شما را با تگ div آشنا می کنم ، شاید این آشنایی زود باشد اما حکمت دارد !!!

امروزه در اکثر سایت ها یک شکل برای بالای سایت (header) و یک ستون اصلی در وسط برای محتوای هر صفحه (content) ، دو ستون برای دو طرف ستون اصلی که شامل لینک ها ، اخبار کوتاه ، تبلیغات ، پیام ها و ... می باشند (sidebar1 و sidebar2) و در پایین صفحه نیز بخشی برای تبلیغات ، معرفی شرکت صاحب سایت ، حقوق سایت و ... (footer) ، به کار می رود . اما قبلا مشاهده کردید که مرورگر دستورات html را خوانده و بخش هایی را که باید نمایش دهد به صورت ستونی و پشت سرهم نمایش می دهد ، بنابراین ما به تگی نیاز داریم که با آن بخش های مختلف صفحه را از یکدیگر جدا کنیم و سپس بتوانیم بر روی هر بخش تغییرات مورد نظر خود را اعمال کنیم ، به گونه ای که این تغییرات چیدمان سایر بخش ها را به هم نریزد . تگ مورد استفاده برای این منظور ، تگ div می باشد .

نمایش اطلاعات دو div به صورت پشت سرهم :

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

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]paragraph number 1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]paragraph number 2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

paragraph number 1

paragraph number 2

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

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

با مثال بعدی نشان خواهیم داد که چگونه می توانیم اطلاعات درون دو div را به صورت دو ستون در کنار هم قرار دهیم :

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"float:left ; padding-right:100px"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]paragraph number 1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"float:left"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]paragraph number 2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

paragraph number 1 .................... paragraph number 2

این بار اطلاعات درون دو تگ div در دو ستون کنار هم نمایش داده شده اند و دلیل آن استفاده از مشخصه style="float:left" می باشد . این مشخصه ، تگ های div را به صورت شناور در می آورد و با تعیین جهت left برای float ، باعث شده ایم که تگ div دوم در سمت راست تگ div اول قرار بگیرد . دقت شود که در تگ div اول از مشخصه padding-right:100px استفاده کرده ایم که باعث می شود به اندازه 100 پیکسل از محتویات تگ div دوم که در سمت راست آن قرار خواهد گرفت ، فاصله بگیرد .

نکته :

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

P O U R I A · Jul 27, 2015

استفاده از id برای دادن نام اختصاصی به هر تگ div

استفاده از id برای دادن نام اختصاصی به هر تگ div

همانطور که در مبحث قبلی گفتم ، نوشتن مشخصه style درون تگ div انتخاب مناسبی نیست و ما به جای آن روش بهتری را پیشنهاد می کنیم . در این روش برای هر تگ div یک نام اختصاصی ( یک id ) در نظر می گیریم و سپس ویژگی هایی را که می خواهیم به آن تگ div نسبت دهیم را در قسمت head از فایل html قرار می دهیم . همان مثال مبحث قبل را این بار با این روش می نویسیم :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]style[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR]>[/COLOR]
#column1 {
          float:left;
          padding-right:100px;
         }
#column2 {
          float:left;
         }       
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]style[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"column1"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]paragraph number 1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"column2"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]paragraph number 2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

paragraph number 1 .................... paragraph number 2

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

در کدنویسی بالا ، ابتدا برای تگ div اول یک id با نام column1 و برای تگ div دوم یک id با نام column2 مشخص کرده ایم . حال باید کدهای CSS را بنویسیم . محل کدهای CSS باید بین تگ های <head> و <head/> باشد . شروع کدهای CSS را با تگ شروع <style type="text/css"> اعلام می کنیم و پایان کدهای CSS را نیز با تگ پایانی <style/> اعلام می کنیم ، سپس بین این دو تگ ، کدهای CSS را می نویسیم . برای تگ های div ، نام هایی اختصاصی ( id ) ساختیم تا بتوانیم در این محل به آنها ویژگی هایی را اختصاص دهیم . برای اینکه هر تگ div را مشخص کنیم ابتدا علامت # را نوشته و سپس نام id مربوط به آن را می نویسیم . سپس بین دو علامت { و } تمامی مشخصه هایی را که می خواهیم برای آن تگ div می نویسیم .

P O U R I A · Jul 27, 2015

ساخت اسکلت یک سایت کامل

ساخت اسکلت یک سایت کامل

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

کدها :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#00BBDD]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/[/COLOR]
[COLOR=#00BBDD]xhtml1-transitional.dtd">[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR] xmlns[COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"http://www.w3.org/1999/xhtml"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]meta[/B][/COLOR] [COLOR=#000066]http-equiv[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"Content-Type"[/COLOR] [COLOR=#000066]content[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"text/html; charset=utf-8"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]title[/B][/COLOR]>[/COLOR]عنوان صفحه[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]title[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]style[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR]>[/COLOR]
body {
         font-family:Arial, Helvetica, sans-serif;
         text-align:right;
         direction:rtl; 
     } 
.container { 
           width:100%;
           margin:0 auto;
                   }               
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
                                                   margin:0px;
                                               padding:0px;
                                                                                           }    
#logo1 {        
           background:url(../images/kelid.gif) no-repeat;
           width:100%;
       height:180px;
           background-position:center
       }        
#tagline { 
         padding-top:60px;
                 text-align:center;
         }                       
#tagline h3 {
                font-size: 30px;
                    color: #09F;
                    }                    
ul#menu {
        list-style:none;
                padding-top:50px;
        }               
ul#menu li a {
             font-size:20px;
             color:#090;
             text-decoration:none;
             }                                           
ul#menu li {                             
           float:right;
                   padding-left:0px;
           padding-right:30px;
           width:150px; 
                   }            
#sidebar1 {
              width: 20%;
          float:left;
                  direction:rtl;
                  padding-top:30px;
                  padding-bottom:30px;
                  padding-right:2%;
                  padding-left:2%;
          }                                                        
ul#sidebar1_menu {
                 list-style:none;
                 }                         
#content {
         width:52%;
         float:left;
                 padding-top:30px;
                 padding-bottom:30px;
                 padding-right:0px;
         }               
#content h2 {
            font-size: 24px;
            color: #00C;
            padding-top: 25px;
            }                           
#content h3 {
            font-size:24px;
            color:#444444;
            padding:20px;
            }
#content h4 {
            font-size: 18px;
            color: #373737;
            font-weight: normal;
            }
#content p {
               text-align:justify;
           font-size: 18px;
           color: #000;
           padding-top: 20px;
           }                               
#content small {
               font-size: 12px;
               color: #373737;
               }                           
#content a {
           color: #F33;
           font-weight: bold;
           text-decoration: none;
           }                                                                                                                                    
#sidebar2 {
              width: 20%;
          float:left;
                  direction:rtl;
                  padding-top:30px;
                  padding-bottom:30px;
                  padding-left:2%;
                  padding-right:2%;
          }               
ul#sidebar2_menu {
                 list-style:none;
                 }                      
ul#sidebar2_menu li a {
                                  text-decoration:none;
                      }                  
#footer {
            width: 100%;
            text-align:center;
                padding-top:60px;
        }                         
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]style[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
     [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"main"[/COLOR]>[/COLOR]
          [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]class[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"container"[/COLOR]>[/COLOR]
               [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"header"[/COLOR]>[/COLOR]
                    [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"logo1"[/COLOR]>[/COLOR]
                         [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"tagline"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]h3[/B][/COLOR]>[/COLOR]شعار تبلیغاتی سایت شما در این محل نمایش داده می شود[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]h3[/B][/COLOR]>[/COLOR]
                         [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]              
                    [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
                         [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"clear:both"[/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]ul[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"menu"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]خانه[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]مبحث اول[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]مبحث دوم[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]مبحث سوم[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]تماس با ما[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]ul[/B][/COLOR]>[/COLOR]        
                         [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"clear:both"[/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
               [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR][COLOR=#808080][I]<!--end header -->[/I][/COLOR]
                [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"sidebar1"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]h3[/B][/COLOR]>[/COLOR]عنوان ستون سمت چپ[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]h3[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]ul[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"sidebar1_menu"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]عبارت اول از ستون سمت چپ[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]hr[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]عبارت دوم از ستون سمت چپ[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]hr[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]عبارت سوم از ستون سمت چپ[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]hr[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]ul[/B][/COLOR]>[/COLOR]
               [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR][COLOR=#808080][I]<!--end sidebar1-->[/I][/COLOR]              
               
[COLOR=#009900]<[COLOR=#000000][B]h1[/B][/COLOR]>[/COLOR]عنوان اصلی مبحث[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]h1[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]h2[/B][/COLOR]>[/COLOR]زیر عنوان :[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]h2[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
مباحث به زبان فارسی در این محل نوشته خواهد شد .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
               
               [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"sidebar2"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]h3[/B][/COLOR]>[/COLOR]عنوان ستون سمت راست[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]h3[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]ul[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"sidebar2_menu"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]اولین لینک از ستون سمت راست[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]hr[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]دومین لینک از ستون سمت راست[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]hr[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]سومین لینک از ستون سمت راست[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]hr[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]ul[/B][/COLOR]>[/COLOR]
               [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR][COLOR=#808080][I]<!--end sidebar2-->[/I][/COLOR]
                    [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"clear:both"[/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
          [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR][COLOR=#808080][I]<!--end main container-->[/I][/COLOR]
     [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR][COLOR=#808080][I]<!--end main-->[/I][/COLOR]
     [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"footer"[/COLOR]>[/COLOR]
          [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]class[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"container"[/COLOR]>[/COLOR]
                    [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"clear:both"[/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
Copyright © 2012 www.yoursite.com [COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
All Rights Reserved
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]          
          [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR][COLOR=#808080][I]<!--end footer container-->[/I][/COLOR]
     [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR][COLOR=#808080][I]<!--end footer-->[/I][/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

توضیحاتی در مورد کدها :

[h=2]نحوه جداسازی بخش های مختلف سایت با تگ div :[/h]در بخش body از فایل html ، با استفاده از تگ div ، بخش های مختلف سایت را جدا کرده ایم تا بتوانیم به هر یک به طور جداگانه مشخصه هایی را اختصاص بدهیم و همچنین نحوه چیدمان بخش های مختلف سایت در کنار هم را مشخص کنیم . به هر تگ div یک id اختصاص داده ایم زیرا کدهای CSS را در بخش head فایل html نوشته ایم و با استفاده از id است که تعیین می کنیم هر قسمت صفحه ( محتویات هر تگ div ) چه مشخصه هایی باید داشته باشد .

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

[h=2]چگونگی نوشته شدن کدهای CSS :[/h]کدهای CSS در قسمت head فایل html باید نوشته شوند ( یعنی بین دو تگ <head> و <head/> ) . شروع کدهای CSS را با تگ <"style type="text/css> و پایان کدهای CSS را با تگ <style/> اعلام کرده ایم . سپس ابتدا باید مشخص کنیم که می خواهیم مشخصه ها را به کدام بخش سایت اعمال کنیم . اگر بخواهیم مشخصه ای را به محتویات یک تگ div اعمال کنیم باید ابتدا علامت # را نوشته و بعد از این علامت ، نام id مربوط به آن تگ div را بنویسیم . سپس یک علامت ((})) را نوشته و پس از آن مشخصه های مورد نظرمان را می نویسیم . چنانچه قصد نوشتن چند مشخصه را داشته باشیم باید آنها را با علامت ((

) از یکدیگر جدا کنیم . پس از نوشتن تمامی مشخصه های مورد نظرمان ، علامت (({)) را به کار می بریم تا اعلام کنیم که مشخصه های آن تگ div پایان یافته است . برای سایر تگ ها نیز باید همین شیوه را اجرا کنیم و کدهای آنها را پشت سرهم بنویسیم .

همان طور که می بینید برای تعیین مشخصه های تگ های div ، ترتیب فراخوانی تگ های div دقیقا مثل ترتیب نوشته شدن کدهای آنها در بخش body فایل html می باشد .

[h=4]نکته :[/h]بهترین انتخاب برای نوشتن کدهای CSS ، نوشتن آنها در فایلی جدا از فایل html می باشد زیرا با این شیوه می توانید کدهای CSS را به هر فایل html که بخواهید اعمال کنید و برای این کار تنها باید در فایل html آدرس فایل حاوی کدهای CSS را مشخص کنید . ما فعلا از این شیوه استفاده نکرده ایم تا گیج نشوید و تمرکز اصلی خود را فعلا بر روی نکات دیگر قرار دهید .

[h=2]نحوه چیدمان بخش های مختلف سایت در کنار هم :[/h]نحوه چیدمان بخش های مختلف سایت باید به این شکل باشد که ابتدا header نمایش داده شود و سپس دو ستون اصلی سایت و بخش content باید در پایین قسمت header نمایش داده شوند . ما برای کنار هم قرار دادن دو ستون اصلی و بخش content از مشخصه float استفاده کرده ایم که باعث می شود تگ های div شناور شوند و موقعیت خود را بر اساس تگ div کنار خود ، تنظیم کنند . در کدهای CSS مشاهده می کنید که برای هر سه تگ div با id های sidebar1 ، sidebar2 و content ، مشخصه float به کار رفته است به این صورت که چون ابتدا کدهای sidebar1 در بخش body نوشته شده است پس ابتدا مشخصه float آن را به صورت left ( سمت چپ ) تعیین کرده ایم تا در سمت چپ صفحه قرار بگیرد ، سپس بخش content را داریم که مشخصه float آن را نیز برابر left تعیین کرده ایم تا به sidebar1 که در سمت چپ آن است بچسبد . سپس برای sidebar2 نیز مشخصه float را برابر left تعیین کرده ایم تا در کنار بخش content که در سمت چپ آن است بچسبد .

[h=4]نکته :[/h]برای آنکه دو ستون اصلی و بخش content به درستی در کنار هم قرار بگیرند باید مجموع عرض هر سه بخش برابر عرض کل صفحه باشد وگرنه ممکن است sidebar2 در زیر sidebar1 و content قرار بگیرد . برای فهمیدن عرض هر بخش ابتدا باید در کدهای CSS نگاه کنید و ببینید عرض آن بخش چقدر تعریف شده است و علاوه بر این باید ببینید که این بخش ها دارای مشخصه padding-left یا padding-right هستند یا نه . زیرا باید میزان این مشخصه ها را به عرض تعریف شده اضافه کنید . به عنوان مثال در کدهای بالا عرض های تعریف شده به صورت درصد می باشند و زمانی که کل درصدها را برای sidebar1 ، content و sidebar2 جمع بزنید ، برابر 100 درصد خواهد شد .

P O U R I A · Jul 28, 2015

قرار دادن سایت بر روی اینترنت

قرار دادن سایت بر روی اینترنت

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

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

persianservices.com

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

انتخاب نام دامنه و هاست و نحوه خرید آنها :

ابتدا توضیح می دهیم که نام دامنه چیست . مثلا اکنون شما در حال خواندن مطالب سایت www.www.www.iran-eng.ir می باشید . سه حرف www مخصوص web می باشیم و در اول آدرس تمامی سایت ها قرار می گیرد . در آخر آدرس نیز .com نوشته شده است ، برای آخر آدرس سایت ها پسوند های مختلفی مثل com ، org ، ir و ... وجود دارد که هر کدام تا حدودی نوع فعالیت آن سایت را مشخص می کند ، مثلا ir از ابتدای کلمه iran گرفته شده است و نشان دهنده این است که سایت دارای فعالیت مربوط به کشور ایران می باشد . اما مهمترین بخش آدرس فوق کلمه iran-engمی باشد که توسط اینجانب انتخاب شده است . بنابراین برای انتخاب آدرس سایت خود ابتدا باید مشخص کنید چه پسوندی را می خواهید و سپس عبارتی را قبل از آن پسوند قرار دهید ، این دو انتخاب در کنار هم ، همان نام دامنه سایت شما می باشد . مثلا نام دامنه این سایت ، www.www.iran-eng.ir می باشد . من پسوندهای com و ir را به شما توصیه می کنم .

اما نکته مهم این است که بسیاری از نام های دامنه که به ذهن شما می رسد قبلا توسط افراد دیگری خریداری شده است . بنابراین شما ابتدا باید ببینید نام دامنه ای که می خواهید قبلا توسط شخص دیگری ثبت و خریداری شده است یا نه . برای این منظور به آدرس زیر بروید :

persianservices.com

در سایتی که باز می شود ، بخشی به نام ((چک کردن دامین)) به شکل زیر وجود دارد :

منظور از دامین (domain) همان نام دامنه می باشد . در این بخش عبارت مورد نظر خود را انتخاب کنید و سپس پسوند مورد نظر خود را انتخاب کنید و سپس بر روی دکمه به شکل ذره بین کلیک کنید . نتایج جستجو نمایش داده می شود . مثلا اگر kelidestan.com را جستجو کرده باشید ، نتایج زیر نمایش داده می شود :

همان طور که مشاهده می کنید عبارت ((این دومین قیلا ثبت شده است)) نمایش داده شده و بنابراین خرید این نام دامنه امکان پذیر نیست .

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

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

فرض کنید بالاخره نام دامنه ای را پیدا می کنید که قبلا ثبت نشده باشد . نتایج به صورت زیر نمایش داده می شود :

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

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

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

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

پس از انتخاب plan مورد نظر خود ، بر روی گزینه ((سفارش)) در جلوی آن plan کلیک کنید . صفحه ای به شکل زیر نمایش داده می شود :

بر روی گزینه ((برای ادامه کلیک کنید)) ، کلیک کنید . صفحه زیر نمایش داده می شود :

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

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

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

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

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

چگونگی قرار دادن صفحات سایت بر روی هاست خریداری شده :

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

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

معمولا در نرم افزارهای کنترل پنل ، گزینه File Manager برای مدیریت صفحات و فیل های سایت در نظر گرفته می شود . بر روی این گزینه باید کلیک کنید . سپس فولدرهای مختلفی به شما نمایش داده می شود . شما باید فولدر root سایت خود را در میان انها پیدا کنید . منظور از فولدر root ، فولدری می باشد که صفحه اصلی مربوط به آدرس اصلی سایت شما در آن قرار می گیرد. بنابراین در هر فولدری که این فایل index.html وجود داشته باشد ، آن فولدر همان فولدر root می باشد . مثلا در کنترل پنل Parallels Plesk Panel در سرور ویندوز ، این فولدر به نام httpdocs می باشد .

معمولا در کنترل پنل های مختلف گزینه ای برای ارسال (upload) فایل ها از کامپیوتر شما به سرور وجود دارد و شما باید ابتدا در File Manager فولدر مورد نظرتان را پیدا کنید و سپس بر روی گزینه در نظر گرفته شده برای upload کلیک کنید تا فایل هایی که ارسال می کنید دقیقا در همان فولدر قرار بگیرند . این گزینه در کنترل پنل Parallels Plesk Panel در سرور ویندوز با نام Add New File می باشد .

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

P O U R I A · Jul 28, 2015

تغییر رنگ پس زمینه سایت

تغییر رنگ پس زمینه سایت

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

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
this is a paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

مشاهده می کنید که رنگ پس زمینه همان رنگ پس زمینه پیش فرض ، یعنی رنگ سفید ، می باشد .

[h=2]مشخصه bgcolor برای تگ body :[/h]برای آنکه رنگ پس زمینه دیگری غیر از رنگ سفید انتخاب کنیم ( مثلا سبز ) می توانیم از مشخصه bgcolor برای تگ body استفاده کنیم . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR] [COLOR=#000066]bgcolor[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"green"[/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
this is a paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

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

برای تعیین رنگ در html ، چندین روش وجود دارد که این روش ها را در مبحث بعدی شرح خواهیم داد .

P O U R I A · Jul 28, 2015

تعیین رنگ در html

تعیین رنگ در html

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

روش اول : تعیین رنگ به صورت Name

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

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR] [COLOR=#000066]bgcolor[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"yellow"[/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
this is a paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

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

روش دوم : تعیین رنگ به صورت HEX

در این روش به هر رنگ یک کد شامل 6 کاراکتر اختصاص یافته است . این کاراکترها می توانند اعداد 0 تا 9 و یا حروف A تا F باشند . قبل از نوشتن 6 کاراکتر ، باید علامت ((#)) را بنویسیم . به مثال زیر توجه کنید :

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR] [COLOR=#000066]bgcolor[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#FF0000"[/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
this is a paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

مشاهده می کنید که رنگ پس زمینه برابر با رنگ متناظر با کد FF0000 ، که کد مربوط به رنگ قرمز می باشد ، نمایش داده شده است .

روش سوم : تعیین رنگ به صورت rgb

در این روش هر رنگ با سه عدد مشخص می شود که هر عدد می تواند از 0 تا 255 باشد . به مثال زیر توجه کنید :

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR] [COLOR=#000066]bgcolor[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"rgb(255,0,255)"[/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
this is a paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

http://www.www.www.iran-eng.ir/attachment.php?attachmentid=248578&d=1438025933

مشاهده می کنید که رنگ پس زمینه برابر با رنگ متناظر با کد (255,0,255)rgb نمایش داده شده است .

P O U R I A · Jul 28, 2015

ساخت لینک در html

ساخت لینک در html

یکی از بهترین قابلیت های html ، امکان ساخت لینک می باشد تا کاربران به راحتی از یک صفحه html به صفحه ای دیگر بروند . تگ مورد استفاده برای ساخت لینک در html ، تگ <a> می باشد . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir"[/COLOR]>[/COLOR]iran-eng[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

iran-eng

مشاهده می کنید که عبارت iran-eng به صورت یک لینک نمایش داده شده است . مشخصه href در تگ <a> ، آدرس لینک را مشخص کرده است که برابر http://www.www.www.iran-eng.ir قرار داده شده است بنابراین چنانچه بر روی این لینک کلیک کنید صفحه اینترنتی مربوط به آدرس ذکر شده نمایش داده می شود .

[h=2]مشخصه target برای تعیین نحوه باز شدن لینک در مرورگر :[/h]با استفاده از مشخصه target در تگ <a> می توانیم مشخص کنیم که لینک در همین پنجره فعلی باز شود و یا اینکه در پنجره جدیدی باز شود . به مثال زیر توجه کنید :[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"http://www.[/COLOR][/COLOR][COLOR=#FF0000]iran-eng[/COLOR][COLOR=#009900][COLOR=#FF0000].com"[/COLOR] [COLOR=#000066]target[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"_blank"[/COLOR]>[/COLOR]iran-eng[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

iran-eng

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

P O U R I A · Jul 28, 2015

تعیین مشخصات فونت ها در html

تعیین مشخصات فونت ها در html

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

[h=2]تعیین نوع فونت ها با مشخصه face :[/h]در تگ <font> با استفاده از مشخصه face می توانیم نوع فونت را تعیین کنیم . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<font [COLOR=#000066]face[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"Georgia"[/COLOR]>[/COLOR]
this is a paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR]font>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

this is a paragraph .

با توجه به اینکه مشخصه face در تگ <font> برابر با Georgia قرار داده شده است ، بنابراین متن با فونت Georgia نمایش داده شده است .

[h=2]تعیین اندازه فونت ها با مشخصه size :[/h]در تگ <font> با استفاده از مشخصه size می توانیم اندازه فونت را تعیین کنیم . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<font [COLOR=#000066]size[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"3"[/COLOR]>[/COLOR]
first paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR]font>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<font [COLOR=#000066]size[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"6"[/COLOR]>[/COLOR]
second paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR]font>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]

نتیجه :[/h]

first paragraph .

second paragraph .

پاراگراف اول را با مشخصه size برابر 3 و پاراگراف دوم را با مشخصه size برابر 6 قرار داده ایم و تفاوت اندازه فونت های دو پاراگراف به خوبی قابل مشاهده می باشد .

[h=2]تعیین رنگ فونت ها با مشخصه color :[/h]در تگ <font> با استفاده از مشخصه color می توانیم رنگ فونت را تعیین کنیم . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<font [COLOR=#000066]color[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"red"[/COLOR]>[/COLOR]
this is a paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR]font>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

this is a paragraph .

مشاهده می کنید که رنگ فونت ها به رنگ قرمز نمایش داده شده است زیرا مشخصه color در تگ <font> را برابر red قرار داده ایم .

P O U R I A · Jul 28, 2015

نوشتن توضیحات در فایل html

نوشتن توضیحات در فایل html

معمولا زمانی که حجم کدهای فایل html افزایش یابد مجبور می شوید که توضیحاتی را برای بخش های مختلف کدها بنویسید تا در آینده راحت تر بتوانید آنها را تغییر دهید . این روش بسیار کارآمد است و از گیج شدن در بین انبوه کدها جلوگیری می کند . شروع توضیحات را با علامت های --!> و پایان توضیحات را با علامت های <-- اعلام می کنیم . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#808080][I]<!-- comment about first paragragh -->[/I][/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
first paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#808080][I]<!-- comment about second paragragh -->[/I][/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
second paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

first paragraph .

second paragraph .

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

P O U R I A · Jul 28, 2015

ترسیم خط افقی در html با تگ <hr>

ترسیم خط افقی در html با تگ <hr>

استفاده از خط افقی ، شیوه ای ساده برای جدا کردن مطالب مختلف از یکدیگر می باشد . برای ترسیم یک خط افقی در html ، از تگ <hr> استفاده می شود . در واقع این تگ باعث می شود که مطالب قبل و بعد از آن با یک خط افقی از یکدیگر جدا شوند . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
first paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]hr[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
second paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

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

P O U R I A · Jul 28, 2015

تگ های شیوه نمایش متن در html

تگ های شیوه نمایش متن در html

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

[h=2]نمایش متن با حروف پررنگ با تگ <b> :[/h]چنانچه قصد داشته باشیم بخشی از متن با حروف پررنگ نمایش داده شود باید از زوج تگ <b> و <b/> استفاده کنیم . حرف b از حرف اول کلمه Bold گرفته شده است . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
this text is not bold .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]b[/B][/COLOR]>[/COLOR]this text is bold .[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]b[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

در مثال فوق ، تفاوت بین یک متن Bold و یک متن غیر Bold نمایش داده شده است .

[h=2]نمایش متن به صورت زیرخط دار با تگ <ins> :[/h]برای آنکه متن یا کلماتی را به صورت زیرخط دار نمایش دهیم ، تنها کافی است که آن متن یا کلمات را در بین زوج تگ <ins> و <ins/> بنویسیم . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
please visit [COLOR=#009900]<[COLOR=#000000][B]ins[/B][/COLOR]>[/COLOR]kelidestan[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]ins[/B][/COLOR]>[/COLOR] .
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

please visit iran-eng.

مشاهده می کنید که کلمه iran-eng به صورت زیرخط دار نمایش داده شده است .

[h=2]نمایش متن به صورت ایتالیک با تگ <i> :[/h]چنانچه تمایل داشته باشید بخشی از متن را به صورت ایتالیک نمایش دهید باید آن بخش از متن را بین زوج تگ <i> و <i/> قرار دهید . به مثال زیر توجه کنید :[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]this text is about html[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]i[/B][/COLOR]>[/COLOR]this text is about html[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]i[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

this text is about html

this text is about html

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

[h=2]نمایش متن به صورت زیرنویس با تگ <sub> :[/h]گاهی پیش می آید که بخواهیم یک یا چند کلمه را به صورت زیرنویس بنویسیم . در html برای این منظور از تگ <sub> استفاده می شود . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
this is[COLOR=#009900]<[COLOR=#000000][B]sub[/B][/COLOR]>[/COLOR]subscript[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]sub[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

this is[SUB]subscript[/SUB]

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

[h=2]نمایش متن به صورت بالانویس با تگ <sup> :[/h]برای نوشتن یک یا چند کلمه به صورت بالانویس ، باید از زوج تگ <sup> و <sup/> استفاده کنیم . کلماتی که می خواهیم به صورت بالانوبس نوشته شوند باید در بین زوج تگ <sup> و <sup/> قرار بگیرند . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
this is[COLOR=#009900]<[COLOR=#000000][B]sup[/B][/COLOR]>[/COLOR]superscript[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]sup[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

this is[SUP]subscript[/SUP]

در متن بالا ، کلمه superscript به صورت بالانویس نوشته شده است .

P O U R I A · Jul 28, 2015

نمایش عکس ها در html

نمایش عکس ها در html

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

[h=2]تگ <img> برای نمایش عکس ها در صفحات html :[/h]در html از تگ <img> برای نمایش عکس ها استفاده می شود ، به این صورت که باید آدرس عکس مورد نظرمان را در تگ <img> بنویسیم . برای این منظور از مشخصه src در تگ <img> استفاده می شود . در مباحث ابتدایی شرح داده شد که بهتر است بر روی desktop خود فولدری به نام www.mysite.com بسازید و در آن فایلی را که کدها را در آن تست می کنید (با نام index.html) قرار دهید . چنانچه این کار را انجام داده باشید ، اکنون باید درون این فولدر یک فولدر با نام images بسازید تا فایل های عکس ها را در این فولدر قرار دهید . در مثال های بعدی فرض شده است که فایل های عکس شما درون این فولدر قرار دارد . به مثال زیر توجه کنید :

[h=4]مثال :[/h]ابتدا درون فولدر images عکسی با نام photo.gif قرار دهید . سپس کدهای زیر را بنویسید :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
first paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]img[/B][/COLOR] [COLOR=#000066]src[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"images/photo.gif"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
second paragraph .
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

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

P O U R I A · Jul 28, 2015

ساخت جدول در html

ساخت جدول در html

استفاده از جداول ، شیوه ای مناسب برای نمایش اطلاعات دسته بندی شده و منظم می باشد . در html از تگ <table> برای ساخت یک جدول استفاده می شود . شروع جدول را با تگ شروع <table> و پایان جدول را با تگ پایان <table/> اعلام می کنیم . درون این دو تگ ، با هر تگ <tr> می توانیم یک سطر برای جدول ایجاد کنیم . درون زوج تگ <tr> و <tr/> ، با هر تگ <td> می توانیم یک خانه برای آن سطر ایجاد کنیم . به مثال زیر توجه کنید :

[h=4]مثال :[/h]جدولی با 2 سطر و 2 ستون می سازیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]table[/B][/COLOR] [COLOR=#000066]border[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"1"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]cell number 1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]cell number 2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]cell number 3[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]cell number 4[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]table[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

باید دقت داشته باشید که برای تگ <table> ، مشخصه border را برابر 1 قرار داده ایم . اگر این مشخصه را تعیین نکنیم ، جدول بدون دیواره نمایش داده می شود . این حالت را در مثال زیر بررسی می کنیم :

[h=4]مثال :[/h]همان مثال قبل را بدون مشخصه border ، تکرار می کنیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]table[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]cell number 1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]cell number 2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]cell number 3[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]cell number 4[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]table[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

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

P O U R I A · Jul 28, 2015

ساخت لیست (فهرست) در html

ساخت لیست (فهرست) در html

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

[h=2]انواع فهرست ها در html :[/h]در html ، دو نوع فهرست داریم که تفاوت آنها در نحوه علامت گذاری بخش های مختلف فهرست می باشد . نوع اول ، فهرست های شماره دار و نوع دوم ، فهرست های بدون شماره می باشد . تگ هایی که برای این دو نوع فهرست به کار می روند ، متفاوت می باشند . برای فهرست های شماره دار از زوج تگ <ol> و <ol/> و برای فهرست های بدون شماره از زوج تگ <ul> و <ul/> استفاده می کنیم .

[h=2]فهرست های بدون شماره در html :[/h]تگ <ul> در html برای ساخت فهرست های بدون شماره به کار می رود . در واقع شروع یک فهرست بدون شماره را با تگ <ul> و پایان فهرست را با تگ <ul/> اعلام می کنیم . برای تعریف هر بخش فهرست ، باید از تگ <li> استفاده کنیم ، یعنی عبارت مربوط به آن بخش از فهرست را باید در میان زوج تگ <li> و <li/> قرار بدهیم . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]ul[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]number 1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]number 2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]number 3[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]ul[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

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

[h=2]فهرست های شماره دار در html :[/h]تگ <ol> در html برای ساخت فهرست های شماره دار به کار می رود . در واقع شروع یک فهرست شماره دار را با تگ <ol> و پایان فهرست را با تگ <ol/> اعلام می کنیم . برای تعریف هر بخش فهرست ، باید از تگ <li> استفاده کنیم ، یعنی عبارت مربوط به آن بخش از فهرست را باید در میان زوج تگ <li> و <li/> قرار بدهیم . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]ol[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]number 1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]number 2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]number 3[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]li[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]ol[/B][/COLOR]>[/COLOR]

 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

مشاهده می کنید که در کنار هر بخش فهرست ، شماره ای متناسب با ترتیب قرارگیری آن بخش در فهرست ، نمایش داده شده است .

P O U R I A · Jul 28, 2015

فرم ها در html

فرم ها در html

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

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

تگ <form> برای ساخت یک فرم در html :

شروع یک فرم را با تگ شروع <form> و پایان فرم را با تگ پایانی <form/> اعلام می کنیم . محتویات فرم در بین این دو تگ قرار خواهند گرفت .

اطلاعات دریافتی از کاربر باید توسط صفحه ای دیگر مورد پردازش قرار گیرد . درون تگ شروع <form> باید مشخصه action را برابر آدرس صفحه ای قرار بدهیم که می خواهد بر روی اطلاعات دریافت شده از کاربر پردازش انجام دهد . معمولا صفحه پردازش با استفاده از php نوشته می شود . php زبانی است که برای نوشتن صفحات اینترنتی دینامیک به کار می رود (برخلاف html که برای نوشتن صفحات اینترنتی استاتیک به کار می رود ) .

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

تگ <input> :

با استفاده از تگ <input> می توانیم شیوه های مختلفی از انواع دریافت اطلاعات از کاربر را به کار ببریم . برای این منظور باید تگ <input> را درون زوج تگ <form> و <form/> بنویسیم . درون تگ <input> باید مشخصه type را تعیین کنیم تا مشخص شود که نوع دریافت اطلاعات از کاربر به چه صورت می باشد . انواع دریافت اطلاعات از کاربر با استفاده از تگ <input> را در زیر شرح می دهیم :

جعبه متن :

فرض کنید بخواهیم یک جعبه متن را طراحی کنیم که در آن کاربر متن دلخواه خود را نوشته و سپس این متن به سرور (server) حاوی سایت ارسال شود . برای این منظور باید درون تگ <input> ، مشخصه type را برابر text قرار بدهیم . به مثال زیر توجه کنید :

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]form[/B][/COLOR] [COLOR=#000066]method[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"post"[/COLOR] [COLOR=#000066]action[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"script.php"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"text"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]form[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

نکته :

کاربر ابتدا باید درون جعبه متن ، متن دلخواه خود را نوشته و سپس کلید enter را فشار بدهد تا متن نوشته شده توسط صفحه script.php مورد پردازش قرار بگیرد . البته روش بهتر این است که یک دکمه برای ارسال متن ، طراحی شود زیرا معمولا یک فرم شامل چندین بخش برای پر کردن و انتخاب می باشد و بنابراین ابتدا کاربر باید تمامی بخش ها را پر کرده و انتخاب کند و در انتها نیز دکمه ای برای ارسال اطلاعات در نظر گرفته شده باشد . بنابراین قبل از اینکه شیوه های دیگر دریافت اطلاعات برای فرم را توضیح بدهیم ، ابتدا نحوه ساخت دکمه ارسال اطلاعات (دکمه submit) را شرح خواهیم داد .

طراحی دکمه ارسال اطلاعات (دکمه submit) :

برای طراحی دکمه ارسال اطلاعات (دکمه submit) ، باید در انتهای فرم و قبل از تگ پایانی <form/> ، عبارت زیر را بنویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"submit"[/COLOR] [COLOR=#000066]value[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"submit message"[/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

عبارتی که برای مشخصه value تعیین می کنیم ، بر روی دکمه ارسال اطلاعات (دکمه submit) نمایش داده می شود .

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]form[/B][/COLOR] [COLOR=#000066]method[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"post"[/COLOR] [COLOR=#000066]action[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"script.php"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"text"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"submit"[/COLOR] [COLOR=#000066]value[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"submit message"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]form[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

دکمه های رادیویی :

حتما تاکنون دکمه های رادیویی را در فرم های اینترنتی دیده اید . این دکمه ها به صورت دایره های توخالی می باشند که اگر بر روی آنها کلیک کنید به صورت توپر در می آیند . توپر شدن یک دکمه رادیویی نشان دهنده انتخاب عبارت نوشته شده برای آن دکمه رادیویی می باشد . برای ساخت دکمه های رادیویی ، باید درون تگ <input> ، مشخصه type را برابر radio قرار بدهیم . به مثال زیر توجه کنید :

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]form[/B][/COLOR] [COLOR=#000066]method[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"post"[/COLOR] [COLOR=#000066]action[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"script.php"[/COLOR]>[/COLOR]
yes[COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"radio"[/COLOR] [COLOR=#000066]value[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"yes"[/COLOR]><[COLOR=#000000][B]br[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
no[COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"radio"[/COLOR] [COLOR=#000066]value[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"no"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]form[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

مشاهده می کنید که دو گزینه yes و no به کاربر نمایش داده شده است که کاربر باید یکی از آنها را انتخاب کند .

نکته :

در مثال قبل ، ممکن است کاربر به اشتباه ، ابتدا گزینه غلط را انتخاب کند و پس از متوجه شدن اشتباه بودن انتخاب خود ، گزینه صحیح را انتخاب کند ، در این زمان هر دو دکمه رادیویی به صورت توپر نمایش داده می شوند و دیگر کاربر نمی تواند گزینه غلط را به صورت توخالی در آورد . برای پیشگیری از وقوع این مشکل باید برای هر دو دکمه رادیویی یک نام را انتخاب کنیم ، یعنی اینکه برای تگ <input> ، مشخصه name را برای هر دو دکمه رادیویی به صورت یک نام واحد انتخاب کنیم . به مثال زیر توجه کنید :

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]form[/B][/COLOR] [COLOR=#000066]method[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"post"[/COLOR] [COLOR=#000066]action[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"script.php"[/COLOR]>[/COLOR]
yes[COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]name[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"yes_or_no"[/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"radio"[/COLOR] [COLOR=#000066]value[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"yes"[/COLOR]><[COLOR=#000000][B]br[/B][/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
no[COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]name[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"yes_or_no"[/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"radio"[/COLOR] [COLOR=#000066]value[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"no"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]form[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

جعبه انتخاب :

جعبه انتخاب ، جعبه ای می باشد که در جلوی یک عبارت (گزینه) قرار می گیرد و چنانچه بخواهیم آن گزینه را انتخاب کنیم باید درون آن جعبه کلیک کنیم ، آنگاه درون جعبه یک علامت ((تیک)) نمایش داده خواهد شد . چنانچه برای بار دوم درون جعبه کلیک کنیم ، آنگاه علامت ((تیک)) برداشته می شود .

برای ساخت یک جعبه انتخاب ، باید درون تگ <input> ، مشخصه type را برابر checkbox قرار دهیم . به مثال زیر توجه کنید :

مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]form[/B][/COLOR] [COLOR=#000066]method[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"post"[/COLOR] [COLOR=#000066]action[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"script.php"[/COLOR]>[/COLOR]
yes[COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"checkbox"[/COLOR]><[COLOR=#000000][B]br[/B][/COLOR]>[/COLOR]
no[COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"checkbox"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]form[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

جعبه کلمه عبور (پسورد) :

جعبه کلمه عبور (پسورد) در واقع یک جعبه متن است که اطلاعاتی که کاربر در آن می نویسد به صورت آرایه ای از علامت * نمایش داده می شود و برای وارد کردن اطلاعات محرمانه و کلمه های عبور (کلمه رمز) مناسب می باشد . نمایش اطلاعات با علامت * ، باعث می شود تا افرادی که در کنار کاربر هستند ، نتوانند اطلاعات وارد شده توسط وی در جعبه کلمه عبور را ببینند .

برای ساخت یک جعبه کلمه عبور باید درون تگ <input> ، مشخصه type را برابر password قرار دهیم . به مثال زیر توجه کنید :مثال :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]form[/B][/COLOR] [COLOR=#000066]method[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"post"[/COLOR] [COLOR=#000066]action[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"script.php"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]input[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"password"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]form[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

http://www.www.www.iran-eng.ir/attachment.php?attachmentid=248588&d=1438026911

چنانچه در جعبه نمایش داده شده ، کلماتی را بنویسید ، به جای حروف آن کلمات ، علامت * نمایش داده می شود .

Thread starter	عنوان	تالار	پاسخ ها	تاریخ
	مباحث اولیه برای آشنایی با CSS	HTML , XHTML , CSS	7	Jul 28, 2015
B	ترکیب عکس و متن در html	HTML , XHTML , CSS	1	Jun 11, 2018
T	رفع غلط املایی اشتباهات برنامه نویسی css html jquery php asp	HTML , XHTML , CSS	0	Feb 28, 2017
T	رفع غلط املایی اشتباهات برنامه نویسی css html jquery php asp	HTML , XHTML , CSS	0	Feb 28, 2017
T	رفع غلط املایی اشتباهات برنامه نویسی css html jquery php asp	HTML , XHTML , CSS	0	Feb 28, 2017

مباحث اولیه برای آشنایی با HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Similar threads