30 hihetetlenül egyszerű weboldal

A leghíresebb oldalak egy része nagyon tele van információkkal, de én inkább az ellenkezőjét szeretem: az egyszerűeket.

Nyilvánvaló, hogy ennek a csoportnak a legnagyobb képviselője a Google, minimalista kezdőlapjával, útja kezdete óta, de nyilvánvalóan nem az egyetlen az interneten elkötelezett a dolgok egyszerűségének megőrzése mellett.

Egyszerű HTML weboldalak

Kean richmond

Kean Richmond arra készteti a játékot, hogy kevés elemmel játszanánk, de nagyon jó helyzetben vagyunk nagyszerű érzést ad a minimalizmusnak. Logója a bal felső sarokban, a Twitter és a kapcsolati ikonok jobbra és középen, figyelemfelkeltő betűtípussal, amit csinál.

Link az internetre: Keanrich mond

Alice drougard

Alice drougard tartsa egyszerűvé a logóját is középen négy fül a weblap fő oldalai és egy fényképsorozat között, amelyek megfelelően helyezkednek el, így egy pillanat alatt tudjuk, mit csinálsz és mit csinálsz.

Link az internetre: Alice drougard

Jonathan ogden

Ogden Játssz tovább azzal, hogy a neved mennyire egyszerű logóként szerepel, a társadalmi hálózatok, amelyek közvetlenül a figyelem felkeltése nélkül helyezkednek el, és azok kialakítása úgy működik, hogy gyorsan át tudjuk őket haladni. Egy oldalon mindent megmutat, ami számít.

Link az internetre: Jonathan ogden

Pinty

Finch már más helyekre megy tipográfiával játszani és azokkal színek, amelyek eleganciát és bölcsességet jeleznek, amit csinál. Csak néhány elemmel minden profizmusát szem előtt tartva hagyja. Egyértelművé teszi azt is, hogy mely oldalak hivatkoztak rád.

Link az internetre: Pinty

Más kialakítás

Ez a weboldal másképp játszani. Használjon egy fejlécű háttérképet, amelyről a fő oldalakra, a telefonjára és a közösségi hálózatokra mutató linkekre léphetünk.

Link az internetre: Más kialakítás

fürge

Kai a saját alakjával illusztrál minket absztrakt háromszög és megfelelő színpaletta közelséget adni. Életrajzának egy részét kisebb betűkészlettel is kínálja, hátha többet akarunk tudni róla.

Link az internetre: fürge

Függőleges kerttervezés

Az előzőhöz hasonlóan a Vertical Garden Design is gyorsan megjelenő fénykép felé megy egyik legjobb munkahelye az oslói repülőtéren. A tetején van egy fejléc a «nav bar» vagy navigációs sávval, és még a nyelv megváltoztatásának lehetősége is. A logó függőleges formátumba helyezi, hogy az utolsó simítást egy nagyon egyszerű oldalhoz adja.

Link az internetre: Függőleges kerttervezés

247Grad

247Grad játék monokróm és háttérképpel szinte teljesen sötét. A fejléc betűtípusa, amely kisebb, mint a szöveg és a fejléc, nagybetűvel van ellátva, hogy nagy kontrasztot teremtsen a teljes tervben.

Link az internetre: 247Grad

Élvezd

egy a nagy tipográfia a hitelesség jele lehet és hogy tudjuk, mit csinálunk. Nem kell többet adnia, ha az üzenet közvetlen. Világossá teszik: imádnak gyönyörű alkalmazásokat és weboldalakat létrehozni. A projektek és tanulmányaik postáját egy másik linken hagyják.

Link az internetre: Élvezd

Allison hou

Allison visz minket más tanfolyamok előtt, és további képeket tartalmaz és az a "nőiesebb" betűtípus. Ugyanez vonatkozik a fő képedre és arra a fejlécre. Az a luxus, hogy bemutat egy kártyát, amely trükköket mutat be a vásárláshoz.

Link az internetre: Allison hou

pixelot

A Pixelot kissé őrült, de a szerző kreativitását is jelzi. Használat az egérmutatóval maszk létrehozásához hogy elmosódik, bárhol is üljön.

Link az internetre: pixelot

Lionel scholtes

Ha azt szeretné, tegye online önéletrajzát semmi mással, Lionel megmutatja a lépéseket. Megfelelő betűtípus, a fotó a bal felső sarokban, linkeket mutat a közösségi hálózatokra és a tapasztalatokra. Az egyetlen díszítő elem a két különböző színű vízszintes vonal.

Link az internetre: Lionel scholtes

Elegáns sirályok

Visszatérünk a minimalizmus eleganciájára és azokat a nagy üres tereket. Egyrészt a fejléc nagyon távol áll a többi elemtől, másrészt azok az elemek úgy vannak kialakítva, hogy nagy vizuális harmóniát teremtsenek közöttük.

Link az internetre: Elegáns sirályok

élőhely

Amint az összes példában láthatja, fontos a fejléc füleket a különböző oldalakra lépéshez a weboldalról. A tipográfia nagyon fontos, játsszon az egyik a fejléccel, a másik a szöveggel egy olyan sans serif-el, amely nagyszerű munkát végez.

Link az internetre: élőhely

PinkPoint

A színek kontrasztja az összes nézet kissé összetettebb hálózatához vezet. Nem mindegyik fő elem hiányzik játszani ezúttal a háttérkép színátmeneteivel és azzal a két szakaszsal, amelyek a színátmenet fő színeivel rendelkeznek a fő képhez.

Link az internetre: PinkPoint

IWC

Nagyszerű fénykép jól megválasztott betűtípus és "hős" elem adhatsz ennek a webnek. Egy csúszkával a munka egy része elképzelése szerint meglehetősen egyszerű.

Link az internetre: IWC

Chop chop

A digitális illusztráció Chop Chop-hoz vezet minket az a kép, amely megemészti annak minden vizuális jelenlétét. A fejléc kék színe megadja annak a pontját, hogy kromatikus értékeket hozzon létre az internet által vetített teljes képpel összhangban.

Link az internetre: Chop chop

7Fenyő

A 7Pine a zölddel játszik, hogy ő legyen a hazai tányér nagyszerű főszereplője. A többi komponálja egy kép sok zölddel és egyszerű fejléccel amit észrevenni akar a logó.

Link az internetre: 7Fenyő

Összege

Az Összeg más irányokba visz minket. Játssz a mesés fekete-fehérrel, ez egy nagyon kreatív illusztráció és ez együtt jár a többi elemmel és két másik illusztrációval, hogy több mint érdekes tájat teremtsen. Példa egy olyan webhely létrehozására, amely kiemelkedik a többi közül.

Link az internetre: Összege

kalapdoboz

A kék az a domináns szín ezen a weboldalon, amelyben nincsenek hiányzó képek, amelyeket teljesen megvilágítanak a fehérek, és milyen lenne a játék az adott webhely-készítő 3D-ben hogy mozog, ahogy haladunk.

Link az internetre: kalapdoboz

Kara lyte

Kara megy egyszerűség és minimalizmus természetes és gyönyörű jelenlétével a fényképeden. A többi egy szöveg, amely a fejléc fő elemeivel és egy hamburger gombbal érkezik.

Link az internetre: Kara lyte

Instrinsic Studio Marketing

Es a legegyszerűbb web de ez megmutatja nekünk, mi a blog létrehozása. A vörös és a fekete a főszereplő egy nagyon "blog" oldalon.

Link az internetre: Instrinsic Studio Marketing

Hogyan lehet egyszerű weboldalt létrehozni HTML-ben

Meg fogjuk tanítani hozzon létre egy egyszerű weboldalt HTML-ben hogy ismerje a legalapvetőbb elemeket, amelyek alkotják. Szükség lesz egy internetes hosztra, ahová betölthetjük a kódot és néhány módosítást a CSS-be, de gyerünk, ezek az alapelvek, amelyekkel HTML-ben kezdhetjük meg az utunkat.

Miután láttam néhányat egyszerű webes példák Amellyel eléggé motiválhatja magát ahhoz, hogy saját terveit készítse el anélkül, hogy sokat törné a fejét. Néha az egyszerű jobb hatást eredményez, mint bonyolítja a bonyolult dolgokat. Látni fogja, hogy a legtöbb esetben az egyszerű nagyon jól működik. Hajrá.

Egy egyszerű weboldal létrehozása HTML-ben könnyebb, mint amilyennek elsőre tűnhet. Egy weboldal fejlécből, a testből áll vagy tartalom, valamint a lábléc vagy a lábléc mint fő elem. Ilyen módon osztályozhatjuk őket:

• Dokumentumok: az összes dokumentumot, amelyet készíteni fogunk, a . A-val nyitunk és mindig a-val zár
• A test vagy a test: a dokumentum látható része között van Y
• Fejlécek: a H1, H2, H3 ismeri őket ... Kezdjük a-val és bezárunk egy . A benne lévő szöveg fejlécként jelenik meg, és számozásától függően kisebb vagy nagyobb méretben.
• Bekezdések: a bekezdést a és bezárul
• Linkek: a legvilágosabb példa azcreativosonline.org/»> Link ide Creativos Online
• ábrázolás: a címke alapján definiáljuk őket . Ilyen lehet például . Meghívjuk a képet az idézőjelek között, és alternatív szöveget használunk az alternatív szöveghez, amely elengedhetetlen a SEO számára.
• listák: a listákat a egy rendetlenért és egy ügyes. A listaelemeket együtt használják . Mindig ne felejtse el bezárni őket a bárral.

Ezekkel az elemekkel megvannak alapja egy egyszerű weboldal létrehozásának amint azt a jó mennyiségben látni fogja, hogy a következő részben megtanítjuk. Tegyük fel, hogy a szemantikai szerkezet a legfontosabb elemeivel így néz ki:

• Fejléc a navigációs sávjával a webhely különböző oldalaihoz.
• A cikk vagy a testtér amelyben létrehozhatunk egy blogbejegyzést, felrakhatjuk tananyagunkat vagy képet.
• Az oldalsáv vagy az oldalsáv hogy további információkat tegyen.
• A lábléc vagy a láb, ahol a webhely legfontosabb oldalaira mutató linkeket, valamint a közösségi hálózatok ikonjait helyezzük el (mindig példaként).

Az alább látható példákban mindez egyszerű, de elegáns logón alapul, fejléc, ahol elhelyezik a navigációt a webhely különböző oldalaira, egy központi tér, amelyet egy szöveg vagy kép ural, és a lábléc az előző bekezdésben említett elemekkel.

Azt javasoljuk ne törd a fejed és menj az egyszerű felé. A lényeg az, hogy ezek a területek másodpercek alatt vizuálisan elkülönüljenek a többitől. Idővel képesek leszünk bonyolultabbá tenni és több más teret is dolgozni.

ez világos példa egy HTML kódra a legfontosabb elemekkel:

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

Ezekkel a HTML kódsorokkal rendelkeznénk először létrehozta az oldal címét a fejlécben a, ebben az esetben «Szemantikus HTML», mindkét címet bezárnánk , a fejléc a és utat engednénk a test kinyitásához .

Lenne egy első fejléc a H1-ben hogy bezárja , és megyünk egy listához, amely segít nekünk létrehozni a navigációs sávot a webhelyünk különböző oldalaihoz. A listát azzal zártuk , közel vagyunk és végül a html dokumentum a .

Befejezni, mindig nyisson meg egy dokumentumot hogy a teljes kód végén bezárja a perjelet. A dokumentum kinyitása után mindig a nyelvre való hivatkozást kell használni, amely ebben az esetben spanyol "es" és a betűvel .

Fontos, hogy alaposan megnézze a kódot és bármikor megnyit egy funkciót, zárja be a sávval kell.

Egy kis CSS

Bemegyünk egy kicsit a CSS-be, de átmenetileg, hogy megértsd hogyan kell stilizálni a HTML-t. Tegyük fel, hogy a CSS és a HTML kéz a kézben adja meg azokat az egyszerű webhelyeket, amelyeket alább talál.

Ha egyrészt a HTML szemantikai használatát használjuk arra, hogy mi a fejléc vagy a fejléc, a törzs vagy törzs annak cikkével vagy képével, és a lábléc a CSS-ben a «Div» függvényt használnánk az azonosításhoz e terek mindegyikére annak érdekében, hogy később a szükséges változtatásokat alkalmazni lehessen a tervezésben.

Valami olyan egyszerű, mint:

Míg alkalmazhatjuk a stílusokat a Div alkalmazással, megfelelő és tökéletes szerkezet segít hogy a webrobotok tökéletesen "elolvashassák" a tartalmunkat, tehát ha ezt az alapvető struktúrát követjük, akkor először nagyszerű munkánk és alapunk lesz.

Un egyszerű CSS kód példa:

h1 {
szín: fehér;
text-align: központ;
}

Hívjuk a H1-et és a szöveget fehérbe tesszük színnel: fehér; és középre igazítjuk a «szöveg igazításával». A H1 hívás megnyitása után mindig zárójelekkel zárja le.

A fejléc fényképe Greg rakozy