AmaPhepha eWebhu angama-30 ngokulula

Amanye amaphepha adumileyo agcwele ulwazi, kodwa ndikhetha okuchaseneyo: ezilula.

Ngokucacileyo umbonisi omkhulu weli qela nguGoogle kunye nephepha lasekhaya elincinci ukusukela oko yaqala uhambo lwayo, Kodwa ngokucacileyo ayisiyiyo kuphela kwi-Intanethi ezinikele ekugcineni izinto zilula.

Imizekelo elula yephepha lewebhu le-HTML

UKean richmond

UKean Richmond usenza sibone ukulula kokudlala ngezinto ezimbalwa, kodwa zibekwe kakuhle yenza uvakalelo olukhulu kubuncinci. I-logo yakhe ephezulu ngasekhohlo, i-Twitter kunye neempawu zonxibelelwano ngasekunene nakwiziko, elinomtsalane wokubonisa, into ayenzayo.

Qhagamshela kwiwebhu: Imvelaphi yeKeanrich

UAlice unxila

UAlice unxila yigcine ilula nayo ilogo yakho ibekwe embindini, iithebhu ezine ukuhamba phakathi kwamaphepha aphambili kwiwebhusayithi yakho kunye nothotho lweefoto ezibekwe ngokufanelekileyo ukuze kuthi shazi sazi into oyenzayo nento oyenzayo.

Qhagamshela kwiwebhu: UAlice unxila

UJonathan Ogden

Ogden qhubeka udlala ngendlela elula ngayo igama lakho njenge logo, iinethiwekhi zentlalo ezibekwe ngezantsi nje ngaphandle kokutsala umdla kunye noyilo lwazo lusebenza ukuze sikwazi ukuhamba ngokukhawuleza kuzo. Kwiphepha elinye libonisa yonke into ebalulekileyo.

Qhagamshela kwiwebhu: UJonathan Ogden

Finch

UFinch sele esiya kwezinye iindawo ukudlala ngetypography kunye nezo imibala ebonisa ubuhle kunye nobulumko bento eyenzayo. Ngezinto nje ezimbalwa, ushiya bonke ubuchwephesha bakhe ejonge. Ikwenza kucace ukuba ngawaphi amaphepha adityaniswe nawe.

Qhagamshela kwiwebhu: Finch

Uyilo olwahlukileyo

Le webhusayithi dlala ngokwahlukileyo. Sebenzisa iphepha lodonga elinesihloko esinokuya kulo maphepha aphambili, ifowuni kunye namakhonkco onxibelelwano lwakho lwasentlalweni.

Qhagamshela kwiwebhu: Uyilo olwahlukileyo

UBrizk

U-Kai usibonisa ngomfanekiso wakhe unxantathu ongabonakaliyo kunye nombala wephalethi ofanelekileyo ukunika ukusondela. Ukwabonelela ngenxalenye yebio yakhe kunye nefonti ngobukhulu obuncinci kwimeko apho sifuna ukwazi ngakumbi ngaye.

Qhagamshela kwiwebhu: UBrizk

Uyilo lweGadi ethe nkqo

Njengaleyo yangaphambili, iVertical Garden Design iya kumfanekiso obonisa ngokukhawuleza omnye wemisebenzi yakhe emihle kwisikhululo senqwelomoya saseOslo. Ngaphezulu sinentloko ene «nav bar» okanye ibha yokukhangela kunye nokuba kunokwenzeka ukutshintsha ulwimi. I-logo iyibeka kwifomathi ethe nkqo ukunika umnxeba wokugqibela kwiphepha elilula.

Qhagamshela kwiwebhu: Uyilo lweGadi ethe nkqo

247Iklasi

247Iklasi dlala ngemonochrome kunye nomfanekiso ongasemva phantse mnyama ngokupheleleyo. Ifonti yokubhaliweyo okuphezulu, incinci kunesicatshulwa kunye nentloko, ifakwe kwigama elikhulu ukwenza umahluko omkhulu kuyilo lulonke.

Qhagamshela kwiwebhu: 247Iklasi

Jabulela oku

Omnye Ukuchwetheza kakhulu kunokuba luphawu lokunyaniseka kwaye siyayazi into esiyenzayo. Awunyanzelekanga ukuba unike enye into ukuba umyalezo uthe ngqo. Bayenza icace: bayathanda ukwenza iiapps ezintle kunye neewebhusayithi. Bashiya i-imeyile yeeprojekthi kunye nezifundo zabo kwenye ikhonkco.

Qhagamshela kwiwebhu: Jabulela oku

UAllison hou

UAllison usithatha ngaphambi kwezinye iikhosi kwaye kubandakanya nemifanekiso emininzi kwaye ngakumbi "ubufazi" typeface. Kuyafana nomfanekiso wakho ophambili kunye nentloko. Unobunewunewu bokubonisa ikhadi elibonisa amaqhinga okuthenga.

Qhagamshela kwiwebhu: UAllison hou

I-pixelot

IPixelot iyaphambana, kodwa ikwabonisa ubuchule bombhali. Sebenzisa isikhombisi semouse ukwenza imaski oko kufiphaza naphina apho sinayo.

Qhagamshela kwiwebhu: I-pixelot

Iingcali zikaLionel

Ukuba ufuna yenza i-resume yakho kwi-intanethi ngaphandle kokunye, ILionel ikubonisa amanyathelo. Ifonti efanelekileyo, ifoto yakho ngasekhohlo ngasentla, amakhonkco kwiinethiwekhi zakho kunye namava akho. Into ekuphela kwayo yokuhombisa yile migca mibini ithe tyaba yemibala eyahlukeneyo.

Qhagamshela kwiwebhu: Iingcali zikaLionel

Iilwandle ezintle

Siyabuya kukuphakama kobuncinci kwaye ezo ndawo zinkulu zingenanto. Kwelinye icala i-header ikude kakhulu kwezinye izinto, kwaye kwelinye icala ezo zinto zenziwe ngohlobo lokuba zenze imvisiswano ebonakalayo phakathi kwazo.

Qhagamshela kwiwebhu: Iilwandle ezintle

Lebensraum

Njengoko ubona kuyo yonke imizekelo, kubalulekile iithebhu zentloko zokuya kumaphepha ahlukeneyo ukusuka kwiwebhusayithi. I-typography ibaluleke kakhulu, dlala enye yentloko kunye nenye itekisi kunye ne-sans serif eyenza umsebenzi omkhulu.

Qhagamshela kwiwebhu: Lebensraum

I-PinkPoint

Umahluko wemibala usikhokelela kwiwebhu enzima ngakumbi kuyo yonke imibono. Ayizizo zonke izinto eziphambili ezingekhoyo ukudlala ngeli xesha kunye negradients zomfanekiso ongasemva kunye nala macandelo mabini anemibala ephambili yegreyidi yomfanekiso ophambili.

Qhagamshela kwiwebhu: I-PinkPoint

IWC

Ifoto enkulu ene ifonti ekhethwe kakuhle kunye "neqhawe" unganika le web. Isilayida sibonisa inxenye yomsebenzi ukuba ibe lula xa ikhawulwa.

Qhagamshela kwiwebhu: IWC

Gawula

Umzekeliso wedijithali usikhokelela kwiChop Chop nge loo mfanekiso utya bonke ubukho bawo. Umbala oluhlaza okwesibhakabhaka kwintloko uyinika indawo yayo yokwenza amaxabiso chromatic ngokuhambelana nawo wonke umfanekiso ocaciswe yiwebhu.

Qhagamshela kwiwebhu: Gawula

7Umbini

Umbala wepayini udlala ngombala oluhlaza ukuze ube ngowona ophambili kwipleyiti yasekhaya. Eminye iyayiqamba umfanekiso obuninzi obuluhlaza kunye nentloko elula efuna ukungaziwa yi-logo.

Qhagamshela kwiwebhu: 7Umbini

Ingqokelela

I-Sum iyasithatha kwezinye iindlela. Dlala kunye nomnyama omnyama nomhlophe, umzekeliso oyile kakhulu kwaye iyahamba kunye nezinye izinto kunye neminye imifanekiso emibini ukwenza indawo engaphezulu enomdla. Umzekelo wokwenza iwebhusayithi ebonakala ngaphandle kwabanye.

Qhagamshela kwiwebhu: Ingqokelela

Ibhokisi yomnqwazi

Umbala oluhlaza okwesibhakabhaka ngowona mbala ubalaseleyo kule webhusayithi apho kungekho mifanekiso ilahlekileyo ikhanyiswe ngokupheleleyo ngumhlophe kwaye umdlalo uya kuba njani kwi-3D yaloo makhi wesiza oko kuhamba njengokuba sihamba.

Qhagamshela kwiwebhu: Ibhokisi yomnqwazi

IKara lyte

UKara uya Ukulula kunye nokuncinci kunye nobukho bayo bendalo nobuhle kwifoto yakho. Eminye isicatshulwa esiza kunye nokuba zeziphi izinto eziphambili zentloko kunye neqhosha le-hamburger ukuyivula.

Qhagamshela kwiwebhu: IKara lyte

UkuThengiswa kwe Studio Studio

Es yewebhu elula kodwa oko kusibonisa ukuba yintoni na into yokwenza ibhlog. Olubomvu nomnyama zii protagonists kwindawo "zebhlog" kakhulu.

Qhagamshela kwiwebhu: UkuThengiswa kwe Studio Studio

Uyenza njani iwebhusayithi elula kwi-HTML

Siza kukufundisa yenza iwebhusayithi elula kwi-HTML ukuze wazi ezona zinto zisisiseko ziyenzayo. Kuya kuba yimfuneko ukuba nomphathi wewebhu apho singalayisha khona ikhowudi kunye nezinye i-tweaks kwiCSS, kodwa yiza, le yimigaqo ukuqala uhambo lwethu kwi-HTML.

Sele ndizibonile ezinye imizekelo elula yewebhu Unokuzikhuthaza ngokwaneleyo ukuba uzenzele eyakho imveliso ngaphandle kokophula intloko yakho kakhulu. Ngamanye amaxesha izinto ezilula zenza isiphumo esingcono kunokuba sisenza nzima kwizinto ezinzima. Uya kubona ukuba kwiimeko ezininzi imisebenzi elula isebenza kakuhle. Ziphose kuyo.

Ukudala iwebhusayithi elula kwi-HTML kulula kunokuba kubonakala ngathi kuqala. Iwebsite iqulathe i-header, umzimba okanye umxholo kunye neenyawo okanye iinyawo njengeyona nto iphambili. Singazihlela ngale ndlela:

• Amaphepha: onke amaxwebhu esiza kuwenza kufuneka enziwe nge . Sivula nge- kwaye uhlala evala nge
• Umzimba okanye umzimbaInxalenye ebonakalayo yoxwebhu iphakathi Y
• Izihloko: Zaziwa nge-H1, H2, H3 ... Siqala ngo-a kwaye sivale nge . Isicatshulwa esingaphakathi siza kubonakala njengesihloko kwaye ngokuxhomekeke kumanani aso siya kwenza njalo kubungakanani obuncinci okanye obukhulu.
• Imihlathi: umhlathi ufakwe ngaphakathi kwaye ivale nge
• Izixhumanisi: owona mzekelo ucacileyo ngucreativosonline.org/»> Ikhonkco kwi Creativos Online
• Imifanekiso: sizichaza ngelebheli . Umzekelo unokuba . Simema umfanekiso phakathi kweempawu zokucaphula kwaye sisebenzise i-alt kwisicatshulwa esisesinye, esibalulekile kwi-SEO.
• Lists: Sichaza uluhlu nge kumdaka kunye ne Yicocekile. Uluhlu lwezinto ezisetyenzisiweyo kunye . Ngalo lonke ixesha khumbula ukubavala nge-bar.

Ngale miba siza kuba nayo isiseko sokwenza iwebhusayithi elula njengoko uza kubona kwisixa esihle sazo esiza kukufundisa kwicandelo elilandelayo. Masithi ubume be-semantic enezona zinto zibalulekileyo zijongeka njengoku:

• Okubhaliweyo okuphezulu kunye nebha yokukhangela kumaphepha ahlukeneyo esiza.
• Inqaku okanye indawo yomzimba apho singenza khona ukungena kwebhlog, sibeka ikharityhulam yethu okanye umfanekiso.
• Ibar esecaleni okanye ibha esecaleni ukubeka ulwazi olongezelelweyo.
• Unyaweni okanye unyawo, apho siza kubeka khona amakhonkco awona maphepha abalulekileyo esiza kunye nee icon zonxibelelwano lwasentlalweni (njalo njengomzekelo).

Kwimizekelo oya kuyibona apha ngezantsi konke kusekelwe kwilogo elula kodwa ebukekayo, i-header apho babeka khona ukuhamba kumaphepha ahlukeneyo esiza, indawo esembindini elawulwa sisicatshulwa okanye umfanekiso kunye nonyaweni kunye nezinto ezichazwe kumhlathi odlulileyo.

Siyacebisa ukuba sukuyophula intloko kwaye uye kwizinto ezilula. Eyona nto iphambili kukuba ezi ndawo zahlulwe kwezinye ngokudlula okubonakalayo kwemizuzwana. Ngexesha siza kuba nakho ukuzenza nzima kwaye sisebenze ngakumbi kwezinye iindawo.

Oku umzekelo ocacileyo wekhowudi ye-HTML ngezona zinto zibalulekileyo:

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

Ngale migca yekhowudi ye-HTML singaba nayo kuqala ndenza isihloko sephepha entlokweni nge, kule meko «Semantic HTML», singavala zombini isihloko nge , intloko ene kwaye sinikezela ngokuvula umzimba nge .

Singaba ne Intloko yokuqala kwi-H1 nge ukuyivala nge , Kwaye siya kuya kuluhlu olunokusinceda ukuba senze ibar yokuhambisa amaphepha ahlukeneyo kwindawo yethu. Sivalela uluhlu , siyavala kwaye ekugqibeleni uxwebhu lwe-html .

Ukugqiba, soloko uvula uxwebhu nge ukuyivala ekupheleni kwayo yonke ikhowudi kunye ne-slash. Emva kokuvula uxwebhu, ireferensi kulwimi ihlala isetyenziswa, ethi kule meko yiSpanish ene «es» kunye ne .

Kubalulekile ukuba ujonge ikhowudi kwaye nanini na Uvula umsebenzi uwuvale ngebhari ezihambelanayo

Intwana yeCSS

Singena kwi-CSS kancinci, kodwa sidlula ukuze uqonde isitayile se-HTML. Masithi i-CSS kunye ne-HTML ziyahambelana ukunika ezi webhusayithi zilula oza kuzifumana apha ngezantsi.

Ukuba kwelinye icala sisebenzisa i-HTML yesemantic yeyiphi i-header okanye i-header, umzimba okanye umzimba kunye nenqaku okanye umfanekiso kunye nonyaweni, kwi-CSS siza kusebenzisa umsebenzi we "Div" ukuchonga kwindawo nganye kwezi ukuze kamva usebenzise utshintsho olufunekayo kuyilo.

Into elula njenge:

Ngelixa singazisebenzisa izitayile ngeDiv, ulwakhiwo olufanelekileyo nolufezekileyo luya kunceda ukuze abakhasi bewebhu bakwazi "ukufunda" ngokugqibeleleyo ukuba umxholo wethu ungantoni, ke ukuba silandela olo lwakhiwo lusisiseko, siya kuba nomsebenzi omkhulu kunye nesiseko sokuqala.

Un Umzekelo olula wekhowudi yeCSS:

h1 {
umbala: mhlophe;
lungelelanisa isicatshulwa: iziko;
}

Sibiza i-H1 kunye nesicatshulwa siza kuyifaka ngombala omhlophe: mhlophe; kwaye siya kuyilungelelanisa embindini nge «ulungelelwaniso lokubhaliweyo». Soloko uvale ngeebakaki emva kokuvula umnxeba we-H1.

Ifoto yeNtloko ye UGreg rakozy