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 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 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
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 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
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
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
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 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
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 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 ä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
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
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ö
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
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
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
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
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 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
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 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
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
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.
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:
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
Jag brinner verkligen också för design, en bra sida för att se designvärlden.
Bästa hälsningar.
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?
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