#7 كورس html كامل بالعربي | اول مشروع
HTML-код
- Опубликовано: 18 сен 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 بمختلف اشكالها
اليوم اول يوم ليه في تعلم البرمجه من الصفر
والله نجحت في هذا المشروع
ان شاءالله في ميزان حسناتك ي مهندس
مستمره لحتي اكون افضل مبرمجه
ممكن سؤال
انا لسى جديد وواصل لهون وكلشي تمام
بدي اعرف انت لساتك مستمر ولوين وصلت وشو طالع معك
يعني هالكورس استفدتي منه وبنيتي موقع او شو
ممكن اسأل نفس سؤلك وصلت فين دلوقتي @@Tawfik-Albeel
لايشكر الله من لايشكر الناس ، مالانا إلا أن نقول لك جزاك الله خيرا ونفع الله بك العباد
من لا يشكر الناس لا يشكر الله
@@S4LFYIQ نفس المعنى
احسن واحد ممكن تفهم منه بيبسط المعلومة بطريقة جميلة ما شاء الله عليك ربنا يوفقك يا رب
اليوم اول يوم باديه معاك ونسجل هالتاريخ 29/9/2023لحد ماخلص كل فيديوهات لتصميم مواقع حنرجع لذكري......شكرا واجد شرحك جميل جدا
@latrach__med ممكن تدخلي علي على الانستا اريد ان أسألك؟
وصلتي لفين؟
نفس السؤال
كملتي؟
من افضل الناس الى بحب شرحم على اليوتيوب
لو عملت Alt + Z هيخلى الكلام كولو تحت بعضو
الله يحفظك ويصلح حالك فعلا ان انسان موهوب في الشرح وتوصيل المعلومة
بصراحة اقيم شرحك ومضمون الكورس 100/1000 يجعله في ميزان حسناتك غفر الله لك ولوالديك
تحياتي
Möge allah dich dafür belohnen und dir die höchste stufe in die paradies geben yarab und dir das beste geben❤
السلام عليكم انا واحد من متابعيك من الجزائر 🇩🇿 ولقد نجحت في هذا المشروع
بجد انت فوق الممتاز يا هندسة
والله ان شرحك يجنننننن ولا يعلى عليه تبارك الله و دحين إن شاء الله اسوي المشروع هاذا وإن شاء الله اجيبه صح 😊
واعيد مشكوووور وربي يوفقك ❤
احسن قنات والله
شرحك منظم ومبسط جداااااا
الدرس السابع احلى لايك 👍 مستمر معك
دا اليوام تاني ليه في كورس وا الحمدلله قدرت اعمل موقع خاص بيه شكرا جزيلا لحضرتك اتما انك تستمر ديما ❤
جزاك الله خيرا
رائع جدا جدا تستاهل كل خير والله
انشاء مشروع
بالبداية !
بعدين شرح واستعمالاتها
lorem نستفيد منه( يطلع لنا كلام )
وشكرا على الشرح ❤❤❤❤❤❤
من كتب اسم وراح وفتح موقع انه ماينفتح ماتظهرايقونه كوكل مثله
بارك الله فيك درس رائع ومفوهم جدا شرح رائع
بوركت يا هندسه
﴿ سبحان الله وبحمده سبحان الله العظيم عدد خلقه ورضا نفسه وزنة عرشه ومداد كلماته﴾ٌ.
استاذ بالنسبة لما نعمل lorem كيف نقدر نخلي الكلام بالعربيه الي هوه بيعمله ممكن ترد بسرعه لانه الاسبوع الجاي عندي مسابقة
و عليكم السلام و رحمة الله و بركاته
ببجد عظمه يا هندسه حسن من المنصوره
شكرا ليك يا باش مهندس❤❤
بارك الله فيك وجزاك الله خيرا
جزاك الله خيرا .
شكرا على جهودك
ربنا ياركك
شكران كتيرا❤❤
تبسم ربي يحميك❤
رهيب بس حركة علامة التعجب والانتر ما شغلت معي
جزاك الله خيرا 😊
شرحك جميل وفقك الله
بجد شكراً واستمر يا استاذ
الله خيرا
شكرا
ألف شكر يا باشا❤
طب انا ماشي معاك بنفس الخطوات بس ال index مش بيظهر فيه اي حاجه
هو الكلام اللي بتكتبة خاصية الـ lorem بيكون له علاقة بالعنوان الفرعي اللي أنا كاتبة ولا أي كلمات
شكرا يا استاد
عااااش ليك.. استمر ❤️❤️❤️
ابدعت
Tack så mycket.
جميل ومبسط جدا
شكرًا 🥰
مشكلة ال لوريم بيجيب اي كلام ف البرجراف كلام ملوش علاقه ب الموضوع + ممكن ترد
والله نفس السؤال يا ريت يجاوب
Mr. Dr. Prof. Patrick appreciate it man
شكرا لك
شكراً
عندي المشكلة انو عم اتبع الطربقة يلي عم تستخدمها لفتح ملف html بس لما عم انشئ المجلد و انشئ الملف ما عم يعطيني اشارة html
راجع الفيديوهات من اول رح يكون عندك في غلط
نفس المشكل
Thank u fr!!
7✅
سؤال : هل الكلمات لتي يعطيها '' loren '' أو الفقرة , هل تتناسب مع عنوانها
فعلا كنت عاوزة اعرف برضو
هل يوجد تطبيق اندرويد اشتغل عليه ؟
مين يرد
انا عملت كل الخطوات لا يتغير شيء في الموقع لا الإسم ولا أي شيء .. ماهو الحل
حاول تراجع الفيديوهات القديمة
ارجوك اخي ساعدني في حل المشكلة انا كمان عملت كل الخطوات بس ما تغير معي شي وراجعت الفيديوهات القديمة وما لقيت شي شو ممكن يكون السبب ارجوك اخي لا اريد التوقف في منتصف الطريق@@joydluffy6761
بعد ازنك ابقا صور الفديوهات بتقنيه ال 1080
#️⃣5️⃣✅
عايز اتعلم منك اكتر
اختصار الLorem م بيشتغل عندي
بيفضل زي م هو لما اعمل انتر😥
عندي كمان
@@meladksayaa8823 ايش الحل؟
@@hassanhassan6784 مانك بحاجة ل lorem بس اكتب الجملة لي بدك ياها ب
ازا ما فهمتا ارجع اكتب لي بالتعليقات
اختصار lorem مش بيشتغل معايا ايه المشكله؟
تقريبا معاك برنامج غير الي معا عشان هو قال ده البرنامج في اختصار وانا بردو مش شغال معايا
السلام عليكم م/ عبدالرحمن ممكن سؤال من فضلك لاني مطلوب عمل مني مشروع معين وعاوز استفسر عن حاجه
8:55 ALT + Z
انا جربت lorem وما اشتغلتش
خل وجدت حل اخي
انا شايف اننا نستخدمh2 لعنوان الموقع
طب أنا حالا لو عاوز اكتب كلام علي زوقي اعمل اي
عندي مشكله في فيجوال استوديو لما اضغط علامه التعجب لا يظهر الاختصار
@الحسينى رضا elhosany reda انا كمان ما شتغلت معي من الحاسوب بس doc إشتغلت شكرا
@الحسينى رضا elhosany reda اشكر حضرتك على الرد
@الحسينى رضا elhosany reda مش لاقيها حضرتك
معملوش معايا لإثنين
@@nessrine925 هم اي اللي متعملوش معاكي؟
علامة التعجب بتاعة الاختصار مضبطتش معايا ،ممكن يكون إيه السبب؟
سلام اخي
هل استطيع كتابة الاكواد جميع للغات برمجة في مفكرة notepad مثل c/c++/java/python/java script/html/css
نعم إنه يدعم جميع اللغات
هو lorem بيجيب الكلام منين
lorem مش شغاله معايا دا يبقي عيب اي
انا طالعلى جب ال title علامه ال document مش علامه ال world كدا انا غلط فى ايه حد عنده معلومه ؟
هل ممكن أطبق ده علي الموبايل
lorem الاضافه ديه جضرتك مش بتشغل معايا مش عارف ليه مش بيضف كلام
يا جماعة انا اتبعت الخطوات بس ما ظهر عندي شيء في الموقع لا الاسم ولا المحتوى شو الحل؟
نفس المشكلة ، كيف الحل ؟
انا عندي البرنامج لما بحمله بيعملي رسالة entry point not founded
ومش عارف اعمل ايه ولما بشتغل ع الموقع مش بيرضي يعمل open folder اعمل ايه
ويندوز ٧
قم بتنزييا windowz 10
الاختصارات مش بتظهر عندى اعملها ازاي
عايز فديوهات php
شنو فائدة ال LOREM
يعملك اي كلام
اختصار lorem لم يشتغل عندي
وانا كمان وعلامه التعجب بردو
والهايبر لينك
كدا المشكله بتكون فين
ارجوووووك ترد
بس مافهمت الموقع حقيقي او مزيف ولا ايش
نصيحة منى متركزش غير فى المعلومة الى بيقولهالك انا ملاحظ بيقول المعلومة الى هتستفاد منها فى وقتها متستعجلش وخليك مكمل فى حدود المعلومات الى بيقولها علشان متبقاش تايه
merci
لما بكتب Lorem 5 مش بتعمل معايا حاجة ايه الحل
علامه التعجب معملتش الاختصار اعمل اي
ف طريقه تانيه انك ممكن تكتب html هيجيلك اني فريشن اختار 5 هيكتبهملك بردو
@@yasmeenaboghazala5902 شكرا