التخطي إلى المحتوى الرئيسي

الدرس 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


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

تعليقات

إرسال تعليق

يهمنا رأيك , أكتب تعليقك هنا ❤️

المشاركات الشائعة من هذه المدونة

كيفية الحصول على حساب Canva pro مجانا بالصور (2023)

موقع كانفا هو أفضل وأسهل بديل للفوتوشوب حاليا ويمكنك استعماله الان بكل سهوله والربح من خلاله عن طريق تصميم صور احترافية لمواقع التواصل الاجتماعي او الاعلانات الممولة او حتي الصور المصغرة في اليوتيوب في هذه المقالة سنتعرف على طريقة الحصول على كانفا برو مجانا وبكل سهولة بالخطوات من خلال الفيديو أ ولا يجب ان توفر حساب تعليمي ما هي الحسابات التعليمية المؤهلة للحصول على كانفا برو مجانا ؟ - ايميل معلم - ايميل جامعي - بالاختصار اي ايميل يحتوي على كلمة .edu بعد حصولك على الايميل الجامعي سواء خاص بك او من احد اقاربك او معارفك ملحوظة 1 : اذا لم تستطع الوصول لايميل جامعي فقم بانشاء حساب عادي علي كانفا واترك ايميلك في تعليق علي هذه المقالة وسوف يقوم باضافتك احد القراء الكرام المتوفر لديهم ايميل جامعي ملحوظة 2 : هناك بعض الايميلات التعليمية التي لا تدعم الحصول علي كانفا برو مجانا (Canva Education) ملحوظة 3 : يرجي من المتابعين الذي سوف تعمل معهم الطريقة اضافة اخوانهم من التعليقات كما سنشرح في نهاية المقالة يمكنك البدء في هذه الخطوات بالصور للحصول علي حساب كانفا برو مجاني  خطوات الحصول علي كانفا برو

إضافة معلومات ضرائب جوجل ادسنس خطوة بخطوة بالصور

كيفية إضافة معلومات ضرائب جوجل ادسنس خطوة بخطوة بالصور - Google Adsense tax منذ أيام تفاجأ صناع المحتوى برسالة في يوتيوب و جوجل أدسنس تخبرهم ان " عليك ضرائب فى جوجل " وهذه هي نص رسالة جوجل أدسنس " مهم: تحقق مما إذا كانت معلومات الضرائب الإضافية مطلوبة منك. يجب أن يرسل كل الشركاء ومنشئي المحتوى في YouTube معلومات الضرائب لضمان دقة الضرائب السارية على الدفعات " هل عليك ضرائب فى جوجل علي ارباح ادسنس ؟ نعم ، هذه القرار بخصوص ضرائب اليوتيوب الجديدة تم اعلانه منذ فترة :  يوتيوب يفرض ضرائب علي منشئي المحتوي في هذه المقالة ساوضح لك طريقة ضبط اعدادات جوجل ادسنس و ملأ معلوماتك الضريبية بشكل صحيح بالصور و بدون خبير ضرائب أو محاسب . نبدأ بسم الله خطوات إضافة المعلومات الضريبية في جوجل أدسنس . قم بتسجيل دخولك علي Google Adsesnse حتي تستطيع تقديم المعلومات الضريبية ان كان يظهر لك تنبيه اضافة المعلومات الضريبيه ، قم بالضغط على إضافة المعلومات الضريبية وتخطي الثلاث خطوات المقبلة . من الثلاث شرط بالاعلي قم بفتح صفحة الدفعات في ادسنس في أسفل الصفحة اضغط علي إدارة الإعدادات

طريقة ضغط الملفات وتصغير حجمها بسهولة جدا وبدون برامج او Winrar

ضغط الملفات هو الحل الامثل لبعض المشاكل مثل : - تصغير حجم الملفات ذات الحجم الكبير بهدف تخزينها او نقلها او رفعها علي الانترنت  - حماية الملفات الخاصة بك عن طريق وضع كلمة سر للملف المضغوط - ارسال الصور دون تغيير الجودة عن طريق ضغطها ثم ارسال الملف المضغوط يمكنك ضغط الملفات بدون برامج وهذا سنشرحه الان ، ولكن تنقص هذه الطريقة بعض المميزات ولذلك سنشرح ايضا برنامج ضغط الملفات Winrar والذي يعتبر هو القائد في هذا المجال حيث انه سهل وسريع ومجاني (هو ليس مجاني ولكنه يعمل دون التفعيل 😂) كيفية ضغط الملفات بدون برامج ؟ ستذهب الي المجلد او الملف الذي تريد ضغطه وتصغير حجمه ستتأكد ان اسم الملف مكتوب باللغة الانجليزية والا فقم بتغيير اسمه تضغط علي الملف بزر الفأرة الايمن  تختار "Send to" ثم تختار compressed (Zipped) folder سيقوم بالتحميل قليلا لينتج لك ملف مضغوط بصيغة .Zip ويمكنك اعادة تسميته كيف تشاء كيفية فك الملف المضغوط بدون برامج ؟ ستذهب الي الملف المضغوط بصيغة Zip. فقط تضغط عليه ضغطتين بزر الفأرة الايسر لتفتحه بشكل عادي ستجد الملفات المضغوطة قم بسحبها