الدرس الخامسدرسنا اليوم فيه اضافات بسيطة علي ما سبق
headings
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
+معلومة اضافية بيضيف المتصفح مسافة قبل وبعد الجملة المستخدم فيها ال headings<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
+معلومة مهمة لتساعد أيضاً محركات البحث
headings
تستخدم في النصوص الاكثر اهميةh1.
وh6 اقل أهمية
لا تستخدمها كنصوص كبيرة الحجم .
*وان كنت تريد تكبير حجمها بسمة "font-size:60px"
وقولنا سمات الألوان وحجم الخط وكدا وكل ما يخص المظهر بيبقي قبليها
style=
فيكون الكود هكذا
----------------
----------------
<DOCTYPE html!>
<html><head>
<head>
<body>
<h1 style="font-size:60px">heading</h1>
<body/><html>
______________________
انسخ الكود واحفظه بامتاداد .html
هتظهرلك كدا
شرح المثال
طبعاً فهمين يعني أيه
<DOCTYPE html>
لتعريف الصفحة ك اتش تي إم ال 5
<html>
</html>
أساس الصفحة بيكتب داخله head body
<head>
</head>
بيكتب بداخلهم محتوي غير مرئي يصف الصفحة مثل عنوان الصفحة أو اللغة
<body>
</body>
بيكتب داخله المحتوي المرئي من الصفحة
<h1></h1>
وعارفين أن لما تضيف سمة بتضيفها في وسم البداية
<h1 style="font-size:60px">heading</h1>
style
تستخدم قبل سمات الظهر
font-size
تحديد حجم الخط
:60px
حجم الخط
ولا تنسي علامتي التنصيص
________________________________________________________
تاني معلومة
عندي عمل سطر فاصل بخط زي كدا
_______________________________________________________________
تستخدم <hr> لعمل سطر أو خط أفقي وممكن تتتكتب داخل عنصر أو خارجهمثال
<DOCTYPE html!>
<head>
<head>
<body>
<hr>
<h1>heading <hr> My Blogspot</h1>
<body/>
<html>
واحفظه بالنوتباد بامتداد .html
هتظهرلك كدا
شرح المثال
<hr>
هي خارج عنصر وعملت خط افقي كما في الصور
<h1>heading <hr> My Blogspot</h1>
وهي داخل عنصر وعمل خط افقي فاصل بين الكلام
والفرق بينها وبين <br>
br تعمل كزر enter لاتعمل خط افقي
*ملاحظة
style="font-size:70px"
تستخدم أيضاً للبروجراف
و hr كذلك
____________________________
معلومة التالتة
معلومة التالتة
لو انت فاتح صفحة فيس مثلأ وعايز تطلع علي الكود
بتضغط كليك يمين
ومصدر الصفحة أو
Source page
ولتحديد عنصر في الصفحة
inspect
أو فحص
___________________________
حل لمشلكلة السطر الفاصل في البراجراف
<p>
انها بتقبلش enter فعند الضغط عليها وتجريب الكود تحصل المفأجاة أن enter لا تحسب
لذلك يمكنك الاستغناء عنها
وكتابة بدلها حيث هتعمل المساف
<pre>
this element solve the problem .
this element is very good
</pre>
وممكن تجربها في المتصفح
_______________________
<DOCTYPE html!>
<html>
<head>
<head>
<body>
<pre>
this element solve the problem .
this element is very good
</pre>
<body/>
<html>
_______________
احفظها بامتداد .html
هتظهرلك كدا
وخلص درسنا
ليست هناك تعليقات:
إرسال تعليق