Sorry, no posts matched your criteria.

این سایت در ستاد ساماندهی ثبت شده و تابع قوانین جمهوری اسلامی میباشد

آموزش HTML، آشنایی با تگ پاراگراف

۱۰ دی ۱۳۹۶
بدون نظر

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

اچ تی ام ال , آموزش HTML، آشنایی با تگ پاراگراف, پاس کن !

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

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

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

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

نحوه‌ی درج فاصله در متون تگ پاراگراف

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

قطعه کد زیر را مشاهده کنید:

خروجی کد زیر به شکل زیرخواهد بود:

پاس کن ! آموزش‌های فناوری اطلاعات و آی‌تی آموزش اچ تی ام ال در پاس کن !

برای ایجاد فاصله‌ی افقی (Space) می‌توانید از تگ 
&nbsp;  استفاده کنید، این تگ به شما اجازه می‌دهد به دلخواه خود در متنی که نوشتید فاصله‌ی افقی ایجاد کنید.

همچنین برای ایجاد فاصله‌ی عمودی (Enter) می‌توانید از تگ 
<br>  استفاده کنید، این تگ به شما اجازه می‌دهد به مقدار دلخواه در متنی که نوشتید فاصله‌ی عمودی ایجاد کنید.

تگ‌های 
&nbsp;  و 
<br>  به صورت تنها استفاده می‌شوند، یعنی تگ پایان (تمام کننده) ندارند.

قطعه کد زیر را مشاهده کنید:

خروجی آن به صورت زیر خواهد بود:

پاس کن !                                                 آموزش‌های فناوری اطلاعات و آی‌تی

آموزش اچ تی ام ال             پاس کن !

همانگونه که مشاهده می‌کنید قطعه کد بالا کمی نامنظم و گیج‌کننده به نظر می‌رسد، در اینطور مواقع می‌توانید به‌جای تگ
<p>  از تگ 
<pre>  استفاده کنید.

کاربرد تگ <pre> چیست؟

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

خروجی این کد به صورت زیر خواهد بود:

پاس کن !                                                     آموزش‌های فناوری اطلاعات و آی‌تی

 

 

 

آموزش اچ تی ام ال                   پاس کن !

از این تگ می‌توانید هنگام نوشت ابیات شعر و… استفاده کنید!

تگ‌هایی که می‌توانید برای خوانا‌تر کردن متن از آن‌ها استفاده کنید:

تعدادی از تگ‌ها برای زیباتر کردن نوشته به کار می‌روند، مثلا توپر شدن یک کلمه، مورب شدن آن، زیر خط دار شدن و… که می‌توانید آن‌ها را در قالب کدهای زیر مشاهده کنید.

نتیجه‌ی این کد به صورت زیر خواهد بود:

متن توپر
متن توپر

متن مورب
متن مورب

متن خط خورده
متن خط خورده
متن خط خورده

متن زیرخط دار
متن زیرخط دار

نکته: شما می‌توانید تگ‌های اچ تی ام ال را به صورت تو در تو نیز به کار ببرید ولی باید اولویت تگ‌های تمام کننده را رعایت کنید، ابتدا داخلی‌ترین تگ را بسته و به همین ترتیب تگ‌های بیرونی را نیز ببندید، قطعه کد زیر را مشاهده کنید تا بهتر با این مفهوم آشنا شوید.

همانگونه که می‌بینید، ابتدا تگ b سپس i و در نهایت u را گشودیم، حال باید از داخلی‌ترین تگ شروع به بستن کنیم، یعنی اول u سپس i و در نهایت b در غیر این‌صورت امکان بروز خطا وجود خواهد داشت.

خروجی قطعه کد بالا به این شکل خواهد بود:

متن توپر، مورب و زیرخط دار

افزودن خط افقی با استفاده از تگ <hr>

شما می‌توانید با استفادا از تگ تنهای 
<hr>  یک خط افقی در محل مورد نظر در صفحه‌‌ی اچ تی ام ال خود اضافه کنید، قطعه کد زیر را در نظر بگیرید:

نتیجه‌ی این کد به این صورت خواهد بود:

 

عنوان توپر


پاراگراف

با دقت در نمونه‌ی بالا می‌بینید که قسمت عنوان و متن اصلی به کمک یک خط افقی جدا کردیم!

در پایان این آموزش سعی کنید پروژه‌ی زیر را انجام دهید:

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

 

سخنی با شما دوست عزیز: تمام آموزش‌های پاس کن ! به صورت رایگان برای شما منتشر می‌شود و رایگان خواهد ماند، همچنین برای راحتی شما هیچ‌گونه تبلیغات مزاحمی در سایت درج نخواهیم کرد، اما با توجه به افزایش حجم مطالب و تعداد کاربران، برای تامین هزینه‌های سرور (Server) و ادامه‌ی فعالیت سایت به حمایت‌های شما نیازمندیم، اگر این آموزش برای شما مفید بود و از مطالعه‌ی آن لذت بردید، میتوانید با مبلغ ناچیزی (حتی ۱۰۰۰ تومان) از ما حمایت کرده و با این کار ارزشمند خود ما را در ادامه‌ی فعالیت سایت یاری دهید…

تمامی حقوق مادی و معنوی برای پاس کن ! محفوظ میباشد.

طراحی و بهینه سازی : هاست دانلود ایران | اورداپ سرور