نوشتن Emailبه فارسی و به صورتی که بتوان برای آن راه حلی کلی و جامع ارائه کرد، تا قبل از آمدنWindows 2000 امکان پذیر نبود. برای نوشتن نامه های فارسی وChat کردن رایج ترین روش استفاده از زبانPinglish بود(و چه بسا بتوان گفت هست) . در این روش کلمات فارسی با استفاده از کاراکترهای انگلیسی تایپ می شدند:

Hale Shoma Khoob ast? در مورد وب سایت های فارسی نیز دو روش رایج بود: اول استفاده از فونت هایی که برای هر سایت می توانست فرق کند . بنابراین شما برای خواندن یک وب سایت فونت مخصوصش راdownload و نصب می کنید و برای سایت دیگر فونت دیگری را و الی آخر.

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

در حال حاضر با توجه به سیستمUniCode که شرکت مایکروسافت آن را همزمان باWindows 2000 معرفی کرد ، استفاده از زبان فارسی چه در وب سایت ها و چه درemail ها حالتی استانداردتر به خود گرفته است.UniCode که مخففUniversal Code و به معنی کد جهانی است مجموعه ای از بسیاری از زبان های رایج در دنیا و از جمله فارسی را دارد که در صورت استفاده از سیستم عامل ویندوز ، دیگر نیازی به نصب فونت بخصوصی وجود ندارد و کافی است روی آن صفحهright click کنید،Encoding و سپس UTF-8) UniCode)را انتخاب کنید.

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

البته همانطور که اشاره شد این سیستم فقط در سیستم عامل ویندوز و مرورگرInternet Explorer کاربرد دارد . بنابراین اگر شما سیستم عامل مکینتاش و یا مرورگرNetscape داشته باشید نمی توانید این گونه صفحات را ببینید. و اما برای نامه نگاری در اینترنت – ارسال و دریافتe-mail نیز همان دو روش که در مورد وب سایت ها اشاره شد کاربرد دارد: یکی استفاده از عکس و دیگری استفاده از سیستمUnicode توصیه می شود. البته در این حالت علاوه بر ایرادهایی که اشاره شد این محدودیت نیز وجود دارد که حتماًٌ باید دارای سیستم عامل windows 2000 و یاwindows xp باشید.

برای آنکه بتوانید از این سیستم استفاده کنید ابتدا لازم است قابلیت تایپ کاراکترهای فارسی را در ویندوز 2000 یاxp خود تعریف کنید. برای این کار بهControl Panel بروید،Regional , Language Options را انتخاب کنید و زبان فارسی را به مجموعه زبان های مورد استفاده کامپیوتر خود اضافه کنید. از این به بعد در پایین صفحه سمت راست کنار ساعت کامپیوتر شما مربعی ظاهر خواهد شد که درآنFA ( برای فارسی) و یاEN ( برای انگلیسی) ظاهر می شود که با کلیک کردن روی آن می توانید بین این دو زبان سوئیچ کنید.

بعد از آنکه زبان کاراکترهای کامپیوتر خود را فارسی کردید ، کافی است به همان صورتی که مثل همیشهEmail می نویسید، عمل کنید و تنها هنگامی که می خواهید متن نامه را بنویسید از زبان فارسی استفاده کنید. در این حالت مهم نیست که شما از سیستمWeb based email و یا نرم افزارهای ویرایشگر مثلOutlook Express  استفاده می کنید.

برای خواندن چنین نامه هایی نیز کافی است که محیطی که در آن نامه را می خوانید سیستمUnicode را پشتیبانی کند. بنابراین اگر از سیستمWeb based email استفاده می کنید کافی است تا تنظیماتInternet Explorer را به گونه ای تغییر دهید کهUnicode را پشتیبانی کند و اگر ازOutlook Express استفاده می کنید کافی است تا در قسمتview, Encoding, Unicode را انتخاب کنید.

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

برای اینکه بتوانیم یک متن را در کنار یک عکس بنویسیم باید در تگ عکس از یکی این فرمانها استفاده کنیم (در صورتی که از این فرمانها استفاده نشود متن و عکس در دو سطر نمایش داده می شوند):

align="left"
align="right"

تگ عکس با استفاده از این فرمانها به صورت زیر در می آید:

<img src="learn_html.gif" align="left">

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

 

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

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

این سطر قبل از وارد کردن عکس است<br>
<img src="learn_html.gif" align="left">
این سطر باید در کنار عکس به نمایش درآید<br>
همینطور تا وقتی که<br>
متن به پایان عکس برسد<br>
متن باید در کنار عکس قرار گیرد<br>
تا به پایان عکس برسد<br>

نتیجه هم به صورت زیر است:

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

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

شما می توانید از فرمان "align="right برای قرار دادن عکس در سمت راست صفحه استفاده کنید. در این صورت عکس در سمت راست صفحه نمایش داده می شود و متن در سمت چپ کس دیده می شود.

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

1. چگونه یک لینک بسازیم.
2. چگونه یک عکس را به صفحه اضافه کنیم.

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

• اگر بخواهیم یک عکس را به صفحه اضافه کنیم باید از این تگ استفاده کنیم:

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

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

می خواهیم از عکسی با نام learn_html.gif که در پوشه همین صفحه قرار دارد به عنوان لینک به مقدمه آموزش HTML که در همین پوشه است استفاده کنیم(نام صفحه مورد نظر index.html است). به این صورت عمل می کنیم:

لینک به دست آمده مانند سطر زیر است:

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

اغلب مرورگرها به تصاویری که به عنوان لینک استفاده می شوند یک خط حاشیه (border) در لبه های تصویر اضافه می کنند. برای اینکه این خط دیده نشود شناسه زیر را به تگ عکس خود اضافه کنید:

مثال قبل را با اضافه کردن شناسه بالا تکرار می کنیم:

نتیجه به این صورت در می آید:

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

نتیجه را در زیر مشاهده می کنید:

منظور از قرار دادن خط حاشیه مشخص کننده محدوده لینک است.

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

شما می توانید اندازه عکس را تغییر دهید. این کار را می توانید با افزودن شناسه های width (برای عرض عکس) و height (برای ارتفاع عکس) به تگ img انجام دهید. به یک مثال در این مورد توجه کنید:

فرض کنیم یک عکس با نام learn_html.gif داریم و می خواهیم آنرا کوچکتر از اندازه اصلی آن نشان دهیم. تنها چیزی که باید بدانیم اندازه اصلی عکس است. اندازه عرض و ارتفاع عکس معمولاً با مقیاس پیکسل سنجیده میشود. عکس ما 137 پیکسل عرض و 77 پیکسل ارتفاع دارد. در زیر می توانید عکس را با اندازه های واقعی ببینید.

حالا می خواهیم شناسه های width و height را در تگ عکس وارد کنیم. تگ ما به این صورت در می آید:

<img src="learn_html.gif" width=" " height=" ">

حالا کافی است اندازه مورد نظر را در بین دو دابل کوت ( " " ) وارد کنید. برای مثال من اندازه 100 را برای عرض و 50 را برای ارتفاع وارد می کنم . به صورت زیر:

<img src="learn_html.gif" width="100" height="50">

در زیر می توانید عکس را پس از تغییر اندازه مشاهده کنید:

 

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

مثلاً با عرض200 و ارتفاع 100:

<img src="learn_html.gif" width="200" height="100">

 

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

 

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

اگر بخواهید تصاویر با همان نسبت قبلی تغییر اندازه پیدا کنند باید نسبت بین عرض تصویر و ارتفاع آن را به دست آورید مثلا وقتی من مو خواهم تصویری با عرض 100 پیکسل داشته باشم می توانم به این صورت ارتفاعی را که در آن تناسب عکس به هم نمی خورد پیدا کنم:

77÷137=0.562
height÷100=0.562   --->   height=100×0.562 --->  height=56.2

حال اگر من اندازه تصویر را با عرض 100 پیکسل و ارتفاع 56/2 پیکسل تعریف کنم تصویری با همان تناسب تصویر اصلی به دست خواهیم آورد مانند زیر:

<img src="learn_html.gif" width="100" height="56">

 

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

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

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

<body bgcolor="#66ccff" text="#000000">

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

background=" "

اکنون تگ BODY شما باید به این صورت باشد (اگر فرمانهای دیگری به آن اضافه نکرده باشید):

<body background=" ">

حالا باید آدرس عکس را بین دو دابل کوت قرار دهیم. برای این کار دو راه وجود دارد:

• برای این کار اگر صفحه و عکس در یک مسیر هستند می توانیم فقط نام کامل عکس با پسوند آنرا بنویسیم. مثلاً:

<body background="image.gif">

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

<body background="http://www.example.com/image.gif">

تصاویر برای زمینه باید با یکی از دو فرمت GIF یا JPG باشند. اگر عکس به این صورت نبود باید آن را با برنامه ای مثل Paint Shop Pro یا Photoshop به یکی از این فرمتها تبدیل کرد.
 

برای مثال فرض کنید یک عکس با نام background.jpg داریم که در این مسیر قرار دارد: http://www.mysite.com/img . حال اگر بخواهیم صفحه ای را در پوشه ای به غیر از پوشه img در این سایت طراحی کنیم باید از آدرس کامل عکس یعنی http:www.mysite.com/img/background.jpg استفاده کنیم. و تگ BODY ما به این صورت در می آید:

<body background="http:www.mysite.com/img/background.jpg">

ما برای تعیین تصویر زمینه این صفحه قبلاً از این تگ استفاده می کرده ایم:

<body background="http://www.neopersia.org/images/index.jpg">

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

<body background="background.jpg">

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

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

<body bgcolor="gray">

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

<body bgcolor="#66ccff">

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

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

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

برای مثال اگر می خواهید رنگ زمینه به رنگ سبز درآید باید مانند زیر عمل کنید:

<body bgcolor="green">

و یا به این صورت:

<body bgcolor="008000">

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

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

اگر بخواهید رنگ لینکها را در صفحه خود تغییر دهید مانند تغییر رنگ پیش فرض متن باید تگ BODY را پیدا کنید. در تگ BODY به دنبال شناسه link بگردید. مثلاً ممکن است تگ BODY به این صورت باشد:

<body link="blue">

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

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

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

مثلاً برای تغییر رنگ لینکها به زرد می توانیم مانند زیر عمل کنیم:

1- استفاده از نام رنگ:

<body link="yellow">

2- استفاده از معادل هگزادسیمال رنگ:

<body link="#ffff00">

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

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

<body alink="blue" vlink="violet">

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

برای تغییر دیگر رنگها هم به همین صورت عمل می شود تنها نکتهای که باید مد نظر قرار گیرد این است که حتماً قبل از وارد کردن فرمان یک فضای خالی با فرمان قبلی بگذارید.

روش دیگری که برای تغییر رنگ لینکها وجود دارد استفاده از استایل و CSS است. در صورتی که برای تعیین مشخصات لینکها از استایل استفاده شود امکان افزودن ویژگیهای دیگری نظیر کادر و رنگ زمینه هم به لینکها وجود دارد. در صورت تمایل می توانید بخش مربوط به تغییر ویژگیهای لینکها با استفاده از استایل را مطالعه کنید.

وقتی که شما یک صفحه HTML می نویسید می توانید چیزهای زیادی را در آن با اضافه کردن شناسه هایی به تگ <BODY> تغییر داد. تگ زیر را در نظر بگیرید:

<body bgcolor="green" text="blue" link="yellow" alink="red" vlink="white" background="image.gif">

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

"bgcolor="color

این شناسه رنگ زمینه صفحه شما را تغییر می دهد. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. برای دیدن لیست رنگها به صورت هگزا دسیمال به سر فصل این بحث بروید. گزینه پیش فرض این ویژگی معمولاً سفید یا خاکستری است.

"text="color

این شناسه رنگ متنی را که در پنجره مرورگر به نمایش در می آید تعیین می کند. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. برای دیدن لیست رنگها به صورت هگزا دسیمال اینجا را کلیک کنید. گزینه پیش فرض این ویژگی مشکی است.

"link="color

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

"alink="color

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

"vlink="color

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

"background="image.gif

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

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

• لیستهای نامرتب

در لیستهای نامرتب برای عناصر لیست از شماره و عدد یا حروف الفبا استفاده نمی شود. عناصر این معمولاً با یک دایره تو پر مشخص می شوند. تگ ابتدای آن <ul> است و تگ پایانی آن <ul/> است. برای جدا کردن هر بخش لیست در ابتدای آن از تگ <li> استفاده می شود. بهتر است هر تگ <li> که باز می شود با <li/> بسته شود. در زیر یک مثال برای این نوع لیست آورده شده است:

مثال بالا یک لیست بولت دار با سه بخش را به ما می دهد:

• بخش اول لیست
• بخش دوم لیست
• بخش سوم لیست

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

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

• خط اول لیست
• خط دوم لیست
• خط سوم لیست