30 Невероватно једноставних веб страница

Неке од најпознатијих страница су преоптерећене информацијама, али ја више волим супротно: оне једноставне.

Очигледно је да је велики представник ове групе Гоогле са минималистичком почетном страницом од када је започела путовање, али очигледно није једини на Интернету који се залаже да ствари буду једноставне.

Примери једноставних ХТМЛ веб страница

Кеан Рицхмонд

Кеан Рицхмонд нас тера да видимо једноставност играња са мало елемената, али врло добро постављених дају сјајан осећај минимализму. Његов логотип у горњем левом углу, Твиттер и иконе контаката десно и у средини, са упечатљивом типографијом, ономе чему је посвећен.

Линк до Веба: Кеанрицх монд

Алице дроугард

Алице дроугард будите једноставни и уз ваш логотип у средини, четири картице за кретање између главних страница вашег веб сајта и низа фотографија правилно постављених тако да на први поглед знамо шта радите и шта радите.

Линк до Веба: Алице дроугард

Јонатхан Огден

Огден играјте се како је једноставно ваше име као логотип, друштвене мреже смештене одмах испод без привлачења пажње и њихов дизајн функционише тако да их можемо брзо проћи. На једној страници приказује све што је битно.

Линк до Веба: Јонатхан Огден

Зеба

Финцх већ одлази на друга места да се игра са типографијом и слично боје које означавају елеганцију и мудрост онога што ради. Са само неколико елемената оставља на увид сву своју професионалност. Такође јасно наводи које су вас странице водиле.

Линк до Веба: Зеба

Другачији дизајн

Ова веб локација играти другачије. Користите позадину са заглављем одакле можемо ићи на главне странице, ваш телефон и везе до ваших друштвених мрежа.

Линк до Веба: Другачији дизајн

Бризк

Каи нас илуструје сопственом фигуром са апстрактни троугао и одговарајућу палету боја дати блискост. Такође нуди део свог биографије са мањим фонтом у случају да желимо да сазнамо више о њему.

Линк до Веба: Бризк

Вертикални дизајн врта

Као и претходни, Вертицал Гарден Десигн иде према фотографији која се брзо приказује један од његових најбољих послова на аеродрому у Ослу. На врху имамо заглавље са «навигационом траком» или навигационом траком, па чак и могућношћу промене језика. Логотип га ставља у вертикални формат дајући коначни додир врло једноставној страници.

Линк до Веба: Вертикални дизајн врта

247Град

247Град играјте се монохроматски и позадинском сликом готово потпуно мрачно. Фонт заглавља, мањи од текста и заглавља, написан је великим словима како би се створио сјајан контраст у целокупном дизајну.

Линк до Веба: 247Град

Уживај у овоме

А одлична типографија може бити знак аутентичности и да знамо шта радимо. Ако је порука директна, не морате ништа више да дајете. Јасно поручују: обожавају да креирају прелепе апликације и веб локације. Пошта за пројекте и своје студије остављају на другом линку.

Линк до Веба: Уживај у овоме

Аллисон хоу

Аллисон нас води пре осталих курсева и укључује више слика и то онај „женскији“ фонт. Исто важи и за вашу главну слику и то заглавље. Има луксуз да покаже картицу која показује трикове за куповину.

Линк до Веба: Аллисон хоу

Пикелот

Пикелот је помало луд, али указује и на креативност аутора. Користите показивач миша за стварање маске то се замагљује где год да се налазимо.

Линк до Веба: Пикелот

Лионел сцхолтес

Ако желите направите свој животопис на мрежи без ичега више од тога, Лионел вам показује кораке. Одговарајући фонт, ваша фотографија у горњем левом углу, везе до ваших друштвених мрежа и вашег искуства. Једини украсни елемент су те две водоравне линије различитих боја.

Линк до Веба: Лионел сцхолтес

Елегантни галебови

Враћамо до елеганције минимализма и те велике празне просторе. С једне стране, заглавље је веома удаљено од осталих елемената, а с друге стране, они елементи обликовани тако да стварају велику визуелну хармонију између њих.

Линк до Веба: Елегантни галебови

лебенсраум

Као што видите у свим примерима, важно је картице заглавља за одлазак на различите странице са веб странице. Типографија је од велике важности, играјте се једним за заглавље, а другим текстом с без серифа који сјајно раде.

Линк до Веба: лебенсраум

ПинкПоинт

Контраст боја доводи нас до мало сложеније мреже свих погледа. Не недостају сви ти главни елементи да се овај пут играмо са градијентима за позадинску слику и она два одељка који имају главне боје градијента главне слике.

Линк до Веба: ПинкПоинт

ИВЦ

Сјајна фотографија са добро одабраним словима и елементом „хероја“ можете дати овој мрежи. Клизачем показује да је део посла прилично једноставан у својој концепцији.

Линк до Веба: ИВЦ

Цхоп Цхоп

Дигитална илустрација нас доводи до Цхоп Цхоп витх та слика која је поједе цело њено визуелно присуство. Плава боја у заглављу даје јој поенту да креира хроматске вредности у складу са целокупном сликом коју пројектује веб.

Линк до Веба: Цхоп Цхоп

7Пине

7Пине се игра са зеленим да би био сјајни протагониста домаће плоче. Остали га састављају слика са пуно зелене боје и једноставно заглавље који жели да остане непримећен логотипом.

Линк до Веба: 7Пине

Збир

Збир нас води у другим правцима. Поиграјте се са легендарним црно-белима, врло креативна илустрација а то иде заједно са остатком елемената и две друге илустрације како би се створио више него занимљив пејзаж. Пример израде веб странице која се издваја од осталих.

Линк до Веба: Збир

Хатбок

На овом веб месту превладава плава боја у којој не недостају слике у потпуности осветљене белом и каква би била игра у 3Д тог градитеља сајтова који се креће док се ми крећемо.

Линк до Веба: Хатбок

Кара лите

Кара одлази у једноставност и минимализам са својим природним и лепим присуством на вашој фотографији. Остало је текст који долази уз главне елементе заглавља и дугме за хамбургер за његово отварање.

Линк до Веба: Кара лите

Инстринсиц Студио Маркетинг

Es најједноставнијег веба али то нам показује шта је направити блог. Црвена и црна су главни јунаци веома „блог“ странице.

Линк до Веба: Инстринсиц Студио Маркетинг

Како направити једноставну веб страницу у ХТМЛ-у

Ми ћемо вас научити направите једноставну веб страницу у ХТМЛ-у тако да знате најосновније елементе који га чине. Биће неопходно да имамо веб хост на који можемо учитати код и неке дораде у ЦСС-у, али хајде, ово су принципи за започињање нашег путовања у ХТМЛ-у.

Видевши неке једноставни веб примери Помоћу које се можете довољно мотивисати да сами израђујете дизајн, а да притом превише не ломите главу. Понекад једноставно ствара бољи ефекат него што нас компликује у сложеним стварима. Видећете да у већини случајева једноставно делује врло добро. Само напред.

Стварање једноставне веб странице у ХТМЛ-у је лакше него што се у почетку чини. Сајт састоји се од заглавља, тела или садржај и подножје или подножје као главни елементи. Можемо их класификовати на овај начин:

• Документи: сви документи које ћемо створити морају бити урађени помоћу а . Отварамо са и увек се затвара с
• Тело или тело: видљиви део документа је између И.
• Заглавља: познати су по Х1, Х2, Х3 ... Почињемо са а и затварамо са а . Текст који се налази унутра појавиће се као заглавље и у зависности од његове нумерације то ће учинити у мањој или већој величини.
• Одломци: пасус је приложен под тачком и затвара са
• Линкови: најјаснији пример јеcreativosonline.орг/»> Линк до Цреативос Онлине
• Лик: дефинишемо их ознаком . Пример би био . Позивамо се на слику између наводника и користимо алт за алтернативни текст који је неопходан за СЕО.
• Листе: листе дефинишемо са за неуредан и са за уредно. Ставке на листи се користе са . Увек не заборавите да их затворите решетком.

Са овим елементима ћемо имати основа за стварање једноставне веб странице као што ћете видети у добром броју њих које ћемо вас научити у следећем одељку. Рецимо да семантичка структура са својим најважнијим елементима изгледа овако:

• Заглавље са навигационом траком за различите странице веб локације.
• Простор чланка или тела у којем можемо створити запис на блогу, ставити свој наставни план или слику.
• Бочна трака или бочна трака да се ставе додатне информације.
• Подножје или стопало, где ћемо поставити везе до најважнијих страница веб локације као и иконе друштвених мрежа (увек као пример).

У примерима које ћете видети доле су све засновано на једноставном, али елегантном логотипу, заглавље где постављају навигацију на различите странице веб локације, централни простор којим доминирају текст или слика и подножје са елементима поменутим у претходном пасусу.

Ми то препоручујемо не разбијајте главу и идите на једноставно. Главна ствар је да се ова подручја разликују од осталих у визуелном пролазу од неколико секунди. Временом ћемо моћи себи да компликујемо и радити више других простора.

Ово је јасан пример ХТМЛ кода са најважнијим елементима:

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

Са овим редовима ХТМЛ кода бисмо имали први пут створио наслов странице у заглављу са, у овом случају «Семантички ХТМЛ», затворили бисмо оба наслова са , заглавље са и уступили бисмо место за отварање тела помоћу .

Имали бисмо прво заглавље у Х1 са да га затвори , и отишли ​​бисмо на листу која би нам помогла да креирамо траку за навигацију за различите странице наше странице. Списак затварамо са , ми затворити и на крају хтмл документ са .

Завршити, увек отворите документ са да га на крају целог кода затворите косом цртом. Након отварања документа увек се користи референца на језик, који је у овом случају шпански са «ес» и са а .

Важно је да пажљиво погледате код и кад год то желите отворите функцију и затворите је траком одговарајући

Мало ЦСС-а

Идемо мало у ЦСС, али у пролазу да бисте разумели како стилизовати ХТМЛ. Рецимо да ЦСС и ХТМЛ иду руку под руку дајући оне једноставне веб локације које ћете наћи у наставку.

Ако с једне стране имамо семантичку употребу ХТМЛ-а за оно што је заглавље, тело или тело са чланком или сликом и подножјем, у ЦСС-у бисмо користили функцију «Див» за идентификацију на сваки од ових простора како би се касније примениле неопходне промене у дизајну.

Нешто једноставно као:

Иако можемо применити стилове са Див, погодна и савршена структура ће помоћи тако да веб пописивачи могу савршено „прочитати“ о чему се ради у нашем садржају, па ако следимо ту основну структуру, прво ћемо имати сјајан посао и основу.

Un пример једноставног ЦСС кода:

h1 {
боја: бела;
Поравнање текста: центар;
}

Зовемо Х1 и текст ставићемо у бело са бојом: бела; а ми ћемо га поравнати према центру помоћу „поравнање текста“. Увек затворите угластим заградама након отварања позива Х1.

Фотографија заглавља Грег ракози