Lernu esti Zen-mastro pri markado

La markado aŭ markado rilatas al markado aŭ etikedaj lingvoj tiaj HTML kaj CSS, kaj ni ĉiuj scias kiom dolore ĉio ĉi estas malfermi kaj fermi etikedojn unu post la alia por krei retan ŝablonon ...

Kompreneble ekzistas solvoj por tio, unu el ili estas aŭtokompletigo kun IDE-aj Sonĝo fek Blugrifo ĝena se vi ne aĉetas aldonaĵojn de li o Komodo-redakto tre peza... La afero estas, ke IDE aŭ kodredaktiloj tro ŝarĝitaj kun ebloj ofte finas malhelpi la laboron laŭ neimageblaj manieroj; tia estas la kazo de Sonĝo tio plenigas vin per ruba kodo, kion vi generas grafike kaj estas peza, multekosta kaj malbela. Blugrifo ĝi plejparte ĝenas ĉar ĝi estas senpaga, senpaga, sed duono de la ebloj estas rezervitaj por pagataj uzantoj ... tio ne estas amuza. Kaj fine ni havas Komodo-redakti, kiu estas sufiĉe bona, potenca kaj plena de ebloj, sed ĝi estas peza (100mb en sencela) kaj aranĝi ĝin estas teda.

La plej bona armilo de interreta programisto aŭ interreta projektanto ne estas la IDE en la stilo de milita tanko kun mil armiloj supre, ĝi estas simpla tekstredaktilo, iuj aldonaĵoj kaj la kapablo tajpi kiel malsanulo ... al tio aldonu la magion de Zen-Kodigo kaj ili havos en siaj fingroj la plej bonan ilon por krei iam kreitan (almenaŭ por mi).

Sed ... kio diable estas Zen-Kodigo?

Simpla, ĝi estas speciala kromaĵo, kiu funkcias kiel faliga abstrakta tavolo por HTML kaj CSS kreitaj en Javascript kaj havebla al multaj el la plej famaj eldonistoj (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, ktp).

Aha, mi ankoraŭ ne komprenas diablan ideon, kion vi diras ...

Do mi montras al vi per simpla ekzemplo; Ĉu vi memoras la falmenstran aferon? Nu, ŝanĝu ĝin al ŝrumpado, imagu, ke vi povas preni linion de HTML / CSS-kodo disfalis en unu linion kaj disvolvi ĝin kiel kurtenon aŭ refaldi ĝin ... Ĉu vi volas vidi kiel? Vi nur devas certigi, ke vi havas du aferojn por funkciigi ĝin:

Havu Zen-Kodigo instalita en via redaktilo.
Sciu la komandojn kaj sintakson por uzi ĝin.

Bone, fingroj al la kodo:

html>head+body

Ĉu vi vidas tiun kodlinion? Nu, jen la sintakso por HTML, ĝi estas simpla:

Unue vi metu la nomon de la etikedo (html), poste vi indikas, kiuj etikedoj estos ene de tiu etikedo (>) kaj poste la nomon de la etikedoj, kiuj iras ene de tiu etikedo (kapo kaj korpo). La signo '+' indikas ke kapo kaj korpo estas du malsamaj etikedoj kaj ke neniu el ambaŭ estas enhavita en la alia, ĝi estas kiel diri «kune sed ne miksitaj«... Do ni vidu, kion generas tiu kodlinio premante la magiajn klavojn (en mia kazo CTRL + E):

Ĝuste, 4 linioj de kodo transformitaj en unu, kiuj magie aperas kiam vi premas la ĝustan klavokombinon ... kaj povas esti multaj pli; ekzemple:

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

Sama sintakso, sed ni aldonas ion alian ... se vi scias ion pri CSS, vi rimarkos, ke ni aldonas identigilon, klasojn kaj ion, kion vi certe ne sciis; multiplikantoj ... kio estas ĉio ĉi!? Fiku, vi konfuzas min!

Trankviliĝu, ĉi tio estas sufiĉe simpla, ni diris al la supre, ke ene de korpo enmetu etikedon «ul», nenio stranga, mi klarigis ĉi tion supre, tiam ni atribuas identigilon, ke se vi konas CSS, vi komprenos, ke ĉi tiuj estas identigitaj kun la signo '#', kaj ene de tiu senordigita listo (ul) ni aldonas kvin etikedojn kun la klaso (klaso) listilla, mi koncize klarigas ĉi tion. Fakte ĝi estas tre simpla, '#' indikas ke ĝi estas identigilo, tiam 'li.listilla' diras, ke ni devas krei etikedon «li» kun la klaso listilla «li class = listilla» kaj tiam, ni diras «ripetu tion lastajn kvin fojojn«. Kio donas al ni rezulte:

Dek du linioj de kodo skribitaj en unu linio kaj en multe malpli da tempo 😉

Kaj tion oni povas fari ankaŭ per CSS, kvankam mi ne plilongigos la artikolon montrante la evidentan (sube mi transdonos al vi tutan liston de trompantoj por Zen-Kodigo).

Mi devas emfazi, ke ĉi tio ne funkcias por krei miliardojn da cent mil linioj en unu, ho ne, ĉi tio havas limon kaj manieron uzi. Se ekzemple ni volas fari ion tian:

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

Kio teorie devas doni al ni ĉi tion (rigardu la reliefigitan linion en la lasta bildo):

Ĝi donos al ni ĉi tion:

Kio montras, ke vi ankaŭ ne povas fari magion per ĉi tio; Memoru, ke Zen-mastro de la kodo devas esti preciza kaj rapida, kaj fari malĝuste faritajn aferojn forprenas rapidon kaj tempon, do la ĝusta tekniko por skribi rapide kaj kun Zen-Kodigo estus ĉi tio:

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

Vi pligrandigas kaj ene de la ĉefetikedo:

title+meta

Kio donus al vi la ĝustan kodon:

Kvankam la Zen-Kodigo Ĝi havas multajn pliajn aferojn por montri al vi kaj eble devi skribi alian komandlinion ene de kapo ne estas la plej bona, do ni uzas alian komandon, «ekspansiiĝi ​​per mallongigo"en mia kazo ctrl + alt + e kiu malfermos malgrandan stangon, kie ni povas skribi Zen-kodon kaj vidi kiel ĝi aperas en reala tempo. Atentu, mi ne rekomendas skribi ĉion per ĉi tio sed skribi ene de la jam kreitaj strukturoj, mi volas diri, unue kreu la grandajn strukturojn kaj poste vi detaligos ene de ili per ĉi tiu opcio.

Kaj estas amaso da bonegaj komandoj en la Zen-Kodigo, la afero estas, ke vi esploras ilin post kiam vi instalas ilin kaj lernas uzi ilin; Kun ĉi tiu kromprogramo vi ne bezonos aŭtomatan kompletigon aŭ fragmentojn por css aŭ html, fakte per ĉi tio vi rimarkos, ke ĉi tiuj ebloj estas tuta tempoperdo en ĉi tiuj du programlingvoj 😉

Kaj por interesatoj, jen la oficiala Trompfolio de la Zen-Kodigo, vi povas vidi ĝin en ODF o PDF justa TIE