آموزش HTML — تگ های Text Formatting – مرور دستورات
بعضی وقت ها ما نیاز پیدا میکنیم که حالات خاصی را روی متن خود اعمال کنیم. برای مثال فونتمان را عوض کنیم یا متن را bold کنیم. برای این کار از تگ های مختلفی که در زبان html رایج است استفاده می کنیم.
معرفی تگ های Text Formatting
بعضی وقت ها ما نیاز پیدا میکنیم که حالات خاصی را روی متن خود اعمال کنیم. برای مثال فونتمان را عوض کنیم یا متن را bold کنیم. برای این کار از تگ b که به معنای بولد است استفاده می کنیم.
<html>
<head>
</head>
<body>
text <b>text</b>
</body>
</html>
یا برای ایتالیک کردن متن خود از تگ <i> استفاده می کنیم.
<html>
<head>
</head>
<body>
text <i>text</i>
</body>
</html>
برای زیرخط دار کردن متن خود از تگ <u> استفاده می کنیم.
<html>
<head>
</head>
<body>
text <u>text</u>
</body>
</html>
در html تگی وجود دارد به نام strong که از نظر ظاهری شبیه به تگ b است، اما یک تگ معنایی است و این تگ برای موتور های جستجوگر و در سئو اهمیت دارد و به شکل زیر استفاده می شود.
<html>
<head>
</head>
<body>
text <strong>text</strong>
</body>
</html>
در html تگ معنایی دیگری وجود دارد که به تگ em یا تگ تاکید معروف است و در موتور های جستجوگر به عنوان تگ معنایی مورد استفاده قرار می گیرد و به صورت زیر مورد استفاده قرار می گیرد.
<html>
<head>
</head>
<body>
text <em>text</em>
</body>
</html>
برای افزایش سایز فونت خود در html از تگ big استفاذه می کنیم.
<html>
<head>
</head>
<body>
text<big>text</big>
</body>
</html>
برای کاهش سایز فونت خود در html از تگ small استفاده می کنیم.
<html>
<head>
</head>
<body>
text <small>text</small>
</body>
</html>
تگی به نام del در html وجود دارد که بیشتر برای فروشگاه های اینترنتی مورد استفاده قرار می گیرد. برای مثال، شما یک فروشگاه اینترنتی تأسیس کرده اید و میخواهید ۲۰ هزار تومان از قیمت محصول هایتان را تخفیف بدهید. برای این کار شما از تگ del و تگ ins استفاده می کنید.
<html>
<head>
</head>
<body>
text <del>80000</del><ins>60000</ins>
</body>
</html>
برای highlight متن خود در html از تگ mark استفاده می کنیم.
<html>
<head>
</head>
<body>
text <mark>text</mark>
</body>
</html>
گاهی ما نیاز داریم متن هایی مثل فرمول های ریاضی مثل x2 را در html بنویسیم. در این حالت از تگ sup یا تگ بالا نویس استفاده می کنیم. یا می خواهیم متن های زیر نویس مثل h2o را بنویسیم برای این کار از تگ sub استفاده می کنیم.
<html>
<head>
</head>
<body>
x <sup>2</sup> <br />
h<sub>2</sub>o <br />
</body>
</html>
گاهی ما گفت و گویی از شخصی داریم و می خواهیم آن را در سایتمان قرار دهیم. برای این کار از تگ Quotation استفاده می کنیم برای این کار این کلمه را مخفف کرده و از کلمه q استفاده می کنیم.
<html>
<head>
</head>
<body>
text <q>text</q>
</body>
</html>
گاهی ما مقاله ای را می خواهیم در سایتمان قرار دهیم که مرجع و منبع آن سایت دیگری است و می خواهیم منبع آن را مشخص کنیم برای این کار از تگ blockquote استفاده می کنیم.
<html>
<head>
</head>
<body>
< blockquote cite=”http://سایت مورد نظر ”>مقاله یا جمله مورد نظر</ blockquote >
</body>
</html>
در html تگی به عنوان abbr داریم که میتوان با استفاده از این تگ یک title برای متن های مخفف ایجاد کرد.
برای مثال html مخفف Hyper Text Markup Language است. ما می خواهیم وقتی شخصی اشاره گر ماوس را بر روی کلمه html بیاورد Hyper Text Markup Language به آن نشان داده شود. برای این کار به شکل زیر عمل می کنیم:
<html>
<head>
</head>
<body>
text <abbr title=” Hyper Text Markup Language”>html</abbr>
</body>
</html>
در html تگی وجود دارد که برای آدرس دهی (مانند شماره تماس – محل مورد نظر- آدرس ایمیل و…) استفاده می شود این تگ address نام دارد و به شکل زیر از آن استفاده می شود.
<html>
<head>
</head>
<body>
<address>اطلاعات مورد نظر</address>
</body>
</html>
در html تگ دیگری وجود دارد به نام .cite این تگ می تواند برای شما عنوان یک چیز را مشخص کند، مانند عنوان کتاب یا پروژه یا برنامه. برای مثال هشت کتاب اثر سهراب سپهری در اینجا هشت کتاب عنوان است. برای نمایش چنین متن هایی از این تگ استفاده می شود.
<html>
<head>
</head>
<body>
<cite>هشت کتاب</cite>اثری از سهراب سپهری
</body>
</html>
اگر ما در html بخواهم کدی را نمایش بدهیم می توانیم از تگ code استفاده بکنیم.
<html>
<head>
</head>
<body>
<code> کد مورد نظر</code>
</body>
</html>
ما در html تگی داریم به نام var که میتواند فرمول های ریاضی را مشخص بکند. برای استفاده از تگ var به صورت زیر عمل می کنیم.
<html>
<head>
</head>
<body>
<var>H<sub>2</sub>o</var>
</body>
</html>
مجموعه: اخبار و تازه ها
Loading...