قالبندی متن ها ی HTML یا HTML Formatting

قالبندی متن ها ی HTML یا HTML Formatting

فهرست مقاله [نمایش]

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

     از این تگ ها برای ایجاد متن های bold، ایتالیک و زیر خط دار استفاده می شود.

    در html  تگ های قالب بندی به دو دسته تقسیم می شوند:

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

    تگ های منطقی: برایا فزودن مقدارهای معنایی ومنطقی به متن مورد استفاده قرار می گیرند.

     

    تگ توضیحات 
    <b>  این یک تگ فیزکی است و باعث می شود متن بزرگتر ازنوشته های دیگر باشد
    <strong> از دسته تگ های منطقی است و به مرورگر می گوید این متن مهم است. 
    <i> برای نمایش متن بصورت مورب  یا همان italic  استفاده میشود
    <em> یک تگ معنایی برای نمایش دادن متن بصورت italic استفاده می شود.
    <mark> برای برجسته نشاندن متن استفاده می شود
    <u>

    زیر متن نوشته شده خطی ترسیم می کند

    <tt>

    برای نمایش متن  teletype در مروگر به کار میرود این تگ  درhtml5 پشتیبانی نمی شود

    <strike> این تگ برای ترسیم یک قسمت از متن بر روی متن استفاده می شود.در HTML5 پشتیبانی نمی شود
    <sup> متن را کمی بالاتر ازخط عادی نمایشن می دهد
    <sub> متن را کمی پایین تر ازخط عادی نمایشن می دهد
    <del> برای نمایش محتوای حذف شده استفاده می شود
    <ins> محتوای اضافه شده را نمایش می دهد
    <big>  از این تگ  برای افزایش اندازه متن  یک واحد بزرگتر از معمولی نشان می دهد.
    <small> از این تگ برای کاهش اندازه متن یک واحد کوچکتر از اندازه فونت پایه استفاده می شود.

     

     

    1) متن پررنگ با bold text

    در htmlعناصر<b> و<strong>  متن های  پررنگ را ایجاد می کنند.

    تگ <b> یک تگ فیزیکی است که متن را بدون اهمیت منطقی پررنگ می کند. هر چیزی را که در میان تگ b></b> بنویسی پررنگ ترنمایش داده می شود.

    این مثال را ببینید:

    <p> <b>Write Your First Paragraph in bold text.</b></p>     

    خروجی :

    .Write Your First Paragraph in bold text

     

     

     تگ <strong>متن را  بصورت بزرگتر نشان می دهد با این تفاوت که از لحاظ منطقی به مرروگر می گوید این مطلب مهم است. هر متنی که بین تگ <strong>.......</strong> قرار بگیرد مهم است.

    این مثال را ببینید:

    <p><strong>This is an important content</strong>, and this is normal content</p>

    خروجی :

    This is an important content, and this is normal content

     

    مثال:

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>formatting elements</title>  
    </head>  
    <body>  
    <h1>Explanation of formatting element</h1>  
    <p><strong>This is an important content</strong>, and this is normal content</p>  
    </body>  
    </html>  

    خروجی:

    formatting elements

    Explanation of formatting element

    This is an important content, and this is normal content

     

     

    2) متن مورب یا Italic Text 

    تگ های <i>و <em>  تگ هایی هستند که در html متن را ایتالیک می سازد.

    تگ <i> یک تگ فیزیکی است که هر مطلبی در آن نوشته شود بصورت ایتالیک یا مورب نمایش داده می شود.

    این مثال را ببینید:

    <p> <i>Write Your First Paragraph in italic text.</i></p>  
    

    خروجی :

    .Write Your First Paragraph in italic text

     

     

    اما تگ <em>  متن را از نظر منطقی ومعنایی  ایتالیک نمایش می دهد.

    این مثال را ببینید:

    <p><em>This is an important content</em>, which displayed in italic font.</p>

    خروجی :

    .This is an important content, which displayed in italic font

    مثال :

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>formatting elements</title>  
    </head>  
    <body>  
    <h1>Explanation of italic formatting element</h1>  
    <p><em>This is an important content</em>, which displayed in italic font.</p>  
    </body>  
    </html>  

    خروجی :

    formatting elements

    Explanation of italic formatting element

    .This is an important content, which displayed in italic font

     

     

    3) علامت گذاری شده یا HTML Marked formatting

    اگر میخواهید متن علامت گذاری یا مهم جلوه داده بشه از تگ <mark>......</mark>استفاده کنید.

    این مثال را ببینید:

    <h2>  I want to put a <mark> Mark</mark> on your face</h2>   
    

     خروجی :

    I want to put a Mark on your face

     

     

    4) متن زیرخط دار یا Underlined Text

    وقتی میخواهیم متنی را زیرخط دار نمایش بدهیم  از عنصر <u>....</u> استفاده کنیم.

    این مثال را ببینید:

    <p> <u>Write Your First Paragraph in underlined text.</u></p>

    خروجی :

    .Write Your First Paragraph in underlined text

     

    5) Strike

    این مثال را ببینید:

    <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>  
    

    خروجی :

    .Write Your First Paragraph with strikethrough

     

     

    6)Monospaced Font

    اگر می خواهید حروف به یک اندازه یکسان باشد ، باید مطالب را با عنصر <tt> ............. </tt> بنویسید. فضای یکسانی بین حروف ایجاد می کند.

    این مثال را ببینید:

    <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>     

    خروجی:

    .Hello Write Your First Paragraph in monospaced fon

     

    این عنصر در html5 پشتیبانی نمی شود.

    7) متن فوق متن یا Superscript Text

    اگر محتوا را درون عنصر <sup> .............. </sup> قرار دهید ، در متن فوق نشان داده شده است. به این معناست که نیمی از ارتفاع کاراکتر را بالاتر از سایر متن  نشان می دهد.

    این مثال را ببینید:

    <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p> 

    خروجی:

    .Hello Write Your First Paragraph in superscript

     

     

    8)Subscript Text

    اگر محتوا را درون عنصر <sub> .............. </sub> قرار دهید ، در زیر نمایش داده شود. به این معناست که نیمی از ارتفاع کاراکتر را در زیر کاراکترهای دیگر نشان داده شود.

    این مثال را ببینید:

    <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p> 

    خروجی :

    .Hello Write Your First Paragraph in subscript

     

    9) Deleted Text یا متن حذف شده

    هر چیزی که درعنصر  <del> .......... </del> قرار گیرد به عنوان متن حذف شده نمایش داده می شود.

    این مثال را ببینید :

    <p>Hello <del>Delete your first paragraph.</del></p>  

    خروجی :

    .Hello Delete your first paragraph

     

    10) متن درج شه یا Inserted Text

    هر چیزی که درون <ins> .......... </ins> قرار گیرد به عنوان متن درج شده نمایش داده می شود.

    این مثال را ببینید :

    <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>  

    خروجی:

    .Delete your first paragraph.Write another paragraph

     

    11) متن بزرگتر یاLarger Text


    اگر می خواهید اندازه قلم خود را بزرگتر از بقیه متن قرار دهید ، محتوا را درون <big> ......... </big> قرار دهید. این عنصر اندازه متن را  یک سایز بزرگتر ازقبلی افزایش می دهد.

    این مثال را با ببینید:

    <p>Hello <big>Write the paragraph in larger font.</big></p>  

    خروجی:

    .Hello Write the paragraph in larger font

     

    12) متن کوچکتر یا Smaller Text

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

    این مثال را ببینید:

    <p>Hello <small>Write the paragraph in smaller font.</small></p> 

    خروجی:

    .Hello Write the paragraph in smaller font

     

    مقاله قبلی     مقاله بعدی

    جدیدترین ویدئوهای آموزشی

    در بخش TV باگتو، آموزش های کوتاه و جدید را مشاهده نمایید

    0 نظرات

    برای ارسال نظر باید وارد حساب کاربری خود شوید
    ورود به حساب کاربری ثبت نام