VIP آموزش زبان HTML

Toraɴj

Toraɴj

مدیر آزمایشی تالار نرم افزار + مترجم زبان انگلیسی
عضو کادر مدیریت
مدیر آزمایشی
کاربر VIP انجمن
طراح انجمن
مترجم انجمن
16/6/19
999
4,236
93
کنار پریز برق:|
ناول کافه
منوها و بسیاری از المان‌های اچ تی ام ال که هر روزه با آن‌ها مواجه می‌شویم، حاصل ترکیب عکس‌ها و لینک‌ها هستند. در این قسمت ما هم قصد داریم شما را با نحوه لینک کردن یک عکس آشنا کنیم. با ما همراه باشید.

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

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

مرحله اول: برای اضافه کردن لینک به تصاویر, ابتدا یک تگ لینک <a> را باز می‌کنیم و آن را لینک می‌کنیم:
مرحله دوم:‌ این بار به جای نوشتن متن در بین تگ‌های شروع و پایان <a> تگ تصویر یعنی <img> را استفاده می‌نماییم.
مرحله سوم : حالا تگ <a/> را می‌بندیم و تمام!‌ تصویر قرار گرفته در بین دو تگ <a> </a> حاوی لینک مورد نظر است.
-----------
تا به اینجای کار با نحوه اضافه کردن لینک و عکس به صفحات آشنا شدید و حالا در این شماره از آموزش، قصد داریم تا به شما نحوه قرار دادن انواع لیست‌ها را آموزش دهیم.


اکنون شما می‌توانید با کمک آنچه در قسمت‌های قبلی آموزش HTML با هم مرور کردیم، خودتان یک صفحه اچ تی ام ال بنویسید که علاوه بر امکان قرار دادن متن و عنوان در آن، می توانید آن‌ها را با عکس و لینک همراه کنید تا جلوه زیباتری به خود بگیرد. اما این جلسه قصد داریم تا با آموزش استفاده از انواع لیست‌ها، چند قدمی شما را به سمت تبدیل شدن به یک برنامه نویس سمت کاربر نزدیک‌تر کنیم! با ما همراه شوید
 
Toraɴj

Toraɴj

مدیر آزمایشی تالار نرم افزار + مترجم زبان انگلیسی
عضو کادر مدیریت
مدیر آزمایشی
کاربر VIP انجمن
طراح انجمن
مترجم انجمن
16/6/19
999
4,236
93
کنار پریز برق:|
ناول کافه
لیست‌ها
کاربرد لیست‌ها در اچ تی ام ال بسیار گسترده است؛ چرا که از منوها گرفته تا بسیاری از المان‌های منظم دیگر صفحه توسط لیست‌ها ایجاد می‌گردند. در اچ‌تی‌ام‌ال سه نوع لیست می‌توانید ایجاد کنید که قواعد نوشتن هر سه شکل شبیه هم هستند؛ ولی در نمایش آن‌ها در مرورگر تفاوت‌هایی وجود دارد. در ادامه بیشتر برایتان توضیح خواهیم داد. این سه نوع عبارتند از:

  • unorderd list یا لیست بدون نظم که دارای ترتیب دلخواه است.
  • orderd list یا لیست منظم و دارای ترتیب است. مثلا چنین لیستی بر اساس اعداد یا حروف الفبا مرتب می‌شود.
  • حالت سوم نیز لیست توضیحات است که در آن ابتدا عنوان و سپس توضیحات وارد می‌شود که چندان مورد استفاده قرار نمی‌گیرد و ما هم بدان نپرداخته‌ایم.
برای مثال به لیست نامنظم زیر توجه نمایید.

<ul>

<li/>متن آیتم اول<li>

<li/> متن آیتم دوم<li>

<li/>متن آیتم سوم<li>

<ul/>

مراحل ایجاد یک لیست بدون نظم و ترتیب:
مرحله اول: برای ساخت یک لیست، باید یک تگ <ul> باز می‌کنیم. بدین ترتیب اعلام می‌کنیم که می‌خواهیم یک لیست نامنظم یا همان Unorderd List ایجاد کنیم.

مرحله دوم: سپس متن هر آیتم لیست را بین <li> متن آیتم <li/> باز متن مورد نظر را بین آن می‌نویسیم.

مرحله سوم: در آخر <ul/> را می‌نویسیم تا تگ بسته شود.

اگر لیست‌های اچ تی ام ال را دیده باشید, خواهید دید که در این لیست‌ها یک علامت(معمولا دایره تو پر) قرار می‌گیرد.در لیست‌ها امکان تغییر آیکونی که در کنار هر آیتم قرار می‌گیرد وجود دارد. اتریبیوت list-style-type این کار را برای شما انجام می‌دهد. برای اینکار باید به تگ ابتدایی <ul> این اتریبیوت را اضافه کنید و آیکون مورد نظر را بنویسید.

< "آیکون مورد نظر :ul style="list-style-type>

لیست موارد قابل استفاده به عنوان آیکون در لیست‌ها به ترتیب زیر است:

  • disc : در واقع همان دایره‌های تو پر پیش فرض هستند. نمونه: <ul style= "list-style-type: disc ">
  • circles: در این حالت آیتم‌های لیست شما با دایره به نمایش در خواهد آمد.
  • squares: در این حالت آیتم‌های لیست شما به صورت مربع نشان داده خواهند شد.
  • none: در این حالت در کنار آیتم‌های لیست آیکونی وجود نخواهد داشت.
لیست منظم و با ترتیب:
لیست منظم با ترتیب مثل لیستی که بر اساس شماره یا حروف الفبا مرتب شده را ordered list یا لیست منظم می‌گویند.

لیست‌های منظم با تگ <ol> نشان داده می‌شوند. باقی موارد در این لیست‌ها مشابه قبل است.

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

<ol>

<li/>متن آیتم اول<li>

<li/> متن آیتم دوم<li>

<li/>متن آیتم سوم<li>

<ol/>

مرحله اول: برای ساخت یک لیست، باید یک تگ <ol> باز می‌کنیم. بدین ترتیب اعلام می‌کنیم که می‌خواهیم یک لیست منظم یا همان orderd List ایجاد کنیم.

مرحله دوم: سپس متن هر آیتم لیست را بین <li> متن آیتم <li/> باز متن مورد نظر را بین آن می‌نویسیم.

مرحله سوم: در آخر <ol/> را می‌نویسیم تا تگ بسته شود.

اگر لیست‌های اچ تی ام ال را دیده باشید, خواهید دید که در این لیست‌ها یک علامت(معمولا دایره تو پر) قرار می‌گیرد.در لیست‌ها امکان تغییر آیکونی که در کنار هر آیتم قرار می‌گیرد وجود دارد. اتریبیوت استایل را اضافه کرده و صفت list-style-type در این اتریبیوت این کار را برای شما انجام می‌دهد. برای اینکار باید به تگ ابتدایی ul این اتریبیوت را اضافه کنید و آیکون مورد نظر را بنویسید.

< "آیکون مورد نظر :eek:l style ="list-style-type>

لیست موارد قابل استفاده به عنوان آیکون در لیست‌ها به ترتیب زیر است:

  • type="1" : در این حالت آیتم‌های لیست بر حسب اعداد مرتب خواهند شد. مانند <"ol list-style-type: "1>
  • type="A": در این حالت آیتم‌های لیست با حروف بزرگ الفبا به نمایش خواهد آمد.
  • type="a": در این حالت آیتم‌های لیست شما با حروف کوچک الفبا نشان داده خواهند شد.
  • type="I": در این حالت در کنار آیتم‌های لیست اعداد یونانی I و II نمایش داده خواهد شد.
  • type="i": در این حالت در کنار آیتم‌های لیست اعداد یونانی با حروف کوچک i و ii نمایش داده خواهد شد.
 
Toraɴj

Toraɴj

مدیر آزمایشی تالار نرم افزار + مترجم زبان انگلیسی
عضو کادر مدیریت
مدیر آزمایشی
کاربر VIP انجمن
طراح انجمن
مترجم انجمن
16/6/19
999
4,236
93
کنار پریز برق:|
تغییر فونت و مشخصات متون یکی از امکانات پر استفاده در طراحی ظاهر صفحات اچ تی ام ال است و بدون شک بدرد شما هم بسیار خواهد خورد. با ما همراه باشید تا در این بخش به شما نحوه تغییرات در فونت‌ها و متون‌ها را آموزش دهیم.


برای تغییر در نوشته‌ها و به طور کلی هر المان اچ تی ام ال لازم است که کلمه دیگری را به تگ آن‌ها بیفزاییم. به این کلمه اضافی اتریبیوت استایل می‌گوییم. استایل در واقع مجموعه‌ای از صفات را برای المان‌های اچ تی ام ال مشخص می‌کند و البته فقط مختص به متن نیست و المان های دیگر نیز از این تگ برای ایجاد تغییرات در صفحه اچ تی ام ال استفاده می‌کنند. مثلا رنگ، اندازه و ... صفاتی هستند که توسط اتریبیوت استایل در صفحه مشخص می‌شوند. البته بعد از یادگیری CSS تمامی استایل‌ها در فایل CSS مورد استفاده می‌شود و کمتر پیش می‌آید که نیاز به استفاده از استایل‌ها در درون صفحه اچ تی ام ال داشته باشیم. ولی با توجه به لزوم یادگیری مباحث استایل در اچ تی ام ال, این بخش را برای شما به آموزش این موضوع اختصاص داده‌ایم.
نحوه‌ی استفاده از اتریبیوت استایل نیز بسیار ساده است و تنها کافیست تا کلمه Style را در کنار نام تگ در تگ شروع کننده بنویسیم. همانند زیر:
<tag name Style="style1; style2; style3;">محتوا با استایل دلخواه</tagname>
برای درک بهتر در مثال زیر ما می‌خواهیم بر روی المان P تغییراتی را ایجاد نماییم.
مرحله اول: تگ اچ‌تی‌ام‌ال مورد نظر را آغاز می‌کنیم؛ مثلا قصد تغییر در المان <p> را داریم.
مرحله دوم: اتریبیوت استایل style را به المان مورد نظر اضافه می‌کنیم و بعد از آن یک علامت ""= می‌گذاریم :
<"استایل‌های مورد نظر"= p style>
مرحله سوم: حالا در بین دو علامت " " آن چیزهایی که می‌خواهیم در المان ما تغییر کند می‌نویسیم. مثلا در پاراگراف نوع فونت یا اندازه فونت را می‌نویسیم.
در این مثال برای تغییر فونت از font-family استفاده می‌کنیم و در روبروی آن، نوع فونت دلخواه را می‌نویسیم. مثلا برای فونت (Tahoma) می‌نویسیم: <;p style = "font-family: Tahoma> .
بعد از نوشتن هر استایل و نوع آن حتما از علامت ; استفاده می‌کنیم. این علامت در واقع بین تمامی استایل‌ها قرار می‌گیرد و آن‌ها را از هم جدا می‌کند. دقت داشته باشید که استفاده از این علامت به طور کلی اهمیت زیادی دارد و به صفحه می‌فهماند که شما در حال تغییر استایل‌های صفحه هستید.
به مثال زیر توجه کنید:
</h1> متن قرار گرفته در اینجا آبی رنگ خواهد شد < " ; h1 style = " color : blue>
در این مثال با h1 را با اتریبیوت استایل به رنگ آبی در آورده‌ایم. در نتیجه رنگ نهایی آن آبی خواهد شد.
حالا که با نحوه کلی استفاده از اتریبیوت style آشنا شدیم، قصد داریم تا استایل‌های قابل استفاده بیشتری را در مشخصه فونت برایتان معرفی کنیم:
font-family - نوع فونت:
اگر قصد تغییر نوع فونت را دارید, با استفاده از این استایل می‌توانید نوع فونت (مثلا tahoma، Times New Roman و ...) را تغییر دهید. همچنین امکان اضافه کردن فونت‌های دلخواه به صفحه از طریق CSS نیز وجود دارد که ما این کار را به دوره آموزشی CSS موکول کرده‌ایم. در صورتی که نام فونت را اشتباه بزنید، امکان عدم نمایش فونت شما وجود دارد و در این حالت مرورگر فونت پیش فرض را جایگزین خواهد کرد.
<p/> متن اینجا با فونت Tahoma ایجاد خواهد شد.<" ; p style = " font-family : Tahoma>
font-Size - ابعاد فونت:
اندازه‌ی فونت بر حسب پیکسل (مثلا 10px یا 12 px و ...) بیان می‌شود. البته مقیاس‌های دیگری به غیر از پیکسل نیز وجود دارند که از جمله آن‌ها می‌توان به em اشاره کرد. در کل پیشنهاد می‌شود که برای ابعاد فونت از مقیاس پیکسل استفاده نمایید.
مرحله اول: ابتدا تگ <p> یا <h> که مربوط به متن است را می‌نویسیم.
مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مورد نظر اضافه می‌کنیم.
مرحله سوم: در استایل باز شده کلمه ابعاد مورد نظر:font-size را می‌نویسیم.
مرحله پایانی: متن مورد نظر را در بین دو تگ <p> </p> می‌نویسیم. مشاهده خواهید که متن شما با اندازه دلخواه به نمایش در خواهد آمد.
<p/> متن اینجا با فونت 10px ایجاد خواهد شد.<" ; p style = " font-size: 10px >

color - رنگ فونت :
رنگ متن‌ها را در اچ تی ام ال به دو شکل می‌توان تعیین کرد. در حالت اول, رنگ نوشته‌ها را با رنگ‌های پیش فرض (مثلا blue، yellow یا ...) مشخص می‌کنند. در این حالت انتخاب‌ها به رنگ‌های از پیش تعریف شده محدود می‌شود, ولی اگر قصد استفاده از رنگ خاصی را دارید باید از کد شش رقمی آن‌ها در کنار علامت # استفاده کنید. مثلا 888888# رنگ سفید یا FF330A# رنگ نارنجی است. برای به دست آوردن کد رنگ‌ها می‌توانید از نرم افزارهای گرافیکی همچون فوتوشاپ یا سرویس‌های آنلاین همچون HTML Color یا HTML Color picker استفاده نمایید. (بعلت قانون نبود لینک در متن گوگل سرچ کنید)
به مثال زیر نگاه کنید تا نحوه‌ی تغییر رنگ المان در اچ تی ام ال را بیاموزید.
مرحله اول: ابتدا تگ <p> یا <h> که مربوط به متن است را می‌نویسیم.
مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مورد نظر اضافه می‌کنیم.
مرحله سوم: در استایل باز شده کلمه color: رنگ مورد نظر را می‌نویسیم. رنگ مورد نظر یا کد شش رقمی رنگ است یا اسم رنگ همانند(yellow, Blue و یا ...)
<p style="color: #11111; font-family: tahoma;">متن با فونت تاهما و رنگ سفید</p>
مرحله پایانی: متن مورد نظر را در بین دو تگ <p> </p> می‌نویسیم. مشاهده خواهید که متن شما با رنگ دلخواه به نمایش در خواهد آمد.
هم تراز کردن - text-align:
یکی دیگر از موارد قابل استفاده در اتریبیوت استایل در متن‌ها text-align است. این خصوصیت به شما کمک می‌کند تا متن‌هایتان را چپ چین, راست چین یا وسط چین کنید. نوشتن این مولفه‌ها نیز کاملا مشابه قبلی‌هاست و تنها کافیست همانند قبل مراحل زیر را طی کنید.
مرحله اول: ابتدا تگ <p> یا <h> که مربوط به متن است را می‌نویسیم.
مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مورد نظر اضافه می‌کنیم.
مرحله سوم: در استایل باز شده کلمه text-align:center را برای وسط چین می‌نویسیم.
مرحله پایانی: متن مورد نظر را در بین دو تگ <p> </p> می‌نویسیم و از دیدن نتیجه صفحه لذت می‌بریم.
<h1 style="text-align:center"> متن وسط صفحه قرار می‌گیرد </h1>
<p style="text-align:right"> متن سمت راست صفحه قرار می‌گیرد </p>
<p style="text-align:left"> متن سمت چپ صفحه قرار می‌گیرد </p>
ناول کافه
 
Toraɴj

Toraɴj

مدیر آزمایشی تالار نرم افزار + مترجم زبان انگلیسی
عضو کادر مدیریت
مدیر آزمایشی
کاربر VIP انجمن
طراح انجمن
مترجم انجمن
16/6/19
999
4,236
93
کنار پریز برق:|
ناول کافه
پر رنگ کردن متن - bold


گاهی پیش می‌آید که بخواهیم بخشی از متن را پررنگ‌تر کنیم تا توجه بیشتری از کاربران جلب کند. برای این کار بهترین کار استفاده از تگ‌هایی است که متن را بولد (bold) می‌کند. برای این کار باید کلمه‌ یا متنی که می‌خواهیم پر رنگ شود را در بین دو تگ <strong></strong> قرار دهیم. البته تگ <b></b> نیز دقیقا کار مشابهی را انجام می‌دهد. توجه داشته باشید که کل متن را بولد نکنید چون نه تنها این کار باعث توجه کاربر نمی‌شود، بلکه ممکن است از زیبایی طرح شما کاسته شود. همچنین تگ <B> برای موتورهای جستجو ملاک محسوب می‌شود.

برای مثال ما می‌خواهیم کلمه اچ تی ام ال را در متن زیر پر رنگ نماییم.

<p> ما در حال یادگیری اچ تی ام ال هستیم </p>

برای این کار دور کلمه اچ تی ام ال تگ <b></b>قرار دهیم.



<p>هستیم<b>اچ تی ام ال</b> ما در حال یادگیری </p>

italic کردن که حروف را حالت مورب می‌کند (مثال: متن ایتالیک) نیز با تگ <em>متن </em> انجام می‌شود. برای این کار مشابه قبل ابتدا متن را در تگ پاراگراف می‌نویسید و سپس بخشی از آن را که می‌خواهید ایتالیک کنید در بین دو تگ <em></em> قرار می‌دهیم.

<p>I am <em>so</em> tired.</p>
 
Toraɴj

Toraɴj

مدیر آزمایشی تالار نرم افزار + مترجم زبان انگلیسی
عضو کادر مدیریت
مدیر آزمایشی
کاربر VIP انجمن
طراح انجمن
مترجم انجمن
16/6/19
999
4,236
93
کنار پریز برق:|
فارسی نوشتن در HTML:
مراحل فارسی نویسی به طور خلاصه:

۱. ابتدا کد <"meta charset="utf-8> را در بین تگ <head></head> قرار می‌دهیم. این کار باعث می‌شود تا حروف فارسی دیده شوند و انکودینگ صفحه به صورت کامل و صحیح انجام شود.

۲. با یکی از روش‌هایی که در این مطلب آموزش خواهیم داد، المان‌های خود را از راست به چپ بنویسید.

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

نوشتن کد meta charset

نکته بسیار مهمی که در هنگام نوشتن فارسی یا عربی دقت داشته باشید که حتما کد <"meta charset="utf-8> را در بین تگ <head></head> قرار دهید. در غیر این صورت حروف شما به صورت ناخوانا و به هم ریخته نمایش داده می‌شوند.


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

مرحله اول: ابتدا تگ <p> یا تگ دلخواه را باز می‌کنیم. در این مثال ما باز هم تگ <p> را انتخاب کرده‌ایم.

<p>

مرحله دوم: در مرحله دوم مشخصه استایل style را به تگ <p> اضافه می‌کنیم و بلافاصله بعد از آن " "= قرار می‌دهیم.

<"; " = p style>

مرحله سوم: در این مرحله بین دو " " استایل مورد نظر = direction را انتخاب می‌کنیم. روبروی direction; کلمه rtl برای نوشتن از راست به چپ (فارسی و عربی ) و ltr (انگلیسی و ...) برای نوشتن از چپ به راست را درج می‌کنیم.

<p style = " direction: rtl ;" >

مرحله پایانی: تگ <p> را می‌بندیم.

<p style= "direction: rtl; ">متن از راست به چپ نوشته می شود </p>

ناول کافه
 
  • لایک
Reactions: Hosein