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

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

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

svižný

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

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. En la parte superior tenemos el header con la “nav bar” o barra de navegación e incluso la posibilidad de cambiar de idioma. El logo lo pone en formato vertical para darle el toque final a una página bien simple.

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ů y esa tipografía más “femenina”. Lo mismo ocurre con su imagen principal y ese header. Se da el lujo de presentar una tarjeta en la que muestra trucos para el shopping.

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 una tipografía bien elegida y un elemento “hero” 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

Marketing Instrinsic Studio

Vnitřní

Es nejjednoduššího webu pero que nos muestra lo que es hacer un blog. El rojo y el negro son los protagonistas en un sitio muy de “blogs”.

Odkaz na web: Marketing Instrinsic Studio

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:  el ejemplo más claro es <a href:”https://www.creativosonline.org/”> Enlace a Creativos Online</a>
  • Obraznost: las definimos por la etiqueta <img>. Un ejemplo sería <img src=”pajaro.jpg” alt=”Pájaro volando” height=”142″>. Invocamos a la imagen entre las comillas y usamos un alt para el texto alternativo que para SEO es imprescindible.
  • 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í, en este caso “HTML Semántico”, cerraríamos tanto el título con </title>, el header con </head> y daríamos paso a abrir el cuerpo con <body>.

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í para cerrarlo al final de todo el código con la barra. Después de abrir el documento siempre se utiliza la referencia al idioma, que en este caso es el español con “es” y con un <html lang=’es’>.

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í, en CSS usaríamos la función “Div” para identificar 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 a que los rastreadores web puedan “leer” perfectamente de que va nuestro contenido, así que si seguimos esa estructura básica, tendremos un gran trabajo y base de primeras.

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á; y lo alinearemos al centro con “text align”. Siempre hay que cerrar con corchetes después de abrir a la llamada del H1.

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.

*

*

  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.   Cristopher - webové stránky řekl

    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