HTML символни кодове. Напомняне за използване на BB кодове (bbCode) Свързване на скрипт за изпълнение на код

Въведение

bbCode - Код на табло за обяви или език за маркиране, използван за форматиране на съобщения в много системи за табла за обяви (BBS) и форуми. Тагове, подобни на HTML таговете, се използват за форматиране на текст. За разлика от HTML таговете, таговете bbCode са оградени в квадратни скоби. Преди да покаже страницата, машината на форума анализира текста и преобразува bbCode в HTML код.

В много форуми възможността за използване на BB кодове се конфигурира от администратора поотделно за всеки раздел на форума. Ето защо, преди да използвате BB кодове в съобщения, трябва да се уверите, че те са разрешени.

Форматиране на шрифта

Основни тагове за работа с текст:

[p] Нормален абзац с отстъп.

Параграф, който може да бъде стилизиран.
* По-нататък „стил“ е аналог на стила в HTML.
текстът е подобен в HTML

текст

** Можете да използвате други тагове с тагове [p], като [b], [i], [s] и т.н.

Текст, чиито свойства могат да се променят с помощта на стил.

Ограничена област, която може да бъде стилизирана, за да промени своите свойства (позиция, граници, подложка, свойства на съдържанието и т.н.).
* По подразбиране границите на областта не се виждат. На една страница може да има няколко области едновременно.

Форматиране на текст:

[b] Важен текст, удебелен

[i] Важен текст, курсив

Просто смело

Само курсив

[u] Подчертан текст

[s] Зачеркнат текст - същото като опцията

По-малък шрифт

Бележка под линия над или индекс под текста

Изтрит текст

Размери на шрифта:

13 пунктов шрифт

15 пунктов шрифт

Размер на шрифта 9 пиксела

Размер на шрифта 12 пиксела

Размер на шрифта 15 пиксела

Размер 0

Размер +1

Размер +2

Налични са възможни опции за размер на шрифта (визуална оценка).

Заглавия:

Заглавка от ниво 1

Заглавка от ниво 2

Заглавка от ниво 3

Заглавка от ниво 4

Заглавка от ниво 5

Заглавка на ниво 6

Форматиране на текст с помощта на шрифтове:

Шрифт Comic Sans Ms

Шрифт Monotype Corsiva

Шрифт Tahoma

Налични са възможни опции за типове шрифтове (имена и визуална оценка).

Декориране на текст с цвят:

Червен текст
* Можете да използвате стандартни словесни обозначения за цветовете: червено, зелено, синьо и др.

Син текст
* Числото #0000ff означава синьо в RGB палитрата.

Син фон
* Цветът на фона също може да бъде променен.

Син текст, сив фон

Някои предварително дефинирани цветове:

Черно Бяло Червено Зелено Синьо Лилаво Огнеупорна Тухла Кестеняво Оранжево Червено Среднощно Синьо Василево Синьо
Циан Жълто Магента Тъмнозелено ТъмноЗлатна пръчица Златна орхидея Синя Виолетово Бурливуд Праскова

Някои цветове в шестнадесетичния код са интензитетът на червено, зелено и синьо (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

Налични са възможни варианти за цветовата палитра и техните кодове/имена.

Подравняване на текст и форматиране на абзаци

Подравняване на текста:

Подравнете текста вляво

Ляво подравняване със стил

Ляво подравняване в абзац

Централно подравняване на текста

Централно подравняване със стил

Централно подравняване в параграф

Подравнете текста надясно

Правилно подравняване със стил

Подравняване в абзац надясно

Подравнете текста от двете страни

Подравнете от двете страни със стил

Подравняване в абзац от двете страни
* Подравняването на текстовете от двете страни се показва за текстове с дължина повече от един ред.

Форматиране на бележки под линия (коментари) с отстъп на абзац:

[q] Цитат в ред

Оферта в съответствие с имотите

Текст, цитиран в отделен блок, който ще има
малък отстъп отляво и специален дизайн (стил форум).

Примери:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Форматиране на абзаци и области:

Здравейте! В този параграф първото изречение ще бъде от „червената“ линия, т.е. отстъп. Точно като в книгопечатането. Вярно, това е рядка практика в интернет. Параграфите трябва да бъдат разделени само с празни интервали.

Предварително форматираният текст поддържа отстъп отляво и между думите и задава посочения от вас отстъп с интервали. Внимание! Етикетът не прекъсва автоматично линията!

Форматиране на списъци

Използваме маркера или за списъци с водещи символи:

• Един от елементите в списъка
• Друг такъв артикул
• Още една точка.

[*] Друг такъв артикул
[*] Още една точка.

За номерирани списъци използваме етикета:

Един от елементите в списъка

Друг такъв артикул

Още една точка.

[*] Един от елементите в списъка
[*] Друг такъв артикул
[*] Още една точка.

Затварящият етикет не е задължително да се използва:

• Един от елементите в списъка
• Друг такъв артикул
• Още една точка.

[*] Един от елементите в списъка
[*] Друг такъв артикул
[*] Още една точка.

Възможно е също така директно да посочите типа списък:
- номериран списък
- азбучен списък
- списък, номериран с римски цифри

Изображения

Http://img.cx/img/primer.jpg - пример за вмъкване на картина.

Http://img.cx/img/primer.jpg - снимка вляво.

Http://img.cx/img/primer.jpg - снимка вдясно.
* Този код е подобен на кода в HTML:

Http://img.cx/img/primer.jpg - снимка в центъра.
* Този код е подобен на кода в HTML:

Подобни тагове с имена и подсказки:

важно! Не можете да използвате кавички в заглавието на снимката!

Http://img.cx/img/primer.jpg - пример за вмъкване на картина.

Http://img.cx/img/primer.jpg - снимка вляво.

Http://img.cx/img/primer.jpg - снимка вдясно.

Http://img.cx/img/primer.jpg - снимка в центъра.

Снимки с посочени размери:

Http://img.cx/img/primer.jpg - примерна картинка с размер.
* Този код е подобен на кода в HTML:

Http://img.cx/img/primer.jpg - снимка вляво, с размер.

Http://img.cx/img/primer.jpg - снимка в дясно, с размер.

Вмъкване на големи изображения с ленти за превъртане:

Http://www..jpg - изображение в избраната област, ако е по-голямо от наличния размер за показване във форума.

Адрес - отваряне на изображението в нов прозорец.
* Този код е подобен на кода в HTML:

Адрес - отворете изображението в същия прозорец.
* Този код е подобен на кода в HTML:

Скъпи приятели! Днес ще говорим за тага на HTML кода. Когато пишете тази конкретна статия или всякакви други обучителни материали, периодично е необходимо да вмъквате части от HTML, CSS код и изобщо всякакъв програмен код.

Мисля, че вече се досетихте за какво служи тагът на HTML кода. Чрез него казваме на браузъра: „Моля, покажете всичко, което ще бъде поставено в контейнера „код“ като текст.“

…

В противен случай браузърът няма да разбере къде е истинският код и къде е демо кодът и няма да покаже нищо. Тъй като браузърът възприема всички тагове на страницата като команди за показване на съдържание. С други думи, използвайки етикета на HTML кода, самите етикети се показват в прозореца на браузъра, за да демонстрират HTML кода.

Нека разгледаме пример за показване на тагове на страница по-долу:

Показване на етикети на страница

HTML кодов фрагмент

Това е заглавието.

Това е параграф.

Нека да разгледаме резултата от този пример:

Ъглови скоби< >трябва да се замени със специални символи &.. и да се раздели всеки ред с тагове br или p.

По подразбиране браузърите показват съдържанието на тага на HTML кода с шрифт с едно пространство. Това е по-малък шрифт с фиксиран размер.

код (
семейство шрифтове: monospace;
}

Това е нормалният текст:

Това е част от програмния код

Ето как изглежда в браузъра по подразбиране:

Сега нека предефинираме външния вид на кода вътре в тага на кода. Нека зададем семейството шрифтове на елемента: verdana; или всеки друг шрифт.

код (
семейство шрифтове: verdana;
}

Това е нормалният текст:

Това е част от програмния код

Посоченият стил в браузъра.

Между другото, споделянето на вашия положителен или дори отрицателен опит с читателите е в основата на успешното блогване (и).

Много хора имат проблеми, така че такава информация е търсена.

Как да изведете програмен код

И така, искате да позволите на читателите да копират скрипта или html кода, да го поставят в тялото на публикацията. Не така. Как да го изведа без преобразуване?

Съвсем наскоро, за да се показват етикетите правилно на страница, беше предложено ръчно да се заменят знаците< и >за специални знаци< и >.

Днес двигателят на WordPress най-често знае как сам да прави такива трансформации, но също така добавя много боклук, изкривява, съкращава кода, прави го нечетим или невъзможен за копиране (случвало се е в моята тема).

Всъщност има няколко начина за красиво форматиране на HTML код и вмъкване в публикация с подчертаване на синтаксиса: без плъгин и с помощта на WordPress плъгини за кода.

Аз ще изброя методите, а вие пробвайте това, което ви подхожда. Научих от собствен опит, че не всеки шаблон има тагове и плъгини, които работят по един и същи начин. За повече информация относно правилното показване на код вижте урока за HTML.

Показване на html код на страницата като текст. Етикет

Показвайте html кода на страницата като текст, таговете помагат да го подчертаете

Напишете кода във ВИЗУАЛНИЯ РЕДАКТОР.

Отидете в HTML MODE, добавете отварящ и затварящ етикет Моята тема вече има автоматични знаци< >преобразувани в специални знаци< и >.

ЗАПАЗЕТЕ. НЕ превключвайте отново на визуален режим, в противен случай промените ще бъдат загубени.

Всички пространства са ЗАПАЗЕНИ при показване. В моя шаблон получих следния резултат (вашият дисплей може да е различен).

Как да покажа html код на страница с публикация като текст. Етикет

Етикетът също така ви позволява да показвате един или повече редове програмен код. Интервалите и прекъсванията НЕ се вземат предвид, увийте редовете с тагове

Или
.

Направете всичко по същия начин като вмъкването на етикет.

Показване на html код на страницата като текст. Етикет

Ако предлагате кодове на читателите рядко, можете да използвате този дизайн.

ВЪВЕДЕТЕ ВАШИЯ КОД ТУК

Помага за показване на кодове или скриптове под формата на текст, затворен в рамка, КАТО ПРЕДВИД форматирането и всички тирета.

Кодът ще се покаже в красива рамка. Редактирайте ширината му, като промените параметъра ширина, височина - височина.

Но факт е, че КОДОВЕТЕ, използващи етикета, се считат за НЕВАЛИДНИ.Урокът за HTML предлага вмъкване на този етикет само в тази форма.

Плъгини за показване на код на страницата за публикация

Повечето блогъри използват приставки за WordPress, за да показват красиво и последователно HTML кодовете на страницата за публикации. Отново, има много плъгини, но само един работи правилно за мен.

Ще предоставя списък, а вие ще изберете плъгин, който работи с вашия шаблон.

Сладка двойка WP-синтаксис – подчертава кода с рамка и прави възможно подчертаването на синтаксиса. Плюс бутон wp-синтаксис – показва бутон в административния панел на блога, предоставя възможност за вмъкване на HTML код или скрипт, без да го конвертирате в специален прозорец. Недостатък: всички действия се извършват в html режим; не можете да превключите към визуален режим, в противен случай всички промени ще изчезнат.

Компресиране на синтаксисен маркер – показва допълнителен бутон в текстов редактор. Щракнете върху него, отваря се прозорец, в който можете да въведете кода и да изберете езика за програмиране.

Други добавки работят по същия начин.

• По-добър синтаксис на WordPress
• Wp-highlight.js
• SyntaxHighlighter
• Auto SyntaxHighlighter (моя). И много други добавки.

Трябваше да инсталирам и активирам всичко едно по едно, докато намеря това, което работи в моя шаблон.

Заключение

И така, от статията научихте как можете да показвате HTML код на страница с публикации с помощта на тагове или добавки. Какъв метод използвате за вмъкване на html тагове в обикновен текст без преобразуване?

Специалните символи в HTML са кратки части от код, наречени символни обекти. Те се използват за показване на символи, които имат специално значение в HTML, както и знаци, които не са налични на клавиатурата.

Специалните знаци в HTML се наричат ​​запазени знаци. Например левите () ъглови скоби са запазени в HTML за дефиниране на отварящи и затварящи тагове.

Символите, които не са налични на клавиатурата, включват знаци като символа за авторско право (©) и математическата стойност pi.

Ако искаме да ги използваме в документ и да ги покажем в браузъра, трябва да използваме препратки към HTML знаци.

Казус

Да приемем, че искате да покажете блок от HTML код на уеб страница и да покажете тагове на елементи. Можете да направите това, като просто поставите HTML блок в . Но ще откриете, че дори в , блокът все още ще бъде третиран като HTML код и съответно изобразен от браузъра. В този случай можете да замените всички HTML специални знаци със съответните символни връзки, за да попречите на браузъра да анализира кода:

Това е списък с елементи.

• Елемент А от списъка
• Списък Елемент Б
• Списък Елемент C