#17 كورس html كامل بالعربي | form input

2022 ж. 16 Шіл.
145 814 Рет қаралды

ماذا تعني لغة الترميز 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 بمختلف اشكالها

Пікірлер
  • صوتك مريح وشرحك هادىء لهيك بحب احضرلك وبتوصل المعلومه بكل سلاسه

    @mf3769@mf3769 Жыл бұрын
  • عاوزين كورس ل css زي ده وجزاك الله خير❤️❤️

    @ahmedshemees4721@ahmedshemees4721 Жыл бұрын
    • ايوه

      @enaizlyahous110@enaizlyahous110 Жыл бұрын
    • @@enaizlyahous110 ايوة ايه ما هوا فيه اساسا كورس css !

      @shymmaahmed567@shymmaahmed567 Жыл бұрын
    • @@shymmaahmed567 صح بس تصوير قديم

      @lo_8rd@lo_8rd Жыл бұрын
    • كان عندك بُعد نظر

      @vimosdimos3533@vimosdimos35332 ай бұрын
  • يديك الف عافية يا شيخ انت افضل من المدرسين عندي في جامعة استوكهولم للعلوم والتكنلوجيا، اللي ما يشرحوا لنا بهذي الطريقة .

    @nurialsaeed5769@nurialsaeed57695 ай бұрын
  • ما شاء الله والله لم اجد بعض هذه المعلومات الا عندك والحمد لله

    @_thegreatquranchannel8611@_thegreatquranchannel8611 Жыл бұрын
    • الفضل لله وحده و بالتوفيق في اللي جاي

      @AbdelrahmanGamal@AbdelrahmanGamal Жыл бұрын
    • @@AbdelrahmanGamal انشاء الله

      @_thegreatquranchannel8611@_thegreatquranchannel8611 Жыл бұрын
  • مشكور على مجهودك ترى نزلت على فيديوهاتك واحد ورا تاني شرحك مره حلو .واتمنى تستمر⚘

    @samar1441@samar1441 Жыл бұрын
  • جزاك الله خير عن كل حرف اتعلمناه منك وربنا يوفقك للتقدم دايما

    @asmaaabdelnaser2760@asmaaabdelnaser27609 ай бұрын
  • اللهم اجعلنا شافعين لك ، فيديوهاتك أختصرت فيديوهات اليوتيوب كامل من حيث كل لشي والله ، الله يحفضك ويوفقك وين ماكنت ، جيل وراء جيل بيدعي لك ، يمكن تدعمم وماتشوف تعليقي بس حبيت اعبر الي بقلبي واقلك والله انك مبدع بمعنى الكلمه وان شاء الله تشوف تعليقي شكراً عبدالرحمن جمال ❤❤❤❤❤❤❤❤.

    @Ahmedmohammed-vu5xx@Ahmedmohammed-vu5xx6 ай бұрын
  • احسن قناة اتابعها منذ اول استعمالي اليوتيوب

    @wathikkd9523@wathikkd95234 ай бұрын
  • ربنا يجعله في ميزان حسناتك يارب

    @SJYSJY5891@SJYSJY5891Ай бұрын
  • انا ماليش علاقه بالبرمجه ومش بعرف حاجه في الانجليزي لاكن اتعلمت منك كتير وخد منك الفكره الصح واستنتج المعلومات المفيده

    @shreif1@shreif127 күн бұрын
  • اتعلمت كتير من حضرتك 🌹

    @user-yn3em4ut5u@user-yn3em4ut5u Жыл бұрын
  • جميل جدا بارك الله فيك سويتها باقي التكرار لحتى ترسخ بالعقل😘😘

    @Tawfik-Albeel@Tawfik-Albeel7 ай бұрын
  • جزاك الله كل خير اخي الكريم والله يجعله في ميزان حسناتك ويعلي من مراتبك وشانك يارب نستفيد كثيرة من قناتك .... لك كل الاحترام والتقدير تلميذتك من بلجيكا💚🙏🍀

    @titot6065@titot6065 Жыл бұрын
  • في ميزان حسناتك يارب

    @emanjuma3067@emanjuma30672 ай бұрын
  • thanks for your time, really you are the best

    @HebaFaouri@HebaFaouri Жыл бұрын
  • شكرا الك كتير يا احمد ممكن تنزلنا كورس الcss من سوريا ❤️❤️🇸🇾🇪🇬

    @wedadajam7114@wedadajam7114 Жыл бұрын
  • صراحه أبدعت في form

    @emanjuma3067@emanjuma30672 ай бұрын
  • جزاك الله خيرا♥

    @eslamfouda67@eslamfouda6711 ай бұрын
  • بارك الله فيك

    @user-vk6xj7nk9l@user-vk6xj7nk9l Жыл бұрын
  • جزاك الله كل خير / شرح أكثر من رائع

    @learn5@learn5 Жыл бұрын
  • ممتاز ماشاء الله ..... ياريت شرح للفورم جروب

    @mohamedsayed3775@mohamedsayed37755 күн бұрын
  • الله يجزاك خير

    @user-ve5td2nh2d@user-ve5td2nh2d4 ай бұрын
  • جزاك الله خيرا

    @user-qg5of2pt7w@user-qg5of2pt7w8 ай бұрын
  • you are the best of the best legend is you thank u soo much for this >>>>

    @user-gf9ww5ep1o@user-gf9ww5ep1o Жыл бұрын
  • الله يسعدك ❤

    @perfect.7504@perfect.75048 ай бұрын
  • رائع جدا بتوفيق

    @user-mu3ke7is1t@user-mu3ke7is1t8 ай бұрын
  • الف شكر لحضرتك

    @markomohsen5316@markomohsen5316 Жыл бұрын
  • الله ينور... ياريت كورس انجولار وتايب اسكريبت

    @mohamedsayed3775@mohamedsayed37755 күн бұрын
  • very good thank you so much

    @user-gj1ix6sk1o@user-gj1ix6sk1o4 ай бұрын
  • good job bro👏

    @lahsenaitsaid2872@lahsenaitsaid28727 ай бұрын
  • الله يجزاك الخيرررررررررررر

    @homamalmasry1685@homamalmasry168511 ай бұрын
  • احسنت 💐

    @user-yd2vc8ft4z@user-yd2vc8ft4z4 ай бұрын
  • عندي لما عملت inbout type number كتب حرف الe بالرغم من ان ظهر الاسهم واتكتب ارقام بي وباقي الحروف مش كتبت احل المشكله ازاي هل حصلة مع حد تاني وا انا بس ؟

    @user-yj7ee2pn5h@user-yj7ee2pn5h7 ай бұрын
  • رائع يا هندسه 🌸🌸

    @MB-mg1ot@MB-mg1ot Жыл бұрын
  • شرح كتر حلو

    @reryasid9582@reryasid9582 Жыл бұрын
  • جميل جدا جدا 😊

    @khawlarima4222@khawlarima42223 ай бұрын
  • والله معلم🧐🧐🧐🧐

    @galilferhati5422@galilferhati5422 Жыл бұрын
  • بسم الله ماشاء الله عليك شرحك احسن من دكتور الجامعة الله يوفقك

    @AhmadAhmad-py7xf@AhmadAhmad-py7xf Жыл бұрын
  • ممكن سؤال هو لما اضغط عالsubmit مبتنبعتش ليه

    @mariamarouk2469@mariamarouk24693 ай бұрын
  • شكرا

    @user-wz4kt8xl6y@user-wz4kt8xl6y Жыл бұрын
  • Thank you

    @tomwallker8727@tomwallker872710 ай бұрын
  • رائع

    @user-ve4rq3fx4s@user-ve4rq3fx4s Жыл бұрын
  • Thanks

    @darsh0108461036@darsh0108461036 Жыл бұрын
  • thanks

    @akasm287@akasm2878 ай бұрын
  • شكراااا

    @basildeab770@basildeab770 Жыл бұрын
  • حفظك لله

    @ismailse9515@ismailse9515 Жыл бұрын
  • Great

    @brahimmaimouni2002@brahimmaimouni2002 Жыл бұрын
  • انا عندي مشكلة الsubmitمايشتغل لما اضغطه مايرسل بيانات حد يساعدني

    @mohamadgeming3942@mohamadgeming39425 күн бұрын
  • شكرا جزيلا لك. لكن هذا الفيديو فيه كمية معلومات كثيرة

    @user-me6dn7tt1w@user-me6dn7tt1w10 ай бұрын
  • can i put be place

    @aepraepr2204@aepraepr22042 ай бұрын
  • اشمعنى في for attribute محطيناش # مع ال id زي ال link ?

    @nohatota8767@nohatota8767 Жыл бұрын
  • لو سمحت أنا بفتح ب gooel chrome .. ويستخدم not bad +++ بس لما اعمل mail أو رقم يسمح انو يكتب فى نصوص عادى مش ارقام

    @mohhagag2996@mohhagag2996 Жыл бұрын
  • طيب اخي البيانات دي تنبعتلي فين لو انا عايز اعمل نظام حسابات

    @user-mb5fw1ey2m@user-mb5fw1ey2m Жыл бұрын
  • عايز اظبطها بال css وجزاك الله كل خير

    @mohamedsami1956@mohamedsami1956 Жыл бұрын
  • greaat 😘

    @user-vq5ex3sw1y@user-vq5ex3sw1y2 ай бұрын
  • وينك من زمان يا حياتي

    @AhmedAlarbu@AhmedAlarbu2 ай бұрын
  • شرح جميل جزاك الله اخي

    @user-nq3fn6jr4h@user-nq3fn6jr4h11 ай бұрын
  • جزاك الله خير بس عندي سؤال الان انت مثلا لما تضع الماوس بعد علامة= بين النقطتين تظهر لك خيارات لما وضعته عند type انا لما اضع الماوس ما تظهر لي خيارات كيف اخليها تظهر ؟ وشكرا

    @lolo78709@lolo787098 ай бұрын
  • 👏👏👏👏👏

    @zeegamerplatformgams1612@zeegamerplatformgams1612 Жыл бұрын
  • TNice tutorials is simply A to Z on soft

    @user-sp9fy9nk4k@user-sp9fy9nk4k Жыл бұрын
  • السلام عليكم كيف أجعل الفورم يحتفظ بالبيانات حتى بعد عمل Refresh

    @egybrush@egybrush11 ай бұрын
  • بعض الاوامر لا تعمل وش ممكن تكون المشكلة ؟

    @EasternBoss@EasternBoss10 ай бұрын
  • @aboabd9857@aboabd985710 ай бұрын
  • كيف اسوي عرض لكلمة السير او اخفيها

    @Amjad_Eyad@Amjad_Eyad10 ай бұрын
  • ماذا لو عملت ذلك بدون وسم ال form

    @user-zt7rs6kz9k@user-zt7rs6kz9k Жыл бұрын
  • حضرت كورسات كتير على اليوتيوب لكن ماشفت حدا بشرحك زيك... الف الف شكر ليك... ياريت تعملنا كورس عن سي شارب

    @AminaAlhasan-uk2hi@AminaAlhasan-uk2hiАй бұрын
  • ‏‪10:30 السلام عليكم لما اجي اربط id و for. وادخل علي browser واجي ادوس علي الكلمة بيظهري علامة text select ومش بيضغط علي الكلمة حد يعرف حل شكرا مقدما

    @mohammedmorad5425@mohammedmorad54253 ай бұрын
  • شكرا كتير الك بس انا عندي زرار ال submit كتبت متل ما انت قلت بس لما اكبس sumbit ما بيتم ارسال المعلومات وجربت اكتر من مرة

    @MaherAdnan-d@MaherAdnan-d8 ай бұрын
    • اني هم ما يطلعلي

      @kararnatek@kararnatek7 ай бұрын
    • اعاني من نفس المشكل

      @kevinpie@kevinpie5 ай бұрын
    • وانا كمان نفس المشكلة

      @mariamarouk2469@mariamarouk24693 ай бұрын
  • @webb-developer@webb-developer6 ай бұрын
  • هل ال placeholder تغني عن ال label ؟

    @user-zt7rs6kz9k@user-zt7rs6kz9k Жыл бұрын
    • لا دي الها استخدامات ودي الها استخدامات

      @user-pz5zl4vx7g@user-pz5zl4vx7g Жыл бұрын
  • يوم اسوي submit مايبعتلي username و password تبقا زي ماهي ليش؟

    @enaizlyahous110@enaizlyahous110 Жыл бұрын
    • حصلت معايا وكنت ناسيه اكتب input داخل وسم

      @MB-mg1ot@MB-mg1ot Жыл бұрын
    • سكر الموقع كامل ارجع افتحو انا هيك سويت و ضبطت معي

      @Ali_Mahdi1@Ali_Mahdi1 Жыл бұрын
  • اشمعناا في id هنا مرادي مستخدمتش # مع انك منبه عاليها

    @abdalahamgad5550@abdalahamgad5550 Жыл бұрын
    • نفس السؤال عندي ولكن اعتقد ان استخدام الهاش بيكون لو عاوز اعمل لينك او انتقال في نفس الصفحه او صفحات او اميل اخر

      @MB-mg1ot@MB-mg1ot Жыл бұрын
    • يعني الهاش في الانتقال مش الربط والله اعلم

      @MB-mg1ot@MB-mg1ot Жыл бұрын
    • هو استخدم # دي في href مش مع id ال id كتابة نفس الكلمة علشان يربط الكودين ببعض

      @-turki112@-turki112 Жыл бұрын
  • انا عملت اصغر موقع في العلم مكون من ٢٢ صطر بس😊

    @alieleraky6654@alieleraky665411 ай бұрын
    • انا لسة بادئ

      @alieleraky6654@alieleraky665411 ай бұрын
  • سوال هل يصير استخدم pre لنزول الباس ؟

    @proxe8810@proxe8810 Жыл бұрын
  • ممكن مساعدة*******

    @galilferhati5422@galilferhati5422 Жыл бұрын
  • اسم البرنامج ده ايه

    @user-nu6qp4vw5g@user-nu6qp4vw5g3 ай бұрын
    • Visual Studio Code

      @AbderrahmanMessai@AbderrahmanMessai2 ай бұрын
  • sign in password email

    @Leksjhsjzk@Leksjhsjzk8 ай бұрын
  • لما اضغط على enter ما يرسل هل فيه احد مثلي ؟

    @EasternBoss@EasternBoss10 ай бұрын
    • انا ايضا

      @kevinpie@kevinpie5 ай бұрын
  • فى افكار شيطانية بدور فى دماغى بعد الفديو دة 😂

    @abdelrahmanhassan4087@abdelrahmanhassan40875 ай бұрын
    • ليه😂

      @alaauchiha4905@alaauchiha490522 күн бұрын
  • جزاك الله خيرا

    @adilessdraoui404@adilessdraoui4047 ай бұрын
  • انا عندي مشكلة الsubmitمايشتغل لما اضغطه مايرسل بيانات حد يساعدني

    @mohamadgeming3942@mohamadgeming39425 күн бұрын
KZhead