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

Web
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

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 Drougard

Alice Drougard

Alice Drougard 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 Drougard

Jonathan Ogden

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

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

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

Brizk

Brizk

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: Brizk

Vertikální zahradní design

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

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

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

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

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

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

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

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

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

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

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

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

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

Instrinsic Studio Marketing

Vnitřní

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: Instrinsic Studio Marketing

Jak vytvořit jednoduchý web v HTML

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 je 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.

HTML

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:

Sémantika webu

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


Obsah článku se řídí našimi zásadami redakční etika. Chcete-li nahlásit chybu, klikněte zde.

3 komentářů, nechte svůj

Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.

  1. Opravdu se také zajímám o design, což je dobrá stránka pro prohlížení světa designu.

    S pozdravem.

  2.   Jorge řekl

    Ahoj přátelé, jak se máte?

    Vytvářím velmi jednoduchou webovou stránku v html a ke každé publikaci bych chtěl přidat pole pro komentář. Můžete mi poradit, jak na to?

  3.   Emerson řekl

    Ti z nás, kteří potřebují velmi jednoduchou webovou stránku se třemi tlačítky a obrázkem, a v každém případě hráč, něco takového by bylo velmi užitečné.
    Nevěřím však, že s těmito informacemi jsem schopen vytvořit svou stránku, ale přinejmenším vám dá nápady a co hledat