Pejin-tranonkala tsotra 30 tsy mampino

Ny sasany amin'ireo pejy malaza indrindra dia be loatra ny fampahalalana, saingy aleoko ny mifanohitra amin'izany: ny tsotra.

Mazava ho azy fa ny mpiaro ny anton'ity vondrona ity dia Google miaraka amin'ny pejy fandraisana minimalista hatramin'ny nanombohany ny diany, Fa mazava ho azy fa tsy ny eo amin'ny Internet ihany no manolo-tena hitazona ny zavatra ho tsotra.

Ohatra amin'ny pejy HTML tsotra

Kean richmond

Kean Richmond dia mahatonga antsika hahita ny fahatsoran'ny filalaovana singa vitsivitsy, saingy napetraka tsara manome fahatsapana lehibe ho an'ny minimalism. Ny sary famantarana azy eo amin'ny ankavia ambony, ireo sary famantarana Twitter sy fifandraisana eo ankavanana sy eo afovoany, miaraka amin'ny typografika manaitra, izay natokana ho azy.

Rohy mankamin'ny tranonkala: Keanrich mond

Alice drougard

Alice drougard ataovy tsotra ihany koa ny fametrahana ny sary famantarana anao eo afovoany, kiheba efatra hifindra eo anelanelan'ny pejy lehibe amin'ny tranokalanao sy ny andian-tsary napetraka araka ny tokony ho izy mba hahafantaranay azy ireo indray mijery izay ataonao sy izay ataonao.

Rohy mankamin'ny tranonkala: Alice drougard

jonathan ogden

Ogden milalao hatrany amin'ny fomba tsotra ny anaranao toy ny sary famantarana, ireo tambajotra sosialy hita etsy ambany ihany nefa tsy mahasarika ny saina sy ny endriny mba hahafahantsika mandalo azy ireo haingana. Amin'ny pejy iray dia mampiseho izay zava-dehibe rehetra.

Rohy mankamin'ny tranonkala: jonathan ogden

Finch

Finch dia efa mandeha amin'ny toerana hafa hilalaovana typografika sy ireo loko izay manondro ny hakantony sy fahendrena amin'izay ataony. Miaraka amina singa vitsivitsy fotsiny dia avelany ho hitantsika ny maha matihanina azy. Izy io koa dia manazava izay pejy nampifandray anao.

Rohy mankamin'ny tranonkala: Finch

Drafitra hafa

Ity tranonkala ity milalao hafa. Mampiasà sary an-tsary miaraka amina lohateny ahafahantsika mankamin'ny pejy lehibe, ny telefaoninao ary ny rohy mankany amin'ireo tambajotra sosialinao.

Rohy mankamin'ny tranonkala: Drafitra hafa

maika,

Kai dia mampiseho antsika amin'ny endriny manokana miaraka amin'i telozoro abstract sy paleta miloko mety manome akaiky. Izy koa dia manolotra ampahany amin'ny bio misy endritsoratra amin'ny habe kely kokoa raha te hahafantatra bebe kokoa momba azy isika.

Rohy mankamin'ny tranonkala: maika,

Volavola zaridaina mitsangana

Toy ny teo aloha, ny Vertical Garden Design dia mankany amin'ny sary mampiseho haingana iray amin'ireo asany tsara indrindra ao amin'ny seranam-piaramanidina Oslo. Eo an-tampony dia manana ny lohateny hoe «nav bar» na bara fitetezana isika ary na dia ny mety hanovana ny fiteny aza. Ny sary famantarana dia mametraka azy amin'ny endrika mitsangana mba hanomezana ny fikitika farany ho an'ny pejy iray tena tsotra.

Rohy mankamin'ny tranonkala: Volavola zaridaina mitsangana

247 degre

247 degre milalaova amin'ny monochrome sy sary any ambadika saika maizina tanteraka. Ny endri-tsoratra lohateny, kely kokoa noho ny lahatsoratra sy ny lohateny, dia nohamarinina mba hiteraka fifanoherana lehibe amin'ny endriny ankapobeny.

Rohy mankamin'ny tranonkala: 247 degre

Ankafizo izany

Una typografika lehibe dia mety ho famantarana ny maha-izy azy ary fantatsika izay ataontsika. Tsy mila manome zavatra hafa intsony ianao raha mivantana ny hafatra. Ataon'izy ireo mazava tsara izany: tian'izy ireo ny mamorona rindranasa sy tranokala mahafinaritra. Avelany any amin'ny rohy hafa ny mailaka ho an'ny tetikasa sy ny fianarany.

Rohy mankamin'ny tranonkala: Ankafizo izany

Allison hou

Alain'i Allison izahay alohan'ny taranja hafa ary misy sary maro hafa ary ny endriny "vehivavy" kokoa. Toy izany koa ny sary malalanao sy io lohateny io. Manana ny haitraitra amin'ny fanomezana karatra mampiseho fikafika izy.

Rohy mankamin'ny tranonkala: Allison hou

pixelot

Pixelot somary adala ihany, fa manondro ny famoronana ny mpanoratra ihany koa. Ampiasao ny totozy totozy hamorona sarontava izay manjavozavo na aiza na aiza misy antsika.

Rohy mankamin'ny tranonkala: pixelot

Lionel scholtes

Raha tianao izany ataovy tsy misy afa-tsy izany ny resume anao, Lionel mampiseho anao ny dingana. Ny endritsoratra mety, ny sarinao any ambony havia, dia mampifandray ireo tambajotran-tserasera sy ny zavatra niainanao Ny singa haingon-trano tokana dia ireo tsipika marindrano roa misy loko samihafa.

Rohy mankamin'ny tranonkala: Lionel scholtes

Varevaka tsara tarehy

Miverina izahay amin'ny hakanton'ny minimalism ary ireo habaka banga lehibe ireo. Amin'ny lafiny iray, ny lohateny dia tena lavitra ny ambin'ireo singa, ary etsy ankilany ireo singa ireo dia miendrika endrika iray ka mamorona firindrana fahitana lehibe eo amin'izy ireo.

Rohy mankamin'ny tranonkala: Varevaka tsara tarehy

Lebensraum

Araka ny hitanao amin'ireo ohatra rehetra dia zava-dehibe izany ny takelaka lohateny handehananao amin'ireo pejy samihafa avy amin'ny tranonkala. Tena zava-dehibe ny typography, milalao iray ho an'ny lohateny ary iray hafa ho an'ny lahatsoratra miaraka amin'ny sans serif izay mahavita asa tsara.

Rohy mankamin'ny tranonkala: Lebensraum

PinkPoint

Ny tsy fitovizan'ny loko dia mitarika antsika amin'ny tranonkala somary sarotra kokoa amin'ny fomba fijery rehetra. Tsy ireo singa lehibe rehetra ireo no tsy hita hilalao amin'ity indray mitoraka ity miaraka amin'ireo gradients ho an'ny sary ambadika sy ireo fizarana roa izay manana ny lokon'ny gradient ho an'ny sary lehibe.

Rohy mankamin'ny tranonkala: PinkPoint

IWC

Sary mahafinaritra miaraka amin'i endri-tsoratra voafantina tsara sy singa "mahery fo" azonao omena an'ity tranonkala ity. Miaraka amin'ny slider dia mampiseho ny ampahany amin'ny asa ho tsotra amin'ny fitombohany.

Rohy mankamin'ny tranonkala: IWC

Tetehina

Ny sary an-tsary nomerika dia mitondra antsika mankany amin'ny Chop Chop miaraka io sary mandany ny fisian'ny maso rehetra io. Ny loko manga ao amin'ny lohateny dia manome ny heviny hamorona soatoavina chromatic mifanaraka amin'ny sary manontolo vinan'ny tranonkala.

Rohy mankamin'ny tranonkala: Tetehina

7 kesika

7Pine dia milalao ny maintso ho mpiorina lehibe amin'ny takelaka an-trano. Ny ambiny no mamorona azy sary misy maitso marobe sy lohateny tsotra izay te handeha tsy ho voamariky ny sary famantarana.

Rohy mankamin'ny tranonkala: 7 kesika

Ny Vola

Ny Sum dia mitondra antsika amin'ny làlan-kafa. Milalaova amin'ilay mainty sy fotsy lava, sary mamorona iray tena mamorona ary izany dia mandeha miaraka amin'ireo ambiny amin'ireo singa sy sary roa hafa hamoronana tontolo hafa tsy dia mahaliana. Ohatra iray hamoronana tranokala miavaka amin'ny ambiny.

Rohy mankamin'ny tranonkala: Ny Vola

boaty satroka

Ny manga no loko manjaka eto amin'ity tranonkala ity izay tsy misy sary tsy hita taratra nohazavain'ny fotsy tanteraka ary hanao ahoana ny lalao amin'ny 3D an'ilay mpanorina tranokala mihetsika izany rehefa mihetsika isika.

Rohy mankamin'ny tranonkala: boaty satroka

Kara lyte

Nandeha tany i Kara fahatsorana sy minimalism miaraka amin'ny fisiany voajanahary sy tsara tarehy amin'ny sarinao. Ny ambiny dia lahatsoratra iray izay miaraka amin'ireo inona ireo singa lehibe indrindra amin'ny lohateny sy bokotra hamburger hanokafana azy.

Rohy mankamin'ny tranonkala: Kara lyte

Intrinsic Studio Marketing

Es an'ny tranonkala tsotra indrindra fa izany dia mampiseho amintsika ny atao hoe fanaovana bilaogy. Mena sy mainty no mpandray anjara amin'ny tranokala tena "bilaogy".

Rohy mankamin'ny tranonkala: Intrinsic Studio Marketing

Ahoana ny fomba hamoronana tranokala tsotra amin'ny HTML

Hampianatra anao izahay mamorona tranokala tsotra amin'ny HTML mba hahafantaranao ireo singa fototra indrindra mandrafitra azy. Ilaina ny fananana mpampiantrano web ahafahantsika mameno ny kaody sy ny fikitika sasany ao amin'ny CSS, fa ndao, ireo no fitsipika hanombohana ny diantsika amin'ny HTML.

Rehefa nahita ny sasany ohatra amin'ny tranonkala tsotra Azonao atao ny manentana ny tenanao hahavita ny volavolanao manokana nefa tsy manapoka be ny lohanao. Indraindray ny kely saina dia miteraka vokatra tsara kokoa noho ny manahirana antsika amin'ny zavatra sarotra. Ho hitanao fa amin'ny ankamaroan'ny tranga dia mandeha tsara ny tsotra. Ataovy.

Ny famoronana tranokala tsotra amin'ny HTML dia mora kokoa noho ny mety ho toa tamin'ny voalohany. Tranonkala iray dia misy lohan-doha, ny vatana na ny atiny ary ny footer na ny footer ho singa lehibe. Azontsika atao ny manasokajy azy ireo toy izao:

• antontan-taratasy: ny antontan-taratasy rehetra hataonay dia tsy maintsy atao a . Manokatra miaraka amin'ny a ary mihidy miaraka a
• Ny vatana na vatana: ny ampahany hita amin'ny rakitra dia eo anelanelany Y
• lohapejy: fantatry ny H1, H2, H3 izy ireo ... Manomboka amin'ny a ary mifarana amin'ny a . Ny lahatsoratra izay ao anatiny dia hiseho ho lohateny ary arakaraka ny isany no hanaovany izany amin'ny habe kely na lehibe kokoa.
• fehintsoratra: voafono ao anaty a ny andininy ary mihidy amin'ny
• rohy: ny ohatra mazava indrindra dia ny Link to Creativos Online
• sary: faritanay amin'ny marika ireo . Ohatra iray amin'izany . Miantso ny sary eo anelanelan'ny teny nalaina izahay ary mampiasa alt ho an'ireo lahatsoratra hafa izay tena ilaina amin'ny SEO.
• lisitra: faritanay miaraka amin'ny ho an'ny misavoritaka sy miaraka ho an'ny madio. Ny entana lisitra dia ampiasaina miaraka . Aza adino ny manidy azy ireo amin'ny bara.

Miaraka amin'ireo singa ireo no hananantsika ny fototry ny famoronana tranokala tsotra araka ny ho hitanao amin'ny habetsany amin'izy ireo izay hampianarinay anao amin'ny fizarana manaraka. Andao lazaina fa toa izao ny firafitra semantisman miaraka amin'ireo singa manandanja indrindra:

• Header miaraka amin'ny bara fitetezana azy ho an'ireo pejy samihafa amin'ilay tranonkala.
• Ilay lahatsoratra na habaka momba ny vatana ahafahantsika mamorona fidirana bilaogy, mametraka ny fandaharam-pianarantsika na sary iray.
• Ny sidebar na sidebar mametraka fampahalalana fanampiny.
• Ny tongotra na tongotra, izay hametrahanay rohy mankany amin'ireo pejy manan-danja indrindra amin'ny tranokala ary koa ireo sary famantarana ny tambajotra sosialy (ohatra iray ohatra).

Ao amin'ireo ohatra ho hitanao etsy ambany ireo mifototra amin'ny sary famantarana tsotra nefa kanto avokoa, lohateny izay ametrahan'izy ireo ny fitetezana ireo pejy samihafa amin'ilay tranokala, habaka afovoany izay anjakan'ny lahatsoratra na sary ary ny zoro miaraka amin'ireo singa voalaza ao amin'ny fehintsoratra teo aloha.

Manoro hevitra an'izany izahay aza vaky ny lohanao fa mankanesa any amin'ny tsotra. Ny zava-dehibe dia ny mampiavaka ireo faritra ireo amin'ny ambiny ao anatin'ny segondra maso. Rehefa mandeha ny fotoana dia ho afaka hanasarotra ny tenantsika isika ary hiasa amin'ny toerana hafa bebe kokoa.

Izany dia ohatra mazava amin'ny kaody HTML miaraka amin'ireo singa manan-danja indrindra:

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

Miaraka amin'ireto tsipika kaody HTML azontsika ireto namorona ny lohatenin'ny pejy voalohany tao amin'ny lohateny hoe, amin'ity tranga ity «Semantic HTML», samy hanidy ny lohateny roa izahay , ny lohateny miaraka amin'ny ary izahay hanome lalana hanokatra ny vatana amin'ny .

Hanana a lohateny voalohany amin'ny H1 miaraka amin'ny hanidy azy amin'ny , ary handeha any amin'ny lisitra iray izahay izay hanampy anay hamorona ny bara fitetezana ho an'ireo pejy samihafa amin'ny tranokalanay. Manidy ny lisitra izahay miaraka amin'ny , manidy izahay ary farany ny rakitra html miaraka .

Mamarana, sokafy foana ny rakitra miaraka amin'ny hanidy azy eo amin'ny faran'ny kaody iray manontolo miaraka amin'ny slash. Aorian'ny fanokafana ny antontan-taratasy dia ampiasaina hatrany ny firesahana ny fiteny, izay amin'ity tranga ity dia Espaniôla misy "es" ary misy a .

Zava-dehibe ny fijerena akaiky ny kaody sy ny fotoana rehetra manokatra fiasa ianao hanidy azy amin'ny bara mifanaraka amin'izany.

CSS kely

Miditra kely amin'ny CSS izahay, fa mandalo kosa mba ho azonao ny fomba fanaovana HTML. Andao lazaina fa ny CSS sy ny HTML dia miara-miasa hanome ireo tranonkala tsotra izay ho hitanao etsy ambany ireo.

Raha amin'ny lafiny iray dia manana HTML semantika isika amin'ny fampiasana ny lohateny na lohapevitra, ny vatana na ny vatana miaraka amin'ny lahatsoratra na sary ary ny footer, amin'ny CSS dia hampiasa ny asan'ny «Div» hamantarana izahay isaky ny habaka ireo mba hampiharana ny fanovana ilaina amin'ny endrika manaraka.

Zavatra tsotra toy ny:

Na dia azontsika ampiharina amin'ny Div aza ny fomba rafitra mety sy tonga lafatra no hanampy mba hahafahan'ny mpikaroka tranonkala "mamaky" tanteraka ny momba ny atiny, ka raha manaraka io rafitra fototra io isika dia hanana asa sy fototra lehibe aloha.

Un ohatra kaody CSS tsotra:

h1 {
loko: fotsy;
text-hampifanaraka: foibe;
}

Antsoinay H1 sy ilay lahatsoratra hapetrantsika amin'ny loko fotsy izy io: fotsy; ary hampifanarahintsika amin'ny afovoany amin'ny «text align». Akatona miaraka amin'ny fononteny foana aorian'ny fisokafan'ny antso H1.

Sary lohan'ny Greg rakozy