مثال على إنشاء صفحة html في المفكرة. إنشاء صفحة html في المفكرة: تفسيرات للدمى وصف علامات html من المثال

22.10.2020

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

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

فقط تذكر إعادة ترميزه إلى UTF-8 عند إنشاء مستند جديد في Notepad ++.

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

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

في المستند ، قمت بتمييز الأماكن التي سيتعين عليك فيها عمل هذه القوائم ، ولكن بالطبع ، فقط في حالة حدوث ذلك ، سأوضح كيف يجب أن تبدو.

نحن نحفظ ونرى ما حصلنا عليه. يبدو أن كل شيء كما ينبغي. بخير. لقد أحرزنا بالفعل تقدمًا كبيرًا.

إدراج الجدول

افتح الصفحة في المفكرة table.html، واسحب كل الرؤوس والنصوص من مستند Word الذي يحمل نفس الاسم ، ثم رتب كل العلامات والسمات حسب الحاجة.

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

نحن نحفظ ونرى ما حصلنا عليه. كل شيء على ما يرام!

صفحة المؤلف

لقد فعلنا كل شيء تقريبًا. علينا فقط إنهاء الصفحة عن المؤلف. اذهب إلى الصفحة obo-mne.htmlوالصق من مستند Word الذي يحمل نفس الاسم كل النص مع جميع العناوين ووضع العلامات.

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

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

حسنًا ، يبدو أن هذا كل شيء. في المهمة ، تم الانتهاء من كل شيء والآن لديك موقع html بسيط ، تم إنشاؤه في Notepad ++ في 10-15 دقيقة حرفيًا. على الرغم من حقيقة أن هذا هو أبسط إطار عمل html بدون خصائص CSS وغيرها من الحيل ، فقد اتضح أنه لا يزال هناك أشخاص يبيعون دورات مثل "كيفية إنشاء موقع ويب" بمعلومات مثل هذه. وقد أخذوا نقودًا مقابل هذا - و 500 روبل ، وحتى 2000. لقد صدمت للتو!)

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

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

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

مع أطيب التحيات ، ديمتري كوستين.

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

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

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

قم بتنزيل قوالب مواقع ويب HTML المجانية وأنشئ مشاريعك في لمح البصر.

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

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

أولاً ، دعنا نقرر كيف سيبدو بشكل تقريبي.

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

هل فهمت الفكرة؟ هيا بنا نبدأ.

قم بتشغيل برنامج Notepad واكتب مجموعة أدوات إنشاء الصفحات البسيطة الخاصة بنا.

الآن دعونا نكتب بين العلامات اسم صفحتنا ، على سبيل المثال ، مثل هذا

<span>موقع عن جني الأموال على الإنترنت. معلومات وروابط لمواقع حول كسب المال على الإنترنت</span>

بعد ذلك ، دعنا نضع العلامات

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

، بمعنى آخر. مثله

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

في الخلية 1 سنضع رأس الموقع ، وفي الخلية 2 ستكون قائمة الموقع ، وفي الخلية 3 سيكون هناك محتوى الصفحة.

لعمل مثل هذا الجدول ، اكتب الكود التالي

أولئك. سيكون كود صفحتنا كما يلي: