أحد المكونات الأساسية لـ HTML هي الفقرات. استخدم العلامات "<p>" و"</p>" لتحديد الفقرات. على سبيل المثال:
<p>هذه فقرة. </ص>
الارتباط التشعبي هو رابط إلى صفحة أو موقع آخر. استخدم العلامتين "<a href=''>" و"</a>" لإنشاء ارتباطات تشعبية، حيث تحدد سمة href عنوان URL للارتباط. على سبيل المثال:
<a href="https://www.jb51.net">هذا رابط</a>
يمكن للصور تحسين التأثير البصري للصفحة ونقل المزيد من المعلومات. قم بإدراج صور باستخدام العلامة "<img src='' alt=''/>"، حيث تحدد سمة src المسار إلى ملف الصورة وتحتوي سمة alt على نص بديل يتم عرضه عندما لا يمكن عرض الصورة. على سبيل المثال:
<img src="image.jpg" alt="صورة جميلة">
تعد الجداول طريقة أساسية لعرض البيانات على صفحات الويب. استخدم العلامات "<table>" و"<tr>" و"<td>" لتحديد الجداول والصفوف والخلايا على التوالي. على سبيل المثال:
<الجدول> <تر> <td>الصف الأول، العمود الأول</td> <td>الصف الأول، العمود الثاني</td> </tr> <تر> <td>الصف الثاني، العمود الأول</td> <td>الصف الثاني، العمود الثاني</td> </tr> </الجدول>
استخدم العلامات "<ul>" أو "<ol>" لإنشاء قائمة غير مرتبة أو مرتبة، ثم استخدم العلامة "<li>" لتحديد عناصر القائمة. على سبيل المثال:
<ul> <li>عنصر القائمة 1</li> <li>عنصر القائمة 2</li> </ul> <ol> <li>عنصر القائمة 1</li> <li>عنصر القائمة 2</li> </ol>
النماذج هي مكونات تستخدم لجمع مدخلات المستخدم. استخدم العلامة "<form>" لإنشاء النموذج والعلامة "<input>" لتحديد حقول الإدخال. على سبيل المثال:
<طريقة الإجراء = "submit.php" = "post"> <label for="username">اسم المستخدم:</label> <نوع الإدخال = "نص" اسم = "اسم المستخدم" معرف = "اسم المستخدم"> <label for="password">كلمة المرور:</label> <نوع الإدخال = "كلمة المرور" الاسم = "كلمة المرور" معرف = "كلمة المرور"> <نوع الإدخال = "إرسال" القيمة = "إرسال"> </النموذج>
يمكن استخدام CSS للتحكم في مظهر وتخطيط صفحات الويب. يمكن إضافة أنماط CSS إلى مستندات HTML باستخدام العلامة "<style>". على سبيل المثال:
<نمط>
جسم {
لون الخلفية: #f2f2f2؛
}
ح1 {
اللون: أزرق؛
محاذاة النص: مركز؛
}
</نمط>مقتطف الكود أعلاه هو مجرد قمة جبل الجليد في لغة HTML. ومع ذلك، يمكنها مساعدتك في بناء البنية الأساسية لصفحة الويب وأسلوبها، وتزويدك بالإلهام لمزيد من التعلم. الآن، حاول إنشاء موقع الويب الخاص بك باستخدام رموز HTML هذه!
بيان وثائق HTML5
<!DOCTYPE html>
كتلة التعليمات البرمجية أعلاه عبارة عن إعلان مستند HTML5، يشير إلى أن صفحة الويب الحالية مكتوبة وفقًا لمعايير HTML5.
عند كتابة صفحة ويب، تأكد من كتابة إعلان مستند HTML5 في أعلى صفحة الويب. إذا لم تكتب إعلان مستند، فسوف تدخل بعض المتصفحات في وضع غريب. بعد الدخول إلى الوضع الغريب، سيقوم المتصفح بتحليل الصفحة ولن يتم عرض الصفحة بشكل طبيعي، لذلك، لتجنب الدخول إلى هذا الوضع، يجب عليك كتابة بيان مستند.
إعلانات المستندات شائعة الاستخدام
HTML5
<!DOCTYPE html>
أتش تي أم أل 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
أتش تي أم أل 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ملاحظة: <!DOCTYPE> ليس علامة HTML. فهو يزود المتصفح بمعلومات (بيان) حول إصدار HTML الذي تمت كتابته.
لكي يكون متوافقًا مع بعض الصفحات القديمة، قام المتصفح بضبط وضعين للتحليل:
وضع المعايير وضع المعايير
وضع المراوغات وضع غريب
ستنتج الأوضاع الغريبة بعض السلوكيات غير المتوقعة عند تحليل صفحات الويب، ويجب علينا تجنب حدوث الأوضاع الغريبة.
نوع الملف <HTML></HTML> (يتم وضعه في بداية الملف ونهايته)
عنوان المستند <TITLE></TITLE> (يجب وضعه في كتلة "الرأس")
الرأس <HEAD></HEAD> (معلومات وصفية، مثل "الموضوع")
النمط <BODY></BODY> (نص المستند)
العنوان <H?></H?> (من 1 إلى 6، هناك ستة مستويات من الاختيارات)
محاذاة العنوان <H?ALIGN=LEFT|CENTER|RIGHT></H?>
التمييز <DIV></DIV>
محاذاة متمايزة <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
كتلة الاقتباس <BLOCKQUOTE></BLOCKQUOTE> (عادةً ما تكون ذات مسافة بادئة)
التوكيد <EM></EM> (يظهر عادةً بخط مائل)
التركيز بشكل خاص على <STRONG></STRONG> (يظهر عادةً بالخط العريض)
الاقتباس <CITE></CITE> (يظهر عادةً بخط مائل)
الكود <CODE></CODE> (لعرض كود المصدر)
عينة<SAMP></SAMP>
إدخال لوحة المفاتيح<KBD></KBD>
المتغير <VAR></VAR>
تعريف <DFN></DFN> (غير متوفر في بعض المتصفحات)
العنوان<العنوان></العنوان>
أحرف كبيرة<BIG></BIG>
طباعة صغيرة<صغير></صغير>
غامق<B></B>
مائل<I></I>
خلاصة القول <U></U> (لا تزال بعض المتصفحات لا توفرها)
يتوسطه خط <S></S> (بعض المتصفحات لا توفره بعد)
منخفض <SUB></SUB>
مرتفع <SUP></SUP>
الآلة الكاتبة <TT></TT> (معروضة بخط مسافة واحدة)
التنسيق المحدد مسبقًا <PRE></PRE> (يحافظ على حجم المسافات في الملف)
عرض التنسيق المنسق مسبقًا <PRE WIDTH=?></PRE> (بالأحرف)
قم بمحاذاته مع <CENTER></CENTER> (يُقبل كل من النص والصور)
Shine <BLINK></BLINK> (العلامة الأكثر سخرية على الإطلاق)
حجم الخط <FONTSIZE=?></FONT> (من 1 إلى 7)
تغيير حجم الخط <FONTSIZE=+|-?></FONT>
حجم الخط الأساسي <BASEFONTSIZE=?> (من 1 إلى 7؛ الإعدادات الافتراضية هي 3)
لون الخط<FONTCOLOR="#$$"></FONT> ($$ هو رمز اللون)
1) الصورة: <img src="عنوان الصورة">
2) انضم إلى الرابط: <a href="Related Address to beconnect">اكتب الكلمات التي تريد كتابتها</a>
3) افتح الرابط في نافذة جديدة: <a href="Related Address" target="_blank">اكتب الكلمات التي تريد كتابتها</a>
4) الخط المحمول (شاشة التحديد): <marquee>اكتب الكلمات التي تريد كتابتها</marquee>
5) الخط الغامق: <b>اكتب الكلمات التي تريد كتابتها</b>
6) الخط المائل: <i>اكتب الكلمات التي تريد كتابتها</i>
7) تسطير الخط: <u>اكتب الكلمات التي تريد كتابتها</u>
8) خط يتوسطه الخط: <s>اكتب الكلمات التي تريد كتابتها</s>
9) قم بزيادة حجم الخط: <big>اكتب الكلمات التي تريد كتابتها</big>
10) التحكم في حجم الخط: <h1>اكتب الكلمات التي تريد كتابتها</h1> (يمكن أن يكون حجم الخط من h1 إلى h5، h1 هو الأكبر، h5 هو الأصغر)
11) تغيير لون الخط: <font color="#value">اكتب الكلمات التي تريد كتابتها</font> (القيمة بين 000000 وffffff (سداسي عشري 16 بت)
12) ألغِ السطر السفلي من الاتصال: <a href="Related Address" style="text-decoration:none">اكتب الكلمات التي تريد كتابتها</a>
13) نشر الموسيقى: <embed src="عنوان الموسيقى" width="Width" height="Height" autostart=false>
14) الصق الفلاش: <embed src="عنوان الفلاش" width="width" height="height">
15) لصق ملفات الفيديو:
16) فاصل الأسطر:<br>
17) الفقرة: <p>الفقرة</p>
18) نمط النص الأصلي: <pre>Text</pre>
19) تغيير خلفية المنشور: <body back="background image title">
20) تم إصلاح عدم تمرير خلفية المنشور باستخدام شريط التمرير:
21) قم بتخصيص لون خلفية المنشور: <body bgcolor="#value">(راجع 10 لمعرفة القيمة)
22) نشر موسيقى الخلفية: <bgsound="عنوان موسيقى الخلفية" حلقة=infinite>
23) انشر صفحة الويب: <iframe.src="Related Address" width="Width" height="Height"></iframe>