سرخط خبرها

آموزش html تگ P

آموزش html تگ p

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

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

<!DOCTYPE html>

نکته:

این یک تگ نیست. بنابراین چیزی به نام باز و بسته شدن تگ ها در این نداریم! و فقط باید اول سند HTML ذکر کنیم و تمام.

حال برای شروع کد نویسی HTML باید کد خودمون رو با یک <html> ساده شروع کنیم. یعنی بعد از ذکر داک تایپ باید تگ <html> رو هم باز کنیم و تا زمانی که کد نویسی HTML داریم ، آن را ببندیم. پس این تگ باید باز و بسته شود.

بعد از باز شدن تگ اصلی HTML که در بالا معرفی کردیم ، نوبت به باز شدن دو مورد می رسد. همان مورد هایی که در درس قبلی ذکر کردیم. یعنی تگ سرصفحه – Head و تگ بدنه ی سند – Body . وجود تگ سرصفحه در یک سند عادی HTML ضروری نیست. ولی وجود تگ بدنه – body برای سندی که میخواهد محتوایی داشته باشد الزامی است. فعلاً یک مثال می زنیم. در حال حاضر نیازی به تگ head نداریم و بلافاصله بعد از باز شدن <html> تگ بدنه <body> رو باز می کنیم.

در HTML ترتیب باز و بسته شدن تگ ها اهمیت بالایی دارد و باید توجه زیادی به این موضوع داشته باشید. جهت اطمینان ، هر تگی رو که باز کردید ، همان لحظه تگ بسته شدن آن را نیز بنویسید و در بین آنها تگ ها و کد های جدید را ذکر کنید .

حال تا اینجا ما به این رسیدیم و سند HTML ما شامل این است :

<!DOCTYPE html>

<html>

<body>

</body>

</html>

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

 

تگ <p> :

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

</p>

This is text here just for test ! Replace your text here !
</p>

 

حال کد تکمیل شده مثال ساده امروز :

<!DOCTYPE html>
<html>
<body>

<p>
This is text here just for test ! Replace your text here !
</p>

</body>
</html>

چند نکته پیرامون HTML :
۱) در کد نویسی های HTML زدن اینتر بین نوشته ها و کد ها در خروجی که روی مرورگر کاربر نمایش داده میشه هیچ اثر خاصی نداره. شما اگر بخواید بین خطوط نوشته هاتون فاصله بدید ، باید از تگ مخصوص این کار که بعداً معرفی میشه استفاده کنید. (تگ <br>)

۲) کد هایی که شما می نویسید در ویرایشگر خودتون ، در مرورگر در حالت عادی دیده نمیشن. و تنها خروجی کد ها دیده میشه. مگر اینکه کاربر با مرورگر خودش View Source کنه. یعنی روی صفحه شما راست کلیک کنه و این گزینه رو بزنه یا از ترکیب کلید های کنترل + U استفاده کنه.

ضمناً حتما مثال بالا رو اجرا کنید و خودتون متن ها رو تغییر بدید تا با خروجی و عملکرد هر کد بیشتر آشنا بشید.

۳) ذکر داک تایپ الزامی است. ترجیحاً از داک تایپی که در بالا معرفی کردیم همیشه استفاده کنید. هم نوشتن این داک تایپ راحت تر و کوتاه تره است

 

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

تگ < p > :

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

<html>

<head>
 <title>This is a TEST !</title>
</head>
<body>
<p>
Hello World !
</p>
</body>
<html>
تگ<p> که تگ پاراگراف نامیده میشود برای پاراگراف بندی متن مورد استفاده قرار میگیرد و بسیار پرکاربرد است. این تگ باعث ایجاد یک فضای خالی عمودی بین دو سطر در دو پاراگراف میشود.درست مثل اینکه تگ br را دوبار تایپ کنیم.از این تگ در اول پاراگراف برای تمایز بین دو پاراگراف استفاده میشود.

به عنوان مثال ابتدا یک سند html ایجاد میکنیم.سپس در قسمت  body عبارات مورد نظرمان را مینویسیم.

[html]

<head>

<title>Learining Html</title>

</head>

<body>

<p>This is first line of my first paragraph</p>

<p>This is second line of my first paragraph<br/>

This is third line of my first paragraph</p>

<p>This is my second paragraph</p>

<p>This is my third paragraph</p>

</body>

[/html]

هر پاراگراف ما دارای سطرهای متفاوتی است که برای سطر بندی آن از تگ<br/> استفاده کرده ایم.

اکنون این فایل ایجاد شده را با پسوند htm ذخیره نمایید.سپس از طریق مرورگر فایل مورد نظر را باز کنید.

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

نکات  تگ پاراگراف (p) :

۱- مرورگر ها معمولاً وقتی به یک تگ باز شده ی <p> میرسن، بصورت اتوماتیک اون رو بصورت بسته شده هم در نظر می گیرند. یعنی بعضاً اگر شما این تگ رو نبستید هم ممکنه مشکلی پیش نیاد و اکثر مرورگر ها بدون مشکل خروجی صحیحی نمایش بدن وقتی چند پاراگراف پشت سر هم باز می کنید. ولی ترجیحاً بهتره مانند نمونه بالا وقتی که به پایان هر پاراگراف خودتون رسیدید ، تگ p رو ببندید به این صورت : <p/>

۲- همانطور که پیشتر عرض شد، اینتر زدن و ایجاد خطوط جدید در HTML نویسی تغییری در خروجی شما نداره و اگر بخواید فاصله بدید باید با تگ فاصله ایجاد کنید که در ادامه ذکر خواهد شد.

با این کار یک متن بسیار ساده خواهیم داشت . حال برای اینکه از نظر ظاهری یکسری تغییرات در این پاراگراف اعمال کنیم باید از Attribute های این تگ استفاده کنیم . هر تگ در html یکسری Attribute دارد که با آنها می توان تغییراتی در شکل و شمایل آن تگ و محتویاتش داد . مهم ترین Attribute که تقریبا در تمام تگ ها مشترک است Style می باشد . همان چیزی که ما در زبان فارسی و عامیانه خود می گوئیم استیل . همانطور که از کاربرد این کلمه در زبان خودمان برمی آید این خصوصیت راجع به شکل و شمایل ظاهری صحبت می کند . خصوصیت Style مجموعه ای از خصایص دیگر است و به شکل کلی زیر به کار می رود :
<tag style=”attribute1: value; attribute2: value;….”> </tag>
همانطور که در شکل کلی بالا پیداست ابتدا نام خصوصیت نوشته شده و سپس علامت کالن (:) گذاشته شده و بعد از آن مقدار این خصیصه نوشته می شود . اگر خواستیم خصیصه های دیگری را نیز اضافه کنیم باید بعد از مجموعه اول یک علامت (;) گذاشت و سپس مجموعه دوم را به شکل اولی نوشت . ترتیب نوشتن مجموعه ها در این بین هیچ اهمیتی ندارد .

تگ <P> یکی از پرکاربردترین تگ های html هست. با استفاده از این تگ شما می تونید یک پاراگراف ایجاد کنید که این پاراگراف با تگ <P> شروع و با <P/> تموم میشه . حالا من در زیر بهتون یاد میدم که چطور یک پاراگراف رو ایجاد کنید و یا ویرایش کنید . مثلا فاصله ی بین سطر ها رو کم یا زیاد کنید ، نحوه ی قرار گیری پاراگراف چطور باشه ( چپ چین ، راست چین یا وسط بودن) و …

 

خوب کد یه پاراگراف ساده به شکل زیره که نمایشش رو در زیر میبینید :

<p>متن پاراگراف</p>          ======>             متن پاراگراف

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

 اگر خواستید پاراگرافتون راست چین باشهباید به میانکد align مقدار right رو بدید . مثل زیر :

<p align=”right“>متن پاراگراف</p>

متن پاراگراف

 اگر خواستید پاراگرافتون چپ چین باشه  باید به میانکد align مقدار left رو بدید . مثل زیر :

<p align=”left“>متن پاراگراف</p>

متن پاراگراف

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

<p align=”center“>متن پاراگراف</p>

متن پاراگراف

حالا اگه خواستید پاراگرافتون از دو طرف میزون باشه باید به میانکد align مقدار justify رو بدید . مثل زیر :

<p align=”justify“>متن پاراگراف</p>

متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف

برای متن های فارسی که از راست به چپ نوشته میشن از میانکد dir استفاده کنید و مقدار اون رو rtl بزارید که مخفف right to left هست یعنی راست به چپ .

<p dir=”rtl”>متن پاراگراف</p> <=== برای متون فارسی

 برای متن های انگلیسی که از چپ به راست نوشته میشن بازم از میانکد dir استفاده می کنید و حتما حدس میزنید که مقدارش رو چی باید گذاشت . آره ، مقدار اون رو ltr بزارید که مخفف  left to right هست یعنی چپ به راست .

<p dir=”ltr”>متن پاراگراف</p>  <=== برای متون انگلیسی

 

QR Code For: آموزش html تگ P

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.