30 niesamowicie prostych stron internetowych

Niektóre z najbardziej znanych stron są bardzo przeładowane informacjami, ale ja wolę coś odwrotnego: te proste.

Oczywiście wielkim przedstawicielem tej grupy jest Google ze swoją minimalistyczną stroną główną od początku swojej podróży, Ale najwyraźniej nie jest to jedyna firma w Internecie, której zależy na prostocie.

Proste przykłady stron internetowych HTML

Keana Richmonda

Kean Richmond sprawia, że ​​widzimy prostotę grania z kilkoma elementami, ale bardzo dobrze do tego ustawionych dają wspaniałe wrażenie minimalizmowi. Jego logo w lewym górnym rogu, Twitter i ikony kontaktów po prawej i pośrodku, z efektowną typografią, temu, czemu jest poświęcony.

Link do sieci: Keanrich mond

Alicja drougard

Alicja drougard zachowaj prostotę również z umieszczonym logo pośrodku cztery zakładki do poruszania się pomiędzy głównymi stronami Twojej witryny oraz seria fotografii umieszczonych odpowiednio, abyśmy na pierwszy rzut oka wiedzieli, co robisz i co robisz.

Link do sieci: Alicja drougard

jonathan ogden

Ogden baw się dalej z tym, jak proste jest Twoje imię jako logo, sieci społecznościowe znajdujące się tuż poniżej bez przyciągania uwagi, a ich projekt działa tak, że możemy szybko przez nie przejść. Na jednej stronie pokazuje wszystko, co ma znaczenie.

Link do sieci: jonathan ogden

Zięba

Finch już jeździ w inne miejsca, żeby bawić się typografią i tamtymi kolory, które oznaczają elegancję i mądrość tego, co robi. Mając tylko kilka elementów, pozostawia na widoku cały swój profesjonalizm. Wyjaśnia również, które strony zawierają linki do Ciebie.

Link do sieci: Zięba

Inny projekt

Ta strona internetowa grać inaczej. Użyj tapety z nagłówkiem, z którego możemy przejść do stron głównych, telefonu i linków do sieci społecznościowych.

Link do sieci: Inny projekt

energiczny

Kai ilustruje nas swoją własną postacią z abstrakcyjny trójkąt i odpowiednia paleta kolorów dawać bliskość. Oferuje również część swojej biografii z mniejszą czcionką, na wypadek gdybyśmy chcieli dowiedzieć się o nim więcej.

Link do sieci: energiczny

Pionowy projekt ogrodu

Podobnie jak poprzednie, Vertical Garden Design zmierza w kierunku fotografii, która pokazuje się szybko jedno z jego najlepszych miejsc pracy na lotnisku w Oslo. U góry mamy nagłówek z «paskiem nawigacyjnym» lub paskiem nawigacyjnym, a nawet możliwością zmiany języka. Logo umieszcza go w formacie pionowym, aby nadać ostateczny akcent bardzo prostej stronie.

Link do sieci: Pionowy projekt ogrodu

247Grad

247Grad bawić się obrazem monochromatycznym i tłem prawie całkowicie ciemno. Czcionka nagłówka, mniejsza niż tekst i nagłówek, jest pisana wielkimi literami, aby stworzyć duży kontrast w ogólnym projekcie.

Link do sieci: 247Grad

Ciesz się tym

A świetna typografia może świadczyć o autentyczności i że wiemy, co robimy. Nie musisz nic więcej dawać, jeśli wiadomość jest bezpośrednia. Mówią bardzo jasno: uwielbiają tworzyć piękne aplikacje i strony internetowe. Zostawiają pocztę do projektów i studiów w innym linku.

Link do sieci: Ciesz się tym

Allison hou

Allison nas zabiera przed innymi kursami i zawiera więcej obrazów i ten bardziej „kobiecy” krój. To samo dotyczy twojego głównego obrazu i tego nagłówka. Ma luksus okazywania karteczek pokazujących sztuczki na zakupy.

Link do sieci: Allison hou

pikselo

Pixelot jest trochę szalony, ale wskazuje też na kreatywność autora. Posługiwać się wskaźnik myszy, aby utworzyć maskę które rozmywają się wszędzie tam, gdzie je mamy.

Link do sieci: pikselo

Lionel scholtes

Jeśli chcesz zamieść swoje CV w Internecie, nie mając nic poza tym, Lionel pokazuje kroki. Odpowiednia czcionka, twoje zdjęcie w lewym górnym rogu, linki do twoich sieci społecznościowych i twoje doświadczenie. Jedynym elementem dekoracyjnym są te dwie poziome kreski o różnych kolorach.

Link do sieci: Lionel scholtes

Eleganckie mewy

Wracamy do elegancji minimalizmu i te duże puste miejsca. Z jednej strony nagłówek jest bardzo oddalony od reszty elementów, az drugiej elementy ukształtowane w taki sposób, że tworzą między sobą świetną wizualną harmonię.

Link do sieci: Eleganckie mewy

siedlisko

Jak widać we wszystkich przykładach, jest to ważne zakładki nagłówka, aby przejść do różnych stron ze strony internetowej. Typografia ma ogromne znaczenie, baw się jedną dla nagłówka, a drugą z tekstem bezszeryfowym, który wykonuje świetną robotę.

Link do sieci: siedlisko

RóżowyPunkt

Kontrast kolorów prowadzi nas do nieco bardziej złożonej sieci wszystkich widoków. Nie brakuje wszystkich tych głównych elementów aby tym razem zagrać z gradientami obrazu tła i tymi dwiema sekcjami, które mają główne kolory gradientu dla obrazu głównego.

Link do sieci: RóżowyPunkt

IWC

Świetne zdjęcie z dobrze dobrana czcionka i element „bohatera” możesz dać tej sieci. Za pomocą suwaka pokazuje, że część pracy jest dość prosta w swojej koncepcji.

Link do sieci: IWC

Siekać

Cyfrowa ilustracja prowadzi nas do Chop Chop with ten obraz, który pożera całą jego wizualną obecność. Niebieski kolor w nagłówku pozwala tworzyć wartości chromatyczne zgodne z całym obrazem wyświetlanym przez sieć.

Link do sieci: Siekać

7 Sosna

7 Sosna gra z greenem, aby być wielkim bohaterem bazy domowej. Reszta go tworzy obraz z dużą ilością zieleni i prostym nagłówkiem która chce pozostać niezauważona przez logo.

Link do sieci: 7 Sosna

Suma

Sum prowadzi nas w innych kierunkach. Baw się legendarną czarno-białą, bardzo kreatywną ilustracją a to idzie w parze z pozostałymi elementami i dwoma innymi ilustracjami, tworząc bardziej niż interesujący krajobraz. Przykład stworzenia serwisu wyróżniającego się na tle innych.

Link do sieci: Suma

Pudełko na kapelusze

Kolor niebieski jest dominującym kolorem na tej stronie, w której nie ma brakujących obrazów w pełni podświetlonych na biało i jak wyglądałaby gra w 3D tego narzędzia do tworzenia witryn która porusza się, gdy się poruszamy.

Link do sieci: Pudełko na kapelusze

Kara lyte

Kara idzie do prostota i minimalizm w swojej naturalnej i pięknej obecności na twoim zdjęciu. Reszta to tekst, który pojawia się wraz z głównymi elementami nagłówka i przyciskiem hamburgera, aby go otworzyć.

Link do sieci: Kara lyte

Marketing w studiu podrzędnym

Es najprostszej sieci ale to pokazuje nam, czym jest tworzenie bloga. Czerwoni i czarni są bohaterami bardzo „blogowej” witryny.

Link do sieci: Marketing w studiu podrzędnym

Jak stworzyć prostą stronę internetową w HTML

Będziemy cię uczyć stworzyć prostą stronę internetową w HTML abyś poznał najbardziej podstawowe elementy, które go tworzą. Konieczne będzie posiadanie hosta internetowego, na którym możemy załadować kod i kilka poprawek w CSS, ale daj spokój, to są zasady, aby rozpocząć naszą podróż w HTML.

Widząc kilka proste przykłady internetowe Dzięki któremu możesz zmotywować się na tyle, aby tworzyć własne projekty bez zbytniego łamania głowy. Czasami prostota daje lepszy efekt niż komplikowanie nam skomplikowanych rzeczy. Przekonasz się, że w większości przypadków prostota działa bardzo dobrze. Idź po to.

Stworzenie prostej witryny w HTML jest łatwiejsze, niż mogłoby się wydawać na pierwszy rzut oka. Strona internetowa składa się z nagłówka, czyli treści lub treść i stopka lub stopka jako główne elementy. Możemy je sklasyfikować w ten sposób:

• dokumenty: wszystkie dokumenty, które będziemy tworzyć, muszą mieć rozszerzenie . Otwieramy za pomocą i zawsze zamyka się
• Ciało lub ciało: widoczna część dokumentu znajduje się pomiędzy Y
• Nagłówki: są znane przez H1, H2, H3 ... Zaczynamy od a i zamykamy za pomocą . Tekst znajdujący się w środku pojawi się jako nagłówek iw zależności od jego numeracji zrobi to w mniejszym lub większym rozmiarze.
• Akapity: akapit jest ujęty w i zamyka się
• Enlaces: najbardziej oczywistym przykładem jestcreativosonline.org/»> Link do Creativos Online
• Obrazowość: definiujemy je za pomocą etykiety . Przykładem może być . Przywołujemy obraz między cudzysłowami i używamy alt dla tekstu alternatywnego, który jest niezbędny dla SEO.
• Wykazy: listy definiujemy za pomocą na bałagan i z za schludny. Elementy listy są używane z . Pamiętaj, aby zawsze zamknąć je drążkiem.

Z tymi elementami będziemy mieć podstawa do stworzenia prostej strony internetowej jak zobaczysz w dużej liczbie z nich, których nauczymy Cię w następnej sekcji. Powiedzmy, że struktura semantyczna z jej najważniejszymi elementami wygląda następująco:

• Nagłówek z paskiem nawigacji na różnych stronach witryny.
• Przedmiot lub przestrzeń ciała w którym możemy stworzyć wpis na blogu, umieścić nasz program nauczania lub obraz.
• Pasek boczny lub pasek boczny umieścić dodatkowe informacje.
• Stopka lub stopa, gdzie umieścimy linki do najważniejszych stron serwisu oraz ikony portali społecznościowych (zawsze jako przykład).

W przykładach, które zobaczysz poniżej, są wszystko oparte na prostym, ale eleganckim logo, nagłówek, w którym umieszczają nawigację do różnych stron serwisu, centralną przestrzeń zdominowaną przez tekst lub obraz oraz stopkę z elementami wymienionymi w poprzednim akapicie.

Zalecamy to nie łam sobie głowy i przejdź do prostoty. Najważniejsze jest to, że obszary te różnią się od reszty w wizualnym ciągu kilku sekund. Z czasem będziemy mogli sobie komplikować i pracować w innych przestrzeniach.

To jasny przykład kodu HTML z najważniejszymi elementami:

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

Z tymi liniami kodu HTML mielibyśmy najpierw utworzył tytuł strony w nagłówku z, w tym przypadku «Semantyczny HTML», zamknęlibyśmy oba tytuły , nagłówek z i ustąpiliśmy miejsca, aby otworzyć ciało .

Mielibyśmy pierwszy nagłówek w H1 z aby go zamknąć i przeszlibyśmy do listy, która pomogłaby nam stworzyć pasek nawigacji dla różnych stron naszej witryny. Listę zamykamy , zamykamy i na końcu dokument HTML z rozszerzeniem .

Wreszcie zawsze otwieraj dokument za pomocą aby zamknąć go na końcu całego kodu ukośnikiem. Po otwarciu dokumentu zawsze używane jest odniesienie do języka, którym w tym przypadku jest hiszpański z „es” i rozszerzeniem .

Ważne jest, aby dokładnie przyjrzeć się kodowi i kiedykolwiek otwierasz funkcję zamykasz ją paskiem odpowiadających.

Trochę CSS

Wchodzimy trochę w CSS, ale na marginesie, abyś zrozumiał jak stylizować HTML. Załóżmy, że CSS i HTML idą w parze, tworząc te proste strony internetowe, które znajdziesz poniżej.

Jeśli z jednej strony mamy semantyczne użycie HTML dla tego, co jest nagłówkiem lub nagłówkiem, treścią lub treścią z artykułem lub obrazem i stopką, w CSS używalibyśmy funkcji «Div» do identyfikacji do każdej z tych przestrzeni, aby później wprowadzić niezbędne zmiany w projekcie.

Coś tak prostego, jak:

Chociaż możemy zastosować style za pomocą Div, pomoże odpowiednia i idealna struktura aby roboty internetowe mogły doskonale „odczytać”, o czym są nasze treści, więc jeśli zastosujemy się do tej podstawowej struktury, będziemy mieli świetną pracę i bazę jako pierwsi.

Un prosty przykład kodu CSS:

h1 {
kolor: biały;
text-align: centrum;
}

Nazywamy H1 i tekst postawimy go na biało w kolorze: białym; i wyrównamy go do środka za pomocą „wyrównania tekstu”. Zawsze zamykaj nawiasami kwadratowymi po otwarciu wywołania H1.

Zdjęcie w nagłówku Greg rakozy