30 ongelooflijk eenvoudige webpagina's

Sommige van de beroemdste pagina's zijn erg overladen met informatie, maar ik geef de voorkeur aan het tegenovergestelde: de simpele.

De grote exponent van deze groep is duidelijk Google met zijn minimalistische startpagina sinds het begin van zijn reis, maar het is duidelijk niet de enige op internet die zich inzet om dingen eenvoudig te houden.

Voorbeelden van eenvoudige HTML-webpagina's

Kean richmond

Kean Richmond laat ons de eenvoud zien van spelen met weinig elementen, maar zeer goed geplaatst geven een geweldig gevoel aan minimalisme​ Zijn logo linksboven, de Twitter- en contactpictogrammen rechts en in het midden, met een opvallende typografie, aan wat hij toegewijd is.

Link naar internet: Keanrich mond

Alice Drugard

Alice Drugard houd het ook simpel met uw logo geplaatst in het midden vier tabbladen om tussen de hoofdpagina's van uw website te bewegen en een reeks foto's correct geplaatst zodat we in één oogopslag weten wat u doet en doet.

Link naar internet: Alice Drugard

jonathan ogden

Ogden blijf spelen met hoe simpel je naam als logo is, de sociale netwerken die zich er net onder bevinden zonder de aandacht te trekken en hun ontwerp werkt zodat we ze snel kunnen doorlopen. Op één pagina staat alles wat er toe doet.

Link naar internet: jonathan ogden

vink

Finch gaat al naar andere plaatsen om met typografie te spelen en zo kleuren die duiden op elegantie en wijsheid van wat het doet​ Met slechts een paar elementen laat hij al zijn professionaliteit in het oog. Het maakt ook duidelijk welke pagina's naar u zijn gelinkt.

Link naar internet: vink

Een ander ontwerp

Deze website anders spelen​ Gebruik een achtergrond met een koptekst van waaruit we naar de hoofdpagina's, uw telefoon en de links naar uw sociale netwerken kunnen gaan.

Link naar internet: Een ander ontwerp

levendig

Kai illustreert ons met zijn eigen figuur met een abstracte driehoek en een passend kleurenpalet om nabijheid te geven. Hij biedt ook een deel van zijn bio aan met een lettertype in een kleiner formaat voor het geval we meer over hem willen weten.

Link naar internet: levendig

Verticaal tuinontwerp

Net als de vorige gaat Vertical Garden Design naar een foto die snel zichtbaar is een van zijn beste banen op de luchthaven van Oslo​ Bovenaan hebben we de koptekst met de «navigatiebalk» of navigatiebalk en zelfs de mogelijkheid om de taal te wijzigen. Het logo plaatst het in een verticaal formaat om de laatste hand te leggen aan een heel eenvoudige pagina.

Link naar internet: Verticaal tuinontwerp

247Grad

247Grad speel met zwart-wit en een achtergrondafbeelding bijna helemaal donker. Het koptekstlettertype, kleiner dan de tekst en koptekst, wordt met een hoofdletter geschreven om een ​​groot contrast in het algehele ontwerp te creëren.

Link naar internet: 247Grad

Geniet van deze

een geweldige typografie kan het teken zijn van authentiek zijn en dat we weten wat we doen. U hoeft niets meer te geven als de boodschap direct is. Ze maken het duidelijk: ze houden ervan om mooie apps en websites te maken. Ze verlaten de post voor projecten en hun studie in een andere link.

Link naar internet: Geniet van deze

Allison hou

Allison neemt ons mee voor andere cursussen en bevat meer afbeeldingen en dat meer "vrouwelijke" lettertype. Hetzelfde geldt voor je hoofdafbeelding en die koptekst. Hij heeft de luxe om een ​​kaart te laten zien waarop winkeltrucs te zien zijn.

Link naar internet: Allison hou

pixelot

Pixelot is een beetje gek, maar het geeft ook de creativiteit van de auteur aan. Gebruik de muisaanwijzer om een ​​masker te maken dat vervaagt waar we het ook hebben neergestreken.

Link naar internet: pixelot

Lionel scholtes

Als u wilt dat maak je cv online met niets meer dan dat, Lionel laat je de stappen zien. Een geschikt lettertype, uw foto linksboven, links naar uw sociale netwerken en uw ervaring. Het enige decoratieve element zijn die twee horizontale lijnen in verschillende kleuren.

Link naar internet: Lionel scholtes

Elegante meeuwen

We komen terug tot de elegantie van minimalisme en die grote lege ruimtes. Enerzijds is de kop erg ver verwijderd van de rest van de elementen, en anderzijds zijn de elementen zo gevormd dat ze een grote visuele harmonie tussen hen creëren.

Link naar internet: Elegante meeuwen

leefgebied

Zoals je in alle voorbeelden kunt zien, is het belangrijk de kopteksttabs om naar de verschillende pagina's te gaan van de website. De typografie is van groot belang, speel met een voor de koptekst en een andere voor de tekst met een schreefloze die het geweldig doet.

Link naar internet: leefgebied

RozePunt

Het contrast van kleuren leidt ons naar een iets complexer web van alle aanzichten. Niet al die hoofdelementen ontbreken om deze keer te spelen met de verlopen voor de achtergrondafbeelding en die twee secties met de hoofdkleuren van de kleurovergang van de hoofdafbeelding.

Link naar internet: RozePunt

IWC

Een geweldige foto met een goed gekozen lettertype en een "hero" -element u kunt aan dit web geven. Met een schuifregelaar laat het zien dat een deel van het werk vrij eenvoudig van opzet is.

Link naar internet: IWC

Hak hakken

De digitale illustratie brengt ons bij Chop Chop with dat beeld dat alle visuele aanwezigheid ervan opeet​ De blauwe kleur in de koptekst geeft het de reden om chromatische waarden te creëren die zijn afgestemd op het volledige beeld dat door het web wordt geprojecteerd.

Link naar internet: Hak hakken

7Dennen

7Pine speelt met de green om de grote hoofdrolspeler op de thuisplaat te zijn. De rest stelt het samen een afbeelding met veel groen en een simpele header die onopgemerkt wil blijven door het logo.

Link naar internet: 7Dennen

De som

De Sum brengt ons wel in andere richtingen. Speel met legendarisch zwart en wit, een zeer creatieve illustratie en dat gaat samen met de rest van de elementen en twee andere illustraties om een ​​meer dan interessant landschap te creëren. Een voorbeeld om een ​​website te maken die zich onderscheidt van de rest.

Link naar internet: De som

Hoedendoos

Blauw is de overheersende kleur op deze website waarin er geen ontbrekende afbeeldingen zijn die volledig worden verlicht door wit en hoe het spel eruit zou zien in 3D van die sitebouwer dat beweegt als we bewegen.

Link naar internet: Hoedendoos

Kara lyte

Kara gaat naar eenvoud en minimalisme met zijn natuurlijke en mooie aanwezigheid op je foto. De rest is een tekst die wordt geleverd met de belangrijkste elementen voor de koptekst en een hamburgerknop om deze te openen.

Link naar internet: Kara lyte

Instinctieve studiomarketing

Es van het eenvoudigste web maar dat laat ons zien wat het is om een ​​blog te maken. Rood en zwart zijn de hoofdrolspelers in een zeer "blog" -site.

Link naar internet: Instinctieve studiomarketing

Hoe maak je een eenvoudige website in HTML

We gaan het je leren maak een eenvoudige website in HTML zodat u de meest elementaire elementen kent waaruit het bestaat. Het zal nodig zijn om een ​​webhost te hebben waar we de code en enkele tweaks in CSS kunnen laden, maar kom op, dit zijn de principes om onze reis in HTML te beginnen.

Ik heb er een paar gezien eenvoudige webvoorbeelden Waarmee je jezelf voldoende kunt motiveren om je eigen ontwerpen te maken zonder je hoofd te breken. Soms creëert het simpele een beter effect dan ons ingewikkeld te maken in complexe dingen. Je zult zien dat in de meeste gevallen het simpele heel goed werkt. Ga ervoor.

Het maken van een eenvoudige website in HTML is eenvoudiger dan het op het eerste gezicht lijkt. Een website bestaat uit een kop, het lichaam of inhoud en de voettekst of voettekst als hoofdelementen. We kunnen ze op deze manier classificeren:

• Documenten: alle documenten die we gaan maken, moeten worden gedaan met een ​ We openen met een en sluit altijd af met een
• Het lichaam of lichaam: het zichtbare deel van het document is tussen Y
• Headers: ze zijn bekend onder de H1, H2, H3 ... We beginnen met een en we sluiten af ​​met een ​ De tekst die erin staat, wordt als een koptekst weergegeven en afhankelijk van de nummering wordt dit in een kleiner of groter formaat gedaan.
• Paragrafen: de alinea is omsloten door een en sluit af met
• Links: het duidelijkste voorbeeld iscreativosonline.org/»> Link naar Creativos OnlinePlaatsen
• Imágenes: we definiëren ze aan de hand van het label ​ Een voorbeeld zou zijn ​ We roepen de afbeelding tussen de aanhalingstekens op en gebruiken een alt voor de alternatieve tekst die essentieel is voor SEO.
• Lijsten: we definiëren de lijsten met voor een rommelig en met voor een nette. Lijstitems worden gebruikt met ​ Denk er altijd aan om ze af te sluiten met de balk.

Met deze elementen zullen we hebben de basis voor het maken van een eenvoudige website zoals je zult zien in het grote aantal dat we je in de volgende sectie zullen leren. Laten we zeggen dat de semantische structuur met zijn belangrijkste elementen er als volgt uitziet:

• Header met zijn navigatiebalk voor de verschillende pagina's van de site.
• Het artikel of de lichaamsruimte waarin we een blogpost kunnen maken, ons cv of een afbeelding kunnen plaatsen.
• De zijbalk of zijbalk om aanvullende informatie te plaatsen.
• De voettekst of voet, waar we links plaatsen naar de belangrijkste pagina's van de site en de iconen van sociale netwerken (altijd als voorbeeld).

In de voorbeelden die u hieronder ziet staan allemaal gebaseerd op een eenvoudig maar elegant logo, een koptekst waar ze de navigatie naar de verschillende pagina's van de site plaatsen, een centrale ruimte gedomineerd door een tekst of een afbeelding en een voettekst met de elementen genoemd in de vorige paragraaf.

Dat raden we aan breek je hoofd niet en ga naar het eenvoudige​ Het belangrijkste is dat deze gebieden in een oogwenk van seconden worden onderscheiden van de rest. Na verloop van tijd zullen we onszelf ingewikkelder kunnen maken en meer aan andere ruimtes kunnen werken.

Dit is een duidelijk voorbeeld van een HTML-code met de belangrijkste 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>

Met deze regels HTML-code zouden we hebben creëerde eerst de paginatitel in de koptekst met, in dit geval «Semantische HTML», sluiten we zowel de titel met , de koptekst met en we zouden wijken om het lichaam mee te openen ​

We zouden een eerste kop in H1 met om het mee af te sluiten , en we zouden naar een lijst gaan die ons zou helpen om de navigatiebalk voor de verschillende pagina's van onze site te maken. We sluiten de lijst af met , we sluiten en tenslotte het html-document met ​

Tenslotte open altijd een document met om het aan het einde van de hele code te sluiten met de schuine streep. Na het openen van het document wordt altijd de verwijzing naar de taal gebruikt, in dit geval Spaans met «es» en met een ​

Het is belangrijk dat u goed naar de code kijkt en wanneer je opent een functie sluit deze af met de balk betreft.

Een beetje CSS

We gaan een beetje in op de CSS, maar terloops zodat u het begrijpt hoe HTML te stylen​ Laten we zeggen dat CSS en HTML hand in hand gaan om die eenvoudige websites te maken die u hieronder zult vinden.

Als we enerzijds het semantische gebruik van HTML hebben voor wat is de koptekst, de body of body met zijn artikel of afbeelding en de voettekst, in CSS zouden we de «Div» -functie gebruiken om te identificeren op elk van deze ruimtes om later de nodige wijzigingen in het ontwerp aan te brengen.

Iets eenvoudigs als:

Hoewel we de stijlen met Div kunnen toepassen, een geschikte en perfecte structuur zal helpen zodat webcrawlers perfect kunnen "lezen" waar onze inhoud over gaat, dus als we die basisstructuur volgen, zullen we eerst een geweldige job en basis hebben.

Un eenvoudig CSS-codevoorbeeld:

h1 {
kleur: wit;
text-align: centrum;
}

We noemen H1 en de tekst we zetten het in wit met kleur: wit; en we zullen het naar het midden uitlijnen met «tekst uitlijnen». Sluit altijd met vierkante haken na het openen van de H1-oproep.

Headerfoto van Greg rakozy