تگ های پایه در زبان HTML – برنامه نویسی HTML بخش ششم
تگ های زبان HTML از بخش های پایه ای در عناصر زبان HTML هستند که برای تعریف ساختار یک پرونده به کار می روند. تگ ها (Tags) حروف و یا کلمه هایی هستند که در میان دو براکت شکسته (<>) قرار می گیرند.
به صورت معمول، بیشتر تگ های زبان HTML شامل یک تگ باز در ابتدا و یک تگ بسته در انتها هستند. هر کدام از تگ ها دارای معنی متفاوتی هستند و مرورگر نیز تگ ها را خوانده و سپس محتوایی محبوس در آن را مطابق با ویژگی های تگ ها نمایش می دهد.
برای مثال اگر محتوایی نوشتاری در میان تگ های قرار داشته باشد، مرورگر این نوشته هارا به صورت پاراگراف های جدا نمایش می دهد. در این سری از آموزش ها ما تمام تگ های پایه ای به کار گرفته شده در زبان HTML را برای شما توضیح می دهید.
تگ ها عنوان
تگ های عنوان (Heading Tags) برای تعریف تگ های عناوین در صفحه های وب به کار می روند. شما می توانید از سایزهای مختلف برای تگ های عنوان استفاده کنید. در اینجا ما دارای شش سطح از تگ های عنوان از h1 تا h6 هسیتم. هر کدام از این تگ ها می توانند در خط بعد از دیگری نمایش داده شوند. با این حال در هر صفحه تنها باید از یک تگ h1 استفاده شود و بقیه تگ ها زیرمجموعه آن باشند
مثال
در کد زیر شما می توانید سطح های مختلف استفاده از تگ های عنوان را مشاهده کنید:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
تگ پاراگراف
تگ پاراگراف (Paragraph Tag) که به صورت <p> نمایش داده می شود می تواند نوشته ها را در پاراگراف های مختلف سازمان دهی کند. هر کدام از پاراگراف های نمایش داده شده در اینجا باید دارای یک تگ باز<p>
و یک تگ بسته<p/> باشند.
مثال
در زیر ما با استفاده از تگ پاراگراف سه پاراگراف مختلف را ایجاد کرده ایم.
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
تگ خط شکسته
شما می توانید با استفاده از عنصر<br>استفاده کنید و نوشته خودتان را شکسته و ادامه آن را به خط بعد ببرید. این تگ می تواند در میان نوشته ها و یا عناصر فضای خالی ایجاد کند. شما در اینجا تگ بسته ندارید و لازم نیست که چیزی را در میان آن قرار دهید.
تگ <br/>دارای یک فاصله بین عبارت br و خط اسلش / است. اگر شما این خط را حذف کنید، ممکن است کد شما در مرورگرهای قدیمی دچار مشکل شود. این در حالی است که اگر بدون اسلش از این تگ استفاده کنید مانند حالت <br>ممکن است در مرورگرهای قدیمی این سینتکس XHTML به درستی تفسیر نشود.
مثال
در زیر نمونه ای از کاربرد تگ <br/> نشان داده شده است
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br /> You delivered your assignment on time.<br />
Thanks<br /> Mahnaz</p>
</body>
</html>
تگ مرکز
تگ <center> برای مرتب کردن نوشته، تصاویر و یا عناصر دیگر در میانه یک صفحه وب به کار می رود.
دقت کنید که تگ <center> در HTML 5 دیگر استفاده نمی شود به جای آن شما می توانید از ویژگی text-align در زبان CSS استفاده کنید.
مثال
در زیر شما می توانید نمونه ای از به کار گیری تگ <center> را مشاهده کنید که در آن پاراگراف دوم وسط چین شده است.
<!DOCTYPE html>
<html>
<head>
<title>Centering Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
تگ خط افقی
تگ خط افقی <hr> یک خط افقی را در میانه صفحه وب ایجاد می کند. این خط به صورت افقی صفحه وب را تقسیم می کنم. تگ<hr> یک خط را از موقعیتی که به کار گرفته شده است ایجاد می کند و سایر محتواها بر اساس آن تقسیم می شوند.
در زیر نمونه ای از ایجاد یک خط افقی در میان پاراگراف را می توانیم ببینیم:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
همانطور که در مثال بالا می توانید ببینید، یک خط مستقیم افقی در میان دو پاراگراف ایجاد شده است.
تگ <hr/> یک مثال از عنصر خالی (Empty Element) است، که شما نیازی به ایجاد تگ های باز و بسته و قرار دادن محتوا در آن را ندارید.
عنصر <hr/> با یک فاصله بین hr و اسلش / باید باشد تا در تفسیر آن دچار مشکل نشوید. زیرا مرورگرهای قدیمی نمی توانند این عنصر را به درستی تفسیر کنند. همچنین در زبان XHTML نیز نبود اسلش می تواند سبب ایجاد مشکل شود.
تگ حفظ آرایش
تگ <pre> به شما کمک می کند که آرایش و استایل یک نوشته را در صفحه وب حفظ کنید. در جایی که شما می خواهید نوشته شما دقیقاً به شکلی که در ویرایشگر تایپ می کنید نمایش داده شود می توانید از تگ های باز و بسته <pre></pre> استفاده کنید. این تگ ها همه فضاهای خالی و فاصله میان کاراکترها را حفظ می کنند. که شامل براکت ها و تو رفتگی ها نیز می شود.
مثال
در مثالی که در زیر آماده است ما از تگ <pre> استفاده کرده ایم که برخی از کدها را به شیوه ای که باید نگارش شوند را نمایش دهیم. همانطور که مشاهده می کنید این کدها دقیقا در میان تگ استفاده شده اند و به همین شکل نیز در صفحه مرورگر نمایش داده می شوند.
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
function testFunction( strText ){
alert (strText)
}
فضای خالی غیرشکسته
فضای خالی غیرشکسته (Non-breaking space)، یک فضای خالی ایجاد می کند اما از شکسته شدن خط نوشتار جلو گیری می کند. این فضا به صورت ;nbsp& در میان کدها نمایش داده می شود.
برای مثال در کد زیر ما می خواهیم عبارت “۱۲ Angry Men” را نمایش دهید. همانطور که می بینید ما می خواهیم بین سه عبارت یک فاصله داشته باشیم. در اینجا ما می توانیم این فضاهای خالی را با استفاده از عبارت ;nbsp& ایجاد کنیم. در اینجا صورت همه عبارت به شکل یک کلمه خواهد بود اما در عین حال فاصله بین کلمه های مورد نظر نیز حفظ می شود. این کار به خصوص در عبارت های علمی، حقوقی، دارویی و اسم های اختصاری کاربرد دارد.
مثال
در مثال زیر نمونه ای از کاربرد ;nbsp& را مشاهده می کنید:
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
در زمانی که این کد را اجرا کنید عبارت An example of this technique appears in the movie “12 Angry Men.” بر روی صفحه ظاهر می شود و همانطور که مشاهده می کنید فاصله های خالی در میان عبارت های بین گیومه خودشان را به صورت یک عبارت متصل نشان می دهند بدون اینکه سبب شکسته شدن عبارت استفاده شده شده باشند.
تگ لیست
تگ های <ul>و <ol> نیز برای ایجاد آیتم های این دو لیست به کار گرفته می شوند.
مثال
در مثال زیر می توانید نمونه ای از لیست ها در یک فایل HTML را مشاهده کنید.
!DOCTYPE html>
<html>
<head>
<title>Listing Tags Example</title>
</head>
<body>
<h2>Unordered list</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Ordered list</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>