Inserarea codului html într-o pagină. Cum să adăugați propriul cod HTML? Inserarea unui fragment HTML pe o pagină separată

Metoda de inserare a codului html variază ușor în funcție de locul exact în care trebuie să-l inserați. În conformitate cu aceasta, vom lua în considerare diferite opțiuni.

Pentru a introduce codul html în site și în special în textul unui articol de pe una dintre paginile site-ului, accesați panoul administrativ, selectați și deschideți pentru editare articolul dorit. Apoi, modul editor vizual trebuie schimbat în modul de editare. Când lucrați cu un sistem CMS, faceți clic pur și simplu pentru a schimba modul. Apoi copiați și inserați codul html în locația planificată.

Adesea, după inserare, doriți să formatați puțin codul, de exemplu, setați textul să se înfășoare în jurul codului de pe cealaltă parte. Există o modalitate simplă de a face acest lucru folosind proprietățile CSS.

Folosind eticheta ..., împachetați codul într-un container. Puteți face acest lucru și folosind etichete formă tabelară. Și în interiorul acestui container, utilizați proprietatea „style” pentru a seta toate atributele dorite.

Așa că atunci când salvezi un articol editor vizual nu a tăiat modificări care, în opinia sa, nu sunt cod html la introducerea codului, este mai bine să-l dezactivați. Eliminarea modificărilor de către editor este concepută pentru a preveni amenințarea unui posibil cod rău intenționat.

Cum se dezactivează editorul vizual?

ÎN panoul administrativ faceți clic pe „Site” - „ Setări generale" - "Site" și în linia "Editor vizual" selectați "Fără editor". Acum va fi posibil să editați și să inserați codul html în modul cod html. După ce lipiți codul și salvați modificările, editorul vizual poate fi activat din nou.

Dacă doriți să reeditați articolul, va trebui reintrodus și codul html. Uneori se cere ca codul html sa fie afisat pe fiecare dintre paginile site-ului. Inserarea codului HTML astfel încât să apară pe fiecare pagină a site-ului.

Pentru a rezolva această problemă, utilizați Notepad sau alt editor pentru a introduce fișierul site-ului principal (în mod implicit acesta este index.php sau index.html). ÎN deschide fișierul selectați locația preferată pentru a lipi codul. Pentru comoditate, puteți seta o frază în căutarea situată în locul în care trebuie să introduceți codul, astfel încât să o găsiți mai repede. Apoi copiați codul și inserați-l în locația dorită. Dacă este necesar, codul poate fi formatat în același mod în care a fost descris pentru formatarea codului în articol.

Doriți să postați un cod cu un fel de soluție sau instrucțiune pe site-ul dvs. web, dar aveți probleme cu acesta? Aflați cum să faceți totul corect și afișați codul așa cum apare în editorul de cod.

S-ar părea că nu sarcină dificilă- introduceți codul, dar pot apărea dificultăți dacă nu cunoașteți unele dintre regulile care vor fi discutate.

Lipiți codul ca cod

Pentru a insera codul într-un site web, acesta este împachetat în etichete AND. Rezultă următoarea construcție:

Iată codul

Pentru a explica pe scurt și la obiect, în acest design, eticheta de cod îi spune browserului ce se află în interiorul ei codul programului, iar eticheta anterioară păstrează întreruperile de linie, filele de rând (indentări) și spațiile.

Se pare că totul este clar și nu este nimic complicat, dar problema este că dacă vrei să introduci cod html sau cod care conține caractere< , >, & , " , ` , atunci pot apărea probleme - browserul va procesa codul dvs. ca HTML. De exemplu, dacă doriți să afișați codul unui formular cu un buton, câmpuri de introducere etc. în cod, browserul va afișați formularul și nu codul acestuia.

Escape cod

Pentru a preveni acest lucru, ei fac așa-numita evadare a codului - acesta este momentul în care caracterele menționate mai sus sunt înlocuite cu codurile lor UTF.

Schemă pentru înlocuirea caracterelor cu coduri UTF

Mai jos sunt simbolurile și codurile care le înlocuiesc:

Desigur, nimeni nu înlocuiește simbolurile manual - acest lucru se face prin programare. Cel mai accesibil instrument pentru aceasta este evadarea codului online, unde într-o clipă toate caracterele vor fi înlocuite, iar codul va păstra toate spațiile și cratimele și va fi complet gata pentru inserarea în construcția etichetei.

Drept urmare, după evadare, puteți introduce orice bucată de cod. Puteți vedea un exemplu de astfel de inserare după ce ați evadat codul de mai jos:

Titlu

Postări înrudite

Mai mult, aș dori să clarific imediat că vom introduce codul în articolul propriu-zis, astfel încât cititorii noștri să îl poată copia fără a pierde timpul tastând textul în sine. Astfel, vom crește confortul () resursei noastre - de data aceasta. Iar articolele vor arăta mai profesionale și mai complete - sunt două.

De asemenea, aș dori să menționez că informațiile din acest articol vor fi utile persoanelor care fie, după cum vă spunem, cum să facă diferite tipuri de completări pe site, fie utilizatorilor cărora le place pur și simplu să partajeze informatii utile. Și nu contează că această informație este cod :) Apropo, vă spun un mic secret: acest proiectîl afișam folosind plugin-ul Wp-Syntex.

Puteți întreba: „De ce îl folosim?” Răspunsul este simplu - nu există tovarăși după gust și culoare. Glumă. De fapt, am ales acest plugin pentru că este ușor de utilizat, adaugă perfect stil vizual diverselor tipuri de limbaje de programare (css, html, java, javascript, perl, sql etc.), și nu supraîncărcă serverul nostru .

Ei bine, din moment ce am lăsat să scape despre Wp-Syntex, să folosim exemplul său pentru a arăta cum să inserăm cod în articolele de pe WordPress.

Mai întâi trebuie să instalați acest plugin. Am vorbit despre cum să facem acest lucru în articolul despre. Prin urmare, descrieți această acțiune Nu voi sta aici.

Ca rezultat, veți vedea următoarele:

Codul pe care doriți să fie scos

De asemenea, în loc de php în acest cod, puteți introduce un alt limbaj de programare, de exemplu css sau java. În același timp, stilul de design aspect se va schimba.

Caracteristici suplimentare ale Wp-Syntex

Dacă adăugați un atribut de linie la eticheta de deschidere „pre”, codul pe care trebuie să îl introduceți va începe astfel:

Codul pe care doriți să fie scos

Sper că observați diferența?

Mai există un mic atribut de care ai putea avea nevoie - scăpat. Vă permite să convertiți codurile html ale caracterelor direct în caracterele în sine. De exemplu, convertește „>” în „>”. Pentru a face bani această funcție, în eticheta de deschidere „pre”, introduceți următorul atribut:

scapat="true"

În consecință, eticheta va începe astfel:

< pre lang= "php" line= "1" escaped= "true" >

De asemenea, am găsit informații pe Internet că puteți instala un alt plugin (WP-Syntax Button), care funcționează împreună cu pluginul nostru și adaugă un buton de inserare a codului în editorul WP. Nu am fost prea leneș și am decis să-l testez.

Imediat când l-am instalat, m-a alarmat faptul că nu a fost actualizat de destul de mult timp și nu a fost testat cu versiunea noastră de WordPress. Ei bine, ce să spun, temerile mele erau justificate.

După activarea butonului WP-Syntax, am decis să încerc să inserez un script java într-unul dintre articolele noastre. Am făcut totul așa cum este indicat în muntele de instrucțiuni și recomandări. Am inserat scriptul în articol, l-am selectat și am apăsat butonul „cod”.

Apoi a indicat limbajul de programare și numărul liniei de la care ar trebui să înceapă ieșirea scriptului.

Poate vă întrebați de ce am scris despre acest experiment în acest articol? Prin aceasta, am vrut să spun că atunci când căutați câteva informații pe Internet, fiți atenți la data publicării. La urma urmei, există o probabilitate foarte mare ca informațiile din articolul vechi să fie relevante acum câțiva ani și în acest moment pur și simplu nu funcționează, iar utilizarea sau implementarea sa poate lăsa proiectul dumneavoastră vulnerabil.

Pe blogul nostru, încerc să țin tot materialul la zi, să monitorizez constant actualizările și, dacă este necesar, să fac ajustări la articolele deja scrise.

Daca vrei sa primesti informații actualizate la locul tau e-mail, atunci il recomand.

Videoclipul „Cum să inserați codul HTML într-un articol”

Prieteni, dacă cineva preferă să vadă cum se face asta, atunci am înregistrat un videoclip pentru voi. Și vă reamintesc că avem și un canal de YouTube, la care vă puteți abona și voi.

Articole înrudite:

Ei bine, sper că articolul nu a fost complicat și am putut să vă spun în detaliu cum puteți introduce cod html într-un site web fără bătăi de cap inutile.

Nu neglijați estetica blogului dvs. La urma urmei, cititorul nostru, ca și în viață, te întâlnește după hainele lui și te vede departe de mintea lui.

Asta e tot pentru mine!

Pa! Pa!

Cu stimă, Kalmykov Anton

Știți care este unul dintre principalele avantaje ale editorului Wix? Faptul este că oferă tuturor oportunitatea fără a necesita cunoștințe speciale în programare. Aceasta este o platformă foarte simplă și intuitivă în care puteți adăuga, șterge, muta și edita cu ușurință orice elemente fără a atinge o singură linie de cod.

Dar ce se întâmplă dacă trebuie să adăugați o funcție pe site-ul dvs. care nu este furnizată în editorul Wix? Doar pentru asta, am dezvoltat un widget HTML aparent simplu, dar de fapt mega-funcțional, despre care vă vom spune astăzi. Folosind o aplicație HTML, puteți adăuga literalmente totul pe site-ul dvs. (cu excepția poate - nota editorului), inclusiv orice tip de conținut, widget-uri și aplicații terță parte.

Ce fel de aplicație HTML este aceasta?

Să facem o paralelă cu creativitatea pentru claritate. Imaginează-ți că faci un colaj. Așadar, o aplicație HTML este un lucru prin care poți insera ușor și rapid orice imagine dorești în colajul tău.

O „imagine”, adică un element inline, poate ocupa întreaga pagină a site-ului dumneavoastră sau o parte a acesteia și poate fi amplasată lângă alte secțiuni, imagini sau text. Puteți schimba cu ușurință poziția elementelor, le puteți mări sau reduce - în general, faceți tot ce faceți de obicei în editorul Wix.

Aplicația HTML poate fi utilizată în două moduri:

Pentru încorporarea site-urilor web prin iframe. Potrivit pentru adăugarea de pagini din alte resurse. Acesta ar putea fi un articol Wikipedia sau un profil IMDB publicat integral pe site-ul dvs. web.

Pentru a încorpora codul HTML. Este folosit în cazurile în care doriți să instalați pe site-ul dvs. un widget care nu se află printre aplicațiile din .

Pentru a înțelege mai bine cum funcționează, vă sugerăm să urmăriți un scurt tutorial video despre adăugarea codului HTML în editorul Wix:

Utilizări interesante ale codului HTML pe un site web

Aplicația HTML este un lucru foarte util. Iată un exemplu de listă cu ceea ce puteți adăuga pe site-ul dvs. folosindu-l:

Playere audio și video și liste de redare. Aproape toate resursele cu conținut media vă permit să îl încorporați pe alte site-uri.

Posibilitatea de a plasa propriul cod HTML este prezentă numai pe . Această funcționalitate este destinată celor care sunt experimentați profesional în web, au nevoie de funcții avansate și știu exact ce vor face cu ele.

Atenţie!

Lucrul cu acest widget necesită cunoștințe de HTML, CSS și JavaScript. Scrierea codului cu erori poate duce la operare incorectăși afișarea site-ului.

Puteți plasa codul HTML:

Important:

Site-ul trebuie publicat pentru ca modificările să intre în vigoare.

Lucrul cu scripturi jQuery

Dacă doriți să utilizați scripturi jQuery pe site-ul dvs., atunci acest lucru trebuie făcut într-un mod special, deoarece biblioteca jQuery este inclusă în uKit într-un mod nestandard. Toate scripturile jQuery ar trebui să fie plasate în panoul de control al site-ului dvs. în secțiunea „Cod personalizat”. În acest caz, codul trebuie plasat „La sfârșit”. Toate scripturile dvs. ar trebui să fie împachetate cu biblioteca require.js astfel:

necesită(["jquery"], funcție ($) (
Codul dvs. scris în jQuery
})