برچسب هایی که پاراگراف، فضا، بلوک HTML و پاراگراف را تعریف می کنند

بیایید با جزئیات در نظر بگیریم بلوک ها و پاراگراف های HTMLبه عنوان عناصر یک صفحه وب

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

  -

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

کد زیر را در نظر بگیرید:

نتیجه:

ما می توانیم آن را ببینیم پاراگراف های HTMLبه صورت عمودی فرورفته می شوند - این ویژگی برچسب ها است. بلوک های HTML

چنین فضاهایی ایجاد نمی شوند، زیرا هیچ باری را حمل نمی کنند، بلکه صرفاً ظرف هستند.

برچسب ها ممکن است حاوی موارد دیگر نباشند

... عناصر خطی را می توان در داخل قرار داد ، مانند یا ، برای مثال ، برچسب هایی که مسئول قالب بندی متن هستند.

برچسب ها و اصولاً یکسان است، اما کنسرسیوم W3C استفاده از حروف کوچک را توصیه می کند. V نسخه جدید HTML مانند XHTML مدرن ، استفاده از حروف بزرگ هنگام نوشتن برچسب ممنوع است.

مسدود کردن

می تواند به مقدار لازم شامل شود و عناصر دیگر Htmlسند برای چیدمان عالی است، اما در ادامه در آموزش CSS در مورد آن بیشتر توضیح خواهیم داد.

فضای HTML از جدول کاراکترهای خاص

فضای HTMLبه شما امکان می دهد فاصله بین کلمات و کاراکترها را افزایش دهید.

در مورد فاصله بین کلمات، مهم نیست که چقدر از آنها در Notepad، یعنی در کد منبع وجود داشته باشد، تنها یک مورد در صفحه وب نمایش داده می شود. اگر نیاز به افزایش فاصله دارید، از کاراکتر فاصله از جدول نمادها استفاده کنید. شما می پرسید: چرا ما به این ارزش های رمزگذاری شده از شخصیت های معمولی نیاز داریم؟ - پاسخ می دهم: برای نمایش مثلاً چنین براکت هایی لازم است< >... به عبارت دیگر، برای نمایش برچسب ها، در ویرایشگر خود می نویسم: ... برچسب ها: همانطور که به یاد داریم، متن را به تک فاصله (تایپینگ) تبدیل کنید.

راه های نمایش پاراگراف HTML

نمونه هایی از خروجی پاراگراف

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

مثال

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

یک یا چند جمله.

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

قالب بندی

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

با فعال کردن این گزینه ها، خط اول 15 پیکسل از لبه سمت چپ فرورفته می شود. اگر قرار است چنین تغییراتی در تمام تگ های P اعمال شود، در فایل CSS، که به صفحات سایت متصل می شود ، می توانید کد زیر را بنویسید.

من شخصاً معمولاً هنگام ویرایش کد در دفترچه یادداشت یا ویرایشگرهای دیگر خطوط قرمز ایجاد نمی کنم.

من فقط پد بین بلوک های متن را اضافه می کنم. برای انجام این کار ، باید در CSS بنویسید پارامترهای خاص.

p (حاشیه-پایین: 25 پیکسل؛)

اگر از این ساختار استفاده کنید، پس از هر پاراگراف 25 پیکسل تورفتگی وجود خواهد داشت.

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

میخواهی بیشتر بدانی؟ شاید پست های گذشته من در مورد موضوعات زیر مفید باشد:

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

برای شما در تسلط بر برنامه نویسی آرزوی موفقیت دارم. راستی آیا تا به حال به کسب درآمد از سایت های غیرتجاری اطلاعاتی فکر کرده اید؟ اطلاعات فوق العاده ای که برای خوانندگانش ارائه شده است.

تجارت آنلاین و امور مالی موضوعات کلیدی این وبلاگ هستند. شما می توانید همین الان از مطالب منتشر شده با افراد بالقوه در شبکه آشنا شوید. به تهیه و انتشار مطالب جدید و از همه مهمتر واقعا مفید ادامه می دهم. مشترک شدن در به روز رسانی Workip در خود پست الکترونیک... تا دفعه بعد.

- در فرآیند ایجاد یک وب سایت، باید با بلوک های متنی یا عبارات متنی بسیار کار کنیم. یک بار، من نیاز به اضافه کردن یک عبارت متنی داشتم، به طوری که قبل از این عبارت متنی وجود داشت تورفتگی متن از لبه htmlبلوکی که متن داده شده به آن اضافه شده است.

بنابراین ، اولین روش طبیعی ترین و ساده ترین است. برای تورفتگی قبل از متن، قبل از متن اضافه کنید کد html spaces - می توانید کد فضای html را در هر ویرایشگر html اضافه کنید.

در اینجا یک مثال از یک کد کار برای تنظیم تورفتگی برای متن با استفاده از کد فاصله آورده شده است:

Html تورفتگی متن به سمت چپ, از کد فاصله استفاده کنید

در این مثال ، قبل از متنی که انتخاب کرده ایم ، کد فاصله این است -& nbsp؛ چهار بار اضافه شد، در نتیجه، تورفتگی مورد نیاز را دریافت می کنیم.

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

خوبی این روش این است که کارکرد آن در هر مرورگری تضمین می شود.

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

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

تورفتگی متن HTML، روش دوم - این روش بر اساس ویژگی های تگ blockquote است. این تگ تورفتگی تقریباً 40 پیکسل را در سمت چپ و راست برای متن قرار داده شده در آن تعیین می کند. علاوه بر این ، بالشتک در بالا و پایین تنظیم شده است. مثال Htmlکد استفاده از این روش در زیر آمده است:

در سمت چپ، از برچسب استفاده کنید مسابقه

همانطور که می بینید، استفاده از این روش برای تنظیم تورفتگی متن بسیار آسان است، اما این روش یک اشکال قابل توجه نیز دارد. تورفتگی که تگ تعیین می کند مسابقه،ثابت است و همیشه برابر با همان مقدار - 40px است.

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

تورفتگی متن HTML، روش سه.

در اینجا از ویژگی تورفتگی متنی CSS Cascading Style Sheets استفاده خواهیم کرد.

اگر مرجع CSS را باز کنیم، در صفحه با توضیحات ویژگی های text-indent، می بینیم که به کمک text-indent می توانیم مقدار تورفتگی خط اول یا پاراگراف اول هر کدام را تعیین کنیم. بلوک متن

ما مثالی را با یک بلوک متن کوتاه در نظر می گیریم، بنابراین ویژگی های text-indent برای مورد ما مناسب هستند.

در زیر کد html وجود دارد که متن را با استفاده از text-indent تورفتگی می کند. از مثال می بینید که با تنظیم مقادیر مختلف آرگومان برای text-indent، می توانیم میزان تورفتگی متن را تغییر دهیم:

Htmlتورفتگیمتنسبک CSS کار می کند - تورفتگی متن

به نظر من، این روش برای تعیین تورفتگی برای متن بهینه ترین است، اما، با این وجود، روش دیگری را برای تنظیم تورفتگی، استفاده از تصاویر در نظر بگیرید.

تورفتگی متن HTML، روش چهارم - در اینجا از یک تصویر برای تنظیم تورفتگی استفاده می کنیم.

به عنوان مثال کاری، اجازه دهید نگاهی به کد html بیاندازیم که نحوه کار این روش را نشان می دهد:

در سمت چپ، از تصویر استفاده کنید

از مثال داده شده به وضوح مشاهده می شود که با تغییر عرض تصویر می توانیم موقعیت متن را تغییر دهیم، یعنی تورفتگی لازم را برای متن تنظیم کنیم.

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

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

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

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

برای ایجاد واحدهای ساختاری متن مانند پاراگراف ها، اسناد HTML از تگ استفاده می کنند

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

توجه: به طور پیش فرض ، فاصله بین پاراگرافها 1em است (em یک واحد اندازه گیری برابر با ارتفاع فونت است) ، یعنی فاصله بین پاراگرافها مستقیماً به اندازه فونت بستگی دارد.

برای تغییر تورفتگی بین پاراگراف ها بدون تغییر اندازه فونت می توانید استفاده کنید ویژگی CSSلبه.

تگ پایان را فراموش نکنید

اکثر مرورگرها سند HTML را به درستی ارائه می دهند ، حتی اگر تگ پایان را فراموش کنید.

پاراگراف

یک پاراگراف دیگر

این کد در اکثر مرورگرها کار می کند، اما به آن اعتماد نکنید. یک برچسب پایانی فراموش شده می تواند منجر به نتایج یا خطاهای غیرمنتظره شود.

خط قرمز

خط قرمز چیست؟ طبق تعریف ، این خط آغازین یک پاراگراف است که قبلاً با رنگ قرمز مشخص می شد (از این رو عنوان). قبل از اختراع تایپوگرافی ، کتابها با دست نوشته می شدند - یک فصل یا قسمتی از یک متن ، اولین کلمه یا حرف با رنگ قرمز نوشته شده بود. اینگونه بود که مفهوم "نوشتن از خط قرمز" ظاهر شد - به معنای آغاز یک فکر، فصل یا بخشی جدید است.

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

برای افزودن یک خط قرمز به پاراگراف های خود، باید از ویژگی text-indent CSS استفاده کنید که به شما امکان می دهد جمله اول را تورفتگی کنید:

تلاش كردن "

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

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

تلاش كردن "

توجه: لازم نیست padding را روی 25 پیکسل قرار دهید، می توانید انتخاب کنید اندازه بهینهخود indentation، همچنین با استفاده از ویژگی text-indent می توان یک خط بیرون زده بالای بقیه متن ایجاد کرد، برای این کار باید یک مقدار منفی برای ویژگی تعیین کنید (به عنوان مثال: -30px).

وظیفه

خط اول هر پاراگراف را تورفت کنید.

راه حل

هنگامی که نیاز به تعیین تورفتگی پاراگراف دارید که به آن خط قرمز نیز می گویند، بهتر است از ویژگی text-indent style استفاده کنید. مقدار آن تعیین می کند که چقدر باید متن خط اول را به سمت راست تغییر دهید محل شروع... در این حالت، عرض بلوک متن تغییر نمی کند و در ابتدا تنظیم می شود. مقدار فرورفتگی را می توان بر حسب پیکسل، درصد یا سایر واحدهای موجود مشخص کرد (مثال 1).

مثال 1. تورفتگی خط اول

HTML5 CSS 2.1 IE Cr Op Sa Fx

هیاهو بابلی، طبق سنت کتاب مقدس، تلاش نافرجام پادشاه نمرود برای ساختن ستونی در بابل تا آسمان است. خدا که از مردم به خاطر میل بی پروا آنها خشمگین بود، تصمیم گرفت سازندگان را مجازات کند: او زبان آنها را به گونه ای مخلوط کرد که آنها دیگر نفهمیدند. یکدیگر، مجبور به توقف ساخت و ساز شدند و کم کم در سراسر جهان پراکنده شدند. از این رو، همانطور که گذشتگان توضیح دادند، تفاوت در زبان ها به وجود آمد.

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

نتیجه این مثال در شکل نشان داده شده است. 1.