30 pages Web incroyablement simples

Certaines des pages les plus connues sont très surchargées d'informations, mais je préfère le contraire: les simples.

Evidemment le grand représentant de ce groupe est Google avec sa page d'accueil minimaliste depuis qu'il a commencé son voyage, mais il est clair que ce n'est pas le seul sur Internet qui s'engage à garder les choses simples.

Exemples de pages Web HTML simples

kean richmond

Kean Richmond nous fait voir la simplicité de jouer avec peu d'éléments, mais très bien placé pour donne une grande sensation au minimalisme. Son logo en haut à gauche, Twitter et icônes de contact à droite et au centre, avec une typographie frappante, à ce qu'il est dédié.

Lien vers le Web: Keanrich mond

Alice drougard

Alice drougard restez simple aussi avec votre logo placé au centre, quatre onglets pour se déplacer entre les pages principales de votre site Web et une série de photographies placées de manière appropriée afin que nous sachions d'un coup d'œil ce que vous faites et ce que vous faites.

Lien vers le Web: Alice drougard

Jonathan Ogden

Ogden continuez à jouer avec la simplicité de votre nom en tant que logo, les réseaux sociaux situés juste en dessous sans attirer l'attention et leur design fonctionne pour que nous puissions les parcourir rapidement. Sur une page, il montre tout ce qui compte.

Lien vers le Web: Jonathan Ogden

Bouvreuil

Finch va déjà dans d'autres endroits pour jouer avec la typographie et ceux des couleurs qui dénotent l'élégance et la sagesse de ce qu'il fait. Avec seulement quelques éléments, il laisse tout son professionnalisme en vue. Il indique également clairement quelles pages vous sont liées.

Lien vers le Web: Bouvreuil

Un design différent

Ce site jouer différemment. Utilisez un fond d'écran avec un en-tête à partir duquel nous pouvons accéder aux pages principales, à votre téléphone et aux liens vers vos réseaux sociaux.

Lien vers le Web: Un design différent

rapide

Kai nous illustre avec sa propre figure avec un triangle abstrait et une palette de couleurs appropriée pour donner de la proximité. Il propose également une partie de sa biographie avec une police de taille plus petite au cas où nous voudrions en savoir plus sur lui.

Lien vers le Web: rapide

Conception de jardin vertical

Comme le précédent, Vertical Garden Design s'oriente vers une photographie qui montre rapidement l'un de ses meilleurs emplois à l'aéroport d'Oslo. En haut, nous avons l'en-tête avec la «barre de navigation» ou la barre de navigation et même la possibilité de changer de langue. Le logo le met dans un format vertical pour donner la touche finale à une page très simple.

Lien vers le Web: Conception de jardin vertical

247Grad

247Grad jouer avec le monochrome et une image de fond presque totalement sombre. La police d'en-tête, plus petite que le texte et l'en-tête, est en majuscule pour créer un grand contraste dans la conception générale.

Lien vers le Web: 247Grad

Profitez de cette

Une une bonne typographie peut être le signe d'être authentique et que nous savons ce que nous faisons. Vous n'avez rien à donner de plus si le message est direct. Ils le disent clairement: ils aiment créer de belles applications et sites Web. Ils laissent le mail pour les projets et leur étude dans un autre lien.

Lien vers le Web: Profitez de cette

Allison hou

Allison nous emmène avant les autres cours et comprend plus d'images et cette police de caractères plus «féminine». Il en va de même pour votre image principale et cet en-tête. Il a le luxe de présenter une carte montrant des astuces d'achat.

Lien vers le Web: Allison hou

Pixelelot

Pixelot est un peu fou, mais cela indique aussi la créativité de l'auteur. Utilisation le pointeur de la souris pour créer un masque cela s'estompe partout où nous l'avons perché.

Lien vers le Web: Pixelelot

Lionel scholtes

Si vous voulez créez votre CV en ligne avec rien de plus, Lionel vous montre les étapes. Une police adaptée, votre photo en haut à gauche, des liens vers vos réseaux sociaux et votre expérience. Le seul élément décoratif est ces deux lignes horizontales de couleurs différentes.

Lien vers le Web: Lionel scholtes

Mouettes élégantes

Nous retournons à l'élégance du minimalisme et ces grands espaces vides. D'une part, l'en-tête est très éloigné du reste des éléments, et d'autre part, ces éléments façonnés de manière à créer une grande harmonie visuelle entre eux.

Lien vers le Web: Mouettes élégantes

Habitat

Comme vous pouvez le voir dans tous les exemples, il est important les onglets d'en-tête pour accéder aux différentes pages du site Web. La typographie est d'une grande importance, jouez avec une pour l'en-tête et une autre pour le texte avec un sans empattement qui fait un excellent travail.

Lien vers le Web: Habitat

PointeRose

Le contraste des couleurs nous conduit à une toile légèrement plus complexe de toutes les vues. Tous ces éléments principaux ne manquent pas pour jouer cette fois avec les dégradés de l'image d'arrière-plan et ces deux sections qui ont les couleurs principales du dégradé de l'image principale.

Lien vers le Web: PointeRose

IWC

Une belle photo avec une police bien choisie et un élément "héros" vous pouvez donner à ce web. Avec un curseur, il montre qu'une partie de l'œuvre est assez simple dans sa conception.

Lien vers le Web: IWC

Et que ça saute

L'illustration numérique nous amène à Chop Chop avec cette image qui en ronge toute la présence visuelle. La couleur bleue dans l'en-tête lui donne son point de vue pour créer des valeurs chromatiques en phase avec l'image entière projetée par le web.

Lien vers le Web: Et que ça saute

7Pin

7Pine joue avec le green pour être le grand protagoniste du marbre. Le reste le compose une image avec beaucoup de vert et un en-tête simple qui veut passer inaperçu par le logo.

Lien vers le Web: 7Pin

La somme

La somme nous emmène dans d'autres directions. Jouez avec le noir et blanc légendaire, une illustration très créative et cela va de pair avec le reste des éléments et deux autres illustrations pour créer un paysage plus qu'intéressant. Un exemple pour créer un site Web qui se démarque des autres.

Lien vers le Web: La somme

Boîte à chapeaux

Le bleu est la couleur prédominante sur ce site Web dans lequel il n'y a pas d'images manquantes entièrement éclairées par le blanc et à quoi ressemblerait le jeu en 3D de ce constructeur de site qui bouge à mesure que nous bougeons.

Lien vers le Web: Boîte à chapeaux

Kara lyte

Kara va à simplicité et minimalisme avec sa présence naturelle et belle sur votre photo. Le reste est un texte qui accompagne les principaux éléments de l'en-tête et un bouton hamburger pour l'ouvrir.

Lien vers le Web: Kara lyte

Marketing Studio Instrinsic

Es du web le plus simple mais cela nous montre ce que c'est que de créer un blog. Le rouge et le noir sont les protagonistes d'un site très "blog".

Lien vers le Web: Marketing Studio Instrinsic

Comment créer un site Web simple en HTML

Nous allons vous apprendre créer un site Web simple en HTML afin que vous connaissiez les éléments les plus basiques qui le composent. Il sera nécessaire d'avoir un hébergeur où l'on pourra charger le code et quelques ajustements en CSS, mais bon, ce sont les principes pour commencer notre voyage en HTML.

Ayant vu certains exemples Web simples Avec lequel vous pouvez vous motiver suffisamment pour créer vos propres créations sans trop vous casser la tête. Parfois, le simple crée un meilleur effet que de nous compliquer dans des choses complexes. Vous verrez que dans la plupart des cas, le simple fonctionne très bien. Fonce.

Créer un site Web simple en HTML est plus facile qu'il n'y paraît au premier abord. Un site Web se compose d'un en-tête, le corps ou le contenu et le pied de page ou pied de page comme éléments principaux. Nous pouvons les classer de cette manière:

• Documents: tous les documents que nous allons créer doivent être réalisés avec un . Nous ouvrons avec un et ferme toujours avec un
• Le corps ou le corps: la partie visible du document se situe entre Oui
• En-têtes: ils sont connus par les H1, H2, H3 ... On commence par un et nous fermons avec un . Le texte qui se trouve à l'intérieur apparaîtra comme un en-tête et en fonction de sa numérotation, il le fera dans une taille plus petite ou plus grande.
• Les paragraphes: le paragraphe est entouré d'un et ferme avec
• Liens: l'exemple le plus clair estcreativosonline.org/»> Lien vers Creativos Online
• Imágenes: on les définit par le label . Un exemple serait . Nous invoquons l'image entre les guillemets et utilisons un alt pour le texte alternatif qui est essentiel pour le référencement.
• Listes: on définit les listes avec pour un désordonné et avec pour un net. Les éléments de liste sont utilisés avec . N'oubliez pas de toujours les fermer avec le bar.

Avec ces éléments, nous aurons la base pour créer un site Web simple comme vous le verrez dans la bonne quantité d'entre eux que nous vous apprendrons dans la section suivante. Disons que la structure sémantique avec ses éléments les plus importants ressemble à ceci:

• En-tête avec sa barre de navigation pour les différentes pages du site.
• L'article ou l'espace corporel dans lequel nous pouvons créer un article de blog, mettre notre CV ou une image.
• La barre latérale ou la barre latérale pour mettre des informations supplémentaires.
• Le pied de page ou le pied, où nous placerons des liens vers les pages les plus importantes du site ainsi que les icônes des réseaux sociaux (toujours à titre d'exemple).

Dans les exemples que vous verrez ci-dessous sont le tout basé sur un logo simple mais élégant, un en-tête où ils placent la navigation vers les différentes pages du site, un espace central dominé par un texte ou une image et un pied de page avec les éléments mentionnés dans le paragraphe précédent.

Nous recommandons que ne te casse pas la tête et va au simple. L'essentiel est que ces zones se différencient des autres en un temps visuel de quelques secondes. Avec le temps, nous pourrons nous compliquer et travailler plus d'autres espaces.

C'est un exemple clair de code HTML avec les éléments les plus importants:

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

Avec ces lignes de code HTML, nous aurions a d'abord créé le titre de la page dans l'en-tête avec, dans ce cas «HTML sémantique», on fermerait à la fois le titre avec , l'en-tête avec et nous céderions la place pour ouvrir le corps avec .

Nous aurions un premier en-tête dans H1 avec pour le fermer avec , et nous irions à une liste qui nous aiderait à créer la barre de navigation pour les différentes pages de notre site. Nous fermons la liste avec , nous fermons et enfin le document html avec .

Enfin, ouvrez toujours un document avec pour le fermer à la fin du code entier avec la barre oblique. Après l'ouverture du document, la référence à la langue est toujours utilisée, qui dans ce cas est l'espagnol avec "es" et avec un .

Il est important que vous regardiez attentivement le code et à chaque fois vous ouvrez une fonction fermez-la avec la barre concerné.

Un peu de CSS

On rentre un peu dans le CSS, mais au passage pour que tu comprennes comment styliser du HTML. Disons que CSS et HTML vont de pair pour donner ces sites Web simples que vous trouverez ci-dessous.

Si d'une part on a l'usage sémantique du HTML pour ce qu'est l'en-tête, le corps ou le corps avec son article ou image et le pied de page, en CSS nous utiliserions la fonction «Div» pour identifier à chacun de ces espaces afin d'appliquer ultérieurement les changements nécessaires dans la conception.

Quelque chose d'aussi simple que:

Bien que nous puissions appliquer les styles avec Div, une structure adaptée et parfaite aidera afin que les robots d'exploration puissent «lire» parfaitement ce qu'est notre contenu, donc si nous suivons cette structure de base, nous aurons d'abord un excellent travail et une excellente base.

Un exemple de code CSS simple:

h1 {
Couleur: blanc;
text-align: centre;
}

Nous appelons H1 et le texte nous le mettrons en blanc avec la couleur: blanc; et nous l'alignerons au centre avec «text align». Fermez toujours avec des crochets après l'ouverture de l'appel H1.

Photo d'en-tête de Greg rakozy