Amakhasi weWebhu alula ngendlela emangalisayo

Amanye amakhasi adume kakhulu agcwele imininingwane, kepha ngithanda okuphambene: okulula.

Ngokusobala umchazi omkhulu waleli qembu yiGoogle enekhasi lasekhaya elincane kakhulu selokhu laqala uhambo lwayo, Kepha ngokusobala akuyona yodwa kwi-Intanethi ezinikele ekugcineni izinto zilula.

Izibonelo ezilula zekhasi lewebhu le-HTML

UKean richmond

UKean Richmond usenza sibone ukulula kokudlala ngezinto ezimbalwa, kepha kubekwe kahle ku- nikeza umuzwa omuhle kubuncane. Uphawu lwayo engxenyeni engaphezulu kwesobunxele, i-Twitter nezithonjana zokuxhumana ngakwesokudla naphakathi nendawo, ezine-typography ehlaba umxhwele, kulokho ezinikezele.

Xhuma kuwebhu: UKeanrich mond

U-Alice Drugard

U-Alice Drugard yigcine ilula futhi ne-logo yakho ibekiwe maphakathi, amathebhu amane wokuhambisa phakathi kwamakhasi aphambili ewebhusayithi yakho nochungechunge lwezithombe ezibekwe kahle ukuze sithi shazi sazi ukuthi wenzani nokuthi wenzani.

Xhuma kuwebhu: U-Alice Drugard

UJonathan Ogden

Ogden qhubeka udlale ngendlela elula ngayo igama lakho njenge-logo, amanethiwekhi omphakathi atholakala ngezansi nje ngaphandle kokuheha ukunakwa futhi ukwakheka kwawo kuyasebenza ukuze sikwazi ukudlula kuzo ngokushesha. Ekhasini elilodwa kukhombisa konke okubalulekile.

Xhuma kuwebhu: UJonathan Ogden

Finch

UFinch usevele uya kwezinye izindawo ukuyodlala nge-typography kanye nalezo imibala ekhombisa ubuhle nokuhlakanipha kwalokho ekwenzayo. Ngezakhi ezimbalwa nje, ushiya bonke ubuchwepheshe bakhe bubukeka. Iphinde ikwenze kucace ukuthi imaphi amakhasi axhunyaniswe nawe.

Xhuma kuwebhu: Finch

Idizayini ehlukile

Le webhusayithi dlala ngokuhlukile. Sebenzisa iphephadonga elinesihloko esingaya kuwo emakhasini amakhulu, ifoni yakho kanye nezixhumanisi eziya kumanethiwekhi wakho omphakathi.

Xhuma kuwebhu: Idizayini ehlukile

UBrizk

UKai usikhombisa ngesibalo sakhe nge unxantathu ongabonakali kanye nephalethi yombala efanelekayo ukunikeza ukusondelana. Ubuye anikeze ingxenye ye-bio yakhe enefonti ngosayizi omncane uma kwenzeka sifuna ukwazi kabanzi ngaye.

Xhuma kuwebhu: UBrizk

Umklamo Wengadi Eqondile

Njengangaphambilini, iVertical Garden Design iya esithombeni esibonisa ngokushesha omunye wemisebenzi yakhe emihle esikhumulweni sezindiza i-Oslo. Phezulu sinesihloko esine- «nav bar» noma ibha yokuzula ngisho nethuba lokushintsha ulimi. I-logo iyibeka ngefomethi emile ukuze inikeze ukuthinta kokugcina ekhasini elilula.

Xhuma kuwebhu: Umklamo Wengadi Eqondile

I-247Grad

I-247Grad dlala nge-monochrome nesithombe sangemuva cishe kumnyama bhuqe. Ifonti kanhlokweni, incane kunombhalo nonhlokweni, ifakwe ngofeleba ukudala umehluko omkhulu ekwakhiweni kukonke.

Xhuma kuwebhu: I-247Grad

Jabulela lokhu

Una ukuthayipha kahle kakhulu kungaba uphawu lokuba yiqiniso nokuthi siyakwazi esikwenzayo. Awudingi ukunikela ngokuningi uma umyalezo uqondile. Benza kucace bha: bayathanda ukudala izinhlelo zokusebenza ezinhle namawebhusayithi. Bashiya iposi ngamaphrojekthi nokutadisha kwabo kwesinye isixhumanisi.

Xhuma kuwebhu: Jabulela lokhu

U-Allison hou

U-Allison usithatha ngaphambi kwezinye izifundo futhi kufaka izithombe eziningi nokuthi uhlobo oluthe xaxa "lwesifazane". Okufanayo kuya ngesithombe sakho esikhulu naleso sihloko. Unokunethezeka kokwethula ikhadi elibonisa ubuqili bokuthenga.

Xhuma kuwebhu: U-Allison hou

I-Pixelot

IPixelot iyahlanya, kepha futhi ikhombisa ubuqambi bombhali. Sebenzisa isikhombi segundane ukudala imaski lokho kufiphaza nomaphi lapho sinakho khona.

Xhuma kuwebhu: I-Pixelot

Izazi zikaLionel

Uma ufuna yenza i-resume yakho i-inthanethi ngaphandle kokunye, ULionel ukukhombisa amagxathu. Ifonti efanelekayo, isithombe sakho ngakwesobunxele esingenhla, izixhumanisi zokuxhumana nabantu bakho nesipiliyoni sakho. Okuwukuphela kwento yokuhlobisa yileyo migqa emibili enezingqimba yemibala ehlukene.

Xhuma kuwebhu: Izazi zikaLionel

Izinhlanzi zasolwandle ezinhle

Siyabuya ekuphakameni kobuncane nalezo zikhala ezinkulu ezingenalutho. Ngakolunye uhlangothi unhlokweni ukude kakhulu nezinye izinto, ngakolunye uhlangothi lezo zinto zakhiwe ngendlela yokuthi zakhe ukuvumelana okuhle okubonakalayo phakathi kwazo.

Xhuma kuwebhu: Izinhlanzi zasolwandle ezinhle

Lebensraum

Njengoba ukwazi ukubona kuzo zonke izibonelo, kubalulekile amathebhu kanhlokweni wokuya emakhasini ahlukile kusuka kuwebhusayithi. I-typography ibaluleke kakhulu, dlala ngesinye sekhanda bese esinye sombhalo nge-sans serif esenza umsebenzi omuhle.

Xhuma kuwebhu: Lebensraum

I-PinkPoint

Ukungafani kwemibala kusiholela kuwebhu eyinkimbinkimbi ngokwengeziwe yayo yonke imibono. Akuzona zonke lezo zinto eziyinhloko ezingekho ukudlala lesi sikhathi ngama-gradients wesithombe sangemuva nalezo zingxenye ezimbili ezinemibala eyinhloko ye-gradient yesithombe esikhulu.

Xhuma kuwebhu: I-PinkPoint

IWC

Isithombe esihle nge ifonti ekhethwe kahle kanye nento ethi "iqhawe" unganika le webhu. Nge-slider kukhombisa ingxenye yomsebenzi ukuthi ibe lula emcabangweni wayo.

Xhuma kuwebhu: IWC

Chop chop

Umdwebo wedijithali usiholela kuChop Chop nge leso sithombe esidla bonke ubukhona baso esibonakalayo. Umbala oluhlaza okwesibhakabhaka kunhlokweni uyinikeza iphuzu layo lokwakha amanani we-chromatic ngokuhambisana nawo wonke umfanekiso ovezwe yiwebhu.

Xhuma kuwebhu: Chop chop

7Uphayini

I-pine iyadlala nohlaza ukuze ibe ngumlingisi omkhulu wepuleti lasekhaya. Bonke abanye bayayiqamba isithombe esinokuluhlaza okuningi nenhloko elula lokho kufuna ukunganakwa yilogo.

Xhuma kuwebhu: 7Uphayini

Isamba

ISum iyasihambisa kwezinye izinkomba. Dlala ngomnyama nomhlophe odwetshiwe, umfanekiso onobuhlakani obukhulu futhi lokho kuhambisana nezinye izakhi neminye imifanekiso emibili ukudala indawo engaphezulu kokuthakazelisa. Isibonelo sokwakha iwebhusayithi evelele kokunye.

Xhuma kuwebhu: Isamba

I-Hatbox

Umbala oluhlaza okwesibhakabhaka umbala ogqamile kule webhusayithi lapho kungekho khona ukusweleka kwezithombe ezikhanyiswe ngokuphelele ngomhlophe nokuthi umdlalo ubuyoba yini ku-3D yalowo makhi wesiza lokho kuhamba lapho sihamba.

Xhuma kuwebhu: I-Hatbox

UKara lyte

UKara uya ku- ubulula nobuncane ngobukhona bayo bemvelo nobuhle esithombeni sakho. Okunye ngumbhalo ohambisana nokuthi yiziphi izinto eziyinhloko zekhanda kanye nenkinobho ye-hamburger yokuyivula.

Xhuma kuwebhu: UKara lyte

Ukumaketha kwe-Instrinsic Studio

Es wewebhu elula kepha lokho kusikhombisa ukuthi kuyini ukwenza ibhulogi. Okubomvu nokumnyama yizona protagonists kusayithi le- "blog" kakhulu.

Xhuma kuwebhu: Ukumaketha kwe-Instrinsic Studio

Ungayakha kanjani iwebhusayithi elula ku-HTML

Sizokufundisa dala iwebhusayithi elula nge-HTML ukuze wazi izinto eziyisisekelo eziyibhalayo. Kuzodingeka ukuthi kube nomsingathi wewebhu lapho singalayisha khona ikhodi nokunye ukulungisa ku-CSS, kepha woza, lezi izimiso zokuqala uhambo lwethu nge-HTML.

Njengoba ngibonile ezinye izibonelo ezilula zewebhu Ngalokho ungazikhuthaza ngokwanele ukwenza imiklamo yakho ngaphandle kokuphula ikhanda lakho kakhulu. Kwesinye isikhathi okulula kudala umphumela ongcono kunokusixaka ezintweni eziyinkimbinkimbi. Uzobona ukuthi ezimweni eziningi okulula kusebenza kahle kakhulu. Kwenze.

Ukudala iwebhusayithi elula ku-HTML kulula kunokuba kungabonakala ekuqaleni. Iwebhusayithi siqukethe unhlokweni, umzimba noma okuqukethwe nonyaweni noma unyaweni njengezinto eziyinhloko. Singazihlukanisa ngale ndlela:

• Amadokhumenti: yonke imibhalo esizoyakha kumele yenziwe nge . Sivula nge- futhi ivala njalo nge
• Umzimba noma umzimba: ingxenye ebonakalayo yedokhumenti iphakathi Y
• Izihloko: zaziwa nge-H1, H2, H3 ... Siqala ngo-a futhi sivale nge . Umbhalo ongaphakathi uzovela njengonhlokweni futhi ngokuya ngenombolo yawo uzokwenza ngosayizi omncane noma omkhulu.
• Izigaba: isigaba sifakwe ngaphakathi kwe- a futhi ivala nge
• Enlaces: isibonelo esicacile yilesicreativosonline.org/»> Xhumanisa ne Creativos Online
• Izithombe: sizichaza ngelebula . Isibonelo kungaba . Sicela isithombe phakathi kwezingcaphuno bese sisebenzisa i-alt ukuthola umbhalo ohlukile obalulekile ku-SEO.
• Izinhlu: sichaza uhlu nge okonakele futhi nge ukuze kucoceke. Izinto zohlu zisetshenziswa ne- . Khumbula njalo ukuwavala nge-bar.

Ngalezi zinto sizoba nazo isisekelo sokwakha iwebhusayithi elula njengoba uzobona ngobuningi bazo esizokufundisa engxenyeni elandelayo. Ake sithi isakhiwo semantic esinezinto ezibaluleke kakhulu sibukeka kanjena:

• Unhlokweni nomugqa wayo wokuzulazula yamakhasi ahlukene esiza.
• I-athikili noma isikhala somzimba lapho singakha khona okuthunyelwe kwebhulogi, faka i-resume yethu noma isithombe.
• Ibha eseceleni noma ibha eseceleni ukufaka imininingwane eyengeziwe.
• Unyaweni noma unyawo, lapho sizobeka khona izixhumanisi zamakhasi abaluleke kakhulu esayithi kanye nezithonjana zokuxhumana nabantu (njalo njengesibonelo).

Ezibonelweni ozozibona ngezansi kukhona konke kususelwa ku-logo elula kodwa enhle, unhlokweni lapho bebeka khona ukuzulazula kumakhasi ahlukene esayithi, isikhala esimaphakathi esilawulwa ngumbhalo noma isithombe kanye nonyaweni onezakhi ezishiwo esigabeni esedlule.

Sincoma lokho ungaphuli ikhanda lakho uye kwabalula. Into esemqoka ukuthi lezi zindawo zehlukaniswe nezinye ngokuhamba okubonakalayo kwemizuzwana. Ngokuhamba kwesikhathi sizokwazi ukuzixaka ngokwethu futhi sisebenze kakhulu kwezinye izikhala.

Yilokho isibonelo esicacile sekhodi ye-HTML ngezinto ezibaluleke kakhulu:

<!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 migqa yekhodi ye-HTML ebesizoba nayo uqale ukudala isihloko sekhanda kunhlokweni nge, kuleli cala «Semantic HTML», besizovala zombili isihloko nge , unhlokweni nge futhi besivumela ukuvula umzimba nge .

Sizoba ne- unhlokweni wokuqala ku-H1 nge ukuyivala nge , futhi besizoya kuhlu oluzosisiza ukuthi sakhe ibha yokuhambisa amakhasi ahlukile esiza sethu. Sivala uhlu nge- , siyavala futhi ekugcineni idokhumenti ye-html nge .

Ukuqeda, hlala uvula idokhumenti nge ukuyivala ekugcineni kwayo yonke ikhodi nge-slash. Ngemuva kokuvula idokhumende, kusetshenziswa ireferensi yolimi ngaso sonke isikhathi, okuthi kulokhu kube yiSpanish ene- "es" ne-a .

Kubalulekile ukuthi ubhekisise ikhodi noma nini uvula umsebenzi uwuvale ngebha umlobeli.

I-CSS encane

Singena ku-CSS kancane, kepha ngokudlula ukuze uqonde ungayifaka kanjani isitayela nge-HTML. Masithi i-CSS ne-HTML ziyahambisana ukunikeza lawo mawebhusayithi alula ozowathola ngezansi.

Uma ngakolunye uhlangothi sisebenzisa i-HTML ngendlela eyisimangaliso ukuthi yini unhlokweni, umzimba noma umzimba onendatshana yawo noma isithombe nonyaweni, ku-CSS besizosebenzisa umsebenzi we- «Div» ukukhomba kwesinye nalezi zikhala ukuze kamuva usebenzise izinguquko ezidingekayo ekwakhiweni.

Okuthile okulula njengokuthi:

Ngenkathi singasebenzisa izitayela nge-Div, isakhiwo esifanelekile futhi esiphelele sizosiza ukuze abakhasi bewebhu bakwazi "ukufunda" ngokuphelele ukuthi okuqukethwe kwethu kumayelana nani, ngakho-ke uma silandela leso sakhiwo esiyisisekelo, sizoba nomsebenzi omuhle nesisekelo sokuqala.

Un isibonelo sekhodi elula ye-CSS:

h1 {
umbala: white;
qondanisa umbhalo: phakathi;
}

Sibiza u-H1 nombhalo sizoyifaka emhlophe ngombala: mhlophe; futhi sizoziqondanisa maphakathi ne- «ukuqondanisa umbhalo». Vala njalo ngabakaki ngemuva kokuvula ucingo lwe-H1.

Unhlokweni isithombe se- UGreg rakozy