شرح لغة HTML - WordPress.comHTML ﺔﻐﻟ ﻲﻫﺎﻣ -1 ﻦﻋ ﻭﺃ ﺎﻳﻭﺪﻳ...

بسم اهللا الرحمن الرحيم

:املحتوياتالعنوانالصفحة

؟ HTML ماهي لغة2مثال تطبيقي3HTML ملخص ألهم الشفرات املستخدمة في لغة14

التعليقات واملالحظات15HTML عيوب لغة16

XML مقدمة عن لغة16

http://aouM150.wordpress.com 17 من1الصفحة املعتصم:إعداد

؟ HTML ماهي لغة- 1HTMLهي اختصار جلملة HyperText Markup Languageوهي لغة وشفرات برمجية يتم كتابتها يدويا أو عن ،

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

:يتم كتابة شفرات وأكواد هذه اللغة بإحدى الطريقتني التالية

1 -WYSIWYG: وهي عبارة عن استخدام ومعناها ماتشاهده هو ماستحصل عليه.What You See Is What You Get هي اختصار لـ

برامج متخصصة في كتابة هذه اللغة (مثل فرونت بيج ومحرر النصوص وورد و درمي ويفر وغيرها) لتقوم بعمل صفحة انترنتبدون احلاجة ملعرفة وكتابة الشفرات البرمجية اخلاصة بهذه اللغة، مبعنى أنه إذا أردنا مثال أن نكتب كلمة بلون معني ، كل ماعلينا

هو كتابة الكلمة ثم نقوم بتظليلها في البرنامج ومن ثم نذهب إلى قائمة األلوان لنختار اللون الذي نريده، وهكذا لباقي عمليات. HTML التنسيق املختلفة، والبرنامج سيقوم بالنيابة عنا بتحويل ماعملناه إلى أكواد وشفرات

برنامج مايكروسوفت وورد هو أوضح مثال على مثل هذه البرامج ، حيث ميكننا عن طريقه عمل صفحة انترنت بالتنسيق الذي – –نريده وكأننا ننسق مستند نصي عادي وبعدها نقوم بحفظ امللف على شكل صفحة ويب ، وسنجد امللف الناجت يحمل امتداد

html.وهو االمتداد اخلاص بصفحات االنترنت التي نستطيع فتحها ومشاهدتها بواسطة املتصفح يفضل استعمال هذا النوع لغير املحترفني في مجال عمل صفحات االنترنت أو ملن اليريد تعلمها ألنها ليست على عالقة مع

. ومييز هذا النوع بأنه يسمح لنا برؤية عملنا مباشرة في البرنامج، وأيضا اليتطلب معرفة شفرات اللغةتخصصه أو مجال عملهالبرمجية.

Explicit Markup -2: هذه هي الطريقة األساسية لكتابة هذه اللغة، وهي عبارة عن كتابة كل شفرة وكل حرف يتعلق بصفحة االنترنت املراد عملها

.ابتداء من الصفر ونهاية بحفظ الصفحة ورؤيتها عن طريق متصفحات االنترنت ومن ثم التعديل على الشفرات إن كان ذلك الزما

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

أو محرر النصوص العادي في الويندوز ،Notepad يتم كتابة الشفرات عن طريق عدة برامج وأشهرها وأبسطها برنامج في املاكنتوش ، نفتح ملف جديد ونكتب الشفرات واألكواد البرمجية فيه ، ومن ثم نعمل حفظ امللف باسم ،TextEdit وبرنامج

حتى نستطيع رؤية ماقمنا بعمله بواسطة متصفح االنترنت..html ونضع أي اسم نريده بشرط أن يحتوي على امتدادميزة هذا النوع بأنه يسمح لنا بالتحكم بشكل أكبر في التصميم من الطريقة األخرى، ألن بعض البرامج التوفر لنا بعض

(حفظ امللف ثم فتحه مبتصفح اخلصائص أو األوامر املتقدمة أو الغير مشهورة، وعيبه هو أن رؤية النتيجة حتتاج لعدة خطواتانترنت) على عكس الطريقة األولى.


: مثال تطبيقي- 2 وسأستخدمها كمثال وسأضيف عليها شعار منتديات طالب2008/2009 الصورة التالية أتت لنا في الواجب الثاني لسنة

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

الصورة هي لصفحة انترنت ولكن قمت بقص األجزاء الزائدة حتى تكون واضحة لنا، املطلوب هو كتابة شفرات برمجية طبعا هذه.. لعمل مثل هذه الصفحة

:أي صفحة انترنت مهما كان حجمها ومهما كان نوعها يجب أن حتتوي على األكواد التالية: أوال<html>

<head>

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

<body> محتوى الصفحة </body></html>

>html<.يدل على أن صفحة االنترنت تبدأ من هنا


>head<يحتوي على شفرة عنوان الصفحة وشفرات أخرى متقدمة لسنا مطالبون مبعرفتها حاليا مثل شفرات لغة XMLولغة اجلافاسكربت.

>title<.يحتوي على عنوان الصفحة الذي نريده أن يظهر في أعلى املتصفح كاسم وعنوان للصفحة >title</.هو شفرة اإلغالق لشفرة العنوان والذي يخبرنا بأنها شفرة نهاية أو إغالق هو رمز املوجود قبل الكلمة /

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

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

:بعض املالحظات الهامة> < أو كلها بأحرف صغيرة مثلHTML< األكواد والشفرات يجب أن نكتبها كلها إمما بأحرف كبيرة مثل●

htmlويجب الثبات على هذا الشيء في جميع أكواد امللف. ويفضل التعود على الكتابة باألحرف الصغيرة ، <دائما.

:يجب علينا املحافظة على ترتيب الشفرات البرمجية املختلطة أو املتداخلة مع بعض، كمثال●

●>p> <center> Hello! </p> </center<

الطريقة هذه خاطئة وسيتم إنقاص درجات منك إذا قمت بعملها، املفترض أن نكتبها بالشكل التالي:●>p> <center> Hello! </center> </p<

قاعدة: آخر شفرة نكتبها هي أول شفرة نغلقها.

زر إدخال أو إنتر اليوجد له أي تأثير على النتيجة النهائية لألكواد البرمجية، يعني لوكتبنا الشفرات واملحتوى كله●موجودة في سطر واحد ، أو قمنا بالضغط على زر إنتر بدون أن نضغط زر إنتر لتصبح جميع الشفرات واألكواد

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

استعمال زر املسافة سيتم احتسابه مرة واحدة فقط سواء ضغطنا عليه مرة واحدة أو خمس مرات، النتيجة●.واحدة

األوامر البرمجية يتم تنفيذها بالتسلسل ، ابتداء من أول أمر موجود في األعلى ، وانتهاء بآخر أمر موجود في ●األسفل.


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

..صورة لشعار منتديات طالب اجلامعة العربية املفتوحة في وسط الصفحة

:الشفرة اخلاصة بعرض الصور هي<img src="...">

:مكان النقط نضع رابط الصورة التي نريد عرضها، وهنا يجب أن نذكر بأنه توجد حالتني لعرض الصور

– وهي إذا كانت الصورة موجودة في صفحة انترنت أخرى ونريد أن نعرضها في صفحتنا وهذه الطريقة مكروهه ألنها:األولى

–تقوم بسرقة حتميل البيانات من املوقع اآلخر وتقوم بتضليل برامج حساب عدد الزوار وغيرها وفي هذه احلالة نقوم بوضع

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

إذا كانت الصورة موجودة لدينا في احلاسب أو في السيرفر الذي سنرفع عليه صفحة االنترنت، وطريقتها يجب أن نضع:الثانيةالصورة في نفس املجلد الذي توجد فيه صفحة االنترنت ، مثال لو كان ملف صفحة االنترنت الذي نقوم بتصميمه موجود في

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

اآلن بعد ماوضعنا الصورة وامللف في نفس املجلد نأخذ اسم الصورة مع امتدادها ونضعها مكان النقط احلمراء ، الصورة في. لذلك نعيد كتابة شفرة عرض الصورة لتصبح بالشكل التالي:aoua.jpg حالتنا هذه اسمها

<img src="aoua.jpg">

.. طيب اآلن عرفنا كيف نعرض الصورة ، ولكن تبقا أن جنعلها تظهر في وسط الصفحة

.>center< الشفرة اخلاصة بالتوسيط هي

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

<center> <img src="aoua.jpg"> </center>

:طبعا هذه الشفرة نكتبها في مكان املحتوى الذي حددته في الشفرات األساسية ، ليصبح عملنا حتى اآلن كالتالي<html>

<head><title>My first web page!</title>

</head><body>

<center> <img src="aoua.jpg"> </center></body>

</html>

Luke Howard اآلن انتهينا من أول خطوة في الصفحة، اخلطوة القادمة هي كتابة عنوان القطعة


:العناوين توجد لها ست مقاسات أو أحجام ، وتكتب شفرتها كالتالي

<h1>عنوان كبير جدا</h1><h2>عنوان كبير</h2><h3>عنوان متوسط</h3><h4>عنوان أصغر</h4><h5>عنوان صغير</h5><h6>عنوان صغير جدا</h6>

.. كلما كبر الرقم كلما صغر حجم العنوان

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

<h1>Luke Howard</h1>

.وفي هذه احلالة العنوان متواجد على اجلهة اليسرى لذلك النحتاج إلى شفرة لتحديد املكان ألن املكان االفتراضي هو اليسار

.الشفرة السابقة نضيفها بعد شفرة عرض الصورة، ألننا لو وضعناه قبلها سيظهر العنوان قبل الصورة ونحن النريد ذلك

:سيصبح ماقمنا بعمله حتى اآلن كالتالي

<html>

<head>

<title>My first web page!</title>

</head>

<body>



</body>

</html>

:اآلن ننتقل للخطوة التالية وهي كتابة القطعة النصية التالية وتنسيقها حتى تصبح مشابهة للصورة التي لدينا

Luke Howard (1773-1864) was a British manufacturing chemist who was fascinated byweather phenomena. He provided the basis of the system of classifying clouds which westill use today, over 200 years later.

Howard gave three "modifications" of clouds

* Cumulus (from the Latin for heap) * Stratus (from the Latin for a layer) * Cirrus (from the Latin for a curl)


To these he added Nimbus, from the Latin for rain, to denote a rain or snow cloud.

Howard's scheme was first published in a paper he gave to the Askesian Society in 1802.

.. توجد أكثر من طريقة لكتابة أي شفرة برمجية ، وذلك يعتمد على فكر املبرمج ورؤيته للمشروع

:سأشرح طريقتني أرى بأنهم األفضل للمبتدئني لتطبيق هذا املثال حتى يستوعبوا اللغة أكثر إن شاء اهللا

:الطريقة األولىسنعتبر أن القطعة النصية حتتوي على خمس أجزاء تفصل بينهم السطور الفارغة، مبعنى أن لدينا أربع أجزاء نصية وجزء

.يحتوي على قائمة

:سنضع كل جزء نصي بني الشفرات الدالة على وجود نص كالتالي<p> النص سيكون هنا </p>

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

:لذلك سيصبح عملنا كالتالي

<p>Luke Howard (1773-1864) was a British manufacturing chemist who was fascinated by

weather phenomena. He provided the basis of the system of classifying clouds which we

still use today, over 200 years later.</p>

<p>Howard gave three "modifications" of clouds</p>

Cumulus (from the Latin for heap)

Stratus (from the Latin for a layer)

Cirrus (from the Latin for a curl)

<p>To these he added Nimbus, from the Latin for rain, to denote a rain or snow

cloud.</p>

<p>Howard's scheme was first published in a paper he gave to the Askesian Society in

1802. </p>

; قوائم مرتبة (أو مرقمة)طيب اآلن وضعنا األجزاء النصية في شفراتها وتبقى لدينا القائمة، القوائم في هذه اللغة تنقسم لقسمنيوقوائم عشوائية (أو غير مرتبة):


.Ordered List ، وهي اختصار لـ>ol< القوائم املرتبة شفرتها هي.1

.Unordered List ، وهي اختصار لـ>ul< القوائم الغير مرتبة شفرتها●

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

<ul>Cumulus (from the Latin for heap)Stratus (from the Latin for a layer)Cirrus (from the Latin for a curl)</ul>

، حتى مييز البرنامج كم عنصر>li< ما قمنا به اليكفي لعرض القوائم ، ألنه يجب علينا حتديد كل عنصر في القائمة بشفرةيوجد في هذه القائمة ، لذلك سنقوم بوضع شفرة عناصر القائمة على العناصر الثالثة املوجودة لدينا لتصبح بالشكل التالي:

<ul><li>Cumulus (from the Latin for heap)</li><li>Stratus (from the Latin for a layer)</li><li>Cirrus (from the Latin for a curl)</li>

</ul>

:اذا جمعنا ماقمنا به حتى اآلن سنحصل على التالي

<html><head>

<title>My first web page!</title></head><body>

<center> <img src="aoua.jpg"> </center><h1>Luke Howard</h1><p>Luke Howard (1773-1864) was a British manufacturing chemist who was

fascinated by weather phenomena. He provided the basis of the system of classifyingclouds which we still use today, over 200 years later.</p>

<p>Howard gave three "modifications" of clouds</p>


</ul>

<p>To these he added Nimbus, from the Latin for rain, to denote a rain orsnow cloud.</p>

<p>Howard's scheme was first published in a paper he gave to the AskesianSociety in 1802. </p>

</body></html>


:الطريقة الثانية ،>br< واحدة، وعند الرغبة في نزول سطر نستعمل شفرة>p< هي أن نضع كل الكالم املوجود في الصورة في داخل شفرة

هذه الشفرة مهمتها هي مثل أمر إنتر في برنامج حترير النصوص ، يعني ستجعل النص ينزل لسطر جديد.

:لو قمنا اآلن بحفظ امللف وثم فتحناه مبتصفح انترنت سنحصل على النتيجة التالية

. تبقى أن نقوم بالعمليات التنسيقية التالية حتى جنعل عملنا يتطابق مع الصورةاآلن تقريبا قطعنا ثلثي املشوار وتبقا الثلثاألولى:

املوجودة في القطعة األولى لتكون باخلط السميك.Luke Howard تغيير نوع اخلط لـ.1) املوجودة في القطعة األولى لتصبح باخلط املائل.1773 – 1864( تغيير نوع خط األرقام.2ملوجودة في القطعة الثانية لتصبح باخلط السميك. اmodifications تغيير نوع اخلط لكلمة.3 املوجودة في القطعة األخيرة.Askesian Society إضافة رابط لصفحة انترنت أخرى على كلمات.4

.bold اختصارا لكلمة>b< نبدأ بالعملية األولى، وجلعل نوع اخلط يكون باخلط السميك نستعمل الشفرة

:لذلك نضيفها على الكلمات لتصبح بالشكل التالي


<b>Luke Howard</b>

، وأضفنا قبلهم وبعدهم شفرات جلعل اخلط سميك.>p< طبعا الكلمتني موجودين في مكانهم بني شفرتهم األساسية

.italic اختصارا لكلمة>i< العملية الثانية بنفس الطريقة، وشفرة تغيير اخلط ليصبح مائل هي

:نضيفها على األرقام لتصبح بالشكل التالي

<i> (1773–1864) </i>

:العملية الثالثة هي نفس األولى، فيصبح لدينا

<b>modifications</b>

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

<a href="..."> الكالم الذي نرغب أن نضع عليه رابطا لصفحة انترنت أخرى </a>

يكون الكالم الذي نريد الكتابة امللونة باألحمرمكان النقط احلمراء نضع الرابط الذي نريد (بني عالمات التنصيص) ، وفي مكان أن نضيف إليه رابط لصفحة انترنت أخرى، وسنعتبر في حالتنا هذه بأن الرابط الذي سنتستخدمه رابط محلي موجود في نفس

، لذلك ستصبح لدينا الشفرة اآلتية:Askesian.html املجلد الذي توجد فيه الصفحة التي نقوم بتصميمها حاليا باسم

<a href="Askesian.html">Askesian Society</a>

:اآلن انتهينا من تنسيق النص، والنتيجة الكاملة ملا قمنا به هي

<html>

<head>

<title> My first web page! </title>

</head>

<body>



<p><b>Luke Howard</b> <i>(1773-1864)</i> was a British

manufacturing chemist who was fascinated by weather phenomena. He provided the basis

of the system of classifying clouds which we still use today, over 200 years later.</p>

<p>Howard gave three "<b>modifications</b>" of clouds</p>


<ul>

<li>Cumulus (from the Latin for heap)</li>

<li>Stratus (from the Latin for a layer)</li>

<li>Cirrus (from the Latin for a curl)</li>

</ul>

<p>To these he added Nimbus, from the Latin for rain, to denote a rain or

snow cloud.</p>

<p>Howard's scheme was first published in a paper he gave to the <a

href="Askesian.html">Askesian Society</a> in 1802. </p>

</body>

</html>

على سبيل املثال ، وثم قمنا بفتح امللف عن طريق متصفح االنترنتfirst_web_page.html ولو قمنا اآلن بحفظ امللف باسمسنحصل على هذه النتيجة:


.وهي نفس النتيجة املطلوب حتقيقها في سؤال الواجب، وبهذا نكون انتهينا من عمل أول صفحة انترنت في مسيرتنا

:أحب أن أذكر هنا بأن تنسيق كتابة الشفرات ألي لغة برمجة شيء ضروري جدا لسببني

(كاملدرس). ألنها جتعل قراءة الشفرات أسهل بكثير ملن أراد االطالع عليها.1.ألنها تسهل علينا تصحيح األخطاء إذا حدثت أو تطوير الشفرات فيما بعد.2

:على سبيل املثال ، انظر لهذه األكواد

<html><head><title> My first web page! </title></head><body><center><img src="aoua.jpg"> </center><h1>Luke Howard</h1><p><b>LukeHoward</b> <i>(1773-1864)</i> was a British manufacturing chemist who wasfascinated by weather phenomena. He provided the basis of the system of classifyingclouds which we still use today, over 200 years later.</p><p>Howard gave three"<b>modifications</b>" of clouds</p><ul><li>Cumulus (from the Latin forheap)</li><li>Stratus (from the Latin for a layer)</li><li>Cirrus (from the Latin for acurl)</li></ul><p>To these he added Nimbus, from the Latin for rain, to denote a rainor snow cloud.</p><p>Howard's scheme was first published in a paper he gave to the <ahref="Askesian.html">Askesian Society</a> in 1802. </p></body></html>

:وانظر لهذه األكواد<html>

<head><title> My first web page! </title>

</head><body>

<center> <img src="aoua.jpg"> </center><h1>Luke Howard</h1><p><b>Luke Howard</b> <i>(1773-1864)</i> was a British

manufacturing chemist who was fascinated by weather phenomena. He provided the basisof the system of classifying clouds which we still use today, over 200 years later.</p>

<p>Howard gave three "<b>modifications</b>" of clouds</p>


</ul>

<p>To these he added Nimbus, from the Latin for rain, to denote a rain orsnow cloud.</p>

<p>Howard's scheme was first published in a paper he gave to the <ahref="Askesian.html">Askesian Society</a> in 1802. </p>

</body></html>


أي االثنني أريح للعني وأسهل للقراءة والفهم؟

سيعرضون نفس النتيجة بالضبط! ألني كما ذكرت سابقا: بالتأكيد الثاني ألنه منسق بشكل واضح ، مع العلم بأن كل الشفرتني ال يؤثر على النتيجة النهائية للعمل.tabs الضغط على زر إنتر أو مسافة أو حتى استخدام زر

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


HTML ملخص ألهم الشفرات املستخدمة في لغة- 3اسم الكود الكود استخدامه كود اإلغالق

Header 1 <h1> عنوان كبير جدا </h1>

Header 2 <h2> عنوان كبير </h2>

Header 3 <h3> عنوان متوسط </h3>

Header 4 <h4> عنوان متوسط أصغر من السابق </h4>

Header 5 <h5> عنوان صغير </h5>

Header 6 <h6> عنوان صغير جدا </h6>

Paragraph <p> لعرض القطع النصية </p>

Bold <b> جلعل اخلط سميك </b>

Italic <i> like thisجلعل اخلط مائل </i>

Ordered List <ol> لعمل قوائم مرتبة ومرقمة </ol>

Unordered List <ul> لعمل قوائم غير مرتبة </ul>

List Item <li> لتحديد كل عنصر في القائمة </li>

Image Source <img src="picture.jpg"> لعرض صورة في الصفحة اليوجدHyperText

Reference<a href="webpage.html">

لوضع رابط على كالم محدد، نكتب الكالمبني شفرتي البداية والنهاية

</a>

Name <a name="...">لوضع عالمة على أحد الكلمات في

الصفحة</a>

HyperText

Reference<a href="#..."> لالنتقال إلى عالمة في نفس الصفحة </a>

Center <center> لتوسيط النص أو الصورة أو غيره </center>

Right <right>لتوجيه النص أو الصورة إلى ميني

الصفحة</right>

Left <left>لتوجيه النص أو الصورة إلى يسار

الصفحة</left>

Break <br>

للنزول في الصفحة مبقدار سطر، مثلعمل زر اإلدخال أو إنتر في برامج حترير

النصوصال يوجد

مرتبطتني ببعض وسأذكر طريقة عملهم باختصار.. الشفرتني امللونتني باألخضر

في بعض صفحات االنترنت ، تكون الصفحة طويلة جدا وحتتوي على عدة عناوين ونقاط، للتسهيل على القارئ يفضل وضع قائمةباملحتويات في أعلى الصفحة وفي حالة الضغط على أحد العناوين املوجودة في القائمة سينزل املتصفح مباشرة إلى العنوان الذي


. لرؤية مثال مباشر على هذه الطريقة زوروا هذا الرابط:ضغطنا عليهhttp://aoum150.wordpress.com/2009/08/08/javascript_lesson

– –لو أخذنا عنوان املقدمة كمثال ، فأنا ذهبت إلى عنوان "املقدمة" وليست الكلمة املوجودة في قائمة املحتويات ووضعت عليها

، فأصبح الكود اخلاص بها بهذا الشكل:introduction عالمة باسم <a name="introduction"> قدمةامل </a>

. اخلطوة التالية هي الذهاب لكلمة "املقدمة"اآلن انتهيت من اخلطوة األولى وهي وضع عالمة في املكان الذي أريد أن أنتقل إليهاملوجودة في قائمة املحتويات ، ومن ثم أضع عليها رابط ينتقل إلى املكان الذي وضعت فيه العالمة قبل قليل ، بهذا الشكل:

<a href="#introduction"> قدمةامل </a>

# ، يجب أن تكون نفس اسم العالمة التي وضعناها بالضبط. طبعا الرابط أو الكلمة املوجودة بعد عالمةوميكننا أن نضع مثال عالمة في بداية الصفحة ، حتى نستطيع أن نضيف في أسفل الصفحة رابط للعودة إلى أعلى الصفحة إذا

. وهكذا لبقية احلاالت.كانت الصفحة طويلة

:نصيحة

_ أوdashes – التستعملوا املسافات قدر اإلمكان ، واستعملوا بدال منهاHTML في العالمات وأسماء صفحات

underscores.

: التعليقات واملالحظات- 4التعليقات هي شيء أساسي في أي لغة برمجة ألن لها فوائد كثيرة ، منها أنها توضح لنا الفائدة والغرض من كتابة أمر معني

- إذا عاد وبالتالي يستطيع من يقرأ األمر أن يعرف سببه ويفهمه بسهولة ، وأيضا يساعد املبرمج الذي كتب األمر البرمجي -لالطالع عليه ليصحح بعض األخطاء بعد مرور فترة زمنية طويلة في تذكر سبب كتابته والفائدة منه ، وبالتالي يستطيع التعديل

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

:التعليقات في هذه اللغة نكتبها بالطريقة التالية

<-- هذا الكالم لن يظهر في املتصفح وسيعتبر تعليق أو مالحظة --!>


:HTML عيوب لغة- 5.يتضح لنا مما سبق بأن كل ماتقوم به هذه اللغة هو مجرد تنسيق وحترير صفحات االنترنت وربطها مع بعض وعرض الصور

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

البحث أسهل وأكثر دقة وفعالية.

:XML مقدمة عن لغة- 6 ، وهي لغة مت ابتكارها لتساعد على تخطي عيوب لغةeXtensible Markup Language هي اختصار لـXML كلمة

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

: اسم الكتاب ، اسم الكاتب ، سعر الكتابفمثال لو كان لدينا موقع لبيع الكتب ، طبعا كل كتاب سيحتوي على معلومات كثيرة مثل لوحدها في تصميم هذا املوقع ، فإن محركاتHTML ، دار النشر ، تاريخ الطبعة ، عدد الصفحات ، وغيرها. لو استعملنا لغة

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

تتعلق بها ، وبالتالي أصبحت نتائج البحث حاليا أكثر دقة وفعالية ، حيث أصبحت قادرة على وضع مقارنة بني األسعار وخياراتلترتيب الكتب حسب حداثتها وغيرها من امليزات األخرى.

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

األساسية.HTML وال تستطيع االستغناء عنها ، ألن شفراتها وأكوادها تكون من ضمن شفراتHTML مكملة للغةXML لغة

:للمعلومية، املنهج ذكر بأننا غير مطالبني بتعلم تفاصيل هذه اللغة“You are not expected to learn the details of XML.”

Source: M150, Unit 4, Section 6, Page 54


مت بحمد اهللا

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

أخوكم املعتصم


شرح لغة HTML - WordPress.comHTML ﺔﻐﻟ ﻲﻫﺎﻣ -1 ﻦﻋ ﻭﺃ ﺎﻳﻭﺪﻳ...

Documents

Transcript of شرح لغة HTML - WordPress.comHTML ﺔﻐﻟ ﻲﻫﺎﻣ -1 ﻦﻋ ﻭﺃ ﺎﻳﻭﺪﻳ...