30 דפי אינטרנט פשוטים להפליא

אינטרנט

חלק מהדפים המפורסמים עמוסים מאוד במידע, אבל אני מעדיף את ההפך: הפשוטים.

ברור שהמערך הגדול של הקבוצה הזו הוא גוגל עם דף הבית המינימליסטי שלה מאז שהחלה את דרכה, אך ברור שזה לא היחיד באינטרנט שמחויב לשמור על דברים פשוטים.

דוגמאות פשוטות לדפי אינטרנט ב- HTML

קין ריצ'מונד

קין ריצ'מונד

קין ריצ'מונד גורם לנו לראות את הפשטות של משחק עם מעט אלמנטים, אבל מאוד טובה לתת תחושה נהדרת למינימליזם. הלוגו שלו בפינה השמאלית העליונה, הטוויטר ואייקוני אנשי הקשר בצד ימין ובמרכז, עם טיפוגרפיה מדהימה, למה שהוא מוקדש.

קישור לאינטרנט: קנריך מונד

אליס דרוגארד

אליס דרוגארד

אליס דרוגארד שמור על זה פשוט גם כשהלוגו שלך ממוקם במרכז, ארבע כרטיסיות למעבר בין הדפים הראשיים באתר האינטרנט שלך וסדרת תמונות הממוקמות כראוי כך שבמבט אחד נדע מה אתה עושה ומה אתה עושה.

קישור לאינטרנט: אליס דרוגארד

ג'ונתן אוגדן

ג'ונתן אוגדן

אוגדן המשך לשחק עם כמה ששמך פשוט כלוגו, הרשתות החברתיות הממוקמות ממש למטה מבלי למשוך תשומת לב והעיצוב שלהן עובד כך שנוכל לעבור דרכן במהירות. בעמוד אחד זה מציג את כל מה שחשוב.

קישור לאינטרנט: ג'ונתן אוגדן

בַּזבּוּז

בַּזבּוּז

פינץ 'כבר הולך למקומות אחרים לשחק בטיפוגרפיה וכאלה צבעים המציינים אלגנטיות וחוכמה של מה שהיא עושה. עם רק כמה אלמנטים, הוא משאיר את כל המקצועיות שלו לעין. זה גם מבהיר אילו דפים קישרו אליך.

קישור לאינטרנט: בַּזבּוּז

עיצוב אחר

עיצוב אחר

האתר הזה לשחק אחרת. השתמש בטפט עם כותרת שממנה נוכל לעבור לדפים הראשיים, לטלפון שלך ולקישורים לרשתות החברתיות שלך.

קישור לאינטרנט: עיצוב אחר

בריזק

בריזק

קאי ממחיש אותנו עם דמותו שלו עם משולש מופשט ופלטת צבעים מתאימה לתת קרבה. הוא גם מציע חלק מהביו שלו עם גופן קטן יותר למקרה שנרצה לדעת עליו יותר.

קישור לאינטרנט: בריזק

עיצוב גינה אנכית

עיצוב גינה אנכית

כמו הקודם, גם עיצוב גינה אנכי הולך לעבר תצלום שמוצג במהירות אחד התפקידים הטובים ביותר שלו בשדה התעופה באוסלו. בראש יש לנו את הכותרת עם «סרגל הניווט» או סרגל הניווט ואפילו אפשרות לשנות את השפה. הלוגו מעמיד אותו בפורמט אנכי כדי לתת את הטאץ 'הסופי לעמוד פשוט מאוד.

קישור לאינטרנט: עיצוב גינה אנכית

247 גראד

247 גראד

247 גראד לשחק עם מונוכרום ותמונת רקע כמעט כהה לחלוטין. גופן הכותרת, קטן יותר מהטקסט והכותרת, משמש באותיות רישיות כדי ליצור ניגודיות רבה בעיצוב הכללי.

קישור לאינטרנט: 247 גראד

תהנה מזה

תהנה מזה

א טיפוגרפיה נהדרת יכולה להיות סימן להיות אותנטי ושאנחנו יודעים מה אנחנו עושים. אינך צריך לתת דבר נוסף אם המסר ישיר. הם מבהירים: הם אוהבים ליצור אפליקציות ואתרים יפים. הם משאירים את הדואר לפרויקטים ואת לימודם בקישור אחר.

קישור לאינטרנט: תהנה מזה

אליסון הו

אליסון הו

אליסון לוקח אותנו לפני קורסים אחרים וכולל תמונות נוספות וזה יותר גופן "נשי". כנ"ל לגבי התמונה הראשית שלך וכותרת זו. יש לו את המותרות להציג כרטיס המציג טריקים של קניות.

קישור לאינטרנט: אליסון הו

פיקסלוט

פיקסלוט

פיקסלוט קצת משוגע, אבל זה גם מעיד על היצירתיות של המחבר. להשתמש מצביע העכבר כדי ליצור מסכה שמטשטש בכל מקום שיש לנו את זה.

קישור לאינטרנט: פיקסלוט

ליונל שולטס

ליונל שולטס

אם אתה רוצה הפוך את קורות החיים שלך באופן מקוון ללא יותר מזה, ליונל מראה לך את השלבים. גופן מתאים, התמונה שלך בפינה השמאלית העליונה, קישורים לרשתות החברתיות שלך והחוויה שלך. האלמנט הדקורטיבי היחיד הוא שני הקווים האופקיים בצבעים שונים.

קישור לאינטרנט: ליונל שולטס

שחפים אלגנטיים

שחפים אלגנטיים

אנחנו חוזרים לאלגנטיות של מינימליזם והמרחבים הריקים הגדולים האלה. מצד אחד הכותרת רחוקה מאוד משאר האלמנטים, ומצד שני אותם אלמנטים מעוצבים בצורה כזו שהם יוצרים הרמוניה חזותית גדולה ביניהם.

קישור לאינטרנט: שחפים אלגנטיים

בית גידול

בית גידול

כפי שאתה יכול לראות בכל הדוגמאות, זה חשוב בכרטיסיות הכותרת כדי לעבור לדפים השונים מהאתר. לטיפוגרפיה יש חשיבות רבה, שחק עם אחד לכותרת ואחר עבור הטקסט עם sans serif שעושה עבודה נהדרת.

קישור לאינטרנט: בית גידול

פינקפוינט

פינקפוינט

ניגודיות הצבעים מובילה אותנו לרשת מעט מורכבת יותר של כל התצוגות. לא כל אותם מרכיבים עיקריים חסרים לשחק הפעם עם השיפועים של תמונת הרקע ושני החלקים שיש להם את הצבעים העיקריים של שיפוע התמונה הראשי.

קישור לאינטרנט: פינקפוינט

IWC

IWC

תצלום נהדר עם גופן שנבחר היטב ואלמנט "גיבור" אתה יכול לתת לרשת זו. עם מחוון זה מראה חלק מהעבודה להיות די פשוט בתפיסתה.

קישור לאינטרנט: IWC

חיש קל

חיש קל

האיור הדיגיטלי מביא אותנו לצ'ופ צ'ופ עם אותה תמונה שאוכלת את כל הנוכחות הוויזואלית של זה. הצבע הכחול בכותרת נותן לו את הטעם ליצור ערכים כרומטיים בהתאמה לכל התמונה המוקרנת ברשת.

קישור לאינטרנט: חיש קל

7 אורן

7 אורן

7Pine משחק עם הירוק כדי להיות הגיבור הגדול של הצלחת הביתית. השאר מלחין את זה תמונה עם הרבה ירוק וכותרת פשוטה שרוצה להישאר מעיניו בלוגו.

קישור לאינטרנט: 7 אורן

הסכום

הסכום

הסכום אכן לוקח אותנו לכיוונים אחרים. שחקו בשחור-לבן האגדי, איור יצירתי מאוד וזה משתלב עם שאר האלמנטים ושני איורים אחרים כדי ליצור נוף יותר מעניין. דוגמא ליצירת אתר בולט מכל השאר.

קישור לאינטרנט: הסכום

כובע

כובע

כחול הוא הצבע השולט באתר זה בו לא חסרים תמונות המוארות במלואן בלבן ומה יהיה המשחק בתלת ממד של בונה אתרים זה שזז תוך כדי תנועה.

קישור לאינטרנט: כובע

קארה לייט

קארה לייט

קארה הולכת ל פשטות ומינימליזם עם נוכחותו הטבעית והיפה בתצלום שלך. השאר הוא טקסט שמגיע יחד עם מה הם האלמנטים העיקריים לכותרת וכפתור המבורגר לפתיחתו.

קישור לאינטרנט: קארה לייט

שיווק סטודיו אינדינסינס

מהותית

Es של האינטרנט הפשוט ביותר אבל זה מראה לנו מה זה ליצור בלוג. אדום ושחור הם הגיבורים באתר "בלוג" מאוד.

קישור לאינטרנט: שיווק סטודיו אינדינסינס

כיצד ליצור אתר פשוט ב- HTML

HTML

אנחנו הולכים ללמד אותך ליצור אתר פשוט ב- HTML כדי שתדע את האלמנטים הבסיסיים ביותר המרכיבים אותו. יהיה צורך שיהיה לנו מארח אתרים בו נוכל לטעון את הקוד ולכמה שינויים ב- CSS, אבל יאללה, אלה העקרונות להתחיל את המסע שלנו ב- HTML.

לאחר שראיתי כמה דוגמאות אינטרנט פשוטות בעזרתו תוכלו להניע את עצמכם מספיק בכדי ליצור עיצובים בעצמכם מבלי לשבור את הראש יותר מדי. לפעמים הפשט יוצר אפקט טוב יותר מאשר לסבך אותנו בדברים מורכבים. תראה שברוב המקרים הפשוטים עובדים טוב מאוד. לך על זה.

יצירת אתר פשוט ב- HTML קלה ממה שנראה בהתחלה. אתר מורכב מכותרת ראשית, הגוף או תוכן והכותרת התחתונה או התחתונה כאלמנטים עיקריים. אנו יכולים לסווג אותם באופן זה:

  • מסמכים: כל המסמכים שאנחנו הולכים ליצור חייבים להיעשות עם . אנחנו פותחים עם ותמיד נסגר עם
  • הגוף או הגוףהחלק הגלוי של המסמך הוא בין י
  • כותרות: הם ידועים על ידי H1, H2, H3 ... אנחנו מתחילים עם ואנחנו סוגרים עם . הטקסט שנמצא בפנים יופיע ככותרת עליונה ובהתאם למספורו הוא יעשה זאת בגודל קטן יותר או גדול יותר.
  • פסקאות: הפיסקה סגורה בתוך א ונסגר עם
  • Enlaces: הדוגמה הברורה ביותר היאcreativosonline.org/»> Enlace a Creativos Online</a>
  • תמונות: אנו מגדירים אותם לפי התווית . דוגמה תהיה . אנו קוראים לתמונה בין המרכאות ומשתמשים באלט עבור הטקסט החלופי החיוני עבור קידום אתרים.
  • רשימות: אנו מגדירים את הרשימות באמצעות למבולגן ועם עבור מסודר. פריטי רשימה משמשים עם . זכרו תמיד לסגור אותם עם הבר.

HTML

עם האלמנטים האלה יהיו לנו הבסיס ליצירת אתר פשוט כפי שתראה בכמות הטובה של אותם שנלמד אותך בחלק הבא. נניח שהמבנה הסמנטי עם האלמנטים החשובים ביותר שלו נראה כך:

  • כותרת עם סרגל הניווט שלה לדפים השונים של האתר.
  • המאמר או מרחב הגוף שנוכל ליצור ערך בבלוג, להכניס את תוכנית הלימודים שלנו או תמונה.
  • סרגל הצד או סרגל הצד לשים מידע נוסף.
  • הכותרת התחתונה או הרגל, שם נניח קישורים לדפים החשובים ביותר באתר כמו גם לאייקונים של הרשתות החברתיות (תמיד כדוגמה).

בדוגמאות שתראה להלן הכל מבוסס על לוגו פשוט אך אלגנטי, כותרת ראשית שבה הם ממקמים את הניווט לדפים השונים של האתר, חלל מרכזי הנשלט על ידי טקסט או תמונה וכותרת תחתונה עם האלמנטים שהוזכרו בפסקה הקודמת.

אנו ממליצים על כך אל תשברו את הראש ותלכו לפשטות. העיקר הוא שהאזורים הללו נבדלים מהשאר במעבר חזותי של שניות. עם הזמן נוכל לסבך את עצמנו ולעבוד יותר מרחבים אחרים.

זהו דוגמה ברורה לקוד 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.

תמונת כותרת של גרג ראקוזי


השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם. שדות חובה מסומנים *

*

*

  1. אחראי לנתונים: מיגל אנחל גטון
  2. מטרת הנתונים: בקרת ספאם, ניהול תגובות.
  3. לגיטימציה: הסכמתך
  4. מסירת הנתונים: הנתונים לא יועברו לצדדים שלישיים אלא בהתחייבות חוקית.
  5. אחסון נתונים: מסד נתונים המתארח על ידי Occentus Networks (EU)
  6. זכויות: בכל עת תוכל להגביל, לשחזר ולמחוק את המידע שלך.

      כריסטופר - אתר דיג'ו

    אני גם ממש נלהב מעיצוב, דף טוב לראות את עולם העיצוב.

    כל טוב.

      חורחה דיג'ו

    שלום חברים, מה שלומך?

    אני מכין דף אינטרנט פשוט מאוד ב- html, ואני רוצה להוסיף תיבת תגובה לכל פרסום. האם תוכל להנחות אותי כיצד לעשות זאת?

      אמרסון דיג'ו

    אלו מאיתנו הזקוקים לעמוד אינטרנט פשוט מאוד עם שלושה כפתורים ותמונה, ובכל מקרה נגן, דבר כזה יהיה מאוד שימושי.
    עם זאת אני לא מאמין שעם המידע הזה אני מסוגל לבנות את הדף שלי, אבל לפחות זה נותן לך רעיונות ומה לחפש