آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش HTML - قالب بندی متن
اگر از نرم افزاری مانند ورد قبلا استفاده کرده باشید حتما با قابلیت هایی مانند بولد یا همان پررنگ کردن متن ، ایتالیک و زیر خط آشنا هستید . در html نیز تگ هایی وجود دارند که امکان قالب بندی متن ها را مهیا می کنند
متن پررنگ یا بولد در HTML
هر نوشته ای که در داخل تگ b قرار بگیرد ، مانند شکل زیر به صورت پررنگ نمایش داده می شود -
مثال
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>مثال متن بولد</title>
</head>
<body>
<p>
کلمه ای که در ادامه متن وجود دارد
<b>یک کلمه بولد</b>
است
</p>
</body>
</html>کد بالا به این شکل نمایش داده می شود :
متن کج یا ایتالیک در HTML
هر متنی که داخل تگ i قرار بگیرد به صورت مورب نمایش داده می شود :
مثال
<!DOCTYPE html>
<html dir="rtl" >
<head>
<title>مثال متن ایتالیک</title>
</head>
<body>
<p>کلمه ای که در ادامه آمده یک
<i>کلمه ایتالیک شده</i>
است.</p>
</body>
</html>مثال بالا به شکل زیر نمایش داده می شود :
خط زیر متن در HTML
هر متنی که در داخل تگ u نوشته شود ، با یک خط در زیر آن نمایش داده می شود
مثال
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>مثال خط زیر متن</title>
</head>
<body>
<p>متنی که در ادامه آمده
<u>کلمه زیر خط دار</u>
می باشد.</p>
</body>
</html>نتیجه مثال بالا به این شکل نمایش داده می شود
خط روی متن در HTML
با استفاده از تگ strike بر بروی متنی که در داخل این تگ وجود دارد می توانیم خط بکشیم .
مثال
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>مثال خط کشیدن روی متن</title>
</head>
<body>
<p>متنی که در ادامه آورده شده
<strike>مثال خط کشیدن روی متن</strike>
می باشد.</p>
</body>
</html>کد بالا به شکل زیر نمایش داده می شود
بالانویس در html
محتوایی که در داخل تگ sup قرار بگیرد ، بصورت بالا نویس نمایش داده می شود . نمونه بالا نویس در توان ریاضی استفاده می شود .
مثال
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>مثال متن بالانویس</title>
</head>
<body>
<p>متن رو به رو
<sup>یک متن بالا نویس</sup>
می باشد.</p>
</body>
</html>این کد به شکل زیر نمایش داده می شود
متن پایین نویس یا اندیس در HTML
برای درج اندیس در HTML از تگ sub به شکل زیر استفاده می کنیم
مثال
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>مثال اندیس در اچ تی ام ال</title>
</head>
<body>
<p>متنی که در ادامه متن آمده
<sub>یک اندیس یا متن پایین نویس</sub>
می باشد.</p>
</body>
</html>این کد به شکل زیر نمایش داده می شود
درج و حذف متن در HTML
متن درج شده در HTML با استفاده از تگ ins تعریف می شود و به آن معناست که متنِ درون تگ ins به محتوای موجود الحاق شده است . نحوه نمایش تگ ins در اکثر مرورگرها مشابه با تگ u می باشد و با یک خط زیر نمایش داده می شود .
متن حذف شده در HTML با استفاده از تگ del تعریف می شود و به آن معناست که متن درون تگ del از محتوای موجود حذف شده است . نحوه نمایش تگ del در اکثر مرورگرها مشابه با تگ strike می باشد و با کشیدن خط روی متن نمایش داده می شود .
معمولا تگ های del و ins در کنار هم استفاده می شود . برای مثال از این تگ ها در فروشگاه های انلاین جهت نمایش تخفیف با حذف قیمت قبلی و درج قیمت جدید در کنار آن استفاده می شود .
مثال
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>مثال متن درج شده یا الحاقی</title>
</head>
<body>
<p>
قیمت این محصول
<del>10000</del>
<ins>8000</ins>
تومان است</p>
</body>
</html>نتیجه این کد به شکل زیر نمایش داده می شود
سوالی که پیش می آید این است که اگر نحوه نمایش تگ u و ins یکسان است پس چه ضرورتی برای وجود دو تگ وجود دارد ؟ همچنین تفاوت تگ u و تگ ins در html چیست ؟
باید گفت ، ins یک تگ معنایی است یعنی عنصری را نشان می‌دهد که درج شده است در حالی که u دستورالعملی را به مرورگر می‌دهد که عنصر را به صورت زیر خط دار نشان دهد. همین پاسخ در مورد تفاوت تگ strike و تگ del هم وجود دارد .
هر چند اکثر مرورگرها این کد ها را به صورت یکسان نمایش می دهند ، اما با استفاده از برخی تکنولوژی ها و زبان ها تغییر نحوه نمایش این تگ ها امکانپذیر است .
همچنین نحوه برخورد موتوهای جستجو و ربات ها صفحه خوان نیز در برخورد با این تگ ها ممکن است متفاوت باشد
بزرگتر کردن متن در HTML
اگر متنی درون تگ big قرار بگیرد . اندازه فونت متن ، یک واحد بزرگتر از متن اطراف نمایش داده می شود .
مثال
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>مثال متن بزرگتر</title>
</head>
<body>
<p>کلمه ای که در ادامه آمده
<big>بزرگتر</big>
می باشد.</p>
</body>
</html>مثال بالا به شکل زیر در مرورگر نمایش داده می شود
کوچک تر کردن متن در HTML
اگر متنی درون تگ small قرار بگیرد . اندازه فونت متن ، یک واحد کوچکتر از متن اطراف نمایش داده می شود .
مثال
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>مثال متن بزرگتر</title>
</head>
<body>
<p>کلمه ای که در ادامه آمده
<small>کوچکتر</small>
می باشد.</p>
</body>
</html>این کد نتیجه زیر را ایجاد می کند
گروه بندی مطالب
عناصر <div> و <span> به شما این امکان را می دهند صفحه وب را به قسمت های مختلف تقسیم کنید و چندین عنصر را با هم گروه بندی کنید تا بخش های مختلف یا زیربخش های یک صفحه را ایجاد نمایید .
برای مثال تمام لینک های موجود در منوی صفحه را در یک div قرار دهید و با صفت id که در درس مربوط به صفت ها معرفی شد ، نام آن را menu بگذارید .
گروه بندی محتوا زمانی بسیار کارآمد خواهد بود که از زبان های دیگر مانند css یا جاوااسکریپت در کنار HTML استفاده خواهید کرد . با استفاده از آن تکنولوژی ها مثلا خواهید توانست با کلیک بر روی یک عنصر گروهی از عناصر را حذف کنید یا رنگ آن را تغییر دهید .
مثال
در مثال زیر تگ a برای ایجاد لینک به کار می رود که در درس های آینده یاد خواهید گرفت
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>مثال گروه بندی و تقسیم بندی صفحه</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">صفحه نخست</a> |
<a href = "/about/contact_us.htm">تماس با ما</a> |
<a href = "/about/index.htm">درباره ما</a>
</div>
<div id = "content" align = "right" >
<h5>محتوای اصلی</h5>
<p>ادامه محتوا در این بخش قرار می گیرد</p>
</div>
</body>
</html>مثال بالا در مرورگر به شکل زیر نمایش داده می شود
از طرف دیگر، عنصر <span> را می توان فقط برای گروه بندی عناصر درون خطی استفاده کرد. بنابراین، اگر بخشی از یک جمله یا پاراگراف دارید که می‌خواهید با هم در یگ گروه قرار دهید ، می‌توانید از عنصر <span> به صورت زیر استفاده کنید.
مثال
در مثال زیر برای رنگ دهی به متن از کد های css استفاده شده که در درس های مربوط به css ، خواهید آموخت
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>مثال تگ span</title>
</head>
<body>
<p>
این یک مثال از تگ
<span style = "color:blue">span</span>
و یک تگ دیگر
<span style = "color:red">span</span>
استفاده می شود
</p>
</body>
</html>کد بالا نتیجه زیر را ایجاد می کند
