D1-kifpool

آموزش HTML - بخش دوم: تگ‌ پاراگراف

چهارشنبه 21 مرداد 1394 - 12:34
مطالعه 4 دقیقه
در بخش دوم خواهید توانست تا اولین‌ متن‌هایتان را وارد صفحه HTML کنید.
تبلیغات
D4-mcid4

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

کپی لینک

آشنایی با تگ‌ها - پاراگراف یا  

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

 به مثال زیر نگاه کنید:

کپی لینک

نمونه

همه چی آرومه! 

من به‌دنبال یادگیری طراحی وب با زومیت هستم

کپی لینک

نتیجه‌ای که مرورگر نمایش خواهد داد

همه چی آرومه!

 من در حال یادگیری طراحی وب با زومیت هستم 

نکات دیگر در رابطه با تگ ...:

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

کپی لینک

نمونه

 متن ما به‌صورت پشت سر هم به نمایش در می‌آید 

متن         با               فا صله های               فراوان فرقی برای تگ پاراگراف                  نمی‌کند

متن         با               فا صله های               فراوان در         این تگ دقیقا          به همان شکلی که نوشته می‌شوند    به              نمایش                 می‌آیند                  

کپی لینک

نتیجه‌ای که مرورگر نمایش خواهد داد

متن ما به‌صورت پشت سر هم به نمایش در می‌آید 

متن با فاصله‌های فراوان فرقی برای تگ پاراگراف ندارد.

متن         با               فا صله های               فراوان در         این تگ دقیقا          به همان شکلی که نوشته می‌شوند    به              نمایش                 می‌آیند                

همان‌طور که مشاهده کردید، درواقع در اچ‌تی‌ام‌ال اینتر زدن و اسپیس‌های اضافه در بین تگ P پاراگراف معنا ندارد و این تگ همه چیز را درکنار هم نمایش می‌دهد. پس برای نوشتن متنی که نمی‌خواهیم کلمات به هم پیوسته باشند و بین آن‌ها فاصله باشد، چکار باید کرد? برای این کار می‌توان از تگ </pre> به‌جای استفاده کرد. این تگ هر آنچه و با هر ترتیبی که بنویسید، همانگونه نمایش می‌دهد. از این تگ برای بسیاری از کارها از جمله نمایش یک کد در صفحه یا متون شعری استفاده می‌شود. همچنین این تگ معمولا با فونت Courier به نمایش در می‌آید.

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

کپی لینک

نمونه

    قرار می‌گیرد به خط بعدی می‌رود    متنی که بعد از تگ بی آر

کپی لینک

نتیجه‌ای که مرورگر نمایش خواهد داد

متنی که بعد از تگ بی آر

قرار می‌گیرد به خط بعدی می‌رود.

کپی لینک

خلاصه قسمت دوم:

در این قسمت چیزهایی که یادگرفته‌ایم را به‌صورت کاملا خلاصه مرور می‌کنیم.

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

پروژه این جلسه:

  • یک جمله دلخواه را با کمک تگ‌های P بنویسید (برای تمرین بیشتر توصیه می‌کنیم که تگ‌های اصلی صفحه HTML که در سری اول برایتان بازگو کردیم را در ابتدای صفحه یادداشت کنید.)  مثلا: من در حال یادگیری اچ‌تی‌ام‌ال هستم
  • حالا همین جمله را بار دیگر اما با اسپیس زیاد بین کلمات  و با کمک تگ p بنویسد! مثلا:  من     به‌دنبال    یا دگیری برنامه                نویسی    هستم
  • بار دیگر جمله را  با اسپیس زیاد بین کلمات  ولی با کمک تگ pre بنویسد! مثلا:  من  بدنبال   یا دگیری برنامه   نویسی  هستم

تفاوت آن‌ها را به‌طور کامل درک کردید؟

امیدواریم که بخش دوم از آموزش اچ‌تی‌ام‌ال به سبک زومیت، موفق به انتقال مفاهیم این زبان به شما زومیتی‌های عزیز شده باشد. قسمت‌های قبلی این مجموعه مقالات را از دست ندهید. تجربیات، پیشنهاد‌ها و همچنین ابراز محبت شما بدون شک نه‌تنها در ایجاد انرژی بیشتر در ما همراه خواهد بود، باعث بهبود سطح این مقالات در آینده خواهد شد. پس با ما در ارتباط باشید.

مقاله رو دوست داشتی؟
نظرت چیه؟
تبلیغات
D5-b3IranServer
داغ‌ترین مطالب روز
چراغ راهنما ژاپن
چرا ژاپنی‌ها چراغ راهنمایی آبی دارند؟

سبز به معنای حرکت و قرمز به معنای ایست، کدی جهانی است که در تمام چراغ‌های راهنمای کشورها رعایت می‌شود، اما ژاپن استثنا است.

65
1 روز قبل
نوزاد انسان در حال خواب
از «هیتلر» تا «سارا»؛ اسم‌های ممنوعه در کشورهای مختلف

هر کشوری محدودیت‌های خاص خودش را در انتخاب اسم برای افراد دارد؛ اسم‌هایی عجیب نظیر «ملکه» و «هیتلر» و حتی «سارا.»

242
2 روز قبل
بهترین پاوربانک های بازار در سال ۲۰۲۳ از سامسونگ و شیائومی تا باسئوس
بهترین پاور بانک‌ برای گوشی اندرویدی و آیفون [خرداد ۱۴۰۴]

در مقاله‌ی پیش‌ رو، با بهترین پاور بانک بازار ایران برای گوشی اندروید و آیفون از برندهایی مانند انکر، راوپاور، باسئوس و مک دودو آشنا می‌شویم.

104
2 روز قبل
دختر جوان درحال کار با گوشی درحالت آفلاین در اتاق
۷ اپلیکیشن‌ برای ارتباط بی‌سیم در شرایط قطع آنتن و وای‌فای

وقتی ارتباطات رایج مثل شبکه‌های موبایل از کار می‌افتند، راه‌های دیگری برای ارسال پیام وجود دارند؛ با این اپ‌ها همیشه در دسترس بمانید.

107
2 روز قبل
پناه گرفتن مادر و فرزند در شرایط بحرانی در پناهگاه
نحوه صحیح پناه گرفتن در شرایط بحرانی و نکات پناه گیری در هر مکان

دانستن نکات و نحوه‌ی پناه‌گیری در شرایط بحرانی می‌تواند جان شما و عزیزانتان را حفظ کند.

91
2 روز قبل
کیف اضطراری در مواقع بحران
آمادگی برای شرایط اضطراری: راهنمای کامل آماده‌سازی کوله نجات

چه وسایلی را باید در کیف نجات بگذاریم؟ در این مطلب برای شما توضیح می‌دهیم که در مواقع بحران چه وسایلی را باید همراه خود داشته باشید.

27
1 روز قبل
یک دختر جوان در کنار کیف کمک‌های اولیه و نور چراغ‌قوه
چگونه برای زمان قطع برق، آب و گاز آماده باشیم؟

در شرایط بحرانی، حفظ آرامش و دانش بقا اهمیت بالایی دارد. در این مقاله شما را با دستورالعمل‌هایی آشنا می‌کنیم تا آماده‌ی وضعیت اضطراری باشید.

167
2 روز قبل
تبلیغات
DN-DNShatel

نظرات

با چشم باز خرید کنید
زومیت شما را برای انتخاب بهتر و خرید ارزان‌تر راهنمایی می‌کند
ورود به بخش محصولات