تگ Heading
تگ Heading یکی از تگ‌های مهم در HTML است که برای تعریف عنوان یا سرخط‌های متن استفاده می‌شود. این تگ به صورت <h1> تا <h6> در HTML وجود دارد، که هرکدام از این تگ‌ها سطح مختلفی از اهمیت را برای متن تعیین می‌کنند.
برای مثال، تگ <h1> بیشترین اهمیت را دارد و عنوان اصلی صفحه یا بخشی از صفحه را نشان می‌دهد. در حالی که تگ <h6> کمترین اهمیت را دارد و معمولاً برای عناوین فرعی یا رده‌بندی‌های کوچکتر استفاده می‌شود.
در اینجا یک مثال از استفاده از تگ‌های Heading در HTML آورده شده است:
<!DOCTYPE html>
<html>
<head>
<title>مثال تگ Heading در HTML</title>
</head>
<body>
<h1>این یک عنوان اصلی است</h1>
<p>اینجا متنی است که به همراه عنوان اصلی قرار دارد.</p>
<h2>این یک عنوان فرعی است</h2>
<p>اینجا متنی است که به همراه عنوان فرعی قرار دارد.</p>
<h3>عنوان کوچکتر</h3>
<p>اینجا متنی است که به همراه عنوان کوچکتر قرار دارد.</p>
</body>
</html>
در این مثال، تگ‌های `<h1>` تا `<h3>` برای ایجاد عناوین مختلف استفاده شده است که با توجه به سطح اهمیت، اندازه و استایل متفاوتی را نمایش می‌دهند.
تگ Paragraph
<!DOCTYPE html>
<html>
<head>
<title>مثال تگ Paragraph در HTML</title>
</head>
<body>
<h1>عنوان اصلی</h1>
<p>این یک پاراگراف متن است. در اینجا متنی برای نمایش در یک پاراگراف قرار گرفته است.</p>
<h2>عنوان فرعی</h2>
<p>در این قسمت یک پاراگراف دیگر وجود دارد که برای توضیحات اضافی به کار رفته است.</p>
</body>
</html>
تگ Line Break
تگ Line Break یا <br> در HTML برای ایجاد یک شکست خط در میان یک متن یا بلاک متن استفاده می‌شود. با استفاده از این تگ، می‌توانید متن را به دو خط مجزا تقسیم کنید بدون ایجاد یک پاراگراف جدید.
در زیر یک مثال از استفاده از تگ Line Break آورده شده است:
<!DOCTYPE html>
<html>
<head>
<title>مثال تگ Line Break در HTML</title>
</head>
<body>
<h1>عنوان اصلی</h1>
<p>این یک متن است که در یک خط نوشته شده است.<br>
این خط جدید است که با استفاده از تگ Line Break ایجاد شده است.</p>
<h2>عنوان فرعی</h2>
<p>در اینجا یک متن دیگر قرار دارد.<br>
این متن نیز به دو خط متفاوت تقسیم شده است.</p>
</body>
</html>
در این مثال، تگ <br> برای ایجاد یک شکست خط استفاده شده است. متن داخل هر تگ <p> به دو خط متفاوت تقسیم شده است با استفاده از این تگ.
تگ center
در HTML، تگ <center> برای مرکز چین کردن محتوای موجود درون آن استفاده می‌شود. با استفاده از این تگ، می‌توانید متن، تصاویر و سایر عناصر را در وسط صفحه یا داخل یک بخش خاص از صفحه قرار دهید.
در زیر، یک مثال از استفاده از تگ <center> آورده شده است:
<!DOCTYPE html>
<html>
<head>
<title>مثال تگ Centering در HTML</title>
</head>
<body>
<h1>عنوان اصلی</h1>
<center>
<p>این یک متن است که در وسط صفحه قرار می‌گیرد.</p>
<img src="example.jpg" alt="تصویر مثال" width="300">
</center>
<h2>عنوان فرعی</h2>
<center>
<p>در اینجا یک متن دیگر قرار دارد که مرکز چین شده است.</p>
<ul>
<li>آیتم 1</li>
<li>آیتم 2</li>
<li>آیتم 3</li>
</ul>
</center>
</body>
</html>در این مثال، تگ <center> برای مرکز چین کردن محتوای داخلی آن استفاده شده است. همچنین، متن، تصویر و لیست داخلی به وسیله این تگ در وسط صفحه قرار گرفته‌اند. اما توجه داشته باشید که از نظر استاندارد HTML5، تگ <center> دیگر توصیه نمی‌شود و به جای آن از CSS استفاده می‌شود.
تگ Horizontal Lines
<hr> یا خط افقی در HTML برای ایجاد یک خط افقی جداکننده در صفحه استفاده می‌شود. این تگ برای جدا کردن بخش‌های مختلف یک صفحه و یا ایجاد جداسازی بین محتواها استفاده می‌شود.
در زیر، یک مثال از استفاده از تگ <hr> آورده شده است: <!DOCTYPE html>
<html>
<head>
<title>مثال تگ Horizontal Line در HTML</title>
</head>
<body>
<h1>عنوان اصلی</h1>
<p>این یک متن است که بعد از آن یک خط افقی قرار می‌گیرد.</p>
<hr>
<h2>عنوان فرعی</h2>
<ul>
<li>آیتم 1</li>
<li>آیتم 2</li>
<li>آیتم 3</li>
</ul>
<hr>
<p>متن دیگری که بعد از آن یک خط افقی دیگر قرار می‌گیرد.</p>
<hr>
</body>
</html>
در این مثال، تگ <hr> برای ایجاد خطوط افقی استفاده شده است. این خطوط افقی بین متن‌ها و لیست‌ها قرار داده شده‌اند تا بخش‌های مختلف صفحه را جدا کنند و به خوانایی و دیدگاه کلی صفحه کمک کنند.
Empty Element چیست؟
در HTML، عناصر خالی یا “empty elements” عناصری هستند که در داخل خود هیچ محتوای قابل مشاهده‌ای ندارند و تنها توسط یک تگ شروع کننده تمثیل می‌شوند، بدون نیاز به تگ پایان دهنده. این عناصر معمولاً برای ایجاد تغییرات یا افزودن ویژگی‌های خاص به محتوای صفحه استفاده می‌شوند و بدون درج محتوای اضافی به صفحه اضافه می‌شوند.
تعدادی از عناصر خالی رایج در HTML شامل عناصری مانند <br>, <hr>, <img>, و <input> می‌شوند. به عنوان مثال:
- – <br>: این تگ برای ایجاد یک شکست خط (line break) در متن استفاده می‌شود، بدون نیاز به تگ پایانی.
– <hr>: این تگ برای ایجاد یک خط افقی (horizontal line) جداکننده بین محتواها یا بخش‌های مختلف صفحه استفاده می‌شود.
– <img>: این تگ برای درج یک تصویر در صفحه استفاده می‌شود و تنها به یک تگ شروع کننده نیاز دارد.
– <input>: این تگ برای ایجاد فیلدهای ورودی مختلف مانند فرم‌های متنی، چک باکس‌ها، دکمه‌های رادیویی و غیره استفاده می‌شود، و مانند تگ‌های دیگر، به یک تگ شروع کننده نیاز دارد.
استفاده از عناصر خالی در HTML می‌تواند به بهبود ساختار و قابلیت دسترسی وب‌سایت‌ها کمک کند و ویژگی‌های اضافی را به محتوا اضافه کند.
تگ Preserve Formatting
pre در HTML برای نگه‌داشتن فرمت‌بندی اصلی متن به صورتی که در کد منبع آن وجود دارد، استفاده می‌شود. این تگ از این طریق برای نمایش کد‌های کامپیوتری، متن‌های قالب‌بندی شده، یا هر نوع متنی که نیاز به حفظ فرمت دارد، مناسب است.
در زیر، یک مثال از استفاده از تگ pre آورده شده است: <!DOCTYPE html>
<html>
<head>
<title>مثال تگ Preserve Formatting در HTML</title>
</head>
<body>
<h1>نمونه کد</h1>
<pre>
<code>
<html>
<head>
<title>صفحه عنوان</title>
</head>
<body>
<h1>سلام، دنیا!</h1>
<p>این یک متن است که در تگ <p> قرار دارد.</p>
</body>
</html>
</code>
</pre>
</body>
</html>
در این مثال، تگ pre برای نگه‌داشتن فرمت‌بندی دقیق کد HTML استفاده شده است. بدون استفاده از این تگ، مرورگر ممکن است فرمت‌بندی را تغییر دهد و کد را به‌طور پیش‌فرض نمایش دهد. اما با استفاده از تگ pre، فرمت‌بندی اصلی کد حفظ می‌شود و دقیقاً به همان شکلی که در کد منبع ظاهر می‌شود، نمایش داده می‌شود.
تگ Nonbreaking space
Nonbreaking space در HTML یک نوع فاصله است که مانع از شکستن خط در هنگام نمایش متن می‌شود. این فاصله برای جلوگیری از جدا شدن کلمات یا عباراتی که به طور منطقی با یکدیگر مرتبط هستند، مورد استفاده قرار می‌گیرد. در HTML، nonbreaking space با استفاده از کد entity نشان داده می‌شود.
مثال ۱: استفاده از nonbreaking space برای جلوگیری از جدا شدن شماره صفحه از عبارت مرتبط با آن:
<p>صفحه ۱۰۰</p>
<p>این یک مثال از استفاده nonbreaking space در HTML است.</p>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام