أساسيات 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>على انها ـ HTML5 هكذا:
<!DOCTYPE html>
يتم تعريف عناوين HTML بعلامات من
<h1>
إلى <h6>.
يحدد <h1> العنوان الأكبر حجما .
يحدد <h6> العنوان الاصغر حجما:
مثال
<!DOCTYPE html>
<html>
<body>
<h1>هذا عنوان كبير 1</h1>
<h2>هذا عنوان 2</h2>
<h3>هذا عنوان 3</h3>
<h4>هذا عنوان 4</h4>
<h5>هذا عنوان 5</h5>
<h6>هذا عنوان 6</h6>
</body>
</html>
يتم تعريف فقرات HTML بعلامة <p>:
مثال
<!DOCTYPE html>
<html>
<body>
<p>هذه فقرة.</p>
<p>هذه فقرة اخرى.</p>
</body>
</html>
يتم تعريف روابط HTML بعلامة <a>
مثال
<!DOCTYPE html>
<html>
<body>
<a href="https://itqan7.blogspot.com/">هذا رابط موقعي</a>
</body>
</html>
يتم تحديد وجهة الارتباط في سمة او خاصية
href. تُستخدم السمات لتوفير معلومات
إضافية حول عناصر HTML. سوف تتعلم المزيد عن السمات في فصل لاحق.
عرض الصور في HTML
يتم تعريف صور HTML بعلامة <img>.
يتم توفير الملف المصدر (src) والنص
البديل في حال لم تحمل الصورة (alt)
والعرض (width) والارتفاع (height) كخصائص:
مثال
<!DOCTYPE html>
<html>
<base href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg76ODVxhMGLsHj-uRGlWYqVZle-ePHOUY1JS11WpB7bFq_dWOgNfKEQFHQTP1B0FFs97_KJk5GAuFoW7Vra_vvr-T_m7YgI4s4_HH2yoeg1fCC0oaacwZHwvJdMZMxmjR4oalPBnXHDKTU/s320/">
<body>
<img src="03.png" alt="TEXT" width="104" height="142">
</body>
</html>