آموزش اچ تی ام ال

 لیست های تعریف

به غیر از لیست های نامرتب و مرتب که تا اینجا خواندیم، لیست های دیگری نیز به نام لیست تعریف نیز وجود دارد.این لیست ها بر خلاف دو لیست قبلی شامل اقلام نمیباشد بلکه لیستی از عبارات و توضیحات مربوط به آن عبارت میباشد.برای تعریف این لیست از تگ <dl>استفاده میشود.به این ترتیب که در ابتدا و انتهای لیست این تگ را قرار میدهیم سپس در بدنه این لیست عباراتی و عناوینی  که میخواهیم تعریف کنیم را با تگ <dt>  قرار داده و تعریف مربوط به آنها را در تگ <dd> و بلافاصله پس از آنها مینویسیم.

ادامه ی مطلب

ایجاد متون متحرک

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

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

شناسه loop

این شناسه با دریافت مقدار infinite  یا عدد منفی یک  ، باعث میشود که متن مورد نظر ما تا زمان بستن صفحه در حال حرکت باشد.

به عنوان مثال به این سند html دقت کنید. در قسمت body سند عبارت marquee را نوشته و تاثیر آنرا مشاهده کنید.

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

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

دو شناسه دیگر این تگ عبارتند از : bgcolor و width  که به ترتیب رنگ زمینه متن و عرضی که متن در آن گردش میکند را مشخص میکند.

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

 Width نیز بر حسب پیکسل و یا درصد تعیین میشود.

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

همانطور که میبینید هم رنگ زمینه متن و هم عرض محدوده ای که در آن گردش کرده اند تغییر کرده است.

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

در پایان این فصل با چند تگ دیگر که برای نمایش متون در html  به کار میرود آشنا میشویم.

تگ <pre>

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

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

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

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

تگ <blink>

با استفاده از این تگ میتوایند متن را به صورت چشمک زن در آورید.این تگ فقط در مرورگرهایی کارایی دارد که بر پایه net script  ساخته شده باشند. Opera  و Fire fox از جمله مرورگر هایی هستند که میتوانند این تگ را به نمایش درآورند.اگر این تگ به جا استفاده شود میتواند توجه خواننده را به نقطه خاصی جلب کند.اما اگر به جا استفاده نشود میتواند آزار دهنده باشد.برای نمونه به این سند دقت کنید:

حال نتیجه را مشاهده کنید. می بینید که عبارت Learning html  به صورت چشمک زن در آمده است.

تگ <nobr>

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

برای نمونه به این سند دقت کنید:

متن مورد نظرمان را درون تگ <nobr> قرار داده ایم.همانطور که میبینید متن ما بیش از یک خط میباشد.با مشاهده نتیجه این سند ملاحظه میکنید که تمام این متن در یک خط نمایش داده شده است و برای دیدن همه متن میبایست از scroll  افقی موجود در پایین مرورگر استفاد نمایید.

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

در گذشته با تگ <center> آشنا شدید.این تگ باعث میشد که متن به صورت وسط چین نمایش داده شود.حال اگر شما بخواهید که متن مورد نظرتان از سمت راست چیده شود ، میبایست شناسه align مربوط به تگ font  را برای آن متن برابر right قرار دهید.ویا اگر بخواهید که چپ چین باشد ، برابر left  قرار میدهیم.ای شناسه مقدار center را نیز میپذیرد ومتن را به صورت وسط چین در صفحه نمایش نشان میدهد.این شناسه در اکثر تگ های معرفی شده وجود دارد و می توان بوسیله آن نحوه چیدن متون را مشخص کرد.به عنوان مثال میخواهیم متن را به صورت راست چین نمایش دهیم.

برای اینکار یک سندhtml ایجاد کرده و در قسمت body  آن بوسیله تگ <h3> یک سرفصل مینویسیم. شناسه align  این تگ را برابر right قرار میدهیم:

حال فایل را ذخیره کرده ونتیجه را مشاهده نمایید.می بینید که متن مورد نظر در سمت راست نمایش داده شده است.

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

نوشتن کامنت در سند html

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

به عنوان مثال تصور کنید که صفحه وب سایتی را در مرورگر خود تماشا میکنید.برای اینکه کد های html این صفحه را ببینید می بایست به دنبال گزینه مناسب در مرورگر خود بگردید.ابتدا یکی از فایل هایی را که تاکنون کار کرده ایم را با استفاده از مرورگر Fire fox باز میکنیم.سپس برای مشاهده کدهای html این صفحه در صفحه باز شده کلیک راست کرده و گزینه View Page Source   را انتخاب نمایید.همانطور که مشاهده میکنید کدهای موجود در صفحه در پنجره باز شده نمایش داده میشود.

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

در مواردی که پس از گذشت یک مدت نیاز به ویرایش آن صفحه باشد یا بیش از یک نفر در نوشتن یک صفحه نقش داشته باشند ،

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

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

<!–          –>

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

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

مشاهده میکنید که تنها متن نوشته شده در صفحه نمایش داده میشود و از قسمت کامنت در صفحه اثری نیست.با استفاده از گزینه  View Page Source در مرورگر Fire Fox کد html صفحه را باز کنید.

همانطور که میبینید در این قسمت میتوانید کامنت نوشته شده را مشاهده نمایید.

لیست های تعریف

به غیر از لیست های نامرتب و مرتب که تا اینجا خواندیم، لیست های دیگری نیز به نام لیست تعریف نیز وجود دارد.این لیست ها بر خلاف دو لیست قبلی شامل اقلام نمیباشد بلکه لیستی از عبارات و توضیحات مربوط به آن عبارت میباشد.برای تعریف این لیست از تگ <dl>استفاده میشود.به این ترتیب که در ابتدا و انتهای لیست این تگ را قرار میدهیم سپس در بدنه این لیست عباراتی و عناوینی  که میخواهیم تعریف کنیم را با تگ <dt>  قرار داده و تعریف مربوط به آنها را در تگ <dd> و بلافاصله پس از آنها مینویسیم.

به عنوان مثال میخواهیم یک لیست تعریف ایجاد کنیم.برای اینکار ابتدا یک سند HTML  ایجاد کرده و در قسمت body آن تگ <dl>  را قرار میدهیم.در این این تگ با استفاده از تگ های <dt> و <dd> عناوین و توضیحات مربوط به آنرا مینویسیم:

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

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

استفاده از تگ ol و لیست های مرتب

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

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

اگر بخواهیم که فهرست  ما از شماره خاصی شروع شود و ادامه پیدا کند از ویژگی start در تگ <ol> استفاده میکنیم و شماره مورد نظرمان را به عنوان مقدار به آن میدهیم.برای نمونه لیست مثال قبل را با شماره یازده آغاز میکنیم.برای اینکار در تگ آغازین <ol> عبرات start را نوشته و مقدار یازده را به آن میدهیم.

دقت کنید که مقدار ویژگی ها را باید در داخل “  ” قرار داد.بعد از ذخیره کردن تغییرات نتیجه را مشاهده کنید.

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

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

میدانیم که در لیست ها با استفاده از این ویژگی میتوانستیم شکل بولت ها را تعیین کنیم.در لیست های مرتب نیز با استفاده از این ویژگی میتوان نوع شکل شماره گذاری اعداد را تغییر داد.این شماره گذاری ها میتواند با اعداد ، حروف و سایر علامتها نشان داده شود.مواردی که این ویژگی در لیست های مرتب میتواند بپذیرد عبارتند از:۱,A,a,I,i

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

با استفاده از شناسه ۱بخش های لیست با اعداد ریاضی مشخص میشوند.

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

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

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

با استفاده از شناسه iبخش های لیست با استفاده  از اعداد یونانی و به صورت کوچک نمایش داده میشوند.

به عنوان مثال دو سطر اول مثال بالا را با اعداد یونانی و دو سطر بعد را با حروف بزرگ انگلیسی نمایش میدهیم.برای اینکار ویژگی type دو سطر اول لیست را برابر I  ودو سطر بعدی را برابر A قرارمیدهیم.

پس از ذخیره سند تغییرات انجام شده را ملاحظه کنید.

اکنون شناسه start تگ <ol> را برداشته و مجددا نتیجه را مشاهده نمایید.

میبینید که دو سطر اول دارای مقادیر یک و دو در زبان یونانی هستند و دو سطر بعد دارای مقادیر C ,D هستند.

دقت کنید که با عوض کردن مقدار  type شماره گذاری از اول آغاز نمیشود و در ادامه شماره های قبلی خواهد بود.

لیست های مرتب را نیز میتوان به صورت لیست های نامرتب استفاده نمود.برای این منظور میبایست در زیر سطرها در از تگ <ol> استفاده کنیم.این کار دقیقا مانند لیست های نامرتب انجام میشود.برای نمونه در مثال مطرح شده ابتدا ویژگی ها را حذف می کنیم تا سطرهای اصلی به ترتیب و با شماره مشخص شوند.حال به سطر اول دو زیر سطر که با حروف بزرگ انگلیسی مشخص شده اند اضافه میکنیم.

استفاده از تگ ul و لیست های نامرتب

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

نحوه استفاده از تگ مورد نظر به این صورت است که تگ ul را در ابتدا و انتهای کل لیست مورد نظر قرار میدهیم سپس تگ li  را نیز در ابتدا و انتهای فهرست مینویسیم.

به عنوان مثال یک سند html ایجاد کرده در قسمت body آن فهرست مورد نظر خود را مینویسیم:

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

در ادامه میخواهیم فاصله این لیست را از صفحه کناری بیشتر کنیم.برای این منظور باید در ابتدا ئ انتهای فهرست تگ های بیشتر از ul   را باز کرده و ببنیدیم.برای این منظور در مثال بالا دو تگ ul اضافه میکنیم و تغییرات حاصل را میبینیم.

حال اگر بخواهید شکل بولت را تغییر دهید میتوانید با استفاده از ویژگیtype که در تگ li قرار میگیرد انجام دهیم.این ویژگی دارای مقادیری از قبیل  circle , disc , Squareمیباشد.

Circle یک دایره توخالی را نمایش میدهد.

Disc  یک دایره توپر را نشان میدهد.

Square یک مربع توپر را نشان میدهد.

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

حال سند را ذخیره کرده و تغییرات حاصل را ملاحظه کنید.

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

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

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

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

حال پس از ذخیره سند نتیجه را مشاهده میکنیم.

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

کاراکترهای خاص

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

حال سند خود را با پسوند htm ذخیره کرده و در مرورگر فراخوانی نمایید.

ملاحظه میکنید که  عبارت &nbsp; باید ایجاد یک خط فاصله بین دو کلمه میشود پس در مثال بالا بین دو کلمه سه کاراکتر فاصله ایجاد میشود.

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

حال سند خود را با پسوند htm ذخیره کرده و در مرورگر فراخوانی نمایید.

همانطور که میبینید علامت کپی رایت پس از عبارت PCTech به نمایش درمیاید.

نکته قابل توجه در مورد این کاراکتر های خاص این میباشد که همه آنها با & شروع و با ; خاتمه می یابند.

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

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

ایجاد خط

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

برای اینکار از تگ hr که یک تگ منفرد میباشد استفاده میکنیم.برای نمونه یک سند html ایجاد کرده و در قسمت body آن چند سطر متن مینویسیم  وسپس برای جدا کردن متن ها از یکدیگر تگ hr را بین آنها مینویسیم.:

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

برای نمونه در تمرین قبل شناسه size را برای تگ hrبرابر ۱۰ قرار میدهیم و تاثیر آنرا مشاهده میکنیم.

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

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

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

میبینید که خط در وسط صفحه و با طول ۱۰۰ پیکسل نمایش داده میشود.

شناسه بعدی noshade میباشد.این شناسه عبارت noshed را به عنوان ورودی دریافت کرده و باعث میشود که خط کشیده شده بدون سایه باشد و به صورت توپر نمایش داده شود.برای مثال در تمرین قبل شناسه noshade را وارد کرده و تغییرات را مشاهده میکنیم.

تعیین ویژگی های متن

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

خصوصیات مورد نظر ما در این قسمت عبارتند از:نوع فونت ،اندازه فونت و رنگ آن .

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

طبق معمول یک سند HTML ایجاد کرده و کد های زیر را در آن مینویسیم.

همانطور که ملاحظه مینمایید برای تغییر فونت از تگ font و ویژگی size استفاده مینماییم.

حال برای مشاهده تغییرات انجام شده سند خود را با پسوندhtm ذخیره نموده و در مرورگر فراخوانی نمایید.

میبینید که سایز متن تغییر کرده است.

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

حال برای مشاهده تغییرات انجام شده سند خود را با پسوندhtm ذخیره نموده و در مرورگر فراخوانی نمایید.

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

ویژگی دیگر متن ها که میتوانیم از طریق تگ فونت تعیین کنیم رنگ آنها میباشد.برای تغییر رنگ یک متن از ویژگی color استفاده مینماییم.برای اینکه رنگ یک آیتم را در HTMLتعییین کنیم دو روش وجود دارد.

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

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

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

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

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

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

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