تگ های قالب بندی متن قسمت سه

تگ های قالب بندی متن قسمت سه

تگ font در HTML

تگ Font چیست ؟ چگونه می‌تونیم Font متن را سفارشی سازی کنیم؟ از فونت در html چطور می‌تونیم استفاده کنیم؟ چگونه بدون استفاده از CSS فونت متن را تغییر دهیم؟ نحوه تغییر فونت فارسی در html ، تغییر رنگ متن در html و تغییر رنگ فونت در html چگونه است؟ در این مقاله به آموزش تگ font می‌پردازیم.

این تگ در HTML5 پشتیبانی نمی‌شود، بخش جایگزین تگ Font را مشاهده کنید.

• 1 معرفی تگ Font
• 2 صفت های تگ Font
  • 2.1 صفت size
• 3 سی اس اس ( CSS ) جایگزینی برای تگ Font در HTML5
  • 3.1 ویژگی Font-face برای معرفی فونت اختصاصی
  • 3.2 ویژگی Font-Family
  • 3.3 تغییر رنگ در html
• 4 نکات تکمیلی تگ font

معرفی تگ Font

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

با استفاده از تگ font می‌توانیم رنگ، اندازه و فونت متون و سایر عناصر متنی موجود در در HTML را تغییر دهیم این تگ که در دسته تگ های قالب بندی متن جای می گیرد از صفت ھای زیر پشتیبانی می‌کند.

صفت های تگ Font

صفت face

از این صفت برای تغییر فونت متون در HTML استفاده می‌شود. یعنی در صورتی که بخواهیم متنی را با فونت دلخواه نمایش دهیم از این صفت به همراه تگ <font> استفاده می نماییم . این صفت لیستی از فونت ھا که با “,” (کاما) از هم جدا شده اند را به عنوان ورودی می‌پذیرد و در صورتی که اولین فونت بر روی سیستم کاربر نصب نبود فونت دوم و اگر فونت دوم نصب نبود فونت سوم و … بر روی متن اعمال می‌شود .
برای درک بهتر کاربرد صفت face در طراحی سایت به مثال زیر توجه کنید :

<p> 
    <font face='Tahoma,Arial,Serif'> mizfa.com : Web Design </font>
</p>

صفت size

از صفت size برای تغییر اندازه متون در HTML استفاده می‌شود و به دو صورت زیر می توان این صفت را مقدارهی نمود:

• مقدار مطلق : مقادیری بین 1 تا 7 .
• مقدار نسبی : مقادیری بین 7- تا 7+ که در این صورت اندازه فونت نسبت به اندازه فونت مشخص شده در تگ </basefont> سنجیده خوھد شد. (این تگ را در جلسات آینده معرفی خواھیم کرد.)

صفت color

از این صفت برای تغییر رنگ یک متن استفاده می‌شود. این صفت مقداری از انواع رنگ ھا را به عنوان ورودی می‌پذیرد و رنگ متن را مشخص می‌نماید .
برای درک بهتر صفت به مثال زیر توجه نمایید :

<p> 
   <font face='Tahoma, Arial,"Times New Roman"' size='+2' color='#ff0000'> mizfa.com : Web Design</font> 
</p>

سی اس اس ( CSS ) جایگزینی برای تگ Font در HTML5

برای قرار دادن فونت اختصاصی در CSS از ویژگی font-face استفاده می‌کنیم. در مثال زیر فونت Vazir که از سری فونت های آزاد و متن باز ایرانی است را معرفی میکنیم.

@font-face {
font-family: "Vazir";
src: url("/fonts/Vazir-web.woff2") format("woff2"),
url("/fonts/Vazir-web.woff") format("woff");
}

توضیح مثال :

خط اول ) در خط اول ما ویژگی Font-Face را با استفاده از یک ات ساین (@) مشخص کردیم. (به این صورت : @font-face )

خط دوم ) با استفاده از Font-Family نام مورد نظرمان را برای فونت مشخص می‌کنیم. اگر اسم فونت دارای فاصله است، می‌توانید از کوتیشن استفاده کنید.

خط سوم و چهارم ) در خط سوم ابتدا با استفاده از Src به سی اس اس می‌فهمانیم که می‌خواهیم مسیر فونت ‌ها را مشخص کنیم و سپس با استفاده از url() محل قرار گیری را مشخص می‌کنیم و در نهایت با استفاده از format() فرمت هر فونت را مشخص می‌کنیم. برای قرار دادن چندین فرمت از comma « , » استفاده می‌کنیم.

ویژگی Font-Family

با استفاده از این ویژگی می‌توانید از بین فونت های عمومی و همچنین فونت‌هایی که خودتان معرفی کردید، یکی را برای بخشی انتخاب کنید. به عنوان نمونه در مثال زیر با استفاده از font-family ، تمامی تگ های p درون صفحه را به فونت Vazir که در مثال گذشته معرفیش کردیم، تغییر داده ایم.

p{
font-family: "Vazir";
}

همانطور که مشاهده می‌کنید، در خط اول تگ p را معرفی کردیم و سپس در خط دوم با استفاده از ویژگی font-family فونت جدید را مشخص کردیم.

تغییر رنگ در html

خب شاید براتون سوال پیش بیاد که کد تغییر رنگ متن در html چیه؟ یا مثلا تگی به عنوان تگ رنگ در html داریم؟ قبل از تکمیل این مقاله بهتر هست که با نحوه تغییر رنگ متون در HTML هم آشنا بشیم.

p{
color:red;
}

در مثال بالا به جای تگ p می‌توانید هر تگ یا کلاس دیگری را قرار دهید و به جای رنگ وارد شده می‌توانید رنگ های دیگر و کد های رنگی مختلفی را استفاده کنید که در بخش رنگ ها در آموزش CSS با آنها آشنا می‌شویم. پس کد html رنگ متن را هم مورد بررسی قرار دادیم.

نکات تکمیلی تگ font

• اگر می‌خواھید از فونتی استفاده کنید که نام آن دارای فاصله (space) نیز ھست باید نام فونت را در داخل دابل کوتیشن (” “) قرار دھید مانند مثال زیر :

   <font face='Tahoma', "Times New Roman">

• تگ <font> در HTML5 پشتیبانی نمی شود و توصیه می‌شود به جای استفاده از این تگ از CSS برای استایل دهی متون استفاده کنید.

تگ center در HTML

• 1.1 معرفی تگ center
• 1.2 نکات تکمیلی در مورد تگ center

معرفی تگ center

از تگ center برای وسط چین کردن عناصر در HTML استفاده می‌شود . جهت استفاده از این تگ تنها کافی است تگ باز <center> را قبل و تگ بسته <center/> را بعد از عنصر مورد نظرتان قرار دهید .
به منظور درک بهتر کاربرد تگ center در طراحی سایت به مثال زیر توجه کنید :

<center> 
        <p>
           آموزش طراحی سایت 
        </p>
</center>

توجه : تگ center در HTML5 پشتیبانی نمی‌شود توصیه می‌شود که برای وسط چین متن و سایر عناصر در طراحی سایت از ویژگی های CSS استفاده شود.

نکات تکمیلی در مورد تگ center

• تگ center توسط تمامی مرورگرها پشتیبانی می‌شوند.

تگ dfn در HTML

تگ مفهومی dfn که از عبارت HTML Definition element میاد رو قصد داریم در این مقاله به شکل بسیار کامل و با مثال درباره تگ dfn که قبل از html5 هم وجود داشت بپردازیم. در ادامه آموزش HTML در فرازنتورک همراه باشید.

• 1 تگ dfn در HTML5
  • 1.1 معرفی تگ dfn
  • 1.2 صفت های تگ dfn
  • 1.3 تفاوت تگ abbr و dfn
  • 1.4 استفاده از تگ dfn در لیست‌های توضیحی
• 2 مثال‌های کاربردی تگ dfn
  • 2.1 مثال استاندارد استفاده از تگ dfn
  • 2.2 مثال استفاده از abbr در کنار dfn
  • 2.3 نمونه لیست توضیحی با استفاده از dfn
• 3 نکات تکمیلی تگ dfn

تگ dfn در HTML5

معرفی تگ dfn

تگ <dfn> یک تگ تعریفی است و زمانی که بخواهیم یک عبارت تعریفی در صفحه داشته باشیم از این تگ استفاده می‌کنیم. بعضی از مرورگرها متنی که در داخل این تگ قرار می‌گیرد را به صورت italic نمایش می‌دهند. البته شما می‌توانید با CSS استایل دلخواهی را برای این تگ تعریف کنید.

<p>
    <dfn>HTML</dfn> is the standard markup language for creating web pages.
</p>

صفت های تگ dfn

• صفت title
  تگ dfn دارای صفت title است، در صورتی که از صفت title برای تگ dfn استفاده کنید هنگامی که کاربر کلیک موس خود را بر روی متن درون تگ dfn میبرد مقدار تعریف شده در تگ title به او نمایش داده می‌شود. به مثال زیر توجه کنید :
  

 <p>
    <dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.
</p>

تفاوت تگ abbr و dfn

تگ dfn یک تگ تعریفیست اما تگ abbr برای مخفف سازی استفاده می‌شود. اگر بخواهیم مخفف کلمه Search Engine Optimization را بنویسیم که SEO است را بنویسیم و هنگامی که کاربر روی آن نگاه می‌دارد معادل کامل SEO نمایش داده شود، از تگ abbr استفاده می‌کنیم. حال اگر بخواهیم در یک پاراگراف SEO را تعریف کنیم از تگ dfn استفاده می‌کنیم و قبل و بعد از عبارت SEO می‌توانیم و تگ dfn تعریفی در رابطه سئو داشته باشیم.

استفاده از تگ dfn در لیست‌های توضیحی

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

مثال استاندارد استفاده از تگ dfn

مثال زیر یک نمونه استاندارد از استفاده تگ dfn می‌باشد. برای مشاهده بهتر در نمونه بخش تگ dfn‌ را به صورت توپر مشخص کردیم.

<p>The <strong>HTML Definition element</strong>
(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is
used to indicate the term being defined within the context of a
definition phrase or sentence.</p>

<p>faraznetwork Technical Seo and WebDesign Agancy </p>
<p>faraznetwork Technical Seo and WebDesign Agancy </p>
<p>faraznetwork Technical Seo and WebDesign Agancy </p>
<p>faraznetwork Technical Seo and WebDesign Agancy </p>

نمونه لیست توضیحی با استفاده از dfn

با اینکه در آینده لیست‌های توضیحی را با همدیگر یاد‌ خواهیم گرفت، یک نمونه از لیست‌های توضیحی که در آن از تگ dfn استفاده شده است را برایتان قرار دادم، در این نمونه آیتم‌ها با تگ dfn معرفی شده‌اند و توضیحات آیتم‌ها با تگ dd معرفی شده‌اند.

<h4>faraznetwork</h4>
<dl>
<dt><dfn>Definition List</dfn></dt>
<dd>A list of terms and their definitions/descriptions.</dd>
<dt><dfn>Ordered List</dfn></dt>
<dd>A numbered list.</dd>
<dt><dfn>Unordered List</dfn></dt>
<dd>An unnumbered list.</dd>
</dl>

نکات تکمیلی تگ dfn

• تگ dfn معمولا درون تگ p، تگ section یا فهرست توصیفی ( معمولا dt یا dd ) قرار می‌گیرد .
• تگ dfn یک عنصر درون خطی یا inline block است.
• این تگ توسط تمامی مرورگرها پشتیبانی می‌شود.

تگ address در HTML

• 1 معرفی تگ address
• 2 اهمیت تگ address در سئو سایت
• 3 نکات تکمیلی تگ address

معرفی تگ address

با استفاده از تگ <address> در HTML می‌توانیم اطلاعات تماس نویسنده یا صاحب یک سند ، مقاله و یا یک وب سایت را تعریف کنیم. اطلاعاتی که درون این تگ قرار می‌گیرد به بازدیدکنندگان سایت کمک میکند تا به راحتی بتوانند با صاحب وبسایت یا صاحب یک سند یا مقاله ارتباط برقرار کنند.
مثلا شما می‌توانید در قسمت تماس با ما در وبسایت خود , برای درج آدرس شرکت از این تگ استفاده نمایید . متن درون این تگ به صورت italic (مورب) نمايش داده می‌شود و اکثر مرورگر ها به ابتدا و انتهای عنصر آدرس یک خط فاصله اضافه می‌کنند.

جهت درک بهتر کاربرد تگ address در طراحی سایت به مثال زیر توجه کنید:

<address> 
         Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
         Visit us at:<br>
         Example.com<br>
         Box 564, Disneyland<br>
         USA 
</address>

مثال فوق را در یک ادیتور مانند notepad و یا ++notepad کپی کرده و آن را با پسوند htm و یا html ذخیره کنید . با کلیک بر روی فایل ایجاد شده ، می‌توانید نتیجه کد بالا را در مروگر مشاهده کنید. نتیجه کد به صورت زیر خواهید بود:

اهمیت تگ address در سئو سایت

تگ address از نظر سئو حائز اهمیت می‌باشد شما با استفاده از تگ address قادر خواهید بود که یک پیام قوی به موتورهای جستجو در مورد محل کسب و کارتان ارائه کنید .

نکات تکمیلی تگ address

• درصورتی که تگ <address> درون تگ <body> قرار بگیرد، اطلاعات مربوط به تماس آن سند را نشان می‌دهد.
• چنانچه تگ <address> درون تگ <article> قرار گیرد، اطلاعات مربوط به تماس آن مقاله را نشان می‌دهد.
• از تگ <address> نباید برای آدرس پستی استفاده شود، مگر این که بخشی از اطلاعات ، مربوط به تماس باشد.
•  تگ <address> به طور معمول در کنار سایر اطلاعات در بخش <footer> سایت قرار می‌گیرد.
• این تگ یک عنصر Block Level یا بلاکی می‌باشد.
• تگ address توسط تمامی مرورگرها پشتیبانی می‌شود.

عناصر inline level و block level در HTML

1 عناصر inline و block در HTML

• 1.1 عناصر inline block (درون خطی)
• 1.2 عناصر block level (بلاکی)

عناصر inline و block در HTML

عناصر inline block (درون خطی)

این دسته از عناصر تنها به اندازه‌ی محتوای درون خود فضا اشغال می‌کنند تگ span ، تگ img ، تگ em ، تگ a و … از جمله عناصر inline level (درون خطی) به شمار می‌روند.

عناصر درون خطی را می‌توان در یک سطر کنار هم قرار داد برای درک بهتر به مثال زیر توجه نمایید .در این مثال از تگ span و تگ em که از جمله عناصر درون خطی هستند استفاده شده است.

<em>
    آمـوزش طراحـی سایت 
</em>
<span> 
    در سایت فرازنتورک 
</span

عناصر block level (بلاکی)

این دسته از عناصر یک سطر را اشغال می‌کنند تگ p ، تگ div ، تگ form و تگ li و … از جمله عناصر block level (بلاکی) به شمار می‌روند.
برای درک بهتر عناصر block level به مثال زیر توجه کنید :

<p>  
   آموزش طراحـی سایت 
</p>

کدهای مثال بالا را درون notepad کپی کرده و سپس فایل را با پسوند htm یا html ذخیره نمایید سپس بر روی فایل کلیک راست کرده و اشاره گر موس خود را بر روی گزینه open with ببرید و مرورگر مورد نظر خود را برای نمایش کد html انتخاب کنید. حال شما در صفحه مرورگر خود نتیجه‌‌ي کد وارد شده را مشاهده خواهید کرد پس از مشاهده عبارت ” آموزش طراحی سایت ” روی صفحه مرورگر ، همانند تصویر زیر بر روی صفحه مرورگر راست کلیک کرده و گزینه‌ی Inspect Element را انتخاب کنید.

همانند تصویر زیر صفحه‌‌‌‌‌‌‌‌‌‌ي Inspect Element در پایین و یا کنار صفحه مرورگر برای شما باز می شود و شما می توانید در این قسمت کدهای خود را مشاهده نمایید بر روی آموزش طراحی سایت که درون تگ p قرار گرفته است کلیک نمایید حال به صفحه مرورگر خود نگاه کنید تمامی فضایی که با رنگ آبی مشخص شده است به تگ p که یک عنصر بلاکی است اختصاص داده شده است و هیچ عنصر دیگری نمی تواند در این فضا قرار بگیرد .

خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم

مطالب مرتبط:

1-تگ های قالب بندی متن قسمت اول

2- تگ های قالب بندی متن قسمت دوم 

3-صفت ها در HTML قسمت اول

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: راحله تبریزی