منتديات شبكة شعاع الدعوية للتعليم عن بعد

أنواع الوسوم في HTML

بشكل عام, أي شيء يتم إضافته في الصفحة يقال له وسم ( Tag ) و يوجد نوعين من الوسوم:

وسوم فردية ( Single Tags ) و هذه تعني أن الوسم لا يمكن وضع وسم آخر فيه مثل الوسم <br/>.
وسوم زوجية ( Paired Tags ) و يقصد بها أن الوسم يمكن أن يوضع فيه وسوم أخرى مثل الوسم <p></p>.

معلومة تقنية

عند استخدام وسم فردي يمكنك عدم وضع الرمز / في آخره إن أردت و لكن يفضّل وضعه للإشارة إلى أنه وسم فردي.
كمثال بسيط, سواء قمت بكتابة <br> أو <br/> فالنتيجة هي نفسها تماماً.
الوسم الزوجي عبارة وسم له بداية و نهاية.
نهاية الوسم الزوجي تكون بإضافة الرمز / في أول إسم الوسم فقط.
كمثال بسيط, الوسم الزوجي p نبدأه بالوسم <p> و ننهيه بالوسم </p>.
لا تقلق ستتعلم كيف تستخدم جميع الوسوم الفردية و الزوجية لاحقاً و لكننا نعلمك عن هذه الأمور من الآن تجهيزاً لها.
التعليقات في HTML

التعليق ( Comment ) عبارة عن وسم خاص يمكنك وضعه في أي مكان تريد في الصفحة بهدف كتابة ملاحظات تساعدك في الشرح أو لتذكر سبب استخدام الوسوم في حال أردت مستقبلاً مراجعة كود الصفحة و التعديل عليه.
لوضع تعليق إستخدم الوسم  مع الإشارة إلى أنك يجب أن تضع الكود بداخله كالتالي.
مثال

https://harmash.com/template/images/copy-icon.PNG
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- هذا التعليق الثاني الذي قمنا بكتابته
بكتابته على ثلاثة أسطر و هو لا
يظهر أيضاً أمام المستخدم العادي -->
</body>
</html>

جرب الكود
وسوم الصفحة الأساسية في HTML

بشكل عام, أي صفحة HTML تتكون من قسمين أساسيين كالتالي:

القسم Head و الذي تضع فيه كل تحتاجه لتصميم الصفحة و لكن المستخدم لا يراه.
القسم Body و الذي نضع فيه كل الأشياء التي سيراها المستخدم.

الآن عند كتابة كود HTML5 يجب ذكر المعلومات التالية على الأقل في الملف.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

<!DOCTYPE html> نضعه في أول الملف دائماً حتى يعلم المتصفح أننا نستخدم الإصدار الخامس من لغة HTML.
<html></html> نضعه بهدف كتابة كل الكود بداخله.
<head></head> نضع في كل الأشياء التي لن يراها المستخدم بداخل الصفحة.
<body></body> تضع فيه كل الأشياء التي سيراها المستخدم بداخل الصفحة.

ستتعرف على جميع الأشياء التي يمكنك إضافتها في الصفحات بتفصيل ممل لاحقاً في الدورة و لكن هدفنا في هذا الدرس تعليمك كيف تكتب كود الصفحة بشكل صحيح و مفهوم و ما كنا نقصده بالضبط حين قلنا أن كل ما تكتبه في القسم Body يراه المستخدم و كل ما تكتبه في القسم Head لا يراه المستخدم.
خصائص وسوم HTML

أغلب الوسوم التي تضيفها في الكود يمكن إضافة خصائص لها على الشكل التالي.

element: يقصد بها إسم الوسم.
attribute: يقصد بها الخاصيّة التي يملكها الوسم بالأساس و لكننا ننوي تحديد قيمتها.
value: يقصد بها القيمة التي سنضعها في الخاصيّة و دائماً يجب وضعها بين "".

كمثال بسيط, عند إضافة صورة في الصفحة نستخدم الوسم <img> و بداخله نحدد مسار الصورة التي سيتم عرضها بواسطة الخاصية src كالتالي.
مثال

https://harmash.com/template/images/copy-icon.PNG
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<imgsrc="https://harmash.com/html/src/html-5-icon.PNG">
</body>
</html>

جرب الكود
أمثلة على الأشياء التي يمكن إضافتها في القسم Head

عندما تنشئ ملف HTML على حاسوبك و تقوم بعرضه بواسطة المتصفح, ستلاحظ أنه يعرض لك إسم الملف المفتوح في المتصفح كالتالي.
https://harmash.com/html/html-basics...hout-title.PNG

عندما تقوم بتصميم الصفحات بنفسك مستقبلاً قم دائماً بوضع عنوان مناسب للصفحات التي تنشئها كما تفعل أغلب المواقع الإحترافية لأن هذا الأمر يساعد المستخدم في معرفة ما هي الصفحة المفتوحة بدون الحاجة لأن يقرأ محتواها, فمثلاً إذا نظرت لعنوان الصفحة التي تقرأها الآن ستجده "أساسيات لغة HTML" و ستجد بجانبها أيضاً الأيقونة الزرقاء التي نظهرها في جميع الصفحات كالتالي.
https://harmash.com/html/html-basics...page-title.PNG

ملاحظة

الأمثلة التالية الموضوعة في هذه الفقرة لا يمكن تجربتها بواسطة محرر هرمش. بمعنى أخر, إذا قمت بتجربتها بواسطة محرر هرمش فلن تجد الكود يعمل و سبب ذلك أن محرر هرمش لا يملك الصلاحية اللازمة التي تسمح له بتعديل معلومات متصفحك.
إذاً في متصفح هرمش يمكنك رؤية نتيجة أي كود تكتبه فيه باستثناء الكود الذي يسمح بتغيير عنوان و أيقونة الصفحة التي تظهر في المتصفح.
لمشاهدة نتيجة الأمثلة التالية, قم بإنشاء ملف إسمه test.html على حاسوبك و اكتب الكود فيه.

طريقة وضع عنوان للملف

في حال أردت وضع عنوان للملف حتى يظهر في المتصفح بدلاً من إسم الملف نفسه, قم بوضعه بداخل <title></title> في القسم Head كالتالي.
مثال

https://harmash.com/template/images/copy-icon.PNG
<!DOCTYPE html>
<html>
<head>
<title>My new title</title>
</head>
<body>
</body>
</html>

شاهد النتيجة

طريقة وضع أيقونة للملف

في العادة الصورة التي يتم وضعها كأيقونة للصفحة يكون إسمها favicon.ico و حجمها 16 x 16 و لكن تستطيع وضع مسار أي صورة لديك بشرط أن يكون لها الحجم المذكور. لوضع أيقونة بجانب عنوان الصفحة يجب أن تضع السطر التالي كما هو في القسم Head مع وضع مسار الصورة التي تريد عرضها مكان الكلمة icon-path.

<linkrel="icon"type="image/x-icon"href="icon-path">

في المثال التالي قمنا بوضع أيقونة موقع هرمش نفسها بجانب عنوان الصفحة.
مثال

https://harmash.com/template/images/copy-icon.PNG
<!DOCTYPE html>
<html>
<head>
<title>My new title</title>
<linkrel="icon"type="image/x-icon"href="https://harmash.com/html/src/favicon.PNG">
</head>
<body>
</body>
</html>

شاهد النتيجة
أمثلة على الأشياء التي يمكن إضافتها في القسم Body

في صفحة الويب و بالتحديد في القسم Body الذي يراه المستخدم يمكنك إضافة الكثير من الأشياء مثل الصور, القوائم, الأزرار و أي شيء يخطر في بالك.
ستتعرف لاحقاً في الدورة على جميع الأشياء التي يمكنك إضافتها في الصفحة و سنطلعك الآن على بعضها.
ملاحظة: نتمنى منك التركيز على طريقة ترتيب الكود و ليس طريقة عمله.
مثال

https://harmash.com/template/images/copy-icon.PNG
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<h2>HTML is easy to learn</h2>
</center>
<p>Hypertext Markup Language (HTML) is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages
such as JavaScript.</p>
<imgsrc="https://harmash.com/html/src/html-5-icon.PNG">
<br><br>
<h3>HTML usage</h3>
<ul>
<li>It's the standard markup language for creating Web pages</li>
<li>Describes the structure of a Web page</li>
<li>Consists of a series of elements</li>
<li>tells the browser how to display the content</li>
</ul>
</body>
</html>

جرب الكود
طريقة كتابة أسماء الوسوم لا تؤثر في HTML

سواء قمت بكتابة أسماء الوسم بأحرف صغيرة ( Small Letters ) أو بأحرف كبيرة ( Capital Letters ) فإن ذلك لا يسبب أي مشكلة.
مثال

https://harmash.com/template/images/copy-icon.PNG
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>This is first paragraph<p>
<P>This is second paragraph<P>
<P>This is third paragraph<p>
</body>
</html>

جرب الكود