هل تعلم ما هي العلاقة بين الويب والانترنت؟ اقرأ هذا المقال واسمح لي بأن أعرف رأيك البناء.
الانترنت:
ما هو الإنترنت:
الإنترنت عبارة عن شبكة عنكبوتية عالمية ضخمة تضم ملايين ومليارات من أجهزة الكمبيوتر والأجهزة الإلكترونية أيضًا، مثل الوصلات, الكوابل والخوادم وأجزاء أخرى من الأجهزة. باستخدام الإنترنت، من الممكن الوصول إلى أي معلومات نحتاجها ويمكننا التحدث إلى أي شخص في العالم.
كيف يعمل الإنترنت:
نأتي إلى هنا لنتعلم كيف يعمل الإنترنت. في البداية ذكرنا أن الإنترنت عبارة عن كابل وأن الأجهزة الأخرى متصلة ببعضها البعض ، حتى الأجهزة اللاسلكية تحتاج إلى كل هذا للوصول إلى الإنترنت.
حسنًا، عندما نزور أحد مواقع الويب ، يرسل جهاز الكمبيوتر الخاص بي طلبًا عبر هذه الأسلاك إلى خادم. الخادم هو المكان الذي يتم فيه تخزين مواقع الويب، وهو يعمل كثيرًا مثل محرك الأقراص الثابتة بجهاز الكمبيوتر الخاص بك. لكنه يتمتع بمواصفات أعلى وعمر افتراضي ، بمجرد وصول الطلب ، يقوم الخادم باسترداد موقع الويب وإرسال البيانات الصحيحة مرة أخرى إلى جهاز الكمبيوتر الخاص بك.
ما هو http:
(HTTP ( Hypertext Transfer Protocol
تعني بروتوكول نقل النص التشعبي.
حسنا قلنا ان الموقع يرسل طلب للخادم من خلال حاسوبي كيف يفهم السيرفر هذه اللغة ويتواصل مع حاسوبي؟
الجواب عن طرق بروتوكول http الذي يستقبل الطلب من حاسوبي ويعيده ويوجه الاستجابة له وهذا كله عبر الانترنت.
ما هو https:
يعتبر https مثل http، ولكنه خاص بإصدار الأمان، وهو البروتوكول الأساسي المستخدم لإرسال البيانات بشكل آمن بين المتصفح والخادم، بحيث يقوم بتشفير البيانات قبل إرسالها من أجل زيادة الأمان.
ما الفرق بين http و https:
الاختلاف الرئيسي بين هذه البروتوكولات هو أن https لديه تقنية حماية البيانات التي تعمل من خلال التشفير الموجود بين المتصفح والخادم ، لأنه في بعض الأحيان يتم تشفير بعض البيانات مثل كلمات المرور وأرقام البطاقات من أجل سريتها لضمان عدم قراءتها من قبل الغرباء.
المتصفح وكيف تعمل:
بالبداية, المتصفح هو تطبيق برمجي يتم تثبيته على الكمبيوتر أو أي جهاز آخر يدعمه ، ومتصل بالإنترنت ، مما يسمح لنا بعرض صفحات أخرى ومحتويات مختلفة منها.
كما ذكرنا سابقًا ، يتم استخدام الخادم للوصول إلى الصفحات والبيانات التي أحتاجها في وجود المتصفح ، بحيث عند كتابة عنوان URL في المتصفح ، يقوم بروتوكول HTTP بتوصيله بالخادم والوصول إلى البيانات الموجودة فيه ، ثم يقوم بالرد على المتصفح ويعرض الصفحة المطلوبة للمستخدم باستخدام نفس البروتوكول وبحضور الإنترنت.
DNS وكيف يعمل:
عندما تكتب عنوان بحث أو شيء مشابه في المتصفح ، فسيستخدم بروتوكول DNS على الإنترنت الذي يحول أسماء مواقع الويب التي يمكن للأشخاص فهمها ، مثل W3School.com ، إلى عناوين يمكن فهمها بواسطة الأجهزة (عنوان IP ). هذا يسمح لأجهزة الكمبيوتر الخاصة بالمستخدمين بالاتصال بخادم الويب. والوصول إلى ما يبحثون عنه.
ما هو اسم المجال:
اسم المجال هو النص الذي يكتبه المستخدم في نافذة المتصفح للوصول إلى موقع ويب معين. مثل اسم المجال لـ Google هو google.com.
ما هي الاستضافة hosting:
عندما يريد شخص ما رفع بعض الملفات أو عندما ينتهي من تصميم موقع على شبكة الإنترنت يريد مشاركتها مع الآخرين بالبحث عنها على الإنترنت فكيف يتم ذلك؟
ويتم ذلك من خلال خدمة الاستضافة وتوفير مساحة تخزين على الخادم لتخزين الملفات وكذلك استضافة موقعك المصمم على الخادم لجعلها متاحة للعرض على الإنترنت
ومقدار المساحة المخصصة يعتمد على نوع الاستضافة.
HTML لغة ترميز النص التشعبي.
حول لغة الترميز لنص التشعبي:
ضع في اعتبارك أن هذه اللغة ليست لغة برمجة، بل هي لغة نصية وصفية، يمكنك من خلالها تنسيق وإنشاء صفحة ويب معينة.
مقدمة في html:
اللغة التي تصف بنية صفحة الويب.
يتكون من سلسلة من العناصر.
تخبر عناصر هذه اللغة المتصفح بكيفية عرض المحتوى.
تسمى هذه العناصر علامة ذات بداية ونهاية ، مثل و وعناصر أخرى.
حول تعلم لغة ترميز النص الأساسية:
تعتبر أساسيات HTML مهمة جدًا لتخطيط الصفحة ومن الضروري استخدامها بشكل صحيح حتى يتم التعرف عليها ومنحها الخصائص المطلوبة بواسطة ملف CSS التي سوف نتعرف عليها لاحقا.
فيما يلي العلامات التي يجب أن تحتوي عليها أي صفحة HTML تقريبًا:
<DOCTYPE html> تحدد هذه العلامة اللغة التي ستكتبها على الصفحة.
في هذه الحالة، اللغة هي HTML 5.
<html> تشير هذه العلامة إلى أننا من الآن فصاعدًا سنكتب في كود HTML.
<head> هذا هو المكان الذي تنتقل إليه جميع البيانات الوصفية للصفحة - أشياء مخصصة في الغالب لمحركات البحث.
<meta> هذه علامة لتقديم البيانات الوصفية (بيانات حول بياناتنا) إلى الصفحة
يمكننا استخدام العلامات الوصفية لعرض مجموعة الأحرف التي نستخدمها أو لأغراض تحسين محركات البحث (تحسين محرك البحث).
<title> تعطي هذه العلامة عنوانًا للصفحة يمكن عرضه في علامة تبويب المتصفح.
<body> هذا هو المكان الذي ينتقل إليه محتوى الصفحة.
HTML يحتوي على العديد من العلامات الأساسية والتي يتم استخدامها على نطاق واسع، بما في ذلك و <h1> و <div>.
يتم استخدام علامة <div> كحاوية لعناصر HTML لتقسيم صفحة الويب، والتي يتم معالجتها بعد ذلك باستخدام CSS.
أيضًا، هناك العديد من علامات HTML التي نستخدمها لتنسيق صفحتنا حسب الحاجة والتي تسمى TAGS:
العناصر الأساسية لصفحة HTML هي:
text header: استخدام العلامات <h1> <h2> <h3> <h4> <h5> <h6>
paragraph: باستخدام علامة <p>,
horizontal line: باستخدام علامة <hr>.
link: باستخدام علامة <a>.
image: باستخدام علامة <image>.
divider: استخدام وسم <div>.
كتابة العلامات ( Semantic Tags ) ذات دلالة لها معنى :
تحتوي هذه اللغة على عناصر دلالية تُستخدم لتحديد محتوياتها مثل <h1> على عكس العناصر غير الدلالية التي لا تخبرنا
بأي شيء بخصوص محتواه مثل و <div>.
تشير العناصر الدلالية إلى عناصر HTML التي لها معنى محدد.
على سبيل المثال : <h1> هو عنصر دلالي. يخبر google bots أن المحتوى داخل العلامة هو العنوان الأكثر أهمية في مستند HTML. من ناحية أخرى ، <div> هو عنصر غير دلالي لأنه يشير فقط إلى تقسيم في مستند HTML ولا يقدم أي معلومات.
النماذج والتحقق من صحة في لغة الترميز:
يستخدم النموذج في HTML لتجميع مدخلات المستخدم من الاسم وكلمة المرور والبريد الإلكتروني وما إلى ذلك. وهذا يعني أنه يتم استخدامه لإنشاء نموذج إدخال بتنسيق HTML.
يتم استخدام نموذج التحقق: يجب أن تكون البيانات المدخلة في النموذج بالتنسيق الصحيح ويجب ملء بعض الحقول من أجل الاستخدام الفعال للنموذج المقدم.
الاتفاقيات وأفضل الممارسات في html:
أغلق كافة عناصر HTML.
قم دائمًا بالإعلان عن نوع المستند.
استخدم أسماء العناصر الصغيرة.
مسافات وعلامات متساوية.
امتداد الملف.
إمكانية الوصول بلغة html:
يجب كتابة كود HTML بحيث يسهل على المستخدم التنقل والتفاعل مع موقعك، وهذا يعني أن الكود دلالي قدر الإمكان، ويعني أن الموقع يحتوي على زر وَرَد فِعل عند النقر عليه من قبل المستخدم ، أن الأزرار واضحة وعناصر أخرى يمكن الوصول إليها عبر لوحة المفاتيح فقط أو كلا الماوس.
أساسيات تحسين محركات البحث (SEO) في لغة الترميز:
إنها أجزاء "علامات" موجودة في HTML وتكون غير مرئية للمستخدمين. أنها توفر بعض المعلومات حول صفحتك لمحركات البحث. تساعد محركات البحث على فهم المحتوى الخاص بك. يمكن للمستخدمين البحث عنها والعثور عليها في شفرة المصدر لصفحة مثل العنوان TITLE والرأس HEAD.
CSS Cascading Style Sheets
حول CSS:
" أنا أقول أنها مكياج الفتاة"
تُستخدم هذه اللغة مع HTML ، والتي تصف كيفية عرض العناصر على الصفحة ، وتتحكم في تخطيط العديد من صفحات الويب ، والتي يتم تخزينها في ملف بامتداد CSS ، وتتحكم أيضًا في الشكل والترتيب واللون والخصائص الأخرى التي يتم منحها لجعل الموقع يبدو أكثر جاذبية.
الاساسيات في CSS:
تُستخدم هذه الخاصية لربط صفحة CSS بصفحة HTML للبدء بمنحها بعض الخصائص.
تُستخدم هذه الخاصية لمنح العنوان h1 اللون الأزرق وحجم الخط ونوعه.
استخدم هذه الخاصية لمنح الفقرات اللون الأزرق وحجم الخط ونوعه.
يتم استخدام سمة فئة ( CLASS ) لتحديد فئة لعنصر HTML ، ويمكن لعناصر HTML المتعددة مشاركة نفس الفئة CLASS.
يتم استخدام سمة معرف ID لتحديد معرف فريد لعنصر HTML، لا يمكن أن يكون لديك أكثر من عنصر واحد بنفس المعرف في مستند HTML.
أيضًا ، هناك العديد من الخصائص وطرق الاستخدام والقيود التي نستخدمها كثيرًا في حياتنا.
عمل تخطيطات في CSS:
يمكن تقسيم موقع الويب إلى أقسام مختلفة تتكون من رأس وقوائم ومحتوى وتذييل بناءً على العديد من تصميمات التخطيط المختلفة المتاحة للمطورين. يمكن إنشاء تخطيطات مختلفة باستخدام علامة div واستخدام خاصية CSS لتصميمها.
التصميم المتجاوب (Responsive) في CSS :
يعتبر التصميم المتجاوب والاستجابة في CSS جزءًا منها في عالم تصميم مواقع الويب، لذا يجب أن يكون الموقع أو الصفحة عامة لجميع هذه الأجهزة يعني أنه يجب أن يتناسب مع الجهاز الشخصي والجهاز اللوحي والجوال والأجهزة الأخرى. في حالة فتح الموقع من هذه الأجهزة ، فإن بعض الميزات والترتيبات الخاصة بالبعض ستغير العناصر الموجودة في الصفحة بحيث تناسبها ، ويتم ذلك عن طريق الاستعلام والاستجابة مثل ، ، .
بقلم: حمزة تيم.
التعليقات