-
مدیر بازنشسته
استفاده از لیست های html در صفحه
استفاده از لیست های HTML در صفحه
دو نمونه از پر استفاده ترین لیستها در HTML لیستهای مرتب و لیستهای نامرتب هستند. در لیستهای مرتب ترتیب بخشهای مختلف لیست مشخص می شود ولی در لیستهای نامرتب این ترتیب مشخص نمی شود.
در لیستهای نامرتب برای عناصر لیست از شماره و عدد یا حروف الفبا استفاده نمی شود. عناصر این معمولاً با یک دایره تو پر مشخص می شوند. تگ ابتدای آن <ul> است و تگ پایانی آن <ul/><li> استفاده می شود. بهتر است هر تگ <li> که باز می شود با <li/> بسته شود. در زیر یک مثال برای این نوع لیست آورده شده است: است. برای جدا کردن هر بخش لیست در ابتدای آن از تگ
<ul>
<li>بخش اول لیست</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست</li>
</ul>
مثال بالا یک لیست بولت دار با سه بخش را به ما می دهد:
- بخش اول لیست
- بخش دوم لیست
- بخش سوم لیست
به این نکته هم توجه کنید که <li> نیازی به تگ پایانی ندارد ولی بهتر است از تگ پایانی آن یعنی <li/> استفاده شود.. فاصله متن لیست شده از ابتدای خط هم مقداری از بقیه متن بیشتر می شود. شما می توانید این فاصله را با افزودن تگ <ul> بیشتر کنید فقط به خاطر داشته باشید تگهایی را که باز کرده اید در آخر لیست ببندید.در زیر یک مثال برای این نمونه لیست آورده شده است:
<ul>
<ul>
<ul>
<li>خط اول لیست</li>
<li>خط دوم لیست</li>
<li>خط سوم لیست</li>
</ul>
</ul>
</ul>
نتیجه این فرمان به شکل زیر خواهد بود:
- خط اول لیست
- خط دوم لیست
- خط سوم لیست
از شناسه type می توان در تگ <ul> استفاده کرد و ظاهر لیست را تغییر داد.
از این شناسه در لیستهای نا مرتب برای مشخص کردن شکل علامت مشخص کننده هر بخش استفاده می شود. این شناسه می تواند مقادیر زیر را داشته باشد:
- circle
با قرار دادن این مقدار برای لیست علامت ابتدایی هر بخش به شکل یک دایره تو خالی در می آید. - disc
این مقدار شکل علامت ابتدای هر قسمت از لیست را به یک دایره تو پر تغییر می دهد. - square
این مقدار شکل علامت لیست را به صورت یک مربع تو پر در می آورد.
به یاد داشته باشید که از شناسه type هم می توان در تگ <ul> استفاده کرد و هم در تگ <li>. در صورتی که برای تگ <ul> از این شناسه استفاده شود علامت مربوط به همه قسمتهای لیست تغییر می کند اما اگر برای تگ <li> از این شناسه استفاده شود فقط علامت مربوط به همان بخش از لیست تغییر می کند.
در مثال زیر می توانید نحوه نمایش لیست با استفاده از شناسه type را در حالات مختلف مشاهده کنید. ما از کد زیر برای ساختن این لیست آزمایشی استفاده می کنیم:
<ul>
<li type="circle">قسمت اول لیست</li>
<li type="disk">قسمت دوم لیست</li>
<li type="square">قسمت سوم لیست</li>
</ul>
می توانید لیست به دست آمده را در اینجا مشاهده کنید. به خاطر داشته باشید که در مرورگرهای مختلف ممکن است نحوه نمایش لیستها متفاوت باشد.
- قسمت اول لیست
- قسمت دوم لیست
- قسمت سوم لیست
اگر می خواهید از تگ <center> برای لیست خود استفاده کنید در این کار دقت کنید. چون ممکن است تمام سطرهای متن شما به یک اندازه نباشند. در این صورت به جای اینکه لیستی در یک خط و مستقیم داشته باشید ممکن است لیستی در هم ریخته و شلوغ به وجود آید. مانند زیر:
<center>
<ul>
<li>بخش اول لیست که بلندتر از بقیه سطرهای لیست است</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست در سطر آخر</li>
</ul>
<center>
لیست نهایی به این صورت در صفحه دیده می شود.
- بخش اول لیست که بلندتر از بقیه سطرهای لیست است
- بخش دوم لیست
- بخش سوم لیست در سطر آخر
اگر شما در یک صفحه بیشتر به لیستها نیاز دارید می توانید از روش بالا استفاده کنید اما باید بدانید که ممکن است ظاهر لیست در اندازه های مختلف پنجره مرورگر به هم بخورد. راه دیگری که برای جلوگیری از این به هم خوردگی وجود دارد استفاده از یک Table است که بعداً در مورد آن توضیح خواهیم داد.
-
-
مدیر بازنشسته
لیستهای مرتب
شما می توانید در مورد لیستهای مرتب هم مانند لیستهای نامرتب عمل کنید فقط کافیست به جای استفاده از <ul> و <ul/> از تگهای <ol> و <ol/> استفاده کنید. به یک مثال در این زمینه توجه کنید:
<ol>
<li>بخش اول لیست</li>
<li>بخش دوم لیست</li>
<li>بخش سوم لیست</li>
</ol>
نتیجه به صورت لیستی شماره گذاری شده ظاهر می شود:
- بخش اول لیست
- بخش دوم لیست
- بخش سوم لیست
برای کنترل تگ <ol> از چند شناسه می توان استفاده کرد
- شناسه start
در مورد لیستهای مرتب با استفاده از شناسه start در تگ <OL> می توانیم تعیین کنیم که شماره های لیست از چه عددی شروع شود. به مثال زیر توجه کنید:
<ol start="15">
<li>این سطر اول لیست است ولی شماره آن 15 است.</li>
</ol>
نتیجه به صورت زیر مشاهده می شود:
- این سطر اول لیست است ولی شماره آن 15 است.
- شناسه type
این شناسه در لیستهای مرتب هم مانند لیستهای نامرتب برای تغییر علامت ابتدایی هر بخش از لیست استفاده می شود که در اینجا شماره ای است که برای هر قسمت از لیست استفاده می شود. از این شناسه می توانید به صورت زیر استفاده کنید:
- "type="1
با این شناسه بخشهای لیست با اعداد ریاضی مشخص می شوند. - "type="A
با استفاده از این شناسه بخشهای لیست با حروف بزرگ انگلیسی مشخص می شوند. - "type="a
با استفاده از این شناسه بخشهای لیست با حروف کوچک انگلیسی مشخص می شوند. - "type="I
با استفاده از این شناسه بخشهای لیست با حروف بزرگ یونانی مشخص می شوند. - "type="i
با استفاده از این شناسه بخشهای لیست با حروف کوچک یونانی مشخص می شوند.
این شناسه هم می تواند در تگ <ol> استفاده شود و هم در تگ <li> و در این مورد مانند لیستهای نامرتب عمل می کند.
در مثال زیر می توانید نحوه نمایش حالات مختلف لیست را با استفاده از شناسه type مشاهده کنید:
<ol>
<li type="A">قسمت اول لیست</li>
<li type="a">قسمت دوم لیست</li>
<li type="1">قسمت سوم لیست</li>
<li type="I">قسمت چهارم لیست</li>
<li type="i">قسمت پنجم لیست</li>
</ol>
نتیجه به صورت زیر خواهد بود:
- قسمت اول لیست
- قسمت دوم لیست
- قسمت سوم لیست
- قسمت چهارم لیست
- قسمت پنجم لیست
-
-
مدیر بازنشسته
شناسه های مورد استفاده در تگ body
شناسه های مورد استفاده در تگ body
وقتی که شما یک صفحه 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
این شناسه یک عکس را به عنوان زمینه برای صفحه شما قرار می دهد. اگر شما از این شناسه استفاده کنید تصویر زمینه ای که انتخاب کرده اید جایگزین هر رنگی که به عنوان زمینه انتخاب کرده بودید می شود. اگر از این شناسه استفاده نکنید مرورگر از رنگی که به عنوان زمینه انتخاب کرده اید استفاده می کند و در صورت عدم انتخاب رنگ از رنگ پیش فرض خود استفاده می کند.
-
-
مدیر بازنشسته
تغییر رنگ پیش فرض متن در صفحه
تغییر رنگ پیش فرض متن در صفحه
برای تغییر رنگ پیش فرض متن در صفحه باید از تگ <BODY> استفاده کنید. شما باید دنبال " "=text بعد از تگ BODY بگردید. مانند این:
<BODY text="black">
ممکن است به جای رنگ از ترکیبی از حروف و اعداد استفاده شده باشد. مانند زیر:
<BODY text="#000000">
البته ممکن است هیچکدام از موارد بالا وجود نداشته باشد، یا شما بخواهید یک صفحه تازه بنویسید. در این موارد باید این فرمان اضافی را به تگ BODY خود اضافه کنید. درست مثل موارد بالا. اگر فرمانهای دیگری هم دارید می توانید این فرمان را در انتهای آنها اضافه کنید البته با قرار دادن یک فضای خالی بین فرمانها. برای نمونه به سطر زیر توجه کنید، من برای تعیین رنگ زمینه و رنگ متن این صفحه از این فرمان استفاده کرده ام:
<BODY bgcolor="#66CCFF" text="black">
حالا اگر می خواهید رنگ متن را تغییر دهید می توانید نام انگلیسی رنگ مورد نظر خود را به جای black بنویسید. روش دیگری که برای این کار وجود دارد استفاده از معادل هگزادسیمال رنگها است که در این روش می توانید از بین رنگهای بیشتری رنگ خود را انتخاب کنید چون ما برای تمام رنگهای مورد استفاده نمی توانیم اسم واحدی را به کار ببریم.
برای مشاهده جدول رنگهای هگزادسیمال اینجا را کلیک کنید.
برای مثال اگر می خواهید رنگ متن شما زرد باشد از دو طریق می توانید به این خواسته خود برسید:
- استفاده از نام رنگ به صورت زیر :
<BODY text="yellow"> - استفاده از معادل هگزادسیمال رنگها :
<BODY text="#FFFF00">
بعد از انجام این کار هر متنی که در صفحه مرورگر شما دیده شود به رنگ زرد خواهد بود
-
-
مدیر بازنشسته
تغییر رنگ لینکهای صفحه در حالات مختلف
تغییر رنگ لینکهای صفحه در حالات مختلف
اگر بخواهید رنگ لینکها را در صفحه خود تغییر دهید مانند تغییر رنگ پیش فرض متن باید تگ 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 تعریف کنید. وقتی که این تگ را پیدا کردید در آن به دنبال شناسه bgcolor بگردید ، که ممکن است مانند زیر باشد:
<body bgcolor="gray">
ممکن است به جای نام رنگ از معادل هگزادسیمال رنگ استفاده شده باشد. مانند زیر (این فرمانی است که من برای زمینه این صفحه از آن استفاده کرده ام):
<body bgcolor="#66ccff">
البته ممکن است این شناسه را در تگ BODY پیدا نکنید، در این صورت یک فاصله بعد از BODY قرار داده شناسه bgcolor را وارد کنید.
برای عوض کردن رنگ زمینه نام رنگ مورد نظر خود را به جای نام رنگ در شناسه بالا قرار دهید.
به جای نام رنگ می توانید از معادل هگزا دسیمال رنگ استفاده کنید.
برای مثال اگر می خواهید رنگ زمینه به رنگ سبز درآید باید مانند زیر عمل کنید:
<body bgcolor="green">
و یا به این صورت:
<body bgcolor="008000">
روش دیگری که برای تغییر رنگ زمینه صفحه وجود دارد استفاده از CSS است که با ورود نسخه چهارم HTML استفاده از آن رو به افزایش است.
-
-
مدیر بازنشسته
آموزش قرار دادن یک تصویر در زمینه صفحه
آموزش قرار دادن یک تصویر در زمینه صفحه
برای قرار دادن یک تصویر به عنوان زمینه صفحه باید از تگ 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">
-
-
مدیر بازنشسته
-
-
مدیر بازنشسته
-
-
مدیر بازنشسته
-
کلمات کلیدی این موضوع
مجوز های ارسال و ویرایش
- شما نمیتوانید موضوع جدیدی ارسال کنید
- شما امکان ارسال پاسخ را ندارید
- شما نمیتوانید فایل پیوست کنید.
- شما نمیتوانید پست های خود را ویرایش کنید
-
مشاهده قوانین
انجمن