30 uskomattoman yksinkertaista verkkosivua

Jotkut tunnetuimmista sivuista ovat hyvin ylikuormitettuja tiedoilla, mutta pidän parempana päinvastaisesta: yksinkertaisista.

On selvää, että tämän ryhmän suuri eksponentti on Google ja sen minimalistinen kotisivu matkan alusta lähtien, Mutta selvästi se ei ole ainoa Internetissä sitoutunut pitämään asiat yksinkertaisina.

Yksinkertaisia ​​HTML-verkkosivujen esimerkkejä

Kean richmond

Kean Richmond saa meidät näkemään pelaamisen yksinkertaisuuden muutamalla elementillä, mutta erittäin hyvällä paikalla antaa hienon tunteen minimalismille. Hänen logonsa vasemmassa yläkulmassa, Twitter ja kontaktikuvakkeet oikealla ja keskellä, silmiinpistävä typografia, sille, mitä hän on omistautunut.

Linkki verkkoon: Keanrich mond

Alice drougard

Alice drougard Pidä se yksinkertaisena myös asettamalla logosi keskellä neljä välilehteä siirtyäksesi verkkosivustosi pääsivujen ja oikein asetettujen valokuvasarjojen välillä niin, että yhdellä silmäyksellä tiedämme, mitä teet ja mitä teet.

Linkki verkkoon: Alice drougard

Jonathan ogden

Ogden jatka pelaamista kuinka yksinkertainen nimesi on logo, juuri alapuolella olevat sosiaaliset verkostot houkuttelematta huomiota ja niiden suunnittelu toimii, jotta voimme käydä ne nopeasti läpi. Yhdellä sivulla se näyttää kaiken tärkeän.

Linkki verkkoon: Jonathan ogden

Peippo

Finch on jo menossa muihin paikkoihin pelaamaan typografiaa ja niitä värit, jotka merkitsevät eleganssia ja viisautta sen tekemisessä. Vain muutamalla elementillä hän jättää kaiken ammattitaitonsa näkyviin. Se tekee myös selväksi, mitkä sivut ovat linkittäneet sinulle.

Linkki verkkoon: Peippo

Erilainen muotoilu

Tämä verkkosivusto pelata eri tavalla. Käytä otsikkoa sisältävää taustakuvaa, josta voimme siirtyä pääsivulle, puhelimeesi ja linkkeihin sosiaalisiin verkostoihisi.

Linkki verkkoon: Erilainen muotoilu

reipas

Kai kuvaa meitä omalla hahmollaan abstrakti kolmio ja sopiva väripaletti antaa läheisyyttä. Hän tarjoaa myös osan elämästään pienemmällä kirjasimella, jos haluamme tietää enemmän hänestä.

Linkki verkkoon: reipas

Pystysuora puutarhan suunnittelu

Kuten edellinen, Vertical Garden Design menee kohti valokuvaa, joka näkyy nopeasti yksi parhaista työpaikoistaan ​​Oslon lentokentällä. Yläosassa on otsikko «nav bar» tai navigointipalkki ja jopa mahdollisuus vaihtaa kieltä. Logo asettaa sen pystysuoraan muotoon, jotta viimeinen kosketus saadaan aikaan hyvin yksinkertaisella sivulla.

Linkki verkkoon: Pystysuora puutarhan suunnittelu

247Grad

247Grad pelata yksivärisellä ja taustakuvalla melkein täysin pimeä. Otsikon kirjasin, pienempi kuin teksti ja otsikko, isoilla kirjaimilla tuottaa suuren kontrastin kokonaissuunnittelussa.

Linkki verkkoon: 247Grad

Nauti tästä

Una loistava typografia voi olla merkki aitoudesta ja että tiedämme mitä teemme. Sinun ei tarvitse antaa mitään muuta, jos viesti on suora. He tekevät siitä erittäin selvän: he rakastavat luoda kauniita sovelluksia ja verkkosivustoja. He jättävät postin projektiin ja tutkimukseensa toiseen linkkiin.

Linkki verkkoon: Nauti tästä

Allison hou

Allison vie meidät ennen muita kursseja ja sisältää enemmän kuvia ja tuo "naisellisempi" kirjasinlaji. Sama koskee pääkuvaa ja sitä otsikkoa. Hänellä on ylellisyyttä esittää kortti, joka näyttää temppuja ostoksille.

Linkki verkkoon: Allison hou

pixelot

Pixelot on vähän hullu, mutta se osoittaa myös tekijän luovuuden. Käyttää hiiren osoittimella peitteen luomiseksi joka hämärtyy missä tahansa.

Linkki verkkoon: pixelot

Lionel scholtes

Jos haluat tee ansioluettelosi verkossa ilman muuta, Lionel näyttää vaiheet. Sopiva fontti, valokuvasi vasemmassa yläkulmassa, linkit sosiaalisiin verkostoihisi ja kokemuksiisi. Ainoa koriste-elementti ovat nämä kaksi eriväristä vaakasuoraa viivaa.

Linkki verkkoon: Lionel scholtes

Tyylikäs lokki

Palaamme minimalismin eleganssille ja nuo suuret tyhjät tilat. Yhtäältä otsikko on hyvin kaukana muista elementeistä, ja toisaalta nämä elementit on muotoiltu siten, että ne luovat suuren visuaalisen harmonian niiden välillä.

Linkki verkkoon: Tyylikäs lokki

elinympäristö

Kuten näet kaikista esimerkeistä, se on tärkeää otsikkovälilehdet siirtyäksesi eri sivuille verkkosivustolta. Typografialla on suuri merkitys, pelaa yhdessä otsikossa ja toisessa tekstissä sans-serifillä, joka tekee hyvää työtä.

Linkki verkkoon: elinympäristö

PinkPoint

Värien kontrasti johtaa meidät hieman monimutkaisempaan verkkoon kaikista näkymistä. Kaikki nämä pääelementit eivät puutu pelata tällä kertaa taustakuvan kaltevuuksilla ja niillä kahdella osalla, joilla on pääkuvan kaltevuuden päävärit.

Linkki verkkoon: PinkPoint

IWC

Upea valokuva hyvin valittu fontti ja "sankari" -elementti voit antaa tälle verkolle. Liukusäätimellä se näyttää osan työstä olevan melko yksinkertainen.

Linkki verkkoon: IWC

Hopi hopi

Digitaalinen kuvitus johtaa meidät Chop Chopiin tuo kuva, joka syö kaiken sen visuaalisen läsnäolon. Otsikon sininen väri antaa sille tehtävän luoda kromaattiset arvot sopusoinnussa koko verkon projisoimaan kuvaan.

Linkki verkkoon: Hopi hopi

7Mänty

7Pine pelaa vihreällä ollakseen kotilevyn suuri päähenkilö. Loput säveltää sen kuva, jossa on paljon vihreää ja yksinkertainen otsikko joka haluaa olla huomaamatta logo.

Linkki verkkoon: 7Mänty

Summa

Summa vie meidät muihin suuntiin. Pelaa mustavalkoisilla, erittäin luovilla kuvilla ja se liittyy muiden elementtien ja kahden muun piirroksen kanssa luomaan enemmän kuin mielenkiintoinen maisema. Esimerkki verkkosivuston luomisesta, joka erottuu muista.

Linkki verkkoon: Summa

Hattulaatikko

Sininen on hallitseva väri tällä sivustolla, jossa ei ole puuttuvia kuvia, jotka olisi täysin valaistu valkoisella ja millainen peli olisi kyseisen sivuston rakentajan 3D-muodossa joka liikkuu kun liikumme.

Linkki verkkoon: Hattulaatikko

Kara lyte

Kara menee yksinkertaisuus ja minimalismi luonnollisella ja kauniilla läsnäolollaan valokuvassasi. Loput on teksti, joka tulee yhdessä otsikon ja hampurilaispainikkeen pääelementtien kanssa sen avaamiseksi.

Linkki verkkoon: Kara lyte

Instrinsic Studio -markkinointi

Es yksinkertaisin verkko mutta se näyttää meille, mitä blogin tekeminen on. Punainen ja musta ovat päähenkilöitä hyvin "blogi" -sivustossa.

Linkki verkkoon: Instrinsic Studio -markkinointi

Kuinka luoda yksinkertainen verkkosivusto HTML-muodossa

Aiomme opettaa sinulle luoda yksinkertainen verkkosivusto HTML-muodossa niin että tiedät kaikkein peruselementit, jotka säveltävät sen. Tarvitaan web-isäntä, johon voimme ladata koodin ja joitain parannuksia CSS: ään, mutta tule, nämä ovat periaatteet, joiden avulla voimme aloittaa matkamme HTML-muodossa.

Nähnyt joitain yksinkertaisia ​​web-esimerkkejä Millä avulla voit motivoida itseäsi tarpeeksi tekemään omia mallejasi rikkomatta päätäsi paljon. Joskus yksinkertainen luo paremman vaikutuksen kuin monimutkaistaa meitä monimutkaisissa asioissa. Tulet huomaamaan, että useimmissa tapauksissa yksinkertainen toimii hyvin. Anna palaa.

Yksinkertaisen verkkosivuston luominen HTML-muodossa on helpompaa kuin se saattaa aluksi tuntua. Nettisivu koostuu otsikosta, rungosta tai alatunniste tai alatunniste pääelementteinä. Voimme luokitella ne tällä tavalla:

• Dokumentit: kaikki asiakirjat, jotka aiomme luoda, on tehtävä a . Avaamme a ja sulkeutuu aina a: lla
• Keho tai keho: asiakirjan näkyvä osa on välissä Y
• päädyt: ne tunnetaan H1, H2, H3 ... Aloitetaan a ja lopetamme a . Sisällä oleva teksti näkyy otsikkona ja sen numeroinnista riippuen se tehdään pienemmässä tai suuremmassa koossa.
• Kappaleet: kappale on liitetty kohtaan a ja sulkeutuu
• Enlaces: Selkein esimerkki oncreativosonline.org/»> Linkki Creativos Online
• Kuvakieli: määritämme ne tunnisteella . Esimerkki olisi . Otamme kuvan lainausmerkkien väliin ja käytämme vaihtoehtoista tekstiä, joka on välttämätön SEO: lle.
• luettelot: määritämme luettelot sotkuisen ja kanssa siistille. Luettelokohteita käytetään . Muista aina sulkea ne baarilla.

Näiden elementtien avulla meillä on perusta yksinkertaisen verkkosivuston luomiselle kuten huomaat suuressa määrässä niitä, jotka opetamme sinulle seuraavassa osassa. Sanotaan, että semanttirakenne ja sen tärkeimmät elementit näyttävät tältä:

• Otsikko ja sen navigointipalkki sivuston eri sivuille.
• Tuote tai ruumiin tila johon voimme luoda blogimerkinnän, laittaa opetussuunnitelmamme tai kuvan.
• Sivupalkki tai sivupalkki lisätä lisätietoja.
• Alatunniste tai jalka, johon sijoitamme linkit sivuston tärkeimmille sivuille sekä sosiaalisten verkostojen kuvakkeet (aina esimerkkinä).

Alla olevissa esimerkeissä Kaikki perustuvat yksinkertaiseen, mutta tyylikkääseen logoon, otsikko, johon he sijoittavat navigoinnin sivuston eri sivuille, keskitila, jota hallitsee teksti tai kuva, ja alatunniste, jossa on edellisessä kappaleessa mainitut elementit.

Suosittelemme sitä älä riko päätäsi ja mene yksinkertaiseen. Tärkeintä on, että nämä alueet erotetaan toisistaan ​​visuaalisen sekunnin kuluessa. Ajan myötä voimme vaikeuttaa itseämme ja työskennellä enemmän muita tiloja.

Tämä on selkeä esimerkki HTML-koodista tärkeimmillä elementeillä:

<!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>

Näillä HTML-koodiriveillä meillä olisi luonut sivun otsikon ensin otsikossa, tässä tapauksessa «Semantic HTML», sulkisimme molemmat otsikot , otsikko painikkeella ja annamme tien avata keho .

Meillä olisi ensimmäinen otsikko H1: ssä sulkea se , ja menisimme luetteloon, joka auttaisi meitä luomaan navigointipalkin sivustomme eri sivuille. Lopetamme luettelon , me suljemme ja lopuksi html-tiedosto .

Lopuksi avaa asiakirja aina sulje se koko koodin lopussa kauttaviivalla. Asiakirjan avaamisen jälkeen käytetään aina viittausta kieleen, joka tässä tapauksessa on espanja, jossa on "es" ja a .

On tärkeää, että tarkastelet koodia tarkkaan ja milloin tahansa avaat toiminnon, sulje se palkin avulla vastaavasti.

Hieman CSS: ää

Menemme CSS: ään hieman, mutta ohimennen niin, että ymmärrät miten muotoilla HTML. Oletetaan, että CSS ja HTML kulkevat käsi kädessä antamaan niille yksinkertaisille verkkosivustoille, jotka löydät alla.

Jos toisaalta meillä on HTML: n semanttinen käyttö, mikä on otsikko tai otsikko, runko tai runko sen artikkelilla tai kuvalla ja alatunniste, CSS: ssä käytämme tunnistamiseen toimintoa «Div» kuhunkin näistä tiloista, jotta myöhemmin voidaan tehdä tarvittavat muutokset suunnitteluun.

Jotain niin yksinkertaista kuin:

Vaikka voimme käyttää tyylejä Div: n kanssa, sopiva ja täydellinen rakenne auttaa jotta indeksointirobotit voivat täydellisesti "lukea" mitä sisällössämme on, joten jos noudatamme tätä perusrakennetta, meillä on hyvä työ ja perusta ensin.

Un yksinkertainen CSS-koodiesimerkki:

h1 {
väri: valkoinen;
text-align: keskusta;
}

Kutsumme H1: tä ja tekstiä laitamme sen valkoiseksi värillä: valkoinen; ja kohdistamme sen keskelle tekstin tasauksen kanssa. Sulje aina suluilla, kun olet avannut H1-puhelun.

Otsikkokuva Greg rakozy