متن ها در HTML ,و طراحی سایت

در این مقاله در مورد نکات زیر بحث می کنیم:

  • سرفصل ها و پاراگراف ها
  • پررنگ (Bold)، اریب (Italic) کردن نوشته ها
  • نشانه گذاری ساختاری و معنایی

زمانی که در طراحی سایت یک صفحه وب را ایجاد می کنید، نیازمند اضافه کردن تگ ها به محتوای صفحه هستید (که به عنوان نشانه گذاری شناخته شده اند). این تگ ها حاوی معانی خاصی برای مرورگر هستند، و باعث ارائه بهتر صفحه نمایش می شوند.

در این مقاله تمرکز ما روی نحوه اضافه کردن نشانه گذاری به متن در صفحات می باشد، و شما موارد زیر را یاد می گیرید:

  • نشانه گذاری ساختاری: المان هایی که شما می توانید برای بیان سرفصل ها و پاراگراف ها استفاده کنید.
  • نشانه گذاری معنایی: که اطلاعات بیشتری را در مورد نوشته ها فراهم می کند؛ مانند مکان هایی که باید روی متن خاصی تأکید شود و شما آن را در نقل قول قرار می دهید.

سرتیترها

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

HTML دارای 6 سطح از سرتیتر است:

<h1>: برای سرفصل های مهم استفاده می شود.

<h2>: به عنوان زیرشاخه سرفصل ها استفاده می شود.

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

مرورگرها محتویات موجود در سرفصل ها را با اندازه های مختلف نمایش می دهند. محتوای تگ <h1> بزرگتر از همه و محتوای تگ <h6> کوچکتر از همه می باشد. اندازه دقیقی که هر سرفصل می تواند نشان دهد بستگی به مرورگر می تواند کمی متفاوت باشد. کاربران همچنین می توانند اندازه متن را در مرورگر خود تنظیم کنند. شما در ادامه این سری مقالات در مورد طراحی سایت خواهید دید که چگونه اندازه متن، رنگ آن و نوع فونت های مورد استفاده در صفحه توسط CSS قابل کنترل و تنظیم است.

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

 <h1>This is a Main Heading</h1>

<h2>This is a Level 2 Heading</h2>

<h3>This is a Level 3 Heading</h3>

<h4>This is a Level 4 Heading</h4>

<h5>This is a Level 5 Heading</h5>

<h6>This is a Level 6 Heading</h6>

C:\Users\acc\Desktop\a z\14.png

پاراگراف ها

<p>

  6 روش برای افزایش سرعت سایت (آپدیت 2018)

به منظور ایجاد پاراگراف، باید متن مورد نظر را بین تگ های آغازین <p> و پایانی </p> قرار می گیرد. به طور پیش فرض یک مرورگر هر پاراگراف را در یک خط جدید نشان می دهد که باعث ایجاد فاصله با پاراگراف های قبلی و یا بعدی می شود.

به عنوان مثال کد زیر را در نظر بگیرید:

<p> A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line. </p>

<p> Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading there will be one or more paragraphs. </p>

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

ضخیم (بولد) و اریب (ایتالیک)

<b>

با قرار دادن کلمات بین تگ های <b> و </b> می توانیم کلمات را ضخیم کنیم. بعنوان مثال در متن زیر ما با استفاده از المان <b> بخشی از متن که کلمات bold و key features می باشند را ضخیم می کنیم:

 <p> This is how we make a word appear <b> bold. </b> </p>

<p> Inside a product description you might see some <b> key features </b> in bold. </p>

<i>

با قرار دادن نوشته بین تگ های <i> و </i> می توانیم آن را اریب کنیم. همانند قسمت های italic ، Solanum teberosum و Endeavour در متن زیر:

 <p> This is how we make a word appear <i> italic </i>. </p>

<p> It's a potato <i> Solanum teberosum </i>. </p>

<p> Captain Cook sailed to Australia on the <i> Endeavour </i>. </p>

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

متن زیرنویس (superscript) و متن بالانویس (subscript)

<sup>

المان <sup> برای قسمت هایی از متن مانند پسوند تاریخ ها یا علامات ریاضی مثل زمانی که یک عدد به توان عدد دیگری می رسد(x2)، استفاده می شود.

<sub>

این المان برای کاراکترهایی که باید بصورت زیرنویس باشند مثل اندیس که در فرمول های شیمیایی مانند H2O نوشته می شود.

  لینک های ایمیل در طراحی سایت

به کدهای زیر و نتیجه ای که در مرورگر می دهند دقت کنید:

 <p> On the 4<sup>th</sup> of September you will learn about E=MC<sup>2</sup>. </p>

<p> The amount of CO<sub>2</sub> in the atmosphere grew by 2ppm in 2009<sub>1</sub>. </p>

فضای خالی (white space)

به منظور خواناتر کردن کدها، برخی مواقع طراحان سایت فضاهای خالی اضافه می کنند و یا برخی المان ها را در خطوط جدید شروع می کنند. زمانی که چندین فاصله در کنار هم قرار می گیرند، تنها یکی از آن ها نمایش داده می شوند. و به همین ترتیب اگر به خط جدید بروید نیز آن را فقط به عنوان فضای خالی در نظر گرفته می شود، به این عملکرد فروپاشی فضای خالی (white space collapsing) گفته می شود.

با توجه به کد زیر متوجه این عملکرد خواهید شد:

 <p>The moon is drifting away from Earth. </p>

<p>The moon is drifting away from Earth. </p>

<p>The moon is drifting away from

Earth. </p>

شکست خط (line breaks) و خط افقی (horizontal rules)

<br />

همانطور که قبلاً مشاهده نمودید، مرورگر به طور خودکار هر پاراگراف را از خط جدید شروع می کند، اما اگر بخواهید درون یک پاراگراف به خط جدید بروید می توانید از المان <br /> استفاده کنید.

<p>The Earth<br />gets one hundred tons heavier every day<br />due to falling space dust. </p>

<hr />

برای ایجاد شکاف بین موضوعات مختلف – مانند تغییر موضوع در یک کتاب یا صحنه جدید در یک بازی – شما می توانید خط افقی با استفاده از المان <hr /> ایجاد کنید.

 <p>Venus is the only planet that rotates clockwise. </p>

<hr />

<p>Jupiter is bigger than all the other planets combined. </p>

برخی المان ها همانند <br /> و <hr /> دارای تگ آغازین و پایانی نیستند، و بصورت متفاوتی نوشته می شوند. که به آن ها المان های (empty elements) خالی گفته می شود.

ادامه مبحث متن ها در HTML در مقاله بعد بیان می شود.

به وبلاگ توسعه دهندگان وب خوش آمدید .

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