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

الدرس 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 : يرجي من المتابعين الذي سوف تعمل معهم الطريقة اضافة اخوانهم من التعليقات كما سنشرح في نهاية المقالة يمكنك البدء في هذه الخطوات بالصور للحصول علي حساب كانفا برو مجاني  خطوات الحصول علي كانفا برو

افضل موقع لعمل انترو احترافي اون لاين مجانا (بدون علامة مائية)

ما هو افضل موقع لعمل انترو احترافي اون لاين مجانا و بدون علامة مائية وبجودة عالية في 2021 جميع المواقع التي تقدم خدمة عمل انترو اون لاين مجانا تضع عليها علامة مائية. ماذا لو أخبرتك بافضل موقع لعمل انترو احترافي مجانا وبدون علامة مائية ، وبجودة عالية ، ويسمح لك بتعديل الفيديو اون لاين ؟ حسنا ، انا اتحدث عن موقع Invideo لتعديل الفيديوهات اون لاين ، وعمل مقدمات فيديو احترافية مجانا. أولاً سأجيبك عن سؤال مهم لم يخطر في بالك من قبل. هل مقدمة الفيديو مهمة  لدرجة ان يبيعها  Animteam ب 500$  ، ويشتريها اكثر من 100 شخص ؟ سعر خدمة عمل انترو علي موقع Fiverr من فريق Animteam تأكدت الان انه سؤال مهم ؟  حسنا ، اليك الاجابة : الانترو يمثل هوية القناة ، ويمثل صاحب الانترو ، وكلما كان احترافيا وجذابا ومعبرا عن هويتك ، كلما أعجب المزيد من المشاهدين بك. ولكن انا صاحب قناة صغيرة او شركة صغيرة ، وموضوع الهوية هذا امر كبير وليس مهم بالنسبة لي ! # نصيحة 1 انك تعمل لنفسك اسم وهوية وتعتز بيها وتعملها باحترافية امر مهم للنجاح علي يوتيوب او في سوق العمل ، اذا استصغرت نفسك ، فكيف يكبرك الاخرون ؟ أيضا يمكنك طل

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

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