location_on تهران ، خیابان آزادی خیابان شهیدان (روبروی مترو حبیب اله ) برج زیتون local_phone 66073800 021
بازگشت به لیست مقالات » | چهارشنبه 19 آبان 1395 در ساعت 12 : 50 دقیقه | نظرات کاربران ( 0 )

آموزش HTML  - تگ پاراگراف

یکی از تگ های مهم و پر استفاده در طراحی سایت و سند های HTML  تگ پاراگراف می باشد  

پاراگراف ها بوسیله تگ پی  <p> ساخته میشوند .

شمای کلی تگ پاراگراف بدین صورت می باشد :

 

<p>This is a paragraph</p>
<p>This is another paragraph</p>

 

تگ های پاراگراف یک تگ Block Level  می باشد . و زمانی که در یک خط قرار بگیرد تمام خط را به خود اختصاص داده و به سایر تگ ها اجازه نمیدهد که در کنارش قرار بگیرند . به منظور مفهمو این جمله به مقاله تفاوت تگ های Inline Level  با Block Level  در HTML  مراجعه نمایید .

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

در سند html  زیر مثالی در مورد تگ پاراگراف قرار دارد :

 

 

 <!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>

</html>

 

 

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

 

 

This is a paragraph.

This is a paragraph.

This is a paragraph.

 

در سند های html  دکمه ی اینتر ( رفتن به خط بعد ) کارساز نمیباشد! و هر چه بین خطوط فاصله ایجاد کنید در مرورگر اعمال نخواهد شد .

مثال : در سند زیر بین تگ های p  یک فاصله ایجاد کردیم اما در مرورگر مانند مثال قبل و بدون هیچ فاصله ای نمایش داده شد .!

 

 

 <!DOCTYPE html>

<html>

<body>

  <p>This is a paragraph.</p>               

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>

</html>

 

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

 

This is a paragraph.

This is a paragraph.

This is a paragraph.

 

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

رفتن به خط بعدی در HTML  :

در سند های HTML به منظور رفتن به خط جدید و یا بعدی در داخل تگ ها و یا در بین تگ ها میتوان از تگ br  استفاده کرد

نحوه ی نوشتن صحیح این تگ : <br />

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

در مثال زیر ببینید :

 

 

 <!DOCTYPE html>

<html>

<body>

<br /><p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>

</html>

 

مروگر ما مثال بالا را بصورت زیر نمایش میدهد :

 

 

This is a paragraph.

 

This is a paragraph.

This is a paragraph.

 

 

تگ های <br / >  در داخل تگ ها نیز مورد استفاده قرار میگیرند

 

 

 <!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

<p>This is a  <br />  paragraph.</p>

<p>This is a paragraph.</p>

</body>

</html>

 

 

مرورگر مثال بالا را بصورت زیر نمایش میدهد :

 

 

This is a paragraph.

This is a
paragraph.

This is a paragraph.

 

عنصر br  یک تگ تهی بوده و در همان تگ شروع بسته خواهد شد  : <br / >

سعس کنید تگ br  را با / تمام کنید  : <br / >

گرچه <br>  در تمامی مروگر ها خوانده میشود و مشکلی ایجاد نمیکند اما در سند های XHTML  و  XML باید تمامی استاندارد ها  رعایت شو د.

 

در سند های HTML  و در تگ های HTML فقط 1 فاصله درج خواهد شد و اگر شما در بین متن های دارون تگ ها و یا بین تگ ها چند فاصله را وارد کنید در انتها مروگر همان 1 فاصله را اعمال خواهد کرد

مثال : در بین متن زیر بین کلمه a  و  p  چند فاصله قرار داده ایم اما در نهایت مرورگر 1 فاصله را اعمال خواهد کرد .

 

 

 <!DOCTYPE html>

<html>

<body>

<p>This is a p          aragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>

</html>

 

بعد از اجرای سند بالا مرورگر به صورت زیر نمایش خواهد داد :

 

 

This is a p aragraph.

This is a paragraph.

This is a paragraph.

 

 

در مثال زیر نشان میدهیم که اینتر و رفتن به خط بعد هیچ تاثیری در اجرای اصلی صفحات HTML  ندارد :

 

 

 <!DOCTYPE html>

<html>

<body>

<p>

    My Bonnie lies over the ocean.

 

    My Bonnie lies over the sea.

 

    My Bonnie lies over the ocean.

    Oh, bring back my Bonnie to me.

</p>

</body>

</html>

 

 

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

 

 

 

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

 

 

 

بنابراین در سند های HTML  از تعداد فاصله ها فقط 1 کاراکتر اعمال میشود و رفتن به خط بعد با تگ های تهی امکان پذیر می باشد .

 

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

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

مثالی در مورد تگ pre  :

 

<!DOCTYPE html>

<html>

<body>

<pre>

   My Bonnie lies       over the ocean.

 

   My Bonnie lies over the sea.

 

 

 

   My Bonnie lies over the ocean.

 

   Oh, bring back my Bonnie to me.

</pre>

</body>

</html>

 

و با اجرای سند اچ تی ام ال بالا مرورگر بصورت زیر به نمایش در خواهد آمد :

 

 

   My Bonnie lies       over the ocean.

 

   My Bonnie lies over the sea.

 

 

 

   My Bonnie lies over the ocean.

  

   Oh, bring back my Bonnie to me.

 

 

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

در آموزش های بعدی شما را با سایر تگ ها و خصوصیات آنها آشنا خواهیم ساخت

با گروه طراحی سایت INT راهی بسیار مطمئن را جهت طراحی سایت حرفه ای انتخاب کرده اید ....

موفق باشید

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :
آموزش HTML  - کاراکترهای رزرو شده

آموزش HTML - کاراکترهای رزرو شده

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

آموزش html  -  جاوا اسکریپت

آموزش html - جاوا اسکریپت

آموزش html  -  جاوا اسکریپت تگ script  در html  : این تگ به منظور برنامه نویسی سمت کاربر مانند جاوا اسکریپت  javascript  مورد استفاده قرار میگیرد . عنصر <script > ...

آموزش html  تگ head

آموزش html تگ head

 آموزش html  تگ head عنصر head  یکی از مهمترین تگ های html  می باشد که تگ های اساسی و اصلی سایت را در خود جای میدهد . عناصری که درون تگ head  قرار میگیرند میتوانند شامل اسکری ...

آموزش HTML  - اعلان Doctype

آموزش HTML - اعلان Doctype

آموزش HTML  - اعلان Doctype یکسری از اعلان ها در html  می باشند که کمک میکنند مرورگر بهتر و سریعتر نوع صفحات را تشخیص دهد . اعلان <!doctype> یکی از آنها می باشد که در ابتدای سند های h ...

آموزش html  - مروری بر html مقدماتی

آموزش html - مروری بر html مقدماتی

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

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها تمامی مرورگر ها از نام رنگ ها بصورت کامل پشتیبانی میکنند . با استفاده از رنگ ها در html میتوان رنگ عناصر و یا پس زمینه عناصر html  را تغییر داد .در بخش زیر نام 147 ...

آموزش html - رنگها

آموزش html - رنگها

آموزش html  - رنگها : رنگها  یکی از مهمترین بخش در طراحی سایت می باشند .در طراحی سایت از رنگ ها به 3 طریق استفاده خواهد شد . 1.  از طریق نام رنگ : این روش از انتخاب رنگ بسیار محدود بو ...

آموزش HTML  - تگ iframe

آموزش HTML - تگ iframe

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

آموزش HTML فرم ها

آموزش HTML فرم ها

آموزش HTML  فرم ها یکی از عناصر مهم در HTML  فرم ها می باند . فرم ها مسثول نگهداری اطلاعات از جانب کاربران می  باشد .به کمک فرم ها میتوان دریافت و ارسال اطلاعات را به سمت سرور انجام د ...

آموزش HTML  - صفحه بندی

آموزش HTML - صفحه بندی

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

آموزش HTML  - تگ SPAN

آموزش HTML - تگ SPAN

آموزش HTML  - تگ SPAN تگ span  یکی از عناصر inline level  و درون خطی می باشد که در مقالات قبلی در مورد آن شرح دادیم . تفاوت تگ های inline level  و block level   یک عنصر inli ...

آموزش html  - تگ DIV

آموزش html - تگ DIV

آموزش html  - تگ DIV عنصر های HTML  را از طریق تگ های DIV  و یا SPAN  گروهبندی می شوند . تگ  div  یک عنصر بلاک لول است  .( Block level ) به این معنی که درصورتی که ...

expand_less