آموزش قالب بندی در HTML

4 سال پیش

امتیاز دهید post

آموزش قالب بندی در HTML

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش قالب بندی در HTML خواهیم پرداخت.

اگر از پردازشگر كلمات استفاده می كنید، باید با توانایی ساختن متن بولد، مورب یا زیر خط آشنا باشید. اینها تنها سه گزینه از ده گزینه موجود برای نشان دادن چگونگی نمایش متن در HTML و XHTML هستند.

متن بولد

هر آنچه در عنصر … ظاهر می شود ، همانطور که در زیر نشان داده شده است ، با متن بولد نشان داده می شود:

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Bold Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word uses a &lt;b&gt;bold&lt;/b&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Bold Text Example</title>

</head>

<body>

The following word uses a bold typeface.

</body>

</html>

خروجی

The following word uses a bold typeface.

1	The following word uses a bold typeface.

متن مورب (ایتالیک)

هر آنچه در عنصر … ظاهر می شود به صورت ایتالیک مانند شکل زیر نمایش داده می شود –

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Italic Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word uses an &lt;i&gt;italicized&lt;/i&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Italic Text Example</title>

</head>

<body>

The following word uses an italicized typeface.

</body>

</html>

خروجی

The following word uses an italicized typeface.

1	The following word uses an italicized typeface.

متن زیرخط دار (آندرلاین)

هر چیزی که در عنصر … ظاهر شود ، مانند زیر با آندرلاین نشان داده می شود –

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Underlined Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word uses an &lt;u&gt;underlined&lt;/u&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Underlined Text Example</title>

</head>

<body>

The following word uses an underlined typeface.

</body>

</html>

خروجی

The following word uses an underlined typeface.

1	The following word uses an underlined typeface.

خط کشیدن روی متن

هر آنچه در عنصر <strike> … </strike> ظاهر می شود با خط روی متن نمایش داده می شود.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Strike Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word uses a &lt;strike&gt;strikethrough&lt;/strike&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Strike Text Example</title>

</head>

<body>

The following word uses a <strike>strikethrough</strike> typeface.

</body>

</html>

خروجی

The following word uses a strikethrough typeface.

1	The following word uses a strikethrough typeface.

فونت Monospaced

محتوای یک عنصر <tt> … </tt> با فونت Monospaced نوشته شده است. بیشتر فونت ها به عنوان فونت هایی با عرض متغیر شناخته می شوند زیرا حروف مختلف از عرض های مختلفی برخوردار هستند (به عنوان مثال حرف ‘m’ از حرف ‘i’ گسترده تر است). با این حال ، در یک فونت Monospaced، عرض هر حرف یکسان است.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Monospaced Font Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word uses a &lt;tt&gt;monospaced&lt;/tt&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Monospaced Font Example</title>

</head>

<body>

The following word uses a <tt>monospaced</tt> typeface.

</body>

</html>

خروجی

The following word uses a monospaced typeface.

1	The following word uses a monospaced typeface.

متن superscript

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

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Superscript Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word uses a &lt;sup&gt;superscript&lt;/sup&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Superscript Text Example</title>

</head>

<body>

The following word uses a superscript typeface.

</body>

</html>

خروجی

The following word uses a superscript typeface.

1	The following word uses a superscript typeface.

متن زیرنویس

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

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Subscript Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word uses a &lt;sub&gt;subscript&lt;/sub&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Subscript Text Example</title>

</head>

<body>

The following word uses a subscript typeface.

</body>

</html>

خروجی

The following word uses a subscript typeface.

1	The following word uses a subscript typeface.

متن درج شده

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

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Inserted Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;I want to drink &lt;del&gt;cola&lt;/del&gt; &lt;ins&gt;wine&lt;/ins&gt;&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Inserted Text Example</title>

</head>

<body>

I want to drink <del>cola</del> <ins>wine</ins>

</body>

</html>

خروجی

I want to drink cola wine

1	I want to drink cola wine

متن حذف شده

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

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Deleted Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;I want to drink &lt;del&gt;cola&lt;/del&gt; &lt;ins&gt;wine&lt;/ins&gt;&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Deleted Text Example</title>

</head>

<body>

I want to drink <del>cola</del> <ins>wine</ins>

</body>

</html>

خروجی

I want to drink cola wine

1	I want to drink cola wine

متن بزرگتر

محتوای عنصر <big> … </big> به اندازه زیر یک اندازه فونت بزرگتر از بقیه متن های اطراف آن نمایش داده می شود –

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Larger Text Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;The following word uses a &lt;big&gt;big&lt;/big&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Larger Text Example</title>

</head>

<body>

The following word uses a <big>big</big> typeface.

</body>

</html>

خروجی

The following word uses a big typeface

1	The following word uses a big typeface

متن کوچکتر

محتوای عنصر … به اندازه زیر یک اندازه فونت کوچکتر از بقیه متن های اطراف آن نمایش داده می شود –

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Smaller Text Example&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;The following word uses a &lt;small&gt;small&lt;/small&gt; typeface.&lt;/p&gt;
   &lt;/body&gt;

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Smaller Text Example</title>

</head>

<body>

The following word uses a small typeface.

</body>

</html>

خروجی

The following word uses a small typeface.

1	The following word uses a small typeface.

گروه بندی محتوای

عناصر <div> و به شما امکان می دهد چندین عنصر را برای ایجاد بخش ها یا زیرمجموعه های یک صفحه با هم جمع کنید.

به عنوان مثال، ممکن است بخواهید تمام پاورقی ها را در یک عنصر <div> در صفحه قرار دهید تا نشان دهد که همه عناصر موجود در آن عنصر <div> مربوط به پاورقی ها هستند. سپس می توانید یک سبک به این عنصر <div> وصل کنید تا با استفاده از مجموعه خاصی از قوانین سبک ظاهر شود.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Div Tag Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;div id = "menu" align = "middle" &gt;
         &lt;a href = "/index.htm"&gt;HOME&lt;/a&gt; | 
         &lt;a href = "/about/contact_us.htm"&gt;CONTACT&lt;/a&gt; | 
         &lt;a href = "/about/index.htm"&gt;ABOUT&lt;/a&gt;
      &lt;/div&gt;

      &lt;div id = "content" align = "left" &gt;
         &lt;h5&gt;Content Articles&lt;/h5&gt;
         &lt;p&gt;Actual content goes here.....&lt;/p&gt;
      &lt;/div&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Div Tag Example</title>

</head>

<body>

<a href = "/index.htm">HOME</a> |

<a href = "/about/contact_us.htm">CONTACT</a> |

<a href = "/about/index.htm">ABOUT</a>

</div>

<h5>Content Articles</h5>

Actual content goes here.....

</div>

</body>

</html>

خروجی

HOME | CONTACT | ABOUT
Content Articles
Actual content goes here.....

HOME | CONTACT | ABOUT

Content Articles

Actual content goes here.....

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

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Span Tag Example&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;This is the example of &lt;span style = "color:green"&gt;span tag&lt;/span&gt;
         and the &lt;span style = "color:red"&gt;div tag&lt;/span&gt; alongwith CSS&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Span Tag Example</title>

</head>

<body>

This is the example of span tag

and the div tag alongwith CSS

</body>

</html>

خروجی

This is the example of span tag and the div tag alongwith CSS

1	This is the example of span tag and the div tag alongwith CSS

این تگ ها معمولاً با CSS استفاده می شوند تا به شما امکان دهند سبکی را به بخشی از صفحه وصل کنید.

منبع.

لیست جلسات قبل آموزش برنامه نویسی HTML

امتیاز دهید post

نویسنده مطلب saber

آموزش قالب بندی در HTML

آموزش قالب بندی در HTML

متن بولد

متن مورب (ایتالیک)

متن زیرخط دار (آندرلاین)

خط کشیدن روی متن

فونت Monospaced

متن superscript

متن زیرنویس

متن درج شده

متن حذف شده

متن بزرگتر

متن کوچکتر

گروه بندی محتوای

لیست جلسات قبل آموزش برنامه نویسی HTML

دیدگاه شما

بدون دیدگاه

آموزش قالب بندی در HTML

متن بولد

متن مورب (ایتالیک)

متن زیرخط دار (آندرلاین)

خط کشیدن روی متن

فونت Monospaced

متن superscript

متن زیرنویس

متن درج شده

متن حذف شده

متن بزرگتر

متن کوچکتر

گروه بندی محتوای

لیست جلسات قبل آموزش برنامه نویسی HTML

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه