القائمة الرئيسية

الصفحات

آخر الأخبار

تعلم لغة البرمجة للمبتدئين لغة HTML

كل ما يخص لغة HTML:

   1. مقدمة عن لغة Html و معلومات نظرية عنها:

و هي لغة تصميم المواقع(لغة تصميم صفحات الويب) و تعلم لغة البرمجة Html لا تحتاج لأي خبرات سابقة في البرمجة بل هي اللغة البرمجية التي سوف تبدأ بها مسيرتك في تعلم البرمجة و كسب المال عن طريق الانترنت ، و تحتاج أيضاً الى جانب لغة Html إلى عدة لغات لتأسيس موقع كامل 100% مثل لغة css و javascript.

  • أصدارات لغة Html 

Html 1991

XHtml

Html5  2012

و كلمة Html هي أختصار لجملة  "Hypertext Markup Language" وصف صفحات الويب

ملاحظة : يفضل كتابة لغة البرمجة Html بحروف صغيرة و ليست حروف كبيرة مثال :

<html> </html> الشكل المفضل 

<HTML> </HTML>  الشكل هذا غير مفضل  

      2. ماذا أحتاج لتعلم لغة Html ؟

كمبيوتر شخصي أو لاب توب
محرر نصوص مثل :
ولا ينصح بلبداية بإستخدام محرر نصوص مساعد في الكتابة
 لإغلاق أي كود نستخدم البداية تكون <p> اما النهاية <p/> 
ويوجد بعض الأوسمة ليس لها اغلاق مثل <br> , <img>
تصميم أول صفحة بإستخدام Html
تصميم أول صفحة بإستخدام Html
الأن نضغط على Ctrl + S لحفظ الصفحة و تشغيلها و يتم حفظ الصفحة بإستخدام المجال التالي index.html
الأن بعت تعرف المتصفح على الصفحة تصبح بذا الشكل:
تعلم html
تعلم html
   3. شرح خواص وسمات العناصر Attributes وكيفية التعامل معها:
  • <a href="http://www.Alimne.com">Alimne</a>                      سمة a href هي سمة للتوجية تستخدم مع الينك في Html
  • <a href="http://www.Alimne.com"target="_blank">Alimne</a>   سمة ("target="_blank") تستخدم في فتح الرابط في تبويب جديد
  • <"img src=http://placehold.it/100/100>                                  سمة img src لعمل رابط فتح صور عند بناء موقعك
  • <"img src=http://placehold.it/100/100"title="Alimne>               سمة "title="Alimne مع كود الصور لاضافة كلمة او نص عند وضع المؤشر على الصورة فيمكن استبدال كلمة Alimne باي نص تريد
  • <"بحث"=input type="text"value>                                                لعمل حقل بحث
  • <""=input type="password"value>                                                لعمل حقل كلمة السر
  • كل عنصر له Attributes خاصة به و ميزات اضافية و من الممكن أن يكون عنصر له سمات لا تنتهي أبداً   
 4. تعلم كل ما يخص عناوين النصوص Heading في (HTML):
  •  <h1/> العنوان الرئيسي <h1> 
  • <h2/>العنوان <h2> 
  • <h3/> العنوان الفرعي<h3> 
  • <h4/> العنوان الثانوي <h4> 
  • <h5/> الفقرة <h5> 
  • <h6/> عادي <h6>
Heading كل ما يخص ال
Heading كل ما يخص ال
استخدام ال Heading بطريقة صحيحة يفيد موقعك بمصادقة محركات البحث Google و Bing و Yahoo
اما الاستخدام الخاطئ فيكون سلبي على محركات البحث و لا يمكن عمل مصادقة 

  • لا يجوز أستخدام الHeading لتكبير كلمة معينة: 
مثال:
<p> الحمد لله رب العالمين و الصلاة و السلام على النبي الامين <h1/>محمد<h1> صلى الله عليه وسلم<p/> هذا الاستخدام للHeading لتكبير أسم النبي (محمد) عليه السلام خطأ
الHeading ياتي لوحدة الا عند أستخدام خواص معينة
<p>  البرقراف و هو عنصر من عناصر المودل 
    5.تعلم كل ما يخص الفقرات النصية Paragraph في لغة Html:
الParagraph( البرغراف ) وسم يكتب بحرف P و هو جزء نصي يكتب بعد الHeading أو يكون الParagraph ( البرغراف ) موجود كجزء نصي في اي مكان داخل الموقع و من الأفضل عند كتابة الParagraph( البرغراف ) أغلاق الوسم <p></p> لانه إذا لم يتم أغلاق التاغ ستواجه مشاكل كثيرة داخل موقعك ولو عمل هذا الParagraph( البرغراف ) ، فإن كتابة الكود بشكل صحيح يوفر عليك عناء كبير جداً في المستقبل.
الParagraph( البرغراف )
الParagraph( البرغراف )
  • أسرار التعامل مع الParagraph( البرغراف ) في لغة Html:
  1. عند كتابة الParagraph( البرغراف ) تأكد دائما من أغلاق الوسم الخاص بلبلغراف <p></p> 
  2. عند عمل مسافات بين كلمات الParagraph( البرغراف ) لا يتم أحتساب نزول الأسطر للأسفل داخل المتصفح مثال توضيحي (لا يتم أحتساب الأسطر)
  3. لعمل مسافة فعلية داخر وسم الParagraph( البرغراف )في Html و تحتسب يتم وضع بريك لاين <br>
  4. المتصفح لا يحتسب الا مسافة واحدة داخل الParagraph( البرغراف ) و هي المسافة بين الكلمات و أيضاً لا يحتسب المسافات الزائدة فقط مسافة واحدة
    6.تعلم كل ما يخص الصور وكيفية وضع صور في موقعك بإستخدام Html:
كود الصورة هو <img> و هو أحد الوسوم الذي ليس له كلوز تاغ
  • استدعاء الصور من الجهز مباشرة :
لاستدعاء الصورة مباشرة نضع <"نضع موقع الصورة هنا" =img src> 
يتم وضع مسار الصورة إذا كانت داخل ملفات  مثلاً images/team/file/mohammad لاستدعاء الصورة من الجهازبجانب ملف html
لو كانت الصورة خارج صفحة ال Html نستخدم /.. و هي عباة عن Up للخروج من الصفحة الى الصفحة التي اعلى منها و أذا أردنا الخروج مرتين للأعلى نضع /../.. و هكذا .
 
  • استدعاء الصور من الأنترنت مباشرة :
  1. نبحث عن صورة معينة
  2. نضغط كليك يمين
  3. نختار Copy image address
  4. ثم نضع الرابط داخل الكود <"نضع لنك الصورة هنا "=img src>
  • فوائد استخدام "=alt" مع كود الصور :
  1. استخدام أضافة alt مفيد عند عدم وجود الصورة أو أختفائها
  2. أو أذا حصل مشكلة في الأنترنت فتظهر الصورة البديلة
  3. أو في حال استخدام متصفحات لا تدعم الصور
  4. الكود يكتب بهذه الطريقة <"أسم الصورة"=alt"لنك الصورة"=img src>
    7. شرح الروابط المتشعبة Anchor Links وكيفية التعامل معها :
الروابط المتشعبة و يرمزلها <a> "الرابط يوضع هنا "</a> و يتم أستخدام الروابط المتشعبة Anchor Links للأشارة إلى روابط داخلية و أيضاً خارجية ولها خواص متعددة يمكن استخدامها حسب الحاجة .
يتم أستخدام # للأشارة للروابط الداخلية
أما الروابط الخارجية فيشار لها بلنك يكتب على الطريقة التالية http://www.alimne.com داخل وسم <a>
و أيضاً يستخدم مع وسم <a> خاصية href للاشارة للنك 
  • مثال توضيحي على Anchor links في لغة html : 
<a href="www.alimne .com">Alimne</a>
  • فتح النك في تبويب جديد:
لفتح النك في تبويب جديد نستخدم الخاصية "target="_blank" 
مثال عملي لفتح الرابط في صفحة جديدة :
<a href="www.alimne .com"target="_blank">Alimne</a>
  • فتح النك في نفس تبويب :
لفتح الرابط  في نفس الرابط المعمول عليه حاليا نستخدم خاصية "target="_self" 
مثال توضيحي على فتح الرابط في نفس التبويب 
<a href="http://www.Google.com"target="_self">Google</a>
  • التعامل مع الروابط الداخلية و أعادة التوجيه داخل نفس الموقع
لتوجيه مستخدمي الويب على الدخول الى عنوان آخر داخل موقعك عليك أستخدام و سم <a> و أيضا أستخدام ال # 
مثال توضيحي داخل الصورة:
أستخدام الروابط المتشعبة Anchor Links
 أستخدام الروابط المتشعبة Anchor Links

    7.ما هو <DOCTYPE html!>
<DOCTYPE html!>
<!DOCTYPE html>
ال<!DOCTYPE html>هو أختصار لجملة document declaration type و التي تعني "معرفة المتصفح بنوع الوثيقة الدولية و نوع اللغة المستخدمة في برمجة هذا الموقع لكي تبنيي صفحة الويب هذه سواء أستخدمت لغة البرمجة Html أو Xhtml أو Html5
ويتم كتابة <!DOCTYPE html> قبل البدأ في كتابة أول كود و هو كود Html _(تحديد توع الصفحة في HTML عن طريق الوسم DOCTYPE)
  1. <DOCTYPE html!>
  2. <html>
إن لغة البرمجة الشهيرة html لها للأن خمس أصدارات فإن كل أصدار جديد إما أضافة إختصارات و مميزات جديدة و أضافات و إما مسح بعض الأمور القديمة و أستبدالها بإمور جديدة تسهل على المستخدمين التعامل مع لغة البرمجة Html أو يكون الأصدار الجديد يجمع بين التطوير و مسح الأخطاء .

ففي الماضي عند كتابة كود Html كان يجب على المبرمج كتابة كود طويل جداً و كان الأمر مرهق للغاية لكي يفهم المتصفح بأن المبرمج يستخدم الأصدار الأول أو الثاني أو الثالث من لغة البرمجة Html وكود آخر يوضع به كل شيء و أضافة للأطار العام مما دفع منظمة w3.org العالمية إلى تصميم وسم يساعد المبرمجين على أتمام عملهم بشكل سريع و سهل و يعرف هذا الوسم بإسم 
<!DOCTYPE html>  حيث دمجت به منظمة w3.org العالمية كل يشء يحتاجه المبرمج لكي يفهم المتصفح بأي لغة يتم البرمجة و وضعت الأطار العام و سهلت علينا الكثير و الكثير.
  • نواع <!DOCTYPE html>
1..<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML Basic 1.0 // EN" 
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> و هو أقدم أنواع الhtml وليس له قيمة و إنما تأتي قيمته من تاريخه فقط ولا ينصح بإستخدامه حالياً أبداً أبداً

2..<! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> و يستخدم مع الأعلانات و هو مفيد نوعا ما عن أستخدام الأعلانات كان يستخدم في الماضي مع  SVG

3..<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1 // EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math- svg.dtd ">  وهذا الأصدار المميز و الذي يستخدم مع (XHTML)و(MathML) و (SVG) و هو أصدار قوي و مميز و مفيد و ينصح بإستخدامه لأغراضه.

4..<DOCTYPE HTML! > و هو الأشهر و الأقوى و الأفضل مع اطارات مميزة و آخر أصدارات html و هو أصدار HTML5 الجبار و السريع و السهل في الأستخدام 

فتحديد نوع صفحة  الويب يتم عبر استخدام <DOCTYPE HTML! >  و للمزيد من المعلومات أنتقل إلى منظمة w3 العالمية 
و يجب عليكم الدقة في الأختيار و الأنتباه عند كتابة الأكواد 
و نرجو أن نكون قد أفدناكم وسلام عليكم و رحمة الله و بركاته

                           
reaction:

تعليقات