ماذا تعني لغة الترميز 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 بمختلف اشكالها
صراحه احسن كورس html لان شفت كثير من كورسات بس مو زي حضرتك بشرحوا شكرا علي معلومات القيمة اتمني لك صحه و العافيه طالبك من العراق مستمرين معك انشا الله
كلش الشرح واضح ومايدوخ ولايخربطك
هذا الرجل كفووو لولا الله ثم هذا الرجل ماكنت فكرت اصير مبرمج
شرحك زي السهل الممتنع بتوصل الفكرة بسهولة وبساطة مهما كانت صعوبتها عاش يا هندسة
اجمل و افضل شرح بمعنى الكلمة رغم اني لست عربيا الله يساندك دائما استاذ
الله يجزاك خير شرح رائع اسلوب اروع والله انت مميز انصح الكل بمتابعتك
مش عارفة اقول غير جزاك الله خيراااا .انت قاعد تنفع الامة .بارك الله فيك
اللهم صل على النبي 😍 ربنا يبارك فيك ويزيدك من علمه
يسطا يخربيت عظمتك😂😂❤
العظمة لله وحده
ويخربيت مالها داعي 😅
@@elgoogsalam3613 يعم انا بطلت تعليم برمجه و اتعلمت حاجه غيرها تعليق قديم هههه
الله يرزقك ويوفقك ياسطا ،😍😁
العظمه لله الواحد القهار
اسال الله ان يوفقك ويزيدك علما فوق علمك ويجعلها في ميزان حسناتك على هذا الشرح الرائع والممتع ...شرح يسهل كل صعب ويذلل العقبات التي طالما وقفت امام فهمي للبرمجة...
عظمة ع عظمة اخوك من السودان ❤
الله يعطيك العافية ويبارك فيك يا بش مهندس بجد اشي رائع
انا مسحت كل اللي اتعلمته قبل كده وهبداء من جديد ما شاء الله شرح عالمي
مشاء الله شرحك جميل واسلوبك اجمل
ماشاءالله شرحك سهل ومميز الله يسعدك ويرزقك الصحة والعافيه
شرح مبسط وسهل وطريقة احترافية ما شاء الله في تقديم المعلومات شكرا جزيلا
ربنا يبارك فيك من اجمل الشروحات
انا كمهندس الصراحه اهنيك على شرحك الجميل المنظم السلسل السهل. كثير من اليوتيوبر يبدا معاك باول فيديو بشكل ممتاز ثم تجده لا يعطي معلومات متكامله كان هدفه الحصول على دعم مالي او التشجيع من اجل كورسات مدفوعه استمررررر
يخرب بيت الفن والإبداع يا شيخ
جزاك الله كل خير 🤍🦋
جزاك الله عنا خيرا
الله يجزاك خير شرحك جميل جدا
مشكور جداً على جهدك وشرحك الواضح والمفهوم
جزاك الله خير شرح ممتاز
﴿ سبحان الله وبحمده سبحان الله العظيم عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته﴾ٌ.
والله يا عبدالرحمن جمال انت المفروض تشتغل مذيع راديو صوتك قوي جدا ماشالله
مبدع لاقوة الابالله 🤍🤍🤍
شرح فوق الممتاز ❤
شكرا جزيلا ليك ياهندسة ❤❤❤
ربنا يباركلك يهندسه بجد شكراً
مشكور على المجهود الرائع.
شكرا أخي عبد الرحمان
بجد ربنا يباركلك 😍
كفو ياباشا مهندس❤
شرحك جدًا سهل وممتع
كيف والله يسعد دينك ربي يوفقك ❤❤❤❤
الله يباركلك بجد
الف شكر ليك شرحك ممتاز
شكرا لك وجزاك الله خيرا
شكرا على جهودك
عظمه استمر.
بفضل الله وبفضل شخص شجعني اتابع كورس عنده مدفوع شفت الكورس وتحمست ادخل بهذا المجال واتعلم اي شي يفيدني بدل جلسة البيت .. والان بفضلك بعد ماصعبت علي بعض الشروحات بالكورس دخلت ابحث وطلععت قناتك شفت مقاطع الفيديو ... واليوم اول يوم لي اشتريت لابتوب جديد وفرحتي فيه كبيييرة ... الف شكر لك ولتسهيلك للشرح بهذه الطريقة الممتعة والجميله ... بفضل الله ثم بفضلك اصريت ع اللابتوب وان شاء الله ابدا معك من البداية واستفيد ❤
انت زعيم ❤️
استاذ رائع شكرا
رائع جداً
انت معلم❤
يسعد دينك يا عبده
الله يعطيك العافية تيججر
انت رائع ااستاذ ابراهيم انا لحتى هذا الفيديو ماشي معك كويس جزاك الله خير 😘
اسمه ليس ابراهيم
فنااااان
ممتاز
يعطيك العافية , هل بيكون في شرح CSS?
ربي يوفقك
جامد اوى
والله العظيم انت راجل محترم مليون لايك مش لايك واحد بس
kan we make the same sentens by ???? Does the tag work same as the tag ??
Creative ❤️
chokran chokran chokran chokran chokran chokran chokran chokran
لو سمحت هل بعد هذا الكورس نكون مؤهلين لسوق العمل
كفووووووو والله
merci
الله يفرحك
هل في سلسلة جديدة ا css وشكرا
ثم يأتي زمان يكشف ان اساتذة الجامعة لاعلاقة لهم بالتعليم..فقط حافظين مش فاهمين... تدخل الجامعة من الصبح للمساء تخرج صفر معلومة او معلومه ملخبطة..لكن مع جمال 5دقائق تفهم البرمجه كلها سلمت يداك وفاك
مشكور كتير على شرح البسيط حاولت فوت اعمل اختبار HTML Quiz ماشتغل يمكن في مشكلة ياريت تشوف الموضوع
اول شي شكرا الك الشرح جدااا ممتاذ بس سؤال ليش تعليمة code اذا فينا نكتب الكود بالpreوبيطلع متل ما هوي بدون اخطاء
جزاك الله خيلاً
ليه مش نستخدم عشان نفصل بين الكلام
the goat
استاذ من فضلك هل يمكنني تحميل الدروس على شكل pdf من اجل المذاكرة
عندي سوال في صعوبة في حفظ جميع الاوسمة في مرجع او طريقة كل الاوسمه فيه + شرح بسيط لنتذطرن
طريقه الشرح❤
يعني هل ممكن استبدل الp ب ال pre للكتابه بشكل افضل
في الدقيقة 2:40 ممكن كونت تعمل علشان تنزل سطر و تفرق ما بين الكلام
🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠🧠
but there is a benefit in it))
كود ال align مش شغال عندي ليه
😍😍😘😘
😍😍😍😍😍😍😍
6 ✅
ok
انا سمعت صوت baby وصوت كوبايات ( بالمصري) وصوت راجل وبس 😂
10\10
ممكن تكمل كورس CS50
خش على القناة هتلاقي كورس قديم وكورس جديد ذاكر اللي يعجبك
🥰🥰🥰🥰🥰🥰🥰
أين هو كورس CSS
الله يجزيك الخير احلا شي لا تركز ع كودا 🤣🤣🤣 كل كود قلت انت لا تكتبو انا كتبتو🙂
ممكن اسئل حضرتك احنا عندنا html مادة اساسي في الجامعة لو تابعت كل الكورسات معك خطوة خطوة هل ممكن انجح في الامتحان او لا وجزاك الله خيرا
شوف الاسأله اللي عندكز عامله ازاي وبعد كده اسمع الكورس ده لو عرفت تجاوب صح يبقا هتنجح 🎉
😇😇😇😇
🧠
السلام عليكم انا فاهم جدا شرح حضرتك بس عندي مشكلة في حفظ الاكواد فهل دا طبيعي علشان اول مرة ؟ ولو طبيعي ازاي اقدر اثبتهم في دماغي بسهولة
اكتبهم كتير و اعمل مشاريع كتيره وهتثبت معاك وهتلاقيك عرفتها تلقائي
@@engdesha3094 فعلا عملت كدا جزاك الله خيرا
@@mustafamahmed9202 نصيحتي الك اولا اكتب الاكواد بورقة وقلم وثانياً لا تحفظهن افهمهن انا هم بالبداية نفسك هم انسى الاكواد لكن ضروري انك تفهم الاكواد وليس حفظ
احفظ اول حرفين من اي كود انت عايز تحفظه او مهم وانت اول ما تكتب اول حرفين البرنامج نفسه هيعرض عليك الاكواد الي بي الحروف دي فا هتلاقي الكود بسهوله جدا
ازاي حضرتك بتقدر تعمل كوبي وتنسخه للسطر اللي بعده علطول كده
طب نعمل اييييه؟؟ 😂😂
الكلام مش عاوز يجي في الوسط
لو انا بدي اكبر الكلمة وحط خط جديد
استاذ حضرتك للان موجود بالصفحة اعملي اثبات حطلي لايك على هذا التعليق وانا بتمنى انك تكون لسا موجود
موجود ايوة
انا لما اسمع عبد الرحمن بيقول متركزش في الكود ده لا هركز
جدع 😂😂
كأن الجافا سكربت تشبه لحد كبير لغة c++
شكلي ونا 11 سنه وحضرتك بتقول انترفيو:🤡🤡
أنا 13 و نفس الشي 😭 المهم كملي بالتعلم لو كبرتي و واصلتي التعلم بتصيري شي عظيم بإذن الله
ليش كل الفيديوهات البرمجه يشرحوهم المصريين ؟؟؟😂
اشطر ناس
هذا شي يعتمد على الكثافه السكانية
🧠
O
O
D