30 Ongelooflike eenvoudige webbladsye

web
Sommige van die bekendste bladsye is baie oorlaai met inligting, maar ek verkies die teenoorgestelde: die eenvoudige.

Dit is duidelik dat die grootste eksponent van hierdie groep Google is met sy minimalistiese tuisblad sedert sy reis begin het, Maar dit is duidelik dat dit nie die enigste op die internet is wat daartoe verbind is om dinge eenvoudig te hou nie.

Eenvoudige HTML-webbladvoorbeelde

Kean richmond

Kean RichMond

Kean Richmond laat ons die eenvoud sien om met min elemente te speel, maar baie goed geplaas om gee 'n wonderlike gevoel aan minimalisme. Sy logo links bo, die Twitter- en kontakikone regs en in die middel, met 'n opvallende tipografie, aan wat hy toegewy het.

Skakel na die web: Keanrich mond

Alice drougard

Alice drougard

Alice drougard hou dit eenvoudig ook met u logo geplaas in die middel, vier oortjies om tussen die hoofbladsye van u webwerf te beweeg en 'n reeks foto's gepas geplaas sodat ons in 'n oogopslag weet wat u doen en wat u doen.

Skakel na die web: Alice drougard

Jonathan Ogden

Jonathan Ogden

Ogden hou aan om te speel met hoe eenvoudig u naam as 'n logo is, die sosiale netwerke wat net onder geleë is sonder om aandag te trek, en die ontwerp daarvan werk sodat ons vinnig daardeur kan gaan. Op een bladsy word alles getoon wat saak maak.

Skakel na die web: Jonathan Ogden

Finch

Finch

Finch gaan al na ander plekke om met tipografie en dié te speel kleure wat elegansie en wysheid aandui van wat dit doen. Met net 'n paar elemente laat hy al sy professionaliteit in die oog. Dit maak dit ook duidelik watter bladsye aan u gekoppel is.

Skakel na die web: Finch

'N Ander ontwerp

'N Ander ontwerp

Hierdie webwerf anders speel. Gebruik 'n muurpapier met 'n opskrif waarvandaan ons na die hoofbladsye, u telefoon en die skakels na u sosiale netwerke kan gaan.

Skakel na die web: 'N Ander ontwerp

Brizk

Brizk

Kai illustreer ons met sy eie figuur met 'n abstrakte driehoek en 'n geskikte kleurpalet om nabyheid te gee. Hy bied ook 'n gedeelte van sy biografie aan met 'n lettertipe in 'n kleiner grootte as ons meer van hom wil weet.

Skakel na die web: Brizk

Vertikale tuinontwerp

Vertikale tuinontwerp

Soos die vorige, gaan Vertikale Tuinontwerp na 'n foto wat vinnig vertoon een van sy beste werk op die lughawe in Oslo. Aan die bokant het ons die kop met die «nav-balk» of navigasiebalk en selfs die moontlikheid om die taal te verander. Die logo plaas dit in vertikale formaat om 'n baie eenvoudige bladsy die finale aanslag te gee.

Skakel na die web: Vertikale tuinontwerp

247 grade

247 grade

247 grade speel met monochroom en 'n agtergrondbeeld amper heeltemal donker. Die kopskrif, kleiner as die teks en kop, is hoofletters om 'n groot kontras in die algehele ontwerp te skep.

Skakel na die web: 247 grade

Geniet dit

Geniet dit

'n goeie tipografie kan die teken wees van outentiek wees en dat ons weet wat ons doen. U hoef niks meer te gee as die boodskap direk is nie. Hulle stel dit baie duidelik: hulle hou daarvan om pragtige programme en webwerwe te skep. Hulle laat die pos vir projekte en hul studie in 'n ander skakel.

Skakel na die web: Geniet dit

Allison hou

Allison hou

Allison neem ons voor ander kursusse en bevat meer beelde en daardie meer "vroulike" lettertipe. Dieselfde geld vir u hoofbeeld en die kop. Hy het die luukse om 'n kaartjie met winkeltoertjies aan te bied.

Skakel na die web: Allison hou

Pixelot

Pixelot

Pixelot is 'n bietjie mal, maar dit dui ook op die kreatiwiteit van die skrywer. Gebruik die muiswyser om 'n masker te skep wat vervaag oral waar ons dit sit.

Skakel na die web: Pixelot

Lionel scholtes

Lionel scholtes

As jy wil maak u CV aanlyn met niks meer as dit nie, Lionel wys jou die stappe. 'N Geskikte lettertipe, u foto links bo, skakels na u sosiale netwerke en u ervaring. Die enigste dekoratiewe element is die twee horisontale lyne van verskillende kleure.

Skakel na die web: Lionel scholtes

Elegante seemeeue

Elegante seemeeue

Ons kom terug tot die elegansie van minimalisme en daardie groot leë spasies. Enersyds is die kopstuk baie ver van die res van die elemente af, en andersyds is die elemente so gevorm dat dit 'n groot visuele harmonie tussen hulle skep.

Skakel na die web: Elegante seemeeue

habitat

habitat

Soos u in al die voorbeelde kan sien, is dit belangrik die koppe-oortjies om na die verskillende bladsye te gaan vanaf die webwerf. Die tipografie is van groot belang, speel met een vir die koptekst en 'n ander vir die teks met 'n sans serif wat goeie werk lewer.

Skakel na die web: habitat

PinkPoint

PinkPoint

Die kontras van kleure lei ons na 'n effens meer komplekse web van al die aansigte. Nie al die hoofelemente ontbreek nie om hierdie keer te speel met die gradiënte vir die agtergrond en die twee afdelings wat die hoofkleure van die gradiënt van die hoofbeeld het.

Skakel na die web: PinkPoint

IWC

IWC

'N Goeie foto met 'n goed gekose lettertipe en 'n 'held'-element kan u aan hierdie web gee. Met 'n skuifbalk wys dit dat 'n deel van die werk redelik eenvoudig is in sy konsepsie.

Skakel na die web: IWC

Kap kap

Kap kap

Die digitale illustrasie bring ons by Chop Chop met daardie beeld wat al die visuele teenwoordigheid daarvan opvreet. Die blou kleur in die opskrif gee die punt om chromatiese waardes te skep in ooreenstemming met die hele beeld wat deur die web geprojekteer word.

Skakel na die web: Kap kap

7 Pynappel

7 Pynappel

7Pine speel met die setperk om die groot protagonis van die tuisbord te wees. Die res stel dit saam 'n beeld met baie groen en 'n eenvoudige kop wat deur die logo ongesiens wil bly.

Skakel na die web: 7 Pynappel

Die som

Die som

Die som neem ons wel in ander rigtings. Speel met spoggerige swart en wit, 'n baie kreatiewe illustrasie en dit gaan saam met die res van die elemente en twee ander illustrasies om 'n meer as interessante landskap te skep. 'N Voorbeeld om 'n webwerf te skep wat van die res uitstaan.

Skakel na die web: Die som

Hoededoos

Hoededoos

Blou is die oorheersende kleur op hierdie webwerf waarin daar geen beelde ontbreek wat volledig deur wit verlig is nie en hoe die spel sou lyk in 3D van die werfbouer dit beweeg soos ons beweeg.

Skakel na die web: Hoededoos

Kara lyte

Kara lyte

Kara gaan na eenvoud en minimalisme met sy natuurlike en pragtige teenwoordigheid op u foto. Die res is 'n teks wat saam met die hoofelemente vir die koptekst verskyn en 'n hamburgerknoppie om dit oop te maak.

Skakel na die web: Kara lyte

Instrinsic Studio Bemarking

intrinsieke

Es van die eenvoudigste web maar dit wys ons wat dit is om 'n blog te maak. Rooi en swart is die sterre van 'n baie "blog" webwerf.

Skakel na die web: Instrinsic Studio Bemarking

Hoe om 'n eenvoudige webwerf in HTML te skep

HTML

Ons gaan u leer skep 'n eenvoudige webwerf in HTML sodat u die basiese elemente ken wat dit saamstel. Dit sal nodig wees om 'n webhost te hê waar ons die kode en 'n paar aanpassings in CSS kan laai, maar nou, dit is die beginsels om ons reis in HTML te begin.

Nadat ek gesien het eenvoudige webvoorbeelde Waarmee jy jouself genoeg kan motiveer om jou eie ontwerpe te maak sonder om jou kop baie te breek. Soms skep die eenvoudige 'n beter effek as om ons in ingewikkelde dinge te bemoeilik. U sal sien dat die eenvoud in die meeste gevalle baie goed werk. Gaan vir dit.

Om 'n eenvoudige webwerf in HTML te skep, is makliker as wat dit aanvanklik lyk. 'N webwerf bestaan ​​uit 'n kop, die liggaam of inhoud en die voet- of voetskrif as hoofelemente. Ons kan hulle so klassifiseer:

  • dokumente: al die dokumente wat ons gaan skep, moet met a gedoen word . Ons open met 'n en sluit altyd met 'n
  • Die liggaam of liggaam: die sigbare deel van die dokument is tussen Y
  • Opskrifte: hulle word geken aan die H1, H2, H3 ... Ons begin met 'n en ons sluit met 'n . Die teks wat binne is, sal as 'n koptekst verskyn, en afhangend van die nommering, sal dit in 'n kleiner of groter grootte gedoen word.
  • Paragrawe: die paragraaf is opgesluit in a en sluit met
  • Enlaces: die duidelikste voorbeeld is 'n skakel na Creativos Online
  • Imagery: ons definieer dit aan die hand van die etiket . 'N Voorbeeld sou wees . Ons roep die beeld op tussen die aanhalingstekens en gebruik 'n alt vir die alternatiewe teks wat vir SEO noodsaaklik is.
  • Lyste: ons definieer die lyste met vir 'n morsige en met vir 'n netjiese. Lysitems word saam met . Onthou om dit altyd met die staaf toe te maak.

HTML

Met hierdie elemente sal ons hê die basis vir die skep van 'n eenvoudige webwerf soos u sal sien in die goeie hoeveelheid wat ons u in die volgende afdeling sal leer. Gestel die semantiese struktuur met sy belangrikste elemente lyk soos volg:

  • Opskrif met sy navigasiebalk vir die verskillende bladsye op die webwerf.
  • Die artikel of liggaamsruimte waarin ons 'n bloginskrywing kan maak, ons kurrikulum of 'n beeld kan plaas.
  • Die sybalk of sybalk om addisionele inligting te plaas.
  • Die voetskrif of voet, waar ons skakels na die belangrikste bladsye van die webwerf sowel as die ikone van sosiale netwerke sal plaas (altyd as voorbeeld).

In die voorbeelde wat u hieronder sal sien, is alles gebaseer op 'n eenvoudige, maar elegante logo, 'n koptekst waar hulle die navigasie na die verskillende bladsye van die werf plaas, 'n sentrale ruimte wat oorheers word deur 'n teks of 'n afbeelding en 'n voetskrif met die elemente wat in die vorige paragraaf genoem word.

Ons beveel dit aan moenie jou kop breek nie en gaan na die eenvoudige. Die belangrikste is dat hierdie gebiede in 'n visuele verloop van sekondes van die res onderskei word. Met verloop van tyd sal ons onsself kan bemoeilik en meer aan ander ruimtes kan werk.

Dit is 'n duidelike voorbeeld van 'n HTML-kode met die belangrikste elemente:

<!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 hierdie reëls van HTML-kode sou ons hê het eers die bladsytitel met die, in hierdie geval «Semantiese HTML», sou ons albei die titel met sluit , die kop met en ons sou plek maak om die liggaam mee oop te maak .

Ons sou 'n eerste kop in H1 met om dit mee toe te maak , en ons gaan na 'n lys wat ons sal help om die navigasiebalk vir die verskillende bladsye op ons webwerf te skep. Ons sluit die lys af met , maak ons ​​toe en uiteindelik die html-dokument met .

Om te eindig, open altyd 'n dokument met om dit aan die einde van die hele kode met die skuinsstreep toe te maak. Na die opening van die dokument word die verwysing na die taal altyd gebruik, wat in hierdie geval Spaans is met "es" en met a .

Dit is belangrik dat u die kode en wanneer ook al noukeurig ondersoek jy 'n funksie oopmaak, maak dit toe met die balk correspondiente.

'N Bietjie CSS

Ons gaan 'n bietjie in die CSS, maar terloops sodat u dit verstaan hoe om HTML te styl. Gestel CSS en HTML gaan hand aan hand om die eenvoudige webwerwe te gee wat u hieronder sal vind.

As ons enersyds die semantiese gebruik van HTML vir die kop, die liggaam of die liggaam met sy artikel of afbeelding en die voetskrif gebruik, in CSS sou ons die «Div» -funksie gebruik om te identifiseer op elkeen van hierdie ruimtes om later die nodige veranderinge in die ontwerp toe te pas.

Iets so eenvoudig soos:

Web-semantiek

Alhoewel ons die style met Div kan toepas, 'n geskikte en perfekte struktuur sal help sodat webkruipers perfek kan "lees" waaroor ons inhoud gaan, so as ons die basiese struktuur volg, sal ons eers 'n uitstekende werk hê.

Un eenvoudige CSS-kode voorbeeld:

h1 {
kleur: wit;
teksbelyn: sentrum;
}

Ons noem H1 en die teks ons sal dit in wit sit met kleur: wit; en ons sal dit met die middel in lyn bring met «teksbelyning». Sluit altyd met hakies na die opening van die H1-oproep.

Opskriffoto van Greg rakozy


Die inhoud van die artikel voldoen aan ons beginsels van redaksionele etiek. Klik op om 'n fout te rapporteer hier.

3 kommentaar, los joune

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.

  1.   Cristopher - webwerf dijo

    Ek is regtig ook passievol oor ontwerp, 'n goeie bladsy om die wêreld van ontwerp te sien.

    Beste wense.

  2.   Jorge dijo

    Hallo vriende, hoe gaan dit met jou?

    Ek maak 'n baie eenvoudige webblad in html, en ek wil 'n opmerkingsblokkie by elke publikasie voeg. Kan u my lei hoe om dit te doen?

  3.   Emerson dijo

    Diegene onder ons wat 'n baie eenvoudige webblad met drie knoppies en 'n prentjie en in elk geval 'n speler nodig het, sal so iets nuttigs wees.
    Ek glo egter nie dat ek my bladsy kan opbou nie, maar dit gee u ten minste idees en waarna u moet kyk.