30 Unglaublich einfache Webseiten

Einige der bekanntesten Seiten sind sehr mit Informationen überladen, aber ich bevorzuge das Gegenteil: die einfachen.

Offensichtlich ist Google mit seiner minimalistischen Homepage seit Beginn seiner Reise der große Vertreter dieser Gruppe. Aber es ist eindeutig nicht die einzige im Internet, die sich dafür einsetzt, die Dinge einfach zu halten.

Einfache Beispiele für HTML-Webseiten

Kean Richmond

Kean Richmond lässt uns die Einfachheit des Spielens mit wenigen Elementen erkennen, die aber sehr gut platziert sind Geben Sie dem Minimalismus ein großartiges Gefühl. Sein Logo oben links, die Twitter- und Kontaktsymbole rechts und in der Mitte mit einer auffälligen Typografie, was er tut.

Link zum Web: Keanrich Mond

Alice drougard

Alice drougard Halte es einfach, auch wenn dein Logo platziert ist In der Mitte befinden sich vier Registerkarten zum Wechseln zwischen den Hauptseiten Ihrer Website und einer Reihe von Fotos, die ordnungsgemäß platziert sind, sodass wir auf einen Blick wissen, was Sie tun und was Sie tun.

Link zum Web: Alice drougard

Jonathan Oggen

Ogden Spielen Sie weiter damit, wie einfach Ihr Name als Logo istDie sozialen Netzwerke befinden sich direkt darunter, ohne Aufmerksamkeit zu erregen, und ihr Design funktioniert so, dass wir sie schnell durchgehen können. Auf einer Seite zeigt es alles, was zählt.

Link zum Web: Jonathan Oggen

Finch

Finch geht bereits zu anderen Orten, um mit Typografie und solchen zu spielen Farben, die Eleganz und Weisheit dessen bezeichnen, was es tut. Mit nur wenigen Elementen lässt er seine ganze Professionalität im Blick. Außerdem wird deutlich, welche Seiten mit Ihnen verlinkt sind.

Link zum Web: Finch

Ein anderes Design

Diese Internetseite anders spielen. Verwenden Sie ein Hintergrundbild mit einer Kopfzeile, von der aus wir zu den Hauptseiten, Ihrem Telefon und den Links zu Ihren sozialen Netzwerken gelangen können.

Link zum Web: Ein anderes Design

Brizki

Kai illustriert uns mit seiner eigenen Figur mit ein abstraktes Dreieck und eine geeignete Farbpalette Nähe geben. Er bietet auch einen Teil seiner Biografie mit einer Schrift in kleinerer Größe an, falls wir mehr über ihn erfahren möchten.

Link zum Web: Brizki

Vertikale Gartengestaltung

Wie das vorherige geht Vertical Garden Design auf ein Foto zu, das schnell zeigt einer seiner besten Jobs am Flughafen Oslo. Oben haben wir die Überschrift mit der «Navigationsleiste» oder Navigationsleiste und sogar die Möglichkeit, die Sprache zu ändern. Das Logo stellt es in vertikales Format, um einer sehr einfachen Seite den letzten Schliff zu geben.

Link zum Web: Vertikale Gartengestaltung

247Grad

247Grad spielen Sie mit Monochrom und einem Hintergrundbild fast völlig dunkel. Die Header-Schriftart, die kleiner als Text und Header ist, wird großgeschrieben, um einen großen Kontrast im Gesamtdesign zu erzielen.

Link zum Web: 247Grad

Genießen Sie diese

Eine Gute Typografie kann ein Zeichen für Authentizität sein und dass wir wissen, was wir tun. Sie müssen nichts mehr geben, wenn die Nachricht direkt ist. Sie machen es sehr deutlich: Sie lieben es, schöne Apps und Websites zu erstellen. Sie hinterlassen die Mail für Projekte und ihr Studium in einem anderen Link.

Link zum Web: Genießen Sie diese

Allison hou

Allison nimmt uns mit vor anderen Kursen und enthält mehr Bilder und diese eher "weibliche" Schrift. Gleiches gilt für Ihr Hauptbild und diesen Header. Er hat den Luxus, eine Karte mit Einkaufstricks zu präsentieren.

Link zum Web: Allison hou

Pixelelot

Pixelot ist ein bisschen verrückt, zeigt aber auch die Kreativität des Autors. Benutzen den Mauszeiger, um eine Maske zu erstellen das verschwimmt, wo immer wir es haben.

Link zum Web: Pixelelot

Lionel scholtes

Wenn Sie eine Machen Sie Ihren Lebenslauf online mit nichts weiter als demLionel zeigt Ihnen die Schritte. Eine geeignete Schriftart, Ihr Foto oben links, verweist auf Ihre sozialen Netzwerke und Ihre Erfahrungen. Das einzige dekorative Element sind diese zwei horizontalen Linien in verschiedenen Farben.

Link zum Web: Lionel scholtes

Elegante Möwen

Wir kehren zurück zur Eleganz des Minimalismus und diese großen Leerzeichen. Einerseits ist die Kopfzeile sehr weit vom Rest der Elemente entfernt, andererseits sind diese Elemente so geformt, dass sie eine große visuelle Harmonie zwischen ihnen erzeugen.

Link zum Web: Elegante Möwen

Lebensraum

Wie Sie in allen Beispielen sehen können, ist dies wichtig die Kopfzeilen-Registerkarten, um zu den verschiedenen Seiten zu gelangen von der Website. Die Typografie ist von großer Bedeutung. Spielen Sie mit einer für die Überschrift und einer für den Text mit einer serifenlosen Schrift, die hervorragende Arbeit leistet.

Link zum Web: Lebensraum

PinkPoint

Der Kontrast der Farben führt uns zu einem etwas komplexeren Netz aller Ansichten. Nicht alle diese Hauptelemente fehlen diesmal mit den Verläufen für das Hintergrundbild und den beiden Abschnitten zu spielen, die die Hauptfarben des Verlaufs für das Hauptbild haben.

Link zum Web: PinkPoint

IWC

Ein tolles Foto mit eine gut gewählte Schriftart und ein "Helden" -Element Sie können diesem Web geben. Mit einem Schieberegler zeigt es, dass ein Teil der Arbeit in seiner Konzeption recht einfach ist.

Link zum Web: IWC

Hacken Hacken

Digitale Illustration führt uns zu Chop Chop mit dieses Bild, das die gesamte visuelle Präsenz davon auffrisst. Die blaue Farbe in der Kopfzeile gibt ihm die Möglichkeit, chromatische Werte im Einklang mit dem gesamten vom Web projizierten Bild zu erstellen.

Link zum Web: Hacken Hacken

7Kiefer

7Pine spielt mit dem Grün, um der große Protagonist der Home Plate zu sein. Der Rest komponiert es ein Bild mit viel Grün und einer einfachen Überschrift das will vom logo unbemerkt bleiben.

Link zum Web: 7Kiefer

Die Summe

Die Summe führt uns in andere Richtungen. Spielen Sie mit dem sagenumwobenen Schwarz-Weiß, einer sehr kreativen Illustration und das geht zusammen mit dem Rest der Elemente und zwei anderen Illustrationen, um eine mehr als interessante Landschaft zu schaffen. Ein Beispiel für die Erstellung einer Website, die sich von den anderen abhebt.

Link zum Web: Die Summe

Hutschachtel

Blau ist die vorherrschende Farbe auf dieser Website, in der keine Bilder fehlen, die vollständig von Weiß beleuchtet werden, und wie das Spiel aussehen würde in 3D dieses Site Builders das bewegt sich wie wir uns bewegen.

Link zum Web: Hutschachtel

Kara lyte

Kara geht zu Einfachheit und Minimalismus mit seiner natürlichen und schönen Präsenz auf Ihrem Foto. Der Rest ist ein Text, der die Hauptelemente für die Kopfzeile und eine Hamburger-Schaltfläche zum Öffnen enthält.

Link zum Web: Kara lyte

Intrinsisches Studiomarketing

Es des einfachsten Web aber das zeigt uns, was es heißt, einen Blog zu machen. Rot und Schwarz sind die Protagonisten einer sehr "Blog" -Seite.

Link zum Web: Intrinsisches Studiomarketing

So erstellen Sie eine einfache Website in HTML

Wir werden dich unterrichten Erstellen Sie eine einfache Website in HTML damit Sie die grundlegendsten Elemente kennen, aus denen es besteht. Es wird notwendig sein, einen Webhost zu haben, auf dem wir den Code und einige Verbesserungen in CSS laden können, aber komm schon, dies sind die Prinzipien, um unsere Reise in HTML zu beginnen.

Einige gesehen zu haben einfache Webbeispiele Mit denen Sie sich genug motivieren können, um Ihre eigenen Designs zu erstellen, ohne sich den Kopf zu brechen. Manchmal erzeugt das Einfache eine bessere Wirkung, als uns in komplexen Dingen zu komplizieren. Sie werden sehen, dass das Einfache in den meisten Fällen sehr gut funktioniert. Tue es.

Das Erstellen einer einfachen Website in HTML ist einfacher, als es zunächst scheinen mag. Eine Website besteht aus einem Header, dem Body oder Inhalt und die Fußzeile oder Fußzeile als Hauptelemente. Wir können sie folgendermaßen klassifizieren:

• Dokumente: Alle Dokumente, die wir erstellen werden, müssen mit a erstellt werden . Wir eröffnen mit einem und schließt immer mit einem
• Der Körper oder Körper: Der sichtbare Teil des Dokuments befindet sich zwischen Y.
• Kopfzeilen: sie sind bekannt durch die H1, H2, H3 ... Wir beginnen mit a und wir schließen mit einem . Der darin enthaltene Text wird als Überschrift angezeigt und je nach Nummerierung in kleinerer oder größerer Größe.
• Absätze: Der Absatz ist in a eingeschlossen und schließt mit
• Links: Das deutlichste Beispiel istcreativosonline.org/»> Link zu Creativos Online
• Metaphorik: Wir definieren sie durch das Etikett . Ein Beispiel wäre . Wir rufen das Bild zwischen den Anführungszeichen auf und verwenden ein Alt für den alternativen Text, der für SEO wesentlich ist.
• Listen: Wir definieren die Listen mit für eine unordentliche und mit für eine ordentliche. Listenelemente werden mit verwendet . Denken Sie immer daran, sie mit der Leiste zu schließen.

Mit diesen Elementen werden wir haben die Basis für die Erstellung einer einfachen Website Wie Sie in der guten Menge sehen werden, werden wir Sie im nächsten Abschnitt unterrichten. Nehmen wir an, die semantische Struktur mit ihren wichtigsten Elementen sieht folgendermaßen aus:

• Kopfzeile mit Navigationsleiste für die verschiedenen Seiten der Website.
• Der Artikel oder Körperraum in dem wir einen Blog-Beitrag erstellen, unseren Lebenslauf oder ein Bild einfügen können.
• Die Seitenleiste oder Seitenleiste zusätzliche Informationen zu setzen.
• Die Fußzeile oder der FußHier platzieren wir Links zu den wichtigsten Seiten der Website sowie zu den Symbolen sozialer Netzwerke (immer als Beispiel).

In den Beispielen, die Sie unten sehen werden, sind Alles basiert auf einem einfachen, aber eleganten Logo, eine Kopfzeile, in der die Navigation zu den verschiedenen Seiten der Website platziert wird, ein zentraler Bereich, der von einem Text oder Bild dominiert wird, und eine Fußzeile mit den im vorherigen Absatz genannten Elementen.

Wir empfehlen das Brich dir nicht den Kopf und gehe zum Einfachen. Hauptsache, diese Bereiche unterscheiden sich in Sekundenschnelle vom Rest. Mit der Zeit werden wir uns komplizieren und mehr andere Räume bearbeiten können.

Dies ist Ein klares Beispiel für einen HTML-Code mit den wichtigsten Elementen:

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

Mit diesen Zeilen HTML-Code hätten wir Zuerst wurde der Seitentitel in der Kopfzeile mit erstelltIn diesem Fall «Semantic HTML» würden wir beide Titel mit schließen , der Header mit und wir würden nachgeben, um den Körper mit zu öffnen .

Wir hätten eine erster Header in H1 mit um es mit zu schließen und wir würden zu einer Liste gehen, die uns helfen würde, die Navigationsleiste für die verschiedenen Seiten unserer Site zu erstellen. Wir schließen die Liste mit , wir schließen und schließlich das HTML-Dokument mit .

Schließlich Öffnen Sie immer ein Dokument mit um es am Ende des gesamten Codes mit dem Schrägstrich zu schließen. Nach dem Öffnen des Dokuments wird immer der Verweis auf die Sprache verwendet, in diesem Fall Spanisch mit "es" und mit a .

Es ist wichtig, dass Sie sich den Code genau ansehen und wann immer Sie öffnen eine Funktion und schließen sie mit der Leiste entspricht.

Ein bisschen CSS

Wir gehen ein wenig auf das CSS ein, aber im Vorbeigehen, damit Sie verstehen wie man HTML stylt. Nehmen wir an, CSS und HTML gehen Hand in Hand, um die einfachen Websites zu erstellen, die Sie unten finden.

Wenn wir einerseits die semantische Verwendung von HTML für den Header, den Body oder Body mit seinem Artikel oder Bild und die Fußzeile haben, In CSS würden wir die Funktion «Div» verwenden, um zu identifizieren auf jeden dieser Räume, um später die notwendigen Änderungen im Design anzuwenden.

Etwas so Einfaches wie:

Während wir die Stile mit Div anwenden können, Eine geeignete und perfekte Struktur wird helfen Damit Webcrawler perfekt "lesen" können, worum es in unseren Inhalten geht. Wenn wir also dieser Grundstruktur folgen, haben wir zuerst einen großartigen Job und eine großartige Basis.

Un einfaches CSS-Codebeispiel:

h1 {
Farbe: Weiß;
text-align: Zentrum;
}

Wir nennen H1 und den Text wir werden es in Weiß mit der Farbe setzen: weiß; und wir werden es mit «text align» auf die Mitte ausrichten. Schließen Sie nach dem Öffnen des H1-Anrufs immer mit Klammern.

Header Foto von Gregor Rakozy