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

آموزش HTML

 

فصل سوم

۱ – کار کردن با فونتها و رنگ و اندازه آنها

۲ – کاراکترهای ویژه، علامتهایی که نمی توان آنها را با صفحه کلید تایپ کرد

۳- ایجاد پیوند به دیگر صفحات با HTML

۴ – کار با متن ها قسمت دوم

۱ – کار کردن با فونتها و رنگ و اندازه آنها

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

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

<font size=”x”>متنی که می خواهیم اندازه آنرا تعیین کنیم</font>

به جای «x» عددی با علامت منفی یا مثبت قرار می گیرد. هنگامی که می خواهیم یک متن بزرگتر طاهر شود از علامت مثبت و وقتی که می خواهیم متن کوچکتر شود از علامت منفی استفاده می کنیم. به مثال زیر دقت کنید:

<font size=”+2″>این متن بزرگتر دیده می شود</font>

این هم نتیجه تغییر سایز فونت:

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

برای کوچکتر کردن متن نیز به همین صورت عمل می کنیم:

…………………………………………………………………

<font size=”-2″>این متن کوچکتر دیده می شود</font>

این هم متن کوچک شده:

این متن کوچکتر دیده می شود

این هم تعدادی مثال برای درک بهتر مطالب:

<font size=”+4″>این متن با اندازه ۴ نوشته شده است</font>

این متن با اندازه ۴ نوشته شده است

…………………………………………………………………

<font size=”+3″>این متن با اندازه ۳ نوشته شده است</font>

این متن با اندازه ۳ نوشته شده است

…………………………………………………………………

<font size=”+2″>این متن با اندازه ۲ نوشته شده است</font>

این متن با اندازه ۲ نوشته شده است

…………………………………………………………………

<font size=”+1″>این متن با اندازه ۱ نوشته شده است</font>

این متن با اندازه ۱ نوشته شده است

…………………………………………………………………

<font size=”-1″>این متن با اندازه ۱- نوشته شده است</font>

این متن با اندازه ۱- نوشته شده است

…………………………………………………………………

<font size=”-2″>این متن با اندازه ۲- نوشته شده است</font>

این متن با اندازه ۲- نوشته شده است

…………………………………………………………………

<font size=”-3″>این متن با اندازه ۳- نوشته شده است</font>

این متن با اندازه ۳- نوشته شده است

…………………………………………………………………

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

<font color=”زنگ مورد نظر”>

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

برای شروع با اسم رنگ شروع می کنیم:

<font color=”red”>متن مورد نظر</font>

متن پایانی:

متن مورد نظر

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

<font color=”#ff0000″>متن مورد نظر</font>

در اینجا نتیجه با مثال قبلی برابر است:

متن مورد نظر

معادل هگزا دسیمال رنگها را باید با علامت # شروع کرد و بعد از این علامت شش حرف یا عدد دیگر می گزاریم. برای رنگ قرمز بعد از علامت # دو F و چهار صفر قرار می گیرد.

فرض کنید می خواهید رنگ و اندازه متنی را همراه با هم تغییر دهید. برای این کار می توانید از دو تگ <font> استفاده کنید. اما به خاطر داشته باشید که هر دو را ببندید. مانند زیر:

<font size=”+2″><font color=”gold”>متن بزرگ و طلایی</font></font>

متن بزرگ و طلایی

همچنین می توانید از شناسه های size و color در یک تگ <font> استفاده کنید. مانند زیر:

<font size=”+2″ color=”gold”>متن بزرگ و طلایی</font>

 متن بزرگ و طلایی

شما می توانید رنگ فونت را در تگ body تعریف کنید که بعداً به آن اشاره میکنیم.

۲ – کاراکترهای ویژه، علامتهایی که نمی توان آنها را با صفحه کلید تایپ کرد.

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

کلمه اول &nbsp; کلمه دوم

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

کلمه اول   کلمه دوم

فاصله اول بین کلمات با فشار دادن دکمه Space درست می شود. مرورگر فاصله اول را شناسایی میکند اما بعد از آن هر تعداد فاصله که باشد فرقی نمی کند و شما فقط یک فاصله را در مرورگر مشاهده میکنید. افزودن کد ;nbsp& مرورگر را مجبور می کند تا بین دو کلمه فاصله اضافی قرار دهد. شما با تکرار این کد می توانید به هر تعداد که بخواهید فاصله خالی ایجاد کنید.مانند زیر:

کلمه اول &nbsp;&nbsp;&nbsp;&nbsp;کلمه دوم

نتیجه:

کلمه اول     کلمه دوم

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

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

this page Copyright &copy; 2007 by me

متن نتیجه:

this page Copyright © ۲۰۰۷ by me

روش کار برای تمامی کاراکترهای ویژه به همین صورت است فقط کد آنها را در متن HTML قرار دهید.

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

نام کاراکتر

شکل ظاهری کاراکتر

کد سازنده کاراکتر

امپرسند

&

&amp;

علامت کپی رایت

©

&copy;

علامت ثبت شده

®

&reg;

علامت تجاری

&trade;

علامت کوچکتر از

<

&lt;

علامت بزرگتر از

>

&gt;

علامت خنجر

&dagger;

——————–

»

&raquo;

——————–

«

&laquo;

خط فاصله ام

علامت درجه

°

&deg;

یک چهارم

¼

&frac14;

یک دوم

½

&frac12;

سه چهارم

¾

&frac34;

نقطه میانی

·

&middot;

علامت تعجب وارونه

¡

&iexcl;

علامت یورو

&euro;

علامت پوند انگلیس

£

&pound;

علامت تقسیم

÷

&divide;

علامت رادیکال

&radic;

۳ – ایجاد پیوند به دیگر صفحات با HTML

<a href=”url”>متن لینک</a>

تگ <a> نشانه لینک است. شناسه href مشخص کننده آدرس لینک می باشد، <a/> نشانه بسته شدن تگ است. متنی که بین این دو تگ ابتدایی و پایانی نوشته می شود متنی است که در صفحه شما به عنوان یک لینک دیده می شود. مثلاً اگر می خواهید به یک صفحه وب مثلاً صفحه اصلی سایت ما با این آدرس:   http://www.on5.ir/html/index.html لینکی را در صفحه خود داشته باشید باید دستور زیر را در قسمت body صفحه خود در جایی که تصمیم دارید لینک به نمایش درآید قرار دهید:

<a href=”http://www.on5.ir/html/index.html”>متن نمونه برای لینک</a>

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

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

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

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

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

در مثال زیر فرض بر این است که هر دو صفحه مبدأ و مقصد لینک در یک پوشه قرار دارند. برای نمونه سرفصل آموزش مقدماتی HTML در همان پوشه ای قرار دارد که این صفحه قرار دارد. نام این صفحه index.php است. برای ایجاد یک لینک در این صفحه می توانیم به اینگونه عمل کنیم:

<a href=”index.php”>متن نمونه برای لینک</a>

لینک حاصل شده:

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

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

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

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

<a href=”../css/index.html” title=”آموزش استفاده از استایل در صفحات وب”>آموزش CSS به زبان فارسی</a>

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

آموزش CSS به زبان فارسی

۴ – کار با متن ها قسمت دوم

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

تعدادی تگ هستند که در هنگام کار با متن ها می توانید از آنها استفاده کنید. تگهایی که در این قسمت مورد بحث قرار می گیرند اینها هستند: <SUB> , <SUP> , <PRE> , <NOBR , <WBR> , <BLINK>

۱-    <SUB> و <SUP>

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

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

استفاده از تگ <SUB> :

y<SUB>1</SUB>

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

y1

استفاده از تگ <SUP> :

۲۵<SUP>3</SUP>

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

۲۵۳

۲-    <PRE>

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

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

<PRE>
x=1;
y=2;
if (x==1)
{
y=2;
}
</PRE>

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

x=1;

y=2;

if (x==1)

    {

    y=2;

    }

در زمان استفاده از این تگ شما نیازی به استفاده از <BR> و ;nbsp& ندارید و راحت می توانید متن خود را به همانطور که می خواهید به ظاهر شود بنویسید.

۳-    <NOBR> و <WBR>

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

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

<NOBR>
مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال
، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،
مثال ، مثال
</NOBR>

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

شما می توانید از تگ <WBR> در تگ بالا استفاده کنید اگر می خواهید بیش از یک خط متن بلند داشته باشید. به مثال زیر دقت کنید:

<NORB>
، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ،
مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال<WBR> مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال مثال ،
مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال
<NOBR>

این هم نتیجه:

، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال

۴-    <BLINK>

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

Opera و Firefox از جمله مرورگرهایی هستند که می توانند این تگ را نمایش دهند. درMicrosoft Internet Explorer فقط متن ساده را می توان ملاحضه کنید.

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

 برای کارایی بیشتر می توانید آنرا با اندازه فونتی مثل ۱۰+ استفاده کنید.

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

this is <BLINK>VERY VERY</BLINK> important!!!

نتیجه این تگ:

this is VERY VERY important!!!

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