Някои от най-известните страници са много претоварени с информация, но аз предпочитам обратното: простите.
Очевидно големият показател на тази група е Google с нейната минималистична начална страница, откакто тя започна своето пътуване, Очевидно не е единственият в Интернет, който се ангажира да поддържа нещата прости.
Прости примери за уеб страница в HTML
Кийн Ричмънд
Кийн Ричмънд ни кара да видим простотата на играта с малко елементи, но много добре поставени дават страхотно усещане за минимализма. Неговото лого в горния ляв ъгъл, Twitter и иконите за контакти вдясно и в центъра, с поразителна типография, на това, на което е посветен.
Връзка към мрежата: Keanrich mond
Алиса неприятна
Алиса неприятна опростете и с поставеното лого в центъра, четири раздела за придвижване между основните страници на вашия уебсайт и поредица от снимки, поставени правилно, така че с един поглед да знаем какво правите и какво правите.
Връзка към мрежата: Алиса неприятна
Джонатан Огдън
Ogden продължете да играете с това колко просто е името ви като лого, социалните мрежи, разположени точно отдолу, без да привличат внимание и техният дизайн работи, за да можем бързо да преминем през тях. На една страница той показва всичко, което има значение.
Връзка към мрежата: Джонатан Огдън
сипка
Финч вече отива на други места, за да си играе с типография и такива цветове, които обозначават елегантност и мъдрост на това, което прави. Само с няколко елемента той оставя целия си професионализъм под внимание. Освен това става ясно кои страници са водили към вас.
Връзка към мрежата: сипка
Различен дизайн
Този уебсайт играйте по различен начин. Използвайте тапет със заглавна част, от която можем да отидем на основните страници, вашия телефон и връзките към вашите социални мрежи.
Връзка към мрежата: Различен дизайн
Бризк
Кай ни илюстрира със собствената си фигура с абстрактен триъгълник и подходяща цветова палитра за да се даде близост. Той предлага и част от биографията си с шрифт в по-малък размер, в случай че искаме да научим повече за него.
Връзка към мрежата: Бризк
Вертикален дизайн на градината
Подобно на предишния, Vertical Garden Design отива към снимка, която показва бързо една от най-добрите му работни места на летището в Осло. В горната част имаме заглавката с «навигационна лента» или навигационна лента и дори възможност за промяна на езика. Логото го поставя във вертикален формат, за да даде последния щрих на много проста страница.
Връзка към мрежата: Вертикален дизайн на градината
247 градуса
247 градуса играйте с монохромен и фоново изображение почти напълно тъмно. Шрифтът на заглавката, по-малък от текста и заглавката, е с главни букви, за да създаде голям контраст в цялостния дизайн.
Връзка към мрежата: 247 градуса
Наслаждавайте се на това
а страхотната типография може да е признак за автентичност и че знаем какво правим. Не е нужно да давате нищо повече, ако съобщението е директно. Те го правят много ясно: те обичат да създават красиви приложения и уебсайтове. Те оставят пощата за проекти и проучване в друга връзка.
Връзка към мрежата: Наслаждавайте се на това
Алисън Хоу
Алисън ни отвежда преди други курсове и включва повече изображения и то по-"женски" шрифт. Същото важи и за основното ви изображение и заглавката. Той има лукса да представи карта, показваща трикове за пазаруване.
Връзка към мрежата: Алисън Хоу
Пикселот
Pixelot е малко луд, но също така показва креативността на автора. Използвайте показалеца на мишката, за да създадете маска което се размива навсякъде, където го качим.
Връзка към мрежата: Пикселот
Лионел Шолтс
Ако искате направете вашето резюме онлайн с нищо повече от това, Лайънел ви показва стъпките. Подходящ шрифт, вашата снимка горе вляво, връзки към вашите социални мрежи и вашето преживяване. Единственият декоративен елемент са тези две хоризонтални линии с различни цветове.
Връзка към мрежата: Лионел Шолтс
Елегантни чайки
Връщаме се до елегантността на минимализма и тези големи празни пространства. От една страна заглавката е много далеч от останалите елементи, а от друга страна онези елементи, оформени по такъв начин, че да създават страхотна визуална хармония между тях.
Връзка към мрежата: Елегантни чайки
хабитат
Както можете да видите във всички примери, това е важно разделите на заглавката, за да отидете на различните страници от уебсайта. Типографията е от голямо значение, играйте с една за заглавката и друга за текста с безсерифа, която върши чудесна работа.
Връзка към мрежата: хабитат
PinkPoint
Контрастът на цветовете ни води до малко по-сложна мрежа от всички изгледи. Не всички тези основни елементи липсват за да играете с градиентите за фоновото изображение този път и тези две секции, които имат основните цветове на градиента за основното изображение.
Връзка към мрежата: PinkPoint
IWC
Страхотна снимка с добре подбран шрифт и елемент "герой" можете да дадете на тази мрежа. С плъзгач показва, че част от работата е доста проста в концепцията си.
Връзка към мрежата: IWC
Клъц, клъц
Цифровата илюстрация ни води до Chop Chop with този образ, който изяжда цялото му визуално присъствие. Синият цвят в заглавката му дава смисъл да създава хроматични стойности в тон с цялото изображение, проектирано от мрежата.
Връзка към мрежата: Клъц, клъц
7Бор
7Pine играе със зеленото, за да бъде великият герой на домашната плоча. Останалите го съставят изображение с много зелено и проста заглавка който иска да остане незабелязан от логото.
Връзка към мрежата: 7Бор
Сумата
Сумата наистина ни отвежда в други посоки. Играйте си с легендарното черно-бяло, много креативна илюстрация и това върви заедно с останалите елементи и две други илюстрации, за да създаде повече от интересен пейзаж. Пример за създаване на уебсайт, който се отличава от останалите.
Връзка към мрежата: Сумата
Кутия за шапки
Синият е преобладаващият цвят на този уебсайт, в който липсват изображения, изцяло осветени от бяло и каква би била играта в 3D на този конструктор на сайтове което се движи докато се движим.
Връзка към мрежата: Кутия за шапки
Кара лайт
Кара отива при простота и минимализъм със своето естествено и красиво присъствие във вашата снимка. Останалото е текст, който идва заедно с основните елементи на заглавката и бутон за хамбургер, за да го отворите.
Връзка към мрежата: Кара лайт
Маркетинг на Instrinsic Studio
Es от най-простата мрежа но това ни показва какво представлява създаването на блог. Червеното и черното са главните герои в много "блог" сайт.
Връзка към мрежата: Маркетинг на Instrinsic Studio
Как да създадете прост уебсайт в HTML
Ще ви научим създайте прост уебсайт в HTML така че да знаете най-основните елементи, които го съставят. Ще е необходимо да имаме уеб хост, където да можем да заредим кода и някои ощипвания в CSS, но хайде, това са принципите за започване на нашето пътуване в HTML.
Като видях някои прости уеб примери С което можете да се мотивирате достатъчно, за да направите свои собствени дизайни, без да си чупите много главата. Понякога простото създава по-добър ефект, отколкото да ни усложнява в сложни неща. Ще видите, че в повечето случаи простото работи много добре. Направи го.
Създаването на прост уебсайт в HTML е по-лесно, отколкото може да изглежда в началото. Уебсайт се състои от заглавна част, тялото или съдържание и долния или долния колонтитул като основни елементи. Можем да ги класифицираме по този начин:
- Документи: всички документи, които ще създадем, трябва да бъдат направени с a . Отваряме с и винаги се затваря с a
- Тялото или тялото: видимата част на документа е между Y.
- Хедъри: те са известни с H1, H2, H3 ... Започваме с a и затваряме с a . Текстът, който е вътре, ще се появи като заглавна част и в зависимост от номерирането му ще го направи в по-малък или по-голям размер.
- Параграфи: абзацът е затворен в буква и се затваря с
- Звена: най-ясният пример еcreativosonline.org/»> Връзка към Creativos Online
- Образност: определяме ги по етикета . Един пример би бил . Извикваме изображението между кавичките и използваме alt за алтернативния текст, което е от съществено значение за SEO.
- Списъци: дефинираме списъците с за разхвърлян и с за чист. Елементите от списъка се използват с . Винаги не забравяйте да ги затворите с бара.
С тези елементи ще имаме основата за създаване на прост уебсайт както ще видите в доброто количество от тях, на които ще ви научим в следващия раздел. Да кажем, че семантичната структура с нейните най-важни елементи изглежда така:
- Хедър с навигационната лента за различните страници на сайта.
- Пространството на статията или тялото в който можем да създадем публикация в блог, да поставим нашето автобиография или изображение.
- Страничната лента или страничната лента да се постави допълнителна информация.
- Долният колонтитул или крак, където ще поставим връзки към най-важните страници на сайта, както и иконите на социалните мрежи (винаги като пример).
В примерите, които ще видите по-долу са всичко базирано на просто, но елегантно лого, заглавна част, където те поставят навигацията към различните страници на сайта, централно пространство, доминирано от текст или изображение и долен колонтитул с елементите, споменати в предишния параграф.
Ние препоръчваме това не си чупете главата и преминете към простичките. Основното е, че тези области се разграничават от останалите с визуален пропуск от секунди. С времето ще можем да се усложняваме и да работим в повече други пространства.
Това е ясен пример за 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" и с a .
Важно е да се вгледате внимателно в кода и винаги отваряте функция, затваряте я с лентата засегнати.
Малко CSS
Влизаме малко в CSS, но мимоходом, за да разберете как да стилизирам HTML. Да кажем, че CSS и HTML вървят ръка за ръка, за да предоставят онези прости уебсайтове, които ще намерите по-долу.
Ако от една страна имаме семантичното използване на HTML за това, което е заглавката или заглавката, тялото или тялото със статията или изображението и долния колонтитул, в CSS бихме използвали функцията «Div» за идентифициране към всяко от тези пространства, за да се приложат по-късно необходимите промени в дизайна.
Нещо толкова просто като:
Въпреки че можем да приложим стиловете с Div, подходяща и перфектна структура ще помогне така че роботите на мрежата да могат перфектно да "четат" за какво става дума в нашето съдържание, така че ако следваме тази основна структура, първо ще имаме страхотна работа и база.
Un пример за прост CSS код:
h1 {
цвят: бял;
текст-приравни: център;
}
Наричаме H1 и текста ще го сложим в бяло с цвят: бял; и ще го подравним към центъра с «подравняване на текст». Винаги затваряйте със скоби, след като отворите разговора H1.
Заглавна снимка на Грег ракози
Наистина също съм запален по дизайна, добра страница да видя света на дизайна.
С Най-Добри Пожелания.
Здравейте приятели, как сте?
Правя много проста уеб страница в html и бих искала да добавя поле за коментар към всяка публикация. Бихте ли ме насочили как да го направя?
Тези от нас, които се нуждаят от много проста уеб страница с три бутона и изображение и във всеки случай плейър, подобно нещо би било много полезно.
Не вярвам обаче, че с тази информация мога да изградя своята страница, но поне тя ви дава идеи и какво да търсите