صفحة البيت | מס טלפון 04 – 6046227 | מס' פקס 04 – 8303539

كود كتابة صفحات المواقع – h t m l

موقع كتابة الكود (1) | (2) | (3) | (4)

(3) وسوم أساسية

v مبنى صفحة html

<html>

<head>

<title> عنوان الصفحة </title>

</head>

<body>

التعليمات والمحتوى مثل

نص، صور، جداول

</body>

</html>

شرح وظيفة وسوم الصفحة:

يوجه المتصفح لفتح مستند html	<html> ... </html>
منطقة الإعدادات العامة. وهو يمثل مجموعة من البيانات الوصفية حول المستند بما في ذلك الوصلات أو تعريفات والبرامج النصية والسكريبتات وانماط الـ CSS.	<head> ... </head>
لتعيين عنوان المستند (الصفحة) كما يظهر في شريط عنوان المتصفح.	<title> ... </title>
لفتح الإطار الذي يشكل نص المستند الذي يتم عرضه للمستخدم. وهو يمثل محتوى وثيقة html ولابد ان تكون كل العناصر الظاهرة في الجسم داخلة.	<body> ... </body>

v تحديد عنوان الصفحة

يتم تحديد عنوان الصفحة بواسطة الوسم: <title> ... </title>

هذا الوسم يجب ان يتواجد في داخل الوسم: <head>

مثال:

<html>

<head>

<title> mathematics site </title>

</head>

<body>

</body>

</html>

v العناوين (כותרות, titles)

لتعيين حجم العنوان، نستخدم أحد الوسوم من <h1> حتى <h6>

يوجد 6 احجام حيث <h1> يحدد أكبر مقاس للعنوان بينما الوسم <h6> يحدد أصغر مقاس.

مثال:

انسخ الكود التالي إلى المحرر وشاهد ماذا ينتج.

النتيجة:

Hi my Friends

This is standard text-p

<html>

<body>

<h1> Hi my Friends <h1/>

<h2> Hi my Friends <h2/>

<h3> Hi my Friends <h3/>

<h4> Hi my Friends <h4/>

<h5> Hi my Friends <h5/>

<h6> Hi my Friends <h6/>

This is standard text-p

</body>

</html>

· عند استعمالك للعناوين انتبه أنها وسوم مختلفة، بحيث <h1> يجب أن يتم أغلاقها بـــ </h1>،

ولا يمكن اغلاقها باستخدام </h2>

· من خلال أحد هذه الوسوم الستة نرى أن العناوين تقوم بطريقة آلية بإضافة

سطر فارغ قبل وبعد العنوان.

تمرين:

انسخ الكود التالي إلى المحرر وشاهد ماذا ينتج.

لا يوجد عنوان رقمه 7،

المتصفح تجاهل الأمر، كأنه لم يوجد.

قارن بين الأمرين الأخيرين.

هل يوجد اختلاف بينهما؟

... لا يوجد اختلاف بين الأمرين الأخيرين.

<html>

<body>

<h6>

مرحبا يا أصدقائي

<h6/>

<h7>

مرحبا يا أصدقائي

<h7/>

مرحبا يا أصدقائي

</body>

</html>

· تعيين الفقرات - <p> … </p>

· لتعيين فقرة من نص تظهر في الصفحة، نستعمل الوسم <p>

· الوسم يؤدي إلى تخصيص وحجز مكان (مساحة) من أجل الفقرة،

ويلزم المتصفح بشكل آلي بإضافة سطر فارغ قبل وبعد كل فقرة.

<p> نص الفقرة </p>

مثال:

النتيجة:

This is my first web page

How exciting

<html>

<body>
<p> This is my first web page </p>

<p> How exciting </p>

</body>

</html>

v الانتقال إلى سطر جديد: <br>

انسخ الكود التالي إلى المحرر وشاهد ماذا ينتج.

النتيجة:

<html>

<body>

my first page

this is test

nice day

</body>

</html>

النص تم طباعته في سطر واحد، بالرغم من انه مكتوب في 3 أسطر.

المتصفح لا يهتم بالفراغات ولا بالأنتقال إلى سطر جديد.

<br> وظيفته إنهاء السطر الحالي وبالبدء من أول السطر،

بسطر جديد. عادة نضع هذا الوسم في أخر السطر.

لهذا الوسم لا يوجد وسم اغلاق.

(<br> من كلمة break)

your text here <br>

مثال

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

النتيجة:

<html>

<body>

my first page <br>

this is test <br>

nice day

</body>

</html>

إضافة مسافات (فراغات) بين الإشارات -  

مثال:

انسخ الكود التالي إلى المحرر وشاهد ماذا ينتج.

my first page
my first age

<html>

<body>

my first page <br>

my &nbsp; &nbsp; first       age

</body>

</html>

لقد أدخلنا فراغات (مسافات) بين الأحرف.

اضافة خط افقي: <hr>

الخط الأفقي يستخدم لتحديد استراحة للانتقال لموضوع جديد.

مثال

انسخ الكود التالي إلى المحرر وشاهد ماذا ينتج.

<html>

<body>

<p> HTML is a language for describing web pages. </p>

<hr>

<p> CSS defines how to display HTML elements. </p>

</body>

</html>

النتيجة:

تحديد كتلة (bock) – الوسم div

التقسيم والتوزيع

· تحديد كتلة (bock) في الصفحة

· احتواء محتويات كالنصوص والجداول والصور

· يشبه وسم الفقرة.

<div>

… مضمون ومحتوى المقطع

</div>

الــ dev:

· هو عنصر من عناصر الــ block

· هو محتوى Container

· في الــ dev نضع بداخله اي شيء نريد تنظيمه، مثل فقرات، جداول، صور وأدوات وغيرها.

· وظيفة هذا الوسم يشبه وسم الفقرة ولكنه "أقوى" منه وله خصائص واستعمالات هامة.

· وسم الــ <div> هام جدا لدرجة اننا لا نستطيع الاستغناء عنه، فهو يجمل الشكل ونستخدمه في تنظيم وترتيب الصفحة مثل الجدول.

· الاستخدام الرئيسي للوسم div هو احتوائه العديد من عناصر لغة html. فتقريبا جميع عناصر لغة html يمكن ادراجها داخل الوسم div مثل <h1>-<h6> , <p> , <img> , <a>

· الــ <div> نضعه في اي مكان في جسم الصفحة بداخل <body>

مثال:

انسخ الكود التالي إلى المحرر وشاهد ماذا ينتج.

<html>

<body>

<div>

<h1> web course </h1>

<p> html short for Hypertext markup language </p>

</div>

</body>

</html>

النتيجة:

إضافة تعليقات وملاحظات داخل صفحة html

كتابة التعليقات والملاحظات:

· المتصفح سيتجاهل نص التعليق والملاحظات. بمعنى أنها لن تظهر أثناء عرض الصفحات.

· يمكنك استخدام التعليقات أو الملاحظات لشرح الكود إذا كان هناك من يساعدك في تحرير صفحات الـ html، أو لتذكرك بعمل الكود إذا أردت العودة إليه بعد فترة.

تعلمنا

·	الانتقال إلى سطر جديد	<br>
·	تعيين الفقرة	<p> … </p>
·	تعيين حجم نص العناوين	<h1> … </h1>
·	وضع سطر افقي، فاصل	<hr>

اختبار

اختبار - أساسي

---------------------------------------------------------------------------------------------------------------------------------

1) من هي الشركة التي أنشأت لغة الـــ HTML؟

a) جوجل

b) مايكروسوفت

c) شركة موزيلا

d) منظمة الويب العالمية

---------------------------------------------------------------------------------------------------------------------------------

2) لغة HTML هي اختصار لكلمة؟

a) Hyper Text Markup Logo

b) Hyper Time Markup Language

c) Hyper Text Markup Language

---------------------------------------------------------------------------------------------------------------------------------

3) يجب اغلاق وسم الـ HTML بهذه الطريقة؟

a) </ html <

b) <// html >

c) </ html />

---------------------------------------------------------------------------------------------------------------------------------

4) أي عنصر في html يُستخدم لتحديد رأس المستند؟

a) <top>

b) <head>

c) <header>

d) <section>

---------------------------------------------------------------------------------------------------------------------------------

5) اي من الوسوم التالية هو وسم عنوان الصفحة؟

a) <html> </html>

b) <title> </title>

c) <head > </head>

d) <h> </h>

---------------------------------------------------------------------------------------------------------------------------------

6) يمكن عمل سطر جديد بواسطة الوسم:

a) <br>

b) newline

c) <pr>

d) لا يوجد اجابه صحيحة

---------------------------------------------------------------------------------------------------------------------------------

7) ما هو الوسم الخاص بعمل فقرة (paragraph)

a) b

b) p

c) s

d) لا يوجد اجابه صحيحه

---------------------------------------------------------------------------------------------------------------------------------

حلول:

1) d	2)c	3) a	4) b	5) b	6) a
7) b	8) a

مدرسة قفطان حلبي الإعدادية – دالية الكرمل - Copywrite – 2019