Тёмный

#14 كورس html كامل بالعربي | القوائم Lists 

Abdelrahman Gamal
Подписаться 516 тыс.
Просмотров 101 тыс.
50% 1

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

Наука

Опубликовано:

 

16 июл 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 50   
@mostafaabdelrazek4989
@mostafaabdelrazek4989 Год назад
انت انسان محترم وممتاز بجد وانا بحبك ف الله
@body2513
@body2513 Год назад
بارك الله فيك هندسه المحترم مبتحبش تضيع وقت فعلا ونعم التفكير الحسن👍👍👍
@user-vg4cm9ei7o
@user-vg4cm9ei7o Год назад
جميل جدا اعمل مشاريع كبيره بhtml و Css فقط
@user-iu5xu1qz4y
@user-iu5xu1qz4y 7 месяцев назад
جميل جدا
@halal369
@halal369 6 месяцев назад
انا وصلت لحد هنا عاوز اقولك ....
@ismaelomer2372
@ismaelomer2372 9 месяцев назад
اشكرك فعلا تعلمت منك جيدا كنت قد نعلمت على موقع الزيرو ولم افهم شىء للاسف
@Abdallah.Yousef
@Abdallah.Yousef Год назад
بارك الله فيك يا بش مهندس وربنا يجعله في ميزان حسناك
@mohamedwael6844
@mohamedwael6844 Год назад
ربنا يبارك لك ياهندسة ويجعله في ميزان حسناتك ❤
@basl83
@basl83 10 месяцев назад
بارك الله فيك اخي الكريم تمام شرح واضح ومفصل ومختصر كل الاحترام والتقدير لجهودك
@Tawfik-Albeel
@Tawfik-Albeel 8 месяцев назад
كويس بارك الله فيك هذا الدرس فهمته وطبقتة 👍 المرتبه type 1, a , أ 😂الوصف
@bahaalnobane6939
@bahaalnobane6939 Год назад
الله يوفقك ويبارك فيك على قد ما ساعدتني
@kandam109
@kandam109 Год назад
السلام عليكم انا متابع معاك الكورس من البدايه وبصراحه الله يجزيك الخير على هيك محتوى والله فعلا ابداع عندي تنويه بسيط جدا بعد اذنك الحلقه هاي لازم تكون اول القناه فوق بعد اول 4 فيديوهات اضافه لهيك يا ريت تعطينا كذا حلقه تكون تبدا من مستوى منخفض الى مستوى اعلى حول موقع w3school وتعرفنا فيه على محتوى هذا الموقع وكيفيه التعامل معه اتمنى ان تتقبل راي كل الاحترام وجزاك الله عنا كل خير
@alibobo9411
@alibobo9411 Год назад
نسيت قائمة Details..summary أستاد جمال ونشكرك كتير كتير واصا أرجوك
@mohcinecheikh
@mohcinecheikh Год назад
بارك الله فيك و في والديك
@Hh_habiba.44
@Hh_habiba.44 8 месяцев назад
السهل الممتنع وفقك الله ♥❤❤❤❤❤❤
@nou_ni._
@nou_ni._ 7 месяцев назад
بارك الله فيك
@mcraft4539
@mcraft4539 Год назад
ممكن رابط كورس css ورابط فيديوهات بتاعة عمل المشاريع
@ii73
@ii73 Год назад
شرح جميل جدا
@AhmedHassan-to7ox
@AhmedHassan-to7ox Год назад
روعة يا هندسة ممكن تكمل كورس CS50
@tt4m
@tt4m 10 месяцев назад
ش الفرق بين cs50 وcss
@Hh_habiba.44
@Hh_habiba.44 8 месяцев назад
​@@tt4mهو مفيش تشابه اساسا css خاص بتنسيقات مجال الويب و هو مش لغه برمجيه اساسا دا تنسيق Cs50 كورس تأسيس للدخول في عالم البرمجه
@yjnabhan
@yjnabhan Год назад
هل عندك دروة تابعة css
@zeegamerplatformgams1612
@zeegamerplatformgams1612 Год назад
ممتاز
@alibobo9411
@alibobo9411 Год назад
in breef: Attribute "reversed" don't work with me why?
@danya6699
@danya6699 3 месяца назад
اسطورة
@touchwood6444
@touchwood6444 11 месяцев назад
ممكن تحط ملزمه نذاكر منها ال html
@medelkintty1899
@medelkintty1899 Год назад
لماذا لايمككن تحميل الفيديوهت
@benbelkis2
@benbelkis2 Год назад
8:17 يا أستاذي ال attribute عندما جعلت الستايل بالحروف الأبجدية و وضعت البداية من الحرف D لم يتغير شيء و بدأ بالـ A
@MohamedElsayed-df2zc
@MohamedElsayed-df2zc Год назад
اعمل كده وهتظبط
@zoksh2699
@zoksh2699 7 месяцев назад
ازاي ب كلك واحدخ انسخ نفس الكود ف سطر جديد زي م انت بتعملها كد؟
@Hamza_Souiti
@Hamza_Souiti 4 месяца назад
ازاي خليت الصورة logo بتاع الموقع ؟
@basho0o0ora35
@basho0o0ora35 Год назад
انا شفت الكورس اللي مدتو ساعة و نص على قناتك هل هو كافي؟ او لازم اشوف هاد الكورس؟
@mohamedashrafbigo6301
@mohamedashrafbigo6301 Год назад
ف حجات ف كورس ده مش موجوده ف التاني
@BobziSb5249
@BobziSb5249 Год назад
@@mohamedashrafbigo6301 هو نزل ال css ؟
@yamen_727
@yamen_727 Год назад
@@BobziSb5249 نعم عندو كورس كاملcssادخل على قوائم تشغيل القناة تلاقية
@BobziSb5249
@BobziSb5249 Год назад
@@yamen_727 اي مشي الحال، نزل Javascript ؟ او php ؟
@yamen_727
@yamen_727 Год назад
@@BobziSb5249 نعم برضو نزل js وphp بس نصيحة تعلمhtml css بعدهjs بعدينphp
@user-yo2lh7ps9j
@user-yo2lh7ps9j Год назад
❤❤❤❤❤❤❤❤
@webb-developer
@webb-developer 11 месяцев назад
@julicur6279
@julicur6279 3 месяца назад
اللي بيسأل عن طريقة نسخ الكود في سطر جديد Alt +shift+ down⬇️
@alexdoc8271
@alexdoc8271 8 месяцев назад
حد بتعمل معاه colspan و مش بيتعمل معاه rowspan
@yahiaessam7755
@yahiaessam7755 Год назад
هو حضرتك ايه هو فرق بين br hr
@user-go1sl2hb1d
@user-go1sl2hb1d Год назад
ال br تستخدمة عند النزول لسطر جديد اما hr يعمل خط يفصل بين الفقرة الاولى والفقرة الثانية
@Ahmed-cu7lh
@Ahmed-cu7lh 4 месяца назад
كيف انسخ النص وانزل سطر جديد بضغطة زر
@user-zx6fz3zu3g
@user-zx6fz3zu3g 2 месяца назад
Alt + shift +سهم لأسفل
@Lkingwalid
@Lkingwalid Год назад
li
Далее
SITUATION IN FAST FOOD
00:19
Просмотров 2,6 млн
надувательство чистой воды
00:28
10 分钟 理论 + 实操 搞懂 WebSocket
9:03
Просмотров 11 тыс.
ПК с Авито за 3000р
0:58
Просмотров 1,5 млн