📘 اليوم الثاني · تنسيق النص

🎯 Text Formatting

👩‍🏫 من إعداد: فريق عمل جامعة بنها 🧑‍🏫 درس تفاعلي

🎯 أهداف الدرس

يتعرف على عناوين HTML (h1 إلى h6).
يكتب فقرات نصية باستخدام .
يستخدم فواصل الأسطر .
يُنسق النص بالخط العريض والمائل والمسطر.
يدرك استخدام علامات الاقتباس وعناصر الكود.
يدخل الرموز الخاصة في الصفحة.
يطبق كل ما تعلمه في تصميم مقال قصير.

🔤 أولاً: العناوين (Headings)

تُستخدم العناوين لتنظيم المحتوى وإبراز الأقسام المهمة. هناك 6 مستويات من العناوين:

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
            

h1: Main Heading

h2: Sub Heading

h3: Smaller Heading

h4: Heading

h5: Heading

h6: Heading

💡 ملاحظة: h1 هو الأكبر والأهم، ويستخدم للعنوان الرئيسي للصفحة. الباقي للعناوين الفرعية حسب الأهمية.

📝 ثانياً: الفقرات (Paragraphs)

تُستخدم الفقرات لكتابة النصوص الطويلة. يبدأ كل فقرة بسطر جديد وتنتهي بمسافة قبل الفقرة التالية.

<p>This is the first paragraph. It contains long text that can span multiple lines.</p>
<p>This is the second paragraph. It appears on a new line separate from the first.</p>
            

This is the first paragraph. It contains long text that can span multiple lines.

This is the second paragraph. It appears on a new line separate from the first.

💡 ملاحظة: المتصفح يضيف مسافة تلقائية بين الفقرات.

↩️ ثالثاً: فواصل الأسطر (Line Breaks)

يُستخدم لإنشاء سطر جديد داخل الفقرة بدون بدء فقرة جديدة.

<p>This is the first line<br>
This is the second line<br>
This is the third line</p>
            

This is the first line
This is the second line
This is the third line

💡 ملاحظة: هو وسم بدون إغلاق (void element).

✒️ رابعاً: تنسيق النص (Bold, Italic, Underline)

تُستخدم هذه الوسوم لتنسيق النص وإبرازه:

الوسم	الوظيفة	مثال
<b> أو <strong>	خط عريض (Bold)	Bold Text
<i> أو <em>	خط مائل (Italic)	Italic Text
<u>	خط مسطر (Underline)	Underlined Text

<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>
<strong>Strong Text (Semantic)</strong>
<em>Emphasized Text (Semantic)</em>
            

Bold Text - Italic Text - Underlined Text

Strong Text (Semantic) - Emphasized Text (Semantic)

💡 ملاحظة: و لهما معنى دلالي (تأكيد المعنى)، بينما و للتنسيق الشكلي فقط.

💬 خامساً: الاقتباسات وعناصر الكود

تُستخدم هذه الوسوم لعرض الاقتباسات والنصوص البرمجية:

الوسم	الوظيفة	مثال
<blockquote>	اقتباس طويل	This is a long quote
<q>	اقتباس قصير (داخل السطر)	Short quote
<code>	نص برمجي	`<h1>Hello</h1>`
<pre>	نص منسق (يحافظ على المسافات)	Formatted Text Preserves spaces

<blockquote>This is a long quote</blockquote>
<q>Short quote</q>
<code>;lt&h1;gt&Hello;lt&/h1;gt&</code>
<pre>Formatted    Text
Preserves spaces</pre>
            

🔣 سادساً: الرموز الخاصة (Special Characters)

تُستخدم Entities لعرض الرموز التي قد يتعذر كتابتها مباشرة في HTML:

الرمز	Entity	الوصف
<	;lt&	Less than
>	;gt&	Greater than
&	;amp&	Ampersand
"	;quot&	Quotation mark
©	;copy&	Copyright
™	;trade&	Trademark
	;nbsp&	Non-breaking space

Using special characters: ;lt& ;gt& ;amp& ;quot& ;copy& ;trade&

📰 سابعاً: تصميم مقال قصير

📝 المطلوب: تصميم مقال قصير عن موضوعك المفضل يحتوي على:

عنوان رئيسي <h1>
عنوان فرعي <h2>
ثلاث فقرات على الأقل
نص عريض أو
نص مائل أو
نص مسطر
اقتباس <q> أو <blockquote>
رموز خاصة مثل ;copy&

<!DOCTYPE html>
<html>
<head>
    <title>My First Article</title>
</head>
<body>

    <h1>The World of Programming</h1>
    
    <h2>Why I Love Programming?</h2>
    
    <p>Programming is the language of the future. <b>Learning programming</b> opens many doors in life.</p>
    
    <p>I love <i>HTML</i> because it is <u>easy and fun</u>.</p>
    
    <p>As one programmer said: <q>Programming changes the world</q></p>
    
    <p>All rights reserved ;copy& 2026</p>

</body>
</html>
            

The World of Programming

Why I Love Programming?

Programming is the language of the future. Learning programming opens many doors in life.

I love HTML because it is easy and fun.

As one programmer said: Programming changes the world

🧪 اختبار تفاعلي · مراجعة سريعة

🌟 درجتك

0 / 0