محتوای آموزشی

قالب بندی متون در HTML5

قالب بندی متون در HTML5

در ادامه سلسله مقالات آموزش HTML در این مقاله به بررسی تگ های مربوط به قالب بندی متون در HTML5 خواهیم پرداخت.این تگ ها نحوه نمایش متن ها را مشخص می کنند. در html5 سه تگ به تگ های قالب بندی متون اضافه شده است که در این مقاله این 3 تگ را معرفی خواهیم کرد.

<Mark>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>شرکت پیشگامان صفر و یک فرساد</title>
    <meta charset="utf-8">
</head>
<body dir="rtl">
	<p>
	از این تگ به منظور <mark>هایلات (برجسته) کردن کلمه ای یا قسمتی از متن استفاده می شود،</mark>به طوریکه آن متن یا کلمه با گرفتن پس زمینه ای (به صورت پیشفرض زرد رنگ) یک حالت برجسته و متمایز از مابقی متن ها می گیرد.

	</p>
</body>
</html>

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

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

نکته : با استفاده از css می توانید رفتار پیش فرض مرورگر را تغییر دهید و استایل های مدنظر خود را برای متون داخل این تگ وارد کنید.به عنوان مثال در تگ head صفحه خود یک تگ style قرار می دهیم و کدهای خود را مانند قطعه کد زیر تغییر می دهیم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<meta charset="utf-8">
		<style>
			mark{
				background:black;
				color:white;
				font-weight:bold;
			}
		</style>
	</head>
	<body dir="rtl">
		<p>
		از این تگ به منظور <mark>هایلات (برجسته) کردن کلمه ای یا قسمتی از متن استفاده می شود،</mark>به طوریکه آن متن یا کلمه با گرفتن پس زمینه ای (به صورت پیشفرض زرد رنگ) یک حالت برجسته و متمایز از مابقی متن ها می گیرد.
		</p>
	</body>
</html>

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

<time>

در صفحات وب،از تاریخ و زمان به فراوانی استفاده می شود به عنوان مثال در انتهای پست ها معمولا تاریخ انتشار پست ها نمایش داده می شود. تا قبل از آمدن HTML5، استاندارد خاصی برای نمایش اطلاعات تاریخ و زمان وجود نداشت، و طراحان وب هر کس به سلیقه خود از هر تگی استفاده می کرد، به طور مثال از تگ p یا span یا headingها , و یا ...، اما تگ time این مشکل را حل کرده و برای نمایش تاریخ، زمان، و یا تاریخ و زمان با یکدیگر، استفاده می شود.

به مثال زیر توجه کنید:

<!doctype html>
<html lang="en">
	<head>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<meta charset="utf-8">
	</head>
	<body dir="rtl">
		<p>We open at <time>10:00</time> every morning.</p>
		<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
	</body>
</html>

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

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

نکته : تگ time از نظر ظاهری،تاثیری در نحوه نمایش عناصر ندارد و صرفا به لحاظ مفهموی کاربرد دارد.البته می توانیم با استفاده از CSS استاید مدنظر خود را به این تگ اعمال بکنیم.

<output>

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

به طور مثال فرض کنید، یک ماشین حساب با استفاده از جاوااسکریپت نوشته باشیم. تگ نمایش خروجی عملیات ریاضی بایستی تگ output باشد. یا در یک فرم لاگین پس از چک کردن username و password توسط دستورات php، پیغام خروجی درست بودن یا اشتباه بودن بایستی در تگ output قرار گیرد.

قطعه کد زیر نمونه یک مثال ساده در مورد نحوه استفاده درست از این تگ را نمایش می دهد.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<meta charset="utf-8">
		<script>
			function sum(x,y){
				return x+y;
			}
		</script>
		<style>
			output{
				border:1px solid red;
				font-size:20px;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<output>
			<script>
				document.write(sum(5,10));
			</script>
		</output>
	</body>
</html><!DOCTYPE html>
<html lang="en">
	<head>
		<title>شرکت پیشگامان صفر و یک فرساد</title>
		<meta charset="utf-8">
		<script>
			function sum(x,y){
				return x+y;
			}
		</script>
	</head>
	<body>
		<output>
			<script>
				document.write(sum(5,10));
			</script>
		</output>
	</body>
</html>

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

به این ترتیب با تگ های قالب بندی متون در HTML5 نیز آشنا شدید.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه مقالات آموزش HTML,CSS با ما همراه باشید.

کامنت جدید ...
Sort by:

مطالب پیشنهادی

'