آموزش html – تگ و کد بخش نوشته و متن html 5

برچسبها: آموزش html,آموزش html 5,کد نوشته و متن htlm 5

در این بخش از آموزش html به معرفی و توضیح تگ و کد بخش نوشته و متن html 5 و css که شامل نحوه نمایش کلمات ضخیم ، متنهای زیرخط دار ، پاراگراف ها، رفتن به خط دیگر و … می باشد می پردازیم دلیل ادقام این آموزش html با کدهای css ارتباط تنگاتنگ بین html و css در این بخش می باشد یعنی می توان کدهای css را جایگزین کدهای html کرد و با این روش نسبت متن به کد html/text که یکی از معیارهای سنجش میزان سئو و بهینه سازی وب سایت می باشد را در هنگام طراحی سایت و طراحی قالب وردپرس افزایش داد که نتیجه کار باعث سبکتر شدن قالب می شود برای مشاهده اموزش تا پایان همراه روناک وب باشید.

آموزش html - تگ و کد بخش نوشته و متن html 5 و css

آموزش html بخش دستورات متنی html 5 و css

از مهم ترین بخشها در هنگام طراحی سایت و قالب وردپرس بخش نوشته یا مطالب می باشد پیش از این در مطلب ساختار استاندارد کدها در قالب html نحوه قرارگیری اجزاء مختلف و تگها در پوسته html5 آموزش داده شد حال می خواهیم به کدهای مورد استفاده در برچسب یا تگ Article بپردازیم.
الاوه بر تگهای header و footer که برای نمایش سرصفحه و پانوشت اکثر برچسبهای مربوط به نمایش متن در تگ article مورد استفاده قرار می گیرند همچنین برخی از برچسب ها در html5 منقضی شده اند که نباید از آنها استفاده کرد. کلیه برچسبهای مورد بحث در کد زیر نمایش داده شده اند.

<article>
	<header></header>
	<div>
		<p>
			سلام دوستان <br>
			امیدورام <span>حالتون خوب باشه</span> و سالم و سلامت باشید ، <i>این نوشته</i> برای <strong> آموزش html 5</strong> هست. <br>
			قیمت محصول : <del> 25000</del> - 22000 تومان
			<blockquote>
				این تگ برای نمایش نقل قول مورد استفاده قرار می گیرد
			</blockquote>
		</p>
	</div>
	<footer></footer>
</article>

تگ پاراگراف p در html

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

رفتن به خط بعدی با تگ br

برای رفتن به خط بعدی از تگ <br> استفاده می شود این تگ نیاز به تگ بسته ندارد و تنها تایپ <br> برای پریدن به خط بعدی کافی می باشد.

ضخیم و خمیده کردن کلمات در html

برای ضخیم و بولد کردن کلمات در html از تگ باز و بسته strong استفاده می شود در نسخه های قدیمی تر html از تگ b برای بولد کردن استفاده می شود اما در html5 باید از برچسب strong استفاده کرد همچنین توسط font-weight: bold در css می توانیم متن را بولد کنیم. برای خمیده کردن کلمات از تگ باز و بسته em استفاده می شود، در html4 برای زیرخط دار کردن متن از تگ u استفاده می شد که این تگ در html5 منقضی شده و به جای آن از دستور text-decoration: underline در css که به تگ بی تاثیر span داده می شود استفاده می کنند.

تگ بی تاثیر span

برچسب span در html تگی بی تاثیر می باشد یعنی با افزودن این تگ به متن هیچ اتفاق خاصی رخ نمی دهد اما اگر بخواهیم از دستورات css و java در متن استفاده کنیم از تگ باز و بسته span برای اعمال تغییرات و دادن کلاس یا ای دی ( class or id ) مورد نظر استفاده می کنیم.

تگ خط خوردن del برای نمایش متن منقضی شده

برای اینکه بتوانیم متن منقضی شده را نمایش دهیم همانند وقتیکه روی کاغذ چیزی می نوشتیم و در صورت نبود پاک کن بر روی متن خط می کشیدیم در html نیز با استفاده از تگ باز و بسته del نوشته و متن منقضی شده را نمایش می دهیم در مثال بالا قیمت محصول کاهش پیدا کرده که برای نمایش قیمت قبلی به صورت خط خورده و منقضی شده از تگ del استفاده شده است.

تگ html نمایش نقل قول blockquote

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

تگهای زیادی هستند که برای نمایش ویژگی های مختلف در نوشته ها استفاده می شوند مانند : برچسب های هدینگ یا تگ های h ، برچسب های لیست ، جدول و … که به دلیل طولانی شدن این آموزش html آنها را در مطلبی جدا معرفی خواهیم کرد.

این مطلب بروز خواهد شد …