30 صفحة ويب بسيطة بشكل لا يصدق

بعض الصفحات الأكثر شهرة مليئة بالمعلومات ، لكنني أفضل العكس: الصفحات البسيطة.

من الواضح أن أهم ما يميز هذه المجموعة هو Google بصفحتها الرئيسية المبسطة منذ أن بدأت رحلتها ، لكن من الواضح أنها ليست الوحيدة على الإنترنت التي تلتزم بتبسيط الأمور.

أمثلة بسيطة لصفحة ويب HTML

كين ريتشموند

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

ارتباط بالويب: كينريش موند

أليس دروغارد

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

ارتباط بالويب: أليس دروغارد

جوناثان أوغدن

أوغدن استمر في اللعب بمدى بساطة اسمك كشعار، الشبكات الاجتماعية الموجودة أدناه دون جذب الانتباه ويعمل تصميمها حتى نتمكن من استعراضها بسرعة. في صفحة واحدة يظهر كل ما يهم.

ارتباط بالويب: جوناثان أوغدن

عصفور

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

ارتباط بالويب: عصفور

تصميم مختلف

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

ارتباط بالويب: تصميم مختلف

بريزك

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

ارتباط بالويب: بريزك

تصميم حديقة عمودية

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

ارتباط بالويب: تصميم حديقة عمودية

247Grad

247Grad اللعب مع أحادية اللون وصورة الخلفية شبه مظلمة تمامًا. يتم تكبير خط الرأس ، الأصغر من النص والعنوان ، لإنشاء تباين كبير في التصميم العام.

ارتباط بالويب: 247Grad

يتمتع هذا

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

ارتباط بالويب: يتمتع هذا

أليسون هو

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

ارتباط بالويب: أليسون هو

بيكسلوت

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

ارتباط بالويب: بيكسلوت

ليونيل سكولتس

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

ارتباط بالويب: ليونيل سكولتس

طيور النورس الأنيقة

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

ارتباط بالويب: طيور النورس الأنيقة

المجال الحيوي

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

ارتباط بالويب: المجال الحيوي

بينك بوينت

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

ارتباط بالويب: بينك بوينت

IWC

صورة رائعة مع خط جيد الاختيار وعنصر "بطل" يمكنك أن تعطيه لهذه الويب. باستخدام شريط التمرير ، يُظهر جزءًا من العمل ليكون بسيطًا جدًا في مفهومه.

ارتباط بالويب: IWC

قطعة قطعة

يقودنا الرسم التوضيحي الرقمي إلى Chop Chop with تلك الصورة التي تلتهم كل الوجود البصري لها. يعطي اللون الأزرق في الرأس وجهة نظره لإنشاء قيم لونية تتناغم مع الصورة الكاملة التي تعرضها الويب.

ارتباط بالويب: قطعة قطعة

7 الصنوبر

7 يلعب الصنوبر باللون الأخضر ليكون بطل الرواية العظيم في لوحة المنزل. الباقي يؤلفها صورة بها الكثير من اللون الأخضر ورأس بسيط التي تريد ألا يلاحظها أحد من قبل الشعار.

ارتباط بالويب: 7 الصنوبر

المجموع

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

ارتباط بالويب: المجموع

صندوق القبعة

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

ارتباط بالويب: صندوق القبعة

كارا لايت

يذهب كارا إلى البساطة والبساطة بحضورها الطبيعي والجميل في صورتك. الباقي هو نص يأتي مع العناصر الرئيسية للرأس وزر الهامبرغر لفتحه.

ارتباط بالويب: كارا لايت

تسويق الاستوديو الجوهري

Es من أبسط ويب لكن هذا يوضح لنا معنى إنشاء مدونة. الأحمر والأسود هما نجمان موقع "مدونة".

ارتباط بالويب: تسويق الاستوديو الجوهري

كيفية إنشاء موقع ويب بسيط بتنسيق HTML

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

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

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

• وثائق: جميع المستندات التي سننشئها يجب أن تتم باستخدام ملف . نفتح مع ويغلق دائمًا بـ
• الجسد أو الجسم: الجزء المرئي من المستند بين ص
• الرؤوس: هم معروفون بـ H1، H2، H3 ... نبدأ بـ a ونختتم بـ . سيظهر النص الموجود بالداخل كرأس ، واعتمادًا على ترقيمه ، فسيتم ذلك بحجم أصغر أو أكبر.
• الفقرات: الفقرة داخل أ ويختتم بـ
• وصلات: أوضح مثال هوcreativosonline.org/»> رابط ل Creativos Online
• صور: نحددها بالتسمية . سيكون على سبيل المثال . نستدعي الصورة بين علامتي الاقتباس ونستخدم بديلًا للنص البديل وهو أمر ضروري لتحسين محركات البحث.
• قوائم: نحدد القوائم بـ من أجل الفوضى ومع لأنيق. يتم استخدام عناصر القائمة مع . تذكر دائمًا إغلاقها بالشريط.

مع هذه العناصر سيكون لدينا أساس إنشاء موقع ويب بسيط كما سترى في الكمية الجيدة منها التي سنعلمك إياها في القسم التالي. لنفترض أن البنية الدلالية بأهم عناصرها تبدو كما يلي:

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

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

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

هذا هو مثال واضح على كود HTML بأهم العناصر:

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'/>
    <title>HTML Semántico</title>
  </head>
  <body>

    <h1>Crear web es fácil!</h1>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Acerca de</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Iniciar sesión</a></li>
    </ul>

  </body>
</html>

بهذه السطور من كود HTML سيكون لدينا أنشأ أولاً عنوان الصفحة في الرأس باستخدام، في هذه الحالة "HTML الدلالية" ، سنغلق العنوان بـ ، مع الرأس وسنفسح المجال لفتح الجسم .

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

وأخيرا، افتح مستندًا باستخدام لإغلاقه في نهاية الكود بأكمله بشرطة مائلة. بعد فتح المستند ، يتم دائمًا استخدام الإشارة إلى اللغة ، والتي تكون في هذه الحالة الإسبانية بالحرف "es" و "a" .

من المهم أن تنظر عن كثب إلى الكود وفي أي وقت قمت بفتح وظيفة أغلقها بالشريط المقابلة.

قليلا من CSS

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

من ناحية ، إذا كان لدينا الاستخدام الدلالي لـ HTML لما هو الرأس أو الرأس ، والجسم أو النص بمقاله أو صورته وتذييله ، في CSS ، سنستخدم وظيفة «Div» لتحديدها على كل من هذه المساحات من أجل تطبيق التغييرات اللازمة في التصميم لاحقًا.

شيء بسيط مثل:

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

Un مثال بسيط على كود CSS:

h1 {
اللون: أبيض;
مواءمة النصوص: مركز;
}

نسمي H1 والنص نضعها باللون الأبيض مع اللون: أبيض ؛ وسنقوم بمحاذاة المركز مع "محاذاة النص". قم دائمًا بإغلاق الأقواس المربعة بعد الفتح لاستدعاء H1.

صورة رأس جريج راكوزي