30 Shafukan Yanar Gyara masu Sauƙi

Wasu daga cikin shahararrun shafuka suna cike da bayanai sosai, amma na fi son akasin haka: masu sauki.

Babu shakka babban mai fitar da wannan rukunin shine Google tare da karamin shafin farko tun lokacin da ta fara tafiya, amma a bayyane yake cewa ba shi kadai bane akan Intanet wanda ya himmatu wajen sauƙaƙa abubuwa.

Misalai masu sauki na gidan yanar gizo na HTML

Kean mai arziki

Kean Richmond ya sa mu ga saukin wasa da ƙananan abubuwa, amma an sanya shi sosai ba da babban ji ga ƙaramin abu. Alamar sa a saman hagu, da Twitter da alamomin tuntuɓar da ke dama da tsakiyar, tare da buga rubutu mai tsoka, ga abin da ya keɓe.

Adireshin yanar gizo: Keanrich mond

Alice mai kwazo

Alice mai kwazo a sauƙaƙe shi kuma tare da tambarin da aka sanya a tsakiyar, shafuka guda hudu don motsawa tsakanin manyan shafukan yanar gizan ku da jerin hotunan da aka sanya su yadda ya kamata don kallo ɗaya mu san me kuke yi da abin da kuke yi.

Adireshin yanar gizo: Alice mai kwazo

Jonathan ogden

Ogden ci gaba da wasa da yadda sunanku yake mai sauki kamar tambari, hanyoyin sadarwar sada zumunta da ke kasa ba tare da jawo hankali ba kuma tsarinsu yana aiki yadda za mu hanzarta ratsa su. A shafi daya yana nuna duk abin da yake da mahimmanci.

Adireshin yanar gizo: Jonathan ogden

Finch

Finch ya rigaya zuwa wasu wurare don wasa tare da rubutun rubutu da waɗanda launuka waɗanda ke nuna ladabi da hikimar abin da yake yi. Tare da 'yan abubuwan kaɗan, ya bar duk ƙwarewar sa a gaba. Hakanan yana bayyana a fili waɗanne shafukan yanar gizo suka haɗa ku.

Adireshin yanar gizo: Finch

Wani Tsari daban

Wannan gidan yanar gizon wasa daban. Yi amfani da bangon waya tare da rubutun kai wanda daga inda zamu iya zuwa manyan shafuka, wayarku da hanyoyin haɗi zuwa hanyoyin sadarwar ku.

Adireshin yanar gizo: Wani Tsari daban

garkame

Kai ya misalta mu da surarsa tare da madaidaicin alwatika da launukan launuka masu dacewa a ba da kusanci. Hakanan yana bayar da wani ɓangare na tarihinsa tare da font a cikin ƙarami idan muna son ƙarin sani game da shi.

Adireshin yanar gizo: garkame

Zanen Lambun Tsaye

Kamar na baya, Tsararren Aljanna Tsaye yana zuwa hoto wanda ke nuna sauri ɗayan kyawawan ayyukan sa a tashar jirgin saman Oslo. A saman muna da taken tare da «nav bar» ko maɓallin kewayawa har ma da yiwuwar sauya harshe. Alamar tana sanya shi a cikin tsari don tsaye don ba da taɓawa ta ƙarshe zuwa shafi mai sauƙi.

Adireshin yanar gizo: Zanen Lambun Tsaye

Babban darajar 247

Babban darajar 247 yi wasa da monochrome da hoton bango kusan duhu. Rubutun taken, mafi ƙanƙanta fiye da rubutu da rubutun kai, ana haɓaka don ƙirƙirar babban bambanci a cikin ƙirar gaba ɗaya.

Adireshin yanar gizo: Babban darajar 247

Ji dadin wannan

Una babban rubutu zai iya zama alamar kasancewa ingantacce kuma cewa mun san abin da muke yi. Ba lallai ba ne ku ƙara ba wani abu idan saƙon kai tsaye ne. Sun bayyana karara: suna son ƙirƙirar kyawawan ƙa'idodi da gidan yanar gizo. Sun bar wasiƙa don ayyuka da karatun su a wata hanyar haɗi.

Adireshin yanar gizo: Ji dadin wannan

Allison hou

Allison ya dauke mu kafin sauran kwasa-kwasan kuma ya hada da karin hotuna da kuma cewa mafi "mace" typeface. Hakanan yake don ainihin hotonku da wannan rubutun. Yana da alatu na gabatar da kati mai nuna dabarun cin kasuwa.

Adireshin yanar gizo: Allison hou

pixelot

Pixelot yana da ɗan mahaukaci, amma kuma yana nuna kerarren marubucin. Yi amfani da alamar linzamin kwamfuta don ƙirƙirar abin rufe fuska wancan yana lalata duk inda muke da shi.

Adireshin yanar gizo: pixelot

Lionel ya yi karatu

Idan kana so sanya ci gaba a kan layi ba tare da komai ba, Lionel ya nuna maka matakalan. Rubutun da ya dace, hotonku a saman hagu, yana haɗi zuwa hanyoyin sadarwar ku da ƙwarewar ku. Abubuwan da kawai aka kawata sune wadancan layuka biyun a kwance masu launuka daban-daban.

Adireshin yanar gizo: Lionel ya yi karatu

Kananan Jirgin Ruwa

Mun dawo zuwa ga ladabi na kaɗan da waɗancan manyan sarari. A gefe guda taken yana da nisa sosai daga sauran abubuwan, kuma a gefe guda waɗancan abubuwan sun siffa ta yadda zasu ƙirƙira jituwa ta gani tsakanin su.

Adireshin yanar gizo: Kananan Jirgin Ruwa

Lebensraum

Kamar yadda kake gani a cikin dukkan misalan, yana da mahimmanci shafin shafuka don zuwa shafuka daban-daban daga shafin yanar gizo. Rubutun rubutu yana da mahimmanci, wasa da ɗayan don taken kai kuma wani don rubutu tare da sans serif wanda ke yin aiki mai kyau.

Adireshin yanar gizo: Lebensraum

PinkPoint

Bambancin launuka yana haifar mana da yanar gizo mai rikitarwa na dukkan ra'ayoyi. Ba duk waɗannan manyan abubuwan bace bane don kunna wannan lokacin tare da gradients don hoton bango da waɗancan sassan biyu waɗanda ke da manyan launuka na ɗan tudu na babban hoton.

Adireshin yanar gizo: PinkPoint

IWC

Babban hoto tare da kyakkyawan zaɓaɓɓen rubutu da nau'in "gwarzo" zaka iya baiwa wannan gidan yanar gizo. Tare da darjewa yana nuna ɓangare na aikin ya zama mai sauƙi a cikin ɗaukar cikin.

Adireshin yanar gizo: IWC

Sara sara

Hoton hoto ya kawo mu Chop Chop tare da wancan hoton da yake cinye duk gaban gani. Launin shuɗi a cikin rubutun yana ba shi ma'anarta don ƙirƙirar ƙimar chromatic daidai da duk hoton da gidan yanar gizo ya tsara.

Adireshin yanar gizo: Sara sara

7Binya

7Pine yana wasa tare da kore don zama babban jarumi na farantin gida. Sauran sun hada shi hoto mai ɗauke da kore da sauƙi mai taken kai tsaye tambarin ba ya lura da shi.

Adireshin yanar gizo: 7Binya

Taron

Taron ya dauke mu a wasu hanyoyi. Yi wasa tare da farin baƙi da fari, hoto mai ƙira kuma hakan yana tafiya tare da sauran abubuwan abubuwa da kuma wasu zane-zane guda biyu don ƙirƙirar yanayin da yafi ban sha'awa. Misali don ƙirƙirar gidan yanar gizon da ya fita dabam da sauran.

Adireshin yanar gizo: Taron

Akwatin Hat

Blue shine launi mafi rinjaye akan wannan gidan yanar gizon wanda babu hotunan ɓataccen haske wanda ya haskaka da fari da kuma yadda wasan zai kasance a cikin 3D na wancan maginin shafin wannan yana motsa yayin da muke motsawa.

Adireshin yanar gizo: Akwatin Hat

Karamin lete

Kara tafi zuwa sauki da ƙarami kaɗan tare da kasancewarta ta yanayi da kyakkyawa a cikin hotonku. Sauran rubutu ne wanda yazo tare da menene manyan abubuwa don taken da maɓallin hamburger don buɗe shi.

Adireshin yanar gizo: Karamin lete

Kasuwancin Studio Studio

Es na yanar gizo mafi sauki amma wannan yana nuna mana menene yin blog. Ja da baƙi sune jarumawa a cikin shafin "blog" sosai.

Adireshin yanar gizo: Kasuwancin Studio Studio

Yadda ake ƙirƙirar yanar gizo mai sauƙi a cikin HTML

Za mu koya muku ƙirƙirar yanar gizo mai sauƙi a cikin HTML don haka ka san mafi mahimman abubuwan da suka tsara shi. Zai zama dole a sami mahaɗan gidan yanar gizo inda za mu ɗora lambar da wasu gyare-gyare a cikin CSS, amma ku zo, waɗannan ƙa'idodin ne don fara tafiyarmu a HTML.

Bayan munga wasu misalan yanar gizo masu sauki Da wanne zaka iya kwadaitar da kanka isa kayi naka zane ba tare da fasa kan ka da yawa ba. Wani lokaci mai sauki yana haifar da kyakkyawan sakamako fiye da rikita mana abubuwa masu rikitarwa. Za ku ga cewa a mafi yawan lokuta sauki yana aiki sosai. Tafi da shi.

Irƙirar gidan yanar gizo mai sauƙi a cikin HTML ya fi sauƙi fiye da yadda zai iya ɗauka da farko. Yanar gizo kunshi rubutun kai, jiki ko abun ciki da ƙafa ko ƙafa a matsayin manyan abubuwa. Za mu iya rarraba su ta wannan hanyar:

• Documentos: duk takaddun da zamu kirkira dole ne ayi su da . Muna bude tare da kuma koyaushe yana rufewa tare da
• Jiki ko jiki: ɓangaren da ke bayyane na daftarin aiki yana tsakanin Y
• Kwallaye: an san su ta H1, H2, H3 ... Mun fara da a kuma mun rufe da . Rubutun da ke ciki zai bayyana azaman kan kanne gwargwadon lambarta zaiyi hakan a ƙarami ko girma.
• Sakin layi: an saka sakin layi a cikin a kuma yana rufewa tare da
• Enlaces: mafi bayyanan misali shinecreativosonline.org/">Haɗi zuwa Creativos Online
• Hotuna: muna bayyana su ta hanyar lakabi . Misali zai kasance . Muna kiran hoton tsakanin maganganun kuma muna amfani da alt don madadin rubutu wanda yake da mahimmanci ga SEO.
• Lists: muna ayyana jeri tare da ga wani rikici kuma tare da na tsafta. Ana amfani da abubuwan abubuwa tare da . Koyaushe tuna don rufe su da sandar.

Tare da waɗannan abubuwan zamu sami tushe don ƙirƙirar yanar gizo mai sauƙi kamar yadda zaku gani a cikin adadi mai yawa da zamu koya muku a sashe na gaba. Bari mu ce tsarin ma'anar halitta tare da mahimman abubuwanta suna kama da wannan:

• Header tare da maɓallin kewayawarsa don shafuka daban-daban na shafin.
• Labari ko sararin samaniya wanda zamu iya ƙirƙirar shigarwar bulogi, sanya tsarin karatunmu ko hoto.
• Yankin gefe ko labarun gefe sanya ƙarin bayani.
• Sawayen ko ƙafa, inda za mu sanya hanyoyin haɗi zuwa mahimman shafukan yanar gizo gami da gumakan hanyoyin sadarwar jama'a (koyaushe a matsayin misali).

A cikin misalan da zaku gani a ƙasa sune duk ya dogara da tambari mai sauki amma mai kyau.

Muna bada shawara cewa kar ka fasa kanka ka tafi wajan masu sauki. Babban abu shine cewa an bambanta waɗannan yankunan daga sauran a cikin gani na dakika. Tare da lokaci zamu iya wahalar da kanmu kuma muyi aiki akan wasu wurare.

Wannan shi ne bayyanannen misali na lambar HTML tare da mahimman abubuwa:

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

Tare da waɗannan layi na lambar HTML za mu sami na farko ya ƙirƙiri taken shafi a cikin rubutun kai tsaye tare da, a wannan yanayin «Semantic HTML», zamu rufe duka taken da , taken tare da kuma zamu bada hanya mu bude jiki da shi .

Za mu sami taken farko a H1 tare da rufe shi da , kuma za mu je jerin abubuwan da zasu taimaka mana ƙirƙirar maɓallin kewayawa don shafuka daban-daban na rukunin yanar gizon mu. Mun rufe jerin tare da , muna rufe kuma a ƙarshe da rubutun html tare da .

Zuwa karshen, koyaushe buɗe takarda tare da don rufe shi a ƙarshen duk lambar tare da maƙallan. Bayan buɗe takaddar, ana amfani da ma'anar harshe koyaushe, wanda a cikin wannan yanayin Spanish ne tare da «es» kuma tare da .

Yana da mahimmanci ku duba lambar sosai a duk lokacin da ka bude aiki rufe shi da sandar daidai

Bitananan CSS

Mun shiga cikin CSS kadan, amma a wucewa don ku fahimta yadda ake salon HTML. Bari mu ce CSS da HTML suna tafiya kafada da kafada don bawa waɗancan rukunin yanar gizon masu sauki waɗanda zaku samu a ƙasa.

Idan a gefe guda muna da ma'anar ma'anar HTML don menene taken ko taken, jiki ko jiki tare da labarinsa ko hotonsa da ƙafafunsa, a cikin CSS zamuyi amfani da aikin «Div» don ganowa zuwa kowane ɗayan waɗannan wurare don daga baya suyi amfani da canje-canjen da ake buƙata a cikin ƙirar.

Wani abu mai sauki kamar:

Duk da yake zamu iya amfani da salo tare da Div, tsari mai dacewa kuma cikakke zai taimaka ta yadda masu amfani da yanar gizo za su iya "karanta" abin da ke ƙunshe cikin mu, don haka idan muka bi wannan tsarin, za mu sami babban aiki da tushe da farko.

Un misali lambar CSS mai sauki:

h1 {
launi: farin;
rubutu-daidaita: cibiyar;
}

Muna kiran H1 da rubutu zamu sanya shi cikin fari mai launi: fari; kuma zamu daidaita shi zuwa tsakiya tare da «daidaita rubutu». Koyaushe rufe tare da maƙunan katako bayan buɗewa zuwa kiran H1.

Hoton kai na Greg rakozy