Mësoni të jeni një Zen mjeshtër i markup

Shënimi, ose shënimi, i referohet gjuhëve të shënjimit ose të etiketimit ashtu siç janë HTML dhe CSS, dhe të gjithë e dimë se sa e dhimbshme është hapja dhe mbyllja e etiketave një nga një për të krijuar një shabllon uebi ...

Sigurisht që ka zgjidhje për këtë, njëra prej tyre është plotësimi automatik me IDE Dreamweaver mierda blugriffon i bezdisshëm nëse nuk blini shtojca prej tij o Redaktoni Komodo shume e rende… Çështja është që redaktorët IDE ose të kodeve shumë të ngarkuar me opsione shpesh përfundojnë duke e penguar punën në mënyra të paimagjinueshme; i tillë është rasti i Dreamweaver që të mbush me kodin e plehrave atë që gjeneron në mënyrë grafike dhe është e rëndë, e shtrenjtë dhe e shëmtuar. blugriffon është kryesisht e bezdisshme sepse është falas, falas, por gjysma e opsioneve janë të rezervuara për përdoruesit me pagesë… kjo nuk është kënaqësi. Dhe së fundmi kemi Redaktoni Komodo, e cila është mjaft e mirë, e fuqishme dhe plot opsione, por është e rëndë (100mb në idhull) dhe vendosja e tij është e lodhshme.

Arma më e mirë e një zhvilluesi të uebit ose krijuesit të faqes në internet nuk është IDE në stilin e tankut të luftës me një mijë armë sipër, është një redaktues i thjeshtë teksti, disa shtojca dhe aftësia për të shtypur si një person i sëmurë ... për atë shtoni magjinë e Kodimi i Zenit dhe ata do të kenë në gishtat e tyre mjetin më të mirë për shënjimin e krijuar ndonjëherë (të paktën për mua).

Por ... çfarë dreqin është Kodimi i Zenit?

E thjeshtë, është një shtojcë e veçantë që shërben si një shtresë e heqjes së zbritjes për HTML dhe CSS të krijuar në Javascript dhe në dispozicion të shumë botuesve më të famshëm (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, etj.).

Aha, unë ende nuk e kuptoj një ide të dreqit atë që po thua ...

Kështu që unë ju tregoj me një shembull të thjeshtë; E mbani mend gjënë e heqjes së zbritjes? Epo, ndryshojeni atë në tkurrje, imagjinoni se mund të merrni një rresht të kodit HTML / CSS të shembur në një rresht dhe ta shpalosni atë si një perde ose ta palosni përsëri ... Dëshironi të shihni se si? Thjesht duhet të siguroheni që keni dy gjëra për ta bërë atë të funksionojë:

Kam Kodimi i Zenit instaluar në redaktorin tuaj.
Njihni komandat dhe sintaksën për ta përdorur atë.

Mirë, gishtat në kod:

html>head+body

E shihni atë linjë kodi? Epo kjo është sintaksa për HTML, është e thjeshtë:

Së pari vendosni emrin e etiketës (html) pastaj tregoni se cilat etiketime do të jenë brenda asaj etiketimi (>) dhe pastaj emrin e etiketave që hyjnë brenda asaj etiketimi (koka dhe trupi). Shenja '+' tregon se koka dhe trupi janë dy etiketa të ndryshme dhe se asnjëra nuk përmbahet në tjetrën, është si të thuash «bashkë por jo të përziera«… Atëherë, le të shohim se çfarë gjeneron ajo linjë e kodit kur shtypni tastet magjike (në rastin tim CTRL + E):

Saktësisht, 4 rreshta kodi të bërë në një, që shfaqen me magji kur shtypni kombinimin e saktë të tastave… dhe mund të jenë shumë më tepër; për shembull:

html>head+body>ul#lista_ordenada>li.listilla*5

Sintaksa e njëjtë, por ne shtojmë diçka tjetër ... nëse dini ndonjë CSS do të kuptoni se po shtojmë një ID, klasa dhe, diçka që me siguri nuk e dinit; shumëzuesit ... çfarë është e gjithë kjo!? Qij ti më ngatërron!

Qetësohu, kjo është mjaft e thjeshtë, ne thamë më lart se brenda trupit futni një etiketë «ul», asgjë e çuditshme, unë e shpjegova këtë më lart, atëherë, ne caktuam një ID, që nëse dini CSS do të kuptoni se këto identifikohen me shenja '#', dhe brenda asaj liste të parenditur (ul) ne shtojmë pesë etiketa me klasën (klasën) listilla, unë e shpjegoj shkurtimisht këtë. Në fakt është shumë e thjeshtë, '#' tregon se është një ID, atëherë 'li.listilla' thotë se duhet të krijojmë një etiketë «li» me klasën «li class = listilla» dhe pastaj themi «përsëriteni atë pesë herë« Çfarë na jep si rezultat:

Dymbëdhjetë linja kodi të shkruara në një rresht të vetëm dhe në shumë më pak kohë

Dhe kjo mund të bëhet edhe me CSS, megjithëse nuk do ta zgjas artikullin duke treguar të qartë (më poshtë do t'ju kaloj një listë të plotë të mashtrimeve Kodimi i Zenit).

Më duhet të theksoj se kjo nuk funksionon për të bërë një zilind qindra mijëra rreshta në një, oh jo, kjo ka një kufi dhe një mënyrë për ta përdorur atë. Nëse për shembull ne duam të bëjmë diçka të tillë:

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

Çfarë në teori duhet të na e japë këtë (shikoni vijën e theksuar në imazhin e fundit):

Do të na japë këtë:

Gjë që tregon se as me këtë nuk mund të bësh magji; Mos harroni se një mjeshtër i kodit Zen duhet të jetë i saktë dhe i shpejtë, dhe bërja e gjërave të bëra gabimisht heq shpejtësinë dhe kohën, prandaj, teknika e saktë për të shkruar shpejt dhe me Kodimi i Zenit do te ishte kjo:

html>head>body>ul#lista_ordenada>li.listilla*5

Ju zgjeroni dhe brenda etiketës së kokës:

title+meta

Cili do t'ju jepte kodin e saktë:

Pse Kodimi i Zenit Ka shumë më tepër gjëra për t'ju treguar dhe mbase të mos shkruash një rresht tjetër komande brenda kokës nuk është më e mira, kështu që ne përdorim një komandë tjetër, «zgjerohet me shkurtim"në rastin tim ctrl + alt + e i cili do të hapë një shirit të vogël ku mund të shkruajmë kodin Zen dhe të shohim se si shfaqet në kohë reale. Bëni kujdes, unë nuk rekomandoj të shkruani gjithçka me këtë por të shkruani brenda strukturave të krijuara tashmë, dua të them, së pari krijoni struktura të mëdha dhe më pas do të detajoni brenda tyre me këtë opsion.

Dhe ka një mori të komandave super interesante brenda Kodimi i Zenit, puna është që ti i heton ata sapo t'i instalosh dhe të mësosh t'i përdorësh ato; Me këtë shtojcë nuk do të keni nevojë për plotësim automatik ose copëza për css ose html, në fakt, me këtë do të kuptoni se këto mundësi janë një humbje totale e kohës brenda këtyre dy gjuhëve të programimit

Dhe për ata që janë të interesuar, këtu është CheatSheet zyrtar i Kodimi i Zenit, ju mund ta shihni atë në format ODF o PDF e drejtë KETU