کسب در آمد از فورکیا
تگهای اصلی HTML - قسمت سوم

تگهای اصلی HTML - قسمت سوم


قسمت سوم آموزش زبان HTML در رسانه کامپیوتر پرسش، در این قسمت به شرح و بررسی تگهای عمومی این زبان میپردازیم که این تگها یا همان برچسبها نقطه ی ابتدایی شروع کار در این زبان میباشد.

 

تگهای عنوان

هر سند با عنوان شروع می شود. شما می توانید برای مقادیر خود از اندازه های مختلف استفاده کنید. HTML دارای شش سطح عنوان است که از عناصر <h1>، <h2>، <h3>، <h4>، <h5> و <h6> استفاده می کند. در هنگام نمایش هر عنوان یا Heading مرورگر یک خط بعد و یک خط قبل از آن اضافه میکند.

مثال:

<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/>

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

 

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

 

تگ پاراگراف

تگ <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/>

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

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

 

تگ شکست خط

هرگاه که شما از تگ <br /> استفاده میکنید، هرچیزی که بعد از آن نوشته شود از خط بعد آغاز میشود. این تگ نمونه ای از یک عنصر خالی است که در آن شما نیازی به باز کردن و بستن تگ ها ندارید، زیرا هیچ چیز بین آن قرار نمیگیرد.

 

در نوشتن این برچسب دقّت کنید طرز صحیح نوشتن آن به شکل یک براکت باز (<) سپس حروف br، یک فاصله و در نهایت اسلش (/) و بستن براکت (<) میباشد. اگر شما فاصله را نادیده بگیرید، مرورگرهای قدیمی برای شکستن خط دچار مشکل خواهند شد و اگر از اسلش رو به جلو استفاده نکنید و فقط به شکل <br> بنویسید دیگر در XHTML معتبر نیست.

 

مثال:

<DOCTYPE html!>
<html>
 
   <head>
      <title>Line Break  Example</title>
   <head/>
         
   <body>
      </ p>Hello<br>
         You delivered your assignment ontime.<br
         </ Thanks<br
         <Mahnaz</p
   <body/>
         
<html/>

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

Hello
You delivered your assignment on time.
Thanks
Mahnaz

 

محتوا در مرکز

شما می توانید از برچسب <center> برای قرار دادن هر گونه محتوا در مرکز صفحه استفاده کنید.

مثال:

<DOCTYPE html!>
<html>
 
   <head>
      <title>Centring 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/>

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

This text is not in the center.

This text is in the center.

 

خطوط افقی

خطوط افقی همانطور که از نامش پیداست در قسمتهایی از سند استفاده میشود که بخواهید یک خط افقی مابین محتوای خود ایجاد کنید. با استفاده از تگ <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>

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

This is paragraph one and should be on top


This is paragraph two and should be at bottom

 

برچسب <hr /> باز هم یک نمونه از عنصر خالی است، جایی که شما نیازی به باز کردن و بستن تگ ها ندارید، زیرا هیچ محتوایی بین آنها وجود ندارد.

 

در نوشتن تگ <hr / > نیز دقّت داشته باشید طریقه نوشتن این تگ مانند تگ <br /> است که در بالا ذکر کردیم.

 

حفظ قالب بندی

گاهی اوقات ممکن است شما بخواهید همان متنی را که مینویسید عینا در سند نمایش داده شود. در این موارد، شما می توانید از پیش برچسب <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) 
} 

سعی کنید یک بار همان کد را بدون تگ <pre> امتحان کنید و نتیجه را مشاهده کنید.

 

ایجاد فضا بدون شکستن

فرض کنید شما می خواهید از عبارت "12 Angry Men." استفاده کنید و نمیخواهید مرورگر آنرا به دو خط "12, Angry" و "Men" تقسیم کند.

An example of this technique appears in the movie "12 Angry Men."

در چنین مواردی شما باید از یک فضای بدون شکستن به جای فضای عادی استفاده کنید برای اینکار نیاز به نوشتن &nbsp;خواهید داشت. برای مثال، هنگام کدگذاری "12 Angry Men" در یک پاراگراف، شما باید چیزی شبیه به کد زیر را استفاده کنید:

مثال:

<!DOCTYPE html>
<html>
 
   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
         
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
         
</html>

 

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

An example of this technique appears in the movie "12 Angry Men."

 

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

ورود به جلسه دوم

ورود به جلسه اوّل

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی