30 Hindi kapani-paniwala na Simpleng Mga Pahina sa Web

Ang ilan sa mga pinakatanyag na pahina ay sobrang overloaded ng impormasyon, ngunit mas gusto ko ang kabaligtaran: ang mga simple.

Malinaw na ang mahusay na tagapagtaguyod ng pangkat na ito ay ang Google na may minimalist na home page mula nang simulan ang paglalakbay nito, ngunit malinaw na hindi lamang ito sa Internet ang nakatuon sa pagpapanatili ng mga bagay na simple.

Mga simpleng halimbawa ng web page ng HTML

Kean richmond

Ginagawa sa amin ni Kean Richmond na makita ang pagiging simple ng paglalaro na may ilang mga elemento, ngunit napakagandang inilagay sa magbigay ng isang mahusay na pakiramdam sa minimalism. Ang kanyang logo sa kaliwang itaas, ang Twitter at mga contact icon sa kanan at sa gitna, na may kapansin-pansin na palalimbagan, sa kung ano siya ay nakatuon.

Link sa web: Keanrich mond

Alice drougard

Alice drougard panatilihing simple din sa iyong logo na nakalagay sa gitna, apat na mga tab upang ilipat sa pagitan ng mga pangunahing pahina ng iyong website at isang serye ng mga litrato na maayos na inilagay upang sa isang sulyap alam namin kung ano ang iyong ginagawa at kung ano ang iyong ginagawa.

Link sa web: Alice drougard

jonathan ogden

Ogden Patuloy na i-play sa kung gaano kasimple ang iyong pangalan bilang isang logo, ang mga social network na matatagpuan sa ibaba lamang nang hindi nakakaakit ng pansin at gumagana ang kanilang disenyo upang mabilis tayong dumaan sa kanila. Sa isang pahina ipinapakita nito ang lahat na mahalaga.

Link sa web: jonathan ogden

Finch

Pupunta na si Finch sa iba pang mga lugar upang maglaro ng typography at mga iyan mga kulay na nagsasaad ng gilas at karunungan ng ginagawa nito. Sa ilang mga elemento lamang, iniiwan niya ang lahat ng kanyang propesyonalismo sa pagtingin. Nilinaw din nito kung aling mga pahina ang na-link sa iyo.

Link sa web: Finch

Iba't ibang Disenyo

Ang website na ito maglaro ng iba. Gumamit ng isang wallpaper na may isang header kung saan maaari kaming pumunta sa mga pangunahing pahina, iyong telepono at ang mga link sa iyong mga social network.

Link sa web: Iba't ibang Disenyo

mabilis

Inilalarawan tayo ni Kai sa kanyang sariling pigura isang abstract triangle at isang angkop na color palette upang magbigay ng lapit. Nag-aalok din siya ng bahagi ng kanyang bio na may isang font sa isang mas maliit na sukat kung sakaling nais naming malaman ang tungkol sa kanya.

Link sa web: mabilis

Disenyong Vertical Garden

Tulad ng naunang isa, ang Vertical Garden Design ay papunta sa isang litrato na mabilis na nagpapakita isa sa pinakamagandang trabaho niya sa Oslo airport. Sa tuktok mayroon kaming header na may «nav bar» o nabigasyon bar at kahit na ang posibilidad ng pagbabago ng wika. Inilalagay ito ng logo sa isang patayong format upang maibigay ang panghuling ugnay sa isang napakasimpleng pahina.

Link sa web: Disenyong Vertical Garden

247Grad

247Grad maglaro ng monochrome at isang imahe sa background halos ganap na madilim. Ang font ng header, mas maliit kaysa sa teksto at header, ay naka-capitalize upang lumikha ng isang mahusay na kaibahan sa pangkalahatang disenyo.

Link sa web: 247Grad

Tangkilikin ito

isang mahusay na palalimbagan ay maaaring maging tanda ng pagiging tunay at alam natin kung ano ang ginagawa natin. Hindi mo na kailangang magbigay ng higit pa kung ang mensahe ay direkta. Nilinaw nila ito: gustung-gusto nilang lumikha ng mga magagandang app at website. Iniwan nila ang mail para sa mga proyekto at ang kanilang pag-aaral sa isa pang link.

Link sa web: Tangkilikin ito

Allison hou

Dadalhin tayo ni Allison bago ang iba pang mga kurso at may kasamang higit pang mga imahe at higit na "pambabae" na typeface. Ang parehong napupunta para sa iyong pangunahing imahe at ang header. May karangyaan siyang magpakita ng isang kard na nagpapakita ng mga trick para sa pamimili.

Link sa web: Allison hou

pixelot

Medyo baliw ang Pixelot, ngunit ipinapahiwatig din nito ang pagkamalikhain ng may-akda. Gamitin ang mouse pointer upang lumikha ng isang mask lumabo iyon saan man natin ito dumapo.

Link sa web: pixelot

Mga skolar ng Lionel

Kung nais mong gawin ang iyong resume sa online nang walang higit sa iyon, Ipinapakita sa iyo ni Lionel ang mga hakbang. Ang isang angkop na font, ang iyong larawan sa kaliwang itaas, ay naka-link sa iyong mga social network at iyong karanasan. Ang nag-iisang elemento ng pandekorasyon ay ang dalawang pahalang na linya ng magkakaibang kulay.

Link sa web: Mga skolar ng Lionel

Mga Elegant na Seagull

Bumabalik kami sa gilas ng minimalism at ang mga malalaking blangko na puwang. Sa isang banda ang header ay napakalayo mula sa natitirang mga elemento, at sa kabilang banda ang mga elemento na hugis sa isang paraan na lumikha sila ng isang mahusay na visual na pagkakasundo sa pagitan nila.

Link sa web: Mga Elegant na Seagull

Lebensraum

Tulad ng nakikita mo sa lahat ng mga halimbawa, mahalaga ito ang mga tab ng header upang pumunta sa iba't ibang mga pahina mula sa website. Ang typography ay may malaking kahalagahan, makipaglaro sa isa para sa header at isa pa para sa teksto na may isang sans serif na mahusay na gumagana.

Link sa web: Lebensraum

PinkPoint

Ang pagkakaiba ng mga kulay ay humahantong sa amin sa isang bahagyang mas kumplikadong web ng lahat ng mga view. Hindi lahat ng mga pangunahing elemento ay nawawala upang i-play ang oras na ito sa mga gradient para sa background na imahe at sa dalawang seksyon na mayroong pangunahing mga kulay ng gradient para sa pangunahing imahe.

Link sa web: PinkPoint

IWC

Ang isang mahusay na litrato na may isang napiling font at isang "bayani" na elemento maaari mong ibigay sa web na ito. Sa pamamagitan ng isang slider ipinapakita nito ang bahagi ng trabaho upang maging medyo simple sa paglilihi nito.

Link sa web: IWC

Chop chop

Dinadala tayo ng digital na ilustrasyon sa Chop Chop ang imaheng iyon na kumakain ng lahat ng visual na pagkakaroon nito. Ang asul na kulay sa header ay nagbibigay ng puntong ito upang lumikha ng mga chromatic na halaga na tune sa buong imahe na inaasahang web.

Link sa web: Chop chop

7 Pino

Ang 7 Pin ay naglalaro ng berde upang maging mahusay na kalaban ng home plate. Ang natitira ay sumusulat nito isang imahe na may maraming berde at isang simpleng header Na nais na mapansin ng logo.

Link sa web: 7 Pino

Ang kabuuan

Dadalhin tayo ng Sum sa iba pang mga direksyon. Maglaro kasama ang nakatakdang itim at puti, isang napaka-malikhaing paglalarawan at na sumasama sa natitirang mga elemento at dalawang iba pang mga guhit upang lumikha ng isang higit sa kagiliw-giliw na tanawin. Isang halimbawa upang lumikha ng isang website na nakatayo mula sa iba pa.

Link sa web: Ang kabuuan

Kahon ng sumbrero

Ang Blue ay ang nangingibabaw na kulay sa website na ito kung saan walang mga nawawalang mga imahe na ganap na naiilawan ng puti at kung ano ang magiging laro sa 3D ng tagabuo ng site na iyon gumagalaw iyon sa paggalaw natin.

Link sa web: Kahon ng sumbrero

Kara lyte

Punta si Kara pagiging simple at minimalism na may natural at magandang presensya sa iyong litrato. Ang natitira ay isang teksto na kasama kasama kung ano ang mga pangunahing elemento para sa header at isang pindutan ng hamburger upang buksan ito.

Link sa web: Kara lyte

Marketing ng Instrinsic Studio

Es ng pinakasimpleng web ngunit ipinapakita sa atin kung ano ito upang makagawa ng isang blog. Pula at itim ang mga bida sa isang napaka "blog" na site.

Link sa web: Marketing ng Instrinsic Studio

Paano lumikha ng isang simpleng website sa HTML

Tuturuan ka namin lumikha ng isang simpleng website sa HTML upang malaman mo ang pinaka pangunahing mga elemento na bumubuo nito. Kinakailangan na magkaroon ng isang host sa web kung saan maaari nating mai-load ang code at ilang mga pag-aayos sa CSS, ngunit dumating, ito ang mga prinsipyo upang simulan ang aming paglalakbay sa HTML.

Pagkakaroon ng nakita ang ilan simpleng mga halimbawa sa web Kung saan maaari mong pagganyakin ang iyong sarili ng sapat upang gumawa ng iyong sariling mga disenyo nang hindi masira ang iyong ulo. Minsan ang simple ay lumilikha ng isang mas mahusay na epekto kaysa sa kumplikado sa amin sa mga kumplikadong bagay. Makikita mo na sa karamihan ng mga kaso ang simpleng gumagana nang napakahusay. Puntahan mo yan

Ang paglikha ng isang simpleng website sa HTML ay mas madali kaysa sa mukhang una. Isang website binubuo ng isang header, ang katawan o nilalaman at ang footer o footer bilang pangunahing elemento. Maaari nating maiuri ang mga ito sa ganitong paraan:

• Mga dokumento: lahat ng mga dokumento na gagawin namin ay dapat gawin sa a . Nagbubukas kami ng a at laging isinasara ng a
• Ang katawan o katawan: ang nakikitang bahagi ng dokumento ay nasa pagitan Y
• Mga Header: kilala sila ng H1, H2, H3 ... Nagsisimula kami sa a at nagsasara kami ng a . Ang teksto na nasa loob ay lilitaw bilang isang header at depende sa bilang nito gagawin ito sa isang mas maliit o mas malaking sukat.
• Mga talata: ang talata ay nakapaloob sa loob ng a at isara sa
• Link: ang pinakamalinaw na halimbawa aycreativosonline.org/»> Link sa Creativos Online
• Imagery: tinutukoy namin ang mga ito sa pamamagitan ng label . Ang isang halimbawa ay magiging . Inanyayahan namin ang imahe sa pagitan ng mga marka ng panipi at gumagamit ng isang alt para sa kahaliling teksto na mahalaga para sa SEO.
• Listahan ng: tinutukoy namin ang mga listahan sa para sa isang magulo at kasama para sa isang maayos. Ginagamit ang mga item sa listahan sa . Palaging tandaan na isara ang mga ito sa bar.

Sa mga elementong ito magkakaroon tayo ang batayan para sa paglikha ng isang simpleng website tulad ng makikita mo sa magandang dami ng mga ito na tuturuan namin sa susunod na seksyon. Sabihin nating ang semantis na istraktura na may pinakamahalagang sangkap ay ganito:

• Header kasama ang bar ng nabigasyon para sa iba't ibang mga pahina ng site.
• Ang artikulo o puwang ng katawan kung saan maaari kaming lumikha ng isang post sa blog, ilagay ang aming resume o isang imahe.
• Ang sidebar o sidebar upang maglagay ng karagdagang impormasyon.
• Ang footer o paa, kung saan maglalagay kami ng mga link sa pinakamahalagang mga pahina ng site pati na rin ang mga icon ng mga social network (palaging bilang isang halimbawa).

Sa mga halimbawang makikita mo sa ibaba ay lahat batay sa isang simple ngunit matikas na logo, isang header kung saan inilalagay nila ang nabigasyon sa iba't ibang mga pahina ng site, isang gitnang puwang na pinangungunahan ng isang teksto o isang imahe at isang footer na may mga elemento na nabanggit sa nakaraang talata.

Inirerekumenda namin iyon huwag basagin ang iyong ulo at pumunta sa simple. Ang pangunahing bagay ay ang mga lugar na ito ay naiiba sa iba pa sa isang visual pass ng mga segundo. Sa oras magagawa nating kumplikado ang ating sarili at higit na magtrabaho sa iba pang mga puwang.

Ito ay isang malinaw na halimbawa ng isang HTML code na may pinakamahalagang elemento:

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

Sa mga linya ng HTML code na mayroon kami unang nilikha ang pamagat ng pahina sa header na may, sa kasong ito «Semantic HTML», isasara namin ang parehong pamagat sa , ang header kasama at bibigyan namin ng paraan upang buksan ang katawan .

Kami ay magkakaroon ng unang header sa H1 kasama ang upang isara ito sa , at pupunta kami sa isang listahan na makakatulong sa amin upang lumikha ng nabigasyon bar para sa iba't ibang mga pahina ng aming site. Isinasara namin ang listahan sa , nagsasara kami at sa wakas ang html na dokumento na may .

Sa wakas, laging buksan ang isang dokumento sa upang isara ito sa dulo ng buong code gamit ang slash. Matapos buksan ang dokumento, palaging ginagamit ang sanggunian sa wika, na sa kasong ito ay Espanyol na may "es" at may a .

Mahalagang tingnan mo nang mabuti ang code at kailan man buksan mo ang isang pagpapaandar isara ito sa bar nararapat

Kaunting CSS

Pumunta kami sa CSS nang kaunti, ngunit sa pagpasa upang maunawaan mo kung paano mag-istilo ng HTML. Sabihin nating ang CSS at HTML ay magkakasabay upang ibigay ang mga simpleng website na makikita mo sa ibaba.

Kung sa isang banda mayroon kaming semantikong paggamit ng HTML para sa kung ano ang header o header, ang katawan o katawan kasama ang artikulo o imahe nito at ang footer, sa CSS gagamitin namin ang function na «Div» upang makilala sa bawat isa sa mga puwang na ito upang mailapat sa paglaon ang mga kinakailangang pagbabago sa disenyo.

Isang bagay na kasing simple ng:

Habang mailalapat namin ang mga istilo sa Div, makakatulong ang isang angkop at perpektong istraktura upang ang mga web crawler ay maaaring "basahin" nang perpekto kung ano ang tungkol sa aming nilalaman, kaya kung susundin namin ang pangunahing istraktura na iyon, magkakaroon muna kami ng mahusay na trabaho at base.

Un simpleng halimbawa ng CSS code:

h1 {
kulay: puti;
text-align: sentro;
}

Tinatawag namin ang H1 at ang teksto ilalagay namin ito sa puti na may kulay: puti; at isasaayos namin ito sa gitna ng «text align». Palaging isara sa mga square bracket pagkatapos buksan ang H1 na tawag.

Larawan sa header ng Greg rakozy