الدرس 5 : علامات HTML

علامات HTML

• يمكن أن عناصر HTML لها سمات
• توفر سمات حصول على معلومات إضافية حول عنصر
• يتم تحديد سمات دائما في علامة البداية
• سمات تأتي في أزواج الاسم / القيمة مثل: name="value"

---

علامة انج (lang)

لغة المستند يمكن تعريفها في <HTML> العلامة.

يتم تعريف اللغة في علامة انج .

معلنا لغة المهم للتطبيقات الوصول (قارئات الشاشة) ومحركات البحث:

مثال

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

أول رسالتين تحديد اللغة (EN). إذا كان هناك لهجة، استخدم رسالتين المزيد (الولايات المتحدة).

---

عنوان السمة

وتعرف الفقرات HTML مع <P> العلامة.

مثال

<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>

انها محاولة لنفسك »

	عند تحريك الماوس فوق عنصر، سيتم عرض العنوان لتلميح.

---

الخاصية href

يتم تعريف الارتباطات HTML مع <A> العلامة. يتم تحديد عنوان الرابط في HREF السمة:

مثال

<a href="http://www.w3schools.com">This is a link</a>

انها محاولة لنفسك »

سوف تتعلم المزيد عن وصلات والعلامة <A> في وقت لاحق في هذا البرنامج التعليمي.

---

سمات حجم

وتعرف الصور HTML مع <IMG> العلامة.

اسم الملف من المصدر ( SRC )، وحجم الصورة ( العرض و الارتفاع يتم توفير جميع)، و الصفات :

مثال

<img src="w3schools.jpg" width="104" height="142">

انها محاولة لنفسك »

يتم تحديد حجم الصورة بالبكسل: العرض = يعني "104" 104 شاشة بكسل.

سوف تتعلم المزيد عن صور و<IMG> العلامة في وقت لاحق في هذا البرنامج التعليمي.

---

بديل السمة

و بديل تحدد السمة نصا بديلا لاستخدامها، عندما عنصر HTML لا يمكن عرضها.

قيمة السمة يمكن قراءتها من قبل "قارئات الشاشة". بهذه الطريقة، شخص "الاستماع" إلى صفحة الويب، أي شخص أعمى، ويمكن "سماع" العنصر.

مثال

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

انها محاولة لنفسك »

---

نقترح: سمات دائما استخدام حرف صغير

لا يتطلب معيار HTML5 أقل أسماء السمة القضية.

يمكن كتابة السمة اللقب مع حالة العلوي أو السفلي مثل عنوان و / أو العنوان .

W3C توصي صغيرة في HTML4، و يطالب صغيرة لأنواع وثيقة أكثر صرامة مثل XHTML.

	الحالة الأدنى هو الأكثر شيوعا. الحالة الأدنى هو أسهل للكتابة.  وفي W3Schools نحن دائما استخدام الحالة الأدنى السمة الأسماء.

---

نقترح: اقتباس دائما السمة القيم

لا يتطلب معيار HTML5 علامات الاقتباس حول قيم السمات.

و HREF السمة، تبين أعلاه، يمكن أن تكون مكتوبة على النحو التالي:

مثال

<a href=http://www.w3schools.com>

انها محاولة لنفسك »

W3C توصي يقتبس في HTML4، و يطالب نقلت عن أنواع المستندات أكثر صرامة مثل XHTML.

أحيانا يكون من الضروري استخدام علامات الاقتباس. هذا وسوف يتم عرض بشكل صحيح، لأنه يحتوي على الفضاء:

مثال

<p title=About W3Schools>

انها محاولة لنفسك »

	استخدام علامات الاقتباس هي الأكثر شيوعا. يمكن الاقتباس حذف تنتج أخطاء.  وفي W3Schools نحن دائما استخدام علامات الاقتباس حول القيم السمة.

---

ونقلت واحدة أو مزدوجة؟

ونقلت أسلوب مزدوجة هي الأكثر شيوعا في HTML، ولكن يمكن أيضا أن تستخدم نمط واحد.

في بعض الحالات، عندما تكون قيمة السمة نفسها تحتوي على علامات اقتباس مزدوجة، فمن الضروري استخدام علامات الاقتباس المفردة:

مثال

<p title='John "ShotGun" Nelson'>

أو بالعكس:

مثال

<p title="John 'ShotGun' Nelson">

---

ملخص الفصل

• ويمكن لجميع عناصر HTML لها سمات
• وHTML لقب توفر سمة إضافية "أداة معلومات سرية" المعلومات
• وHTML HREF توفر سمة عنوان معلومات عن الروابط
• وHTML العرض و الارتفاع توفر سمات المعلومات حجم للصور
• وHTML بديل توفر سمة النص لقارئات الشاشة
• في W3Schools نحن دائما استخدام صغيرة أسماء السمات HTML
• في W3Schools نحن دائما أقتبس سمات مع التنصيص

سمات HTML

وفيما يلي قائمة أبجدية بعض الصفات غالبا ما تستخدم في HTML:

العلامة	خصائصها
alt	يحدد نص بديل للصورة
disabled	تحدد أن عنصر المدخلات يجب تعطيلها
href	يحدد URL (عنوان ويب) لارتباط
id	يحدد هوية فريدة من نوعها لعنصر
src	يحدد URL (عنوان ويب) لصورة
style	يحدد أسلوب CSS داخل العنصر
title	يحدد معلومات إضافية حول عنصر (يظهر على شكل تلميح أداة)
value	يحدد قيمة (محتوى النص) لعنصر الإدخال.

الدرس 4 : عناصر HTML

HTML عناصر

مكتوبة عناصر HTML مع بداية الوسم، مع نهاية العلامة، مع المحتوى في بين:

< tagname > المحتوى < / tagname >

وHTML العنصر هو كل شيء من علامة البداية إلى العلامة النهاية:

< P > بلدي الفقرة الأولى HTML. < / P >

بداية الكود	المحتوى	نهاية الكود
<h1>	My First Heading	</h1>
<p>	My first paragraph.	</p>
<br>

	بعض عناصر HTML لا يكون علامة نهاية.

---

متداخلة HTML عناصر

عناصر HTML يمكن أن تتداخل (يمكن عناصر تحتوي على عناصر).

وتتكون كل وثائق HTML من عناصر HTML المتداخلة.

يحتوي هذا المثال 4 عناصر HTML:

مثال

<!DOCTYPE html>
<html>

<body>
  <h1>عنوان</h1>
  <p>فقرة.</p>
</body>

</html>

---

Vavzh سبيل المثال HTML

و <HTML> يعرف عنصر في المستند بأكمله .

أنه يحتوي على بداية وسم <html> و نهاية الوسم </ HTML>.

عنصر المحتوى هو عنصر HTML آخر (<body> عنصر).

<html>

<body>
  <h1>عنوان</h1>
  <p>فقرة.</p>
</body>

</html>

و <body> عنصر يحدد نص المستند .

أنه يحتوي على بداية الوسم <body> و نهاية الوسم </ body>.

عنصر المحتوى هو عنصرين HTML الأخرى (<H1> و <P>).

<body>
  <h1>عنوان</h1>
  <p>فقرة.</p>
</body>

و <H1> يعرف عنصر من العنوان .

أنه يحتوي على بداية الوسم <H1> و نهاية الوسم </ H1>.

عنصر المحتوى هو: بلدي العنوان الأول.

<h1>عنواني الاول</h1>

و <p> و يحدد عنصر من الفقرة .

أنه يحتوي على بداية الوسم <P> و نهاية الوسم </ P>.

عنصر المحتوى هو: الفقرة الأولى بلدي.

<p>فقرتي الاولة.</p>

---

لا ننسى نهاية الوسم

فإن بعض عناصر HTML تعرض بشكل صحيح، حتى لو كنت قد نسيت العلامة الغاية:

مثال

<html>

<body>
  <p>هذه فقرة
  <p>هذه فقرة
</body>

</html>

المثال أعلاه يعمل في جميع المتصفحات، لأنها تعتبر علامة إغلاق اختياري.

لا تعتمد على هذا. قد تؤدي إلى نتائج و / أو أخطاء غير متوقعة إذا كنت قد نسيت العلامة نهاية.

---

فارغة HTML عناصر

ويطلق على عناصر HTML مع أي محتوى العناصر الفارغة.

<BR> هو عنصر فارغة بدون علامة إغلاق (تحدد <BR> العلامة فاصل أسطر).

عنصر فارغ يمكن أن يكون "مغلقة" في العلامة فتح مثل هذا: <br />.

HTML5 لا تتطلب العناصر الفارغة لتكون مغلقة. ولكن إذا كنت في حاجة أكثر صرامة التحقق من صحة، وجعل المستند يمكن قراءتها من قبل موزعي XML، يرجى إغلاق كافة عناصر HTML. 

---

HTML نصيحة: استخدم حرف صغير الكلمات

علامات HTML غير حساسة لحالة الأحرف: <P> يعني نفس <p> و.

لا يتطلب معيار HTML5 علامات صغيرة، ولكن W3C توصي صغيرة في HTML4، و يطالب صغيرة لأنواع وثيقة أكثر صرامة مثل XHTML.

الدرس 3 :اساسيات HTML

وثائق HTML

ويجب على جميع وثائق HTML تبدأ مع تعريف نوع: <! DOCTYPE HTML> .

وثيقة HTML نفسها تبدأ مع <HTML> وتنتهي مع </ HTML> .

الجزء المرئي من وثيقة HTML ما بين <body> و </ body> .

مثال

<!DOCTYPE html>
<html>
<body>

<h1>هذا عنواني الاول</h1>

<p>هذه فقرتي الاولة</p>

</body>
</html>

---

HTML العناوين

وتعرف عناوين HTML مع <H1> إلى <H6> العلامات:

مثال

<h1>هذا عنوان</h1>
<h2>هذا عنوان</h2>
<h3>هذا عنوان</h3>

---

HTML الفقرات

وتعرف الفقرات HTML مع <P> العلامة:

مثال

<p>هذه فقرة</p>
<p>هذه فقرة ايضا</p>

---

روابط HTML

يتم تعريف الارتباطات HTML مع <A> العلامة:

مثال

<a href="http://www.tainmz.blogspot.com">هذا رابط</a>

يتم تحديد عنوان الارتباط في الخاصية href .

وتستخدم سمات لتقديم معلومات إضافية حول عناصر HTML.

---

HTML صور

وتعرف الصور HTML مع <IMG> العلامة.

الملف المصدر ( SRC )، النص البديل ( ALT )، وحجم ( العرض و الارتفاع وتقدم)، و الصفات :

مثال

<img src="tainmz.jpg" alt="tainmz.com" width="104" height="142">

	سوف تتعلم المزيد عن سمات في فصل لاحق.

جميع الحقوق محفوظة لمدونة Tainmz

في حالة نسخ الموضوع يجب ذكر المصدر و الا ستكون انتهكت حقوق النشر