<blockquote class="postcontent restore">



جميع دروس الدورة منقولة من

دروس HTML


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

ما معنى HTML

HTML هى اختصار لـ HyperText Mark-up Language ومعناها لغة توصيف النص
التشعبي
# Hyper Text هي الطريقة الخاصة بالتحرك علي صفحات الأنترنت بالضغط علي نص
معين يدعي (Hyperlinks ) و هي وسيله للتنقل لأي مكان في شبكة الإنترنت عن
طريق الضغط علي الوصلات ( الإرتباطات التشعبيه ) LINKS و تعتمد علي ماذا
داخل الأوسمة (TAGS) بمعني أنها تحتوي علي أكواد كأي لغة أخري .
# Mark-up هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم
بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط
والنص السميك وغيرها.
# Language وتعنى اللغه

ما هى لغة html

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

ما فائدة لغة html

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

تم بحمد الله تعالى الانتهاء من اول درس فى هذه الدوره وانتظرو الدرس
القادم ان شاء الله
من هو مخترع HTML ومخترع الويب
منقول من

ما معنى HTML – ماهى HTML – مافائدة HTML
Tim Berners-Lee
تيم بيرنرز
لي




هو مخترع الويب، ومدير رابطة الشبكة العالمية (W3C أو World Wide Web
Consortium
)
ومنشىء ومطور لغة HTML


نشاة Tim Berners-Lee تيم بيرنرز لي


ولد تـِم برنرز لي في 8 يونيو عام 1955 في لندن .
والده Conway Berners-Lee عالم رياضيات بريطاني و والدته عالمة رياضيات
تدعى ماري لي وودز .
وحصل على درجة في الفيزياء من جامعة أوكسفورد .
وقضى سنتين مع شركة بليسي للاتّصالات السلكيّة واللاسلكيّة المصنّع الرئيسي
لأجهزة تيليكوم في المملكة المتّحدة،
وعمل في قسم نظم المبادلات التجارية وسباقات الرّسائل وتكنولوجيا شفرة
التّعرّف، وفي سنة 1978 ترك بليسي للانضمام إلى د.ج ناش، حيث كتب من بين ما
كتب برامج طباعة للطابعات الذكية، ونظم التشغيل متعدد المهام ومعالج
البيانات الشامل generic macro expander .

رحلة Tim Berners-Lee تيم بيرنرز لي فى
ابتكار الويب


كان يعمل Tim Berners-Lee تيم بيرنرز لي كمستشار مستقلّ لسنة ونصف ولمدّة
ستّة شهور كمستشار ومهندس برامج في سيرن معمل الفيزياء الأوربّيّ فيجنيف –
سويسرا
ولما كان المختبر موقع عمل برنرز-لي نقطة تواصل للبحاثة الأوروبيين من شتى
أرجاء القارة، فقد كان الجميع هناك يعانون من صعوبة تبادل البيانات فيما
بينهم حتى مع وجود شبكة الإنترنت بشكل محدود في ذلك الوقت. وكان مرد العناء
هو الحاجة لتغيير نمط تشفير البيانات لتتناسب مع نظم التشغيل المعتمدة لدى
(CERN). وقد اهتم بيرنرز-لي بالمسألة لحاجته لتبادل نتائج الأبحاث مع
أقرانه في (CERN) وحول العالم، ولكونه ذا خبرة في نظم البرمجة وتصميم
الحاسبات كذلك. فقام بتصميم مستعرض بسيط يتيح لزملائه (القفز) إلى قاعدة
بياناته للاطلاع على ما فيها عبر ملفات خاصة تحوي روابط لها، ويتيح له هو
النفاذ لبياناتهم بذات الطريقة بعد موافقتهم.
ومن سنة1981 وحتى سنة 1984 كان تيم المدير المؤسس لشركة Image Computer
Systems Ltd، بالإضافة إلى دوره كمسئول التصميم التقني. وفي 1984 وبالزمالة
مع سيرن اهتم بالعمل في النظم السريعة والموزعة لتجميع البيانات العلمية
ونظم التحكم.

وفي 1989، اقترح مشروع لغة تعليم النص المترابط أو ما يدعى بالنص العالمي
المترابط، وهو ما عُرف فيما بعد بالشبكة العالمية World Wide Web معتمداً
في هذا المشروع على المشروع الأول الذي صممه Enquire، وقد صُمم للسماح
للمستخدمين بأن يعملوا معًا، وتوحيد معرفتهم على صفحات ووثائق لغة تعليم
النص المترابط. كما كان تيم هو أول من كتب مزودا للويب World Wide Web،
ووضع أسس أول برنامج مستقل لتصفح إنترنت. هذا العمل بدئ في أكتوبر 1990،
وكان البرنامج World Wide Web الأول متاحاً من خلال معهد سيرن في ديسمبر من
نفس السنة، وأُطلق على الإنترنت في صيف 1991.
وخلال السنتين 1991 و1993، استمر تيم في العمل في تصميم الويب وتنسيق
الملاحظات من المستخدمين عبر الإنترنت. وتم مناقشة تعريفاته ومواصفاته
الأولى URIs، HTTP، HTML ونقحت ونوقشت في دوائر أكبر عندما انتشرت
تكنولوجيا الويب، وفي 1994 انضم تيم إلى مختبر علوم الكمبيوتر Laboratory
for Computer Science في معهد ماساشوسيتس للتكنولوجيا MIT كمدير لمنطمة W3C
التي تنسّق نموّ W3C في كلّ أنحاء العالم، ومع الفرق العاملة في MIT
وINRIA في فرنسا أخذت المجموعة تتحقق من إمكانية الويب الكاملة، وضمانات
استقراره خلال التطور السريع والتحولات الجديدة لاستعماله اللغوي.

وفي سنة 1995، تسلم تيم بيرنرز-لي جائزة مبتكر العام Young Innovator of
the Year، وجائزة ACM Software Systems Award وغيرها الكثير من الجوائز
الإبداعية الهامة من عدة شركات ومؤسسات، ولديه درجات شرف من مدرسة Parsons
School of Design للتصميم، في نيويورك وجامعة ساوثامبتون Southampton
University والرجل المتميز في جمعية الكومبيوتر البريطانية.

الموضوع الاصلى

تيم بيرنرز لي (Tim Berners-Lee) منشىء ومطور لغة HTML
ومخترع الويب – الدرس الثانى

</blockquote>







بعد ان قمنا فى الدرس السابق بالتعريف
بـ Tim Berners-Lee تيم بيرنرز لي
منشىء لغة HTML ومخترع الويب سنقوم فى هذا الدرس ان شاء الله بشرح مراحل
تطوير لغة HTML حتى ما وصلت اليه الان ان شاء الله
لغة HTML 1.0

اول اصدار من لغة HTML ظهر للعالم . نشرت في يونيو من عام 1993 كـ نسخة
للجنة نظام الآنترنت ولم تكن نسخة قياسية. ولم يشارك الكثير من الناس
بانشاء مواقع فى هذا الوقت ولغة HTML 1.0 كانت محدوده جدا يمكنك عن طريقها
انشاء نصوص بسيطه على صفحات الانترنت لعدم وفرة المال ولكن عندما حصلت على
تاييد beardos foamin فى احد الايام اختلف الامر .

لغة HTML 2.0

تم تطويرها فى يونيو من عام 1993، وقت احتوت على نفس خصائص HTML 1.0 وزاد
وتم اصدار وثيقه اوليه لانشاء مشروع جديد للغة HTML 2.0 فى ابريل 1994
بواسطة دان كونولي ومنذ ذلك الحين وهو الكاتب والمحرر لكثير من مواد HTML
2.0
وهذا المشروع الأولي تم تجديده قريبا ويكتب بها Muldrow كارين في يوليو
1994 وبعد ذلك قدمت في اجتماع فريق مهام الإنترنت الهندسي في ذلك الصيف في
تورونتو. وكان التركيز الرئيسي لهذا المشروع لالتقاط أتش تي أم أل ممارسة
شائعة في متصفحات الويب
وقد أنشئت بعد ذلك لغة توصيف النص التشعبي الفريق العامل لمساعدة الراعي
لعملية التصديق. هذه المرة ، تمسك الاقتراح. وجرى التعمق في الاقتراح إلى
مشروع الإنترنت (RFC 1866) الذي أصبح المعيار المقترح قرب نهاية أيلول /
سبتمبر ، 1995. بحلول الوقت الذي تمت المصادقة HTML 2.0 ، ومعظم المتصفحات
المدعومة
وظل التطوير فى لغة HTML 2.0 حتى 22 سبتمبر 1995
لغة HTML 3.0

ولازال التطور مستمر فى لغة HTML حتى بدا التفكير فى تطوير HTML 2.0 الى
HTML 3.0
بدات الفكره فى مارس 1995 ونشرت HTML 3.0 فى سبتمبر 1995
وحين كانت HTML فى خضم التوحيد القياسى ومناقشة يا مكن فعله لتطوير هذه
اللغه وكان موضوعا ساخنا فى مجتمع شبكة الويب العالميه فى هذا الوقت انشأ
Dave Raggett وثيقة مناقشه مبكره للغة العلامات HTML للعديد من المميزات
وقد صمم ليكون HTML 3.0
لغة HTML 3.2

كانت في 14 من يناير من عام 1997 كـ توصية من w3c
وأصبح من الواضح بشكل متزايد أن معيار اللازمة التي يمكن العثور عليها.
وتحقيقا لهذه الغاية ، فإن العالم »اتحاد شبكة ويب (اختصار لW3C) تأسست في
عام 1994 لتوحيد اللغة وابقائه تطور في الاتجاه الصحيح. وكان عملهم الأول
اطلق عليها اسم ويلبر ، وأصبحت تعرف فيما بعد باسم HTML 3.2. وكان هذا
التغيير منغم ، وصولا الى المعايير القائمة ، وترك العديد من الخطوات
الكبيرة إلى الأمام بالنسبة لإصدارات أحدث. معظم الاوسمه و الملحقات التي
أدخلت من قبل متصفح نتسكيب (وإلى حد أقل ، مايكروسوفت) لم يجعل في هذه
المعايير الجديدة. وسرعان ما أصبح المعيار الرسمي في يناير ‘97، واليوم
عمليا جميع المتصفحات تدعمها بالكامل.
لغة HTML 4.0

تم نشرها في 18 ديسمبر من عام 1997 كـ توصية من w3c حيث احتوت على الثلاثة
أنواع : Strict، Transitional، Frameset.
وكان هذا الاصدار اكثر نضجا ورسمية من طراز Cougar DTD مع نشر وثائق واسعة
النطاق والى جانب الميزاد الجديده الاصليه موجوده فى كثر من طراز Cougar
تاتى التحسينات اللازمه على المدى هو أيضا الإصدار الأول لاستخدام يونيكود
كحرف مجموعة أساسية ، والسماح ليتم عرضها الملايين من الأحرف بدلا من مجرد
بضع مئات.
وعلى الرغم من هذا الإصدار من أتش تي أم أل يجري وضع تحت رعاية الشركات
الأعضاء (والتي تشمل صانعي المتصفح الرئيسية) ، وجدت بعض الوظائف الموجودة
في المتصفحات لم يتم تضمينها في أتش تي أم أل 4.0 أو أي إصدار لاحق لهذه
المسألة. ويبطل الحاجة إلى الحلول الجزئية لمشاكل معينة (مثل رابط ،
BGSOUND ، والفاصل الخيمة) مع مقدمة من السمات العامة وجوه جديدة مثل وظائف
المغلق.
لغة HTML 4.01

في 24 ديسمبر من عام 1999 ، أيضاً بتوصية من w3c ، وحوت أيضاً الثلاثة
أنواع السابقة ثم كان آخر تحديث لها للأخطاء في 15 مايو 2000.
، HTML 4.01 تدعم أكثر الوسائط المتعددة الخيارات ، لغات البرمجة ، أوراق
الأنماط ، ومرافق أفضل والطباعة ، والوثائق التي هي في متناول المستخدمين
ذوي الإعاقة. HTML 4.01 يأخذ أيضا خطوات كبيرة نحو تدويل المستندات ، بهدف
جعل ويب فى جميع أنحاء العالم.
لغة XHTML 1.0

تم تطويرها بتوصية من W3C بداية من 26 يناير 2000 حتى 1 أغسطس 2002
XHTML هى عائلة من انواع المستندات الحاليه والمستقبليه التى تم اعادة
معالجتها وتعديل وتوسيع على HTML 4
لغة HTML5

بعد لغة HTML 4.01 ولغة XHTML 1.0 قام مطورى الويب المتحكمين فى تطوير لغة
HTML فى التفكير فى الاصدار الثانى XHTML 2
ومطورى الويب المهره يريدون الابتكار باستمرار وظهر فى هذا الوقت وظيفة
الهاكرز او القرصنه الى مواقع الويب والمتصفحات
ولكن المسار التى كانت ستاخذه XHTML بدأت تبدو مملة وغير واقعية على حد
سواء ، وأصبح من الواضح جدا أن هناك حاجة إلى اتباع نهج جديد.
وكان فى هذا الوقت مجموعه من مشجعين عمل تكنولوجيا الانترنت
فى هذا الوقت بدا مبرمجى المتصفحات والكتاب ببناء شىء ذو مواصفات خاص بهم
بعيد عن اجرائات W3C المعتاده
واطلقو على انفسهم فريق عمل تطبيق تقنية النص التشعبى the Web Hypertext
Application Technology Working Group (WHATWG)
وقررت W3C ان HTML لايزال مستقبل شبكة الانترنت وتم وقف العمل فى تطوير
XHTML 2 وأصبح HTML 5 التى يجب ان يتدفق جهود الجميع فى تطويرها
وبهذا نكون قد انتهينا من هذا الدرس بحمد الله وان شاء الله فى الدرس
السابق سنبدا فى شرح طريقة استخدام اوسمة HTML وشرح بعض الاوسمه

منقول من
تاريخ لغة HTML ومراحل تطوير لغة HTML – الدرس الثالث

بعد ان قمنا بقرائة تاريخ
HTML وفائدتها ونبذه عن مخترعها سوف نقوم الان
بالبدا فى دراسة اكواد HTML او اوسمة HTML
ماذا تحتاج لتعلم HTML

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

فى لغة HTML لا فرق بين الحروف الصغيره او الكبيره فاذا كتبت الوسم
بالحروف الكبيره سيعطى نفس النتيجه التى ستظهر اذا كتبته بالحروف الصغيره
وجميع الاوسمه فى لغة HTML تكتب بين سهمين <>
مثال




كود:
<HTML>
وكل وسم يكتب له وسم ملحق به بنفس اسمه ولكن يزيد عليه بعد السهم
الاول شرطه مائله / مثل هذا



كود:

</html>
ويتم كتابة الوثم الثانى هذا لانهاء وظيفة الوسم الاول
اى انه اذا قمت بكتابة وسم ستظل وظيفته تعمل على جميع ما بعده حتى يتم غلق
الوسم بنفس اسم الوسم + شرطة مائله /
نكتب الوسمين معا


كود:
<html>
هنا جميع الاوسمه التى تريد كتابتها لانشاء صفحتك
</html>
اكيد مش كل الاوسمه فى لغة HTML يجب ان يكون لها وسم لانهاء وظيفة
الوسم الاول
فلكل قاعده شواذ ولكن سنتعامل مع جميع الاوسمه بهذا الشكل حتى يحين الوقت
لشرح الاكواد التى تنفرد مع نفسها ولا تحتاج لوسم لاغلاق وظيفتها
ما وظيفة الوسم html

وسم < htm l> هو بداية ونهاية اى صفحة تكتب بلغة HTML
فهو يكتب فى اول الصفحه ليتم اعلام المتصفح ان هذه الصفحه كتبت بلغة HTML
وكما قلنا يجب اغلاق الاوسمه بعد انتهاء وظيفتها التى نحتاجها ووظيفة وسم
< htm l> لاتنتهى الا بانتهاء الصفحه فيكتب الوسم < /HTM L> فى
نهاية الصفحه
وبهذا نكون قد انتهينا من هذا الدرس وفى الدرس القادم ان شاء الله سوف
نقوم بشرح كيفية حفظ العمل الذى قمت به ومشاهدته ومعرف اوسمة راس الصفحه
وكيف تستخدمها

السلام عليكم ورحمة الله وبركاته
فى الدرس السابق قمنا بتعريف الوسوم وكيف يتم كتابة الوسم وكيف يتم انهاء
عمله وما نحتاج اليه لتعلم واستخدام لغة HTML
وفى هذا الدرس سوف نعرف ان شاء الله كيف نكتب ما نريد فى الشريط العلوى
وايضا ما هو وسم head والوسم body وكيف نقوم بتحديد اتجاه الصفحه وكيف نقوم
بحفظ العمل
نقوم بفتح محرر النصوص لنبدا العمل

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




كود:
<html>

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

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




كود:
<html>
<head>

</head>
</html>
شرح الوسم title لكتابة عنوان الصفحه

بعد ان قمنا بكتابة وسم head لراس الصفحه سوف نقوم بكتابة عنوان للصفحه
باستخدام الوسم title
وسنكتب عنوان الصفحه مثلا
بسم الله
وسيكون الكود بهذا الشكل




كود:
<html>
<head>
<title> بسم الله </title>
</head>
</html>
كيف نقوم بحفظ العمل

نقوم بالذهاب الى File ثم Save As كما هو موضح بالصورة التالية

وبعد ان نضغط على save as سيظهر امامنا كما فى الصورة التالية

الارقام التى على الصورة
1- اسم الملف الذى نريد ان نحفظه وسنجعل هنا اسم الملف index.html
يجب حفظ الملف بامتداد html
2 – نوع الملف وهو ملف نصى وسنتركه كما هو
3 – شفرة الكود للملف النصى ويفضل دائما ان تجعلها كما بالصورة UTF-8 وستم
شرحها فيما بعد
4 – تضغط على Save ليتم حفظ الملف فى المكان الذى قمت بتحديده كما موضح
بالصورة وقد قمنا باختيار سطح المكتب لحفظ الملف عليه
وبعد ان قمنا بحفظ الملف سيكون موجود على سطح المكتب بهذا الشكل

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

شرح الوسم body للعمل فى محتوى الصفحه

بعد ان قمنا بشرح طريقة عمل عنوان للصفحه الان سوف نبدا العمل فى محتوى
الصفحه باستخدام الوسم body
الوسم body هو المسئول عن بدا العمل وانهائه فى محتوى الصفحه اى انك عندما
تكتب الوسم body فانك تخبر المتصفح بان كل سوف يكتب بعد هذا الوسم فهو داخل
محتوى الصفحه حتى تغلق الوسم واغلاق هذا الوسم يكون قبل اغلاق وسم html
مباشرة
والان سنكتب فى محتوى الصفحه بسم الله الرحمن الرحيم
وهذا شكل الكود




كود:
<html>
<head>
<title> بسم الله </title>
</head>
<body>
بسم الله الرحمن الرحيم
</body>
</html>
وهنا قمنا بكتابة الوسم body بعد ما اغلقنا الوسم head لان وظيفة
الوسم head تكون قد انتهت وليس لها علاقه بالمحتوى
والان نقوم بحفظ العمل وستكون النتيجه بهذا الشكل ان شاء الله
وستكون النتيجه بهذا الشكل ان شاء الله

تحديد اتجاه الصفحه باستخدام لغة HTML

والان سنقوم بتحديد اتجاه الصفحه من اليمين الى اليسار ام العكس
ونحن بما اننا نكتب العربيه فغالبا سيكون من اليمين الى اليسار
وسيكتب الكود بهذا الشكل




كود:
<html dir="rtl">
rtl تعنى right to left من اليمين الى اليسار
واذا اردنا الكتابه من اليسار الى اليمين نستبدلها بـ ltr وتعنى left to
right
وهذا شكل الكود كامل



كود:

<html dir="rtl">
<head>
<title> بسم الله </title>
</head>
<body>
بسم الله الرحمن الرحيم
</body>
</html>
نجرب مرة من اليسار الى اليمين ومرة اخرى من اليمين الى اليسار
ونلاحظ ما يحدث
وبهذا نكون قد انتهينا من درس اليوم بحمد الله وفى الدرس القادم ان شاء
الله سوف نقوم بشرح كيفية التحكم فى النصوص فى لغة HTML الالوان والحجم
ونوع الخط

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

فائدة الوسم Font للتحكم فى النصوص –
الخطوط فى لغة HTML

باستخدام وسم Font يمكنك ان تحدد نوع الخط الذى سوف تقوم بالكتابه به
وايضا يمكنك ان تقوم بتحديد حجم الخطوط ولون الخطوط
كيفية استخدام وسم Font Face فى
تغيير نوع الخط

طريقة كتابة الكود



كود:

بسم الله
بسم الله
Font لتعريف المتصفح ان هذه الاعدادات للخطوط
Face لتحديد نوع الخط
arial وهو احد انواع الخطوط المشهورة جدا والموجوده فى جميع اصدارات
الويندوز
فلا يمكن ان تضيف نص لا وجد الا لديك على جهازك فبهذا الشكل سوف يظهر الخط
كما تريد بالنص الذى قمت بكتابته ويظهر ايضا بنفس الشكل لدى اى شخص لديه
نفس النص على جهازه لكن اذا كان لا يوجد النص على جهاز اى شخص آخر وراى هذا
النص فسوف يراه بالنص الافتراضى للمتصفح لديه
وهذه نتيجة الكود السابق
بسم الله
بسم الله
يمكنك تحديد عدة انواع من الخطوط التى تناسب تصميمك بالترتيب كما تريد انت
حتى اذا كان لا يوجد النوع الاول الذى اخترته انت ليس موجود على جهاز من
دخل على التصميم فمن الممكن ان يكون النوع الثانى موجود
وهذا مثال على كتابة الكود




كود:
بسم الله
فى هذا المثال قمنا بتحديد ثلاث انواع من الخطوط
فالنص الذى سيظهر به الخط دائما هو arial
واذا كان هذا النوع ليس موجود على الجهاز سوف يقوم المتصفح تلقائى بتحديد
النوع الثانى Helvetica الذى قمت انت بتحديده ايضا وهكذا
هذه اشهر واكثر الخطوط انتشارا
Andalus
Arial
Helvetica
sans-serif
Verdana
Geneva
Times New Roman
Times
serif
Garamond
Palatino
Courier New
Courier
monospace
كيفية استخدام وسم Font Size فى
تغيير حجم الخط

يمكنك باستخدام وسم Font تصغير وتكبير حجم الخطوط كما تشاء ومثال على
طريقة كتابة الكود لتعديل احجام الخطوط




كود:
بسم الله
هنا الوسم Font لبداية تحديد خصائص الخطوط وبعد ذلك كتبنا Size
لتحديد حجم الخط
و رقم 4 اى ان حجم الخط اكبر من الحجم الطبيعى للمتصفح بـ 4 والحجم الطبيعى
للمتصفح هو 3 اى ان الخط حجمه سيكون 7
ويمكنك اضافة القيمة من 1 الى 7 لتكبير الخط
وهذه النتيحة
بسم الله
وهذا كود لجميع الاحجام




كود:
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
بسم الله
ويوجد اسلوب اخر لكتابة قيم تكبير النص وهو النسى وتكتب فيه النسبة
بالارقام من 1 الى 6 قبلها عامة + او -
مثال




كود:
بسم الله
النتيجة
بسم الله
كيفية استخدام وسم Font color فى
تغيير لون الخط

طريقة كتابة الكود




كود:
بسم الله
color هنا لتحديد لون الخط
و red هو لون الخط
والنتيجة
بسم الله
ويمكن تحديد قيمة لون الخطوط بطريقتين طريقة بكتابة اسم اللون مثل red و
green و blue وهى التى ضربنا عليها مثال بالاعلى
والطريقة الاخرى هى السداسية وهى بكتابة 6 ارقام او حروف مكونين من الارقام
والحروف التالية 0 1 2 3 4 5 6 7 8 9 a b c d e f ونبدا قبل كتابة القيمة
بـالشبكة #
وهذا مثال عليها




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




كود:
بسم الله
هنا قمنا بتحديد نوع الخط arial
وحجمه 4
ولون الخط ازرق 0000ff
والنتيجة

بسم الله
ويمكن تغيير لون وحجم ونوع الخط لكلمتين بجوار بعضهما او اكثر
مثال




كود:
بسم الله
وهنا قمنا بتغيير القيم فى كلا الكلمتين بسم الله
والنتيجة

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

الموضوع الاصلى
درس التحكم فى حجم ولون ونوع النصوص – الخطوط فى لغة HTML

هذا هو الاصدار الذى نشرحة اخى الغالى

HTML 4.01 / XHTML 1.0 Reference

ولا يجب ان نشرح الاصدار القبل الاخير لكى يكون من يتعلم ماشى مع بقية
الناس لان كل الناس بتكون بتحدث للاصدار الحديث
اما بالنسبة لاوسمة font وغيرها من اوسمة التصميم اللى حضرتك بتقول عليها
لو همه لغوها يبقى ليه لغة HTML موجودة بالاساس وهيه اساسا لغة تصميم
حضرتك تقدر تدخل على موقع تطوير الويب وتشوف الاوسمة المتاحة فى لغة HTML
الان وتقدر تشوفها من هنا
http://www.w3schools.com/tags/default.asp

فى هذا الدرس ان شاء الله سوف نقوم
بالتعرف على بعض الاوسمة التى تساعدنا فى تنسيق النصوص والعناوين فى لغة
HTML

كيفية تنسيق العناوين فى لغة HTML





كود:

بسم الله

بسم الله

بسم الله

بسم الله

بسم الله

بسم الله

كود:
خط ثميك


خط ثميك


خط مائل


خط مائل


نص تحتة خط


^{خط مرتفع}عن السطر


_{خط منخفض} عن السطر


خط كبير


خط صغير


نص مشطوب - نص يعترضه خط


نص مشطوب - نص يعترضه خط


نص بين علامتى اقتباس

مثال على الاقتباس الطويل



كود:

يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل

كود:

اااااااااااااااااااا


ىىىىىىىىىىىىىىىىىىىى





كود:
 




كود:

تكتب هنا ما شئت
< /pre>

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


	
كود:
	 انا بحب اللون  الاحمر الازرق

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

 
كيفية كتابة عنوان فى لغة HTML
 

 
يمكنك كتابة العناوين فى لغة HTML باستخدام الوسم address
وهذا مثال على ذلك
  


	
كود:
	

كتبة بواسطة مدونة اليكس

البريد الالكترونى

العنوان : 9 شارع مدونة اليكس 

الهاتف : +2 1234567


  
وتكون هذه النتيجة 
  كتبة بواسطة مدونة اليكس
البريد الالكترونى
العنوان : 9 شارع مدونة اليكس 
الهاتف : +2 1234567
 وبهذا نكون قد انتهينا من هذا الدرس بحمد الله وفى الدرس القادم ان شاء 
الله سوف نشرح كيف نقوم باضافة شرح على الكلام يظهر عند الوقوف على الكلمة 
وكيف نقوم باختيار نوع الخط واللون وحجم الخط الافتراضى لجميع الكلام الذى 
يكون بداخل الصفحة ولا يوجد بين اى وسم للتحكم فى الخط
يوجد بعض الامثلة لم تظهر يمكنك مراجعتها فى المصدر او تجربتها وسترى 
النتيجة
المصدر

درس تنسيق النصوص والعناوين فى لغة HTML – 
الدرس السابع
 

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

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

	
كود:
	
 
 
 
 بسم الله
 
  وتكون النتيجة بهذا الشكل 

  بسم
 الله

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

  كيفية اضافة وصف الى النص فى لغة 
HTML
 
احيانا يكون هناك بعض الاختصارات للجمل او لاسم يكون كبير مثال www هى 
اختصار لـ World Wide Web الكثير من الناس لا يعرف ماذا تعنى www فسنقوم 
نحن بانشاء كود يقوم باظهار الجملة كاملة عند الوقوف على اختصارها وهو www 
باستخدام الوسم abbr
 مثال على ذلك
   
 

	
كود:
	www جعلت الوصول الى المعلومات امر سهل.
  وستكون النتيجة بهذا الشكل
  www جعلت الوصول الى المعلومات امر سهل.
  ويوجد ايضا الوسم acronym يقوم بنفس الوظيفة
 مثال
   
 

	
كود:
	لغةHTML? سهله جدا فى تعلمها
  النتيجة
  لغةHTML سهله جدا فى تعلمها
  فى المثالين يتم اضافة وصف النص بين علامتين الاقتباس “” كما هو واضح فى 
المثال 

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

  كيفية عمل خط فاصل فى لغة HTML 
 
  يمكنك الفصل بين الكلام والاخر بخط فاصل باستخدام وسم hr
  مثال
   
 

	
كود:
	يمكننا كتابة هنا ما نشاء 
 

 وهنا ايضا يمكننا كتابة ما نشاء تحت الخط الفاصل
  وتكون النتيجة بهذا الشكل
  يمكننا كتابة هنا ما نشاء 
   وهنا ايضا يمكننا كتابة ما نشاء تحت الخط الفاصل

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

	
كود:
	مدونة اليكس
 مدونة اليكس
  dir هى اختصار لـ direction اى الاتجاه
 و rtl هى اختصار لـ  right to left اى من اليمين الى اليسار
 و ltr هى اختصار لـ left to right  اى من اليسار الى اليمين
  ستكون النتيجة بهذا الشكل
 كتابة النص من اليمين الى اليسار
 مدونة اليكس
 كتابة النص من اليسار الى اليمين
 مدونة اليكس
وبهذا نكون قد انتهينا من هذا الدرس وفى الدرس القادم ان شاء الله سوف 
نتعلم كيف نقوم بانشاء تعدد نقطى وتعدد رقمى للاسطر وايضا انشاء قائمة 
تعريف

ان كانت بعض نتائج الامثلة غير واضحة يمكنك رايتها فى المصدر

المصدر
 درس كيفية عمل خط افتراضى واضافة وصف على النص فى لغة 
HTML

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

يمكنك عمل تعداد نقطى فى لغة HTML باستخدام الوسم ul + الوسم li
وسم ul يستخدم لاعطاء امر القائمة النقطية
وسم li يستخدم لتحديد عنصر القائمة الرقمى او النقطى

مثال




كود:

• تعداد نقطى


• تعداد نقطى


• تعداد نقطى


• تعداد نقطى

ويكون بهذا الشكل

• تعداد نقطى
  
• تعداد نقطى
  
• تعداد نقطى
  
• تعداد نقطى
  

كيفية عمل تعداد رقمى فى لغة html

يمكن عمل تعداد رقمى فى لعة HTML باستخدام الوسم ol + الوسم li
وسم ol يستخدم لاعطاء امر القائمة الرقمية
وسم li يستخدم لتحديد عنصر القائمة الرقمى او النقطى




كود:

1. تعداد رقمى


2. تعداد رقمى


3. تعداد رقمى


4. تعداد رقمى

1. تعداد رقمى
   
2. تعداد
   رقمى
   
3. تعداد رقمى
   
4. تعداد رقمى
   

كيفية عمل قائمة تعريفية فى لغة HTML

يمكن عمل قائمة تعريفية باستخدام الوسم dl + الوسم dt + الوسم dd
الوسم dl يستخدم لاعطاء اعمر انشاء القائمة التعريفية
الوسم dt يستخدم لاضافة الكلمة او الجملة المراد تعريفها او شرحها
الوسم dd يستخدم لاضافة الشرح او التعريف لما تم اضافته فى الوسم dt
مثال




كود:

مدونة اليكس

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

لغة HTML

هى لغة تصميم مواقع الويب بكل سهولة

النتيجة

وبهذا نكون قد انتهينا من هذا الدرس

المصدر
درس عمل تعداد نقطى وتعداد رقمى وانشاء قائمة تعريف فى
لغة HTML