دروس تعليم لغة html: مقدمة

blac mana

New member
إنضم
25 أغسطس 2018
المشاركات
3
مستوى التفاعل
9
النقاط
3
الإقامة
الجزائر/ورقلة
الجنس
ذكر
باسم الله الرحمان الرحيم
السلام عليكم ورحمة الله تعالى وبركاته
اليوم بإذن الله تعالى نبدأ في سلسلة تعلم لغة html


مقدمة
إنها اللغة المستخدمة لإنشاء صفحات الإنترنت. (والكلمة إختصار لـ Hyper Text Markup Language). وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغة C . فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى كـ Java, JavaScript, CGI . كذلك فهي لا تحتاج إلى مترجم خاص به Compiler . وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار.
تتكون مفردات لغة Html من شيفرات تسمى TAGS أي الوسوم. وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى اليمين) :-


فعلى سبيل المثال الوسم <B> يستخدم لكتابة الكلمات بخط أسود عريض Bold وذلك بالشكل التالي:
<B> Text </B>
وهناك بعض الوسوم الخاصة التي تستخدم بصورة مفردة مثل وسم نهاية السطر <BR> أو قد تستخدم بكلتا الحالتين مثل وسم الفقرة <P>.
وسوف نناقش هذه الوسوم وغيرها بالتفصيل في حينه إن شاء الله

كيف نبدأ...

لا يتطلب كتابة ملف HTML أية برامج خاصة فهي كما قلنا لغة لا تحتوي على برنامج مترجم. بل نحتاج فقط إلى برنامج لتحرير النصوص البسيطة ومعالجتها، وبرنامج المفكرة الموجود في Windows يفي بهذا الغرض. وكذلك إلى أحد متصفحات الإنترنت fire fox, Internet Explorer, وغيره م لمعاينة الصفحات التي نقوم بتصميمها. وعليك فقط أن نقوم بحفظ النص المكتوب بملف يحمل الاسم الممتد .html أو .htm
والجدير ذكره أنه يوجد العديد من البرامج التي تستخدم لإنشاء صفحات Html. دون الحاجة لمعرفة هذه اللغة حيث يقوم المستخدم من خلالها بكتابة الصفحات وتصميمها بما تحويه من نصوص ورسومات وجداول ثم يقوم البرنامج بتخليق الوسوم المناسبة وتحويل هذه الصفحات من وراء الكواليس تلقائياً وحفظها بتنسيق html. أي أن دور المستخدم ينحصر في الكتابة والتصميم فقط، دون معرفته للشيفرة التي استخدمت. وبالتالي عدم قدرته على التحكم بأي وسم أو تعديل الشيفرة حسب الحاجة، إلا من خلال إعادته للتصميم الأساسي ثم إعادة التحويل والحفظ من قبل البرنامج. وهذه الطريقة على سهولتها وسرعتها نسبياً، إلا أني لا أنصح باستخدامها لمن يريد معرفة هذه اللغة والتمكن منها.
تم اختراع html في عام 1990م من قبل عالم يسمى تيم بيرنرز لي، الهدف من هذه اللغة هو تبسيط عملية وصول العلماء في جامعات مختلفة إلى البحوث التي ينشرونها، المشروع نجح بشكل لم يتصوره تيم بيرنرز لي، باختراعه HTML قام تيم بوضع أساس شبكة الويب كما نعرفها اليوم.

HTML هي لغة تسمح بعرض المعلومات (مثال: البحوث العلمية) على شبكة إنترنت، ما تراه عند زيارتك لأي صفحة في الشبكة هو ترجمة المتصفح لأوامر HTML

أساسيات

تسمى عادة وسوم الترميز بوسوم HTML
ان وسوم HTML عبارة عن كلمات دلالية وعادة ماتكون بين أقواس زاوية مثل <html>, </html>

تأتي وسوم HTML بشكل زوجي مثل <b> و </b>
يسمى الوسم الأول ببداية الوسم والثاني يسمى نهاية الوسم
صفحة html تتكون من جزءين
1 الرأس أو ما يسمى بال head, ويكتب وسمه هكذا:
<head>
</head>
يوضع فيه عنوان الصفحة ووسوم الmeta
2 الجسم أو ما يسمى بال body, ويأتي على هذا الشكل
<body>
</body>
يوضع فيه محتوى الصفحة نصوص, فقرات, روابط وصائط ال midia إلى آخِرِهِ
سوف نتعلم في الدرس القادم إنشاء الله كيف نعمل أول صفحة لنا
لأي استفسارات أو أسئلة أنا جاهز...
تحياتي
 
جزاك الله خيرا صديقي وبورك فيك
فعلا هي لغة جميلة جدا ومفيدة لكل من يريد أن يحترف ويتعلم تصميم المواقع والمنتديات
بالإضافة إلى أنها بصيطة وسهلة في كتابة أكوادها وليس فيها تعقيدات مثل اللغات الأخرى
وإن شاء الله لو ناوي تكمل الدورة فيرجا التواصل معي خاص لتنسيق بعض الأمور
كي يتم الإعلان عنها لباقي المستخدمين
تحياتي لك
 
السلام عليكم ورحمة الله تعالى وبركاته
أخي الفاضل blac mana شكرا جزيلا على هذه المبادرة
جزاك الله خير جزاة
نأمل أن تكمل في هذه الدورة فالعديد منا اليوم يريد أن يتعلم لغات تصميم الويب
ونحن كلنا معك أخي الفاضل
أي شيء تحتاجه وأي مساعدة تريدها نحن كلنا بجانبك أعضاء وإداريين
مع أنني لا أحب كلمة إداريين ولاكننا معك
تحياتي لك أيها الأخ العزيز وأتمنا لك التوفيق في هذه الدورة
أكرر شكري لك على هذه المبادرة
 
السلام عليكم ورحمة الله وبركاته
أخي الكريم بارك الله فيك وبك وجازاك بالخير سؤال لك أخي
لماذا نكتب هذا الأمر هكذا
<head>
</head>

وأقصد أن السطر الأول ليست به علامت
/
وطلبي منك فضلا أخي يرجى أن تكمل معنا وتبسط في الشرح إلى أقصى درجى ممكنة كانت هناك دورات سابقة للغات أخرى لكن الشارح يبدأ يقول الدوال وأشياء هكذا ونحن لا نعرف ما هي هذه وفي ماذا تستخدم وكنت أسأل لكن للأسف كل ما تسأل أحد يغلق الأبواب
شكرا لك جزيلا
 
السلام عليكم ورحمة الله وبركاته
أخي الكريم بارك الله فيك وبك وجازاك بالخير سؤال لك أخي
لماذا نكتب هذا الأمر هكذا
<head>
</head>

وأقصد أن السطر الأول ليست به علامت
/
وطلبي منك فضلا أخي يرجى أن تكمل معنا وتبسط في الشرح إلى أقصى درجى ممكنة كانت هناك دورات سابقة للغات أخرى لكن الشارح يبدأ يقول الدوال وأشياء هكذا ونحن لا نعرف ما هي هذه وفي ماذا تستخدم وكنت أسأل لكن للأسف كل ما تسأل أحد يغلق الأبواب
شكرا لك جزيلا
وعليكم السَلام ورحمة الله وبركاته
أهلا بك أخي محسن
يسعدني أن أجيب عليك بالنيابة عن أخي أسامة
بالنسبة لكتابة الكود مرة بعلامة القاطعة ومرة من غير
فببصاطة أخي
أكواد html تنقسم لجزئين كود البداية وكود النهاية
يعني كود الفتح وكود الإغلاق
ويتم التفرقة بينهما باستخدام علامة القاطعة
يعني مثلا عشان أوضح للمتصفح أن هذا كود البداية وهذا كود النهاية وما بينهما يتم تطبيق الكود عليه
فاستخدم علامة القاطعة
كي يستطيع البرنامج التفرقة بين بداية الكود وبين نهايته
فلو كتبت له الكود هو هو فمش هيعرف الفرق هل الكود الثاني جزء من النص أم أنهو كود داخل كود أو مذا
فتم إدخال علامة القاطعة لكي تفرق بين الأكواد
كي أفهم انا ويفهم المتصفح أين البداية وأين النهاية
وكمثال بصيط جدا
نحن نريد أن نجعل نص معين عريض عن باقي النصوص
فنكتب هكذا
HTML:
<I>
هذا نص عريض
</i>
طبعا هذا مثال ليس أكثر
لو لم أقم بوضع علامة ال سلاش في آخر الكود لن يفهم المتصفح أني أريد تكبير الكلمة في المنتصف
وهي
هذا نص عريض
هذا هو كل شيء ولو الأمر مش واضح أخي أخبرني وسوف أحاول توضيحه لك أكثر
تحياتي
 
  • Like
التفاعلات: hamad
شكرا لك صديقي نعم واضح الآن وأنا إن شاء الله سأكون متابعا للسلسلة وأرجو أن يؤخذ طلبي بعين الإعتبار حتى نفهم ونخرج من هذه السلسلة بنتيجة إجابية
كما نرجةو سلسلة في لغة البيثون

وبالطبع تكون مبسطة جازاكم الله بالخير
 
السلام عليكم ورحمة الله تعالى وبركاته
معذرة عن التأخير في الإجابة
السبب بأن الأمر يكتب هكذا كما قلنا العنوان title يأتي في الرأس, كذلك وسوم الmeta التي تشمل الكلمات الدلالية والوصف
حيث نكتب مثلا مثال هكذا
<html>
<head>
<title>موقعي الأول</title>
</head>
</html>
بحيث أن الصفحة عندما نكتب في السطر الأول <html>, يفهم المتصفح أنها لغة html وليس php على سبيل المثال
<head>
وهذا نفتح به أمر الرأس ثم نكتب فيه
<title>موقعي الأول</title>
وهذا وسم العنوان للصفحة وسنتطرق إليه في الدرس القادم, سوف أنزله كثيرا ومعذرة مرة أخرى عن التأخير
</head>
هذا الذي نغلق به وسم الرأس للصفحة
</html>
حتى نغلق به وسم html الذي كتبناه للمتصفح حتى يعرف أنها لغة html
تحياتي
 
شكرا لك صديقي نعم واضح الآن وأنا إن شاء الله سأكون متابعا للسلسلة وأرجو أن يؤخذ طلبي بعين الإعتبار حتى نفهم ونخرج من هذه السلسلة بنتيجة إجابية
كما نرجةو سلسلة في لغة البيثون

وبالطبع تكون مبسطة جازاكم الله بالخير

السلام عليكم جميعا
أريد أن أقدم تفاعلا بصيطا مع الأخ محسن، وإن كان ذالك متؤخرا.
فبالنسبة للغة بيثون، فهناك دورة كاملة قدمها أحد الأساسدة ، بل الأصح أن هناك دورتين
الأولى خاصة بتصميم إضافات لبرنامج n-v-d-a بهذه اللغة، والثانية خاصة بكيفية إنشاء برنامج منفصل عن ال n-v-d-a باللغة نفسها.
وإليك رابط تحميل الملف المحتوي على الدورتين :
‫دروس لتعليم لغة البرمجة بايثون للأستاذ صلاح البرعصي‬‎ - Google Drive
 
التعديل الأخير بواسطة المشرف:
  • Like
التفاعلات: hamad
أخي محمد رضى أشكرك جدا بارك الله فيك وبك نورتني بمرورك الطيب
 
عودة
أعلى