قواعد التسوق الالكتروني حتي تبني جيدا

قواعد التسوق الالكتروني حتي تبني جيدا 

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

• إذا كنت تشكو من قلة عدد الزوار
• أو كنت تكتب وتكتب ولا أحد يقرأ
• أو أصابك الدوار من قلة عدد التعليقات
• أو كنت ممن يزور مدونته هو وأصدقاءه فحسب
• أو كنت ترغب في بيع منتجك

فأنت إذاً بحاجة لوضع وإرساء قواعد التسويق الإلكتروني لديك
هل هي مهمة ؟
بالطبع مهمة فكما أن البيت حتما سيسقط إن أنت بنيته بلا عماد كذلك فإن أي جهد ستبذله للحصول علي زوار بدون تطبيق القواعد الأساسية سيضيع هباءاً

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

أما إن لم ترسي تلك القواعد لديك فستكتفي بمتابعة ما أعرضة من أفكار وحيل وطرق ولن تنجح أية محاولة للتطبيق وهذا هو السبب في جعل هذا المقال هو أول مقالات 
الآن تعرف علي  قواعد التسويق الالكتروني؟

القاعدة الأولي الجودة 

تكون الجودة حينما يعود الينا عملاؤنا وليس منتجاتنا ( شعار سيمينز )

إذا كنت مدون أو صاحب موقع أو مديراً لأحد المنتديات فان عليك التأكد من جودة ذلك المحتوي ( المقالات/المواضيع/الخدمات/المنتجات)

وللمحتوي الجيد صفات

• أصلي غير منسوخ 

لا تقم بنسخ مقال بالكامل مهما كانت الظروف حتي ولو سمح لكل صاحب المقال بذلك لأن النسخ لايجدي لا مع الزائر ولا حتي مع محركات البحث التي اصبحت الآن أكثر ذكاءاً  

يمكنك أن تختصر فكرة طويلة أو تركز علي موضوع بعينة أو تبحث قضية من عدة زوايا أو تجمع عدة أفكار تحت عنوان واحد المهم الا تنسخ مقالاً كاملاً أبداً 

• لا يحتوي علي أخطاء إملائية

فقط عليك أن تخبرني بالفرق بين كلمة  إمرأة  وكلمة مرآة   إنه حرف واحد  ماذا لو كنت تتحدث عن (أنواع المرايا ) وكتبتها ( أنواع المرأة ) بالطبع فسيبحث الناس عن اشياء بخلاف ما عندك فضلاً عن التجربة السلبية التي سيحملها المهتمون باللغة العربية 

وهنا تبرز مشكلة الكتابة بالعامية :( أقول لك مفيش مشكلة إنك تكتب بالعامية المهم إنها تكون صح يعني لو حد بحث هيجيلك ولا لأ )

• منسق بحيث تسهل قراءته

ربما زرت في مرة مقالاً ولم تكلمة رغم أنه جيد وأن الموضوع المطروح مفيد ولكن تعال لنشاهد فالنص كلة كتلة واحدة فلا استراحة ولا فاصل بين الافكار ولا بين الجمل ولا عناوين

وهذا ما يجعل عدد قراءك قلائل رغم قوة ما تقدمة لذلك قم بتقسيم مقالك أو موضوعك إلي فقرات وإجعل لكل فقرة بادئة أو عنوان وليكن مختلف سواء بلون أخر أو بتنسيق أخر واستخدم القوائم والاقتباسات والصور التوضيحية

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

• وماذا عن الصور

هناك مثل صيني قديم يقول ( إن صورة واحدة تغني عن 1000 كلمة ) وهذا صحيح 100%  لكن استخدام الصور بشكل مفرط يبطئ من عملية عرض صفحتك وبالتالي ملل الزائر وخروجه لذلك إن لم تكن الصور تغني فعلاً عن 1000 كلمة فلا تضعها وليكن عدد الصور في مقالاتك أو موضوعاتك مناسب

• السرعة أهم نقطة

قديماً كانوا يقولون  إن صفحتك البطيئة ستؤثر علي الزائر بحيث يمل ويخرج لكن الآن هناك مشكلة أخري وهي أن محركات البحث أيضاً تقوم بترتيب المواقع حسب سرعتها

لذلك

1. قم بإزالة أية إضافات غير ضرورية في مدونتك/موقعك/منتداك
2. قلل عدد الأشياء التي تظهر في الصفحة الرئيسية ( عدد المقالات, الإضافات, الاكواد ,الإعلانات ) تجنباً لحدوث أسوأ شيء وهو خروج الزائر من الصفحة الرئيسية
3. استخدم الصور ذات الأحجام الصغيرة وبالاعداد المناسبه
4. استخدم القوالب Templates أو الستايل styles  قليلة الصور والاكواد

• القالب

إن قالبك المزخرف ذو الشكل الجذاب لا يعني للزائر شيئا إن كان ما تقدمة من محتوي ليس بجيد لذلك استخدم قالب  Template بسيط لمدونتك واستخدم قالب Template بدون تعقيدات لموقعك واستخدم ستايل style قليل الصور ذو ألوان متناسبة وقليلة لمنتداك  وتذكر أن وظيفة القالب الأساسية هي تسهيل قراءة المقالات /المواضيع وتسهيل الوصول إلي جميع الأقسام في مدونتك/موقعك/منتداك

• الألوان

العين تحب الفراغ فأجعل في مقالاتك أو موضوعاتك فسحه لراحة زوارك وأحرص علي استخدام الألوان المتناسقة حيث تنافر الألوان يجعل الزائر يهرب من صفحتك لينعم براحة عينيه لذلك استخدم 3 ألوان كحد أقصي في قالبك آو ستايل منتداك أو في مقالات مدونتك إن كنت تكتب بأكثر من لون ولتكن لديك نظرة فنية في اختيار تناسق الالوان وتعلم مدلولات الالوان  من خبراء الاعلان ... ساتعرض إن شاء الله قريباً لهذة النقطة تحديداً لأهميتها 

الآن لديك محتوي جيد


....

القاعدة الثانية مكانك في محركات البحث
من الضروري جداً أن يتواجد موقعك في محركات البحث  حيث أن البحوث اثبتت أن أكثر من 70 % من زوار معظم المواقع يأتون من محركات البحث وأنا أجزم أن هذة النسبة عربياً قليلة جداً قل مثلاً 85% أو أكثر فمن منا لايبدأ تصفحة من خلال جوجل Google

لذلك فإن وجودك أو وجود موقعك في محركات البحث بات أمراً حتمياً لامفر منه وإلا عليك أن تلم أشيائك وتبحث لك عن مخرج شريف من اللعبة لعبة التسويق الإلكتروني

ومذا أيضاً عن محركات البحث  إنها رائعة وتعد أفضل وسائل التسويق الإلكتروني حيث أنها تتطلب منك بعض الجهود في البداية حتي تثبت أقدامك فيها  وتخلق لك مكاناً ثم تتركها لتسوق لك بمفردها وتلك ميزة عظيمة وغير موجودة في اي وسيلة اخري

كيف تثبت أقدامك في محركات البحث
أولاً أضف مدونتك/منتداك/موقعك في جوجل البحث من هذه الصفحة اضف موقع الي جوجل 

ثانياً أضف خريطة لمدونتك/موقعك/منتداك في جوجل كالتالي

• سجل دخولك الي حسابك في جوجل أو أنشئ واحداً إن لم تكن تملك من هذة الصفحة مجموعة خدمات مشرفي المواقع في جوجل

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

لذلك توجه الي جوجل وابحث عن العبارات التالية 
كيف اصنع خريطة لموقعي 
كيفية اضافة خريطة الموقع لجوجل
كيف اضيف خريطة مدونتي لجوجل 

وستجد ان شاء الله الشرح المميز

ثالثاً أضف مدونتك/موقعك/منتداك في خدمة احصائيات جوجل للمواقع google analytics لمعرفة عدد زوارك اليومي والشهري ومتابعة تقدمك ومعرفة عدد الصفحات التي تزار بكثرة ومن أين ياتي الزوار وماهي العبارات التي يبحثون عنها ليأتوا

مما يحقق لك أعلي إفادة حيث يتعرف نقاط القوة فتحافظ عليها والضعف فتتجنبها  افضل شرح للتسجيل والاشتراك في هذة الخدمة كتبة الأخ أحمد العازمي  فهذة هي طريقة التسجيل في احصائيات جوجل  وهذا شرح للخدمة بالتفصيل 

بهذا تكون قد أرسيت قواعد التسويق الإلكتروني لديك وبالتالي أنت جاهز وبقوة لتطبيق أياً من أساليب التسويق الإلكتروني وستجد الفرق في التطبيق لأنك تبني علي أساس

هدية المقال ...
كنت قد وعدت مسبقاً أني ساقدم مع اولي مقالاتي هدية أو مفاجأة ستساعد أصحاب المدونات في التسويق لمقالاتهم ولأني أعلم جيداً كم المعناة التي يعانيها المدونون وكم الوقت الذي يضيعونة في البحث عن قراء لأفكارهم لذلك أعلن الآن 

ميلاد دليل للمدونات  

إن ليس مجرد دليل تضف فيه مدونتك وتنتظر أن يأتيك زائر كل خمسة أيام بل هو حل التسيوق الإلكتروني وبمجرد تثبيت مدونتك ستكون من أعضاء الدليل الذين يجب علي التسويق لهم وايجاد المزيد من القراء والزوار في مدوناتهم بمجرد تثبيت مدونتك ستركزفي كتابة مقالاتك وستنسي أمر زوارك ستترك لنا التسويق حيث سنسوق لكل مدونة بشكل منفرد وللدليل بأكملة ولن ندع أية مدونة ردئية تندس في دليل زوارك حتي نضمن جودة الزائر القادم مما يحقق مصلحتك 

كل ما عليك فعله للإنضمام للديل هو أن تقرأ شروط الإنضمام في الصفحة التالية شروط الإنضمام في الدليل

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

وإن كنت تريد معرفة مميزات اضافة مدونتك في دليل زوارك فاقرأ ما في الصفحة التالية مميزات اضافة مدونتك في دليل

وماذا عن التثبيت  تعرف علي فكرة التثبيت وشروطة من خلال شروط تثبيت المدونات في دليل زوارك 

سارع بإضافة مدونتك إلي الدليل وتذكر أن الإضافة والتثبيت حتي الآن مجاناً وهذا لن يستمر طويلاً  إحجز مكانك ومكان كل المدونين أصحابك وتمتع بروعة التسويق المجاني وكن من الألف مدونه الأولي التي تحصل علي حمله تسويقية مجانا 

ورشة العمل:
هل تطبق قواعد التسويق الإكتروني السابقة لديك أم أن هناك مشكلة في التطبيق أم أنك لا تريد تطبيقها شاركنا بموقعك أو مدونتك أو منتداك وشارك الآخرين برأيك في مدي تطبيق القواعد لديهم وأنت المستفيد في النهايه  

 

......................................................................................

كيف تختار إسماً يعبر عن مدونتك ويجذب زوارك

كيف تختار إسماً يعبر عن مدونتك ويجذب زوارك 

 

http://xxxxxxx.blogspot.com 

مرحباً
في الوقت الذي يعتبرة البعض قرار عاطفي والبعض الأخر يرجئة إلي أن ينتهي من تصميم مدونتة, يعد قرار إختيار إسم المدونة من القرارات الهامة التي لابد أن تخضع لأسس ومعايير هامة بعيداً عن العاطفة كما أن ذلك لابد أن يكون قبل البدء في إنشاء المدونة

بداية تعرف علي أنواع أسماء المدونات

لأسماء المدونات أنواع كثيرة لكنها تكاد تكون مندرجة تحت ثلاثة أنواع هما :

الأسماء الشخصية :وفيها يستخدم الشخص إسمة الشخصي كأسماً للمدونة (مثال مدونة شبايك )
الأسماء الوصفية  :وهنا يكون إسم المدونة عبارة عن وصف لما تقدمة المدونة من خدمة أو ما تقوم بة المدونة ( مثال مدونة فن التدوين )
الأسماء المركبة : وفيها يستخدم المدون كلمة أوكلمتين لتعبر عن معني جديد تماماً ولا يعرفة أحد (بمعني خلق إسم جديد ) مثال مدونة ميلوج

كيف أختار بين هذة الأسماء
وهنا نبدأ في سرد فنون إختيار إسماً يعبرعن مدونتك ويجذب الزوار


إجعل من إسمك الشخصي إسما لمدونتك

1. إذا كانت مدونتك مدونة شخصية لأن إرتباط إسمك بالمدونة الشخصية يضفي نوعاً من المصداقية والحميمة للمدونة ويحقق لك مزيداً من الشهرة
2. إذا كانت مدونتك متخصصة ولكن هذا التخصص مرتبط بشخصك بشكل كبير مثلاً لو كان لديك مدونة متخصصة في القانون هل تطلق عليها مدونة قواعد القانون أم مدونة المحامي فلان بالطبع الثانية أفضل لك
3. إذ كنت شخصية مشهورة بحيث تحقق لمدونتك الإنتشار السريع بمجرد ربط إسمك بها . مثل مدونة الرئيس أحمدي نجاد

إستخدم وصف ماتقدمة في مدونتك كأسماً لها في الحالات التالية

1. إذا كانت مدونتك متخصصة في شيئ محدد لأن ذلك سيعطيك ميزة تنافسية بحيث لو إحتاج أحدهم هذا الشيئ سيلمع في ذهنة أولاً إسم مدونتك ( مثلاً :أنت لو إحتجت شيئ عن التدوين وكنت تعرف مدونتي المتخصصة في فن التدوين هل ستتذكر مدونة فن التدوين )
2. إذا كانت مدونتك تابعة لموقع ما أومنتدي بحيث يكون الأسم هو وصف المنتدي أو الموقع
3. إذا كنت ترغب في كسب زوار مستهدفين مهتمين بمجال معين مثلاً : مدونة الفاكهه  دليلك لعالم صحي  

إستخدم الأسماء المركبة وأحصل علي فائدتها العظمي في هذة الحالة فقط

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

نصائح وتلميحات

عند إختيار الأسم الشخصي

• إبحث عن إسمك وهل هناك مدونات أخري تحمل إسمك وعند العثور علي مدونة أو أكثر تحمل إسمك لأشخاص أخرين لديهم نفس إسمك . قم بإختيار إسمك بإسلوب مختلف عنهم بحيث يكون متميزاً عنهم . مثلاً إسمك مع لقلب لك أو مع لإسم عائلتك أو ما الي ذلك من الأمور التي تميزك .. المهم ألا تخرج لي بمدونة إسمهما مدونة ( محمد مثلاً ) لأنك ستجد المئات منها وعليك أن تتميز من بينهم
• إبعد عن الخطأ في كتابة إسمك وأكتبة كما هو  متعارف علية بالحرف الإنجلزية حفاظا علي الزوار الأوفياء الذين يدخلون عنوان مدونتك مباشرة . وحتي لا يذهبوا إلي غيرك ( يمكنك معرفة هل حرو ف إسمك صحيحة ام لا من خلال البحث عنها في جوجل )
• تواضع وإبتعد عن التعالي مهما كانت درجتك . مثلاً لا تطلق علي مدونتك إسم مدونة أحمد الذكي  وغيرها ولاحظ أن المشاهير لم يفعلوها

عند إختيار الإسم الوصفي

• إجعل إسم مدونتك يعبر عن تخصص مدونتك بوضوح ويصفها بدقة بحيث لو قرائة أحد الزوار سيعرف مالذي تقدمة مدونتك مما يكسبك المزيد من زوار الأدلة  والمواقع الأخري
• إستخدم العبارات والكلمات الأكثر بحثاً والتي تصف مدونتك في نفس الوقت وذلك لتكن في أعلي نتائج البحث عند البحث عن شيئ يخص مدونتك .. وأعلم أن محركات البحث تقدم المدونات التي تحمل عبارات البحث في عنوانها عن غيرها حتي ولو كانت الاخري  أفضل ..
• قم بصياغة الأسم الذي يصف مدونتك بكلمات قلية سهلة الحفظ وإبتعد عن التقليد

وأخيرا علاقة الإسم بالرابط

• حاول أن يكون إسم مدونتك هو نفس رابطها مثلا ( مدونة شبايك والرابط .shabayek.com هل تري مدي السهولة .
• إبتعد عن الروابط التي ليس لها معني والتي يلجأ لها البعض لقصرها مثلاً www.e000e00c.blogspot.com
• حاول أن تجعل رابط مدونتك متضمناً لكلمات بحث شهيرة بأي طريقة
• إجعلة سهل وقصير ومعبر عن مدونتك

هل لديك إقتراح بشأن إختيار أسماء المدونات .أخبرنا  كيف إخترت إسم مدونتك

........................................................................

دورة تعلم لغة HTML (الدرس التاسع)

دورة تعلم لغة HTML

بسم الله الرحمن الرحيم

والصلاة والسلام على اشرف الخلق والمرسلين

اما بعد.

تعلم لغةHTML

هذة الدورة مكونة من أكثر من درس 

الدرس الأول 

الدرس الثانى 

الدرس الثالث 

الدرس الرابع

الدرس الخامس 

الدرس السادس 

الدرس السابع

الدرس الثامن

الدرس التاسع

أضغط على رقم الدرس للأنتقال الية

تعليم لغةHTML

الدرس التاسع

ألن يكون رائعاً إذا تمكنت من وضع صورة في موقعك؟ في الحقيقة سيكون هذا رائعا ويمكن فعل ذلك بسهولة، كل ما تحتاجه هو عنصر واحد:

مثال 1:
كود بلغة HTML:
<img src="logo.png" alt="logo" />

كل ما تحتاج أن تفعله هو إخبار المتصفح بأنك تريد وضع صورة، (img) وموقعها (src, هو اختصار "source")، هل فهمت ذلك؟
لاحظ كيف أن عنصر img هو في نفسه وسم البداية والإغلاق، مثل <br /> لا يرتبط بنص معين.
"logo.png" هو اسم ملف الصورة الذي تريد وضعها في صفحتك، و".png" هو نوع ملف الصورة، تماماً مثل اللاحقة ".htm" تزظهر أن الملف هو وثيقة HTML، ".png" تخبر المتصفح أن الملف هو صورة، هناك أنواع مختلفة من ملفات الصور التي يمكنك إضافتها لصفحتك:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
صور GIF تستخدم عادة للرسومات، أما JPEG فتستخدم للصور الفوتوغرافية،هذا لسببين، الأول صور GIF يمكنها أن تحوي فقط 256 لوناً، بينما JPEG يمكنها أن تحوي ملايين الألوان، والسبب الثاني هو أن GIF هي صيغة ملف أفضل لضغط الصور البسيطة أما JPEG فهي أفضل للصور المعقدة التي تحوي تفاصيل كثيرة، وكلما زاد ضغط الصورة صغر حجمها، وهذا يعني أن صفحتك ستظهر بسرعة أكبر، وربما تعرف من خبرتك في المواقع أن الصفحات الثقيلة يمكنها أن تكون بطيئة بشكل كبير لدرجة تزعج الزائر.
في الماضي كانتا صيغة الصورة GIF وJPEG الأكثر استخداماً في صفحات المواقع، مؤخراً صيغة الصور PNG بدأت تكتسب شهرة أكثر وأكثر على حساب صيغة GIF، صيغة PNG تحوي عدة طرق تجمع بين مميزات GIF وJPEG، حيث يمكنها أن تحوي ملايين الصور وتقوم بضغطها بشكل فعال.

من أين آتي بالصور؟

إذا أردت أن تقوم بإنشاء صورك الخاصة فأنت بحاجة إلى برنامج محرر صور، محرر الصور هو أحد أهم الأدوات التي تحتاجها لإنشاء مواقع جميلة.
للأسف ليس هناك محرر صور يأتي مع نظام ويندوز أو مع أنظمة التشغيل الأخرى، لذلك عليك أن تشتري برنامج باينت شوب برو أو فوتوشوب أو مايكروميديا فايروركس، وهي أفضل محررات الصور في السوق.
عموماً، كما قلنا سابقاً، ليس من الضروري أن تشتري برامج غالية السعر لإنجاز هذا الدرس، الآن يمكنك إنزال برنامج جيد لتحرير الصور يسمى IfranView وهو برنامج مجاني ولا يكلف شيئاً.
أو يمكنك إنزال الصور من مواقع مختلفة، لكن احذر من مخالفة قوانين حقوق النشر، مع ذلك، من المفيد أن تعرف كيف تقوم بإنزال الصور:
إضغط بالزر الأيمن على أي صورة في أي موقع.
اختر "Save picture as..." في القائمة التي ستظهر لك.
اختر مكان حفظ الصورة في حاسوبك واضغط على "Save".
إفعل هذا للصورة أدناه، قم بحفظها في حاسوبك في نفس مكان ملفات HTML التي قمت بإنشاءها، لاحظ أن الشعار حفظ بصيغة PNG:


الآن يمكنك وضع الصورة في إحدة صفحاتك، جرب بنفسك.

هل هذا كل ما أحتاجه لمعرفته حول الصور؟

هناك أشياء أخرى يجب أن تعرفها حول الصور، أولاً يمكنك أن تقوم بإضافة صورة من مجلد آخر أو حتى من موقع آخر:

مثال 2:
كود بلغة HTML:
<img src="images/logo.png" />

مثال 3:
كود بلغة HTML:
<img src="http://m3lomadelivery/upload/download.php?img=888" />

ثانياً، يمكن للصور أن تكون روابط:

مثال 4:
كود بلغة HTML:
<a href="http://www.html.net">
<img src="logo.png" /></a>


هل هناك أية خصائص يجب أن أعرفها؟

 

عندما تريد وضع صورة فأنت تحتاج خاصية src التي تخبر المتصفح عن مكان الصور، بجانب ذلك هناك عدد من الخصائص التي يمكن أن تكون مفيدة عند إضافة الصور
خاصية alt تستخدم لتعطي وصفاً بديلاً للصورة إذا لم تظهر الصورة لأي سبب سيرى المستخدم نصاً بديلاً يشرح محتويات الصورة، هذه الخاصية مهمة خصوصاً لمن يعاني من أي إعاقة بصرية، وهي كذلك مفيدة في حال لم تظهر الصور بسرعة كافية، لذلك استخدم دائماً خاصية alt:

مثال 5:
كود بلغة HTML:
<img src="logo.png" alt="m3lomadelivery logo" />

بعض المتصفحات تعرض النص البديل في مربع صغير يظهر للمستخدم عندما يضع مؤشر الفأرة على الصورة، لاحظ عند استخدام خاصية alt الهدف هو تقديم نص بديل يصف الصور، خاصية alt يجب ألا تستخدم لعرض الرسائل خاصة للمستخدم لأن الذين يعانون من الإعاقة البصرية سيسمعون النص البديل بدون أن يفهموا معناه أو يدركوا محتوى الصورة.
 

.................................................................

دورة تعلم لغة HTML (الدرس الثامن)

دورة تعلم لغة HTML

بسم الله الرحمن الرحيم

والصلاة والسلام على اشرف الخلق والمرسلين

اما بعد.

تعلم لغةHTML

هذة الدورة مكونة من أكثر من درس 

الدرس الأول 

الدرس الثانى 

الدرس الثالث 

الدرس الرابع

الدرس الخامس 

الدرس السادس 

الدرس السابع

الدرس الثامن

الدرس التاسع

أضغط على رقم الدرس للأنتقال الية

تعليم لغةHTML

الدرس الثامن

ما الذي أحتاجه لإنشاء رابط؟

لإنشاء رابط ستستخدم ما تستخدمه دائماً عندم كتابة HTML: عنصر، عنصر بسيط مع خاصية واحدة وستتمكن من إنشاء رابط لأي شيء وكل شيء، إليك هذا المثال لرابط لموقع HTML.net وكيف سيكون شكله:
مثال 1:
كود بلغة HTML:
<a href="http://m3lomadelivery.blogspot.com//">Here is a link to معلومة دليفرى</a>
سيظهر في المتصفح بهذا الشكل:

Here is a link to معلومة دليفرى
 

العنصر a هو اختصار "anchor" والخاصية href هي اختصار "hypertext reference"، وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما.
في المثال أعلاه الخاصية href تحوي القيمة "http://www.html.net"، وهي العنوان الكامل لموقع HTML.net ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "Here is a link to HTML.net" فهي النص الذي سيظهر في المتصفح على شكل رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإعلاق </a>.
 

ماذا عن الروابط بين الصفحات في موقعي؟

إذا أردت إنشاء رابط بين صفحتين في نفس الموقع فلا تحتاج إلى أن تضع كامل العنوان للصفحة، فمثلاً إذا قمت بإنشاء صفحتين ولنسمهما page1.htm وpage2.htm وقمت بحفظهما في نفس المجلد فيمكنك أن تربط من صفحة إلى أخرى بكتابة اسم الملف في الرابط، فمثلاً رابط من صفحة page1.htm يشير إلى page2.htm سيظهر بهذا الشكل:

مثال 2:
كود بلغة HTML:
<a href="page2.htm">Click here to go to page 2</a>

إذا كانت الصفحة 2 وضعت في مجلد فرعي ولنسمه "subfolder" فالرابط سيظهر بهذا الشكل:

مثال 3:
كود بلغة HTML:
<a href="subfolder/page2.htm">Click here to go to page 2</a>

لو أردنا أن نضع رابطاً معاكساً من الصفحة 2 في المجلد الفرعي إلى الصفحة 1 سيكون شكل الرابط هكذا:

مثال 4:
كود بلغة HTML:
<a href="../page1.htm">A link to page 1</a>

"../../".
هل فهمت هذا النظام؟ بإمكانك دائماً أن تكتب العنوان الكامل للملف إذا وجدت هذا النظام معقداً.
 

ماذا عن الروابط الداخلية في نفس الصفحة؟

بإمكانك إنشاء روابط داخلية ضمن الصفحة، فمثلاً يمكنك إنشاء جدول بالمحتويات اعلى الصفحة ويحوي روابط تشير إلى كل فصل في الصفحة، كل ما تحتاجه هي خاصية تسمى id أو "identification" والعلامة "#".
استخدم خاصية id لتضع إشارة للعنصر الذي تريد وضع رابط له، مثال:
كود بلغة HTML:
<h1 id="heading1">heading 1</h1>

بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة id للعنصر الذي تريد الربط له، مثال:
كود بلغة HTML:
<a href="#heading1">Link to heading 1</a>

كل هذا سيتضح مع هذا المثال:

مثال 5:
كود بلغة HTML:
<html>

<head>
</head>

<body>

<p><a href="#heading1">Link to heading 1</a></p>
<p><a href="#heading2">Link to heading 2</a></p>

<h1 id="heading1">heading 1</h1>
<p>Text text text text</p>

<h1 id="heading2">heading 2</h1>
<p>Text text text text</p>

</body>

</html>
سيظهر بهذا الشكل في المتصفح (جرب أن تضغط على الرابطين

):
Link to heading 1
Link to heading 2
Heading 1

Text text text text
Heading 2

Text text text text

ملاحظة: قيمة الخاصية id يجب أن تبدأ بحرف وليس برقم.

 

هل يمكن أن أضع رابطاً لأي شيء آخر؟

 

بإمكانك أيضاً أن تضع روابط لعناوين بريد إلكتروني، يمكنك فعل ذلك بطريقة مشابهة لطريقة وضع رابط لصفحة أخرى:

مثال 6:
كود بلغة HTML:
<a href="mailto:info@m3lomadelivery">Send an e-mail to info at m3lomadelivery</a>
سيظهر بهذا الشكل في متصفحك
 

 

Send an e-mail to info at m3lomadelivery

الاختلافالوحيد بين الرابط لبريد إلكتروني ورابط لملف هو كتابة mailto: متبوعاًبعنوان البريد، عندما يضغط أحدهم على الرابط سيعمل برنامج البريدالإلكتروني ويعرض رسالة جديدة فارغة تحوي عنوان البريد الإلكتروني الذي وضعته في الرابط، سيحدث هذا في حال وجد برنامج بريد إلكتروني مثبت على الحاسوب، جرب ذلك الآن!

هل هناك خصائص أخرى يجب علي أن أعرفها؟

لإنشاء رابط استخدام دائماً الخاصية href بالإضافة إلى ذلك بإمكانك أن تضع خاصية title للرابط:

مثال 7:
<a href="http://m3lomadelivery.blogspot.com//" title="Visit m3lomadelivery and learn more">m3lomadelivery</a>
سيظهر بهذا الشكل في المتصفح:

m3lomadelivery

خاصية title تستخدم لوضع شرح قصير عن الرابط، إذا وضعت مؤشر الفأرة على الرابط دون أن تضغط عليه سترى النص الذي كتبته في خاصية title يظهر لك.
 

.................................................................

دورة تعلم لغة HTML (الدرس السابع)

دورة تعلم لغة    HTML

بسم الله الرحمن الرحيم

والصلاة والسلام على اشرف الخلق والمرسلين

اما بعد.

تعلم لغةHTML

هذة الدورة مكونة من أكثر من درس 

الدرس الأول 

الدرس الثانى 

الدرس الثالث 

الدرس الرابع

الدرس الخامس 

الدرس السادس 

الدرس السابع

الدرس الثامن

الدرس التاسع

أضغط على رقم الدرس للأنتقال الية

تعليم لغةHTML

الدرس السابع
 

ما هي الخاصية؟

أنت تتذكر أن العناصر تعطي هيكلية لصفحة HTML وتخبر المتصفح كيف تريد لموقعك أن يظهر، كمثال <br /> تخبر المتصفح أن يقوم بنقل ما بعدها من نص إلى سطر جديد، في بعض العناصر يمكنك أن تضيف المزيد من المعلومات، هذه المعلومات تسمى خصائص.

مثال 1:
كود بلغة HTML:
<h2 style="background-color:#ff0000;">My friendship with HTML</h2>

الخصائص تكتب دائماً بنفس الطريقة، فهي تبدأ باسم الخاصية ثم يتبعها علامة يساوي "=" ثم قيمة الخاصية، الفاصلة المنقوطة في المثال تستخدم فقط في خاصية "style" ووظيفتها الفصل بين أوامر مختلفة، سنتحدث عن ذلك في وقت لاحق.
هناك خصائص كثيرة ومختلفة، سنتعلم أولاً واحدة منها وهي style، والتي يمكن استخدامها لإضافة تصميم لموقعك. فمثلاً يمكن إضافة لون خلفي للصفحة:

مثال 2:
كود بلغة HTML:
<html>

<head>
</head>

<body style="background-color:#ff0000;">
</body>

</html>

هذه الخاصية ستجعل لون الصفحة أحمرا، انظر بنفسك، سنشرح أكثر عن الألوان في وقت لاحق. لاحظ أن كتابة الوسوم والخصائص يجب أن تكون بالتهجأة الأمريكية، (مثال: color بدلاً من colour)، من المهم أن تكون منتبهاً عند كتابتك للأوامر وتستخدم نفس التهجأة التي تراها في الأمثلة وإلا فلن يعرض المتصفح صفحاتك بطريقة صحيحة.
 

كيف أصبحت الصفحة حمراء؟

في المثال أعلاه وضعنا قيمة "#ff0000" للون خلفية الصفحة، هذا الرقم يشير إلى اللون الأحمر، وهو يعتمد نظام عد سداسي عشر، ويسمى بالإنجليزية HEX، كل لون له رقم خاص وهذه بعض الأمثلة:

أبيض: #ffffff
أسود: #000000
أحمر: #ff0000
أزرق: #0000ff
أخضر: #00ff00
أصفر: #ffff00

نظام أرقام الألوان يأتي بشكل واحد، فهو يبدأ بعلامة # ثم ستة أرقام أو أحرف، هناك أكثر من ألف رقم للألوان وليس من السهل تذكر إلى أي لون يشير أي رقم. ولكن إذا أردت اختيار لون محدد فكل ما عليك هو زيارة هذا الموقع.
بإمكانك أيضاً استخدام أسماء الألوان باللغة الإنجليزية للألوان المعروفة مثل الأبيض والأسود والأحمر والأزرق والأصفر.

مثال 3:
كود بلغة HTML
<body style="background-color: red;">
نكتفي بهذا القدر حول الألوان لنعد إلى الخصائص.
 

أي العناصر تستطيع استخدام الخصائص؟

مجموعة مختلفة من الخصائص يمكن استخدامها لمعظم العناصر.
الخصائص تستخدم غالباً في الوسوم مثل body لكن ليس في وسوم أخرى مثل br، لأن وضع النص في سطر جديد لا يتطلب خصائص إضافية.
وكما هناكالكثير من العناصر فهناك أيضاً الكثير من الخصائص، بعضالخصائص صممت لتستخدم لعنصر محدد وبعضها الآخر يمكن استخدامها لعناصر مختلفة، وبعضالعناصر يمكنه أن يحوي خصائص كثيرة بينما بعضها الآخر لايمكنه سوى أن يحوي خاصية واحدة.
قد يبدو الأمرمثيراً للحيرة الآن، لكن ما أن تعتاد على التعامل معالخصائص المختلفة لتجد أنها منطقية وسترى كم هي سهلة عند استخدامها.
هذا الدرس سيعرض عليك أهم الخصائص.

 

ما هي مكونات العناصر؟

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

.................................................................

دورة تعلم لغة HTML (الدرس السادس )

دورة تعلم لغة HTML

بسم الله الرحمن الرحيم

والصلاة والسلام على اشرف الخلق والمرسلين

اما بعد.

تعلم لغةHTML

هذة الدورة مكونة من أكثر من درس

 

الدرس الأول 

الدرس الثانى 

الدرس الثالث 

الدرس الرابع

الدرس الخامس 

الدرس السادس 

الدرس السابع

الدرس الثامن

الدرس التاسع

أضغط على رقم الدرس للأنتقال الية

تعليم لغةHTML

الدرس السادس 

حان الوقت الآن لتعلم سبعة عناصر جديدة. بنفس الطريقة التي تؤكد فيها على نص معين عندما تضعه بين وسم البداية <em> ووسم الإغلاق </em>, يمكنك أن تضيف تأكيداً أقوى باستخدام وسم البداية <strong> ووسم الإغلاق </strong>.
كود بلغة HTML:
<strong>هذا النص سيكون سميكا</strong>

سيظهر بهذا الشكل في المتصفح:

هذا النص سيكون سميكا

بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small:
كود بلغة HTML:
<small>هذا النص سيكون صغيرا</small>
سيظهر بهذا الشكل:

هذا النص سيكون صغيرا

هل أستطيع استخدام عدة عناصر في نفس الوقت؟

بإمكانك استخدام عدة عناصرة بسهولة في نفس الوقت، لكن تجنب تداخل العناصر. يمكن توضيح ذلك بهذا المثال:

إذا أردت التأكيد على نص صغير الحجم يجب أن تفعل ذلك بهذه الطريقة:
كود بلغة HTML:
<em><small>Emphasised small text</small></em>

وليس بهذه الطريقة:
كود بلغة HTML:
<em><small>Emphasise small text</em></small>

وجه الاختلاف في المثال الأول يكمن في أننا أغلقنا أولاً الوسم الذي قمنا بافتتاحه آخراً، بمعنى آخر وسم البداية الأول يغلق آخراً، هكذا لا نربك أنفسنا أو المتصفح.

المزيد من العناصر!

كما ذكرنا في الدرس الثالث هناك عناصر تستخدم وسم البداية ووسم الإغلاق في نفس الوقت. هذه يسمونها العناصر الفارغة وهي عناصر غير مرتبطة بالنص بأي طريقة، بل هي معزولة، كمثال لمثل هذه العناصر هناك الوسم <br /> الذي يجبر النص على الظهور في سطر جديد:

كود بلغة HTML:
Some text<br /> and some more text in a new line

سيظهر بهذا الشكل:

Some text
and some more text in a new line

 
لاحظ أن الوسم كتب بطريقة يختصر فيها وسم البداية ووسم الإغلاق بوضع مسافة وشرطة أمامية في نهايته: <br />.

هناك عناصر أخرى تحتاج إلى وسمي البداية والإغلاق - كما هو حال معظم العناصر - مثل ul وol وli. هذه العناصر تستخدم عندما تريد إنشاء القوائم.

ul هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة، أما ol فهي اختصار "ordered list" أو قائمة مرتبة فهو يضع رقماً لكل بند في القائمة، ولكي نضع البنود في القائمة علينا أن نستخدم الوسم li أو "list item"، هل أصبحت بالحيرة، شاهد هذا المثال:
كود بلغة HTML:
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>

سيظهر بهذا الشكل في متصفحك

A list item
Another list item

 
كود بلغة HTML:
<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>


سيظهر بهذا الشكل في متصفحك

First list item
Second list item

هل هذا كل شيء؟

نعم هذا كل شيء، ومرة أخرى، قم بعمل تجارب بنفسك وجرب العناصر السبعة التي تعلمتها في هذا الدرس:
كود بلغة HTML:
<strong>Stronger emphasis</strong>
<small>Small text</small>
<br /> Line shift
<hr /> Horizontal line
<ul>List</ul>
<ol>Ordered list</ol>
<li>List item</li>
 

.................................................................

دورة تعلم لغة HTML (الدرس الخامس )

دورة تعلم لغة HTML

بسم الله الرحمن الرحيم

والصلاة والسلام على اشرف الخلق والمرسلين

اما بعد.

تعلم لغةHTML

هذة الدورة مكونة من أكثر من درس 

الدرس الأول 

الدرس الثانى 

الدرس الثالث 

الدرس الرابع

الدرس الخامس 

الدرس السادس 

الدرس السابع

الدرس الثامن

الدرس التاسع

أضغط على رقم الدرس للأنتقال الية

تعليم لغة   HTML

الدرس الخامس
 

إذا أردت البداية إنشاء موقع جديد فعليك دائما باستخدام هذا القالب:
كود بلغة HTML:
<html>

<head>
<title></title>
</head>

<body>
</body>

</html>
في قسم رأس الصفحة اكتب دائماً العنوان: <title>عنوان صفحتك</title>. لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح

:
 قسم رأس الصفحة اكتب دائماً العنوان: <title>عنوان صفحتك</title>.

لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح 

:

العنوان بشكل خاص مهم لأنه يستخدم في محركات البحث - مثل غوغل - لأرشفة موقعك وإظهاره في نتائج البحث.


في جسم الصفحة اكتب محتويات صفحتك، وأنت تعرف الآن بعض أهم العناصر:

كود بلغة HTML:
<p>Is used for paragraphs.</p>
<em>Emphasis text.</b>
<h1>Heading</h1>
<h2>Subhead</h2>
<h3>Sub-subhead</h3>
 

تذكر أن الطريقة الوحيد لتعلم HTML هي بالتجربة والخطأ، لكن لا تقلق، لايمكنك بأي طريقة أن تدمر حاسوبك أو الإنترنت! لذلك استمر في التجربة، هذه هي أفضل طريقة لاكتساب الخبرة.

ماذا يعني هذا؟

لا أحد يتقن تطوير المواقع بتعلم الأمثلة فقط في هذا الدرس، فهذا الدرس هو مجرد بداية بسيطة لفهم مكونات المواقع، ولكي تقوم بإنشاء موقع جيد عليك أن تستخدم المكونات بأسلوب جديد وإبداعي. لذلك قم بتجربة ما تعلمته

ما التالي؟

جرب إنشاء صفحات أخرى بنفسك، قم بإنشاء صفحة تحوي عنواناً للصفحة وعناوين فرعية مع بعض النصوص، جرب أن تفعل ذلك بدون الرجوع إلى هذ االدرس.

.................................................................

دورة تعلم لغة HTML (الدرس الرابع)

دورة تعلم لغة HTML

بسم الله الرحمن الرحيم

والصلاة والسلام على اشرف الخلق والمرسلين

اما بعد.

تعلم لغةHTML

هذة الدورة مكونة من أكثر من درس 

الدرس الأول 

الدرس الثانى 

الدرس الثالث 

الدرس الرابع

الدرس الخامس 

الدرس السادس 

الدرس السابع

الدرس الثامن

الدرس التاسع

أضغط على رقم الدرس للأنتقال الية

تعليم لغةHTML

الدرس الرابع

في الدرس الأول ألقينا نظرة على الأدوات التي نحتاجها لإنشاء موقع: متصفح وبرنامج المفكرة أو أي محرر نصي مماثل، وبما أنك تقرأ هذه الصفحة فأنت تستخدم الآن متصفحاً، ما تحتاجه الآن هو أن تفتح نافذة جديدة من المتصفح لكي تستطيع قراءة هذا الدرس بينما تستخدم النافذة الأخرى لترى فيها موقعك.
أيضاً عليك أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات، الآن أنت جاهز.

لنبدأ بشيء بسيط، سنقوم بإنشاء صفحة تقول "مرحى! هذا موقعي الأول". أكمل القراءة وستعرف كم هو بسيط فعل ذلك.
لغة HTML بسيطة ومنطقية، المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة.
أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<html>" في أول سطر في برنامج المفكرة.
كما تتذكر من الدروس الماضية، <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>.
الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (<head> و</head>) يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>).
صفحتك يجب أن تكون بهذا الشكل:
كود بلغة HTML:
<html>

<head>
</head>
<body>
</body>

</html>
لاحظ كيف نسقنا الصفحة بطريقة منطقية حيث وضعنا كل وسم في سطر جديد ووضعنا مسافات فارغة قبل بعضها، كقاعدة، لا يهم كيف تقوم بتنسيق الأوامر في صفحة HTML، لكن لكي تجعل الصفحة سهلة القراءة لك وللآخرين ينصح بأن تنسق الصفحة بطريقة هيكلية منطقية سهلة الفهم كما ترى في المثال أعلاه.
إذا كانت صفحتك تشبه المثال أعلاه فقد قمت بإنشاء موقعك الأول، عملياً الموقع ممل ولا يحوي شيئاً وغالباً لن يكون الموقع الذي تحلم به عندما بدأت في قراءة هذا الدرس، مع ذلك هو موقع وما قمت بإنجازه الآن سيكون قالباً لبقية صفحات HTML التي ستكتبها في المستقبل.
كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في رأس الصفحة تكتب معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل الصفحة..
مثلاً، إذا أردت أن تضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في رأس الصفحة، العنصر المستخدم لفعل ذلك هو title. اكتب عنواناً للصفحة بين وسم البداية <title> ووسم الإغلاق </title>:
كود بلغة HTML:
<title>موقعي الأول</title>

لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة
كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي:
كود بلغة HTML:
<p>مرحى! هذا هو موقعي الأول.</p>

الحرف p في <p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية. صفحة HTML يجب أن تكون لديك بالشكل التالي:
كود بلغة HTML:
<html>

<head>
<title>موقعي الأول</title>
</head>

<body>
<p>مرحى! هذا هو موقعي الأول.</p>
</body>

</html>
انتهينا! لديك الآن أول موقع حقيقي!
كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك:
في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية.
اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
احفظ الصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.
الآن إذهب إلى متصفحك:
في القائمة العلوية اختر "Open" من قائمة "File".
إضغط على "Browse" في النافذة التي ستظهر لك.
إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".
الآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا!
 

.................................................................

دورة تعلم لغة HTML (الدرس الثالث )

دورة تعلم لغة  HTML

بسم الله الرحمن الرحيم

والصلاة والسلام على اشرف الخلق والمرسلين

اما بعد.

تعلم لغةHTML

هذة الدورة مكونة من أكثر من درس

الدرس الأول 

الدرس الثانى 

الدرس الثالث 

الدرس الرابع

الدرس الخامس 

الدرس السادس 

الدرس السابع

الدرس الثامن

الدرس التاسع

أضغط على رقم الدرس للأنتقال الية

تعليم لغة   HTML

الدرس الثالث

ما هي العناصر؟

العناصرتعطي لوثائق HTML هيكلية محددة وتخبر المتصفح عن كيفية عرضالصفحة، بشكلعام العناصر عبارة عن وسم "tag" للبداية ثم بعض المحتويات ثموسم الإغلاق.

ما هي الوسوم؟

الوسوم هي توصيفات تستخدمها لكي تضعها في بداية العنصر وعند نهايته. كل الوسوم لها نفس نفس الشكل، تبدأ مع علامة أصغر من "<" وتنتهي مع علامة أكبر من ">". بشكل عام هناك نوعان من الوسوم، وسم البداية: ثم وسم الإغلاق . الفرق بين الإثنين هي علامة "/"، توصيف المحتويات يكون بوضعها بين وسم البداية ووسم الإغلاق. لغة HTML تتكون من هذه العناصر، لكي تتعلم HTML عليك أن تتعلم وتستخدم وسوماً مختلفة. هل يمكنك أن تريني بعض الأمثلة؟ حسناً، العنصر em يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية ووسم الإغلاق ستظهر بشكل مائل في المتصفح. ("em" هي اختصار "emphasis".) المثال 1: سيظهر بهذا الشكل في المتصفح: نص مائل العناصر h1، h2، h3، h4، h5 وh6 تستخدم للعناوين (حرف h هو اختصار "heading"), حيث h1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، h2 يستخدم للمستوى الثاني من العناوين وهو أصغر حجماً بقليل، وh6 هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر. مثال 2: كود بلغة HTML:

هذا عنوان

هذا عنوان فرعي

ستظهر بهذا الشكل في المتصفح: هذا عنوان هذا عنوان فرعي

هل أنا بحاجة دائماً إلى استخدام وسم بداية ووسم إغلاق؟

كما يقولون، هناك استثناء من كل قاعدة، والاستثناء في HTML هو وجود عناصر تعتبر هي وسم البداية ووسم الإغلاق في نفس الوقت، وهي تسمى العناصر الفارغة لأنها غير مرتبطة بنص معين لكنها عناصر مستقلة تماماً، فمثلاً هناك وسم لكي لكسر النص وإجباره على الظهور في سطر جديد، هذا الوسم يظهر بهذا الشكل: <br />.

هل تكتب الوسوم بأحرف كبيرة أم صغيرة؟

معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الإثنين، <HTML>، <html> أو <HtMl> كلها ستعطي نفس النتائج، مع ذلك الأسلوب الصحيح هو كتابة الوسوم بالأحرف الصغيرة، لذلك عليك أن تعتاد على كتابة الوسوم بالأحرف الصغيرة
 

أين أضع كل هذه الوسوم؟

أكتب الوسوم في وثيقة HTML، المواقع تحوي وثيقة HTML أو أكثر، عندما تتصفح شبكة الويب أنت فقط تقوم بفتح وثائق HTML مختلفة.

.................................................................

دورة تعلم لغة HTML (الدرس الثانى)

دورة تعلم لغة HTML

بسم الله الرحمن الرحيم

والصلاة والسلام على اشرف الخلق والمرسلين

اما بعد.

تعلم لغةHTML

هذة الدورة مكونة من أكثر من درس

الدرس الأول 

الدرس الثانى 

الدرس الثالث 

الدرس الرابع

الدرس الخامس 

الدرس السادس 

الدرس السابع

الدرس الثامن

الدرس التاسع

أضغط على رقم الدرس للأنتقال الية

تعليم لغة HTML

الدرس الثانى

درس اليوم هو درس بسيط لتوضيح بعض المفاهيم

ما هي HTML؟

HTML اخترعت في عام 1990م من قبل عالم يسمى تيم بيرنرز لي، الهدف من هذه اللغة هو تبسيط عملية وصول العلماء في جامعات مختلفة إلى البحوث التي ينشرونها، المشروع نجح بشكل لم يتصوره تيم بيرنرز لي، باختراعه HTML قام تيم بوضع أساس شبكة الويب كما نعرفها اليوم.
HTML هي لغة تسمح بعرض المعلومات (مثال: البحوث العلمية) على شبكة إنترنت، ما تراه عند زيارتك لأي صفحة في الشبكة هو ترجمة المتصفح لأوامر HTML، لكي ترى HTML لأي صفحة تزورها عليك أن تضغط على قائمة عرض "عرض" ثم "مصدر الصفحة" أو Ctrl=U.
 

ما فائدة HTML؟
 

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

حسناً، ماذا تعني H-T-M-L؟

HTML هي اختصار "HyperText Mark-up Language"، أنت لا تحتاج في لمعرفة ماذا تعني هذه المصطلحات، مع ذلك لنشرحها بتفصيل أكبر.

Hyper هي عكس "خطي" وهي تعني في هذه الحالة أنتنتقل من أي نقطة إلى أي نقطة بدون أن تسير في خط سير محدد، في الماضي - عندما كانت الفأرة شيء يلحقه القط - كانت الحواسيب تعمل بشكل خطي، تقومبتنفيذ أمر ما ثم تذهب لمابعده، لكن HTML مختلفة، يمكنك أن تذهب إلى أي مكان في أي وقت، ليسبالضرورة مثلاً أن تزور موقع MSN.com قبل أن تزور HTML.net.

Text تعني النص، وهذه تشرح نفسها.

Mark-up هوما تفعله بالنص، فهذه الكلمة تعني توصيفالنص، فأنت تقوم بتوصيف النصتماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميكوغيرها.

Language تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية.

هناكأيضا شيء متعلق ب HTML وهي لغة XHTML والتي تعني "Extensible HyperText Mark-up Language" وهي باختصار طريقة أحدث وأكثر تنظيماً لكتابة HTML

.................................................................