30 Otroligt enkla webbsidor

web

Några av de mest kända sidorna är mycket överbelastade med information, men jag föredrar tvärtom: de enkla.

Uppenbarligen är den stora exponenten för denna grupp Google med sin minimalistiska hemsida sedan den började sin resa, Men helt klart är det inte den enda på Internet som är engagerad i att hålla saker enkelt.

Enkla exempel på HTML-webbsidor

Kean richmond

Kean RichMond

Kean Richmond får oss att se enkelheten med att spela med få element, men mycket väl placerade för ge minimalism en bra känsla. Hans logotyp uppe till vänster, Twitter- och kontaktikonerna till höger och i mitten, med en slående typografi, till vad han är dedikerad.

Länk till webben: Keanrich mond

Alice drougard

Alice drougard

Alice drougard håll det enkelt också med din logotyp placerad i mitten, fyra flikar för att flytta mellan huvudsidorna på din webbplats och en serie fotografier som är korrekt placerade så att vi snabbt ser vad du gör och vad du gör.

Länk till webben: Alice drougard

jonathan ogden

jonathan ogden

Ogden fortsätt spela med hur enkelt ditt namn är som en logotyp, de sociala nätverken som ligger strax nedanför utan att väcka uppmärksamhet och deras design fungerar så att vi snabbt kan gå igenom dem. På en sida visar det allt som betyder något.

Länk till webben: jonathan ogden

Finch

Finch

Finch ska redan till andra platser för att leka med typografi och sådana färger som betecknar elegans och visdom i vad den gör. Med bara några element lämnar han all sin professionalism i sikte. Det gör det också klart vilka sidor som har länkat till dig.

Länk till webben: Finch

En annan design

En annan design

Denna webbplats spela annorlunda. Använd en bakgrundsbild med en rubrik där vi kan gå till huvudsidorna, din telefon och länkarna till dina sociala nätverk.

Länk till webben: En annan design

rask

rask

Kai illustrerar oss med sin egen figur med en abstrakt triangel och en lämplig färgpalett att ge närhet. Han erbjuder också en del av sin bio med ett teckensnitt i mindre storlek om vi vill veta mer om honom.

Länk till webben: rask

Vertikal trädgårdsdesign

Vertikal trädgårdsdesign

Liksom den tidigare går Vertical Garden Design mot ett fotografi som visar snabbt ett av hans bästa jobb på Oslos flygplats. Överst har vi rubriken med navfältet eller navigeringsfältet och till och med möjligheten att ändra språk. Logotypen sätter den i vertikalt format för att ge den sista touchen till en mycket enkel sida.

Länk till webben: Vertikal trädgårdsdesign

247 grad

247 grad

247 grad spela med svartvitt och en bakgrundsbild nästan helt mörkt. Rubrikens teckensnitt, mindre än texten och rubriken, är verserat för att skapa en stor kontrast i den övergripande designen.

Länk till webben: 247 grad

Njut av detta

Njut av detta

en bra typografi kan vara ett tecken på att vara äkta och att vi vet vad vi gör. Du behöver inte ge något mer om meddelandet är direkt. De gör det mycket tydligt: ​​de älskar att skapa vackra appar och webbplatser. De lämnar posten för projekt och deras studie i en annan länk.

Länk till webben: Njut av detta

Allison hou

Allison hou

Allison tar oss före andra kurser och innehåller fler bilder och det mer "feminina" typsnittet. Detsamma gäller för din huvudbild och den rubriken. Han har lyxen att presentera ett kort som visar knep för shopping.

Länk till webben: Allison hou

pixelot

pixelot

Pixelot är lite galen, men det indikerar också författarens kreativitet. Använda sig av muspekaren för att skapa en mask som suddar ut överallt där vi har det.

Länk till webben: pixelot

Lionel scholtes

Lionel scholtes

Vill man gör ditt CV online med inget mer än så, Lionel visar dig stegen. Ett lämpligt typsnitt, ditt foto uppe till vänster, länkar till dina sociala nätverk och din upplevelse. Det enda dekorativa elementet är de två horisontella linjerna i olika färger.

Länk till webben: Lionel scholtes

Eleganta måsar

Eleganta måsar

Vi återvänder till minimalismens elegans och de stora tomma utrymmena. Å ena sidan är rubriken väldigt långt från resten av elementen, och å andra sidan dessa element formade på ett sådant sätt att de skapar en stor visuell harmoni mellan dem.

Länk till webben: Eleganta måsar

livsmiljö

livsmiljö

Som du kan se i alla exempel är det viktigt rubrikflikarna för att gå till olika sidor från webbplatsen. Typografin är av stor betydelse, spela med en för rubriken och en annan för texten med en sans serif som gör ett bra jobb.

Länk till webben: livsmiljö

PinkPoint

PinkPoint

Färgkontrasten leder oss till en lite mer komplex webb av alla vyer. Inte alla dessa huvudelement saknas för att spela den här gången med lutningarna för bakgrundsbilden och de två sektionerna som har huvudfärgerna för lutningen för huvudbilden.

Länk till webben: PinkPoint

IWC

IWC

Ett fantastiskt fotografi med ett väl valt teckensnitt och ett "hjälte" -element du kan ge till den här webben. Med en skjutreglage visar det att en del av arbetet är ganska enkelt i sin uppfattning.

Länk till webben: IWC

Hack hack

Hack hack

Digital illustration leder oss till Chop Chop med den bilden som äter upp den visuella närvaron av den. Den blå färgen i rubriken ger det sin poäng att skapa kromatiska värden i linje med hela bilden som projiceras av webben.

Länk till webben: Hack hack

7Tall

7Tall

7Pine leker med greenen för att vara den stora huvudpersonen i hemmaplattan. Resten komponerar det en bild med mycket grönt och en enkel rubrik som vill gå obemärkt förbi logotypen.

Länk till webben: 7Tall

Summan

Summan

Summan tar oss i andra riktningar. Spela med sagolik svartvitt, en mycket kreativ illustration och det går med resten av elementen och två andra illustrationer för att skapa ett mer än intressant landskap. Ett exempel på att skapa en webbplats som sticker ut från resten.

Länk till webben: Summan

Hattlåda

Hattlåda

Blå är den dominerande färgen på den här webbplatsen där det inte finns några bilder som saknas helt upplysta av vitt och hur spelet skulle se ut i 3D för den webbplatsbyggaren som rör sig när vi rör oss.

Länk till webben: Hattlåda

Kara lyte

Kara lyte

Kara går till enkelhet och minimalism med sin naturliga och vackra närvaro på ditt fotografi. Resten är en text som kommer tillsammans med vad som är huvudelementen för rubriken och en hamburgarknapp för att öppna den.

Länk till webben: Kara lyte

Intrinsic Studio Marketing

Inneboende

Es på det enklaste nätet men det visar oss vad det är att skapa en blogg. Rött och svart är huvudpersonerna på en mycket "blogg" -sida.

Länk till webben: Intrinsic Studio Marketing

Hur man skapar en enkel webbplats i HTML

html

Vi ska lära dig skapa en enkel webbplats i HTML så att du känner till de mest grundläggande elementen som komponerar den. Det kommer att vara nödvändigt att ha ett webbhotell där vi kan ladda koden och några justeringar i CSS, men kom igen, det här är principerna för att börja vår resa i HTML.

Efter att ha sett några enkla webbexempel Med vilken du kan motivera dig tillräckligt för att skapa dina egna mönster utan att bryta huvudet mycket. Ibland skapar det enkla en bättre effekt än att komplicera oss i komplexa saker. Du kommer att se att i de flesta fall fungerar det enkla mycket bra. Kör på.

Att skapa en enkel webbplats i HTML är lättare än det kan verka först. En hemsida består av en rubrik, kroppen eller innehåll och sidfoten eller sidfoten som huvudelement. Vi kan klassificera dem på detta sätt:

  • Dokument: alla dokument som vi ska skapa måste göras med en . Vi öppnar med en och stängs alltid med en
  • Kroppen eller kroppen: den synliga delen av dokumentet är mellan Y
  • Rubriker: de är kända av H1, H2, H3 ... Vi börjar med en och vi avslutar med en . Texten som finns inuti kommer att visas som en rubrik och beroende på numreringen kommer den att göra det i en mindre eller större storlek.
  • Stycken: stycket är inneslutet i a och stängs med
  • Länkar:  el ejemplo más claro es <a href:»https://www.creativosonline.org/»> Enlace a Creativos Online
  • Bildspråk: vi definierar dem med etiketten . Ett exempel kan vara . Vi åberopar bilden mellan citaten och använder ett alt för den alternativa texten som är väsentlig för SEO.
  • Listor: vi definierar listorna med för en rörig och med för ett snyggt. Listobjekt används med . Kom ihåg att stänga dem med baren.

html

Med dessa element kommer vi att ha grunden för att skapa en enkel webbplats som du kommer att se i den stora mängden av dem som vi kommer att lära dig i nästa avsnitt. Låt oss säga att den semantiska strukturen med dess viktigaste element ser ut så här:

  • Rubrik med navigeringsfältet för de olika sidorna på webbplatsen.
  • Artikeln eller kroppsutrymmet där vi kan skapa ett blogginlägg, lägga in vår läroplan eller en bild.
  • Sidofältet eller sidofältet för att lägga till ytterligare information.
  • Sidfoten eller foten, där vi kommer att placera länkar till de viktigaste sidorna på webbplatsen samt ikonerna för sociala nätverk (alltid som ett exempel).

I exemplen som du kommer att se nedan är allt baserat på en enkel men elegant logotyp, ett sidhuvud där de placerar navigeringen till webbplatsens olika sidor, ett centralt utrymme som domineras av en text eller en bild och ett sidfot med de element som nämns i föregående stycke.

Vi rekommenderar det bryta inte huvudet och gå till det enkla. Det viktigaste är att dessa områden skiljer sig från resten på ett visuellt pass av sekunder. Med tiden kommer vi att kunna komplicera oss själva och arbeta med fler andra utrymmen.

Detta är ett tydligt exempel på en HTML-kod med de viktigaste elementen:

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

Med dessa rader av HTML-kod skulle vi ha skapade först sidrubriken i rubriken med, i det här fallet «Semantisk HTML» stänger vi båda titeln med , rubriken med och vi skulle vika för att öppna kroppen med .

Vi skulle ha en första rubriken i H1 med för att stänga den med , och vi skulle gå till en lista som skulle hjälpa oss att skapa navigeringsfältet för de olika sidorna på vår webbplats. Vi stänger listan med , vi stänger och slutligen html-dokumentet med .

Att avsluta, öppna alltid ett dokument med för att stänga den i slutet av hela koden med snedstrecket. Efter att ha öppnat dokumentet används alltid hänvisningen till språket, som i detta fall är spanska med "es" och med a .

Det är viktigt att du tittar noga på koden och när som helst du öppnar en funktion stänger den med stapeln i enlighet därmed.

Lite CSS

Vi går in i CSS lite, men i förbigående så att du förstår hur man utformar HTML. Låt oss säga att CSS och HTML går hand i hand för att ge de enkla webbplatserna som du hittar nedan.

Om vi ​​å ena sidan har semantisk användning av HTML för vad som är rubriken, kroppen eller kroppen med dess artikel eller bild och sidfoten, i CSS skulle vi använda funktionen «Div» för att identifiera till vart och ett av dessa utrymmen för att senare tillämpa de nödvändiga ändringarna i designen.

Något så enkelt som:

Webbsemantik

Medan vi kan använda stilarna med Div, en lämplig och perfekt struktur hjälper så att webbsökare kan "läsa" perfekt vad vårt innehåll handlar om, så om vi följer den grundläggande strukturen kommer vi att ha ett bra jobb och bas först.

Un enkelt exempel på CSS-kod:

h1 {
färg: vit;
text-align: centrum;
}

Vi kallar H1 och texten vi lägger den i vitt med färg: vit; och vi kommer att justera den till mitten med «textjustering». Stäng alltid med hakparenteser efter att ha öppnat för H1-samtalet.

Rubrikfoto av Greg rakozy


3 kommentarer, lämna din

Lämna din kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *

*

*

  1. Ansvarig för uppgifterna: Miguel Ángel Gatón
  2. Syftet med uppgifterna: Kontrollera skräppost, kommentarhantering.
  3. Legitimering: Ditt samtycke
  4. Kommunikation av uppgifterna: Uppgifterna kommer inte att kommuniceras till tredje part förutom enligt laglig skyldighet.
  5. Datalagring: databas värd för Occentus Networks (EU)
  6. Rättigheter: När som helst kan du begränsa, återställa och radera din information.

  1.   Cristopher - webbplats sade

    Jag brinner verkligen också för design, en bra sida för att se designvärlden.

    Bästa hälsningar.

  2.   jorge sade

    Hej vänner, hur mår du?

    Jag gör en mycket enkel webbsida i html, och jag vill lägga till en kommentarruta till varje publikation. Kan du vägleda mig hur man gör det?

  3.   Emerson sade

    De av oss som behöver en mycket enkel webbsida med tre knappar och en bild, och i alla fall en spelare, skulle något liknande vara mycket användbart.
    Men jag tror inte att jag med den här informationen kan skapa min sida, men åtminstone ger den dig idéer och vad du ska leta efter