طراحی وب :: بهترین های آموزش با ♥کامپیوترگل♥آموزش طراحی وب و چتروم

۴۲ مطلب با کلمه‌ی کلیدی «طراحی وب» ثبت شده است

طراحی وب-رویدادهای مربوط به صفحه کلید و ماوس در HTML
۱۱ مرداد ۹۴ ، ۱۲:۰۵ طراحی وب ۰ نظر
در این قسمت به توضیح بخش دوم رویدادهای HTML که مربوط به صفحه کلید و ماوس می شود می پردازیم.

رویدادهای مربوط به صفحه کلید

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

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

onkeypress :
وقتی که یک دکمه در صفحه کلید فشرده می شود و رها می شود اسکرپت موجود در این شناسه اجرا می شود.

onkeyup :
در هنگام رها شدن یک کلید این شناسه فعال می شود.

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

<base>, <br>, <bdo>, <frame>, <frameset>, <iframe>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>

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

کدی را که در نوشتن این مثال از آن استفاده شده است می توانید در اینجا مشاهده کنید:

<input value="onkeypress" type="text" onKeyPress="msg('onkeypress')" />
<input value="onkeypress" type="text" onKeyUp="msg('onkeyup')" />
<input value="onkeypress" type="text" onKeyDown="msg('onkeydown')" />

ادامه مطلب
۸۹۳ امیر اعلایی ۰ ۰ ادامه مطلب
طراحی وب-قرار دادن دو جدول در کنار هم با استفاده از یک جدول بزرگتر

۱۱ مرداد ۹۴ ، ۱۲:۰۴ طراحی وب ۰ نظر

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

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

در اینجا می توانید کدی را که یک جدول را درون یک جدول دیگر ایجاد می کند:

<table width="500" border="4">
<td align="center">
<table width="400" border="2">
<td align="center">
محتویات جدول درونی
</td>
</table>
</td>
</table>

این هم جدول به دست آمده:

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

به یاد داشته باشید که جدولهای درونی را باید در سلولهای جدول بیرونی قرار دهید یعنی بین <td> و <td/> در جدول بیرونی.

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

ادامه مطلب

۹۰۷ امیر اعلایی ۰ ۰ ادامه مطلب
طراحی وب-ایجاد متن های متحرک در صفحه HTML

۱۱ مرداد ۹۴ ، ۱۲:۰۲ طراحی وب ۰ نظر

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

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

<marquee loop="infinite">متن مورد نظر خود را اینجا بنویسید</marquee>

می خواهید ببینید چگونه کار می کند:

متن مورد نظر خود را اینجا بنویسید

شناسه "loop="infinte باعث می شود که متن تا هنگامی که صفحه باز است به حرکت خود ادامه دهد. شما می توانید به جای این شناسه از "loop="-1 هم استفاده کنید.

شما می توانید تغییراتی را در این تگ ایجاد کنید به جای infinite در شناسه loop می توانید از اعداد استفاده کنید. برای مثال "loop="2 به مرورگر می گوید که حرکت متن را پس از دو بار چرخش متوقف کند.

می توانید با وارد کردن شناسه " "=bgcolor به شما امکان این را می دهد که رنگ زمینه محلی را که متن در آن در حال چرخش است تغییر دهید. می توانید برای تغییر رنگ زمینه از نام رنگ یا معادل هگزادسیمال آنها استفاده کنید. به یک مثال توجه کنید:

<marquee loop="infinite" bgcolor="yellow">
متن مورد نظر خود را اینجا بنویسید
</marquee>

و این هم نتیجه این تگ:

متن مورد نظر خود را اینجا بنویسید

با اضافه کردن شناسه " "=width می توانید عرض متن متحرک خود را تعیین کنید. در این شناسه می توانید از مقیاس پیکسل و یا در صد استفاده کنید.

<marquee loop="infinite" bgcolor="yellow" width="400">
متن مورد نظر خود را اینجا بنویسید
</marquee>

با تگ بالا می توانید یک متن متحرک با عرض 400 پیکسل و رنگ زمینه زرد ایجاد کنید. مانند زیر:

متن مورد نظر خود را اینجا بنویسید

<marquee loop="infinite" bgcolor="yellow" width ="50%">
متن مورد نظر خود را اینجا بنویسید
</marquee>

با تگ بالا می توانید متنی متحرک با 50 در صد عرض پنجره مرورگر و با رنگ زمینه زرد ایجاد کنید. مانند زیر:

متن مورد نظر خود را اینجا بنویسید

۱۰۰۹ امیر اعلایی ۰ ۰
طراحی وب-استفاده از متن جایگزین (کامنت) برای تصاویر

۱۱ مرداد ۹۴ ، ۱۱:۵۹ طراحی وب ۰ نظر

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

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

alt="متن کامنت"

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

<img src="learn_html.gif" alt="html لوگوی آموزش">

ما این کامنت را به عنوان جانشین عکس در تگ IMG وارد می کنیم. تا هر وقت عکس به نمایش در نیامد این کامنت به نمایش درآید.

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

ادامه مطلب

۸۴۳ امیر اعلایی ۰ ۰ ادامه مطلب
طراحی وب-تنظیم نحوه قرار گرفتن تصاویر در صفحه

۱۱ مرداد ۹۴ ، ۱۱:۵۷ طراحی وب ۰ نظر

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

align="left"
align="right"

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

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

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

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

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

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

ادامه مطلب

۷۹۲ امیر اعلایی ۰ ۰ ادامه مطلب
طراحی وب-ساختن لینک با استفاده از تصاویر
۱۱ مرداد ۹۴ ، ۱۱:۵۶ طراحی وب ۰ نظر
برای اینکه بخواهیم به یک صفحه لینکی را ایجاد کنیم باید از این تگ استفاده کنیم:

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

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

<img src="image.gif">

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

<a href="url"><img src="image.gif"></a>

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

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

<a href="index.html"><img src="learn_html.gif"></a>

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

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

ادامه مطلب
۱۱۱۶ امیر اعلایی ۰ ۰ ادامه مطلب
طراحی وب-تنظیم نحوه نمایش عکس در صفحه

۱۱ مرداد ۹۴ ، ۱۱:۵۴ طراحی وب ۰ نظر

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

شما می توانید اندازه عکس را تغییر دهید. این کار را می توانید با افزودن شناسه های 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">

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

ادامه مطلب

۹۹۰ امیر اعلایی ۰ ۰ ادامه مطلب
طراحی وب-آموزش قرار دادن یک تصویر در زمینه صفحه
۱۱ مرداد ۹۴ ، ۱۱:۵۳ طراحی وب ۰ نظر
برای قرار دادن یک تصویر به عنوان زمینه صفحه باید از تگ 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 به یکی از این فرمتها تبدیل کرد.

ادامه مطلب
۸۳۸ امیر اعلایی ۰ ۰ ادامه مطلب
طراحی وب -تغییر رنگ لینکهای صفحه در حالات مختلف

۱۱ مرداد ۹۴ ، ۱۱:۵۱ طراحی وب ۰ نظر

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

<body link="blue">

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

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

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

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

ادامه مطلب

۱۰۳۳ امیر اعلایی ۰ ۰ ادامه مطلب
طراحی وب -تغییر رنگ پیش فرض متن در صفحه

۱۱ مرداد ۹۴ ، ۱۱:۵۰ طراحی وب ۱ نظر

برای تغییر رنگ پیش فرض متن در صفحه باید از تگ <BODY> استفاده کنید. شما باید دنبال " "=text بعد از تگ BODY بگردید. مانند این:

<BODY text="black">

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

<BODY text="#000000">

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

<BODY bgcolor="#66CCFF" text="black">

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

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

برای مثال اگر می خواهید رنگ متن شما زرد باشد از دو طریق می توانید به این خواسته خود برسید:

ادامه مطلب

۸۷۶ امیر اعلایی ۰ ۰ ادامه مطلب
طراحی وب-شناسه های مورد استفاده در تگ 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

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

۸۸۳ امیر اعلایی ۱ ۰
طراحی وب -استفاده از لیست های 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>

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

خط اول لیست

خط دوم لیست

خط سوم لیست

ادامه مطلب
۹۶۹ امیر اعلایی ۱ ۰ ادامه مطلب
طراحی وب -وارد کردن کامنت در متن اچ تی ام ال html

۱۰ مرداد ۹۴ ، ۱۳:۳۲ طراحی وب ۰ نظر

توضیحات ( کامنتها ) می توانند وقتی که در حال نوشتن صفحه خود هستید به شما کمک کنند. مرورگرها نمی توانند کامنتها را نشان دهند پس در صفحه نهایی آنها به بیننده نشان داده نمی شوند. تنها راه مشاهده کامنتها مشاهده صفحه Source code صفحه است که با زبان HTML نمایش داده شود. با استفاده از این خاصیت شما می توانید در هنگام نوشتن یک صفحه برای خود یادداشت بگذارید تا وقتی که بعداً به آن نگاه کردید بهتر آرا درک کنید.

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

برای نوشتن یک کامنت شما باید ابتدا این علامت > سپس علامت تعجب ! و بعد دو خط فاصله -- (دش) بگذارید. بعد از این علائم هر متنی که بنویسید توسط مرورگر نمایش داده نمی شود. تا وقتی که علامت پایان کامنت را در انتهای آن بگذارید.

علامت پایان کامنت به این صورت نوشته می شود: ابتدا دو خط فاصله -- سپس این علامت < . به مثال زیر توجه کنید:



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



۱۰۵۵ امیر اعلایی ۱ ۰
طراحی وب-تگهای مورد استفاده برای نمایش متن به صورتهای مختلف

۱۰ مرداد ۹۴ ، ۱۳:۳۱ طراحی وب ۰ نظر

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

1- <SUB> و <SUP>

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

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

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

y<SUB>1</SUB>

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

y₁

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

25<SUP>3</SUP>

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

25³

2- <PRE>

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

ادامه مطلب

۹۲۲ امیر اعلایی ۱ ۰ ادامه مطلب
طراحی وب-وارد کردن تصاویر در صفحات HTML

۱۰ مرداد ۹۴ ، ۱۳:۳۰ طراحی وب ۰ نظر

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

<img src="image.gif">

در این تگ IMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس است. حتماً لازم نیست این عکس مربوط به سایت شما باشد یا در سرور شما قرار داشته باشد، شما می توانید هر عکسی که در اینترنت قابل دسترسی باشد استفاده کنید (اگر قصد دارید صفحه خود را در یک سایت اینترنتی قرار دهید) . شما می توانید فقط نام فایل را به جای آدرس کامل بنویسید اگر صفحه ای که عکس باید در آن قرار گیرد و خود عکس در یک پوشه قرار داشته باشند.
مثلاً اگر عکس شما در این آدرس قرار دارد http://www.example.com/images/image.gif و صفحه ای که در حال ویرایش آن هستید در پوشه ای غیر از این قرار دارد شما باید تگ زیر را برای اضافه کردن عکس به صفحه خود به کار ببرید:

<img src="http://www.example.com/images/image.gif">

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

<img src="image.gif">

پسوند فایل حتماً نباید gif. باشد. یعنی شما می توانید از فرمتی مثل jpg. نیز استفاده کنید. این دو فرمت از بقیه پر استفاده تر هستند. اگر شما عکسی با فرمتی غیر از این دو فرمت دارید می توانید از برنامه های ویرایش عکس از قبیل فتوشاپ برای تبدیل کردن آنها استفاده کنید.

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

<img src="learn_html.gif">

ادامه مطلب

۱۱۲۳ امیر اعلایی ۱ ۰ ادامه مطلب

درباره من

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