رفتن به مطلب
جستجو در
  • تنظیمات بیشتر ...
نمایش نتایجی که شامل ...
جستجو در ...

به سایت ما خوش آمدید

عضویت فقط چند ثانیه زمان می برد؛ منتظر شما هستیم!

behrooz

آموزش html

پست های پیشنهاد شده

جلسه شانزدهم 

 تعیین مشخصات فونت ها در html

 

در یک فایل html بیش از هر چیز ، متن ها به کار می روند . زیبایی ، اندازه ، رنگ و سایر ویژگی های فونت های به کار رفته در متن اهمیت بسیار زیادی دارد . در html از تگ <font> برای تعیین ویژگی های فونت ها استفاده می شود . البته این کار را با CSS نیز می توان انجام داد و مطمئنا استفاده از CSS انتخاب بسیار بهتری می باشد ، اما برای شروع یادگیری و حتی در مواقعی خاص ، استفاده از تگ <font> مفید خواهد بود .

تعیین نوع فونت ها با مشخصه face :

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

<html>
<head>
</head>
 
<body>
 
<p>
<font face="Georgia">
this is a paragraph .
</font>
</p>
 
</body>
</html>

نتیجه :

با توجه به اینکه مشخصه face در تگ <font> برابر با Georgia قرار داده شده است ، بنابراین متن با فونت Georgia نمایش داده شده است .

 

تعیین اندازه فونت ها با مشخصه size :

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

<html>
<head>
</head>
 
<body>
 
<p>
<font size="3">
first paragraph .
</font>
</p>
 
<p>
<font size="6">
second paragraph .
</font>
</p>
 
</body>
</html>

نتیجه :

 

پاراگراف اول را با مشخصه size برابر 3 و پاراگراف دوم را با مشخصه size برابر 6 قرار داده ایم و تفاوت اندازه فونت های دو پاراگراف به خوبی قابل مشاهده می باشد .

 

تعیین رنگ فونت ها با مشخصه color :

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

<html>
<head>
</head>
 
<body>
 
<p>
<font color="red">
this is a paragraph .
</font>
</p>
 
</body>
</html>

نتیجه :

مشاهده می کنید که رنگ فونت ها به رنگ قرمز نمایش داده شده است زیرا مشخصه color در تگ <font> را برابر red قرار داده ایم .

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه هفدهم

نوشتن توضیحات در فایل html

 

 

معمولا زمانی که حجم کدهای فایل html افزایش یابد مجبور می شوید که توضیحاتی را برای بخش های مختلف کدها بنویسید تا در آینده راحت تر بتوانید آنها را تغییر دهید . این روش بسیار کارآمد است و از گیج شدن در بین انبوه کدها جلوگیری می کند . شروع توضیحات را با علامت های –!> و پایان توضیحات را با علامت های <– اعلام می کنیم . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body>
 
<!-- comment about first paragragh -->
<p>
first paragraph .
</p>
 
<!-- comment about second paragragh -->
<p>
second paragraph .
</p>
 
</body>
</html>

نتیجه :

 .first paragraph

.second paragraph 

مشاهده می کنید که دو توضیح نوشته شده در بین کدها ، در مرورگر نمایش داده نشده اند .

 

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه هجدهم

ترسیم خط افقی در html با تگ hr

 

 

استفاده از خط افقی ، شیوه ای ساده برای جدا کردن مطالب مختلف از یکدیگر می باشد . برای ترسیم یک خط افقی در html ، از تگ <hr> استفاده می شود . در واقع این تگ باعث می شود که مطالب قبل و بعد از آن با یک خط افقی از یکدیگر جدا شوند . به مثال زیر توجه کنید :

 

<html>
<head>
</head>
 
<body>
 
<p>
first paragraph .
</p>
 
<hr>
 
<p>
second paragraph .
</p>
 
</body>
</html>

نتیجه :

first paragraph .


second paragraph .

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

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه نوزدهم

تگ های شیوه نمایش متن در html

 

 

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

 

نمایش متن با حروف پررنگ با تگ <b> :

چنانچه قصد داشته باشیم بخشی از متن با حروف پررنگ نمایش داده شود باید از زوج تگ <b> و <b/> استفاده کنیم . حرف b از حرف اول کلمه Bold گرفته شده است . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body>
 
<p>
this text is not bold .
</p>
 
<p>
<b>this text is bold .</b>
</p>
 
</body>
</html>

نتیجه :

this text is not bold .

this text is bold .

در مثال فوق ، تفاوت بین یک متن Bold و یک متن غیر Bold نمایش داده شده است .

 

نمایش متن به صورت زیرخط دار با تگ <ins> :

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

<html>
<head>
</head>
 
<body>
 
please visit <ins>karenit</ins> .
 
</body>
</html>

نتیجه :

please visit karenit

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

 

نمایش متن به صورت ایتالیک با تگ <i> :

چنانچه تمایل داشته باشید بخشی از متن را به صورت ایتالیک نمایش دهید باید آن بخش از متن را بین زوج تگ <i> و <i/> قرار دهید . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body>
 
<p>this text is about html</p>
 
<i>this text is about html</i>
 
</body>
</html>

نتیجه :

this text is about html

this text is about html

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

 

نمایش متن به صورت زیرنویس با تگ <sub> :

گاهی پیش می آید که بخواهیم یک یا چند کلمه را به صورت زیرنویس بنویسیم . در html برای این منظور از تگ <sub> استفاده می شود . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body>
 
this is<sub>karenit</sub>
 
</body>
</html>

نتیجه :

this is karenit

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

 

نمایش متن به صورت بالانویس با تگ <sup> :

برای نوشتن یک یا چند کلمه به صورت بالانویس ، باید از زوج تگ <sup> و <sup/> استفاده کنیم . کلماتی که می خواهیم به صورت بالانوبس نوشته شوند باید در بین زوج تگ <sup> و <sup/> قرار بگیرند . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body>
 
this is<sup>karenit</sup>
 
</body>
</html>

نتیجه :

this is karenit

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

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه بیستم

نمایش عکس ها در html

 

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

 

تگ <img> برای نمایش عکس ها در صفحات html :

در html از تگ <img> برای نمایش عکس ها استفاده می شود ، به این صورت که باید آدرس عکس مورد نظرمان را در تگ <img> بنویسیم . برای این منظور از مشخصه src در تگ <img> استفاده می شود . در مباحث ابتدایی شرح داده شد که بهتر است بر روی desktop خود فولدری به نام www.mysite.com بسازید و در آن فایلی را که کدها را در آن تست می کنید (با نام index.html) قرار دهید . چنانچه این کار را انجام داده باشید ، اکنون باید درون این فولدر یک فولدر با نام images بسازید تا فایل های عکس ها را در این فولدر قرار دهید . در مثال های بعدی فرض شده است که فایل های عکس شما درون این فولدر قرار دارد . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body>
 
<p>
first paragraph .
</p>
 
<img src="images/photo.gif" />
 
<p>
second paragraph .
</p>
 
</body>
</html>

ابتدا درون فولدر images عکسی با نام photo.gif قرار دهید . سپس کدهای زیر را بنویسید :

نتیجه :

. first paragraph

photo.gif

. second paragraph

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

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه بیست و یکم

ساخت جدول در html

 

 

استفاده از جداول ، شیوه ای مناسب برای نمایش اطلاعات دسته بندی شده و منظم می باشد . در html از تگ <table> برای ساخت یک جدول استفاده می شود . شروع جدول را با تگ شروع <table> و پایان جدول را با تگ پایان <table/> اعلام می کنیم . درون این دو تگ ، با هر تگ <tr> می توانیم یک سطر برای جدول ایجاد کنیم . درون زوج تگ <tr> و <tr/> ، با هر تگ <td> می توانیم یک خانه برای آن سطر ایجاد کنیم .

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

 

جدولی با 2 سطر و 2 ستون می سازیم :

<html>
<head>
</head>
 
<body>
 
<table border="1">
<tr>
<td>cell number 1</td>
<td>cell number 2</td>
</tr>
<tr>
<td>cell number 3</td>
<td>cell number 4</td>
</tr>
</table>
 
</body>
</html>

نتیجه :

cell number 1 cell number 2
cell number 3 cell number 4

 

باید دقت داشته باشید که برای تگ <table> ، مشخصه border را برابر 1 قرار داده ایم . اگر این مشخصه را تعیین نکنیم ، جدول بدون دیواره نمایش داده می شود . این حالت را در مثال زیر بررسی می کنیم :

<html>
<head>
</head>
 
<body>
 
<table>
<tr>
<td>cell number 1</td>
<td>cell number 2</td>
</tr>
<tr>
<td>cell number 3</td>
<td>cell number 4</td>
</tr>
</table>
 
</body>
</html>

نتیجه :

cell number 1cell number 2

cell number 3cell number 4

 

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

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه بیست و دوم

ساخت لیست (فهرست) در html

 

 

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

انواع فهرست ها در html :

در html ، دو نوع فهرست داریم که تفاوت آنها در نحوه علامت گذاری بخش های مختلف فهرست می باشد . نوع اول ، فهرست های شماره دار و نوع دوم ، فهرست های بدون شماره می باشد . تگ هایی که برای این دو نوع فهرست به کار می روند ، متفاوت می باشند . برای فهرست های شماره دار از زوج تگ <ol> و <ol/> و برای فهرست های بدون شماره از زوج تگ <ul> و <ul/> استفاده می کنیم .

 

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

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

<html>
<head>
</head>
 
<body>
 
<ul>
<li>number 1</li>
<li>number 2</li>
<li>number 3</li>
</ul>
 
</body>
</html>

نتیجه :

number 1

number 2

number 3

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

 

فهرست های شماره دار در html :

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

<html>
<head>
</head>
 
<body>
 
<ol>
<li>number 1</li>
<li>number 2</li>
<li>number 3</li>
</ol>

 
</body>
</html>

نتیجه :

number 1

number 2

number 3

مشاهده می کنید که در کنار هر بخش فهرست ، شماره ای متناسب با ترتیب قرارگیری آن بخش در فهرست ، نمایش داده شده است .

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه بیست و سوم

فرم ها در html

 

 

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

در یک فرم باید شخص کاربر برخی موارد را پر کرده و برخی را نیز انتخاب کند و سپس با فشار دادن یک دکمه ، اطلاعات به سرور (server) حاوی سایت ارسال خواهد شد .

تگ <form> برای ساخت یک فرم در html :

شروع یک فرم را با تگ شروع <form> و پایان فرم را با تگ پایانی <form/> اعلام می کنیم . محتویات فرم در بین این دو تگ قرار خواهند گرفت .

اطلاعات دریافتی از کاربر باید توسط صفحه ای دیگر مورد پردازش قرار گیرد . درون تگ شروع <form> باید مشخصه action را برابر آدرس صفحه ای قرار بدهیم که می خواهد بر روی اطلاعات دریافت شده از کاربر پردازش انجام دهد . معمولا صفحه پردازش با استفاده از php نوشته می شود . php زبانی است که برای نوشتن صفحات اینترنتی دینامیک به کار می رود (برخلاف html که برای نوشتن صفحات اینترنتی استاتیک به کار می رود ) .

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

تگ <input> :

با استفاده از تگ <input> می توانیم شیوه های مختلفی از انواع دریافت اطلاعات از کاربر را به کار ببریم . برای این منظور باید تگ <input> را درون زوج تگ <form> و <form/> بنویسیم . درون تگ <input> باید مشخصه type را تعیین کنیم تا مشخص شود که نوع دریافت اطلاعات از کاربر به چه صورت می باشد . انواع دریافت اطلاعات از کاربر با استفاده از تگ <input> را در زیر شرح می دهیم :

جعبه متن :

فرض کنید بخواهیم یک جعبه متن را طراحی کنیم که در آن کاربر متن دلخواه خود را نوشته و سپس این متن به سرور (server) حاوی سایت ارسال شود . برای این منظور باید درون تگ <input> ، مشخصه type را برابر text قرار بدهیم . به مثال زیر توجه کنید :

 

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
<input type="text">
</form>
 
</body>
</html>

نتیجه :

نکته : کاربر ابتدا باید درون جعبه متن ، متن دلخواه خود را نوشته و سپس کلید enter را فشار بدهد تا متن نوشته شده توسط صفحه script.php مورد پردازش قرار بگیرد . البته روش بهتر این است که یک دکمه برای ارسال متن ، طراحی شود زیرا معمولا یک فرم شامل چندین بخش برای پر کردن و انتخاب می باشد و بنابراین ابتدا کاربر باید تمامی بخش ها را پر کرده و انتخاب کند و در انتها نیز دکمه ای برای ارسال اطلاعات در نظر گرفته شده باشد . بنابراین قبل از اینکه شیوه های دیگر دریافت اطلاعات برای فرم را توضیح بدهیم ، ابتدا نحوه ساخت دکمه ارسال اطلاعات (دکمه submit) را شرح خواهیم داد .

طراحی دکمه ارسال اطلاعات (دکمه submit) :

برای طراحی دکمه ارسال اطلاعات (دکمه submit) ، باید در انتهای فرم و قبل از تگ پایانی <form/> ، عبارت زیر را بنویسیم :

<input type="submit" value="submit message">

عبارتی که برای مشخصه value تعیین می کنیم ، بر روی دکمه ارسال اطلاعات (دکمه submit) نمایش داده می شود .

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
<input type="text">
<input type="submit" value="submit message">
</form>
 
</body>
</html>

نتیجه :


 

دکمه های رادیویی :

حتما تاکنون دکمه های رادیویی را در فرم های اینترنتی دیده اید . این دکمه ها به صورت دایره های توخالی می باشند که اگر بر روی آنها کلیک کنید به صورت توپر در می آیند . توپر شدن یک دکمه رادیویی نشان دهنده انتخاب عبارت نوشته شده برای آن دکمه رادیویی می باشد . برای ساخت دکمه های رادیویی ، باید درون تگ <input> ، مشخصه type را برابر radio قرار بدهیم . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
yes<input type="radio" value="yes"><br />
no<input type="radio" value="no">
</form>
 
</body>
</html>

نتیجه :

yes
no

مشاهده می کنید که دو گزینه yes و no به کاربر نمایش داده شده است که کاربر باید یکی از آنها را انتخاب کند .

 

نکته : در مثال قبل ، ممکن است کاربر به اشتباه ، ابتدا گزینه غلط را انتخاب کند و پس از متوجه شدن اشتباه بودن انتخاب خود ، گزینه صحیح را انتخاب کند ، در این زمان هر دو دکمه رادیویی به صورت توپر نمایش داده می شوند و دیگر کاربر نمی تواند گزینه غلط را به صورت توخالی در آورد . برای پیشگیری از وقوع این مشکل باید برای هر دو دکمه رادیویی یک نام را انتخاب کنیم ، یعنی اینکه برای تگ <input> ، مشخصه name را برای هر دو دکمه رادیویی به صورت یک نام واحد انتخاب کنیم . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
yes<input name="yes_or_no" type="radio" value="yes"><br />
no<input name="yes_or_no" type="radio" value="no">
</form>
 
</body>
</html>

نتیجه :

yes
no 

جعبه انتخاب :

جعبه انتخاب ، جعبه ای می باشد که در جلوی یک عبارت (گزینه) قرار می گیرد و چنانچه بخواهیم آن گزینه را انتخاب کنیم باید درون آن جعبه کلیک کنیم ، آنگاه درون جعبه یک علامت ((تیک)) نمایش داده خواهد شد . چنانچه برای بار دوم درون جعبه کلیک کنیم ، آنگاه علامت ((تیک)) برداشته می شود .

برای ساخت یک جعبه انتخاب ، باید درون تگ <input> ، مشخصه type را برابر checkbox قرار دهیم . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
yes<input type="checkbox"><br>
no<input type="checkbox">
</form>
 
</body>
</html>

نتیجه :

yes
no 

جعبه کلمه عبور (پسورد) :

جعبه کلمه عبور (پسورد) در واقع یک جعبه متن است که اطلاعاتی که کاربر در آن می نویسد به صورت آرایه ای از علامت * نمایش داده می شود و برای وارد کردن اطلاعات محرمانه و کلمه های عبور (کلمه رمز) مناسب می باشد . نمایش اطلاعات با علامت * ، باعث می شود تا افرادی که در کنار کاربر هستند ، نتوانند اطلاعات وارد شده توسط وی در جعبه کلمه عبور را ببینند .

برای ساخت یک جعبه کلمه عبور باید درون تگ <input> ، مشخصه type را برابر password قرار دهیم . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body>
 
<form method="post" action="script.php">
<input type="password">
</form>

</body>
</html>

نتیجه :

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

 

به اشتراک گذاری این ارسال


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

×
×
  • اضافه کردن...