30 неймовірно простих веб-сторінок

Сайт

Деякі найвідоміші сторінки дуже перевантажені інформацією, але я віддаю перевагу протилежному: простим.

Очевидно, що великим показником цієї групи є Google з її мінімалістичною домашньою сторінкою з самого початку її подорожі, Але очевидно, що це не єдиний в Інтернеті, який прагне робити все просто.

Прості приклади веб-сторінок HTML

Кін Річмонд

Кін РічМонд

Кін Річмонд змушує нас побачити простоту гри з кількома елементами, але дуже вдалу дають чудове відчуття мінімалізму. Його логотип у верхньому лівому куті, піктограми Twitter і контактів праворуч і в центрі, з привабливою типографікою, чим він займається.

Посилання на Інтернет: Кенріх Монд

Аліса дрюрга

Аліса дрюрга

Аліса дрюрга будьте прості, також розмістивши свій логотип в центрі чотири вкладки для переміщення між основними сторінками вашого веб-сайту та серією фотографій, розміщених правильно, щоб ми з першого погляду знали, що ви робите і що робите.

Посилання на Інтернет: Аліса дрюрга

Джонатан Огден

Джонатан Огден

Огден продовжуйте грати з тим, наскільки простим є ваше ім’я як логотип, соціальні мережі, розташовані трохи нижче, не привертаючи уваги та їх дизайн працює, щоб ми могли швидко пройти через них. На одній сторінці показано все, що має значення.

Посилання на Інтернет: Джонатан Огден

Зяблик

Зяблик

Фінч вже їде в інші місця, щоб пограти з типографікою та іншими кольори, що позначають елегантність і мудрість того, що він робить. Маючи лише кілька елементів, він залишає на увазі весь свій професіоналізм. Це також дає зрозуміти, які сторінки посилаються на вас.

Посилання на Інтернет: Зяблик

Інший дизайн

Інший дизайн

Цей веб-сайт грати інакше. Використовуйте шпалери із заголовком, з яких ми можемо переходити на головні сторінки, ваш телефон та посилання на ваші соціальні мережі.

Посилання на Інтернет: Інший дизайн

Бризк

Бризк

Кай ілюструє нас власною фігурою абстрактний трикутник і відповідна кольорова палітра надати близькість. Він також пропонує частину своєї біографії зі шрифтом меншого розміру на випадок, якщо ми хочемо знати про нього більше.

Посилання на Інтернет: Бризк

Вертикальний дизайн саду

Вертикальний дизайн саду

Як і попередній, Vertical Garden Design іде до фотографії, яка швидко відображається одна з найкращих його робіт в аеропорту Осло. Угорі у нас є заголовок з «панеллю навігації» або панеллю навігації і навіть можливістю зміни мови. Логотип розміщує його у вертикальному форматі, щоб надати завершальний штрих дуже простій сторінці.

Посилання на Інтернет: Вертикальний дизайн саду

247гр

247гр

247гр грайте з монохромним та фоновим зображенням майже повністю темний. Шрифт заголовка, менший за текст і заголовок, пишеться з великої літери, щоб створити великий контраст у загальному дизайні.

Посилання на Інтернет: 247гр

Насолоджуйтеся цим

Насолоджуйтеся цим

Una велика типографіка може бути ознакою справжності і що ми знаємо, що робимо. Не потрібно більше нічого давати, якщо повідомлення пряме. Вони чітко дають зрозуміти: вони люблять створювати прекрасні програми та веб-сайти. Вони залишають пошту для проектів та свого навчання за іншим посиланням.

Посилання на Інтернет: Насолоджуйтеся цим

Елісон Хоу

Елісон Хоу

Елісон бере нас перед іншими курсами і включає більше зображень і що більш "жіночий" шрифт. Те саме стосується вашого основного зображення та цього заголовка. Він має розкіш подарувати листівку, що показує трюки покупки.

Посилання на Інтернет: Елісон Хоу

Пікселот

Пікселот

Пікселот трохи божевільний, але це також свідчить про творчість автора. Використовуйте вказівник миші для створення маски що розмивається, де б ми не сиділи.

Посилання на Інтернет: Пікселот

Лайонел Шолтес

Лайонел Шолтес

Якщо ви хочете, зробіть своє резюме в Інтернеті нічим іншим, Лайонел показує вам кроки. Відповідний шрифт, ваша фотографія у верхньому лівому куті, посилання на ваші соціальні мережі та ваш досвід. Єдиним декоративним елементом є ті дві горизонтальні лінії різного кольору.

Посилання на Інтернет: Лайонел Шолтес

Елегантні чайки

Елегантні чайки

Ми повертаємось до елегантності мінімалізму і ці великі порожні місця. З одного боку, заголовок дуже далекий від решти елементів, а з іншого боку, ті елементи сформовані таким чином, що вони створюють велику візуальну гармонію між ними.

Посилання на Інтернет: Елегантні чайки

Lebensraum

Lebensraum

Як ви можете бачити на всіх прикладах, це важливо вкладки заголовка для переходу на різні сторінки з веб-сайту. Типографіка має велике значення, пограйте з одним для заголовка, а іншим - з текстом, без засічок, що чудово справляється з роботою.

Посилання на Інтернет: Lebensraum

PinkPoint

PinkPoint

Контраст кольорів веде нас до дещо складнішої мережі всіх поглядів. Не всі ці основні елементи відсутні цього разу грати з градієнтами для фонового зображення та тими двома розділами, які мають основні кольори градієнта для основного зображення.

Посилання на Інтернет: PinkPoint

IWC

IWC

Чудова фотографія з вдало підібраний шрифт та елемент "герой" ви можете дати цій павутині. За допомогою повзунка він показує, що частина роботи є досить простою за своєю концепцією.

Посилання на Інтернет: IWC

Чоп Чоп

Чоп Чоп

Цифрова ілюстрація веде нас до Chop Chop with той образ, який з’їдає всю його візуальну присутність. Блакитний колір у заголовку дає сенс створювати хроматичні значення в гармонії з усім зображенням, що проектується в Інтернеті.

Посилання на Інтернет: Чоп Чоп

7Сосна

7Сосна

7 Пайн грає із зеленим, щоб стати великим героєм домашньої тарілки. Решта його складає зображення з великою кількістю зеленого та простим заголовком що хоче залишитися непоміченим логотипом.

Посилання на Інтернет: 7Сосна

Сума

Сума

Сума дійсно веде нас в інших напрямках. Пограйте з байковими чорно-білими, дуже креативна ілюстрація і це поєднується з рештою елементів та двома іншими ілюстраціями, щоб створити більш ніж цікавий пейзаж. Приклад створення веб-сайту, який вирізняється серед інших.

Посилання на Інтернет: Сума

Капелюшна коробка

Капелюшна коробка

Блакитний - це переважаючий колір на цьому веб-сайті, в якому відсутні відсутні зображення, повністю підсвічені білим кольором, і якою була б гра у 3D цього конструктора сайтів що рухається, коли ми рухаємось.

Посилання на Інтернет: Капелюшна коробка

Кара літе

Кара літе

Кара іде до простота та мінімалізм з його природною та красивою присутністю на вашій фотографії. Решта - це текст, який додається разом із основними елементами заголовка та кнопкою гамбургера, щоб відкрити його.

Посилання на Інтернет: Кара літе

Студія маркетингу Instrinsic

Внутрішній

Es найпростішої павутини але це показує нам, що таке створення блогу. Червоний і чорний - головні герої на дуже "блоговому" сайті.

Посилання на Інтернет: Студія маркетингу Instrinsic

Як створити простий веб-сайт в HTML

HTML

Ми збираємось вас навчити створити простий веб-сайт у форматі HTML щоб ви знали найосновніші елементи, що його складають. Буде потрібно мати веб-хост, куди ми можемо завантажувати код і деякі налаштування в CSS, але, давайте, це принципи, з яких слід розпочати нашу подорож у HTML.

Побачивши деякі прості веб-приклади За допомогою чого ви зможете мотивувати себе настільки, щоб робити власні задуми, не сильно ламаючи голову. Іноді просте створює кращий ефект, ніж ускладнює нас у складних речах. Ви побачите, що в більшості випадків просте працює дуже добре. Дій.

Створити простий веб-сайт у форматі HTML простіше, ніж може здатися спочатку. Веб-сайт складається із заголовка, корпусу або вміст, і нижній або нижній колонтитул як основні елементи. Ми можемо класифікувати їх таким чином:

  • Документація: усі документи, які ми збираємось створити, повинні бути зроблені за допомогою . Ми відкриваємо за допомогою і завжди закривається a
  • Тіло чи тіло: видима частина документа знаходиться між Y
  • Заголовки: вони відомі під H1, H2, H3 ... Ми починаємо з a і ми закриваємо a . Текст, що знаходиться всередині, відображатиметься як заголовок, і залежно від його нумерації він буде робити це меншим або більшим розміром.
  • Абзаци: абзац укладено в і закривається с
  • Зв'язку: найяскравіший прикладcreativosonline.org/»> Посилання на Creativos Online
  • Образність: ми визначаємо їх міткою . Прикладом може бути . Ми використовуємо зображення між лапками і використовуємо alt для альтернативного тексту, який для SEO є важливим.
  • Списки: ми визначаємо списки за допомогою для брудного і с для акуратного. Елементи списку використовуються з . Завжди пам’ятайте закрити їх барною стійкою.

HTML

З цими елементами ми будемо мати основа для створення простого веб-сайту як ви побачите в хорошій кількості з них, чому ми навчимо вас у наступному розділі. Скажімо, семантична структура з її найважливішими елементами виглядає так:

  • Заголовок з навігаційною панеллю для різних сторінок сайту.
  • Простір статті чи тіла в якому ми можемо створити допис у блозі, розмістити своє резюме або зображення.
  • Бічна панель або бічна панель додати додаткову інформацію.
  • Колонтитул або стопа, де ми розмістимо посилання на найважливіші сторінки сайту, а також на піктограми соціальних мереж (завжди як приклад).

У прикладах, які ви побачите нижче, є все базується на простому, але елегантному логотипі, верхній колонтитул, де вони розміщують навігацію до різних сторінок сайту, центральний простір, де переважають текст або зображення та нижній колонтитул з елементами, згаданими в попередньому параграфі.

Ми рекомендуємо це не ламай голову і переходь до простого. Головне, щоб ці зони диференціювались від решти за візуальний прохід секунд. З часом ми зможемо ускладнювати себе і більше працювати над іншими просторами.

це наочний приклад HTML-коду з найважливішими елементами:

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

З цими рядками HTML-коду ми б мали вперше створив заголовок сторінки в заголовку за допомогою, у цьому випадку «Семантичний HTML», ми б закрили обидва заголовки , заголовок с і ми давали би можливість відкрити тіло за допомогою .

Ми б мали перший заголовок у H1 с щоб закрити його , і ми перейшли б до списку, який би допоміг нам створити панель навігації для різних сторінок нашого сайту. Закриваємо список з , ми закриваємо і, нарешті, html-документ з .

Щоб закінчити, завжди відкривати документ за допомогою щоб закрити його в кінці всього коду косою рисою. Після відкриття документа завжди використовується посилання на мову, яка в даному випадку є іспанською з "es" та з .

Важливо уважно придивитися до коду та будь-коли ви відкриваєте функцію, закрийте її за допомогою панелі стурбовані.

Трохи CSS

Ми трохи заходимо в CSS, але побіжно, щоб ви зрозуміли як стиль HTML. Скажімо, CSS та HTML поєднуються між собою, створюючи ті прості веб-сайти, які ви знайдете нижче.

Якщо, з одного боку, ми використовуємо семантичне використання HTML для заголовка, тіла чи тіла із його статтею чи зображенням та колонтитулом, у CSS ми використовували б функцію «Div» для ідентифікації до кожного з цих просторів, щоб згодом застосувати необхідні зміни в дизайні.

Щось таке просте, як:

Веб-семантика

Хоча ми можемо застосовувати стилі за допомогою Div, допоможе відповідна і досконала конструкція так що веб-сканери можуть чудово "прочитати", про що йдеться в нашому вмісті, тому, якщо ми дотримуватимемось цієї базової структури, у нас спочатку буде чудова робота та база.

Un простий приклад коду CSS:

h1 {
color: білий;
вирівнювання тексту: центр;
}

Ми називаємо H1 і текст ми покладемо його в білий колір з кольором: білий; і ми вирівняємо його до центру за допомогою «вирівнювання тексту». Завжди закривайте квадратними дужками після відкриття дзвінка H1.

Фото в заголовку Грег Ракозі


Залиште свій коментар

Ваша електронна адреса не буде опублікований. Обов'язкові для заповнення поля позначені *

*

*

  1. Відповідальний за дані: Мігель Анхель Гатон
  2. Призначення даних: Контроль спаму, управління коментарями.
  3. Легітимація: Ваша згода
  4. Передача даних: Дані не передаватимуться третім особам, за винятком юридичних зобов’язань.
  5. Зберігання даних: База даних, розміщена в мережі Occentus Networks (ЄС)
  6. Права: Ви можете будь-коли обмежити, відновити та видалити свою інформацію.

      Крістофер - веб-сайт - сказав він

    Я справді також захоплююсь дизайном, хороша сторінка, щоб побачити світ дизайну.

    З повагою.

      Хорхе - сказав він

    Привіт друзі, як справи?

    Я роблю дуже просту веб-сторінку у форматі html, і я хотів би додати поле коментарів до кожної публікації. Не могли б ви допомогти мені, як це зробити?

      Емерсон - сказав він

    Тим з нас, кому потрібна дуже проста веб-сторінка з трьома кнопками та зображенням, і в будь-якому випадку програвач, щось подібне було б дуже корисно.
    Однак я не вірю, що за допомогою цієї інформації я можу створити свою сторінку, але принаймні вона дає вам ідеї та те, на що слід звернути увагу