30 ינקרעדאַבלי פּשוט וועב זייַטלעך

נעץ
עטלעכע פון ​​די מערסט באַרימט בלעטער זענען זייער אָוווערלאָודיד מיט אינפֿאָרמאַציע, אָבער איך בעסער די פאַרקערט: די פּשוט.

דאָך, די גרויס עקספּאָנענט פון די גרופּע איז Google מיט זיין מינימאַליסט היים בלאַט זינט די אָנהייב פון זיין נסיעה. אָבער קלאר עס איז נישט דער בלויז אויף דער אינטערנעץ וואָס איז באגאנגען צו האַלטן די זאכן פּשוט.

פּשוט HTML וועב בלאַט ביישפילן

קין ריטשמאנד

קין ריטשמאָנד

קין ריטשמאָנד מאכט אונדז צו זען די פּאַשטעס פון פּלייינג מיט ווייניק עלעמענטן, אָבער זייער געזונט געשטעלט צו געבן אַ גרויס געפיל צו מינאַמאַליזאַם. זיין לאָגאָ אין דער אויבערשטער לינקס, די טוויטטער און קאָנטאַקט ייקאַנז אויף די רעכט און אין דעם צענטער, מיט אַ סטרייקינג טיפּאָגראַפי, צו וואָס ער איז דעדאַקייטאַד.

לינק צו די וועב: Keanrich mond

אַליס דראָגאַרד

אַליס דראָגאַרד

אַליס דראָגאַרד האַלטן עס פּשוט מיט דיין לאָגאָ געשטעלט אין דעם צענטער, פיר טאַבס צו מאַך צווישן די הויפּט בלעטער פון דיין וועבזייטל און אַ סעריע פון ​​פאָוטאַגראַפס רעכט געשטעלט אַזוי אַז מיר וועלן וויסן וואָס איר טאָן און וואָס איר טאָן אין אַ בליק.

לינק צו די וועב: אַליס דראָגאַרד

יונתן אָגדען

יונתן אָגדען

אָגדאַן האַלטן פּלייינג מיט ווי פּשוט דיין נאָמען איז ווי אַ לאָגאָדי געזעלשאַפטלעך נעטוואָרקס ליגן פּונקט ונטער אָן אַטראַקטינג ופמערקזאַמקייט און זייער פּלאַן אַרבעט אַזוי אַז מיר קענען געשווינד גיין דורך זיי. אויף איין בלאַט עס ווייזט אַלץ וואָס איז וויכטיק.

לינק צו די וועב: יונתן אָגדען

פינטש

פינטש

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

לינק צו די וועב: פינטש

א אַנדערש פּלאַן

א אַנדערש פּלאַן

דעם וועבזייטל שפּיל דיפערענטלי. ניצן אַ טאַפּעטן מיט אַ כעדער, פֿון וואָס מיר קענען גיין צו די הויפּט בלעטער, דיין טעלעפאָן און די לינקס צו דיין געזעלשאַפטלעך נעטוואָרקס.

לינק צו די וועב: א אַנדערש פּלאַן

בריזק

בריזק

קיי אילוסטרירט אונדז מיט זיין אייגענע פיגור מיט אַן אַבסטראַקט דרייַעק און אַ פּאַסיק קאָליר פּאַליטרע צו געבן נאָענטקייט. ער אויך אָפפערס טייל פון זיין ביאָ מיט אַ קלענערער שריפֿט אין פאַל מיר וועלן וויסן מער וועגן אים.

לינק צו די וועב: בריזק

ווערטיקאַל גאַרדאַן דיזיין

ווערטיקאַל גאַרדאַן דיזיין

ווי די פריערדיקע, ווערטיקאַל גאַרדאַן דיזיין גייט צו אַ פאָטאָגראַפיע וואָס ווייזט שנעל איינער פון זיין בעסטער דזשאָבס אין אָסלאָ אַעראָפּאָרט. אין די שפּיץ מיר האָבן די כעדער מיט די «נאַוו באַר» אָדער נאַוויגאַציע באַר און אפילו די מעגלעכקייט פון טשאַנגינג די שפּראַך. דער לאָגאָ לייגט עס אין אַ ווערטיקאַל פֿאָרמאַט צו געבן די לעצט פאַרבינדן צו אַ זייער פּשוט בלאַט.

לינק צו די וועב: ווערטיקאַל גאַרדאַן דיזיין

247Grad

247Grad

247Grad שפּיל מיט מאַנאַקראָום און אַ הינטערגרונט בילד כּמעט טאָוטאַלי. די כעדער שריפֿט, קלענערער ווי די טעקסט און כעדער, איז קאַפּיטאַלייזד צו שאַפֿן אַ גרויס קאַנטראַסט אין די קוילעלדיק פּלאַן.

לינק צו די וועב: 247Grad

הנאה דעם

הנאה דעם

א ויסגעצייכנט טיפּאָגראַפי קען זיין דער צייכן פון עכט און אַז מיר וויסן וואָס מיר טאָן. איר טאָן ניט האָבן צו געבן עפּעס מער אויב דער אָנזאָג איז דירעקט. זיי מאַכן עס קלאָר: זיי ליבע צו מאַכן שיין אַפּפּס און וועבסיטעס. זיי לאָזן די פּאָסט פֿאַר פּראַדזשעקס און זייער לערנען אין אן אנדער לינק.

לינק צו די וועב: הנאה דעם

אַליסאַן כאָו

אַליסאַן כאָו

אַליסאַן נעמט אונדז איידער אנדערע קאָרסאַז און כולל מער בילדער און אַז מער "ווייַבלעך" טיפּ. דער זעלביקער גייט פֿאַר דיין הויפּט בילד און די כעדער. ער האט די לוקסוס פון פּריזענטינג אַ קאַרטל מיט שאַפּינג טריקס.

לינק צו די וועב: אַליסאַן כאָו

פּיקסעלאָט

פּיקסעלאָט

פּיקסעלאָט איז אַ ביסל משוגע, אָבער עס אויך ינדיקייץ די שעפֿערישקייט פון די מחבר. ניצן די מויז טייַטל צו שאַפֿן אַ מאַסקע אַז בלערז וואו מיר האָבן עס פּערטשט.

לינק צו די וועב: פּיקסעלאָט

Lionel scholtes

Lionel scholtes

אויב איר ווילן מאַכן דיין נעמענ זיכ ווידער אָנליין מיט גאָרנישט מער ווי אַז, ליאָנעל ווייזט איר די טריט. א פּאַסיק שריפֿט, דיין פאָטאָ אין דער אויבערשטער לינקס, לינקס צו דיין געזעלשאַפטלעך נעטוואָרקס און דיין דערפאַרונג. דער בלויז דעקאָראַטיווע עלעמענט איז די צוויי האָריזאָנטאַל שורות פון פאַרשידענע פארבן.

לינק צו די וועב: Lionel scholtes

עלעגאַנט סיגאַלז

עלעגאַנט סיגאַלז

מיר קומען צוריק צו די עלאַגאַנס פון מינאַמאַליזאַם און די גרויס פּוסט ספּייסאַז. אויף די איין האַנט, די כעדער איז זייער ווייַט פֿון די רעשט פון די עלעמענטן, און אויף די אנדערע האַנט די עלעמענטן זענען אַזוי שייפּט אַז זיי מאַכן אַ גרויס וויזשאַוואַל האַרמאָניע צווישן זיי.

לינק צו די וועב: עלעגאַנט סיגאַלז

לעבענסראַום

לעבענסראַום

ווי איר קענען זען אין אַלע ביישפילן, עס איז וויכטיק די כעדערז טאַבס צו גיין צו די פאַרשידענע בלעטער פֿון דער וועבזייטל. די טיפּאָגראַפי איז זייער וויכטיק. שפּיל מיט איין פֿאַר די כעדער און אן אנדער פֿאַר די טעקסט מיט אַ סאַנס סעריפ וואָס טוט אַ גרויס אַרבעט.

לינק צו די וועב: לעבענסראַום

פּינקפּאָינט

פּינקפּאָינט

די קאַנטראַסט פון פארבן פירט אונדז צו אַ ביסל מער קאָמפּליצירט וועב פון אַלע קוקן. ניט אַלע די הויפּט עלעמענטן זענען פעלנדיק צו שפּילן דעם מאָל מיט די גראַדיענץ פֿאַר די הינטערגרונט בילד און די צוויי סעקשאַנז וואָס האָבן די הויפּט פארבן פון די גראַדיענט פון די הויפּט בילד.

לינק צו די וועב: פּינקפּאָינט

יווק

יווק

א גרויס פאָטאָגראַפיע מיט אַ געזונט-אויסגעקליבן שריפֿט און אַ "העלד" עלעמענט איר קענען געבן צו דעם וועב. מיט אַ סליידער עס איז געוויזן אַז טייל פון די אַרבעט איז גאַנץ פּשוט אין זיין פאָרשטעלונג.

לינק צו די וועב: יווק

צעהאַקן צעהאַקן

צעהאַקן צעהאַקן

דיגיטאַל געמעל ברענגט אונדז צו Chop Chop מיט אַז בילד אַז עסט אַרויף אַלע די וויזשאַוואַל בייַזייַן פון עס. די בלוי קאָליר אין די כעדער גיט זיין פונט צו שאַפֿן טשראָמאַטיק וואַלועס אין איינקלאנג מיט די גאנצע בילד פּראַדזשעקטאַד דורך די וועב.

לינק צו די וועב: צעהאַקן צעהאַקן

7 פּיין

7 פּיין

7 פּיין פיעסעס מיט די גרין צו זיין דער גרויס פּראָוטאַגאַנאַסט פון די היים טעלער. די מנוחה קאַמפּאָוזיז עס אַ בילד מיט אַ פּלאַץ פון גרין און אַ פּשוט כעדער וואָס וויל צו באַקומען אַננאָוטיסט דורך די לאָגאָ.

לינק צו די וועב: 7 פּיין

די סאַם

די סאַם

די סומע נעמט אונדז אין אנדערע אינסטרוקציעס. שפּיל מיט די פאַביאַלד שוואַרץ און ווייַס, אַ זייער שעפעריש געמעל און דאָס גייט צוזאמען מיט די רעשט פון די עלעמענטן און צוויי אנדערע אילוסטראציעס צו שאַפֿן אַ מער ווי טשיקאַווע לאַנדשאַפט. אַ ביישפּיל צו שאַפֿן אַ וועבזייטל וואָס שטייט אויס פון די מנוחה.

לינק צו די וועב: די סאַם

האַטבאָקס

האַטבאָקס

בלוי איז די פּרידאַמאַנאַנט קאָליר אויף דעם וועבזייטל, אין וואָס עס זענען קיין פעלנדיק בילדער גאָר ילומאַנייטאַד דורך ווייַס און ווי די שפּיל וואָלט זיין ווי אין 3 ד פון דעם פּלאַץ בילדער אַז מאָוועס ווי מיר מאַך.

לינק צו די וועב: האַטבאָקס

קאַראַ ליטע

קאַראַ ליטע

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

לינק צו די וועב: קאַראַ ליטע

ינטרינסיק סטודיאָ פֿאַרקויף

ינטרינסיק

Es פון די סימפּלאַסט וועב אָבער דאָס ווייזט אונדז וואָס עס איז צו מאַכן אַ בלאָג. רויט און שוואַרץ זענען די פּראָוטאַגאַנאַסס אין אַ זייער "בלאָג" פּלאַץ.

לינק צו די וועב: ינטרינסיק סטודיאָ פֿאַרקויף

ווי צו שאַפֿן אַ פּשוט וועבזייטל אין HTML

HTML

מיר וועלן לערנען איר שאַפֿן אַ פּשוט וועבזייטל אין HTML אַזוי אַז איר וויסן די מערסט יקערדיק עלעמענטן וואָס קאַמפּאָוז עס. עס וועט זיין נויטיק צו האָבן אַ וועב באַלעבאָס וואָס מיר קענען אַרייַן די קאָד און עטלעכע טוויקס אין CSS, אָבער קומען אויף, דאָס זענען די פּרינציפּן צו אָנהייבן אונדזער נסיעה אין HTML.

ווייל געזען עטלעכע פּשוט וועב ביישפילן מיט וואָס איר קענען מאָטיווירן זיך גענוג צו מאַכן דיין אייגן דיזיינז אָן ברייקינג דיין קאָפּ אַ פּלאַץ. מאל די פּשוט קריייץ אַ בעסער ווירקונג ווי קאַמפּלאַקייטינג אונדז אין קאָמפּלעקס טינגז. איר וועט זען אַז אין רובֿ פאלן די פּשוט אַרבעט זייער גוט. גיין פֿאַר אים.

עס איז גרינגער צו שאַפֿן אַ פּשוט וועבזייטל אין HTML. א וועבזייטל באשטייט פון אַ כעדער, דער גוף אָדער אינהאַלט און די פוס אָדער פוס ווי הויפּט עלעמענטן. מיר קענען זיי קלאַסאַפייז אויף דעם וועג:

  • דאָקומענטן: אַלע דאָקומענטן וואָס מיר וועלן מאַכן מוזן זיין געטאן מיט אַ . מיר עפענען מיט אַ און שטענדיק קלאָוזיז מיט אַ
  • דער גוף אָדער גוף: די קענטיק טייל פון דעם דאָקומענט איז צווישן י
  • כעדערז: זיי זענען באַוווסט דורך די H1, H2, H3 ... מיר אָנהייבן מיט אַ און מיר שליסן זיך מיט א . דער טעקסט וואָס איז ין איז דערשייַנען ווי אַ כעדער, און דיפּענדינג אויף די נאַמבערינג אין אַ קלענערער אָדער גרעסערע גרייס.
  • פאראגראפן: די פּאַראַגראַף איז ענקלאָוזד ין אַ און קלאָוזיז מיט
  • לינקס: די קליראַסט בייַשפּיל איז לינק צו Creativos Online
  • ימאַגערי: מיר דעפינירן זיי דורך די פירמע . אַ בייַשפּיל וואָלט זיין . מיר רופן די בילד צווישן די קוואָטעס און נוצן אַן אַלט פֿאַר די אָלטערנאַטיוו טעקסט וואָס איז יקערדיק פֿאַר SEO.
  • ליס: מיר דעפינירן די רשימות מיט פֿאַר אַ מעסי און מיט פֿאַר אַ ציכטיק. רשימה ייטאַמז זענען געניצט מיט . שטענדיק געדענקען צו פאַרמאַכן זיי מיט די באַר.

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 אַ ביסל, אָבער אין פּאַסינג אַזוי אַז איר פֿאַרשטיין ווי צו סטיל HTML. זאל ס זאָגן אַז CSS און HTML גיין האַנט אין האַנט צו געבן די פּשוט וועבסיטעס וואָס איר וועט געפֿינען אונטן.

אויב אויף דעם איין, מיר האָבן די סעמאַנטיק נוצן פון HTML פֿאַר וואָס איז די כעדער, די גוף אָדער גוף מיט זיין אַרטיקל אָדער בילד און די פוס, אין CSS, מיר נוצן די «Div» פונקציע צו ידענטיפיצירן צו יעדער פון די ספּייסאַז צו צולייגן שפּעטער די נויטיק ענדערונגען אין די פּלאַן.

עפּעס ווי פּשוט ווי:

וועב סעמאַנטיקס

בשעת מיר קענען צולייגן די סטיילז מיט Div, אַ פּאַסיק און שליימעסדיק סטרוקטור וועט העלפֿן אַזוי אַז וועב קראַוולערז קענען בישליימעס "לייענען" וועגן וואָס אונדזער אינהאַלט איז, אַזוי אויב מיר נאָכפאָלגן די יקערדיק סטרוקטור, מיר וועלן ערשטער האָבן אַ גרויס אַרבעט און באַזע.

Un פּשוט CSS קאָד בייַשפּיל:

h1 {
קאָליר: ווייַס;
טעקסט-ייַנרייען: צענטער;
}

מיר רופן H1 און די טעקסט מיר שטעלן עס אין ווייַס מיט קאָליר: ווייַס; און מיר וועלן עס גלײַכן צום צענטער מיטן «טעקסט אַליינ». נאָענט צו די H1 רופן שטענדיק פאַרמאַכן מיט קוואַדראַט בראַקאַץ.

כעדער פאָטאָ פון Greg rakozy


דער אינהאַלט פון דעם אַרטיקל אַדכיר צו אונדזער פּרינציפּן פון לייט עטיקס. צו מעלדונג אַ טעות גיט דאָ.

3 באַמערקונגען, לאָזן דיין

לאָזן דיין באַמערקונג

אייער בליצפּאָסט אַדרעס וועט נישט זייַן ארויס. Required fields זענען אנגעצייכנט מיט *

*

*

  1. פאַראַנטוואָרטלעך פֿאַר די דאַטן: Miguel Ángel Gatón
  2. ציל פון די דאַטן: קאָנטראָל ספּאַם, קאָמענטאַר פאַרוואַלטונג.
  3. לעגיטימאַטיאָן: דיין צושטימען
  4. קאָמוניקאַציע פון ​​די דאַטן: די דאַטן וועט נישט זיין קאַמיונאַקייטיד צו דריט פּאַרטיעס אַחוץ דורך לעגאַל פליכט.
  5. דאַטן סטאָרידזש: דאַטאַבייס כאָוסטיד דורך Occentus Networks (EU)
  6. רעכט: צו קיין צייט איר קענט באַגרענעצן, צוריקקריגן און ויסמעקן דיין אינפֿאָרמאַציע.

  1.   Cristopher - וועבזייטל דאָס

    איך בין אויך לייַדנשאַפטלעך פֿאַר פּלאַן, אַ גוט בלאַט צו זען די וועלט פון פּלאַן.

    א ווארימע גרוס.

  2.   דזשאָרגע דאָס

    העלא פרענדז, ווי טאָן איר טאָן?

    איך מאַכן אַ זייער פּשוט וועבזייטל אין HTML, און איך וואָלט ווי צו לייגן אַ באַמערקונג קעסטל צו יעדער ויסגאַבע. קען איר פירן מיר ווי צו טאָן דאָס?

  3.   עמערסאַן דאָס

    יענע פון ​​אונדז וואָס דאַרפֿן אַ זייער פּשוט וועב בלאַט מיט דריי קנעפּלעך און אַ בילד, און אין קיין פאַל אַ שפּילער, עפּעס ווי דאָס וואָלט זיין זייער נוצלעך.
    אָבער איך טאָן ניט גלויבן אַז מיט דעם אינפֿאָרמאַציע, איך קען בויען מיין בלאַט, אָבער אין מינדסטער עס גיט איר יידיאַז און וואָס צו קוקן.