جدول المحتويات:
- الخطوة 1: استخدام المفكرة
- الخطوة 2: إضافة شجرة مستند HTML الأساسية
- الخطوة 3: الحفظ كصفحة html
- الخطوة 4: إضافة عنوان إلى صفحة الويب الخاصة بك
- الخطوة الخامسة: إضافة محتوى إلى صفحة الويب الخاصة بك
- اهلا بك في صفحة الانترنت الخاصة بي
- الخطوة السادسة: عرض التغييرات التي أجريناها حتى الآن
- الخطوة 7: إضافة علامة فقرة
- اهلا بك في صفحة الانترنت الخاصة بي
- الخطوة 8: امنحها بعض اللون
- اهلا بك في صفحة الانترنت الخاصة بي
- الخطوة 9: إضافة صورة
- اهلا بك في صفحة الانترنت الخاصة بي
- الخطوة العاشرة: عرض المنتج النهائي
2025 مؤلف: John Day | [email protected]. آخر تعديل: 2025-01-23 12:54
سنقوم اليوم بإنشاء صفحة ويب بسيطة للغاية من الصفر. سنتحدث عن عناصر HTML ، وتصميم صفحة الويب الخاصة بك (الألوان ، والخطوط ، والمحاذاة ، وما إلى ذلك) ، وأخيرًا كيفية إدراج صورة في صفحة الويب الخاصة بك!
بنهاية هذا التدريب ، ستكون لديك المهارات الأساسية لإنشاء صفحة ويب من البداية ، واكتشاف أن الترميز ليس بالأمر الصعب كما يبدو!
الخطوة 1: استخدام المفكرة
سنستخدم برنامج Notepad على windows لإنشاء صفحة الويب الأولى الخاصة بنا. على الرغم من أن أي محرر نصوص سيفي بالغرض ، إلا أن المفكرة تأتي مثبتة مسبقًا على أجهزة Windows ، لذا فهي نقطة انطلاق رائعة.
لفتح برنامج "المفكرة" ، انتقل إلى شريط البحث في الزاوية اليسرى السفلية من شاشتك واكتب "المفكرة". ثم حدد تطبيق "المفكرة" الذي يظهر في نتائج البحث. يجب أن تفتح نافذة جديدة.
الخطوة 2: إضافة شجرة مستند HTML الأساسية
يجب أن تتبع جميع صفحات الويب بنية هيكلية قياسية حتى يتمكن متصفح الويب الخاص بك (Chrome و Firefox و Edge و Internet Explorer و Safari …) من معالجة صفحة الويب الخاصة بك وعرضها.
وهذا ما يسمى شجرة وثيقة html. في برنامج "المفكرة" ، اكتب HTML "عناصر" أو "علامات" كما هو معروض في لقطة الشاشة. لا تتردد في النسخ واللصق أيضًا:
الخطوة 3: الحفظ كصفحة html
الآن بعد أن أصبح لدينا بنية html الأساسية الخاصة بنا في Notepad ، دعنا نحفظها حتى لا نفقد أي عمل ، وحتى نتمكن من رؤية التغييرات التي أجريناها أثناء تقدمنا في Instructable.
- حدد "ملف"> "حفظ باسم …" (لقطة شاشة 1)
- قم بتغيير نوع الملف إلى "كل الملفات" (لقطة شاشة 2)
- أعط الملف الخاص بك اسما من اختيارك. تأكد من ملاحظة مكان حفظ المستند على جهاز الكمبيوتر الخاص بك حتى تتمكن من فتحه لاحقًا. ملاحظة: أهم جزء في حفظ هذا الملف هو إلحاق ".html" بنهاية اسم الملف. سيسمح هذا لجهاز الكمبيوتر الخاص بك بالتعرف عليها كصفحة ويب. لذلك إذا كنت تريد تسمية ملفك "my_webpage" ، فتأكد من إضافة.html في نهاية ذلك ، على سبيل المثال "my_webpage.html"
الخطوة 4: إضافة عنوان إلى صفحة الويب الخاصة بك
لذلك لدينا بنية html الأساسية اللازمة لمتصفحات الويب لتفسير صفحة الويب الخاصة بنا وعرضها ، ولكن ليس لدينا أي محتوى. دعونا نغير ذلك!
أول شيء يجب أن نفعله هو إعطاء عنوان لصفحة الويب الخاصة بنا. معظم صفحات الويب لها عنوان. هذا ما يتم عرضه على علامة التبويب في متصفح الويب الخاص بك (انظر لقطة الشاشة). سأقوم بإعطاء صفحة الويب الخاصة بي العنوان "موقع تايلور على الويب". للقيام بذلك ، نحتاج إلى إضافة عنصر "عنوان".
موقع تايلور
في هذه المرحلة ستلاحظ أن كل علامة لها علامة "فتح" وعلامة "إغلاق". مثل
و.
هذا هو تمييز أين يبدأ العنوان وأين ينتهي. تتبع جميع علامات html تقريبًا هذا ، ولكن هناك بعض الاستثناءات.
الخطوة الخامسة: إضافة محتوى إلى صفحة الويب الخاصة بك
حسنًا ، لدينا عنوان لصفحة الويب الخاصة بنا ، لكن ما زلنا لا نملك أي محتوى فعلي لها. دعونا نضيف بعض الذوق!
لقد أضفنا عنوانًا إلى صفحة الويب الخاصة بنا باستخدام عنصر "العنوان". دعنا نمنح صفحة الويب الخاصة بنا رأسًا كبيرًا وجذابًا للانتباه باستخدام عنصر "h1" وهو عنصر عنوان.
موقع تايلور
اهلا بك في صفحة الانترنت الخاصة بي
الخطوة السادسة: عرض التغييرات التي أجريناها حتى الآن
لدينا عنوان ، لدينا بعض المحتوى ، دعنا نتحقق من صفحة الويب الخاصة بنا لمعرفة كيفية ظهورها حتى الآن.
- احفظ ملفك في المفكرة
- انتقل إلى المكان الذي حفظت فيه ملفك وانقر فوقه نقرًا مزدوجًا. يجب أن يفتح تلقائيًا في متصفح الويب الافتراضي الخاص بك. تبدو جيدة!
الخطوة 7: إضافة علامة فقرة
لدينا عنوان ، عنوان ، الآن دعنا نضيف فقرة ببعض النص الإضافي. اسم العنصر للفقرة هو "p". يمكنك أن ترى أنه يستخدم أدناه:
موقع تايلور
اهلا بك في صفحة الانترنت الخاصة بي
اليوم سوف نتعلم كيفية إنشاء صفحة الويب البسيطة هذه!
ملاحظة: يمكنك عرض التغييرات في أي وقت تريده عن طريق حفظ المفكرة وفتح الملف.
الخطوة 8: امنحها بعض اللون
لدينا صفحة الويب الخاصة بنا تعمل على طول الطريق ، لكنها بسيطة جدًا. دعونا نعطي علامة الفقرة لدينا بعض اللون!
يمكننا تلوين عناصر مختلفة عن طريق إضافة سمة "style" إلى علامة "p" كما هو مفصل أدناه:
موقع تايلور
اهلا بك في صفحة الانترنت الخاصة بي
اليوم سوف نتعلم كيفية إنشاء صفحة الويب البسيطة هذه!
الخطوة 9: إضافة صورة
ما هو موقع بدون صور؟ دعونا نضيف صورة إلى موقعنا!
الخطوة الأولى هي العثور على الصورة التي تريدها. لقد استخدمت صور google للبحث عن كلب مسترد ذهبي. اسحب الصورة لأعلى وتأكد من أن عنوان url ينتهي بـ-j.webp
بمجرد اختيارك لصورتك ، نحتاج إلى إضافتها إلى صفحة html باستخدام علامة "img". صورتي هي:
أضفه إلى صفحتك باستخدام علامة "img" بسمة "src":
موقع تايلور
اهلا بك في صفحة الانترنت الخاصة بي
اليوم سوف نتعلم كيفية إنشاء صفحة الويب البسيطة هذه!
الخطوة العاشرة: عرض المنتج النهائي
احفظ ملف المفكرة وافتح المنتج النهائي. يجب أن ترى صفحة الويب الخاصة بك!
موصى به:
كيفية إنشاء صفحة ويب بسيطة باستخدام الأقواس للمبتدئين: 14 خطوة
كيفية إنشاء صفحة ويب بسيطة باستخدام الأقواس للمبتدئين: مقدمة توفر الإرشادات التالية إرشادات خطوة بخطوة لإنشاء صفحة ويب باستخدام الأقواس. Brackets هو محرر التعليمات البرمجية المصدر مع التركيز بشكل أساسي على تطوير الويب. تم إنشاؤه بواسطة Adobe Systems ، وهو برنامج مجاني ومفتوح المصدر مرخص
صفحة ويب Node.js الجزء 2: 7 خطوات
صفحة ويب Node.js الجزء 2: مرحبًا بكم في الجزء 2 !! هذا هو الجزء الثاني من البرنامج التعليمي لتطبيق موقع Node.js الخاص بي. لقد قسمت هذا البرنامج التعليمي إلى جزأين لأنه يفصل بين أولئك الذين يحتاجون فقط إلى مقدمة موجزة وأولئك الذين يريدون درسًا تعليميًا كاملاً على صفحة ويب
وضع زر نسخ إلى الحافظة على صفحة ويب: 5 خطوات (بالصور)
وضع زر نسخ إلى الحافظة على صفحة ويب: قد يبدو هذا بسيطًا ، وقد أبدو سخيفًا لوضعه في Instructables ، لكن في الواقع ، ليس الأمر بهذه السهولة. هناك CSS ، و Jquery ، و HTML ، وبعض جافا سكريبت رائع ، و حسنًا ، كما تعلم
وحدة WiFi رقم 2 ESP8266-NODEMCU بقيمة 3 دولارات - دبابيس لاسلكية تتحكم من خلال صفحة ويب: 9 خطوات (مع صور)
ESP8266-NODEMCU وحدة WiFi رقم 2 بقيمة 3 دولارات - دبابيس لاسلكية تتحكم من خلال صفحة ويب: وصل عالم جديد من هذه الحوسبة الدقيقة وهذا الشيء هو ESP8266 NODEMCU. هذا هو الجزء الأول الذي يوضح كيف يمكنك تثبيت بيئة esp8266 في بيئة arduino IDE من خلال فيديو بدء التشغيل وكأجزاء في
صفحة ويب لعرض الصور المجسمة الأمثل: 7 خطوات
صفحة ويب لمشاهدة صور StereoGraphic الأمثل: لا ترهق عينيك لعرض صور StereoGraphic. اضبط الصور