HTML kodovi znakova. Podsjetnik za korištenje BB kodova (bbCode) Povezivanje skripte za izvršavanje koda

Uvod

bbCode - Kod oglasne ploče ili označni jezik koji se koristi za formatiranje poruka na mnogim sustavima oglasnih ploča (BBS) i forumima. Oznake slične HTML oznakama koriste se za oblikovanje teksta. Za razliku od HTML oznaka, bbCode oznake su u uglastim zagradama. Prije prikazivanja stranice, mehanizam foruma analizira tekst i pretvara bbCode u HTML kod.

Na mnogim forumima, mogućnost korištenja BB kodova konfigurira administrator pojedinačno za svaki odjeljak foruma. Stoga, prije korištenja BB kodova u porukama, morate biti sigurni da su dopušteni.

Oblikovanje fonta

Osnovne oznake za rad s tekstom:

[p] Normalni paragraf s uvlakom.

Stavak koji se može stilizirati.
* U nastavku, "stil" je analog stila u HTML-u.
tekst je sličan u HTML-u

tekst

** Možete koristiti druge oznake s oznakama [p], kao što su [b], [i], [s] itd.

Tekst čija se svojstva mogu mijenjati pomoću stila.

Ograničeno područje koje se može stilizirati kako bi se promijenila njegova svojstva (položaj, granice, ispuna, svojstva sadržaja itd.).
* Prema zadanim postavkama, granice područja nisu vidljive. Na jednoj stranici može biti nekoliko područja odjednom.

Oblikovanje teksta:

[b] Važan tekst, podebljano

[i] Važan tekst, kurziv

Samo hrabro

Samo kurziv

[u] Podcrtani tekst

[s] Precrtani tekst - isto kao opcija

Manji font

Oznaka fusnote iznad ili indeks ispod teksta

Izbrisan tekst

Veličine fonta:

Font od 13 točaka

Font od 15 točaka

Veličina slova 9 piksela

Veličina slova 12 piksela

Veličina slova 15 piksela

Veličina 0

Veličina +1

Veličina +2

Dostupne su moguće opcije veličine fonta (vizualna procjena).

Naslovi:

Zaglavlje razine 1

Zaglavlje razine 2

Zaglavlje razine 3

Zaglavlje razine 4

Zaglavlje razine 5

Zaglavlje razine 6

Oblikovanje teksta pomoću fontova:

Font Comic Sans Ms

Font Monotype Corsiva

Tahoma font

Dostupne su moguće opcije za vrste fontova (nazivi i vizualna ocjena).

Ukrašavanje teksta bojom:

Crveni tekst
* Možete koristiti standardne verbalne oznake za boje: crvena, zelena, plava itd.

Plavi tekst
* Broj #0000ff označava plavu boju u RGB paleti.

Plava pozadina
* Boja pozadine također se može promijeniti.

Plavi tekst, siva pozadina

Neke unaprijed definirane boje:

Crna Bijela Crvena Zelena Plava Ljubičasta Vatrogasna opeka Kestenjasto NarančastaCrvena Ponoćnoplava RazličakPlava
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

Neke boje u heksadecimalnom kodu su intenzitet crvene, zelene i plave (RR GG BB):

#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE # 006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF

Dostupne su moguće opcije za paletu boja i njihovi kodovi/nazivi.

Poravnavanje teksta i oblikovanje odlomaka

Poravnanje teksta:

Poravnajte tekst lijevo

Lijevo poravnanje sa stilom

Lijevo poravnanje u odlomku

Središnje poravnanje teksta

Središnje poravnanje sa stilom

Središnje poravnanje u odlomku

Poravnajte tekst udesno

Pravo poravnanje sa stilom

Poravnanje u odlomku udesno

Poravnajte tekst s obje strane

Poravnajte s obje strane sa stilom

Poravnanje u odlomku s obje strane
* Poravnanje tekstova s ​​obje strane prikazuje se za tekstove koji su duži od jednog retka.

Oblikovanje fusnota (komentara) s uvlačenjem odlomka:

[q] Citat u redu

Ponuda u skladu s nekretninama

Tekst citiran u zasebnom bloku, koji će imati
mala uvlaka s lijeve strane i poseban dizajn (forum stil).

Primjeri:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Oblikovanje odlomaka i područja:

Zdravo! U ovom paragrafu, prva rečenica će biti iz "crvenog" retka, tj. uvučen. Baš kao u tiskarstvu knjiga. Istina, to je rijetka praksa na internetu. Odlomci trebaju biti odvojeni jednostavnim prazninama.

Prethodno formatirani tekst održava uvlaku s lijeve strane i između riječi te postavlja uvlaku koju odredite razmacima. Upozorenje! Oznaka ne prekida liniju automatski!

Oblikovanje popisa

Koristimo oznaku ili za popise s grafičkim oznakama:

• Jedna od stavki popisa
• Još jedan takav predmet
• Još jedna točka.

[*] Još jedna takva stavka
[*] Još jedna točka.

Za numerirane liste koristimo oznaku:

Jedna od stavki popisa

Još jedan takav predmet

Još jedna točka.

[*] Jedna od stavki popisa
[*] Još jedna takva stavka
[*] Još jedna točka.

Nije potrebno koristiti završnu oznaku:

• Jedna od stavki popisa
• Još jedan takav predmet
• Još jedna točka.

[*] Jedna od stavki popisa
[*] Još jedna takva stavka
[*] Još jedna točka.

Također je moguće izravno odrediti vrstu popisa:
- numerirani popis
- abecedni popis
- popis označen rimskim brojevima

Slike

Http://img.cx/img/primer.jpg - primjer umetanja slike.

Http://img.cx/img/primer.jpg - slika lijevo.

Http://img.cx/img/primer.jpg - slika desno.
* Ovaj kod je sličan kodu u HTML-u:

Http://img.cx/img/primer.jpg - slika u sredini.
* Ovaj kod je sličan kodu u HTML-u:

Slične oznake s imenima i opisima alata:

Važno! Ne možete koristiti navodnike u naslovu slike!

Http://img.cx/img/primer.jpg - primjer umetanja slike.

Http://img.cx/img/primer.jpg - slika lijevo.

Http://img.cx/img/primer.jpg - slika desno.

Http://img.cx/img/primer.jpg - slika u sredini.

Slike sa naznačenim veličinama:

Http://img.cx/img/primer.jpg - primjer slike s veličinom.
* Ovaj kod je sličan kodu u HTML-u:

Http://img.cx/img/primer.jpg - slika lijevo, s veličinom.

Http://img.cx/img/primer.jpg - slika desno, s veličinom.

Umetanje velikih slika s trakama za pomicanje:

Http://www..jpg - slika u odabranom području ako je veća od dostupne veličine prikaza na forumu.

Adresa - otvorite sliku u novom prozoru.
* Ovaj kod je sličan kodu u HTML-u:

Adresa - otvorite sliku u istom prozoru.
* Ovaj kod je sličan kodu u HTML-u:

Dragi prijatelji! Danas ćemo govoriti o oznaci HTML koda. Prilikom pisanja ovog konkretnog članka ili bilo kojeg drugog materijala za obuku, povremeno je potrebno umetnuti dijelove HTML, CSS koda i općenito bilo kojeg programskog koda.

Mislim da ste već pogodili čemu služi oznaka HTML koda. Preko njega kažemo pregledniku: "Molim vas, prikažite sve što će biti smješteno unutar spremnika "koda" kao tekst."

…

U suprotnom, preglednik neće razumjeti gdje je pravi kod, a gdje demo kod i neće ništa prikazati. Budući da preglednik percipira sve oznake na stranici kao naredbe za prikaz sadržaja. Drugim riječima, pomoću oznake HTML koda, same oznake se prikazuju u prozoru preglednika kako bi se prikazao HTML kod.

Pogledajmo primjer prikazivanja oznaka na stranici ispod:

Prikazivanje oznaka na stranici

isječak HTML koda

Ovo je naslov.

Ovo je paragraf.

Pogledajmo rezultat ovog primjera:

Kutne zagrade< >treba zamijeniti posebnim znakovima &.. i rastaviti svaki red oznakama br ili p.

Prema zadanim postavkama, preglednici prikazuju sadržaj oznake HTML koda u fontu s jednim razmakom. Ovo je manji font fiksne veličine.

kod (
obitelj-fontova: monospace;
}

Ovo je uobičajeni tekst:

Ovo je dio programskog koda

Ovako to izgleda u zadanom pregledniku:

Redefinirajmo sada izgled koda unutar oznake koda. Postavimo obitelj fontova elementa: verdana; ili bilo koji drugi font.

kod (
obitelj-fontova: verdana;
}

Ovo je uobičajeni tekst:

Ovo je dio programskog koda

Navedeni stil u pregledniku.

Usput, dijeljenje svojih pozitivnih ili čak negativnih iskustava s čitateljima temelj je uspješnog bloganja (i).

Mnogi ljudi imaju problema, pa su takve informacije tražene.

Kako prikazati programski kod

Dakle, želite dopustiti čitateljima da kopiraju skriptu ili html kod i smjeste ga u tijelo posta. Ne tako. Kako ga ispisati bez pretvorbe?

U novije vrijeme, kako bi se oznake ispravno prikazale na stranici, predloženo je ručno mijenjanje znakova< и >za posebne znakove< и >.

Danas WordPress engine najčešće zna sam raditi takve transformacije, ali i dodaje gomilu smeća, iskrivljuje, skraćuje kod, čini ga nečitljivim ili nepreslikavim (dogodilo se u mojoj temi).

Zapravo, postoji nekoliko načina za lijepo formatiranje HTML koda i njegovo umetanje u post s isticanjem sintakse: bez dodatka i korištenjem WordPress dodataka za kôd.

Ja ću navesti metode, a vi probajte što vam odgovara. Iz vlastitog sam iskustva naučio da nema svaki predložak oznake i dodatke koji rade na isti način. Za više informacija o tome kako pravilno prikazati kod, pogledajte HTML vodič.

Prikaži html kod na stranici kao tekst. Označiti

Prikažite html kod na stranici kao tekst, oznake ga ističu

Napišite kod u VIZUALNOM UREĐIVAČU.

Idi na HTML MODE, dodaj oznaku za otvaranje i zatvaranje. Moja tema već ima automatske znakove< >pretvoren u posebne znakove< и >.

UŠTEDJETI. NEMOJTE ponovno prelaziti na vizualni način rada, inače će se promjene izgubiti.

Svi prostori su SAČUVANI kada su prikazani. U svom predlošku dobio sam sljedeći rezultat (vaš prikaz može biti drugačiji).

Kako prikazati html kod na stranici objave kao tekst. Označiti

Oznaka također omogućuje prikaz jednog ili više redaka programskog koda. Razmaci i prekidi se NE uzimaju u obzir, prelomite retke oznakama

Ili
.

Učinite sve na isti način kao umetanje oznake.

Prikaži html kod na stranici kao tekst. Označiti

Ako čitateljima rijetko nudite kodove, možete koristiti ovaj dizajn.

OVDJE UNESITE SVOJ KOD

Pomaže pri prikazivanju kodova ili skripti u obliku teksta zatvorenog u okvir, UZIMAJUĆI U OBZIR oblikovanje i sve crtice.

Kod će biti prikazan u lijepom okviru. Uredite njegovu širinu promjenom parametra širine, visina - visina.

Ali činjenica je da se KODOVI koji koriste oznaku smatraju NEVAŽEĆIM. HTML vodič predlaže umetanje ove oznake samo u ovom obliku.

Dodaci za prikaz koda na stranici objave

Većina blogera koristi WordPress dodatke za lijep i dosljedan prikaz HTML kodova na stranici s objavama. Opet, postoji mnogo dodataka, ali samo je jedan radio ispravno za mene.

Ja ću dati popis, a vi ćete odabrati dodatak koji radi s vašim predloškom.

Slatki par WP-Sintaksa – ističe kod okvirom i omogućuje isticanje sintakse. Plus gumb wp-sintakse – prikazuje gumb u administratorskoj ploči bloga, pruža mogućnost umetanja HTML koda ili skripte bez pretvaranja u poseban prozor. Nedostatak: sve se radnje izvode u html načinu rada; ne možete se prebaciti na vizualni način rada, inače će sve promjene nestati.

Sažimanje isticanja sintakse – prikazuje dodatni gumb u uređivaču teksta. Kliknite na nju, otvara se prozor u koji možete unijeti kod i odabrati programski jezik.

Ostali dodaci rade na isti način.

• Bolja WordPress sintaksa
• Wp-highlight.js
• Označivač sintakse
• Automatski označivač sintakse (moje). I mnogi drugi dodaci.

Morao sam instalirati i aktivirati sve jedno po jedno dok nisam pronašao ono što radi u mom predlošku.

Zaključak

Dakle, iz članka ste naučili kako možete prikazati HTML kod na stranici objave pomoću oznaka ili dodataka. Koju metodu koristite za umetanje html oznaka u običan tekst bez konverzije?

HTML posebni znakovi kratki su dijelovi koda koji se nazivaju znakovni entiteti. Koriste se za prikaz znakova koji imaju posebno značenje u HTML-u, kao i znakova koji nisu dostupni na tipkovnici.

Posebni znakovi u HTML-u nazivaju se rezervirani znakovi. Na primjer, lijeve () uglaste zagrade rezervirane su u HTML-u za definiranje početnih i završnih oznaka.

Simboli koji nisu dostupni na tipkovnici uključuju znakove kao što su simbol autorskih prava (©) i matematička vrijednost pi.

Ako ih želimo koristiti u dokumentu i prikazati u pregledniku, moramo koristiti reference znakova HTML.

Studija slučaja

Recimo da želite prikazati blok HTML koda na web stranici i prikazati oznake elemenata. To možete učiniti jednostavnim postavljanjem HTML bloka unutar . Ali vidjet ćete da će čak iu , blok i dalje biti tretiran kao HTML kod i prikazan u skladu s tim u pregledniku. U tom slučaju možete zamijeniti sve posebne HTML znakove odgovarajućim simboličkim vezama kako biste spriječili preglednik da analizira kod:

Ovo je popis stavki.

• Stavka popisa A
• Stavka popisa B
• Stavka popisa C