صفحة ويب Bare Bones: 10 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:40

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

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

الخطوة 1: استخدام المفكرة

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

لفتح برنامج "المفكرة" ، انتقل إلى شريط البحث في الزاوية اليسرى السفلية من شاشتك واكتب "المفكرة". ثم حدد تطبيق "المفكرة" الذي يظهر في نتائج البحث. يجب أن تفتح نافذة جديدة.

الخطوة 2: إضافة شجرة مستند HTML الأساسية

يجب أن تتبع جميع صفحات الويب بنية هيكلية قياسية حتى يتمكن متصفح الويب الخاص بك (Chrome و Firefox و Edge و Internet Explorer و Safari …) من معالجة صفحة الويب الخاصة بك وعرضها.

وهذا ما يسمى شجرة وثيقة html. في برنامج "المفكرة" ، اكتب HTML "عناصر" أو "علامات" كما هو معروض في لقطة الشاشة. لا تتردد في النسخ واللصق أيضًا:

الخطوة 3: الحفظ كصفحة html

الآن بعد أن أصبح لدينا بنية html الأساسية الخاصة بنا في Notepad ، دعنا نحفظها حتى لا نفقد أي عمل ، وحتى نتمكن من رؤية التغييرات التي أجريناها أثناء تقدمنا في Instructable.

1. حدد "ملف"> "حفظ باسم …" (لقطة شاشة 1)
2. قم بتغيير نوع الملف إلى "كل الملفات" (لقطة شاشة 2)
3. أعط الملف الخاص بك اسما من اختيارك. تأكد من ملاحظة مكان حفظ المستند على جهاز الكمبيوتر الخاص بك حتى تتمكن من فتحه لاحقًا. ملاحظة: أهم جزء في حفظ هذا الملف هو إلحاق ".html" بنهاية اسم الملف. سيسمح هذا لجهاز الكمبيوتر الخاص بك بالتعرف عليها كصفحة ويب. لذلك إذا كنت تريد تسمية ملفك "my_webpage" ، فتأكد من إضافة.html في نهاية ذلك ، على سبيل المثال "my_webpage.html"

الخطوة 4: إضافة عنوان إلى صفحة الويب الخاصة بك

لذلك لدينا بنية html الأساسية اللازمة لمتصفحات الويب لتفسير صفحة الويب الخاصة بنا وعرضها ، ولكن ليس لدينا أي محتوى. دعونا نغير ذلك!

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

موقع تايلور

في هذه المرحلة ستلاحظ أن كل علامة لها علامة "فتح" وعلامة "إغلاق". مثل

و.

هذا هو تمييز أين يبدأ العنوان وأين ينتهي. تتبع جميع علامات html تقريبًا هذا ، ولكن هناك بعض الاستثناءات.

الخطوة الخامسة: إضافة محتوى إلى صفحة الويب الخاصة بك

حسنًا ، لدينا عنوان لصفحة الويب الخاصة بنا ، لكن ما زلنا لا نملك أي محتوى فعلي لها. دعونا نضيف بعض الذوق!

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

موقع تايلور

اهلا بك في صفحة الانترنت الخاصة بي

الخطوة السادسة: عرض التغييرات التي أجريناها حتى الآن

لدينا عنوان ، لدينا بعض المحتوى ، دعنا نتحقق من صفحة الويب الخاصة بنا لمعرفة كيفية ظهورها حتى الآن.

1. احفظ ملفك في المفكرة
2. انتقل إلى المكان الذي حفظت فيه ملفك وانقر فوقه نقرًا مزدوجًا. يجب أن يفتح تلقائيًا في متصفح الويب الافتراضي الخاص بك. تبدو جيدة!

الخطوة 7: إضافة علامة فقرة

لدينا عنوان ، عنوان ، الآن دعنا نضيف فقرة ببعض النص الإضافي. اسم العنصر للفقرة هو "p". يمكنك أن ترى أنه يستخدم أدناه:

موقع تايلور

اهلا بك في صفحة الانترنت الخاصة بي

اليوم سوف نتعلم كيفية إنشاء صفحة الويب البسيطة هذه!

ملاحظة: يمكنك عرض التغييرات في أي وقت تريده عن طريق حفظ المفكرة وفتح الملف.

الخطوة 8: امنحها بعض اللون

لدينا صفحة الويب الخاصة بنا تعمل على طول الطريق ، لكنها بسيطة جدًا. دعونا نعطي علامة الفقرة لدينا بعض اللون!

يمكننا تلوين عناصر مختلفة عن طريق إضافة سمة "style" إلى علامة "p" كما هو مفصل أدناه:

موقع تايلور

اهلا بك في صفحة الانترنت الخاصة بي

اليوم سوف نتعلم كيفية إنشاء صفحة الويب البسيطة هذه!

الخطوة 9: إضافة صورة

ما هو موقع بدون صور؟ دعونا نضيف صورة إلى موقعنا!

الخطوة الأولى هي العثور على الصورة التي تريدها. لقد استخدمت صور google للبحث عن كلب مسترد ذهبي. اسحب الصورة لأعلى وتأكد من أن عنوان url ينتهي بـ-j.webp

بمجرد اختيارك لصورتك ، نحتاج إلى إضافتها إلى صفحة html باستخدام علامة "img". صورتي هي:

أضفه إلى صفحتك باستخدام علامة "img" بسمة "src":

موقع تايلور

اهلا بك في صفحة الانترنت الخاصة بي

اليوم سوف نتعلم كيفية إنشاء صفحة الويب البسيطة هذه!

الخطوة العاشرة: عرض المنتج النهائي

احفظ ملف المفكرة وافتح المنتج النهائي. يجب أن ترى صفحة الويب الخاصة بك!