ماذا تعني لغة الترميز HTML؟ ما هي أنواع الوسوم - Tags أو عناصر HTML؟ وما هي المكونات الأساسية لعناصر HTML؟ وشرح باللغة العربية خطوة بخطوة لـ تعلم لغه html، كيفية إنشاء صفحة ويب بإستخدام أكواد HTML
________________
للتواصل معي
حسابي على instagram :
/ abdelrahman_noufal
حسابي على فيسبوك :
/ abdelrahman.g.nofal
الجروب الخاص بنا :
/ 1810581845642171
________________
تحميل محرر الاكواد visual studio لاجهزة الكومبيوتر
code.visualstudio.com/
_______________
كورس css في فيديو واحد هنا
• تعلم css في فيديو واحد...
ماهي لغة الترميز HTML؟
الحروف هي إختصار HyperText Markup Language، وهي ليست لغة برمجية بالمعنى المتعارف عليه للغات البرمجة، ولكنها لغة أو طريقة لوصف محتويات صفحة الويب لبرامج التصفح، حيث أن أي برنامج متصفح انترنت يحتاج لمعرفة محتويات الصفحة من عناوين ونصوص وصور وروابط و غير ذلك من مكونات صفحة الويب، حتى تتمكن من عرضها بالشكل الصحيح، ولغة الترميز HTML، هي اللغة الرئيسية التي يتكون منها أي موقع أو صفحة على شبكة الإنترنت.
وتتكون صفحة الويب من مجموعة من العناصر (Tags) أو تعرف كــ الوسوم، يكتب كل وسم بين (angle brackets) أو كما تسمى علامة أصغر من وعلامة أكبر ولا يقوم المتصفح بعرض هذه الوسوم، ولكن يقوم بعرض محتوياتها، وهناك نوعين من الوسوم.
ما هي أنواع الوسوم Tags؟
النوع الأول: وهو عبارة عن وسم يتم عرض محتواه مباشرة في صفحة الويب، مثال img و input
النوع الثاgي: وهو عبارة عن وسم يصف ما بداخله من نصوص ، وقد يحتوي هذا الوسم بداخله على وسم آخر كعنصر وسوف تلاحظ في هذا النوع أن كل وسم يتكون من جزئين (وسم البداية) و (وسم النهاية) وبينهما المحتوى الذي يتم عرضه في المتصفح.
كيفية إنشاء صفحة ويب
نبدأ أولا بفتح برنامج notepad ثم من خلال القائمة File نقوم بحفظ الملف عن طريق إختيار الأمر Save As، وبعد ذلك سوف تظهر نافذة نكتب في خانة (إسم الملف - File Name) أي إسم من إختيارك فليكن مثلا test.html ويجب كتابة إسم الملف مع إمتداد الملف ولكتابة أكواد HTML يجب أن يكون إمتداد الملف إما (.html أو .htm) و في النافذة من الخانة Save as type سوف نختار All Files وفي خانة (Encoding) سوف نختار UTF-8 وذلك لكي يدعم الملف كتابة اللغة العربية ثم نضغط Save، والشكل التالي يوضح الخطوات بالتفصيل.
بعد إنشاء الملف ومعرفة المكونات الأساسية لعنصر من عناصر لغة الـ HTML سوف نبدأ بكتابة الأكواد الأساسية لإنشاء صفحة ويب (أو يمكنك نسخ محتويات المربع التالي في الملف) وبعدها سوف أشرح كل عنصر بالتفصيل.
ووظيفته أن يصف للمتصفح أن الكود المستخدم هو بلغة HTML، أما الوصف lang فوظيفته أن يصف للمتصفح أن محتويات صفحة الويب سوف تكون باللغة العربية، وذلك لأننا إخترنا القيمة ar أما إذا كان المحتوى باللغة الإنجليزية فيمكن أن تكون قيمة الوصف en. وقمنا بوضع وسم البداية (Opening Tag) في أول الأكواد وفي نهاية الكود كتبنا وسم النهاية (Closing Tag)، وبعد ذلك سوف نقسم الصفحة إلى قسمين رئيسيين أولهما ومحتوى هذا الوسم لا يظهر في المتصفح، ولكنه يحتوي على معلومات عن الصفحة وعن كيفية عرض محتويات الصفحة وذلك بإستخدام العناصر وثاني قسم في صفحة الويب وكل ما يكتب بداخل هذا الوسم هو ما يتم عرضه وتنسيقه من خلال المتصفح
ما هي لغة ترميز النص الفائق؟
لغة ترميز النص الفائق هي ليست لغة برمجيّة بل لغة وصفيّة (markup language) تعمل على وصف هيكلة محتويات صفحات الويب. تتألف لغة ترميز النص الفائق من مجموعة من العناصر (elements) تُستخدَم لاحتواء الأجزاء المختلفة من المحتوى لتجعله يظهر بطريقة معينة. فيمكن استخدام الوسوم المغلقة (enclosing tage)، مثلاً، لإضافة رابط تشعبي لكلمة أو لصورة يشير لموقع آخر، كما يمكن استخدامها لجعل الكلام مائل أو لتصغير الخط وتكبيره. لنأخذ النص التالي كمثال:
ماذا ستتعلم في كورس تصميم مواقع الويب و كورس html
مقدمة عن تصميم المواقع الالكترونية وأنواع المواقع وطرق تصميم المواقع
التعريف ببرامج تصميم المواقع المختلفة و مميزات كل منها
التعريف بلغة HTML المستخدمة في تصميم المواقع
شرحة بنية ومحتويات ملف HTML
شرح tags and containers
شرح انواع content models in HTML5
أساسيات HTML
شرح المسافات الفارغة والتعليفات في الكود
النصوص والفقرات
تنسيق الملف
اضافة صور الى موقعك
اضافة فيديوهات الى موقعك
اضافة صوتيات الى موقعك
استخدام block and inline tags
Displaying characters with references
Metadata and the Document Head
اضافة الاسكربتات للملف
استخدام الميتا تاج Meta Tag
طريقة تهيئة الصفحة لمحركات البحث
النصوص
HTML5
استخدام الجداول Tables
شرح وأستخدام أجزاء الجداول
Grouping columns
القوائم في لغة html
اضافة نوافذ مواقع اخرى الى موقعك
اضافة فيديوهات يوتيوب الى موقعك
التعامل مع ال input بمختلف اشكالها
أفضل من يشرح البرمجة في اليوتيوب عاش يا بطل 👍👍
انا طبعا مبتدئه وتعلمت هذي الاشياء كلها ووصلت لنقطه حلوة تعلمتها من استاذ استمه الزيرو والله بصراحه ندمت اني م عرفتك من البدايه شرح خيالييي وظريف بعد😂💗
مثلك الزيرو شرحه معقد نوعا ما لكن هذا افضل من الزيرو
الزيرو تحس انه بيشرح تمام لكن مش طيب وهو بيشرح زي جمال 😎😂😂😂😂
والله انو احسن من زيرو بكثير الاستاذ بدالرحمن رايق
نفس الكلام بالظبط 😂
الزيرو اهبل مايفهم ولا شي
هذا الي ابحث عنه علشان اتعلم تكوين موقع انت رائع وشرحك جميل وسهل راح اشترك في قناتك واتابع كل الكورش ان شاء الله.
رينا يزيدك من علمه انا من سوريا وعم تابعك لأنو ماعندي مقومات انو سجل شكرا كتير كتير ويارب ويارب تكون دائما فاضي ورايق وتنزلنا كورسات
سوري متحول الي مصري 😂♥
@@ahmedmohamed-qv8jh 😂😂 وربي من كتر مع عم تابع كورسات مصرية فقدت السيطرة على نفسي
@@wedadajam7114 طب اي اخبارك دلوقتي في البرمجه ياسطا 😂🤣
@@wedadajam7114 انا مش فاهم ال
من اليمن حفضك الله وزادك في العلم والجسم بسطة كم انتم مبدعون يامصر احبكم
يسعد دينك يزلمة والله انتا بتفتح نفس الواحد انو يتعلم بجد
استاد بكل ما للكلمة من معنى حفظك الله ورعاك وادام عليك وعلى اهلك الصحة والعافية ورزقك من حيت لا تحتسب اخوك احمد من المغرب
الهندسة جزاك الله خيرا على ما تقدمة من محتو ى احترافى للأمة ربنا يجعله فى ميزان حسناتكم
شرحك سهل وجميل وبسيط جداااااااااا ربنا يجازيك كل خير
من أفضل الشروح في عالم تعلم لغات برمجة الانترنت بلا نقاش ..
اقسم بالله انت معلم ومبرمج كبير انا بسمع الفيديو بتاعك من جمالو عايز اسمعوا تانى ربنا يحفظك
جزاكم الله خير ربنا ينفع بيك ويجعله فى ميزان حسناتك مجهودك المبذول يستحق المتابعة والتعلم منه
الله يرضى عليك شرح سلس بسيط ممتع ماحسيت ولا شوي اني مليت💙💙💙💙💙
شرح مبسط جدا اللهم بارك ربنا يجعله في ميزان حسناتك
ماشاءالله الله يوفقك ويسعدك شرحك قمة الروعة ❤
في الحقيقه ممتاز جدا ياهندسه شرح مبسط وأنا والله فهمت كتير وانا اول مره في حياتي ادخل في تعليم ال HTML مع العلم اني درست خصائص البرمجة بانواعها المفاهيم يعني نظري ودي اول تجربه مع حضرتك التطبيق العملي وكنت هدخل علي البايثون لكن قررت اجرب ال Html الاول اشكرك جدا على المجهود الرائع تمنياتي لك كل التوفيق والنجاح ❤❤❤
شرح عظيم رائع بارك الله فيك ♥️
عاش ، شرح جميل و وافي يدخل عندك الشخص يستفاد ما شاء الله عليك
ربنا يبارك فيك ويحفظك يا هندسة ويجعله فى ميزان حسناتك😄
الشرح عظمه اقسم بالله . عاش يا هندسه
بجد ربنا يبارك فى عمرك انت فتحت نفسى على تكملة الكورس طريقة رائعة فى الشرح ياريت لو حضرتك تقدم لنا كورس بنفس طريقة الشرح فى الاكسيس
شكرا لك استاذ الله يبارك فيك ❤🌹
شرحك ممتع 😁.. الله يعطيك العافية
شرح خرافي بسم الله ماشاء الله عليك تسلم ياهندسه
بارك الله فيك شرح رائع❤️
قسما بالله انتا عظمه ربنا يزيدك
الله يجزيك الخير استاذ عبدالرحمن
من غير مبالغه مبدع مبدع مبدع مليار لايك
مزعوج تخرجت من الهندسة المعلوماتية وجديد عرفتك الله يطول بعمرك كنا نحضر شيار ولكن انت شي فخم ❤
شرح رائع ربنا يباركلك ويجازيك كل خير
one of the best youtubers i have evere see
والله افضل شرح شفته الله يساندك ان شاء الله يا استاذ
شرحك ممتاز ماشاء الله
شرح جميل و سهل ❤
اخوكم من الجزائر وعايش في فرنسا شرح والله العظيم احسن من الاساتذ في فرنسا مشاء الله
khoya t9ra fi france
جزاك الله الف خير وجعل الله في ميزان حسناتكم
شرح روعة جزاك الله خيرا
﴿ سبحان الله وبحمده سبحان الله العظيم عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته﴾ٌ.
انت جميل وشرحك حلو اوى بجد أنا مبسوطه انى لقيت القناه بتاعتك
جزاك الله خير على تسهيل الشرح وعلى هذا الإبداع في طرح المعلومات سهلت علينا الطريق حبيبك من الجزائر
عاش أيدك والله براڤووو
حقيقي شرح رائع جزاك الله خيرا
استمر يافنان متابعك من لبيبا وشرحك جميبل جدا
اتمنى من الله ان يسعدك شكرا لك اخي على شفافيتك وصدقك
شرح عظيم رائع بارك الله فيك ♥
الف الف شكر وجزاك الله خيرا
انا حرفيا قعدت فالفيديو ده ساعتين بس استمتعت جدا بجد وطبقت كل حاجه عملتها حتي الback ground خليتها blue😂❤
انا وين كنت عن قناتك؟ كنز كنز ما شاء الله
حاجة جامدة جداا جدا انك ملطف الكورس بحاجات تضحك وكان تأثيرها عليا كويس اني محستش بملل وجزاك الله كل خير وربنا يبارك في حضرتك وينفع بيك
احب اقولك من خلال هذه المحاضرة عرفت اني بحب تصميم المواقع اكثر من برمجة المواقع فـ شكراً من القلب لكل مجهودك
اي الفرق بين التصميم والبرمجه
@@amanywaheed758 بشكل مختصر اكتر برمجة المواقع في فرونت اند و باك اند انتي كمبرمجة اليوم وانا صاحب مطعم كلمتك وقولتلك تشرفيني مطعمي عايزك بشغل اجيتي لعندي قولتلك انا عندي بالمطعم ٥٠ صنف طعام عايزك تعمليلي موقع انترنت تعرضيلي فيه صورة للخمسين صنف دول مع اسمهم وسعرهم ومعلومات عنهم بحيث ان لو حد عايز يبحث عن مطعمي يعرف ايه الاكل لعندي بعد فترة لقيت مطعمي عم يكبر ويكبر فحبيت اضيف فكرة جديدة وهي طلبات ديلفيري بحيث ان العميل بس يفتح موقعي يبقى عنده خانة يقدر من خلالها يطلب اونلاين وانا اوديله ديلفري فاتصلت بيكي مرة اخرى واجيتي لعندي فهون بتحتاجي ل باك اند او لهي كما بقولوا برمجة المواقع فانتي بكدا مسؤولة عن تصميم ما يسمى بقاعدة البيانات للموقع ده ومن خلالها بس يطلب العميل بيوصلني انا كصاحب المطعم او لموظف لعندي (الشخص المسؤول عن الطلبات) ان في عميل طلب وبيوصلني طلب اي صنف ومكانه ورقم فونه ياريت تكوني فهمتي شرحي المبسط واكون فدتك ولو بمعلومة صغيرة ❤️❤️👍 بالتوفيق لنا ولكي
احسنت بارك الله فيك
استمر شرحك حلو كتير👏👏👏👏
الله اجازيك شرحك بسيط ومفهوم
الشرح تحفه ما شاءلله ♥♥♥♥♥
شرح رائع جزاك الله خيرا.
انا فهمت جدا جدا وشرحك حلو جدا جدا وانت هايل جدا جدا
وحش🔥
الله يبارك فيك
حياك الله و بياك ماشاء الله اخي
اكتر حد شوفته بيشرح بطريقة مقنعة
انا حبيت البرمجه بسببك انت مبدع
الله يسعك ويرزقك
❤شكرااا الك شرح بجننن ❤❤❤❤
you are the best ever❤❤
أنا خلصت الفيديو ورجعت عدته مرة ثانية بدون سبب
اعمل اي لو الكود ده مش شغال معايا
طريقة الشرح ودمج الميمز خرافيية وتثبت المعلومة😂❤
شرح ممتاز ومبسط
جزاك الله خيرا
شكرا لك يا استاذ شرحك راااااااااائع الله يحفضك استااذ ممكن كورس php
السلام عليكم شكرا ع الكورس الرائع اذا امكن سؤال اني بحثت عن قيم الattribute للmeta في w3 schoolمحتاجه اعرف ما تعمل القيم التاليه content_security_policy و content_type و default_style
شرح جميل جدا ومفصل عاش يا بطل وانا مبتدأه واستفدت كتير بس انا كانت عندي مشكلة اني لما بعمل الخطوة بتاعت الالمنتس مبيظهرليش الاكواد ممكن حل للمشكلة وجزاك الله عني كل خير
شكرا على جهودك
شكرا علي الشرح الجميل
شرح واضح وصوت مريح
ماشاء الله شرح جميل ومبسط فى ميزان حسناتك يارب بس معليش عندى سؤال بالنسبة لل meta http كتبت الكود صح وماف الى خطأ بس وقت التنفيذ ماينفذ والصفحة ماتعمل refreash بس عايزة اعرف السبب من شنو
شكرا لك
عاش استمر
خير الناس انفعهم للناس
شكرا معلم بارك الله فيك
حبيبي ان شاء الله تكون استفدت
@@AbdelrahmanGamal استفدت كثير عم اتابعك خطوة بخطوة تحياتي من الجزائر 🇩🇿❤
الحمد لله الله وووزز,,شكرا شكرا
ابدعت
ماشاء الله عليك اكثر من رائع بس لفتت انتباهي كلمة فيوبورت بعتقد انها اهم ميزه خاصة انه الكل يفتح الجوال .... عندي مبرمج متعقد منها راح اخبره عنها
ربي يوفقك
سؤال هو دلوقتى انا لما بكتب name مش بتظهر عندى تكملة الكلمة يعنى مثلا بكتب nam ومش يلاقى الكلمة بتطلعلى فتقريبا هى مش موجودة عندى فى ال Vs code أضيفها ازاى ؟
أسال جوجل
لا زم تتكتق في محرر أكواد معين مش لازم تكتبي مثلا في محرر اكواد موجود في حاسوبك مثل notpad
عاش اقسم بالله عظمه انت عظمه ربنا يبارك في عمرك
ملاحظة لي معندوش كمبيوتر يقدر اتبع فقط بالهاتف عن طريق تحميل نفس النطبيقاز لاكن انرود وتستطيع تطبيق كل مايقوله
انا مُت م الضحك من الأكشنات اللي عاملها هو ساعدتك بتكلمني ههههههههههههه
عاشت ايدك
اخي الكريم هل ممكن تعمل مقطع فيديو تشرح لنا كيف نقوم بتطوير متجرنا في محرك البحث google شكرا لك
استاذ عبد الرحمن الله يعطيك الف عافية بس سؤال ما بلاقي مكان يعطيني اكواد html عشان الواحد ما يتغلب و هو يحفظ فيهن ؟؟؟
استاذ عبد الرحمن شكرا علكورس جدا بس لما كتبت كل اكواد الMeta وبذات Meta ريفريش ولا كود منهم بيتفعل
دة اللي يخليني احترم شيء اسمو مصر كسوداني شكرا وجزاك الله خير . بس سؤال الكود تبع تحويل المستخدم من موقع لي موقع ينفع احفظو ولا افهمو ؟
❤❤❤
2:30 قتلت روح الهاكر اللي جوايا فعلا😂😂
merci
ماعم يزبط معي التحديث لوحده ولا انه ينتقل لرابط لحاله شو السبب؟
شي طيب اني اخلي الموقع تلقائي يعمل رفريش طول مانا شغال فيه
بارك الله فيك جعلها الله في ميزان حسناتك عندي سؤال meta كانت في الاول تتكب بالون ازرق لكن عند تطبيق خاصية نقل الشخص لموقع اخر تتكتب بالون احمر مع عدم تطبيق الخاصية ارجو الرد من حضرتك
كتبت بشكل خاطئ دقق النظر واكتب مثلما كتب
thank you