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

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

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

(2) لغة الترميز - html

مقدمة

عملية إنشاء المواقع عملية ليست صعبة. يمكن للجميع تعلم كيفية إنشاء المواقع.

ما الذي تحتاجه لإنشاء موقعك؟

الأدوات التي تحتاجها لإنشاء موقعك مجانية وغالبا انت تمتلكها في حاسوبك.

· ستحتاج إلى "متصفح" (browser)، وهو البرنامج الذي يمكنك من تصفح مواقع الويب والتجول فيها مثل Google-Chrome, Firefox, Internet-Explorer

· وستحتاج إلى محرر نصي بسيط، يمكنك أن تستخدم المفكرة "Notepad"

توجد عدة برامج تساعدك في كتابة الكود بشكل بسيط وسهل ومنها: brackets, notepad++

عند إنشاء موقعك انت لا تحتاج إلى تكون متصلاً بالشبكة.

عند الانتهاء من كتابة كود صفحة HTML عليك أن نقوم بحفظ النص المكتوب بملف يحمل الاسم الممتد ‎html. ، بمعنى اسم صفحة الويب يجب أن تنتهي بصيغة .html

مثال math.html

هناك صفحة ويب خاصة اسمها index.html وهي تكون الصفحة الرئيسية للموقع،

أي صفحة بداية الموقع (هي الصفحة التي تظهر أولاً قبل باقي الصفحات).

لكي ترى كود الـ HTML لأي صفحة تزورها عليك أن تضغط الزر الأيمن للفأرة ومن القائمة تختار "عرض مصدر الصفحة" (View Source page)

ما هي لغة html

· Html – هي ليست لغة برمجة.

· هي لغة ترميز النص، لغة وصفية (تَستخدم الوسوم الترميزية - tags).

· تُستخدم لإنشاء وتصميم صفحات ومواقع الإنترنت (الويب).

إذا أردت إنشاء موقع فلا توجد طريقة أخرى غير استخدام لغة html،

· Html عبارة عن أوامر وتعليمات موجهة لمتصفح الأنترنت،

فهي تشكل الهيكل الرئيسي لصفحات الويب ومحتوياتها،

تعطى المتصفّح وصفا لكيفيّة عرضه لمحتويات صفحة الويب،

فهي تعلمه بأنّ هذا عنوان رئيسي وتلك فقرة وغير ذلك الكثير (كالجداول والصور).

يقوم المتصفح بترجمة السطور البرمجيّة بلغة html إلى محتوى مرئي سهل القراءة لزوار الموقع.

· Html هي اختصار لــ Hypertext Markup Language

وتعني لغة ترميز النص التشعبي (لا تهتم لمعناه).

العنصر في لغة html (elements)

· صفحة html (وتدعى صفحة ويب أو صفحة انترنت) هي صفحة تحتوي على نصوص، وجداول وصور وغيرها. وهذه النصوص والكائنات مكونة من عناصر html.

· عناصر الـ html يتم تحديدها من خلال وسوم الـــ html المستخدمة.

· تقوم وسوم html بتسمية أجزاء المحتوى مثل "العناوين"، "الفقرة"، "الجدول" والخ...

· العنصر يمكن أن يحتوي على معلومات، نص، جدول، صورة أو أن يكون فارغ.

· تتألف لغة html من مجموعة من العناصر تُستخدَم لاحتواء الأجزاء المختلفة من المحتوى لتجعله يظهر بطريقة معينة (وبشكل أبسط لتحديد طريقة عرض اقسام الصفحة).

· العنصر هو من مكونات وأقسام صفحة الإنترنت، وهو مكون من وسوم (tags).

فما هو الــ tag?

الوسوم ــ tags

· تستخدم الـ html ما يعرف بالوسوم ''tags'' لإصدار التعليمات إلى المتصفّح،

· وسوم html تستخدم لتحديد وتعيين عناصر الـ html.

· يمكن استخدام الوسوم لتنسيق فقرة، أو إدراج صورة أو جدول أو إضافة رابط تشعبي لكلمة أو لصورة يشير لموقع آخر، كما يمكن استخدامها لجعل الكلام مائل أو لتصغير الخط وتكبيره.

· وسوم الـ html توضع بين العلامتين: < >

(يتم أحاطتها بالرمزين < و >)

· كما تري كل وسم مكون من قسمين (نوعين):

وسم البداية و- وسم النهاية

(وسم الفتح وسم الإغلاق).

ترفق لوسم النهاية عادة الإشارة "/"

وسم الإغلاق	وسم الفتح
</html>	<html>
</body>	<body>
</p>	<p>
</h1>	<h1>

مثال:

وسم تشكيل الفقرة:	<p> فقرة </p>
وسم العنوان:	<h1> النص </h1>
وسم عنوان الصفحة:	<title> عنوان الصفحة </title>

انتبه: لا تضع فراغ بين > ورمز الوسم.

مثلا: <p > غير صحيح، بينما الوسم <p> صحيح.

كتابة كود html يمكن أن يكون بأحرف صغيرة أو كبيرة.

فوسوم الــ html غير حساسة لحالة الأحرف

(لا فلاق بين <h1> و <H1>).

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

توجد وسوم لا يوجد لها وسم نهاية،

مثل:

وسم الانتقال الى سطر جديد <br />

وسم الصور <img>

مبنى العنصر (element)

العنصر في لغة الــ html مكون من وسم البداية و- وسم النهاية، مع إدراج المحتوى بينهما كالتالي:

<tagname> ... محتوى العنصر </tagname>

مثال:

مثال لعنصر الفقرة، المكون من:

وسم فتح الفقرة، وسم إغلاق الفقرة، وبينهما محتوى الفقرة.

<p> محتوى الفقرة </p>

<p> Hello my pupils </p>

وسم الإغلاق ومحتوى الفقرة وسم الفتح

(Element)عنصر

مثال:

عنصر العنوان، مكون من:

وسم فتح، وسم إغلاق، وبينهما محتوى العنوان.

<h1> this is a big title</h1>

عنصر html هو كل ما يقع من وسم البداية حتى وسم النهاية.

بتجميع وسم الفتح و- وسم الإغلاق نحصل على عنصر html.

· (إثراء وتوسع) العنصر يمكن أن يكون فارغاً وعندها وسم الإغلاق غير ضروري. مثال وسم <br>

خصائص (سمات، attribute) الأوسمة في html

· كلّ عنصر في لغة html لديه خصائص تتحكّم في كيفيّة ظهوره،

مثلا لعنصر الفقرة (<p>) توجد خصائص تتحكم بلون الخط وحجمه واتجاهه.

· لكل وسم (tag) عدة خصائص (سمات).

وهي تختلف من وسم لأخر ولكل منها قيم ووظائف محددة.

· خصائص الوسم توسع من وظيفة الوسم وعمله.

· الخصائص تزودنا بمعلومات إضافية حول عناصر الـــ html الذي في الصفحة.

· إذا الوسم لم يحتوي على خصائص، عندها تؤخذ بالاعتبار القيم الافتراضية.

الخصائص في الوسم دائماً تأتي على الشكل التالي:

name = "value"

اسم-الخاصية = "القيمة"

· الخصائص تكون موجودة دائما في وسم البداية (وسم الفتح)، على الشكل التالي:

<tagname name = "value" > ... المحتوى هنا</tagname>

مثال:

الوسم الذي يحدد الجداول في ملف الـ html هو الوسم <table>. وبإضافة السمة border نخبر المتصفح أن هذا الجدول له إطار (برواز).

< table border="0" >

· يمكن وضع عنصر بداخل عنصر آخر (جعلها متداخلة)

مثال:

<p> Hello All <strong> welcome! </strong> </p>

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