دورة تعلم HTML من البداية حتى الاحتراف

[sangam]

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

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

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

دروس 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

[sangam]

من هو 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 ومخترع الويب – الدرس الثانى

[sangam]

بعد ان قمنا فى الدرس السابق بالتعريف بـ 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 – الدرس الثالث

[sangam]

بعد ان قمنا بقرائة تاريخ 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> فى نهاية الصفحه
وبهذا نكون قد انتهينا من هذا الدرس وفى الدرس القادم ان شاء الله سوف نقوم بشرح كيفية حفظ العمل الذى قمت به ومشاهدته ومعرف اوسمة راس الصفحه وكيف تستخدمها

[yomo01]

اثابك الله وجزاك عن المسلمين خير الجزاء

[sangam]

السلام عليكم ورحمة الله وبركاته
فى الدرس السابق قمنا بتعريف الوسوم وكيف يتم كتابة الوسم وكيف يتم انهاء عمله وما نحتاج اليه لتعلم واستخدام لغة 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 الالوان والحجم ونوع الخط

[sangam]

واياك اخى yomo01
شكرا لك على مرورك

[sangam]

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

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

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

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

  
<font face ="arial">بسم الله </font>
<font face ="Andalus">بسم الله </font>

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

<font face ="Arial, Helvetica, sans-serif">بسم الله </font>

فى هذا المثال قمنا بتحديد ثلاث انواع من الخطوط
فالنص الذى سيظهر به الخط دائما هو 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">بسم الله</font>

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

<font size="1">بسم الله</font>
<font size="2">بسم الله</font>
<font size="3">بسم الله</font>
<font size="4">بسم الله</font>
<font size="5">بسم الله</font>
<font size="6">بسم الله</font>
<font size="7">بسم الله</font>

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

<font size="+4">بسم الله</font>

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

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

<font color="red">بسم الله </font>

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

<font color="#ff0000">بسم الله </font>

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

<font face="Arial" size="+4" color="#0000ff"> بسم الله </font>

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

<font face="Arial" size="+4" color="#0000ff"> بسم </font><font face="Andalus" size="+3" color="#ff0000"> الله </font>

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

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

[nawrashariri]

بداية شكراً على جهدك؟
يعني كنت متمني إنك تكون متجاوز مشكلة بقية الناس اللي كتبو عن ال HTML؟ بس للأسف؟
المشكلة هيي إنو ما حدا بحدد إصدار اللغة الللي عم يشرحوا؟ و هاي مصيبة الكل؟
و افترض انو الشخص اللي بدو يتعلم اللغة لازم يبدأ على الأقل من الإصدار قبل الأخير مشان يكون ماشي مع بقية الناس؟
و من المعروف إنو القائمين على تطوير لغة ال HTML إلغوا من قاموس هاي اللغة كل الوسوم اللي إلها علاقة بالناحية الشكلية ( التصميم ) و منها وسم ال Font اللي حضرتك شرحته أول شي؟ و أي وسم آخر متل الألوان و الخلفية ...الخ و تم التركيز على لغة ال CSS ليتم اعتمادها كلغة خاصة بالتصميم.
يعني أتمنى عليك إنك تعتمد الإصدار XHTML 1.0 Strict على اعتبار إنك لسا ببداية الدروس.
و تقبل مروري و شكرا.

[sangam]

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

HTML 4.01 / XHTML 1.0 Reference

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

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

[sangam]

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

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

يتم تنسيق العناوين فى لغة HTML باستخدام وسم h1 او h اة رقم آخر من 1 الى 6 وكلما
مثال

<h1>بسم الله</h1>
<h2>بسم الله</h2>
<h3>بسم الله</h3>
<h4>بسم الله</h4>
<h5>بسم الله</h5>
<h6>بسم الله</h6>

والنتيجة بهذا الشكل



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

هذه الاكواد التى تستخدم فى تنسيق النصوص

<b>خط ثميك</b>
<br>
<strong>خط ثميك</strong>
<br>
<i>خط مائل</i>
<br>
<em>خط مائل</em>
<br>
<u>نص تحتة خط</u>
<br>
<sup>خط مرتفع</sup>عن السطر
<br>
<sub>خط منخفض</sub> عن السطر
<br>
<big>خط كبير</big>
<br>
<small>خط صغير</small>
<br>
<strike>نص مشطوب - نص يعترضه خط</strike>
<br>
<s>نص مشطوب - نص يعترضه خط</s>
<br>
<q>نص بين علامتى اقتباس</q>

بين كل وسم مكتوب العمل الذى يقوم به
وهذه النتيجة

خط ثميك

خط ثميك

خط مائل

خط مائل

نص تحتة خط

خط مرتفععن السطر

خط منخفض عن السطر

خط كبير

خط صغير

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

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

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

ونلاحظ هنا ان بعد كل وسم قمنا بكتابته كتبنا الوسم br
هذا الوسم يقوم بانهاء السطر الذى كنا نكتب عليه ويبدا الكلام من السطر التانى كما نرى .
ويوجد وسم blockquote للاقتباسات الطويلة
مثال

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

<blockquote>
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل 
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل 
يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل يوجد هنا اقتباس طويل 
</blockquote>

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

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

ونلاحظ هنا انه تم اضافة مسافة قبل الكلام وآخره .

يوجد احرف تاخذ مساحة اكبر من احرف اخرى مثل حرف (أ) و حرف (ى) يمكن الحرف الثانى ياخذ مساحه اكثر من ضعف الاول مثال نكتب 20 حرف أ و 20 حرف ى
اااااااااااااااااااا
ىىىىىىىىىىىىىىىىىىىى
نلاحظ هنا الفرق كبير برغم ان عدد الحروف متشابه
اذا اردنا ان نقسم المسافات بين الاحرف لكى تساوى بعضها سنستخدم الوسم tt كالمثال التالى

<tt>
اااااااااااااااااااا
<br>
ىىىىىىىىىىىىىىىىىىىى
</tt>

وستكون النتيجة بالشكل التالى ان شاء الله

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

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

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

 

هذا الكود بمعدل مسافة واحدة اى انك اذا اردت عمل اكثر من مسافة بتكرر هذا الكود

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

هذا الكود معناه منسق مسبقا اى انك تستطيع ان تكتب وكانك تكتب فى تكست على الويندوز وكل ما قمت بكتابته سيظهر بنفس عدد المسافات والاسطر الذى قمت بكتابتها .

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

 انا بحب اللون <del> الاحمر </del><ins>الازرق</ins>

وتكون النتيجة بهذا الشكل

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


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

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

<address>
كتبة بواسطة مدونة اليكس<br />
<a href="mailto:us@example.org">البريد الالكترونى</a><br />
العنوان : 9 شارع مدونة اليكس <br />
الهاتف : +2 1234567
</address>

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

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

[sangam]

شكرا لك هيبة ملك على مرورك

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

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

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

<head>
 <basefont face="arial" color="red" size="5" />
 </head>
 <body>
 بسم الله
 </body>

وتكون النتيجة بهذا الشكل

بسم الله

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

كيفية اضافة وصف الى النص فى لغة HTML

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

<abbr title="World Wide Web">www</abbr> جعلت الوصول الى المعلومات امر سهل.

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

لغة<acronym title="Hyper Text Markup Language">HTML</acronym>? سهله جدا فى تعلمها

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

ملحوظة

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

كيفية عمل خط فاصل فى لغة HTML

يمكنك الفصل بين الكلام والاخر بخط فاصل باستخدام وسم hr
مثال

يمكننا كتابة هنا ما نشاء 
 <hr>
 وهنا ايضا يمكننا كتابة ما نشاء تحت الخط الفاصل

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

كيفية تحديد اتجاه كتابة النص

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

<bdo dir="rtl">مدونة اليكس</bdo>
 <bdo dir="ltr">مدونة اليكس</bdo>

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

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

المصدر

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

[sangam]

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

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

مثال

<ul>
  <li>تعداد نقطى</li>
  <li>تعداد نقطى</li>
  <li>تعداد نقطى</li>
  <li>تعداد نقطى</li>
</ul>

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

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

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

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

<ol>
  <li>تعداد رقمى</li>
  <li>تعداد رقمى</li>
  <li>تعداد رقمى</li>
  <li>تعداد رقمى</li>
</ol>

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

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

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

<dl>
  <dt>مدونة اليكس</dt>
    <dd>هى مدونة تهتم بكل ما هو جديد فى عالم التقنية</dd>
  <dt>لغة HTML</dt>
    <dd>هى لغة تصميم مواقع الويب بكل سهولة</dd>
</dl>

النتيجة

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

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

[alshamk]

جزاك الله خير ..

انا عندي معلومات عن html
وانت رسختها ..

لإني أول كنت اكتبها فقط تقليد للملفات الي ادخل واعدل عليها من دون علمي بوظيفتها ..

واتمنى تواصل ..

وتتعمق في CSS

تقبل مروري .