ماذا تعني لغة الترميز 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 بمختلف اشكالها
صوتك مريح وشرحك هادىء لهيك بحب احضرلك وبتوصل المعلومه بكل سلاسه
عاوزين كورس ل css زي ده وجزاك الله خير❤️❤️
ايوه
@@enaizlyahous110 ايوة ايه ما هوا فيه اساسا كورس css !
@@shymmaahmed567 صح بس تصوير قديم
كان عندك بُعد نظر
يديك الف عافية يا شيخ انت افضل من المدرسين عندي في جامعة استوكهولم للعلوم والتكنلوجيا، اللي ما يشرحوا لنا بهذي الطريقة .
ما شاء الله والله لم اجد بعض هذه المعلومات الا عندك والحمد لله
الفضل لله وحده و بالتوفيق في اللي جاي
@@AbdelrahmanGamal انشاء الله
مشكور على مجهودك ترى نزلت على فيديوهاتك واحد ورا تاني شرحك مره حلو .واتمنى تستمر⚘
جزاك الله خير عن كل حرف اتعلمناه منك وربنا يوفقك للتقدم دايما
اللهم اجعلنا شافعين لك ، فيديوهاتك أختصرت فيديوهات اليوتيوب كامل من حيث كل لشي والله ، الله يحفضك ويوفقك وين ماكنت ، جيل وراء جيل بيدعي لك ، يمكن تدعمم وماتشوف تعليقي بس حبيت اعبر الي بقلبي واقلك والله انك مبدع بمعنى الكلمه وان شاء الله تشوف تعليقي شكراً عبدالرحمن جمال ❤❤❤❤❤❤❤❤.
احسن قناة اتابعها منذ اول استعمالي اليوتيوب
ربنا يجعله في ميزان حسناتك يارب
انا ماليش علاقه بالبرمجه ومش بعرف حاجه في الانجليزي لاكن اتعلمت منك كتير وخد منك الفكره الصح واستنتج المعلومات المفيده
اتعلمت كتير من حضرتك 🌹
جميل جدا بارك الله فيك سويتها باقي التكرار لحتى ترسخ بالعقل😘😘
جزاك الله كل خير اخي الكريم والله يجعله في ميزان حسناتك ويعلي من مراتبك وشانك يارب نستفيد كثيرة من قناتك .... لك كل الاحترام والتقدير تلميذتك من بلجيكا💚🙏🍀
في ميزان حسناتك يارب
thanks for your time, really you are the best
شكرا الك كتير يا احمد ممكن تنزلنا كورس الcss من سوريا ❤️❤️🇸🇾🇪🇬
صراحه أبدعت في form
جزاك الله خيرا♥
بارك الله فيك
جزاك الله كل خير / شرح أكثر من رائع
ممتاز ماشاء الله ..... ياريت شرح للفورم جروب
الله يجزاك خير
جزاك الله خيرا
you are the best of the best legend is you thank u soo much for this >>>>
الله يسعدك ❤
رائع جدا بتوفيق
الف شكر لحضرتك
الله ينور... ياريت كورس انجولار وتايب اسكريبت
very good thank you so much
good job bro👏
الله يجزاك الخيرررررررررررر
احسنت 💐
عندي لما عملت inbout type number كتب حرف الe بالرغم من ان ظهر الاسهم واتكتب ارقام بي وباقي الحروف مش كتبت احل المشكله ازاي هل حصلة مع حد تاني وا انا بس ؟
رائع يا هندسه 🌸🌸
شرح كتر حلو
جميل جدا جدا 😊
والله معلم🧐🧐🧐🧐
بسم الله ماشاء الله عليك شرحك احسن من دكتور الجامعة الله يوفقك
ممكن سؤال هو لما اضغط عالsubmit مبتنبعتش ليه
شكرا
Thank you
رائع
Thanks
thanks
شكراااا
حفظك لله
Great
انا عندي مشكلة الsubmitمايشتغل لما اضغطه مايرسل بيانات حد يساعدني
شكرا جزيلا لك. لكن هذا الفيديو فيه كمية معلومات كثيرة
can i put be place
اشمعنى في for attribute محطيناش # مع ال id زي ال link ?
لو سمحت أنا بفتح ب gooel chrome .. ويستخدم not bad +++ بس لما اعمل mail أو رقم يسمح انو يكتب فى نصوص عادى مش ارقام
طيب اخي البيانات دي تنبعتلي فين لو انا عايز اعمل نظام حسابات
عايز اظبطها بال css وجزاك الله كل خير
greaat 😘
وينك من زمان يا حياتي
شرح جميل جزاك الله اخي
جزاك الله خير بس عندي سؤال الان انت مثلا لما تضع الماوس بعد علامة= بين النقطتين تظهر لك خيارات لما وضعته عند type انا لما اضع الماوس ما تظهر لي خيارات كيف اخليها تظهر ؟ وشكرا
👏👏👏👏👏
TNice tutorials is simply A to Z on soft
السلام عليكم كيف أجعل الفورم يحتفظ بالبيانات حتى بعد عمل Refresh
بعض الاوامر لا تعمل وش ممكن تكون المشكلة ؟
❤
كيف اسوي عرض لكلمة السير او اخفيها
ماذا لو عملت ذلك بدون وسم ال form
حضرت كورسات كتير على اليوتيوب لكن ماشفت حدا بشرحك زيك... الف الف شكر ليك... ياريت تعملنا كورس عن سي شارب
10:30 السلام عليكم لما اجي اربط id و for. وادخل علي browser واجي ادوس علي الكلمة بيظهري علامة text select ومش بيضغط علي الكلمة حد يعرف حل شكرا مقدما
شكرا كتير الك بس انا عندي زرار ال submit كتبت متل ما انت قلت بس لما اكبس sumbit ما بيتم ارسال المعلومات وجربت اكتر من مرة
اني هم ما يطلعلي
اعاني من نفس المشكل
وانا كمان نفس المشكلة
☑
هل ال placeholder تغني عن ال label ؟
لا دي الها استخدامات ودي الها استخدامات
يوم اسوي submit مايبعتلي username و password تبقا زي ماهي ليش؟
حصلت معايا وكنت ناسيه اكتب input داخل وسم
سكر الموقع كامل ارجع افتحو انا هيك سويت و ضبطت معي
اشمعناا في id هنا مرادي مستخدمتش # مع انك منبه عاليها
نفس السؤال عندي ولكن اعتقد ان استخدام الهاش بيكون لو عاوز اعمل لينك او انتقال في نفس الصفحه او صفحات او اميل اخر
يعني الهاش في الانتقال مش الربط والله اعلم
هو استخدم # دي في href مش مع id ال id كتابة نفس الكلمة علشان يربط الكودين ببعض
انا عملت اصغر موقع في العلم مكون من ٢٢ صطر بس😊
انا لسة بادئ
سوال هل يصير استخدم pre لنزول الباس ؟
ممكن مساعدة*******
اسم البرنامج ده ايه
Visual Studio Code
sign in password email
لما اضغط على enter ما يرسل هل فيه احد مثلي ؟
انا ايضا
فى افكار شيطانية بدور فى دماغى بعد الفديو دة 😂
ليه😂
جزاك الله خيرا
انا عندي مشكلة الsubmitمايشتغل لما اضغطه مايرسل بيانات حد يساعدني