30 neuvěřitelně jednoduchých webových stránek

Některé z nejznámějších stránek jsou velmi přetížené informacemi, ale já dávám přednost opaku: jednoduchým.

Je zřejmé, že velkým představitelem této skupiny je Google se svou minimalistickou domovskou stránkou od svého zahájení cesty, Ale zjevně to není jediný na internetu, který se zavázal udržovat věci jednoduché.

Jednoduché příklady webových stránek HTML

Kean richmond

Kean Richmond nás nutí vidět jednoduchost hraní s několika prvky, ale velmi dobře umístěnými dát skvělý pocit minimalismu. Jeho logo vlevo nahoře, ikony Twitteru a kontaktů vpravo a uprostřed, s poutavou typografií, co dělá.

Odkaz na web: Keanrich mond

Alice Drougardová

Alice Drougardová udržujte to jednoduché i s umístěným logem ve středu čtyři záložky pro pohyb mezi hlavními stránkami vašeho webu a řada fotografií umístěných vhodně, takže na první pohled víme, co děláte a co děláte.

Odkaz na web: Alice Drougardová

jonathan ogden

Ogden hrajte si s tím, jak jednoduché je vaše jméno jako logo, sociální sítě umístěné těsně dole, aniž by přitahovaly pozornost, a jejich design funguje, abychom je mohli rychle projít. Na jedné stránce zobrazuje vše, na čem záleží.

Odkaz na web: jonathan ogden

Pěnkava

Finch už jde do jiných míst, aby si hrál s typografií a tak barvy, které označují eleganci a moudrost toho, co dělá. Pouze s několika prvky ponechává veškerou svou profesionalitu v dohledu. Rovněž objasňuje, které stránky na vás odkazovaly.

Odkaz na web: Pěnkava

Jiný design

Tento web hrát jinak. Použijte tapetu s hlavičkou, ze které můžeme přejít na hlavní stránky, váš telefon a odkazy na vaše sociální sítě.

Odkaz na web: Jiný design

svižný

Kai nás ilustruje svou vlastní postavou s abstraktní trojúhelník a vhodná paleta barev dát blízkost. Také nabízí část svého životopisu s písmem v menší velikosti, pokud o něm chceme vědět víc.

Odkaz na web: svižný

Vertikální zahradní design

Stejně jako předchozí, i Vertical Garden Design směřuje k fotografii, která se rychle zobrazuje jedno z jeho nejlepších zaměstnání na letišti v Oslu. Nahoře máme záhlaví s «navigační lištou» nebo navigační lištou a dokonce i možností změny jazyka. Logo jej umístí do svislého formátu a dotvoří tak konečnou stránku velmi jednoduché stránky.

Odkaz na web: Vertikální zahradní design

247Grad

247Grad pohrajte si s černobílým a obrázkem na pozadí téměř úplně tma. Písmo záhlaví, menší než text a záhlaví, je velké, aby vytvořil velký kontrast v celkovém designu.

Odkaz na web: 247Grad

Užij si to

A skvělá typografie může být známkou toho, že je autentická a že víme, co děláme. Pokud je zpráva přímá, nemusíte nic dávat. Dávají to jasně najevo: rádi vytvářejí krásné aplikace a weby. Mail pro projekty a jejich studium nechávají v jiném odkazu.

Odkaz na web: Užij si to

Allison hou

Allison nás vezme před dalšími kurzy a obsahuje více obrázků a ten „ženštější“ typ písma. Totéž platí pro hlavní obrázek a záhlaví. Má luxus předložit kartu s nákupními triky.

Odkaz na web: Allison hou

pixelot

Pixelot je trochu šílený, ale také naznačuje kreativitu autora. Použití ukazatel myši vytvořte masku které se stírají všude, kde to máme posazené.

Odkaz na web: pixelot

Lionel scholtes

Pokud chcete, aby vytvořte si životopis online s ničím jiným, Lionel vám ukazuje kroky. Vhodné písmo, vaše fotografie vlevo nahoře, odkazy na vaše sociální sítě a vaše zkušenosti. Jediným dekorativním prvkem jsou tyto dvě vodorovné čáry různých barev.

Odkaz na web: Lionel scholtes

Elegantní racky

Vracíme se k eleganci minimalismu a ta velká prázdná místa. Na jedné straně je záhlaví velmi vzdálené od ostatních prvků a na straně druhé jsou tyto prvky tvarovány takovým způsobem, že mezi nimi vytvářejí velkou vizuální harmonii.

Odkaz na web: Elegantní racky

habitat

Jak vidíte ve všech příkladech, je to důležité záložkami záhlaví přejdete na různé stránky z webu. Typografie má velký význam, hrajte s jednou pro záhlaví a druhou pro text bez patky, která dělá skvělou práci.

Odkaz na web: habitat

PinkPoint

Kontrast barev nás vede k poněkud složitější síti všech pohledů. Ne všechny tyto hlavní prvky chybí hrát tentokrát s přechody pro obrázek na pozadí a těmi dvěma částmi, které mají hlavní barvy přechodu pro hlavní obrázek.

Odkaz na web: PinkPoint

IWC

Skvělá fotografie s dobře zvolené písmo a prvek „hrdina“ můžete dát tomuto webu. Posuvníkem ukazuje, že část práce je ve své koncepci docela jednoduchá.

Odkaz na web: IWC

Kotleta

Digitální ilustrace nás přivádí k Chop Chop s ten obraz, který pohltí veškerou jeho vizuální přítomnost. Modrá barva v záhlaví mu dává za cíl vytvářet chromatické hodnoty v souladu s celým obrazem promítaným webem.

Odkaz na web: Kotleta

7Borovice

7Pine hraje se zelenou, aby byl velkým protagonistou domácí desky. Zbytek to skládá obrázek se spoustou zelené a jednoduchou hlavičkou to chce logo zůstat nepovšimnuto.

Odkaz na web: 7Borovice

Součet

Sum nás vezme jinými směry. Hrajte s legendární černou a bílou, velmi kreativní ilustrací a to spolu se zbytkem prvků a dvěma dalšími ilustracemi vytvoří více než zajímavou krajinu. Příklad vytvoření webové stránky, která vyniká nad ostatními.

Odkaz na web: Součet

Krabice na klobouky

Modrá je převládající barva na tomto webu, kde nechybí žádné obrázky plně osvětlené bílou barvou a tím, jak by hra vypadala ve 3D tohoto nástroje pro tvorbu webů který se pohybuje, jak se pohybujeme.

Odkaz na web: Krabice na klobouky

Kara lyte

Kara jde jednoduchost a minimalismus s jeho přirozenou a krásnou přítomností na vaší fotografii. Zbytek je text, který přichází spolu s hlavními prvky záhlaví a tlačítkem hamburgeru k jeho otevření.

Odkaz na web: Kara lyte

Marketing Instrinsic Studio

Es nejjednoduššího webu ale to nám ukazuje, co to je vytvořit blog. Červená a černá jsou protagonisty velmi „blogového“ webu.

Odkaz na web: Marketing Instrinsic Studio

Jak vytvořit jednoduchý web v HTML

Budeme vás učit vytvořit jednoduchý web v HTML takže znáte nejzákladnější prvky, které ji tvoří. Bude nutné mít webového hostitele, do kterého budeme moci načíst kód a nějaké vylepšení v CSS, ale pojďme, to jsou principy pro zahájení naší cesty v HTML.

Poté, co jsem nějaké viděl jednoduché webové příklady S nimiž se můžete dostatečně motivovat k vytváření vlastních návrhů, aniž byste si hodně lámali hlavu. Někdy jednoduché vytváří lepší efekt než nás komplikovat ve složitých věcech. Uvidíte, že ve většině případů jednoduchý funguje velmi dobře. Jít na to.

Vytvoření jednoduché webové stránky v HTML je snadnější, než se na první pohled zdá. Webová stránka sestává z hlavičky, těla nebo obsah a zápatí nebo zápatí jako hlavní prvky. Můžeme je klasifikovat takto:

• dokumenty: všechny dokumenty, které budeme vytvářet, musí být provedeny pomocí . Otevíráme s a vždy se zavře a
• Tělo nebo tělo: viditelná část dokumentu je mezi Y
• Záhlaví: jsou známy pod H1, H2, H3 ... Začínáme s a a zavřeme s . Text uvnitř se zobrazí jako záhlaví a v závislosti na jeho číslování to udělá v menší nebo větší velikosti.
• Odstavce: odstavec je uzavřen v a a zavírá se
• Odkazy: nejjasnějším příkladem jecreativosonline.org/»> Odkaz na Creativos Online
• Obraznost: definujeme je štítkem . Příklad by byl . Vyvoláme obrázek mezi uvozovkami a pro alternativní text použijeme alt, který je pro SEO nezbytný.
• Seznamy: definujeme seznamy pomocí za chaotický a s čistě. Položky seznamu se používají s . Vždy je nezapomeňte zavřít pomocí lišty.

S těmito prvky budeme mít základ pro vytvoření jednoduchého webu jak uvidíte v dostatečném množství z nich, které vás naučíme v následující části. Řekněme, že sémantická struktura s jejími nejdůležitějšími prvky vypadá takto:

• Záhlaví s navigační lištou pro různé stránky webu.
• Článek nebo prostor těla ve kterém můžeme vytvořit blogový příspěvek, vložit náš životopis nebo obrázek.
• Postranní panel nebo postranní panel přidat další informace.
• Zápatí nebo noha, kde umístíme odkazy na nejdůležitější stránky webu i na ikony sociálních sítí (vždy jako příklad).

V příkladech, které uvidíte níže, jsou vše založené na jednoduchém, ale elegantním logu, záhlaví, kam umisťují navigaci na různé stránky webu, centrální prostor ovládaný textem nebo obrázkem a zápatí s prvky zmíněnými v předchozím odstavci.

To doporučujeme nerozlomte si hlavu a jděte na jednoduché. Hlavní věc je, že tyto oblasti jsou od ostatních odlišeny ve vizuálním průchodu sekund. Postupem času se dokážeme zkomplikovat a pracovat v dalších prostorech.

To je jasný příklad kódu HTML s nejdůležitějšími prvky:

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

S těmito řádky kódu HTML bychom měli nejprve vytvořil název stránky v záhlaví pomocí, v tomto případě «Semantic HTML», uzavřeme oba titulek pomocí , záhlaví s a dali bychom cestu k otevření těla .

Měli bychom první záhlaví v H1 s uzavřít to „Přejdeme na seznam, který nám pomůže vytvořit navigační lištu pro různé stránky našeho webu. Seznam zavřeme pomocí , zavíráme a nakonec html dokument s .

Konečně vždy otevřít dokument pomocí zavřete jej na konci celého kódu lomítkem. Po otevření dokumentu se vždy použije odkaz na jazyk, kterým je v tomto případě španělština s „es“ a s .

Je důležité, abyste se na kód podívali pozorně a kdykoli otevřete funkci a zavřete ji pomocí lišty odpovídající.

Trochu CSS

Trochu jdeme do CSS, ale mimochodem, abyste pochopili jak stylovat HTML. Řekněme, že CSS a HTML jdou ruku v ruce, aby poskytly tyto jednoduché webové stránky, které najdete níže.

Pokud na jedné straně máme sémantické použití HTML pro to, co je záhlaví, tělo nebo tělo s jeho článkem nebo obrázkem a zápatí, v CSS bychom k identifikaci použili funkci «Div» do každého z těchto prostorů, aby bylo možné později použít nezbytné změny v designu.

Něco tak jednoduchého jako:

I když můžeme styly použít s Div, pomůže vhodná a dokonalá struktura aby webové prohledávače dokázaly dokonale „číst“, o čem je náš obsah, takže pokud se budeme řídit touto základní strukturou, budeme mít nejprve skvělou práci a základnu.

Un jednoduchý příklad kódu CSS:

h1 {
barva: bílý;
text-align: centrum;
}

Říkáme H1 a text dáme to bíle s barvou: bílá; a zarovnáme jej do středu pomocí «zarovnání textu». Po otevření hovoru H1 vždy zavřete závorky.

Fotografie záhlaví uživatele Greg rakozy