#3 كورس html كامل بالعربي | tags
HTML-код
- Опубликовано: 15 сен 2024
- ماذا تعني لغة الترميز HTML؟ ما هي أنواع الوسوم - Tags أو عناصر HTML؟ وما هي المكونات الأساسية لعناصر HTML؟ وشرح باللغة العربية خطوة بخطوة لـ تعلم لغه html، كيفية إنشاء صفحة ويب بإستخدام أكواد HTML
________________
للتواصل معي
حسابي على instagram :
/ abdelrahman_noufal
حسابي على فيسبوك :
/ abdelrahman.g.nofal
الجروب الخاص بنا :
/ 1810581845642171
________________
تحميل محرر الاكواد visual studio لاجهزة الكومبيوتر
code.visualstu...
_______________
كورس 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 بمختلف اشكالها
تحية من المغرب لي شعب مصر العزيز والاستاذ صاحب القناة بصفة خاصة ربينا ادك الصحة شكرا
نفسي اتعلم وردبريس وشوفت شرح لواحد عقدني وسبحان الله قولت احاول تاني وربنا عطرني فيك وحقيقي مبسوطه اوي عشان حسبت بأمل اني افهم واوصل
هو وردبريس بيحتاج لغه برمجه
جتلك بعد سنه اتعلمتى ولا لا
لا لو عايز كورس ممكن ادهولك ببلاش شاريه@@ahmed.musalam4803
علي فكرة انا شاهد حوالي ٣ ساعات يوميا من القناة،، انت إنسان رائع،، ربنا يبارك فيك
السلام عليكم اخي كيف اكتب > من الكيبورد
@@polanipopalo6939 shift + و
شكرا انك مش مخلينا نحس بالملل
ألف ألف ألف شكر ليك أستاذ جمال أنا ما كنت عارفة ابدأ منين أو إزاي ولكن بفضلك و بفضل شرحك الهايل قدرت افهم و أطبق كويس جدا ربنا يبارك لك
شرح رائع ، بوركت على هدا العمل و جعله الله في ميزان حسناتك🤲🇩🇿👏🏼
اين وصلتي في تقدمك DZ🥰
ربنا ايبارك فيك استاذ تحية من امازيغي المغرب شرحك مذهل ما شاء الله
بجد احلى شرح روعة قمة الجمال واواو سهل ممتنع مفيش صعوبة والله لو تعمل كورس كامل انا كمل معك وهكون مبرمج قوى جداا بفصل علمك الخطير ما شاءالله رووعة الله يفتح عليك جامد جداااا استمر بالله وكمل لنا كمان css ,جافا
شرحك حلو احسن من الدكتور الي عندنا👏🤝
اقسم با الله افضل استاذ
شكرا جزيلا لا تكفي
أسأل الله لك الجنة ♥
شكرا يا احلى عم عبدالرحمن😘
ما شاء الله تبارك الله، الشرح مرتب جدًا وسهل الفهم، جزاك الله خيرًا استاذ عبد الرحمن🌷
الله يجعلها في ميزان حسناتك ❤
شكراً كثيراً انت الافضل ❤🎉
ربنا يبارك فيك بصراحة شرحك واضح وجميل جدا وانا استفدت كتير والله
السلام عليكم .جزاك الله خيرا .وفق الله لكل خيرا
﴿ سبحان الله وبحمده سبحان الله العظيم عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته﴾ٌ.
Thanks dude this really helped me a lot I did the steps that's you did thanks man!
انت راءع فى الشرح متفوقا على أساتذة فى المجال
بعد ماعملت الفولدر في اخر حاجة وخلصت وعملت Auto save كل ما اكتب كلمة مبتتحفظ ابدا حتى لو عملت control+ s
ايه المشكله انو محرر الاكواد مبيحفظش حاجة على الفولدر بتاعي
شكرا على جهودك الي بتقدمها يا استاز ان شاء الله راح تكون انطلاقتي في عالم البرمجة من قناتك
شرح خورافي +اتمنى تسوي كورس جديد css
تستحق كل الدعم اخي واصل للامام عقبال المليون مشترك
افضل شرح شفتو في حياتي 😢❤❤❤❤ كفو عليك
شرح مبسط جدا بطريقه رائعه جزاك الله خيرا
شكرا شكرا شكرا ..بارك الله فيك و جزاك بكل خير
شرح اكتر من رائع
شكرا جزيلا
السلام عليكم اخي كيف اكتب > من الكيبورد
الله يدخلك الجنة
ربنا يجعله بميزان حسناتك يارب
❤❤❤❤❤❤الله يحفظك شرحك كتير حلو
معلومات في القمة.. شكرا جزيلا ❤
ربنا يباركلك
مبدع
ده انا لو اتعلمت البرمجة كاملة منك هبقي برنس المجال ❤😂
الله يجزاك خير ويرحم والديك ويكتب اجرك
يابشمهندس عبدالرحمن كورس cs50 واقفين عند آخر درس من فترة كبيرة محتاجين بقية الكورس بالله عليك
السلام عليكم اخي كيف اكتب > من الكيبورد
@@polanipopalo6939 عندي في الكيبورد جنب حرف ال M
@@Hexor_777 الله يرحم والديك
@@polanipopalo6939 شيفت بعده ذا>
❤❤❤❤❤شكرا على الدرس ❤❤❤❤❤
في عندي مشكل لما اكتب الكود ....... مبتكتب الكتابة كبيرة ممكن تساعدني
واناكمان
شرحك ممتاز جزاك الله خيرا
الله يقويك
بارك الله فيك
السلام عليكم اخي كيف اكتب > من الكيبورد
الله يباركلك يا بشمهندس
كلمة شكر قليلة بحقك لكن شكرا شكرا شكرا
بارك الله فيك وجعل هذا العلم في ميزان حسناتك الي يوم الدين
ممكن لو سمحت تعمل كورسات للاساسيات
ازاي بتكتب التاج الفتح والقفل وراه عطول بسرعة؟.. بضغطة زر من الكيبورد بس ما فهمتش.. وبرده عملت بااك لكلمة هالو وورلد بسرعة؟؟
شرح راشرح رائع
شكرا على الشرح الجميل يامهندس
انا مطور اندرويد و ios بس معي بجامعة مساق ويب يعيني مش مهتم كثير بالويب بس شكرا لانك ساعدتني للامتحان وحببتني بالويب
في الدقيقة4:50 ازاي حذفت ارقام ال h من الجهتين وانت مخلي الماوس ع جهه وحده
كل الاحترام والتقدير لكم استاذي الفاضل على المجهود الجبار و الشرح الرائع ، صراحة أنا محظوظ جدا جدا لأنني اكتشفت هذه القناة الهادفة و هذا الأستاذ الكبير ، والتي أعتبرها كنزا و مدرسة رائدة في مجال تعليم البرمجيات ، وجعل الله هذا العمل الرائع في ميزان حسناتكم و زادكم الله من فضله وكرمه ، تلميذك الجديد من المغرب
مميز عن اي شرح
شكرا لك
انا لما اعمل h< لاتظهر لي الخيارات h1 ....
ارجوكم اريد اجابة
شرحك إبداع
اكواد التاج عندى مش راضيه تتفعل
نفس المشكلة لسه بادئ
ما شاء الله شرح رائع
very enthusiastic
Thank you so much for this course God bless you
لو سمحت انا الكلام فى h1 عندى بيظهر صغير جدا مش شكل ما ظاهر مع حضرتك كدا انا عندى مشكلة ولا اية؟؟
يمكن مش حاطط الكلام في المكان الصح او معملتش save بعد ما خصلت او كبر الصفحه خليها زوم الصفحه 100 طبيعي
لو سمحت انا عندي مشكله انا الصفحه لي بطبق عليه مش بتظهر اليويتوب ولااي حاجه وبتجي فاضيه ومش بيظهر عليها اي حاجه بكتبها طب الحل ايه
to write the code of html click on shift and one after that click on enter
شكرااااا ❤
أسلوبك ممتاز جدًا… إستمر
السلام عليكم اخي كيف اكتب > من الكيبورد
@@polanipopalo6939
موجود بجانب حرف M
@@polanipopalo6939 حرف h مش بيبقي لونه اورق عندي اعمل ايه؟
جعلها الله في ميزان حسناتك انا عندي مشكلة إذا بحول h1 إلى h2 لا يتفعل مالحل
عبقري
Merci beaucoup 🤍🤍🤍
ممكن كورس css
كيف تفعل تضليل للجهتين؟ لما غيرت ال h1 الى h2
اسطورة
لو سمحت هل هذه الدورة تؤهل لسوق العمل ?
طريقة فاتحة صفحه الويب عشان اقدر اشوف النتيجه لما اعمل run ؟
بعد اذنك أنا عاوز برمجة تطبيقات والعاب أنا عندي 12 سنة ومستمر معاك وبالتوفيق انشاء الله
استمر
السلام عليكم اخي كيف اكتب > من الكيبورد
@@polanipopalo6939 حول اللغه من عربي الي أنجليزي
Shift +
شكرا اخي الكريم على خير ❤مرحبا 😂😂😂😂😂😂❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤ممتنة ❤❤❤❤❤🇬🇵🇬🇵🇬🇵
ليش الكود بيطلع لي في الصفحة
❤
السلام عليكم اخي كيف اكتب > من الكيبورد
وفقك الله على المجهودات
السلام عليكم اخي كيف اكتب > من الكيبورد
shift + و
لكيت حل لو لا
@@polanipopalo6939 شفت و حرف الواو
طب لو الاكبر من لونها احمر اعمل ايه
HTML
السلام عليكم ورحمة الله وبركاته
لما بسجل ملف text باسم وبعدين dot و html الملف بفضل بصيغة txt ليه؟
لانك غالباً مش عامل اظهار للامتداد بتاعت الملفات من نظام التشغيل
#️⃣1️⃣✅
مديصير تغيير بلخط مع العلم تطبيقي كله صحيح< h1>
يا مستر حضرتك انا بعد ما عملت index. html ودخلت اكتب اكواد وادوس refresh مفيش حاجه بتظهر في الشاشة ارجو اخباري بالحل
تاكد أنك حفظت الخطوة الي كتبتها
ازاي تقدر تكتب في اكثر من مكان ؟🌚
من فضلك ليه ما بيظهرش الرمز البرتقالي عندي؟ s
كيف تكرر الكلمة .. يعني وش اختصار التكرار بلكيبورد
ماعم اقدر افتح البرنامج الكود مع صفحه الويب
3 ✅
هوا ازي بتعمل المسافات من الكيبورد
دلوقتي انا فيه مشكلة معايا لما باجي اكتب
فيدونا نفس الشيء؟
@@user-eo3nx4uc2x بص من تحت في شريط كدة مكتوب فيه CRLF
اختار الخانة الي علي يمينها واختار لغه HTML
@عازف اللليل الحل كاتبه فوق اهو
@عازف اللليل مش عارف والله جرب امسح البرنامج وحمله تانى او حاول تشوف اليوتيوب
@@AbdelrahmaNMohamed-nw7tc لى لما بكتب h1,2,3 بتتغير كدا ف الموقع مش بتغير حجم الكلام المكتوب
لا أستطيع كتابة عربي في تاق h1 يكتب انقليزي فقط ياليت اللي يعرف الطريقة يبلغنا وجزاه الله الجنه
مايتفاعل معي ليش !! احط h> ولايطلع شي
المشكلة لما اجي اكتب حرف ال h بيتكتب اكنه حرف عادي مش باللون الازرق ومبيظهرليش القايمة اللي فيها h1 و h2 وh3 و.......
@جني لونو بني حطيتي!
انا مثلك ممكن قولي اي الحل
ممكن حد يدلنى ازاى قسم الصفحه كده
ازاي اعمل في الخلفيه فيديو متحرك
انت بتنط مراحل كتير ليه 😂
متصبر و امشي خطوة خطوة مع الدورة و والله هتعرف
@@AbdelrahmanGamal 😂😂😂😂 الراجل ده زي انا
هو بس سؤال خفيف ممكن حضرتك تشرح لينا في قرص ال css ايه حوار ::after and before
لاني شفت شاب هندي عمل حجات كيره بالcss اقسم بالله ما فهمت منه حاجه .ده عمل مينيو متحرك و عمل حاجات كتير ارجو من حضرتك انك تشر لينا ده في فيدو عملي يعني حضرتك تعمل مشروع و تشرح بشكل عملي الحاجات دي و شكرا (اسف لكلامي الكتير)
😊
@@AbdelrahmanGamal لا هوه انا حاليا خلصت كل ده لاني معاك من بداية كورس html القديم فا انا خلصت ده وخلصت css وحاليا بتعلم جافا سكريبت بس مش عارف لاكن الي وقفت قدامي هيه الخلفيه المتحركه دي معرفتش اعملها
السلام عليكم اخي كيف اكتب > من الكيبورد
ana fe tag ma yedehareche liya lih
معلومة اضافية يمديك توصل h9
كيف اضع اكبر واصغر ع كيبورد ما بنفع عندي
تشعط على shift و علامة الاكبر أو الاصغر إلي عندك فالكيلورد في نفس الوقت جرب وقول لي إدا الطريقة ناجحة أو لاو
ازاي اكتب الاصغر والاكبر
Shift و
Shift ز
في كم شكل لل
الاتنين اللي ذكرتهم فقط