دورة للغة الــHTML

[MR.A_H_M_E_D]

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

السلام عليكم ورحمة الله وبركاته

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

HTML للغة

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

HTMLأساسيات لغة الــ

مقدمة

مع الانتشار السريع لاجهزة الحاسب والتقدم المطرد فى تقنيات الشبكات والظهور السريع لشبكة الانترنت ظهرت الحاجة اٍلى تطوير تقنيات ولغات لنشر المواقع على

المعروفة اختصار بالويبWorld Wide Web الشبكة العنكبوتية

HTML وتعتبر لغة

من أهم اللغات المستخدمة فى تصميم المواقع على شبكة الانتر نت ويستعرض هذا الجزء المبادىء الأساسية لشبكة الويب ولغة

HTML

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

HTMLالاٍنترنت ولغة الـــ



(URL) Uniform Resource Locator يتم تمييز الصفحات على شبكة الانترنت بعنوان مميز لها يسمى

ويمكنك بسهولة أن تعرض اى صفحة فى مستعرض الويب اٍذا كنت تعرف عنوانها

من عدد من الاجزاء URLويتكون عنوان

أولها يحدد البروتوكول المستخدم للوصول اٍلى الصفحة وثانيها هو اسم الحاسب الخادم ويعرف أيضا باسم المجال وهو يحدد اسم الخادم الذي يحفظ صفحة الويب بعد ذلك ياتى مسار الصفحة على هذا الخادم فعلى سبيل المثال فى العنوان

Http://www.a3malnet.uni.cc/droos.html

http سيكون

هو اسم البرتوكول

هو اسم المجالwww.a3malnet.uni.ccو

هو المسار droos.html و

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

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

HTMLوتعتبر لغة

(Hyper Text Markup Language)اختصار

,لغة تربط للنصوص التشعيبية

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

فى البداية لكى يتمكن العلماء من اٍنشاء مستندات نصية تحتوى على أوامر تنسيق أساسية تسمى(ترميز

وارتباطات اٍلى معلومات أخرى تسمى نصوص تشعبية او ارتباطات تشعبية

وعلى سبيل المثال يمكن أن يحتوى مستند عن الهزات الأرضية على ارتباط اٍلي مستندات أخرى تتحدث عن نفس الموضوع

. كتبها علماء أخرون

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

اعتبارات اٍنشاء صفحات الويب على شبكة الانترنت

:هناك العديد من الاعتبارات التى يجب أن تضعها فى ذهنك عند اْنشاء صفحات الويب منها

التأكد على المعلومات الهامة فى الصفحة

التأكد من حجم الملفات

تحديد طول الصفحة وتجنب الصفحات الطويلة

تجنب التعليمات التى تعتمد على مستعرض معين

الأخذ فى الاعتبار حقوق النشر للنصوص المنقولة نصاً

تضمين معلومات الاتصال بالمواقع والصفحات الأخرى وللعناوين الالكترونية

استخدام التحذيرات عن محتوى الصفحات

اٍنشاء قائمة بالأسئلة المتكررة والتى عادة ما يسأل عنها الزائرون

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

HTML أساسيات

tag تعتبر العلامة

HTML فى لغة

< >أمراً يتم توجيهه لمستعرض الويب حول كيفية تنسيق عناصر الصفحة وكل علامة تعطى أمرا معينا للمستعرض ويتم وضعها بين قوسين

ومعظم علامات الويب تتكون من زوجين وهما علامة البداية وعلامة النهاية بحيث تؤثر العلامة فى النص أو الصورة الموجودة بين العلامتين

HTMLولغة الــ

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

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

Attributes والعديد من العلامات تحتوى على سمات

وهى توفر خيارات للتحكم فى عمل العلامة

<font> وعلى سبيل المثال العلامة

color لها سمات عدة منها سمة

color والتى تتيح التحكم فى لون النص ومعظم السمات لها قيم يمكنك تحديدها على سبيل المثال يمكنك تحديد سمة

red بالقيمة

HTML ومن الممكن بسهولة استعراض رموز

HTMLلأى عنوان على الانترنت حيث يمكنك أن ترى كيف يستخدم الأخرون علامات

لاٍنشاء صفحاتهم كما يساعدك هذا على تعلم الأسليب المختلفة لاٍنشاء الصفحات

HTML وفيما يلى خطوات استعراض رموز

:لصفحة ويب

Internet explorer ابدأ مستعرض الويب الذى تستخدمه وليكن انترنت اكسبلورر

اعرض صفحة الويب التى ترغب فى استعراض رموزها

View افتح قائمة عرض

اختر أمر Source

المستخدمة فى اٍنشاء الصفحة كما فى شكل HTML ستظهر نافذة تعرض رموز

صور





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

اٍعداد صفحات الويب

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

notepad

Word pad وبرنامج الدفتر

Simple text العاملان من خلال نظام ويندوز وبرنامج

العامل من خلال نظام ماكنتوش

بالاٍ ضافة اٍلى برامج مايكروسوفت وورد وكوريل ووردبيرفكت

HTML ومن اجل اٍعداد صفحة ويب يجب أن تقوم باٍدخال النص الذي تريده أولا ولا تقم بتنسيق النص بأستخدام علامات

htm او HTML وبعد اٍدخال النص الذي تريده أن يظهر فى صفحة الويب احفظ هذه الصفحة فى صيغة نصية وضع لها الامتداد

ومن الممكن أن يحتوى اسم أى صفحة ويب على حروف

index.html أو أرقام ولكن لا يجب أن يحتوى على مسافات وتتم تسمية الصفحة الرئيسية فى الموقع غالبا باسم

كما بالصوره


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



HTMLالعلامات الأساسية فى لغة الـــ



: والتى يجب اٍضافتها اٍلى اى صفحة ويب تقوم بتصميمها HTMLهناك بعض العلامات الأساسية فى لغة

<HTML>يجب أن تظهر العلامة

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

HTML تحتوى على رموز

داخل جزء الرأس فى صفحة الويب <TITEL>يجب أ نظهر علامة

وتتيح هذه العلامة اٍعطاء الصفحة عنوانا واضحا

بعد ذالك تأتى علامة <BODY>

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

انظر المثال


HTML بعض العلامات المستخدمة لتنسيق الصفحات فى لغة

enter تتجاهل برامج استعراض الويب نهايات الفقرات التى تضيفها اٍلى النص باستخدام مفتاح الاٍدخال

<P> لذلك اٍذا أردت أن تبدأ فقرة جديدة من النص فاستخدم علامة الفقرة

لكى تحدد المكان الذي تريد أن تبدأ منه الفقرة الجديدة

<P> وعندما تعرض صفحة الويب فى المستعرض سيظهر سطر خال بين الفقرتين حيث استخدمت علامة

يساعدك تقسيم النص اٍلى فقرات فى زيادة وضوح صفحة الويب وتحديد الأفكار التي تحتوى عليها

انظر المثال

بعد حفظ الملف



HTML طريقة تقسيم النص اٍلى فقرات فى لغة

<BR>وتستخدم علامة

توجيه الأمر اٍلى المستعرض بأن يتوقف عن العرض اى نصوص أو صور أخرى على السطر الحالي وان يبدأ سطر جديد تفيد

عندما ترعب فى اٍنشاء سطور قصيرة من النص وعلى عكس <BR>علامة

الأخرى فأن علامة HTMLالعديد من علامات

ليست لها علامة نهاية <BR>

<BR> ويستخدم العديد الاشخاص علامة

<BR>مع العناصر التي لا يقوم المستعرض بوضعها فى سطر جديد تلقائيا مثل الصور يمكنك استخدام علامة

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

<BR>استخدام علامة

لزيادة المسافة البيضاء بين فقرة العنوان والفقرة التى يليها

أمام كل عنصر تريده أن يظهر فى السطر <BR>اكتب علامة

وراء بعضها لزيادة المسافة البيضاء التى ستظهر <BR>يمكن كتابة أكثر من علامة

بين كل عنصر والذي يليه

سيعرض المستعرض كل عنصر فى سطر جديد كما فى المثال القادم





HTML كيفية بدء سطر جديد فى لغة

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

<H1> المستوى الأول

هو اصغر عنوان فى الغالب يتم استخدام المستويات

<H3>و<H2>و<H1>

<H5> لتنسيق العناوين فى الصفحة فى حين تستخدم المستويات

لتنسيق النصوص الصغيرة مثل اٍعلانات حقوق النشر أو اٍخلاء المسئولية والعناوين من<H6>و

تكون فى الغالب بنفس حجم النص العادي فى الصفحة ويتم تغيير حجم النص <H4>المستوى

كما يلي

1- أمام النص الذي تريد تحويله اٍلي عنوان<H?>اكتب

مستبدلا علامة الأستفهام بمستوى العنوان الذي تريده من 1 اٍلي 6

بعد نص العنوان مستبدلا علامة الاستفهام بنفس المستوى الذي استخدمته فى الخطوه السابقة -2 <H?>اكتب

3- ستظهر العناوين منسقة فى نافذة المستعرض كما فى المثال التالى




HTML تحديد حجم العناوين فى لغة



وكما ذكرنا سابقا يتجاهل مستعرض الويب اى مسافات بيضاء أو اى سطر خالية تضعها بنفسك داخل النص في صفحة الويب فاٍذا أردت أن تحتفظ <PRE>بهذه المسافات والتنسيقات فعليك باستخدام علامة

لكي تطلب من المستعرض الحفاظ على المسافات الموجودة بالنص داخل العلامة

<PRE> وسيعرض المستعرض النص الموجود داخل علامة

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

معه قم بتنسيق هذا النص بخط أحادى المسافة بحيث تراه بنفس الطريقة <PRE> علامة

التي سيظهر بها داخل المستعرض

<PRE> وعندما تستخدم علامة

فاٍن المستعرض سيعرض النص بنفس المسافات البيضاء التي أدخلته تمام ولن يقوم بلف النص اٍذا لم تكف النافذة لعرضه فى نفس السطر لذلك <PRE> عندما تدخل النص الذي تنوي استخدام علامة

معه ضع في اعتبارك أن الأسطر الطويلة قد تخرج

عن حافة نافذة المستعرض ولا يراها المستخدم

عندما ترغب فى تنسيق جداول بسيطة بأستخدام المسافات وليس اٍدراج <PRE>تفيد علامة

الجدولة حتى تضمن ظهورها بصورة صحيحة فى برنامج الاستعراض المختلفة

انظر المثال <PRE> لأستخدام علامة





HTML الحفاظ على تنسيق النص فى لغة



HTML كما توفر لغة

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

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

&#يتكون الرقم الكودي للحروف من علامتي

ثم رقم الحرف ثم الفاصل المنقوطة أما الاسم

& الكودي فانه يتكون من علامة

ثم اسم الحرف ثم الفاصلة المنقوطة

HTML ويوضح المثال أدناه كيفية استخدام هذه الاكواد داخل





HTMLاٍدراج أحرف أو رموز خاصة فى لغة



&وكما نظرنا الى المثال فأنه يتكون من علامة

ثم اسم الحرف ثم الفاصلة المنقوطة

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



HTML تم وبحمد الله عز وجل انتهاء أول جزء فى لغة

HTMLوهو أساسيات لغة الـــ

جميع الحقوق محفوظه شبكة ومنتديات اعمال نت

تاريخ هذا الجزء :9/6/2008

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

أن شاء الله فى اقرب وقت يتم شرح الجزء الثانى من دورة اعمال نت

HTML للغة

HTML وهو تنسيق النص فى لغة

لكم كل الحب والموده

ادارة شبكة اعمال نت

[YoUnEsS]

و عليكم السلام و رحمة الله و بركاته

اسمح لي اخي احمد بان احييك على العمل المميز جدا

دورة مميزة اتمنى من الاعضاء متابعتها جيدا لتعلم اللغة

جزاك الله خيرا اخي و وفقك

دمت بكل ود

[MR.A_H_M_E_D]

وانا اتمنى ايضا اخى العزيز


مع خالص شكرى لك