30 Укмуштай Жөнөкөй Веб-баракчалар

желе
Айрым белгилүү баракчаларга маалымат өтө эле көп, бирок мен тескерисинче, жөнөкөй баракчаларды жакшы көрөм.

Албетте, бул топтун улуу көрсөткүчү - Google саякатка чыккандан бери өзүнүн минималисттик үй бети менен, бирок Интернеттеги бир гана нерсе жөнөкөй нерселерди сактоого умтулбайт.

Жөнөкөй HTML веб баракчасынын мисалдары

Кин Ричмонд

Кин РичМонд

Кин Ричмонд бизге бир нече элементтер менен ойноонун жөнөкөйлүгүн көрсөтөт, бирок абдан жакшы коюлган минимализмге сонун сезим берет. Анын жогорку сол жагындагы логотиби, оң жана борбордогу Твиттер жана байланыш иконалары, өзүнө арналган нерсеге көздүн жоосун алган типография менен.

Вебке шилтеме: Keanrich mond

Элис курган

Элис курган

Элис курган логотип жайгаштырылып, аны жөнөкөй кылып алыңыз борбордо, сиздин веб-сайтыңыздын негизги беттери менен жылдырылган төрт өтмөк жана бир катар сүрөттөр ылайыктуу жайгаштырылган, ошондо бир караганда биз эмне кылып, эмне кылып жатканыңызды билебиз.

Вебке шилтеме: Элис курган

Джонатан Огден

Джонатан Огден

Огден логотип сыяктуу жөнөкөй атыңыз менен ойноону уланта бериңиз, Төмөндө жайгашкан социалдык тармактар ​​көңүлдү өзүнө бурбастан, алардын дизайны тез иштей тургандай иштейт. Бир бетте маанилүү нерселердин бардыгы көрсөтүлгөн.

Вебке шилтеме: Джонатан Огден

Finch

Finch

Финч буга чейин башка жактарга типография менен ойногону кетип жатат ал эмне жасайт, элеганттуулукту жана акылдуулукту билдирет. Бир нече элементтери менен ал өзүнүн бардык кесипкөйлүгүн көз жаздымда калтырат. Ошондой эле кайсы баракчалар сиз менен байланыштыргандыгын ачык көрсөтөт.

Вебке шилтеме: Finch

Башка Дизайн

Башка Дизайн

Бул веб-сайт башкача ойноо. Негизги беттерге, телефонуңузга жана социалдык тармактарыңызга шилтемелер аркылуу кире турган башы бар обои колдонуңуз.

Вебке шилтеме: Башка Дизайн

Бризк

Бризк

Кай бизди өзүнүн фигурасы менен сүрөттөйт абстрактуу үч бурчтук жана ылайыктуу түстөр палитрасы жакындык берүү. Ошондой эле, ал биз жөнүндө көбүрөөк билгибиз келсе, кичинекей көлөмдөгү шрифт менен бионун бир бөлүгүн сунуштайт.

Вебке шилтеме: Бризк

Вертикалдуу бакча дизайны

Вертикалдуу бакча дизайны

Мурунку сыяктуу эле, Vertical Garden Дизайн тез көрсөткөн сүрөттү көздөй баратат анын Осло аэропортундагы мыкты жумуштарынын бири. Жогору жагында бизде "nav bar" же навигациялык тилке бар, атүгүл тилди өзгөртүү мүмкүнчүлүгү бар. Логотип аны вертикалдык форматка салып, өтө жөнөкөй баракчага акыркы жаңылыктарды берет.

Вебке шилтеме: Вертикалдуу бакча дизайны

247Град

247Град

247Град монохромдуу жана фондук сүрөт менен ойнотуу дээрлик караңгы. Тексттен жана баштан кичинекей баш тамга арип менен жазылып, жалпы дизайнда чоң айырмачылыктарды жаратат.

Вебке шилтеме: 247Град

Enjoy бул

Enjoy бул

Una сонун типография аныктыгынын белгиси болушу мүмкүн жана эмне кылышыбызды билебиз. Эгер билдирүү түз болсо, анда дагы бир нерсе берүүнүн кажети жок. Алар ачык-айкын көрсөтүшөт: алар кооз тиркемелерди жана веб-сайттарды түзгөндү жакшы көрүшөт. Алар долбоорду жана алардын окуусун башка почтага таштап кетишет.

Вебке шилтеме: Enjoy бул

Эллисон хоу

Эллисон хоу

Эллисон бизди алып барат башка курстардан мурун жана көбүрөөк сүрөттөрдү камтыйт жана дагы "аялдык" тамга. Ошол эле сиздин негизги сүрөтүңүзгө жана ошол баш аталышка тиешелүү. Анын соода шылуундарын көрсөткөн картаны тартуулоо мүмкүнчүлүгү бар.

Вебке шилтеме: Эллисон хоу

Pixelot

Pixelot

Пикселот бир аз жинди болгону менен, автордун чыгармачылыгынан кабар берет. Колдонуу масканы түзүү үчүн чычкан көрсөткүчү Биз кайда гана отурбайлы, булуттар.

Вебке шилтеме: Pixelot

Lionel scholtes

Lionel scholtes

Эгер сиз каалаган андан башка эч нерсе жок резюмеңизди онлайн кылыңыз, Lionel кадамдарды көрсөтөт. Ылайыктуу арип, жогорку сол жактагы сүрөтүңүз, социалдык тармактарыңызга шилтемелер жана тажрыйбаңыз. Бир гана кооздоочу элемент ар кандай түстөгү эки горизонталдык сызык.

Вебке шилтеме: Lionel scholtes

Elegant Seagulls

Elegant Seagulls

Биз кайтабыз минимализмдин жарашыгына жана ошол чоң бош жерлер. Бир жагынан алганда, баш элементтер башка элементтерден өтө алыс, экинчиден, ошол элементтер алардын ортосунда чоң визуалдык гармонияны түзө тургандай кылып калыптанган.

Вебке шилтеме: Elegant Seagulls

Lebensraum

Lebensraum

Бардык мисалдардан көрүнүп тургандай, бул маанилүү ар кандай барактарга өтүү үчүн баш табулатура сайтынан. Типографиянын мааниси чоң, бирөөсү баш менен ойнолсо, экинчиси текстти эң сонун аткарган sans serif менен ойнойт.

Вебке шилтеме: Lebensraum

PinkPoint

PinkPoint

Түстөрдүн карама-каршылыгы бизди бардык көрүнүштөрдүн бир аз татаал торуна алып барат. Ошол эле негизги элементтердин бардыгы жок эмес бул жолу градиенттер менен фондук сүрөт үчүн жана градиенттин негизги түстөрү бар эки бөлүм менен ойноо.

Вебке шилтеме: PinkPoint

IWC

IWC

Менен сонун сүрөт туура тандалган шрифт жана "баатыр" элементи сиз бул вебге бере аласыз. Слайдер менен иштин бир бөлүгү анын түшүнүгүндө кыйла жөнөкөй экендигин көрсөтөт.

Вебке шилтеме: IWC

Чоп

Чоп

Санарип иллюстрациясы бизди Chop Chop менен алып келет анын бүт визуалдык катышын жеп салган ошол сүрөт. Жогорудагы көк түс хроматикалык баалуулуктарды желеде чагылдырылган бүткүл сүрөт менен шайкеш келтирүүгө негиз берет.

Вебке шилтеме: Чоп

7Pine

7Pine

7Pine үй табагынын улуу каарманы болуу үчүн жашыл түстө ойнойт. Калгандары аны түзөт көп жашыл жана жөнөкөй баш менен сүрөт логотип байкабай калгысы келет.

Вебке шилтеме: 7Pine

Суммасы

Суммасы

Сум бизди башка багыттарга алып барат. Жомоктогудай кара жана ак түстөр менен ойноңуз, бул өтө чыгармачыл иллюстрация жана башка элементтер жана дагы эки иллюстрация менен бирге кызыктуу пейзажды жаратат. Башкалардан айырмаланып турган веб-сайтты түзүү мисалы.

Вебке шилтеме: Суммасы

Hatbox

Hatbox

Бул вебсайтта көк түс басымдуулук кылат, анда ак түс менен толук жарыктандырылган сүрөттөр жок жана оюн кандай болмок ошол сайт куруучунун 3D форматында ал биз кыймылдаса кыймылдайт.

Вебке шилтеме: Hatbox

Кара лит

Кара лит

Кара барат табигый жана кооз катышы менен жөнөкөйлүк жана минимализм сиздин сүрөтүңүздө. Калгандары баштын негизги элементтери жана аны ачуу үчүн гамбургер баскычы менен кошо келген текст.

Вебке шилтеме: Кара лит

Instrinsic Studio Marketing

Ички

Es жөнөкөй желе бирок бул бизге блог жасоонун эмне экендигин көрсөтөт. Кызыл менен кара өтө "блог" сайтындагы каармандар.

Вебке шилтеме: Instrinsic Studio Marketing

HTMLде жөнөкөй веб-сайтты кантип түзүү керек

HTML

Биз сизге сабак беребиз HTMLде жөнөкөй вебсайт түзүү аны түзгөн эң негизги элементтерди билүү үчүн. Бизде CSS'те кодду жана айрым оңдоолорду жүктөй турган веб-хост болушу керек, бирок HTMLге саякаттоону баштоонун принциптери ушул.

Кээ бирлерин көргөндөн кийин жөнөкөй желе мисалдары Анын жардамы менен сиз башыңызды көп сындырбай, өзүңүздүн дизайныңызды жасоого жетиштүү түрткү бере аласыз. Кээде жөнөкөй нерсе бизди татаал нерселерде татаалдаштыргандан көрө жакшы эффект жаратат. Көпчүлүк учурларда жөнөкөй эле иштээрин көрө аласыз. Ал үчүн барыңыз.

HTMLде жөнөкөй веб-сайтты түзүү, алгач сезилгенден жеңилирээк. Веб-сайт баш денеден турат же мазмуну жана негизги элементтер катары колонтитул же колонтитул. Биз аларды мындай жол менен классификациялай алабыз:

  • документтер: биз түзө турган документтердин бардыгы a менен жасалышы керек . Биз менен ачабыз жана ар дайым а менен жабылат
  • Дене же дене: документтин көрүнөө бөлүгү ортосунда Y
  • Headers: алар H1, H2, H3 менен белгилүү ... Биз адан баштайбыз жана биз менен жабабыз . Ичиндеги текст аталышы катары чыгат жана анын номерине жараша, кичине же чоңураак көлөмдө чыгат.
  • Параграфтар: параграф а-нын ичинде тиркелет менен жабылат
  • шилтемелер: эң ачык мисал - Creativos Onlineго шилтеме
  • көрүнүш: биз аларды этикеткасы менен аныктайбыз . Мисал боло алат . Биз тырмакчалардын ортосундагы сүрөттү чагылдырабыз жана SEO үчүн зарыл болгон альтернатива текст үчүн alt колдонобуз.
  • тизмеси: биз тизмелерди аныктайбыз башаламандык үчүн жана менен тыкан үчүн. Тизме элементтери менен колдонулат . Аларды ар дайым тилке менен жабууну унутпаңыз.

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" жана а менен .

Кодду качан жана качан жакшылап карашыңыз маанилүү сиз функцияны ачып, аны тилке менен жабыңыз жараша.

Бир аз CSS

Биз CSSке бир аз киребиз, бирок сиз түшүнүшүңүз керек HTMLди кантип стилдештирүү керек. Келгиле, CSS менен HTML төмөндө табылган жөнөкөй веб-сайттарды берүү үчүн бири-бирине шайкеш келет.

Эгерде бизде бир жагынан HTML баш, же баш, анын макаласы, сүрөтү жана колонтитулу бар дене же тулку бойунча маанини колдонсо, CSS-те биз «Div» функциясын колдонуп, идентификация жүргүзөбүз кийинчерээк дизайндагы керектүү өзгөртүүлөрдү колдонуу үчүн ушул мейкиндиктердин ар бирине.

Сыяктуу жөнөкөй нерсе:

Веб семантикасы

Биз Div менен стилдерди колдонсо болот, ылайыктуу жана кемчиликсиз бир түзүлүш жардам берет ошентип, веб жөрмөлөгүчтөр биздин мазмун эмне жөнүндө экендигин "окуй" алышы үчүн, ошол негизги структурага ылайык иш кылсак, алгач эң сонун жумушка жана базага ээ болобуз.

Un жөнөкөй CSS мисалы:

h1 {
түс: ак;
текст тегиздөө: борбор;
}

Биз H1 жана текстти чакырабыз биз аны ак түскө боёп коёбуз: ак; биз аны борборго «тексттик тегиздөө» менен тегиздейбиз. H1 чалуудан кийин ар дайым төрт бурчтуу кашаа менен жабыңыз.

Сүрөттүн аталышы Greg rakozy


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

3 комментарий, өзүңүздүкүн калтырыңыз

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

  1.   Кристофер - веб-сайт ал мындай деди:

    Мен ошондой эле дизайнерликти аябай жакшы көрөм, дизайн дүйнөсүн көрүү үчүн жакшы баракча.

    Жакшы тилектер.

  2.   Хорхе ал мындай деди:

    Салам достор, кандайсыңар?

    HTML тилинде өтө жөнөкөй веб баракча жасап жатам жана ар бир басылмага комментарий кутучасын кошкум келет. Сиз муну кантип жасасаңыз болот?

  3.   Эмерсон ал мындай деди:

    Үч баскычы жана сүрөтү бар өтө жөнөкөй веб-баракчага жана кандай болгон күндө дагы оюнчуга муктаж болгондор ушул сыяктуу нерселер абдан пайдалуу болмок.
    Бирок мен бул маалымат менен өз баракчамды кура алам деп ишенбейм, бирок, жок дегенде, ал сизге идеяларды жана эмнелерди издөөнү сунуш кылат.