لماذا يجب أن تتعلم البرمجة (قليلاً): مقدمة في HTML & CSS
نشرت: 2021-08-15لم يكن بدء متجر على الإنترنت أسهل من أي وقت مضى. بفضل منصات مثل Shopify ، يمكنك شراء سمة وتحميل منتجاتك وبيعها لعملائك في غضون ساعات! إن حاجز الدخول منخفض جدًا لدرجة أن أي شخص تقريبًا يمكنه القيام بذلك.
في حين أنه من السهل البدء ، إلا أنه من السهل اعتبار هذه البساطة أمرًا مفروغًا منه. في النهاية ، سترغب في إضافة شيء ما أو تغييره في متجرك وستدرك أن المظهر الخاص بك لا يدعمه. المطورون ليسوا رخيصين وآخر شيء تريد القيام به هو أن تدفع لشخص آخر مقابل شيء كان من الممكن أن تفعله بنفسك.
ماذا لو قلت لك أنك يمكن أن قضاء وقت مقدما قليلا لتعلم أساسيات كيفية مواقع العمل وكنت انقاذ بعض الوقت والمال على الطريق؟
بنهاية هذه المقالة ، يجب أن تعرف أساسيات HTML & CSS وأن تعرف ما يكفي لبدء الترقيع في متجرك الخاص.
لذا خذ بضع دقائق للاستعداد ودعنا نبدأ!
ما هو HTML & CSS؟
HTML تعني لغة ترميز النص التشعبي. إنها واحدة من أقدم وأهم اللغات الأساسية للويب. إنها مسؤولة عن هيكلة وتقديم المحتوى في هذه الصفحة بالذات!
CSS تعني أوراق الأنماط المتتالية. إنه مسؤول عن توفير أسلوب HTML وتنسيقه.
معًا ، هذه هي اللبنات الأساسية لأي موقع ويب. في هذه المقالة ، سوف أطلعك على الأساسيات وأوضح لك كيفية ترميز وتصميم صفحة الويب الأولى الخاصة بك.
نظرًا لأنني من أشد المعجبين ببيل موراي (الذي ليس كذلك) ، فسننشئ ضريحًا خاصًا بنا على الويب إلى بيل.
أولاً ، دعنا نتعمق أكثر في HTML و CSS للحصول على فهم جيد لقوتهم وقدرتهم.
تشريح الموقع
يمكننا بسهولة فهم كيفية عمل HTML و CSS معًا من خلال مقارنتها بالأجزاء الهيكلية للمنزل.
خلف جدران كل منزل يوجد إطار مسؤول عن هيكله. فكر في HTML كإطار منزل. إنها مسؤولة عن هيكل موقع الويب.
بالتمسك بتشبيه المنزل ، فإن CSS مسؤولة عن أشياء مثل ألوان الطلاء ، وأبعاد غرفة الطعام ، ولون الأرضيات الخشبية ، وشكل وأسلوب طاولة غرفة الطعام.
دعنا نلقي نظرة على بعض ترميز HTML الأساسي ونتصفحها سطراً بسطر.
دوكتايب
تساعد علامة <! DOCTYPE html> المتصفح على معرفة أن نوع المستند الذي نريد العمل به هو HTML.
رئيس
يوجد داخل علامة <head> المكان الذي نخزن فيه جميع البيانات الوصفية لمستندنا. تتضمن هذه البيانات أشياء مثل العنوان والأنماط (CSS) والوصف والمزيد. لا يتم عرض هذه البيانات للمستخدم النهائي ، ولكن المتصفحات تستخدمها لتحديد ما يجب أن يكون عنوان المستند أو الأنماط التي يجب استخدامها عند عرضها للمستخدم النهائي.
إعلان
قد تتضمن بعض العناصر الأخرى الموجودة في <head> لصفحة HTML معلومات المؤلف ، أو وصف الصفحة ، أو رابطًا لصورة مستخدمة للرمز المفضل (الرمز الصغير في علامة تبويب المتصفح).
الجسم
تحتوي العلامة <body> على جميع العلامات (الشفرة) الخاصة بموقع الويب. هذا هو الرمز الوحيد الذي سيراه المستخدم النهائي عندما يشاهد موقعنا.
الأدوات التي تحتاجها لبناء موقع على شبكة الإنترنت
لبدء كتابة HTML ، قد تعتقد أنك بحاجة إلى بعض البرامج الفاخرة باهظة الثمن ، لكنك لا تحتاج. في الواقع ، لديك بالفعل ما تحتاجه.
إذا كنت تستخدم جهاز كمبيوتر ، فافتح برنامج NotePad. إذا كنت تستخدم جهاز Apple Mac ، فافتح TextEdit.
الآن بعد أن أصبح لديك برنامج تحرير النص مفتوحًا ، تابع معي بينما نتوسع في ترميز HTML الأساسي أعلاه. انسخ (Ctrl + C في Windows / Cmd + C في Mac) والصق (Ctrl + p في Windows / Cmd + P على Mac) الكود التالي في محرر النصوص الخاص بك.
<! DOCTYPE html>
<html>
<head>
<title> عنوان صفحتك </ title>
</head>
<الجسم>
<h1> أهلاً بالعالم! </ h1>
<p> هذه هي فقرتنا الأولى. </ p>
</body>
</html>
احفظ هذا الملف على سطح المكتب وافتحه في متصفح الويب الخاص بك. يجب أن ترى الآن شفرتك مترجمة ، أو مقدمة بواسطة المتصفح ويجب أن تبدو كما يلي:
عنصر العنوان (<h1>)
تُستخدم العلامة <h1> عندما تريد لفت الانتباه إلى نص معين وتعريفه. في هذه الحالة ، نريد النص "Hello World!" لتكون أكبر وأكثر بروزًا من النص التالي.
خارج الصندوق ، يحتوي HTML على ستة علامات عناوين مختلفة يمكنك استخدامها: h1 و h2 و h3 و h4 و h5 و h6.
سيقل حجم الخط في كل "خطوة" تتخذها ؛ سيكون H1 هو الأكبر و H6 سيكون الأصغر. بشكل افتراضي ، سيكون لديهم بعض الهوامش (أو التباعد حولهم) لفصلهم عن العناصر الأخرى على الصفحة ولإعطاء المستخدم التسلسل الهرمي المرئي.
خذ دقيقة لتجربة تغيير العنوان و / أو العناوين و / أو علامات الفقرة. بمجرد إجراء تغيير ، احفظه ، ثم قم بتحديث المستعرض الخاص بك. تهانينا ، لقد قمت للتو بتحرير HTML لأول مرة!
تبدو مملة رغم ذلك ، أليس كذلك؟
دعنا نضيف بعض الأنماط إلى صفحتنا ونتعرف على المزيد حول القوة الحقيقية لـ CSS.
لإضافة الأنماط الخاصة بنا إلى عناصر HTML هذه ، نحتاج إلى إضافة علامة <style> داخل <head> من وثيقتنا.
هذه العلامة تلتف حول جميع CSS لدينا. فكر في ما يوجد داخل علامة <style> كدليل نمط المتصفح.
ضمن علامة <title> في سطر جديد ، أضف علامة نمط مثل هذا:
<title> عنوان صفحتك </ title>
إعلان
<ستايل>
</style>
داخل علامة النمط حيث يمكننا إدخال جميع تصريحاتنا. يتكون إعلان CSS من خاصية متبوعة بقيمة .
لنجعل لون <h1> مختلفًا عن باقي نصنا لأنه الأكثر أهمية ونريده أن يبرز. أضف ما يلي بين علامات <style> ، واحفظ ملفك ، وقم بتحديث المستعرض مرة أخرى.
<ستايل>
h1 {color: blue؛ }
</style>
نأمل الآن أن ترى شيئًا يشبه هذا! ستلاحظ أن برنامج "Hello World!" النص الآن باللون الأزرق. بسيط ، أليس كذلك؟
هناك ، لقد فعلت ذلك! لقد نجحت في تغيير نمط عنصر HTML باستخدام CSS. هل بدأنا نشعر بالمتعه؟
إضافة الصور إلى صفحتنا
هناك العديد من العناصر الأخرى التي يمكنك تضمينها في صفحتك ، ولكن من أبرزها على أي موقع ويب الصورة القديرة. يمكننا بسهولة إضافة صورة عن طريق تضمين ملف علامة مثل ذلك:
<img src = “https://www.fillmurray.com/400/500” >
ملاحظة: من أجل العرض التوضيحي ، أستخدم خدمة عنصر نائب للصورة تسمى www.fillmurray.com. يمكنك استخدام صورة على جهاز الكمبيوتر المحلي الخاص بك إذا كنت تفضل ذلك.
طريقة بديلة (نصيحة احترافية) لالتقاط صورة من موقع ويب: ابحث عن صورة على موقع ويب ترغب في استخدامه وانقر عليها بزر الماوس الأيمن. انقر فوق نسخ عنوان الصورة وسيكون عنوان URL الخاص بهذه الصورة في الحافظة الخاصة بك. اعتمادًا على متصفحك ، قد تختلف الصياغة قليلاً. أنا أستخدم Google Chrome. لا أوصي بالإفراط في استخدام الارتباط الساخن ولكن بالنسبة لهذا العرض التوضيحي ، فهي ليست مشكلة كبيرة.
انسخ والصق عنصر الصورة هذا وضعه تحت علامة الفقرة الخاصة بك بحيث تبدو كتلة التعليمات البرمجية الكاملة مثل لي:
<! DOCTYPE html>
<html>
<head>
<title> عنوان صفحتك </ title>
<ستايل>
h1 { color : blue؛}
</style>
</head>
<الجسم>
<h1> أهلاً بالعالم! </h1>
<p> هذه هي فقرتنا الأولى. </p>
<img src = “ https://www.fillmurray.com/400/500 ” alt = ”صورة بيل موراي” >
</body>
</html>
احفظ ملفك وأعد تحميل متصفحك وسترى الآن شيئًا كهذا:
إذا كنت منتبهًا ، فقد لاحظت سمة أخرى على علامة <img> ، alt = "صورة بيل موراي" . نظرًا لأن المتصفح يفك الشفرة ولا يمكنه رؤية الإخراج المعروض مثلك وأنا ، فإنه يحتاج إلى طريقة ما لمعرفة سياق ما يتم عرضه.
إعلان
من خلال إضافة علامة ALT (نص بديل) إلى صورتنا ، يمكننا إخبار المتصفح بموضوع صورتنا.
يعد هذا أيضًا مهمًا جدًا لـ SEO (تحسين محرك البحث) والأهم من ذلك ، تتم قراءة هذا النص بصوت عالٍ للمستخدمين المكفوفين باستخدام قارئ الشاشة.
لكن ماذا عن الروابط؟
لن تكتمل أي مقدمة إلى HTML / CSS بدون تغطية الروابط! عندما تقوم بإنشاء موقع ويب ، ستحتاج إلى القدرة على الارتباط ، سواء كان ذلك بمصادر خارجية أو بصفحات داخلية أخرى داخل موقع الويب الخاص بك.
دعنا نتحدث عن عنصر المرساة. السحر الحقيقي لعنصر الارتساء هو في الواقع خاصية href. دعنا نوضح بنية علامة الارتساء عن طريق إضافة رابط إلى صفحة بيل في ويكيبيديا.
<a href= "www.google.com"> قراءة دخوله ويكيبيديا </A>
يخبر هذا الرمز المتصفح أنه عندما ينقر المستخدم على النص: "اقرأ إدخال Wikipedia الخاص به" ، اصطحبه إلى www.google.com.
دعنا نضيف هذا الكود مباشرة تحت عنصر العنوان الخاص بنا بحيث تبدو كتلة الكود لدينا كما يلي:
<! DOCTYPE html>
<html>
<head>
<title> عنوان صفحتك </ title>
<ستايل>
h1 { color : blue؛}
</style>
</head>
<الجسم>
<h1> أهلاً بالعالم! </h1>
<a href= "https://en.wikipedia.org/wiki/Bill_Murray"> قراءة دخوله ويكيبيديا </A>
<p> هذه هي فقرتنا الأولى. </p>
<img src = “https://www.fillmurray.com/400/500” alt = "صورة بيل موراي" >
</body>
</html>
اضغط على حفظ وقم بتحديث المتصفح ونأمل أن يبدو متصفحك مثل لي.
أخذها عبر خط النهاية
تقدمت ووجهت إجلالتي الصغيرة إلى بيل موراي وإليكم النتيجة النهائية. سوف أتصفح بعض الأنماط المضافة أدناه.
Drumroll من فضلك ...
الآن ، يمكنك أن ترى أن هذا ليس شيئًا تكتب عنه في المنزل ، ولكن هذا حسب التصميم. هذا مجرد غيض من فيض عندما يتعلق الأمر بكيفية ظهور هذه الصفحة أو تصميمها. أردت أن أبقي الأمور بسيطة حتى تفهم ما تفعله كل طريقة من أساليب التصميم أدناه.
إعلان
دعنا ننتقل إلى CSS الصغير الذي كان عليّ إضافته للوصول بنا إلى هذا الحد.
تصفيف الجسم:
أولاً ، أضفت إلى نص الصفحة:
الجسم {
لون الخلفية: #eee ؛
عائلة الخطوط: Helvetica ، Arial ، sans-serif ؛
محاذاة النص: مركز ؛
الهامش: 25 بكسل ؛
}
لون الخلفية
قمت بتعيين لون خلفية الصفحة على اللون الرمادي الفاتح جدًا باستخدام قيمة اللون السداسي العشري #eee. يمكنك معرفة المزيد عن هؤلاء والاطلاع على بعض الأمثلة هنا في MOZ.
خط العائلة
أردت تغيير الخط من الافتراضي الذي تستخدمه متصفحات Times New Roman. لهذا ، اخترت Helvetica كخياري الأول (إذا كان المستخدم لديه هذا الخط مثبتًا على جهاز الكمبيوتر الخاص به) ، و Arial كخيار ثانٍ (إذا لم يكن لدى المستخدم Helvetica ، فسيتم تعيينه افتراضيًا على Arial) ، وكنسخة احتياطية نهائية ، وهو خط أساسي بلا رقيق.
محاذاة النص
اخترت محاذاة كل النص في صفحتي في الوسط. هناك خياران آخران لقيم مثل اليسار واليمين ، لكنني اعتقدت أنه من الأفضل تركيزهما على هذا.
حافة
لقد أضفت هامشًا صغيرًا إلى نص المستند لمنحه مساحة للتنفس.
تصميم صورتنا:
أخيرًا ، صممت وجه بيل الجميل ، أعني عنصر الصورة
img {
الحدود: 10 بكسل صلب # 41bcd6 ؛
مربع الظل: 2px 5px 5px # 999 ؛
الحشو: 10 بكسل ؛
نصف قطر الحدود: 5 بكسل ؛
}
لم أفعل الكثير ولكني أردت إعطاء صورة بيل بعض التواجد على الصفحة.
حدود
أضفت حدًا بحجم 10 بكسل حول الصورة. # 41bcd6 هي قيمة لونية سداسية عشرية أخرى تقدم لونًا أزرق فاتحًا (جزء من سمة اللون اللاشعورية لستيف زيسو).
مربع الظل
كنت أرغب في إعطاء الصورة إحساسًا ثلاثي الأبعاد ، لذا أضفت ظلًا خفيفًا إليها. تقبل خاصية box-shadow قيم البكسل واللون التي تحدد طول الظل وتمويهه ولونه. لمعرفة المزيد حول إعلان box-shadow ، يقوم Moz بتقسيمه جيدًا من أجلك هنا.
حشوة
لجعل الصورة تبدو أشبه بإطار صورة ، أضفت 10 بكسل من الحشو بينها وبين الحدود.
نصف قطر الحد
فقط لتوضيح إحدى القدرات الأكثر برودة لـ CSS ، قمت بجعل زوايا الصورة مستديرة باستخدام نصف قطر الحدود. عندما بدأت في إنشاء مواقع الويب ، لم يكن هناك شيء مثل ذلك ، وكان إنتاج زوايا مستديرة على الويب يمثل تحديًا كبيرًا في الواقع. لقد قطعنا شوطًا طويلاً منذ ذلك الحين ، والآن أصبح الأمر بسيطًا إلى حد ما. إنه يقبل قيمة مثل px أو ems ، وهنا اخترت فقط تقريبها بما يكفي لملاحظة ذلك عن طريق تعيين القيمة على 5 بكسل.
استنتاج
خلال هذه المقالة ، عملنا معًا لتعلم التشريح الأساسي لموقع الويب. تعلمنا أيضًا بعض HTML و CSS البسيطة التي تحولت في النهاية إلى تكريم مذهل من صفحة واحدة لواحد من أعظم الممثلين على الإطلاق في جيل
بكل جدية ، أتمنى أن تكون قادرًا على المتابعة معي وإنشاء موقع الويب الأساسي الأول الخاص بك. الآن ، إذا لم يكن بيل موراي هو الممثل المفضل لديك ، فأنا أتحداك أن تقوم بتعديل هذا الكود لعرض الممثل أو الفرقة الموسيقية المفضلة لديك أو أي شيء تريده.
إذا كنت بحاجة إلى الرجوع إلى هذا الرمز في أي وقت ، فارجع واقرأ هذه المقالة ، أو كوسيلة للراحة ، قمت بوضعه على CodePen هنا.
هناك الكثير من الأشياء الممتعة التي يمكنك القيام بها باستخدام HTML + CSS فقط . إليك بعض الموارد الرائعة لتوسيع نطاق تعلمك:
إعلان
- أكاديمية Code: 100٪ مقدمة مجانية لدورة HTML / CSS
- CSS Zen Garden: المثال الأول على الويب الذي "نقر" حقًا بالنسبة لي ، لمساعدتي على إدراك أنه يمكن أن يكون لديك 100 موقع ويب مختلف المظهر تستخدم جميعها نفس ترميز HTML
- الرسوم المتحركة CSS
- الموناليزا باستخدام CSS فقط
- كلب هسكي متحرك باستخدام CSS فقط
- CodePen: CodePen هي أداة عبر الإنترنت للاختبار المباشر وعرض كود HTML و CSS وجافا سكريبت
لقد خدشنا السطح فقط في هذه المقالة بجدية ، لذا أشجعك على قراءة المزيد ، وأخذ بعض الدورات التدريبية عبر الإنترنت ، واستمر في دفع معرفتك!
