HTML Basic
أمثلة HTML الأساسية
في هذا الفصل سوف نعرض بعض أمثلة HTML الأساسية.
لا تقلق إذا استخدمنا وسوم لم تتعلمها بعد.
مستندات HTML
يجب أن تبدأ جميع مستندات HTML بالتصريح عن نوع المستند: <! DOCTYPE html>.
يبدأ مستند HTML بـ <html> وينتهي بـ </html>.
يقع الجزء المرئي من مستند HTML بين <body> و </ body>.
مثال :
--------------------
<!DOCTYPE html>
<html>
<body>
<h1>عنوان رئيسي اول</h1>
<p>فقرة.</p>
</body>
</html>
---------------------------------
يظهر المثال السابق في المتصفح بالشكل :
التصريح <! DOCTYPE>
يمثل التصريح <! DOCTYPE> نوع المستند ، ويساعد المتصفحات على عرض صفحات الويب بشكل صحيح.
يجب أن يظهر مرة واحدة فقط ، في أعلى الصفحة (قبل أي علامات HTML).
التصريح <! DOCTYPE> غير حساس لحالة الأحرف.
التصريح <! DOCTYPE> ظهر في HTML
شكل كود التصريح : <!DOCTYPE html>
العناوين في HTML
HTML Headings
يتم تعريف عناوين HTML بعلامات <h1> إلى <h6>
يحدد <h1> العنوان الأكثر أهمية. يحدد <h6> العنوان الأقل أهمية:
مثال
------------
<h1>هذا عنوان 1</h1>
<h2>هذا عنوان 2</h2>
<h3>هذا عنوان 3</h3>
-------------------------------
يظهر المثال السابق في المتصفح بالشكل :
هذا عنوان 1
هذا عنوان 2
هذا عنوان 3
الففقرات في HTML
HTML Paragraphs
يتم تعريف فقرات HTML بالوسم <p>
مثال :
-------------
<p>هذه فقرة.</p>
<p>هذه فقرة أخرى.</p>
-------------------
يظهر المثال السابق في المتصفح بالشكل :
الروابط في HTML
HTML Links
يتم تعريف الروابط في HTML بعلامة <a> :
مثال
----------
<a href="https://hijaz-ar.blogspot.com">هذا رابط </a>
------------------
يطهر المثال السابق في المتصفح بالشكل :
........
هل سبق لك أن شاهدت صفحة ويب وتساءلت "عجبا! كيف فعلوا ذلك؟"
عرض كود مصدر HTML:
انقر بزر الماوس الأيمن في صفحة HTML وحدد "عرض مصدر الصفحة" (في Chrome) أو "عرض المصدر" (في Edge) ، أو ما شابه ذلك في المتصفحات الأخرى. سيؤدي هذا إلى فتح نافذة تحتوي على شفرة مصدر HTML للصفحة.
افحص عنصر HTML:
انقر بزر الماوس الأيمن على عنصر (أو منطقة فارغة) ، واختر "فحص" أو "فحص العنصر" لمعرفة العناصر المكونة (سترى كل من HTML و CSS). يمكنك أيضًا تحرير HTML أو CSS أثناء التنقل في لوحة العناصر أو الأنماط التي تفتح.
انتهى الدرس.
ليست هناك تعليقات:
إرسال تعليق