مدونة علوم الحاسوب الالكترونية: تنسيق النص في HTML

المشاركة رقم:58

سلسلة احتراف برمجة صفحات الويب Web Pages Programming Tutorial

إتش تي إم إل 5 HTML5

_________________________________

منقول ومترجم للعربية من Moved and Translated to Arabic From

http://www.w3schools.com

تنسيق النص في HTML

HTML Text Formatting

- وسوم التنسيق في HTML

تستخدم HTML وسوم مثل و ، لإخراج التنسيق، مثل النص الغامق أو المائل.

وسوم HTML هذه تدعى وسوم التنسيق.
( لمزيد من وسوم التنسيق انظر إلى المرجع الموجود أسفل هذه المشاركة).

- HTML Formatting Tags

HTML uses tags like and for formatting output, like bold or italic text.

These HTML tags are called formatting tags .
(look at the bottom of this post for a complete reference).

---------------------------------------------------------

- مثال Example

<!DOCTYPE html>

<html>

<body>

This text is bold

This text is strong

This text is italic

This text is emphasized

<code>this is computer outputt</code>

This is subscript and superscript

</body>

</html>

عند تشغيل كود الـ HTML هذا، في متصفحك ستكون النتيجة كالتالي:

When you run this HTML code, in your browser the result will be like this:

---------------------------------------------------------

- غالباً الوسم يُقَدم مثل الوسم ، والوسم يُقَدم مثل الوسم .

ومع ذلك، هناك اختلاف في معنى هذه الوسوم:

أو يُعرف نص غامق أو مائل فقط.

أو يعني أنك تريد تقديم النص بطريقة يفهم المستخدم أنه مهم. اليوم، كل المتصفحات الرئيسية تقدم strong على أنه غامق و em على أنه مائل، إذا أراد أحد المتصفحات في يوم من الأيام أن يجعل النص بارز مع الميزة strong، قد يكون مخطط وليس غامق!

- Often renders as , and renders as .
However, there is a difference in the meaning of these tags:
 or defines bold or italic text only.
 or means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

---------------------------------------------------------

أمثلة Examples

- نص مُنسق مسبقا

كيفية التحكم في فواصل الأسطر والفراغات مع الوسم <pre>.

- Preformatted text
How to control the line breaks and spaces with the <pre> tag.

<!DOCTYPE html>

<html>

<body>

<pre>

This is

preformatted text.

It preserves both spaces

and line breaks.

</pre>

The pre tag is good for displaying computer code:

<pre>

for i= 1 to 10

print i

next i

</pre>

</body>

</html>

---------------------------------------------------------

- وسوم "مخرجات الكمبيوتر"

كيف تختلف "مخرجات الكمبيوتر" الوسوم التي سيتم عرضها.

- "Computer output" tags
How different "computer output" tags will be displayed.

<!DOCTYPE html>

<html>

<body>

<code>Computer code</code>

<kbd>Keyboard input</kbd>

<samp>Sample text</samp>

<var>Computer Variable</var>

Note These tages are often used to display computer/programming code.

</body>

</html>

---------------------------------------------------------

- العناوين

كيفية تعريف معلومات الاتصال للمؤلف/صاحب وثيقة HTML.

- Address
How to define contact information for the author/owner of an HTML document.

<!DOCTYPE html>

<html>

<body>

Written by W3school.com

<a href="mailto:us@example.org">Email us</a>

Address: Box 123, Ramallah

Phone: +12 34 56 78

</address>

</body>

</html>

---------------------------------------------------------

- الاختصارات والمختصرات

كيفية التعامل مع الاختصارات والمختصرات.

- Abbreviations and acronyms
How to handle abbreviations and acronyms.

<!DOCTYPE html>

<html>

<body>

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

Can I get this <abbr title="as soon as possibe">ASAP</abbr>?

The title attribute is used to show the spelled-out version when holding the mouse pointer over

the acronyc or abbreviation.

</body>

</html>

---------------------------------------------------------

- اتجاه النص

كيفية تغيير اتجاه النص.

- Text direction
How to change the text direction.

<!DOCTYPE html>

<html>

<body>

If your browser supports bi-directional override (bdo),the next line will be written from the

right to left (rtl):

<bdo dir="rtl">Here is some Arabic text</bdo>

</body>

</html>

---------------------------------------------------------

- الاقتباسات

كيفية التعامل مع الاقتباسات الطويلة والقصيرة

- Quotations
How to handle long and short quotations.

<!DOCTYPE html>

<html>

<body>

<h2>The blockquote Element</h2>

The blockquote element specifies a section that is quoted from another source.

Here is a quote from WWF's website:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation

organization, WWF works in 100 countries and supported by 1.2 million members in the United

States and close to 5 million globally.

</blockquote>

Note: Browsers usually indent blockquote elements.

<h2>The q Element</h2>

The q element defines a short quotation.

WWF's gola is to:

<q>Build a future where peoble live in harmony with nature.</q>

we hope they succeed.

Note: Browsers insert qoutation marks around the q element.

</body>

</html>

---------------------------------------------------------

- النص المحذوف و المُدرج

كيفية وضع علامة على النص المحذوف المُدرج.

- Deleted and inserted text
How to mark deleted and inserted text.

<!DOCTYPE html>

<html>

<body>

My favorite color is <del>blue</del> <ins>red</ins>!

Notice that browsers will strikethrough deleted text and underline inserted text.

</body>

</html>

---------------------------------------------------------

- تميز النص

كيفية وضع علامة / تسليط الضوء على النص

- Marked/Highlighted text
How to mark/highlight text.

<!DOCTYPE html>

<html>

<body>

Do not forget to buy milk today.

</body>

</html>

مدونة علوم الحاسوب الالكترونية

الصفحات

الاثنين، 8 سبتمبر 2014

تنسيق النص في HTML

ليست هناك تعليقات:

إرسال تعليق