آموزش کامل HTML و HTML5: تگ های قالب بندی متن(۲)

آموزش کامل HTML و HTML5: تگ های قالب بندی متن(2)Reviewed by محمدرضا on Jan 16Rating: 5.0

سلام دوستان

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

طبق قرار همیشگی همراه با ما کدها را در ویرایشگر خود تایپ کنید تا بهتر بتوانید مطالب را یاد بگیرید.

حتما بخوانید: آموزش کامل HTML و HTML5: تگ های قالب بندی متن(۱)

تگ <hn>: این تگ از <h1> و <h2> و <h3> و <h4> و <h5> و <h6> وجود دارد برای تیرتر ها و یا هدینگ بکار می رود اگر دقت کنید در این تگ بجای n مقادیر ۱، ۲ ،۳، ۴، ۵، ۶ قرار میگیرد که به ترتیب h1 بزرگترین تیتر و h6 کوچکترین تیرت می باشد.

<h1>Fabtheme</h1>
<h2>Fabtheme</h2>
<h3>Fabtheme</h3>
<h4>Fabtheme</h4>
<h5>Fabtheme</h5>
<h6>Fabtheme</h6>

نتیجه کد در مرورگر:

این شش تگ صفت های زیر را میپذیرند:

align  class  id  style  title  dir  lang

 align: این صفت چینش متن در heading را کنترل میکند و چهار مقدار زیر را می پذیرد:

left: تیتر در سمت چپ صفحه قرار میگیرد.
center: تیتر در وسط صفحه قرار میگیرد.
right: تیتر در سمت راست صفحه قرار میگیرد.
justify: متن داخل heading را از هر دو طرف تراز میکند.

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

تگ <p> : ب این تگ آشنایی کامل دارید چرا که در همه ی مثال هایمان از این به عنوان تگ پاراگراف استفاده کردیم. هر متنی که بین تگ باز و بسته ی p  قرار بگیرد به عنوان یک پاراگراف شناخته می شود. معمولا پاراگراف ها یک فضای خالی قبل و بعد از خود ایجاد میکنند.

<p>This is a Paragraph:)</p>

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

<p>Fabtheme<br>HTML toturial</p>

مشاهده ی کد در مرورگر:

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

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

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


      <pre>
	     function nameFunction(Text) {
		  alert (Text)
	     }
      </pre>

نتیجه در مرورگر:

تگ <hr>: این تگ یک نمونه ی دیگر از تگ هایی است که همینگونه بکار می رود و به تگ پایان احتیاجی ندارد. این تگ در خروجی یک خط افقی ایجاد می کند و باعث جداسازی دو محتوا از هم می شود.

<p>Fabtheme : HTML Tutorial <hr> </p>

نتیجه در مرورگر:

این تگ نیز دارای صفات اختصاصی زیر می باشد:

Width: این صفت عرض خط افقی را مشخص میکند و بر حسب px و یا درصد مقدار دهی می شود.

<hr width="60px">

Color: این صفت رنگ خط افقی را مشخص می کند و برحسب نام رنگ و rgb و هگزا دسیمال و… مقدار دهی می شود، برحس نام رنگ به عنوان مثال اگر شما مقدار red را به این صفت بدهید رنگ خط افقی شما قرمز رنگ می شود.

<hr color="red">

Size:  این صفت هم ارتفاع را تعیین میکند و بر حسب px  مقدار دهی می شود.

<hr size="3px">

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

<hr noshade="noshade">

align: محل قرار گیری خط را مشخص می کند و می تواند مقادیر right, center و left و… را به عنوان مقدار بپذیرد.

<hr align="center">

 

مقدار دهی صفت color در زبان HTML:

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

<p color="green">Fabtheme : HTML Tutorial </p>

استفاده از تابع rgb: این تابع به ترتیب سه مقدار قرمز، سبز و آبی را به عنوان مقدار می پذیرد و با تغیرات هر کدام رنگ مربوطه به سمت تیره و یا روشن میل میکندو هر کدام مقدار ۰ تا ۲۵۵ را میپذیرند:

<p color="rgb(255,132,0)">Fabtheme : HTML Tutorial </p>

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

 

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

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

موفق باشید

Html Html5 آموزش طراحی رابط کاربری

درباره محمدرضا

دیدگاه خود را بیان کنید