html-koodi sisestamine lehele. Kuidas lisada oma HTML-koodi? HTML-i fragmendi lisamine eraldi lehele

Html-koodi sisestamise meetod varieerub veidi sõltuvalt sellest, kuhu see täpselt sisestada tuleb. Sellest lähtuvalt kaalume erinevaid võimalusi.

HTML-koodi sisestamiseks saidile ja eriti mõne saidi lehe artikli teksti, minge halduspaneelile, valige ja avage redigeerimiseks soovitud artikkel. Järgmisena tuleb visuaalse redaktori režiim muuta redigeerimisrežiimiks. CMS-süsteemiga töötades klõpsake lihtsalt režiimi muutmiseks. Seejärel kopeerige ja kleepige html-kood kavandatud asukohta.

Tihti soovitakse pärast sisestamist koodi veidi vormindada, näiteks panna tekst ümber koodi teisele poole jääma. Seda saab teha lihtsal viisil, kasutades CSS-i atribuute.

Märgi ... abil mässige oma kood konteinerisse. Seda saate teha ka siltide abil tabelivorm. Ja selles konteineris kasutage kõigi soovitud atribuutide määramiseks atribuuti "style".

Nii et artikli salvestamisel visuaalne redaktor ei lõiganud koodi sisestamisel välja muudatusi, mis tema arvates ei ole html-kood, parem on see keelata. Toimetaja muudatuste lõikamine on mõeldud võimaliku pahatahtliku koodi ohu vältimiseks.

Kuidas visuaalset redaktorit keelata?

IN halduspaneel klõpsake "Sait" - " Üldised seaded" - "Sait" ja real "Visuaalne redaktor" valige "Redaktor puudub". Nüüd on võimalik html koodi režiimis redigeerida ja sisestada. Pärast koodi kleepimist ja muudatuste salvestamist saab visuaalse redaktori uuesti lubada.

Kui soovite artiklit uuesti redigeerida, tuleb uuesti sisestada ka html-kood. Mõnikord nõutakse HTML-koodi kuvamist saidi igal lehel. HTML-koodi sisestamine nii, et see ilmuks saidi igal lehel.

Selle probleemi lahendamiseks kasutage saidi põhifaili sisestamiseks Notepadi või mõnda muud redaktorit (vaikimisi on see index.php või index.html). IN avatud fail valige koodi kleepimiseks eelistatud asukoht. Mugavuse huvides saate määrata otsingusse fraasi, mis asub kohas, kuhu peate koodi sisestama, nii leiate selle kiiremini. Seejärel kopeerige kood ja kleepige see soovitud asukohta. Vajadusel saab koodi vormindada samamoodi, nagu kirjeldati artiklis koodi vormindamisel.

Kas soovite oma veebisaidile postitada koodi koos mingi lahenduse või juhistega, kuid kas teil on sellega probleeme? Siit saate teada, kuidas kõike õigesti teha, ja kuvage kood nii, nagu see koodiredaktoris kuvatakse.

Näib, et mitte raske ülesanne- sisestage kood, kuid raskused võivad tekkida, kui te ei tea mõnda reeglit, mida arutatakse.

Kleebi kood koodina

Koodi veebisaidile sisestamiseks mähitakse see siltidesse JA. Selle tulemuseks on järgmine konstruktsioon:

Siin on kood

Lühidalt ja konkreetselt selgitades, selle kujunduse puhul annab koodisilt brauserile teada, mis selle sees on programmi kood, ja eelsilt säilitab reavahetused, rea tabeldusmärgid (taanded) ja tühikud.

Tundub, et kõik on selge ja midagi keerulist pole, kuid probleem on selles, et kui soovite sisestada html koodi või märke sisaldavat koodi< , >, & , " , ` , siis võivad tekkida probleemid - brauser töötleb teie koodi HTML-ina Kui soovite näiteks koodis kuvada nupuga vormi koodi, sisestusvälju vms, siis brauser kuvab vormi, mitte selle koodi.

Põgenemiskood

Et seda ei juhtuks, teevad nad niinimetatud koodi põgenemist – see on siis, kui ülalmainitud märgid asendatakse nende UTF-koodidega.

Skeem märkide asendamiseks UTF-koodidega

Allpool on neid asendavad sümbolid ja koodid:

Loomulikult ei asenda keegi sümboleid käsitsi – seda tehakse programmiliselt. Kõige ligipääsetavam tööriist selleks on võrgukoodi põgenemine, kus hetkega asendatakse kõik märgid ning kood säilitab kõik tühikud ja sidekriipsud ning on täielikult valmis sildi ehitusse sisestamiseks.

Selle tulemusena saate pärast põgenemist sisestada mis tahes koodilõigu. Pärast allolevast koodist põgenemist näete sellise sisestuse näidet:

Pealkiri

Seonduvad postitused

Lisaks tahaksin kohe täpsustada, et sisestame koodi artiklisse endasse, et meie lugejad saaksid seda kopeerida ilma teksti enda tippimisele aega raiskamata. Seega suurendame oma ressursi mugavust () - seekord. Ja artiklid näevad välja professionaalsemad ja terviklikumad – see on kaks.

Samuti tahaksin märkida, et selles artiklis sisalduv teave on kasulik inimestele, kes, nagu me teile ütleme, kuidas saidile mitmesuguseid täiendusi teha, või kasutajatele, kellele meeldib lihtsalt jagada. kasulik informatsioon. Ja see pole oluline, et see teave on kood :) Muide, ma ütlen teile väikese saladuse: see projekt kuvame selle Wp-Syntexi pistikprogrammi abil.

Võite küsida: "Miks me seda kasutame?" Vastus on lihtne – maitse ja värvi järgi pole kaaslasi. Nali. Tegelikult valisime selle pistikprogrammi, kuna seda on lihtne kasutada, see lisab suurepäraselt visuaalse stiili erinevat tüüpi programmeerimiskeeltele (css, html, java, javascript, perl, sql jne) ega koorma meie serverit üle .

Noh, kuna ma lasin Wp-Syntexi kohta libiseda, kasutame selle näidet, et näidata, kuidas WordPressi artiklitesse koodi sisestada.

Kõigepealt peate installima selle pistikprogrammi. Sellest, kuidas seda teha, rääkisime artiklis. Seetõttu kirjeldage see tegevus Ma ei seisa siin.

Selle tulemusena näete järgmist.

Kood, mida soovite väljastada

Samuti saate selles koodis php asemel sisestada mõne muu programmeerimiskeele, näiteks css või java. Samal ajal disainistiil välimus muutub.

Wp-Syntexi lisafunktsioonid

Kui lisate avatavale "pre" märgendile reaatribuudi, algab sisestatav kood järgmiselt:

Kood, mida soovite väljastada

Loodetavasti märkate erinevust?

Võimalik, et vajate veel ühte väikest atribuuti – vältige. See võimaldab teil teisendada tähemärkide html-koode otse tähemärkideks. Näiteks teisendab see ">" täheks ">. Selleks, et raha teenida seda funktsiooni, sisestage avatavasse märgendisse "pre" järgmine atribuut:

põgenenud = "true"

Sellest lähtuvalt algab silt järgmiselt:

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

Internetist leidsin ka infot, et saab installida veel ühe plugina (WP-Syntax Button), mis töötab koos meie pluginaga ja lisab WP redaktorisse koodi sisestamise nupu. Ma ei olnud liiga laisk ja otsustasin seda katsetada.

Kohe seda installides tegi mulle ärevaks tõsiasi, et seda polnud päris pikka aega uuendatud ja meie WordPressi versiooniga testitud. No mis ma oskan öelda, mu kartused olid õigustatud.

Pärast WP-süntaksi nupu aktiveerimist otsustasin proovida ühte meie artiklitest Java-skripti sisestada. Tegin kõik nii, nagu juhiste ja soovituste mäel näidatud. Kleepisin skripti artiklisse, valisin selle ja vajutasin nuppu "kood".

Seejärel näitas ta programmeerimiskeele ja rea ​​numbri, millest skripti väljund peaks algama.

Võib-olla küsite, miks ma sellest katsest selles artiklis kirjutasin? Sellega tahtsin öelda, et kui otsite Internetist teavet, pöörake tähelepanu avaldamise kuupäevale. Lõppude lõpuks on väga suur tõenäosus, et vanas artiklis sisalduv teave oli asjakohane mitu aastat tagasi ja Sel hetkel see lihtsalt ei tööta ja selle kasutamine või rakendamine võib teie projekti haavatavaks muuta.

Meie blogis püüan hoida kogu materjali ajakohasena, jälgida pidevalt uuendusi ja vajadusel juba kirjutatud artiklites kohendusi teha.

Kui soovite saada ajakohast teavet sinu kohale email, siis ma soovitan seda.

Video "Kuidas lisada artiklisse HTML-koodi"

Sõbrad, kui keegi eelistab näha, kuidas seda tehakse, siis salvestasin teile video. Ja tuletan meelde, et meil on ka YouTube'i kanal, mida saab ka tellida.

Seotud artiklid:

Loodan, et artikkel polnud keeruline ja sain teile üksikasjalikult rääkida, kuidas saate HTML-koodi veebisaidile ilma tarbetute probleemideta sisestada.

Ärge jätke tähelepanuta oma ajaveebi esteetikat. Lõppude lõpuks, meie lugeja, nagu elus ikka, kohtab sind riiete järgi ja vaatab sind mõistuse järgi.

See on minu jaoks kõik!

Headaega!

Lugupidamisega Kalmõkov Anton

Kas teate, mis on Wixi redaktori üks peamisi eeliseid? Fakt on see, et see annab kõigile võimaluse ilma programmeerimise eriteadmisi nõudmata. See on väga lihtne ja intuitiivne platvorm, kus saate hõlpsasti lisada, kustutada, teisaldada ja muul viisil redigeerida mis tahes elemente ilma ühtki koodirida puudutamata.

Aga mis siis, kui peate oma saidile lisama funktsiooni, mida Wixi redaktoris pole? Just selleks oleme välja töötanud pealtnäha lihtsa, kuid tegelikult megafunktsionaalse HTML-vidina, millest täna räägime. HTML-rakendust kasutades saate oma saidile lisada sõna otseses mõttes kõike (välja arvatud ehk – toimetaja märkus), sealhulgas mis tahes tüüpi kolmanda osapoole sisu, vidinaid ja rakendusi.

Mis tüüpi HTML-rakendus see on?

Toome selguse huvides paralleeli loovusega. Kujutage ette, et teete kollaaži. Niisiis, HTML-rakendus on asi, millega saate hõlpsalt ja kiiresti oma kollaaži lisada mis tahes teile meeldiva pildi.

"Pilt", st tekstisisene element, võib hõivata kogu teie saidi lehe või osa sellest ja asuda teiste jaotiste, piltide või teksti kõrval. Saate hõlpsasti elementide asukohta muuta, neid suurendada või vähendada – üldiselt tehke kõike, mida tavaliselt Wixi redaktoris teete.

HTML-i rakendust saab kasutada kahel viisil:

Veebisaitide manustamiseks iframe'i kaudu. Sobib lehtede lisamiseks muudest ressurssidest. See võib olla Wikipedia artikkel või IMDB profiil, mis on täielikult avaldatud teie veebisaidil.

HTML-koodi manustamiseks. Seda kasutatakse juhtudel, kui soovite oma veebisaidile installida vidina, mis pole rakenduses .

Selle toimimise paremaks mõistmiseks soovitame vaadata lühikest videoõpetust HTML-koodi lisamise kohta Wixi redaktoris:

HTML-koodi lahedad kasutusvõimalused veebisaidil

HTML-rakendus on väga kasulik asi. Siin on näidisloend sellest, mida saate seda kasutades oma saidile lisada.

Heli- ja videopleierid ning esitusloendid. Peaaegu kõik meediumisisuga ressursid võimaldavad teil seda teistele saitidele manustada.

Oma HTML-koodi paigutamise võimalus on olemas ainult . See funktsioon on mõeldud neile, kes on veebiga professionaalselt kursis, vajavad täiustatud funktsioone ja teavad täpselt, mida nad nendega teevad.

Tähelepanu!

Selle vidinaga töötamine nõuab HTML-i, CSS-i ja JavaScripti tundmist. Vigadega koodi kirjutamine võib põhjustada vale toimimine ja saidi kuvamine.

Saate oma HTML-koodi panna:

Tähtis:

Muudatuste jõustumiseks tuleb sait avaldada.

Töötamine jQuery skriptidega

Kui soovite oma saidil kasutada jQuery skripte, tuleb seda teha erilisel viisil, kuna jQuery teek sisaldub uKiti mittestandardsel viisil. Kõik jQuery skriptid tuleks paigutada teie saidi juhtpaneeli jaotisesse „Kohandatud kood”. Sel juhul tuleb kood paigutada "Lõpus". Kõik teie skriptid peaksid olema pakitud teekiga request.js järgmiselt:

nõuda(["jquery"], funktsioon ($) (
Teie kood on kirjutatud jQuerys
})