30 Paġni tal-Web Oerhört Sempliċi

web
Uħud mill-aktar paġni famużi huma mgħobbija żżejjed b’informazzjoni, imma nippreferi l-oppost: dawk sempliċi.

Ovvjament l-esponent kbir ta 'dan il-grupp huwa Google bil-paġna ewlenija minimalista tiegħu minn meta beda l-vjaġġ tiegħu, Iżda b'mod ċar mhuwiex l-uniku wieħed fuq l-Internet li huwa impenjat li jżomm l-affarijiet sempliċi.

Eżempji sempliċi ta 'paġna web HTML

Kean Richmond

Kean RichMond

Kean Richmond jagħmilna naraw is-sempliċità li nilagħbu bi ftit elementi, imma f'pożizzjoni tajba ħafna agħti sensazzjoni kbira lill-minimaliżmu. Il-logo tiegħu fin-naħa ta 'fuq tax-xellug, it-Twitter u l-ikoni tal-kuntatt fuq il-lemin u fiċ-ċentru, b'tipografija impressjonanti, għal dak li hu ddedikat.

Rabta mal-web: Keanrich mond

Alice drougard

Alice drougard

Alice drougard żommha sempliċi wkoll bil-logo tiegħek imqiegħed fiċ-ċentru, erba 'tabs biex tiċċaqlaq bejn il-paġni ewlenin tal-websajt tiegħek u sensiela ta' ritratti mqiegħda b'mod xieraq sabiex f'daqqa t'għajn nafu x'għandek tagħmel u dak li tagħmel.

Rabta mal-web: Alice drougard

jonathan ogden

jonathan ogden

Ogden kompli lgħab b'kemm hu sempliċi ismek bħala logo, in-netwerks soċjali li jinsabu eżatt taħt mingħajr ma jiġbdu l-attenzjoni u d-disinn tagħhom jaħdem sabiex inkunu nistgħu ngħaddu minnhom malajr. Fuq paġna waħda juri dak kollu li hu importanti.

Rabta mal-web: jonathan ogden

Sponsun

Sponsun

Finch diġà sejjer f'postijiet oħra biex jilgħab bit-tipografija u dawk kuluri li juru eleganti u għerf ta 'dak li tagħmel. Bi ftit elementi biss, huwa jħalli l-professjonalità tiegħu kollha fid-dawl. Tagħmilha ċara wkoll liema paġni rabtuk miegħek.

Rabta mal-web: Sponsun

Disinn differenti

Disinn differenti

Din il-websajt tilgħab b'mod differenti. Uża wallpaper b'intestatura li minnha nistgħu mmorru għall-paġni ewlenin, it-telefon tiegħek u l-links għan-netwerks soċjali tiegħek.

Rabta mal-web: Disinn differenti

mgħaġġel

mgħaġġel

Kai juri lilna bil-figura tiegħu stess ma ' trijanglu astratt u paletta tal-kuluri xierqa biex tagħti qrubija. Huwa joffri wkoll parti mill-bijo tiegħu b'tipa iżgħar f'każ li rridu nkunu nafu aktar dwaru.

Rabta mal-web: mgħaġġel

Disinn tal-Ġnien Vertikali

Disinn tal-Ġnien Vertikali

Bħal ta 'qabel, Vertical Garden Design imur lejn ritratt li juri malajr wieħed mill-aqwa impjiegi tiegħu fl-ajruport ta 'Oslo. 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.

Rabta mal-web: Disinn tal-Ġnien Vertikali

247 Grad

247 Grad

247 Grad tilgħab b'monokrom u immaġni ta 'sfond kważi kompletament skur. It-tipa header, iżgħar mit-test u l-header, hija kapitalizzata biex toħloq kuntrast kbir fid-disinn ġenerali.

Rabta mal-web: 247 Grad

Igawdu dan

Igawdu dan

a tipografija kbira tista 'tkun is-sinjal li tkun awtentiku u li nafu x'nagħmlu. M'għandekx għalfejn tagħti xejn aktar jekk il-messaġġ huwa dirett. Jagħmluha ċara ħafna: iħobbu joħolqu apps u websajts sbieħ. Huma jħallu l-posta għal proġetti u l-istudju tagħhom f'ħoloq ieħor.

Rabta mal-web: Igawdu dan

Allison hou

Allison hou

Allison teħodna qabel korsijiet oħra u tinkludi iktar stampi 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.

Rabta mal-web: Allison hou

pixelot

pixelot

Pixelot huwa kemmxejn miġnun, iżda jindika wkoll il-kreattività tal-awtur. Uża il-mouse pointer biex toħloq maskra li ċċajpar kull fejn għandna qiegħed.

Rabta mal-web: pixelot

Lionel skolti

Lionel skolti

Jekk inti tixtieq agħmel it-tkomplija tiegħek onlajn b'xejn aktar minn hekk, Lionel jurik il-passi. Tipa xierqa, ir-ritratt tiegħek fin-naħa ta 'fuq tax-xellug, links għan-netwerks soċjali tiegħek u l-esperjenza tiegħek. L-uniku element dekorattiv huma dawk iż-żewġ linji orizzontali ta 'kuluri differenti.

Rabta mal-web: Lionel skolti

Gaqwies Eleganti

Gaqwies Eleganti

Nirritornaw għall-eleganti tal-minimaliżmu u dawk l-ispazji vojta kbar. Minn naħa, l-intestatura hija 'l bogħod ħafna mill-bqija tal-elementi, u min-naħa l-oħra, dawk l-elementi ffurmati b'tali mod li joħolqu armonija viżwali kbira bejniethom.

Rabta mal-web: Gaqwies Eleganti

Lebensraum

Lebensraum

Kif tistgħu taraw fl-eżempji kollha, huwa importanti it-tabs tal-header biex tmur fil-paġni differenti mill-websajt. It-tipografija hija ta ’importanza kbira, tilgħab ma’ waħda għall-header u oħra għat-test b’sans serif li jagħmel biċċa xogħol tajba.

Rabta mal-web: Lebensraum

PinkPoint

PinkPoint

Il-kuntrast tal-kuluri jwassalna għal xibka kemmxejn aktar kumplessa tal-veduti kollha. Mhux dawk l-elementi ewlenin kollha huma nieqsa biex tilgħab din id-darba bil-gradjenti għall-immaġni fl-isfond u dawk iż-żewġ taqsimiet li għandhom il-kuluri ewlenin tal-gradjent għall-immaġni ewlenija.

Rabta mal-web: PinkPoint

IWC

IWC

Ritratt mill-aqwa ma ' una tipografía bien elegida y un elemento “hero” tista 'tagħti lil din il-web. Bi slider turi parti mix-xogħol biex tkun pjuttost sempliċi fil-konċepiment tagħha.

Rabta mal-web: IWC

CHOP CHOP

CHOP CHOP

Illustrazzjoni diġitali twassalna għal Chop Chop bi dik l-immaġni li tiekol il-preżenza viżwali kollha tagħha. Il-kulur blu fl-intestatura jagħtih il-punt tiegħu li joħloq valuri kromatiċi f'armonija ma 'l-immaġni kollha pproġettata mill-web.

Rabta mal-web: CHOP CHOP

7Pin

7Pin

7Pine jilgħab bl-aħdar biex tkun il-protagonist kbir tal-pjanċa tad-dar. Il-kumplament jikkomponih immaġni b'ħafna aħdar u header sempliċi li jrid jgħaddi inosservat mill-logo.

Rabta mal-web: 7Pin

Is-Somma

Is-Somma

Is-Somma teħodna f'direzzjonijiet oħra. Ilgħab bl-iswed u l-abjad fabulous, illustrazzjoni kreattiva ħafna u li jimxi id f'id mal-bqija tal-elementi u żewġ illustrazzjonijiet oħra biex joħolqu pajsaġġ aktar minn interessanti. Eżempju biex tinħoloq websajt li tispikka mill-bqija.

Rabta mal-web: Is-Somma

Kaxxa tal-kpiepel

Kaxxa tal-kpiepel

Il-blu huwa l-kulur predominanti f'dan il-websajt li fih m'hemmx immaġini nieqsa mdawwlin kompletament bl-abjad u kif tkun il-logħba fit-3D ta 'dak il-bennej tas-sit li tiċċaqlaq hekk kif nimxu aħna.

Rabta mal-web: Kaxxa tal-kpiepel

Kara lyte

Kara lyte

Kara tmur sempliċità u minimaliżmu bil-preżenza naturali u sabiħa tagħha fir-ritratt tiegħek. Il-bqija huwa test li jiġi flimkien ma 'x'inhuma l-elementi ewlenin għall-header u buttuna tal-hamburger biex tiftaħha.

Rabta mal-web: Kara lyte

Marketing tal-Istudinsic Instruments

Intrinsiku

Es mill-aktar web sempliċi pero que nos muestra lo que es hacer un blog. El rojo y el negro son los protagonistas en un sitio muy de “blogs”.

Rabta mal-web: Marketing tal-Istudinsic Instruments

Kif toħloq websajt sempliċi f'HTML

HTML

Aħna se ngħallmuk toħloq websajt sempliċi fl-HTML sabiex tkun taf l-aktar elementi bażiċi li jikkomponuh. Ikun neċessarju li jkollna web host fejn nistgħu nitgħabbew il-kodiċi u xi tweaks fis-CSS, imma ejja, dawn huma l-prinċipji biex nibdew il-vjaġġ tagħna bl-HTML.

Wara li rajt xi wħud eżempji tal-web sempliċi Li bihom tista 'timmotiva lilek innifsek biżżejjed biex tagħmel id-disinji tiegħek stess mingħajr ma tkisser rasek wisq. Kultant is-sempliċi joħloq effett aħjar milli jikkumplikawna f'affarijiet kumplessi. Se tara li f'ħafna każijiet is-sempliċi jaħdem tajjeb ħafna. Mur għaliha.

Il-ħolqien ta 'websajt sempliċi f'HTML huwa aktar faċli milli jista' jidher għall-ewwel. Websajt tikkonsisti minn header, il-ġisem jew kontenut u l-footer jew footer bħala elementi ewlenin. Nistgħu nikklassifikawhom b'dan il-mod:

  • Dokumenti: id-dokumenti kollha li se noħolqu għandhom isiru b ' . Niftħu b ' u dejjem jagħlaq b’a
  • Il-ġisem jew il-ġisem: il-parti viżibbli tad-dokument hija bejn Y
  • Intestaturi: huma magħrufa bl-H1, H2, H3 ... Nibdew b'a u nagħlqu b’a . It-test li jinsab ġewwa jidher bħala header u skont in-numerazzjoni tiegħu se jagħmel dan f’daqs iżgħar jew ikbar.
  • Paragrafi: il-paragrafu huwa magħluq fi u jagħlaq bi
  • Links:  el ejemplo más claro es <a href:”https://www.creativosonline.org/”> Enlace a Creativos Online</a>
  • Stampi: 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.
  • Listi: niddefinixxu l-listi bi għal messy u bi għal pulita. Oġġetti tal-lista jintużaw ma ' . Dejjem ftakar li tagħlaqhom mal-bar.

HTML

B'dawn l-elementi jkollna il-bażi għall-ħolqien ta 'websajt sempliċi kif se tara fl-ammont tajjeb minnhom li se ngħallmuk fit-taqsima li jmiss. Ejja ngħidu li l-istruttura semantika bl-aktar elementi importanti tagħha tidher hekk:

  • Header bil-bar tan-navigazzjoni tagħha għad-diversi paġni tas-sit.
  • L-oġġett jew l-ispazju tal-ġisem li fih nistgħu noħolqu blog entry, inpoġġu l-kurrikulu jew immaġni tagħna.
  • Il-ġenb jew il-ġenb biex tpoġġi informazzjoni addizzjonali.
  • Il-footer jew sieq, fejn se npoġġu links għall-aktar paġni importanti tas-sit kif ukoll l-ikoni tan-netwerks soċjali (dejjem bħala eżempju).

Fl-eżempji li se tara hawn taħt jinsabu kollha bbażati fuq logo sempliċi imma eleganti, header fejn ipoġġu n-navigazzjoni lejn il-paġni differenti tas-sit, spazju ċentrali ddominat minn test jew immaġni u footer bl-elementi msemmija fil-paragrafu preċedenti.

Nirrakkomandaw li tiksirx rasek u mur għas-sempliċi. Il-ħaġa ewlenija hija li dawn iż-żoni huma differenzjati mill-bqija f'pass viżwali ta 'sekonda. Biż-żmien inkunu nistgħu nikkomplikaw lilna nfusna u naħdmu aktar spazji oħra.

Dan hu eżempju ċar ta 'kodiċi HTML bl-aktar elementi importanti:

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

B'dawn il-linji ta 'kodiċi HTML li jkollna l-ewwel ħoloq it-titlu tal-paġna fl-intestatura bi, 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>.

Aħna jkollna l-ewwel header f'H1 ma ' biex tagħlaqha bi , u aħna mmorru għal lista li tgħinna noħolqu l-istrixxa tan-navigazzjoni għall-paġni differenti tas-sit tagħna. Nagħlqu l-lista bi , nagħlqu u fl-aħħar id-dokument html bi .

Biex tispiċċa, dejjem tiftaħ dokument bi 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’>.

Huwa importanti li tħares mill-qrib lejn il-kodiċi u kull meta tiftaħ funzjoni tagħlaqha bil-bar korrispondenti

Ftit CSS

Immorru fis-CSS xi ftit, imma bil-mod biex tifhem kif stil HTML. Ejja ngħidu li CSS u HTML jimxu id f'id biex jagħtu dawk il-websajts sempliċi li ssib hawn taħt.

Jekk min-naħa waħda għandna l-użu semantiku tal-HTML għal dak li hu l-intestatura, il-korp jew il-korp bl-artiklu jew l-immaġni tiegħu u l-footer, en CSS usaríamos la función “Div” para identificar għal kull wieħed minn dawn l-ispazji sabiex aktar tard tapplika l-bidliet meħtieġa fid-disinn.

Xi ħaġa sempliċi daqs:

Semantika tal-web

Filwaqt li nistgħu napplikaw l-istili bid-Div, struttura xierqa u perfetta tgħin 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 eżempju sempliċi tal-kodiċi CSS:

h1 {
kulur: abjad;
test jallinjaw: ċentru;
}

Aħna nsejħu H1 u t-test se npoġġuh abjad bil-kulur: abjad; y lo alinearemos al centro con “text align”. Siempre hay que cerrar con corchetes después de abrir a la llamada del H1.

Ritratt tal-intestatura ta ' Greg rakozy


Il-kontenut tal-artikolu jaderixxi mal-prinċipji tagħna ta ' etika editorjali. Biex tirrapporta żball ikklikkja hawn.

3 kummenti, ħalli tiegħek

Ħalli l-kumment tiegħek

Your email address mhux se jkun ippubblikat.

*

*

  1. Responsabbli għad-dejta: Miguel Ángel Gatón
  2. Għan tad-dejta: Kontroll SPAM, ġestjoni tal-kummenti.
  3. Leġittimazzjoni: Il-kunsens tiegħek
  4. Komunikazzjoni tad-dejta: Id-dejta ma tiġix ikkomunikata lil partijiet terzi ħlief b'obbligu legali.
  5. Ħażna tad-dejta: Bażi tad-dejta ospitata minn Occentus Networks (UE)
  6. Drittijiet: Fi kwalunkwe ħin tista 'tillimita, tirkupra u tħassar l-informazzjoni tiegħek.

  1.   Cristopher - websajt qal

    Jien tassew passjonat ukoll dwar id-disinn, paġna tajba biex nara d-dinja tad-disinn.

    Tislijiet.

  2.   Jorge qal

    Hello ħbieb, kif sejjer?

    Qed nagħmel paġna tal-web sempliċi ħafna f'html, u nixtieq inżid kaxxa tal-kummenti ma 'kull pubblikazzjoni. Tista 'tiggwidani kif nagħmilha?

  3.   EMERSON qal

    Dawk minna li għandna bżonn paġna tal-web sempliċi ħafna bi tliet buttuni u immaġni, u fi kwalunkwe każ plejer, xi ħaġa bħal din tkun utli ħafna.
    Madankollu ma nemminx li b'din l-informazzjoni kapaċi nibni l-paġna tiegħi, imma għallinqas tagħtik ideat u x'għandek tfittex