Фев
15th

HTML в «контенте» страницы

Термины:

«Контент»(content) переводится как «содержимое». Контент страницы вы вводите в админке на странице «Админ меню->Страницы->Добавить новую» в текстовое поле по центру экрана.
statia-html

«тэг»(tag) переводится как «ветка». HTML документ это ствол дерева. На стволе есть ветки, у которых есть ветки, у которых есть ветки. Вложенность веток не ограничена

«атрибут»(attribute) в HTML означает свойство тэга. имя атрибута(свойства) и его значение пишут как в арифметике, через равно: width = "100" что означает ширина = 100.

атрибут "class", "id" — это свойство тега, определяющее его внешний вид. Если наш тег имеет атрибут class="my_class", то его вид будет такой, каким мы его определим в .CSS-файле

HTML просто и доходчиво

Если выбрана вкладка «текст» то в содержимое страницы можно вставлять HTML-код. Зачем он нужен? HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»;) позволяет разметить(сверстать, правильно расположить) элементы вашего содержания: текст и картинки. Для этого в текст вручную вставляются невидимые для посетителя сайта символы(которые называются «тэг»). Если вы работали в программе «Word», то знаете что там тоже есть невидимые символы, например: переноса строки и разрыва страницы(эти символы разные у HTML и Word). Разберём наиболее полезные тэги языка HTML.

Тэг <BR> — означает "перенос строки" (в Word вставляется по нажатию «Enter» или «Ввод». Но в отличие от HTML, Word после такого переноса создаёт новый параграф.). Как вы заметили, BR заключено в треугольные скобки, которые делают его невидимым. BR — сокращение от Break — разрыв.

Тэг <p>текст параграфа</p> — означает "Параграф" — отдельный по смыслу участок текста. Отделяется от остального текста путём добавления снизу пустой строки(как правило). Естественно(из школьного курса) этот и следующий участок текста начинается с новой строки. Обратите внимание: есть открывающий <p> и закрывающий невидимый тег </p>, а между ними — видимый текст параграфа. Как параграф сделать в Word — только что рассматривали.

Тэг <div>текст блока</div> — означает "блок" — отдельный прямоугольник на странице. В Word можно добиться того же эффекта если создать таблицу из одной ячейки и поместить в неё текст или картинку. По умолчанию, его ширина — на всю страницу, высота -по высоте текста.
Сегодня с помощью этого элемента производится 90% вёрстки страницы. Поэтому, если вы увидите тэг div знайте, что с его помощью можно:

  • Создать прямоугольную область любого размера
  • Разместить её в любом месте на экране
  • Задать ей тень, рамку любого цвета
  • Расположить в ней текст, изображение
  • Задать фон одноцветный или с градиентом

Тэг < *** >текст блока</ *** > — вместо *** может быть любое слово(без пробелов в нём) — означает "блок" — это тоже блок.

Тэг <img src="http://example.com/img.jpg" alt="Здесь должна быть моя картинка " title="Это моя картинка" width="200" height="100" > — означает "показать картинку, расположенную по ссылке http://example.com/img.jpg, шириной 200 точек высотой 100 точек, при наведении на неё курсора мыши подписать: "Это моя картинка" а если её нет по адресу http://example.com/img.jpg, то вместо неё написать "Здесь должна быть моя картинка &quot ". Заметим, что если атрибуты width и height не указаны, то картинка будет показана в натуральную величину

Тэг <a ΗREF= "http://example.com/page.html" title="По нажатию перейти на страницу page">Видимый текст</a> — означает что слова «Видимый текст» теперь ссылка, по нажатию на неё вы отправитесь на страницу "http://example.com/page.html". При наведении курсора мыши на ссылку подписать: "По нажатию перейти на страницу page"
Стоит заметить, что вместо "Видимый текст " может быть картинка, блок или даже всё содержание страницы вместе с блоками, картинками, параграфами

Высший пилотаж

выравнивание текста по центру производится тегами <center>Текст по центру</center>. Получаем:

Текст по центру.

Заголовки — это такой параграф. только вместо «p» у него буква "H1", "H2", "H3". <H1>Текст заголовка 1</H1> — это самый главный, самый толстый заголовок, он на странице должен быть один.

<H2>Текст заголовка 1</H2> -чем больше цифра тем меньше заголовок. Как правило, заголовка меньше 4..5 — не бывает на странице.

Списки — прямо как в Word — с пунктиками 1) 2) 3) или с точечками вместо них.Рассмотрим тип списка с точечками. пишем:<ul></ul> — это тэг «ненумерованный список», в нём создаём тэги элемента списка <li>Текст элемента 1</li><li>Текст элемента 2</li>. А теперь соединяем их:<ul><li>Текст элемента 1</li><li>Текст элемента 2</li></ul>. Получаем:

  • Текст элемента 1
  • Текст элемента 2

Кнопочки оформления текста в WordPress

Эти кнопочки мы уже сегодня видели.
statia-html

Кнопочка «B» — BOLD(жирный). Вставляет тег <strong>жирный текст</strong> — получаем жирный текст

Кнопочка «i» — italic(курсив). Вставляет тег <em>выделенный текст</em> — получаем курсив

Кнопочка «link» — link(ссылка). Вставляет тег <a>это ссылка</a> — с ним мы уже знакомы

Кнопочка «img» — image(картинка). Вставляет тег <img> — с ним тоже знакомы

Кнопочка «ul» , «ol» , «li» — «ненумерованный список», «нумерованный список», «элемент списка» — тоже разбирали.

Кнопочка «b-quote» — blockquote(цитата). Это значит что вы где-то спёрли текст, вставили на свой сайт и боитесь, что вас обвинять в плагиате. Поэтому используете теги <blockquote>краденный текст</em> — получаем

Так выделяется цитата

Кнопочка «code» — код(например код на языке С# или Паскаль). Вставляет тег <code>код программы</code> — получаем код программы

Кнопочка «more» — читать далее. Это не тэг. Это невидимый текст (комментарий называется). Если он есть то текст статьи в рубрике отображается до этого знака, а полный текст — только в тексте статьи. Вставляет <!—more—>

Вы должны быть авторизованы чтобы добавить комментарий.