منو

تگ های قاب بندی متن(قسمت پنجم)

تگ های قاب بندی متن
لیست جلسات
DatoosTech img Course

قسمت اول

مقدمه html

DatoosTech img Course

قسمت دوم

چهارچوب اصلی صفحه های وب

DatoosTech img Course

قسمت سوم

تگ های فراخوانی

DatoosTech img Course

قسمت چهارم

خواص استاندارد تگ های HTML

DatoosTech img Course

قسمت پنجم

تگ های قاب بندی متن

DatoosTech img Course

قسمت ششم

ایجاد لینک در html

DatoosTech img Course

قسمت هفتم

ایجاد جدول در html

DatoosTech img Course

قسمت هشتم

لیست ها در html

DatoosTech img Course

قسمت نهم

فرم ها در html

DatoosTech img Course

قسمت دهم

کنترول ها در html

DatoosTech img Course

قسمت یازدهم

تصاویر در html

DatoosTech img Course

قسمت دوازدهم

استایل در html

DatoosTech img Course

قسمت سیزدهم

آدرس های اینترنتی (url)

DatoosTech img Course

قسمت چهاردهم

اسکریپت ها در Html

DatoosTech img Course

قسمت پانزدهم

تقسيم بندی صفحه و متن در Html

DatoosTech img Course

قسمت شانزدهم

رويدادهای HTML

DatoosTech img Course

قسمت هفدهم

کنترل های ذاتی HTML

DatoosTech img Course

قسمت هجدهم

خواص جدید کنترل ها در HTML 5

DatoosTech img Course

قسمت نوزدهم

اجرای مدیا در Html

DatoosTech img Course

قسمت بیستم

قابلیت های پیشرفته Html 5

DatoosTech img Course

قسمت بیست و یکم

طراحی اشیای گرافیکی

DatoosTech img Course

قسمت بیست و دوم

لیست تگ های Html

مطالب این جلسه

تگ <p> :

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> این یک پاراگراف نمونه است </p>
</body>
</html>
پیش نمایش

تگ <h1> تا <h6> :

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

< h1 > بزرگترين سایز نوشته را ارائه داده و با بزرگتر شدن عدد بعد از h ، سايز نوشته آن کاهش می يابد و < h6 > کوچکترين سايز نوشته را ارائه می دهد .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<h1> این یک عنوان است </h1>
<h2> این یک عنوان است </h2>
<h3> این یک عنوان است </h3>
<h4> این یک عنوان است </h4>
<h5> این یک عنوان است </h5>
<h6> این یک عنوان است </h6>
</body>
</html>
پیش نمایش

تگ <br> :

به کاربردن اين تگ باعث ايجاد يک خط جديد و انتقال نوشته به اول سطر پايينی می شود . همچنين به وسيله آن می توان يک خط خالی ايجاد کرد .

نکته : تگ < br > دارای تگ پايانی نيست و ترکيب < br > ... < /br > غلط است . اين تگ بايد به وسيله يک علامت / در درون تگ ابتدايی بسته شود .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> این یک <br> پاراگراف نمونه است </p>
</body>
</html>
پیش نمایش

تگ <hr> :

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

نکته :اين تگ نيز همانند تگ < br > دارای تگ پايانی نيست و بايد در تگ ابتدايي بسته شود .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> این یک پاراگراف نمونه است </p>
<hr>
</body>
</html>
پیش نمایش

تگ <b> :

باعث توپر شدن متنی که درون تگ باز و بسته < b> قرار بگيرد می شود .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> متن متن <b> متن </b> متن متن </p>
</body>
</html>
پیش نمایش

تگ <u> :

باعث می شود تا متنی که بين تگ باز و بسته < u> قرار بگيرد ، به صورت خط زير دار نمايش داده شود .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> متن متن <u> متن </u> متن متن </p>
</body>
</html>
پیش نمایش

تگ <i> و <em> :

باعث می شود تا متن درون آن به صورت کج (italic) نمایش داده شود .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> متن متن <i> متن </i> <em> متن </em> متن متن </p>
</body>
</html>
پیش نمایش

تگ <big> :

اين تگ باعث نمايش بزرگتر محتويات درون آن نسبت به متن خطوط همجوار می شود .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> متن متن <big> متن </big> متن متن </p>
</body>
</html>
پیش نمایش

تگ <small> :

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> متن متن <small> متن </small> متن متن </p>
</body>
</html>
پیش نمایش

تگ <strong> :

اين تگ باعث نمايش توپر و بزرگتر محتويات درون خود نسبت به متن خطوط همجوار آن می شود .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> متن متن <strong> متن </strong> متن متن </p>
</body>
</html>
پیش نمایش

تگ <cite> :

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> متن متن <cite> متن </cite> متن متن </p>
</body>
</html>
پیش نمایش

تگ <pre> :

چنانچه در محيط کد نويسی صفحات وب ، بين متن های نوشته شده با کليد space فاصله ايجاد کرده یا با کليد Enter به خط بعدی برويد ، مرورگر اين مسئله را ناديده گرفته ، تمام فاصله ها را از بين برده و حداکثر به اندازه يک کاراکتر فاصله ايجاد می کند . برای جلوگيری از اين مسئله ، از تگ < pre> استفاده می کنيم . اين تگ باعث نمايش متن درون خود با همان شکل و ساختاری که در محيط کد نويسی صفحه وارد شده است ، می شود . همانطور که قبلا ذکر شد ، برای ايجاد فاصله بين حروف از کاراکتر ;nbsp& و رفتن به خط بعدی از تگ < br/ > استفاده می کنيم .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<pre>
This is a pre
    formatted paragraph
           it does not have any
               space or linebrake
</pre>
</body>
</html>
پیش نمایش

تگ <code> :

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<code> Web Developer Web Site </code>
</body>
</html>
پیش نمایش

تگ <sup> و <sub> :

از اين تگ ها برای ايجاد نوشته های زير نويس يا انديس دار استفاده می شود .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
This is a text <sub> example </sub>
This is a text <sup> example </sup>
</body>
</html>
پیش نمایش

تگ <abbr> :

از اين تگ معمولا برای نمايش يک متن کوتاه و خلاصه شده برای يک واژه يا عبارت بزرگتر استفاده می شود . به طور مثال در انگليسی به جای عبارت et cetra از واژه etc استفاده می کنند .

ويژگی مهم تگ < abbr > اين است که می تواند يک مقدار توسط خاصيت title خود گرفته و در هنگام قرار گيری موس بر روی واژه خلاصه شده ، آن نوشته در يک کادر زرد رنگ نمايش دهد .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<abbr title="et cetra"> etc </abbr>
</body>
</html>
پیش نمایش

تگ <del> :

اين تگ باعث کشيده شدن يک خط بر روی نوشته های درون خود می شود .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> متن متن <del> متن </del> متن متن </p>
</body>
</html>
پیش نمایش

تگ <ins> :

اين تگ برای نشان دادن يک متن جديد وارد شده در صفحه به کار می رود و يک خط زير نوشته های درون خود می کشد .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p>
قیمت این کالا <del> 9800 </del> <ins> 9000 </ins>
</p>
</body>
</html>
پیش نمایش

تگ <blockquote> :

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p>
What is an apple ?
<blockquote>
It is a sweet fruit with red skin
</blockquote>
</p>
</body>
</html>
پیش نمایش

تگ <q> :

اين تگ نيز همانند تگ < blockquote > برای ايجاد يک نقل قول استفاده می شود با اين تفاوت که حالت اين تگ کوتاه تر بوده و مثل تگ قبلی فاصله ايجاد نمی کند .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p>
What is an apple ?
<q>
It is a sweet fruit with red skin
</q>
</p>
</body>
</html>
پیش نمایش

تگ <article> :

از تگ < article > برای تعیین یک هدر یا عنوان ( متن مجزا از سایر محتویات صفحه ) استفاده می شود .

موارد مختلف استفاده از تگ < article > ، می تواند موارد زیر باشد :

عنوان پست ها در فروم ها .

عنوان مطالب جدید در وبلاگ ها .

عناوین خبری در سایت های خبری .

شکل کلی تعریف یک تگ < article > بصورت زیر است :

<article> محتویان مورد نظر درون تگ <article>

در مثال زیر ، نحوه استفاده از تگ < article > را در عمل نمایش داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<article>
<h1>
عنوان
</h1>
<p>
متن متن متن متن
</p>
</article>
</body>
</html>
پیش نمایش

تگ <bdi> :

عبارت bdi مخفف واژه Bi-directional Isolation ، به معنای جدا سازی بی جهت یا ساختار نیافته است .

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

برای مثال فرض کنید که یک پاراگراف دارید به زبان انگلیسی . حال عبارت یا واژه ای فارسی در میان این متن قرار دارد . تفاوت زبان دو نوشته ، ممکن است باعث نمایش ناصحیح متن پاراگراف شود . با قرار دادن متن فارسی در یک تگ < bdi > ، آن را از سایر متن ایزوله کرده و مانع از بروز اشکال احتمالی در نمایش آن می شوید .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p>
is num<bdi>پنجاه</bdi>point
</p>
</body>
</html>
پیش نمایش

تگ <details> :

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

به عبارت دیگر تگ < details > ، برای ایجاد یک منو یک منوی متحرک استفاده شده ، که کاربر می تواند آن را با کلیک باز و بسته نماید . هر نوع متن یا تگ دیگر را می توان درون تگ < details > ، تعیین نمود .

اگر خاصیت open را برای تگ < details > تعیین نکنید ، محتویات درونی آن به صورت پیش فرض مخفی خواهد بود .

از تگ < summary > برای تعیین محتویات درونی تگ < details > ، استفاده می شود .

هنگامی که کاربر بر روی عنوان تگ < details > کلیک نماید ، این محتویات مخفی و نمایان می شوند .

در مثال های زیر ، نحوه استفاده از تگ < details > را در 2 حالت متفاوت آن ، در عمل نمایش داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<details>
<summary> Copyright 2008-2017. </summary>
<p> by DatoosTech.com : All Rights Reserved. </p>
</details>
<br>
<details open >
<summary> Copyright 2008-2017. </summary>
<p> by DatoosTech.com : All Rights Reserved. </p>
</details>
</body>
</html>
پیش نمایش

تگ <fiqure> :

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

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

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

شکل کلی تعریف یک تگ < figure > بصورت زیر است :

در مثال های زیر ، نحوه استفاده از تگ < fiqure > عمل نمایش داده ایم :

از تگ < figcaption > ، برای تعیین یک عنوان برای تگ < fiqure > استفاده می شود . به مثال دقت نمایید :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> html is tag img . </p>
<figure>
<img src="../images/html.png">
<figcaption> Figure tag html </figcaption>
</figure>
</body>
</html>
پیش نمایش

تگ <mark> :

از تگ < mark > می توان برای برجسته و یا علامت زدن رنگی نوشته استفاده کرد .

متنی که بین تگ باز و بسته < mark > قرار بگیرد ، معمولا رنگ زردی به عنوان پس زمینه آن نشان داده می شود .

شکل کلی استفاده از یک تگ < mark > بصورت زیر است :

در مثال زیر ، نحوه استفاده از تگ < mark > را در عمل نمایش داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<p> html is <mark> tag </mark> img . </p>
</body>
</html>
پیش نمایش

تگ <meter> :

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

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

شکل کلی استفاده از یک تگ < meter > بصورت زیر است :

<meter value="value" min="value" max="value"> </meter>

در مثال زیر ، نحوه استفاده از تگ < meter> را در حالت عملی نمایش داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<meter value="50" min="0" max="100"> </meter>
</body>
</html>
پیش نمایش
خصوصيات تگ meter
خاصیت توضیح
value این خاصیت مقداری که تگ باید بر روی نمودار یا شکل نمایش دهد ، را تعیین می کند . این مقدار مقدار واقعی تگ بوده و حتما باید تعیین شود .
min این خاصیت حداقل مقدار تگ را تعیین می کند .
max این خاصیت حداکثر مقدار تگ را تعیین می کند .
low این خاصیت کمترین مقداری که انتظارش می رود تا تگ داشته باشد را تعیین می کند . این مقدار باید از خاصیت min بیشتر بوده و از خاصیت های max و high کمتر باشد . تعیین این خاصیت اختیاری است .
high این خاصیت بیشترین مقداری که انتظار می رود تا تگ داشته باشد را تعیین می کند .این مقدار باید از خاصیت min و low بیشتر و از خاصیت max کمتر باشد . تعیین این خاصیت اختیاری است .
form این خاصیت id فرمی را تعیین می کند که تگ <meter> به آن تعلق دارد .  تعیین این خاصیت اختیاری است .

تگ <nav> :

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

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

شکل کلی استفاده از یک تگ < nav > بصورت زیر است :

<nav>
<a href=""> </a>
<a href=""> </a>
<a href=""> </a>
</nav>

در مثال زیر ، نحوه استفاده از تگ < nav> و خروجی آن را در عمل نمایش داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<nav>
<a href="http://DatoosTech.com"> وب سایت توسعه دهنده وب| </a>
<a href="http://DatoosTech.com"> وب سایت توسعه دهنده وب| </a>
<a href="http://DatoosTech.com"> وب سایت توسعه دهنده وب </a>
</nav>
</body>
</html>
پیش نمایش

تگ <section> :

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

شکل کلی استفاده از یک تگ < section > بصورت زیر است :

<section> </section>

در مثال زیر ، نحوه استفاده از تگ < section> را در عمل نمایش داده ایم :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<section>
<h1> html </h1>
<p> html is tag img. </p>
</section>
</body>
</html>
پیش نمایش

تگ <progress> :

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

تگ progress خود حالت ایستا و ثابتی داشته و باید بوسیله یک اسکریپت جلوه پویا و در حرکت به آن داد .

شکل کلی استفاده از یک تگ < progress > بصورت زیر است :

<progress value="value" max="value"> </progress>

از تگ progress برای نمایش یک نمایشگر یا درجه اندازه ، مثل مقدار استفاده شده از یک دیسک استفاده نکنید .تگ < meter > برای این کار مناسب است .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<progress value="80" max="100"> </progress>
</body>
</html>
پیش نمایش