30 Anoshamisa Mapepa eWebhu

Mamwe emapeji ane mukurumbira akaremerwa neruzivo, asi ini ndinofarira zvinopesana: ari nyore iwo.

Zviripachena mubudisi mukuru weboka iri ndiGoogle ine peji rayo rekutanga kubva zvatanga rwendo, asi zvakajeka haisi iyo yega paInternet iyo yakazvipira kuchengetedza zvinhu zvakapusa.

Nyore HTML webhu peji mienzaniso

Kean richmond

Kean Richmond anotiita kuti tione kureruka kwekutamba nezvinhu zvishoma, asi zvakanyatsoiswa ku ipa kunzwa kukuru kune minimalism. Chinyorwa chake kumusoro kwekuruboshwe, iyo Twitter uye mifananidzo yekuonana kurudyi nepakati, ine typography inokatyamadza, kune izvo zvaakatsaurira.

Batanidza kune webhu: Keanrich mond

Alice anonyudza

Alice anonyudza zvichengetedze zviri nyore zvakare neako logo iripo pakati, mana tabo ekufamba pakati pemapeji makuru ewebhusaiti yako uye akateedzana mafoto akaiswa nenzira kwayo kuti pakungotarisa tizive zvaunoita nezvaunoita.

Batanidza kune webhu: Alice anonyudza

Jonathan ogden

Ogden ramba uchitamba nemabatiro ari kuita zita rako logo, yemagariro enzvimbo ari pazasi chete pasina kukwezva kutarisisa uye dhizaini yavo inoshanda kuti tikurumidze kupfuura nepakati pavo. Pane peji rimwe chete rinoratidza zvese zvine basa.

Batanidza kune webhu: Jonathan ogden

Finch

Finch ave kutoenda kune dzimwe nzvimbo kunotamba netaipureta neaya mavara anoratidza kunaka uye huchenjeri hwezvainoita. Nezvinhu zvishoma chete, anosiya hunyanzvi hwake pakuona. Zvinoitawo kuti zvijeke kuti ndeapi mapeji akabatana newe.

Batanidza kune webhu: Finch

Dhizaini yakasiyana

Iyi webhusaiti tamba zvakasiyana. Shandisa Wallpaper ine musoro kubva kwatinogona kuenda kumapeji makuru, foni yako uye zvinongedzo kune ako masocial network.

Batanidza kune webhu: Dhizaini yakasiyana

brisk

Kai anotienzanisira aine chimiro chake na katatu risingabvumike uye rakakodzera pendi pendi kupa kuswedera. Anopawo chikamu chebio yake nefonti diki kuitira kana tichida kuziva zvakawanda nezvake.

Batanidza kune webhu: brisk

Vertical Bindu Dhizaini

Kunge yekutanga, Vertical Garden Dhizaini inoenda kumufananidzo unoratidza nekukurumidza rimwe remabasa ake epamoyo paOslo airport. Pamusoro tine musoro ne «nav bar» kana yekufambisa bar uye kunyangwe mukana wekuchinja mutauro. Iyo logo inoisa munzira yakatwasuka kuti ipe iyo yekupedzisira kubata kune irinyore peji.

Batanidza kune webhu: Vertical Bindu Dhizaini

247 madhigirii

247 madhigirii tamba ne monochrome uye necheseri mufananidzo rinenge rima chairo. Musoro wemusoro, mudiki pane iwo mavara uye musoro, wakapihwa capital kuti ugadzire musiyano mukuru mukugadzirwa kwese.

Batanidza kune webhu: 247 madhigirii

Farira izvi

Una typography yakakura inogona kuve chiratidzo chekuvimbika uye kuti tinoziva zvatinoita. Iwe haufanire kupa chero chimwezve chinhu kana iwo meseji wakananga. Ivo vanozviita kujekesa kwazvo: ivo vanofarira kugadzira akanaka maapplication nemawebhusaiti. Siya iyo email yezvirongwa uye yako kudzidza mune imwe link.

Batanidza kune webhu: Farira izvi

Allison hou

Allison anotitora pamberi pemamwe makosi uye inosanganisira mimwe mifananidzo uye iyo yakawanda "yechikadzi" typeface. Izvo zvinoenda kune yako huru mufananidzo uye iwo musoro. Iye ane hunyanzvi hwekuburitsa kadhi rinoratidza zvekutengesa zvekutengesa.

Batanidza kune webhu: Allison hou

pixelot

Pixelot inopenga zvishoma, asi zvakare inoratidza kugona kwemunyori. Shandisa iyo mbeva mbeva kugadzira mask iyo inosvibisa chero patinenge takanamatira.

Batanidza kune webhu: pixelot

Lionel scholtes

Kana iwe uchida ita kuti utangezve online pasina chimwe chinopfuura icho, Lionel anokuratidza matanho. Fonti yakakodzera, pikicha yako kumusoro kuruboshwe, zvinongedzo kune ako masocial network uye ruzivo rwako. Chinhu chega chekushongedza ndiyo mitsara miviri yakatwasuka yemavara akasiyana.

Batanidza kune webhu: Lionel scholtes

Naka Seagulls

Tinodzoka kune runako rwe minimalism nenzvimbo huru dzisina chinhu. Kune rimwe divi musoro uri kure kwazvo kubva kune zvimwe zvinhu, uye kune rimwe divi izvo zvinhu zvakaumbwa nenzira yekuti vagadzire kuwirirana kukuru pakati pavo.

Batanidza kune webhu: Naka Seagulls

Lebensraum

Sezvauri kuona mumienzaniso yese, zvakakosha iwo mahedhi emusoro ekuenda kumapeji akasiyana kubva pawebhusaiti. Iyo typography yakakosha kwazvo, tamba neiyo imwe yemusoro uye imwe yechinyorwa ine sans serif inoita basa rakakura.

Batanidza kune webhu: Lebensraum

PinkPoint

Musiyano wemavara unotitungamira kune yakati wandei yakaoma dandemutande remaonero ese. Hazvisi zvese izvo zvakakosha zvinhu zvisipo kutamba ino nguva nemagiredhi emufananidzo wepamberi uye iwo maviri mairi ane mavara makuru eiyo gradient yemufananidzo mukuru.

Batanidza kune webhu: PinkPoint

Iwc

Mufananidzo wakakura uine fonti yakasarudzwa zvakanaka uye "gamba" chinhu unogona kupa kune iyi webhu. Iine inotsvedza inoratidza chikamu chebasa kuve yakapusa mukubata kwayo.

Batanidza kune webhu: Iwc

Chop chop

Dhijitari mufananidzo unotitungamira kune Chop Chop na iwo mufananidzo unodya zvese zvinoonekwa zviripo. Ruvara rwebhuruu mumusoro unoipa poindi yayo yekugadzira chromatic kukosha mukuenderana nemufananidzo wese wakaratidzirwa newebhu.

Batanidza kune webhu: Chop chop

7Pini

7Pini inotamba negirini kuti ive protagonist huru yeplate repamba. Vamwe vese vanozvinyora chifananidzo chine zvakawanda zvegirini uye yakapusa musoro izvo zvinoda kuenda zvisingaonekwe neiyo logo.

Batanidza kune webhu: 7Pini

Iyo Sum

Iyo Sum inotitora isu mune imwe nzira. Tamba nefabled nhema uye chena, muenzaniso wekusika uye izvo zvinoenderera pamwe nezvimwe zvakasara zvezvinhu uye mimwe miviri mienzaniso kuti igadzire inodarika inonakidza nzvimbo. Muenzaniso wekugadzira webhusaiti inomira kubva kune vamwe vese.

Batanidza kune webhu: Iyo Sum

hat box

Bhuruu ndiro rakanyanya kuwanda pane ino webhusaiti umo musina mifananidzo isipo yakanyatso kujekerwa nechena uye kuti mutambo ungadai wakaita sei mu 3D yeiyo saiti anovaka izvo zvinofamba sezvatinofamba.

Batanidza kune webhu: hat box

Kara lyte

Kara anoenda kuna kurerukirwa uye kushomeka nehunhu hwayo uye hwakanaka mumufananidzo wako. Mamwe ese rugwaro runouya pamwe nezviri zvinhu zvakakosha zvemusoro uye bhatani rehamburger kuti uvhure.

Batanidza kune webhu: Kara lyte

Instrinsic Studio Kushambadzira

Es yewebhu yakapusa asi izvo zvinotiratidza izvo zvazviri kugadzira blog. Vatsvuku uye vatema ndivo protagonists mune chaiyo "blog" saiti.

Batanidza kune webhu: Instrinsic Studio Kushambadzira

Nzira yekugadzira webhusaiti yakapusa muHTML

Tiri kuenda kukudzidzisa iwe gadzira webhusaiti yakapusa muHTML kuitira kuti iwe uzive zvakakosha zvinhu zvinoumba. Izvo zvichave zvakafanira kuve newebhu inomiririra patinokwanisa kurodha kodhi uye mamwe ma tweaks muCSS, asi huya, aya ndiwo marongero ekutanga rwendo rwedu muHTML.

Sezvo ndaona zvimwe mienzaniso yewebhu yakapusa Naiyo iwe yaunogona kuzvikurudzira iwe pachako kuti ugadzire ako ega magadzirirwo pasina kutyora musoro wako zvakanyanya. Dzimwe nguva zvakapusa zvinogadzira zvirinani pane kutinetsa muzvinhu zvakaoma. Iwe uchaona kuti muzviitiko zvakawanda zvakapusa zvinoshanda chaizvo. Zvitore.

Kugadzira webhusaiti yakapusa muHTML zviri nyore pane zvingaite sekutanga. Webhusaiti inoumbwa nemusoro, muviri kana zvemukati uye tsoka kana tsoka sezvinhu zvikuru. Tinogona kuzvimisikidza neiyi nzira:

• Documents: zvinyorwa zvese zvatichagadzira zvinofanirwa kuitwa ne . Isu tinovhura ne uye inogara ichivhara ne
• Muviri kana muviri: chikamu chinoonekwa chegwaro chiri pakati Y
• Misoro: dzinozivikanwa neH1, H2, H3 ... Tinotanga ne uye tinovhara ne . Iwo mavara ari mukati anozoonekwa semusoro uye zvichienderana nekuverenga kwawo iwo achazviita mudiki kana kukura kukura.
• Ndima: iyo ndima yakavharirwa mukati me uye inovhara ne
• Links: muenzaniso wakajeka ndeuyucreativosonline.org/»> Batanidza ne Creativos Online
• Mifananidzo: tinovatsanangudza nechiratidzo . Muenzaniso ungave . Isu tinokumbira iwo mufananidzo pakati pemakotesheni uye toshandisa alt kune imwe nzira zvinyorwa izvo zvakakosha kune SEO.
• Lists: isu tinotsanangura izvo zvinyorwa ne kune zvakashata uye ne kwehutsanana. Chinyorwa zvinhu zvinoshandiswa ne . Nguva dzose yeuka kuvavhara nebhari.

Nezvinhu izvi tichava nazvo hwaro hwekugadzira iri nyore webhusaiti sekuona kwauchaita muhuwandu hwakanaka hwadzo hwatichakudzidzisa iwe muchikamu chinotevera. Ngatitii iyo semantic chimiro pamwe nezvayo zvakakosha zvinhu zvinoita senge:

• Musoro ine yekufambisa bar yemapeji akasiyana eesaiti.
• Icho chinyorwa kana nzvimbo yemuviri mairi matinogona kugadzira blog positi, isa yedu tangazve kana mufananidzo.
• Rutivi rwemberi kana padivi kuisa rumwe ruzivo.
• Tsoka kana tsoka, uko kwatinoisa zvinongedzo kune akakosha mapeji eesaiti pamwe nemifananidzo yemasocial network (nguva dzose semuenzaniso).

Mune iyo mienzaniso yauchazoona pazasi ndeiyi zvese zvinoenderana neyakareruka asi yakanakisa logo, musoro pavanoisa kufamba kumapeji akasiyana eesaiti, nzvimbo yepakati inotongwa nezvinyorwa kana mufananidzo uye tsoka ine zvinhu zvataurwa mundima yapfuura.

Tinokurudzira izvozvo usatyora musoro wako uende kune vasina mano. Chinhu chikuru ndechekuti nzvimbo idzi dzakasiyaniswa kubva kune dzese mune inoonekwa yekupfuura yemasekondi. Nenguva tichakwanisa kuzvinetsa uye nekushanda dzimwe nzvimbo.

Izvi ndizvo muenzaniso wakajeka weiyo HTML kodhi nezvinhu zvakakosha kwazvo:

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

Nemitsara iyi yeHTML kodhi taizove nayo kutanga kugadzira zita remusoro mumusoro na, mune ino kesi «Semantic HTML», isu taizovhara zvese zviri zviviri zita ne , musoro ne uye isu taizopa nzira yekuvhura muviri ne .

Taizove ne yekutanga musoro muH1 ne kuvhara nayo , uye isu taizoenda kune runyorwa rwaizotibatsira kugadzira iyo yekufambisa bar yemapeji akasiyana ewebsite yedu. Isu tinovhara rondedzero ne , tinovhara uye pakupedzisira html gwaro na .

Kupera, gara uchivhura gwaro ne kuti uvhare panopera kodhi yese neiyo slash. Mushure mekuvhura gwaro, zvinongedzo kumutauro zvinogara zvichishandiswa, mune iyi kesi Spanish ne «es» uye ne .

Izvo zvakakosha kuti iwe utarise zvakanyanya pane iyo kodhi uye chero nguva iwe unovhura basa urivhare nebha inowirirana

Chidiki cheCSS

Isu tinopinda muCSS zvishoma, asi tichipfuura kuti unzwisise maitiro ekuita HTML. Ngatitii CSS neHTML zvinofambidzana kuti zvipe iwo mawebhusaiti akareruka aunowana pazasi.

Kana kudivi rimwe isu tine semantic yekushandisa yeHTML kune chii chiri musoro, muviri kana muviri uine chinyorwa chayo kana mufananidzo uye tsoka, muCSS taizoshandisa iyo «Div» basa kuziva kune yega yega nzvimbo idzi kuitira kuti gare gare ushandise shanduko inodiwa mukugadzirwa.

Chinhu chakareruka se:

Kunyange isu tichigona kuisa zvitaera neDiv, chimiro chakakodzera uye chakakwana chinobatsira kuitira kuti vanokambaira padandemutande vagone "kuverenga" zviri mukati medu, saka kana tikatevera chimiro chakakosha, tichava nebasa rakakura uye kutanga.

Un yakapusa CSS kodhi muenzaniso:

h1 {
ruvara: chena;
chinyorwa-chinongedza: pakati;
}

Tinoshevedza H1 uye zvinyorwa tichaisa chena neruvara: chena; uye tichazvifananidza nepakati ne «chinyorwa chinowirirana». Nguva dzose vhara mabhureki akaenzana mushure mekuvhura kune iyo H1 kufona.

Musoro wemufananidzo we Greg rakozy