الدرس 6 | شرح أساسيات لغة HTML للتعامل مع اكواد بلوجر - دورة تصميم مواقع بلوجر - blogger course 6

الدرس 6 | شرح أساسيات لغة HTML للتعامل مع اكواد بلوجر - دورة تصميم مواقع بلوجر - blogger course 6

الدرس السادس 6 | تعلم اساسيات لغة برمجة اتش تى ام ال ( HTML ) والبعض يطلع عليه " هتمل " لتصميم المواقع وللمساعدة فى بناء قالب بلوجر والتعديل عليه وتحريره وحل مشكلات القوالب كل هذا فى : - دورة تصميم مواقع بلوجر - blogger course lesson 6

السلام عليكم ورحمة الله وبركاته
بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين سيدنا محمد النبى الأمى الامين 
ثم اما بعد :

تصميم المواقع عموما أخى يعتمد على لغات برمجية خاصة بالانترنت والمتصفحات والبرامج فهى تستطيع ان تقرأها وهناك العديد من لغات البرمجة ولكن عندما يذكر تصميم المواقع فإنه يذكر HTML & HTML 5 اختصار لـ : HyperText Markup Language 

ولذلك فى هذه المقالة سنوضح لك أهم اساسيات اللغة حتى تستطيع تفادى الاخطاء البسيطة على الاقل فيجب على كل من سيتعامل مع بلوجر ان يعلم هذه الاساسيات
ولذلك لا تكن مثل غيرك ممن يريد كل شيئ جاهزا امامه .. الأساسيات بسيطة وسهله وهى عبارة عن 5 نقاط سنذكرها وننتهى بذلك .

وطبعا لن أخبرك أن تسأل اذا اردت معرفة المزيد او توضيح شيئ غير واضح


نبدأ فى أساسيات اللغة معاً ان شاء الله :

1 - لغة HTML تتكون من وسوم او تاجات Tags وكل Tag يكون على الشكل التالى :

<tag> هنا المحتوى الذى سيؤثر فيه التاج </tag>

وبهذا نعلم ان كل تاج له وسم بداية ووسم نهاية به " / " 
هناك بعض التاجات التى ليس لها وسم نهاية ولكن يجب اغلاقها عن طريق إضافة " / " فى اخرها ، مثل :

<tag وهنا يكون محتوى التاج داخل التاج نفسه   />

2 - كل تاج يمكن ان يضاف له خصائص لاحظ كيفية إضافتها فى هذا المثال :

< tag height="20" width="15">

لاحظ إضافة خاصيتي الطول والعرض فى هذا التاج فقد حددت طول وعرض التاج وخصصته بهذه الخصائص كما هو موضح بالمثال فيجب ان يأتى بعد كل خاصية علامة يساوى ( = ) ثم تضع محتوى الخاصية داخل علامتى تنصيص هذه ( " ) او ( ' )

3 - اول تاج سنتعلمه سويا هو تاج يسمى <html> ومثالاً له :

<html lang='ar'>  .....  </html>

هذا التاج يعبر عن ان ما ستكتبه بداخله هى اكواد خاصة بلغة HTML فهذا يكون اول تاج فى الموقع والغلق الخاص به يكون اخر شيئ فى اكواد الموقع وبينهما باقى الاكواد
ولاحظ استخدام خاصية lang التى تحدد لغة موقع الويب .. واستخدمنا فيه ar لكى نعبر على ان المحتوى باللغة العربية 


4 - ثانى تاج سنتعلمه سويا هو تاج يسمى <head> ومثالا له :

<head> 
<title> جيل تاني - Geel Tany </title>
</head>

الان فى هذا المثال يوجد تاج Head الذى معناه رأس الصفحة والذى يحتوى على المعلومات الخاصة بالصفحة التى لا يراها الزائر ولكن يطلع عليها المتصفح ومحركات البحث ليعرف معلومات عن موقعك فمثلا داخل تاج head اضفنا تاج title والذى يحدد اسم الموقع ولذا وضعنا فيه اسم موقعنا " جيل تاني - Geel Tany " 
ويوضع ايضا فى تاج head اكواد الميتا تاج التى تعطى ملعومات الصفحة لمحركات البحث والتى وضعنا أفضل اكواد ميتا وجدناها فى صورة مسابقة بسيطة فى هذا الموضوع هنا : 


5 - ثالث تاج معنا هو <body> ومثالا له :

<body> ..... </body>

وهذا التاج يحتوى على جميع العناصر التى تظهر للزائر فى جسم الصفحة او فى المتصفح فهو يحوى الاضافات والمشاركات والتعليقات وكل شيئ يظهر للزوار
ولذلك يفتح هذا الكود بعد اغلاق كود head الذى يعرف الصفحة وينتهى فى نهاية الموقع قبل نهاية تاج html

أرأيت صديقى الامر بسيط هم فقط خمس أساسيات سهلة وبسيطة تستطيع منها تحاشى الكثير من الاخطاء عند إضافة قالب او التعديل عليه

واذا أردت معلومات أكثر عن لغة HTML فقم بزيارة الموقع المميز الذى سيعطيك شرح بسيط عن اللغة مدعومة بأمثلة كثيرة :

تابع الشرح بالفيديو من هنا :


وهكذا أكون قد انتهيت أنا ... الان دورك انت فى العمل فى عمل موقع متميز
نحن دائما فى خدمتك فلا تتردد فى طرح أسئلتك

الدرس السابع :) : كيف تبحث عن قالبك على الانترنت بكل سهولة
درس مهم :) : 15 نقطة يجب ان يتوفرو فى القالب المميز.

إستفد بهذا :
مسابقة للحصول على أفضل أكواد ميتا تاج - Meta Tags


أرجوا ان تكون إستفدت من الموضوع : شاركه مع غيرك ليستفيد الجميع وشارك برأيك وتعليقكك لكى تدفعنا نحو الافضل
وشكرا ^_^

جيل تاني - Geel Tany للتعلم عن بعد , كمبيوتر , انترنت , بلوجر , فوتوشوب , فيس بوك , جوجل , اسلاميات , برامج , حل مشاكل , تقنيه , تكنولوجيا , تعليم , قراءه ...... والمزيد والكثير 

تابعونا ........ :)

شارك الموضوع

مواضيع ذات صلة

نشكركم ^_^